# 五维主页面 · 登录前 / 登录后 显示规划

> **范围**：`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