小程序迁移静态页面完成！！！

2026-03-18 05:14:35 +08:00
parent 72bb11b34f
commit 075caf067f
124 changed files with 10407 additions and 2738 deletions
--- a/docs/miniprogram-dev/design-system/VI-DESIGN-SYSTEM.md
+++ b/docs/miniprogram-dev/design-system/VI-DESIGN-SYSTEM.md
@@ -0,0 +1,509 @@
+# 微信小程序 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  
+**维护者：** 设计系统团队