# 考培练系统前端 基于 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 + `