# 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 原型参考源文件 |