协同编辑代码

2025-10-05 01:18:00 +08:00
parent fce96f2087
commit 7b139d404e
18 changed files with 1728 additions and 161 deletions
--- a/src/oj/problem/components/Editor.vue
+++ b/src/oj/problem/components/Editor.vue
@@ -5,56 +5,90 @@ import { SOURCES } from "utils/constants"
 import CodeEditor from "~/shared/components/CodeEditor.vue"
 import { isDesktop } from "~/shared/composables/breakpoints"
 import storage from "~/utils/storage"
+import { LANGUAGE } from "~/utils/types"
 import Form from "./Form.vue"

 const route = useRoute()
-const contestID = !!route.params.contestID ? route.params.contestID : null
+const formRef = useTemplateRef<InstanceType<typeof Form>>("formRef")

+const sync = ref(false)
+const otherUserInfo = ref<{ name: string; isSuperAdmin: boolean }>()
+const hadConnection = ref(false)
+
+const contestID = route.params.contestID || null
 const storageKey = computed(
  () =>
    `problem_${problem.value!._id}_contest_${contestID}_lang_${code.language}`,
 )

-onMounted(() => {
-  if (storage.get(storageKey.value)) {
-    code.value = storage.get(storageKey.value)
-  } else {
-    code.value =
-      problem.value!.template[code.language] || SOURCES[code.language]
-  }
-})
-
 const editorHeight = computed(() =>
  isDesktop.value ? "calc(100vh - 133px)" : "calc(100vh - 172px)",
 )

-function changeCode(v: string) {
+onMounted(() => {
+  const savedCode = storage.get(storageKey.value)
+  code.value =
+    savedCode ||
+    problem.value!.template[code.language] ||
+    SOURCES[code.language]
+})
+
+const changeCode = (v: string) => {
  storage.set(storageKey.value, v)
 }

-function changeLanguage(v: string) {
-  if (
-    storage.get(storageKey.value) &&
-    storageKey.value.split("_").pop() === v
-  ) {
-    code.value = storage.get(storageKey.value)
-  } else {
-    code.value =
-      problem.value!.template[code.language] || SOURCES[code.language]
+const changeLanguage = (v: LANGUAGE) => {
+  const savedCode = storage.get(storageKey.value)
+  code.value =
+    savedCode && storageKey.value.split("_").pop() === v
+      ? savedCode
+      : problem.value!.template[code.language] || SOURCES[code.language]
+}
+
+const toggleSync = (value: boolean) => {
+  sync.value = value
+  if (!value) {
+    hadConnection.value = false
+  }
+}
+
+const handleSyncClosed = () => {
+  sync.value = false
+  otherUserInfo.value = undefined
+  hadConnection.value = false
+  formRef.value?.resetSyncStatus()
+}
+
+const handleSyncStatusChange = (status: {
+  otherUser?: { name: string; isSuperAdmin: boolean }
+}) => {
+  otherUserInfo.value = status.otherUser
+  if (status.otherUser) {
+    hadConnection.value = true
  }
 }
 </script>

 <template>
  <n-flex vertical>
-    <Form :storage-key="storageKey" @change-language="changeLanguage" />
+    <Form
+      ref="formRef"
+      :storage-key="storageKey"
+      :other-user-info="otherUserInfo"
+      :is-synced="sync"
+      :had-connection="hadConnection"
+      @change-language="changeLanguage"
+      @toggle-sync="toggleSync"
+    />
    <CodeEditor
      v-model:value="code.value"
-      @update:model-value="changeCode"
+      :sync="sync"
+      :problem="problem!._id"
      :language="code.language"
      :height="editorHeight"
+      @update:model-value="changeCode"
+      @sync-closed="handleSyncClosed"
+      @sync-status-change="handleSyncStatusChange"
    />
  </n-flex>
 </template>
-
-<style scoped></style>
--- a/src/oj/problem/components/Form.vue
+++ b/src/oj/problem/components/Form.vue
@@ -15,151 +15,187 @@ import IconButton from "~/shared/components/IconButton.vue"
 interface Props {
  storageKey: string
  withTest?: boolean
+  otherUserInfo?: { name: string; isSuperAdmin: boolean }
+  isSynced?: boolean
+  hadConnection?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
  withTest: false,
+  isSynced: false,
+  hadConnection: false,
 })

+const emit = defineEmits<{
+  changeLanguage: [v: LANGUAGE]
+  toggleSync: [v: boolean]
+}>()
+
 const message = useMessage()
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()

-const emit = defineEmits(["changeLanguage"])
-
+const isSynced = ref(false)
 const statisticPanel = ref(false)

-function copy() {
-  copyText(code.value)
-  message.success("代码复制成功")
-}
-
-function reset() {
-  code.value = problem.value!.template[code.language] || SOURCES[code.language]
-  storage.remove(props.storageKey)
-  message.success("代码重置成功")
-}
-
-function goSubmissions() {
-  const name = !!route.params.contestID ? "contest submissions" : "submissions"
-  router.push({ name, query: { problem: problem.value!._id } })
-}
-
-function goEdit() {
-  let data = router.resolve("/admin/problem/edit/" + problem.value!.id)
-  if (problem.value!.contest) {
-    data = router.resolve(
-      `/admin/contest/${problem.value!.contest}/problem/edit/${problem.value!.id}`,
-    )
-  }
-  window.open(data.href, "_blank")
-}
-
-async function test() {
-  const res = await createTestSubmission(code, input.value)
-  output.value = res.output
-}
-
 const menu = computed<DropdownOption[]>(() => [
  { label: "去自测猫", key: "test", show: isMobile.value },
  { label: "复制代码", key: "copy" },
  { label: "重置代码", key: "reset" },
 ])

-const options: DropdownOption[] = problem.value!.languages.map((it) => ({
-  label: () => [
-    h("img", {
-      src: `/${it}.svg`,
-      style: {
-        width: "16px",
-        height: "16px",
-        marginRight: "8px",
-        transform: "translateY(3px)",
-      },
-    }),
-    LANGUAGE_SHOW_VALUE[it],
-  ],
+const languageOptions: DropdownOption[] = problem.value!.languages.map((it) => ({
+  label: () =>
+    h("div", { style: "display: flex; align-items: center;" }, [
+      h("img", {
+        src: `/${it}.svg`,
+        style: { width: "16px", height: "16px", marginRight: "8px" },
+      }),
+      LANGUAGE_SHOW_VALUE[it],
+    ]),
  value: it,
 }))

-async function select(key: string) {
-  switch (key) {
-    case "reset":
-      reset()
-      break
-    case "copy":
-      copy()
-      break
-    case "test":
-      window.open(import.meta.env.PUBLIC_CODE_URL, "_blank")
-      break
-  }
+const copy = () => {
+  copyText(code.value)
+  message.success("代码复制成功")
 }

-function changeLanguage(v: LANGUAGE) {
+const reset = () => {
+  code.value = problem.value!.template[code.language] || SOURCES[code.language]
+  storage.remove(props.storageKey)
+  message.success("代码重置成功")
+}
+
+const goSubmissions = () => {
+  const name = route.params.contestID ? "contest submissions" : "submissions"
+  router.push({ name, query: { problem: problem.value!._id } })
+}
+
+const goEdit = () => {
+  const baseUrl = "/admin/problem/edit/" + problem.value!.id
+  const url = problem.value!.contest
+    ? `/admin/contest/${problem.value!.contest}/problem/edit/${problem.value!.id}`
+    : baseUrl
+  window.open(router.resolve(url).href, "_blank")
+}
+
+const test = async () => {
+  const res = await createTestSubmission(code, input.value)
+  output.value = res.output
+}
+
+const handleMenuSelect = (key: string) => {
+  const actions: Record<string, () => void> = {
+    reset,
+    copy,
+    test: () => window.open(import.meta.env.PUBLIC_CODE_URL, "_blank"),
+  }
+  actions[key]?.()
+}
+
+const changeLanguage = (v: LANGUAGE) => {
  storage.set(STORAGE_KEY.LANGUAGE, v)
  emit("changeLanguage", v)
 }

-function gotoTestCat() {
-  const url = import.meta.env.PUBLIC_CODE_URL
-  window.open(url, "_blank")
+const toggleSync = () => {
+  isSynced.value = !isSynced.value
+  emit("toggleSync", isSynced.value)
 }

-function showStatisticsPanel() {
-  statisticPanel.value = true
+const gotoTestCat = () => {
+  window.open(import.meta.env.PUBLIC_CODE_URL, "_blank")
 }
+
+defineExpose({
+  resetSyncStatus: () => {
+    isSynced.value = false
+  },
+})
 </script>

 <template>
  <n-flex align="center">
    <n-select
-      class="language"
      v-model:value="code.language"
-      @update:value="changeLanguage"
+      class="language"
      :size="isDesktop ? 'medium' : 'small'"
-      :options="options"
+      :options="languageOptions"
+      @update:value="changeLanguage"
    />
-    <n-button v-if="withTest" @click="reset">重置代码</n-button>
-    <n-button v-if="withTest" type="primary" secondary @click="test">
-      运行代码
-    </n-button>
-    <n-flex align="center" v-if="!withTest">
+    
+    <template v-if="withTest">
+      <n-button @click="reset">重置代码</n-button>
+      <n-button type="primary" secondary @click="test">运行代码</n-button>
+    </template>
+
+    <n-flex v-else align="center">
      <Submit />
-      <n-button v-if="isDesktop" @click="gotoTestCat">自测猫</n-button>
+      
      <n-button
-        :size="isDesktop ? 'medium' : 'small'"
        v-if="!userStore.isSuperAdmin && userStore.showSubmissions"
+        :size="isDesktop ? 'medium' : 'small'"
        @click="goSubmissions"
      >
        提交信息
      </n-button>
+      
      <n-button
-        :size="isDesktop ? 'medium' : 'small'"
        v-if="userStore.isSuperAdmin"
-        @click="showStatisticsPanel"
+        :size="isDesktop ? 'medium' : 'small'"
+        @click="statisticPanel = true"
      >
        {{ isDesktop ? "统计信息" : "统计" }}
      </n-button>
-      <n-dropdown size="large" :options="menu" @select="select">
+      
+      <n-button v-if="isDesktop" @click="gotoTestCat">自测猫</n-button>
+      
+      <n-dropdown size="large" :options="menu" @select="handleMenuSelect">
        <n-button :size="isDesktop ? 'medium' : 'small'">操作</n-button>
      </n-dropdown>
+      
      <IconButton
+        v-if="isDesktop && userStore.isSuperAdmin"
        icon="streamline-ultimate-color:file-code-edit"
        tip="编辑题目"
-        v-if="isDesktop && userStore.isSuperAdmin"
        @click="goEdit"
      />
+      
+      <IconButton
+        v-if="isDesktop && userStore.isAuthed"
+        :icon="
+          isSynced
+            ? 'streamline-stickies-color:earpod-connected'
+            : 'streamline-stickies-color:earpod-connected-duo'
+        "
+        :tip="isSynced ? '断开同步' : '打开同步'"
+        :type="isSynced ? 'info' : 'default'"
+        @click="toggleSync"
+      />
+      
+      <template v-if="props.isSynced">
+        <n-tag v-if="otherUserInfo" type="info">
+          与 {{ otherUserInfo.name }} 同步中
+        </n-tag>
+        <n-tag
+          v-if="userStore.isSuperAdmin && !otherUserInfo && hadConnection"
+          type="warning"
+        >
+          学生已退出，可以关闭同步
+        </n-tag>
+      </template>
    </n-flex>
  </n-flex>
+
  <n-modal
    v-if="userStore.isSuperAdmin"
    v-model:show="statisticPanel"
    preset="card"
+    title="提交记录的统计"
    :style="{ maxWidth: isDesktop && '70vw', maxHeight: '80vh' }"
    :content-style="{ overflow: 'auto' }"
-    title="提交记录的统计"
  >
    <StatisticsPanel :problem="problem!._id" username="" />
  </n-modal>
--- a/src/oj/problem/components/ProblemSubmission.vue
+++ b/src/oj/problem/components/ProblemSubmission.vue
@@ -3,14 +3,12 @@ import { NButton } from "naive-ui"
 import { getSubmissions, getRankOfProblem } from "~/oj/api"
 import Pagination from "~/shared/components/Pagination.vue"
 import SubmissionResultTag from "~/shared/components/SubmissionResultTag.vue"
-import { useConfigStore } from "~/shared/store/config"
 import { useUserStore } from "~/shared/store/user"
 import { LANGUAGE_SHOW_VALUE } from "~/utils/constants"
 import { parseTime } from "~/utils/functions"
 import { renderTableTitle } from "~/utils/renders"
 import { Submission } from "~/utils/types"

-const configStore = useConfigStore()
 const userStore = useUserStore()
 const route = useRoute()
 const router = useRouter()
@@ -117,7 +115,7 @@ watch(query, listSubmissions)
  <n-alert
    class="tip"
    type="error"
-    v-if="!userStore.showSubmissions"
+    v-if="!userStore.showSubmissions || !userStore.isAuthed"
    :title="errorMsg"
  />

@@ -126,11 +124,12 @@ watch(query, listSubmissions)
      <n-alert class="tip" type="success" :show-icon="false" v-if="rank !== -1">
        <template #header>
          <n-flex align="center">
-            <div>
+            <span>
              本道题你在班上排名第 <b>{{ rank }}</b
              >，你们班共有 <b>{{ class_ac_count }}</b> 人答案正确
-            </div>
+            </span>
            <n-button
+              secondary
              v-if="userStore.showSubmissions"
              @click="
                router.push({
@@ -157,12 +156,10 @@ watch(query, listSubmissions)
        v-if="rank === -1 && class_ac_count > 0"
      >
        <template #header>
-          <n-flex>
-            <div>
-              本道题你还没有解决，
-              <div v-if="class_name">你们班</div>
-              共有 <b>{{ class_ac_count }}</b> 人答案正确
-            </div>
+          <n-flex align="center">
+            <span>
+              本道题你还没有解决，你们班共有 <b>{{ class_ac_count }}</b> 人答案正确
+            </span>
            <n-button
              v-if="userStore.showSubmissions"
              secondary
@@ -189,11 +186,10 @@ watch(query, listSubmissions)
      <n-alert class="tip" type="success" :show-icon="false" v-if="rank !== -1">
        <template #header>
          <n-flex align="center">
-            <div>
+            <span>
              本道题你在全服排名第 <b>{{ rank }}</b
              >，全服共有 <b>{{ all_ac_count }}</b> 人答案正确
-            </div>
-            <div></div>
+            </span>
            <n-button
              secondary
              v-if="userStore.showSubmissions"
@@ -222,10 +218,9 @@ watch(query, listSubmissions)
      >
        <template #header>
          <n-flex align="center">
-            <div>
-              本道题你还没有解决，全服共有
-              <b>{{ all_ac_count }}</b> 人答案正确
-            </div>
+            <span>
+              本道题你还没有解决，全服共有 <b>{{ all_ac_count }}</b> 人答案正确
+            </span>
            <n-button
              v-if="userStore.showSubmissions"
              secondary
@@ -249,8 +244,8 @@ watch(query, listSubmissions)
    </template>
  </template>

-  <template v-if="userStore.showSubmissions">
-    <n-data-table striped :columns="columns" :data="submissions" />
+  <template v-if="userStore.showSubmissions && userStore.isAuthed">
+    <n-data-table v-if="submissions.length > 0" striped :columns="columns" :data="submissions" />
    <Pagination
      :total="total"
      v-model:limit="query.limit"