batch update

2025-10-08 00:46:49 +08:00
parent b8c622dde1
commit b14316b919
48 changed files with 1236 additions and 735 deletions
--- a/src/oj/problem/components/ContestEditor.vue
+++ b/src/oj/problem/components/ContestEditor.vue
@@ -1,19 +1,26 @@
 <script lang="ts" setup>
-import { code } from "oj/composables/code"
-import { problem } from "oj/composables/problem"
+import { storeToRefs } from "pinia"
+import { useCodeStore } from "oj/store/code"
+import { useProblemStore } from "oj/store/problem"
 import { SOURCES } from "utils/constants"
 import CodeEditor from "shared/components/CodeEditor.vue"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import storage from "utils/storage"
 import { LANGUAGE } from "utils/types"
 import Form from "./Form.vue"

 const route = useRoute()

+const codeStore = useCodeStore()
+const problemStore = useProblemStore()
+const { problem } = storeToRefs(problemStore)
+
+const { isDesktop } = useBreakpoints()
+
 const contestID = route.params.contestID || null
 const storageKey = computed(
  () =>
-    `problem_${problem.value!._id}_contest_${contestID}_lang_${code.language}`,
+    `problem_${problem.value!._id}_contest_${contestID}_lang_${codeStore.code.language}`,
 )

 const editorHeight = computed(() =>
@@ -22,10 +29,11 @@ const editorHeight = computed(() =>

 onMounted(() => {
  const savedCode = storage.get(storageKey.value)
-  code.value =
+  codeStore.setCode(
    savedCode ||
-    problem.value!.template[code.language] ||
-    SOURCES[code.language]
+      problem.value!.template[codeStore.code.language] ||
+      SOURCES[codeStore.code.language],
+  )
 })

 const changeCode = (v: string) => {
@@ -34,10 +42,12 @@ const changeCode = (v: string) => {

 const changeLanguage = (v: LANGUAGE) => {
  const savedCode = storage.get(storageKey.value)
-  code.value =
+  codeStore.setCode(
    savedCode && storageKey.value.split("_").pop() === v
      ? savedCode
-      : problem.value!.template[code.language] || SOURCES[code.language]
+      : problem.value!.template[codeStore.code.language] ||
+          SOURCES[codeStore.code.language],
+  )
 }
 </script>

@@ -45,8 +55,8 @@ const changeLanguage = (v: LANGUAGE) => {
  <n-flex vertical>
    <Form :storage-key="storageKey" @change-language="changeLanguage" />
    <CodeEditor
-      v-model:value="code.value"
-      :language="code.language"
+      v-model:value="codeStore.code.value"
+      :language="codeStore.code.language"
      :height="editorHeight"
      @update:model-value="changeCode"
    />
--- a/src/oj/problem/components/EditorForTest.vue
+++ b/src/oj/problem/components/EditorForTest.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { code, input, output } from "oj/composables/code"
-import { problem } from "oj/composables/problem"
+import { storeToRefs } from "pinia"
+import { useCodeStore } from "oj/store/code"
+import { useProblemStore } from "oj/store/problem"
 import { SOURCES } from "utils/constants"
 import CodeEditor from "shared/components/CodeEditor.vue"
 import storage from "utils/storage"
@@ -13,17 +14,24 @@ const message = useMessage()
 const route = useRoute()
 const contestID = !!route.params.contestID ? route.params.contestID : null

+const codeStore = useCodeStore()
+const problemStore = useProblemStore()
+const { input, output } = storeToRefs(codeStore)
+const { problem } = storeToRefs(problemStore)
+
 const storageKey = computed(
  () =>
-    `problem_${problem.value!._id}_contest_${contestID}_lang_${code.language}`,
+    `problem_${problem.value!._id}_contest_${contestID}_lang_${codeStore.code.language}`,
 )

 onMounted(() => {
  if (storage.get(storageKey.value)) {
-    code.value = storage.get(storageKey.value)
+    codeStore.setCode(storage.get(storageKey.value))
  } else {
-    code.value =
-      problem.value!.template[code.language] || SOURCES[code.language]
+    codeStore.setCode(
+      problem.value!.template[codeStore.code.language] ||
+        SOURCES[codeStore.code.language],
+    )
  }
 })

@@ -36,26 +44,31 @@ function changeLanguage(v: string) {
    storage.get(storageKey.value) &&
    storageKey.value.split("_").pop() === v
  ) {
-    code.value = storage.get(storageKey.value)
+    codeStore.setCode(storage.get(storageKey.value))
  } else {
-    code.value =
-      problem.value!.template[code.language] || SOURCES[code.language]
+    codeStore.setCode(
+      problem.value!.template[codeStore.code.language] ||
+        SOURCES[codeStore.code.language],
+    )
  }
 }

 const copy = async () => {
-  const success = await copyToClipboard(code.value)
+  const success = await copyToClipboard(codeStore.code.value)
  message[success ? "success" : "error"](`代码复制${success ? "成功" : "失败"}`)
 }

 const reset = () => {
-  code.value = problem.value!.template[code.language] || SOURCES[code.language]
+  codeStore.setCode(
+    problem.value!.template[codeStore.code.language] ||
+      SOURCES[codeStore.code.language],
+  )
  storage.remove(storageKey.value)
  message.success("代码重置成功")
 }

 const runCode = async () => {
-  const res = await createTestSubmission(code, input.value)
+  const res = await createTestSubmission(codeStore.code, input.value)
  output.value = res.output
 }

@@ -81,7 +94,7 @@ const languageOptions: DropdownOption[] = problem.value!.languages.map(
        <n-flex vertical>
          <n-flex align="center">
            <n-select
-              v-model:value="code.language"
+              v-model:value="codeStore.code.language"
              style="width: 120px"
              :options="languageOptions"
              @update:value="changeLanguage"
@@ -93,9 +106,9 @@ const languageOptions: DropdownOption[] = problem.value!.languages.map(
            </n-button>
          </n-flex>
          <CodeEditor
-            v-model:value="code.value"
+            v-model:value="codeStore.code.value"
            @update:model-value="changeCode"
-            :language="code.language"
+            :language="codeStore.code.language"
          />
        </n-flex>
      </template>
--- a/src/oj/problem/components/Form.vue
+++ b/src/oj/problem/components/Form.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import { storeToRefs } from "pinia"
 import { copyToClipboard } from "utils/functions"
-import { code } from "oj/composables/code"
-import { problem } from "oj/composables/problem"
+import { useCodeStore } from "oj/store/code"
+import { useProblemStore } from "oj/store/problem"
 import { injectSyncStatus } from "oj/composables/syncStatus"
 import { SYNC_MESSAGES } from "shared/composables/sync"
 import { LANGUAGE_SHOW_VALUE, SOURCES, STORAGE_KEY } from "utils/constants"
-import { isDesktop, isMobile } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import { useUserStore } from "shared/store/user"
 import storage from "utils/storage"
 import { LANGUAGE } from "utils/types"
@@ -34,6 +35,12 @@ const message = useMessage()
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
+const codeStore = useCodeStore()
+const problemStore = useProblemStore()
+const { code } = storeToRefs(codeStore)
+const { problem } = storeToRefs(problemStore)
+
+const { isMobile, isDesktop } = useBreakpoints()

 const syncEnabled = ref(false) // 用户点击按钮后的意图状态（想要开启/关闭）
 const statisticPanel = ref(false)
@@ -66,12 +73,15 @@ const languageOptions: DropdownOption[] = problem.value!.languages.map(
 )

 const copy = async () => {
-  const success = await copyToClipboard(code.value)
+  const success = await copyToClipboard(codeStore.code.value)
  message[success ? "success" : "error"](`代码复制${success ? "成功" : "失败"}`)
 }

 const reset = () => {
-  code.value = problem.value!.template[code.language] || SOURCES[code.language]
+  codeStore.setCode(
+    problem.value!.template[codeStore.code.language] ||
+      SOURCES[codeStore.code.language],
+  )
  storage.remove(props.storageKey)
  message.success("代码重置成功")
 }
@@ -121,7 +131,7 @@ defineExpose({
 <template>
  <n-flex align="center">
    <n-select
-      v-model:value="code.language"
+      v-model:value="codeStore.code.language"
      style="width: 120px"
      :size="buttonSize"
      :options="languageOptions"
--- a/src/oj/problem/components/ProblemComment.vue
+++ b/src/oj/problem/components/ProblemComment.vue
@@ -107,7 +107,8 @@
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
-import { problem } from "oj/composables/problem"
+import { storeToRefs } from "pinia"
+import { useProblemStore } from "oj/store/problem"
 import { DIFFICULTY } from "utils/constants"
 import { createComment, getComment, getCommentStatistics } from "oj/api"
 import { useUserStore } from "shared/store/user"
@@ -121,6 +122,8 @@ const props = withDefaults(defineProps<Props>(), {
 })

 const userStore = useUserStore()
+const problemStore = useProblemStore()
+const { problem } = storeToRefs(problemStore)

 const message = useMessage()

--- a/src/oj/problem/components/ProblemContent.vue
+++ b/src/oj/problem/components/ProblemContent.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
 import { useThemeVars } from "naive-ui"
-import { code } from "oj/composables/code"
-import { problem } from "oj/composables/problem"
+import { storeToRefs } from "pinia"
+import { useCodeStore } from "oj/store/code"
+import { useProblemStore } from "oj/store/problem"
 import { createTestSubmission } from "utils/judge"
 import { Problem, ProblemStatus } from "utils/types"
 import Copy from "shared/components/Copy.vue"
@@ -17,6 +18,10 @@ type Sample = Problem["samples"][number] & {
 const theme = useThemeVars()
 const style = computed(() => "color: " + theme.value.primaryColor)

+const codeStore = useCodeStore()
+const problemStore = useProblemStore()
+const { problem } = storeToRefs(problemStore)
+
 // 判断用户是否尝试过但未通过
 // my_status === 0: 已通过
 // my_status !== 0 && my_status !== null: 尝试过但未通过
@@ -46,7 +51,7 @@ async function test(sample: Sample, index: number) {
    }
    return sample
  })
-  const res = await createTestSubmission(code, sample.input)
+  const res = await createTestSubmission(codeStore.code, sample.input)
  samples.value = samples.value.map((sample) => {
    if (sample.id === index) {
      const status =
--- a/src/oj/problem/components/ProblemEditor.vue
+++ b/src/oj/problem/components/ProblemEditor.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { code } from "oj/composables/code"
-import { problem } from "oj/composables/problem"
+import { storeToRefs } from "pinia"
+import { useCodeStore } from "oj/store/code"
+import { useProblemStore } from "oj/store/problem"
 import { provideSyncStatus } from "oj/composables/syncStatus"
 import { SOURCES } from "utils/constants"
 import SyncCodeEditor from "shared/components/SyncCodeEditor.vue"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import storage from "utils/storage"
 import { LANGUAGE } from "utils/types"
 import Form from "./Form.vue"
@@ -12,6 +13,12 @@ import Form from "./Form.vue"
 const route = useRoute()
 const formRef = useTemplateRef<InstanceType<typeof Form>>("formRef")

+const codeStore = useCodeStore()
+const problemStore = useProblemStore()
+const { problem } = storeToRefs(problemStore)
+
+const { isDesktop } = useBreakpoints()
+
 const sync = ref(false)
 // 提供同步状态给子组件使用
 const syncStatus = provideSyncStatus()
@@ -19,7 +26,7 @@ const syncStatus = provideSyncStatus()
 const contestID = route.params.contestID || null
 const storageKey = computed(
  () =>
-    `problem_${problem.value!._id}_contest_${contestID}_lang_${code.language}`,
+    `problem_${problem.value!._id}_contest_${contestID}_lang_${codeStore.code.language}`,
 )

 const editorHeight = computed(() =>
@@ -28,10 +35,11 @@ const editorHeight = computed(() =>

 onMounted(() => {
  const savedCode = storage.get(storageKey.value)
-  code.value =
+  codeStore.setCode(
    savedCode ||
-    problem.value!.template[code.language] ||
-    SOURCES[code.language]
+      problem.value!.template[codeStore.code.language] ||
+      SOURCES[codeStore.code.language],
+  )
 })

 const changeCode = (v: string) => {
@@ -40,10 +48,12 @@ const changeCode = (v: string) => {

 const changeLanguage = (v: LANGUAGE) => {
  const savedCode = storage.get(storageKey.value)
-  code.value =
+  codeStore.setCode(
    savedCode && storageKey.value.split("_").pop() === v
      ? savedCode
-      : problem.value!.template[code.language] || SOURCES[code.language]
+      : problem.value!.template[codeStore.code.language] ||
+          SOURCES[codeStore.code.language],
+  )
 }

 const toggleSync = (value: boolean) => {
@@ -76,10 +86,10 @@ const handleSyncStatusChange = (status: {
      @toggle-sync="toggleSync"
    />
    <SyncCodeEditor
-      v-model:value="code.value"
+      v-model:value="codeStore.code.value"
      :sync="sync"
      :problem="problem!._id"
-      :language="code.language"
+      :language="codeStore.code.language"
      :height="editorHeight"
      @update:model-value="changeCode"
      @sync-closed="handleSyncClosed"
--- a/src/oj/problem/components/ProblemInfo.vue
+++ b/src/oj/problem/components/ProblemInfo.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
-import { problem } from "oj/composables/problem"
+import { storeToRefs } from "pinia"
+import { useProblemStore } from "oj/store/problem"
 import { DIFFICULTY, JUDGE_STATUS } from "utils/constants"
 import { getACRateNumber, getTagColor, parseTime } from "utils/functions"
 import { Pie } from "vue-chartjs"
@@ -13,11 +14,16 @@ import {
  Colors,
 } from "chart.js"
 import { getProblemBeatRate } from "oj/api"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"

 // 仅注册饼图所需的 Chart.js 组件
 ChartJS.register(ArcElement, Title, Tooltip, Legend, Colors)

+const problemStore = useProblemStore()
+const { problem } = storeToRefs(problemStore)
+
+const { isDesktop } = useBreakpoints()
+
 const beatRate = ref("0")

 const data = computed(() => {
@@ -119,18 +125,16 @@ onMounted(getBeatRate)
  <n-grid :cols="isDesktop ? 4 : 2" :x-gap="10" :y-gap="10" class="cards">
    <n-gi v-for="item in numbers" :key="item.content">
      <n-card hoverable>
-        <n-flex align="center">
+        <n-flex vertical align="center">
          <Icon v-if="isDesktop" :icon="item.icon" width="40" />
-          <div>
-            <n-h2 class="number">
-              <n-number-animation
-                :to="item.title"
-                :precision="item.int ? 0 : 2"
-              />
-              <span v-if="item.suffix">{{ item.suffix }}</span>
-            </n-h2>
-            <n-h4 class="number-label">{{ item.content }}</n-h4>
-          </div>
+          <n-h2 class="number">
+            <n-number-animation
+              :to="item.title"
+              :precision="item.int ? 0 : 2"
+            />
+            <span v-if="item.suffix">{{ item.suffix }}</span>
+          </n-h2>
+          <n-h4 class="number-label">{{ item.content }}</n-h4>
        </n-flex>
      </n-card>
    </n-gi>
@@ -145,7 +149,7 @@ onMounted(getBeatRate)
 }

 .number {
-  margin-bottom: 0;
+  margin: 0;
  font-weight: bold;
 }

--- a/src/oj/problem/components/ProblemSubmission.vue
+++ b/src/oj/problem/components/ProblemSubmission.vue
@@ -8,10 +8,25 @@ import { LANGUAGE_SHOW_VALUE } from "utils/constants"
 import { parseTime } from "utils/functions"
 import { renderTableTitle } from "utils/renders"
 import { Submission } from "utils/types"
+import SubmissionDetail from "oj/submission/detail.vue"
+import { useBreakpoints } from "shared/composables/breakpoints"

 const userStore = useUserStore()
 const route = useRoute()
 const router = useRouter()
+const { isDesktop } = useBreakpoints()
+
+// 弹框状态管理
+const [codePanelVisible, toggleCodePanel] = useToggle(false)
+const submissionID = ref("")
+const problemID = ref("")
+
+// 显示代码弹框
+function showCodePanel(id: string, problem: string) {
+  submissionID.value = id
+  problemID.value = problem
+  toggleCodePanel(true)
+}

 const columns: DataTableColumn<Submission>[] = [
  {
@@ -25,22 +40,17 @@ const columns: DataTableColumn<Submission>[] = [
    key: "id",
    minWidth: 160,
    render: (row) => {
-      if (row.show_link) {
-        return h(
-          NButton,
-          {
-            text: true,
-            type: "info",
-            onClick: () => {
-              const data = router.resolve("/submission/" + row.id)
-              window.open(data.href, "_blank")
-            },
+      return h(
+        NButton,
+        {
+          text: true,
+          type: "info",
+          onClick: () => {
+            showCodePanel(row.id, <string>route.params.problemID ?? "")
          },
-          () => row.id.slice(0, 12),
-        )
-      } else {
-        return row.id.slice(0, 12)
-      }
+        },
+        () => row.id.slice(0, 12),
+      )
    },
  },
  {
@@ -258,6 +268,21 @@ watch(query, listSubmissions)
      v-model:page="query.page"
    />
  </template>
+
+  <!-- 代码详情弹框 -->
+  <n-modal
+    v-model:show="codePanelVisible"
+    preset="card"
+    :style="{ maxWidth: isDesktop && '70vw', maxHeight: '80vh' }"
+    :content-style="{ overflow: 'auto' }"
+    title="代码详情"
+  >
+    <SubmissionDetail
+      :problemID="problemID"
+      :submissionID="submissionID"
+      hideList
+    />
+  </n-modal>
 </template>

 <style scoped>
--- a/src/oj/problem/components/SubmissionResult.vue
+++ b/src/oj/problem/components/SubmissionResult.vue
@@ -1,100 +1,99 @@
-<script setup lang="ts">
-import { JUDGE_STATUS, SubmissionStatus } from "utils/constants"
-import { submissionMemoryFormat, submissionTimeFormat } from "utils/functions"
-import type { Submission } from "utils/types"
-import SubmissionResultTag from "shared/components/SubmissionResultTag.vue"
-
-const props = defineProps<{
-  submission?: Submission
-}>()
-
-// 错误信息格式化
-const msg = computed(() => {
-  if (!props.submission) return ""
-
-  let msg = ""
-  const result = props.submission.result
-
-  // 编译错误或运行时错误时给出提示
-  if (
-    result === SubmissionStatus.compile_error ||
-    result === SubmissionStatus.runtime_error
-  ) {
-    msg += "请仔细检查，看看代码的格式是不是写错了！\n\n"
-  }
-
-  if (props.submission.statistic_info?.err_info) {
-    msg += props.submission.statistic_info.err_info
-  }
-
-  return msg
-})
-
-// 测试用例表格数据（只在部分通过时显示）
-const infoTable = computed(() => {
-  if (!props.submission?.info?.data?.length) return []
-
-  const result = props.submission.result
-  // AC、编译错误、运行时错误不显示测试用例表格
-  if (
-    result === SubmissionStatus.accepted ||
-    result === SubmissionStatus.compile_error ||
-    result === SubmissionStatus.runtime_error
-  ) {
-    return []
-  }
-
-  const data = props.submission.info.data
-  // 只有存在失败的测试用例时才显示
-  return data.some((item) => item.result === 0) ? data : []
-})
-
-// 测试用例表格列配置
-const columns: DataTableColumn<Submission["info"]["data"][number]>[] = [
-  { title: "测试用例", key: "test_case" },
-  {
-    title: "测试状态",
-    key: "result",
-    render: (row) => h(SubmissionResultTag, { result: row.result }),
-  },
-  {
-    title: "占用内存",
-    key: "memory",
-    render: (row) => submissionMemoryFormat(row.memory),
-  },
-  {
-    title: "执行耗时",
-    key: "real_time",
-    render: (row) => submissionTimeFormat(row.real_time),
-  },
-  { title: "信号", key: "signal" },
-]
-</script>
-
-<template>
-  <div v-if="submission">
-    <n-alert
-      :type="JUDGE_STATUS[submission.result]['type']"
-      :title="JUDGE_STATUS[submission.result]['name']"
-      class="mb-3"
-    />
-    <n-flex vertical v-if="msg || infoTable.length">
-      <n-card v-if="msg" embedded class="msg">{{ msg }}</n-card>
-      <n-data-table
-        v-if="infoTable.length"
-        striped
-        :data="infoTable"
-        :columns="columns"
-      />
-    </n-flex>
-  </div>
-</template>
-
-<style scoped>
-.msg {
-  white-space: pre;
-  word-break: break-all;
-  line-height: 1.5;
-}
-</style>
-
+<script setup lang="ts">
+import { JUDGE_STATUS, SubmissionStatus } from "utils/constants"
+import { submissionMemoryFormat, submissionTimeFormat } from "utils/functions"
+import type { Submission } from "utils/types"
+import SubmissionResultTag from "shared/components/SubmissionResultTag.vue"
+
+const props = defineProps<{
+  submission?: Submission
+}>()
+
+// 错误信息格式化
+const msg = computed(() => {
+  if (!props.submission) return ""
+
+  let msg = ""
+  const result = props.submission.result
+
+  // 编译错误或运行时错误时给出提示
+  if (
+    result === SubmissionStatus.compile_error ||
+    result === SubmissionStatus.runtime_error
+  ) {
+    msg += "请仔细检查，看看代码的格式是不是写错了！\n\n"
+  }
+
+  if (props.submission.statistic_info?.err_info) {
+    msg += props.submission.statistic_info.err_info
+  }
+
+  return msg
+})
+
+// 测试用例表格数据（只在部分通过时显示）
+const infoTable = computed(() => {
+  if (!props.submission?.info?.data?.length) return []
+
+  const result = props.submission.result
+  // AC、编译错误、运行时错误不显示测试用例表格
+  if (
+    result === SubmissionStatus.accepted ||
+    result === SubmissionStatus.compile_error ||
+    result === SubmissionStatus.runtime_error
+  ) {
+    return []
+  }
+
+  const data = props.submission.info.data
+  // 只有存在失败的测试用例时才显示
+  return data.some((item) => item.result === 0) ? data : []
+})
+
+// 测试用例表格列配置
+const columns: DataTableColumn<Submission["info"]["data"][number]>[] = [
+  { title: "测试用例", key: "test_case" },
+  {
+    title: "测试状态",
+    key: "result",
+    render: (row) => h(SubmissionResultTag, { result: row.result }),
+  },
+  {
+    title: "占用内存",
+    key: "memory",
+    render: (row) => submissionMemoryFormat(row.memory),
+  },
+  {
+    title: "执行耗时",
+    key: "real_time",
+    render: (row) => submissionTimeFormat(row.real_time),
+  },
+  { title: "信号", key: "signal" },
+]
+</script>
+
+<template>
+  <div v-if="submission">
+    <n-alert
+      :type="JUDGE_STATUS[submission.result]['type']"
+      :title="JUDGE_STATUS[submission.result]['name']"
+      class="mb-3"
+    />
+    <n-flex vertical v-if="msg || infoTable.length">
+      <n-card v-if="msg" embedded class="msg">{{ msg }}</n-card>
+      <n-data-table
+        v-if="infoTable.length"
+        striped
+        :data="infoTable"
+        :columns="columns"
+      />
+    </n-flex>
+  </div>
+</template>
+
+<style scoped>
+.msg {
+  white-space: pre;
+  word-break: break-all;
+  line-height: 1.5;
+}
+</style>
--- a/src/oj/problem/components/Submit.vue
+++ b/src/oj/problem/components/Submit.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
+import { storeToRefs } from "pinia"
 import { getComment, submitCode } from "oj/api"
-import { code } from "oj/composables/code"
-import { problem } from "oj/composables/problem"
+import { useCodeStore } from "oj/store/code"
+import { useProblemStore } from "oj/store/problem"
 import { useFireworks } from "oj/problem/composables/useFireworks"
 import { useSubmissionMonitor } from "oj/problem/composables/useSubmissionMonitor"
 import { SubmissionStatus } from "utils/constants"
 import type { SubmitCodePayload } from "utils/types"
 import SubmissionResult from "./SubmissionResult.vue"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import { useUserStore } from "shared/store/user"

 // ==================== 异步组件 ====================
@@ -18,10 +19,15 @@ const ProblemComment = defineAsyncComponent(

 // ==================== 基础状态 ====================
 const userStore = useUserStore()
+const codeStore = useCodeStore()
+const problemStore = useProblemStore()
+const { problem } = storeToRefs(problemStore)
 const route = useRoute()
 const contestID = <string>route.params.contestID ?? ""
 const [commentPanel] = useToggle()

+const { isDesktop } = useBreakpoints()
+
 // ==================== 烟花效果 ====================
 const { celebrate } = useFireworks()

@@ -58,7 +64,7 @@ const { start: showCommentPanelDelayed } = useTimeoutFn(
 const submitDisabled = computed(() => {
  return (
    !userStore.isAuthed ||
-    code.value.trim() === "" ||
+    codeStore.code.value.trim() === "" ||
    isProcessing.value ||
    isCooldown.value
  )
@@ -87,8 +93,8 @@ async function submit() {
  // 1. 构建提交数据
  const data: SubmitCodePayload = {
    problem_id: problem.value!.id,
-    language: code.language,
-    code: code.value,
+    language: codeStore.code.language,
+    code: codeStore.code.value,
  }
  if (contestID) {
    data.contest_id = parseInt(contestID)
--- a/src/oj/problem/composables/useFireworks.ts
+++ b/src/oj/problem/composables/useFireworks.ts
@@ -1,211 +1,228 @@
-import confetti from "canvas-confetti"
-
-/**
- * 随机烟花效果 Composable
- * 提供7种不同风格的烟花庆祝效果
- */
-export function useFireworks() {
-  /**
-   * 触发随机烟花效果
-   */
-  function celebrate() {
-    const fireworkTypes = [
-      // 效果1: 经典烟花秀
-      () => {
-        const duration = 3000
-        const animationEnd = Date.now() + duration
-        const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
-
-        const interval: any = setInterval(() => {
-          const timeLeft = animationEnd - Date.now()
-          if (timeLeft <= 0) return clearInterval(interval)
-
-          const particleCount = 50 * (timeLeft / duration)
-          confetti({
-            ...defaults,
-            particleCount,
-            origin: { x: Math.random() * 0.3 + 0.1, y: Math.random() - 0.2 },
-            colors: ["#ff6b6b", "#ffd93d", "#6bcf7f", "#4ecdc4", "#a29bfe"],
-          })
-          confetti({
-            ...defaults,
-            particleCount,
-            origin: { x: Math.random() * 0.3 + 0.7, y: Math.random() - 0.2 },
-            colors: ["#ff6b6b", "#ffd93d", "#6bcf7f", "#4ecdc4", "#a29bfe"],
-          })
-        }, 250)
-      },
-
-      // 效果2: 星星雨
-      () => {
-        const count = 10
-        const defaults = {
-          origin: { y: 0.7 },
-          shapes: ["star"],
-          colors: ["#FFD700", "#FFA500", "#FFFF00", "#FF69B4", "#00CED1"],
-        }
-
-        function fire(particleRatio: number, opts: any) {
-          confetti({ ...defaults, ...opts, particleCount: Math.floor(200 * particleRatio) })
-        }
-
-        fire(0.25, { spread: 26, startVelocity: 55 })
-        fire(0.2, { spread: 60 })
-        fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 })
-        fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 })
-        fire(0.1, { spread: 120, startVelocity: 45 })
-      },
-
-      // 效果3: 爆炸波浪
-      () => {
-        function randomInRange(min: number, max: number) {
-          return Math.random() * (max - min) + min
-        }
-
-        for (let i = 0; i < 5; i++) {
-          setTimeout(() => {
-            confetti({
-              angle: randomInRange(55, 125),
-              spread: randomInRange(50, 70),
-              particleCount: randomInRange(50, 100),
-              origin: { y: 0.6 },
-              colors: ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42"],
-            })
-          }, i * 200)
-        }
-      },
-
-      // 效果4: 彩虹喷泉
-      () => {
-        const end = Date.now() + 2000
-
-        const colors = ["#bb0000", "#ffffff"]
-
-        const frame = () => {
-          confetti({
-            particleCount: 2,
-            angle: 60,
-            spread: 55,
-            origin: { x: 0 },
-            colors: colors,
-          })
-          confetti({
-            particleCount: 2,
-            angle: 120,
-            spread: 55,
-            origin: { x: 1 },
-            colors: colors,
-          })
-
-          if (Date.now() < end) {
-            requestAnimationFrame(frame)
-          }
-        }
-
-        frame()
-      },
-
-      // 效果5: 烟花雨
-      () => {
-        const duration = 2500
-        const animationEnd = Date.now() + duration
-
-        const interval: any = setInterval(() => {
-          const timeLeft = animationEnd - Date.now()
-          if (timeLeft <= 0) return clearInterval(interval)
-
-          const particleCount = 50
-          confetti({
-            particleCount,
-            startVelocity: 30,
-            spread: 360,
-            ticks: 60,
-            origin: {
-              x: Math.random(),
-              y: Math.random() - 0.2,
-            },
-            colors: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"],
-          })
-        }, 200)
-      },
-
-      // 效果6: 炮竹齐鸣
-      () => {
-        const count = 200
-        const defaults = {
-          origin: { y: 0.7 },
-        }
-
-        function fire(particleRatio: number, opts: any) {
-          confetti({
-            ...defaults,
-            ...opts,
-            particleCount: Math.floor(count * particleRatio),
-          })
-        }
-
-        fire(0.25, {
-          spread: 26,
-          startVelocity: 55,
-        })
-
-        fire(0.2, {
-          spread: 60,
-        })
-
-        fire(0.35, {
-          spread: 100,
-          decay: 0.91,
-          scalar: 0.8,
-        })
-
-        fire(0.1, {
-          spread: 120,
-          startVelocity: 25,
-          decay: 0.92,
-          scalar: 1.2,
-        })
-
-        fire(0.1, {
-          spread: 120,
-          startVelocity: 45,
-        })
-      },
-
-      // 效果7: 螺旋上升
-      () => {
-        const defaults = {
-          spread: 360,
-          ticks: 100,
-          gravity: 0,
-          decay: 0.94,
-          startVelocity: 30,
-        }
-
-        function shoot() {
-          confetti({
-            ...defaults,
-            particleCount: 50,
-            scalar: 1.2,
-            shapes: ["circle", "square"],
-            colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
-          })
-        }
-
-        setTimeout(shoot, 0)
-        setTimeout(shoot, 100)
-        setTimeout(shoot, 200)
-        setTimeout(shoot, 300)
-        setTimeout(shoot, 400)
-      },
-    ]
-
-    // 随机选择一种效果
-    const randomEffect = fireworkTypes[Math.floor(Math.random() * fireworkTypes.length)]
-    randomEffect()
-  }
-
-  return {
-    celebrate,
-  }
-}
+import confetti from "canvas-confetti"
+
+/**
+ * 随机烟花效果 Composable
+ * 提供7种不同风格的烟花庆祝效果
+ */
+export function useFireworks() {
+  /**
+   * 触发随机烟花效果
+   */
+  function celebrate() {
+    const fireworkTypes = [
+      // 效果1: 经典烟花秀
+      () => {
+        const duration = 3000
+        const animationEnd = Date.now() + duration
+        const defaults = {
+          startVelocity: 30,
+          spread: 360,
+          ticks: 60,
+          zIndex: 0,
+        }
+
+        const interval: any = setInterval(() => {
+          const timeLeft = animationEnd - Date.now()
+          if (timeLeft <= 0) return clearInterval(interval)
+
+          const particleCount = 50 * (timeLeft / duration)
+          confetti({
+            ...defaults,
+            particleCount,
+            origin: { x: Math.random() * 0.3 + 0.1, y: Math.random() - 0.2 },
+            colors: ["#ff6b6b", "#ffd93d", "#6bcf7f", "#4ecdc4", "#a29bfe"],
+          })
+          confetti({
+            ...defaults,
+            particleCount,
+            origin: { x: Math.random() * 0.3 + 0.7, y: Math.random() - 0.2 },
+            colors: ["#ff6b6b", "#ffd93d", "#6bcf7f", "#4ecdc4", "#a29bfe"],
+          })
+        }, 250)
+      },
+
+      // 效果2: 星星雨
+      () => {
+        const count = 10
+        const defaults = {
+          origin: { y: 0.7 },
+          shapes: ["star"],
+          colors: ["#FFD700", "#FFA500", "#FFFF00", "#FF69B4", "#00CED1"],
+        }
+
+        function fire(particleRatio: number, opts: any) {
+          confetti({
+            ...defaults,
+            ...opts,
+            particleCount: Math.floor(200 * particleRatio),
+          })
+        }
+
+        fire(0.25, { spread: 26, startVelocity: 55 })
+        fire(0.2, { spread: 60 })
+        fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 })
+        fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 })
+        fire(0.1, { spread: 120, startVelocity: 45 })
+      },
+
+      // 效果3: 爆炸波浪
+      () => {
+        function randomInRange(min: number, max: number) {
+          return Math.random() * (max - min) + min
+        }
+
+        for (let i = 0; i < 5; i++) {
+          setTimeout(() => {
+            confetti({
+              angle: randomInRange(55, 125),
+              spread: randomInRange(50, 70),
+              particleCount: randomInRange(50, 100),
+              origin: { y: 0.6 },
+              colors: ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42"],
+            })
+          }, i * 200)
+        }
+      },
+
+      // 效果4: 彩虹喷泉
+      () => {
+        const end = Date.now() + 2000
+
+        const colors = ["#bb0000", "#ffffff"]
+
+        const frame = () => {
+          confetti({
+            particleCount: 2,
+            angle: 60,
+            spread: 55,
+            origin: { x: 0 },
+            colors: colors,
+          })
+          confetti({
+            particleCount: 2,
+            angle: 120,
+            spread: 55,
+            origin: { x: 1 },
+            colors: colors,
+          })
+
+          if (Date.now() < end) {
+            requestAnimationFrame(frame)
+          }
+        }
+
+        frame()
+      },
+
+      // 效果5: 烟花雨
+      () => {
+        const duration = 2500
+        const animationEnd = Date.now() + duration
+
+        const interval: any = setInterval(() => {
+          const timeLeft = animationEnd - Date.now()
+          if (timeLeft <= 0) return clearInterval(interval)
+
+          const particleCount = 50
+          confetti({
+            particleCount,
+            startVelocity: 30,
+            spread: 360,
+            ticks: 60,
+            origin: {
+              x: Math.random(),
+              y: Math.random() - 0.2,
+            },
+            colors: [
+              "#ff0000",
+              "#00ff00",
+              "#0000ff",
+              "#ffff00",
+              "#ff00ff",
+              "#00ffff",
+            ],
+          })
+        }, 200)
+      },
+
+      // 效果6: 炮竹齐鸣
+      () => {
+        const count = 200
+        const defaults = {
+          origin: { y: 0.7 },
+        }
+
+        function fire(particleRatio: number, opts: any) {
+          confetti({
+            ...defaults,
+            ...opts,
+            particleCount: Math.floor(count * particleRatio),
+          })
+        }
+
+        fire(0.25, {
+          spread: 26,
+          startVelocity: 55,
+        })
+
+        fire(0.2, {
+          spread: 60,
+        })
+
+        fire(0.35, {
+          spread: 100,
+          decay: 0.91,
+          scalar: 0.8,
+        })
+
+        fire(0.1, {
+          spread: 120,
+          startVelocity: 25,
+          decay: 0.92,
+          scalar: 1.2,
+        })
+
+        fire(0.1, {
+          spread: 120,
+          startVelocity: 45,
+        })
+      },
+
+      // 效果7: 螺旋上升
+      () => {
+        const defaults = {
+          spread: 360,
+          ticks: 100,
+          gravity: 0,
+          decay: 0.94,
+          startVelocity: 30,
+        }
+
+        function shoot() {
+          confetti({
+            ...defaults,
+            particleCount: 50,
+            scalar: 1.2,
+            shapes: ["circle", "square"],
+            colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
+          })
+        }
+
+        setTimeout(shoot, 0)
+        setTimeout(shoot, 100)
+        setTimeout(shoot, 200)
+        setTimeout(shoot, 300)
+        setTimeout(shoot, 400)
+      },
+    ]
+
+    // 随机选择一种效果
+    const randomEffect =
+      fireworkTypes[Math.floor(Math.random() * fireworkTypes.length)]
+    randomEffect()
+  }
+
+  return {
+    celebrate,
+  }
+}
--- a/src/oj/problem/composables/useSubmissionMonitor.ts
+++ b/src/oj/problem/composables/useSubmissionMonitor.ts
@@ -1,172 +1,172 @@
-import { ref } from "vue"
-import { getSubmission } from "oj/api"
-import { SubmissionStatus } from "utils/constants"
-import type { Submission } from "utils/types"
-import {
-  useSubmissionWebSocket,
-  type SubmissionUpdate,
-} from "shared/composables/websocket"
-
-/**
- * 判题监控 Composable
- * 负责通过 WebSocket + 轮询双保险机制监控判题结果
- */
-export function useSubmissionMonitor() {
-  // ==================== 状态 ====================
-  const submissionId = ref("")
-  const submission = ref<Submission>()
-
-  // ==================== 轮询机制 ====================
-  const { pause: pausePolling, resume: resumePolling } = useIntervalFn(
-    async () => {
-      if (!submissionId.value) return
-
-      try {
-        const res = await getSubmission(submissionId.value)
-        submission.value = res.data
-
-        const result = res.data.result
-        // 判题完成，停止轮询
-        if (
-          result !== SubmissionStatus.judging &&
-          result !== SubmissionStatus.pending
-        ) {
-          pausePolling()
-        }
-      } catch (error) {
-        console.error("[SubmissionMonitor] 轮询失败:", error)
-        pausePolling()
-      }
-    },
-    2000,
-    { immediate: false }
-  )
-
-  // ==================== WebSocket 处理 ====================
-  const handleSubmissionUpdate = (data: SubmissionUpdate) => {
-    console.log("[SubmissionMonitor] 收到WebSocket更新:", data)
-
-    if (data.submission_id !== submissionId.value) {
-      console.log("[SubmissionMonitor] 提交ID不匹配，忽略")
-      return
-    }
-
-    if (!submission.value) {
-      submission.value = {} as Submission
-    }
-
-    submission.value.result = data.result as Submission["result"]
-
-    // 判题完成或出错，获取完整详情
-    if (data.status === "finished" || data.status === "error") {
-      console.log(
-        `[SubmissionMonitor] 判题${data.status === "finished" ? "完成" : "出错"}`
-      )
-
-      // 停止轮询（WebSocket已成功）
-      pausePolling()
-
-      getSubmission(submissionId.value).then((res) => {
-        submission.value = res.data
-        // 15分钟无新提交则断开WebSocket（节省资源）
-        scheduleDisconnect(15 * 60 * 1000)
-      })
-    }
-  }
-
-  // 初始化 WebSocket
-  const {
-    connect,
-    subscribe,
-    scheduleDisconnect,
-    cancelScheduledDisconnect,
-    status: wsStatus,
-  } = useSubmissionWebSocket(handleSubmissionUpdate)
-
-  // ==================== 轮询保底启动 ====================
-  const { start: startPollingFallback } = useTimeoutFn(
-    () => {
-      if (
-        submission.value &&
-        (submission.value.result === SubmissionStatus.judging ||
-          submission.value.result === SubmissionStatus.pending ||
-          submission.value.result === 9) // 9 = submitting
-      ) {
-        console.log("[SubmissionMonitor] WebSocket未及时响应，启动轮询保底")
-        resumePolling()
-      }
-    },
-    5000,
-    { immediate: false }
-  )
-
-  // ==================== 启动监控 ====================
-  const startMonitoring = (id: string) => {
-    submissionId.value = id
-    submission.value = { result: 9 } as Submission // 9 = submitting
-
-    // 取消之前的断开计划
-    cancelScheduledDisconnect()
-
-    // 如果WebSocket未连接，先连接
-    if (wsStatus.value !== "connected") {
-      console.log("[SubmissionMonitor] 启动WebSocket连接...")
-      connect()
-    }
-
-    // 等待WebSocket连接并订阅
-    const unwatch = watch(
-      wsStatus,
-      (status) => {
-        if (status === "connected") {
-          console.log("[SubmissionMonitor] WebSocket已连接，订阅提交:", id)
-          subscribe(id)
-          unwatch() // 订阅成功后停止监听
-        }
-      },
-      { immediate: true }
-    )
-
-    // 5秒后启动轮询保底（防止WebSocket失败）
-    startPollingFallback()
-  }
-
-  // ==================== 计算属性 ====================
-  const judging = computed(
-    () => submission.value?.result === SubmissionStatus.judging
-  )
-
-  const pending = computed(
-    () => submission.value?.result === SubmissionStatus.pending
-  )
-
-  const submitting = computed(
-    () => submission.value?.result === SubmissionStatus.submitting
-  )
-
-  const isProcessing = computed(() => {
-    return judging.value || pending.value || submitting.value
-  })
-
-  // ==================== 清理 ====================
-  onUnmounted(() => {
-    pausePolling()
-  })
-
-  return {
-    // 状态
-    submissionId,
-    submission,
-    
-    // 计算属性
-    judging,
-    pending,
-    submitting,
-    isProcessing,
-    
-    // 方法
-    startMonitoring,
-    pausePolling,
-  }
-}
-
+import { ref, computed, watch, onUnmounted } from "vue"
+import { useIntervalFn, useTimeoutFn } from "@vueuse/core"
+import { getSubmission } from "oj/api"
+import { SubmissionStatus } from "utils/constants"
+import type { Submission } from "utils/types"
+import {
+  useSubmissionWebSocket,
+  type SubmissionUpdate,
+} from "shared/composables/websocket"
+
+/**
+ * 判题监控 Composable
+ * 负责通过 WebSocket + 轮询双保险机制监控判题结果
+ */
+export function useSubmissionMonitor() {
+  // ==================== 状态 ====================
+  const submissionId = ref("")
+  const submission = ref<Submission>()
+
+  // ==================== 轮询机制 ====================
+  const { pause: pausePolling, resume: resumePolling } = useIntervalFn(
+    async () => {
+      if (!submissionId.value) return
+
+      try {
+        const res = await getSubmission(submissionId.value)
+        submission.value = res.data
+
+        const result = res.data.result
+        // 判题完成，停止轮询
+        if (
+          result !== SubmissionStatus.judging &&
+          result !== SubmissionStatus.pending
+        ) {
+          pausePolling()
+        }
+      } catch (error) {
+        console.error("[SubmissionMonitor] 轮询失败:", error)
+        pausePolling()
+      }
+    },
+    2000,
+    { immediate: false },
+  )
+
+  // ==================== WebSocket 处理 ====================
+  const handleSubmissionUpdate = (data: SubmissionUpdate) => {
+    console.log("[SubmissionMonitor] 收到WebSocket更新:", data)
+
+    if (data.submission_id !== submissionId.value) {
+      console.log("[SubmissionMonitor] 提交ID不匹配，忽略")
+      return
+    }
+
+    if (!submission.value) {
+      submission.value = {} as Submission
+    }
+
+    submission.value.result = data.result as Submission["result"]
+
+    // 判题完成或出错，获取完整详情
+    if (data.status === "finished" || data.status === "error") {
+      console.log(
+        `[SubmissionMonitor] 判题${data.status === "finished" ? "完成" : "出错"}`,
+      )
+
+      // 停止轮询（WebSocket已成功）
+      pausePolling()
+
+      getSubmission(submissionId.value).then((res) => {
+        submission.value = res.data
+        // 15分钟无新提交则断开WebSocket（节省资源）
+        scheduleDisconnect(15 * 60 * 1000)
+      })
+    }
+  }
+
+  // 初始化 WebSocket
+  const {
+    connect,
+    subscribe,
+    scheduleDisconnect,
+    cancelScheduledDisconnect,
+    status: wsStatus,
+  } = useSubmissionWebSocket(handleSubmissionUpdate)
+
+  // ==================== 轮询保底启动 ====================
+  const { start: startPollingFallback } = useTimeoutFn(
+    () => {
+      if (
+        submission.value &&
+        (submission.value.result === SubmissionStatus.judging ||
+          submission.value.result === SubmissionStatus.pending ||
+          submission.value.result === 9) // 9 = submitting
+      ) {
+        console.log("[SubmissionMonitor] WebSocket未及时响应，启动轮询保底")
+        resumePolling()
+      }
+    },
+    5000,
+    { immediate: false },
+  )
+
+  // ==================== 启动监控 ====================
+  const startMonitoring = (id: string) => {
+    submissionId.value = id
+    submission.value = { result: 9 } as Submission // 9 = submitting
+
+    // 取消之前的断开计划
+    cancelScheduledDisconnect()
+
+    // 如果WebSocket未连接，先连接
+    if (wsStatus.value !== "connected") {
+      console.log("[SubmissionMonitor] 启动WebSocket连接...")
+      connect()
+    }
+
+    // 等待WebSocket连接并订阅
+    const unwatch = watch(
+      wsStatus,
+      (status) => {
+        if (status === "connected") {
+          console.log("[SubmissionMonitor] WebSocket已连接，订阅提交:", id)
+          subscribe(id)
+          unwatch() // 订阅成功后停止监听
+        }
+      },
+      { immediate: true },
+    )
+
+    // 5秒后启动轮询保底（防止WebSocket失败）
+    startPollingFallback()
+  }
+
+  // ==================== 计算属性 ====================
+  const judging = computed(
+    () => submission.value?.result === SubmissionStatus.judging,
+  )
+
+  const pending = computed(
+    () => submission.value?.result === SubmissionStatus.pending,
+  )
+
+  const submitting = computed(
+    () => submission.value?.result === SubmissionStatus.submitting,
+  )
+
+  const isProcessing = computed(() => {
+    return judging.value || pending.value || submitting.value
+  })
+
+  // ==================== 清理 ====================
+  onUnmounted(() => {
+    pausePolling()
+  })
+
+  return {
+    // 状态
+    submissionId,
+    submission,
+
+    // 计算属性
+    judging,
+    pending,
+    submitting,
+    isProcessing,
+
+    // 方法
+    startMonitoring,
+    pausePolling,
+  }
+}
--- a/src/oj/problem/detail.vue
+++ b/src/oj/problem/detail.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
 import { getProblem } from "oj/api"
-import { ScreenMode } from "utils/constants"
-import { isDesktop, isMobile } from "shared/composables/breakpoints"
-import {
-  bothAndProblem,
-  resetScreenMode,
-  screenMode,
-} from "shared/composables/switchScreen"
-import { problem } from "../composables/problem"
+import { useBreakpoints } from "shared/composables/breakpoints"
+import { storeToRefs } from "pinia"
+import { useProblemStore } from "oj/store/problem"
+import { useScreenModeStore } from "shared/store/screenMode"

 const ProblemEditor = defineAsyncComponent(
  () => import("./components/ProblemEditor.vue"),
@@ -44,6 +40,13 @@ const errMsg = ref("无数据")
 const route = useRoute()
 const router = useRouter()

+const problemStore = useProblemStore()
+const screenModeStore = useScreenModeStore()
+const { problem } = storeToRefs(problemStore)
+const { shouldShowProblem } = storeToRefs(screenModeStore)
+
+const { isMobile, isDesktop } = useBreakpoints()
+
 const tabOptions = computed(() => {
  const options: string[] = ["content"]
  if (isMobile.value) {
@@ -81,7 +84,7 @@ watch(currentTab, (tab) => {
 })

 async function init() {
-  resetScreenMode()
+  screenModeStore.resetScreenMode()
  try {
    const res = await getProblem(props.problemID, props.contestID)
    problem.value = res.data
@@ -96,11 +99,11 @@ onMounted(init)
 onBeforeUnmount(() => {
  problem.value = null
  errMsg.value = "无数据"
-  resetScreenMode()
+  screenModeStore.resetScreenMode()
 })

 watch(isMobile, (value) => {
-  if (value) resetScreenMode()
+  if (value) screenModeStore.resetScreenMode()
 })
 </script>

@@ -108,9 +111,9 @@ watch(isMobile, (value) => {
  <n-grid
    v-if="problem"
    x-gap="16"
-    :cols="screenMode === ScreenMode.both ? 2 : 1"
+    :cols="screenModeStore.isBothMode ? 2 : 1"
  >
-    <n-gi :span="isDesktop ? 1 : 2" v-if="bothAndProblem">
+    <n-gi :span="isDesktop ? 1 : 2" v-if="shouldShowProblem">
      <n-scrollbar v-if="isDesktop" style="max-height: calc(100vh - 92px)">
        <n-tabs v-model:value="currentTab" type="segment">
          <n-tab-pane name="content" tab="题目描述">
@@ -146,11 +149,11 @@ watch(isMobile, (value) => {
        </n-tab-pane>
      </n-tabs>
    </n-gi>
-    <n-gi v-if="isDesktop && screenMode === ScreenMode.both">
+    <n-gi v-if="isDesktop && screenModeStore.isBothMode">
      <ProblemEditor v-if="shouldUseProblemEditor" />
      <ContestEditor v-else />
    </n-gi>
-    <n-gi v-if="isDesktop && screenMode === ScreenMode.code">
+    <n-gi v-if="isDesktop && screenModeStore.isCodeOnlyMode">
      <EditorForTest />
    </n-gi>
  </n-grid>
--- a/src/oj/problem/list.vue
+++ b/src/oj/problem/list.vue
@@ -8,7 +8,7 @@ import { ProblemFiltered } from "utils/types"
 import { getProblemTagList } from "shared/api"
 import Hitokoto from "shared/components/Hitokoto.vue"
 import Pagination from "shared/components/Pagination.vue"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import { usePagination } from "shared/composables/pagination"
 import { useUserStore } from "shared/store/user"
 import { renderTableTitle } from "utils/renders"
@@ -38,6 +38,9 @@ const difficultyOptions = [
 const router = useRouter()

 const userStore = useUserStore()
+
+const { isDesktop } = useBreakpoints()
+
 const problems = ref<ProblemFiltered[]>([])
 const total = ref(0)
 const tags = ref<Tag[]>([])