1

docs/miniprogram-dev/ai-icon-color-system.md

@@ -0,0 +1,173 @@
+# AI 图标配色系统
+
+> 文档版本：2026-03-14  
+> 对应 H5 原型：`docs/h5_ui/css/ai-icons.css`  
+> 小程序实现：`app.wxss`（全局样式）+ 2 个标准组件
+
+---
+
+## 一、概览
+
+AI 图标系统包含 **2 个标准组件** × **6 种配色**，共 12 种组合。
+
+| 组件 | 路径 | 用途 | 图标文件 |
+|------|------|------|----------|
+| `ai-inline-icon` | `/components/ai-inline-icon/` | 卡片行首小图标（30rpx 容器） | `ai-robot-inline.svg` |
+| `ai-title-badge` | `/components/ai-title-badge/` | 标题行右侧徽章（胶囊形态） | `ai-robot-sm.svg` |
+
+| 配色值 | 主色 | 辅色 | 深色（文字） | 适用场景 |
+|--------|------|------|-------------|----------|
+| `red` | #e74c3c | #f39c9c | #c0392b | 高优先召回 |
+| `orange` | #e67e22 | #f5c77e | #ca6c17 | 优先召回 |
+| `yellow` | #d4a017 | #f7dc6f | #b8860b | 激励/奖励 |
+| `blue` | #2980b9 | #7ec8e3 | #1a5276 | 信息/数据 |
+| `indigo` | #667eea | #a78bfa | #4a5fc7 | 默认/通用（AI 标准色） |
+| `purple` | #764ba2 | #c084fc | #5b3080 | 关系构建 |
+
+---
+
+## 二、组件注册
+
+在页面的 `.json` 文件中按需注册：
+
+```json
+{
+  "usingComponents": {
+    "ai-inline-icon": "/components/ai-inline-icon/ai-inline-icon",
+    "ai-title-badge": "/components/ai-title-badge/ai-title-badge"
+  }
+}
+```
+
+---
+
+## 三、ai-inline-icon（行首嵌入小图标）
+
+### 外观
+- 尺寸：30rpx × 30rpx，圆角 6rpx
+- 背景：淡色渐变（主色 ~8% 透明度）
+- 内部图标：`ai-robot-inline.svg`（白色机身）
+- 动效：微光扫过（12s 周期）
+
+### WXML 用法
+
+```wxml
+<!-- 固定配色 —— indigo（默认） -->
+<ai-inline-icon />
+
+<!-- 固定配色 —— orange -->
+<ai-inline-icon color="orange" />
+
+<!-- 页面随机配色（推荐） -->
+<ai-inline-icon color="{{aiColor}}" />
+```
+
+### 属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `color` | String | `indigo` | 配色：`red` \| `orange` \| `yellow` \| `blue` \| `indigo` \| `purple` |
+
+### 典型场景
+- 任务卡片第三行 AI 建议文字行首（`task-list`）
+- 话术气泡行首标识（`task-detail`）
+
+---
+
+## 四、ai-title-badge（标题行 AI 徽章）
+
+### 外观
+- 形态：胶囊，`padding: 4rpx 14rpx 4rpx 6rpx`，圆角 18rpx
+- 背景：主色 ~8% 透明度渐变 + 主色 35% 边框
+- 文字：深色主色，20rpx，font-weight 500
+- 动效：呼吸脉冲（3s）+ 高光扫过（14s）
+
+### WXML 用法
+
+```wxml
+<!-- 默认配色 + 默认文字「AI智能洞察」 -->
+<ai-title-badge />
+
+<!-- 指定配色 -->
+<ai-title-badge color="blue" />
+
+<!-- 自定义文字 -->
+<ai-title-badge color="orange" label="AI 建议" />
+
+<!-- 页面随机配色（推荐） -->
+<ai-title-badge color="{{aiColor}}" />
+```
+
+### 属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `color` | String | `indigo` | 配色：`red` \| `orange` \| `yellow` \| `blue` \| `indigo` \| `purple` |
+| `label` | String | `AI智能洞察` | 徽章文字 |
+
+### 典型场景
+- 任务详情各区块标题右侧（`task-detail`）
+- 业绩分析区块标题（`performance`）
+
+---
+
+## 五、页面随机配色方案（推荐）
+
+每个页面在 `onLoad` 时随机选取一种配色，全页所有 AI 图标统一使用同一配色。
+
+### TS 实现（复制到各页面）
+
+```typescript
+const AI_COLORS = ['red', 'orange', 'yellow', 'blue', 'indigo', 'purple'] as const
+type AiColor = typeof AI_COLORS[number]
+
+Page({
+  data: {
+    aiColor: 'indigo' as AiColor,
+  },
+
+  onLoad() {
+    const aiColor = AI_COLORS[Math.floor(Math.random() * AI_COLORS.length)]
+    this.setData({ aiColor })
+  },
+})
+```
+
+### WXML 绑定
+
+```wxml
+<!-- 行首图标 -->
+<ai-inline-icon color="{{aiColor}}" />
+
+<!-- 标题徽章 -->
+<ai-title-badge color="{{aiColor}}" />
+```
+
+---
+
+## 六、各页面配色建议（可选固定配色）
+
+如不使用随机方案，可按以下建议固定配色：
+
+| 页面 | 建议配色 | 原因 |
+|------|---------|------|
+| `task-list` | 随机 | 每日新鲜感 |
+| `task-detail` | `indigo` | 通用默认 |
+| `task-detail-callback` | `orange` | 与 banner 主题色呼应 |
+| `task-detail-relationship` | `purple` | 与 banner 粉色系呼应 |
+| `performance` | `blue` | 数据分析感 |
+| `customer-detail` | `yellow` | 黑金页面，黄色点缀 |
+| `coach-detail` | `red` | coral banner 配红色 AI |
+
+---
+
+## 七、文件索引
+
+| 文件 | 说明 |
+|------|------|
+| `app.wxss` | 全局样式：`.ai-inline-icon`、`.ai-title-badge`、`.ai-color-*` |
+| `components/ai-inline-icon/` | 行首图标标准组件 |
+| `components/ai-title-badge/` | 标题徽章标准组件 |
+| `assets/icons/ai-robot-inline.svg` | 行首图标 SVG（白色） |
+| `assets/icons/ai-robot-sm.svg` | 徽章图标 SVG |
+| `docs/h5_ui/css/ai-icons.css` | H5 原型参考源文件 |