xuyue/ojnext
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
yuetsh
2025-10-05 09:54:42 +08:00
parent 719f315405
commit 04c6c49eaa
7 changed files with 394 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/shared/components/CodeEditor.vue
View File

@@ -7,18 +7,8 @@ import type { Extension } from "@codemirror/state"
import { LANGUAGE } from "~/utils/types"
import { oneDark } from "../themes/oneDark"
import { smoothy } from "../themes/smoothy"
import { useCodeSync } from "../composables/sync"
import { isDesktop } from "../composables/breakpoints"
interface EditorReadyPayload {
view: EditorView
state: any
container: HTMLElement
}
interface Props {
sync?: boolean
problem?: string
language?: LANGUAGE
fontSize?: number
height?: string
@@ -27,8 +17,6 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
sync: false,
problem: "",
language: "Python3",
fontSize: 20,
height: "100%",
@@ -39,13 +27,6 @@ const props = withDefaults(defineProps<Props>(), {
const { readonly, placeholder, height, fontSize } = toRefs(props)
const code = defineModel<string>("value")
const emit = defineEmits<{
syncClosed: []
syncStatusChange: [
status: { otherUser?: { name: string; isSuperAdmin: boolean } },
]
}>()
const isDark = useDark()
const styleTheme = EditorView.baseTheme({
@@ -64,66 +45,7 @@ const extensions = computed(() => [
styleTheme,
lang.value,
isDark.value ? oneDark : smoothy,
getInitialExtension(),
])
const { startSync, stopSync, getInitialExtension } = useCodeSync()
const editorView = ref<EditorView | null>(null)
let cleanupSync: (() => void) | null = null
const cleanupSyncResources = () => {
if (cleanupSync) {
cleanupSync()
cleanupSync = null
}
stopSync()
}
const initSync = async () => {
if (!editorView.value || !props.problem || !isDesktop.value) return
cleanupSyncResources()
cleanupSync = await startSync({
problemId: props.problem,
editorView: editorView.value as EditorView,
onStatusChange: (status) => {
if (status.error === "超管已离开" && !status.connected) {
emit("syncClosed")
}
emit("syncStatusChange", { otherUser: status.otherUser })
},
})
}
const handleEditorReady = (payload: EditorReadyPayload) => {
editorView.value = payload.view as EditorView
if (props.sync) {
initSync()
}
}
watch(
() => props.sync,
(shouldSync) => {
if (shouldSync) {
initSync()
} else {
cleanupSyncResources()
}
},
)
watch(
() => props.problem,
(newProblem, oldProblem) => {
if (newProblem !== oldProblem && props.sync) {
initSync()
}
},
)
onUnmounted(cleanupSyncResources)
</script>
<template>
@@ -135,6 +57,5 @@ onUnmounted(cleanupSyncResources)
:tab-size="4"
:placeholder="placeholder"
:style="{ height, fontSize: `${fontSize}px` }"
@ready="handleEditorReady"
/>
</template>
</template>

138
src/shared/components/SyncCodeEditor.vue Normal file
View File

@@ -0,0 +1,138 @@
<script lang="ts" setup>
import { cpp } from "@codemirror/lang-cpp"
import { python } from "@codemirror/lang-python"
import { EditorView } from "@codemirror/view"
import { Codemirror } from "vue-codemirror"
import type { Extension } from "@codemirror/state"
import { LANGUAGE } from "~/utils/types"
import { oneDark } from "../themes/oneDark"
import { smoothy } from "../themes/smoothy"
import { useCodeSync } from "../composables/sync"
import { isDesktop } from "../composables/breakpoints"
interface EditorReadyPayload {
view: EditorView
state: any
container: HTMLElement
}
interface Props {
sync: boolean
problem: string
language?: LANGUAGE
fontSize?: number
height?: string
readonly?: boolean
placeholder?: string
}
const props = withDefaults(defineProps<Props>(), {
language: "Python3",
fontSize: 20,
height: "100%",
readonly: false,
placeholder: "",
})
const { readonly, placeholder, height, fontSize } = toRefs(props)
const code = defineModel<string>("value")
const emit = defineEmits<{
syncClosed: []
syncStatusChange: [
status: { otherUser?: { name: string; isSuperAdmin: boolean } },
]
}>()
const isDark = useDark()
const styleTheme = EditorView.baseTheme({
"& .cm-scroller": { "font-family": "Monaco" },
"&.cm-editor.cm-focused": { outline: "none" },
"&.cm-editor .cm-tooltip.cm-tooltip-autocomplete ul": {
"font-family": "Monaco",
},
})
const lang = computed((): Extension => {
return ["Python2", "Python3"].includes(props.language) ? python() : cpp()
})
const extensions = computed(() => [
styleTheme,
lang.value,
isDark.value ? oneDark : smoothy,
getInitialExtension(),
])
const { startSync, stopSync, getInitialExtension } = useCodeSync()
const editorView = ref<EditorView | null>(null)
let cleanupSync: (() => void) | null = null
const cleanupSyncResources = () => {
if (cleanupSync) {
cleanupSync()
cleanupSync = null
}
stopSync()
}
const initSync = async () => {
if (!editorView.value || !props.problem || !isDesktop.value) return
cleanupSyncResources()
cleanupSync = await startSync({
problemId: props.problem,
editorView: editorView.value as EditorView,
onStatusChange: (status) => {
if (status.error === "超管已离开" && !status.connected) {
emit("syncClosed")
}
emit("syncStatusChange", { otherUser: status.otherUser })
},
})
}
const handleEditorReady = (payload: EditorReadyPayload) => {
editorView.value = payload.view as EditorView
if (props.sync) {
initSync()
}
}
watch(
() => props.sync,
(shouldSync) => {
if (shouldSync) {
initSync()
} else {
cleanupSyncResources()
}
},
)
watch(
() => props.problem,
(newProblem, oldProblem) => {
if (newProblem !== oldProblem && props.sync) {
initSync()
}
},
)
onUnmounted(cleanupSyncResources)
</script>
<template>
<Codemirror
v-model="code"
indentWithTab
:extensions="extensions"
:disabled="readonly"
:tab-size="4"
:placeholder="placeholder"
:style="{ height, fontSize: `${fontSize}px` }"
@ready="handleEditorReady"
/>
</template>

29
src/shared/composables/sync.ts
View File

@@ -121,7 +121,7 @@ export function useCodeSync() {
},
onStatusChange,
)
message.warning(`超管 ${superAdminInfo.name} 已退出`)
message.warning(`🎈 超管 ${superAdminInfo.name} 溜了，协同编辑已断开连接`)
stopSync()
}
}
@@ -150,7 +150,7 @@ export function useCodeSync() {
onStatusChange,
)
if (lastSyncState !== "error") {
message.warning("协同编辑需要至少一个超级管理员")
message.warning("🎓 协同编辑需要一位超级管理员坐镇哦")
lastSyncState = "error"
}
} else if (canSync) {
@@ -159,13 +159,13 @@ export function useCodeSync() {
connected: true,
roomUsers,
canSync: true,
message: "协同编辑已激活，可以开始协作！",
message: "🎉 协同编辑已激活，开始愉快的代码之旅吧！",
otherUser,
},
onStatusChange,
)
if (lastSyncState !== "active") {
message.success("协同编辑已激活，可以开始协作！")
message.success("🎉 协同编辑已激活，开始愉快的代码之旅吧！")
lastSyncState = "active"
}
} else {
@@ -174,7 +174,7 @@ export function useCodeSync() {
connected: true,
roomUsers,
canSync: false,
message: roomUsers === 1 ? "正在等待加入" : "等待超级管理员加入...",
message: roomUsers === 1 ? "👋 正在等待小伙伴加入..." : "🎓 等待超级管理员加入...",
otherUser,
},
onStatusChange,
@@ -213,17 +213,6 @@ export function useCodeSync() {
const { problemId, editorView, onStatusChange } = options
if (!userStore.isAuthed) {
updateStatus(
{
connected: false,
roomUsers: 0,
canSync: false,
message: "请先登录后再使用同步功能",
error: "用户未登录",
},
onStatusChange,
)
message.error("请先登录后再使用同步功能")
return () => {}
}
@@ -260,7 +249,7 @@ export function useCodeSync() {
},
onStatusChange,
)
message.warning("协同编辑连接已断开")
message.warning("📡 协同编辑连接断开了，可能网络不太稳定呢")
}
})
@@ -280,7 +269,7 @@ export function useCodeSync() {
onStatusChange,
)
message.warning(
`房间人数已满（最多${SYNC_CONSTANTS.MAX_ROOM_USERS}人），已自动断开连接`,
`🚪 哎呀，房间已经坐满了（最多${SYNC_CONSTANTS.MAX_ROOM_USERS}人），已自动断开连接`,
)
stopSync()
return
@@ -349,13 +338,13 @@ export function useCodeSync() {
connected: true,
roomUsers: 1,
canSync: false,
message: "正在等待加入",
message: "🚀 协同编辑已准备就绪，等待伙伴加入...",
},
onStatusChange,
)
message.info(
userStore.isSuperAdmin ? "正在等待学生加入..." : "正在等待超管加入...",
userStore.isSuperAdmin ? "👀 正在等待学生加入房间..." : "🎯 正在等待超管加入房间...",
)
lastSyncState = "waiting"
}