update

src/admin/api.ts

@@ -480,6 +480,10 @@ export function getStuckProblems() {
   return http.get("admin/problem/stuck")
 }
 
-export function getTopACTrend(params: { since_year: number; until_year: number; min_per_year: number }) {
+export function getTopACTrend(params: {
+  since_year: number
+  until_year: number
+  min_per_year: number
+}) {
   return http.get("admin/problem/top_ac_trend", { params })
 }

src/admin/problem/TopACTrend.vue

@@ -47,7 +47,7 @@ const minPerYearOptions = [
 ]
 
 const sinceYear = ref(2023)
-const untilYear = ref(new Date().getFullYear()-1)
+const untilYear = ref(new Date().getFullYear() - 1)
 const minPerYear = ref(100)
 const loading = ref(false)
 const data = ref<ProblemTrend[]>([])
@@ -126,7 +126,11 @@ function getChartOptions(problem: ProblemTrend) {
 async function fetchData() {
   loading.value = true
   try {
-    const res = await getTopACTrend({ since_year: sinceYear.value, until_year: untilYear.value, min_per_year: minPerYear.value })
+    const res = await getTopACTrend({
+      since_year: sinceYear.value,
+      until_year: untilYear.value,
+      min_per_year: minPerYear.value,
+    })
     data.value = res.data
   } finally {
     loading.value = false
@@ -171,7 +175,11 @@ onMounted(fetchData)
     </div>
     <div v-else class="grid">
       <div v-for="problem in data" :key="problem.problem_id" class="chart-card">
-        <Line :data="getChartData(problem)" :options="getChartOptions(problem)" :plugins="[acLabelPlugin]" />
+        <Line
+          :data="getChartData(problem)"
+          :options="getChartOptions(problem)"
+          :plugins="[acLabelPlugin]"
+        />
       </div>
     </div>
   </n-spin>

src/admin/problem/components/TestcaseGenerator.vue

@@ -26,10 +26,23 @@ const message = useMessage()
 let nextId = 0
 
 function makeInitialFiles(): FileEntry[] {
-  const fromSamples = (props.samples ?? []).map((s) => ({ id: nextId++, in: s.input, out: s.output, error: false }))
+  const fromSamples = (props.samples ?? []).map((s) => ({
+    id: nextId++,
+    in: s.input,
+    out: s.output,
+    error: false,
+  }))
   const total = Math.ceil(Math.max(fromSamples.length, 1) / 5) * 5
   const extra = total - fromSamples.length
-  return [...fromSamples, ...Array.from({ length: extra }, () => ({ id: nextId++, in: "", out: "", error: false }))]
+  return [
+    ...fromSamples,
+    ...Array.from({ length: extra }, () => ({
+      id: nextId++,
+      in: "",
+      out: "",
+      error: false,
+    })),
+  ]
 }
 
 const files = ref<FileEntry[]>(makeInitialFiles())
@@ -41,11 +54,15 @@ const availableLanguages = computed(() =>
   props.answers.map((a) => ({ label: a.language, value: a.language })),
 )
 
-const hasAnyAnswerCode = computed(() => props.answers.some((a) => a.code.trim()))
+const hasAnyAnswerCode = computed(() =>
+  props.answers.some((a) => a.code.trim()),
+)
 
 // 当前选中语言是否有答案代码（用于控制"先运行"按钮）
 const hasAnswerCode = computed(() => {
-  const answer = props.answers.find((a) => a.language === selectedLanguage.value)
+  const answer = props.answers.find(
+    (a) => a.language === selectedLanguage.value,
+  )
   return !!answer?.code.trim()
 })
 
@@ -53,7 +70,10 @@ const hasAnswerCode = computed(() => {
 watch(
   availableLanguages,
   (langs) => {
-    if (langs.length && !langs.find((l) => l.value === selectedLanguage.value)) {
+    if (
+      langs.length &&
+      !langs.find((l) => l.value === selectedLanguage.value)
+    ) {
       selectedLanguage.value = langs[0].value
     }
   },
@@ -73,11 +93,23 @@ const canUpload = computed(
 )
 
 function reset() {
-  files.value = Array.from({ length: 5 }, () => ({ id: nextId++, in: "", out: "", error: false }))
+  files.value = Array.from({ length: 5 }, () => ({
+    id: nextId++,
+    in: "",
+    out: "",
+    error: false,
+  }))
 }
 
 function add(n: number) {
-  files.value.push(...Array.from({ length: n }, () => ({ id: nextId++, in: "", out: "", error: false })))
+  files.value.push(
+    ...Array.from({ length: n }, () => ({
+      id: nextId++,
+      in: "",
+      out: "",
+      error: false,
+    })),
+  )
 }
 
 function remove(index: number) {
@@ -85,7 +117,9 @@ function remove(index: number) {
 }
 
 async function run() {
-  const answer = props.answers.find((a) => a.language === selectedLanguage.value)
+  const answer = props.answers.find(
+    (a) => a.language === selectedLanguage.value,
+  )
   if (!answer?.code.trim()) return
 
   // 过滤空行，去重（按输入内容）
@@ -108,7 +142,11 @@ async function run() {
           { language: selectedLanguage.value, value: answer.code },
           files.value[i].in,
         )
-        files.value[i] = { ...files.value[i], out: result.output, error: result.status !== 3 }
+        files.value[i] = {
+          ...files.value[i],
+          out: result.output,
+          error: result.status !== 3,
+        }
       } catch {
         files.value[i] = { ...files.value[i], out: "", error: true }
       }
@@ -136,7 +174,9 @@ async function upload() {
     const baseScore = Math.floor(100 / testcases.length)
     const remainder = 100 - baseScore * testcases.length
     testcases.forEach((tc, i) => {
-      tc.score = String(i === testcases.length - 1 ? baseScore + remainder : baseScore)
+      tc.score = String(
+        i === testcases.length - 1 ? baseScore + remainder : baseScore,
+      )
     })
 
     emit("uploaded", res.data.id, testcases)
@@ -151,7 +191,12 @@ async function upload() {
 
 <template>
   <n-flex vertical>
-    <n-alert v-if="!hasAnyAnswerCode" type="warning" :show-icon="false" style="margin-bottom: 8px">
+    <n-alert
+      v-if="!hasAnyAnswerCode"
+      type="warning"
+      :show-icon="false"
+      style="margin-bottom: 8px"
+    >
       还没有填写答案代码，请先在上方"本题参考答案"中填写至少一种语言的答案，再来生成测试用例
     </n-alert>
     <n-flex align="center" wrap>

src/admin/problem/list.vue

@@ -64,14 +64,20 @@ const columns: DataTableColumn<AdminProblemFiltered>[] = [
     key: "difficulty",
     width: 80,
     render: (row) =>
-      h(NTag, { type: getTagColor(row.difficulty), size: "small" }, () => DIFFICULTY[row.difficulty]),
+      h(
+        NTag,
+        { type: getTagColor(row.difficulty), size: "small" },
+        () => DIFFICULTY[row.difficulty],
+      ),
   },
   {
     title: "标签",
     key: "tags",
     minWidth: 120,
     render: (row) =>
-      h(NFlex, { size: 4 }, () => row.tags.map((t) => h(NTag, { key: t, size: "small" }, () => t))),
+      h(NFlex, { size: 4 }, () =>
+        row.tags.map((t) => h(NTag, { key: t, size: "small" }, () => t)),
+      ),
   },
   { title: "出题人", key: "username", width: 120 },
   {
@@ -208,7 +214,12 @@ watch(() => [query.page, query.limit, query.author], listProblems)
     v-model:limit="query.limit"
     v-model:page="query.page"
   />
-  <Modal v-model:show="show" :count="count" :next-display-id="nextDisplayID" @change="listProblems" />
+  <Modal
+    v-model:show="show"
+    :count="count"
+    :next-display-id="nextDisplayID"
+    @change="listProblems"
+  />
 </template>
 
 <style scoped>

src/admin/tutorial/components/ExerciseManager.vue

@@ -282,7 +282,7 @@ function typeTagType(type: string): "success" | "info" | "warning" {
               type="textarea"
               :rows="10"
               placeholder="在此粘贴正确的代码，保存后将自动按行拆分并乱序"
-              style="font-family: 'Monaco'"
+              style="font-family: "Monaco""
             />
           </n-form-item>
         </template>
@@ -302,7 +302,7 @@ function typeTagType(type: string): "success" | "info" | "warning" {
               type="textarea"
               :rows="10"
               placeholder="用 {{答案}} 标记空位，多个合法答案用 | 分隔，例如：for {{i|idx}} in range(10):"
-              style="font-family: 'Monaco'"
+              style="font-family: &quot;Monaco&quot;"
             />
           </n-form-item>
         </template>

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 = {
+    const grade = data.grade || ""
-      score: data.score || 0,
+    latestRating.value = { score: data.score || 0, grade }
-      grade: data.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-flex align="center">
+          <n-text>流程图评分详情</n-text>
-            <n-text>流程图评分详情</n-text>
+          <n-text :type="getGradeType(modalRating.grade)">
-            <n-text :type="getGradeType(modalRating.grade)">
+            {{ modalRating.score }}分 {{ modalRating.grade }}级
-              {{ modalRating.score }}分 {{ modalRating.grade }}级
+          </n-text>
-            </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>
       </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")

src/shared/components/PinnedFlowchartPanel.vue

@@ -1,112 +0,0 @@
-<template>
-  <div
-    v-if="store.isPinned"
-    ref="panel"
-    class="pinned-panel"
-    :style="{ left: `${x}px`, top: `${y}px` }"
-  >
-    <n-card
-      size="small"
-      :content-style="collapsed ? 'display:none' : 'padding:8px'"
-    >
-      <template #header>
-        <div ref="handle" class="pinned-handle">
-          <n-flex align="center" :size="8">
-            <Icon icon="mdi:pin" style="font-size: 14px" />
-            <n-text strong style="font-size: 13px">流程图预览</n-text>
-          </n-flex>
-        </div>
-      </template>
-      <template #header-extra>
-        <n-flex :size="4">
-          <n-button quaternary size="small" @click="collapsed = !collapsed">
-            <template #icon>
-              <Icon :icon="collapsed ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
-            </template>
-          </n-button>
-          <n-button quaternary size="small" @click="store.unpin()">
-            <template #icon>
-              <Icon icon="mdi:close" />
-            </template>
-          </n-button>
-        </n-flex>
-      </template>
-      <n-alert v-if="renderError" type="error" title="渲染失败" size="small">
-        {{ renderError }}
-      </n-alert>
-      <div v-else ref="mermaidContainer" class="mermaid-area"></div>
-    </n-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Icon } from "@iconify/vue"
-import { usePinnedFlowchartStore } from "shared/store/pinnedFlowchart"
-import { useMermaid } from "shared/composables/useMermaid"
-
-const store = usePinnedFlowchartStore()
-const { renderError, renderFlowchart, clearError } = useMermaid()
-
-const panelRef = useTemplateRef<HTMLElement>("panel")
-const handleRef = useTemplateRef<HTMLElement>("handle")
-const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
-const collapsed = ref(false)
-
-const { x, y } = useDraggable(panelRef, {
-  handle: handleRef,
-  initialValue: {
-    x: window.innerWidth - 440,
-    y: window.innerHeight - 400,
-  },
-})
-
-watch(
-  () => store.mermaidCode,
-  async (code) => {
-    if (!code) return
-    collapsed.value = false
-    await nextTick()
-    await renderFlowchart(mermaidContainer.value, code)
-  },
-  { immediate: true },
-)
-
-watch(collapsed, async (val) => {
-  if (val) {
-    clearError()
-  } else if (store.mermaidCode) {
-    await nextTick()
-    await renderFlowchart(mermaidContainer.value, store.mermaidCode)
-  }
-})
-</script>
-
-<style scoped>
-.pinned-panel {
-  position: fixed;
-  z-index: 1000;
-  width: 420px;
-}
-
-.pinned-handle {
-  cursor: grab;
-  user-select: none;
-}
-
-.pinned-handle:active {
-  cursor: grabbing;
-}
-
-.mermaid-area {
-  height: 340px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-
-:deep(.mermaid-area > svg) {
-  max-width: 100%;
-  max-height: 100%;
-}
-</style>

src/shared/components/StatisticsPanel.vue

@@ -23,35 +23,51 @@
     </n-button>
   </n-flex>
 
-  <n-empty v-if="count.total === 0" description="暂无数据" style="margin: 40px 0" />
+  <n-empty
+    v-if="count.total === 0"
+    description="暂无数据"
+    style="margin: 40px 0"
+  />
 
   <template v-if="count.total > 0">
     <n-divider style="margin: 16px 0" />
     <n-flex justify="space-around">
       <div class="stat-item">
         <div class="stat-label">总提交</div>
-        <n-gradient-text type="info" font-size="28">{{ count.total }}</n-gradient-text>
+        <n-gradient-text type="info" font-size="28">{{
+          count.total
+        }}</n-gradient-text>
       </div>
       <div class="stat-item">
         <div class="stat-label">正确提交</div>
-        <n-gradient-text type="primary" font-size="28">{{ count.accepted }}</n-gradient-text>
+        <n-gradient-text type="primary" font-size="28">{{
+          count.accepted
+        }}</n-gradient-text>
       </div>
       <div class="stat-item">
         <div class="stat-label">正确率</div>
-        <n-gradient-text type="warning" font-size="28">{{ count.rate }}</n-gradient-text>
+        <n-gradient-text type="warning" font-size="28">{{
+          count.rate
+        }}</n-gradient-text>
       </div>
       <template v-if="person.count > 0">
         <div class="stat-item">
           <div class="stat-label">完成人数</div>
-          <n-gradient-text type="error" font-size="28">{{ list.length }}</n-gradient-text>
+          <n-gradient-text type="error" font-size="28">{{
+            list.length
+          }}</n-gradient-text>
         </div>
         <div class="stat-item">
           <div class="stat-label">班级人数</div>
-          <n-gradient-text type="warning" font-size="28">{{ adjustedPersonCount }}</n-gradient-text>
+          <n-gradient-text type="warning" font-size="28">{{
+            adjustedPersonCount
+          }}</n-gradient-text>
         </div>
         <div class="stat-item">
           <div class="stat-label">完成度</div>
-          <n-gradient-text type="success" font-size="28">{{ adjustedPersonRate }}</n-gradient-text>
+          <n-gradient-text type="success" font-size="28">{{
+            adjustedPersonRate
+          }}</n-gradient-text>
         </div>
       </template>
     </n-flex>
@@ -67,7 +83,10 @@
           </n-gi>
           <n-gi v-if="person.count > 0">
             <n-card title="班级完成度">
-              <Doughnut :data="completionChartData" :options="completionChartOptions" />
+              <Doughnut
+                :data="completionChartData"
+                :options="completionChartOptions"
+              />
             </n-card>
           </n-gi>
         </n-grid>
@@ -87,22 +106,40 @@
         />
       </n-tab-pane>
 
-      <n-tab-pane name="unaccepted" :tab="`未完成（${visibleUnaccepted.length}）`">
+      <n-tab-pane
+        name="unaccepted"
+        :tab="`未完成（${visibleUnaccepted.length}）`"
+      >
         <n-flex align="center" style="margin: 12px 0">
           <n-switch v-model:value="hideMode" size="large">
             <template #checked>请假隐藏中</template>
             <template #unchecked>请假隐藏</template>
           </n-switch>
-          <n-button v-if="hiddenCount > 0" size="small" type="info" @click="showAll">
+          <n-button
+            v-if="hiddenCount > 0"
+            size="small"
+            type="info"
+            @click="showAll"
+          >
             恢复 {{ hiddenCount }} 位
           </n-button>
         </n-flex>
         <n-flex size="large" align="center">
-          <n-gradient-text v-if="visibleUnaccepted.length === 0" font-size="24" type="success">
+          <n-gradient-text
+            v-if="visibleUnaccepted.length === 0"
+            font-size="24"
+            type="success"
+          >
             全都完成了
           </n-gradient-text>
           <template v-for="item in visibleUnaccepted" :key="item.username">
-            <n-tag v-if="hideMode" closable size="large" style="font-size: 20px" @close="hideStudent(item.username)">
+            <n-tag
+              v-if="hideMode"
+              closable
+              size="large"
+              style="font-size: 20px"
+              @close="hideStudent(item.username)"
+            >
               {{ item.real_name }}
             </n-tag>
             <span v-else style="font-size: 24px">{{ item.real_name }}</span>
@@ -264,7 +301,10 @@ const adjustedPersonCount = computed(() => person.count - hiddenCount.value)
 
 const adjustedPersonRate = computed(() => {
   if (adjustedPersonCount.value <= 0) return "0%"
-  const rate = Math.min(100, (list.value.length / adjustedPersonCount.value) * 100)
+  const rate = Math.min(
+    100,
+    (list.value.length / adjustedPersonCount.value) * 100,
+  )
   return `${Math.round(rate * 100) / 100}%`
 })
 
@@ -321,7 +361,10 @@ const pieChartOptions = {
 // 环形图数据 - 班级完成度
 const completionChartData = computed(() => {
   const completedCount = list.value.length
-  const uncompletedCount = Math.max(0, adjustedPersonCount.value - completedCount)
+  const uncompletedCount = Math.max(
+    0,
+    adjustedPersonCount.value - completedCount,
+  )
   return {
     labels: ["已完成", "未完成"],
     datasets: [

src/shared/layout/default.vue

@@ -4,7 +4,6 @@ import Header from "../components/Header.vue"
 import Login from "../components/Login.vue"
 import Signup from "../components/Signup.vue"
 import LoginSummaryModal from "../components/LoginSummaryModal.vue"
-import PinnedFlowchartPanel from "../components/PinnedFlowchartPanel.vue"
 </script>
 
 <template>
@@ -20,7 +19,6 @@ import PinnedFlowchartPanel from "../components/PinnedFlowchartPanel.vue"
     <Login />
     <Signup />
     <LoginSummaryModal />
-    <PinnedFlowchartPanel />
     <Beian />
   </n-layout>
 </template>