batch update

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"