OJ2/docs/specs/2026-09-28-problem-page-redesign-design.md

# OJ2 设计文档：题目详情页重设计

日期：2026-09-28
状态：**设计已定，第 14 节的 1–4 步和第 7 节已实施**。效果图在 claude.ai 的私有画布「题目详情页重设计」里（「机房（方案 B）」
那一页是定稿，「初稿 1280×800」那一页已作废，只留着对照）。效果图表达不了的规则都写在这里，
**实施时以本文为准**。

题目页是全站的核心页面：学生在这一页读题、写代码、提交、看结果、改、去下一题，老师在这一页
接求助、协作。动它之前先把第 12 节「旧功能 → 新位置」对一遍，不能漏。

## 1. 背景：现在的题目页哪里不对

现在的布局是照刷题社区做的：左栏 6 个页签，右栏编辑器，判题结果弹在提交按钮下面的浮层里。
最近几轮加的功能（中文错因、例子对比、AI 分级提示、下一题）都塞进了这个布局里最不牢靠的位置。

- **最有价值的反馈放在最容易消失的地方。** 结果是 `n-popover`（`SubmitCode.vue`），点一下外面
  就收起；为了补救加了「上次结果」按钮、`display-directive="show"`、评价弹窗关掉后手动重开
  面板。浮层最高 600px，挂在右上角，盖住编辑器，学生没法一边看「正确输出 / 你的输出」一边改。
- **判题状态挂在编辑器的按钮组件上。** 手机上交完切到「描述」页签（Naive 的页签默认
  `display-directive="if"`，切走即卸载）、桌面切到「题目 / 自测」模式，编辑器一卸载，判题结果、
  烟花、失败计数、AC 后的点评、题单自动跳回全部丢失；题库入口还会顺带撤销排队中的求助。
- **6 个页签大多和做题无关**：题目描述 / 流程图表 / 题目统计 / 题目点评 / 我的流程图 / 我的提交。
  课上学生几乎只看第一个。
- **例子测试离编辑器太远**：「测试」按钮在左栏每个例子旁，结果只有通过 / 不通过，2 秒后复位；
  判完之后那套中文差异说明（`WrongAnswerExplain`）完全没用上。
- **顶栏的分栏切换**显示的是当前模式名（双栏 / 自测 / 题目），点了循环切换，看不出会变成什么；
  「自测」是另一个编辑器（`EditorForTest`），读草稿的逻辑又写了一份。
- **流程图作业藏在语言下拉里**，叫一个名叫 Flowchart 的「语言」；评分详情是 1000px 的弹窗。
- **三种入口的差异散在各组件里**：同一件事在题单里是「禁用」、在比赛里是「隐藏」；
  比赛里的提示文案还提到比赛里根本没有的 AI。
- **题库入口和比赛 / 题单入口用的不是同一个编辑器**：`ProblemEditor`（带协作、错误标记）和
  `BasicEditor`（都没有），所以题单里能点「求助」却接不上，比赛 / 题单里「把中文标点都换成英文」
  点了没反应。
- 换题后例子和语言停在上一道题 —— **已修**（`1b149a4`），不是本次重设计的内容。

## 2. 使用形态（生产快照，2026-09-27 / 28）

数据会过时，引用前重跑。

| 事实 | 数字 |
|---|---|
| 提交集中在课上 | 79% 在工作日 8–17 点 |
| 多数题是老师点名、全班同做 | 非比赛提交里 65%–88% 落在「同一天 ≥10 人做同一题」 |
| 最终都做出来了 | 按（学生, 题）96% 最终通过，中位 1 次 |
| 答案错误多半在例子上就错了 | 73%；其中约三分之一只差格式 |
| 代码很短 | Python（占 89%）中位 6 行、p90 12、p99 24；C 中位 15、p90 21 |
| 编辑器字号 | 20px，行高约 28px |
| 一节课的题 | 一般 5 道以内（接口允许最多 20 道） |
| 题目名 | 中位 7 字、p90 13、最长 33 |
| 流程图 | 可画流程图的题只有 16 道，但 2026-05 一个单元 86 人交了 1383 次；有的题流程图提交几百次、代码提交个位数 |
| 流程图评分耗时 | 中位 4.8 秒、p90 10 秒、最长 24 秒；1772 次里失败 2 次 |
| 点评 | 8 月 34 条、9 月 522 条，基本都是 AC 后的强制弹窗带来的 |

## 3. 已拍板的决定

1. **AC 后点评保持强制弹窗**，七个选项不变（「题目有错」和其他六项放在一起，不单独挪走）。
2. **题单入口隐藏**「我的提交」「本题提交」「统计」「点评」和标题下的「已解决 / 尝试过」标签 ——
   不让学生看到加入题单之前的提交、抄到答案。
3. **「运行例子」先继续用 Judge0**，不另做判题机端点。
4. **流程图题可以放进题单**；题单里流程图拿到 **A 或 S 级算这道题完成**。
5. 题单里**答案正确或流程图 A/S 后，1.5 秒自动回题单**，保留。
6. **课堂条里，流程图 A/S 也算做完。**
7. **机房有两种屏：1366×768 和 1280×1024。** 布局要同时满足「宽 1280」「高 640」两条下限。

## 4. 布局：方案 B

### 4.1 尺寸预算

视口 = 屏幕减 Windows 任务栏（40）和 Chrome 的标签栏 + 地址栏（约 80）。

| | 1366×768 | 1280×1024 |
|---|---|---|
| 视口 | 约 1366×640 | 约 1280×900 |
| 卡住的是 | 高 | 宽 |
| 左栏默认宽 | 580 | 540 |
| 右栏 | 约 786 | 约 740 |
| 编辑器可见行数 | 约 19 行 | 约 28 行 |

竖向：顶栏 56 → 左栏是上下文条 44 + 页签行 42 + 内容；右栏是工具栏 48 + 编辑器。
两栏之间的分隔条**保留、可拖动**（宽 SQL 表、长题面需要）。

### 4.2 为什么不是方案 A（结果放在编辑器下方）

640 高的视口里，结果区一展开编辑器只剩约 240px，也就是 8 行：p90 的 Python（12 行）就放不下，
出错的那一行常常正好在屏幕外。效果图里用同一道 12 行的「成绩等级」对比过，A 看不到出错的第 12 行，
B 看得到。

### 4.3 方案 B 的结构

- **左栏**：上下文条 → 「题目 / 结果」两个页签 → 内容（可滚动）。页签行右侧是「统计 / 点评 /
  我的提交」三个按钮（高 32，带边框，和页签区分开），点开是**抽屉，盖住左栏，编辑器不动**。
- **右栏**：工具栏 + 编辑器占满整列。流程图题的工具栏最左是「写代码 / 画流程图」切换。
- **去掉**：顶栏的「双栏 / 自测 / 题目」切换、`EditorForTest`、左栏的另外 4 个页签、
  提交按钮下的结果浮层、「上次结果」按钮。

## 5. 各区域的规则

### 5.1 上下文条（左栏顶部）

说明「这道题是从哪来的」，只有一条，按入口路由决定显示哪种：

| 入口 | 内容 |
|---|---|
| 课堂（这道题在「班里在做」的列表里） | 「这节课 做完 3/5」+ 各题题号芯片 + ‹ › |
| 题单 | 「‹ 题单名」+ 进度条 +「7/12 · 第 8 题」+ ‹ › |
| 比赛 | 「‹ 比赛名」+ 各题题号芯片 +「还剩 38:12」+「排名」 |
| 都不是 | 不显示，页签行顶上去 |

- 芯片**只放题号**，鼠标停上去看题目名；状态用图标区分，**不只靠颜色**：✓ 做完（实心绿）/
  ! 做过没对（橙）/ 没做（灰）/ 当前题（描边；做完后是实心绿加外圈）。
- 5 道以内一行放得下；**超过 5 道**时题号那一段横向滚动，当前题保持在视野里，去掉 ‹ ›。
- 进度一律写「做完 3/5」，不写「3/5」（会被读成「第 3 道」）。
- 通过之后课堂条要重新拉一次（做完数 +1）。
- 未登录时没有这一条（接口要求登录）。

### 5.2 「题目」页签

内容顺序：标题（题号 + 名称）→ 难度、状态标签、「限时 1 秒」→ **代码要求**（AST 规则，放最前）→
描述 → 输入 / 输出 → 参考流程图（折叠）或你画的流程图 → 例子 → 提示 → 来源 → 相似题（按原规则出现）。

- 例子改成表格：例子 N | 输入 | 输出，每格带「复制」。去掉每个例子旁的「测试」按钮。
  例子标题旁有「自己输入数据试试 ›」，跳到结果页签的「自己输入」。
- 时间 / 内存限制只写「限时 1 秒」，不写 ms / MB。
- 流程图小节同一个位置，二选一：老师给的参考图（`showFlowchart`，默认折叠）或学生自己画到
  A/S 的那张（`allowFlowchart`，默认高约 150px，可「放大看」）。两个开关本来就互斥
  （`admin/problem/detail.vue`）。**不再**一进页面就强制切到「我的流程图」。
- 题单入口：不显示「已解决 / 尝试过」标签。

### 5.3 「结果」页签

三个小分段：**提交结果 / 运行例子 / 自己输入**（胶囊高 30），各自保留最近一次的内容。

- **自动切换**：点「运行例子」「提交」或流程图「交给 AI 点评」后，自动切到「结果」对应的分段。
- **页签上的状态**：✕ 错了 / ✓ 对了 / ! 没交上（语法没过）；用图标，不用 7px 的彩点。
  学生打开过结果页签就算已读，图标保留、不再强调。
- 抽屉开着时判题完成：先关抽屉，再切到结果。
- 流程图评完时学生正在看「题目」：只亮页签状态，**不强制切过去**。

各种结果的显示见第 6 节。

### 5.4 工具栏（右栏顶部）

| 谁 / 什么模式 | 从左到右 |
|---|---|
| 学生 · 写代码 | 语言、运行例子、提交 …… 举手求助、⋯ |
| 学生 · 画流程图 | 写代码/画流程图、交给 AI 点评 …… 已保存 时间、撤销、重做、⋯（不能求助，现行规则） |
| 教师 | 语言、运行例子、提交 …… 课堂统计、⋯ |
| 协作中的教师 | 上方加 40px 蓝色协作条（正在帮谁 · 语言 · 看他交过什么 · 结束协作）；语言选择禁用 |

- 答案正确后「提交」降成描边按钮，让结果页签里的「下一题」是唯一的主按钮。
- 「⋯」里：去自测猫（SQL 不给）、复制代码、重置代码（**加确认**；协作中的教师不给）、
  编辑题目（仅超管、仅桌面）。没有例子的题「去自测猫」现在会抛错，一并修。
- 右栏窄于 600px（左栏拖宽时）：次要按钮收进「⋯」。
- 举手求助三种状态都写在按钮上：「举手求助」→「已举手 · 前面 2 人」（点击取消）→
  「[老师名]老师在帮你」。学生这边**不加横幅**（省下编辑器 40px）。

### 5.5 抽屉（统计 / 点评 / 我的提交）

- **我的提交**：顶部「你是班上第 N 个做对的，班上一共 M 人做对了」（没有班级时显示全站排名，
  二选一，和现在一样）；列表「第 N 次 · 结果 · 语言 · 时间」，点开在行内展开代码，
  「放回编辑器」「复制」；加入题单之前被锁住的提交显示为一行说明，不能展开；底部「看这道题所有人的提交」。
  「放回编辑器」后提示「已放回，按 Ctrl+Z 撤回」—— 要确认编辑器的撤销能撤回这次替换。
- **统计**：出题人、创建时间、标签、数字卡、结果饼图、历年通过率，内容原样。
- **点评**：和强制弹窗同一个轮盘（第 7 节），每人只能评一次。
- 题单入口三个按钮都不出现。比赛入口没有「点评」。

### 5.6 手机

三个页签：题目 / 代码 / 结果，底部固定「运行例子 / 提交」两个按钮（高 44+）。
措辞和桌面一致（「这节课 做完 2/5」「正确输出」）。语言选择放在「代码」页签顶部；
统计 / 点评 / 我的提交和 ⋯ 菜单里的各项放进页签行右侧的「⋯」。流程图题在手机上只能看点评、不能画（节点库是 HTML5 拖放，手机上拖不动）。

## 6. 结果页签里每种情况显示什么

| 情况 | 标题 | 正文 |
|---|---|---|
| 答案错误，例子上就错了 | ✕ 答案错误 · 在例子 N 上就错了 | 「例子 N 没有通过：」+ 中文原因（`WrongAnswerExplain` 那套）+ 输入 / 正确输出 / 你的输出三栏，差异标红 + 「题目要求的输出：……」+ 让 AI 分析 |
| 答案错误，例子都对 | ✕ 答案错误 · 通过 x/y 个测试点 + 进度条 | 「题目里的例子都对了，没通过的是隐藏的测试点……」+ 题目原话 + 让 AI 分析 +「去自己输入试试」 |
| 运行时错误 / 编译错误 / 超时 / 内存超限 | 原样 | `RuntimeErrorExplain` / `PythonErrorExplain` 原样搬进；编辑器标红出错行 |
| Python 语法没过（没交上去） | ! 代码有语法错误，还没有交上去；分段写「交之前检查」 | 中文说明 +「把中文标点都换成英文（N 处）」+ 折叠的「原始报错（英文）」；**所有**中文标点都在编辑器里标出来，和 N 对得上 |
| 代码要求没满足（AST 未通过） | 答案正确，但语法未通过（现有文案） | 逐条 ✓ / ✗。**按已解决记账，但没有烟花、下一题、点评** —— 和现在一致，要单独一个画面 |
| 答案正确 | ✓ 答案正确 · 所有测试点都对了 | 课堂里：「这节课还剩 N 道」+「下一题：题号 题目」；课堂题都做完：「……都做完了」+「去题单继续练」；不在课堂里：相似题推荐 |
| 运行例子（试跑） | ✕ 试跑：N 个例子没对上（不算提交）+ 各例子 ✓/✕ 芯片 | 选中那个例子的差异说明；底部「例子对了也可能在别的测试点上错，提交才算数」 |
| 自己输入 | —— | 输入框 +「用这组数据运行」+「填入例子 1 / 2」+ 输出；「这里不判对错」 |
| 流程图评分中 | AI 正在看你的图（一般 5 秒左右） | 评的时候画布还能改，改了不影响这一次 |
| 流程图评完 | 86 分 A 级 + 一句评语 + 历史分数条 | 四项分数与评语、改进建议；A/S 时「照着它写代码 →」；「把这一版载回画布」**只在画布改过之后**出现 |
| 管理员 | —— | 测试点表格原样（只有管理员有数据） |

**运行例子的判定**：两边都去掉末尾空白再比（现在只 trim 了运行输出，末尾带空格的样例永远「不通过」，
`ProblemContent.vue` 的 `test()`）。Judge0 返回的英文报错（Traceback、gcc 报错）**不能直接给学生看**：
显示「程序运行出错了 / 编译没通过」加中文说明，原文折叠。

**「其他」类差异的文案要改**：现在是「对照一下你的输出和正确输出，找找从哪里开始不一样」，
对 D / E 这种整个值不同的情况没用。改成「你的程序输出了 E，正确的是 D。拿例子 2 的输入 60，
一行一行走一遍你的程序，看它走进了哪个分支」（`oj/problem/utils/wrongAnswer.ts`）。

## 7. 强制点评

- 文案：「做对了！说说你对这道题的感受吧」（原来的「恭喜你成功提交」不准确，交上去不等于做对）。
- **轮盘重新设计过**（2026-09-28，用户要求保留轮盘的形式）：SVG 画的 7 块环形扇区，
  每块上**直接写着表情和名字**（字号随轮盘缩放，最大 16px），不用先悬停才看得清；悬停的那块
  染上主色、往外弹出一点，圆心报它的名字。原来的轮盘每块的字只有 12px 左右，而且用了
  Chrome 111 才有的 `color-mix()`，机房 105 那档渲染不出扇区底色。
- 选之前**不显示人数**（后端本来就要自己评过才返回 counts），选完就地变成**玫瑰图**：每块从里
  往外填一段、长短按人数，标「N 人」，自己选的那块用主色、弹出、带 ✓ —— 避免跟风。
  没登录、没做对时轮盘照画、整个淡下去，圆心写原因，不给人数。
- 防误触：弹出后 600ms 内轮盘半透明、点不了；强制弹窗里不响应 Enter / 空格（键盘触发的
  click 的 `detail` 是 0），扇区不进 Tab 顺序；弹窗 `auto-focus` 关掉，不预选任何一块。
  抽屉里的是学生自己点开的，不设防、键盘能选。
- 选完不马上关：弹窗里换成横条图，下面只有一个按钮、焦点落在它上面 —— 被拦下的换题写「继续」，
  否则是这节课的「下一题：题号 题目」，都没有就是「好的」。
- **窗口期内换题要先点评**：通过后 1.5 秒内点「下一题」、课堂条芯片、‹ ›、顶栏题号直达，
  先立刻弹出点评，选完再跳。**现在线上可以被跳过**（`SubmitCode.vue` 换题时 `cancelCommentPanel()`）。
- 查询或提交点评的接口出错时不能把学生卡住：查询失败就不弹；提交失败留在弹窗里提示「没记上，再点一次」。
- 只在题库入口弹（题单、比赛不弹，现行规则）。

## 8. 入口差异（唯一的一张表）

实现时收成一个 `problemPageContext`，各组件只查这张表，不再自己判断路由。

| | 题库 / 课堂 | 题单 | 比赛 |
|---|---|---|---|
| 上下文条 | 课堂条（在列表里才有） | 题单条 | 比赛条 |
| 运行例子 / 自己输入 | ✓ | ✓ | ✓，但**运行例子只给「对 / 没对上」和原样输出，不给中文提示句** |
| 判完的中文错因 | ✓ | ✓ | 只有判题状态（后端不给比赛做例子对比，`judge/run.ts`：「比赛里有期末考试，格式提示在那里不该给」） |
| AI 提示 | ✓ | ✓ | ✗ |
| 举手求助 | ✓ | ✓（统一编辑器后才接得上） | ✗ |
| 画流程图 | ✓ | ✓（新增） | ✗ |
| 通过后 | 下一题 / 相似题；1.5 秒后强制点评 | 1.5 秒后回题单（流程图 A/S 同样） | 只放烟花 |
| 统计 / 点评 / 我的提交 | ✓ | 全部隐藏 | 统计、我的提交 ✓；点评 ✗ |
| 「已解决 / 尝试过」标签 | ✓ | 隐藏 | ✓ |
| 相似题 | ✓ | ✗（点进去会离开题单） | ✗ |
| SQL 题 | 隐藏「运行例子」「自己输入」（Judge0 跑不了 SQL）；数据表可横向滚动 | 同左 | 同左 |

一道题既在这节课里、又是从题单进来的：按入口路由，显示题单条。

## 9. 老师协作

- 协作条在右栏顶部（跟编辑器有关），教师的语言选择禁用、不存草稿、不给「重置代码」—— 规则照旧。
- **抽屉改成「他的提交」**：协作中看的是学生的提交，**不能「放回编辑器」**
  （现在的「复制回到题目」走 `setCode`，协作中会经 Yjs 直接覆盖学生的代码）。
- **协作中所有跳转开新标签页**：抽屉里的链接、班级排名旁的「查看」、上下文条都算（现在只有工具栏
  「本题提交」这么做）。「看他交过什么」要带上学生用户名，现在只带题号。
- 老师接单后落在 `/problem/:id`，「结果」页签是空的 —— 显示学生最近一次提交的结果（这一项是新增，
  需要接口支持；做不到就显示「学生还没提交过」之类的空状态，别留白）。
- **学生在求助排队中或已接入时换题，会断开协作**（`SyncCodeEditor` 的 detach）：换题入口要先确认。

## 10. 结构改动

1. **提交状态上移到 store**：当前提交、判题跟踪（WebSocket + 轮询）、AI 提示、失败计数、
   流程图评分（含 WebSocket 订阅与 3 分钟超时）都不再挂在按钮组件上。结果页签只负责显示。
   这是修掉「编辑器一卸载结果就丢」的前提。
2. **错误标记也进 store**：`PythonErrorExplain` / `RuntimeErrorExplain` 现在挂载时标红、卸载时清掉，
   切到「题目」页签红线就没了。改成由结果决定，和显示组件解耦。
3. **三种入口用同一个编辑器**：合并 `ProblemEditor` 与 `BasicEditor`，协作、错误标记、中文标点替换
   在三种入口都有；比赛里是否允许协作由第 8 节的表决定。
4. **换题 = 完整重置**：例子、语言、流程图状态、结果页签、定时器全部重来。`1b149a4` 已经修了
   例子、语言、流程图三处，重构时收进同一个换题钩子里。
5. **入口差异收成一张表**（第 8 节）。

## 11. 后端前置改动

1. **流程图 A/S 算完成**：提交流程图的请求带上 `problemSetId`；评分落库后，A/S 走和
   `recordSolvedProblem`（`services/problemset.ts`）同样的题单记账；课堂条的 `myStatus`
   （`classroom` 路由）把流程图 A/S 算作 accepted。
2. **流程图历史分数**：新增一个接口，一次返回这道题自己所有流程图提交的 id、分数、等级、时间
   （现在 `/flowchart/history` 一次只给一条）。
3. **流程图历史的防抄闸门**：加入题单之前画的图，照 `canViewSubmission`（`routes/submission.ts`）
   的规则藏起来；`flowchart.ts` 的 `canView` 现在没有这一条。流程图画布的本地草稿
   （`flowchart-editor-data-problem-题号`）同理。
4. **题单里的代码草稿**：本地草稿键 `problem_题号_contest_null_语言` 题库和题单共用一份，
   在题库做过的代码会直接出现在题单的编辑器里。题单入口只读题单自己的草稿。
5. 协作时老师要看学生最近一次提交（第 9 节），需要一个按学生取的接口（管理员角色本来就能看）。

## 12. 旧功能 → 新位置

| 现在 | 新设计 |
|---|---|
| 「本题已经被你解决啦」「尝试过但还没通过」两条提示 | 标题下的状态标签；去掉「寻求 AI 的帮助」那句 |
| 代码要求 / 描述 / 输入 / 输出 / 提示 / 来源 / 难度 | 「题目」页签，顺序见 5.2 |
| 例子 + 复制 + 「测试」按钮 | 例子表格 + 复制；测试改成工具栏「运行例子」 |
| SQL 数据表 / 期望结果 / 执行后的表 | 「题目」页签原样，可横向滚动 |
| 「流程图表」页签 / 「我的流程图」页签 | 「题目」页签里的流程图小节 |
| 相似题推荐 | 题面末尾；不在课堂里的题通过后放在结果页签 |
| 「题目统计」「题目点评」「我的提交」页签 | 抽屉 |
| 本题提交 | 抽屉底部「看这道题所有人的提交」 |
| 课堂统计（教师） | 工具栏，仅教师 |
| 去自测猫 / 复制 / 重置 / 编辑题目 | 「⋯」 |
| 求助按钮三种状态、教师协作栏 | 5.4、第 9 节 |
| 顶栏「双栏 / 自测 / 题目」、`EditorForTest` | 删除；拖分隔条；「自己输入」分段 |
| 提交按钮状态（未登录 / 空代码 / 格式化中 / 5 秒冷却） | 原样 |
| 提交前自动排版（会改掉编辑器里的代码） | 原样，结果里注明「提交前整理了格式」 |
| 结果浮层、「上次结果」 | 删除，「结果」页签常驻 |
| 部分通过进度、各种中文错因、AST 逐条、通用报错、管理员测试点表 | 结果页签，见第 6 节 |
| AI 提示（分级、再多一点、有没有帮助） | 结果页签原样；档位写「第 1 档 · 反问」，不写「L0」 |
| 下一题（LessonNext） | 结果页签 + 上下文条 |
| 烟花、成就弹窗 | 不变；成就弹窗从右下角移到右上角，别和结果、点评叠在一起 |
| 流程图编辑器（节点库、撤销重做、清空、双击改字、自动标签、草稿） | 右栏画布原样；进页面、切到「画流程图」、载回旧版时默认「缩放到合适」 |
| 流程图提交、评分等待、分数按钮、1000px 评分弹窗 | 结果页签，见第 6 节 |
| 看不见但不能丢：编辑过程采集（editTrace）、登录后补拉题目、协作中教师可以提交学生的代码 | 原样 |

## 13. 不做 / 保持现状

- 「运行例子」不换成自己的判题机（决定 3）。代价：Judge0 的 C 是 GCC 9，参数也和判题机
  （gcc-14 + `cLooseErrors`）不同，例子上的结果偶尔会和提交不一致。
- 强制点评的七个选项不改（决定 1）。
- 答案错误说明里给出的写法提示（如「Python 可以写 f"{x:.2f}"」）保持现状。
- AST 未通过按已解决记账、不放烟花 —— 和后端 `NON_FAILURE_RESULTS` 一致，保持。
- 同班提交的筛选靠 `'ks' + 班级名` 的用户名前缀约定，保持。

## 14. 实施顺序

每一步都能单独上线：

1. **修强制点评可被跳过**（第 7 节），独立的小修。
2. **结构改动**（第 10 节 1–3）：提交状态和错误标记进 store、合并编辑器。界面暂时不变，
   这一步只为让后面的改动不再丢状态。
3. **左栏「题目 / 结果」页签 + 结果页签**，去掉浮层和顶栏分栏切换；「运行例子」「自己输入」进来。
4. **上下文条、抽屉、入口差异表**（第 5.1、5.5、8 节）。
5. **流程图作业化**（「写代码 / 画流程图」切换、评分进结果页签）+ 第 11 节后端改动 1–3。
6. 协作的几处规则（第 9 节）、手机版。

每一步都按「旧功能 → 新位置」（第 12 节）对一遍，1366×640 和 1280×900 两个视口都实跑截图。

## 15. 待定

- 协作时老师落在题目页，「结果」页签显示学生最近一次提交需要的接口（第 9 节、第 11 节 5）。
- 暗色模式：差异高亮的粉色、结果区的绿卡片需要一套暗色的颜色，效果图没画。