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)