# 家庭成员页面重新设计 — 实施计划

> **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:** 重新设计家庭管理员页面，改为温暖家庭风的卡片式布局，"添加"和"邀请"改为底部固定按钮，邀请直接弹出海报。

**Architecture:** 单页面重写 `pages/profile-extra/family-members.vue`，移除齿轮设置弹窗、筛选标签、行内三维评分条，新增暖橙渐变头部、卡片式成员列表、底部固定操作栏，邀请流程直接调用 `generateFamilyInviteQrCode` 后弹出 SharePoster。

**Tech Stack:** uni-app Vue 2 Options API，微信小程序

**参考设计文档:** `docs/superpowers/specs/2026-07-31-family-members-redesign.md`

## Global Constraints

- 禁止可选链 `?.`（用 `&&` 替代）
- 禁止 CSS Grid（用 flexbox）
- 禁止 `:key` 表达式（用方法调用替代）
- 使用 Vue 2 Options API
- 品牌色：暖橙 `#F97316` / 米白 `#FFFCF5` / 暖灰 `#F5F0EB`

---

## 文件结构

| 文件 | 操作 | 说明 |
|------|------|------|
| `pages/profile-extra/family-members.vue` | 重写 | 完整替换模板/脚本/样式 |
| `components/SharePoster.vue` | 无变更 | 保持现有，直接调用 |

---

### Task 1: 重写页面模板 — 头部 + 成员列表 + 空状态

**Files:**
- Modify: `pages/profile-extra/family-members.vue` (template section)

**Interfaces:**
- Consumes: `members` (Array), `filteredMembers` (computed→直接返回 members), `familyName` (String), `loading` (Boolean)
- Produces: 渲染完整的页面结构（头部、成员列表、空状态、底部栏）

- [ ] **Step 1: 替换 `<template>` 头部**

替换现有头部（紫色渐变 + 齿轮图标）为暖橙渐变头部：

```html
<!-- ===== 家庭信息头部 ===== -->
<view class="family-header">
  <view class="family-header-content">
    <text class="family-header-icon">🏠</text>
    <view class="family-header-text">
      <text class="family-name">{{ familyName || '我的家庭' }}</text>
      <text class="family-member-count">{{ members.length }} 位成员</text>
    </view>
  </view>
</view>
```

- [ ] **Step 2: 替换成员列表为卡片式布局**

移除筛选标签和行内三维评分条，改为纯卡片：

```html
<!-- ===== 成员卡片列表 ===== -->
<view class="member-list">
  <view class="member-card" v-for="(m, i) in filteredMembers" :key="getMemberKey(m, i)" @click="showMemberDetail(m)">
    <image class="member-avatar" :src="m.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
    <view class="member-info">
      <text class="member-name">{{ m.nickname || '未设置' }}</text>
      <text class="member-role-tag">{{ m.relativeLabel || m.roleLabel || (m.effectiveRole === 'parent' ? '家长' : '孩子') }}</text>
    </view>
    <text class="member-arrow">›</text>
  </view>
</view>
```

- [ ] **Step 3: 替换空状态**

```html
<!-- ===== 空状态 ===== -->
<view v-if="members.length === 0" class="empty-state">
  <text class="empty-icon">👨‍👩‍👧‍👦</text>
  <text class="empty-title">还没有家庭成员</text>
  <text class="empty-desc">邀请家人加入，一起记录成长</text>
  <button class="empty-invite-btn" @click="onInvite">📨 邀请家人</button>
</view>
```

- [ ] **Step 4: 添加底部固定栏**

```html
<!-- ===== 底部操作栏 ===== -->
<view class="bottom-bar">
  <button class="bottom-btn btn-add" @click="onAddMember">＋ 添加成员</button>
  <button class="bottom-btn btn-invite" @click="onInvite">📨 邀请成员</button>
</view>
```

- [ ] **Step 5: 保留成员详情弹窗模板（简化关闭按钮）**

保留 `member-detail-card` 弹窗，仅微调视觉（去掉原来紫色相关样式，改为暖橙风格）。移除 `showSettings` 和 `showInviteCard` 相关弹窗。

- [ ] **Step 6: 保留 SharePoster 引用**

```html
<SharePoster :show="showPoster" :referralCode="inviteCode" :qrCodeBase64="inviteQrCode" :nickname="userNickname" :userAvatar="userAvatar" @close="showPoster = false" />
```

---

### Task 2: 重写页面脚本

**Files:**
- Modify: `pages/profile-extra/family-members.vue` (script section)

**Interfaces:**
- Consumes: `listFamilyMembers`, `switchToFamilyMember`, `kickFamilyMemberById`, `generateFamilyInviteQrCode`, `getFamilyMembers`, `updateFamilyMember` from api.js
- Produces: 所有页面交互逻辑

- [ ] **Step 1: 精简 imports 和 data**

移除 `showSettings`, `showInviteCard` 相关字段。保留 `showPoster`, `showMemberDetailModal`, `detailMember`, `memberScores` 等。

```js
import {
  listFamilyMembers,
  switchToFamilyMember,
  kickFamilyMemberById,
  generateFamilyInviteQrCode,
  getFamilyMembers,
  updateFamilyMember
} from '../../utils/api.js'
import store from '../../store/index.js'
import SharePoster from '@/components/SharePoster.vue'

export default {
  components: { SharePoster },
  data() {
    return {
      userId: 0, familyId: 0, familyName: '', inviteCode: '', inviteQrCode: '',
      creatorId: null, members: [], isAdmin: false, loading: false,
      showPoster: false, showMemberDetailModal: false, detailMember: null,
      memberScores: {}, userNickname: '', userAvatar: ''
    }
  },
```

- [ ] **Step 2: 简化 computed**

移除 `filteredMembers` 的筛选逻辑（直接返回 members），移除 `detailMemberScores`（保留，因为详情弹窗仍显示评分）。

```js
computed: {
  filteredMembers() {
    return this.members  // 无筛选标签，直接返回全部
  },
  detailMemberScores() {
    if (!this.detailMember) return {}
    return this.memberScores[this.detailMember.id] || {}
  }
},
```

- [ ] **Step 3: 重写 `onInvite` 方法 — 直接弹出海报**

```js
async onInvite() {
  this.inviteQrCode = ''
  this.inviteCode = ''
  uni.showLoading({ title: '生成邀请...' })
  try {
    var res = await generateFamilyInviteQrCode()
    if (res.code === 200 && res.data) {
      this.inviteCode = res.data.inviteCode
      this.inviteQrCode = res.data.qrCodeBase64
      this.showPoster = true
    } else {
      uni.showToast({ title: res.message || '生成失败', icon: 'none' })
    }
  } catch (e) {
    uni.showToast({ title: '生成失败', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
},
```

- [ ] **Step 4: 移除 `onAddMember` 中的 `showSettings = false`**

```js
onAddMember() {
  uni.navigateTo({ url: '/pages/family/add-member' })
},
```

- [ ] **Step 5: 保留其他方法不变**

保留：`loadMembers`, `buildScoreMap`, `loadFamilyInfo`, `showMemberDetail`, `canEditMember`, `onSwitchMember`, `confirmKick`, `onKickMember`, `onCopyCode`, `shareInviteCard`, `onEditRelation`, `doQuestionnaire`, `recordInteraction`

移除：`onInvite` 旧实现（已替换）

---

### Task 3: 重写页面样式

**Files:**
- Modify: `pages/profile-extra/family-members.vue` (style section)

**Interfaces:**
- Produces: 温暖家庭风视觉风格

- [ ] **Step 1: 重写全局容器样式**

```css
.container {
  padding: 30rpx 30rpx 140rpx;
  min-height: 100vh;
  background: #F5F0EB;
}
```

- [ ] **Step 2: 暖橙渐变头部**

```css
.family-header {
  background: linear-gradient(135deg, #F97316, #EA580C);
  border-radius: 20rpx;
  padding: 36rpx 30rpx;
  margin-bottom: 24rpx;
  color: #fff;
  text-align: center;
}
.family-header-content { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.family-header-icon { font-size: 48rpx; margin-bottom: 8rpx; }
.family-header-text { text-align: center; }
.family-name { font-size: 36rpx; font-weight: bold; display: block; }
.family-member-count { font-size: 24rpx; opacity: 0.85; margin-top: 4rpx; display: block; }
```

- [ ] **Step 3: 成员卡片样式**

```css
.member-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.member-card:active { background: #FFFCF5; }
.member-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 20rpx; background: #f0f0f0; flex-shrink: 0; }
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 30rpx; font-weight: 600; display: block; color: #333; }
.member-role-tag { display: inline-block; font-size: 22rpx; color: #F97316; background: #FFF7ED; padding: 4rpx 14rpx; border-radius: 8rpx; margin-top: 6rpx; }
.member-arrow { font-size: 36rpx; color: #ccc; margin-left: 12rpx; flex-shrink: 0; }
```

- [ ] **Step 4: 空状态样式**

```css
.empty-state { text-align: center; padding: 100rpx 30rpx; }
.empty-icon { font-size: 100rpx; display: block; margin-bottom: 20rpx; }
.empty-title { font-size: 32rpx; color: #666; display: block; margin-bottom: 12rpx; }
.empty-desc { font-size: 26rpx; color: #999; display: block; margin-bottom: 40rpx; }
.empty-invite-btn { background: linear-gradient(135deg, #F97316, #EA580C); color: #fff; border: none; border-radius: 40rpx; padding: 20rpx 50rpx; font-size: 28rpx; }
```

- [ ] **Step 5: 底部固定栏样式**

```css
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 16rpx 30rpx calc(16rpx + constant(safe-area-inset-bottom));
  padding: 16rpx 30rpx calc(16rpx + env(safe-area-inset-bottom));
  background: #fff;
  display: flex;
  gap: 20rpx;
  box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.06);
  z-index: 50;
}
.bottom-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  text-align: center;
  border: none;
}
.bottom-btn:active { opacity: 0.85; }
.btn-add { background: #fff; color: #F97316; border: 2rpx solid #F97316; }
.btn-invite { background: linear-gradient(135deg, #F97316, #EA580C); color: #fff; }
```

- [ ] **Step 6: 更新成员详情弹窗样式暖色风**

将详情弹窗中紫色 `#667eea` 替换为暖橙 `#F97316`，保留原有布局和功能按钮样式，将 `.action-switch` 等按钮颜色微调为暖色调。

- [ ] **Step 7: 移除旧样式**

移除不再使用的样式：`.filter-tabs`, `.filter-tab`, `.settings-card`, `.settings-header`, `.settings-body`, `.settings-item`, `.invite-card`, `.invite-qr-wrap`, `.invite-code-section`, `.invite-actions`, `.member-quality-scores`, `.score-item`, `.member-source-tag`, `.member-extra`

---

### Task 4: 验证

**Files:**
- Verify: `pages/profile-extra/family-members.vue`

- [ ] **Step 1: 编译验证**

```bash
cd /app/cfc/cfc-frontend && npm run build:mp-weixin 2>&1 | tail -20
```

- [ ] **Step 2: 最终检查**

检查是否满足所有需求：
- 暖橙渐变头部 ✓
- 卡片式成员列表（头像 + 昵称 + 关系标签）✓
- 无筛选标签 ✓
- 无行内三维评分 ✓
- 底部固定栏（添加 + 邀请）✓
- 邀请直接弹出海报 ✓
- 无齿轮设置弹窗 ✓
- 无邀请码卡片弹窗 ✓
- 成员详情弹窗保留 ✓