# P9→NS1/RNS1 缺失项 #14:客户详情页维客线索的展示规范 ## 简要结论 - 状态:✅ 已解决 - 风险等级:🟢 低 - clue-card 组件已实现完整的卡片布局和 category 颜色映射(6 种配色),后端从 `member_retention_clue` 表查询数据 ## 详细审查 ### 审查范围 - `apps/backend/app/services/customer_service.py` — `_build_retention_clues()` - `apps/miniprogram/miniprogram/pages/customer-detail/customer-detail.wxml` — 维客线索区域 - `apps/miniprogram/miniprogram/components/clue-card/clue-card.ts` — 组件属性 - `apps/miniprogram/miniprogram/components/clue-card/clue-card.wxml` — 组件模板 - `apps/miniprogram/miniprogram/components/clue-card/clue-card.wxss` — 组件样式 ### 发现 1. 后端 `_build_retention_clues()` 从 `public.member_retention_clue` 表查询 `clue_type` 和 `clue_text`,按 `created_at` 倒序 2. 前端 `clue-card` 组件接收 `tag`、`category`(颜色类名)、`emoji`、`title`、`source`、`content` 六个属性 3. WXSS 中定义了 VI 规范 2.1 的六种客户标签配色: - `clue-tag-primary`:蓝色(客户基础) - `clue-tag-success`:绿色(消费习惯) - `clue-tag-orange`:橙色(玩法偏好) - `clue-tag-gold` / `clue-tag-warning`:金色(促销偏好) - `clue-tag-purple`:紫色(社交关系) - `clue-tag-error`:红色(重要反馈) - `clue-tag-pink`:粉色(社交关系别名) 4. 卡片布局包含:标签方块(72rpx×72rpx)、文本内容区、来源标注、可选详情描述 ### 证据 ```html ``` ```css /* clue-card.wxss — VI 规范 2.1 六种配色 */ .clue-tag-primary { background: rgba(0, 82, 217, 0.10); color: #0052d9; } .clue-tag-success { background: rgba(0, 168, 112, 0.10); color: #00a870; } .clue-tag-orange { background: rgba(237, 123, 47, 0.12); color: #ed7b2f; } .clue-tag-purple { background: rgba(123, 97, 255, 0.10); color: #7b61ff; } .clue-tag-error { background: rgba(227, 77, 89, 0.10); color: #e34d59; } ``` ### 建议 - 后端 `_build_retention_clues()` 当前仅返回 `type` 和 `text`,未返回 `category`(颜色类名)和 `source`。前端 `customer-detail.ts` 中 `clues` 数据目前是 mock 硬编码的 `categoryColor`。建议后端补充 `clue_type → categoryColor` 的映射逻辑,或在前端建立映射表。