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

docs/h5_ui/interactions/task-detail.md

@@ -0,0 +1,148 @@
+# 页面名：task-detail 系列（任务详情）
+
+> PRD 参考：P6 `docs/prd/specs/P6-miniapp-fe-tasks.md`；`apps/miniprogram/doc/prd.md` 第八节 8.2
+> 已实现：否
+
+## 页面说明
+展示客户详细信息、消费习惯、AI 分析（关系分析+任务建议+话术参考+备注评分）、维客线索、备注入口。底部固定操作栏。
+
+task-detail 系列共 4 个页面，卡片内容相同（以 task-detail.html 为准），差异仅在：头部 Banner 主题/配色、区域排列顺序、话术样式、部分文案。
+
+## Banner 主题映射表
+| 页面 | Banner class | 主题色 | 任务类型 |
+|------|-------------|--------|----------|
+| task-detail.html | `banner-bg theme-red texture-aurora` | 红色 | 高优先召回 |
+| task-detail-priority.html | （同 task-detail，橙色变体） | 橙色 | 优先召回 |
+| task-detail-relationship.html | `banner-bg theme-pink texture-aurora` | 粉色 | 关系构建 |
+| task-detail-callback.html | `banner-bg theme-teal texture-aurora` | 青绿色 | 客户回访 |
+
+> ⚠️ Banner 背景使用 CSS 渐变+SVG 纹理（`banner.css` 中的 `texture-aurora`），内含复杂的 SVG 丝带效果。小程序实现时建议将各主题 Banner 背景导出为图片资源，统一放 `/assets/images/banner-{theme}.png`。
+
+## 页面区域顺序差异
+| 区域 | task-detail（高优先/优先） | task-detail-relationship（关系构建） | task-detail-callback（客户回访） |
+|------|--------------------------|--------------------------------------|----------------------------------|
+| 1 | 与我的关系 | 维客线索 | 维客线索 |
+| 2 | 任务建议 | 与我的关系（含近期服务记录） | 与我的关系（含近期服务记录） |
+| 3 | 维客线索 | 任务建议 | 任务建议 |
+| 4 | 我给TA的备注 | 我给TA的备注 | 我给TA的备注 |
+| 5 | 近期服务记录 | （嵌入区域2） | （嵌入区域2） |
+
+## 话术样式差异
+| 页面 | 话术样式 | 说明 |
+|------|----------|------|
+| task-detail（高优先/优先） | 气泡样式 `.speech-bubble` | 浅蓝背景+边框+圆角+右下角尖角，每条带「复制」按钮 |
+| task-detail-relationship | 竖线样式 `border-l-2` | 左侧 2px 竖线 + 左内边距 |
+| task-detail-callback | 竖线样式 `border-l-2` | 同上 |
+
+## 任务建议标题差异
+| 页面 | 标题 | 背景色 |
+|------|------|--------|
+| task-detail | 💡 建议执行 | 蓝色系 |
+| task-detail-relationship | 💝 关系构建重点 | pink→rose |
+| task-detail-callback | 📞 常规回访要点 | teal→cyan |
+
+## 状态变量
+| 变量名 | 类型 | 初始值 | 说明 |
+|--------|------|--------|------|
+| taskDetail | object | null | 任务详情数据 |
+| customerInfo | object | null | 客户基本信息 |
+| serviceRecords | array | [] | 近期服务记录 |
+| aiAnalysis | object | null | AI 分析（应用 4：关系分析+任务建议+一句话总结） |
+| retentionClues | array | [] | 维客线索（应用 8 整合线索+人工） |
+| customerAnalysis | object | null | 客户分析（应用 7：运营策略+总结） |
+| talkingPoints | object | null | 话术参考（应用 5 缓存） |
+| noteScore | number | null | 备注分析评分（应用 6：1-10 分） |
+| noteModalVisible | boolean | false | 备注弹窗显示状态 |
+| noteText | string | "" | 备注输入内容 |
+| noteRating | object | {serviceWill: 0, returnChance: 0} | 星星评分（再次服务意愿+再来店可能性，各 1-5 星） |
+| ratingExpanded | boolean | false | 评分区域是否展开（回访任务默认 true） |
+| abandonModalVisible | boolean | false | 放弃客户弹窗显示状态（仅高优先/优先召回有） |
+| abandonReason | string | "" | 放弃原因 |
+| loading | boolean | true | 数据加载中 |
+| error | boolean | false | 加载失败 |
+
+## 用户操作 → 响应
+| 操作 | 触发条件 | 响应行为 | 目标状态 |
+|------|----------|----------|----------|
+| 页面加载 | 进入页面 | GET /api/xcx/tasks/{id} | loading→false |
+| 点击"问问助手" | 底部操作栏 | navigateTo chat（带任务+客户上下文引用） | — |
+| 点击"备注" | 底部操作栏 | 打开备注弹窗 | noteModalVisible=true |
+| 点击"展开评价" | noteModalVisible=true, ratingExpanded=false | 展开星星评分区域，隐藏展开按钮 | ratingExpanded=true |
+| 拖动/点击星星 | 评分区域展开 | 更新对应评分值（支持触摸拖动+鼠标拖动+点击） | noteRating 更新 |
+| 备注弹窗-提交 | noteText 非空 | POST /api/xcx/notes（含评分） | Toast "备注已保存"，弹窗关闭 |
+| 点击"复制"（话术气泡） | 气泡样式页面 | 复制话术文本到剪贴板，按钮变"已复制" | — |
+| 点击"放弃" | 顶部导航栏右侧（仅高优先/优先） | 打开放弃确认弹窗 | abandonModalVisible=true |
+| 放弃弹窗-确认 | abandonReason 非空 | POST /api/xcx/tasks/{id}/abandon | Toast "已放弃该客户的维护" |
+| 点击返回 | 顶部导航栏 | navigateBack / history.back() | — |
+| 点击"重试" | error=true | 重新请求数据 | loading=true |
+
+## "与我的关系"区域
+- 标题带 section-title pink 样式
+- AI 机器人图标（可爱机器人 SVG：圆角矩形身体+天线+紫蓝色大眼睛+微笑+粉色腮红+小耳朵）
+  - 此图标可视为心形 ICON 的扩展，小程序中用 `/assets/icons/icon-ai-relationship.svg`
+- 关系等级色系：💖 非常好(>8.5 粉色渐变) / 🧡 良好(>7) / 💛 一般(>5) / 💙 待发展(<5 蓝色渐变)
+- 备注评分：星级展示（score ÷ 2 = 星数，支持半星，由 `ai-icons.js` 渲染）
+
+## AI 应用编号映射（PRD 补充）
+| 应用编号 | 功能 | cache_type | 展示位置 |
+|----------|------|------------|----------|
+| 应用 4 | 关系分析 + 任务建议 + 一句话总结（summary） | `app4_analysis` | 与我的关系 / 任务建议 / 卡片底部 AI 文字 |
+| 应用 5 | 话术参考（5 条话术） | — | 话术区域 |
+| 应用 6 | 备注评分（1-10 分，6 分为标准分） | `app6_note_analysis` | 备注弹窗提交后 |
+| 应用 7 | 客户分析（运营策略 + 总结） | `app7_customer_analysis` | 客户分析区域 |
+| 应用 8 | 维客线索整合（`member_retention_clue` 表） | — | 维客线索区域 |
+
+## AI 区域展示规则
+- 维客线索（应用 8）：Emoji 作为二级标签，提供者逗号分隔展示
+  - source=ai_consumption → "By:系统"
+  - source=ai_note → "By:备注"
+- 客户分析（应用 7）：运营策略数组 + 总结文本
+- 关系分析+任务建议+一句话总结（应用 4）
+- 话术参考（应用 5）：5 条话术，气泡/竖线样式展示
+- 备注评分（应用 6）：1-10 分，6 分为标准分
+
+## 备注弹窗规则
+- 底部弹出式弹窗（`.modal-overlay` + `.modal-card`）
+- 包含：多行文本输入 + 星星评分（再次服务意愿 + 再来店可能性）
+- 回访任务（task-detail-callback）：评分区域默认展开
+- 其他任务类型：评分区域默认隐藏，通过"展开评价"按钮手动打开
+- 星星打分交互：支持点击、触摸拖动、鼠标拖动（由 `task-detail-notes.js` 实现）
+
+### 备注评分与回访完成判定（PRD 补充）
+- 提交备注后，后端调用应用 6 进行评分（1-10 分，6 分为标准分）
+- 评分细则：综合备注文本质量、服务意愿星级、再来店可能性星级
+- 回访任务完成条件：备注评分 ≥ 5 → 任务标记完成；< 5 → 不算完成
+- 只计第一个备注的评分（后续备注不影响完成判定）
+- 回访任务有效期 2 天：超过 2 天未完成则标签跳变（回到任务列表重新分配）
+
+## 放弃客户弹窗（仅高优先/优先召回）
+- 遮罩层 + 居中弹窗
+- 包含：多行文本输入（放弃原因）+ 提交按钮（红色 `.danger`）
+- 空值校验：原因为空时显示错误提示
+- 关系构建和客户回访页面无"放弃"按钮
+
+## 底部操作栏
+- 「问问助手」按钮：渐变背景（颜色随主题变化），聊天气泡图标
+- 「备注」按钮：灰色背景，编辑笔图标
+
+## 页面状态枚举
+| 状态名 | 视觉表现 | 触发条件 |
+|--------|----------|----------|
+| 加载中 | 区域文案"加载中..." | loading=true |
+| 正常态 | 完整详情展示 | 有数据 |
+| 错误态 | "加载失败，请点击重试" + 重试按钮 | error=true |
+
+## 后端 API 依赖
+| API | 方法 | 说明 |
+|-----|------|------|
+| `GET /api/xcx/tasks/{id}` | GET | 获取任务详情（含客户信息+AI 分析） |
+| `POST /api/xcx/notes` | POST | 创建备注（含评分，触发回访完成判定） |
+| `POST /api/xcx/tasks/{id}/abandon` | POST | 放弃任务（仅高优先/优先） |
+
+## 页面导航
+- 来源：task-list（点击任务卡片，按 task-type 跳转对应页面）
+- 去向：chat（问问助手）
+
+## 全局组件
+- 自定义顶部导航栏（返回按钮 + "任务详情"，高优先/优先召回右侧有"放弃"按钮）
+- AI 悬浮按钮