微信小程序页面迁移校验之前 P5任务处理之前

docs/h5_ui/interactions/coach-detail.md

@@ -0,0 +1,100 @@
+# 页面名：coach-detail（助教详情）
+
+> PRD 参考：P9 `docs/prd/specs/P9-miniapp-fe-details.md`
+> 已实现：否
+
+## 页面说明
+展示助教完整信息：绩效概览、收入明细（本月/上月 Tab）、任务执行（展开/收起）、客户关系 TOP5、近期服务明细、更多信息。支持备注弹窗。
+
+## Banner 主题
+`banner-bg theme-coral texture-aurora`（珊瑚粉主题 + 极光丝带纹理）
+
+> ⚠️ Banner 背景使用 CSS 渐变+SVG 纹理，小程序实现时建议导出为图片资源 `/assets/images/banner-coral.png`
+
+## 页面区域结构（忠于原型 HTML）
+1. Banner（助教信息：花名/等级/技能标签/工龄/客户数）
+   - 工龄计算（PRD 补充）：入职时间到当前日期的年数（精确到 0.1 年）
+2. 绩效概览（`st blue`）— 4宫格：本月定档业绩/本月工资预估/客源储值余额/本月任务完成 + 绩效档位进度条
+3. 收入明细（`st green`）— Tab 切换：本月预估 / 上月
+4. 任务执行（`st orange`）— 任务列表 + 展开/收起
+5. 客户关系 TOP5（`st pink`）— 近60天
+6. 近期服务明细（`st purple`）
+7. 更多信息（`st teal`）— 入职日期 + 历史月份表格
+
+## 状态变量
+| 变量名 | 类型 | 初始值 | 说明 |
+|--------|------|--------|------|
+| coachInfo | object | null | 助教信息（花名、级别、技能、工龄、客户数） |
+| incomeTab | string | "this" | 收入明细当前 Tab（this=本月/last=上月） |
+| tasksExpanded | boolean | false | 任务列表展开状态 |
+| noteModalVisible | boolean | false | 备注弹窗显示状态 |
+| noteText | string | "" | 备注输入内容 |
+| notesPopupVisible | boolean | false | 备注列表弹窗显示状态 |
+| loading | boolean | true | 数据加载中 |
+| error | boolean | false | 加载失败 |
+
+## 用户操作 → 响应
+| 操作 | 触发条件 | 响应行为 | 目标状态 |
+|------|----------|----------|----------|
+| 页面加载 | 进入页面 | GET /api/coaches/:id（含全部区域数据） | loading→false |
+| 切换收入明细 Tab | 点击"本月"/"上月" | 切换对应内容显隐 | incomeTab 更新 |
+| 点击"展开全部 ↓" | tasksExpanded=false | 显示隐藏的任务列表（含已放弃任务） | tasksExpanded=true |
+| 点击"收起 ↑" | tasksExpanded=true | 隐藏多余任务 | tasksExpanded=false |
+| 点击"备注"按钮 | 无 | 打开备注弹窗 | noteModalVisible=true |
+| 备注弹窗-提交 | noteText 非空 | POST /api/xcx/notes | Toast "备注已保存"，弹窗关闭 |
+| 点击客户卡片 | 客户关系 TOP5 区域 | navigateTo customer-detail | — |
+| 点击客户卡片的备注图标 | 无 | 弹出该客户的备注列表弹窗（阻止冒泡，不触发卡片跳转） | notesPopupVisible=true |
+| 点击返回 | 顶部导航栏 | navigateBack / history.back() | — |
+| 点击"重试" | error=true | 重新请求数据 | loading=true |
+
+## 收入明细 Tab
+- 本月（`id="incomeTab_this"`）：含「预估」标签，active 状态
+- 上月（`id="incomeTab_last"`）
+- 明细项：基础课时费、激励课时费、充值提成、酒水提成、合计
+- 由 `switchIncomeTab(tab)` 控制切换
+
+## 任务执行区域
+- 默认显示前 6 项任务
+- 隐藏区域 `id="hiddenTasks"`：更多任务 + 已放弃任务
+- 已放弃任务样式：opacity 0.55 + 删除线 + 放弃原因文字
+- 展开/收起按钮 `id="toggleTasksBtn"`：文字在「展开全部 ↓」/「收起 ↑」间切换
+- 由 `toggleAllTasks()` 控制
+
+## 客户关系 TOP5
+- 标题右侧标注「近60天」
+- 5 个客户卡片，每个含：
+  - 头像圆形 + 姓名 + 关系 emoji（❤️/💛）+ 关系分数（彩色）
+  - 服务次数 / 储值 / 消费
+- 前 2 名有渐变背景（pink/amber），后 3 名灰色背景
+
+## 备注弹窗
+- 底部弹出式弹窗
+- 包含：多行文本输入 + 提交按钮
+- 空值校验：内容为空时 Toast 提示
+- 由 `showNoteModal()` / `hideNoteModal()` / `saveNote()` 控制
+
+## 备注列表弹窗
+- 点击客户卡片的备注图标触发
+- 动态渲染该客户的备注列表
+- 由 `showNotesPopup(name, notes)` / `hideNotesPopup()` 控制
+
+## 页面状态枚举
+| 状态名 | 视觉表现 | 触发条件 |
+|--------|----------|----------|
+| 加载中 | 区域文案"加载中..." | loading=true |
+| 正常态 | 完整助教详情 | 有数据 |
+| 错误态 | "加载失败，请点击重试" + 重试按钮 | error=true |
+
+## 后端 API 依赖
+| API | 方法 | 说明 |
+|-----|------|------|
+| `GET /api/coaches/:id` | GET | 助教详情（含绩效、收入、任务、客户关系） |
+| `POST /api/xcx/notes` | POST | 创建备注 |
+
+## 页面导航
+- 来源：board-coach（点击助教卡片）
+- 去向：task-detail*（点击客户卡片）/ chat（通过悬浮按钮）
+
+## 全局组件
+- 自定义顶部导航栏（返回按钮 + "助教详情"）
+- AI 悬浮按钮