# QuantPro-web

**Repository Path**: lu-benben/quant-pro-web

## Basic Information

- **Project Name**: QuantPro-web
- **Description**: 这是量化交易的前端部分
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-07
- **Last Updated**: 2026-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 股票交易管理系统

## 项目简介

股票交易管理系统是一个基于Vue 3 + TypeScript + Vite的现代化Web应用，包含管理端和客户端两个部分。管理端用于系统管理和监控，客户端用于用户进行股票交易和股票学习模拟。同时，项目还包含uni-app版本，用于开发微信小程序。

## 技术栈

### 前端技术

- **框架**: Vue 3
- **语言**: TypeScript
- **构建工具**: Vite
- **样式**: Tailwind CSS
- **路由**: Vue Router
- **图表**: ECharts
- **图标**: Lucide Vue Next

### 后端技术

- **语言**: 待定
- **框架**: 待定
- **数据库**: 待定

## 项目结构

```
Web/
├── src/             # 主项目源码
│   ├── client/      # 客户端应用
│   │   ├── components/  # 客户端组件
│   │   ├── pages/       # 客户端页面
│   │   ├── router/      # 客户端路由
│   │   ├── App.vue      # 客户端根组件
│   │   └── main.ts      # 客户端入口文件
│   ├── components/  # 通用组件
│   ├── hooks/       # 自定义Hooks
│   ├── lib/         # 工具库
│   ├── pages/       # 管理端页面
│   ├── router/      # 管理端路由
│   ├── types/       # 类型定义
│   ├── App.vue      # 管理端根组件
│   ├── main.ts      # 管理端入口文件
│   └── index.css    # 全局样式
├── uni-app/         # 微信小程序版本
│   ├── src/         # 小程序源码
│   │   ├── pages/       # 小程序页面
│   │   ├── router/      # 小程序路由
│   │   ├── App.vue      # 小程序根组件
│   │   └── main.ts      # 小程序入口文件
│   ├── dist/        # 构建产物
│   └── package.json # 小程序依赖
├── package.json     # 主项目依赖
└── vite.config.ts   # Vite配置
```

## 功能模块

### 管理端

- **登录页面**: 用户登录系统，支持邮箱和密码登录
- **仪表盘**: 系统概览和关键指标，包括市场概览、交易统计等
- **股票可视化**: 股票数据可视化分析，包括价格趋势、K线图、成交量、MACD等指标
- **服务器监控**: 服务器状态和性能监控，包括CPU、内存、磁盘使用情况等
- **策略管理**: 股票学习模拟策略管理，包括策略创建、编辑、启动和停止
- **交易历史**: 交易记录查询，包括历史交易详情和统计分析
- **设置页面**: 系统设置，包括用户管理、权限设置等

### 客户端

- **登录页面**: 用户登录客户端，支持邮箱和密码登录
- **股票交易**: 股票买卖和持仓管理，包括市场概览、股票列表、股票详情、持仓管理等
- **股票学习模拟**: 量化策略执行和监控，包括策略列表、策略详情、交易记录等

### 微信小程序

- **登录页面**: 小程序登录，支持微信授权登录
- **股票交易**: 移动端股票交易，包括市场概览、股票列表、股票详情、持仓管理等
- **股票学习模拟**: 移动端股票学习模拟，包括策略列表、策略详情、交易记录等

## 安装和运行

### 环境要求

- Node.js >= 18.0.0
- npm >= 9.0.0
- 微信开发者工具（用于开发微信小程序）

### 安装依赖

```bash
# 安装主项目依赖
npm install

# 安装uni-app依赖
cd uni-app
npm install --legacy-peer-deps
```

### 运行项目

```bash
# 启动主项目开发服务器
npm run dev

# 构建主项目
npm run build

# 构建uni-app微信小程序
cd uni-app
npm run build:mp-weixin

# 构建uni-app H5版本
cd uni-app
npm run build:h5
```

## 访问地址

- **主项目**: http://localhost:5173/
- **uni-app H5**: http://localhost:5173/uni-app/dist/
- **微信小程序**: 通过微信开发者工具导入 `uni-app/dist/mp-weixin` 目录

## 构建和部署

### 主项目构建

```bash
npm run build
```

构建产物将生成在 `dist` 目录中，可以部署到任何静态文件服务器，如Nginx、Apache等。

### uni-app构建

```bash
# 构建微信小程序
cd uni-app
npm run build:mp-weixin

# 构建H5版本
cd uni-app
npm run build:h5
```

微信小程序构建产物将生成在 `uni-app/dist/mp-weixin` 目录中，可以通过微信开发者工具导入并发布。

H5版本构建产物将生成在 `uni-app/dist/h5` 目录中，可以部署到任何静态文件服务器。

## 注意事项

1. **环境变量**: 项目使用Vite的环境变量配置，可在 `.env` 文件中设置。
2. **TypeScript**: 项目使用TypeScript进行类型检查，确保代码类型安全。
3. **Tailwind CSS**: 项目使用Tailwind CSS进行样式管理，可在 `tailwind.config.js` 中配置。
4. **uni-app**: 由于uni-app的依赖冲突，需要使用 `--legacy-peer-deps` 安装依赖。
5. **微信小程序**: 开发微信小程序需要安装微信开发者工具，并在构建后导入项目。
6. **路由守卫**: 项目使用路由守卫进行权限控制，未登录用户将被重定向到登录页面。

## 开发指南

### 代码规范

- 使用ESLint进行代码检查
- 使用Prettier进行代码格式化
- 遵循Vue 3 Composition API的最佳实践
- 代码注释清晰，变量命名规范

### 组件开发

- 组件命名使用PascalCase
- 组件文件放在 `src/components` 目录中
- 组件样式使用scoped属性
- 组件功能单一，职责明确

### 页面开发

- 页面文件放在 `src/pages` 目录中
- 页面路由在 `src/router/index.ts` 中配置
- 页面布局使用统一的Layout组件
- 页面数据获取使用异步函数，避免阻塞渲染

### 状态管理

- 全局状态使用Vue的provide/inject API
- 组件内部状态使用ref和reactive
- 复杂状态管理可考虑使用Pinia

## 贡献指南

1. Fork项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交代码 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到远程分支 (`git push origin feature/AmazingFeature`)
5. 创建Pull Request

## 许可证

MIT License

## 联系方式

- **项目维护者**: 卢本本
- **邮箱**: 待定
- **GitHub**: 待定

---

**卢本本**
*2026年4月6日*