refactor(智能分析): 重排版面,砍掉重复的三张周期图,补三个新维度

原来 8 张图挤在两列大网格里,左列还套了一层两列小网格 —— 四张小图各自只有半页的
一半宽,"难度掌握情况"的标题被挤断成两行、周期图的 x 轴标签斜着叠在一起、一年热力图
53 列塞进半宽几乎看不清。改成单列为主,宽的图给全宽,窄的图两两并排。

砍掉的重复:进步曲线 / 提交效率 / 周期综合读的是同一个 durationData,半年视图统共
6 个桶四个字段,摊成三张卡六条曲线还都是双轴。合并成一张:柱是完成题目数和总提交数,
线是 AC 率,等级进 tooltip(S/A/B/C 四档离散值连成折线读不出东西,逐题等级表格里有)。

同期解题排名分布也砍了:五片扇形对十几道题做统计本来就是噪声,而排名逐题列在
SolvedTable 里,饼图没有增加任何信息。

换形式:
- 标签雷达图 → 横向条形。雷达对比较大小是最差的形式之一,原来还把值归一化成"占最多
  标签的百分比",第一名恒为 100%,等于只画了个排序。现在画真实题数。
- 难度掌握情况 → 难度分布。去掉叠在里面的 S/A/B/C 维度,3×4 十二个格子对一个两个月
  做十来道题的学生大部分恒为 0。

热力图改成一格一周(53 格,周一起算,最后一格是本周)。按天切的话一年 365 格里三百多
格是空的,中职学生一年也就二三十天有提交,整张图看着像没用过。颜色阈值跟着按周重定。

新增三个维度:
- 错在哪里:判完的失败提交按状态码分组。编译错误占大头说明语法不熟,答案错误占大头
  说明是逻辑问题,两种情况老师该给的建议完全不同。
- 几次做对:到首次通过为止提交了几次,分一次过 / 2-3 / 4-6 / 7次以上。原来只有一个
  "平均提交次数",看不出分布。
- 流程图得分:detailsData.flowcharts 早就在下发,但全页一张图都没有,只在解题表格的
  第二个 tab 里列着。

顺带:
- 时间活跃度从"只统计 AC 时间"改成"统计全部提交",星期和时段由后端按东八区聚合。
  只看 AC 的话十来个点撒进 7×4 的格子几乎全是空的,和热力图的时区口径也对不上。
- 两两并排用弹性容器而不是固定两列网格:知识点分布在没有标签时整张卡不渲染,
  固定两列会空掉一半。
- AI 卡片原来有三个条件挂载点(solved>10 在右列、≤10 在全宽行、=0 藏在 Overview
  里面),单列之后收成最后一张无条件的卡。
- DurationChart 右轴的 S/A/B/C 一个刻度都没显示过:轴范围 -0.5~3.5,生成的刻度值是
  -0.5/0.5/1.5/2.5/3.5,拿去索引 gradeOrder 全是 undefined。

契约新增 activity / errors / rankScope / solved[].attempts / durationData[].acceptedCount。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LZuPwqDmLEiK9zgQ9z9sVn
This commit is contained in:
2026-09-03 03:08:54 -06:00
parent 69883bd016
commit 4d7be969d9
18 changed files with 759 additions and 1212 deletions

View File

@@ -32,6 +32,8 @@ export const solvedProblemSchema = z.object({
periodRank: z.number().int().nullable(),
periodAcCount: z.number().int(),
difficulty: z.string(),
/** 到首次通过为止在这道题上提交了几次含通过那次。1 就是一次过 */
attempts: z.number().int(),
})
export const flowchartSummarySchema = z.object({
@@ -44,6 +46,18 @@ export const flowchartSummarySchema = z.object({
avgScore: z.number(),
})
/**
* 时间活跃度的一个格子。星期和时段都按东八区切,和热力图同一个口径 ——
* 别让容器或数据库的 TZ 决定「学生周几晚上做题多」。
*/
export const activityBucketSchema = z.object({
/** 0=周日 … 6=周六 */
weekday: z.number().int().min(0).max(6),
/** 0=凌晨(0-6) 1=上午(6-12) 2=下午(12-18) 3=晚上(18-24) */
period: z.number().int().min(0).max(3),
count: z.number().int(),
})
export const aiDetailSchema = z.object({
user: z.string(),
className: z.string().nullable(),
@@ -55,6 +69,16 @@ export const aiDetailSchema = z.object({
tags: z.record(z.string(), z.number().int()),
difficulty: z.record(z.string(), z.number().int()),
contestCount: z.number().int(),
/** 时间活跃度:按**全部提交**统计,不是只统计 AC */
activity: z.array(activityBucketSchema),
/**
* 判完的失败提交按状态码分组,多的在前。状态码是落库的值,
* 前端用 utils/constants 的 JUDGE_STATUS 翻成中文,两边必须一致。
*/
errors: z.array(z.object({
result: z.number().int(),
count: z.number().int(),
})),
/**
* solved 里的 rank/acCount 是在哪个范围里排的。班里只有一个人时后端会回退到全服,
* 前端不能只看 className 有没有值就写「班级排名」。
@@ -85,6 +109,11 @@ export const classPkAnalysisRequestSchema = z.object({
timeRangeLabel: z.string().default("全部时间"),
})
/**
* 热力图的一格 = **一周**不是一天。timestamp 是那一周周一的本地零点,
* value 是整周的提交次数。按天切的话一年 365 格里三百多格是空的,
* 中职学生一年也就在二三十天有提交,整张图看着像没用过。
*/
export const heatmapItemSchema = z.object({
timestamp: z.number(),
value: z.number().int(),
@@ -119,6 +148,7 @@ export type Grade = z.infer<typeof gradeSchema>
export type DurationData = z.infer<typeof durationDataSchema>
export type SolvedProblem = z.infer<typeof solvedProblemSchema>
export type FlowchartSummary = z.infer<typeof flowchartSummarySchema>
export type ActivityBucket = z.infer<typeof activityBucketSchema>
export type AiDetail = z.infer<typeof aiDetailSchema>
export type HeatmapItem = z.infer<typeof heatmapItemSchema>
export type AiAnalysisRecord = z.infer<typeof aiAnalysisRecordSchema>