feat(统计): 「今日统计」「数据统计」合成一个「统计」，打开是一行一节课，这节课在最上面

老师的提交列表上只剩一个「统计」按钮；什么都没筛时按课列（选「今天」就是原来今日统计看的），点一行进那节课（班、题、时段都带好），左上「← 全部」回来；只填题号时仍按班级汇总，和题目页统计页签对得上。数字行加结果条，统计里的「课堂看板」按钮去掉，改成有班正在上课时才引过去。学生仍是「今日统计」。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-30 09:23:54 +08:00
1 parent 921990285c
commit e3be3cd62c
@@ -2,29 +2,22 @@
 import { Icon } from "@iconify/vue"
 import { useThemeVars } from "naive-ui"
 import { getTodaySubmissionStatistics } from "oj/api"
-import { JUDGE_STATUS, LANGUAGE_SHOW_VALUE } from "utils/constants"
 import { parseTime, zonedParts } from "utils/functions"
-import type { SUBMISSION_RESULT, TodaySubmissionStatistics } from "utils/types"
-import { useTone, type Tone } from "../composables/tone"
-import { classLabel } from "../utils"
+import type { TodaySubmissionStatistics } from "utils/types"

 /**
- * 今日统计（设计稿「今日统计重设计」）。一般是老师在看：今天哪几个班上了课、几点到几点、
- * 错得最多的是哪几道（老师 B）。学生版从简：自己今天怎样、大家在做哪几道。
- * 盯人、实时刷新是课堂看板的活，这里不做；有班正在上课时直接引过去。
+ * 今日统计（设计稿「今日统计重设计」学生版），**只给学生**：自己今天怎样、大家在做哪几道。
+ * 老师那一版（今天哪几个班上了课、几点到几点、错得最多的题）2026-09 并进了「统计」的
+ * 「一行一节课」（oj/statistics/components/Lessons.vue），老师的提交列表上不再有这颗标签。
 */
 const emit = defineEmits<{
  close: []
  openProblem: [problem: string]
-  /** 点班级名：在提交列表的数据统计弹框里看这个班今天 */
-  openClass: [className: string]
  /** 拉到数之后把总数报回去：按钮上的数只在进页面时拉过一次，停久了会对不上 */
  loaded: [total: number]
 }>()

-const router = useRouter()
 const theme = useThemeVars()
-const tone = useTone()

 const stats = ref<TodaySubmissionStatistics | null>(null)
 const failed = ref(false)
@@ -38,8 +31,6 @@ onMounted(async () => {
  }
 })

-const teacher = computed(() => stats.value?.classes != null)
-
 const WEEKDAYS = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]

 const headText = computed(() => {
@@ -49,101 +40,6 @@ const headText = computed(() => {
  return `${p.month}月${p.day}日 ${weekday} · 截至 ${parseTime(at, "HH:mm")}`
 })

-function resultName(result: number) {
-  return JUDGE_STATUS[result as SUBMISSION_RESULT]?.name ?? "其他"
-}
-
-/** 结果条的颜色：答案正确绿、运行时错误橙、答案错误红、编译失败和判题中灰 */
-function resultColor(result: number) {
-  if (result === -2) return theme.value.textColor3
-  // 等待评分 / 判题中：还没有结果，不该和运行时错误一样是橙色
-  if (result === 6 || result === 7) return theme.value.borderColor
-  const kind: Tone = JUDGE_STATUS[result as SUBMISSION_RESULT]?.type ?? "default"
-  if (kind !== "success" && kind !== "error" && kind !== "warning") return theme.value.borderColor
-  return tone(kind).color
-}
-
-function percent(value: number, total: number) {
-  return total ? `${(value / total) * 100}%` : "0"
-}
-
-// ---------- 老师：各班时间轴 ----------
-
-/** 东八区的「几点几分」换成小时的小数，给时间轴定位 */
-function hourOf(value: string) {
-  const p = zonedParts(value)!
-  return p.hour + p.minute / 60
-}
-
-/** 横轴默认 7 点到 20 点（机房上课的时段），有更早更晚的提交就往外扩 */
-const axis = computed(() => {
-  const list = stats.value?.classes ?? []
-  const start = Math.min(7, ...list.map((item) => Math.floor(hourOf(item.start))))
-  const end = Math.max(20, ...list.map((item) => Math.ceil(hourOf(item.end))))
-  return { start, end, ticks: Array.from({ length: end - start + 1 }, (_, i) => start + i) }
-})
-
-function axisLeft(hour: number) {
-  const { start, end } = axis.value
-  return `${((hour - start) / (end - start)) * 100}%`
-}
-
-function barStyle(item: { start: string; end: string; live: boolean }) {
-  const from = hourOf(item.start)
-  const to = hourOf(item.end)
-  const { start, end } = axis.value
-  return {
-    left: axisLeft(from),
-    width: `max(8px, ${((to - from) / (end - start)) * 100}%)`,
-    background: item.live ? theme.value.successColor : "#3f5f87",
-  }
-}
-
-/** 横条靠近右边时文字放到条的左边，不然「497 次 · 正确率 31%」被弹框右边裁掉 */
-function textStyle(item: { start: string; end: string }) {
-  const { start, end } = axis.value
-  if ((hourOf(item.end) - start) / (end - start) > 0.72) {
-    return { right: `calc(100% - ${axisLeft(hourOf(item.start))} + 10px)` }
-  }
-  return { left: `calc(${axisLeft(hourOf(item.end))} + 14px)` }
-}
-
-const nowHour = computed(() => {
-  const at = stats.value?.asOf
-  if (!at) return null
-  const hour = hourOf(at)
-  return hour >= axis.value.start && hour <= axis.value.end ? hour : null
-})
-
-const liveClasses = computed(() => (stats.value?.classes ?? []).filter((item) => item.live))
-
-/** 23 人来了、花名册却只有 22（有个号不是学生角色）时，不写「23 / 22」 */
-function attendance(item: { userCount: number; classSize: number }) {
-  return item.classSize >= item.userCount
-    ? `${item.userCount} / ${item.classSize} 人`
-    : `${item.userCount} 人`
-}
-
-const scatteredText = computed(() =>
-  (stats.value?.scattered ?? [])
-    .map(
-      (item) =>
-        `${item.className ? classLabel(item.className) : "没填班级的"} ${item.userCount} 人 ${item.total} 次`,
-    )
-    .join("、"),
-)
-
-const judgedResults = computed(() => stats.value?.results ?? [])
-
-const languageText = computed(() => {
-  const list = stats.value?.languages ?? []
-  if (!list.length) return ""
-  if (list.length === 1) return `语言：全部是 ${LANGUAGE_SHOW_VALUE[list[0]!.language]}`
-  return `语言：${list.map((item) => `${LANGUAGE_SHOW_VALUE[item.language]} ${item.count}`).join(" · ")}`
-})
-
-// ---------- 学生 ----------
-
 const meText = computed(() => {
  const me = stats.value?.me
  if (!me) return ""
@@ -152,7 +48,7 @@ const meText = computed(() => {
 </script>

 <template>
-  <div class="today" :class="{ wide: teacher }">
+  <div class="today">
    <div class="head">
      <b class="title">今日统计</b>
      <n-text depth="3" class="small">{{ headText }}</n-text>
@@ -173,186 +69,6 @@ const meText = computed(() => {
        <n-text depth="3">第一条提交进来之后这里就有数了</n-text>
      </div>

-      <!-- ==================== 老师 ==================== -->
-      <template v-else-if="teacher">
-        <div class="numbers">
-          <div>
-            <b>{{ stats.total }}</b
-            ><span>次提交</span>
-          </div>
-          <div>
-            <b>{{ stats.userCount }}</b
-            ><span>人</span>
-          </div>
-          <div>
-            <b>{{ stats.correctRate }}%</b><span>提交正确率</span>
-          </div>
-          <div>
-            <b>{{ stats.classes!.length }}</b
-            ><span>个班上了课</span>
-          </div>
-        </div>
-
-        <div
-          v-if="liveClasses.length"
-          class="live"
-          :style="{ background: tone('success').background, color: tone('success').color }"
-        >
-          <span>
-            {{ liveClasses.map((item) => classLabel(item.className)).join("、") }}正在上课
-          </span>
-          <span class="spacer"></span>
-          <a href="#" class="live-link" @click.prevent="router.push('/classroom')">
-            <Icon icon="ph:monitor" :width="14" />去课堂看板
-          </a>
-        </div>
-
-        <template v-if="stats.classes!.length">
-          <div class="section-title">
-            <b>今天哪几个班上了课</b>
-            <n-text depth="3" class="small">点班级名去数据统计看今天</n-text>
-          </div>
-          <div class="timeline">
-            <div v-for="item in stats.classes" :key="item.className" class="lane">
-              <div class="lane-label">
-                <a href="#" class="lane-name" @click.prevent="emit('openClass', item.className)">
-                  {{ classLabel(item.className) }}
-                </a>
-                <n-text depth="3" class="tiny">
-                  {{ attendance(item) }} · {{ item.fromProblemSet ? "题单" : ""
-                  }}{{ item.problemCount }} 道题
-                </n-text>
-              </div>
-              <div class="lane-track">
-                <span
-                  v-for="tick in axis.ticks"
-                  :key="tick"
-                  class="grid"
-                  :style="{ left: axisLeft(tick) }"
-                ></span>
-                <span class="lane-bar" :style="barStyle(item)"></span>
-                <span class="lane-text" :style="textStyle(item)">
-                  {{ item.total }} 次 ·
-                  {{ item.live ? "上课中" : `正确率 ${Math.round(item.correctRate)}%` }}
-                </span>
-                <span
-                  v-if="nowHour !== null"
-                  class="now"
-                  :style="{ left: axisLeft(nowHour) }"
-                ></span>
-              </div>
-            </div>
-            <div class="lane axis-row">
-              <div class="lane-label"></div>
-              <div class="lane-track axis">
-                <span v-for="tick in axis.ticks" :key="tick" :style="{ left: axisLeft(tick) }">
-                  {{ tick }}
-                </span>
-                <span
-                  v-if="nowHour !== null"
-                  class="now-label"
-                  :style="{ left: axisLeft(nowHour) }"
-                >
-                  现在
-                </span>
-              </div>
-            </div>
-          </div>
-        </template>
-        <n-text v-if="scatteredText" depth="3" class="small">
-          {{ stats.classes!.length ? "另有零散提交：" : "今天没有哪个班一起上课，零散提交："
-          }}{{ scatteredText }}
-        </n-text>
-
-        <template v-if="stats.hardProblems?.length">
-          <div class="section-title">
-            <b>错得最多的题</b>
-            <n-text depth="3" class="small">按没过的次数</n-text>
-          </div>
-          <table class="hard">
-            <thead>
-              <tr>
-                <th>题目</th>
-                <th>哪个班</th>
-                <th>提交</th>
-                <th>没过的原因</th>
-                <th class="right">做对</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="item in stats.hardProblems" :key="item.problemDisplayId">
-                <td class="hard-title">
-                  <a href="#" @click.prevent="emit('openProblem', item.problemDisplayId)">
-                    <n-text depth="3">{{ item.problemDisplayId }}</n-text> {{ item.problemTitle }}
-                  </a>
-                </td>
-                <td>
-                  <n-text depth="2">{{ item.className ? classLabel(item.className) : "—" }}</n-text>
-                </td>
-                <td>{{ item.total }} 次</td>
-                <td>
-                  <span class="mini">
-                    <span
-                      :style="{
-                        width: percent(item.accepted, item.total),
-                        background: resultColor(0),
-                      }"
-                    ></span>
-                    <span
-                      v-for="fail in item.failures"
-                      :key="fail.result"
-                      :style="{
-                        width: percent(fail.count, item.total),
-                        background: resultColor(fail.result),
-                      }"
-                    ></span>
-                  </span>
-                  <n-text depth="2" class="small">
-                    {{ resultName(item.failures[0]!.result) }} {{ item.failures[0]!.count }}
-                  </n-text>
-                </td>
-                <td
-                  class="right"
-                  :style="{
-                    color: item.acceptedUsers < item.userCount ? tone('error').color : undefined,
-                    fontWeight: item.acceptedUsers < item.userCount ? 600 : undefined,
-                  }"
-                >
-                  {{ item.acceptedUsers }} / {{ item.userCount }} 人
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </template>
-
-        <div class="foot">
-          <div class="foot-bar">
-            <div class="results">
-              <span
-                v-for="item in judgedResults"
-                :key="item.result"
-                :style="{
-                  width: percent(item.count, stats.total),
-                  background: resultColor(item.result),
-                }"
-              ></span>
-            </div>
-            <div class="legend">
-              <span v-for="item in judgedResults.slice(0, 5)" :key="item.result">
-                <i :style="{ background: resultColor(item.result) }"></i
-                >{{ resultName(item.result) }}
-                <b>{{ item.count }}</b>
-              </span>
-            </div>
-          </div>
-          <n-text depth="3" class="small foot-meta">
-            {{ languageText }} ·
-            {{ stats.flowchartCount ? `流程图 ${stats.flowchartCount} 张` : "流程图今天没人画" }}
-          </n-text>
-        </div>
-      </template>
-
-      <!-- ==================== 学生：从简 ==================== -->
      <template v-else>
        <div v-if="meText" class="me">
          <b>你今天</b>
@@ -412,10 +128,6 @@ const meText = computed(() => {
  overflow: hidden;
 }

-.today.wide {
-  width: min(880px, calc(100vw - 32px));
-}
-
 .head {
  flex: none;
  display: flex;
@@ -470,10 +182,6 @@ const meText = computed(() => {
  font-size: 13px;
 }

-.tiny {
-  font-size: 12px;
-}
-
 .center {
  display: flex;
  justify-content: center;
@@ -521,200 +229,12 @@ const meText = computed(() => {
  color: v-bind("theme.textColor3");
 }

-.live {
-  display: flex;
-  align-items: center;
-  padding: 10px 14px;
-  border-radius: 8px;
-}
-
-.live-link {
-  color: inherit;
-  font-weight: 600;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
 .section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
 }

-.timeline {
-  display: flex;
-  flex-direction: column;
-}
-
-.lane {
-  display: flex;
-  min-height: 42px;
-  border-bottom: 1px solid v-bind("theme.dividerColor");
-}
-
-.lane.axis-row {
-  min-height: 24px;
-  border-bottom: 0;
-}
-
-.lane-label {
-  width: 150px;
-  flex: none;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.lane-name {
-  font-weight: 600;
-  color: v-bind("theme.textColor1");
-  text-decoration: none;
-}
-
-.lane-name:hover {
-  color: v-bind("theme.primaryColor");
-}
-
-.lane-track {
-  position: relative;
-  flex: 1;
-}
-
-.grid {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background: v-bind("theme.dividerColor");
-}
-
-.lane-bar {
-  position: absolute;
-  top: 50%;
-  height: 16px;
-  margin-top: -8px;
-  border-radius: 4px;
-}
-
-.lane-text {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 13px;
-  white-space: nowrap;
-  color: v-bind("theme.textColor2");
-}
-
-.now {
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  width: 2px;
-  background: v-bind("theme.successColor");
-}
-
-.axis span {
-  position: absolute;
-  top: 4px;
-  transform: translateX(-50%);
-  font-size: 11px;
-  color: v-bind("theme.textColor3");
-}
-
-.axis .now-label {
-  top: 4px;
-  font-weight: 600;
-  color: v-bind("theme.successColor");
-  background: v-bind("theme.cardColor");
-  padding: 0 2px;
-}
-
-.hard {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-.hard th {
-  text-align: left;
-  font-weight: normal;
-  color: v-bind("theme.textColor3");
-  padding: 4px 8px 6px 0;
-  border-bottom: 1px solid v-bind("theme.dividerColor");
-}
-
-.hard td {
-  padding: 8px 8px 8px 0;
-  border-bottom: 1px solid v-bind("theme.dividerColor");
-  white-space: nowrap;
-}
-
-.hard .right {
-  text-align: right;
-  padding-right: 0;
-}
-
-.hard-title a {
-  color: v-bind("theme.textColor1");
-  text-decoration: none;
-}
-
-.hard-title a:hover {
-  color: v-bind("theme.primaryColor");
-}
-
-.mini {
-  display: inline-flex;
-  width: 70px;
-  height: 8px;
-  border-radius: 2px;
-  overflow: hidden;
-  gap: 1px;
-  margin-right: 8px;
-  vertical-align: middle;
-}
-
-.foot {
-  display: flex;
-  align-items: flex-end;
-  gap: 24px;
-  flex-wrap: wrap;
-}
-
-.foot-bar {
-  flex: 1;
-  min-width: 280px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.results {
-  display: flex;
-  height: 10px;
-  border-radius: 3px;
-  overflow: hidden;
-  gap: 1px;
-}
-
-.legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 14px;
-  font-size: 13px;
-  color: v-bind("theme.textColor2");
-}
-
-.legend i {
-  display: inline-block;
-  width: 9px;
-  height: 9px;
-  border-radius: 2px;
-  margin-right: 5px;
-}
-
 .me {
  display: flex;
  gap: 12px;
@@ -11,7 +11,7 @@ import {
  getTodaySubmissionCount,
  retryFlowchartSubmission,
 } from "oj/api"
-import { DEFAULT_PERIOD, type Period } from "oj/statistics/period"
+import { DEFAULT_PERIOD } from "oj/statistics/period"
 import { useContestStore } from "oj/store/contest"
 import Pagination from "shared/components/Pagination.vue"
 import { useBreakpoints } from "shared/composables/breakpoints"
@@ -38,7 +38,7 @@ import { classLabel, submissionClockText, submissionDayText } from "./utils"
 *
 * 老师课上的三种用法 —— 一条条翻全班的代码、看某一个学生、看完成情况 —— 前两种在
 * 这一页里做完：↑ ↓ 换条，右边跟着换，不再「点开弹框 → 关掉 → 点下一行」。
- * 完成情况在课堂看板和「数据统计」里，这页不重复造一张表。
+ * 完成情况在课堂看板和「统计」里，这页不重复造一张表。
 */

 // 右栏和今日统计弹框都不在关键路径上：右栏要等选中一条才有内容，弹框默认关着
@@ -190,7 +190,8 @@ async function getTodayCount() {

 onMounted(() => {
  listSubmissions()
-  if (route.name === "submissions") getTodayCount()
+  // 「今日统计 N」只给学生：老师那一版并进了「统计」
+  if (route.name === "submissions" && !teacher.value) getTodayCount()
 })

 watchDebounced(() => [query.username, query.problem], listSubmissions, {
@@ -483,9 +484,6 @@ const scope = computed({
  },
 })

-/** 1366 以下（机房 1280 的屏）老师那排放不下：「今日统计」只留图标和数字 */
-const narrowBar = useMediaQuery("(max-width: 1365px)")
-
 const today = computed({
  get: () => query.today === "1",
  set: (value: boolean) => (query.today = value ? "1" : "0"),
@@ -564,7 +562,7 @@ function filterUser(username: string) {
 }

 /**
- * 「数据统计」弹框的查询条件。每次打开从这张列表现在的班级 / 学生 / 题号 / 代码或流程图
+ * 「统计」弹框的查询条件。每次打开从这张列表现在的班级 / 学生 / 题号 / 代码或流程图
 * 带进去（「今天」带过去就是统计的「今天」）；时间段沿用上次在弹框里选的
 */
 const statsQuery = reactive({
@@ -577,14 +575,18 @@ const statsQuery = reactive({
  to: "",
 })

-function openStatistics(preset?: { className: string; period: Period }) {
-  todayPanel.value = false
+/**
+ * 老师的「统计」：带着这张列表现在的班级 / 学生 / 题号 / 代码或流程图打开。原来旁边还有一颗
+ * 「今日统计」，和「数据统计」名字分不清（用户说的），老师那一版并进来了 —— 什么都没筛时
+ * 打开就是「一行一节课」，选「今天」就是原来今日统计看的东西
+ */
+function openStatistics() {
  Object.assign(statsQuery, {
    tab: flowMode.value ? "flow" : "code",
-    className: preset ? preset.className : query.className,
-    username: preset ? "" : query.username,
-    problem: preset ? "" : query.problem,
-    ...(preset ? { period: preset.period } : query.today === "1" ? { period: "today" } : {}),
+    className: query.className,
+    username: query.username,
+    problem: query.problem,
+    ...(query.today === "1" ? { period: "today" } : {}),
  })
  statsPanel.value = true
 }
@@ -814,27 +816,28 @@ function dayBreak(index: number) {
      <n-button size="small" quaternary @click="clear">清空</n-button>

      <div class="spacer"></div>
+      <!-- 老师只有「统计」（今日统计并进去了）；学生看不到统计，仍是「今日统计」 -->
      <n-button
-        v-if="route.name === 'submissions' && !flowMode"
+        v-if="teacher && route.name === 'submissions'"
+        size="small"
+        quaternary
+        title="统计：这节课、今天，或者回头看以前的课"
+        @click="openStatistics()"
+      >
+        <template #icon><Icon icon="ph:chart-bar" /></template>
+        统计
+      </n-button>
+      <n-button
+        v-else-if="route.name === 'submissions' && !flowMode"
        size="small"
        quaternary
        :title="`今日统计：今天全站 ${todayCount} 条`"
        @click="toggleTodayPanel(true)"
      >
        <template #icon><Icon icon="ph:chart-bar" /></template>
-        <template v-if="!(teacher && narrowBar)">今日统计</template>
+        今日统计
        <span v-if="todayCount" class="count">{{ todayCount }}</span>
      </n-button>
-      <n-button
-        v-if="teacher && route.name === 'submissions'"
-        size="small"
-        quaternary
-        title="数据统计：按班级、题号、时间段回头看"
-        @click="openStatistics()"
-      >
-        <template #icon><Icon icon="ph:chart-pie-slice" /></template>
-        数据统计
-      </n-button>
    </div>

    <!-- 手机：只留全部/我的，其余收进「筛选」 -->
@@ -1109,7 +1112,6 @@ function dayBreak(index: number) {
      @close="todayPanel = false"
      @loaded="(total: number) => (todayCount = total)"
      @open-problem="(id: string) => openProblem({ problemDisplayId: id } as Row)"
-      @open-class="(name: string) => openStatistics({ className: name, period: 'today' })"
    />
  </n-modal>