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

docs/h5_ui/interactions/task-list.md

@@ -0,0 +1,134 @@
+# 页面名：task-list（任务列表 + 业绩概览）
+
+> PRD 参考：P6 `docs/prd/specs/P6-miniapp-fe-tasks.md`；`apps/miniprogram/doc/prd.md` 第八节 8.1
+> 已实现：否
+
+## 页面说明
+小程序默认首页（Tab 1）。顶部 Banner 展示用户信息和业绩概览，下方为按优先级分组排序的任务列表。支持长按弹出操作菜单（置顶/放弃/问AI/备注）。
+
+## Banner 主题
+`banner-bg theme-blue texture-aurora`（蓝色主题 + 极光丝带纹理）
+
+## 状态变量
+| 变量名 | 类型 | 初始值 | 说明 |
+|--------|------|--------|------|
+| tasks | array | [] | 任务列表（按优先级分组） |
+| userInfo | object | null | 用户信息（花名、身份、门店） |
+| performanceData | object | null | 业绩概览（当月业绩、档位、工资预估、跳档激励） |
+| contextMenuVisible | boolean | false | 长按菜单显示状态 |
+| contextMenuPosition | object | {x,y} | 菜单弹出坐标 |
+| contextMenuTarget | element | null | 长按的目标卡片 |
+| remarkModalVisible | boolean | false | 备注/放弃弹窗显示状态 |
+| loading | boolean | true | 数据加载中 |
+| error | boolean | false | 加载失败 |
+
+## 用户操作 → 响应
+| 操作 | 触发条件 | 响应行为 | 目标状态 |
+|------|----------|----------|----------|
+| 页面加载 | 进入页面 | GET /api/xcx/tasks + 业绩数据 | loading→false |
+| 点击 Banner 业绩区域 | 无 | navigateTo performance 页面 | — |
+| 点击任务卡片 | 无 | 根据 task-type 跳转对应详情页（见跳转映射表） | — |
+| 长按任务卡片（500ms） | 触摸/鼠标按住 | 在按压坐标处弹出黑底浮层+白色菜单 | contextMenuVisible=true |
+| 菜单-「📌 置顶任务」 | 菜单显示 | POST /api/xcx/tasks/{id}/pin | 列表刷新，菜单关闭 |
+| 菜单-「❌ 放弃任务」 | 菜单显示 | 打开备注/放弃弹窗 | remarkModalVisible=true |
+| 菜单-「🤖 问问AI助手」 | 菜单显示 | navigateTo chat（带任务上下文引用） | 菜单关闭 |
+| 菜单-「📝 备注」 | 菜单显示 | 打开备注弹窗 | remarkModalVisible=true |
+| 弹窗-提交 | 文本非空 | POST 对应接口 | Toast 提示，弹窗关闭 |
+| 点击遮罩层 | contextMenuVisible=true | 关闭菜单 | contextMenuVisible=false |
+| 下拉刷新 | 无 | 重新请求任务列表 | loading=true |
+| 点击"重试" | error=true | 重新请求数据 | loading=true |
+
+## 任务卡片跳转映射
+| data-task-type | 跳转目标 |
+|----------------|----------|
+| high-priority | task-detail.html（高优先召回） |
+| priority | task-detail-priority.html（优先召回） |
+| relationship | task-detail-relationship.html（关系构建） |
+| callback | task-detail-callback.html（客户回访） |
+
+## 任务优先级定义（PRD 补充）
+| 优先级 | 类型 | 触发条件 | 标签颜色 |
+|--------|------|----------|----------|
+| P0 高优先召回 | high-priority | WBI + NCI > 7 | 红色 |
+| P0 优先召回 | priority | WBI + NCI > 5 | 橙色 |
+| P1 客户回访 | callback | 已完成召回但未备注（或备注评分 < 5） | 蓝色 |
+| P2 关系构建 | relationship | RS < 6 | 粉色 |
+
+> 列表内按优先级分组 → 组内按指数分数降序排列
+
+## 任务完成条件（PRD 补充）
+| 任务类型 | 完成条件 | 说明 |
+|----------|----------|------|
+| 召回（P0） | 客户出现新的服务订单 | 系统自动判定 |
+| 回访（P1） | 备注评分 ≥ 5（应用 6 评分） | 评分 < 5 不算完成；只计第一个备注；2 天有效期 |
+| 关系构建（P2） | RS 指数提升至 ≥ 6 | 系统自动判定 |
+
+## 任务卡片结构（忠于原型 HTML）
+- 外层 `.task-card`：左侧 4px 彩色边框（颜色随任务类型变化）
+- 置顶卡片额外 `.pinned` class（微亮边框阴影）
+- 内部结构：
+  - 第一行：任务类型标签（渐变背景圆角矩形）+ 客户昵称 + 关系 emoji + 备注指示器（📝，有备注时显示）
+  - 第二行：「最近到店：X天前 · 余额：XXX」
+  - 第三行：AI 机器人小图标 + AI 一句话智能建议文字（来源：AI 应用 4 的 `summary` 字段，`cache_type=app4_analysis`）
+  - 右侧：向右箭头 chevron
+
+## 列表分区结构
+1. 📌 置顶区域（amber 背景标签）：用户手动置顶的任务
+2. 一般任务区域（灰色背景标签）：按优先级分组 → 组内按分数降序
+3. ❌ 已放弃区域（灰色背景标签）：
+   - 卡片 `.abandoned`：opacity 0.55，左边框变灰，标签背景变灰，客户名变灰
+   - 无右侧箭头
+   - 显示放弃原因文字
+
+## 长按菜单样式
+- 遮罩层 `.context-overlay`（半透明黑色）
+- 白色菜单 `.context-menu`：min-width 192px，圆角 14px，阴影
+- 4 个菜单项，项间 1px 分隔线：
+  - 📌 置顶任务（已置顶时显示「取消置顶」）
+  - ❌ 放弃任务
+  - 🤖 问问AI助手
+  - 📝 备注
+
+## 业绩 Banner 展示
+- 用户花名 + 身份
+- 当月业绩进度条
+- 预计收入（标记"预估"）
+- 跳档激励：「到达 XXX 即得 YYY」
+  - YYY = max(跳档线差值最小值, 实际差值)
+  - 各档差值：Tier0→1: 1200元 / Tier1→2: 750元 / Tier2→3: 540元 / Tier3→4: 420元
+
+## 跟/弃 icon 规则（PRD 补充）
+- 跟：助教主动跟进中（绿色标记）
+- 弃：助教已放弃该客户（灰色标记）
+- 无标记：未分配助教或无跟进状态
+
+## 爱心 icon 规则
+💖(>8.5) / 🧡(>7) / 💛(>5) / 💙(<5)
+
+## 喜好标签
+🎱(中式) / 斯(斯诺克) / 🀅(麻将) / 🎤(团建)
+
+## 页面状态枚举
+| 状态名 | 视觉表现 | 触发条件 |
+|--------|----------|----------|
+| 加载中 | 区域文案"加载中..." | loading=true |
+| 正常态 | 任务列表 + 业绩 Banner | 有数据 |
+| 空数据态 | "暂无任务" | tasks 为空 |
+| 错误态 | "加载失败，请点击重试" + 重试按钮 | error=true |
+
+## 后端 API 依赖
+| API | 方法 | 说明 |
+|-----|------|------|
+| `GET /api/xcx/tasks` | GET | 获取任务列表 |
+| `POST /api/xcx/tasks/{id}/pin` | POST | 置顶/取消置顶 |
+| `POST /api/xcx/tasks/{id}/abandon` | POST | 放弃任务 |
+| `POST /api/xcx/notes` | POST | 创建备注 |
+| `GET /api/performance/summary` | GET | 业绩概览 |
+
+## 页面导航
+- 来源：login（approved）/ TabBar 切换
+- 去向：task-detail* / performance / chat
+
+## 全局组件
+- 底部 TabBar（任务 active）— 由 `bottom-nav.js` 自动注入
+- AI 悬浮按钮（右下角，渐变动画背景，可爱机器人 SVG 图标，点击 → chat）