998211c483
- 从服务器拉取完整代码 - 按框架规范整理项目结构 - 配置 Drone CI 测试环境部署 - 包含后端(FastAPI)、前端(Vue3)、管理端 技术栈: Vue3 + TypeScript + FastAPI + MySQL
181 lines
7.3 KiB
Markdown
181 lines
7.3 KiB
Markdown
# 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陪练场景。
|
||
- **元素**: 场景列表，可对场景进行增、删、改、查。
|