|
@@ -5,6 +5,7 @@
|
|
|
|------|------|------|------|
|
|
|------|------|------|------|
|
|
|
| 2.4 | 2025-09-20 | 与主架构文档版本一致 | Winston |
|
|
| 2.4 | 2025-09-20 | 与主架构文档版本一致 | Winston |
|
|
|
| 2.5 | 2025-09-24 | 更新技术栈信息,修正数据库类型 | Winston |
|
|
| 2.5 | 2025-09-24 | 更新技术栈信息,修正数据库类型 | Winston |
|
|
|
|
|
+| 2.6 | 2025-09-27 | 添加移动端应用组件架构信息 | Winston |
|
|
|
|
|
|
|
|
### 前端组件架构
|
|
### 前端组件架构
|
|
|
|
|
|
|
@@ -59,6 +60,46 @@ src/client/
|
|
|
│ │ └── WordPreview.tsx # Word预览页面
|
|
│ │ └── WordPreview.tsx # Word预览页面
|
|
|
│ ├── routes.tsx # 路由配置 (18个路由)
|
|
│ ├── routes.tsx # 路由配置 (18个路由)
|
|
|
│ └── index.tsx # Home应用入口
|
|
│ └── index.tsx # Home应用入口
|
|
|
|
|
+├── mobile/ # 移动端应用 (股票训练系统)
|
|
|
|
|
+│ ├── components/ # 移动端专用组件
|
|
|
|
|
+│ │ ├── Classroom/ # 课堂相关组件
|
|
|
|
|
+│ │ │ ├── ClassroomLayout.tsx # 课堂布局
|
|
|
|
|
+│ │ │ ├── ClassroomProvider.tsx # 课堂状态管理
|
|
|
|
|
+│ │ │ ├── TeacherClassControlButton.tsx # 老师课堂控制
|
|
|
|
|
+│ │ │ ├── StudentHandUpButton.tsx # 学生举手
|
|
|
|
|
+│ │ │ ├── MessageList.tsx # 消息列表
|
|
|
|
|
+│ │ │ ├── MessageBubble.tsx # 消息气泡
|
|
|
|
|
+│ │ │ └── useClassroom.ts # 课堂Hook
|
|
|
|
|
+│ │ ├── Exam/ # 考试相关组件
|
|
|
|
|
+│ │ │ ├── ExamIndex.tsx # 考试首页
|
|
|
|
|
+│ │ │ ├── ExamAdmin.tsx # 考试管理
|
|
|
|
|
+│ │ │ ├── ExamCard.tsx # 考试卡片
|
|
|
|
|
+│ │ │ └── hooks/useSocketClient.ts # Socket客户端Hook
|
|
|
|
|
+│ │ ├── stock/ # 股票相关组件
|
|
|
|
|
+│ │ │ ├── stock_main.tsx # 股票主组件
|
|
|
|
|
+│ │ │ └── components/stock-chart/ # 股票图表组件
|
|
|
|
|
+│ │ │ ├── StockChart.tsx # 股票图表
|
|
|
|
|
+│ │ │ ├── TradePanel.tsx # 交易面板
|
|
|
|
|
+│ │ │ ├── DrawingToolbar.tsx # 绘图工具栏
|
|
|
|
|
+│ │ │ └── hooks/useStockSocketClient.ts # 股票Socket Hook
|
|
|
|
|
+│ │ ├── ErrorPage.tsx # 错误页面
|
|
|
|
|
+│ │ ├── NotFoundPage.tsx # 404页面
|
|
|
|
|
+│ │ └── ProtectedRoute.tsx # 路由保护组件
|
|
|
|
|
+│ ├── hooks/ # 移动端Hooks
|
|
|
|
|
+│ │ └── AuthProvider.tsx # 认证状态管理
|
|
|
|
|
+│ ├── layouts/ # 布局组件
|
|
|
|
|
+│ │ └── MainLayout.tsx # 主布局
|
|
|
|
|
+│ ├── pages/ # 页面组件
|
|
|
|
|
+│ │ ├── ClassroomPage.tsx # 课堂页面
|
|
|
|
|
+│ │ ├── StockHomePage.tsx # 股票首页
|
|
|
|
|
+│ │ ├── XunlianPage.tsx # 训练页面
|
|
|
|
|
+│ │ ├── AuthPage.tsx # 认证页面
|
|
|
|
|
+│ │ ├── MemberPage.tsx # 会员页面
|
|
|
|
|
+│ │ ├── VideoReplayPage.tsx # 视频回放页面
|
|
|
|
|
+│ │ ├── VideoPlayerPage.tsx # 视频播放页面
|
|
|
|
|
+│ │ └── WechatCallbackPage.tsx # 微信回调页面
|
|
|
|
|
+│ ├── routes.tsx # 路由配置 (15+个路由)
|
|
|
|
|
+│ └── index.tsx # 移动端应用入口
|
|
|
├── components/ # 共享UI组件
|
|
├── components/ # 共享UI组件
|
|
|
│ └── ui/ # shadcn/ui组件库(50+组件)
|
|
│ └── ui/ # shadcn/ui组件库(50+组件)
|
|
|
│ ├── button.tsx # 按钮组件
|
|
│ ├── button.tsx # 按钮组件
|
|
@@ -80,22 +121,25 @@ src/client/
|
|
|
- **构建工具**: Vite 7.0.0
|
|
- **构建工具**: Vite 7.0.0
|
|
|
- **样式**: Tailwind CSS 4.1.11
|
|
- **样式**: Tailwind CSS 4.1.11
|
|
|
- **HTTP客户端**: 基于Hono Client的封装 + axios适配器
|
|
- **HTTP客户端**: 基于Hono Client的封装 + axios适配器
|
|
|
|
|
+- **实时通信**: Socket.IO客户端 (课堂和股票实时数据)
|
|
|
|
|
+- **音视频**: 阿里云RTC SDK (实时音视频通信)
|
|
|
|
|
+- **图表**: ECharts (股票图表展示)
|
|
|
|
|
+- **日期处理**: dayjs (中文日期格式化)
|
|
|
|
|
|
|
|
### 后端组件架构
|
|
### 后端组件架构
|
|
|
|
|
|
|
|
**实际后端项目结构**:
|
|
**实际后端项目结构**:
|
|
|
```text
|
|
```text
|
|
|
src/server/
|
|
src/server/
|
|
|
-├── api/ # API路由层
|
|
|
|
|
|
|
+├── api/ # API路由层 (10+业务模块路由)
|
|
|
│ ├── auth/ # 认证相关路由
|
|
│ ├── auth/ # 认证相关路由
|
|
|
-│ │ ├── login.ts # 登录路由
|
|
|
|
|
|
|
+│ │ ├── login/password.ts # 密码登录路由
|
|
|
│ │ ├── logout.ts # 登出路由
|
|
│ │ ├── logout.ts # 登出路由
|
|
|
-│ │ └── register.ts # 注册路由
|
|
|
|
|
-│ ├── users/ # 用户管理路由
|
|
|
|
|
-│ │ ├── index.ts # 用户列表路由
|
|
|
|
|
-│ │ ├── [id].ts # 用户详情路由
|
|
|
|
|
-│ │ └── __tests__/ # 路由测试
|
|
|
|
|
-│ ├── roles/ # 角色管理路由
|
|
|
|
|
|
|
+│ │ ├── register/create.ts # 注册路由
|
|
|
|
|
+│ │ ├── me/get.ts # 获取当前用户信息
|
|
|
|
|
+│ │ └── sso-verify.ts # SSO验证路由
|
|
|
|
|
+│ ├── users/ # 用户管理路由 (通用CRUD)
|
|
|
|
|
+│ ├── roles/ # 角色管理路由 (通用CRUD)
|
|
|
│ ├── files/ # 文件管理路由
|
|
│ ├── files/ # 文件管理路由
|
|
|
│ │ ├── multipart-policy/ # 多部分上传策略
|
|
│ │ ├── multipart-policy/ # 多部分上传策略
|
|
|
│ │ ├── multipart-complete/ # 完成多部分上传
|
|
│ │ ├── multipart-complete/ # 完成多部分上传
|
|
@@ -125,8 +169,8 @@ src/server/
|
|
|
│ ├── logger.ts # 日志工具
|
|
│ ├── logger.ts # 日志工具
|
|
|
│ └── __tests__/ # 工具测试
|
|
│ └── __tests__/ # 工具测试
|
|
|
├── middleware/ # 中间件层
|
|
├── middleware/ # 中间件层
|
|
|
-│ ├── auth.ts # 认证中间件
|
|
|
|
|
-│ └── validation.ts # 验证中间件
|
|
|
|
|
|
|
+│ ├── auth.middleware.ts # 认证中间件
|
|
|
|
|
+│ └── permission.middleware.ts # 权限中间件
|
|
|
├── types/ # 类型定义
|
|
├── types/ # 类型定义
|
|
|
├── data-source.ts # 数据库连接配置
|
|
├── data-source.ts # 数据库连接配置
|
|
|
└── index.ts # 服务器入口
|
|
└── index.ts # 服务器入口
|
|
@@ -139,6 +183,9 @@ src/server/
|
|
|
- **认证**: JWT Bearer Token
|
|
- **认证**: JWT Bearer Token
|
|
|
- **API文档**: @hono/zod-openapi + Swagger UI
|
|
- **API文档**: @hono/zod-openapi + Swagger UI
|
|
|
- **测试**: Vitest + hono/testing
|
|
- **测试**: Vitest + hono/testing
|
|
|
|
|
+- **实时通信**: Socket.IO服务器端 (课堂和股票实时数据)
|
|
|
|
|
+- **对象存储**: MinIO (文件存储服务)
|
|
|
|
|
+- **缓存**: Redis 7.0.4 (会话缓存和临时数据)
|
|
|
|
|
|
|
|
## 现有组件优化
|
|
## 现有组件优化
|
|
|
**通用CRUD服务**:
|
|
**通用CRUD服务**:
|
|
@@ -162,10 +209,30 @@ src/server/
|
|
|
- 文件删除(同时删除MinIO对象和数据库记录)
|
|
- 文件删除(同时删除MinIO对象和数据库记录)
|
|
|
- **优化重点**: 增强大文件处理能力,优化上传性能
|
|
- **优化重点**: 增强大文件处理能力,优化上传性能
|
|
|
|
|
|
|
|
|
|
+**移动端实时通信组件**:
|
|
|
|
|
+- **责任**: 提供课堂系统和股票训练系统的实时通信功能
|
|
|
|
|
+- **现状**: 已实现完整功能,包含Socket.IO客户端和服务器端
|
|
|
|
|
+- **核心功能**:
|
|
|
|
|
+ - 课堂实时消息传递(文字、图片、文件)
|
|
|
|
|
+ - 股票实时数据推送(价格、K线图、交易信息)
|
|
|
|
|
+ - 阿里云RTC音视频通信(实时音视频课堂)
|
|
|
|
|
+ - 考试系统实时监控和交卷
|
|
|
|
|
+ - 视频回放和播放功能
|
|
|
|
|
+- **优化重点**: 优化实时数据推送性能,增强音视频质量
|
|
|
|
|
+
|
|
|
## 组件交互
|
|
## 组件交互
|
|
|
```mermaid
|
|
```mermaid
|
|
|
graph TD
|
|
graph TD
|
|
|
- A[前端React组件] --> B[Hono API路由]
|
|
|
|
|
|
|
+ subgraph "前端应用层"
|
|
|
|
|
+ A1[管理后台React组件]
|
|
|
|
|
+ A2[用户前台React组件]
|
|
|
|
|
+ A3[移动端React组件]
|
|
|
|
|
+ end
|
|
|
|
|
+
|
|
|
|
|
+ A1 --> B[Hono API路由]
|
|
|
|
|
+ A2 --> B
|
|
|
|
|
+ A3 --> B
|
|
|
|
|
+
|
|
|
B --> C[通用CRUD服务]
|
|
B --> C[通用CRUD服务]
|
|
|
C --> D[TypeORM实体]
|
|
C --> D[TypeORM实体]
|
|
|
C --> E[Zod验证]
|
|
C --> E[Zod验证]
|
|
@@ -175,10 +242,24 @@ graph TD
|
|
|
H --> I[MinIO对象存储]
|
|
H --> I[MinIO对象存储]
|
|
|
H --> J[文件实体管理]
|
|
H --> J[文件实体管理]
|
|
|
|
|
|
|
|
- style A fill:#e1f5fe
|
|
|
|
|
|
|
+ subgraph "实时通信层"
|
|
|
|
|
+ K[移动端Socket.IO客户端] --> L[Socket.IO服务器]
|
|
|
|
|
+ L --> M[实时数据处理]
|
|
|
|
|
+ M --> N[Redis缓存]
|
|
|
|
|
+ L --> O[阿里云RTC服务]
|
|
|
|
|
+ end
|
|
|
|
|
+
|
|
|
|
|
+ A3 --> K
|
|
|
|
|
+ L --> B
|
|
|
|
|
+
|
|
|
|
|
+ style A1 fill:#e1f5fe
|
|
|
|
|
+ style A2 fill:#e1f5fe
|
|
|
|
|
+ style A3 fill:#e1f5fe
|
|
|
style B fill:#f3e5f5
|
|
style B fill:#f3e5f5
|
|
|
style C fill:#fff3e0
|
|
style C fill:#fff3e0
|
|
|
style D fill:#e8f5e8
|
|
style D fill:#e8f5e8
|
|
|
style H fill:#fff0f5
|
|
style H fill:#fff0f5
|
|
|
style I fill:#f0fff0
|
|
style I fill:#f0fff0
|
|
|
|
|
+ style K fill:#fff0f5
|
|
|
|
|
+ style L fill:#f3e5f5
|
|
|
```
|
|
```
|