yueqian-ai
212 lines
5.6 KiB
Markdown
212 lines
5.6 KiB
Markdown
# UI 设计规范 — Ant Design 阿里云风格
|
|
|
|
> 本项目的报告页面、索引页面均遵循此规范。
|
|
> 设计灵感来源于 Ant Design v5 + 阿里云控制台主题。
|
|
|
|
---
|
|
|
|
## 1. 配色方案
|
|
|
|
### 1.1 品牌色
|
|
|
|
| 用途 | Token | 值 | 说明 |
|
|
|------|-------|------|------|
|
|
| 品牌主色 | `--color-primary` | `#1677FF` | Ant Design v5 默认品牌蓝 |
|
|
| 悬停态 | `--color-primary-hover` | `#4096FF` | 主色上浮一级 |
|
|
| 激活态 | `--color-primary-active` | `#0958D9` | 主色下压一级 |
|
|
| 浅色背景 | `--color-primary-bg` | `#E6F4FF` | 品牌蓝 6% 不透明度 |
|
|
|
|
### 1.2 功能色
|
|
|
|
| 用途 | Token | 值 |
|
|
|------|-------|------|
|
|
| 成功 | `--color-success` | `#52C41A` |
|
|
| 警告 | `--color-warning` | `#FAAD14` |
|
|
| 错误 | `--color-error` | `#FF4D4F` |
|
|
| 信息 | `--color-info` | `#1677FF` |
|
|
|
|
### 1.3 中性色（亮色主题 / 报告页用暗色主题变体）
|
|
|
|
| 用途 | Token | 亮色值 | 暗色值 |
|
|
|------|-------|--------|--------|
|
|
| 页面背景 | `--bg` | `#F5F5F5` | `#0B0F1A` |
|
|
| 容器背景 | `--bg-container` | `#FFFFFF` | `#111827` |
|
|
| 二级背景 | `--bg-elevated` | `#FAFAFA` | `#1A2235` |
|
|
| 边框 | `--border` | `#D9D9D9` | `#1E2A3A` |
|
|
| 边框浅 | `--border-light` | `#F0F0F0` | `#151D2E` |
|
|
| 主文字 | `--text-primary` | `#141414` | `#E8ECF1` |
|
|
| 次要文字 | `--text-secondary` | `#595959` | `#8892A4` |
|
|
| 辅助文字 | `--text-tertiary` | `#8C8C8C` | `#5A6478` |
|
|
|
|
### 1.4 渐变色
|
|
|
|
| 用途 | 值 |
|
|
|------|------|
|
|
| 标题渐变 | `linear-gradient(135deg, #1677FF 0%, #722ED1 100%)` |
|
|
| 成功渐变 | `linear-gradient(135deg, #52C41A 0%, #1677FF 100%)` |
|
|
|
|
---
|
|
|
|
## 2. 字体规范
|
|
|
|
基于 Ant Design 动态秩序原则，基准字号 **14px**，行高 **22px**。
|
|
|
|
| 级别 | 字号 | 行高 | 字重 | 场景 |
|
|
|------|------|------|------|------|
|
|
| H1 页面标题 | 30px | 38px | 700 | 报告页眉标题 |
|
|
| H2 区块标题 | 24px | 32px | 600 | 报告 section 标题 |
|
|
| H3 小节标题 | 20px | 28px | 600 | 子章节标题 |
|
|
| H4 小标题 | 16px | 24px | 600 | 卡片内标题 |
|
|
| Body 正文 | 14px | 22px | 400 | 正文内容 |
|
|
| Caption 辅助 | 12px | 20px | 400 | 标签、注释、日期 |
|
|
|
|
### 字体族
|
|
|
|
```css
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
|
'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
```
|
|
|
|
代码字体：
|
|
|
|
```css
|
|
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
|
|
```
|
|
|
|
---
|
|
|
|
## 3. 圆角规范
|
|
|
|
Ant Design v5 四级圆角体系：
|
|
|
|
| Token | 值 | 使用场景 |
|
|
|-------|------|---------|
|
|
| `radius-xs` | 2px | Tag、Badge |
|
|
| `radius-sm` | 6px | Input、Button、小卡片 |
|
|
| `radius-md` | 8px | Card、Panel、大卡片 |
|
|
| `radius-lg` | 12px | Modal、弹窗、大容器 |
|
|
|
|
---
|
|
|
|
## 4. 间距规范
|
|
|
|
基于 **8px** 基准单位：
|
|
|
|
| Token | 值 | 使用场景 |
|
|
|-------|------|---------|
|
|
| `space-xs` | 4px | 极紧凑间距 |
|
|
| `space-sm` | 8px | 小间距 |
|
|
| `space-md` | 12px | 中等间距 |
|
|
| `space-lg` | 16px | 标准间距 |
|
|
| `space-xl` | 24px | 大间距 |
|
|
| `space-2xl` | 32px | 区块间距 |
|
|
| `space-3xl` | 48px | 大区块间距 |
|
|
|
|
---
|
|
|
|
## 5. 布局规范
|
|
|
|
| 元素 | 值 | 说明 |
|
|
|------|------|------|
|
|
| 顶栏高度 | `64px` | Ant Design 标准顶栏 |
|
|
| 侧栏宽度 | `260px` | 目录导航栏 |
|
|
| 内容区最大宽度 | `1200px` | 居中显示 |
|
|
| 内容区内边距 | `32px 40px` | 桌面端 |
|
|
| 移动端内边距 | `16px` | ≤768px |
|
|
|
|
---
|
|
|
|
## 6. 阴影规范
|
|
|
|
| Token | 值 | 使用场景 |
|
|
|-------|------|---------|
|
|
| `shadow-sm` | `0 1px 2px rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02)` | 小卡片 |
|
|
| `shadow-md` | `0 2px 4px rgba(0,0,0,0.04), 0 4px 12px -2px rgba(0,0,0,0.04)` | 卡片悬停 |
|
|
| `shadow-lg` | `0 4px 8px rgba(0,0,0,0.06), 0 8px 24px -4px rgba(0,0,0,0.08)` | 弹窗、下拉 |
|
|
|
|
暗色主题变体将 rgba 的 alpha 值减半。
|
|
|
|
---
|
|
|
|
## 7. 组件规范
|
|
|
|
### 7.1 卡片 Card
|
|
|
|
- 背景：`--bg-container`
|
|
- 边框：`1px solid --border`
|
|
- 圆角：`8px`
|
|
- 内边距：`24px`
|
|
- 悬停：边框色变为 `--color-primary`，添加 `shadow-md`
|
|
- 过渡：`all 0.2s ease`
|
|
|
|
### 7.2 标签 Badge
|
|
|
|
- 内边距：`2px 10px`
|
|
- 圆角：`12px`（胶囊形）
|
|
- 字号：`12px`
|
|
- 字重：`600`
|
|
- 背景：对应功能色的 10% 不透明度
|
|
- 边框：`1px solid` 对应功能色的 25% 不透明度
|
|
|
|
### 7.3 表格 Table
|
|
|
|
- 表头背景：`--bg-elevated`
|
|
- 表头字重：`600`
|
|
- 单元格背景：`--bg-container`
|
|
- 单元格内边距：`10px 14px`
|
|
- 边框：`1px solid --border`
|
|
- 表头 sticky top: 0
|
|
- 行悬停：背景色变为 `--color-primary-bg`
|
|
|
|
### 7.4 代码 Code
|
|
|
|
- 背景：`--bg-elevated`
|
|
- 内边距：`2px 8px`
|
|
- 圆角：`4px`
|
|
- 字号：`13px`
|
|
- 字体：monospace
|
|
- 颜色：`--color-success`（暗色主题）/ `--color-primary`（亮色主题）
|
|
|
|
### 7.5 代码块 CodeBlock
|
|
|
|
- 背景：`--bg-elevated`
|
|
- 边框：`1px solid --border`
|
|
- 圆角：`8px`
|
|
- 内边距：`16px`
|
|
- 行高：`1.7`
|
|
|
|
---
|
|
|
|
## 8. 主题
|
|
|
|
全部页面（索引页 + 报告页）统一使用**亮色主题**。
|
|
|
|
主题切换通过 CSS 自定义属性实现，所有颜色 Token 同时定义亮色和暗色两套值。
|
|
|
|
---
|
|
|
|
## 9. 动画与过渡
|
|
|
|
| 元素 | 过渡 |
|
|
|------|------|
|
|
| 卡片悬停 | `all 0.2s ease` |
|
|
| 链接颜色 | `color 0.15s ease` |
|
|
| 侧栏导航激活态 | `all 0.15s ease` |
|
|
| 滚动指示器 | `all 0.15s ease` |
|
|
|
|
---
|
|
|
|
## 10. 响应式断点
|
|
|
|
| 断点 | 值 | 说明 |
|
|
|------|------|------|
|
|
| sm | 576px | 手机横屏 |
|
|
| md | 768px | 平板竖屏 |
|
|
| lg | 992px | 平板横屏 |
|
|
| xl | 1200px | 桌面 |
|
|
|
|
- `≤768px`：隐藏侧栏，全宽内容
|
|
- `≤992px`：缩小侧栏至 220px，减小内边距
|
|
- `>992px`：完整布局
|