# P9→NS1/RNS1 缺失项 #13:助教详情页任务分组的视觉区分
## 简要结论
- 状态:✅ 已解决
- 风险等级:🟢 低
- 后端按 active/inactive/abandoned 三组返回数据,前端为每组定义了差异化视觉样式
## 详细审查
### 审查范围
- `apps/backend/app/services/coach_service.py` — `_build_task_groups()`
- `apps/miniprogram/miniprogram/pages/coach-detail/coach-detail.wxml` — 任务执行区域
- `apps/miniprogram/miniprogram/pages/coach-detail/coach-detail.wxss` — 任务样式
### 发现
1. 后端 `_build_task_groups()` 按 status 分为三组:`visible_tasks`(active)、`hidden_tasks`(inactive)、`abandoned_tasks`(abandoned),数据结构清晰
2. 前端 WXML 中三组有明确的视觉区分:
- `visibleTasks`:直接展示,每个 task-item 带 `task-item-{{item.typeClass}}` 样式(如 `task-item-high-priority`、`task-item-priority`、`task-item-relationship`、`task-item-callback`),有彩色背景和边框
- `hiddenTasks`:在 `tasksExpanded` 展开后显示,样式与 visible 一致但位于 `task-list-extra` 区域
- `abandonedTasks`:使用 `task-item-abandoned` 样式,灰色背景 `#fafafa`、`opacity: 0.55`、客户名带删除线 `text-decoration: line-through`
3. WXSS 中定义了完整的颜色映射:
- `task-item-high-priority`:红色系 `rgba(254, 226, 226, 0.6)`
- `task-item-priority`:橙色系 `rgba(255, 237, 213, 0.4)`
- `task-item-relationship`:粉色系 `rgba(252, 231, 243, 0.4)`
- `task-item-callback`:青色系 `rgba(204, 251, 241, 0.4)`
- `task-item-abandoned`:灰色 + 半透明
### 证据
```html
{{item.typeLabel}}
...
{{item.customerName}}
{{item.reason}}
```
```css
/* coach-detail.wxss */
.task-item-abandoned {
background: #fafafa;
border-color: #eeeeee;
opacity: 0.55;
}
.task-abandoned-name {
text-decoration: line-through;
color: #c5c5c5;
}
```