组件架构

版本信息

版本	日期	描述	作者
2.4	2025-09-20	与主架构文档版本一致	Winston
2.5	2025-09-24	更新技术栈信息，修正数据库类型	Winston
2.6	2025-09-27	添加移动端应用组件架构信息	Winston

前端组件架构

实际项目组件组织:

src/client/
├── admin/                 # 管理后台应用
│   ├── components/        # 管理后台专用组件
│   │   ├── ProtectedRoute.tsx    # 路由保护组件
│   │   ├── ErrorPage.tsx         # 错误页面
│   │   └── NotFoundPage.tsx      # 404页面
│   ├── hooks/            # 管理后台Hooks
│   │   └── AuthProvider.tsx      # 认证状态管理
│   ├── layouts/          # 布局组件
│   │   └── MainLayout.tsx        # 主布局
│   ├── pages/            # 页面组件
│   │   ├── Dashboard.tsx         # 仪表板
│   │   ├── Login.tsx             # 登录页面
│   │   ├── Users.tsx             # 用户管理
│   │   └── Files.tsx             # 文件管理页面
│   ├── routes.tsx        # 路由配置
│   └── index.tsx         # 管理后台入口
├── home/                 # 用户前台应用 (已实现)
│   ├── components/       # Home专用组件
│   │   ├── ErrorPage.tsx         # 错误页面组件
│   │   ├── FilePreview.tsx       # 文件预览组件
│   │   ├── NotFoundPage.tsx      # 404页面组件
│   │   ├── ProtectedRoute.tsx    # 路由保护组件
│   │   ├── RechargeRecords.tsx   # 充值记录组件
│   │   ├── UserInfoModal.tsx     # 用户信息弹窗
│   │   ├── WordViewer.tsx        # Word文档查看器
│   │   └── ui/                   # Home专用UI组件
│   ├── hooks/            # Home专用Hooks
│   │   └── AuthProvider.tsx      # 认证状态管理
│   ├── layouts/          # 布局组件
│   │   └── MainLayout.tsx        # 主布局组件
│   ├── pages/            # 页面组件 (14个功能页面)
│   │   ├── HomePage.tsx          # 首页
│   │   ├── AboutPage.tsx         # 关于页面
│   │   ├── AIToolsPage.tsx       # AI工具页面
│   │   ├── ContactPage.tsx       # 联系页面
│   │   ├── DesignPlanningPage.tsx # 设计规划页面
│   │   ├── LoginPage.tsx         # 登录页面
│   │   ├── MemberPage.tsx        # 会员页面
│   │   ├── PricingPage.tsx       # 定价页面
│   │   ├── ProfilePage.tsx       # 个人资料页面
│   │   ├── RechargePage.tsx      # 充值页面
│   │   ├── RegisterPage.tsx      # 注册页面
│   │   ├── SoftwareRequirementsPage.tsx # 软件需求页面
│   │   ├── TalentSharingPage.tsx # 人才共享页面
│   │   ├── TemplateSquare.tsx    # 模板广场页面
│   │   └── WordPreview.tsx       # Word预览页面
│   ├── routes.tsx        # 路由配置 (18个路由)
│   └── 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组件
│   └── ui/              # shadcn/ui组件库（50+组件）
│       ├── button.tsx   # 按钮组件
│       ├── input.tsx    # 输入框组件
│       ├── table.tsx    # 表格组件
│       └── ...          # 其他组件
├── hooks/               # 共享Hooks
├── lib/                 # 工具库
├── utils/               # 工具函数
│   └── minio.ts         # MinIO上传工具
└── api.ts               # API客户端配置

技术栈配置:

前端框架: React 19.1.0 + TypeScript
路由: React Router v7
状态管理: @tanstack/react-query (服务端状态) + Context (本地状态)
UI组件库: shadcn/ui (基于Radix UI)
构建工具: Vite 7.0.0
样式: Tailwind CSS 4.1.11
HTTP客户端: 基于Hono Client的封装 + axios适配器
实时通信: Socket.IO客户端 (课堂和股票实时数据)
音视频: 阿里云RTC SDK (实时音视频通信)
图表: ECharts (股票图表展示)
日期处理: dayjs (中文日期格式化)

后端组件架构

实际后端项目结构:

src/server/
├── api/                    # API路由层 (10+业务模块路由)
│   ├── auth/              # 认证相关路由
│   │   ├── login/password.ts       # 密码登录路由
│   │   ├── logout.ts      # 登出路由
│   │   ├── register/create.ts    # 注册路由
│   │   ├── me/get.ts      # 获取当前用户信息
│   │   └── sso-verify.ts  # SSO验证路由
│   ├── users/             # 用户管理路由 (通用CRUD)
│   ├── roles/             # 角色管理路由 (通用CRUD)
│   ├── files/              # 文件管理路由
│   │   ├── multipart-policy/    # 多部分上传策略
│   │   ├── multipart-complete/  # 完成多部分上传
│   │   ├── [id]/               # 文件操作路由
│   │   └── upload-policy/      # 上传策略路由
│   └── __integration_tests__/  # 集成测试
├── modules/               # 业务模块层
│   ├── auth/              # 认证业务模块
│   │   ├── auth.service.ts # 认证服务
│   │   └── __tests__/     # 认证测试
│   ├── users/             # 用户业务模块
│   │   ├── user.entity.ts  # 用户实体
│   │   ├── user.service.ts # 用户服务
│   │   └── __tests__/     # 用户测试
│   ├── files/              # 文件业务模块
│   │   ├── file.entity.ts  # 文件实体
│   │   ├── file.service.ts # 文件服务
│   │   ├── minio.service.ts # MinIO服务
│   │   ├── file.schema.ts  # 文件验证Schema
│   │   └── __tests__/     # 文件测试
├── utils/                 # 工具层
│   ├── generic-crud.service.ts  # 通用CRUD服务
│   ├── generic-crud.routes.ts   # 通用CRUD路由
│   ├── errorHandler.ts    # 错误处理
│   ├── backup.ts          # 数据库备份工具
│   ├── restore.ts         # 数据库恢复工具
│   ├── logger.ts          # 日志工具
│   └── __tests__/         # 工具测试
├── middleware/            # 中间件层
│   ├── auth.middleware.ts           # 认证中间件
│   └── permission.middleware.ts     # 权限中间件
├── types/                # 类型定义
├── data-source.ts        # 数据库连接配置
└── index.ts              # 服务器入口

后端技术栈配置:

框架: Hono 4.8.5 + TypeScript
数据库: MySQL 8.0.36 + TypeORM 0.3.25
验证: Zod schema验证
认证: JWT Bearer Token
API文档: @hono/zod-openapi + Swagger UI
测试: Vitest + hono/testing
实时通信: Socket.IO服务器端 (课堂和股票实时数据)
对象存储: MinIO (文件存储服务)
缓存: Redis 7.0.4 (会话缓存和临时数据)

现有组件优化

通用CRUD服务:

责任: 提供类型安全的通用CRUD操作，支持自定义扩展
现状: 已实现完整功能，支持关联查询和复杂操作
优化重点: 增强错误处理、添加测试覆盖、优化性能

API文档组件:

责任: 自动生成和维护OpenAPI文档
现状: 通过@hono/zod-openapi集成，提供Swagger UI
优化重点: 完善文档示例、确保文档与代码同步

文件管理服务:

责任: 提供MinIO对象存储集成，支持文件上传、下载、删除等操作
现状: 已实现完整功能，支持分段上传、预签名URL生成
核心功能:
- 单文件上传（≤5MB）
- 多部分分段上传（>5MB大文件）
- 预签名URL生成（支持下载和直接访问）
- 文件元数据管理（数据库记录）
- 文件删除（同时删除MinIO对象和数据库记录）
优化重点: 增强大文件处理能力，优化上传性能

移动端实时通信组件:

责任: 提供课堂系统和股票训练系统的实时通信功能
现状: 已实现完整功能，包含Socket.IO客户端和服务器端
核心功能:
- 课堂实时消息传递（文字、图片、文件）
- 股票实时数据推送（价格、K线图、交易信息）
- 阿里云RTC音视频通信（实时音视频课堂）
- 考试系统实时监控和交卷
- 视频回放和播放功能
优化重点: 优化实时数据推送性能，增强音视频质量

组件交互

graph TD
    subgraph "前端应用层"
        A1[管理后台React组件]
        A2[用户前台React组件]
        A3[移动端React组件]
    end

    A1 --> B[Hono API路由]
    A2 --> B
    A3 --> B

    B --> C[通用CRUD服务]
    C --> D[TypeORM实体]
    C --> E[Zod验证]
    B --> F[OpenAPI文档生成]
    F --> G[Swagger UI]
    B --> H[文件管理服务]
    H --> I[MinIO对象存储]
    H --> J[文件实体管理]

    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 C fill:#fff3e0
    style D fill:#e8f5e8
    style H fill:#fff0f5
    style I fill:#f0fff0
    style K fill:#fff0f5
    style L fill:#f3e5f5

component-architecture.md 12 KB 文件历史 原始文件

组件架构

版本信息

前端组件架构

后端组件架构

现有组件优化

组件交互

component-architecture.md 12 KB

文件历史原始文件