docs: 小程序页面重设计划

Ultraworked with Sisyphus

docs/系统设计/小程序页面重设计划.md

@@ -0,0 +1,422 @@
+# 知心益家小程序页面重设计划
+
+## 一、现状分析
+
+### 当前问题
+
+| 问题 | 详情 |
+|------|------|
+| **设计Token不统一** | `uni.scss` 中存在两套变量：旧 `$uni-primary: #FF6B6B` 和新 `--color-primary: #0EA5E9`，混用导致视觉不一致 |
+| **TabBar与业务脱节** | 当前 TabBar（首页/发现/商城/我的）是汐福俱乐部 Phase0 产物，弱化了核心任务/心愿功能 |
+| **页面膨胀** | 76个 .vue 文件在 35个目录中，无统一组件体系，各页面独立开发，风格不统一 |
+| **设计Token冲突** | 旧版 `$uni-primary: #FF6B6B`(珊瑚红) vs 新版 `--color-primary: #0EA5E9`(天蓝) vs 新设计暖橙 `#F97316` — 三套并存 |
+| **角色分流混乱** | 首页 `index/index` -> `child-index` / `parent-index` 跳转流不直观 |
+| **缺少设计规范** | 无统一的色彩、字体、间距、组件规范 |
+| **TabBar与实际脱节** | `pages.json` 配置（首页/发现/商城/我的）与实际 `custom-tab-bar` 组件（首页/任务/心愿单/我的）不一致 |
+| **组件两套并存** | 旧组件 `FunTaskItem`、`MediaRecorder` 使用内联样式写死颜色；新组件 `PlayfulButton`、`PlayfulCard` 使用CSS变量 |
+
+### 核心用户角色与场景
+
+```
+家长 (Parent)     → 管理孩子任务、审批心愿、选购套餐、查看成长
+孩子 (Child)      → 执行任务、兑换心愿、玩游戏、看成长记录
+规划师 (Teacher)  → 管理家庭、创建套餐、下发任务、测评记录
+```
+
+---
+
+## 一-B、现有可复用资产
+
+### 已存在的组件（可直接使用或改造）
+
+| 组件 | 路径 | 状态 | 使用建议 |
+|------|------|------|----------|
+| `PlayfulButton` | `components/PlayfulButton.vue` | ✅ 新设计组件，使用CSS变量 | 作为基础按钮组件推广 |
+| `PlayfulCard` | `components/PlayfulCard.vue` | ✅ 新设计组件，使用CSS变量 | 作为基础卡片组件推广 |
+| `FunTaskItem` | `components/FunTaskItem.vue` | ⚠️ 使用emoji图标，硬编码颜色 | 改造为使用CSS变量，保留emoji风格 |
+| `PointsProgressRing` | `components/PointsProgressRing.vue` | ✅ SVG环形进度条，动态颜色 | 可直接使用 |
+| `ConfettiCelebration` | `components/ConfettiCelebration.vue` | ✅ 撒花庆祝动画 | 任务完成/积分升级时使用 |
+| `MediaRecorder` | `components/MediaRecorder.vue` | ⚠️ 内联硬编码样式 | 改造为使用CSS变量 |
+| `address-picker` | `components/address-picker.vue` | ✅ 独立功能，scope样式 | 保持不动 |
+| `wuxing-sandbox` | `components/wuxing-sandbox.vue` | ⚠️ 五行沙盘游戏化组件 | 保留但改造颜色变量 |
+
+### 已存在的设计模式（需要保留的）
+
+- **Claymorphism 风格**：家长首页 `parent-index.vue` 已实现双阴影、粗边框的粘土风格
+- **角色色彩编码**：家长端橙色调、孩子端暖色调、规划师端蓝色调
+- **Emoji 图标体系**：全应用广泛使用 emoji 作为图标（📚🏠⚽⭐）
+- **Avatar 渐变色**：6种孩子头像渐变色方案
+- **Level 命名体系**：星星宝宝 → 月亮小朋友 → 太阳小天使 → 宇宙小英雄
+
+### Custom TabBar 现状
+
+`custom-tab-bar/index.vue` 已实现角色感知的底部导航：
+
+| 角色 | Tab 1 | Tab 2 | Tab 3 | Tab 4 | Tab 5 |
+|------|-------|-------|-------|-------|-------|
+| 家长/孩子 | 首页 | 任务 | 心愿单 | — | 我的 |
+| 规划师 | 首页 | 家庭 | 团队 | 成长档案 | 我的 |
+
+> ⚠️ **注意**：当前 `pages.json` 中配置的 TabBar 是「首页/发现/商城/我的」（汐福俱乐部 Phase0），与 `custom-tab-bar` 组件不一致。重设计时需统一。
+
+---
+
+## 二、新设计系统
+
+### 2.1 色彩体系
+
+```
+主色 (Primary):     #F97316 (暖橙)    — 活力、温暖、儿童友好
+辅色 (Secondary):   #FB923C (浅橙)    — 柔和过渡
+强调色 (Accent):    #0EA5E9 (天蓝)    — 信任、专业 (沿用现有)
+成功 (Success):     #22C55E (翠绿)    — 完成、奖励
+警告 (Warning):     #F59E0B (琥珀)    — 注意
+错误 (Error):       #EF4444 (红)      — 错误/逾期
+背景 (Background):  #FFF7ED (暖白)    — 柔和暖色底
+卡片 (Surface):     #FFFFFF (白)
+文字 (Text):        #3D2E1E (暖深棕)  — 柔和不刺眼
+次要文字 (Muted):   #94A3B8 (灰蓝)
+边框 (Border):      #FED7AA (浅橙边)
+```
+
+**设计理由**：
+- 暖橙色调传递 warmth、energy、playful，适合儿童教育产品
+- 避免冷色（蓝/灰）带来的"严肃、学校"感
+- 保留 `#0EA5E9` 作为强调色，与现有设计平滑过渡
+- 暖白背景 `#FFF7ED` 替代纯白，减少视觉疲劳
+- **角色色彩编码**：延续现有模式——家长端暖橙、孩子端暖橙+天蓝、规划师端蓝色调（`#3B82F6`）
+- **与现有资产衔接**：现有 `PlayfulCard/PlayfulButton` 使用 `--color-primary` 变量，新设计将其改为 `#F97316`
+
+### 2.2 字体体系
+
+```
+标题 (Display/Heading):  Fredoka (圆润、友好、活泼)
+正⽂ (Body):             Nunito (可读性强、亲民)
+数字 (Monospace):        JetBrains Mono (数据展示场景)
+```
+
+**设计理由**：
+- Fredoka：圆形字谷、无尖角，对儿童友好
+- Nunito：开放字怀、可读性佳，适合家长阅读
+- 微信小程序不支持自定义字体加载 → 使用系统回退 `system-ui, "Noto Sans SC", sans-serif`
+- 当前字体系列是 `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei'` — 保留此作为 fallback
+- 小字号使用 `font-family: var(--font-body)`，大字号配合 `font-weight: 700` 模拟标题效果
+
+### 2.3 形状与圆角
+
+```
+小元素 (按钮/标签):  rounded-xl (12rpx)
+卡片 (卡片/列表项):  rounded-2xl (20rpx)  
+大容器 (弹窗/页面):  rounded-3xl (32rpx)
+极端圆角 (大卡片):   rounded-[40rpx]
+```
+
+### 2.4 阴影系统
+
+```
+轻阴影 (轻微抬升):  0 4rpx 12rpx rgba(249,115,22,0.08)
+中阴影 (卡片):      0 8rpx 24rpx rgba(249,115,22,0.12)
+重阴影 (弹窗):      0 16rpx 48rpx rgba(249,115,22,0.16)
+内阴影 (按压态):    inset 0 2rpx 8rpx rgba(0,0,0,0.05)
+```
+
+### 2.5 Claymorphism 效果（儿童端核心风格）
+
+适用于孩子端页面，营造"玩具感"：
+
+```
+.clay-card {
+  border-radius: 24rpx;
+  border: 3px solid #FED7AA;
+  background: linear-gradient(145deg, #FFFFFF, #FFF7ED);
+  box-shadow: 
+    inset -4rpx -4rpx 12rpx rgba(249,115,22,0.06),
+    6rpx 6rpx 16rpx rgba(249,115,22,0.12);
+}
+```
+
+### 2.6 间距系统
+
+```
+--space-xs: 8rpx
+--space-sm: 16rpx
+--space-md: 24rpx
+--space-lg: 32rpx
+--space-xl: 48rpx
+--page-padding: 32rpx (页面左右边距)
+```
+
+---
+
+## 三、导航重构
+
+### 3.1 TabBar 重新设计
+
+> ⚡ **现状**：`custom-tab-bar/index.vue` 已实现角色感知 TabBar，但其配置与 `pages.json` 不一致。重设计需先统一。
+
+**目标 TabBar**：根据登录角色动态显示不同底部导航
+
+| Tab | 家长端 | 孩子端 | 规划师端 |
+|-----|--------|--------|----------|
+| 首页 | 家庭看板 | 我的任务 | 工作台 |
+| 任务 | 任务管理 | 执行任务 | 家庭管理 |
+| 心愿 | 心愿审批 | 心愿商城 | — |
+| 我的 | 个人中心 | 个人中心 | 个人中心 |
+
+**角色切换入口**：放在「我的」页面顶部，样式显眼
+
+### 3.2 首页分流优化
+
+```
+登录 → 角色判断 → 
+  ├─ 家长 → parent-index (家庭看板)
+  ├─ 孩子 → child-index (任务首页) 
+  └─ 规划师 → teacher/index (工作台)
+
+角色切换 → 保留入口在「我的」页面
+```
+
+去掉中间层 `pages/index/index` 的二次跳转，直接显示对应角色的首页。
+
+---
+
+## 四、页面重设计（分角色）
+
+### 4.1 孩子端页面
+
+| 页面 | 当前问题 | 重新设计要点 |
+|------|----------|-------------|
+| **首页 (child-index)** | 任务列表情，缺少激励感 | Clay 风格卡片，顶部显示积分/等级/连续签到，动效任务卡片轮播，角色头像+昵称 |
+| **任务列表 (child/tasks)** | 普通列表，无区别 | 分类 tab（今日/进行中/已完成），每个任务用 clay 卡片，进度条，积分奖励标注 |
+| **任务执行页** | 单一文本展示 | 分步骤引导，大按钮"完成任务"，计时器（限时任务），完成动画（撒花效果） |
+| **心愿单 (child/rewards)** | 普通列表 | 心愿墙布局（大卡片+可爱插图），积分价格标注，兑换按钮 |
+| **小游戏 (games)** | 无聚合入口 | 游戏大厅（卡片网格），每个游戏有封面图+最佳记录 |
+| **成长档案 (growth)** | 文本展示 | 时间线布局，徽章收集系统，等级进度 |
+| **积分页面** | 分散在各处 | 独立积分中心：流水记录、等级进度条、积分成就 |
+
+**孩子端视觉语言**：
+- 全 Claymorphism 风格
+- 大圆角 (24-40rpx)
+- 暖橙+天蓝主色调
+- 大字号 (32-40rpx)
+- 大点击区域 (min 88rpx)
+- 丰富动效：完成撒花、积分飞入、等级升级动画
+- 插图风格：圆润可爱角色
+
+### 4.2 家长端页面
+
+| 页面 | 当前问题 | 重新设计要点 |
+|------|----------|-------------|
+| **首页 (parent-index)** | 缺少家庭概览 | 顶部孩子头像快捷切换，本周任务完成概览（环形图），待审批心愿提醒，积分变动通知 |
+| **任务管理 (tasks/)** | 表单风格 | 创建任务：表单优化，更直观的积分配置/时间设置；任务列表：按孩子筛选，状态筛选 |
+| **审核任务 (review)** | 纯列表 | 卡片式审核队列，大图/大按钮，批注功能，快速通过/驳回 |
+| **心愿管理 (parent/wishes)** | 缺少概览 | 心愿审批队列，历史记录，预算控制 |
+| **孩子详情** | 信息分散 | 聚合页：任务统计/积分趋势/成长档案/测评报告，tab 切换 |
+| **套餐市场 (market)** | 普通列表 | 卡片式商品展示，评分/销量标签，购买流程优化 |
+| **测评申请** | 表单复杂 | 分步骤向导，孩子快照预览，规划师选择 |
+
+**家长端视觉语言**：
+- 扁平为主，局部 Clay 卡片
+- 信息密度适中
+- 数据可视化（图表/进度条）
+- 清晰的层级和信息架构
+
+### 4.3 规划师端页面
+
+| 页面 | 当前问题 | 重新设计要点 |
+|------|----------|-------------|
+| **工作台 (teacher/index)** | 缺少数据概览 | 今日任务、待办事项、收益概览、家庭动态 |
+| **家庭管理 (families)** | 表格列表 | 卡片式家庭列表，状态标签，快捷操作（发消息/查报告） |
+| **套餐管理 (packages)** | 表单 | 可视化套餐编辑器，模板选择，定价配置 |
+| **消息中心** | 简单列表 | 会话列表+聊天页，消息分类（系统/家庭/团队） |
+| **测评记录** | 信息分散 | 预约日历视图，测评结果录入表单，报告预览 |
+
+**规划师端视觉语言**：
+- 专业扁平风格
+- 类管理后台布局
+- 表格/列表高效展示
+- 蓝灰色系为主
+
+---
+
+## 五、组件库规划
+
+### 5.1 基础组件（统一）
+
+| 组件 | 说明 |
+|------|------|
+| `BaseButton` | 多种变体：primary/success/warning/text，大中小尺寸，loading态，禁用态 |
+| `BaseCard` | clay 变体和扁平变体，支持阴影层级配置 |
+| `BaseInput` | 统一输入框，标签在上，错误提示在下 |
+| `BaseBadge` | 角标/标签，支持颜色配置 |
+| `BaseAvatar` | 用户头像，支持角色标识 |
+| `BaseProgress` | 进度条，支持颜色/动画 |
+| `BaseModal` | 弹窗，支持 clay/扁平模式 |
+| `BaseToast` | 轻提示，成功/失败/警告 |
+| `BaseEmpty` | 空态占位，插图+文案+操作按钮 |
+| `BaseLoading` | 骨架屏组件 |
+
+### 5.2 业务组件（分角色）
+
+| 组件 | 角色 | 说明 |
+|------|------|------|
+| `TaskCard` | 通用 | 任务卡片，含状态/积分/进度/操作按钮 |
+| `WishCard` | 通用 | 心愿卡片，含积分/审批状态 |
+| `PointsDisplay` | 通用 | 积分展示，含飞入动画 |
+| `ChildSwitcher` | 家长 | 孩子头像横向滚动切换器 |
+| `RewardAnimation` | 孩子 | 完成奖励动画（撒花/积分飞入） |
+| `ProgressRing` | 通用 | 环形进度图（任务完成率/积分进度） |
+| `StreakBadge` | 孩子 | 连续签到/连续完成徽章 |
+| `Timeline` | 通用 | 时间线组件（成长档案/任务历史） |
+| `StatCard` | 通用 | 数据统计卡片（带图标+数值+趋势） |
+| `RoleSwitcher` | 通用 | 角色切换器，显示当前角色+切换按钮 |
+
+---
+
+## 六、视觉设计稿（核心页面）
+
+### 6.1 孩子首页 (child-index)
+
+```
+┌──────────────────────────────┐
+│ 🔙  知心益家          🔔 ⚙️ │ ← 顶部导航
+├──────────────────────────────┤
+│  👦 小明               Lv.5 │
+│  ★★★★☆  积分 1,280        │ ← 用户信息区 (clay卡片)
+│  ██████████░░ 80% 升级      │
+├──────────────────────────────┤
+│  [📋 待办任务] [⭐ 心愿] [🏆 成就] │ ← 分类tab
+├──────────────────────────────┤
+│ ┌──────────────────────────┐ │
+│ │ 🎯 每日任务              │ │
+│ │ ┌──────┐ ┌──────┐ ┌────┐ │ │
+│ │ │ 阅读  │ │ 运动  │ │ 整理│ │ ← 任务小卡片 (clay)
+│ │ │ +20⭐ │ │ +30⭐ │ │+15⭐│ │
+│ │ └──────┘ └──────┘ └────┘ │ │
+│ │ 还有3个任务待完成 →      │ │
+│ └──────────────────────────┘ │
+├──────────────────────────────┤
+│ 今日完成: 4/7 任务          │
+│ ████████░░░░░░ 57%          │ ← 进度环
+│ 连续完成: 🔥 5天            │
+├──────────────────────────────┤
+│ 最新成长档案: 新增"第一次"✨ │
+│ → 查看完整档案              │
+└──────────────────────────────┘
+                           [TabBar]
+```
+
+### 6.2 家长首页 (parent-index)
+
+```
+┌──────────────────────────────┐
+│ 🔙  知心益家          🔔 ⚙️ │
+├──────────────────────────────┤
+│ [👦小明] [👧小红] [+添加]   │ ← 孩子切换器 (横向滚动)
+├──────────────────────────────┤
+│ ┌─── 本周概览 ────────────┐ │
+│ │                        │ │
+│ │  🎯 任务  📋 待审  ⭐ 积分 │ │
+│ │  完成率  心愿   获得     │ │
+│ │  72%    3个    +350     │ │
+│ │  ↑12%          📈      │ │
+│ └──────────────────────────┘ │
+├──────────────────────────────┤
+│ [📋 创建任务] [✅ 审核] [📊 统计] │ ← 快捷操作
+├──────────────────────────────┤
+│ 待处理 (3)                   │
+│ ┌──────────────────────────┐ │
+│ │ 小明请求审批: 乐高积木    │ │
+│ │  🕐 2小时前   积分: 500  │ │
+│ │         [驳回] [通过]    │ │ ← 快速操作
+│ └──────────────────────────┘ │
+│ ┌──────────────────────────┐ │
+│ │ 小红提交: 阅读30分钟     │ │
+│ │  🕐 1小时前   积分: +20  │ │
+│ │         [驳回] [通过]    │ │
+│ └──────────────────────────┘ │
+├──────────────────────────────┤
+│  孩子成长动态                 │
+│  · 小明完成"数学作业" +20⭐  │
+│  · 小红获得"阅读之星"徽章🎖️ │
+└──────────────────────────────┘
+                           [TabBar]
+```
+
+---
+
+## 七、实施路线图
+
+### Phase 1 — 基础建设（高优先级）
+
+| 任务 | 说明 |
+|------|------|
+| 统一 `uni.scss` 设计Token | 声明新色彩/字体/间距/阴影变量，删除过期变量 |
+| 创建基础组件库 | `BaseButton`, `BaseCard`, `BaseInput`, `BaseBadge`, `BaseToast`, `BaseEmpty`, `BaseLoading` |
+| 替换全局导航样式 | TabBar 颜色更新、导航栏样式统一 |
+
+### Phase 2 — 孩子端重设计（高优先级）
+
+| 任务 | 说明 |
+|------|------|
+| 重设计孩子首页 `child-index` | Clay 风格，积分/等级/任务概览 |
+| 重设计任务列表/执行页 | 分类 tab，任务卡片，完成动画 |
+| 重设计心愿单 | 心愿墙，积分兑换流程 |
+| 积分中心 | 独立积分页面，流水/等级/成就 |
+| 游戏大厅 | 聚合入口，卡片网格 |
+
+### Phase 3 — 家长端重设计（中优先级）
+
+| 任务 | 说明 |
+|------|------|
+| 重设计家长首页 `parent-index` | 家庭看板，孩子切换，待办概览 |
+| 任务管理/审核页面 | 创建表单优化，审核队列卡片化 |
+| 心愿管理 | 审批流程优化，预算控制 |
+| 孩子聚合页 | 任务+积分+成长+报告聚合 |
+
+### Phase 4 — 规划师端 & 其他（中优先级）
+
+| 任务 | 说明 |
+|------|------|
+| 规划师工作台 | 数据概览，代办事项 |
+| 家庭/套餐管理 | 卡片化，操作效率优化 |
+| 测评流程 | 预约/录入/报告全流程优化 |
+
+### Phase 5 — 高阶体验（低优先级）
+
+| 任务 | 说明 |
+|------|------|
+| 动效系统 | 完成撒花、积分飞入、等级升级、页面转场 |
+| 空态/加载态/错误态 | 全页面覆盖统一占位组件 |
+| 骨架屏 | 关键页面加载骨架屏 |
+| Dark Mode 适配 | 微信小程序暗黑模式 |
+
+---
+
+## 八、设计原则（执行守则）
+
+1. **孩子端要"玩"的感觉** → Claymorphism、大圆角、动效、可爱插画
+2. **家长端要"管"的效率** → 清晰层级、数据可视化、快速操作
+3. **规划师端要"专"的工具** → 类后台布局、高效表格、统计看板
+4. **统一设计语言** → 所有页面共享色彩/字体/间距/组件规范
+5. **移动端优先** → 大点击区域（≥88rpx）、单手操作、避免 hover-only 交互
+6. **不打扰** → 动效要有目的（反馈/引导），不做纯装饰动画
+7. **不要 emoji 代替图标** → 使用 SVG/字体图标
+
+---
+
+## 九、技术约束
+
+| 约束 | 处理方式 |
+|------|---------|
+| 微信小程序不支持可选链 `?.` | 使用 `&&` 或三元表达式 |
+| 不支持自定义字体 | 使用系统字体堆栈 `system-ui, "Noto Sans SC", sans-serif` |
+| uni-app Vue 2 Options API | 保持 Options API，不引入 Composition API |
+| 小程序包体积限制 (< 2MB) | 图标使用字体图标而非 SVG 文件，组件按需加载 |
+| i18n 暂无需求 | 全中文界面 |
+| 不支持 `:hover` | 使用 `:active` 和触摸反馈 |
+
+---
+
+*文档版本: v1.0*
+*日期: 2026-06-05*