update

src/oj/class/pk.vue

@@ -946,7 +946,13 @@ const radarChartOptions = {
               render: (row) =>
                 h(
                   'span',
-                  { style: { color: '#722ed1', fontWeight: '700', fontSize: '15px' } },
+                  {
+                    style: {
+                      color: '#722ed1',
+                      fontWeight: '700',
+                      fontSize: '15px',
+                    },
+                  },
                   row.composite_score.toFixed(1),
                 ),
             },

src/oj/learn/components/ExerciseFill.vue

@@ -90,7 +90,9 @@ function inputWidth(idx: number): string {
     style="margin: 16px 0; border: 1.5px solid var(--n-border-color)"
   >
     <template #header>
-      <n-tag type="warning" size="small" :bordered="false">练一练 · 代码填空</n-tag>
+      <n-tag type="warning" size="small" :bordered="false"
+        >练一练 · 代码填空</n-tag
+      >
     </template>
 
     <p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>

src/oj/problem/components/PinnedFlowchartTab.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { usePinnedFlowchartStore } from "shared/store/pinnedFlowchart"
+import { useMermaid } from "shared/composables/useMermaid"
+
+const store = usePinnedFlowchartStore()
+const { renderError, renderFlowchart } = useMermaid()
+const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
+
+watch(
+  () => store.mermaidCode,
+  async (code) => {
+    if (!code) return
+    await nextTick()
+    await renderFlowchart(mermaidContainer.value, code)
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <n-flex vertical :size="8" style="padding: 8px 0">
+    <n-flex justify="end">
+      <n-button size="small" secondary @click="store.unpin()"
+        >取消固定</n-button
+      >
+    </n-flex>
+    <n-alert v-if="renderError" type="error" title="渲染失败" size="small">
+      {{ renderError }}
+    </n-alert>
+    <div v-else ref="mermaidContainer" class="flowchart-container"></div>
+  </n-flex>
+</template>
+
+<style scoped>
+.flowchart-container {
+  width: 100%;
+  min-height: 500px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+:deep(.flowchart-container > svg) {
+  width: 100%;
+  height: auto;
+}
+</style>

src/oj/problem/components/ProblemContent.vue

@@ -58,11 +58,7 @@ watch(
 
 // AC 或失败次数 >= 3 时加载推荐
 watch(
-  () => [
-    problem.value?._id,
-    problem.value?.my_status,
-    problemStore.failCount,
-  ],
+  () => [problem.value?._id, problem.value?.my_status, problemStore.failCount],
   ([, status, failCount]) => {
     if (status === 0 || (failCount as number) >= 3) {
       loadSimilarProblems()

src/oj/problem/components/SubmitFlowchart.vue

@@ -12,7 +12,6 @@ import {
   useFlowchartWebSocket,
   type FlowchartEvaluationUpdate,
 } from "shared/composables/websocket"
-import { Icon } from "@iconify/vue"
 import { usePinnedFlowchartStore } from "shared/store/pinnedFlowchart"
 
 // API 和状态管理
@@ -74,6 +73,7 @@ const evaluation = ref<Evaluation>({
   criteria_details: {},
 })
 const page = ref(1)
+const lastSubmittedMermaidCode = ref("")
 const suggestionLines = computed(() =>
   splitSuggestionLines(evaluation.value.suggestions),
 )
@@ -88,15 +88,15 @@ function splitSuggestionLines(suggestions?: string | null) {
 }
 
 // ==================== WebSocket 相关函数 ====================
-// 处理 WebSocket 消息
 const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
   if (data.type === "flowchart_evaluation_completed") {
     loading.value = false
-    latestRating.value = {
-      score: data.score || 0,
-      grade: data.grade || "",
+    const grade = data.grade || ""
+    latestRating.value = { score: data.score || 0, grade }
+    message.success(`流程图评分完成！得分: ${data.score}分 (${grade}级)`)
+    if ((grade === "A" || grade === "S") && lastSubmittedMermaidCode.value) {
+      pinnedStore.pin(lastSubmittedMermaidCode.value)
     }
-    message.success(`流程图评分完成！得分: ${data.score}分 (${data.grade}级)`)
   } else if (data.type === "flowchart_evaluation_failed") {
     loading.value = false
     message.error(`流程图评分失败: ${data.error}`)
@@ -127,6 +127,7 @@ async function submitFlowchartData() {
   }
 
   const mermaidCode = convertToMermaid(flowchartData)
+  lastSubmittedMermaidCode.value = mermaidCode
   const compressed = utoa(JSON.stringify(flowchartData))
 
   loading.value = true
@@ -223,11 +224,6 @@ function closeModal() {
   showDetailModal.value = false
 }
 
-function pinFlowchart() {
-  pinnedStore.pin(myMermaidCode.value)
-  closeModal()
-}
-
 function loadToEditor() {
   if (myFlowchartZippedStr.value) {
     const str = atou(myFlowchartZippedStr.value)
@@ -259,11 +255,17 @@ const getPercentType = (percent: number) => {
 }
 
 // ==================== 生命周期钩子 ====================
-// 组件挂载时连接 WebSocket 并检查状态
 onMounted(async () => {
   connect()
   await getCurrentSubmission()
   page.value = submissionCount.value
+  const grade = latestRating.value.grade
+  if ((grade === "A" || grade === "S") && submissionCount.value > 0) {
+    await getSubmission(submissionCount.value)
+    if (myMermaidCode.value) {
+      pinnedStore.pin(myMermaidCode.value)
+    }
+  }
 })
 
 // 组件卸载时断开连接
@@ -299,26 +301,11 @@ onUnmounted(() => {
     <!-- 流程图评分详情模态框 -->
     <n-modal v-model:show="showDetailModal" preset="card" style="width: 1000px">
       <template #header>
-        <n-flex align="center" justify="space-between" style="width: 100%">
-          <n-flex align="center">
-            <n-text>流程图评分详情</n-text>
-            <n-text :type="getGradeType(modalRating.grade)">
-              {{ modalRating.score }}分 {{ modalRating.grade }}级
-            </n-text>
-          </n-flex>
-          <n-button
-            quaternary
-            size="small"
-            :type="pinnedStore.isPinned ? 'primary' : 'default'"
-            @click="pinFlowchart"
-          >
-            <template #icon>
-              <Icon
-                :icon="pinnedStore.isPinned ? 'mdi:pin' : 'mdi:pin-outline'"
-              />
-            </template>
-            {{ pinnedStore.isPinned ? "已固定" : "固定流程图" }}
-          </n-button>
+        <n-flex align="center">
+          <n-text>流程图评分详情</n-text>
+          <n-text :type="getGradeType(modalRating.grade)">
+            {{ modalRating.score }}分 {{ modalRating.grade }}级
+          </n-text>
         </n-flex>
       </template>
       <n-grid :cols="5" :x-gap="16">

src/oj/problem/detail.vue

@@ -4,6 +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"
 
 const ProblemEditor = defineAsyncComponent(
   () => import("./components/ProblemEditor.vue"),
@@ -29,6 +30,9 @@ const ProblemComment = defineAsyncComponent(
 const ProblemFlowchart = defineAsyncComponent(
   () => import("./components/ProblemFlowchart.vue"),
 )
+const PinnedFlowchartTab = defineAsyncComponent(
+  () => import("./components/PinnedFlowchartTab.vue"),
+)
 
 interface Props {
   problemID: string
@@ -47,6 +51,7 @@ const router = useRouter()
 
 const problemStore = useProblemStore()
 const screenModeStore = useScreenModeStore()
+const pinnedStore = usePinnedFlowchartStore()
 const { problem } = storeToRefs(problemStore)
 const { shouldShowProblem } = storeToRefs(screenModeStore)
 
@@ -57,6 +62,9 @@ const tabOptions = computed(() => {
   if (problem.value?.show_flowchart) {
     options.push("flowchart")
   }
+  if (pinnedStore.isPinned) {
+    options.push("pinned")
+  }
   if (isMobile.value) {
     options.push("editor")
   }
@@ -91,6 +99,13 @@ watch(currentTab, (tab) => {
   })
 })
 
+watch(
+  () => pinnedStore.isPinned,
+  (pinned) => {
+    if (pinned) currentTab.value = "pinned"
+  },
+)
+
 async function init() {
   screenModeStore.resetScreenMode()
   try {
@@ -109,6 +124,7 @@ onBeforeUnmount(() => {
   problem.value = null
   errMsg.value = "无数据"
   screenModeStore.resetScreenMode()
+  pinnedStore.unpin()
 })
 
 watch(isMobile, (value) => {
@@ -139,6 +155,13 @@ 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="题目统计"
@@ -188,6 +211,13 @@ 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="题目统计"
@@ -222,6 +252,9 @@ watch(isMobile, (value) => {
       <n-tab-pane v-if="problem.show_flowchart" name="flowchart" tab="流程">
         <ProblemFlowchart />
       </n-tab-pane>
+      <n-tab-pane v-if="pinnedStore.isPinned" name="pinned" tab="我的流程图">
+        <PinnedFlowchartTab />
+      </n-tab-pane>
       <n-tab-pane name="editor" tab="代码">
         <component :is="inProblem ? ProblemEditor : ContestEditor" />
       </n-tab-pane>

src/oj/submission/components/SubmissionLink.vue

@@ -42,7 +42,9 @@ const props = defineProps<Props>()
 defineEmits(["showCode"])
 
 const userStore = useUserStore()
-const isOwnSubmission = computed(() => userStore.profile?.user?.id === props.submission.user_id)
+const isOwnSubmission = computed(
+  () => userStore.profile?.user?.id === props.submission.user_id,
+)
 
 function goto() {
   window.open("/submission/" + props.submission.id, "_blank")