# 量标智学双端 UI 设计规范

版本：基于 2026-11-11 本地源码的实现记录。

## 1. 来源与适用范围

本规范仅从以下两个已实现页面归纳，不以旧版文件、截图中的其他页面或未渲染的 CSS 选择器为依据：

- [教师工作台-蓝紫优化.html](教师工作台-蓝紫优化.html)：教师端首页。
- [学生学习首页-蓝紫统一版.html](学生学习首页-蓝紫统一版.html)：学生端知识学习首页。

两页均使用原生 HTML、内嵌 CSS 和少量原生 JavaScript。相同选择器在一个样式表中多次声明；下文按最终层叠结果整理。标为“共同”的是两个页面都实际采用的语言，标为“教师”或“学生”的是页面特例。未出现的组件和状态没有被推定为既定规范。

源码定位：教师端共享视觉覆盖集中在源文件第 60–176 行、页面结构在第 199–239 行；学生端共享视觉覆盖集中在第 42–176 行、页面结构在第 192–221 行。具体取值仍需按 CSS 选择器权重、声明顺序和当前视口宽度判断。

## 2. 视觉基础

### 2.1 色彩

| 用途 | 实现值 | 范围与说明 |
| --- | --- | --- |
| 主文字 | `#172b3a` | 共同的 `--ink`，正文和主要内容基色 |
| 品牌紫 | `#594cff` | 共同的 `--blue`；主要按钮、标题强调、选中线 |
| 品牌紫悬停 | `#4e43e8` | 两页主要按钮悬停态 |
| 次要文字 | `#536778` / `#607283` | 学生页 `--body` / `--muted`；教师页 `--muted: #607283` |
| 浅边框 | `#e1e8ed` | 两页共同的主要内容边线 |
| 内容面 | `#fff` | 顶部以下的主工作区及基础卡片 |
| 页面底色 | `#f8fafc` | 背景底色，其上叠加蓝青色径向与纵向渐变 |
| 顶栏底色 | `linear-gradient(100deg,#bdeafa 0%,#c8e9fa 31%,#bfdcf9 69%,#c5e3fa 100%)` | 两页一致 |
| 顶栏下边线 | `#bdddec` | 两页一致 |
| 紫色浅面 | `#f0eeff` | 选中导航、教师紫色指标、学生紫色概览项等 |
| 绿色浅面 | `#e8f7f2` | 教师绿色指标、学生绿色概览项 |
| 蓝色浅面 | `#e9f4fc` | 教师蓝色指标、学生蓝色概览项 |
| 暖色浅面 | `#fcf5e7` | 教师橙色指标、学生琥珀色概览项 |
| 珊瑚浅面 | `#fceeee` | 学生珊瑚色概览项、教师紧急状态 |

页面背景在两页使用相同的四层 `background-image`，`background-size: 100% 1120px`、`no-repeat`：上方是蓝青色过渡，下方回到 `#f8fafc`。这是页面背景处理，不是卡片或按钮通用渐变。教师端的告警指标使用 `#f5f7f8`，不使用红色大面积底。

### 2.2 字体与层级

- 字体栈：`Inter, "PingFang SC", "Microsoft YaHei", sans-serif`；两页最终 `body` 为 `16px / 1.55`。
- 品牌名：桌面 `19px`、粗体；`<=700px` 为 `17px`。
- 一级入口标题：教师问候语 `28px / 1.3`，学生学习入口标题 `32px / 1.3`。学生页在 `<=700px` 为 `24px`；教师问候语在 `<=700px` 为 `23px`，`901–1250px` 另降为 `22px`。
- 内容区标题：两页桌面均为 `23px / 1.35`，`<=700px` 为 `20px`；前置紫色竖条作识别标记。
- 指标数字：教师 `31px / 1.15`，学生 `31px / 1.2`；两页移动端分别为 `25px`、`26px`。
- 卡片标题：教师业务入口 `18px / 1.35`；学生任务标题 `18px / 1.4`。两页移动端均为 `16px`。
- 内容说明通常为 `14px`，辅助说明、时间、状态或统计备注通常为 `12px`。具体小字号属于当前密度，不代表所有新页面都必须压到 `12px`。
- 最终层叠后的标题与统计数字不采用负字距；其他局部旧声明可能仍有字距值，新页面应优先参考上述实际可见层级。

### 2.3 圆角、边框与阴影

| 对象 | 实现值 |
| --- | --- |
| 教师/学生主工作区 | 白色、`1px solid #e1e8ed`、`22px` 圆角、极轻阴影 `0 3px 14px rgba(31,65,88,.035)` |
| 教师指标、学生概览项 | `13px` 圆角；浅色填充、无边框和卡片阴影 |
| 教师业务入口 | `13px` 圆角、`1px solid #e1e8ed`、白底、无静态阴影 |
| 学生任务卡 | `14px` 圆角、`1px solid #e9e6fa`、`#f2f0ff` 底 |
| 主按钮 | `8px` 圆角、纯色 `#594cff`、无静态阴影 |
| 教师筛选框 / 次按钮 | `10px` / `8px` 圆角，白底、浅蓝灰边框 |
| 分段控件 | 外框 `10px`，选中项 `7px` |

主工作区是一个承载多个内容段落的容器；独立指标和业务入口才使用卡片形式。内容段之间用 `#edf0f2` 细线及间距区分。实际页面没有把每一段再套进一张悬浮卡。

### 2.4 间距与密度

| 对象 | 桌面实现 | 窄屏实现 |
| --- | --- | --- |
| 主工作区内边距 | 教师 `28px 32px 34px`；学生 `29px 32px 36px` | `<=1100px` 均为 `24px`；`<=700px` 教师 `18px 16px 23px`、学生 `19px 16px 23px` |
| 指标/业务网格间距 | 教师概况与入口均 `12px`；学生概览 `12px` | 教师 `<=700px` 的概况网格在较早规则中为 `10px`，最终 `.metrics` 后续全局 `gap:12px` 覆盖；学生概览仍为 `12px` |
| 内容段分隔 | 教师业务矩阵标题前 `29px` 外间距、`27px` 顶内边距；学生相邻段间 `31px` 外间距、`29px` 顶内边距 | 教师 `<=700px` 为 `24px / 22px`；学生为 `24px / 22px` |
| 业务/任务卡内边距 | 教师业务卡 `16px`；学生任务卡 `19px 22px` | 教师 `<=700px` 为 `14px`；学生为 `16px` |

这些是源码中的组件间距，并非一个已建立的全局 `4/8px` spacing token 阶梯；新页面可以复用相近节奏，但不要声称已有完整间距体系。

## 3. 页面骨架

### 3.1 顶栏与内容宽度（共同）

- 顶栏固定在视口顶部：`position: sticky; top: 0; z-index: 40`；页面 `scroll-padding-top: 80px`。
- 顶栏发生滚动时通过 `.is-scrolled` 增加浅边线与 `0 3px 14px rgba(31,65,88,.06)` 阴影，白色覆盖层渐显。
- 校徽图片均为 `46×46px` 圆形裁切。教师端左侧是“教师端 / 教师工作台”路径；学生端是带图标的主导航及当前项。
- 右侧账号均显示头像、姓名及“账号（多角色）”副信息。学生页头像是文字占位；教师页使用图片。这是资源差异，不应强制统一成其中一种。
- 主内容最大宽度均为 `1580px`，水平居中。桌面水平内边距 `32px`；`<=1100px` 为 `23px`；`<=700px` 为 `14px`。

### 3.2 教师端首页

1. 无卡片边框的欢迎/筛选区：头像、问候与教师标签；学年、学期、课程筛选；主次操作并排。
2. 同一白色 `.teacher-panel` 中先展示五项教学概况，再展示六个业务入口，最后是待处理事项。
3. 概况指标采用五种浅色区分；业务入口为白底统一卡。正文、底部摘要和右下箭头构成固定层级；“资源精选”只出现在对应入口。
4. 待处理事项与上节之间用顶部细线分隔；分类使用分段切换，条目使用浅灰背景、状态标签和右侧操作。

教师概况块最终 `min-height:134px`；业务入口最终 `min-height:210px`。业务卡在 `<=1450px` 最小高度为 `220px`，`<=700px` 仍为 `220px`，`<=430px` 为 `178px`。概况块在 `<=700px` 最小高度为 `135px`，`<=430px` 为 `130px`。这些最小值允许长内容把卡片撑高。

### 3.3 学生端首页

1. 页面顶部是无边框学习入口，居中标题、副标题、搜索框和推荐主题；搜索区不是主工作区内部卡片。
2. 下方白色 `.content-panel` 内依次为“学习任务”和“学习概览”，两节间以细线分隔。
3. 学习任务使用“教师作业 / 自主学习”分段控件；任务卡含类型、期限、标题、说明、状态与数量标签、通过条件、时间和操作。
4. 学习概览为五项浅色统计，按紫、绿、蓝、琥珀、珊瑚依次区分。

学生任务网格采用 `minmax(0,500px)` 列宽；实际宽度受父容器限制。概览项最终 `min-height:126px`，`<=700px` 为 `122px`。任务卡依内容增长，不设置固定高度。

## 4. 可复用组件

### 4.1 标题、文字链接与图标

- 内容区标题由文字和左侧 `4px × 20px` 紫色竖条组成；说明文字置于标题下方并左缩进 `15px`（学生页）。教师端标题也使用紫色竖条，来源选择器宽度为 `6px`，不应误写成两页完全相同。
- 教师页面的提示链接、学生“查看详情”使用紫色文本加右箭头，属于次级导航/命令，不使用实心主按钮。
- 图标来自页面内 SVG `symbol`，轮廓描边、`currentColor`、圆端线条。通用 `.icon` 在两页有不同默认尺寸（教师 `22px`、学生 `20px`）；在局部按需要缩至 `17px`、`18px` 或按钮内尺寸。

### 4.2 按钮和选择器

- 主操作：紫底 `#594cff`、白字、`8px` 圆角；悬停为 `#4e43e8`，没有位移和新增阴影。
- 教师欢迎区主/次操作的最终高度为 `42px`；次操作白底、`#cbdde7` 边框、深色文字，悬停 `#f7fafc`。
- 教师筛选容器为 `42px` 高、白底、`1px solid #cbdde7`、`10px` 圆角；内部原生 `select` 去默认外观，右侧显示下拉箭头。容器 `:focus-within` 有 `3px` 浅紫色外轮廓。
- 教师待办条目的描边操作按钮是白底、`#d9e1e8` 边框、`8px` 圆角、紫色文字。
- 学生搜索主按钮在桌面最小高度 `48px`、`14px` 字号；`<=700px` 为最小高度 `41px`、`12px` 字号。学生任务卡按钮是更小的局部操作，不应用作全页主按钮尺寸。

### 4.3 分段切换、状态和空状态

- 分段切换外层为 `#f5f6f8`、`1px solid #e4e8ec`、`10px` 圆角、`4px` 内边距；当前项白底、紫字、`7px` 圆角、轻微阴影。教师页用 `.tab.active`，学生页用 `[aria-selected="true"]`。
- 教师待办状态：紧急 `#fceeee` / `#b34147`，提醒 `#fcf5e7` / `#a76b22`，研讨 `#f0eeff` / `#5548d9`。
- 学生任务状态：未结束标签使用 `#e9f7f1`、`#d5eade` 边框、`#23765b` 文字；其他元信息标签为白底、浅边框。
- 学生自主学习无任务时显示独立的浅灰虚线边框空状态块；教师待办分类无项时显示浅灰空状态区。空状态的具体文案和布局属于各自页面实现。

### 4.4 学生学习搜索

- 搜索区域最大宽度 `760px`，居中；桌面最小高度 `64px`，`12px` 圆角、`1px solid #bdcfe5`，白底并有轻阴影。
- 搜索区域 `:focus-within` 使用 `#594cff` 边线及 `4px rgba(89,76,255,.13)` 焦点环；输入框本身无边框，`15px` 字号。
- 推荐探索与搜索框同宽，标题单独占一行，前有紫色短竖条；主题项为白色半透明底、浅边框、`7px` 圆角、箭头图标。点击主题后填入输入框并聚焦，不会直接提交。
- 空输入提交显示错误文字、设置 `aria-invalid="true"` 并聚焦输入框；非空提交只显示本页 toast。源码未实现后端学习路径生成。

## 5. 布局与响应式

| 视口条件 | 教师工作台 | 学生学习首页 |
| --- | --- | --- |
| 桌面 | 概况 `5` 列、业务入口 `6` 列；欢迎区三个功能组并排 | 学习概览 `5` 列；任务列表当前上限 `500px` 宽 |
| `<=1100px` | 概况和业务入口均 `3` 列；主面板内边距 `24px` | 概览 `3` 列；主面板内边距 `24px` |
| `<=900px` | 欢迎区改为换行布局，筛选组可水平滚动 | 无此专用断点 |
| `<=700px` | 概况与业务入口 `2` 列；主面板 `18px 16px 23px`；顶部账号只保留头像 | 概览 `2` 列；主面板 `19px 16px 23px`；搜索框最小高度 `55px`，推荐项换行 |
| `<=430px` | 业务入口改为 `1` 列；概况仍为 `2` 列 | 未设置 `430px` 专用布局 |
| `<=365px` / `<=380px` | `<=365px` 的早期一列概况声明被后续 `<=700px` 两列规则覆盖，最终仍为 `2` 列 | `<=380px` 时搜索图标与副标题装饰线隐藏 |

这张表记录源码中的断点与列数。`min-height` 和内容多少共同决定卡片最终高度，不能把某个截图高度当成绝对组件高度。

## 6. 交互与可访问性

- 两页的键盘焦点均有可见的紫蓝色外轮廓；学生页 `button`、`input`、`a`，教师页 `button`、`select`、业务入口链接均有 `:focus-visible` 处理。
- 主要导航、分类控件、表单输入均有名称或对应标签。学生任务切换使用 `role="tablist"`、`role="tab"`、`aria-selected` 和受控面板；教师待办切换使用 `role="tablist"`、`aria-selected`。
- 两页滚动后的顶栏状态由 JS 依据 `scrollY > 12` 切换；两页都对 `prefers-reduced-motion: reduce` 禁用平滑滚动和过渡。
- 两页 toast 使用 `role="status"`、`aria-live="polite"`，用于本页操作反馈。教师任务创建使用模态弹窗，可通过取消、点击遮罩或 Escape 关闭。

## 7. 新页面落地约束

1. 先复用第 2 节的共同色彩、字体和顶栏/主工作区层级；再决定新页面属于教师端还是学生端，不把某一页的欢迎区或搜索入口机械复制到所有页面。
2. 新内容优先放在白色主工作区内，用标题、细分隔线和间距组织；指标与重复业务项才使用浅色统计块或白色条目卡。
3. 主按钮、次按钮、筛选、分段切换、状态标签分别沿用上述已实现的外观和状态。新增组件（例如数据表、抽屉）需要单独定义，不能声称在这两页已有规范。
4. 开发时核对最终 CSS 层叠和响应式结果。两个源文件保留了多轮覆盖声明；不可仅复制其前段样式或把未出现在 DOM 中的旧选择器当成现行组件。

## 8. 未确立的规范

这两个页面没有提供完整的数据表、分页、图表、加载骨架、通知中心、深色模式或复杂表单错误态。因此本文件不规定这些组件的唯一尺寸、颜色与交互。教师源码中还保留 `.tile-icon`、`.metric-icon`、`.spark` 等历史样式，但当前业务入口和指标的可见 DOM 没有采用图标，指标曲线也被 `display:none` 隐藏；它们不属于本规范的现行展示规则。

本文件完成了源码与最终 CSS 覆盖顺序核对；未将浏览器截图或计算样式检查记为已完成。若后续页面的运行环境叠加了外部 CSS、浏览器缩放或不同字体，则需重新核对渲染结果。