83 lines
3.9 KiB
Markdown
83 lines
3.9 KiB
Markdown
# 深蓝色 UI 规范（拆分版）
|
||
|
||
面向开发的深蓝主题设计规范。原单文件 `../ui修改-深蓝.md`（约 5200 行）已按模块拆分到本目录，便于按需查阅、减少 diff 冲突，也方便配合 AI 只加载相关分册。
|
||
|
||
> **颜色唯一来源**：所有色值以 **§1 色彩**（见 [`00-基础-色彩字体间距.md`](./00-基础-色彩字体间距.md)）为准，可执行变量见 [`tokens.css`](./tokens.css)。业务代码 **import `tokens.css` 并用 `var(--token)`**，不要硬编码 HEX。
|
||
|
||
## 分册
|
||
|
||
| 文件 | 章节 | 内容 |
|
||
|------|------|------|
|
||
| [`00-基础-色彩字体间距.md`](./00-基础-色彩字体间距.md) | §1–§7 | 色彩 / 字体 / 阴影 / 圆角 / 按钮 / 分割线 / 间距 |
|
||
| [`01-导航.md`](./01-导航.md) | §8–§13 | 导航组件 / 锚点页签 / 步骤条 / 面包屑 / 页头 / 分页 |
|
||
| [`02-表单.md`](./02-表单.md) | §14–§21 | 输入框 / 选择器 / 单复选 / 日期 / 穿梭框 / 树选择 / 上传 / 弹窗 |
|
||
| [`03-数据展示.md`](./03-数据展示.md) | §22–§34 | 卡片 / 折叠 / 描述列表 / 列表 / 时间轴 / 进度条 / 表格 / 标签 / 树 / 对话框 / 提示 / 气泡确认 |
|
||
| [`04-图表.md`](./04-图表.md) | §35–§41 | 图表通用 / 柱状 / 折线 / 甘特 / 环形 / 关系散点 / 图表色值 |
|
||
| [`05-页面范例.md`](./05-页面范例.md) | §42–§44 | 表单弹窗 / 卡片列表页 / 数据概览仪表盘 |
|
||
| [`tokens.css`](./tokens.css) | — | 全量 CSS 变量（颜色 / 间距 / 圆角 / 阴影 / 字体），可直接 import |
|
||
|
||
## § 索引（编号 → 所在文件）
|
||
|
||
章节编号 `§N` 全局唯一、跨文件不变；文中 `§N` / `§N.x` 引用按下表定位。
|
||
|
||
| § | 标题 | 文件 |
|
||
|---|------|------|
|
||
| §1 | 色彩 | 00 |
|
||
| §2 | 字体 | 00 |
|
||
| §3 | 阴影 | 00 |
|
||
| §4 | 圆角 | 00 |
|
||
| §5 | 按钮 | 00 |
|
||
| §6 | 分割线 | 00 |
|
||
| §7 | 间距 | 00 |
|
||
| §8 | 导航组件 | 01 |
|
||
| §9 | 锚点与页签 | 01 |
|
||
| §10 | 步骤条 | 01 |
|
||
| §11 | 面包屑 | 01 |
|
||
| §12 | 页头 | 01 |
|
||
| §13 | 分页 | 01 |
|
||
| §14 | 输入框（搜索框） | 02 |
|
||
| §15 | 选择器 | 02 |
|
||
| §16 | 单选与多选 | 02 |
|
||
| §17 | 日期选择器 | 02 |
|
||
| §18 | 穿梭框 | 02 |
|
||
| §19 | 树选择 | 02 |
|
||
| §20 | 上传 | 02 |
|
||
| §21 | 弹出式窗口（Modal） | 02 |
|
||
| §22 | 卡片 | 03 |
|
||
| §23 | 折叠面板 | 03 |
|
||
| §24 | 描述列表 | 03 |
|
||
| §25 | 列表 | 03 |
|
||
| §26 | 时间轴（节点型） | 03 |
|
||
| §27 | 进度条 | 03 |
|
||
| §28 | 表格 | 03 |
|
||
| §29 | 标签 | 03 |
|
||
| §30 | 树形控件 | 03 |
|
||
| §31 | 时间轴（长文本） | 03 |
|
||
| §32 | 对话框（确认框） | 03 |
|
||
| §33 | 全局提示 | 03 |
|
||
| §34 | 气泡确认 | 03 |
|
||
| §35 | 图表通用规范 | 04 |
|
||
| §36 | 柱状图 | 04 |
|
||
| §37 | 折线图 | 04 |
|
||
| §38 | 甘特图 | 04 |
|
||
| §39 | 环形图 | 04 |
|
||
| §40 | 关系图 / 散点图 | 04 |
|
||
| §41 | 图表色值 | 04 |
|
||
| §42 | 表单弹窗范例 | 05 |
|
||
| §43 | 卡片列表页 | 05 |
|
||
| §44 | 数据概览仪表盘 | 05 |
|
||
|
||
## 约定
|
||
|
||
- **颜色**：以 §1 为准，代码用 `tokens.css` 的 `var(--token)`。功能语义色（成功/警告/错误/信息/处理中）见 §1.1.9 / `--func-*`。
|
||
- **间距**：仅用 §7 的 8px 阶梯（`--spacing-1..8`），禁用 5px / 13px 等非阶梯值。
|
||
- **圆角**：按钮/输入/标签 `2px`，卡片/分栏/弹窗 `4px`（`--radius-*`）。
|
||
- **跨节引用**：保留 `§N` 编号，用上方「§ 索引」定位文件。
|
||
- **名称易混点**：§26 时间轴(节点型) ↔ §31 时间轴(长文本)；§21 弹出式窗口(Modal) ↔ §32 对话框(确认框)。
|
||
- **图表两套色板**：§1.1.8（高彩度，强调单值）与 §41（淡色系，多分类并列）并存，优先级见 §41.3。
|
||
|
||
## 维护
|
||
|
||
- 改色 / 改间距 → 先改 **`tokens.css` + §1/§7**，组件分册回落引用，不在分册里另立硬编码。
|
||
- 新增整页范例 → 进 `05-页面范例.md`，沿用既有组件 § 与 `tokens.css`。
|