376 lines
15 KiB
Markdown
376 lines
15 KiB
Markdown
# 浅蓝色 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 建议
|
||
|
||
把色彩体系映射成语义变量，组件层只用语义名，便于换肤与维护：
|
||
|
||
```css
|
||
: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 示意）：
|
||
|
||
```tsx
|
||
// 主按钮
|
||
<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` 并降低交互；用于异步操作等待反馈。
|
||
|
||
```tsx
|
||
<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`。
|
||
|
||
实现（拼接式 + 描边选中）：
|
||
|
||
```tsx
|
||
<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`
|
||
|
||
实现示意：
|
||
|
||
```tsx
|
||
// 触发框
|
||
<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`，滑块在左，右侧灰字「关」
|
||
- 切换时滑块带左右过渡动画
|
||
|
||
```tsx
|
||
<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 拼接式「实底选择按钮」的两选项特例
|
||
|
||
```tsx
|
||
<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>
|
||
```
|