xuyueandClaude Opus 5.5
566599614a
Deploy / deploy (push) Successful in 1m0s
- 提交结果 / 运行例子 / 自己输入改成浅灰底的分段按钮；状态大字和测试点方块放大一档 - 哪里不对一律是黄色小节标题（例子 1 没对上、错在没给你看的测试点、第 2 行出错），说明用正文大小 - 答错的对比竖着排成灰 / 绿 / 红三格，和题面的例子一个样子；运行时错误把出错那一行放进红格 - 做对了去掉浅绿卡片，改成「接着做」一句话加写着下一题题号题名的大按钮 - 提交详情页的答错对比不变 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
32 KiB
32 KiB
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. 已拍板的决定
- AC 后点评保持强制弹窗，七个选项不变（「题目有错」和其他六项放在一起，不单独挪走）。
- 题单入口隐藏「我的提交」「本题提交」「统计」「点评」和标题下的「已解决 / 尝试过」标签 —— 不让学生看到加入题单之前的提交、抄到答案。
「运行例子」先继续用 Judge0，不另做判题机端点。2026-09-29 改了：「运行例子」「自己输入」、 后台「生成测试点」都改走本站判题机（POST /trial-runs，apps/api/src/judge/trial.ts）， 和提交同一套编译命令、这道题的时间内存限制和代码模板；试运行在 api 进程里自己排队， 不进判题队列，全站同时跑的批数由TRIAL_CONCURRENCY定，每人最多两批。- 流程图题可以放进题单；题单里流程图拿到 A 或 S 级算这道题完成。
- 题单里答案正确或流程图 A/S 后，1.5 秒自动回题单，保留。
- 课堂条里，流程图 A/S 也算做完。
- 机房有两种屏：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. 结构改动
- 提交状态上移到 store：当前提交、判题跟踪（WebSocket + 轮询）、AI 提示、失败计数、 流程图评分（含 WebSocket 订阅与 3 分钟超时）都不再挂在按钮组件上。结果页签只负责显示。 这是修掉「编辑器一卸载结果就丢」的前提。
- 错误标记不能跟着页签消失：
CompileErrorExplain/RuntimeErrorExplain挂载时标红、卸载时清掉， 原来切到「题目」页签红线就没了。实际做法没挪进 store：「结果」页签第一次打开之后就一直挂着、 只是藏起来（detail.vue的resultMounted），标红跟着结果走，换题时由换题重置清掉。 - 三种入口用同一个编辑器：合并
ProblemEditor与BasicEditor，协作、错误标记、中文标点替换 在三种入口都有；比赛里是否允许协作由第 8 节的表决定。 - 换题 = 完整重置：例子、语言、流程图状态、结果页签、定时器全部重来。
1b149a4已经修了 例子、语言、流程图三处，重构时收进同一个换题钩子里。 - 入口差异收成一张表（第 8 节）。
11. 后端前置改动
- 流程图 A/S 算完成：评分落库后，A/S 走和
recordSolvedProblem（services/problemset.ts） 同样的题单记账 —— 和判代码那一路一样，记进所有已加入、且含这道题的题单，所以提交请求不用带problemSetId。classroom路由里「流程图 A/S 算做完、交过流程图算做过」是同一个口径， 用在课堂条的myStatus、看板的格子，也用在推断「这节课做哪几道」、「班上 M 人做完」、 看板上「最近几节课来了几次」和猜正在上课的班（用户 2026-09-28 拍板一起改）。 班级对比、个人资料里的通过数仍然只数代码。 - 流程图历史分数：新增一个接口，一次返回这道题自己所有流程图提交的 id、分数、等级、时间
（现在
/flowchart/history一次只给一条）。 - 流程图历史的防抄闸门：加入题单之前画的图，照
canViewSubmission（routes/submission.ts） 的规则藏起来；flowchart.ts的canView现在没有这一条。流程图画布的本地草稿 （flowchart-editor-data-problem-题号）同理。 - 题单里的代码草稿：本地草稿键
problem_题号_contest_null_语言题库和题单共用一份， 在题库做过的代码会直接出现在题单的编辑器里。题单入口只读题单自己的草稿。 - 协作时老师要看学生最近一次提交（第 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. 实施顺序
每一步都能单独上线：
- 修强制点评可被跳过（第 7 节），独立的小修。
- 结构改动（第 10 节 1–3）：提交状态和错误标记进 store、合并编辑器。界面暂时不变， 这一步只为让后面的改动不再丢状态。
- 左栏「题目 / 结果」页签 + 结果页签，去掉浮层和顶栏分栏切换；「运行例子」「自己输入」进来。
- 上下文条、抽屉、入口差异表（第 5.1、5.5、8 节）。
- 流程图作业化（「写代码 / 画流程图」切换、评分进结果页签）+ 第 11 节后端改动 1–3。
- 协作的几处规则（第 9 节）、手机版。
每一步都按「旧功能 → 新位置」（第 12 节）对一遍，1366×640 和 1280×900 两个视口都实跑截图。
15. 待定
- 协作时老师落在题目页，「结果」页签显示学生最近一次提交需要的接口（第 9 节、第 11 节 5）。
- 暗色模式：差异高亮的粉色、结果区的绿卡片需要一套暗色的颜色，效果图没画。