# 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陪练场景。
- **元素**: 场景列表，可对场景进行增、删、改、查。