update

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