deerflow-code/frontend-web/docs/ui规范-浅蓝/浅蓝色ui规范.md

浅蓝色 UI 规范

本文档由设计稿截图（1.1 全局样式-色彩、1.2 全局样式-色彩附录）识别整理而成。 全部色值已与"色彩附录"编号表逐一核对，保证准确。

---

1.1 色彩体系总览

调色体系分为 主色 与 辅色 两大类。每个色相按用途分为若干阶梯：

阶梯	数量	用途
浅色	3	用于大面积底色
中亮色	6	用于标签、图表、提示等
深色	4（+基准色，共 5 个深阶）	用于小面积按钮、图标等
线性渐变色	1	用于特殊装饰性小面积底色
径向渐变色	1	用于特殊装饰性小面积底色

中性色（灰阶）略有不同：浅色用于背景 / 白色文字及分割线，中亮色用于备注文字及图标，深色用于正文，且无渐变色。

---

主色

主色 - 红（基准 #CF1322）

用途	色值
浅色	#FEFAFA · #FEF6F6 · #FEEDED
中亮色	#FDDADC · #FCB5B9 · #FA9196 · #F86C73 · #F74750 · #F5222D
深色	#CF1322 · #BC0D1E · #A8071A · #820014 · #5C0011
线性渐变色	#F5222D → #A8071A
径向渐变色	#F86C73 → #F5222D

主色 - 蓝（基准 #0062D9）

用途	色值
浅色	#F9FCFF · #F4F9FF · #EAF4FF
中亮色	#D4E9FF · #AAD2FF · #80BCFF · #55A6FE · #2B8FFE · #0079FE
深色	#0062D9 · #0056C6 · #004AB3 · #00368C · #002466
线性渐变色	#0079FE → #004AB3
径向渐变色	#55A6FE → #0079FE

---

辅色

辅色 - 橙（基准 #D97B00）

用途	色值
浅色	#FFFCF9 · #FFFAF4 · #FFF6EA
中亮色	#FFEED4 · #FFDDAA · #FFCC80 · #FFBB55 · #FFAA2B · #FF9900
深色	#D97B00 · #C66D00 · #B35F00 · #8C4600 · #663000
线性渐变色	#FF9900 → #B35F00
径向渐变色	#FFBB55 → #FF9900

辅色 - 绿（基准 #1EB07F）

用途	色值
浅色	#FAFEFD · #F6FDFB · #EEFCF7
中亮色	#DCF8EE · #BAF1DD · #97EBCD · #74E4BC · #52DDAB · #2FD69A
深色	#1EB07F · #189D72 · #118A65 · #07634B · #043D30
线性渐变色	#2FD69A → #118A65
径向渐变色	#74E4BC → #2FD69A

辅色 - 青蓝（基准 #2F9ACC）

用途	色值
浅色	#FBFDFE · #F7FCFE · #EFFAFE
中亮色	#E0F5FD · #C1EBFB · #A2E1F9 · #83D7F7 · #64CDF5 · #45C3F3
深色	#2F9ACC · #2788B9 · #1E76A6 · #115580 · #0B3959
线性渐变色	#45C3F3 → #1E76A6
径向渐变色	#83D7F7 → #45C3F3

中性色 - 灰（基准 #222222）

用途	色值
浅色（背景、白色文字及分割线）	#FFFFFF · #FAFAFA · #F5F5F5
中亮色（备注文字及图标）	#E8E8E8 · #DBDBDB · #C1C1C1 · #A6A6A6 · #7F7F7F · #575757
深色（正文）	#3D3D3D · #222222

---

1.2 色彩附录（编号对照表）

编号规则：ZS = 主色（主色调），FS = 辅色 / 中性色。-01~-03 为浅色，-04~-09 为中亮色，-10~-13 为深色，-14 为线性渐变色，-15 为径向渐变色；不带后缀的为该色相基准深色。

主色 ZS

编号	红 (ZS-001)	编号	蓝 (ZS-002)
ZS-001	#CF1322	ZS-002	#0062D9
ZS-001-01	#FEFAFA	ZS-002-01	#F9FCFF
ZS-001-02	#FEF6F6	ZS-002-02	#F4F9FF
ZS-001-03	#FEEDED	ZS-002-03	#EAF4FF
ZS-001-04	#FDDADC	ZS-002-04	#D4E9FF
ZS-001-05	#FCB5B9	ZS-002-05	#AAD2FF
ZS-001-06	#FA9196	ZS-002-06	#80BCFF
ZS-001-07	#F86C73	ZS-002-07	#55A6FE
ZS-001-08	#F74750	ZS-002-08	#2B8FFE
ZS-001-09	#F5222D	ZS-002-09	#0079FE
ZS-001-10	#BC0D1E	ZS-002-10	#0056C6
ZS-001-11	#A8071A	ZS-002-11	#004AB3
ZS-001-12	#820014	ZS-002-12	#00368C
ZS-001-13	#5C0011	ZS-002-13	#002466
ZS-001-14	#F5222D → #A8071A	ZS-002-14	#0079FE → #004AB3
ZS-001-15	#F86C73 → #F5222D	ZS-002-15	#55A6FE → #0079FE

辅色 / 中性色 FS

编号	橙 (FS-001)	绿 (FS-002)	青蓝 (FS-003)	中性灰 (FS-004)
FS-00n	#D97B00	#1EB07F	#2F9ACC	#222222
-01	#FFFCF9	#FAFEFD	#FBFDFE	#FFFFFF
-02	#FFFAF4	#F6FDFB	#F7FCFE	#FAFAFA
-03	#FFF6EA	#EEFCF7	#EFFAFE	#F5F5F5
-04	#FFEED4	#DCF8EE	#E0F5FD	#E8E8E8
-05	#FFDDAA	#BAF1DD	#C1EBFB	#DBDBDB
-06	#FFCC80	#97EBCD	#A2E1F9	#C1C1C1
-07	#FFBB55	#74E4BC	#83D7F7	#A6A6A6
-08	#FFAA2B	#52DDAB	#64CDF5	#7F7F7F
-09	#FF9900	#2FD69A	#45C3F3	#575757
-10	#C66D00	#189D72	#2788B9	#3D3D3D
-11	#B35F00	#118A65	#1E76A6	—
-12	#8C4600	#07634B	#115580	—
-13	#663000	#043D30	#0B3959	—
-14	#FF9900 → #B35F00	#2FD69A → #118A65	#45C3F3 → #1E76A6	—
-15	#FFBB55 → #FF9900	#74E4BC → #2FD69A	#83D7F7 → #45C3F3	—

注：中性灰（FS-004）无渐变阶，最深至 #222222（基准）/#3D3D3D（FS-004-10），用于正文文字。

---

组件规范

以下为各组件的视觉规范与实现方式。颜色统一引用上文色值，建议在项目中先抽取为 CSS 变量 / Tailwind token，组件只引用语义化变量。

语义化 Token 建议

把色彩体系映射成语义变量，组件层只用语义名，便于换肤与维护：

:root {
  /* 品牌 / 主色（蓝） */
  --color-primary:        #0062D9; /* 主按钮、实底选中：ZS-002 深色基准 */
  --color-primary-hover:  #0079FE; /* 悬浮态：ZS-002-09 */
  --color-primary-active: #0056C6; /* 按下态：ZS-002-10 */
  --color-primary-bg:     #EAF4FF; /* 浅底选中底色：ZS-002-03 */
  --color-primary-border: #0079FE; /* 描边选中边框 */

  /* 中性 */
  --color-text:           #3D3D3D; /* 正文：FS-004-10 */
  --color-text-secondary: #A6A6A6; /* 次要 / 占位符：FS-004-07 */
  --color-border:         #DBDBDB; /* 默认边框：FS-004-05 */
  --color-bg-disabled:    #F5F5F5; /* 失效底色：FS-004-03 */
  --color-fill-disabled:  #A6A6A6; /* 主按钮失效底色：FS-004-07 */
  --color-surface:        #FFFFFF; /* 卡片 / 控件底 */
}

项目使用 Tailwind v4 + shadcn，可在 @theme 中声明这些变量后用 bg-primary / text-primary 等使用；下文示例同时给出等价的 Tailwind 写法。

---

2.1 基础 - 按钮（Button）

按钮尺寸

规格	高度	圆角	用途
小	28px	4px	空间小的板块内部，如表格中、卡片标题等
正常	32px	4px	常用按钮（默认尺寸）

水平内边距约 12–16px，字号 14px，图标与文字间距 4–8px。

常用按钮类型

类型	视觉	用途
主按钮	实底 --color-primary，白字	一个操作区域只能有一个主按钮
主按钮·失效	实底灰 --color-fill-disabled，白字	主按钮禁用态
次要按钮	白底 + --color-primary 边框 + 蓝字	重要度低于主按钮，高于默认按钮
默认按钮	白底 + --color-border 边框 + --color-text	默认动作（取消等）
默认·失效	--color-bg-disabled 底 + 浅边框 + --color-text-secondary	次要/默认按钮禁用态
文本按钮	无边框无底，蓝字（可加下划线）	表格操作、文件下载等
图标按钮	仅图标，可选 描边/实底/浅底 × 方形/圆形	增强辨识度或节省空间

实现（Tailwind 示意）：

// 主按钮
<button className="h-8 px-4 rounded text-sm text-white bg-[#0062D9]
                   hover:bg-[#0079FE] active:bg-[#0056C6]
                   disabled:bg-[#A6A6A6] disabled:cursor-not-allowed">确定</button>

// 次要按钮（次按钮）
<button className="h-8 px-4 rounded text-sm text-[#0062D9] bg-white
                   border border-[#0062D9] hover:bg-[#EAF4FF]">点击</button>

// 默认按钮
<button className="h-8 px-4 rounded text-sm text-[#3D3D3D] bg-white
                   border border-[#DBDBDB] hover:border-[#0079FE] hover:text-[#0079FE]
                   disabled:bg-[#F5F5F5] disabled:text-[#A6A6A6] disabled:border-[#DBDBDB]">取消</button>

// 文本按钮
<button className="text-sm text-[#0062D9] hover:underline">文本按钮样式</button>

// 图标按钮（实底圆形）
<button className="size-7 grid place-items-center rounded-full text-white bg-[#0062D9]
                   hover:bg-[#0079FE]"><TrashIcon className="size-4" /></button>

图标按钮三种底 × 两种形状：

• 描边：白底 + --color-border 边框，图标用 --color-text
• 实底：--color-primary 底 + 白图标
• 浅底：--color-primary-bg（#EAF4FF）底 + 蓝图标
• 形状：方形 rounded（4px）/ 圆形 rounded-full

按钮组合

组合	说明
文字 + 下拉按钮	按钮右侧带 ⌄ 箭头；有 默认 / 主按钮 两种变体
图标 + 文字按钮	+ 正常，前置图标；有 描边 / 实底 两种变体
文本按钮 + 图标	蓝色文本链按钮：更多 » 展开 ⌄ `下一页 »
主按钮 + 默认按钮	确定(主) 取消(默认) 返回(默认) 并排，间距 8–12px

其他状态

• 悬浮状态（hover）：主按钮悬浮时底色变亮（--color-primary-hover #0079FE），用于 Banner / 登录 / 视觉冲击强的场景。
• 加载中（loading）：按钮内前置旋转图标 ⟳ 加载中，期间 disabled 并降低交互；用于异步操作等待反馈。

<button className="h-8 px-4 rounded text-sm text-white bg-[#0062D9] inline-flex items-center gap-1.5" disabled>
  <Spinner className="size-4 animate-spin" /> 加载中
</button>

---

5.9 输入 - 单选框（选择按钮 / Segmented Radio）

一组互斥选项，外观为按钮组。两种排布 × 三种选中样式。

排布方式

排布	说明
拼接式	选项首尾相连，仅最外侧两角圆角，相邻共用 1px 边框
分离式	选项之间留间距（约 8px），每个独立 4px 圆角，各自带完整边框

选中（已选）样式 × 三种

样式	已选	未选
描边式	白底 + 蓝边框 --color-primary + 蓝字	白底 + --color-border 边框 + --color-text
浅底式	--color-primary-bg(#EAF4FF) 底 + 蓝字 + 蓝边框	同上
实底式	--color-primary 实底 + 白字	同上

• 带统计：选项文字后追加计数，如 已选(230) / 未选(230)，计数用次要色 --color-text-secondary。

实现（拼接式 + 描边选中）：

<div className="inline-flex rounded overflow-hidden border border-[#DBDBDB] divide-x divide-[#DBDBDB]">
  {options.map((o) => (
    <button key={o.value}
      className={cn(
        "h-8 px-4 text-sm bg-white",
        value === o.value
          ? "text-[#0062D9] ring-1 ring-inset ring-[#0079FE] z-10" // 描边选中
          : "text-[#3D3D3D] hover:text-[#0079FE]"
      )}>
      {o.label}{o.count != null && <span className="text-[#A6A6A6]">({o.count})</span>}
    </button>
  ))}
</div>

浅底式把选中态换成 bg-[#EAF4FF] text-[#0062D9]；实底式换成 bg-[#0062D9] text-white。 分离式去掉 divide-x / overflow-hidden，外层用 gap-2，每个按钮单独 rounded border。

按钮式页签（Tab as Button）

图标 + 文字的页签型按钮：

• 激活 两种：描边（白底 + 蓝边框 + 蓝字）/ 实底（--color-primary 底 + 白字）
• 正常：白底 + --color-border 边框 + --color-text，前置图标
• 结构与拼接式选择按钮一致，区别在每项前置一个功能图标。

---

5.11 输入 - 选择器（Select / Dropdown）

单项输入选择，下拉单选。

状态

状态	触发框
占位	请选择 占位文字用 --color-text-secondary，灰边框 --color-border，右侧 ⌄
展开/聚焦	边框变 --color-primary，箭头翻转为 ⌃
已选	显示选中项文字（正文色），保持聚焦时蓝边框

下拉面板

• 白底、圆角 4px、投影（如 shadow-lg），最大高度后出现滚动条
• 选项默认 --color-text；hover / 选中 项：--color-primary-bg(#EAF4FF) 底 + --color-primary 文字
• 分组：分组标题用小号灰字 --color-text-secondary，组之间用 1px 分割线 --color-border

实现示意：

// 触发框
<button className="h-8 w-full px-3 inline-flex items-center justify-between rounded
                   border border-[#DBDBDB] bg-white text-sm
                   data-[state=open]:border-[#0062D9]">
  <span className={selected ? "text-[#3D3D3D]" : "text-[#A6A6A6]"}>{selected ?? "请选择"}</span>
  <ChevronDown className="size-4 text-[#A6A6A6] transition-transform data-[state=open]:rotate-180" />
</button>

// 下拉项
<li className={cn(
  "h-9 px-3 flex items-center text-sm cursor-pointer rounded-sm",
  active ? "bg-[#EAF4FF] text-[#0062D9]" : "text-[#3D3D3D] hover:bg-[#EAF4FF]"
)}>{label}</li>

// 分组标题
<div className="px-3 py-1.5 text-xs text-[#A6A6A6]">分组标题1</div>

推荐直接基于 Radix Select（项目已有 shadcn 封装）改这些类名落地。

---

5.14 输入 - 开关（Switch）

两种形态：

1. 滑块开关（多用于表单、表格中）

• 开：胶囊底 --color-primary，白色圆形滑块在右，左侧白字「开」
• 关：胶囊底灰 --color-text-secondary/#C1C1C1，滑块在左，右侧灰字「关」
• 切换时滑块带左右过渡动画

<button role="switch" aria-checked={on}
  className={cn(
    "relative h-6 w-12 rounded-full transition-colors text-[11px] text-white",
    on ? "bg-[#0062D9]" : "bg-[#C1C1C1]"
  )}>
  <span className={cn("absolute top-0.5 size-5 rounded-full bg-white transition-all",
                       on ? "left-[26px]" : "left-0.5")} />
  <span className={cn("absolute top-1/2 -translate-y-1/2", on ? "left-2" : "right-2 text-[#7F7F7F]")}>
    {on ? "开" : "关"}
  </span>
</button>

2. 单选框作为开关（分段式）

• 开 | 关 两段式：激活段 --color-primary 实底白字，未激活段白底灰字 + --color-border 边框
• 即 5.9 拼接式「实底选择按钮」的两选项特例

<div className="inline-flex rounded overflow-hidden border border-[#DBDBDB]">
  <button className={cn("h-7 px-4 text-sm", on  ? "bg-[#0062D9] text-white" : "bg-white text-[#3D3D3D]")}>开</button>
  <button className={cn("h-7 px-4 text-sm border-l border-[#DBDBDB]", !on ? "bg-[#0062D9] text-white" : "bg-white text-[#3D3D3D]")}>关</button>
</div>