Home Explore Help
Register Sign In
liaoxg
/
cfc
1
1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 41fe832490
Branches Tags
cfc
/
docs
/
superpowers
/
specs
/
2026-07-31-family-members-redesign.md

2026-07-31-family-members-redesign.md 4.7 KB
History Raw

家庭成员页面重新设计

概述

重新设计小程序家庭成员管理页面，从丑旧的行式列表改为温暖家庭风的卡片式布局，并将"添加成员"和"邀请成员"提升为底部固定按钮，邀请直接弹出海报。

当前问题

  • 页面视觉老旧（紫色渐变头部 + 简单行式列表）
  • 添加/邀请功能藏在齿轮设置弹窗中，需要额外点击
  • 邀请流程需经过中间邀请码卡片，步骤多
  • 成员行显示三维评分条，信息过重

设计方案

视觉风格：温暖家庭风

  • 主色：暖橙 #F97316 / 米白 #FFFCF5 / 暖灰 #F5F0EB
  • 卡片圆角 + 柔和阴影，家庭相册感
  • 去掉紫色渐变，使用暖橙渐变头部

页面结构

┌─────────────────────────────┐
│  🏠 幸福之家 · 5位成员        │  ← 暖橙渐变头部
├─────────────────────────────┤
│                             │
│  ┌─────┐                    │
│  │ 🧑  │ 爸爸 · 家长        │  ← 卡片式成员条目
│  └─────┘                    │
│  ┌─────┐                    │
│  │ 👩  │ 妈妈 · 家长        │
│  └─────┘                    │
│  ┌─────┐                    │
│  │ 👦  │ 小明 · 孩子        │
│  └─────┘                    │
│                             │
│  [空状态: 邀请家人加入引导]     │
│                             │
├─────────────────────────────┤
│  [＋ 添加成员] [📨 邀请成员]  │  ← 底部固定栏
└─────────────────────────────┘

组件详细设计

1. 页面头部

  • 暖橙渐变背景 linear-gradient(135deg, #F97316, #EA580C)
  • 居中布局：🏠 家庭图标 + 家庭名称 + 成员数
  • 白色文字
  • 圆角底部

2. 成员列表

  • 白底圆角卡片，柔和阴影
  • 每行包含：
    • 左侧：头像 80rpx 圆形
    • 中间：昵称（粗体 30rpx）+ 关系标签（彩色小标签）
    • 右侧：箭头 ›
  • 无三维评分条
  • 无筛选标签
  • 点击 → 成员详情弹窗
  • 卡片间间距 16rpx

3. 空状态

  • 当成员数为 0 时显示
  • 大图标 👨‍👩‍👧‍👦
  • 文案："还没有家庭成员"
  • 副文案："邀请家人加入，一起记录成长"
  • 按钮：「邀请家人」（暖橙填充）

4. 底部固定栏

  • 固定在页面底部，安全区适配
  • 两个按钮并排，间距 20rpx
  • 「＋ 添加成员」：白色背景 + 暖橙边框/文字，flex:1
  • 「📨 邀请成员」：暖橙渐变填充，白色文字，flex:1
  • 添加 → 跳转 /pages/family/add-member
  • 邀请 → 加载 QR 码 → 直接弹出 SharePoster

5. 成员详情弹窗

  • 保留现有功能，视觉改造为暖色风格
  • 顶部：头像 + 昵称 + 关系标签
  • 信息区：性别 · 年龄 · 手机号
  • 操作按钮 2 列网格：切换身份 / 编辑资料 / 关系问卷 / 记录互动 / 移出家庭

6. 邀请流程

简化前：

点击齿轮 → 邀请成员 → 显示邀请码卡片 → 点击分享邀请卡 → 弹出海报

简化后：

点击「邀请成员」→ 加载 QR 码 → 直接弹出海报

移除内容

移除项 原因
紫色渐变头部 改为暖橙家庭风
齿轮设置弹窗 功能合并到底部栏
筛选标签（全部/家长/孩子） 精简需求
行内三维评分条 精简需求
中间邀请码卡片 直接弹出海报

保留内容

保留项 说明
成员详情弹窗 操作入口，保留全部功能
SharePoster 组件 邀请海报，直接触发
添加成员页面 /pages/family/add-member，保持不变
切换身份/编辑资料/移出家庭等操作 在详情弹窗中保留

数据流

页面加载 → listFamilyMembers() → 渲染成员列表
点击成员 → showMemberDetail(m) → 详情弹窗
点击添加 → uni.navigateTo(/pages/family/add-member)
点击邀请 → generateFamilyInviteQrCode() → 获取 qrCodeBase64 → showPoster = true

文件变更清单

文件 变更类型 说明
pages/profile-extra/family-members.vue 重写 模板/样式/脚本全部重新设计
components/SharePoster.vue 无变更 保持现有，直接调用

非功能性要求

  • 遵循小程序限制：禁止可选链 ?.、禁止 CSS Grid、禁止 :key 表达式
  • 使用 Vue 2 Options API
  • 匹配现有品牌色系