## 页面与按钮速查（简版） > 面向本地开发测试（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` - **作用**: 未匹配路由提示与返回入口。