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

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

日期：2026-09-28
状态：**第 14 节的 6 步和第 7 节都已实施**（2026-09-28），界面已照画布「机房（方案 B）」的画板逐块对齐过。2026-09-28 实施后又做过一轮全面审查并修掉查出的问题，和本文原稿有出入的地方都已改进正文。效果图在 claude.ai 的私有画布「题目详情页重设计」里（「机房（方案 B）」
那一页是定稿，「初稿 1280×800」那一页已作废，只留着对照）。**画布管样子，本文管规则**：
版式、颜色、文案照画板，效果图表达不了的规则写在这里。

**2026-11-04 改了一轮「观感」**（用户觉得整体观感不好）：同一块画布新开「题目页观感」页，
**外框和题面以那一页为准**（定稿板「定稿：合一版 + 甲 + ⑦」，题面细节看「题面 甲」、例子看
「例子 · 输入 → 输出」、特殊题面看「特殊题面」一行）。改动落在下面第 4.1、4.3、5.1、5.2、5.4 节：
课堂 / 比赛在电脑上挪成左边竖栏，页签行和工具栏并成等高的一条；题面小标题、例子重新设计。

和画板有意不同的几处（都是拍过板的）：

- 题面**不写时间和内存限制**（画板上有「限时 1 秒」）：用户 2026-09-28 拍板，中职学生看了反而迷惑。
- 点评用重新设计过的 SVG 轮盘（第 7 节），不是画板上的样子。
- 流程图编辑器内部（节点库、撤销重做那一排）沿用原来的布局，没照画板重排。
- 「交之前检查」那一段不带时间；「运行例子」的结果胶囊在窄屏会折行。

题目页是全站的核心页面：学生在这一页读题、写代码、提交、看结果、改、去下一题，老师在这一页
接求助、协作。动它之前先把第 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，不另做判题机端点。~~ **2026-09-29 改了**：「运行例子」「自己输入」、
   后台「生成测试点」都改走本站判题机（`POST /trial-runs`，`apps/api/src/judge/trial.ts`），
   和提交同一套编译命令、这道题的时间内存限制和代码模板；试运行在 api 进程里自己排队，
   不进判题队列，全站同时跑的批数由 `TRIAL_CONCURRENCY` 定，每人最多两批。
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 → 左栏是页签行 48 + 内容（专题入口多一条 40 的专题条）；右栏是工具栏 48 + 编辑器。
课堂、比赛在电脑上是左栏最左的一条竖栏（宽 56），**不占高度**：原来课堂里顶上要 56 + 44 + 48 = 148，
现在 104，两边的 48 那条对齐成一根线（2026-11-04）。
两栏之间的分隔条**保留、可拖动**（宽 SQL 表、长题面需要）。

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

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

### 4.3 方案 B 的结构

- **左栏**：（课堂 / 比赛竖栏 ｜）上下文条 → 「题目 / 结果」两个页签 → 内容（可滚动）。页签行右侧是
  「统计 / 点评 / 我的提交」三个按钮（图标 + 字、不带框；原来是带框的胶囊，看着像另一组页签），
  点开是**抽屉，盖住左栏，编辑器不动**。
- **右栏**：工具栏 + 编辑器占满整列。流程图题的工具栏最左是「写代码 / 画流程图」切换。
- **去掉**：顶栏的「双栏 / 自测 / 题目」切换、`EditorForTest`、左栏的另外 4 个页签、
  提交按钮下的结果浮层、「上次结果」按钮。

## 5. 各区域的规则

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

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

| 入口 | 电脑（2026-11-04 起） | 手机 |
|---|---|---|
| 课堂（这道题在「班里在做」的列表里） | 左边竖栏（浅绿底）：「这节课 / 2/4 / 语言」，下面一题一格：圈里写第几道（做完是实心绿勾）、圈下写题号 | 横条：「这节课 做完 3/5」+「这是第 N 道」+ ‹ › |
| 专题 | 页签行上面一条 40 的细横条，不带底色：「‹ 专题名」+ 绿进度条 +「做完 7/12 · 第 8 题」+ ‹ › | 同左，去掉进度条 |
| 比赛 | 左边竖栏（浅黄底）：「‹ 比赛」+「还剩 38:12」，下面一题一个圈、圈里写题号，最底下「排名」 | 横条：「‹ 比赛名」+ 题号芯片 + 还剩 + 排名 |
| 都不是 | 不显示，页签行顶上去 | 同左 |

- **竖栏只写题号**，题名鼠标停上去看：学生认题靠题号（用户 2026-11-04）。状态不只靠颜色：
  做完是实心绿（课堂圈里换成 ✓）/ 做过没对是红圈 / 没做是灰圈 / 当前题是白底 + 左边一道绿 + 绿圈。
- 专题可以有几十道题、还有「加入专题」，竖栏放不下，所以专题留横条。
- 手机横条：5 道以内一行放得下；**超过 5 道**时题号那一段横向滚动，当前题保持在视野里，去掉 ‹ ›。
- 进度一律写「做完 3/5」，不写「3/5」（会被读成「第 3 道」）。
- 通过之后课堂条要重新拉一次（做完数 +1）。
- 未登录时没有这一条（接口要求登录）。

### 5.2 「题目」页签

内容顺序：标题（题号 + 名称 + 难度、状态标签，一行）→ **语法要求**（AST 规则，放最前）→
描述 → 输入 → 输出 → 你画的流程图 → 例子 → 参考流程图 → 提示 → 相似题（按原规则出现）→ 来源。

- **小节标题**（2026-11-04，画布「题目页观感」⑦）：线条图标 + 绿色粗体字 + 一根细线拖到头
  （`SectionHead.vue`），线尾可以挂链接（「自己输入数据试试 ›」「放大看 ›」）。语法要求、提示用黄色。
  原来的「16px 粗体 + 左侧绿竖条」不用了。
- **题面正文**：老师为了隔开敲的空段落（`<p><br></p>`）渲染前去掉（`utils/statement.ts`）；
  老师自己写的 h1～h6 降成和正文一样大的粗体（2020 开头的「鸣潮公式」原来比题名还大）。
  图片照原样占满栏宽、提示照常摊开 —— 缩略图、提示先收起都问过，用户不要。
- **输入、输出上下排**，不再左右并排（多一两句就挤成窄条）。
- **例子：每组一行「输入 → 输出」**，输出浅绿底（`SampleList.vue`）。去掉每个例子旁的「测试」按钮。
  - 输入是「无」或空的写灰字「不用输入」、不给复制（常用题里 12% 的例子）。
  - 行首空格画成浅灰点（菱形那几道靠它对齐），复制出去还是空格。
  - 半格放不下最长那行，这道题的例子整体改成上下排（输入、↓、输出）；整宽还放不下的那一行才折，
    **折下来的部分缩进两格**。原来不折、横着滚，是怕学生分不清折行和真换行 —— 缩进两格解决的就是这个。
  - 点过「运行例子」（照旧跳到结果页签），切回来序号上标 ✓ / ✗；代码一改就不标了。
- **语法要求**每条一行，前面一个小图标说是「必须 / 不能 / 次数」哪一类，文字照后端给的原样；
  不再写「提交时会逐条检查」。
- **来源**不单起一节，缩成题面最底下一行灰字。SQL 题去掉「执行后变了的格子」图例（变了的格子照旧标黄）。
- 「做过，还没对」标签用红色（橙色和「中等」撞色）；「已解决」实心绿。
- 不写时间 / 内存限制（2026-09-28 去掉了「限时 1 秒」：学生的程序很少碰到限制，写出来反而迷惑）。
- 流程图小节同一个位置，二选一：老师给的参考图（`showFlowchart`，默认折叠）或学生自己画到
  A/S 的那张（`allowFlowchart`，默认高约 150px，可「放大看」）。两个开关本来就互斥
  （`admin/problem/detail.vue`）。**不再**一进页面就强制切到「我的流程图」。
- 题单入口：不显示「已解决 / 尝试过」标签。

### 5.3 「结果」页签

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

**样子（2026-11-04，画布「题目页观感」结果 X）**：分段是浅灰底的分段按钮（选中白底加粗，时间灰色小字）；
状态行是图标 + 22px 大字 + 灰色小字，下面测试点方块（22px）。说哪里不对的一律是黄色小节标题
（「例子 1 没对上」「例子都对了，错在没给你看的测试点」「第 2 行出错」「第 1 行」），说明用正文 16px；
例子对比竖着排成灰（输入）/ 绿（正确输出）/ 红（你的输出）三格，和题面的例子一个样子；
运行时错误把出错那一行代码放进红格。「让 AI 分析我的代码」「用这组数据运行」是浅绿底按钮。
做对了是「接着做」一节 + 写着下一题题号题名的大按钮（原来的浅绿卡片去掉了，竖栏里已经有进度）。
提交详情页的答错对比（`WrongAnswerExplain` 不带 `section`）还是原来那张浅灰卡片。

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

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

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

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

- 按钮只有三种分量（2026-11-04）：实心的「提交」、浅绿底的「运行例子」（带播放图标）、其余不带框
  （语言选择、空闲时的举手求助、课堂统计、⋯）。举手之后的排队 / 老师在帮你两种状态照旧用颜色。
- 答案正确后「提交」降成描边按钮，让结果页签里的「下一题」是唯一的主按钮。
- 「⋯」里：去自测猫（SQL 不给）、复制代码、重置代码（**加确认**；协作中的教师不给）、
  编辑题目（仅超管、仅桌面）。没有例子的题「去自测猫」现在会抛错，一并修。
- 右栏窄于 600px（左栏拖宽时）：次要按钮收进「⋯」。
- 举手求助三种状态都写在按钮上：「举手求助」→「已举手 · 前面 2 人」（点击取消）→
  「[老师名]老师在帮你」。学生这边**不加横幅**（省下编辑器 40px）。

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

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

### 5.6 手机

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

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

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

**运行例子的判定**：两边都去掉末尾空白再比（现在只 trim 了运行输出，末尾带空格的样例永远「不通过」，
`ProblemContent.vue` 的 `test()`）。判题机返回的英文报错（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` 关掉，不预选任何一块。
  抽屉里的是学生自己点开的，不设防、键盘能选。
- 选完不用再点：标题换成「大家是这样觉得的」，就地变成玫瑰图停 2.5 秒，然后自己关。轮盘正下方
  居中一个按钮，停着的时候底边一条线缩完就关，急着走的直接点 —— 被拦下的换题写「继续」，
  否则是这节课的「下一题：题号 题目」，都没有就是「好的」。（2026-10-12 改过一版点一块就关，
  学生看不到结果；2026-10-14 改成现在这样。）
- **窗口期内换题要先点评**：通过后 1.5 秒内点「下一题」、课堂条芯片、‹ ›、顶栏题号直达，
  先立刻弹出点评，选完再跳。**现在线上可以被跳过**（`SubmitCode.vue` 换题时 `cancelCommentPanel()`）。
- 查询或提交点评的接口出错时不能把学生卡住：查询失败就不弹；提交失败留在弹窗里提示「没记上，再点一次」。
- 只在题库入口弹（题单、比赛不弹，现行规则）。

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

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

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

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

## 9. 老师协作

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

## 10. 结构改动

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

## 11. 后端前置改动

1. **流程图 A/S 算完成**：评分落库后，A/S 走和 `recordSolvedProblem`（`services/problemset.ts`）
   同样的题单记账 —— 和判代码那一路一样，记进**所有已加入、且含这道题**的题单，所以提交请求不用带
   `problemSetId`。`classroom` 路由里「流程图 A/S 算做完、交过流程图算做过」是同一个口径，
   用在课堂条的 `myStatus`、看板的格子，也用在推断「这节课做哪几道」、「班上 M 人做完」、
   看板上「最近几节课来了几次」和猜正在上课的班（用户 2026-09-28 拍板一起改）。
   班级对比、个人资料里的通过数仍然只数代码。
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）。~~ 已换，见决定 3。
- 强制点评的七个选项不改（决定 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）。
- 暗色模式：差异高亮的粉色、结果区的绿卡片需要一套暗色的颜色，效果图没画。