🎨 VI 设计系统 - 完整指南

台球门店小程序前端设计系统

1️⃣ 任务分类配色

任务类型边框色渐变触发条件
高优先召回#dc2626#b91c1c → #dc2626max(WBI,NCI) > 7
优先召回#f97316#ea580c → #f97316max(WBI,NCI) > 5
客户回访#14b8a6#0d9488 → #14b8a6完成召回后未备注
关系构建#f472b6#ec4899 → #f472b6RS < 6

2️⃣ 客户标签配色(6种)

标签字体色背景色心理学
客户基础#0052d9#ecf2fe蓝色-信任
消费习惯#00a870#e6f7f0绿色-增长
玩法偏好#ed7b2f#fff3e6橙色-活力
促销偏好#d4a017#fffbeb金色-价值
社交关系#764ba2#f3e8ff紫色-社交
重要反馈#e34d59#ffe6e8红色-警示

3️⃣ 关系等级配色

等级Icon分数渐变
很好💖> 8.5#e91e63 → #f472b6
良好🧡6-8.5#ea580c → #fb923c
一般💛3.5-6#eab308 → #fbbf24
待发展💙< 3.5#64748b → #94a3b8

4️⃣ 置顶/放弃状态

状态边框色文字色透明度
✨ 置顶#f59e0b-金色光晕
❌ 放弃#d1d5db#9ca3af55%

5️⃣ 助教等级配色(4级+星级)

等级字体色背景色说明
初级#0052d9#ecf2fe蓝色-基础
中级#ed7b2f#fff3e6橙色-进阶
高级#e91e63#ffe6e8粉色-资深
⭐ 星级#fbbf24#fffef0金黄-顶级

6️⃣ AI 图标配色系统

标准组件

组件用途路径
ai-inline-icon卡片行首小图标/components/ai-inline-icon/
ai-title-badge标题行徽章/components/ai-title-badge/

六种配色

Red
#e74c3c
Orange
#e67e22
Yellow
#d4a017
Blue
#2980b9
Indigo
#667eea
Purple
#764ba2

7️⃣ 全局颜色变量

主色系

Primary
#0052d9
Success
#00a870
Warning
#ed7b2f
Error
#e34d59
Primary Light
#ecf2fe