admin/012-kaopeilian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e7202a6244a23670dbe24b7f5e41ee18c35799aa
012-kaopeilian/frontend/页面与按钮速查.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，注册: /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

  • 作用: 未匹配路由提示与返回入口。
Reference in New Issue View Git Blame Copy Permalink