产品评审 · 待评审
系列课体系升级
需求文档 v2.0
AI陪练产品系列课体系升级，涵盖 PC 端课程管理双视图、3级目录、系列课卡片完整 CRUD、数据统计，以及手机端首页重构、左侧边栏、评分弹窗等模块。
一 · Background & Goals
项目背景与目标
为什么做，做成什么样
现状问题
当前"课程"只能称之为单元练习——每个课程是独立的、碎片化的训练场景，与业务视角中真正的"课程"概念存在根本性 gap：
- 业务视角：课程应是一组有逻辑递进关系的训练单元，围绕某个能力模块系统性地提升学员胜任力
- 产品现状：课程 = 单个练习，无层级、无结构、无能力体系
- 销售向客户展示时，无法呈现专业课程体系，只能展示零散的练习列表
- 管理员无法按角色和能力维度组织课程，课程管理效率低
本次目标
- 课程管理中支持系列课的创建、发布和管理 — 3级目录结构、完整的 CRUD 流程
- 数据统计中支持系列课的数据统计，同时优化数据统计的功能逻辑
- 手机端支持系列课的展示 — 优化手机端首页布局，支持"我的课程"Tab，新增课程列表页
老用户过渡策略
- 点击"课程管理"进入页面时，仍默认打开单元课的卡片视图（与现有体验一致）
- 用户可通过顶部 Tab 切换到"系列课"视图
- 后续系列课将成为课程管理中主要的课程形态，单元课将弱化为组成系列课的素材
二 · Product Research
产品调研
客户痛点与样板课验证的讲述逻辑
客户的困惑：看不懂、记不住、不敢买
客户在评估 AI 陪练产品时，面对零散的练习列表，无法理解"这到底能帮我解决什么问题"——不是功能不够，而是讲不清楚价值。
- 看不懂：当前产品只有单元课的扁平列表，客户看到的是一堆零散练习，无法理解这些练习背后的能力训练逻辑
- 记不住：没有从"岗位角色"到"具体练习"的递进结构，客户听完 Demo 后无法复述产品能解决什么
- 不敢买：缺乏体系感让客户觉得产品"只是零散工具"，而非一套完整的能力训练方案，决策信心不足
样板课验证的讲述逻辑
mgv 销售团队在长期客户沟通中总结出一套样板课讲述逻辑——按"角色→模块→胜任力"递进，客户能听懂、能记住、能决策。本次升级的核心驱动力正是将这套被验证的逻辑产品化。查看销售样板课框架 →
- 从角色切入：客户首先关心"我的岗位需要什么"，而非"你们有什么功能"
- 按模块展开：每个角色下的能力模块，让客户看到训练的完整覆盖面
- 落到胜任力：具体可衡量的能力项，让客户相信训练结果可评估、可追踪
调研结论：本次系列课体系升级的核心驱动力是客户认知——让产品自身就能讲清楚"我能帮你解决什么问题"，而非依赖销售人工串联。课程结构的每一层设计决策，都应回到"客户能否凭产品本身理解价值"这个检验标准。
三 · PC Requirements
PC 端需求
管理视角 · 课程管理 + 数据统计
功能模块总览
3.1 课程管理 — 系列课与单元课双视图 P0
单元课视图 — 默认打开，保持现有卡片布局
系列课视图 — Tab切换后展示3级目录 + 系列课卡片
- 课程管理页面顶部增加 Tab 切换：「单元课」|「系列课」
- 默认打开单元课视图（保障老用户习惯平滑过渡）
- 切换到"系列课"Tab 后，展示系列课的 3 级目录视图
- 单元课视图保持现有卡片布局不变
涉及页面：课程管理
关键设计点：Tab 默认值 = 单元课，不支持用户自定义排序（本期固定）
关键设计点：Tab 默认值 = 单元课，不支持用户自定义排序（本期固定）
3.2 系列课目录 — 3级结构 P0
- 系列课目录使用独立的新目录，支持 3 级树形结构，单元课的维持原状
- 课程管理页面左侧为 3 级目录导航侧边栏，右侧为课程列表
- 目录固定在页面左侧，不再支持收起展开（改为工作台左侧菜单支持收起）
- 其他功能复用单元课目录已有功能：新建目录、新建子目录、重命名、删除
涉及页面：工作台菜单、课程管理
3.3 系列课列表 P1
系列课列表 — 每行展示系列课信息，右侧操作按钮
列表行布局
- 封面图：缩略图，hover 时 scale 放大；无封面时显示灰色占位图标
- 标题区：标题 + 状态标签、描述（2行截断）、底部课程标签 + 统计数据 + 更新时间
- 操作区：右侧操作按钮，border-left 分隔，始终可见
信息字段
- 发布状态：标题右侧 pill 标签（已发布=绿色圆点 / 未发布=灰色圆点）
- 课程标签：颜色取自 label.color，背景为同色 10% 透明度
- 完成率进度条：>70% 蓝色 / 40%~70% 黄色 / <40% 红色
- 课程类型 icon：从 unit_type 读取，去重渲染
操作按钮规则
| 状态 | 常驻按钮 | 更多菜单 |
|---|---|---|
| 未发布 | 蓝色"发布课程"按钮 + 更多菜单 | 编辑、权限设置、创建副本、删除 |
| 已发布 | 数据统计 icon 按钮（折线图 SVG）+ 更多菜单 | 编辑、权限设置、创建副本、取消发布、删除 |
3.4 新建系列课 P1
选课阶段 — 左侧目录树 + 右侧课程卡片网格
新建系列课流程
入口：课程管理 → 系列课 Tab → 顶部"新建系列课"按钮，打开 AddCourseDialog（1100×720px）
新建流程
- 选课阶段（弹窗）：左侧目录树 + 右侧课程卡片网格（InfiniteScroll 无限滚动）；Checkbox 多选，最多选 10 门；顶部搜索；底部栏显示已选数量
- 编辑阶段（进入编辑页面）：填写名称/描述、上传封面、设置公开范围，确认发布
设置字段
- 封面图：800×600px（4:3），支持上传/AI生成
- 系列课名称：Input 必填，右侧 AI 生成按钮辅助命名
- 系列课说明：Textarea 选填，右侧 AI 生成按钮自动填入"包含 N 个单元课：单元课1、单元课2…"
- 公开范围：Radio（企业全部成员 / 指定成员）；指定成员时显示成员权限选择器
发布流程：点击"发布" → 创建系列课 → 关闭弹窗，打开
暂存草稿：设置页底部有"暂存"按钮，保存当前编辑状态，不发布，关闭弹窗，显示 toast"保存成功"
SeriesPublishSuccessDialog（发布成功弹窗，显示系列课名称、单元课数量、公开范围、协作者人数）→ "返回课程管理"按钮暂存草稿：设置页底部有"暂存"按钮，保存当前编辑状态，不发布，关闭弹窗，显示 toast"保存成功"
3.5 查看 / 编辑系列课 P0
编辑页 — 左侧目录导航 + 右侧课程详情，支持拖拽排序
- 查看态：
/course-management/series/:id?mode=view - 编辑态：
/course-management/series/:id?mode=edit - 与新建页共享同一套页面组件
SeriesCourseDetail，通过 URL 参数mode区分模式 - 点击"编辑"进入编辑态，重新拉取最新数据；封面图、描述、单元课列表均可修改
| 场景 | 发布 | 撤销 | 编辑 |
|---|---|---|---|
| mode=new（新建） | ✅ | — | — |
| mode=view + draft | ✅ "发布" | — | ✅ |
| mode=view + published | — | ✅ "撤销发布" | ✅ |
| mode=edit | ✅ | — | — |
3.6 数据统计 P2
数据中心页面（/data-center）顶部有 Tab：「课程」｜「任务」｜「学员建课」
数据统计 — 课程概览：系列课总数 + 列表 + 时间筛选
数据统计 — 学员概览 / 练习明细 / 任务关联
课程概览
系列课总数、列表（封面图 + 名称 + 状态 + 单元课数 + 总学习人数 + 整体完成率）；支持按时间筛选（7d / 30d / 90d / 自定义）
学员概览
学员头像 + 姓名；已报名系列课数 / 已完成系列课数；完成率排名；支持按系列课筛选
练习明细
学员 + 系列课 + 单元课 + 练习时间 + 完成状态 + AI评分；支持导出 Excel；支持按系列课、类型、日期筛选
任务关联
管理员布置"系列课任务"时，学员的完成情况在此 Tab：任务名称 + 关联系列课 + 完成人数/总人数 + 按时完成率
四 · Mobile Requirements
手机端需求
学员视角 · 首页 + 问一问 + 课程列表 · 已参考手机端截图
手机端页面结构
手机端首页
手机端定位：学员视角，不涉及管理端操作（创建、编辑、发布、权限设置），核心是展示、浏览、学习。
首页结构（参考截图）
- 顶部：Logo + 企业名 + 左侧菜单按钮（hamburger）
- 问一问卡片：打字机输入框（AiAssistantCard / TypewriterInput），含 5 条推荐问题
- 四个功能 Tab：我的课程 · 我的任务 · 客户广场 · 评分报告（本期固定排序）
- Tab 内容区：各 Tab 对应推荐卡片列表（FreeLessonCard / ProjectItem / CustomerCard / ScoreReportCard）
- 底部 Tab Bar：首页 · 问一问 · 我的
2.1 问一问模块 — 推荐问题与打字机效果 P2
手机端首页 — 问一问卡片 + 推荐问题
点击推荐问题 → 进入问一问，弹起键盘
- 打字机推荐问题直接使用热门问题，展示 3~5 条
- 获取后缓存在本地，缓存超过 30 分钟则重新请求；请求失败降级使用本地 Mock 数据
- 热门问题弹窗：问一问页面支持"热门问题"弹窗入口，点击问题自动填入输入框并发送
- 热门问题按分组展示（销售技巧 / 产品知识 / 培训相关…）
设计要点
- 打字机效果逐字显示推荐问题
- 缓存 30min，失败降级 Mock
- 热门问题按分组分类展示
- 点击问题自动填入并发送
2.2 左侧边栏重构 P2
问一问历史会话 — 按时间分组列表
首页和问一问页面通用 — 未来合并至统一对话历史
注意：本期仅支持问一问历史记录，下一步（下期）再与对话建课（AI教练）历史记录合并。
- 首页左上角菜单按钮点击，改为从左侧滑出边栏（替代当前底部抽屉），使用
tui-drawer，mode=left - 边栏宽度：屏幕宽度的 75%（最大 320px），层级高于页面内容
- 上部 — 历史会话："新建对话"按钮（蓝色背景 + 笔图标）；历史会话列表，按时间分组（今天/昨天/近7天/更早）；点击记录 → 跳转问一问并恢复会话
- 下部 — 个人中心：用户头像 + 姓名 + 企业名称 + "切换企业"按钮
- 切换企业：改为点击后关闭边栏，打开新页面
/pages-sub/switch-organization/index - 问一问页面复用同样的左侧边栏（抽取为公共组件
AppSidebar）
设计要点
- 边栏宽度 = 75vw（max 320px）
- 遮罩层点击关闭边栏
- 历史记录按时间分组
- 切换企业 = 新页面跳转（非抽屉内操作）
2.3 四个功能 Tab 固定排序 P1
- 本期 4 个 Tab 保持固定排序，不开放用户自定义，移除首页 Demo 浮动按钮和配置面板
- 排序顺序：我的课程 → 我的任务 → 客户广场 → 评分报告
moduleConfig逻辑保留，本期固定返回上述排序；下期改为动态配置即可生效
2.4 首页推荐列表重构 P1
课程卡片区分
- 系列课卡片：封面图 + 标题 + "系列课"标签（紫色渐变）+ 单元课数（N门课程）+ 课程类型图标（AI客户/演讲/闪卡）+ 描述文字（1行截断）
- 单元课卡片：保持现有布局不变
- 系列课卡片点击 → 跳转系列课详情页
seriesCourseDetail；单元课卡片 → 保持现有逻辑
"更多"跳转规则
| Tab | 跳转页面 |
|---|---|
| 我的课程 | /pages-sub/free-lesson-list/index |
| 我的任务 | /pages-sub/task-list/index |
| 客户广场 | /pages-sub/customer-squares/index?tab=customer_squares |
| 评分报告 | /pages-sub/score-history/index |
2.5 课程评分弹窗 P3
- 每次练习完成弹出
PracticeRatingPopup（底部弹出，5星评分 + "跳过"按钮） - 评分提交后展示在课程详情页和列表页中，系列课卡片显示平均评分（星星 + 数字，如 课后评价 4.2）
- 评分展示：课程详情页和列表页中，系列课卡片显示平均评分（星星 + 数字，如 课后评价 4.2）
需接入评分弹窗的页面
| 页面 | 状态 |
|---|---|
| report-complete | 已有 ✅ |
| report-chat | 已有 ✅ |
| free-lesson-complete（AI客户） | 需接入 |
| speech-complete（演讲） | 需接入 |
| reading-reciting-complete（阅读背诵） | 需接入 |
| ai-examiner-complete（AI考官） | 需接入 |
| flashcard-practice（闪卡） | 需接入 |
2.6 课程列表页筛选增强 P2
课程列表页 — 单元课和系列课混合展示，筛选器 + 搜索 + 推荐标签
- 三个筛选器顺序：课程分类 → 可见范围 → 课程类型，去竖线，等宽排列，使用
tui-dropdown-list组件 - 课程类型筛选仅在"单元练习"分类下可用（非单元练习时隐藏）
- P3 搜索支持课程名称和标签关键词实时筛选；推荐标签点击自动填入搜索框
- 对接真实数据源获取课程列表
系列课卡片额外信息
- 单元课数（"N门课程"）
- 课程类型标签
- 平均评分（星星 + 数字）
- 完成率（进度条 + 百分比）
2.7 系列课详情页 P0
系列课详情页 — 3级目录 + 单元课列表 + 学习进度
学员学习路径
- 页面入口：首页/课程列表中系列课卡片点击 → 跳转
seriesCourseDetail - 页面结构：封面图 + 系列课标题 + 描述 → 3级目录（角色 → 模块 → 胜任力）→ 单元课卡片列表
- 目录导航：左侧目录树，点击展开/折叠，当前选中单元课高亮
- 单元课卡片：封面缩略图 + 课程名 + 课程类型标签（AI客户/演讲/闪卡等）+ 完成状态 + 评分
- 学习进度：顶部进度条，显示已完成单元课数 / 总单元课数 + 百分比
- 评分展示：系列课整体平均评分（星星 + 数字）
交互要点
- 目录树默认不展开
- 未开始单元课正常展示，点击进入练习
- 进度条随完成数实时更新
五 · Implementation Plan
实施计划
按优先级分阶段推进，P0 先行验证核心价值
交付时间线
P0 第一阶段 — 核心结构
| 需求编号 | 功能模块 | 主要交付内容 |
|---|---|---|
| 3.1 | 课程管理双视图（单元课 + 系列课） | Tab 切换、系列课列表行布局、状态标签 |
| 3.2 | 系列课 3 级目录结构 | 目录树编辑、拖拽排序、层级 CRUD |
| 3.5 | 系列课编辑页面 | 封面/名称/目录/单元课管理/发布 |
| 2.7 | 系列课详情页 | 3 级目录树、学习进度 |
P1 第二阶段 — 体验优化
| 需求编号 | 功能模块 | 主要交付内容 |
|---|---|---|
| 3.3 | 系列课列表交互 | 行操作菜单、批量选择、快捷入口 |
| 3.4 | 新建系列课流程 | 选择单元课弹窗、编辑页内完成设置 |
| 2.3 | 首页推荐列表重构 | 4 模块排序、推荐标签、更多入口 |
| 2.4 | 课程卡片改版 | 系列课卡片样式、标签展示 |
P2/P3 第三阶段 — 锦上添花
| 需求编号 | 功能模块 | 主要交付内容 |
|---|---|---|
| 2.1 | 问一问 — 热门问题推荐 | 打字机推荐、热门问题弹窗、缓存策略 |
| 2.2 | 左侧边栏 — 历史会话 | 会话列表、搜索、删除、问一问页面通用 |
| 2.6 | 课程列表页筛选增强 | 类型筛选、系列课卡片适配 |
| 3.6 | 数据统计 | 练习次数/完成率/评分/趋势图 |
| 2.5 | 课后评分与反馈 | 评分弹窗、星级、平均分展示 |