998211c483
- 从服务器拉取完整代码 - 按框架规范整理项目结构 - 配置 Drone CI 测试环境部署 - 包含后端(FastAPI)、前端(Vue3)、管理端 技术栈: Vue3 + TypeScript + FastAPI + MySQL
7.3 KiB
7.3 KiB
Ai 考陪练系统 (Ai EDU) - 前端页面规划 (V3)
本文档详细描述了 “Ai 考陪练系统” 的前端页面设计、核心元素及用户交互流程，旨在为前端开发提供一份清晰、完整的蓝图。
第一部分：公共与通用页面
1. 登录页 (Login Page)
- 页面目标: 用户访问系统的入口。
- 元素:
- 用户名/邮箱输入框
- 密码输入框
[登录]按钮[立即注册]链接 -> 跳转至 注册页
2. 注册页 (Registration Page)
- 页面目标: 新用户创建账号。
- 工作流: 用户注册后，账号状态默认为“待激活”，需等待管理员在后台审核并分配权限。
- 元素:
- 用户名输入框
- 密码输入框
- 确认密码输入框
[注册]按钮
- 交互: 注册成功后，提示“注册成功！请联系管理员为您激活账号并分配岗位。”
3. 个人中心 (User Profile Page)
- 页面目标: 所有登录用户查看和修改个人信息的基础页面。
- 元素:
- 显示个人基本信息（头像、姓名、岗位、所属团队）。
[修改个人信息]按钮[修改密码]按钮 -> 点击跳转至 修改密码页。
4. 修改密码页 (Change Password Page)
- 页面目标: 用户在登录状态下修改自己的密码。
- 元素:
- 旧密码输入框
- 新密码输入框
- 确认新密码输入框
[确认修改]按钮
第二部分：学员端 (Trainee View)
5. 首页 / 我的成长路径 (Dashboard / My Growth Path)
- 页面目标: 为学员提供可视化的学习蓝图，直观展示个人成长进度和当前任务。
- 页面布局与元素:
- 顶部 - 个人信息栏: 学员头像、姓名、岗位、经验值/等级。
- 中部左侧 - 能力雷达图: 由 Dify & 智能工牌 API 工作流驱动，展示多维度能力评估，并附有“刷新”按钮。
- 中部右侧及下方 - 成长路径图: 技能树形态，节点代表课程，分为已完成、当前任务、未解锁状态。
6. 课程中心 (Course Center)
- 页面目标: 整合学习、考试、陪练、问答功能，提供一站式能力提升入口。
- 布局与元素:
- 以课程卡片列表展示。
- 课程卡片内部: 包含封面、标题、进度条及核心功能按钮组：
[进入学习]-> 跳转至 课程详情页[播课]-> 跳转至 音频播放页[与课程对话]-> 跳转至 与课程对话页面[动态考试](学习进度达标后激活) -> 跳转至 考试页面[专项陪练](考试通过后激活) -> 跳转至 AI陪练页面
7. 课程详情页 (Course Detail Page)
- 页面目标: 提供沉浸式的、支持多种媒体格式的学习体验。
- 布局与元素:
- 顶部: 课程标题和简介。
- 主区域 - 课程材料列表:
元素: 这是一个列表，管理员上传的每份材料（视频、PDF、PPT、音频等）都作为列表中的一项。列表项: 每项都清晰标明材料类型（如 [视频]、[文档]）和标题。
- 交互:
- 点击视频材料，可在页面内或弹窗中直接播放。
- 点击文档（PDF/PPT），可调用浏览器内置的预览功能或在新标签页打开。
- 点击音频材料，跳转至 音频播放页。
8. 音频播放页 (Audio Player Page)
- 页面目标: 提供一个无干扰的沉浸式音频学习环境。
- 布局与元素:
- 页面中央显示课程封面或相关背景图。
- 底部为音频播放器控件，包含播放/暂停按钮、进度条、音量控制、倍速播放选项。
9. 考试页面 (Exam Page)
- 页面目标: 提供无干扰的答题环境。
- 布局与元素: 顶部状态栏（倒计时）、左侧题号导航、右侧答题区、底部操作栏。
10. 考试结果页 (Exam Result Page)
- 页面目标: 提供清晰的考试反馈。
- 布局与元素: 成绩总结、错题记录与详细解析。
11. AI陪练页面 (AI Practice Page)
- 页面目标: 提供高度仿真的语音对话实战环境。
- 布局与元素: 全屏沉浸式语音通话界面，底部为“接听”、挂断按钮。
12. 陪练分析报告页 (Practice Analysis Report Page)
- 页面目标: 提供多维度、可复盘的陪练效果分析。
- 布局与元素: 综合评分、能力维度雷达图、完整对话复盘（标注“亮点话术”与“金牌话术”）。
13. 与课程对话页面 (Chat with Course Page)
- 页面目标: 让学员能通过对话形式对课程内容进行提问和探讨。
- 布局与元素: 标准聊天界面，由 Coze 工作流驱动，加载课程知识库进行问答。
第三部分：管理者端 (Manager View)
14. 团队看板 (Team Dashboard)
- 页面目标: 宏观监控团队学习状态。
- 元素: 数据图表展示团队整体学习进度、平均分、能力短板等。
15. 团队成员管理 (Team Management)
- 页面目标: 查看团队成员学习详情并进行指导。
- 元素: 成员列表。点击可进入该成员的个人学习视图。
16. 任务中心 (Assignment Center)
- 页面目标: 向团队或个人分配学习任务。
- 元素: 课程选择器、成员选择器、截止日期设置、
[发布任务]按钮。
第四部分：系统管理员端 (Admin View)
17. 管理员仪表盘 (Admin Dashboard)
- 页面目标: 监控整个系统的核心运营数据。
- 元素: 统计卡片和图表（用户总数、课程数、日活、待激活用户数等）。
18. 用户管理 (User Management)
- 页面目标: 对系统所有用户进行统一管理，包括激活新用户和维护现有用户。
- 元素:
- 用户列表（含按“状态”筛选功能：已激活/待激活）。
[新增用户]按钮。
- 交互:
- 对于“待激活”用户: 行操作按钮为
[激活账号]。点击后弹出模态框，让管理员为其分配岗位和角色。 - 对于“已激活”用户: 行操作按钮包括：
[编辑]：修改用户信息、岗位、角色。[重置密码]：点击后弹窗确认，然后显示一个生成的临时密码，供管理员复制。[禁用/启用]：切换用户可用状态。
- 对于“待激活”用户: 行操作按钮为
19. 岗位管理 (Position Management)
- 页面目标: 对公司所有岗位进行增删改查。
- 元素:
- 岗位列表，展示岗位名称和岗位描述。
[新增岗位]按钮。
20. 课程管理 (Course Library Management)
- 页面目标: 对所有课程内容进行增删改查。
- 元素:
- 课程列表，展示课程名称、所属系列、状态（发布/草稿）。
[新增课程]按钮。
- 交互:
- 新增/修改课程页: 包含课程标题、封面、简介等。核心是 “课程内容上传区”，支持上传多种格式文件。
21. 成长路径管理 (Growth Path Management)
- 页面目标: 为不同岗位规划学习路径。
- 元素: 可视化拖拽界面，左侧为课程库，右侧为画布。
22. 陪练场景库管理 (Practice Scene Management)
- 页面目标: 管理通用的、非课程绑定的AI陪练场景。
- 元素: 场景列表，可对场景进行增、删、改、查。