10 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 技术栈

类别	技术/库	版本	用途
框架	React	18.x	前端UI框架
路由	React Router	6.x	页面路由管理
状态管理	Redux Toolkit	2.x	全局状态管理
UI组件库	Ant Design	5.x	界面组件
图表库	Lightweight Charts	4.x	K线图表展示
HTTP客户端	Fetch API	浏览器内置	API调用
构建工具	Vite	5.x	项目构建和开发服务器

1.2 目录结构

src/
├── assets/           # 静态资源
├── components/       # 通用组件
│   └── layout/       # 布局组件
├── pages/            # 页面组件
│   ├── admin/        # 管理配置页面
│   ├── config/       # 配置管理页面
│   ├── dashboard/    # 市场概览页面
│   ├── detail/       # 合约详情页面
│   ├── risk-control/ # 风控管理页面
│   └── watchlist/    # 自选合约页面
├── store/            # Redux状态管理
│   ├── futuresSlice.js # 期货数据状态管理
│   └── index.js      # Store配置
├── utils/            # 工具函数
│   └── mockData.js   # 模拟数据
├── App.jsx           # 应用入口组件
├── main.jsx          # 应用启动文件
└── index.css         # 全局样式

2. 页面结构与路由

2.1 路由配置

路径	组件	功能
`/`	Dashboard	市场概览
`/watchlist`	Watchlist	自选合约
`/detail/:code`	Detail	合约详情分析
`/risk-control`	RiskControl	风控管理
`/config`	Config	配置管理
`/admin`	AdminConfig	管理配置

2.2 布局设计

顶部导航栏：包含系统名称、深色模式切换、消息通知和用户头像
左侧菜单栏：包含主要功能模块的导航链接
右侧内容区：根据路由显示对应页面内容
响应式设计：支持桌面端、平板和移动端

3. 组件设计

3.1 布局组件

MainLayout 组件

功能：提供统一的页面布局，包括顶部导航栏和左侧菜单栏
交互：
- 支持菜单栏折叠/展开
- 深色模式切换
- 响应式布局适配

3.2 页面组件

Dashboard 页面

功能：市场概览，展示所有合约的基本信息和热点合约
交互：
- 数据刷新
- 合约筛选和排序
- 添加/移除自选合约
- 查看合约详情
- 消息推送配置

Detail 页面

功能：合约详情分析，包括K线图、技术指标和AI研判
交互：
- 周期切换（5分钟、30分钟、1小时、1天、1周）
- 技术指标切换（MA、MACD、KDJ、RSI、布林带）
- 图表缩放和拖拽

Watchlist 页面

功能：展示用户添加的自选合约
交互：
- 查看合约详情
- 从自选中移除合约
- 消息推送配置

RiskControl 页面

功能：风险管理和仓位计算
交互：
- 止损策略设置
- 仓位大小计算
- 风险偏好设置
- 换月预警查看

Config 页面

功能：系统配置管理
交互：
- 系统参数调整
- 消息推送配置

AdminConfig 页面

功能：管理配置，包括数据库、服务器、安全和数据源配置
交互：
- 数据库连接测试
- 数据源连接测试
- 配置保存和恢复默认

4. 状态管理

4.1 Redux Store 设计

// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import futuresReducer from './futuresSlice';

const store = configureStore({
  reducer: {
    futures: futuresReducer
  }
});

export default store;

4.2 状态切片

futuresSlice.js

状态结构：
- overview：市场概览数据
- selectedFuture：当前选中的合约详情
- riskAlerts：风险预警数据
- aiAnalysis：AI市场分析数据
- loading：加载状态
- error：错误信息
- watchlist：自选合约列表
异步操作：
- fetchFuturesOverview：获取市场概览数据
- fetchFutureDetail：获取单个合约详情
- fetchRiskAlerts：获取风险预警数据
- fetchAIMarketAnalysis：获取AI市场分析数据
同步操作：
- selectFuture：选择合约
- clearSelectedFuture：清除选中合约
- toggleWatchlist：切换自选合约状态

5. API 调用

5.1 后端 API 接口

API路径	方法	功能
`/api/market/overview`	GET	获取市场概览数据
`/api/market/detail/:code`	GET	获取合约详情数据
`/api/market/klines/:code`	GET	获取合约K线数据
`/api/market/alerts`	GET	获取风险预警数据
`/api/config/get`	GET	获取系统配置
`/api/config/save`	POST	保存系统配置
`/api/config/test-database`	POST	测试数据库连接
`/api/config/test-datasource`	POST	测试数据源连接

5.2 前端 API 调用封装

// 后端API基础URL
const API_BASE_URL = 'http://localhost:3007/api';

// 异步获取期货概览数据
export const fetchFuturesOverview = createAsyncThunk(
  'futures/fetchOverview',
  async () => {
    const response = await fetch(`${API_BASE_URL}/market/overview`);
    if (!response.ok) {
      throw new Error('获取市场概览失败');
    }
    const data = await response.json();
    return data.data;
  }
);

6. 用户交互流程

6.1 市场概览流程

用户进入系统，看到市场概览页面
系统自动加载市场概览数据、风险预警和AI市场分析
用户可以：
- 刷新数据
- 按类型筛选合约
- 按胜率、涨跌幅或波动率排序
- 点击合约查看详情
- 添加合约到自选
- 配置消息推送

6.2 合约详情流程

用户从市场概览或自选列表点击合约进入详情页
系统加载合约详情数据和K线数据
用户可以：
- 切换不同时间周期的K线图
- 切换不同的技术指标
- 查看技术指标数据
- 查看多周期趋势
- 查看AI研判结果
- 查看交易建议和风险评估

6.3 自选合约流程

用户进入自选合约页面
系统显示用户添加的自选合约列表
用户可以：
- 刷新数据
- 查看合约详情
- 从自选中移除合约
- 配置消息推送

6.4 风控管理流程

用户进入风控管理页面
用户可以：
- 设置止损策略
- 计算仓位大小
- 设置风险偏好
- 查看换月预警
- 查看风险监控指标

6.5 配置管理流程

用户进入配置管理页面
用户可以：
- 调整系统参数
- 配置消息推送方式和内容

6.6 管理配置流程

管理员进入管理配置页面
管理员可以：
- 配置数据库连接
- 配置服务器参数
- 配置安全设置
- 配置数据源
- 测试连接
- 保存配置

7. 响应式设计

桌面端：完整布局，左侧菜单展开
平板端：左侧菜单可折叠，内容区域自适应
移动端：底部导航栏，顶部状态栏，内容区域全屏

8. 深色模式

实现方式：使用 Ant Design 的 ConfigProvider 和 CSS 变量
切换方式：顶部导航栏的深色模式切换开关
效果：全局界面元素的颜色和背景色随模式切换

9. 性能优化

9.1 代码分割

使用 React.lazy 和 Suspense 实现组件懒加载
按路由分割代码，减少初始加载时间

9.2 数据缓存

使用 Redux 缓存已获取的数据
避免重复请求相同数据

9.3 图表优化

使用 Lightweight Charts 高性能图表库
按需加载图表数据
优化图表渲染性能

10. 错误处理

API 错误处理：捕获并显示 API 调用错误
图表错误处理：当图表渲染失败时显示错误信息
数据加载状态：使用 Spin 组件显示加载状态
边界情况：处理空数据、无效参数等边界情况

11. 开发和部署

11.1 开发环境

启动命令：npm run dev
开发服务器：http://localhost:5173
API 代理：配置代理到后端服务 http://localhost:3007

11.2 构建和部署

构建命令：npm run build
构建产物：dist 目录
部署方式：可部署到任何静态文件服务器

12. 功能特性总结

功能	描述	实现方式
市场概览	展示所有合约的基本信息和热点合约	Redux + API调用 + 响应式布局
合约详情	展示合约的K线图、技术指标和AI研判	Lightweight Charts + 技术指标计算
自选合约	管理用户关注的合约	Redux状态管理
风控管理	风险管理和仓位计算	表单计算 + 数据展示
配置管理	系统配置和消息推送配置	表单 + 本地存储
管理配置	数据库、服务器和数据源配置	表单 + API调用
深色模式	支持深色和浅色主题切换	Ant Design ConfigProvider
响应式设计	适配不同屏幕尺寸	CSS媒体查询 + Flexbox
性能优化	代码分割和数据缓存	React.lazy + Redux缓存
错误处理	完善的错误处理和边界情况	错误捕获 + 友好提示

13. 技术亮点

模块化设计：清晰的代码结构和组件划分
高性能图表：使用 Lightweight Charts 实现流畅的K线图表
AI 集成：集成AI市场分析和预测功能
实时数据：通过WebSocket获取实时市场数据
响应式布局：适配各种设备屏幕
深色模式：支持深色和浅色主题
完善的风控：提供全面的风险管理工具
消息推送：多渠道消息推送配置
性能优化：代码分割和数据缓存
错误处理：友好的错误提示和边界情况处理

14. 未来扩展

用户系统：添加用户登录、注册和权限管理
交易系统：集成交易功能，支持下单和撤单
策略回测：添加策略回测功能，评估交易策略
更多数据源：支持更多数据源，如Wind、新浪财经等
更多技术指标：添加更多技术指标和分析工具
移动应用：开发iOS和Android移动应用
数据可视化：增强数据可视化效果，添加更多图表类型
智能投顾：基于AI的智能投资顾问功能

10 KiB Raw Blame History Unescape Escape