Files
012-kaopeilian/docs/规划/完成审核的文件备份/页面与按钮速查.md
111 998211c483 feat: 初始化考培练系统项目
- 从服务器拉取完整代码
- 按框架规范整理项目结构
- 配置 Drone CI 测试环境部署
- 包含后端(FastAPI)、前端(Vue3)、管理端

技术栈: Vue3 + TypeScript + FastAPI + MySQL
2026-01-24 19:33:28 +08:00

12 KiB
Raw Blame History

页面与按钮速查(简版)

面向本地开发测试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,注册: /register404: /: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

  • 作用: 未匹配路由提示与返回入口。