style(题目页): 顶上三层条合成一条、课堂和比赛改成左边竖栏；题面小标题和例子重新设计

- 课堂、比赛在电脑上挪到左栏最左一条竖栏，只写题号（题名鼠标停上去看），顶上从 148px 降到 104px，
  页签行和编辑器工具栏对齐成一根线；专题条去掉蓝底、改成 40px 细横条
- 工具栏按钮只剩三种分量：实心提交、浅绿运行例子、其余不带框；统计/点评/我的提交改成图标 + 字
- 题面：题号题名难度状态一行；小标题改成线条图标 + 绿字 + 细线（语法要求、提示用黄色）；
  去掉空段落、老师写的大标题降成粗体；输入输出上下排；来源缩成底部一行灰字；SQL 去掉图例
- 例子改成「输入 → 输出」：「无」写成「不用输入」、行首空格画成点、长句折行缩进两格写全，
  运行例子后序号上标 ✓ / ✗

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

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

@@ -5,6 +5,11 @@
 那一页是定稿，「初稿 1280×800」那一页已作废，只留着对照）。**画布管样子，本文管规则**：
 版式、颜色、文案照画板，效果图表达不了的规则写在这里。
 
+**2026-11-04 改了一轮「观感」**（用户觉得整体观感不好）：同一块画布新开「题目页观感」页，
+**外框和题面以那一页为准**（定稿板「定稿：合一版 + 甲 + ⑦」，题面细节看「题面 甲」、例子看
+「例子 · 输入 → 输出」、特殊题面看「特殊题面」一行）。改动落在下面第 4.1、4.3、5.1、5.2、5.4 节：
+课堂 / 比赛在电脑上挪成左边竖栏，页签行和工具栏并成等高的一条；题面小标题、例子重新设计。
+
 和画板有意不同的几处（都是拍过板的）：
 
 - 题面**不写时间和内存限制**（画板上有「限时 1 秒」）：用户 2026-09-28 拍板，中职学生看了反而迷惑。
@@ -86,7 +91,9 @@
 | 右栏 | 约 786 | 约 740 |
 | 编辑器可见行数 | 约 19 行 | 约 28 行 |
 
-竖向：顶栏 56 → 左栏是上下文条 44 + 页签行 42 + 内容；右栏是工具栏 48 + 编辑器。
+竖向：顶栏 56 → 左栏是页签行 48 + 内容（专题入口多一条 40 的专题条）；右栏是工具栏 48 + 编辑器。
+课堂、比赛在电脑上是左栏最左的一条竖栏（宽 56），**不占高度**：原来课堂里顶上要 56 + 44 + 48 = 148，
+现在 104，两边的 48 那条对齐成一根线（2026-11-04）。
 两栏之间的分隔条**保留、可拖动**（宽 SQL 表、长题面需要）。
 
 ### 4.2 为什么不是方案 A（结果放在编辑器下方）
@@ -97,8 +104,9 @@ B 看得到。
 
 ### 4.3 方案 B 的结构
 
-- **左栏**：上下文条 → 「题目 / 结果」两个页签 → 内容（可滚动）。页签行右侧是「统计 / 点评 /
-  我的提交」三个按钮（高 32，带边框，和页签区分开），点开是**抽屉，盖住左栏，编辑器不动**。
+- **左栏**：（课堂 / 比赛竖栏 ｜）上下文条 → 「题目 / 结果」两个页签 → 内容（可滚动）。页签行右侧是
+  「统计 / 点评 / 我的提交」三个按钮（图标 + 字、不带框；原来是带框的胶囊，看着像另一组页签），
+  点开是**抽屉，盖住左栏，编辑器不动**。
 - **右栏**：工具栏 + 编辑器占满整列。流程图题的工具栏最左是「写代码 / 画流程图」切换。
 - **去掉**：顶栏的「双栏 / 自测 / 题目」切换、`EditorForTest`、左栏的另外 4 个页签、
   提交按钮下的结果浮层、「上次结果」按钮。
@@ -109,27 +117,43 @@ B 看得到。
 
 说明「这道题是从哪来的」，只有一条，按入口路由决定显示哪种：
 
-| 入口 | 内容 |
-|---|---|
-| 课堂（这道题在「班里在做」的列表里） | 「这节课 做完 3/5」+ 各题题号芯片 + ‹ › |
-| 题单 | 「‹ 题单名」+ 进度条 +「7/12 · 第 8 题」+ ‹ › |
-| 比赛 | 「‹ 比赛名」+ 各题题号芯片 +「还剩 38:12」+「排名」 |
-| 都不是 | 不显示，页签行顶上去 |
+| 入口 | 电脑（2026-11-04 起） | 手机 |
+|---|---|---|
+| 课堂（这道题在「班里在做」的列表里） | 左边竖栏（浅绿底）：「这节课 / 2/4 / 语言」，下面一题一格：圈里写第几道（做完是实心绿勾）、圈下写题号 | 横条：「这节课 做完 3/5」+「这是第 N 道」+ ‹ › |
+| 专题 | 页签行上面一条 40 的细横条，不带底色：「‹ 专题名」+ 绿进度条 +「做完 7/12 · 第 8 题」+ ‹ › | 同左，去掉进度条 |
+| 比赛 | 左边竖栏（浅黄底）：「‹ 比赛」+「还剩 38:12」，下面一题一个圈、圈里写题号，最底下「排名」 | 横条：「‹ 比赛名」+ 题号芯片 + 还剩 + 排名 |
+| 都不是 | 不显示，页签行顶上去 | 同左 |
 
-- 芯片**只放题号**，鼠标停上去看题目名；状态用图标区分，**不只靠颜色**：✓ 做完（实心绿）/
-  ! 做过没对（橙）/ 没做（灰）/ 当前题（描边；做完后是实心绿加外圈）。
-- 5 道以内一行放得下；**超过 5 道**时题号那一段横向滚动，当前题保持在视野里，去掉 ‹ ›。
+- **竖栏只写题号**，题名鼠标停上去看：学生认题靠题号（用户 2026-11-04）。状态不只靠颜色：
+  做完是实心绿（课堂圈里换成 ✓）/ 做过没对是红圈 / 没做是灰圈 / 当前题是白底 + 左边一道绿 + 绿圈。
+- 专题可以有几十道题、还有「加入专题」，竖栏放不下，所以专题留横条。
+- 手机横条：5 道以内一行放得下；**超过 5 道**时题号那一段横向滚动，当前题保持在视野里，去掉 ‹ ›。
 - 进度一律写「做完 3/5」，不写「3/5」（会被读成「第 3 道」）。
 - 通过之后课堂条要重新拉一次（做完数 +1）。
 - 未登录时没有这一条（接口要求登录）。
 
 ### 5.2 「题目」页签
 
-内容顺序：标题（题号 + 名称）→ 难度、状态标签 → **代码要求**（AST 规则，放最前）→
-描述 → 输入 / 输出 → 参考流程图（折叠）或你画的流程图 → 例子 → 提示 → 来源 → 相似题（按原规则出现）。
+内容顺序：标题（题号 + 名称 + 难度、状态标签，一行）→ **语法要求**（AST 规则，放最前）→
+描述 → 输入 → 输出 → 你画的流程图 → 例子 → 参考流程图 → 提示 → 相似题（按原规则出现）→ 来源。
 
-- 例子改成表格：例子 N | 输入 | 输出，每格带「复制」。去掉每个例子旁的「测试」按钮。
-  例子标题旁有「自己输入数据试试 ›」，跳到结果页签的「自己输入」。
+- **小节标题**（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，可「放大看」）。两个开关本来就互斥
@@ -157,6 +181,8 @@ B 看得到。
 | 教师 | 语言、运行例子、提交 …… 课堂统计、⋯ |
 | 协作中的教师 | 上方加 40px 蓝色协作条（正在帮谁 · 语言 · 看他交过什么 · 结束协作）；语言选择禁用 |
 
+- 按钮只有三种分量（2026-11-04）：实心的「提交」、浅绿底的「运行例子」（带播放图标）、其余不带框
+  （语言选择、空闲时的举手求助、课堂统计、⋯）。举手之后的排队 / 老师在帮你两种状态照旧用颜色。
 - 答案正确后「提交」降成描边按钮，让结果页签里的「下一题」是唯一的主按钮。
 - 「⋯」里：去自测猫（SQL 不给）、复制代码、重置代码（**加确认**；协作中的教师不给）、
   编辑题目（仅超管、仅桌面）。没有例子的题「去自测猫」现在会抛错，一并修。