You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
# 前端设计方案
|
|
|
|
|
|
|
|
|
|
|
|
## 1. 导航栏设计
|
|
|
|
|
|
|
|
|
|
|
|
### 1.1 左侧导航栏
|
|
|
|
|
|
- **移除**：详情分析入口
|
|
|
|
|
|
- **保留**：首页、数据管理、策略管理、回测分析
|
|
|
|
|
|
|
|
|
|
|
|
### 1.2 顶部导航栏
|
|
|
|
|
|
- **新增**：配置管理按钮（位于暗黑模式切换按钮旁边）
|
|
|
|
|
|
- **功能**：点击后跳转到配置管理页面
|
|
|
|
|
|
|
|
|
|
|
|
## 2. 页面结构
|
|
|
|
|
|
|
|
|
|
|
|
### 2.1 配置管理页面
|
|
|
|
|
|
- **整合**：将风控管理整个内容合并到配置管理中
|
|
|
|
|
|
- **布局**：保持原有配置管理功能，新增风控管理部分
|
|
|
|
|
|
|
|
|
|
|
|
### 2.2 首页/仪表盘
|
|
|
|
|
|
- **新增**：显示当前最后一个交易日日期
|
|
|
|
|
|
- **新增**：显示当前日期
|
|
|
|
|
|
- **数据来源**：通过API接口获取最后交易日数据
|
|
|
|
|
|
|
|
|
|
|
|
## 3. API接口
|
|
|
|
|
|
|
|
|
|
|
|
### 3.1 最后交易日接口
|
|
|
|
|
|
- **端点**：/api/last-trading-day
|
|
|
|
|
|
- **方法**：GET
|
|
|
|
|
|
- **参数**：无需传递合约代码、交易所等参数
|
|
|
|
|
|
- **返回**：
|
|
|
|
|
|
```json
|
|
|
|
|
|
{
|
|
|
|
|
|
"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调用
|
|
|
|
|
|
- **数据可视化**：增加更多数据可视化组件
|
|
|
|
|
|
- **性能优化**：优化页面加载速度和响应时间
|
