deerflow-code/frontend-web/docs/ui规范-深蓝/README.md

深蓝色 UI 规范（拆分版）

面向开发的深蓝主题设计规范。原单文件 ../ui修改-深蓝.md（约 5200 行）已按模块拆分到本目录，便于按需查阅、减少 diff 冲突，也方便配合 AI 只加载相关分册。

颜色唯一来源：所有色值以 §1 色彩（见 00-基础-色彩字体间距.md）为准，可执行变量见 tokens.css。业务代码 import tokens.css 并用 var(--token)，不要硬编码 HEX。

分册

文件	章节	内容
00-基础-色彩字体间距.md	§1–§7	色彩 / 字体 / 阴影 / 圆角 / 按钮 / 分割线 / 间距
01-导航.md	§8–§13	导航组件 / 锚点页签 / 步骤条 / 面包屑 / 页头 / 分页
02-表单.md	§14–§21	输入框 / 选择器 / 单复选 / 日期 / 穿梭框 / 树选择 / 上传 / 弹窗
03-数据展示.md	§22–§34	卡片 / 折叠 / 描述列表 / 列表 / 时间轴 / 进度条 / 表格 / 标签 / 树 / 对话框 / 提示 / 气泡确认
04-图表.md	§35–§41	图表通用 / 柱状 / 折线 / 甘特 / 环形 / 关系散点 / 图表色值
05-页面范例.md	§42–§44	表单弹窗 / 卡片列表页 / 数据概览仪表盘
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。