update

src/oj/problem/components/MyFlowchartTab.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { usePinnedFlowchartStore } from "shared/store/pinnedFlowchart"
+import { useMyFlowchartStore } from "shared/store/myFlowchart"
 import { useMermaid } from "shared/composables/useMermaid"
 
-const store = usePinnedFlowchartStore()
+const store = useMyFlowchartStore()
 const { renderError, renderFlowchart } = useMermaid()
 const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
 

src/oj/problem/components/SubmitFlowchart.vue

@@ -12,7 +12,7 @@ import {
   useFlowchartWebSocket,
   type FlowchartEvaluationUpdate,
 } from "shared/composables/websocket"
-import { usePinnedFlowchartStore } from "shared/store/pinnedFlowchart"
+import { useMyFlowchartStore } from "shared/store/myFlowchart"
 
 // API 和状态管理
 import {
@@ -52,7 +52,7 @@ const message = useMessage()
 const problemStore = useProblemStore()
 const { problem } = toRefs(problemStore)
 const { isDesktop } = useBreakpoints()
-const pinnedStore = usePinnedFlowchartStore()
+const myFlowchartStore = useMyFlowchartStore()
 const { convertToMermaid } = useMermaidConverter()
 const { renderError, renderFlowchart } = useMermaid()
 
@@ -95,7 +95,7 @@ const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
     latestRating.value = { score: data.score || 0, grade }
     message.success(`流程图评分完成！得分: ${data.score}分 (${grade}级)`)
     if ((grade === "A" || grade === "S") && lastSubmittedMermaidCode.value) {
-      pinnedStore.pin(lastSubmittedMermaidCode.value)
+      myFlowchartStore.show(lastSubmittedMermaidCode.value)
     }
   } else if (data.type === "flowchart_evaluation_failed") {
     loading.value = false
@@ -263,7 +263,7 @@ onMounted(async () => {
   if ((grade === "A" || grade === "S") && submissionCount.value > 0) {
     await getSubmission(submissionCount.value)
     if (myMermaidCode.value) {
-      pinnedStore.pin(myMermaidCode.value)
+      myFlowchartStore.show(myMermaidCode.value)
     }
   }
 })

src/oj/problem/detail.vue

@@ -4,7 +4,7 @@ import { useBreakpoints } from "shared/composables/breakpoints"
 import { storeToRefs } from "pinia"
 import { useProblemStore } from "oj/store/problem"
 import { useScreenModeStore } from "shared/store/screenMode"
-import { usePinnedFlowchartStore } from "shared/store/pinnedFlowchart"
+import { useMyFlowchartStore } from "shared/store/myFlowchart"
 
 const ProblemEditor = defineAsyncComponent(
   () => import("./components/ProblemEditor.vue"),
@@ -30,8 +30,8 @@ const ProblemComment = defineAsyncComponent(
 const ProblemFlowchart = defineAsyncComponent(
   () => import("./components/ProblemFlowchart.vue"),
 )
-const PinnedFlowchartTab = defineAsyncComponent(
-  () => import("./components/PinnedFlowchartTab.vue"),
+const MyFlowchartTab = defineAsyncComponent(
+  () => import("./components/MyFlowchartTab.vue"),
 )
 
 interface Props {
@@ -51,7 +51,7 @@ const router = useRouter()
 
 const problemStore = useProblemStore()
 const screenModeStore = useScreenModeStore()
-const pinnedStore = usePinnedFlowchartStore()
+const myFlowchartStore = useMyFlowchartStore()
 const { problem } = storeToRefs(problemStore)
 const { shouldShowProblem } = storeToRefs(screenModeStore)
 
@@ -62,6 +62,7 @@ const tabOptions = computed(() => {
   if (problem.value?.show_flowchart) {
     options.push("flowchart")
   }
+
   if (isMobile.value) {
     options.push("editor")
   }
@@ -69,8 +70,8 @@ const tabOptions = computed(() => {
   if (!props.contestID) {
     options.push("comment")
   }
-  if (pinnedStore.isPinned) {
-    options.push("pinned")
+  if (myFlowchartStore.showing) {
+    options.push("my-flowchart")
   }
   options.push("submission")
   return options
@@ -100,9 +101,9 @@ watch(currentTab, (tab) => {
 })
 
 watch(
-  () => pinnedStore.isPinned,
-  (pinned) => {
-    if (pinned) currentTab.value = "pinned"
+  () => myFlowchartStore.showing,
+  (showing) => {
+    if (showing) currentTab.value = "my-flowchart"
   },
 )
 
@@ -124,7 +125,7 @@ onBeforeUnmount(() => {
   problem.value = null
   errMsg.value = "无数据"
   screenModeStore.resetScreenMode()
-  pinnedStore.unpin()
+  myFlowchartStore.hide()
 })
 
 watch(isMobile, (value) => {
@@ -171,11 +172,11 @@ watch(isMobile, (value) => {
               <ProblemComment />
             </n-tab-pane>
             <n-tab-pane
-              v-if="pinnedStore.isPinned"
-              name="pinned"
+              v-if="myFlowchartStore.showing"
+              name="my-flowchart"
               tab="我的流程图"
             >
-              <PinnedFlowchartTab />
+              <MyFlowchartTab />
             </n-tab-pane>
             <n-tab-pane
               name="submission"
@@ -211,13 +212,6 @@ watch(isMobile, (value) => {
           >
             <ProblemFlowchart />
           </n-tab-pane>
-          <n-tab-pane
-            v-if="pinnedStore.isPinned"
-            name="pinned"
-            tab="我的流程图"
-          >
-            <PinnedFlowchartTab />
-          </n-tab-pane>
           <n-tab-pane
             name="info"
             tab="题目统计"
@@ -233,6 +227,13 @@ watch(isMobile, (value) => {
           >
             <ProblemComment />
           </n-tab-pane>
+          <n-tab-pane
+            v-if="myFlowchartStore.showing"
+            name="my-flowchart"
+            tab="我的流程图"
+          >
+            <MyFlowchartTab />
+          </n-tab-pane>
           <n-tab-pane
             name="submission"
             tab="我的提交"
@@ -266,8 +267,8 @@ watch(isMobile, (value) => {
       >
         <ProblemComment />
       </n-tab-pane>
-      <n-tab-pane v-if="pinnedStore.isPinned" name="pinned" tab="我的流程图">
-        <PinnedFlowchartTab />
+      <n-tab-pane v-if="myFlowchartStore.showing" name="my-flowchart" tab="我的流程图">
+        <MyFlowchartTab />
       </n-tab-pane>
       <n-tab-pane name="submission" tab="提交" :disabled="!!props.problemSetId">
         <ProblemSubmission />

src/shared/store/myFlowchart.ts

@@ -0,0 +1,18 @@
+import { defineStore } from "pinia"
+
+export const useMyFlowchartStore = defineStore("myFlowchart", () => {
+  const showing = ref(false)
+  const mermaidCode = ref("")
+
+  function show(code: string) {
+    mermaidCode.value = code
+    showing.value = true
+  }
+
+  function hide() {
+    showing.value = false
+    mermaidCode.value = ""
+  }
+
+  return { showing, mermaidCode, show, hide }
+})

src/shared/store/pinnedFlowchart.ts

@@ -1,18 +0,0 @@
-import { defineStore } from "pinia"
-
-export const usePinnedFlowchartStore = defineStore("pinnedFlowchart", () => {
-  const isPinned = ref(false)
-  const mermaidCode = ref("")
-
-  function pin(code: string) {
-    mermaidCode.value = code
-    isPinned.value = true
-  }
-
-  function unpin() {
-    isPinned.value = false
-    mermaidCode.value = ""
-  }
-
-  return { isPinned, mermaidCode, pin, unpin }
-})