# 三联慧学 Pad 设计稿 v4（统一设计系统版）

> 位置：`设计图/v4/`　│　纯静态 HTML + CSS + 原生 JS，**零依赖、零构建，双击即开**
> 目标：把「设计稿很乱、风格不统一、逻辑说不通」的 Pad 端重做成**一套统一设计元素**，并给出可落地的 HTML 设计稿。

---

## 一、本轮做了什么

1. **统一设计元素**（这是本次的重点，不是重画插画）
   - 补上原稿完全没有的 **状态栏**（时间/日期/网络/电量，深色页深色字、场景页白字，手机交给系统安全区）；
   - 返回按钮统一成 **44×44 触控区 + 22px 线性 chevron**（原来有 3 套写法：48px 字号当图标、绝对定位 19.5×29.5、页面自绘）；
   - 左侧导航统一成 **一套几何**（46px 图标圆 + 11px 标签；选中 = 白圆 + 主色图标 + 5 色弧光 + 蓝底标签），取代「学生用整图 / 教师 inactive 用 CSS、active 用整图」的两套做法；
   - 令牌统一（`assets/tokens.css`：色板、字号刻度、8pt 间距、4 档圆角、2 档通用阴影、动效曲线、层级），全部来自原稿像素核验值与工程 `v2.scss` 的设计令牌；
   - 组件统一（`assets/components.css`：按钮/徽章/状态/chip/segment/tabs/卡片/列表/KPI/进度/环形/柱图/表格/**做题选项/答题卡/底部操作条**/表单/步骤/折叠/空态/骨架屏/Toast/弹窗/底部抽屉）。
2. **两个首页保持现有结构**：左简易导航 + 右内容区，内容在页内切换，不跳页。
   - 学生 `student/home.html`：首页 / 自主学习 / 数字课堂 / 精准练习 / 趣学英语 / 作文批改（＋顶部科目切换）
   - 教师 `teacher/home.html`：工作台 / 作业批改 / 智能组卷 / 班级学情 / 班级错题本
3. **二级页独立跳转 + 统一返回**（已交付 9 个学生二级页 + 6 个教师二级页）：
   - 学生：`practice-task`（今日任务 1+5）、`practice-paper`（试卷作答 + 交卷确认）、`practice-habit`（好习惯训练 · 限时抢答）、`practice-advanced`（学霸进阶 · 关卡 + AI 判分）、`practice-memory`（大表速记）、`knowledge-map`（知识地图）、`word-game`（单词连连看）、`word-textbook`（跟课本学单词）、`word-search`（查词）、`essay-write`（写作文）、`essay-history`（历史作文 + 进步曲线）、`essay-detail`（作文批改结果）、`report`（学情报告）、`report-wrong`（错题解析）、`selflearn-textbook`（跟课本学目录）、`selflearn-video`（视频学习 + 时间戳笔记）、`selflearn-assess`（10 题测真实水平）、`selflearn-result`（测试结果 + 3 步路径）、`selflearn-challenge`（通关挑战 · 命数 + 星级）、`courseware-detail`（数字课堂详情）、`reading`（大阅读）
   - 教师：`grading-work`（批改工作台）、`hw-answer`（参考答案核对）、`hw-result`（批改报告）、`exam-wizard`（组卷向导）、`exam-bank`（题库）、`exam-preview`（试卷预览 + 发布）、`exam-ai`（**AI 出卷三态：生成中 72% / 成功 / 失败**）、`exam-history`（历史组卷）、`analytics-class`（班级学情 + 学生个体学情弹窗）、`wrong-detail`（错题解析）、`download`（下载中心）
   首页里的入口已全部换成**真实链接**，可以整站点进去走流程（教师：工作台 → 新建批改 → 核对答案 → 批改工作台 → 报告 → 按错题组卷 → 预览发布）。
4. **个人中心共用**：`common/account.html` 一个页面，学生/教师按身份分支（页头有「学生版 / 教师版」开关可直接对比）。
5. **欢迎页 / 登录页**（本轮补齐，`bare` 皮肤）：`welcome.html`（品牌 + 身份选择）、`login.html`（学生=学号+密码 / 老师=手机号+短信+图形验证码，含记住账号、忘记密码、协议勾选）。这两页同样带状态栏，只是没有左侧导航与页头。
6. **手机适配（已评估并落地）**：不另起一套视觉，而是**同一套令牌与组件 + 换导航形态**：
   - 平板横屏（≥1101）179px 完整左栏；平板竖屏（701–1100）88px 图标轨；手机（≤700）**底部 5 项 Tab + 单列卡片 + 弹窗转底部抽屉 + 表格转「标签+值」卡片**；
   - 场景皮肤在手机上转浅色（保留一条品牌渐变头），因为 1194 画布整体缩放在手机上必然糊成一团——这也是线上「手机上没法看」的根因。

---

## 二、目录

```
设计图/v4/
├── welcome.html          欢迎页（bare 皮肤：品牌 + 身份选择）
├── login.html            登录页（bare 皮肤：学生学号 / 老师手机号）
├── index.html            设计系统总览：外壳说明 + 色板 + 字号 + 间距/圆角/阴影 + 组件全状态 + 三态 + 断点 + 页面清单
├── DESIGN-SYSTEM.md      设计规范（统一元素、令牌、信息架构、断点、落地映射、验收、边界）
├── README.md             本文件（交付说明）
├── _template.html        新页面模板（复制它改内容区）
├── _tools/
│   ├── check.html        多断点并排校验台（iframe 绕开无头浏览器最小窗口宽度限制）
│   ├── audit.html        全站溢出审计（页面 × 宽度 → 溢出元素清单）
│   ├── gallery.html      全站缩略图画廊（一屏纵览，可改宽度/缩放/?p= 选页）
│   └── _breakpoint-test.html  断点工具类自检（hide-phone / only-phone / only-pc）
├── assets/
│   ├── tokens.css        设计令牌（唯一真值）
│   ├── base.css          reset + 排版 + 布局工具类 + 断点可见性 + [hidden] 修正
│   ├── components.css    统一组件库（含三态）
│   ├── shell.css         统一外壳：状态栏 / 页头(返回) / 左侧导航 / 内容区 / 手机底部 Tab
│   ├── student.css       学生版专属（问候、回顾、总览、快捷入口、AI 问答、学情报告…）
│   ├── teacher.css       教师版专属（工作台、任务卡、扫码件、逐题评分、知识点树…）
│   ├── app.js            外壳交互（时钟、hub 切换、tab/chip/折叠/步进、弹窗、Toast、探针）
│   └── static/           切图与字体（复制自 sanlian-uniapp/src/static/，子目录结构一致）
├── student/  home.html（hub）· practice-task.html · practice-paper.html · practice-habit.html
│            practice-advanced.html · practice-memory.html · knowledge-map.html
│            word-game.html · word-textbook.html · word-search.html
│            essay-write.html · essay-detail.html · courseware-detail.html · report.html · reading.html
├── teacher/  home.html（hub）· grading-work.html · hw-answer.html · hw-result.html
│            exam-wizard.html · exam-bank.html · exam-preview.html · exam-ai.html
│            exam-history.html · analytics-class.html · wrong-detail.html · download.html
├── common/   account.html（学生/教师共用）
└── _shots/   多断点截图留证 + 溢出审计结果
```

**图片与字体已随设计稿打包**：切图从 `sanlian-uniapp/src/static/` 复制到 `assets/static/`（子目录保持一致），页面相对引用 `../assets/static/...`，
整个 v4 目录可单独部署。工程切图更新后需重新复制一份过来。

---

## 三、怎么看

- 双击 `设计图/v4/index.html`：先看设计系统（色板/字号/组件全状态），再从页面清单进各页。
- 页面之间是**真实相对链接**，可以整站点进去走流程：学生首页 → 学情报告 → 返回；教师首页 → 阅卷列表 → 批改工作台 → 返回；账号块/「我的」→ 个人中心（学生↔教师切换）。
- 想改断点看效果：`_tools/check.html?p=student/home.html&w=390,768,1194&h=844`。
- 想核对溢出：`_tools/audit.html?p=...&w=390,768,1194&h=844`，或任意页面加 `?probe=1`。

---

## 四、与 `设计图/v2`、`设计图/v3` 的关系

| | v2 | v3 | **v4（本目录）** |
|---|---|---|---|
| 定位 | 教师工作台单文件稿 + 设计说明 | 「按断点重排」的响应式原型（41 屏） | **统一设计系统 + 平板/手机设计稿** |
| 外壳 | 单页 | 三档导航 + 四皮肤 | 状态栏 + 页头 + 左侧导航 + 内容区（四皮肤：scene/flat/page/bare） |
| 状态栏 | 无 | 无 | **有（本版新增）** |
| 返回按钮 | 各自实现 | 各自实现 | **统一 44×44 组件** |
| 左侧导航 | — | 图标轨/完整侧栏两态 | **一套几何 + 学生/教师同款选中态** |
| 手机 | — | 响应式重排（媒体查询堆叠） | 手机=底部 Tab + 浅色化 + 底部抽屉（同一套令牌） |

> v4 是**当前唯一在维护的设计稿**。v2/v3 保留作历史参考，不要在其中继续加页面。
> 实现侧（`sanlian-uniapp`）本轮**未改动代码**——本目录是设计交付物，落地映射见 `DESIGN-SYSTEM.md` 第七节。

---

## 五、验收记录（本轮已跑）

- **交付范围（38 屏）**：通用 4（欢迎 / 登录 / 个人中心 / 设计系统总览）+ 学生 22（1 个 hub + 21 个二级页）+ 教师 12（1 个 hub + 11 个二级页）。
- **边界说明（诚实）**：工程 `pages.json` 里还有两个纯列表页 ——「章节列表」（`selflearn/chapter`）与「试卷列表」（`practice/paper-list`）——**没有单独出图**：它们的内容已经分别落在 [跟课本学目录](设计图/v4/student/selflearn-textbook.html) 的单元手风琴里和 [精准练习](设计图/v4/student/home.html) hub 面板的试卷入口里。若需要独立一屏，按 `_template.html` 补一页即可。

- 全站溢出审计：**38 页 × 3 宽度（390/768/1194）= 114 个视口，横向溢出全部为 0**（分三批渲染以保持文字可读）：`_shots/99-audit-A-通用与学生端1.png`（11 页）、`_shots/99-audit-B-学生端2.png`（15 页）、`_shots/99-audit-C-教师端.png`（12 页）。审计会自动跳过**横向滚动容器内部**的内容（表格 `.tbl-wrap`、关卡轨道 `.level-track` 本来就该横滑，不算溢出）。
- 截图留证（`_shots/`）：
  - 平板横屏 1194×834：`01-student-home-*`、`02-teacher-home-*`、`03-account-*`、`06-report-*`、`07-grading-work-*`、`08-reading-*`
  - 平板竖屏：`09-student-home-tabletportrait-768x1024`、`10-teacher-home-tabletportrait-768x1024`、`04-teacher-home-tabletportrait-834x1194`
  - PC 1440×900：`05-index-pc-*`
  - 手机 390×844：`phone/01…05`
  - 学生 6 页并排：`11-new-pages-tablet-gallery`（1194）、`12-new-pages-phone-gallery`（390）
  - 教师 5 页并排：`14-teacher-pages-tablet-gallery`（1194）、`15-teacher-pages-phone-gallery`（390）
  - 教师第二批 5 页并排：`16-teacher2-tablet-gallery`（1194）、`17-teacher2-phone-gallery`（390）
  - 学生第二批 6 页并排：`18-student2-tablet-gallery`（1194）、`19-student2-phone-gallery`（390）
  - 欢迎/登录 + 学生第三批 6 页并排：`22-student3-tablet-gallery`（1194）、`23-student3-phone-gallery`（390）
  - 学生第四批 3 页并排：`24-student4-tablet-gallery`（1194）、`25-student4-phone-gallery`（390）
  - 平板竖屏修复对照：`20-student-home-900x1200-fixed`、`21-teacher-home-900x1200-fixed`
  - 断点工具类实测：`13-breakpoint-utilities-selftest`
- 过程中修掉的缺陷（写下来避免重犯）：
  1. `.page { display: flex }` 会盖掉 `[hidden]` → 被隐藏的 hub 面板整块排下来（首页下面多出几百 px）。修法：`base.css` 里 `[hidden] { display: none !important }`。
  2. 学生/教师共用 `.sd-bar` 进度条只写在 `student.css` 里 → 教师首页读到但没有样式，进度条高度为 0。修法：下沉到 `components.css`。
  3. `.ring__text` 用 `color` 控制 SVG 文字无效（SVG 认 `fill`）→ 环里的百分比不显示。修法：补 `fill: currentColor`。
  4. `.g-2/.g-3/.g-4` 没有断点收敛规则 → 手机上 3/4 列被压成「一个字一行」。修法：`base.css` 里 ≤1100 降 2 列、≤700 降 1 列（`.g-4` 保留 2 列）。
  5. 缩略图画廊工具自身写死了 iframe 宽高 → 量手机时其实在截「被裁掉的平板版」。修法：宽高交给 `width/height` 属性；**校验工具也要被校验**。
  6. 知识地图在手机上 16:9 画布把节点挤成一团。修法：手机端地图转 `aspect-ratio: 3/4` + 节点缩小。
  7. **`.content` 是 grid 却只写了 `grid-template-rows`** → 隐式列是 `auto`，最小值取「子项 min-content 的最大值」，任一偏宽子项把整列撑破（`exam-preview` 在 390px 下 appbar / 内容区 / 底部操作条一起比视口宽 2px）。修法：补 `grid-template-columns: minmax(0, 1fr)`。**这类「隐式列撑破」v3 也犯过，属于必须写进模板的规则。**
  8. 分页器不换行 → 窄屏溢出 9px。修法：`.pager { flex-wrap: wrap }`。
  9. 步骤条在手机上把 4 个中文步骤挤成竖排。修法：`.steps` 横向滚动 + **只显示当前步文字**（其他步只留序号圆点）。
  10. 卡片头（标题 + 徽章 + 按钮）在手机上挤压换行难看。修法：`.card__head { flex-wrap: wrap }`。
  11. **列多的宽表在平板竖屏也放不下**（历史组卷 7 列 → 194px 横向滚动）。修法：给表格加 `.tbl--stack-narrow`，701–1100 也按「标签 + 值」卡片化，手机仍走默认卡片化。
  12. **页头放不下的筛选在手机上把标题挤扁**。统一规则：**手机端页头只留「返回 + 标题 + ≤1 个动作」，其余筛选落到内容区顶部**（`only-phone` 筛选卡）；已在班级学情、知识地图落地。
  13. **内联 `style="grid-template-columns:…"` 会压过断点媒体查询** → 窄屏双栏不塌陷（错题解析右侧 143px 被撑破）。规则：断点相关的布局一律写进 CSS，页面里不要用内联 style 覆盖栅格。
  14. `.dist__bar` / `.err-row__*` 缺 `min-width: 0` → 窄列里数值被挤出容器。
  15. **平板竖屏（701–1100）图标轨下账号块崩坏**：`--w-rail` 收到 88px 后账号块仍按「头像 + 姓名」横排，「春田花花 / 四年级」被逐字竖排，左上角整块坏掉（用户实测截图反馈）。修法：`shell.css` 里 ≤1100 让账号块改**竖排「头像 + 年级」，姓名收起**（姓名在个人中心看），导航项小字与图标圆保持不变。已按 768/900/1024/1100/1194 五档复核两个 hub 页，溢出均为 0。
- ⚠️ 注意：不要用 PowerShell 的 `Get-Content | Set-Content` 改仓库里的中文 HTML/CSS（Windows PowerShell 默认按 ANSI 读，会把 UTF-8 中文写成乱码）。本目录的所有文件请用编辑器或 `edit`/`write` 类工具改。

---

## 六、后续（可选）

设计稿本体已经覆盖**全部 38 屏**（通用 4 + 学生 22 + 教师 12，含欢迎/登录/个人中心）。接下来可选：

1. **落地实现**（推荐）：按 `DESIGN-SYSTEM.md` 第七节把令牌/组件/外壳搬进 `sanlian-uniapp`，并**删掉整体 `scale()` 与 `pageOrientation: landscape`**——这是手机可读性与"像 App"的前提。
2. 深色模式（令牌已集中）、真实图表（替换 CSS 示意）。
3. 若后续设计稿有新页面，按 `_CONTRACT` 式流程：复制 `_template.html` → 登记到 `_tools/gallery.html` 与 `index.html` → 跑 `_tools/audit.html` 三档 → 留截图。