# Web Dashboard Changelog

## v2.0 - 重大UI升级（参考nof0设计）

### 🎨 样式改进

#### 配色方案
- ✅ 采用nof0项目的极简黑白灰配色
- ✅ **主色调**：
  - 纯黑背景 `#0a0a0a`
  - 白色文字 `#ededed`
  - 灰色边框 `rgba(255, 255, 255, 0.1)`
  - 品牌色仅用于AI提供商标识（DeepSeek蓝 `#4d6bfe`、Qwen紫 `#8b5cf6`）
- ✅ **字体**：IBM Plex Mono（等宽字体，专业交易界面风格）
- ✅ **终端扫描线效果**：灰色扫描线动画，营造专业交易氛围

#### UI组件升级
- ✅ **Header**：
  - 纯白色标题文字
  - 玻璃态模糊背景（glass effect）
  - 粘性定位（sticky top）
  - 状态指示器带脉冲发光动画
  - AI提供商颜色区分（DeepSeek蓝/Qwen紫）

- ✅ **统计卡片**：
  - 半透明背景 `bg-gray-900/50`
  - Hover时边框高亮效果
  - 等宽字体显示数字
  - 大写字母标题，增加专业感

- ✅ **通用效果**：
  - 淡入动画（animate-fade-in）
  - 平滑过渡效果
  - 自定义滚动条样式
  - 按钮悬停效果

### 📊 新功能：账户收益率曲线

#### 后端API
- ✅ 新增 `GET /api/equity-history` 端点
- ✅ 返回最近30个周期的账户净值数据
- ✅ 包含时间戳、净值、盈亏、周期号

#### 前端图表组件（EquityChart）
- ✅ **双显示模式**：
  - 美元模式：显示绝对金额
  - 百分比模式：显示收益率百分比
  - 一键切换

- ✅ **图表特性**：
  - 使用Recharts库
  - 白灰渐变线条（极简风格）
  - 参考线显示初始余额/0%
  - 自定义Tooltip（显示详细信息）
  - 响应式布局，自适应容器宽度

- ✅ **数据展示**：
  - 实时当前净值和总盈亏
  - 初始余额对比
  - 数据点数量统计
  - 每10秒自动刷新

### 📝 组件结构

```
web/src/
├── components/
│   └── EquityChart.tsx         # 收益率曲线图表
├── lib/
│   └── api.ts                  # 新增getEquityHistory()
├── index.css                   # 全新样式系统
└── App.tsx                     # 集成图表组件
```

### 🎯 视觉改进对比

**Before:**
- 基础Tailwind深色主题
- 简单卡片布局
- 灰色单调配色
- 无曲线图表

**After:**
- nof0风格极简黑白灰配色
- 终端扫描线效果
- 纯白文字和灰色主题
- 实时收益率曲线
- IBM Plex Mono字体
- 玻璃态和动画效果

### 🚀 性能优化

- SWR数据缓存和自动刷新
- 组件级代码分割
- 响应式设计优化
- 图表数据自动降采样

### 📱 响应式设计

- 移动端优化布局
- 平板/桌面端多列展示
- 图表自适应容器宽度
- 触摸友好的交互

### 🔧 技术栈

- React 18
- TypeScript
- Vite
- Tailwind CSS
- Recharts
- SWR
- IBM Plex Mono字体

---

**更新日期**: 2025-10-27
