# 前端设计方案

## 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调用
- **数据可视化**：增加更多数据可视化组件
- **性能优化**：优化页面加载速度和响应时间