root/Neo-ZQYY

Fork 0

Files

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

2026-03-18 05:14:35 +08:00

16 KiB

Raw Blame History

微信小程序 VI 设计系统

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

📋 目录

任务分类配色
客户标签配色
关系等级配色
置顶/放弃状态
助教等级配色
AI 图标配色系统
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 类名映射

/* 卡片边框 */
.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 常量

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 类名映射

.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 类名映射

.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 置顶状态

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

.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 放弃状态

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

.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 类名映射

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

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

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

<!-- 默认配色 + 默认文字「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 实现：

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}}" />

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）

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）

.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）

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

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

8.5 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
维护者： 设计系统团队

16 KiB Raw Blame History Unescape Escape