buffer_platform/data/期货智析_UI设计规范_v2_Dark.md

# 期货智析 — UI 设计规范 v2.0 (Dark Terminal)

> **方案 A：专业交易终端风格**
> 基于深色模式重新设计，参考 Bloomberg Terminal、TradingView Pro 等专业交易工具。
> 核心目标：减少视觉疲劳、突出数据本身、增强专业感。

---

## 1. 设计原则

| 原则 | 说明 |
|------|------|
| **深色优先** | 全局深色背景，降低长时间盯盘的视觉疲劳 |
| **数据高亮** | 关键价格、涨跌幅使用高对比色，在深色背景上更醒目 |
| **硬朗专业** | 减小圆角（6px），减少柔和阴影，使用边框和分隔线划分区域 |
| **蓝色品牌** | 品牌色从紫色改为蓝色，更符合金融/科技专业工具的调性 |
| **信息分层** | 利用背景色阶（`#0D1117` → `#161B22` → `#21262D`）构建清晰的层级 |

---

## 2. 色彩系统

### 2.1 背景色阶（核心）

| 名称 | HEX | 用途 |
|------|-----|------|
| Page BG | `#0D1117` | 页面最底层背景 |
| Card BG | `#161B22` | 卡片、面板背景 |
| Hover BG | `#21262D` | 卡片 Hover 态、次级区块 |
| Input BG | `#010409` | 输入框、深色嵌套区域 |
| Border | `#30363D` | 卡片边框、分割线 |
| Border-Light | `#484F58` | 次要边框、表格线 |

### 2.2 文字色阶

| 名称 | HEX | 用途 |
|------|-----|------|
| Text Primary | `#C9D1D9` | 主标题、重要数值 |
| Text Secondary | `#8B949E` | 副标题、标签、辅助说明 |
| Text Tertiary | `#6E7681` | 禁用态、占位符、时间戳 |
| Text Inverse | `#FFFFFF` | 深色按钮上的文字 |

### 2.3 功能色（Dark Mode 适配）

> 相比浅色模式，深色模式下的功能色需要提高亮度以保证对比度。

| 名称 | HEX | 用途 |
|------|-----|------|
| 上涨 | `#F85149` | 价格上涨、做多信号 |
| 上涨-淡 | `rgba(248, 81, 73, 0.15)` | 上涨背景遮罩 |
| 下跌 | `#3FB950` | 价格下跌、做空信号 |
| 下跌-淡 | `rgba(63, 185, 80, 0.15)` | 下跌背景遮罩 |
| 观望/中性 | `#D29922` | 观望信号、震荡状态 |
| 观望-淡 | `rgba(210, 153, 34, 0.15)` | 观望背景遮罩 |

### 2.4 品牌色（蓝色系）

| 名称 | HEX | 用途 |
|------|-----|------|
| Brand Primary | `#58A6FF` | 导航高亮、主按钮、选中态、链接 |
| Brand Secondary | `#1F6FEB` | 按钮 Hover、强调 |
| Brand Pale | `rgba(88, 166, 255, 0.15)` | 选中背景、轻量强调 |
| Brand Border | `#58A6FF` | 选中边框 |

### 2.5 AI / 智能色系

> 保持紫色系以区分 AI 内容，但在深色模式下调整饱和度。

| 名称 | HEX | 用途 |
|------|-----|------|
| AI Primary | `#A371F7` | AI 模块标题、智能按钮 |
| AI BG | `rgba(163, 113, 247, 0.1)` | AI 分析区域背景 |
| AI Border | `#A371F7` | AI 模块边框 |

### 2.6 色调样例板

```
┌──────────────────────────────────────────────────────────────┐
│  背景色阶（深 → 浅）                                          │
│  ██████ #0D1117   ██████ #161B22   ██████ #21262D           │
│  ██████ #30363D   ██████ #484F58                              │
├──────────────────────────────────────────────────────────────┤
│  文字色阶（亮 → 暗）                                          │
│  ██████ #C9D1D9   ██████ #8B949E   ██████ #6E7681           │
│  ██████ #FFFFFF                                                │
├──────────────────────────────────────────────────────────────┤
│  功能色（高亮）                                                │
│  ██████ #F85149   ██████ #3FB950   ██████ #D29922           │
──────────────────────────────────────────────────────────────┤
│  品牌色（蓝） & AI色（紫）                                    │
│  ██████ #58A6FF   ██████ #1F6FEB   ██████ #A371F7           │
└──────────────────────────────────────────────────────────────┘
```

### 2.7 CSS 变量定义

```css
:root {
  /* 背景 */
  --bg-page: #0D1117;
  --bg-card: #161B22;
  --bg-hover: #21262D;
  --bg-input: #010409;
  --border-default: #30363D;
  --border-light: #484F58;

  /* 文字 */
  --text-primary: #C9D1D9;
  --text-secondary: #8B949E;
  --text-tertiary: #6E7681;
  --text-inverse: #FFFFFF;

  /* 功能色 */
  --color-up: #F85149;
  --color-up-bg: rgba(248, 81, 73, 0.15);
  --color-down: #3FB950;
  --color-down-bg: rgba(63, 185, 80, 0.15);
  --color-neutral: #D29922;
  --color-neutral-bg: rgba(210, 153, 34, 0.15);

  /* 品牌色 */
  --color-brand: #58A6FF;
  --color-brand-hover: #1F6FEB;
  --color-brand-bg: rgba(88, 166, 255, 0.15);

  /* AI色 */
  --color-ai: #A371F7;
  --color-ai-bg: rgba(163, 113, 247, 0.1);
}
```

---

## 3. 字体系统

### 3.1 字体族

```css
font-family:
  'SF Mono', 'Fira Code', 'Roboto Mono',
  'PingFang SC', 'Microsoft YaHei',
  monospace, sans-serif;
```

> **注**：金融终端推荐使用等宽字体显示数字和代码，增强专业感。

### 3.2 字号阶梯

| 层级 | 字号 | 字重 | 行高 | 用途 |
|------|------|------|------|------|
| H1 | 20px | 600 | 28px | 页面主标题（深色下不宜过大） |
| H2 | 16px | 600 | 24px | 模块标题 |
| H3 | 14px | 600 | 20px | 卡片标题 |
| Body | 13px | 400 | 20px | 正文内容 |
| Body-S | 12px | 400 | 18px | 辅助说明 |
| Caption | 11px | 400 | 16px | 极小标注 |
| Num-L | 24px | 700 | — | 卡片价格（改用 24px 更紧凑） |
| Num-M | 18px | 700 | — | 详情页价格 |
| Num-S | 12px | 600 | — | 辅助数值 |

---

## 4. 间距与圆角

### 4.1 间距（紧凑化）

深色模式下，适当减小间距可以增加信息密度感。

| Token | 值 | 用途 |
|-------|-----|------|
| `space-xs` | 4px | 图标与文字 |
| `space-sm` | 8px | 卡片内元素 |
| `space-md` | 12px | 卡片间距 |
| `space-lg` | 16px | 区块间距 |
| `space-xl` | 24px | 页面级间距 |

### 4.2 圆角（硬朗化）

| Token | 值 | 用途 |
|-------|-----|------|
| `radius-sm` | 4px | 小按钮、标签 |
| `radius-md` | 6px | 卡片、面板、输入框 |
| `radius-lg` | 8px | 弹窗 |
| `radius-full` | 9999px | Pill 标签 |

---

## 5. 组件规范

### 5.1 顶部导航栏

```
┌────────────────────────────────────────────────────────────────────┐
│  期货智析    [品种分析]  自选  市场概览  风险预警          [●LIVE] │
└────────────────────────────────────────────────────────────────────┘
```

| 元素 | 规范 |
|------|------|
| 高度 | 48px（更紧凑） |
| 背景 | `#0D1117` + 底边框 `#30363D` |
| Logo | 图标 + 文字"期货智析"，字号 14px，字重 600，颜色 `#C9D1D9` |
| 导航项 | 选中态：蓝色文字 `#58A6FF` + 下划线；未选中：灰色 `#8B949E` |
| LIVE 徽章 | 绿色圆点 `#3FB950` + "LIVE"文字，字号 10px |

### 5.2 搜索与筛选栏

```
┌────────────────────────────────────────────────────────────────────┐
│  🔍 搜索品种...           [●网格] [○列表]                          │
│  [●全部] [☆自选] [能源] [金属] [农产品]       [刷新] [分析] [▼]    │
└────────────────────────────────────────────────────────────────────┘
```

| 元素 | 规范 |
|------|------|
| 搜索框 | 高度 32px，圆角 6px，背景 `#010409`，边框 `#30363D`，文字 `#C9D1D9` |
| 视图切换 | 图标按钮，选中态蓝色 `#58A6FF` |
| 分类 Pill | 高度 24px，圆角 4px，选中态蓝色背景 `rgba(88,166,255,0.15)` + 蓝色文字 |
| 操作按钮 | "刷新"蓝色文字，"分析"蓝色实心按钮 |

### 5.3 统计概览卡片

```
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ ≡  32    │ │ ↗  7     │ │ ↘  10    │ │ ↔  15    │
│ 监控品种  │ │ 上涨趋势  │ │ 下跌趋势  │ │ 震荡整理  │
└──────────┘ └──────────┘ └──────────┘ └──────────┘
```

| 元素 | 规范 |
|------|------|
| 背景 | `#161B22`，边框 `#30363D` |
| 数值 | 20px/700，`#C9D1D9` |
| 标签 | 12px/400，`#8B949E` |
| 图标 | 16×16px，颜色对应状态（涨红/跌绿/震荡橙） |

### 5.4 品种卡片（核心组件 - Dark）

```
┌──────────────────────────────────────────────────────────┐
│ SC  原油                          ¥644.5                 │
│     SC2606                        ↓ -13.3 (-2.02%)       │
├──────────────────────────────────────────────────────────┤
│ [观望]                                                   │
│ 成功率 ━━━━━━ 60%      趋势评分 30                       │
│ [5M] [15M] [30M] [1H]                                    │
│ 压力 642.4   支撑 631.7      [↻] [🔔] [★] →             │
└──────────────────────────────────────────────────────────┘
```

| 元素 | 规范 |
|------|------|
| 卡片背景 | `#161B22`，边框 `#30363D`，Hover 时边框变 `#58A6FF` |
| 品种标识 | 32×32px，圆角 4px，背景 `#21262D`，文字 `#8B949E` |
| 价格 | 24px/700，`#C9D1D9`（默认），涨跌时变红/绿 |
| 涨跌幅 | 12px/600，红 `#F85149` / 绿 `#3FB950` |
| 操作建议 | Pill 标签，高度 20px，圆角 4px，背景用半透明色（如 `rgba(210,153,34,0.15)`），文字用纯色 |
| 进度条 | 高度 2px（更细），颜色对应状态 |
| 周期 Pill | 高度 20px，圆角 4px，选中态蓝色边框 + 文字 |
| 底部工具 | 图标颜色 `#8B949E`，Hover 变 `#C9D1D9` |

### 5.5 K 线图表区（Dark）

| 元素 | 规范 |
|------|------|
| 图表背景 | `#0D1117`（与页面背景一致，无边框感） |
| 网格线 | `#21262D`（极淡） |
| 蜡烛图 | 阳线 `#F85149`（空心或实心），阴线 `#3FB950` |
| 均线 | MA5 `#D29922`，MA10 `#58A6FF`，MA20 `#A371F7` |
| 成交量 | 阳线量柱 `#F85149` (40% 透明度)，阴线量柱 `#3FB950` (40% 透明度) |
| 坐标轴 | 文字 `#6E7681` |

### 5.6 右侧面板（Dark）

```
┌────────────────────────────────
│ 🔊 AI 思维分析      [智能分析]  │
├────────────────────────────────┤
│ SC2606 呈多周期空头排列...      │
├────────────────────────────────┤
│ 入场区间 640.5-642.5           │
│ 止损位   645.5                 │
└────────────────────────────────
```

| 元素 | 规范 |
|------|------|
| 面板背景 | `#161B22`，边框 `#30363D` |
| 标题 | 14px/600，`#C9D1D9` |
| AI 按钮 | 紫色渐变背景或紫色文字 |
| 数据行 | 标签 `#6E7681`，数值 `#C9D1D9` |
| 分隔线 | `#30363D` |

### 5.7 弹窗（Dark）

| 元素 | 规范 |
|------|------|
| 遮罩 | `rgba(0,0,0,0.7)`（更深） |
| 弹窗背景 | `#161B22`，边框 `#30363D` |
| 标题栏 | 背景 `#0D1117`，底边框 `#30363D` |
| 表格头 | 背景 `#0D1117`，文字 `#8B949E` |
| 表格行 | 背景 `#161B22`，Hover `#21262D` |
| 风险提示 | 左边框 `#D29922`，背景 `rgba(210,153,34,0.1)` |

---

## 6. 交互规范

### 6.1 状态反馈

| 交互 | 反馈方式 |
|------|---------|
| 卡片 Hover | 背景变 `#21262D`，边框变 `#58A6FF` |
| 按钮 Hover | 背景亮度增加 10% |
| 按钮 Active | 背景亮度降低 10% |
| 数据刷新 | 骨架屏（`#21262D` 脉冲动画） |

### 6.2 滚动条

| 元素 | 规范 |
|------|------|
| 轨道 | `#0D1117` |
| 滑块 | `#30363D`，圆角 4px |
| 滑块 Hover | `#484F58` |

---

## 7. 暗色模式专属优化

1. **对比度检查**：所有文字与背景对比度至少 4.5:1（WCAG AA）。
2. **避免纯黑纯白**：不使用 `#000000` 和 `#FFFFFF` 作为大面积背景/文字，减少眩光。
3. **阴影替代**：深色模式下阴影不可见，改用边框颜色变化来体现层级和选中态。
4. **图片适配**：如有图标/图片，增加 10% 亮度或添加半透明遮罩使其融入深色背景。

---

## 8. 开发资源清单

| 资源 | 说明 |
|------|------|
| CSS 变量 | 已提供 `:root` 定义 |
| 字体 | 推荐 `SF Mono` / `Fira Code` 用于数字 |
| 图标 | 推荐 `Lucide` 或 `Phosphor Icons`（线性风格，适合深色） |
| 图表 | `Lightweight Charts`（原生支持深色主题）或 `ECharts` |
| 组件库 | 建议基于 `Ant Design Dark Theme` 或 `Radix UI` 定制 |

---

*文档版本: v2.0 (Dark Terminal) | 最后更新: 2026-05-23*
*基于方案 A：专业交易终端风格*