产品评审 · 待评审
系列课体系升级
需求文档 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 系列课列表 P0
系列课列表 — 每行展示系列课信息，右侧操作按钮
列表行布局
- 封面图：缩略图，hover 时 scale 放大；无封面时显示灰色占位图标
- 标题区：标题 + 状态标签、描述（2行截断）、底部课程标签 + 统计数据 + 更新时间
- 操作区：右侧操作按钮，border-left 分隔，始终可见
信息字段
- 发布状态：标题右侧 pill 标签（已发布=绿色圆点 / 未发布=灰色圆点）
- 课程标签：颜色取自 label.color，背景为同色 10% 透明度
- 完成率进度条：>70% 蓝色 / 40%~70% 黄色 / <40% 红色
- 课程类型 icon：从 unit_type 读取，去重渲染
操作按钮规则
| 状态 | 常驻按钮 | 更多菜单 |
|---|---|---|
| 未发布 | 蓝色"发布课程"按钮 + 更多菜单 | 编辑、权限设置、创建副本、删除 |
| 已发布 | 数据统计 icon 按钮（折线图 SVG）+ 更多菜单 | 编辑、权限设置、创建副本、取消发布、删除 |
3.4 新建系列课 P0
选课阶段 — 左侧目录树 + 右侧课程卡片网格
入口：课程管理 → 系列课 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 数据统计 P0
数据中心页面（/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 问一问模块 — 推荐问题与打字机效果 P0
手机端首页 — 问一问卡片 + 推荐问题
点击推荐问题 → 进入问一问，弹起键盘
- 打字机推荐问题直接使用热门问题，展示 3~5 条
- 获取后缓存在本地，缓存超过 30 分钟则重新请求；请求失败降级使用本地 Mock 数据
- 热门问题弹窗：问一问页面支持"热门问题"弹窗入口，点击问题自动填入输入框并发送
- 热门问题按分组展示（销售技巧 / 产品知识 / 培训相关…）
2.2 左侧边栏重构 P0
问一问历史会话 — 按时间分组列表
首页和问一问页面通用 — 未来合并至统一对话历史
注意：本期仅支持问一问历史记录，下一步（下期）再与对话建课（AI教练）历史记录合并。
- 首页左上角菜单按钮点击，改为从左侧滑出边栏（替代当前底部抽屉），使用
tui-drawer，mode=left - 边栏宽度：屏幕宽度的 75%（最大 320px），层级高于页面内容
- 上部 — 历史会话："新建对话"按钮（蓝色背景 + 笔图标）；历史会话列表，按时间分组（今天/昨天/近7天/更早）；点击记录 → 跳转问一问并恢复会话
- 下部 — 个人中心：用户头像 + 姓名 + 企业名称 + "切换企业"按钮
- 切换企业：改为点击后关闭边栏，打开新页面
/pages-sub/switch-organization/index - 问一问页面复用同样的左侧边栏（抽取为公共组件
AppSidebar）
设计要点
- 边栏宽度 = 75vw（max 320px）
- 遮罩层点击关闭边栏
- 历史记录按时间分组
- 切换企业 = 新页面跳转（非抽屉内操作）
2.3 四个功能 Tab 固定排序 P0
- 本期 4 个 Tab 保持固定排序，不开放用户自定义，移除首页 Demo 浮动按钮和配置面板
- 排序顺序：我的课程 → 我的任务 → 客户广场 → 评分报告
moduleConfig逻辑保留，本期固定返回上述排序；下期改为动态配置即可生效
2.4 首页推荐列表重构 P0
课程卡片区分
- 系列课卡片：封面图 + 标题 + "系列课"标签（紫色渐变）+ 单元课数（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 课程评分弹窗 P0
- 每次练习完成弹出
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 课程列表页筛选增强 P0
课程列表页 — 单元课和系列课混合展示，筛选器 + 搜索 + 推荐标签
- 三个筛选器顺序：课程分类 → 可见范围 → 课程类型，去竖线，等宽排列，使用
tui-dropdown-list组件 - 课程类型筛选仅在"单元练习"分类下可用（非单元练习时置灰）
- 搜索支持课程名称和标签关键词实时筛选；推荐标签点击自动填入搜索框
- 对接真实数据源获取课程列表
系列课卡片额外信息
- 单元课数（"N门课程"）
- 课程类型标签
- 平均评分（星星 + 数字）
- 完成率（进度条 + 百分比）
2.7 系列课详情页 P0
系列课详情页 — 3级目录 + 单元课列表 + 学习进度
- 页面入口：首页/课程列表中系列课卡片点击 → 跳转
seriesCourseDetail - 页面结构：封面图 + 系列课标题 + 描述 → 3级目录（角色 → 模块 → 胜任力）→ 单元课卡片列表
- 目录导航：左侧目录树，点击展开/折叠，当前选中单元课高亮
- 单元课卡片：封面缩略图 + 课程名 + 课程类型标签（AI客户/演讲/闪卡等）+ 完成状态 + 评分
- 学习进度：顶部进度条，显示已完成单元课数 / 总单元课数 + 百分比
- 评分展示：系列课整体平均评分（星星 + 数字）
交互要点
- 目录树默认展开第一级
- 已完成单元课标记绿色勾 + 灰色文字
- 未开始单元课正常展示，点击进入练习
- 进度条随完成数实时更新
- 底部固定"继续学习"按钮，跳转到下一个未完成单元课
五 · Implementation Plan
实施计划
优先级、工时评估与里程碑
| 优先级 | 需求项 | 端 | 预估工时 |
|---|---|---|---|
| P0 | 2.2 左侧边栏重构（改为左侧滑出 + 新页面切换企业） | 手机端 | 1.5d |
| P0 | 2.5 课程评分弹窗（各完成页接入 + 评分展示） | 手机端 | 1.5d |
| P0 | 2.4 首页推荐列表重构（课程卡片区分 + "更多"跳转） | 手机端 | 1d |
| P0 | 2.6 课程列表页筛选增强（对接API + 系列课卡片适配） | 手机端 | 1d |
| P0 | 2.7 系列课详情页（3级目录 + 单元课列表 + 学习进度） | 手机端 | 2d |
| P0 | 3.1–3.6 PC端：课程管理双视图、3级目录、系列课卡片、新建/编辑、数据统计 | PC端 | 集中排期 |
| P0 | 2.1.1 打字机推荐问题从后端获取 | 手机端 | 0.5d |
| P0 | 2.1.2 问一问热门问题弹窗对接后端 | 手机端 | 0.5d |
| P0 | 2.3 四个功能Tab固定排序（移除Demo面板） | 手机端 | 0.5d |
| P1 | 接口需求对接与调试（10个接口联调） | 双端 | 2d |
里程碑
Phase 1 — 手机端核心（P0）
左侧边栏 + Tab固定排序 + 评分弹窗 + 首页推荐列表重构
Phase 2 — 手机端功能完善
问一问模块对接 + 列表页筛选增强
Phase 3 — PC端开发
课程管理双视图、3级目录、系列课CRUD、数据统计
Phase 4 — 接口联调 & 测试
10个接口联调 + 端到端测试 + 多端兼容性验证
非功能性需求
性能
- 首页首屏加载 < 1.5s（含骨架屏）
- 课程列表滚动 FPS ≥ 55
- 打字机效果无卡顿
兼容性
- H5 / 微信小程序 / 飞书嵌入H5 / 钉钉嵌入H5
- 左侧边栏动画需兼容小程序环境
无障碍
- 评分弹窗星星按钮需支持屏幕阅读器（aria-label）
- 筛选器当前选中状态需有视觉和语义双重区分