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」那一页已作废，只留着对照）。画布管样子，本文管规则： 版式、颜色、文案照画板，效果图表达不了的规则写在这里。

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

• 题面不写时间和内存限制（画板上有「限时 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 → 左栏是上下文条 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 「题目」页签

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

• 例子改成表格：例子 N | 输入 | 输出，每格带「复制」。去掉每个例子旁的「测试」按钮。 例子标题旁有「自己输入数据试试 ›」，跳到结果页签的「自己输入」。
• 不写时间 / 内存限制（2026-09-28 去掉了「限时 1 秒」：学生的程序很少碰到限制，写出来反而迷惑）。
• 流程图小节同一个位置，二选一：老师给的参考图（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 节），每人只能评一次。
• 我的提交列表上方另有一行「答案错误 × 3」「答案正确 × 1」（这一页各种结果各几次，和原来一样； 被题单闸门锁住的那几次不数）。
• 题单入口三个按钮都不出现；管理员角色的「看这道题所有人的提交」挪进「⋯」（叫「本题提交」）。 比赛入口没有「点评」。

5.6 手机

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

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

情况	标题	正文
答案错误，例子上就错了	✕ 答案错误 · 在例子 N 上就错了	「例子 N 没有通过：」+ 中文原因（WrongAnswerExplain 那套）+ 输入 / 正确输出 / 你的输出三栏，差异标红 + 「题目要求的输出：……」+ 让 AI 分析
答案错误，例子都对	✕ 答案错误 · 通过 x/y 个测试点 + 进度条	「题目里的例子都对了，没通过的是隐藏的测试点……」+ 题目原话 + 让 AI 分析 +「去自己输入试试」
运行时错误 / 编译错误 / 超时 / 内存超限	原样	RuntimeErrorExplain / PythonErrorExplain 原样搬进；编辑器标红出错行。超时、内存超限各给一句中文说明（常见原因：死循环、多写了 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 关掉，不预选任何一块。 抽屉里的是学生自己点开的，不设防、键盘能选。
• 选完不马上关：弹窗里换成横条图，下面只有一个按钮、焦点落在它上面 —— 被拦下的换题写「继续」， 否则是这节课的「下一题：题号 题目」，都没有就是「好的」。
• 窗口期内换题要先点评：通过后 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. 错误标记不能跟着页签消失：PythonErrorExplain / 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）。
• 暗色模式：差异高亮的粉色、结果区的绿卡片需要一套暗色的颜色，效果图没画。