# 心智页双Tab结构 Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 为心智页 `pages/mind/index.vue` 添加心/智双Tab结构，用户可在心理与认知内容之间切换

**Architecture:** 单页面内通过 `activeTab` 数据属性 + `v-if` 控制心/智两个内容区块的显示隐藏，Tab栏位于图谱/快捷入口之后。推荐阅读、维度任务/活动/商品跟随activeTab切换维度参数。

**Tech Stack:** uni-app Vue 2, 微信小程序

**Design Spec Ref:** `docs/superpowers/specs/2026-06-13-five-dimension-pages-redesign.md` §4

---
### 注意事项（Agent执行时阅读，不写入文件）
- **搜索范围限制:** glob 仅在 `cfc-frontend/components/`、`cfc-frontend/pages/mind/`、`cfc-frontend/utils/`、`cfc-frontend/config/` 下搜索。**禁止搜索 `node_modules/`、`unpackage/`、`dist/`**
- **NEVER** 在模板中使用可选链 `?.`（微信小程序不支持）
- **NEVER** `git commit` 或 `git push`，只修改文件
- **所有模块必须 `v-if` 切换**，不得使用 `v-show`（小程序 `v-show` 仍会渲染组件，影响性能）
- **计算属性使用 `function` 关键字**（Vue 2 Options API），不要使用箭头函数或 `get` 语法
- **`v-for` 中的元素如果有 `v-if`，用 `<template v-for>` 包裹或移到外层**
- **文章推荐阅读必须在两个Tab中都显示**（心理Tab和心理相关，认知Tab和认知相关）

**DO NOT 擅自创建/修改其他文件** — 只改 `mind/index.vue`

---

### Task 1: Tab 状态 + Tab栏UI + 内容区块隔离

**Files:**
- Modify: `cfc-frontend/pages/mind/index.vue` — 全文件（1392行）

**做什么：**
1. `data()` 中添加 `activeTab: 'emotion'`
2. 在 `FamilyRelationGraph` / `UserQuickEntry` 之后、原心理能量概况之前，插入Tab栏
3. 将原心理内容（能量概况~推荐阅读）包裹在 `<template v-if="activeTab === 'emotion'">` 内
4. 将原认知内容（综合认知评分~阅读统计）包裹在 `<template v-if="activeTab === 'cognitive'">` 内
5. 添加 `switchTab(tab)` 方法
6. 添加 `.tab-bar` / `.tab-item` / `.tab-item.active` 样式

**详细步骤：**

- [ ] **Step 1: 在 `data()` 中添加 `activeTab` 属性**

在 `data()` 中，`dimensionProducts: []` 之后添加：

```js
activeTab: 'emotion'
```

- [ ] **Step 2: 在template中插入Tab栏**

找到（当前模板第53行）：
```html
    <!-- ===== 心理能量概况 ===== -->
```

在其之前插入Tab栏：

```html
    <!-- ===== 心/智 Tab栏 ===== -->
    <view class="tab-bar">
      <view
        :class="['tab-item', activeTab === 'emotion' ? 'active' : '']"
        @click="switchTab('emotion')">
        <text class="tab-icon">&#x2764;</text>
        <text class="tab-label">心·心理</text>
      </view>
      <view
        :class="['tab-item', activeTab === 'cognitive' ? 'active' : '']"
        @click="switchTab('cognitive')">
        <text class="tab-icon">&#x1F9E0;</text>
        <text class="tab-label">智·认知</text>
      </view>
    </view>
```

- [ ] **Step 3: 包裹心理内容为 emotion Tab**

在第53行 `<!-- ===== 心理能量概况 ===== -->` 之前插入：

```html
    <!-- ===== 心·心理 Tab ===== -->
    <template v-if="activeTab === 'emotion'">
```

然后在原认知区块之前（第162行 `<!-- ===== 认知区块 ===== -->`）找到对应的闭合，替换为：

```html
    </template>
```

- [ ] **Step 4: 包裹认知内容为 cognitive Tab**

在第162行 `<!-- ===== 认知区块 ===== -->` 之前插入：

```html
    <!-- ===== 智·认知 Tab ===== -->
    <template v-if="activeTab === 'cognitive'">
```

然后在 `</template>`（第311行 `</view>` 之前那里是底部区块）之前，找到认知区块的结束位置（第276行 `<!-- ===== 底部：维度任务/活动/商品 ===== -->` 之前），插入：

```html
    </template>
```

等一下 — 我需要更精确地确认包裹范围。

当前认知内容范围：162行(`<!-- ===== 认知区块 ===== -->`)到276行(底部:维度任务/活动/商品之前)。

所以替换为：

```html
    <!-- ===== 智·认知 Tab ===== -->
    <template v-if="activeTab === 'cognitive'">

    <!-- 原有认知内容... -->

    </template>

    <!-- ===== 底部：维度任务/活动/商品 ===== -->
```

- [ ] **Step 5: 添加 `switchTab` 方法**

在 `methods` 中，`goAssessment` 方法之前添加：

```js
switchTab: function(tab) {
  this.activeTab = tab
}
```

- [ ] **Step 6: 添加Tab栏样式**

在 `<style scoped>` 中，`.container` 样式之后添加：

```css
/* ===== 心/智 Tab 栏 ===== */
.tab-bar {
  display: flex;
  flex-direction: row;
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 8rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  border-radius: 16rpx;
  transition: all 0.3s;
}
.tab-item.active {
  background: linear-gradient(135deg, #8B5CF6, #A78BFA);
  box-shadow: 0 4rpx 12rpx rgba(139,92,246,0.3);
}
.tab-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}
.tab-item.active .tab-icon {
  color: #fff;
}
.tab-label {
  font-size: 28rpx;
  font-weight: 500;
  color: #999;
}
.tab-item.active .tab-label {
  color: #fff;
  font-weight: bold;
}
```

---

### Task 2: 推荐阅读按Tab筛选维度

**做什么：**
1. 在文章映射时保留 `relatedDimensions` 字段
2. 添加 `emotionArticles` / `cognitiveArticles` 计算属性，按 activeTab 过滤
3. 推荐阅读区域切换使用对应的文章列表
4. 推荐阅读已登录限制移除

- [ ] **Step 1: 文章映射保留 `relatedDimensions`**

在 `loadFeaturedArticles` 中，`list.map` 回调内添加 `relatedDimensions`：

```js
self.articles = list.map(function(item, index) {
  return {
    id: item.id,
    category: item.categoryName || '成长文章',
    categoryColor: gradientColors[index % gradientColors.length],
    title: item.title || '',
    summary: item.summary || '',
    views: item.viewCount ? String(item.viewCount) : '0',
    likes: '0',
    date: item.publishedAt ? item.publishedAt.slice(0, 10) : '',
    relatedDimensions: item.relatedDimensions || []  // 保留维度标签用于过滤
  }
})
```

- [ ] **Step 2: 添加文章计算属性**

在 `computed` 中，`intimacyMapForGraph` 之后添加：

```js
emotionArticles: function() {
  if (!this.articles || this.articles.length === 0) return []
  var result = []
  for (var i = 0; i < this.articles.length; i++) {
    var a = this.articles[i]
    if (a.relatedDimensions && a.relatedDimensions.indexOf('mind') !== -1) {
      result.push(a)
    }
  }
  // 如果没有匹配 dimension 的文章，回退显示全部
  if (result.length === 0) return this.articles.slice(0, 5)
  return result.slice(0, 5)
},
cognitiveArticles: function() {
  if (!this.articles || this.articles.length === 0) return []
  var result = []
  for (var i = 0; i < this.articles.length; i++) {
    var a = this.articles[i]
    if (a.relatedDimensions && a.relatedDimensions.indexOf('wisdom') !== -1) {
      result.push(a)
    }
  }
  if (result.length === 0) return this.articles.slice(0, 5)
  return result.slice(0, 5)
}
```

- [ ] **Step 3: 推荐阅读区域使用对应的文章列表**

心理Tab中的推荐阅读（第136-160行），`v-for="article in articles"` 改为 `v-for="article in emotionArticles"`：

```html
<!-- 推荐阅读（心理Tab内） -->
<view class="section" v-if="sectionVisible('recommended_reading')">
  <view class="section-header">
    <text class="section-title">推荐阅读</text>
  </view>
  <view class="article-list">
    <view class="article-card" v-for="article in emotionArticles" :key="article.id" @click="goArticleDetail(article.id)">
```

在认知Tab内的推荐阅读部分（需要认知Tab也有一份推荐阅读），在当前认知内容的最底部、认知Tab闭合之前插入：

```html
  <!-- 推荐阅读（认知Tab内） -->
  <view class="section" v-if="sectionVisible('recommended_reading')">
    <view class="section-header">
      <text class="section-title">推荐阅读</text>
    </view>
    <view class="article-list">
      <view class="article-card" v-for="article in cognitiveArticles" :key="article.id" @click="goArticleDetail(article.id)">
        <view class="article-category" :style="{ background: article.categoryColor }">
          <text class="article-category-text">{{ article.category }}</text>
        </view>
        <text class="article-title">{{ article.title }}</text>
        <text class="article-summary">{{ article.summary }}</text>
        <view class="article-meta">
          <view class="meta-item">
            <text class="meta-icon">&#x1F4D6;</text>
            <text class="meta-text">{{ article.views }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-icon">&#x1F44D;</text>
            <text class="meta-text">{{ article.likes }}</text>
          </view>
          <text class="article-date">{{ article.date }}</text>
        </view>
      </view>
    </view>
  </view>
```

---

### Task 3: 维度数据跟随Tab切换

**做什么：**
1. 添加 `currentDimensionCode` 计算属性，根据 `activeTab` 返回 `mind` 或 `wisdom`
2. 将 `DimensionTasks` / `DimensionActivities` / `DimensionProducts` 的 `dimensionCode` 绑定动态值
3. `loadDimensionActivities` / `loadDimensionProducts` 方法改为使用动态维度
4. `moreActivities` / `moreProducts` 导航URL使用动态维度

- [ ] **Step 1: 添加 `currentDimensionCode` 计算属性**

在 `computed` 中，`cognitiveArticles` 之后添加：

```js
currentDimensionCode: function() {
  return this.activeTab === 'emotion' ? 'mind' : 'wisdom'
}
```

- [ ] **Step 2: 底部维度区块绑定动态 dimensionCode**

在模板中找到（第278-295行）：

```html
    <DimensionTasks
      v-if="isLoggedIn"
      dimensionCode="mind"
      ... />

    <DimensionActivities
      dimensionCode="mind"
      ... />

    <DimensionProducts
      dimensionCode="mind"
      ... />
```

改为：

```html
    <DimensionTasks
      v-if="isLoggedIn"
      :dimensionCode="currentDimensionCode"
      ... />

    <DimensionActivities
      :dimensionCode="currentDimensionCode"
      ... />

    <DimensionProducts
      :dimensionCode="currentDimensionCode"
      ... />
```

注意：`DimensionTasks` 的 `dimensionCode` 前加 `:` 冒号（动态绑定）。

- [ ] **Step 3: 数据加载方法使用动态维度**

`loadDimensionActivities` 方法（第750-758行）：

```js
loadDimensionActivities: function() {
  var self = this
  var dimCode = self.currentDimensionCode
  getActivityList({ dimensionCode: dimCode, page: 1, size: 3 }).then(function(res) {
    if (res && res.data) {
      var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
      self.dimensionActivities = list.slice(0, 3)
    }
  }).catch(function() { self.dimensionActivities = [] })
}
```

`loadDimensionProducts` 方法（第759-767行）：

```js
loadDimensionProducts: function() {
  var self = this
  var dimCode = self.currentDimensionCode
  getProductsByDomain(dimCode, 1, 4).then(function(res) {
    if (res && res.data) {
      var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
      self.dimensionProducts = list.slice(0, 4)
    }
  }).catch(function() { self.dimensionProducts = [] })
}
```

- [ ] **Step 4: `switchTab` 时重载维度数据**

更新 `switchTab` 方法：

```js
switchTab: function(tab) {
  if (tab === this.activeTab) return
  this.activeTab = tab
  // 切换维度后重载对应的活动/商品数据
  this.loadDimensionActivities()
  this.loadDimensionProducts()
}
```

- [ ] **Step 5: 更新更多链接**

`goMoreActivities` 方法（第804-806行）：

```js
goMoreActivities: function() {
  var dimCode = this.currentDimensionCode
  uni.navigateTo({ url: '/pages/discover/index?type=activity&dimension=' + dimCode })
}
```

`goMoreProducts` 方法（第810-812行）：

```js
goMoreProducts: function() {
  var dimCode = this.currentDimensionCode
  uni.navigateTo({ url: '/pages/discover/index?type=product&domain=' + dimCode })
}
```

---

### Task 4: 登录限制调整（商品/活动/文章始终显示）

**做什么：**
1. 移除 `DimensionActivities` 和 `DimensionProducts` 的 `v-if="isLoggedIn"`（它们已在onShow中无条件加载）
2. 推荐阅读已在上一步中调整（无条件显示）
3. 确保 `loadFeaturedArticles` 在未登录时也调用（当前已调用）

- [ ] **Step 1: 移除活动/商品的登录限制**

当前（第285-295行）：

```html
<DimensionActivities
  dimensionCode="mind"
  :activities="..."
  @activityClick="..."
  @moreActivities="..." />

<DimensionProducts
  dimensionCode="mind"
  :products="..."
  @productClick="..."
  @moreProducts="..." />
```

确认这些没有 `v-if="isLoggedIn"` — 它们当前确实没有（只有 `DimensionTasks` 有 `v-if="isLoggedIn"`）。无需改动。

但需要确认 `loadDimensionActivities` 和 `loadDimensionProducts` 在 `onShow` 中未登录时也被调用 — 当前代码第455-456行已做：

```js
    this.loadDimensionActivities()
    this.loadDimensionProducts()
```

这些在 `if (this.isLoggedIn) { ... }` 块之外，所以没问题。

- [ ] **Step 2: 确认推荐阅读始终加载**

当前 `loadFeaturedArticles()` 在 `onShow` 中无条件调用（第442行），且在未登录时 `sectionVisible('recommended_reading')` 默认返回 true，没问题。

---

### Task 5: 编译验证

**做什么：**
1. 验证编译通过
2. 修复 LSP 诊断错误

- [ ] **Step 1: 检查LSP诊断**

```bash
# 检查修改后的文件有无诊断错误
```
使用 `lsp_diagnostics` 工具检查 `cfc-frontend/pages/mind/index.vue`

- [ ] **Step 2: 验证Tab切换逻辑**

手动验证清单：
- [ ] Tab栏正确渲染（心·心理 / 智·认知）
- [ ] 默认显示心理Tab内容
- [ ] 点击「智·认知」Tab显示认知内容
- [ ] 点击「心·心理」Tab回到心理内容
- [ ] 推荐阅读在两个Tab中均显示
- [ ] 活动/商品跟随Tab切换维度

---

## 设计补充说明：Tab改造后的页面流

```
PageBanner
  ↓
FamilyMemberStrip (登录后)
  ↓
LoginGuideCard (未登录)
  ↓
FamilyEnergyBar (登录后, dualDimension)
  ↓
FamilyRelationGraph (登录后)
  ↓
UserQuickEntry (登录后)
  ↓
┌─ Tab栏 ──────────────────────────────┐
│  [❤ 心·心理]    [🧠 智·认知]         │
└──────────────────────────────────────┘
  ↓ activeTab === 'emotion'              ↓ activeTab === 'cognitive'
┌─ 心理能量概况 ┐                    ┌─ 综合认知评分 ┐
│ EMI 四维条形图 │                    │ 认知六维雷达图 │
│ 大五人格雷达图 │                    │ 认知训练       │
│ 每日心理       │                    │ 本月阅读统计   │
│ 推荐阅读(mind) │                    │ 推荐阅读(wisdom)│
└────────────────┘                    └────────────────┘
  ↓                                    ↓
┌─ DimensionTasks (isLoggedIn) ────────┐
│  (currentDimensionCode=mind/wisdom)  │
├──────────────────────────────────────┤
│  DimensionActivities                 │
│  (currentDimensionCode=mind/wisdom)  │
├──────────────────────────────────────┤
│  DimensionProducts                   │
│  (currentDimensionCode=mind/wisdom)  │
└──────────────────────────────────────┘
  ↓
功能入口 Grid
```

---

## 执行确认

**Agent 注意：**
- 只修改 `cfc-frontend/pages/mind/index.vue` 一个文件
- 使用 `edit` 工具精确替换
- 每次替换后用 `lsp_diagnostics` 验证
- **不 commit, 不 push**