初始化

2026-09-07 18:24:55 +08:00
1 parent 34474bd5fc
commit b638b541d0
@@ -0,0 +1,85 @@
+# 浅红色 UI 规范
+
+浅色主题设计规范：以白 / 浅灰作大面积背景、深色作正文、**红色（`#F5222D`）为品牌强调主色**。
+
+> 全文按主题拆分为 6 篇，章节号（§1 ~ §28）全局唯一，跨篇引用（如"沿用 §5.2.1"）按下表定位即可。
+
+## 篇目导航
+
+| 篇 | 文件 | 内容 |
+|----|------|------|
+| 一、基础样式 | [01-基础样式.md](01-基础样式.md) | §1 色彩 · §2 字体 · §3 阴影 · §4 圆角 · §6 间距 · §20 语义状态色 |
+| 二、按钮与表单 | [02-按钮与表单.md](02-按钮与表单.md) | §5 按钮 · §12 表单 · §13 输入框 · §14 选择按钮 · §15 标签输入框 · §16 上传 |
+| 三、导航 | [03-导航.md](03-导航.md) | §7 导航组件 · §8 面包屑 · §9 页头与分页 · §10 步骤条 · §11 页签与锚点 |
+| 四、数据展示 | [04-数据展示.md](04-数据展示.md) | §17 弹窗 · §18 卡片 · §19 折叠面板 · §21 进度条 · §22 表格 · §23 标签 · §24 时间轴 |
+| 五、图表 | [05-图表.md](05-图表.md) | §25 图表（通用色序 / 柱 / 折线 / 甘特 / 饼环） |
+| 六、页面与布局 | [06-页面与布局.md](06-页面与布局.md) | §26 统计与汇总卡 · §27 实体卡片 · §28 综合页面布局示例 |
+
+## 章节速查（§ → 篇）
+
+| § | 章节 | 所在篇 |
+|---|------|--------|
+| 1 | 色彩 | [一](01-基础样式.md) |
+| 2 | 字体 | [一](01-基础样式.md) |
+| 3 | 阴影 | [一](01-基础样式.md) |
+| 4 | 圆角 | [一](01-基础样式.md) |
+| 5 | 按钮 | [二](02-按钮与表单.md) |
+| 6 | 间距 | [一](01-基础样式.md) |
+| 7 | 导航组件 | [三](03-导航.md) |
+| 8 | 面包屑 | [三](03-导航.md) |
+| 9 | 页头与分页 | [三](03-导航.md) |
+| 10 | 步骤条 | [三](03-导航.md) |
+| 11 | 页签与锚点 | [三](03-导航.md) |
+| 12 | 表单 | [二](02-按钮与表单.md) |
+| 13 | 输入框 | [二](02-按钮与表单.md) |
+| 14 | 选择按钮 | [二](02-按钮与表单.md) |
+| 15 | 标签输入框 | [二](02-按钮与表单.md) |
+| 16 | 上传 | [二](02-按钮与表单.md) |
+| 17 | 弹出式窗口 | [四](04-数据展示.md) |
+| 18 | 卡片 | [四](04-数据展示.md) |
+| 19 | 折叠面板 | [四](04-数据展示.md) |
+| 20 | 语义状态色 | [一](01-基础样式.md) |
+| 21 | 进度条 | [四](04-数据展示.md) |
+| 22 | 表格 | [四](04-数据展示.md) |
+| 23 | 标签 | [四](04-数据展示.md) |
+| 24 | 时间轴 | [四](04-数据展示.md) |
+| 25 | 图表 | [五](05-图表.md) |
+| 26 | 统计与汇总卡 | [六](06-页面与布局.md) |
+| 27 | 实体卡片 | [六](06-页面与布局.md) |
+| 28 | 综合页面布局示例 | [六](06-页面与布局.md) |
+
+## 颜色速查
+
+完整色板与编号见 [§1 色彩](01-基础样式.md)。最常用的功能色：
+
+| 角色 | 色值 | 编号 |
+|------|------|------|
+| 主色 Primary | `#F5222D` | ZS-001-09 |
+| 主色 Hover | `#CF1322` | ZS-001 |
+| 主色 Active | `#A8071A` | ZS-001-11 |
+| 链接 / 信息 | `#0079FE` | ZS-002-09 |
+| 正文 | `#222222` | FS-004 |
+| 次级文字 | `#575757` | FS-004-09 |
+| 备注 / 占位 | `#A6A6A6` | FS-004-07 |
+| 禁用文字 | `#C1C1C1` | FS-004-06 |
+| 页面背景 | `#FAFAFA` | FS-004-02 |
+| 容器背景 | `#FFFFFF` | FS-004-01 |
+| 分割线 | `#E8E8E8` | FS-004-04 |
+
+**语义状态色**（成功 / 警告 / 错误 / 信息 / 待更新 / 中性，详见 [§20](01-基础样式.md)）：
+
+| 语义 | 文字 | 浅底 | 实填 |
+|------|------|------|------|
+| 成功（绿） | `#189D72` | `#EEFCF7` | `#2FD69A` |
+| 警告（橙） | `#FF9900` | `#FFF6EA` | `#FF9900` |
+| 错误（红） | `#F5222D` | `#FEEDED` | `#F5222D` |
+| 信息（蓝） | `#0079FE` | `#EAF4FF` | `#0079FE` |
+| 待更新（青） | `#45C3F3` | `#EFFAFE` | `#45C3F3` |
+| 中性（灰） | `#7F7F7F` | `#F5F5F5` | `#A6A6A6` |
+
+## 通用约定速记
+
+- **圆角**：按钮 / 输入框 / Tag `2px`；卡片 / 分栏 / Modal `4px`（§4）
+- **间距阶梯**：4 / 8 / 12 / 16（密）· 24 / 32 / 40 / 56（疏），16 是密的上限、24 是疏的下限（§6）
+- **按钮尺寸**：小 `24px` / 正常 `32px`（§5.1）
+- **字体**：中文 Noto Sans S Chinese，数字 D-DIN（§2）