2.2 KiB

Raw Blame History Unescape Escape

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

前端设计方案

1. 导航栏设计

1.1 左侧导航栏

移除：详情分析入口
保留：首页、数据管理、策略管理、回测分析

1.2 顶部导航栏

新增：配置管理按钮（位于暗黑模式切换按钮旁边）
功能：点击后跳转到配置管理页面

2. 页面结构

2.1 配置管理页面

整合：将风控管理整个内容合并到配置管理中
布局：保持原有配置管理功能，新增风控管理部分

2.2 首页/仪表盘

新增：显示当前最后一个交易日日期
新增：显示当前日期
数据来源：通过API接口获取最后交易日数据

3. API接口

3.1 最后交易日接口

端点：/api/last-trading-day
方法：GET
参数：无需传递合约代码、交易所等参数
返回：
```
{
  "last_trading_day": "2026-02-24"
}
```

3.2 主力合约接口

端点：/api/main-contracts
方法：GET
参数：无
返回：主力合约列表

4. 错误处理

4.1 API请求失败处理

策略：当API请求失败时，使用前一天作为模拟数据
实现：在前端代码中添加try-catch逻辑，捕获fetch错误并使用备用数据

5. 技术实现

5.1 前端技术栈

React
TypeScript
Vite

5.2 代理配置

Vite配置：添加代理规则，将/api请求代理到http://localhost:5000
配置文件：vite.config.js

5.3 代码文件

导航栏：src/components/layout/MainLayout.jsx
配置管理：src/pages/config/Config.jsx
仪表盘：src/pages/dashboard/Dashboard.jsx
API调用：使用相对路径进行API请求

6. 响应式设计

适配：支持不同屏幕尺寸
布局：在小屏幕设备上自动调整导航栏布局

7. 用户体验

加载状态：API请求时显示加载指示器
错误提示：API请求失败时显示友好的错误提示
数据更新：页面加载时自动获取最新数据

8. 后续优化

缓存策略：考虑在前端添加本地缓存，减少API调用
数据可视化：增加更多数据可视化组件
性能优化：优化页面加载速度和响应时间