update

2026-05-25 06:15:04 -06:00
parent 9f18ba900a
commit 1296251c80
15 changed files with 258 additions and 188 deletions
--- a/src/shared/components/PinnedFlowchartPanel.vue
+++ b/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>
--- a/src/shared/components/StatisticsPanel.vue
+++ b/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: [