cfc/cfc-frontend/pages/profile-extra/family-members.vue

<template>
  <view class="container">
    <!-- ===== 家庭信息头部 ===== -->
    <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">{{ filteredMembers.length }} 位成员</text>
        </view>
      </view>
    </view>

    <!-- ===== 加入申请（我分享的邀请，由我确认） ===== -->
    <view class="join-request-section" v-if="joinRequests.length > 0">
      <view class="jr-header">
        <text class="jr-title">📨 加入申请</text>
        <text class="jr-count">{{ joinRequests.length }} 条待确认</text>
      </view>
      <view class="jr-item" v-for="r in joinRequests" :key="r.id">
        <image class="jr-avatar" :src="r.requesterAvatar || '/static/default-avatar.png'" mode="aspectFill"></image>
        <view class="jr-info">
          <text class="jr-name">{{ r.requesterNickname || '微信用户' }}</text>
          <text class="jr-meta">希望以「{{ r.familyRole || '成员' }}」身份加入</text>
        </view>
        <view class="jr-actions">
          <button class="jr-btn jr-accept" @click="onHandleJoinRequest(r, true)">同意</button>
          <button class="jr-btn jr-reject" @click="onHandleJoinRequest(r, false)">拒绝</button>
        </view>
      </view>
    </view>

    <!-- ===== 成员卡片列表 ===== -->
    <view class="member-list" v-if="filteredMembers.length > 0">
<view class="member-card" v-for="m in filteredMembers" :key="m.id" @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 || m.name || '成员' }}</text>
          <text class="member-role-tag">{{ m.relationship || m.relativeLabel || m.roleLabel || '成员' }}</text>
        </view>
        <text class="member-arrow">›</text>
      </view>
    </view>

    <!-- ===== 空状态 ===== -->
    <view v-if="filteredMembers.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" open-type="share">📨 邀请家人</button>
    </view>

    <!-- ===== 成员详情弹窗 ===== -->
    <view class="modal-mask" v-if="showMemberDetailModal" @click="closeMemberDetail">
      <view class="member-detail-card" @click.stop>
        <view class="detail-header">
          <image class="detail-avatar" :src="detailMember && (detailMember.avatar || '/static/default-avatar.png')" mode="aspectFill"></image>
          <view class="detail-info">
            <text class="detail-name">{{ detailMember && (detailMember.nickname || detailMember.name || '成员') || '' }}</text>
            <text class="detail-relation">{{ detailMember && (detailMember.relationship || detailMember.relativeLabel || detailMember.roleLabel || '成员') }}</text>
          </view>
          <text class="detail-close" @click="closeMemberDetail">×</text>
        </view>

        <!-- 详情:性别/年龄/手机号/角色/辈分/积分/来源 -->
        <view class="detail-meta">
          <text class="detail-meta-item" v-if="detailMember && detailMember.gender">性别: {{ detailMember.gender === 'male' ? '男' : '女' }}</text>
          <text class="detail-meta-item" v-if="detailMember && detailMember.age">{{ detailMember.age }}岁</text>
          <text class="detail-meta-item" v-if="detailMember && detailMember.phone">{{ detailMember.phone }}</text>
          <text class="detail-meta-item" v-if="detailMember && detailMember.roleLabel">角色: {{ detailMember.roleLabel }}</text>
          <text class="detail-meta-item" v-if="detailMember && detailMember.generation !== null && detailMember.generation !== undefined && generationLabel(detailMember.generation)">辈分: {{ generationLabel(detailMember.generation) }}</text>
          <text class="detail-meta-item" v-if="detailMember && detailMember.totalPoints !== null && detailMember.totalPoints !== undefined">积分: {{ detailMember.totalPoints }}</text>
          <text class="detail-meta-item" v-if="detailMember && detailMember.source">类型: {{ detailMember.source === 'parent' ? '家长账号' : '家庭成员' }}</text>
        </view>

        <!-- 三维评分展示 -->
        <view class="detail-scores">
          <text class="detail-section-title">关系质量</text>
          <view class="detail-score-item">
            <text class="detail-score-label">信任</text>
            <view class="detail-score-bar-bg">
              <view class="detail-score-bar-fill trust" :style="{width: (detailMemberScores.trustScore || 0) + '%'}"></view>
            </view>
            <text class="detail-score-value">{{ Math.round(detailMemberScores.trustScore || 0) }}</text>
          </view>
          <view class="detail-score-item">
            <text class="detail-score-label">亲密</text>
            <view class="detail-score-bar-bg">
              <view class="detail-score-bar-fill intimacy" :style="{width: (detailMemberScores.intimacyScore || 0) + '%'}"></view>
            </view>
            <text class="detail-score-value">{{ Math.round(detailMemberScores.intimacyScore || 0) }}</text>
          </view>
          <view class="detail-score-item">
            <text class="detail-score-label">沟通</text>
            <view class="detail-score-bar-bg">
              <view class="detail-score-bar-fill communication" :style="{width: (detailMemberScores.communicationScore || 0) + '%'}"></view>
            </view>
            <text class="detail-score-value">{{ Math.round(detailMemberScores.communicationScore || 0) }}</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="detail-actions">
          <button class="detail-action-btn action-switch" @click="onSwitchMember(detailMember)" v-if="detailMember && detailMember.isSwitchable">切换身份</button>
          <button class="detail-action-btn action-edit" @click="onEditRelation(detailMember)" v-if="canEditMember(detailMember)">编辑资料</button>
          <button class="detail-action-btn action-questionnaire" @click="doQuestionnaire(detailMember)">关系问卷</button>
          <button class="detail-action-btn action-interaction" @click="recordInteraction(detailMember)">记录互动</button>
          <button class="detail-action-btn action-kick" @click="confirmKick(detailMember)" v-if="isAdmin && detailMember && !detailMember.isSelf">删除成员</button>
        </view>
      </view>
    </view>

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

    <!-- ===== 加载状态 ===== -->
    <view v-if="loading" class="loading-wrap">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- ===== 分享卡片画布（离屏，仅用于生成分享缩略图） ===== -->
    <canvas canvas-id="familyShareCard" id="familyShareCard" class="share-card-canvas"></canvas>
  </view>
</template>

<script>
import {
  getFamilyMemberList,
  switchToFamilyMember,
  kickFamilyMemberById,
  generateFamilyInvite,
  updateFamilyMember,
  getPendingJoinRequests,
  approveJoinRequest,
  rejectJoinRequest
} from '../../utils/api.js'
import store from '../../store/index.js'

export default {
  components: {},
  data() {
    return {
      userId: 0,
      familyId: 0,
      familyName: '',

      creatorId: null,
      members: [],
      isAdmin: false,
      loading: false,

      showMemberDetailModal: false,
      detailMember: null,
      memberScores: {},
      userNickname: '',
      userAvatar: '',

      inviteToken: '',
      joinRequests: [],
      shareCardImage: ''
    }
  },
  computed: {
    // 列表过滤掉"我"（当前登录用户对应的成员），避免自己和自己互动
    filteredMembers() {
// 过滤掉自己，只展示其他家庭成员
      var self = this
      return (this.members || []).filter(function(m) {
        var isSelf = m.isSelf === true
        if (!isSelf && m.userId && m.userId === self.userId) {
          isSelf = true
        }
        return !isSelf
      })
    },
    detailMemberScores() {
      if (!this.detailMember) return {}
      return this.memberScores[this.detailMember.id] || {}
    }
  },
  onShow() {
    var userInfo = uni.getStorageSync('userInfo')
    this.userId = (userInfo && userInfo.id) || 0
    this.userNickname = uni.getStorageSync('nickname') || (userInfo && userInfo.nickname) || ''
    this.userAvatar = uni.getStorageSync('avatar') || (userInfo && userInfo.avatar) || ''
    // 家庭在用户注册时已由后端创建（登录接口另有兜底），此处不再触发建家庭逻辑；
    // 数据加载统一入口：单次 includeFamily 请求同时获取成员列表 + 家庭信息
    this.loadMembers()
    // 预取邀请令牌（后端复用同家庭未用尽的有效令牌），保证点击分享时立即可用
    this.prepareInviteToken()
    // 拉取待我确认的加入申请（后端按邀请人过滤，无需管理员身份）
    this.loadJoinRequests()
  },
  // 页面级分享：转发邀请卡片，接收人点击直接进入加入家庭页（信息补充、家庭申请）
  onShareAppMessage: function() {
    var self = this
    var title = '邀请你加入「' + (this.familyName || '我的家庭') + '」'
    var buildResult = function(token, imageUrl) {
      return {
        title: title,
        path: '/pages/invite/join?token=' + (token || ''),
        imageUrl: imageUrl || self.shareCardImage || ''
      }
    }
    if (this.inviteToken && this.shareCardImage) {
      return buildResult(this.inviteToken, this.shareCardImage)
    }
    // 令牌/卡片未就绪时异步获取
    return {
      title: title,
      path: '/pages/index/index',
      promise: new Promise(function(resolve) {
        function done(token, image) {
          resolve(buildResult(token || '', image || ''))
        }
        // 并行：令牌 + 分享卡片
        var tokenDone = false
        var cardDone = false
        var tryResolve = function() {
          if (!tokenDone || !cardDone) return
          if (!self.inviteToken) { done('', self.shareCardImage) }
          else { done(self.inviteToken, self.shareCardImage) }
        }
        self.prepareInviteToken(function(token) {
          tokenDone = true
          tryResolve()
        })
        self.drawShareCard(function(image) {
          cardDone = true
          self.shareCardImage = image
          tryResolve()
        })
      })
    }
  },
  onShareTimeline: function() {
    var self = this
    var title = '邀请你加入「' + (this.familyName || '我的家庭') + '」'
    var buildResult = function(token, imageUrl) {
      return {
        title: title,
        query: 'token=' + (token || ''),
        imageUrl: imageUrl || self.shareCardImage || ''
      }
    }
    if (this.inviteToken && this.shareCardImage) {
      return buildResult(this.inviteToken, this.shareCardImage)
    }
    return {
      title: title,
      query: '',
      imageUrl: '',
      promise: new Promise(function(resolve) {
        var tokenDone = false
        var cardDone = false
        var tryResolve = function() {
          if (!tokenDone || !cardDone) return
          var token = self.inviteToken || ''
          var image = self.shareCardImage || ''
          resolve(buildResult(token, image))
        }
        self.prepareInviteToken(function() { tokenDone = true; tryResolve() })
        self.drawShareCard(function(image) {
          cardDone = true
          self.shareCardImage = image
          tryResolve()
        })
      })
    }
  },
  methods: {
    async loadMembers() {
      this.loading = true
      try {
        var res = await getFamilyMemberList({ includeFamily: true })
        if (res.code === 200 && res.data) {
          var data = res.data
          this.familyId = data.familyId
          this.familyName = data.familyName
          this.creatorId = data.creatorId
          this.isAdmin = this.creatorId === this.userId
          var arr = data.members
          if (!(arr instanceof Array)) {
            // 后端旧版本未返回 members 字段时的兼容：补一次无参请求
            var legacy = await getFamilyMemberList()
            arr = (legacy && legacy.code === 200 && legacy.data instanceof Array) ? legacy.data : []
          }
          this.members = arr || []
          this.buildScoreMap(this.members)
        }
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    buildScoreMap(members) {
      var map = {}
      if (members && members.length) {
        for (var i = 0; i < members.length; i++) {
          var m = members[i]
          map[m.id] = {
            trustScore: m.trustScore || 0,
            intimacyScore: m.intimacyScore || 0,
            communicationScore: m.communicationScore || 0
          }
        }
      }
      this.memberScores = map
    },
    showMemberDetail(member) {
      this.detailMember = member
      this.showMemberDetailModal = true
    },
    canEditMember(member) {
      if (!this.isAdmin) return false
      // 家长账号（users 表成员）与手写家庭成员均可编辑资料（后端 updateMember/updateParentMember 分别处理）
      return member.source === 'family_member' || member.source === 'parent'
    },
    onAddMember() {
      uni.navigateTo({ url: '/pages/family/add-member' })
    },
    async onSwitchMember(member) {
      this.showMemberDetailModal = false
      try {
        var res = await switchToFamilyMember(member.id, member.source)
        if (res.code === 200 && res.data) {
          store.commit('switchToMember', {
            memberId: res.data.memberId,
            effectiveRole: res.data.effectiveRole
          })
          uni.showToast({ title: '已切换到' + (member.nickname || '该成员'), icon: 'success' })
          setTimeout(function() {
            uni.reLaunch({ url: '/pages/index-home/index' })
          }, 1000)
        } else {
          uni.showToast({ title: res.message || '切换失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '切换失败', icon: 'none' })
      }
    },
    confirmKick(member) {
      var self = this
      uni.showModal({
        title: '删除成员',
        content: '确定要删除 ' + (member.nickname || '该成员') + ' 吗？删除后成员将回到自己的家庭。',
        success: function(res) {
          if (res.confirm) {
            self.onKickMember(member)
          }
        }
      })
    },
    async onKickMember(member) {
      this.showMemberDetailModal = false
      try {
        var res = await kickFamilyMemberById(member.id)
        if (res.code === 200) {
          uni.showToast({ title: '已移除', icon: 'success' })
          this.loadMembers()
        } else {
          uni.showToast({ title: res.message || '操作失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '操作失败', icon: 'none' })
      }
    },
    // 生成/复用邀请令牌（小程序原生分享卡片路径使用），完成后回调 callback(token)
    prepareInviteToken(callback) {
      var self = this
      var done = function(token) {
        if (typeof callback === 'function') {
          callback(token)
        }
      }
      if (this.inviteToken) {
        done(this.inviteToken)
        return
      }
      generateFamilyInvite().then(function(res) {
        if (res && res.code === 200 && res.data && res.data.token) {
          self.inviteToken = res.data.token
          done(self.inviteToken)
        } else {
          uni.showToast({ title: (res && res.message) || '生成邀请失败', icon: 'none' })
          done('')
        }
      }).catch(function() {
        uni.showToast({ title: '生成邀请失败', icon: 'none' })
        done('')
      })
    },
    // 生成家庭邀请分享卡片图片（5:4 比例，500x400px），返回 tempFilePath
    drawShareCard: function(callback) {
      var self = this
      var W = 500
      var H = 400
      var canvasId = 'familyShareCard'
      var members = self.members || []
      var roundRect = function(ctx, x, y, w, h, r) {
        ctx.beginPath()
        ctx.moveTo(x + r, y)
        ctx.arcTo(x + w, y, x + w, y + r, r)
        ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
        ctx.arcTo(x, y + h, x, y + h - r, r)
        ctx.arcTo(x, y, x + r, y, r)
        ctx.closePath()
      }
      var ctx = uni.createCanvasContext(canvasId, self)
      // 暖橙渐变背景
      var bgGrad = ctx.createLinearGradient(0, 0, W * 0.6, H)
      bgGrad.addColorStop(0, '#FF8C42')
      bgGrad.addColorStop(1, '#FFB366')
      ctx.setFillStyle(bgGrad)
      ctx.fillRect(0, 0, W, H)
      // 白色内容卡片
      var cx = 30, cy = 70, cw = W - 60, ch = 250, cr = 20
      ctx.setFillStyle('rgba(0,0,0,0.04)')
      roundRect(ctx, cx + 2, cy + 4, cw, ch, cr)
      ctx.fill()
      ctx.setFillStyle('#FFFCF5')
      roundRect(ctx, cx, cy, cw, ch, cr)
      ctx.fill()
      // 四角装饰框
      var bl = 14, br = 10
      ctx.setStrokeStyle('rgba(249,115,22,0.5)')
      ctx.setLineWidth(1.5)
      ctx.beginPath(); ctx.moveTo(cx+br, cy+br+bl); ctx.lineTo(cx+br, cy+br); ctx.lineTo(cx+br+bl, cy+br); ctx.stroke()
      ctx.beginPath(); ctx.moveTo(cx+cw-br-bl, cy+br); ctx.lineTo(cx+cw-br, cy+br); ctx.lineTo(cx+cw-br, cy+br+bl); ctx.stroke()
      ctx.beginPath(); ctx.moveTo(cx+br, cy+ch-br-bl); ctx.lineTo(cx+br, cy+ch-br); ctx.lineTo(cx+br+bl, cy+ch-br); ctx.stroke()
      ctx.beginPath(); ctx.moveTo(cx+cw-br-bl, cy+ch-br); ctx.lineTo(cx+cw-br, cy+ch-br); ctx.lineTo(cx+cw-br, cy+ch-br-bl); ctx.stroke()
      // 主文案
      var title = '邀请你加入「' + (self.familyName || '我的家庭') + '」'
      ctx.setFillStyle('#C2410C')
      ctx.setFontSize(26)
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText(title, W / 2, cy + 36)
      // 成员头像（最多3个，首字母占位）
      var avatarY = cy + 115
      var avatarR = 30
      var avatarGap = 20
      var avatars = []
      var initials = []
      for (var i = 0; i < Math.min(3, members.length); i++) {
        avatars.push(members[i].avatar || '')
        var name = members[i].nickname || ''
        initials.push(name.substring(0, 1) || '?')
      }
      var totalW = avatars.length * (avatarR * 2) + Math.max(0, avatars.length - 1) * avatarGap
      var startX = (W - totalW) / 2
      for (var a = 0; a < avatars.length; a++) {
        var ax = startX + a * (avatarR * 2 + avatarGap) + avatarR
        ctx.save()
        ctx.beginPath()
        ctx.arc(ax, avatarY, avatarR, 0, 2 * Math.PI)
        ctx.setFillStyle('#FFF0E0')
        ctx.fill()
        ctx.restore()
        ctx.save()
        ctx.beginPath()
        ctx.arc(ax, avatarY, avatarR, 0, 2 * Math.PI)
        ctx.clip()
        ctx.setFillStyle('#FF8C42')
        ctx.setFontSize(28)
        ctx.setTextAlign('center')
        ctx.setTextBaseline('middle')
        ctx.fillText(initials[a] || '?', ax, avatarY)
        ctx.restore()
      }
      // 成员数量
      ctx.setFillStyle('#999999')
      ctx.setFontSize(16)
      ctx.setTextAlign('center')
      ctx.fillText(members.length + ' 位家庭成员', W / 2, avatarY + avatarR + 18)
      // CTA 按钮
      var btnW = 200, btnH = 52
      var btnX = (W - btnW) / 2
      var btnY = cy + ch - 70
      var btnGrad = ctx.createLinearGradient(btnX, btnY, btnX + btnW, btnY)
      btnGrad.addColorStop(0, '#FF8C42')
      btnGrad.addColorStop(1, '#FFB366')
      ctx.setFillStyle(btnGrad)
      roundRect(ctx, btnX, btnY, btnW, btnH, 26)
      ctx.fill()
      ctx.setFillStyle('#FFFFFF')
      ctx.setFontSize(20)
      ctx.setTextAlign('center')
      ctx.setTextBaseline('middle')
      ctx.fillText('点击加入', W / 2, btnY + btnH / 2)
      // 底部品牌
      ctx.setFillStyle('rgba(255,255,255,0.85)')
      ctx.setFontSize(13)
      ctx.fillText('浠艾福 · 家庭成长俱乐部', W / 2, H - 30)
      // 五维点装饰
      var dotColors = ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D']
      var dotY = H - 16
      for (var d = 0; d < dotColors.length; d++) {
        ctx.setFillStyle(dotColors[d])
        ctx.beginPath()
        ctx.arc(W / 2 + (d - 2) * 16, dotY, 3, 0, 2 * Math.PI)
        ctx.fill()
      }
      ctx.draw(false, function() {
        uni.canvasToTempFilePath({
          canvasId: canvasId,
          success: function(res) {
            self.shareCardImage = res.tempFilePath
            if (typeof callback === 'function') callback(res.tempFilePath)
          },
          fail: function() {
            if (typeof callback === 'function') callback('')
          }
        }, self)
      })
    },
    // 根据辈分值生成辈分等级字符串（与 utils/generationLevel.js 对应）
    generationToLevel(gen) {
      var map = { 3: 'great_grandparent', 2: 'grandparent', 1: 'parent', 0: 'peer', '-1': 'child', '-2': 'grandchild', '-3': 'great_grandchild' }
      return map[gen] || ''
    },
    // 辈分数值 → 中文标签（弹窗展示用，与 utils/generationLevel.js GENERATION_LEVELS 对应）
    generationLabel(gen) {
      var map = { 3: '曾祖辈', 2: '祖辈', 1: '父辈', 0: '同辈', '-1': '子辈', '-2': '孙辈', '-3': '曾孙辈' }
      return map[gen] || ''
    },
    onEditRelation(member) {
      this.showMemberDetailModal = false
      var params = 'memberId=' + member.id + '&nickname=' + encodeURIComponent(member.nickname || '')
      if (member.gender) params += '&gender=' + member.gender
      if (member.phone) params += '&phone=' + member.phone
      if (member.birthday) params += '&birthday=' + member.birthday
      // 传递辈分关系，编辑页可回显并修改
      if (member.generation !== null && member.generation !== undefined) {
        params += '&generationLevel=' + this.generationToLevel(member.generation)
      }
      if (member.isSpouse) params += '&peerType=spouse'
      uni.navigateTo({ url: '/pages/family/add-member?' + params })
    },
    doQuestionnaire(member) {
      this.showMemberDetailModal = false
      uni.navigateTo({ url: '/pages/action-detail/relationship-questionnaire?memberId=' + member.id })
    },
    recordInteraction(member) {
      this.showMemberDetailModal = false
      uni.navigateTo({ url: '/pages/action-detail/interaction-log?memberId=' + member.id })
    },
    closeMemberDetail() {
      this.showMemberDetailModal = false
    },
    async loadJoinRequests() {
      try {
        var res = await getPendingJoinRequests()
        if (res && res.code === 200 && res.data instanceof Array) {
          this.joinRequests = res.data
        } else {
          this.joinRequests = []
        }
      } catch (e) {
        this.joinRequests = []
      }
    },
    onHandleJoinRequest(r, approve) {
      var self = this
      if (!r) {
        return
      }
      var nickname = r.requesterNickname || '该用户'
      uni.showModal({
        title: approve ? '同意加入' : '拒绝申请',
        content: approve ? ('确定同意 ' + nickname + ' 加入家庭吗？') : ('确定拒绝 ' + nickname + ' 的加入申请吗？'),
        success: function(mr) {
          if (mr.confirm) {
            self.doHandleJoinRequest(r, approve)
          }
        }
      })
    },
    async doHandleJoinRequest(r, approve) {
      var self = this
      try {
        var action = approve ? approveJoinRequest : rejectJoinRequest
        var res = await action(r.id, '')
        if (res && res.code === 200) {
          uni.showToast({ title: approve ? '已同意加入' : '已拒绝', icon: 'success' })
          self.loadJoinRequests()
          if (approve) {
            self.loadMembers()
          }
        } else {
          uni.showToast({ title: (res && res.message) || '操作失败', icon: 'none' })
          self.loadJoinRequests()
        }
      } catch (e) {
        uni.showToast({ title: e.message || '操作失败', icon: 'none' })
      }
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx 30rpx 140rpx;
  min-height: 100vh;
  background: #F5F0EB;
}

/* ===== 家庭信息头部 ===== */
.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;
}

/* ===== 成员卡片 ===== */
.member-list {
  padding-bottom: 20rpx;
}
.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;
}

/* ===== 加入申请区块 ===== */
.join-request-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.jr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.jr-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}
.jr-count {
  font-size: 24rpx;
  color: #EA580C;
}
.jr-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-top: 1rpx solid #F0EAE2;
}
.jr-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #f0f0f0;
  flex-shrink: 0;
  margin-right: 18rpx;
}
.jr-info {
  flex: 1;
  min-width: 0;
}
.jr-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  display: block;
}
.jr-meta {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
  display: block;
}
.jr-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.jr-btn {
  font-size: 24rpx;
  padding: 10rpx 24rpx;
  border-radius: 999rpx;
  line-height: 1.4;
  border: none;
  margin-left: 12rpx;
}
.jr-accept {
  background: #F97316;
  color: #fff;
}
.jr-reject {
  background: #FFF1E8;
  color: #C2410C;
}
.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;
}

/* ===== 空状态 ===== */
.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;
  line-height: 1.4;
}
.empty-invite-btn:active {
  opacity: 0.85;
}

/* ===== 底部操作栏 ===== */
.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;
}
/* 微信小程序 button 默认边框来自 ::after 伪元素，分享按钮同样需要重置 */
.empty-invite-btn::after,
.bottom-btn::after {
  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;
  }
  /* 分享卡片画布：离屏不可见 */
  .share-card-canvas {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 500px;
    height: 400px;
  }
  /* ===== 弹窗遮罩 ===== */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* ===== 成员详情弹窗 ===== */
.member-detail-card {
  background: #fff;
  border-radius: 24rpx;
  width: 600rpx;
  max-height: 80vh;
  overflow-y: auto;
  padding: 36rpx 32rpx 32rpx;
}
.detail-header {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 20rpx;
}
.detail-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background: #f0f0f0;
  flex-shrink: 0;
}
.detail-info {
  flex: 1;
}
.detail-name {
  font-size: 34rpx;
  font-weight: bold;
  display: block;
}
.detail-relation {
  font-size: 26rpx;
  color: #F97316;
  margin-top: 4rpx;
  display: block;
}
.detail-close {
  font-size: 44rpx;
  color: #999;
  padding: 4rpx 8rpx;
  position: absolute;
  top: -12rpx;
  right: -8rpx;
}
.detail-meta {
  display: flex;
  gap: 16rpx;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.detail-meta-item {
  font-size: 24rpx;
  color: #888;
}

/* 详情三维评分 */
.detail-scores {
  margin-bottom: 24rpx;
}
.detail-section-title {
  font-size: 28rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 12rpx;
  padding-left: 12rpx;
  border-left: 4rpx solid #F97316;
}
.detail-score-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 8rpx;
}
.detail-score-label {
  width: 56rpx;
  font-size: 22rpx;
  color: #888;
}
.detail-score-bar-bg {
  flex: 1;
  height: 12rpx;
  background: #f0f0f0;
  border-radius: 6rpx;
  overflow: hidden;
}
.detail-score-bar-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.3s ease;
}
.detail-score-bar-fill.trust { background: #10B981; }
.detail-score-bar-fill.intimacy { background: #FF6B9D; }
.detail-score-bar-fill.communication { background: #6366F1; }
.detail-score-value {
  width: 44rpx;
  font-size: 22rpx;
  font-weight: 600;
  color: #555;
  text-align: right;
}

/* ===== 操作按钮区（2列flex网格） ===== */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding-top: 8rpx;
  border-top: 1rpx solid #f0f0f0;
}
.detail-action-btn {
  width: calc(50% - 8rpx);
  border: none;
  border-radius: 12rpx;
  padding: 20rpx 0;
  font-size: 26rpx;
  text-align: center;
  line-height: 1.4;
}
.detail-action-btn:active {
  opacity: 0.8;
}
.action-switch {
  background: #f0f9ff;
  color: #0EA5E9;
}
.action-edit {
  background: #f0f9eb;
  color: #67c23a;
}
.action-questionnaire {
  background: #f3e8ff;
  color: #8b5cf6;
}
.action-interaction {
  background: #fff7ed;
  color: #F97316;
}
.action-kick {
  background: #fef0f0;
  color: #f56c6c;
}

/* ===== 加载 ===== */
.loading-wrap {
  text-align: center;
  padding: 60rpx 0;
}
.loading-text {
  font-size: 28rpx;
  color: #999;
}
.empty-tip {
  text-align: center;
  padding: 60rpx 0;
  font-size: 28rpx;
  color: #999;
}
</style>