nofx/web/CHANGELOG.md

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