dimension-pages-login-state-plan.md 7.9 KB
五维主页面 · 登录前 / 登录后 显示规划
范围：
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 之后。
一、统一设计原则
- 价值前置：登录前先让用户"看见登录后能得到什么"——能自然预览的直接展示，无自然预览的用虚线占位，不硬塞假数据。
- 维度身份：PageBanner / 品牌色 / CTA 严格走维度色令牌；唯一例外是心维持双色（品牌意图，见 §四）。
- 转化漏斗：每个登录前页面必须有 1 个维度色主登录 CTA + 1 个次级动作（先逛 / 先看介绍），统一由
DimensionVisitorCard承载。 - 一致中允许差异：骨架统一、各维度预览形态允许不同（由业务内容决定，见 §四豁免说明）。
二、登录前（游客态）统一骨架
自上而下五层：
| 序 | 层 | 显示条件 | 说明 |
|---|---|---|---|
| ① | 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编译通过
七、待办
- ⏳ 编译验证：
npm run build:mp-weixin（阻塞项pages/vendor/team-system/team-system.vue可选链已按 AGENTS.md 规范改为&&，待跑通确认） - ⏳ 真机核对：登录前五页骨架与 CTA 可点；登录后数据与占位的切换
- ⏳ 所有改动尚未提交 git