Skip to content

README.md

Latest commit

 

History

History
159 lines (116 loc) · 3.03 KB

README.md

File metadata and controls

159 lines (116 loc) · 3.03 KB

Factor Mining System Frontend

现代化的量化系统前端界面，支持策略回测、结果可视化、历史查询等功能。

特性

  • 🎨 现代化UI设计，支持暗色/亮色主题
  • 🌍 国际化支持（中文/英文）
  • 📊 丰富的数据可视化（Recharts）
  • 📱 响应式设计，支持移动端
  • ⚡ 基于Vite + React + TypeScript，快速开发

技术栈

  • React 18 - UI框架
  • TypeScript - 类型安全
  • Vite - 构建工具
  • Tailwind CSS - 样式框架
  • Recharts - 图表库
  • React Router - 路由
  • Axios - HTTP客户端
  • i18next - 国际化
  • Zustand - 状态管理

快速开始

安装依赖

cd frontend
npm install

开发模式

npm run dev

前端将在 http://localhost:3000 启动

构建生产版本

npm run build

构建产物在 dist/ 目录

预览生产构建

npm run preview

环境变量

创建 .env 文件：

VITE_API_BASE_URL=http://localhost:8000/api/v1

项目结构

frontend/
├── src/
│   ├── components/      # 组件
│   │   ├── Layout.tsx
│   │   ├── BacktestForm.tsx
│   │   └── BacktestResults.tsx
│   ├── pages/          # 页面
│   │   ├── Dashboard.tsx
│   │   ├── Backtest.tsx
│   │   ├── History.tsx
│   │   ├── Monitoring.tsx
│   │   └── Settings.tsx
│   ├── services/       # API服务
│   │   └── api.ts
│   ├── stores/         # 状态管理
│   │   └── themeStore.ts
│   ├── i18n/           # 国际化
│   │   └── config.tsx
│   ├── App.tsx         # 主应用
│   └── main.tsx        # 入口
├── index.html
├── package.json
├── vite.config.ts
└── tailwind.config.js

功能模块

1. 仪表盘 (Dashboard)

  • 系统统计概览
  • 快速操作入口

2. 回测 (Backtest)

  • 策略回测配置
  • 实时结果展示
  • 性能指标可视化

3. 历史 (History)

  • 回测历史查询
  • 结果筛选和排序
  • 结果详情查看

4. 监控 (Monitoring)

  • 系统状态监控
  • 数据质量指标
  • 性能指标

5. 设置 (Settings)

  • 主题切换
  • 语言设置
  • 其他偏好设置

开发指南

添加新页面

  1. 在 src/pages/ 创建新页面组件
  2. 在 src/App.tsx 添加路由
  3. 在 src/components/Layout.tsx 添加导航项
  4. 在 src/i18n/config.tsx 添加翻译

添加新组件

在 src/components/ 创建组件，遵循以下规范：

  • 使用TypeScript
  • 支持暗色模式
  • 使用Tailwind CSS
  • 支持国际化

API集成

所有API调用通过 src/services/api.ts，使用Axios封装。

部署

静态部署

构建后，将 dist/ 目录部署到任何静态文件服务器（Nginx、Apache等）。

Docker部署

可以创建Dockerfile将前端和后端一起部署。

浏览器支持

  • Chrome (最新)
  • Firefox (最新)
  • Safari (最新)
  • Edge (最新)

许可证

与主项目相同