# 五维页面与健康/成长页面登录前内容改造 实现计划

> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。

**目标：** 为五维详页（身/心/智/富）、健康页、成长页补充登录前品牌展示内容，让未登录用户产生共鸣并被引导注册。

**架构：** 每个页面在 `!isLoggedIn` 分支中新增 2-3 个内容区块（痛点卡 + 最小输入卡 + 功能预览），保持现有 `v-if="!isLoggedIn"` 结构不变。所有内容来自 `book/` 目录下的《家的算法》书稿。登录后内容不变。

**技术栈：** uni-app Vue 2 Options API，微信小程序（禁止可选链 `?.`、CSS Grid、`:key` 表达式，日期用 `parseDate()`）

---

## 文件清单

| 文件 | 改动类型 | 说明 |
|:---|:---:|:---|
| `cfc-frontend/pages/body-detail/index.vue` | 修改 | 登录前新增痛点卡+最小输入+功能预览 |
| `cfc-frontend/pages/mind-detail/index.vue` | 修改 | 登录前新增痛点卡+最小输入+功能预览+引导注册 |
| `cfc-frontend/pages/wisdom-detail/index.vue` | 修改 | 登录前新增痛点卡+最小输入+功能预览+引导注册 |
| `cfc-frontend/pages/wealth/index.vue` | 修改 | 登录前新增痛点卡+最小输入 |
| `cfc-frontend/pages/health-main/index.vue` | 修改 | 登录前新增痛点卡+功能预览+自测入口 |
| `cfc-frontend/pages/growth-main/index.vue` | 修改 | 新增登录前内容（品牌词+理念+示例+功能预览+引导注册） |

---

### 任务 1：身维度详页（body-detail/index.vue）登录前内容改造

**文件：** 修改 `cfc-frontend/pages/body-detail/index.vue`

**现状：** 登录前已有 PageBanner + brand-strap + 雷达图(always) + monthly-guidance，但缺少痛点共鸣和引导。

**改动：** 在 `monthly-guidance` 区块之后、`FamilyEnergyBar`（登录后）之前，新增 3 个 `v-if="!isLoggedIn"` 区块。

- [ ] **步骤 1：在 `monthly-guidance` 之后新增痛点卡**

在 `monthly-guidance` 的 `</view>` 后面、`FamilyEnergyBar` 前面插入：

```html
    <!-- 痛点卡（登录前） -->
    <view class="pain-card" v-if="!isLoggedIn">
      <view class="pain-card-icon">🩺</view>
      <view class="pain-card-body">
        <text class="pain-card-title">"指标正常≠健康"</text>
        <text class="pain-card-desc">孩子反复发烧，你扛了多少次了？</text>
        <text class="pain-card-source">—— 摘自《家的算法》第3章</text>
      </view>
    </view>

    <!-- 最小输入卡（登录前） -->
    <view class="min-input-card" v-if="!isLoggedIn">
      <view class="min-input-header">
        <text class="min-input-icon">🌱</text>
        <text class="min-input-title">今日最小输入</text>
      </view>
      <view class="min-input-body">
        <text class="min-input-action">喝一杯温水</text>
        <text class="min-input-desc">20秒就能完成，启动今天的主动健康</text>
      </view>
    </view>

    <!-- 功能预览（登录前） -->
    <view class="feature-preview" v-if="!isLoggedIn">
      <view class="feature-title">登录后你还可以</view>
      <view class="feature-grid">
        <view class="feature-item">
          <text class="feature-icon">📋</text>
          <text class="feature-label">健康报告</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">📍</text>
          <text class="feature-label">健康打卡</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🩺</text>
          <text class="feature-label">体质测评</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🥗</text>
          <text class="feature-label">饮食推荐</text>
        </view>
      </view>
    </view>
```

- [ ] **步骤 2：添加样式**

在 `<style scoped>` 末尾添加：

```css
/* 登录前 - 痛点卡 */
.pain-card {
  display: flex;
  align-items: flex-start;
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 20rpx 24rpx;
}
.pain-card-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.pain-card-body {
  flex: 1;
}
.pain-card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #9A3412;
  display: block;
}
.pain-card-desc {
  font-size: 26rpx;
  color: #C2410C;
  margin-top: 8rpx;
  display: block;
}
.pain-card-source {
  font-size: 22rpx;
  color: #FDBA74;
  margin-top: 6rpx;
  display: block;
}

/* 最小输入卡 */
.min-input-card {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 0 24rpx 20rpx;
  border: 2rpx solid #FED7AA;
}
.min-input-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.min-input-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}
.min-input-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.min-input-action {
  font-size: 36rpx;
  font-weight: bold;
  color: #EA580C;
  display: block;
  margin-bottom: 6rpx;
}
.min-input-desc {
  font-size: 24rpx;
  color: #999;
  display: block;
}

/* 功能预览 */
.feature-preview {
  margin: 0 24rpx 20rpx;
}
.feature-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.feature-item {
  width: calc(25% - 12rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FFF7ED;
  border-radius: 12rpx;
  padding: 16rpx 0;
}
.feature-icon {
  font-size: 36rpx;
  display: block;
}
.feature-label {
  font-size: 22rpx;
  color: #666;
  margin-top: 6rpx;
  display: block;
}
```

- [ ] **步骤 3：验证**

在微信开发者工具中预览，确认：
1. 未登录时显示痛点卡、最小输入卡、功能预览
2. 登录后不显示这些区块
3. 样式在各尺寸设备上正常

---

### 任务 2：心维度详页（mind-detail/index.vue）登录前内容改造

**文件：** 修改 `cfc-frontend/pages/mind-detail/index.vue`

**现状：** 登录前有 PageBanner + brand-strap + monthly-guidance，但缺少雷达图（游客看不到任何数据）、引导注册。

**改动：** 在 `monthly-guidance` 之后新增痛点卡、最小输入卡、功能预览、LoginGuideCard。

- [ ] **步骤 1：在 `monthly-guidance` 之后新增内容**

在 `monthly-guidance` 的 `</view>` 之后、`FamilyEnergyBar`（登录后）之前插入：

```html
    <!-- 痛点卡（登录前） -->
    <view class="pain-card" v-if="!isLoggedIn">
      <view class="pain-card-icon">❤️</view>
      <view class="pain-card-body">
        <text class="pain-card-title">"身体年年体检，你的心体检过吗？"</text>
        <text class="pain-card-desc">白天忙忙碌碌，晚上躺下心里空落落的累</text>
        <text class="pain-card-source">—— 摘自《家的算法》第7章</text>
      </view>
    </view>

    <!-- 最小输入卡（登录前） -->
    <view class="min-input-card" v-if="!isLoggedIn">
      <view class="min-input-header">
        <text class="min-input-icon">🌱</text>
        <text class="min-input-title">今日最小输入</text>
      </view>
      <view class="min-input-body">
        <text class="min-input-action">一次深呼吸</text>
        <text class="min-input-desc">吸四秒，呼六秒。烦躁时做一次，前额叶重新上线</text>
      </view>
    </view>

    <!-- 功能预览（登录前） -->
    <view class="feature-preview" v-if="!isLoggedIn">
      <view class="feature-title">登录后你还可以</view>
      <view class="feature-grid">
        <view class="feature-item">
          <text class="feature-icon">📊</text>
          <text class="feature-label">情绪自评</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">📍</text>
          <text class="feature-label">情绪打卡</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🧰</text>
          <text class="feature-label">疏导工具</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🌟</text>
          <text class="feature-label">家庭天盘</text>
        </view>
      </view>
    </view>

    <!-- 登录引导（登录前） -->
    <view class="login-guide-section" v-if="!isLoggedIn">
      <LoginGuideCard
        title="解锁心智能量数据"
        :items="['查看心理健康测评报告', '追踪情绪变化趋势', '获取专业心理疏导建议']" />
    </view>
```

- [ ] **步骤 2：添加样式**

复制任务 1 步骤 2 的样式代码到 `mind-detail/index.vue` 的 `<style scoped>` 末尾。

- [ ] **步骤 3：验证**

确认未登录时显示所有新区块，登录后不显示。

---

### 任务 3：智维度详页（wisdom-detail/index.vue）登录前内容改造

**文件：** 修改 `cfc-frontend/pages/wisdom-detail/index.vue`

**现状：** 登录前有 PageBanner + brand-strap + 认知雷达图(always) + monthly-guidance，缺少引导注册。

**改动：** 在 `monthly-guidance` 之后新增痛点卡、最小输入卡、功能预览、LoginGuideCard。

- [ ] **步骤 1：在 `monthly-guidance` 之后新增内容**

```html
    <!-- 痛点卡（登录前） -->
    <view class="pain-card" v-if="!isLoggedIn">
      <view class="pain-card-icon">📚</view>
      <view class="pain-card-body">
        <text class="pain-card-title">"你逼孩子学习，你自己多久没学新东西了？"</text>
        <text class="pain-card-desc">成长不是孩子的专利，是家里每个人的终身课题</text>
        <text class="pain-card-source">—— 摘自《家的算法》第4章</text>
      </view>
    </view>

    <!-- 最小输入卡（登录前） -->
    <view class="min-input-card" v-if="!isLoggedIn">
      <view class="min-input-header">
        <text class="min-input-icon">🌱</text>
        <text class="min-input-title">今日最小输入</text>
      </view>
      <view class="min-input-body">
        <text class="min-input-action">问一个开放题</text>
        <text class="min-input-desc">"今天有没有一件事让你觉得有意思？"10秒钟就够了</text>
      </view>
    </view>

    <!-- 功能预览（登录前） -->
    <view class="feature-preview" v-if="!isLoggedIn">
      <view class="feature-title">登录后你还可以</view>
      <view class="feature-grid">
        <view class="feature-item">
          <text class="feature-icon">🧠</text>
          <text class="feature-label">认知测评</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🏋️</text>
          <text class="feature-label">训练中心</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">📝</text>
          <text class="feature-label">自测</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">📖</text>
          <text class="feature-label">知识库</text>
        </view>
      </view>
    </view>

    <!-- 登录引导（登录前） -->
    <view class="login-guide-section" v-if="!isLoggedIn">
      <LoginGuideCard
        title="解锁智维能量数据"
        :items="['查看认知测评报告', '追踪认知能力发展趋势', '获取个性化训练建议']" />
    </view>
```

- [ ] **步骤 2：添加样式**

复制任务 1 步骤 2 的样式代码到 `wisdom-detail/index.vue` 的 `<style scoped>` 末尾。

- [ ] **步骤 3：验证**

---

### 任务 4：富维度详页（wealth/index.vue）登录前内容微调

**文件：** 修改 `cfc-frontend/pages/wealth/index.vue`

**现状：** 登录前已有 PageBanner + brand-strap + LoginGuideCard + 商品精选预览，内容较完整。

**改动：** 在 `brand-strap` 之后新增痛点卡和最小输入卡。

- [ ] **步骤 1：在 `brand-strap` 之后新增内容**

在 `brand-strap` 的 `</view>` 之后、`login-guide-section` 之前插入：

```html
    <!-- 痛点卡（登录前） -->
    <view class="pain-card" v-if="!isLoggedIn">
      <view class="pain-card-icon">💰</view>
      <view class="pain-card-body">
        <text class="pain-card-title">"工资到账那刻，幸福感却越来越少"</text>
        <text class="pain-card-desc">房贷扣完，孩子开销扣完，剩下的撑不到月底</text>
        <text class="pain-card-source">—— 摘自《家的算法》第5章</text>
      </view>
    </view>

    <!-- 最小输入卡（登录前） -->
    <view class="min-input-card" v-if="!isLoggedIn">
      <view class="min-input-header">
        <text class="min-input-icon">🌱</text>
        <text class="min-input-title">今日最小输入</text>
      </view>
      <view class="min-input-body">
        <text class="min-input-action">记一笔账</text>
        <text class="min-input-desc">睡前花10秒记下今天最大的一笔开销，先看见，再管理</text>
      </view>
    </view>
```

- [ ] **步骤 2：添加样式**

复制任务 1 步骤 2 的样式代码到 `wealth/index.vue` 的 `<style scoped>` 末尾。

- [ ] **步骤 3：验证**

---

### 任务 5：健康页（health-main/index.vue）登录前内容增强

**文件：** 修改 `cfc-frontend/pages/health-main/index.vue`

**现状：** 登录前有 PageBanner + LoginGuideCard，内容较简单。

**改动：** 在 PageBanner 之后新增痛点卡、功能预览、健康自测入口、LoginGuideCard 保留。

- [ ] **步骤 1：替换登录前内容**

当前 `v-if="!isLoggedIn"` 区块内容替换为：

```html
    <view v-if="!isLoggedIn">
      <PageBanner theme="body" tagline="科学管理全家健康" quote="身体健康是幸福的基础" />

      <!-- 痛点卡 -->
      <view class="pain-card">
        <view class="pain-card-icon">🩺</view>
        <view class="pain-card-body">
          <text class="pain-card-title">"没生病，不等于健康"</text>
          <text class="pain-card-desc">超过六成的家庭在过去一年中，至少一人经历过三次以上的急性疾病</text>
          <text class="pain-card-source">—— 摘自《家的算法》第3章</text>
        </view>
      </view>

      <!-- 功能预览 -->
      <view class="feature-preview">
        <view class="feature-title">健康管理三步走</view>
        <view class="feature-grid">
          <view class="feature-item">
            <text class="feature-icon">📋</text>
            <text class="feature-label">报告上传</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📊</text>
            <text class="feature-label">在线测评</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📍</text>
            <text class="feature-label">健康打卡</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📋</text>
            <text class="feature-label">健康方案</text>
          </view>
        </view>
      </view>

      <!-- 健康自测入口 -->
      <view class="self-check-card" @click="goSelfCheck">
        <view class="self-check-icon">📝</view>
        <view class="self-check-body">
          <text class="self-check-title">五维健康自测</text>
          <text class="self-check-desc">15题 · 约5分钟 · 了解家庭健康状态</text>
        </view>
        <text class="self-check-arrow">›</text>
      </view>

      <LoginGuideCard title="登录后查看全家健康数据" :features="['申请专业测评','查看健康报告和诊断结果','了解家人健康状态']" />
    </view>
```

- [ ] **步骤 2：添加样式**

```css
/* 健康自测入口 */
.self-check-card {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 0 24rpx 20rpx;
}
.self-check-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.self-check-body {
  flex: 1;
}
.self-check-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #9A3412;
  display: block;
}
.self-check-desc {
  font-size: 24rpx;
  color: #C2410C;
  margin-top: 4rpx;
  display: block;
}
.self-check-arrow {
  font-size: 36rpx;
  color: #EA580C;
  flex-shrink: 0;
}
```

- [ ] **步骤 3：添加 `goSelfCheck` 方法**

在 `<script>` 的 `methods` 中添加：

```javascript
goSelfCheck() {
  uni.navigateTo({ url: '/pages/family/self-check' })
},
```

- [ ] **步骤 4：验证**

---

### 任务 6：成长页（growth-main/index.vue）登录前内容新增

**文件：** 修改 `cfc-frontend/pages/growth-main/index.vue`

**现状：** 无登录前判断，直接显示登录后内容。

**改动：** 用 `v-if="!isLoggedIn"` 包裹登录前内容，现有内容用 `v-else` 包裹。

- [ ] **步骤 1：改造模板结构，新增登录前内容**

当前模板以 `PageBanner` 开头，将其替换为：

```html
  <view class="container">
    <!-- 登录前 -->
    <view v-if="!isLoggedIn">
      <PageBanner theme="action" tagline="干预 · 记录 · 成长" quote="知行合一，每天进步一点点" />

      <!-- 理念卡 -->
      <view class="pain-card">
        <view class="pain-card-icon">📈</view>
        <view class="pain-card-body">
          <text class="pain-card-title">"看见改变正在发生"</text>
          <text class="pain-card-desc">没有日志的程序无法调试。没有反馈的改变无法持续。</text>
          <text class="pain-card-source">—— 摘自《家的算法》第10章</text>
        </view>
      </view>

      <!-- 示例展示 -->
      <view class="example-card">
        <view class="example-header">
          <text class="example-title">📖 真实案例：小明三个月成长记录</text>
        </view>
        <view class="example-row">
          <text class="example-dim">身维度</text>
          <text class="example-change up">+5分</text>
        </view>
        <view class="example-row">
          <text class="example-dim">智维度</text>
          <text class="example-change up">+3分</text>
        </view>
        <view class="example-row">
          <text class="example-dim">心维度</text>
          <text class="example-change up">+4分</text>
        </view>
        <text class="example-source">基于真实脱敏数据</text>
      </view>

      <!-- 功能预览 -->
      <view class="feature-preview">
        <view class="feature-title">登录后你可以</view>
        <view class="feature-grid">
          <view class="feature-item">
            <text class="feature-icon">📊</text>
            <text class="feature-label">干预进度</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📍</text>
            <text class="feature-label">追踪记录</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🏆</text>
            <text class="feature-label">里程碑</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📋</text>
            <text class="feature-label">定期调研</text>
          </view>
        </view>
      </view>

      <LoginGuideCard title="解锁完整成长档案" :features="['查看测评报告和成长趋势','记录每日干预进度','获取个性化成长建议']" />
    </view>

    <!-- 登录后（保持现有内容） -->
    <template v-else>
      <PageBanner theme="action" tagline="干预 · 记录 · 成长" quote="知行合一，每天进步一点点" />
      <!-- 后续所有现有内容... -->
    </template>
  </view>
```

- [ ] **步骤 2：添加样式**

```css
/* 示例展示卡 */
.example-card {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 0 24rpx 20rpx;
  border: 2rpx solid #D1FAE5;
}
.example-header {
  margin-bottom: 16rpx;
}
.example-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
}
.example-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #F3F4F6;
}
.example-dim {
  font-size: 26rpx;
  color: #666;
}
.example-change {
  font-size: 28rpx;
  font-weight: bold;
}
.example-change.up {
  color: #10B981;
}
.example-source {
  font-size: 22rpx;
  color: #D1D5DB;
  margin-top: 10rpx;
  display: block;
}
```

- [ ] **步骤 3：添加 `isLoggedIn` 响应式数据**

在 `<script>` 的 `data()` 中添加：

```javascript
isLoggedIn: !!uni.getStorageSync('token'),
```

并在 `onShow` 中刷新：

```javascript
onShow() {
  this.isLoggedIn = !!uni.getStorageSync('token')
  // 保持现有逻辑...
}
```

- [ ] **步骤 4：验证**

确认未登录时显示品牌内容，登录后恢复到现有功能。

---

## 自检清单

- [ ] 规格覆盖度：每个页面/维度在计划中都有对应任务
- [ ] 占位符扫描：无 TODO、待定、占位符
- [ ] 类型一致性：所有变量名、方法名、路径名一致
- [ ] 所有任务都包含完整的代码和样式
- [ ] 遵循小程序限制（无可选链、CSS Grid、:key表达式）