# 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`：完整布局