998211c483
- 从服务器拉取完整代码 - 按框架规范整理项目结构 - 配置 Drone CI 测试环境部署 - 包含后端(FastAPI)、前端(Vue3)、管理端 技术栈: Vue3 + TypeScript + FastAPI + MySQL
388 lines
12 KiB
Markdown
388 lines
12 KiB
Markdown
# 考培练系统前端
|
||
|
||
基于 Vue 3 + TypeScript + Element Plus 开发的智能考试练习系统前端。
|
||
|
||
## 🚀 项目概述
|
||
|
||
考培练系统是一个集考试、培训、陪练于一体的智能学习平台，支持多角色用户（学员、管理者、系统管理员），提供完整的学习闭环体验。
|
||
|
||
## ✨ 核心特性
|
||
|
||
- 🎨 **现代化设计** - 白底、爽朗干净高级的界面设计，细腻的交互效果
|
||
- 📱 **响应式布局** - 完美适配各种屏幕尺寸，支持移动端操作
|
||
- 🚀 **高性能** - 基于 Vite 构建，快速的开发体验
|
||
- 🧠 **AI智能** - 集成AI陪练功能，智能对话和反馈
|
||
- 🎯 **角色导向** - 针对不同用户角色提供专属功能模块
|
||
- 🔒 **安全可靠** - 完善的错误处理和数据保护机制
|
||
|
||
## 🛠 技术栈
|
||
|
||
- **框架**: Vue 3.4 (Composition API)
|
||
- **语言**: TypeScript 5.2
|
||
- **UI 组件库**: Element Plus 2.6
|
||
- **路由**: Vue Router 4.3
|
||
- **状态管理**: Pinia 2.1
|
||
- **构建工具**: Vite 5.1
|
||
- **HTTP 客户端**: Axios
|
||
- **样式**: SCSS
|
||
- **图表**: ECharts 6.0
|
||
- **开发工具**: TypeScript
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
kaopeilian-frontend/
|
||
├── src/
|
||
│ ├── api/ # API层抽象
|
||
│ │ ├── admin/ # 管理员模块API
|
||
│ │ ├── mock/ # 模拟数据
|
||
│ │ ├── config.ts # API配置
|
||
│ │ ├── request.ts # 请求封装
|
||
│ │ └── index.ts # API统一导出
|
||
│ ├── views/ # 页面组件
|
||
│ │ ├── admin/ # 系统管理页面
|
||
│ │ ├── analysis/ # 数据分析页面
|
||
│ │ ├── dashboard/ # 首页
|
||
│ │ ├── exam/ # 考试练习页面
|
||
│ │ ├── manager/ # 管理者页面
|
||
│ │ ├── trainee/ # 学员页面
|
||
│ │ ├── user/ # 个人中心页面
|
||
│ │ ├── login/ # 登录页
|
||
│ │ ├── register/ # 注册页
|
||
│ │ └── error/ # 错误页
|
||
│ ├── layout/ # 布局组件
|
||
│ ├── router/ # 路由配置
|
||
│ ├── utils/ # 工具函数
|
||
│ │ ├── errorHandler.ts # 全局错误处理
|
||
│ │ └── loadingManager.ts # 加载状态管理
|
||
│ ├── style/ # 全局样式
|
||
│ ├── App.vue # 根组件
|
||
│ └── main.ts # 入口文件
|
||
├── package.json # 项目配置
|
||
├── vite.config.ts # Vite配置
|
||
├── tsconfig.json # TypeScript配置
|
||
└── 导航栏规划.md # 导航结构规划
|
||
```
|
||
|
||
## 🧭 导航栏结构
|
||
|
||
### 📊 首页
|
||
|
||
- **路径**: `/dashboard`
|
||
- **功能**: 系统总体概览，显示关键指标和最近活动
|
||
|
||
### 👨🎓 学员中心
|
||
|
||
- **路径**: `/trainee`
|
||
- **说明**: 学员专用功能模块
|
||
|
||
#### 子页面：
|
||
|
||
├── 📈 **成长路径** (`/trainee/growth-path`)
|
||
│ └── 个人学习路径和能力发展轨迹
|
||
│
|
||
├── 📚 **课程中心** (`/trainee/course-center`)
|
||
│ ├── 浏览可用课程
|
||
│ ├── 进入学习
|
||
│ ├── 播课功能
|
||
│ ├── 与课程对话
|
||
│ ├── 动态考试
|
||
│ └── 专项陪练
|
||
│
|
||
├── 🤖 **陪练中心** (`/trainee/ai-practice-center`)
|
||
│ └── AI智能陪练功能
|
||
│
|
||
├── 📄 **成绩报告** (`/trainee/score-report`)
|
||
│ └── 个人成绩查看和分析
|
||
│
|
||
├── ❌ **错题分析** (`/trainee/mistakes`)
|
||
│ └── 个人错题统计和分析
|
||
│
|
||
└── 📋 **陪练记录** (`/trainee/practice-records`)
|
||
├── 查看所有陪练会话记录
|
||
├── 对话回放功能
|
||
└── 点击具体记录可跳转到陪练分析报告
|
||
|
||
### 📊 数据分析
|
||
|
||
- **路径**: `/analysis`
|
||
- **说明**: 系统级数据分析功能
|
||
|
||
#### 子页面：
|
||
|
||
└── 📈 **统计分析** (`/analysis/statistics`)
|
||
└── 系统整体数据统计和可视化分析
|
||
|
||
### 👨💼 管理者中心
|
||
|
||
- **路径**: `/manager`
|
||
- **说明**: 管理者专用功能模块
|
||
|
||
#### 子页面：
|
||
|
||
├── 📊 **团队看板** (`/manager/team-dashboard`)
|
||
│ └── 团队整体数据概览
|
||
│
|
||
├── 👥 **团队管理** (`/manager/team-management`)
|
||
│ └── 管理团队成员信息
|
||
│
|
||
├── 📝 **任务中心** (`/manager/assignment-center`)
|
||
│ └── 分配和管理学习任务
|
||
│
|
||
├── 📚 **课程管理** (`/manager/course-management`)
|
||
│ ├── 管理课程内容和结构
|
||
│ └── 📷 **课程头图上传管理** (新增功能)
|
||
│
|
||
├── 🛤️ **成长路径管理** (`/manager/growth-path-management`)
|
||
│ └── 设计和管理学习路径
|
||
│
|
||
└── 🎭 **陪练场景管理** (`/manager/practice-scene-management`)
|
||
└── 管理AI陪练场景库
|
||
|
||
### 🔧 系统管理
|
||
|
||
- **路径**: `/admin`
|
||
- **说明**: 系统管理员专用功能
|
||
|
||
#### 子页面：
|
||
|
||
├── 📊 **管理员仪表盘** (`/admin/dashboard`)
|
||
│ └── 系统整体运营数据
|
||
│
|
||
├── 👤 **用户管理** (`/admin/user-management`)
|
||
│ └── 管理所有系统用户
|
||
│
|
||
├── 🏢 **岗位管理** (`/admin/position-management`)
|
||
│ └── 管理组织架构和岗位信息
|
||
│
|
||
└── 📋 **系统日志** (`/admin/logs`)
|
||
└── 查看系统运行日志
|
||
|
||
### 👤 个人中心
|
||
|
||
- **路径**: `/user`
|
||
- **说明**: 个人账户相关功能
|
||
|
||
#### 子页面：
|
||
|
||
├── 👤 **个人信息** (`/user/profile`)
|
||
│ └── 管理个人资料和设置
|
||
│
|
||
└── ⚙️ **系统设置** (`/user/settings`)
|
||
└── 个人偏好和系统配置
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- Node.js >= 16.0.0
|
||
- npm >= 7.0.0
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
# 或使用启动脚本
|
||
./start.sh
|
||
```
|
||
|
||
访问地址：http://localhost:3001
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 预览生产版本
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
## 🎯 核心功能
|
||
|
||
### 🎓 学员功能
|
||
|
||
- **智能学习路径**: 个性化学习推荐
|
||
- **多媒体课程**: 支持视频、音频、文档等多种格式
|
||
- **AI智能陪练**: 真实场景模拟，智能反馈
|
||
- **动态考试系统**: 自适应难度调整
|
||
- **学习数据分析**: 详细的学习报告和进度跟踪
|
||
|
||
### 👨💼 管理者功能
|
||
|
||
- **团队数据看板**: 实时团队学习数据
|
||
- **课程内容管理**: 创建、编辑、发布课程
|
||
- **学习路径设计**: 为不同岗位设计学习路径
|
||
- **陪练场景配置**: 自定义AI陪练场景
|
||
- **学习任务分配**: 灵活的任务管理系统
|
||
|
||
### 🔧 系统管理功能
|
||
|
||
- **用户权限管理**: 多角色权限控制
|
||
- **组织架构管理**: 岗位和部门管理
|
||
- **系统监控**: 实时系统状态和日志
|
||
- **数据统计分析**: 全局数据洞察
|
||
|
||
## 🔧 技术亮点
|
||
|
||
### 🏗 架构设计
|
||
|
||
- **API层抽象**: 统一的接口调用和模拟数据管理
|
||
- **组件化开发**: 高度复用的组件设计
|
||
- **响应式设计**: 移动端友好的界面适配
|
||
- **模块化路由**: 按功能模块组织的路由结构
|
||
|
||
### 🛡 质量保障
|
||
|
||
- **TypeScript**: 完整的类型检查和智能提示
|
||
- **错误处理**: 全局错误捕获和用户友好提示
|
||
- **内存管理**: ECharts等组件的内存泄漏防护
|
||
- **加载状态**: 统一的加载状态管理
|
||
|
||
### 🎨 用户体验
|
||
|
||
- **平滑动画**: 页面切换和交互动画
|
||
- **智能搜索**: 多维度搜索和筛选
|
||
- **数据可视化**: 丰富的图表和统计展示
|
||
- **操作反馈**: 及时的操作结果反馈
|
||
|
||
## 📊 项目状态
|
||
|
||
### ✅ 已完成功能
|
||
|
||
- [X] 完整的导航系统和路由配置
|
||
- [X] 所有主要页面的开发和优化
|
||
- [X] API层抽象和模拟数据系统
|
||
- [X] 全局错误处理和加载状态管理
|
||
- [X] ECharts内存泄漏修复
|
||
- [X] 移动端响应式适配
|
||
- [X] 课程头图上传管理功能
|
||
- [X] 陪练记录页面和对话回放功能
|
||
- [X] TypeScript类型安全保障
|
||
|
||
### 🎯 核心页面
|
||
|
||
- **首页仪表盘**: 系统概览和快捷操作
|
||
- **学员中心**: 6个子页面，完整的学习体验
|
||
- **管理者中心**: 6个子页面，全面的管理功能
|
||
- **系统管理**: 4个子页面，系统级管理工具
|
||
- **数据分析**: 系统级统计分析
|
||
- **个人中心**: 个人信息和设置管理
|
||
|
||
### 🔄 最新更新
|
||
|
||
1. **修复页面异常**: 解决用户管理和岗位管理页面的数据加载问题
|
||
2. **完善课程头图管理**:
|
||
- 在卡片视图中添加hover显示的更换封面按钮
|
||
- 在列表视图中添加封面预览列和管理功能
|
||
- 提供完整的封面上传弹窗，支持预览和设置
|
||
3. **陪练记录系统**:
|
||
- 创建陪练记录页面作为分析报告入口
|
||
- 支持完整对话回放功能
|
||
- 提供统计概览和多维度筛选
|
||
- 实现记录到报告的页面跳转逻辑
|
||
4. **导航结构优化**: 按照用户角色和使用频率重新组织导航结构
|
||
|
||
## 🎨 界面特点
|
||
|
||
- **设计风格**: 现代化扁平设计，白底配色方案
|
||
- **色彩搭配**: 主色调渐变紫色(#667eea → #764ba2)，辅助色彩丰富
|
||
- **交互体验**: 平滑过渡动画，智能hover效果
|
||
- **信息架构**: 卡片式布局，层次分明，信息密度适中
|
||
|
||
## 🔒 安全特性
|
||
|
||
- **权限控制**: 基于角色的页面访问控制
|
||
- **数据保护**: 敏感数据加密和安全传输
|
||
- **操作日志**: 完整的用户操作记录
|
||
- **错误监控**: 全局错误捕获和上报机制
|
||
|
||
## 📱 移动端支持
|
||
|
||
- **响应式导航**: 移动端侧边栏滑动交互
|
||
- **触摸优化**: 适配触摸操作的界面元素
|
||
- **性能优化**: 移动端专用的性能优化策略
|
||
|
||
## 🔧 开发配置
|
||
|
||
### 本地开发
|
||
|
||
- **端口**: 3001 (访问 `http://localhost:3001`)
|
||
- **热重载**: 支持代码修改后自动刷新
|
||
- **代理配置**: 已内置 `/api` 代理至 `http://localhost:8000`
|
||
- **模拟数据**: 通过环境变量控制，联调时关闭
|
||
|
||
#### 联调环境配置（重要）
|
||
|
||
1) 在项目根目录创建 `.env.development`（如不存在）：
|
||
|
||
```
|
||
VITE_APP_TITLE=考培练系统（开发）
|
||
VITE_APP_ENV=development
|
||
VITE_API_BASE_URL=http://localhost:8000
|
||
VITE_WS_BASE_URL=ws://localhost:8000
|
||
VITE_API_TIMEOUT=10000
|
||
VITE_USE_MOCK_DATA=false
|
||
VITE_ENABLE_MOCK=false
|
||
VITE_ENABLE_REQUEST_LOG=true
|
||
VITE_LOG_LEVEL=info
|
||
```
|
||
|
||
2) 启动前端：
|
||
|
||
```
|
||
npm run dev
|
||
```
|
||
|
||
3) 预期行为：
|
||
- 登录、课程、陪练、考试等接口均通过代理转发到 `http://localhost:8000`
|
||
- Network 面板可见真实接口如 `/api/v1/auth/login`，响应含 `access-control-allow-origin: http://localhost:3001`
|
||
|
||
### 代码规范
|
||
|
||
- **TypeScript**: 严格类型检查
|
||
- **组件规范**: Composition API + `<script setup>`
|
||
- **样式规范**: SCSS模块化组织
|
||
- **命名规范**: 统一的文件和变量命名
|
||
|
||
## 🚀 部署说明
|
||
|
||
### Docker部署
|
||
|
||
已提供 `Dockerfile` 与 `nginx.conf`：
|
||
|
||
1. 构建镜像：
|
||
```bash
|
||
docker build -t kaopeilian-frontend .
|
||
```
|
||
2. 运行容器：
|
||
```bash
|
||
docker run -p 8080:80 kaopeilian-frontend
|
||
```
|
||
3. 访问：`http://localhost:8080`
|
||
|
||
容器内 Nginx 已做 SPA 回退，并将 `/api/` 代理到宿主机 `http://localhost:8000/`。
|
||
|
||
### 环境变量
|
||
|
||
复制 `env.example` 为 `.env` 并按需修改：
|
||
|
||
- `VITE_API_BASE_URL`: API基础地址（默认 `/api`）
|
||
- `VITE_APP_TITLE`: 应用标题（用于设置页面 `<title>`）
|
||
- `VITE_APP_ENV`: 运行环境标记（可选）
|
||
|
||
## 📈 性能优化
|
||
|
||
- **代码分割**: 按路由自动分割代码包
|
||
- **懒加载**: 页面组件按需加载
|
||
- **资源优化**: 图片压缩和CDN加速
|
||
- **缓存策略**: 合理的浏览器缓存配置
|