batch update

src/App.vue

@@ -2,7 +2,6 @@
 import { darkTheme, dateZhCN, zhCN } from "naive-ui"
 import "normalize.css"
 import "./index.css"
-
 const isDark = useDark()
 
 // 延迟加载 highlight.js，避免阻塞首屏

src/admin/contest/helper.vue

@@ -4,7 +4,7 @@ import { parseTime } from "utils/functions"
 import { getACMHelperList, getContest, updateACMHelperChecked } from "../api"
 import { getSubmission, getSubmissions } from "oj/api"
 import SubmissionDetail from "oj/submission/detail.vue"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 
 interface Props {
   contestID: string
@@ -28,6 +28,8 @@ interface HelperItem {
 const props = defineProps<Props>()
 const message = useMessage()
 
+const { isDesktop } = useBreakpoints()
+
 const submissions = ref<HelperItem[]>([])
 const contestStartTime = ref<Date | null>(null)
 const query = reactive({

src/main.ts

@@ -8,19 +8,29 @@ import storage from "utils/storage"
 import App from "./App.vue"
 import { admins, ojs } from "./routes"
 
-import { toggleLogin } from "./shared/composables/modal"
-import { useUserStore } from "./shared/store/user"
-
 const router = createRouter({
   history: createWebHistory(),
   routes: [ojs, admins],
 })
 
+const pinia = createPinia()
+
+// 创建 app 并安装插件
+const app = createApp(App)
+app.use(pinia)
+app.use(router)
+
+// 现在可以安全地使用 Store
+import { useAuthModalStore } from "./shared/store/authModal"
+import { useUserStore } from "./shared/store/user"
+
+const authStore = useAuthModalStore()
+
 router.beforeEach(async (to, from, next) => {
   // 检查是否需要认证
   if (to.matched.some((record) => record.meta.requiresAuth)) {
     if (!storage.get(STORAGE_KEY.AUTHED)) {
-      toggleLogin(true)
+      authStore.openLoginModal()
       next("/")
       return
     }
@@ -34,7 +44,7 @@ router.beforeEach(async (to, from, next) => {
     )
   ) {
     if (!storage.get(STORAGE_KEY.AUTHED)) {
-      toggleLogin(true)
+      authStore.openLoginModal()
       next("/")
       return
     }
@@ -66,10 +76,6 @@ router.beforeEach(async (to, from, next) => {
   next()
 })
 
-const pinia = createPinia()
-const app = createApp(App)
-app.use(router)
-app.use(pinia)
 app.mount("#app")
 
 if (!!import.meta.env.PUBLIC_ICONIFY_URL) {

src/oj/ai/analysis.vue

@@ -50,7 +50,7 @@
   </n-spin>
 </template>
 <script setup lang="ts">
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import { formatISO, sub, type Duration } from "date-fns"
 import TagsRadarChart from "./components/TagsRadarChart.vue"
 import DifficultyGradeChart from "./components/DifficultyGradeChart.vue"
@@ -68,6 +68,8 @@ import { DURATION_OPTIONS } from "utils/constants"
 
 const aiStore = useAIStore()
 
+const { isDesktop } = useBreakpoints()
+
 const options = [...DURATION_OPTIONS]
 
 const subOptions = computed<Duration>(() => {

src/oj/ai/components/SolvedTable.vue

@@ -13,11 +13,13 @@ import { NButton } from "naive-ui"
 import TagTitle from "./TagTitle.vue"
 import { SolvedProblem } from "utils/types"
 import { useAIStore } from "oj/store/ai"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 
 const router = useRouter()
 const aiStore = useAIStore()
 
+const { isDesktop } = useBreakpoints()
+
 const solvedProblems = computed(() => aiStore.detailsData.solved)
 
 const columns: DataTableColumn<SolvedProblem>[] = [

src/oj/announcement/list.vue

@@ -2,7 +2,7 @@
 import { NTag } from "naive-ui"
 import { getAnnouncement, getAnnouncementList } from "oj/api"
 import Pagination from "shared/components/Pagination.vue"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import { parseTime } from "utils/functions"
 import { renderTableTitle } from "utils/renders"
 import { Announcement } from "utils/types"
@@ -12,6 +12,9 @@ const total = ref(0)
 const content = ref("")
 const title = ref("")
 const [show, toggleShow] = useToggle(false)
+
+const { isDesktop } = useBreakpoints()
+
 const query = reactive({
   limit: 10,
   page: 1,

src/oj/composables/code.ts

@@ -1,11 +0,0 @@
-import { STORAGE_KEY } from "utils/constants"
-import storage from "utils/storage"
-import { Code } from "utils/types"
-
-export const code = reactive<Code>({
-  value: "",
-  language: storage.get(STORAGE_KEY.LANGUAGE) || "Python3",
-})
-
-export const input = ref("")
-export const output = ref("")

src/oj/composables/problem.ts

@@ -1,3 +0,0 @@
-import { Problem } from "utils/types"
-
-export const problem = ref<Problem | null>(null)

src/oj/composables/syncStatus.ts

@@ -1,4 +1,9 @@
-// 同步状态管理 composable
+import { ref, provide, inject } from "vue"
+
+/**
+ * 同步状态管理 composable
+ * 使用 provide/inject 模式在组件树中共享状态
+ */
 
 export interface SyncStatusState {
   otherUser?: { name: string; isSuperAdmin: boolean }
@@ -8,7 +13,10 @@ export interface SyncStatusState {
 // 提供/注入的 key
 export const SYNC_STATUS_KEY = Symbol("syncStatus")
 
-// 创建同步状态
+/**
+ * 创建同步状态实例
+ * 每次调用创建新的状态实例
+ */
 export function createSyncStatus() {
   const otherUser = ref<{ name: string; isSuperAdmin: boolean }>()
   const hadConnection = ref(false)
@@ -33,14 +41,20 @@ export function createSyncStatus() {
   }
 }
 
-// 提供同步状态
+/**
+ * 提供同步状态到子组件
+ * 在父组件中调用
+ */
 export function provideSyncStatus() {
   const syncStatus = createSyncStatus()
   provide(SYNC_STATUS_KEY, syncStatus)
   return syncStatus
 }
 
-// 注入同步状态
+/**
+ * 注入同步状态
+ * 在子组件中调用，获取父组件提供的状态
+ */
 export function injectSyncStatus() {
   const syncStatus =
     inject<ReturnType<typeof createSyncStatus>>(SYNC_STATUS_KEY)

src/oj/contest/components/ContestMenu.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { useContestStore } from "oj/store/contest"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import { ContestStatus } from "utils/constants"
 
 const route = useRoute()
 const router = useRouter()
 const contestStore = useContestStore()
 
+const { isDesktop } = useBreakpoints()
+
 const contestMenuVisible = computed(() => {
   if (contestStore.isContestAdmin) return true
   if (!contestStore.isPrivate) {

src/oj/contest/detail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
 import { CONTEST_STATUS, ContestStatus } from "utils/constants"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import { useContestStore } from "../store/contest"
 import ContestInfo from "./components/ContestInfo.vue"
 import ContestMenu from "./components/ContestMenu.vue"
@@ -12,6 +12,8 @@ const props = defineProps<{
 const contestStore = useContestStore()
 const message = useMessage()
 
+const { isDesktop } = useBreakpoints()
+
 const password = ref("")
 
 async function check() {

src/oj/contest/list.vue

@@ -6,7 +6,7 @@ import { duration, parseTime } from "utils/functions"
 import { Contest } from "utils/types"
 import ContestTitle from "shared/components/ContestTitle.vue"
 import Pagination from "shared/components/Pagination.vue"
-import { toggleLogin } from "shared/composables/modal"
+import { useAuthModalStore } from "shared/store/authModal"
 import { usePagination } from "shared/composables/pagination"
 import { useUserStore } from "shared/store/user"
 import { CONTEST_STATUS, ContestType } from "utils/constants"
@@ -14,6 +14,7 @@ import { renderTableTitle } from "utils/renders"
 
 const router = useRouter()
 const userStore = useUserStore()
+const authStore = useAuthModalStore()
 
 interface ContestQuery {
   keyword: string
@@ -120,7 +121,7 @@ function rowProps(row: Contest) {
     style: "cursor: pointer",
     onClick() {
       if (!userStore.isAuthed && row.contest_type === ContestType.private) {
-        toggleLogin(true)
+        authStore.openLoginModal()
       } else {
         router.push("/contest/" + row.id)
       }

src/oj/learn/index.vue

@@ -105,16 +105,18 @@ import { MdPreview } from "md-editor-v3"
 import "md-editor-v3/lib/preview.css"
 import { Tutorial } from "utils/types"
 import { getTutorial, getTutorials } from "../api"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
+const isDark = useDark()
 
 const CodeEditor = defineAsyncComponent(
   () => import("shared/components/CodeEditor.vue"),
 )
 
-const isDark = useDark()
 const route = useRoute()
 const router = useRouter()
 
+const { isDesktop } = useBreakpoints()
+
 const step = computed(() => {
   if (!route.params.step || !route.params.step.length) return 1
   else {

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"
     />

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>

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"

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()
 

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 =

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"

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;
 }
 

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>

src/oj/problem/components/SubmissionResult.vue

@@ -97,4 +97,3 @@ const columns: DataTableColumn<Submission["info"]["data"][number]>[] = [
   line-height: 1.5;
 }
 </style>
-

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)

src/oj/problem/composables/useFireworks.ts

@@ -14,7 +14,12 @@ export function useFireworks() {
       () => {
         const duration = 3000
         const animationEnd = Date.now() + duration
-        const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
+        const defaults = {
+          startVelocity: 30,
+          spread: 360,
+          ticks: 60,
+          zIndex: 0,
+        }
 
         const interval: any = setInterval(() => {
           const timeLeft = animationEnd - Date.now()
@@ -46,7 +51,11 @@ export function useFireworks() {
         }
 
         function fire(particleRatio: number, opts: any) {
-          confetti({ ...defaults, ...opts, particleCount: Math.floor(200 * particleRatio) })
+          confetti({
+            ...defaults,
+            ...opts,
+            particleCount: Math.floor(200 * particleRatio),
+          })
         }
 
         fire(0.25, { spread: 26, startVelocity: 55 })
@@ -124,7 +133,14 @@ export function useFireworks() {
               x: Math.random(),
               y: Math.random() - 0.2,
             },
-            colors: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"],
+            colors: [
+              "#ff0000",
+              "#00ff00",
+              "#0000ff",
+              "#ffff00",
+              "#ff00ff",
+              "#00ffff",
+            ],
           })
         }, 200)
       },
@@ -201,7 +217,8 @@ export function useFireworks() {
     ]
 
     // 随机选择一种效果
-    const randomEffect = fireworkTypes[Math.floor(Math.random() * fireworkTypes.length)]
+    const randomEffect =
+      fireworkTypes[Math.floor(Math.random() * fireworkTypes.length)]
     randomEffect()
   }
 

src/oj/problem/composables/useSubmissionMonitor.ts

@@ -1,4 +1,5 @@
-import { ref } from "vue"
+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"
@@ -39,7 +40,7 @@ export function useSubmissionMonitor() {
       }
     },
     2000,
-    { immediate: false }
+    { immediate: false },
   )
 
   // ==================== WebSocket 处理 ====================
@@ -60,7 +61,7 @@ export function useSubmissionMonitor() {
     // 判题完成或出错，获取完整详情
     if (data.status === "finished" || data.status === "error") {
       console.log(
-        `[SubmissionMonitor] 判题${data.status === "finished" ? "完成" : "出错"}`
+        `[SubmissionMonitor] 判题${data.status === "finished" ? "完成" : "出错"}`,
       )
 
       // 停止轮询（WebSocket已成功）
@@ -97,7 +98,7 @@ export function useSubmissionMonitor() {
       }
     },
     5000,
-    { immediate: false }
+    { immediate: false },
   )
 
   // ==================== 启动监控 ====================
@@ -124,7 +125,7 @@ export function useSubmissionMonitor() {
           unwatch() // 订阅成功后停止监听
         }
       },
-      { immediate: true }
+      { immediate: true },
     )
 
     // 5秒后启动轮询保底（防止WebSocket失败）
@@ -133,15 +134,15 @@ export function useSubmissionMonitor() {
 
   // ==================== 计算属性 ====================
   const judging = computed(
-    () => submission.value?.result === SubmissionStatus.judging
+    () => submission.value?.result === SubmissionStatus.judging,
   )
 
   const pending = computed(
-    () => submission.value?.result === SubmissionStatus.pending
+    () => submission.value?.result === SubmissionStatus.pending,
   )
 
   const submitting = computed(
-    () => submission.value?.result === SubmissionStatus.submitting
+    () => submission.value?.result === SubmissionStatus.submitting,
   )
 
   const isProcessing = computed(() => {
@@ -169,4 +170,3 @@ export function useSubmissionMonitor() {
     pausePolling,
   }
 }
-

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>

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[]>([])

src/oj/store/code.ts

@@ -0,0 +1,94 @@
+import { defineStore } from "pinia"
+import { STORAGE_KEY } from "utils/constants"
+import storage from "utils/storage"
+import { Code, LANGUAGE } from "utils/types"
+
+/**
+ * 代码编辑器状态管理 Store
+ * 管理全局的代码、输入、输出状态
+ */
+export const useCodeStore = defineStore("code", () => {
+  // ==================== 状态 ====================
+  const code = reactive<Code>({
+    value: "",
+    language: storage.get(STORAGE_KEY.LANGUAGE) || "Python3",
+  })
+
+  const input = ref("")
+  const output = ref("")
+
+  // ==================== 计算属性 ====================
+  const isEmpty = computed(() => code.value.trim() === "")
+
+  // ==================== 操作 ====================
+  /**
+   * 设置代码内容
+   */
+  function setCode(value: string) {
+    code.value = value
+  }
+
+  /**
+   * 设置编程语言
+   */
+  function setLanguage(language: LANGUAGE) {
+    code.language = language
+    storage.set(STORAGE_KEY.LANGUAGE, language)
+  }
+
+  /**
+   * 设置输入
+   */
+  function setInput(value: string) {
+    input.value = value
+  }
+
+  /**
+   * 设置输出
+   */
+  function setOutput(value: string) {
+    output.value = value
+  }
+
+  /**
+   * 重置所有状态
+   */
+  function reset() {
+    code.value = ""
+    input.value = ""
+    output.value = ""
+  }
+
+  /**
+   * 清空输出
+   */
+  function clearOutput() {
+    output.value = ""
+  }
+
+  // 监听语言变化，保存到本地存储
+  watch(
+    () => code.language,
+    (newLanguage) => {
+      storage.set(STORAGE_KEY.LANGUAGE, newLanguage)
+    },
+  )
+
+  return {
+    // 状态
+    code,
+    input,
+    output,
+
+    // 计算属性
+    isEmpty,
+
+    // 操作
+    setCode,
+    setLanguage,
+    setInput,
+    setOutput,
+    reset,
+    clearOutput,
+  }
+})

src/oj/store/problem.ts

@@ -0,0 +1,66 @@
+import { defineStore } from "pinia"
+import { Problem } from "utils/types"
+
+/**
+ * 题目状态管理 Store
+ * 管理当前题目的信息
+ */
+export const useProblemStore = defineStore("problem", () => {
+  // ==================== 状态 ====================
+  const problem = ref<Problem | null>(null)
+
+  // ==================== 计算属性 ====================
+  const hasProblem = computed(() => problem.value !== null)
+
+  const problemId = computed(() => problem.value?._id ?? null)
+
+  const problemTitle = computed(() => problem.value?.title ?? "")
+
+  const difficulty = computed(() => problem.value?.difficulty ?? "")
+
+  const languages = computed(() => problem.value?.languages ?? [])
+
+  const isACed = computed(() => problem.value?.my_status === 0)
+
+  // ==================== 操作 ====================
+  /**
+   * 设置当前题目
+   */
+  function setProblem(newProblem: Problem | null) {
+    problem.value = newProblem
+  }
+
+  /**
+   * 清空当前题目
+   */
+  function clearProblem() {
+    problem.value = null
+  }
+
+  /**
+   * 更新题目的部分字段
+   */
+  function updateProblem(updates: Partial<Problem>) {
+    if (problem.value) {
+      problem.value = { ...problem.value, ...updates }
+    }
+  }
+
+  return {
+    // 状态
+    problem,
+
+    // 计算属性
+    hasProblem,
+    problemId,
+    problemTitle,
+    difficulty,
+    languages,
+    isACed,
+
+    // 操作
+    setProblem,
+    clearProblem,
+    updateProblem,
+  }
+})

src/oj/submission/detail.vue

@@ -14,7 +14,7 @@ import {
 } from "utils/functions"
 import { Submission } from "utils/types"
 import SubmissionResultTag from "shared/components/SubmissionResultTag.vue"
-import { isDesktop, isMobile } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 
 const props = defineProps<{
   submissionID: string
@@ -26,6 +26,8 @@ const props = defineProps<{
 const router = useRouter()
 const message = useMessage()
 
+const { isMobile, isDesktop } = useBreakpoints()
+
 const submission = ref<Submission>()
 
 async function init() {
@@ -69,7 +71,7 @@ function copyToCat() {
 async function copyToProblem() {
   const success = await copyToClipboard(submission.value!.code)
   if (success) {
-    message.success("代码复制成功")
+    message.success("代码复制成功，需要手动粘贴到题目")
   } else {
     message.error("代码复制失败")
   }
@@ -115,7 +117,7 @@ onMounted(init)
       </n-alert>
       <n-flex :vertical="isDesktop" justify="center">
         <n-button secondary @click="copyToCat">复制到自测猫</n-button>
-        <n-button secondary @click="copyToProblem">回到题目</n-button>
+        <n-button secondary @click="copyToProblem">复制回到题目</n-button>
       </n-flex>
     </n-flex>
     <n-card embedded>

src/oj/submission/list.vue

@@ -6,7 +6,7 @@ import { parseTime } from "utils/functions"
 import { LANGUAGE, SubmissionListItem } from "utils/types"
 import Pagination from "shared/components/Pagination.vue"
 import SubmissionResultTag from "shared/components/SubmissionResultTag.vue"
-import { isDesktop, isMobile } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import { usePagination } from "shared/composables/pagination"
 import { useUserStore } from "shared/store/user"
 import { LANGUAGE_SHOW_VALUE } from "utils/constants"
@@ -30,6 +30,8 @@ const router = useRouter()
 const userStore = useUserStore()
 const message = useMessage()
 
+const { isMobile, isDesktop } = useBreakpoints()
+
 const submissions = ref<SubmissionListItem[]>([])
 const total = ref(0)
 const todayCount = ref(0)

src/oj/user/index.vue

@@ -2,7 +2,7 @@
 import { Icon } from "@iconify/vue"
 import { NH2, NH3 } from "naive-ui"
 import { getProfile } from "shared/api"
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import { durationToDays, parseTime } from "utils/functions"
 import { Profile } from "utils/types"
 import { getMetrics } from "../api"
@@ -18,6 +18,8 @@ const learnDuration = ref("")
 const [loading, toggle] = useToggle()
 const [show, toggleShow] = useToggle(false)
 
+const { isDesktop } = useBreakpoints()
+
 async function init() {
   toggle(true)
   try {

src/shared/components/CodeEditor.vue

@@ -7,7 +7,6 @@ import type { Extension } from "@codemirror/state"
 import { LANGUAGE } from "utils/types"
 import { oneDark } from "../themes/oneDark"
 import { smoothy } from "../themes/smoothy"
-
 interface Props {
   language?: LANGUAGE
   fontSize?: number

src/shared/components/Header.vue

@@ -1,20 +1,27 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
 import { RouterLink } from "vue-router"
-import { isDesktop, isMobile } from "shared/composables/breakpoints"
-import { toggleLogin, toggleSignup } from "shared/composables/modal"
-import { screenMode, switchScreenMode } from "shared/composables/switchScreen"
+import { useBreakpoints } from "shared/composables/breakpoints"
+import { useAuthModalStore } from "shared/store/authModal"
+import { useScreenModeStore } from "shared/store/screenMode"
 import { logout } from "../api"
 import { useConfigStore } from "../store/config"
 import { useUserStore } from "../store/user"
 
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
 const userStore = useUserStore()
 const configStore = useConfigStore()
+const authStore = useAuthModalStore()
+const screenModeStore = useScreenModeStore()
 const route = useRoute()
 const router = useRouter()
 
+const { isMobile, isDesktop } = useBreakpoints()
+
+const isDark = useDark()
+
+// 从 store 中获取屏幕模式状态
+const { screenMode } = storeToRefs(screenModeStore)
+
 const names = [
   "man-with-chinese-cap-1",
   "cat-face",
@@ -213,7 +220,7 @@ function goHome() {
           isDesktop &&
           (route.name === 'problem' || route.name === 'contest problem')
         "
-        @click="() => switchScreenMode()"
+        @click="() => screenModeStore.switchScreenMode()"
       >
         {{ screenMode }}
       </n-button>
@@ -227,19 +234,23 @@ function goHome() {
           </n-button>
         </n-dropdown>
         <n-flex align="center" v-else>
-          <n-button secondary type="primary" @click="toggleLogin(true)">
+          <n-button
+            secondary
+            type="primary"
+            @click="authStore.openLoginModal()"
+          >
             登录
           </n-button>
           <n-button
             tertiary
             v-if="configStore.config?.allow_register"
-            @click="toggleSignup(true)"
+            @click="authStore.openSignupModal()"
           >
             注册
           </n-button>
         </n-flex>
       </div>
-      <n-button :bordered="false" circle @click="toggleDark()">
+      <n-button :bordered="false" circle @click="isDark = !isDark">
         <template #icon>
           <Icon v-if="isDark" icon="twemoji:sun-behind-small-cloud"></Icon>
           <Icon v-else icon="twemoji:cloud-with-lightning-and-rain"></Icon>

src/shared/components/Login.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
 import { login } from "../api"
-import { loginModal, toggleLogin, toggleSignup } from "../composables/modal"
+import { storeToRefs } from "pinia"
+import { useAuthModalStore } from "../store/authModal"
 import { useConfigStore } from "../store/config"
 import { useUserStore } from "../store/user"
 
 const userStore = useUserStore()
 const configStore = useConfigStore()
+const authStore = useAuthModalStore()
+
+const {
+  loginModalOpen,
+  loginForm: form,
+  loginLoading: isLoading,
+  loginError: msg,
+} = storeToRefs(authStore)
 const loginRef = ref()
-const [isLoading, toggleLoading] = useToggle()
-const msg = ref("")
-const form = reactive({
-  class: "",
-  username: "",
-  password: "",
-})
 const classList = computed<SelectOption[]>(() => {
   const defaults = [{ label: "没有我所在的班级", value: "" }]
   const configs =
@@ -35,29 +37,29 @@ async function submit() {
   loginRef.value!.validate(async (errors: FormRules | undefined) => {
     if (!errors) {
       try {
-        msg.value = ""
-        toggleLoading(true)
+        authStore.clearLoginError()
+        authStore.setLoginLoading(true)
         const merged = {
-          username: form.username,
-          password: form.password,
+          username: form.value.username,
+          password: form.value.password,
         }
-        if (form.class) {
-          merged.username = form.class + form.username
+        if (form.value.class) {
+          merged.username = form.value.class + form.value.username
         }
         await login(merged)
       } catch (err: any) {
         if (err.data === "Your account has been disabled") {
-          msg.value = "此账号已被封禁"
+          authStore.setLoginError("此账号已被封禁")
         } else if (err.data === "Invalid username or password") {
-          msg.value = "用户名或密码不正确"
+          authStore.setLoginError("用户名或密码不正确")
         } else {
-          msg.value = "无法登录"
+          authStore.setLoginError("无法登录")
         }
       } finally {
-        toggleLoading(false)
+        authStore.setLoginLoading(false)
       }
       if (!msg.value) {
-        toggleLogin(false)
+        authStore.closeLoginModal()
         userStore.getMyProfile()
       }
     }
@@ -65,19 +67,18 @@ async function submit() {
 }
 
 function goSignup() {
-  toggleLogin(false)
-  toggleSignup(true)
+  authStore.switchToSignup()
 }
 
 onMounted(() => {
-  msg.value = ""
+  authStore.clearLoginError()
 })
 </script>
 
 <template>
   <n-modal
     :mask-closable="false"
-    v-model:show="loginModal"
+    v-model:show="loginModalOpen"
     preset="card"
     title="登录"
     style="width: 400px"

src/shared/components/MarkdownEditor.vue

@@ -10,7 +10,6 @@
 import { MdEditor } from "md-editor-v3"
 import "md-editor-v3/lib/style.css"
 import { uploadImage } from "../../admin/api"
-
 const isDark = useDark()
 
 const modelValue = defineModel<string>("value")

src/shared/components/Pagination.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isDesktop } from "shared/composables/breakpoints"
+import { useBreakpoints } from "shared/composables/breakpoints"
 
 interface Props {
   total: number
@@ -16,6 +16,8 @@ const emit = defineEmits(["update:limit", "update:page"])
 
 const route = useRoute()
 
+const { isDesktop } = useBreakpoints()
+
 const limit = ref(props.limit)
 const page = ref(props.page)
 const sizes = computed(() => {

src/shared/components/Signup.vue

@@ -1,19 +1,18 @@
 <script setup lang="ts">
 import { getCaptcha, signup } from "../api"
-import { signupModal, toggleLogin, toggleSignup } from "../composables/modal"
-import { useUserStore } from "../store/user"
+import { storeToRefs } from "pinia"
+import { useAuthModalStore } from "../store/authModal"
 
-const userStore = useUserStore()
+const authStore = useAuthModalStore()
+
+const {
+  signupModalOpen,
+  signupForm: form,
+  signupLoading: isLoading,
+  signupError: msg,
+  captchaSrc,
+} = storeToRefs(authStore)
 const signupRef = ref()
-const captchaSrc = ref("")
-
-const form = reactive({
-  username: "",
-  email: "",
-  password: "",
-  passwordAgain: "",
-  captcha: "",
-})
 
 const rules: FormRules = {
   username: [{ required: true, message: "用户名必填", trigger: "blur" }],
@@ -26,7 +25,8 @@ const rules: FormRules = {
     { required: true, message: "密码必填", trigger: "blur" },
     { min: 6, max: 20, message: "长度在 6 到 20 位之间", trigger: "input" },
     {
-      validator: (_: FormItemRule, value: string) => value === form.password,
+      validator: (_: FormItemRule, value: string) =>
+        value === form.value.password,
       message: "两次密码输入不一致",
       trigger: "blur",
     },
@@ -36,43 +36,39 @@ const rules: FormRules = {
   ],
 }
 
-const [isLoading, toggleLoading] = useToggle()
-const msg = ref("")
-
 function goLogin() {
-  toggleLogin(true)
-  toggleSignup(false)
+  authStore.switchToLogin()
 }
 
 function submit() {
   signupRef.value!.validate(async (errors: FormRules | undefined) => {
     if (!errors) {
       try {
-        msg.value = ""
-        toggleLoading(true)
+        authStore.clearSignupError()
+        authStore.setSignupLoading(true)
         await signup({
-          username: form.username,
-          email: form.email,
-          password: form.password,
-          captcha: form.captcha,
+          username: form.value.username,
+          email: form.value.email,
+          password: form.value.password,
+          captcha: form.value.captcha,
         })
       } catch (err: any) {
         if (err.data === "Invalid captcha") {
-          msg.value = "验证码不正确"
+          authStore.setSignupError("验证码不正确")
         } else if (err.data === "Username already exists") {
-          msg.value = "用户名已存在"
+          authStore.setSignupError("用户名已存在")
         } else if (err.data === "Email already exists") {
-          msg.value = "邮箱已存在"
+          authStore.setSignupError("邮箱已存在")
         } else {
-          msg.value = "无法注册"
+          authStore.setSignupError("无法注册")
         }
         getCaptchaSrc()
-        form.captcha = ""
+        form.value.captcha = ""
       } finally {
-        toggleLoading(false)
+        authStore.setSignupLoading(false)
       }
       if (!msg.value) {
-        toggleSignup(false)
+        authStore.closeSignupModal()
       }
     }
   })
@@ -80,10 +76,10 @@ function submit() {
 
 async function getCaptchaSrc() {
   const res = await getCaptcha()
-  captchaSrc.value = res.data
+  authStore.setCaptchaSrc(res.data)
 }
 
-watch(signupModal, (v) => {
+watch(signupModalOpen, (v) => {
   if (v) getCaptchaSrc()
 })
 </script>
@@ -91,7 +87,7 @@ watch(signupModal, (v) => {
 <template>
   <n-modal
     :mask-closable="false"
-    v-model:show="signupModal"
+    v-model:show="signupModalOpen"
     preset="card"
     title="注册"
     style="width: 400px"

src/shared/components/SyncCodeEditor.vue

@@ -8,7 +8,8 @@ import { LANGUAGE } from "utils/types"
 import { oneDark } from "../themes/oneDark"
 import { smoothy } from "../themes/smoothy"
 import { useCodeSync, SYNC_ERROR_CODES } from "../composables/sync"
-import { isDesktop } from "../composables/breakpoints"
+import { useBreakpoints } from "../composables/breakpoints"
+const isDark = useDark()
 
 interface EditorReadyPayload {
   view: EditorView
@@ -44,7 +45,7 @@ const emit = defineEmits<{
   ]
 }>()
 
-const isDark = useDark()
+const { isDesktop } = useBreakpoints()
 
 const styleTheme = EditorView.baseTheme({
   "& .cm-scroller": { "font-family": "Monaco" },

src/shared/composables/breakpoints.ts

@@ -1,6 +1,20 @@
-import { breakpointsTailwind } from "@vueuse/core"
+import {
+  breakpointsTailwind,
+  useBreakpoints as useVueUseBreakpoints,
+} from "@vueuse/core"
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
+/**
+ * 响应式断点检测 composable
+ * 每次调用创建新的断点检测实例
+ */
+export function useBreakpoints() {
+  const breakpoints = useVueUseBreakpoints(breakpointsTailwind)
 
-export const isMobile = breakpoints.smallerOrEqual("md")
-export const isDesktop = breakpoints.greater("md")
+  const isMobile = breakpoints.smallerOrEqual("md")
+  const isDesktop = breakpoints.greater("md")
+
+  return {
+    isMobile,
+    isDesktop,
+  }
+}

src/shared/composables/modal.ts

@@ -1,2 +0,0 @@
-export const [loginModal, toggleLogin] = useToggle()
-export const [signupModal, toggleSignup] = useToggle()

src/shared/composables/pagination.ts

@@ -1,3 +1,5 @@
+import { reactive, watch } from "vue"
+import { useRoute, useRouter } from "vue-router"
 import { filterEmptyValue } from "utils/functions"
 
 export interface PaginationQuery {
@@ -17,6 +19,7 @@ export interface UsePaginationOptions {
 
 /**
  * 分页相关的 composable，处理分页状态和 URL 同步
+ * 每次调用创建新的分页状态实例
  * @param initialQuery 初始查询参数对象
  * @param options 配置选项
  */
@@ -139,6 +142,7 @@ export function usePagination<T extends Record<string, any>>(
 
 /**
  * 简化版本的分页 composable，只处理基本的分页逻辑
+ * 每次调用创建新的分页状态实例
  * @param defaultLimit 默认每页条数
  * @param defaultPage 默认页码
  */

src/shared/composables/switchScreen.ts

@@ -1,18 +0,0 @@
-import { ScreenMode } from "utils/constants"
-
-export const { state: screenMode, next: switchScreenMode } = useCycleList(
-  Object.values(ScreenMode),
-  {
-    initialValue: ScreenMode.both,
-  },
-)
-
-export function resetScreenMode() {
-  screenMode.value = ScreenMode.both
-}
-
-export const bothAndProblem = computed(
-  () =>
-    screenMode.value === ScreenMode.both ||
-    screenMode.value === ScreenMode.problem,
-)

src/shared/composables/sync.ts

@@ -1,3 +1,4 @@
+import { useMessage } from "naive-ui"
 import { useUserStore } from "../store/user"
 import type { EditorView } from "@codemirror/view"
 import { Compartment } from "@codemirror/state"
@@ -81,10 +82,15 @@ export interface SyncStatus {
   otherUser?: UserInfo
 }
 
+/**
+ * 代码同步 composable
+ * 每次调用创建新的同步实例
+ */
 export function useCodeSync() {
   const userStore = useUserStore()
   const message = useMessage()
 
+  // 每次调用创建新的实例变量
   let ydoc: Doc | null = null
   let provider: WebrtcProvider | null = null
   let ytext: Text | null = null

src/shared/composables/websocket.ts

@@ -324,37 +324,26 @@ class SubmissionWebSocket extends BaseWebSocket<SubmissionUpdate> {
   }
 }
 
-// 全局单例
-let wsInstance: SubmissionWebSocket | null = null
-
-/**
- * 获取 WebSocket 实例
- */
-export function getWebSocketInstance(): SubmissionWebSocket {
-  if (!wsInstance) {
-    wsInstance = new SubmissionWebSocket()
-  }
-  return wsInstance
-}
-
 /**
  * 用于组件中使用 WebSocket 的 Composable
+ * 每次调用创建新的 WebSocket 实例
  */
 export function useSubmissionWebSocket(
   handler?: MessageHandler<SubmissionUpdate>,
 ) {
-  const ws = getWebSocketInstance()
+  const ws = new SubmissionWebSocket()
 
   // 如果提供了处理器，添加到实例中
   if (handler) {
     ws.addHandler(handler)
   }
 
-  // 组件卸载时移除处理器
+  // 组件卸载时清理资源
   onUnmounted(() => {
     if (handler) {
       ws.removeHandler(handler)
     }
+    ws.disconnect()
   })
 
   return {

src/shared/store/authModal.ts

@@ -0,0 +1,170 @@
+import { defineStore } from "pinia"
+
+/**
+ * 认证状态管理 Store
+ * 统一管理登录、注册相关的模态框状态和表单状态
+ */
+export const useAuthModalStore = defineStore("authModal", () => {
+  // ==================== 模态框状态 ====================
+  const loginModalOpen = ref(false)
+  const signupModalOpen = ref(false)
+
+  // ==================== 登录表单状态 ====================
+  const loginForm = reactive({
+    class: "",
+    username: "",
+    password: "",
+  })
+
+  const loginLoading = ref(false)
+  const loginError = ref("")
+
+  // ==================== 注册表单状态 ====================
+  const signupForm = reactive({
+    username: "",
+    email: "",
+    password: "",
+    passwordAgain: "",
+    captcha: "",
+  })
+
+  const signupLoading = ref(false)
+  const signupError = ref("")
+
+  // ==================== 验证码 ====================
+  const captchaSrc = ref("")
+
+  // ==================== 模态框操作 ====================
+  /**
+   * 打开登录模态框
+   */
+  function openLoginModal() {
+    loginModalOpen.value = true
+  }
+
+  /**
+   * 关闭登录模态框
+   */
+  function closeLoginModal() {
+    loginModalOpen.value = false
+  }
+
+  /**
+   * 打开注册模态框
+   */
+  function openSignupModal() {
+    signupModalOpen.value = true
+  }
+
+  /**
+   * 关闭注册模态框
+   */
+  function closeSignupModal() {
+    signupModalOpen.value = false
+  }
+
+  /**
+   * 从登录切换到注册
+   */
+  function switchToSignup() {
+    closeLoginModal()
+    openSignupModal()
+  }
+
+  /**
+   * 从注册切换到登录
+   */
+  function switchToLogin() {
+    closeSignupModal()
+    openLoginModal()
+  }
+
+  // ==================== 登录表单操作 ====================
+  /**
+   * 设置登录加载状态
+   */
+  function setLoginLoading(loading: boolean) {
+    loginLoading.value = loading
+  }
+
+  /**
+   * 设置登录错误信息
+   */
+  function setLoginError(error: string) {
+    loginError.value = error
+  }
+
+  /**
+   * 清空登录错误
+   */
+  function clearLoginError() {
+    loginError.value = ""
+  }
+
+  // ==================== 注册表单操作 ====================
+  /**
+   * 设置注册加载状态
+   */
+  function setSignupLoading(loading: boolean) {
+    signupLoading.value = loading
+  }
+
+  /**
+   * 设置注册错误信息
+   */
+  function setSignupError(error: string) {
+    signupError.value = error
+  }
+
+  /**
+   * 清空注册错误
+   */
+  function clearSignupError() {
+    signupError.value = ""
+  }
+
+  /**
+   * 设置验证码图片地址
+   */
+  function setCaptchaSrc(src: string) {
+    captchaSrc.value = src
+  }
+
+  return {
+    // 模态框状态
+    loginModalOpen,
+    signupModalOpen,
+
+    // 登录表单状态
+    loginForm,
+    loginLoading,
+    loginError,
+
+    // 注册表单状态
+    signupForm,
+    signupLoading,
+    signupError,
+
+    // 验证码
+    captchaSrc,
+
+    // 模态框操作
+    openLoginModal,
+    closeLoginModal,
+    openSignupModal,
+    closeSignupModal,
+    switchToSignup,
+    switchToLogin,
+
+    // 登录表单操作
+    setLoginLoading,
+    setLoginError,
+    clearLoginError,
+
+    // 注册表单操作
+    setSignupLoading,
+    setSignupError,
+    clearSignupError,
+    setCaptchaSrc,
+  }
+})

src/shared/store/screenMode.ts

@@ -0,0 +1,34 @@
+import { defineStore } from "pinia"
+import { ScreenMode } from "utils/constants"
+
+export const useScreenModeStore = defineStore("screenMode", () => {
+  const { state: screenMode, next: switchScreenMode } = useCycleList(
+    Object.values(ScreenMode),
+    {
+      initialValue: ScreenMode.both,
+    },
+  )
+
+  // 计算属性
+  const isBothMode = computed(() => screenMode.value === ScreenMode.both)
+  const isCodeOnlyMode = computed(() => screenMode.value === ScreenMode.code)
+
+  const shouldShowProblem = computed(
+    () =>
+      screenMode.value === ScreenMode.both ||
+      screenMode.value === ScreenMode.problem,
+  )
+
+  function resetScreenMode() {
+    screenMode.value = ScreenMode.both
+  }
+
+  return {
+    screenMode,
+    isBothMode,
+    isCodeOnlyMode,
+    shouldShowProblem,
+    switchScreenMode,
+    resetScreenMode,
+  }
+})