|
|
@@ -0,0 +1,121 @@
|
|
|
+# 五维主页面 · 登录前 / 登录后 显示规划
|
|
|
+
|
|
|
+> **范围**：`pages/body-detail`（身）、`pages/wisdom-detail`（智）、`pages/mind-detail`（心）、`pages/wealth`（富）、`pages/action-detail`（行）
|
|
|
+> **目的**：固化五个维度详情页在「登录前（游客态）」与「登录后」各自应显示的内容与顺序，作为开发与验收的唯一依据
|
|
|
+> **版本**：V1.0 · 2026-10-12
|
|
|
+> **已确认决策**（廖总拍板）：① 心页 PageBanner 维持「心智合一」双色；② 身 / 智保留 `preview-text`（统一五页骨架文案）；③ `body-detail` 游客卡 DOM 位置上移至 monthly-guidance 之后。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 一、统一设计原则
|
|
|
+
|
|
|
+1. **价值前置**：登录前先让用户"看见登录后能得到什么"——能自然预览的直接展示，无自然预览的用虚线占位，**不硬塞假数据**。
|
|
|
+2. **维度身份**：PageBanner / 品牌色 / CTA 严格走维度色令牌；**唯一例外是心维持双色**（品牌意图，见 §四）。
|
|
|
+3. **转化漏斗**：每个登录前页面必须有 **1 个维度色主登录 CTA + 1 个次级动作**（先逛 / 先看介绍），统一由 `DimensionVisitorCard` 承载。
|
|
|
+4. **一致中允许差异**：骨架统一、各维度预览形态允许不同（由业务内容决定，见 §四豁免说明）。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 二、登录前（游客态）统一骨架
|
|
|
+
|
|
|
+自上而下五层：
|
|
|
+
|
|
|
+| 序 | 层 | 显示条件 | 说明 |
|
|
|
+|---|---|---|---|
|
|
|
+| ① | `PageBanner` | 始终 | 维度头部；心页用 `mind-wisdom` 双色，其余单维度色 |
|
|
|
+| ② | `brand-strap` | `v-if="!isLoggedIn"` | 维度定位语一句话 |
|
|
|
+| ③ | 自然预览 | 按维度（见下） | 能预览真实感的直接展示 |
|
|
|
+| ④ | `monthly-guidance` | `v-if="!isLoggedIn"` | 每月引导语（🌿/⚡/🔥/💧/🌿） |
|
|
|
+| ⑤ | `DimensionVisitorCard` | `v-if="!isLoggedIn"` | 价值卡 + 维度色主 CTA + 次级动作 + 虚线占位 |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 三、各维度：登录前 / 登录后显示清单
|
|
|
+
|
|
|
+### 身 `body-detail`
|
|
|
+
|
|
|
+**登录前**：PageBanner(橙 `#FF8C42`) → brand-strap「科学管理全家健康」→ **健康概览卡（空态槽位：身高体重 / 血压 / 心率 = 暂无数据）** → monthly-guidance → `DimensionVisitorCard`
|
|
|
+- card-title：身体维度 · 全家健康管理
|
|
|
+- benefits：身高体重血压心率趋势 / 肠道菌群与疾病风险预警 / 家庭成员健康画像对比
|
|
|
+- CTA：立即登录查看健康概览 ／ 次级：查看健康报告 → `/pages/health/report-list`
|
|
|
+- preview-text：登录后展示你的健康概览 · 趋势曲线
|
|
|
+
|
|
|
+**登录后**：身维度画像 → 健康概览（真实值 + 趋势）→ 健康趋势分析 `RadarChart`（个人数据）→ 身体指标卡 → 肠道菌群（无报告时显示上传引导）→ 疾病风险 → 家庭成员选择条 → 五维能量条 → `DimensionIntroCard body` → 功能入口网格
|
|
|
+
|
|
|
+### 智 `wisdom-detail`
|
|
|
+
|
|
|
+**登录前**：PageBanner(靛 `#6366F1`) → brand-strap「提升全家认知能力与学习效率」→ **学习能力评估 `RadarChart`（同龄平均值；"查看详情"仅登录后可点）** → monthly-guidance → `DimensionVisitorCard`
|
|
|
+- card-title：智维度 · 认知赋能 ／ CTA：登录做认知测评 ／ 次级：了解认知维度 → `dimension-intro`
|
|
|
+- preview-text：登录后展示你的认知能力雷达图
|
|
|
+
|
|
|
+**登录后**：家庭成员选择条 → 五维能量条 → 认知指标卡 → 学习解读 → 认知强项与提升 → `DimensionIntroCard wisdom`
|
|
|
+
|
|
|
+### 心 `mind-detail`
|
|
|
+
|
|
|
+**登录前**：PageBanner(**`mind-wisdom` 双色**) → brand-strap「关注全家心理健康与情绪成长」→ monthly-guidance → `DimensionVisitorCard`
|
|
|
+- card-title：心维度 · 心理成长 ／ CTA：登录查看心理画像 ／ 次级：了解心理维度 → `dimension-intro`
|
|
|
+- preview-text：登录后展示你的心理画像与情绪关联
|
|
|
+- 注：**登录前无数据预览内容**（天盘 / 成员条 / 心理报告均登录后才出现），仅虚线占位
|
|
|
+
|
|
|
+**登录后**：家庭天盘 `FamilyTianpanCard` → 家庭成员选择条 → 五维能量条 → 心理指标卡 → EMI 心理测评报告 → 心维度画像 → `DimensionIntroCard mind`
|
|
|
+
|
|
|
+### 富 `wealth`
|
|
|
+
|
|
|
+**登录前**：PageBanner(琥珀 `#F59E0B`) → brand-strap「分享价值，收获财富」→ monthly-guidance → `DimensionVisitorCard` → **商城精选横滑（真实商品）**
|
|
|
+- card-title：富维度 · 利他创富 ／ CTA：登录解锁财富能量 ／ 次级：逛逛商城 → `/pages/shop/index/index`
|
|
|
+- **无 preview-text**（豁免：已有商城精选真实预览，避免重复占位）
|
|
|
+
|
|
|
+**登录后**：家庭成员选择条 → 五维能量条 → 身克富杠杆警告 → 财富能量环 → 财富成长（水位）→ 子维度水滴 → 子维度评分 → 财富强项与提升 → 富维度画像 → `DimensionIntroCard wealth`
|
|
|
+
|
|
|
+### 行 `action-detail`
|
|
|
+
|
|
|
+**登录前**：PageBanner(绿 `#10B981`) → brand-strap「改善全家关系与沟通能力」→ monthly-guidance → `DimensionVisitorCard`
|
|
|
+- card-title：行维度 · 关系滋养 ／ CTA：登录绘制关系网络 ／ 次级：了解关系维度 → `dimension-intro`
|
|
|
+- preview-text：登录后绘制你的家庭关系网络图
|
|
|
+- 注：**登录前无数据预览内容**（关系图 / 章鱼图 / 成员条均登录后才出现），仅虚线占位
|
|
|
+
|
|
|
+**登录后**：家庭成员选择条 → 五维能量条 → 关系解读 → 行维度画像 → 关系六维 → 家庭关系图 `FamilyRelationGraph` → 章鱼图 `OctopusDiagram` → 珍珠图 / 能力图 → `DimensionIntroCard action`
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 四、维度差异与豁免说明
|
|
|
+
|
|
|
+| 项 | 决策 | 理由 |
|
|
|
+|---|---|---|
|
|
|
+| 心 PageBanner `mind-wisdom` 双色 | **保留**（已确认） | 「心智合一」品牌意图，非 bug；与单维度色规则是刻意例外 |
|
|
|
+| 富 不加 `preview-text` | 豁免 | 已有「商城精选」真实预览，虚线占位会重复 |
|
|
|
+| 身 / 智 保留 `preview-text` | **保留**（已确认） | 虽有自然预览，仍保留虚线文案以统一五页骨架表述 |
|
|
|
+| 身 健康概览卡「始终显示」 | 豁免 | 登录前展示空槽位 = 天然的结构预览 |
|
|
|
+| 智 认知雷达「始终显示」 | 豁免 | 登录前显示同龄平均值 = 天然预览，且"查看详情"入口登录后才出现 |
|
|
|
+| 心 / 行 无自然预览 | 豁免 | 业务上无无需登录即可展示的内容，故仅虚线占位 |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 五、组件职责边界（重要 · 历史事故防线）
|
|
|
+
|
|
|
+| 组件 | 归属 | props | 禁止 |
|
|
|
+|---|---|---|---|
|
|
|
+| `DimensionVisitorCard` | **登录前游客态** | `dimCode / cardTitle / benefits / ctaText / secondaryText / secondaryUrl / previewText` | 禁止用于 `isLoggedIn` 分支 |
|
|
|
+| `DimensionIntroCard` | **登录后** | `dimCode / learnMoreText / learnMoreUrl` | 禁止承载登录 CTA（它无 CTA 能力） |
|
|
|
+
|
|
|
+> **历史事故**：曾有提交（`490e69e90`，"修复 DimensionVisitorCard 幽灵引用"）因组件文件缺失，把五页机械替换为 `DimensionIntroCard`，但未适配 props，导致登录前登录 CTA / benefits 全部失效。二者**不可互换**，修改时按上表核对。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 六、验收清单
|
|
|
+
|
|
|
+- [ ] 五页登录前骨架一致（①~⑤，仅维度内容差异）
|
|
|
+- [ ] 每页登录前均有**维度色主登录 CTA**，点击可唤起登录浮层（`openLoginSheet`）
|
|
|
+- [ ] 每页登录前均有次级动作且不要求登录（健康报告 / 维度介绍 / 商城）
|
|
|
+- [ ] 登录后各页显示真实数据模块，不再出现游客卡
|
|
|
+- [ ] 心页 PageBanner 双色、富页无虚线占位、身 / 智保留虚线占位
|
|
|
+- [ ] `body-detail` 游客卡位于 monthly-guidance 之后
|
|
|
+- [ ] `npm run build:mp-weixin` 编译通过
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 七、待办
|
|
|
+
|
|
|
+1. ⏳ 编译验证：`npm run build:mp-weixin`（阻塞项 `pages/vendor/team-system/team-system.vue` 可选链已按 AGENTS.md 规范改为 `&&`，待跑通确认）
|
|
|
+2. ⏳ 真机核对：登录前五页骨架与 CTA 可点；登录后数据与占位的切换
|
|
|
+3. ⏳ 所有改动尚未提交 git
|
