cfc/DESIGN.md

---

name: 浠艾福设计系统 version: 1.1.0 colors: # === 家长端 - 温暖希望 === parent:

background: "#FFF9F0"
surface: "#FFFFFF"
primary: "#FF8C42"
primary-hover: "#FF7A2E"
secondary: "#4ECDC4"
accent: "#FFD93D"
text-primary: "#2D3436"
text-secondary: "#636E72"
success: "#00B894"
error: "#FF6B6B"

# === 成长规划师端 - 专业活力 === teacher:

background: "#F0F7FF"
surface: "#FFFFFF"
primary: "#3B82F6"
primary-hover: "#2563EB"
secondary: "#10B981"
accent: "#F59E0B"
text-primary: "#1E293B"
text-secondary: "#64748B"
success: "#10B981"
warning: "#F59E0B"
error: "#EF4444"

# === 孩子端 - 快乐有趣 === child:

background: "#FFF5E6"
surface: "#FFFFFF"
primary: "#FF6B9D"
primary-hover: "#F55A8A"
secondary: "#A78BFA"
accent: "#34D399"
text-primary: "#374151"
text-secondary: "#6B7280"
success: "#34D399"
gold: "#FFD700"

# === Web管理端 - 专业简洁 === web:

background: "#F8FAFC"
surface: "#FFFFFF"
primary: "#6366F1"
primary-hover: "#4F46E5"
secondary: "#0EA5E9"
accent: "#F59E0B"
text-primary: "#1E293B"
text-secondary: "#64748B"
border: "#E2E8F0"
success: "#22C55E"
warning: "#F59E0B"
error: "#EF4444"

typography: display:

fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif"
fontSize: 32px
fontWeight: 700
lineHeight: 1.2

headline:

fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif"
fontSize: 24px
fontWeight: 600
lineHeight: 1.3

title:

fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif"
fontSize: 18px
fontWeight: 600
lineHeight: 1.4

body:

fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif"
fontSize: 16px
fontWeight: 400
lineHeight: 1.6

label:

fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif"
fontSize: 14px
fontWeight: 500
lineHeight: 1.4

caption:

fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif"
fontSize: 12px
fontWeight: 400
lineHeight: 1.4

rounded: sm: 8px md: 12px lg: 16px xl: 24px full: 9999px spacing: unit: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px 2xl: 48px section: 64px

=== 组件规范 ===

components: card:

rounded: "{rounded.lg}"
padding: "{spacing.lg}"

button-primary:

rounded: "{rounded.md}"
padding: "12px 24px"

badge-success:

rounded: "{rounded.full}"
padding: "4px 12px"

progress-bar:

rounded: "{rounded.full}"
height: "8px"

avatar:

rounded: "{rounded.full}"
size: "48px"

---

浠艾福 - 多端设计系统

1. 家长端 (Parent)

情感定位: 温暖、希望、愉悦、充满期待

核心理念: 家长是孩子成长的助推器

视觉特点

• 温暖的米白色背景 (#FFF9F0)
• 橙色主色调传递活力与希望
• 青色辅色清新舒适
• 鼓励性文案和积极反馈
• 成长数据可视化 + 进度条动画

页面结构

• 欢迎区：动态问候 + 孩子状态
• 成长数据：任务完成率、积分、连续天数、习惯打卡
• 今日重点：待完成任务 + 鼓励语
• 成长里程碑：成就徽章展示
• 快捷操作：常用功能入口

---

2. 成长规划师端 (Teacher)

情感定位: 专业、活力、值得信赖

核心理念: 帮助家庭规划孩子成长路径

视觉特点

• 清新的浅蓝色背景 (#F0F7FF)
• 蓝色主色调专业可信
• 绿色辅色代表成长与希望
• 金色强调代表成就
• 数据驱动：销售数据、团队业绩、服务家庭数
• 专业仪表盘风格

页面结构

• 首页仪表盘：数据概览、快捷入口、今日概览
• 我的家庭：服务家庭列表、任务管理
• 我的团队：下级规划师、团队业绩
• 消息中心：家长咨询、系统通知
• 套餐管理：创建/编辑/发布套餐
• 订单与佣金：订单列表、佣金明细

---

3. 孩子端 (Child)

情感定位: 快乐、有趣、充满成就感

核心理念: 在快乐中养成好习惯

视觉特点

• 柔和的暖粉色背景 (#FFF5E6)
• 粉色主色调活泼可爱
• 紫色辅色梦幻有趣
• 金色强调代表成就
• 卡通元素：星星、奖杯、彩虹
• 奖励机制可视化 + 徽章系统
• 成就反馈：彩带、星星动画

页面结构

• 今日任务：任务卡片、进度条、打卡动画
• 积分商城：积分展示、奖励兑换
• 成就墙：徽章收集、里程碑
• 趣味互动：打卡提醒、鼓励动画

---

4. Web管理端 (Web Admin)

情感定位: 专业、高效、清晰

核心理念: 高效管理，清晰洞察

视觉特点

• 浅灰背景 (#F8FAFC) 不伤眼
• 紫色主色调 (#6366F1) 现代专业
• 蓝色辅色 (#0EA5E9) 数据展示
• 卡片式布局清晰分区
• 表格/列表专业呈现
• 图表数据可视化
• 侧边导航 + 顶部header

页面结构

• 仪表盘：关键指标、数据图表
• 任务管理：任务列表、模板管理
• 奖励管理：心愿单、奖励设置
• 家庭管理：家庭列表、孩子管理
• 积分管理：积分规则、调整记录
• 成长规划师：套餐管理、审核、团队
• 系统管理：用户管理、权限、日志