三联慧学 Pad · 统一设计系统
0 · 统一外壳：状态栏 + 页头 + 左侧导航 + 内容区
本版新增原设计稿把 1194×834 画布当整屏，没有状态栏、没有统一页头：返回键有的页面用 48px 字号当图标、有的用绝对定位在 (44, 37)，触控区不足；平板的时间/电量/网络也没有落位。v4 把外壳固定成四层，所有页面共用。
| 状态栏 StatusBar | 高 24px（平板）/ 手机交给系统并由 env(safe-area-inset-*) 让位。左：时间 + 日期 + 场景标识；右：网络、信号、电量。一律由 App 自绘（工程里所有页面都是 navigationStyle: custom）。 |
| 页头 AppBar | 高 56px（手机 48px）。左：44×44 返回按钮（22px 线性 chevron）；中：页面标题或上下文控件（学生版=科目切换，教师版=模块名 + 班级）；右：最多 2 个图标动作 + 1 个文字按钮。 |
| 左侧导航 Rail | 宽 179px（平板竖屏 88px 只剩图标；手机换底部 Tab）。账号块（头像 + 姓名 + 年级，点进个人中心）→ 星球（回首页）→ 模块项（图标圆 + 小字）。选中态 = 白圆 + 主色图标 + 5 色弧光 + 蓝底标签，学生/教师同一套。 |
| 内容区 Content | 自身滚动（.content__scroll），内边距 24px、卡片间距 20px，PC 超宽屏内容限宽 1360px 居中。首页 hub 内用 [data-hub-btn] 切模块，不跳页。 |
玻璃徽章
1 · 色彩
主蓝为设计稿像素核验真值（#2BAEFD，3.21M px 命中）语义色一律取深色值（--green-d / --orange-d / --red-d）用于白底文字，保证 WCAG AA 4.5:1；状态表达统一「颜色 + 图标 + 文字」三重编码，不只靠颜色。
已完成批改中识别失败待开始
2 · 字体与字号
圆体（经典圆体简，工程内嵌）+ 字间距 1--f-display 40持续学习的第 128 天--f-h1 30页面主标题--f-h2 24卡片组标题--f-h3 20卡片标题--f-body 15正文：今日任务 1+5 模式，已完成 5 道题。--f-sm 13.5次要正文：10月14日 · 今日任务--f-xs 12辅助说明 / 占位手机端只下调 display / h1 / h2，正文字号不缩（原实现整体 scale 到 0.64 时 18px 正文只剩 11.6px，这是「手机上没法看」的根因）。
3 · 间距 / 圆角 / 阴影
8pt 网格 + 4px 半步
s1 4s2 8s3 12s4 16
s5 20s6 24s8 32s12 48
r-xs 8 · sh-sm
r-md 14
r-lg 20 · sh-md
r-xl 26 · sh-lg
sh-brand
阴影只用两档（sh-sm / sh-md）+ 两档专用（sh-lg 弹窗、sh-brand 主按钮）；禁止廉价多层黑阴影与彩虹渐变按钮。
4 · 组件与状态
默认 / hover / active / focus / disabled / loading按钮层级（实心 > 浅色 > 描边 > 文字）
所有可点元素最小 44×44（--tap）。原设计稿里 ~32px 的按钮全部抬到 44。
切换
表单
手机号格式不正确
10
数据展示
正确率86%
待重练7题
批改进度
14/24 份（60%）
70%
表格 / 列表 / 空态
| 项目 | 班级 | 份数 | 状态 |
|---|---|---|---|
| 《分数乘法》课后练习 | 四年级(9)班 | 24 | 批改中 |
| 第 4 单元检测卷 | 四年级(9)班 | 24 | 已完成 |
还没有错题
批改完成后，班级高频错题会自动汇总到这里。
5 · 加载 / 空 / 失败
每个数据区都必须给三态
加载中
正在加载班级学情…
本周还没有练习
完成任务后，正确率与知识点掌握会自动更新。
加载失败
网络异常，学情数据加载失败。
[10:02:11] 已上传 24 份试卷
[10:02:36] 第 4 份识别置信度 61%
[10:03:02] 第 3 份上传失败：网络中断
6 · 断点与手机版
平板优先| ≥ 1101px 平板横屏 / PC | 房间场景 + 玻璃面板 + 179px 完整左侧导航（图标 + 文字）；内容多列；PC 内容限宽 1360px 居中。基准 1194×834 = iPad 横屏，字号与设计稿 1:1。 |
| 701–1100px 平板竖屏 | 同一外壳，导航收成 88px 图标轨（只留图标 + 小字）；卡片降为 1–2 列；表格保留横向滚动容器。 |
| ≤ 700px 手机 | 不做 1194 画布缩放：顶部品牌渐变头 + 单列卡片 + 底部 5 项 Tab（首页 / 自主学 / 精准练 / 趣英语 / 我的）；二级页 = 状态栏（系统安全区）+ 48px 页头（返回 + 标题 + 动作）；弹窗自动变底部抽屉；表格转「标签 + 值」卡片。 |
手机版不另起一套视觉：同一套令牌与组件，只换导航形态与列数。做法 = 关掉 pageOrientation: landscape，用 uni.getWindowInfo().windowWidth 切 data-shell 与断点类（小程序端不支持媒体查询，落地时换成动态 class）。
