feat: redesign onboarding and home UI

UI.md

@@ -0,0 +1,89 @@
+设计原则
+整合四位专家的核心诉求：
+
+冷静但不冷漠、有趣但不幼稚、净化而非刺激
+
+最终界面布局（完整结构）
+📐 整体高度：约手机一屏半，单页垂直流
+【顶部区】个人状态栏（高度 30%）
+*.txt
+Plaintext
+┌─────────────────────────────────────────────────────┐
+│  [头像] 意志骑士 Lv.3                    💰 ×24    │  ← 毛玻璃背景
+│                                                     │    backdrop-blur: 12px
+│  ╭─────────────────────────────────────────────╮    │
+│  │ ████████████████░░░░░░░░░░░░░░░░░░░░░░░░░ │    │  ← HP生命槽
+│  │  HP: 72%              浊→清 视觉语言       │    │    渐变填充 #6EE7B7→#67E8F9
+│  ╰─────────────────────────────────────────────╯    │    24px高，12px圆角
+│                                                     │
+│  ✦ 深度含氧（已坚持 2 小时 17 分）                 │  ← Buff标签
+│    [薰衣草紫边框]                                   │    胶囊形
+└─────────────────────────────────────────────────────┘
+设计决策说明：
+
+保留游戏化元素（等级/称号），但降低视觉优先级——置于次要位置
+采用色彩心理学专家的"浊清动效"替代碎裂动效，保护用户情绪
+毛玻璃背景融合未来主义美学，但保持经典主义的秩序感
+【中部区】核心控制台（高度 35%）
+*.txt
+Plaintext
+【中下区】健康仪表盘（高度 20%）
+*.txt
+Plaintext
+┌─────────────────────────────────────────────────────┐
+│                                                     │
+│   ╭─────────╮         ╭────────────────────────╮   │
+│   │    ◐   │         │  呼吸系统     +12%     │   │
+│   │   84%  │         │  心脏功能      +8%     │   │
+│   │  健康  │         │  血液纯净     +15%     │   │
+│   ╰─────────╯         │  ────────────────────  │   │
+│    健康指数            │  +3.2 小时             │   │  ← 生命回收
+│    (圆环图)            │   生命已回收           │   │    强调色24px
+│                       ╰────────────────────────╯   │
+│                                                     │
+└─────────────────────────────────────────────────────┘
+设计决策说明：
+
+健康指数圆环图代替多个独立卡片，符合极简主义减法原则
+生命回收概念来自未来主义，成为核心数据展示
+【底部区】成长曲线（高度 15%）
+*.txt
+Plaintext
+┌─────────────────────────────────────────────────────┐
+│                                                     │
+│   7 天趋势                                          │
+│   │                                                 │
+│ 5 ├                                      ●          │  ← 琥珀金转折点
+│   │              ●────────────╱                    │
+│ 3 ├──●────────────────╱                             │
+│   │╱                                              │
+│ 0 └──┬────┬────┬────┬────┬────┬────┬────→          │
+│     周一  周二  周三  周四  周五  周六  周日         │
+│                                                     │
+│   背景：极淡青绿渐变 (#ECFDF5 → #F0F9FF)            │
+│                                                     │
+└─────────────────────────────────────────────────────┘
+最终色板
+用途	色值	来源	说明
+HP高填充	#67E8F9	心理学专家调整	降低饱和度，更持久
+HP低填充	#D97706 暗琥珀	心理学专家	警示非恐惧
+主渐变起	#6EE7B7	心理学专家调整	生命力、成长
+SOS/里程碑	#FBBF24	全场共识	温暖、成就
+Buff标签	#A78BFA 薰衣草紫	心理学专家原创	成长、过渡
+背景	#F8FAFC 微蓝白	经典主义	干净、呼吸感
+文字主色	#1E293B 深蓝灰	经典主义	冷静、专业
+动效规范
+动效	实现	周期	意义
+HP呼吸闪烁	微弱明度变化 ±5%	4-6秒	与身体节奏共振
+浊清过渡	颜色从暗琥珀→清澈渐变	2秒	非破坏性反馈
+呼吸线脉动	顶部细线不透明度 10-20%	6秒	身体自愈暗示
+设计决策摘要
+问题	最终决策	采纳来源
+HP碎裂动效	❌ 取消 → 改用"浊清"视觉语言	色彩心理学专家
+等级/称号	✅ 保留，但降低视觉优先级	未来主义
+金币奖励	✅ 保留图标形式，删除独立卡片	极简主义融合
+游戏化整体	⚠️ 保留数值化反馈，删除幼稚外壳	经典主义+未来主义融合
+布局风格	瑞士网格+毛玻璃	经典主义+未来主义融合
+配色饱和度	降低15-20%	经典主义+色彩心理学
+一句话总结
+"一个冷静的生物数据仪表盘，用颜色的语言告诉用户：你的每一次选择，都在让生命更加清澈。"