From 5b43015be40231c52ab31c311da208be7d95493e Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 29 Sep 2026 08:42:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=BB=9F=E8=AE=A1):=20=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E9=87=8C=E9=BC=A0=E6=A0=87=E5=81=9C=E5=9C=A8?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=96=B9=E5=9D=97=E4=B8=8A=E5=B0=B1=E8=83=BD?=
 =?UTF-8?q?=E7=9C=8B=E5=88=B0=E8=BF=99=E6=AC=A1=E4=BA=A4=E7=9A=84=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=EF=BC=8C=E4=B8=8D=E7=94=A8=E5=86=8D=E7=82=B9=E5=BC=80?=
 =?UTF-8?q?=E6=96=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/shared/components/StatisticsPanel.vue | 75 +++++++++++++++++--
 1 file changed, 67 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/shared/components/StatisticsPanel.vue b/apps/web/src/shared/components/StatisticsPanel.vue
index 3634479..47c3980 100644
--- a/apps/web/src/shared/components/StatisticsPanel.vue
+++ b/apps/web/src/shared/components/StatisticsPanel.vue
@@ -156,14 +156,14 @@
 <script setup lang="ts">
 import { h } from "vue"
 import { formatISO, sub, type Duration } from "date-fns"
-import { getSubmissionStatistics, getSubmissionStatisticsItems } from "oj/api"
-import { PANEL_DURATION_OPTIONS, STORAGE_KEY } from "utils/constants"
+import { getSubmission, getSubmissionStatistics, getSubmissionStatisticsItems } from "oj/api"
+import { LANGUAGE_FORMAT_VALUE, PANEL_DURATION_OPTIONS, STORAGE_KEY } from "utils/constants"
 import { useConfigStore } from "../store/config"
 import { useHiddenStudents } from "../composables/hiddenStudents"
 import { useStatisticsQuery } from "../composables/statisticsQuery"
 import { Doughnut } from "vue-chartjs"
 import { Chart as ChartJS, ArcElement, Title, Tooltip, Legend } from "chart.js"
-import { NFlex, NTag, NText, NTooltip, type DataTableRowKey } from "naive-ui"
+import { NCode, NFlex, NPopover, NTag, NText, type DataTableRowKey } from "naive-ui"
 import { JUDGE_STATUS, SubmissionStatus } from "utils/constants"
 import { durationFromValue, parseTime } from "utils/functions"
 import type {
@@ -243,6 +243,50 @@ function groupByProblem(list: SubmissionStatisticsItems["items"]) {
     .sort((a, b) => Number(a.solved) - Number(b.solved) || b.items.length - a.items.length)
 }
 
+/**
+ * 悬停方块时看到的代码，按提交编号缓存。
+ *
+ * 原来悬停只有「状态 · 时间 · 编号」，想看学生写了什么非得点开新页面，老师在一排
+ * 红方块之间来回对比时要开一堆标签页。代码**悬停时才拉**、不随明细一起下发：
+ * 明细一次最多 200 条、展开着每 15 秒还要重拉，而真正会被悬停的只是其中几个。
+ * 代码交了就不会再变，所以缓存不随重新统计清空（和 items 不一样）。
+ */
+type CodeState =
+  | { status: "loading" }
+  | { status: "error" }
+  | { status: "done"; code: string; language: string }
+
+const codes = reactive<Record<string, CodeState>>({})
+
+async function loadCode(id: string) {
+  const cached = codes[id]
+  if (cached && cached.status !== "error") return
+  codes[id] = { status: "loading" }
+  try {
+    const submission = await getSubmission(id)
+    codes[id] = {
+      status: "done",
+      code: submission.code,
+      language: LANGUAGE_FORMAT_VALUE[submission.language],
+    }
+  } catch {
+    codes[id] = { status: "error" }
+  }
+}
+
+function renderCode(id: string) {
+  const cached = codes[id]
+  if (!cached || cached.status === "loading") return h(NText, { depth: 3 }, () => "代码加载中…")
+  if (cached.status === "error")
+    return h(NText, { type: "error" }, () => "代码没拉下来，点方块打开看")
+  return h(
+    "div",
+    // 太长就在浮层里滚：鼠标移进浮层它不会消失，可以接着往下翻
+    { style: "max-height: 360px; overflow: auto" },
+    h(NCode, { code: cached.code, language: cached.language, showLineNumbers: true }),
+  )
+}
+
 function openSubmission(id: string) {
   window.open(`/submission/${id}`, "_blank", "noopener")
 }
@@ -289,8 +333,15 @@ const columns: DataTableColumn<SubmissionStatisticsUser>[] = [
             h(NFlex, { size: 4, wrap: true, style: "flex: 1; min-width: 0" }, () =>
               group.items.map((item) =>
                 h(
-                  NTooltip,
-                  { delay: 200 },
+                  NPopover,
+                  {
+                    delay: 200,
+                    // 代码比一行提示宽得多；限宽让长行在浮层里横向滚，不把浮层撑出屏幕
+                    style: "max-width: 560px",
+                    onUpdateShow: (show: boolean) => {
+                      if (show) loadCode(item.id)
+                    },
+                  },
                   {
                     trigger: () =>
                       h("button", {
@@ -311,9 +362,17 @@ const columns: DataTableColumn<SubmissionStatisticsUser>[] = [
                         },
                       }),
                     default: () =>
-                      `${JUDGE_STATUS[item.result]?.name ?? item.result} · ` +
-                      `${parseTime(item.createTime, "MM-DD HH:mm:ss")} · ` +
-                      `${item.id.toString().slice(0, 12)}`,
+                      h(NFlex, { vertical: true, size: "small" }, () => [
+                        h(
+                          NText,
+                          { depth: 3 },
+                          () =>
+                            `${JUDGE_STATUS[item.result]?.name ?? item.result} · ` +
+                            `${parseTime(item.createTime, "MM-DD HH:mm:ss")} · ` +
+                            `${item.id.toString().slice(0, 12)}`,
+                        ),
+                        renderCode(item.id),
+                      ]),
                   },
                 ),
               ),