docs(题目页): 重设计的设计文档——结果放左栏页签，适配机房 1366×768 与 1280×1024 两种屏

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

@@ -0,0 +1,319 @@
+# OJ2 设计文档：题目详情页重设计
+
+日期：2026-09-28
+状态：**设计已定，未实施**。效果图在 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 撤回」—— 要确认编辑器的撤销能撤回这次替换。
+- **统计**：出题人、创建时间、标签、数字卡、结果饼图、历年通过率，内容原样。
+- **点评**：轮盘原样，每人只能评一次。
+- 题单入口三个按钮都不出现。比赛入口没有「点评」。
+
+### 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. 强制点评
+
+- 文案：「做对了！说说你对这道题的感受吧」（原来的「恭喜你成功提交」不准确，交上去不等于做对）。
+- 选之前**不显示人数**（圆心只显示悬停的选项名），选完才显示大家怎么选的 —— 避免跟风。
+- 轮盘 360px（原来 300，每块的字只有 12px 左右）。
+- 防误触：弹出后 600ms 内不接受点击；不响应 Enter / 空格；不预选任何一块；选完焦点落到「下一题」。
+- **窗口期内换题要先点评**：通过后 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）。
+- 暗色模式：差异高亮的粉色、结果区的绿卡片需要一套暗色的颜色，效果图没画。