998211c483
- 从服务器拉取完整代码 - 按框架规范整理项目结构 - 配置 Drone CI 测试环境部署 - 包含后端(FastAPI)、前端(Vue3)、管理端 技术栈: Vue3 + TypeScript + FastAPI + MySQL
258 lines
12 KiB
Markdown
258 lines
12 KiB
Markdown
## 页面与按钮速查（简版）
|
||
|
||
> 面向本地开发测试（localhost）。涵盖导航结构、主要页面与核心按钮作用，便于快速查阅与联调。
|
||
|
||
### 前端页面框架概览
|
||
|
||
- 首页: `/dashboard`
|
||
- 学员中心: `/trainee`
|
||
- 成长路径: `/trainee/growth-path`
|
||
- 课程中心: `/trainee/course-center`
|
||
- 课程详情: `/trainee/course-detail`
|
||
- 音频播放: `/trainee/audio-player`
|
||
- 动态考试: `/trainee/exam`（或 `/exam/practice`）
|
||
- 考试结果: `/trainee/exam-result`
|
||
- AI陪练中心: `/trainee/ai-practice-center`
|
||
- AI陪练（会话页）: `/trainee/ai-practice`
|
||
- 陪练记录: `/trainee/practice-records`
|
||
- 陪练分析报告: `/trainee/practice-report/:id?`
|
||
- 与课程对话: `/trainee/chat-course`
|
||
- 成绩报告: `/trainee/score-report`
|
||
- 数据分析: `/analysis`
|
||
- 统计分析: `/analysis/statistics`
|
||
- 管理者中心: `/manager`
|
||
- 团队看板: `/manager/team-dashboard`
|
||
- 团队管理: `/manager/team-management`
|
||
- 任务中心: `/manager/assignment-center`
|
||
- 课程管理: `/manager/course-management`
|
||
- 创建课程: `/manager/create-course`
|
||
- 编辑课程: `/manager/edit-course/:id`
|
||
- 成长路径管理: `/manager/growth-path-management`
|
||
- 陪练场景管理: `/manager/practice-scene-management`
|
||
- 学员考试成绩: `/manager/student-scores`
|
||
- 学员陪练记录: `/manager/student-practice`
|
||
- 系统管理: `/admin`
|
||
- 管理员仪表盘: `/admin/dashboard`
|
||
- 用户管理: `/admin/user-management`
|
||
- 岗位管理: `/admin/position-management`
|
||
- 系统日志: `/admin/logs`
|
||
- 用户中心: `/user`
|
||
- 个人信息: `/user/profile`
|
||
- 系统设置: `/user/settings`
|
||
- 修改密码: `/user/change-password`
|
||
- 登录: `/login`，注册: `/register`，404: `/:pathMatch(.*)*`
|
||
|
||
### 左侧导航栏框架（实际侧边菜单）
|
||
|
||
- 首页
|
||
- 学员中心
|
||
- 成长路径
|
||
- 课程中心（在具体的课程下可跳转：进入学习、播课、与课程对话、动态考试、专项陪练）
|
||
- 陪练中心
|
||
- 成绩报告
|
||
- 错题分析
|
||
- 陪练记录（点击具体记录可跳转到陪练分析报告）
|
||
- 数据分析
|
||
- 统计分析
|
||
- 管理者中心
|
||
- 团队看板
|
||
- 团队管理
|
||
- 任务中心
|
||
- 课程管理
|
||
- 成长路径管理
|
||
- 陪练场景管理
|
||
- 学员考试成绩
|
||
- 学员陪练记录
|
||
- 系统管理
|
||
- 管理员仪表盘
|
||
- 用户管理
|
||
- 岗位管理
|
||
- 系统日志
|
||
- 个人中心
|
||
- 个人信息
|
||
- 系统设置
|
||
|
||
---
|
||
|
||
### 按页面速查（聚合版）
|
||
|
||
#### 公共与通用
|
||
- **顶部栏 (`layout/index.vue`)**:
|
||
- **展示**: 通知图标、用户下拉菜单。
|
||
- **主要按钮**: 【个人中心】(→/user/profile), 【系统设置】(→/user/settings), 【退出登录】(→/login)。
|
||
- **侧边栏**:
|
||
- **展示**: 菜单项、折叠/展开按钮。
|
||
- **主要按钮**: 各菜单项链接。
|
||
- **全局浮层**:
|
||
- **消息提示 (ElMessage)**: 用于成功/警告/错误/信息反馈，自动消失。
|
||
- **确认框 (ElMessageBox.confirm)**: 用于删除、状态切换等危险操作，按钮【确定/取消】。
|
||
- **警告/信息弹窗 (ElMessageBox.alert)**: 用于结果通知，单按钮如【知道了】。
|
||
- **说明**:
|
||
- **数据**: 前端当前以模拟数据为主（`API_CONFIG.useMockData = true`）。
|
||
- **交互**: 关键操作捕获异常并记录，通过 `loadingManager` 包装 API 调用显示加载态。
|
||
|
||
---
|
||
|
||
#### 首页: `/dashboard`
|
||
- **作用**: 整体概览，卡片/图表展示关键指标。
|
||
- **展示**: 指标卡片、核心图表总览。
|
||
- **表格列**: 无。
|
||
- **主要按钮**: 刷新、时间范围切换（如有）。
|
||
|
||
---
|
||
|
||
#### 学员中心
|
||
|
||
- **成长路径: `/trainee/growth-path`**
|
||
- **作用**: 展示个人能力雷达图与成长路径进度。
|
||
- **展示**: 能力雷达图、路径进度条/列表。
|
||
- **主要按钮**: 刷新评估（示意）。
|
||
|
||
- **课程中心: `/trainee/course-center`**
|
||
- **作用**: 浏览和选择课程。
|
||
- **展示**: 课程卡片列表（含封面、名称、进度）。
|
||
- **主要按钮**: 卡片上的【进入学习】(→课程详情), 【播课】(→音频播放), 【与课程对话】(→对话页), 【动态考试】(→考试), 【专项陪练】(→AI陪练)。
|
||
|
||
- **课程详情: `/trainee/course-detail`**
|
||
- **作用**: 学习课程内的具体材料。
|
||
- **展示**: 多媒体材料列表（视频/PDF/PPT/音频）。
|
||
- **主要按钮**: 各材料的【播放/预览/打开】。
|
||
|
||
- **陪练记录: `/trainee/practice-records`**
|
||
- **展示**: 统计卡片（总次数/平均评分/总时长/本月进步）、筛选（日期/场景/结果/关键词）。
|
||
- **表格列**: 会话ID｜陪练场景(Tag)｜陪练时长｜对话轮数｜综合评分(进度条+分值)｜陪练结果(Tag)｜陪练时间｜操作(查看报告/回放对话/导出)。
|
||
- **弹窗/浮层**:【对话回放弹窗】显示会话信息和消息列表。
|
||
- **触发入口**: 行内“回放对话”。
|
||
|
||
- **AI陪练中心: `/trainee/ai-practice-center`**
|
||
- **展示**: 场景卡片网格（名称/描述/类型/难度Tag/预计时长/使用次数/评分/状态）、筛选（类型/难度/关键词）。
|
||
- **主要按钮**: 卡片【开始陪练】【查看详情】；筛选【重置】。
|
||
- **弹窗/浮层**:【场景详情弹窗】显示场景基本信息、背景、AI角色、目标、关键词、统计；底部有【开始陪练/关闭】按钮。
|
||
- **触发入口**: 卡片上的“查看详情”。
|
||
|
||
- **AI陪练（会话）: `/trainee/ai-practice`**
|
||
- **展示**: 通话状态与计时、AI头像与角色提示、对话提示、音量指示。
|
||
- **主要按钮**: 圆形按钮【静音/挂断/扬声器】；准备页【返回/开始陪练】。
|
||
- **弹窗/浮层**:【陪练结束弹窗】显示时长/轮次，按钮【关闭】【查看分析报告】。
|
||
|
||
- **成绩报告/查分中心: `/trainee/score-report`**
|
||
- **展示**: 概览卡片（总次数/平均分/通过率/排名）；筛选（考试类型/科目/成绩范围/日期）。
|
||
- **表格列**: 考试名称(含类型Tag)｜科目｜得分｜总分｜正确率(进度条)｜用时｜考试时间｜状态(Tag)｜操作(查看详情/答题卡/导出)。
|
||
- **弹窗/浮层**:【成绩详情弹窗】含基本信息、成绩统计卡、分题型表格(题型/总数/正确/正确率/得分)。
|
||
- **触发入口**: 行内“查看详情”。
|
||
|
||
- **错题分析: `/trainee/mistakes`**
|
||
- **展示**: 错题卡片列表（题目、错误次数、来源等）。
|
||
- **主要按钮**: 顶部【错题重练】；卡片上【查看解析】【重新练习】【标记已掌握】。
|
||
|
||
- **动态考试: `/exam/practice`**
|
||
- **展示**: 轮次、题目进度、对错计数；题目（单选/多选/判断/填空）与选项/输入区。
|
||
- **主要按钮**: 单选点击判题；多选/判断/填空【提交/确认选择】；顶部【退出考试】。
|
||
- **弹窗/浮层**:【答案解析弹窗】答错时弹出，有“记住了”按钮进入下一题；【考试结果Alert】结束时显示各轮得分与平均分。
|
||
|
||
---
|
||
|
||
#### 管理者中心
|
||
|
||
- **团队看板: `/manager/team-dashboard`**
|
||
- **作用**: 团队整体数据概览。
|
||
- **展示**: 团队关键指标卡片、图表（学习进度、考试成绩等）。
|
||
- **主要按钮**: 日期筛选、导出（示意）。
|
||
|
||
- **团队管理: `/manager/team-management`**
|
||
- **作用**: 查看和管理团队成员。
|
||
- **展示**: 成员列表。
|
||
- **表格列**: 待确认（常见：姓名/岗位/学习进度/平均分/操作）。
|
||
- **主要按钮**: 查看/编辑成员（示意）。
|
||
|
||
- **任务中心: `/manager/assignment-center`**
|
||
- **作用**: 向团队成员分配学习任务。
|
||
- **展示**: 任务创建表单或列表。
|
||
- **主要按钮**: 课程选择、成员选择、设置截止日期、【发布任务】。
|
||
|
||
- **课程管理: `/manager/course-management`**
|
||
- **展示**: 统计卡片；课程卡片/表格切换。
|
||
- **表格列(列表视图)**: 课程名称｜课程分类｜资料数｜状态(Tag)｜更新时间｜操作(详情/编辑/岗位分配/删除)。
|
||
- **主要按钮**: 顶部【新建课程】；卡片/行内【详情/编辑/岗位分配/删除】。
|
||
- **弹窗/浮层**:
|
||
-【课程详情弹窗】含基本信息/岗位分配Tab；底部【关闭/编辑课程】。
|
||
-【岗位选择器弹窗】可选项列表；底部【取消/确认选择】。
|
||
-【知识点/资料管理弹窗】上传/下载/删除，AI拆解/重新分析。
|
||
-【确认框】删除课程/删除资料/重新分析/删除知识点。
|
||
- **触发入口**: 行内“详情/岗位分配”等；详情页Tab内按钮。
|
||
|
||
- **成长路径管理: `/manager/growth-path-management`**
|
||
- **展示**: 左侧课程库(折叠)＋右侧画布节点与连线＋路径统计（总数/必修/总时长/预计天数）。
|
||
- **主要按钮**: 顶部【保存路径】；画布节点下拉【设为必修/选修/设置前置/删除】；画布上方【清空画布/自动布局】。
|
||
- **弹窗/浮层**:【设置前置课程弹窗】复选；【切换岗位未保存】确认框；【清空画布/删除节点】确认框。
|
||
|
||
- **陪练场景管理: `/manager/practice-scene-management`**
|
||
- **展示**: 场景卡片列表（含名称/类型/难度/状态/描述/背景/AI角色/目标/关键词/时长/使用次数/评分等）。
|
||
- **主要按钮**: 顶部【新增场景】；卡片更多【查看/编辑/测试/复制/启用/禁用/删除】。
|
||
- **弹窗/浮层**:【新增/编辑场景弹窗】表单；【确认框】复制/启用-禁用/删除。
|
||
|
||
- **学员考试成绩: `/manager/student-scores`**
|
||
- **作用**: 查看学员的考试成绩统计。
|
||
- **展示**: 筛选条件、成绩列表。
|
||
- **表格列**: 待确认（常见：学员姓名/考试名称/科目/分数/时间/操作）。
|
||
- **主要按钮**: 筛选、导出、查看详情。
|
||
|
||
- **学员陪练记录: `/manager/student-practice`**
|
||
- **作用**: 查看学员的陪练记录。
|
||
- **展示**: 筛选条件、记录列表。
|
||
- **表格列**: 待确认（常见：学员姓名/陪练场景/时长/评分/时间/操作）。
|
||
- **主要按钮**: 查看报告、回放。
|
||
|
||
---
|
||
|
||
#### 系统管理
|
||
|
||
- **管理员仪表盘: `/admin/dashboard`**
|
||
- **展示**: 指标卡片、图表、系统动态、待处理事项、快捷操作卡。
|
||
- **主要按钮**: 日期范围选择、【刷新数据】、【查看详情/导出数据】、【处理/查看】。
|
||
|
||
- **用户管理: `/admin/user-management`**
|
||
- **展示**: 筛选（用户名/状态/角色/岗位）；待激活提醒；分页。
|
||
- **表格列**: (多选)｜用户名｜姓名｜邮箱｜手机号｜岗位(Tag)｜角色(Tag)｜状态(Tag)｜注册时间｜操作(激活/编辑/重置密码/禁用-启用/更多: 详情/操作日志/删除)。
|
||
- **弹窗/浮层**:【激活用户弹窗】【编辑用户弹窗】；【确认框: 重置/禁用-启用/删除】。
|
||
- **触发入口**: 待激活提醒“查看待激活用户”、行内操作。
|
||
|
||
- **岗位管理: `/admin/position-management`**
|
||
- **展示**: 岗位卡片网格（含名称/状态/描述/人数/必修-选修/技能/均值等）。
|
||
- **表格列**:
|
||
- 弹窗-成员表: 姓名｜用户名｜所属团队｜学习进度(进度条)｜平均成绩(色)｜操作。
|
||
- 弹窗-课程管理三表（必修/选修/所有）: 课程名称｜分类｜学时｜优先级/推荐级/难度｜状态｜操作。
|
||
- **弹窗/浮层**:【新增/编辑岗位】【查看成员】【课程管理】；【确认框: 停用-启用/删除】。
|
||
|
||
- **系统日志: `/admin/logs`**
|
||
- **展示**: 筛选（日期范围/级别/类型/关键词）。
|
||
- **表格列**: 待确认（常见：时间/级别/类型/消息/请求ID/操作）。
|
||
- **弹窗/浮层**:【查看详情】弹窗（堆栈/请求数据）。
|
||
|
||
---
|
||
|
||
#### 数据分析
|
||
|
||
- **统计分析: `/analysis/statistics`**
|
||
- **作用**: 系统级数据与可视化。
|
||
- **展示**: 统计图表与筛选。
|
||
- **表格列**: 待确认。
|
||
|
||
---
|
||
|
||
#### 用户中心与认证
|
||
|
||
- **个人信息: `/user/profile`**
|
||
- **展示**: 个人信息表单。
|
||
- **主要按钮**: 【修改个人信息】【修改密码】(→/user/change-password)。
|
||
- **修改密码: `/user/change-password`**
|
||
- **展示**: 修改密码表单。
|
||
- **主要按钮**: 【确认修改】。
|
||
- **登录: `/login`**
|
||
- **注册: `/register`**
|
||
|
||
---
|
||
|
||
#### 错误页: `/404`
|
||
- **作用**: 未匹配路由提示与返回入口。
|