# 微信小程序 VI 设计系统

> 最后更新：2026-03-17  
> 适用范围：台球门店小程序前端所有页面  
> 面向对象：设计师、前端开发、AI 代码生成

---

## 📋 目录

1. [任务分类配色](#1-任务分类配色)
2. [客户标签配色](#2-客户标签配色)
3. [关系等级配色](#3-关系等级配色)
4. [置顶/放弃状态](#4-置顶放弃状态)
5. [助教等级配色](#5-助教等级配色)
6. [AI 图标配色系统](#6-ai-图标配色系统)
7. [CSS 变量速查表](#7-css-变量速查表)

---

## 1. 任务分类配色

### 1.1 四种任务类型

| 任务类型 | 优先级 | 边框色 | 标签渐变色 | 用途 |
|---------|--------|--------|-----------|------|
| 高优先召回 | 0 | `#dc2626` | `#b91c1c → #dc2626` | max(WBI,NCI) > 7 |
| 优先召回 | 0 | `#f97316` | `#ea580c → #f97316` | max(WBI,NCI) > 5 |
| 客户回访 | 1 | `#14b8a6` | `#0d9488 → #14b8a6` | 完成召回后未备注 |
| 关系构建 | 2 | `#f472b6` | `#ec4899 → #f472b6` | RS < 6 |

### 1.2 WXSS 类名映射

```css
/* 卡片边框 */
.task-card--high_priority { border-left-color: #dc2626; }
.task-card--priority_recall { border-left-color: #f97316; }
.task-card--callback { border-left-color: #14b8a6; }
.task-card--relationship { border-left-color: #f472b6; }

/* 标签渐变 */
.task-type-tag--high_priority { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%); }
.task-type-tag--priority_recall { background: linear-gradient(135deg, #ea580c 0%, #f97316 100%); }
.task-type-tag--callback { background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%); }
.task-type-tag--relationship { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%); }
```

### 1.3 TypeScript 常量

```typescript
export const TASK_TYPE_COLORS = {
  high_priority: {
    borderColor: '#dc2626',
    gradientFrom: '#b91c1c',
    gradientTo: '#dc2626',
    label: '高优先召回',
  },
  priority_recall: {
    borderColor: '#f97316',
    gradientFrom: '#ea580c',
    gradientTo: '#f97316',
    label: '优先召回',
  },
  callback: {
    borderColor: '#14b8a6',
    gradientFrom: '#0d9488',
    gradientTo: '#14b8a6',
    label: '客户回访',
  },
  relationship: {
    borderColor: '#f472b6',
    gradientFrom: '#ec4899',
    gradientTo: '#f472b6',
    label: '关系构建',
  },
};
```

---

## 2. 客户标签配色

### 2.1 六种客户分类标签

| 标签名 | 字体色 | 背景色 | 心理学依据 | 用途 |
|--------|--------|--------|-----------|------|
| 客户基础 | `#0052d9` | `#ecf2fe` | 蓝色 - 信任、基础信息 | 基本信息、生日、性别等 |
| 消费习惯 | `#00a870` | `#e6f7f0` | 绿色 - 增长、消费行为 | 消费频率、金额、时段 |
| 玩法偏好 | `#ed7b2f` | `#fff3e6` | 橙色 - 活力、娱乐偏好 | 游戏类型、时长偏好 |
| 促销偏好 | `#d4a017` | `#fffbeb` | 金色 - 价值、优惠敏感度 | 对促销活动的反应 |
| 社交关系 | `#764ba2` | `#f3e8ff` | 紫色 - 社交、人脉关系 | 推荐、介绍、社交属性 |
| 重要反馈 | `#e34d59` | `#ffe6e8` | 红色 - 警示、关键信息 | 投诉、建议、重要反馈 |

### 2.2 WXSS 类名映射

```css
.clue-tag-primary { background: rgba(0, 82, 217, 0.1); color: #0052d9; }
.clue-tag-success { background: rgba(0, 168, 112, 0.1); color: #00a870; }
.clue-tag-orange { background: rgba(237, 123, 47, 0.1); color: #ed7b2f; }
.clue-tag-gold { background: rgba(212, 160, 23, 0.1); color: #d4a017; }
.clue-tag-purple { background: rgba(118, 75, 162, 0.1); color: #764ba2; }
.clue-tag-error { background: rgba(227, 77, 89, 0.1); color: #e34d59; }
```

---

## 3. 关系等级配色

### 3.1 四个关系等级

| 关系等级 | 爱心Icon | 分数范围 | 背景渐变 | 文字色 | 用途 |
|---------|---------|---------|---------|--------|------|
| 很好（非常好） | 💖 | > 8.5 | `#e91e63 → #f472b6` | `#fff` | 优质客户 |
| 良好 | 🧡 | 6-8.5 | `#ea580c → #fb923c` | `#fff` | 稳定客户 |
| 一般 | 💛 | 3.5-6 | `#eab308 → #fbbf24` | `#fff` | 普通客户 |
| 待发展 | 💙 | < 3.5 | `#64748b → #94a3b8` | `#fff` | 需维护客户 |

### 3.2 WXSS 类名映射

```css
.rel-level-excellent { background: linear-gradient(135deg, #e91e63, #f472b6); box-shadow: 0 4rpx 12rpx rgba(233,30,99,0.30); }
.rel-level-good { background: linear-gradient(135deg, #ea580c, #fb923c); box-shadow: 0 4rpx 12rpx rgba(234,88,12,0.30); }
.rel-level-normal { background: linear-gradient(135deg, #eab308, #fbbf24); box-shadow: 0 4rpx 12rpx rgba(234,179,8,0.30); }
.rel-level-poor { background: linear-gradient(135deg, #64748b, #94a3b8); box-shadow: 0 4rpx 12rpx rgba(100,116,139,0.30); }
```

---

## 4. 置顶/放弃状态

### 4.1 置顶状态

**视觉处理**：金色边框光晕效果

```css
.task-card--pinned {
  box-shadow: 0 5rpx 7rpx rgba(245, 158, 11, 0.12), 0 0 0 8rpx rgba(245, 158, 11, 0.08);
}
```

**颜色值**：
- 光晕色：`#f59e0b`（琥珀色）
- 透明度：12% + 8%

### 4.2 放弃状态

**视觉处理**：灰化 + 降低透明度

```css
.task-card--abandoned {
  border-left-color: #d1d5db !important;
  opacity: 0.55;
}

.task-type-tag--abandoned {
  background: #d1d5db !important;
}

.customer-name--abandoned {
  color: #9ca3af;
}
```

**颜色值**：
- 边框色：`#d1d5db`（灰色）
- 文字色：`#9ca3af`（浅灰）
- 透明度：55%

---

## 5. 助教等级配色

### 5.1 四级 + 星级

| 等级 | 字体色 | 背景色 | 说明 |
|------|--------|--------|------|
| 初级 | `#0052d9` | `#ecf2fe` | 蓝色 - 信任、基础 |
| 中级 | `#ed7b2f` | `#fff3e6` | 橙色 - 活力、进阶 |
| 高级 | `#e91e63` | `#ffe6e8` | 粉色 - 优雅、资深 |
| ⭐ 星级 | `#fbbf24` | `#fffef0` | 金黄色 - 价值、顶级 |

### 5.2 WXSS 类名映射

```css
.coach-level-junior { color: #0052d9; background: #ecf2fe; }
.coach-level-middle { color: #ed7b2f; background: #fff3e6; }
.coach-level-senior { color: #e91e63; background: #ffe6e8; }
.coach-level-star { color: #fbbf24; background: #fffef0; }
```

---

## 6. AI 图标配色系统

### 6.1 概览

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` |

### 6.2 六种配色

| 配色名 | 主色 | 浅色 | 深色 | 用途 |
|--------|------|------|------|------|
| Red | `#e74c3c` | `#f39c9c` | `#c0392b` | 警示、重要 |
| Orange | `#e67e22` | `#f5c77e` | `#ca6c17` | 活力、推荐 |
| Yellow | `#d4a017` | `#f7dc6f` | `#b8860b` | 价值、优化 |
| Blue | `#2980b9` | `#7ec8e3` | `#1a5276` | 信息、分析 |
| Indigo | `#667eea` | `#a78bfa` | `#4a5fc7` | 默认、通用 |
| Purple | `#764ba2` | `#c084fc` | `#5b3080` | 创意、特殊 |

### 6.3 组件注册

在页面的 `.json` 文件中按需注册：

```json
{
  "usingComponents": {
    "ai-inline-icon": "/components/ai-inline-icon/ai-inline-icon",
    "ai-title-badge": "/components/ai-title-badge/ai-title-badge"
  }
}
```

### 6.4 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` |

### 6.5 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智能洞察` | 徽章文字 |

### 6.6 页面随机配色方案（推荐）

每个页面在 `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}}" />
```

### 6.7 各页面配色建议（可选固定配色）

如不使用随机方案，可按以下建议固定配色：

| 页面 | 建议配色 | 原因 |
|------|---------|------|
| `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 |

---

## 7. CSS 变量速查表

### 7.1 全局颜色变量（app.wxss）

```css
page {
  /* 主色系 */
  --color-primary: #0052d9;
  --color-primary-light: #ecf2fe;
  --color-success: #00a870;
  --color-warning: #ed7b2f;
  --color-error: #e34d59;

  /* 灰度系（13级） */
  --color-gray-1: #f3f3f3;
  --color-gray-2: #eeeeee;
  --color-gray-3: #e7e7e7;
  --color-gray-4: #dcdcdc;
  --color-gray-5: #c5c5c5;
  --color-gray-6: #a6a6a6;
  --color-gray-7: #8b8b8b;
  --color-gray-8: #777777;
  --color-gray-9: #5e5e5e;
  --color-gray-10: #4b4b4b;
  --color-gray-11: #393939;
  --color-gray-12: #2c2c2c;
  --color-gray-13: #242424;
}
```

### 7.2 快速查询

**任务类型边框色**：
- 高优先召回：`#dc2626`
- 优先召回：`#f97316`
- 客户回访：`#14b8a6`
- 关系构建：`#f472b6`

**客户标签字体色**：
- 客户基础：`#0052d9`
- 消费习惯：`#00a870`
- 玩法偏好：`#ed7b2f`
- 促销偏好：`#d4a017`
- 社交关系：`#764ba2`
- 重要反馈：`#e34d59`

**关系等级渐变**：
- 很好：`#e91e63 → #f472b6`
- 良好：`#ea580c → #fb923c`
- 一般：`#eab308 → #fbbf24`
- 待发展：`#64748b → #94a3b8`

**助教等级**：
- 初级：`#0052d9` / `#ecf2fe`
- 中级：`#ed7b2f` / `#fff3e6`
- 高级：`#e91e63` / `#ffe6e8`
- ⭐ 星级：`#fbbf24` / `#fffef0`

---

## 8. 头像颜色系统

### 8.1 概览

所有客户头像、助教头像统一使用本色板，共 **24 种**渐变色。  
全局 WXSS 类名格式：`.avatar-{key}`，定义在 `app.wxss`。  
TS 工具函数：`nameToAvatarColor(name)` 位于 `utils/avatar-color.ts`。

### 8.2 24 色标准色板

| Key | 渐变起点 | 渐变终点 | 视觉风格 |
|-----|---------|---------|--------|
| `blue` | `#60a5fa` | `#3b82f6` | 经典蓝 |
| `indigo` | `#818cf8` | `#4f46e5` | 靛蓝 |
| `violet` | `#a78bfa` | `#7c3aed` | 紫罗兰 |
| `purple` | `#c084fc` | `#9333ea` | 紫色 |
| `fuchsia` | `#bd58c8` | `#7a1486` | 紫红 |
| `pink` | `#d44d96` | `#b83077` | 粉色 |
| `rose` | `#d05060` | `#aa1535` | 玫瑰红 |
| `red` | `#c85050` | `#a81c1c` | 红色 |
| `orange` | `#cc6e22` | `#b04208` | 橙色 |
| `amber` | `#fbbf24` | `#d97706` | 琥珀 |
| `yellow` | `#facc15` | `#ca8a04` | 黄色 |
| `lime` | `#a3e635` | `#65a30d` | 黄绿 |
| `green` | `#4ade80` | `#16a34a` | 绿色 |
| `emerald` | `#34d399` | `#059669` | 翡翠绿 |
| `teal` | `#2dd4bf` | `#0d9488` | 青绿 |
| `cyan` | `#22d3ee` | `#0891b2` | 青色 |
| `sky` | `#38bdf8` | `#0284c7` | 天蓝 |
| `slate` | `#94a3b8` | `#475569` | 石板灰 |
| `coral` | `#cc6245` | `#ad3512` | 珊瑚 |
| `mint` | `#67e8f9` | `#0891b2` | 薄荷 |
| `lavender` | `#c4b5fd` | `#7c3aed` | 薰衣草 |
| `gold` | `#fcd34d` | `#b45309` | 金色 |
| `crimson` | `#c42844` | `#750d28` | 深红 |
| `ocean` | `#38bdf8` | `#1d4ed8` | 海洋蓝 |

### 8.3 WXSS 类名（全局，定义在 app.wxss）

```css
.avatar-blue     { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.avatar-indigo   { background: linear-gradient(135deg, #818cf8, #4f46e5); }
.avatar-violet   { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.avatar-purple   { background: linear-gradient(135deg, #c084fc, #9333ea); }
.avatar-fuchsia  { background: linear-gradient(135deg, #bd58c8, #7a1486); }
.avatar-pink     { background: linear-gradient(135deg, #d44d96, #b83077); }
.avatar-rose     { background: linear-gradient(135deg, #d05060, #aa1535); }
.avatar-red      { background: linear-gradient(135deg, #c85050, #a81c1c); }
.avatar-orange   { background: linear-gradient(135deg, #cc6e22, #b04208); }
.avatar-amber    { background: linear-gradient(135deg, #fbbf24, #d97706); }
.avatar-yellow   { background: linear-gradient(135deg, #facc15, #ca8a04); }
.avatar-lime     { background: linear-gradient(135deg, #a3e635, #65a30d); }
.avatar-green    { background: linear-gradient(135deg, #4ade80, #16a34a); }
.avatar-emerald  { background: linear-gradient(135deg, #34d399, #059669); }
.avatar-teal     { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.avatar-cyan     { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.avatar-sky      { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.avatar-slate    { background: linear-gradient(135deg, #94a3b8, #475569); }
.avatar-coral    { background: linear-gradient(135deg, #cc6245, #ad3512); }
.avatar-mint     { background: linear-gradient(135deg, #67e8f9, #0891b2); }
.avatar-lavender { background: linear-gradient(135deg, #c4b5fd, #7c3aed); }
.avatar-gold     { background: linear-gradient(135deg, #fcd34d, #b45309); }
.avatar-crimson  { background: linear-gradient(135deg, #c42844, #750d28); }
.avatar-ocean    { background: linear-gradient(135deg, #38bdf8, #1d4ed8); }
```

### 8.4 TypeScript 工具（utils/avatar-color.ts）

```typescript
import { nameToAvatarColor } from '../../utils/avatar-color'

// 根据姓名首字稳定映射颜色（相同输入永远返回相同结果）
const color = nameToAvatarColor('王先生')  // => 'blue'
```

### 8.5 WXML 用法

```wxml
<!-- 客户/助教头像 -->
<view class="record-avatar avatar-{{item.avatarColor}}">
  <text>{{item.avatarChar}}</text>
</view>
```

### 8.6 迁移说明

各页面原有的散乱类名统一替换为 `.avatar-{key}`：

| 旧类名 | 新类名 | 页面 |
|--------|--------|------|
| `.avatar-from-blue` | `.avatar-blue` | performance, performance-records |
| `.avatar-from-pink` | `.avatar-pink` | performance, performance-records |
| `.avatar-from-teal` | `.avatar-teal` | performance, performance-records |
| `.avatar-from-green` | `.avatar-green` | performance, performance-records |
| `.avatar-from-orange` | `.avatar-orange` | performance, performance-records |
| `.avatar-from-purple` | `.avatar-purple` | performance, performance-records |
| `.avatar-from-violet` | `.avatar-violet` | performance, performance-records |
| `.avatar-from-amber` | `.avatar-amber` | performance, performance-records |
| `.avatar-gradient-pink` | `.avatar-pink` | coach-detail |
| `.avatar-gradient-amber` | `.avatar-amber` | coach-detail |
| `.avatar-gradient-green` | `.avatar-green` | coach-detail |
| `.avatar-gradient-blue` | `.avatar-blue` | coach-detail |
| `.avatar-gradient-purple` | `.avatar-violet` | coach-detail |
| `.avatar-gradient-teal` | `.avatar-teal` | coach-detail |
| `.avatar--blue` | `.avatar-blue` | board-coach |
| `.avatar--green` | `.avatar-green` | board-coach |
| `.avatar--pink` | `.avatar-pink` | board-coach |
| `.avatar--amber` | `.avatar-amber` | board-coach |
| `.avatar--purple` | `.avatar-violet` | board-coach |
| `.avatar--cyan` | `.avatar-cyan` | board-coach |

---

**版本：** 1.1  
**最后更新：** 2026-03-17  
**维护者：** 设计系统团队