|
|
@@ -1,11 +1,11 @@
|
|
|
# TabBar 重新设计
|
|
|
|
|
|
-> 状态：设计草案 · 待评审
|
|
|
+> 状态：已对齐实现（2026-08-23 更新）
|
|
|
> 设计者：Sisyphus
|
|
|
|
|
|
-## 一、现状分析
|
|
|
+## 一、现状分析（改造前）
|
|
|
|
|
|
-### 当前 TabBar 结构
|
|
|
+### 改造前 TabBar 结构
|
|
|
|
|
|
```
|
|
|
原生 TabBar: [行] [心] [身] [智] [富]
|
|
|
@@ -15,7 +15,7 @@
|
|
|
|
|
|
主包 5 页：`index-home`（行）、`mind`（心）、`body`（身）、`wisdom`（智）、`wealth`（富）
|
|
|
|
|
|
-### 当前问题
|
|
|
+### 改造前问题
|
|
|
|
|
|
| 问题 | 说明 |
|
|
|
|------|------|
|
|
|
@@ -25,6 +25,15 @@
|
|
|
| **缺少首页感** | 没有真正的"首页"，index-home 同时承担首页和"行"维度两个角色 |
|
|
|
| **导航损耗高** | 家长切换孩子、查看健康、管理成长需要在不同 Tab 间反复跳转 |
|
|
|
|
|
|
+### 改造后结果
|
|
|
+
|
|
|
+```
|
|
|
+当前 TabBar: [首页] [健康] [成长] [我的] + 中间⭐五维扇形
|
|
|
+主包 4 页： index-home / health-main / growth-main / profile-main
|
|
|
+五维 detail: body-detail / mind-detail / wisdom-detail / action-detail / wealth
|
|
|
+规划师 TabBar: 保持不变
|
|
|
+```
|
|
|
+
|
|
|
## 二、设计目标
|
|
|
|
|
|
1. **任务导向**：导航按用户想"做什么"组织，而非"五维是什么"
|
|
|
@@ -45,12 +54,12 @@ Tab 映射: 健康 成长 我的
|
|
|
汇总视角: 首页（家庭仪表板，全貌概览）
|
|
|
```
|
|
|
|
|
|
-| Tab | 定位 | 内容范围 |
|
|
|
-|-----|------|----------|
|
|
|
-| **首页** | 家庭仪表板 | 五维能量总览、家庭成员、待办任务、推荐内容 |
|
|
|
-| **健康** | 测评与诊断 | 测评申请、健康报告、诊断评分、调研问卷 |
|
|
|
-| **成长** | 方案与执行 | 成长方案、计划任务、打卡执行、饮食运动作息记录、成长档案 |
|
|
|
-| **我的** | 成果与进展 | 成就徽章、健康等级、成长报告、会员权益、家庭管理 |
|
|
|
+| Tab | 定位 | 内容范围（实际实现） |
|
|
|
+|-----|------|-------------------|
|
|
|
+| **首页** | 家庭仪表板 | 五维能量沙盘、家庭成员、今日任务、家庭挑战、活动/商品/文章推荐 |
|
|
|
+| **健康** | 五维总入口 | 5 子 Tab（身/智/富/行/心）+ 各维度雷达图 + 五维相生相克展示 + 维度卡片 |
|
|
|
+| **成长** | 方案与执行 | 今日成长概览、成长档案记录、打卡任务、饮食运动作息 |
|
|
|
+| **我的** | 成果与进展 | 个人资料、家庭成员、成就徽章、健康等级、健康时间线、服务菜单 |
|
|
|
|
|
|
## 三、新 TabBar 结构
|
|
|
|
|
|
@@ -62,24 +71,24 @@ Tab 映射: 健康 成长 我的
|
|
|
|
|
|
### 4 个 Tab 页
|
|
|
|
|
|
-| Tab | 页面路径 | 来源 | 职责 |
|
|
|
-|-----|----------|------|------|
|
|
|
-| **首页** | `pages/index-home/index` | 主包已有 | 家庭仪表板：五维能量总览、待办、推荐 |
|
|
|
-| **健康** | `pages/health/index` | **新建** | 健康干预闭环：测评→报告→打卡→饮食→运动→作息 |
|
|
|
-| **成长** | `pages/growth/index` | 从分包**移入**主包 | 成长档案记录、测评结果、里程碑 |
|
|
|
-| **我的** | `pages/profile/profile` | 从分包**移入**主包 | 个人资料、家庭管理、会员、订单、设置 |
|
|
|
+| Tab | 页面路径 | 状态 | 职责 |
|
|
|
+|-----|----------|:----:|------|
|
|
|
+| **首页** | `pages/index-home/index` | ✅ | 家庭仪表板：五维能量沙盘、家庭成员、今日任务、活动/商品/文章推荐 |
|
|
|
+| **健康** | `pages/health-main/index` | ✅ | 五维总入口：5 子 Tab（身/智/富/行/心）+ 各维度雷达图 + 五维相生相克 |
|
|
|
+| **成长** | `pages/growth-main/index` | ✅ | 方案与执行：今日成长概览、成长档案、打卡任务 |
|
|
|
+| **我的** | `pages/profile-main/profile` | ✅ | 个人资料、家庭成员、成就徽章、健康等级、健康时间线、服务菜单 |
|
|
|
|
|
|
-### 中间五维启动器
|
|
|
+### 中间⭐五维启动器
|
|
|
|
|
|
-点击弹出半屏浮层，显示 5 个维度入口：
|
|
|
+点击弹出横排扇形（5 个圆形维度入口错落排列，弹性缩放动画）。跳转目标如下：
|
|
|
|
|
|
| 维度 | 编码 | 目标页面 | 跳转方式 |
|
|
|
|------|------|----------|----------|
|
|
|
-| 🌿 行 | action | `pages/index-home/index` | switchTab（同首页） |
|
|
|
-| 🔥 心 | mind | `pages/mind/index` | navigateTo 分包 |
|
|
|
-| 🌏 身 | body | `pages/body/index` | navigateTo 分包 |
|
|
|
-| ⚡ 智 | wisdom | `pages/wisdom/index` | navigateTo 分包 |
|
|
|
-| 💧 富 | wealth | `pages/wealth/index` | navigateTo 分包 |
|
|
|
+| 💧 富 | wealth | `pages/wealth/index` | switchTab（TabBar 页） |
|
|
|
+| 🌿 行 | action | `pages/action-detail/index` | navigateTo 分包 |
|
|
|
+| 🔥 心 | mind | `pages/mind-detail/index` | navigateTo 分包 |
|
|
|
+| 🌏 身 | body | `pages/body-detail/index` | navigateTo 分包 |
|
|
|
+| ⚡ 智 | wisdom | `pages/wisdom-detail/index` | navigateTo 分包 |
|
|
|
|
|
|
---
|
|
|
|
|
|
@@ -132,97 +141,72 @@ Tab 标签从"行"改为"首页"后，内容基本不变。Tab 图标用新设
|
|
|
|
|
|
---
|
|
|
|
|
|
-### 4.2 健康（`pages/health/index`）
|
|
|
+### 4.2 健康（`pages/health-main/index`）
|
|
|
|
|
|
-**状态**：**新建页面**。当前 `pages/health/` 分包下已有 19 个健康功能页面，但缺少聚合首页。
|
|
|
+**状态**：**已实现**（787 行）。当前 `pages/health-main/index` 是健康 Tab 的实际页面。
|
|
|
|
|
|
-**定位**：测评与诊断。聚焦于"评估当前状态"——申请测评、查看报告、了解诊断结果。
|
|
|
+**定位**：健康总入口 + 五维健康体系展示。聚焦于"五维健康是什么"、"如何进入各维度"。
|
|
|
|
|
|
**页面结构**（登录态）：
|
|
|
|
|
|
```
|
|
|
-┌─ PageBanner ───────────────────────────┐
|
|
|
-│ theme="body" │
|
|
|
-│ tagline="科学测评 · 精准诊断" │
|
|
|
-│ quote="了解是改善的第一步" │
|
|
|
-├────────────────────────────────────────┤
|
|
|
-│ FamilyMemberStrip │
|
|
|
-│ [👩 妈妈] [👨 爸爸] [👦 小明] [+] │
|
|
|
-├────────────────────────────────────────┤
|
|
|
-│ ┌─ 健康概览卡片 ──────────────────┐ │
|
|
|
-│ │ 健康综合评分 85分 │ │
|
|
|
-│ │ 待处理报告 2 份 │ │
|
|
|
-│ │ 上次测评 {{日期}} │ │
|
|
|
-│ │ 连续打卡 7 天 │ │
|
|
|
-│ └──────────────────────────────────┘ │
|
|
|
-├────────────────────────────────────────┤
|
|
|
-│ 功能入口网格（3列） │
|
|
|
-│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
|
|
-│ │ 📋 │ │ 📊 │ │ 📝 │ │
|
|
|
-│ │ 申请 │ │ 健康 │ │ 健康 │ │
|
|
|
-│ │ 测评 │ │ 报告 │ │ 调研 │ │
|
|
|
-│ └──────┘ └──────┘ └──────┘ │
|
|
|
-│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
|
|
-│ │ 🔬 │ │ 🧬 │ │ 🌡️ │ │
|
|
|
-│ │ 体检 │ │ 肠道 │ │ 体征 │ │
|
|
|
-│ │ 报告 │ │ 菌群 │ │ 记录 │ │
|
|
|
-│ └──────┘ └──────┘ └──────┘ │
|
|
|
-│ ┌──────┐ ┌──────┐ │
|
|
|
-│ │ 📐 │ │ 🧠 │ │
|
|
|
-│ │ 五维 │ │ 心智 │ │
|
|
|
-│ │ 测评 │ │ 评估 │ │
|
|
|
-│ └──────┘ └──────┘ │
|
|
|
-├────────────────────────────────────────┤
|
|
|
-│ 最近报告 │
|
|
|
-│ ┌─ 报告卡片 ───────────────────────┐ │
|
|
|
-│ │ 📄 2026-08-01 体检报告 │ │
|
|
|
-│ │ 状态：已解析 查看详情 › │ │
|
|
|
-│ ├──────────────────────────────────┤ │
|
|
|
-│ │ 📄 2026-07-15 肠道菌群报告 │ │
|
|
|
-│ │ 状态：待确认 查看详情 › │ │
|
|
|
-│ └──────────────────────────────────┘ │
|
|
|
-│ 📋 查看全部报告 › │
|
|
|
-├────────────────────────────────────────┤
|
|
|
-│ 诊断建议（最近报告的 AI 解读摘要） │
|
|
|
-│ 💡 "根据最新体检报告，建议关注…" │
|
|
|
-└────────────────────────────────────────┘
|
|
|
+┌─ TabBar ────────────────────────────┐
|
|
|
+│ [🌏 身] [⚡ 智] [💧 富] [🌿 行] [🔥 心] │ ← 5 Tab 切换
|
|
|
+├──────────────────────────────────────┤
|
|
|
+│ 当前 Tab 对应的雷达图 │
|
|
|
+│ ┌──────────────────────────────┐ │
|
|
|
+│ │ RadarChart │ │
|
|
|
+│ │ (身=7维/智=6维/富=4子维/ │ │
|
|
|
+│ │ 行=6维/心=13维) │ │
|
|
|
+│ └──────────────────────────────┘ │
|
|
|
+│ 无数据时显示"数据待采集"引导 │
|
|
|
+└──────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
+**各 Tab 内容**：
|
|
|
+
|
|
|
+| Tab | 编码 | 雷达维度 | 数据源 |
|
|
|
+|:----:|:----:|---------|--------|
|
|
|
+| 🌏 身 | body | 7维（生长发育/睡眠/视力/免疫/营养/肠胃/运动） | `getDimensionOverview` |
|
|
|
+| ⚡ 智 | wisdom | 6维认知能力 | 认知测评结果 |
|
|
|
+| 💧 富 | wealth | 4子维（技能/利他/收入/汇率） | 财富数据 |
|
|
|
+| 🌿 行 | action | 6维关系质量 | 关系数据 |
|
|
|
+| 🔥 心 | mind | 13维情绪与性格 | EMI 心理测评 |
|
|
|
+
|
|
|
**未登录态**：
|
|
|
|
|
|
```
|
|
|
-┌─ PageBanner ───────────────────────────┐
|
|
|
-│ theme="body" │
|
|
|
-│ tagline="科学管理全家健康" │
|
|
|
-│ quote="身体健康是幸福的基础" │
|
|
|
+┌─ 品牌定位语 ───────────────────────────┐
|
|
|
+│ 科学管理全家健康数据 │
|
|
|
├────────────────────────────────────────┤
|
|
|
-│ LoginGuideCard │
|
|
|
-│ "登录后查看全家健康数据" │
|
|
|
-│ · 申请专业测评 │
|
|
|
-│ · 查看健康报告和诊断结果 │
|
|
|
-│ · 了解家人健康状态 │
|
|
|
-│ [登录 / 注册] │
|
|
|
+│ 痛点卡：指标正常 ≠ 健康 │
|
|
|
+│ "孩子反复生病，你扛了多少次了？" │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ 功能预览（4个卡片） │
|
|
|
+│ · 上传健康报告 │
|
|
|
+│ · 认知能力测评 │
|
|
|
+│ · 心理健康测评 │
|
|
|
+│ · 健康方案 │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ 15题五维健康自检（自测入口） │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ 五维健康体系（相生/相克关系展示） │
|
|
|
+│ · 五张维度卡片（身/智/富/行/心） │
|
|
|
+│ 点击各卡 → 跳对应维度 detail 页 │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ 登录引导卡（LoginGuideCard） │
|
|
|
└────────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
-**功能入口跳转目标**：
|
|
|
+**维度卡片跳转目标**：
|
|
|
|
|
|
-| 入口 | 目标页面 | 说明 |
|
|
|
-|------|----------|------|
|
|
|
-| 📋 申请测评 | `/pages/assessment/purchase` | 购买/申请测评（对接原有测评流程） |
|
|
|
-| 📊 健康报告 | `/pages/health/report-list` | 所有健康报告列表 |
|
|
|
-| 📝 健康调研 | `/pages/health/report-survey` | 健康调研问卷 |
|
|
|
-| 🔬 体检报告 | `/pages/health/physical-exam-detail` | 体检报告详情 |
|
|
|
-| 🧬 肠道菌群 | `/pages/health/gut-index` | 肠道菌群报告 |
|
|
|
-| 🌡️ 体征记录 | `/pages/health/daily-checkin` | 体征打卡记录 |
|
|
|
-| 📐 五维测评 | `/pages/assessment/purchase` | 五维能量测评 |
|
|
|
-| 🧠 心智评估 | `/pages/mind-detail/emotion-report` | 心智维度评估报告 |
|
|
|
-
|
|
|
-**数据来源**：
|
|
|
-- `getMyMembership` — 会员身份
|
|
|
-- `getFamilyMembers` — 家庭成员列表
|
|
|
-- `getHealthScoreInfo` — 健康评分
|
|
|
-- `getHealthReportList` — 最近报告列表
|
|
|
+| 卡片 | 目标页面 |
|
|
|
+|------|----------|
|
|
|
+| 身 | `pages/body-detail/index` |
|
|
|
+| 智 | `pages/wisdom-detail/index` |
|
|
|
+| 富 | `pages/wealth/index` |
|
|
|
+| 行 | `pages/action-detail/member-action-detail` |
|
|
|
+| 心 | `pages/mind-detail/index` |
|
|
|
|
|
|
---
|
|
|
|
|
|
@@ -378,49 +362,47 @@ Tab 标签从"行"改为"首页"后，内容基本不变。Tab 图标用新设
|
|
|
|
|
|
---
|
|
|
|
|
|
-## 五、五维半屏浮层
|
|
|
+## 五、五维横排扇形菜单
|
|
|
|
|
|
### 交互流程
|
|
|
|
|
|
```
|
|
|
用户点击中间⭐按钮
|
|
|
- → 底部弹出半屏浮层（slideUp 动画，300ms）
|
|
|
- → 显示 5 个维度卡片（行/心/身/智/富）
|
|
|
- → 用户点击维度卡片
|
|
|
- → 浮层关闭（slideDown 动画）
|
|
|
+ → 全屏半透明遮罩（fadeIn，200ms）
|
|
|
+ → 5 个维度圆形图标横排展开（弹性缩放 cubic-bezier，0.05s 递进）
|
|
|
+ → 用户点击维度圆形
|
|
|
+ → 扇形折叠（淡出 + 缩放回原点）
|
|
|
→ 跳转对应页面
|
|
|
- → 点击遮罩/关闭按钮
|
|
|
- → 浮层关闭
|
|
|
+ → 点击遮罩
|
|
|
+ → 扇形折叠并关闭
|
|
|
```
|
|
|
|
|
|
-### 浮层布局
|
|
|
+### 扇形布局
|
|
|
|
|
|
```
|
|
|
-┌────────────────────────────────────────┐
|
|
|
-│ 五维能量 ✕ │
|
|
|
-├────────────────────────────────────────┤
|
|
|
-│ ┌──────────┐ ┌──────────┐ ┌──────────┐│
|
|
|
-│ │ 🌿 行 │ │ 🔥 心 │ │ 🌏 身 ││
|
|
|
-│ │ 知行合一 │ │ 大爱传承 │ │ 主动健康 ││
|
|
|
-│ │ #10B981 │ │ #FF6B9D │ │ #FF8C42 ││
|
|
|
-│ └──────────┘ └──────────┘ └──────────┘│
|
|
|
-│ ┌──────────┐ ┌──────────┐ │
|
|
|
-│ │ ⚡ 智 │ │ 💧 富 │ │
|
|
|
-│ │ 赋能未来 │ │ 利他创富 │ │
|
|
|
-│ │ #6366F1 │ │ #F59E0B │ │
|
|
|
-│ └──────────┘ └──────────┘ │
|
|
|
-└────────────────────────────────────────┘
|
|
|
+ 🔥 心（-120rpx 高位）
|
|
|
+ 💧 富（-60rpx） 🌿 行（-60rpx）
|
|
|
+ 🌏 身（-60rpx） ⚡ 智（-60rpx）
|
|
|
+
|
|
|
+实际为 5 个横排等距排列，mind 居中最高，body 居中略低
|
|
|
+其余 3 个（wealth/action/wisdom）在两侧低位
|
|
|
```
|
|
|
|
|
|
-### 维度卡片视觉规格
|
|
|
+### 视觉规格
|
|
|
+
|
|
|
+| 维度 | 图标 | 色值 | 圆形尺寸 | 位置 |
|
|
|
+|:----:|:----:|------|:------:|------|
|
|
|
+| 💧 富 | `#F59E0B` | 88rpx 圆 | 低位（左） |
|
|
|
+| 🌿 行 | `#10B981` | 88rpx 圆 | 中位（中偏左） |
|
|
|
+| 🔥 心 | `#FF6B9D` | 88rpx 圆 | **高位**（居中） |
|
|
|
+| 🌏 身 | `#FF8C42` | 88rpx 圆 | 中位（中偏右） |
|
|
|
+| ⚡ 智 | `#6366F1` | 88rpx 圆 | 低位（右） |
|
|
|
|
|
|
-| 维度 | 图标 | 色值 | 背景色 |
|
|
|
-|------|------|------|--------|
|
|
|
-| 行 | 🌿 | `#10B981` | `rgba(16,185,129,0.15)` |
|
|
|
-| 心 | 🔥 | `#FF6B9D` | `rgba(255,107,157,0.15)` |
|
|
|
-| 身 | 🌏 | `#FF8C42` | `rgba(255,140,66,0.15)` |
|
|
|
-| 智 | ⚡ | `#6366F1` | `rgba(99,102,241,0.15)` |
|
|
|
-| 富 | 💧 | `#F59E0B` | `rgba(245,158,11,0.15)` |
|
|
|
+- 圆形使用维度主题色纯色填充
|
|
|
+- 圆形内含 emoji 图标
|
|
|
+- 圆形下方显示维度名称（白色文字，`#fff`）
|
|
|
+- 弹入动画：`transform: scale(0) → scale(1)`，`cubic-bezier(0.34, 1.56, 0.64, 1)`，每个圆形 0.05s 递增延迟
|
|
|
+- 弹入后圆形下方标签跟随淡入（`translateY(-10rpx) → translateY(0)`）
|
|
|
|
|
|
---
|
|
|
|
|
|
@@ -434,25 +416,28 @@ Tab 标签从"行"改为"首页"后，内容基本不变。Tab 图标用新设
|
|
|
{
|
|
|
"pages": [
|
|
|
{ "path": "pages/index-home/index", "style": { "navigationBarTitleText": "首页" } },
|
|
|
- { "path": "pages/health/index", "style": { "navigationBarTitleText": "健康" } },
|
|
|
- { "path": "pages/growth/index", "style": { "navigationBarTitleText": "成长档案" } },
|
|
|
- { "path": "pages/profile/profile", "style": { "navigationBarTitleText": "我的" } }
|
|
|
+ { "path": "pages/health-main/index", "style": { "navigationBarTitleText": "健康" } },
|
|
|
+ { "path": "pages/growth-main/index", "style": { "navigationBarTitleText": "成长档案" } },
|
|
|
+ { "path": "pages/profile-main/profile", "style": { "navigationBarTitleText": "我的" } }
|
|
|
]
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-**移除出主包**：
|
|
|
-- `pages/mind/index` → 移入 `pages/mind-detail` 分包
|
|
|
-- `pages/body/index` → 移入 `pages/body-detail` 分包
|
|
|
-- `pages/wisdom/index` → 移入 `pages/wisdom-detail` 分包
|
|
|
-- `pages/wealth/index` → 移入新建 `pages/wealth` 分包
|
|
|
+**五维 detail 页路径（分包）**：
|
|
|
+
|
|
|
+| 维度 | 分包路径 | 说明 |
|
|
|
+|:----:|---------|------|
|
|
|
+| 🌏 身 | `pages/body-detail/index` | 7维雷达 + 指标 + 菌群 |
|
|
|
+| ⚡ 智 | `pages/wisdom-detail/index` | 6维认知雷达 + 指标 |
|
|
|
+| 💧 富 | `pages/wealth/index` | TabBar 页（能量环 + 子分 + 推广） |
|
|
|
+| 🌿 行 | `pages/action-detail/index` | 关系图谱 + 6维雷达 + Products/Activities/Tasks |
|
|
|
+| 🔥 心 | `pages/mind-detail/index` | 天盘 + EMI报告 + 13维雷达 + 肠脑轴 |
|
|
|
|
|
|
-**分包移除**：
|
|
|
-- `pages/growth` 分包：移除 `index` 页面
|
|
|
-- `pages/profile` 分包：移除 `profile` 页面
|
|
|
+**主包 4 页**：`index-home` / `health-main` / `growth-main` / `profile-main/profile`
|
|
|
|
|
|
-**分包新增**：
|
|
|
-- `pages/wealth` 新建分包：含 `{ "path": "index", "style": { "navigationBarTitleText": "富" } }`
|
|
|
+**五维 detail 页（分包）**：body-detail / mind-detail / wisdom-detail / action-detail / wealth 各自独立分包
|
|
|
+
|
|
|
+**原 5 维主包页已移除**：mind/body/wisdom/wealth 从主包移入各自 detail 分包
|
|
|
|
|
|
### 6.2 tabBar 配置
|
|
|
|
|
|
@@ -464,33 +449,30 @@ Tab 标签从"行"改为"首页"后，内容基本不变。Tab 图标用新设
|
|
|
"backgroundColor": "#FFFFFF",
|
|
|
"list": [
|
|
|
{ "pagePath": "pages/index-home/index", "text": "首页", "iconPath": "static/tab-home.png", "selectedIconPath": "static/tab-home-active.png" },
|
|
|
- { "pagePath": "pages/health/index", "text": "健康", "iconPath": "static/tab-health.png", "selectedIconPath": "static/tab-health-active.png" },
|
|
|
- { "pagePath": "pages/growth/index", "text": "成长", "iconPath": "static/tab-growth.png", "selectedIconPath": "static/tab-growth-active.png" },
|
|
|
- { "pagePath": "pages/profile/profile", "text": "我的", "iconPath": "static/tab-profile.png", "selectedIconPath": "static/tab-profile-active.png" }
|
|
|
+ { "pagePath": "pages/health-main/index", "text": "健康", "iconPath": "static/tab-health.png", "selectedIconPath": "static/tab-health-active.png" },
|
|
|
+ { "pagePath": "pages/growth-main/index", "text": "成长", "iconPath": "static/tab-growth.png", "selectedIconPath": "static/tab-growth-active.png" },
|
|
|
+ { "pagePath": "pages/profile-main/profile", "text": "我的", "iconPath": "static/tab-profile.png", "selectedIconPath": "static/tab-profile-active.png" }
|
|
|
]
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-### 6.3 新建文件
|
|
|
+### 6.3 核心文件
|
|
|
|
|
|
-| 文件 | 说明 | 预估行数 |
|
|
|
-|------|------|----------|
|
|
|
-| `utils/nav.js` | 统一导航工具 | ~80 行 |
|
|
|
-| `pages/health/index.vue` | 健康 Tab 页 | ~400 行 |
|
|
|
+| 文件 | 说明 | 状态 |
|
|
|
+|------|------|:----:|
|
|
|
+| `custom-tab-bar/index.vue` | 4 Tab + 中间⭐按钮 + 五维横排扇形 | 已实现 |
|
|
|
+| `pages/health-main/index.vue` | 健康 Tab 页（5子Tab + 雷达图 + 五维体系） | 已实现 |
|
|
|
+| `pages/index-home/index.vue` | 首页（家庭仪表板） | 已实现 |
|
|
|
+| `utils/nav.js` | 统一导航工具 | 按需创建 |
|
|
|
|
|
|
### 6.4 修改文件
|
|
|
|
|
|
-| 文件 | 变更内容 |
|
|
|
-|------|----------|
|
|
|
-| `pages.json` | 主包 5→4 页，tabBar 4 项，分包调整 |
|
|
|
-| `custom-tab-bar/index.vue` | 4 Tab + 中间按钮 + 五维浮层 |
|
|
|
-| `index-home/index.vue` | switchTab → nav.goPage |
|
|
|
-| `wisdom/index.vue` | switchTab → nav.goPage |
|
|
|
-| `wisdom/self-quiz.vue` | switchTab → navigateTo |
|
|
|
-| `wisdom-detail/self-quiz.vue` | switchTab → navigateTo |
|
|
|
-| `profile/profile.vue` | showServices 改为 true |
|
|
|
-| `pages/growth` 分包 | 移除 index 页 |
|
|
|
-| `pages/profile` 分包 | 移除 profile 页 |
|
|
|
+| 文件 | 变更内容 | 状态 |
|
|
|
+|------|----------|:----:|
|
|
|
+| `pages.json` | 主包 5→4 页，tabBar 4 项，五维页移入分包 | 已实现 |
|
|
|
+| `custom-tab-bar/index.vue` | 4 Tab + 中间⭐按钮 + 五维扇形 | 已实现 |
|
|
|
+| `pages/health-main/index.vue` | 健康 Tab 页（5 子 Tab + 雷达图） | 已实现 |
|
|
|
+| `profile-main/profile.vue` | 成就区增加推广收益入口 | 部分实现 |
|
|
|
|
|
|
### 6.5 图标资源
|
|
|
|
|
|
@@ -501,30 +483,25 @@ Tab 标签从"行"改为"首页"后，内容基本不变。Tab 图标用新设
|
|
|
| 成长 | `static/tab-growth.png` / `tab-growth-active.png` | 复用 teacher TabBar 现有 |
|
|
|
| 我的 | `static/tab-profile.png` / `tab-profile-active.png` | 复用 teacher TabBar 现有 |
|
|
|
|
|
|
-### 6.6 switchTab 引用改造
|
|
|
+### 6.6 导航方式
|
|
|
|
|
|
-```bash
|
|
|
-# 搜索所有对五维页的 switchTab 调用
|
|
|
-grep -rn "switchTab.*/pages/\(mind\|body\|wisdom\|wealth\)" --include="*.vue" .
|
|
|
-```
|
|
|
+五维 detail 页从主包移入分包后，`switchTab` 不再适用于这些页面。跳转统一使用 `navigateTo`（分包异步加载）。唯一例外：`pages/wealth/index` 仍为 TabBar 页，使用 `switchTab`。
|
|
|
|
|
|
-| 文件 | 行号 | 原代码 | 改后 |
|
|
|
-|------|------|--------|------|
|
|
|
-| `index-home/index.vue` | onFuncClick | `uni.switchTab({ url: item.page })` | `nav.goPage(item.page)` |
|
|
|
-| `wisdom/index.vue` | onFuncClick | `uni.switchTab({ url: item.page })` | `nav.goPage(item.page)` |
|
|
|
-| `wisdom/self-quiz.vue` | ~453 | `uni.switchTab({ url: '/pages/wisdom/index' })` | `uni.navigateTo({ url: '/pages/wisdom/index' })` |
|
|
|
-| `wisdom-detail/self-quiz.vue` | ~453 | `uni.switchTab({ url: '/pages/wisdom/index' })` | `uni.navigateTo({ url: '/pages/wisdom/index' })` |
|
|
|
+| 维度 | 跳转方式 | 原因 |
|
|
|
+|:----:|---------|------|
|
|
|
+| 富 | `switchTab` | TabBar 页 |
|
|
|
+| 行/心/身/智 | `navigateTo` | 分包页 |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 七、主包体积影响
|
|
|
|
|
|
-| 项目 | 当前 | 变更后 |
|
|
|
-|------|------|--------|
|
|
|
-| 主包页面数 | 5 | 4 |
|
|
|
-| 主包体积 | ~188KB | ~75KB + 健康页(估计 < 120KB) |
|
|
|
-| 分包变化 | mind/body/wisdom/wealth 在主包 | 移入各自分包 |
|
|
|
-| 风险 | — | 主包体积降低，无超限风险 |
|
|
|
+| 项目 | 旧结构（5维TabBar） | 当前（4 Tab + 扇形） |
|
|
|
+|------|:-----------------:|:-----------------:|
|
|
|
+| 主包页面数 | 5（mind/body/wisdom/action/wealth） | 4（首页/健康/成长/我的） |
|
|
|
+| 主包体积 | ~188KB+ | ~75KB + health-main(~150KB) |
|
|
|
+| 分包变化 | 无 | body-detail/mind-detail/wisdom-detail/action-detail/wealth 各分包 |
|
|
|
+| 风险 | 主包过大风险 | 主包体积可控，无超限风险 |
|
|
|
|
|
|
---
|
|
|
|
|
|
@@ -532,39 +509,25 @@ grep -rn "switchTab.*/pages/\(mind\|body\|wisdom\|wealth\)" --include="*.vue" .
|
|
|
|
|
|
| 场景 | 处理 |
|
|
|
|------|------|
|
|
|
-| **未登录用户** | 看到原生 4 Tab + 中间按钮，无自定义 TabBar；点击功能页→引导登录 |
|
|
|
-| **规划师用户** | 保持独立 5 Tab（首页/家庭/团队/成长档案/我的），中间按钮不显示 |
|
|
|
+| **未登录用户** | 看到原生 4 Tab + 中间⭐按钮，无自定义 TabBar；点击功能页→引导登录 |
|
|
|
+| **规划师用户** | 保持独立 5 Tab（首页/家庭/团队/成长档案/我的），中间⭐按钮不显示 |
|
|
|
| **孩子角色** | 与家长相同 4 Tab，内容按孩子视角展示 |
|
|
|
-| **从五维浮层跳转"行"** | 即首页，用 switchTab |
|
|
|
-| **从五维浮层跳转"心/身/智/富"** | 用 navigateTo 至分包页 |
|
|
|
+| **从扇形跳转"富"** | `switchTab` 到 TabBar 页 |
|
|
|
+| **从扇形跳转"行/心/身/智"** | `navigateTo` 到分包 detail 页 |
|
|
|
| **分包异步加载** | 首次访问五维页时可能短暂 loading，微信分包机制自动处理 |
|
|
|
-| **成长/我的移到主包后** | 分包体积减小，加载更快；但主包体积增加约 2 页 |
|
|
|
+| **健康 Tab 内部 5 子 Tab** | `health-main` 页内维护独立 tab 状态（body/wisdom/wealth/action/mind），各自对应不同雷达维度 |
|
|
|
|
|
|
---
|
|
|
|
|
|
-## 九、实施步骤
|
|
|
-
|
|
|
-### 阶段 1：基础设施
|
|
|
-1. 创建 `utils/nav.js` 统一导航工具
|
|
|
-2. 准备新的 TabBar 图标（首页、健康）
|
|
|
-
|
|
|
-### 阶段 2：pages.json 重构
|
|
|
-3. 修改主包 pages 数组（4 页）
|
|
|
-4. 修改 tabBar.list（4 项）
|
|
|
-5. 调整分包（五维页移入、成长/我的移出）
|
|
|
-
|
|
|
-### 阶段 3：引用改造
|
|
|
-6. 替换所有 switchTab → navigateTo/nav.goPage
|
|
|
-7. 全局 grep 兜底检查
|
|
|
-
|
|
|
-### 阶段 4：自定义 TabBar 改造
|
|
|
-8. 重构 `custom-tab-bar/index.vue`
|
|
|
-9. 添加五维半屏浮层
|
|
|
-
|
|
|
-### 阶段 5：新建健康页
|
|
|
-10. 创建 `pages/health/index.vue`
|
|
|
-11. 实现健康概览、功能入口网格、最近报告
|
|
|
-
|
|
|
-### 阶段 6：构建验证
|
|
|
-12. `npm run build:mp-weixin`
|
|
|
-13. 路由完整性检查
|
|
|
+## 九、实施状态
|
|
|
+
|
|
|
+| # | 步骤 | 状态 |
|
|
|
+|:-:|------|:----:|
|
|
|
+| 1 | pages.json 主包 5→4 页，tabBar 4 项 | ✅ 已实现 |
|
|
|
+| 2 | 自定义 TabBar 重构（4 Tab + 中间⭐ + 扇形） | ✅ 已实现 |
|
|
|
+| 3 | 五维页从主包移入分包（body-detail/mind-detail/wisdom-detail/action-detail） | ✅ 已实现 |
|
|
|
+| 4 | wealth 保持 TabBar 页 | ✅ 已实现 |
|
|
|
+| 5 | health-main 健康 Tab 页实现 | ✅ 已实现 |
|
|
|
+| 6 | growth-main 成长 Tab 页 | ✅ 已实现 |
|
|
|
+| 7 | profile-main 我的 Tab 页 | ✅ 已实现 |
|
|
|
+| 8 | 规划师独立 TabBar 保留 | ✅ 已实现 |
|
