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

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 文件中按需注册：

{
  "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 用法

<!-- 固定配色 —— 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 用法

<!-- 默认配色 + 默认文字「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 实现（复制到各页面）

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 绑定

<!-- 行首图标 -->
<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 原型参考源文件