012-kaopeilian/frontend

考培练系统前端

基于 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

安装依赖

npm install

启动开发服务器

npm run dev
# 或使用启动脚本
./start.sh

访问地址：http://localhost:3001

构建生产版本

npm run build

预览生产版本

npm run preview

🎯 核心功能

🎓 学员功能

• 智能学习路径: 个性化学习推荐
• 多媒体课程: 支持视频、音频、文档等多种格式
• AI智能陪练: 真实场景模拟，智能反馈
• 动态考试系统: 自适应难度调整
• 学习数据分析: 详细的学习报告和进度跟踪

👨‍💼 管理者功能

• 团队数据看板: 实时团队学习数据
• 课程内容管理: 创建、编辑、发布课程
• 学习路径设计: 为不同岗位设计学习路径
• 陪练场景配置: 自定义AI陪练场景
• 学习任务分配: 灵活的任务管理系统

🔧 系统管理功能

• 用户权限管理: 多角色权限控制
• 组织架构管理: 岗位和部门管理
• 系统监控: 实时系统状态和日志
• 数据统计分析: 全局数据洞察

🔧 技术亮点

🏗 架构设计

• API层抽象: 统一的接口调用和模拟数据管理
• 组件化开发: 高度复用的组件设计
• 响应式设计: 移动端友好的界面适配
• 模块化路由: 按功能模块组织的路由结构

🛡 质量保障

• TypeScript: 完整的类型检查和智能提示
• 错误处理: 全局错误捕获和用户友好提示
• 内存管理: ECharts等组件的内存泄漏防护
• 加载状态: 统一的加载状态管理

🎨 用户体验

• 平滑动画: 页面切换和交互动画
• 智能搜索: 多维度搜索和筛选
• 数据可视化: 丰富的图表和统计展示
• 操作反馈: 及时的操作结果反馈

📊 项目状态

✅ 已完成功能

• 完整的导航系统和路由配置
• 所有主要页面的开发和优化
• API层抽象和模拟数据系统
• 全局错误处理和加载状态管理
• ECharts内存泄漏修复
• 移动端响应式适配
• 课程头图上传管理功能
• 陪练记录页面和对话回放功能
• 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. 构建镜像：

docker build -t kaopeilian-frontend .

2. 运行容器：

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加速
• 缓存策略: 合理的浏览器缓存配置