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

<template>
  <view class="container">
    <!-- ===== 家庭信息头部 (带齿轮入口) ===== -->
    <view class="family-header">
      <view class="family-header-content">
        <view class="family-header-icon">🏠</view>
        <view class="family-header-text">
          <text class="family-name">{{ familyName || '我的家庭' }}</text>
          <text class="family-member-count">{{ members.length }} 位成员</text>
        </view>
        <view class="header-settings-btn" @click="showSettings = true">
          <text class="settings-gear-icon">⚙️</text>
        </view>
      </view>
    </view>

    <!-- ===== 关系标签筛选项 ===== -->
    <view class="filter-tabs">
      <view class="filter-tab" :class="{active: filterType === 'all'}" @click="filterType = 'all'">全部</view>
      <view class="filter-tab" :class="{active: filterType === 'parent'}" @click="filterType = 'parent'">家长</view>
      <view class="filter-tab" :class="{active: filterType === 'child'}" @click="filterType = 'child'">孩子</view>
    </view>

    <!-- ===== 成员列表（点击行→详情弹窗） ===== -->
    <view class="member-list">
      <view class="member-item" 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-detail">
          <text class="member-name">{{ m.nickname || '未设置' }}</text>
          <view class="member-tags">
            <text class="member-role-tag">{{ m.relativeLabel || m.roleLabel || (m.effectiveRole === 'parent' ? '家长' : '孩子') }}</text>
            <text class="member-source-tag" v-if="m.source === 'family_member'">手动添加</text>
            <text class="member-extra" v-if="m.age"> {{ m.age }}岁</text>
            <text class="member-extra" v-if="m.gender"> · {{ m.gender === 'male' ? '男' : '女' }}</text>
          </view>
          <!-- 三维评分进度条 -->
          <view class="member-quality-scores" v-if="memberScores[m.id]">
            <view class="score-item">
              <text class="score-label">信任</text>
              <view class="score-bar-bg">
                <view class="score-bar-fill trust" :style="{width: (memberScores[m.id].trustScore || 0) + '%'}"></view>
              </view>
              <text class="score-value">{{ Math.round(memberScores[m.id].trustScore || 0) }}</text>
            </view>
            <view class="score-item">
              <text class="score-label">亲密</text>
              <view class="score-bar-bg">
                <view class="score-bar-fill intimacy" :style="{width: (memberScores[m.id].intimacyScore || 0) + '%'}"></view>
              </view>
              <text class="score-value">{{ Math.round(memberScores[m.id].intimacyScore || 0) }}</text>
            </view>
            <view class="score-item">
              <text class="score-label">沟通</text>
              <view class="score-bar-bg">
                <view class="score-bar-fill communication" :style="{width: (memberScores[m.id].communicationScore || 0) + '%'}"></view>
              </view>
              <text class="score-value">{{ Math.round(memberScores[m.id].communicationScore || 0) }}</text>
            </view>
          </view>
        </view>
        <text class="member-arrow">›</text>
      </view>
      <!-- 空状态：还没有家庭成员 -->
      <view v-if="members.length === 0" class="empty-state-card">
        <text class="empty-icon">👨‍👩‍👧‍👦</text>
        <text class="empty-title">还没有家庭成员</text>
        <view class="empty-actions">
          <view class="empty-action-btn add-btn" @click="onAddMember">＋ 添加</view>
          <view class="empty-action-btn invite-btn" @click="onInvite">📨 邀请</view>
        </view>
      </view>
      <view v-else-if="filteredMembers.length === 0" class="empty-row">
        <text class="empty-text">暂无{{ filterType === 'parent' ? '家长' : '孩子' }}成员</text>
      </view>
    </view>

    <!-- ===== Settings 弹窗（齿轮入口） ===== -->
    <view class="modal-mask" v-if="showSettings" @click="showSettings = false">
      <view class="settings-card" @click.stop>
        <view class="settings-header">
          <text class="settings-title">成员管理</text>
          <text class="settings-close" @click="showSettings = false">×</text>
        </view>
        <view class="settings-body">
          <view class="settings-item" @click="onAddMember">
            <text class="settings-item-icon">＋</text>
            <text class="settings-item-text">添加成员</text>
          </view>
          <view class="settings-item" @click="onInvite">
            <text class="settings-item-icon">📨</text>
            <text class="settings-item-text">邀请成员</text>
          </view>
        </view>
      </view>
    </view>

    <!-- ===== 邀请卡片弹窗 ===== -->
    <view class="modal-mask" v-if="showInviteCard" @click="showInviteCard = false">
      <view class="invite-card" @click.stop>
        <text class="invite-card-title">邀请家庭成员</text>
        <text class="invite-card-family">{{ familyName }}</text>
        <view class="invite-qr-wrap" v-if="inviteQrCode">
          <image class="invite-qr" :src="inviteQrCode" mode="widthFix" />
        </view>
        <view class="invite-qr-wrap loading-qr" v-else>
          <text class="loading-text">生成二维码中...</text>
        </view>
        <view class="invite-code-section">
          <text class="invite-code-label">邀请码</text>
          <view class="invite-code-row">
            <text class="invite-code">{{ inviteCode }}</text>
            <button class="copy-btn" @click="onCopyCode">复制</button>
          </view>
        </view>
        <text class="invite-tip">让好友在「我的」页面输入邀请码加入家庭</text>
        <button class="close-btn" @click="showInviteCard = false">关闭</button>
      </view>
    </view>

    <!-- ===== 成员详情弹窗 ===== -->
    <view class="modal-mask" v-if="showMemberDetailModal" @click="showMemberDetailModal = false">
      <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 || '' }}</text>
            <text class="detail-relation">{{ detailMember && (detailMember.relativeLabel || detailMember.roleLabel || '') }}</text>
          </view>
          <text class="detail-close" @click="showMemberDetailModal = false">×</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>
        </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.source === 'parent' && detailMember.userId === userId)">切换身份</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.source === 'family_member'">移出家庭</button>
        </view>
      </view>
    </view>

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

<script>
import {
  listFamilyMembers,
  switchToFamilyMember,
  kickFamilyMemberById,
  generateFamilyInviteQrCode,
  getFamilyMembers,
  updateFamilyMember
} from '../../utils/api.js'
import store from '../../store/index.js'

export default {
  data() {
    return {
      userId: 0,
      familyId: 0,
      familyName: '',
      inviteCode: '',
      inviteQrCode: '',
      creatorId: null,
      members: [],
      isAdmin: false,
      loading: false,
      filterType: 'all',
      showSettings: false,
      showInviteCard: false,
      showMemberDetailModal: false,
      detailMember: null,
      memberScores: {}
    }
  },
  computed: {
    filteredMembers() {
      var self = this
      if (this.filterType === 'all') return this.members
      return this.members.filter(function(m) {
        return m.effectiveRole === self.filterType
      })
    },
    detailMemberScores() {
      if (!this.detailMember) return {}
      return this.memberScores[this.detailMember.id] || {}
    }
  },
  onShow() {
    var userInfo = uni.getStorageSync('userInfo')
    this.userId = (userInfo && userInfo.id) || 0
    this.loadMembers()
  },
  methods: {
    async loadMembers() {
      this.loading = true
      try {
        var res = await listFamilyMembers()
        if (res.code === 200 && res.data) {
          this.members = res.data || []
          this.buildScoreMap(res.data)
          this.loadFamilyInfo()
        }
      } 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
    },
    async loadFamilyInfo() {
      try {
        var res = await getFamilyMembers()
        if (res.code === 200 && res.data) {
          var data = res.data
          this.familyId = data.familyId
          this.familyName = data.familyName
          this.inviteCode = data.inviteCode || ''
          this.creatorId = data.creatorId
          this.isAdmin = this.creatorId === this.userId
        }
      } catch (e) {
        // 静默处理
      }
    },
    showMemberDetail(member) {
      this.detailMember = member
      this.showMemberDetailModal = true
    },
    canEditMember(member) {
      // 可编辑规则：非登录用户（无userId关联）
      if (member.userId) return false
      return member.source === 'family_member'
    },
    onAddMember() {
      this.showSettings = false
      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/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' })
      }
    },
    async onInvite() {
      this.showSettings = false
      this.showInviteCard = true
      this.inviteQrCode = ''
      try {
        var res = await generateFamilyInviteQrCode()
        if (res.code === 200 && res.data) {
          this.inviteCode = res.data.inviteCode
          this.inviteQrCode = res.data.qrCodeBase64
        } else {
          uni.showToast({ title: res.message || '生成失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '生成失败', icon: 'none' })
      }
    },
    onCopyCode() {
      uni.setClipboardData({
        data: this.inviteCode,
        success: function() {
          uni.showToast({ title: '已复制邀请码', icon: 'success' })
        }
      })
    },
    onEditRelation(member) {
      this.showMemberDetailModal = false
      uni.navigateTo({ url: '/pages/profile/user-edit?memberId=' + member.id + '&nickname=' + encodeURIComponent(member.nickname || '') })
    },
    doQuestionnaire(member) {
      this.showMemberDetailModal = false
      uni.navigateTo({ url: '/pages/action/relationship-questionnaire?memberId=' + member.id })
    },
    recordInteraction(member) {
      this.showMemberDetailModal = false
      uni.navigateTo({ url: '/pages/action/interaction-log?memberId=' + member.id })
    }
  }
}
</script>

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

/* ===== 家庭信息头部（带齿轮入口） ===== */
.family-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  padding: 30rpx 30rpx;
  margin-bottom: 20rpx;
  color: #fff;
}
.family-header-content {
  display: flex;
  align-items: center;
}
.family-header-icon {
  font-size: 48rpx;
  margin-right: 16rpx;
}
.family-header-text {
  flex: 1;
}
.family-name {
  font-size: 34rpx;
  font-weight: bold;
  display: block;
}
.family-member-count {
  font-size: 24rpx;
  opacity: 0.85;
  margin-top: 4rpx;
  display: block;
}
.header-settings-btn {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.header-settings-btn:active {
  background: rgba(255,255,255,0.35);
}
.settings-gear-icon {
  font-size: 36rpx;
}

/* ===== 筛选标签 ===== */
.filter-tabs {
  display: flex;
  gap: 12rpx;
  margin-bottom: 20rpx;
}
.filter-tab {
  padding: 8rpx 28rpx;
  background: #fff;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.filter-tab.active {
  background: #667eea;
  color: #fff;
  font-weight: 500;
}
.filter-tab:active {
  opacity: 0.8;
}

/* ===== 成员列表 ===== */
.member-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.member-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.member-item:last-child {
  border-bottom: none;
}
.member-item:active {
  background: #f8f8ff;
}
.member-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background: #f0f0f0;
  flex-shrink: 0;
}
.member-detail {
  flex: 1;
  min-width: 0;
}
.member-name {
  font-size: 30rpx;
  font-weight: 500;
  display: block;
}
.member-tags {
  display: flex;
  align-items: center;
  margin-top: 6rpx;
  gap: 8rpx;
  flex-wrap: wrap;
}
.member-role-tag {
  font-size: 22rpx;
  color: #667eea;
  background: #eef0ff;
  padding: 2rpx 12rpx;
  border-radius: 6rpx;
}
.member-source-tag {
  font-size: 22rpx;
  color: #F97316;
  background: #fff7ed;
  padding: 2rpx 12rpx;
  border-radius: 6rpx;
}
.member-extra {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
  display: inline;
}
.member-arrow {
  font-size: 36rpx;
  color: #ccc;
  margin-left: 12rpx;
  flex-shrink: 0;
}
.empty-row {
  padding: 40rpx 0;
  text-align: center;
}
.empty-text {
  font-size: 26rpx;
  color: #bbb;
}

/* ===== 空状态卡片（无家庭成员时显示） ===== */
.empty-state-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 60rpx 30rpx 40rpx;
  text-align: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.empty-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 16rpx;
}
.empty-title {
  font-size: 30rpx;
  color: #666;
  display: block;
  margin-bottom: 32rpx;
}
.empty-actions {
  display: flex;
  justify-content: center;
  gap: 20rpx;
}
.empty-action-btn {
  padding: 16rpx 40rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
}
.empty-action-btn:active {
  opacity: 0.8;
}
.add-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}
.invite-btn {
  background: #f0f9ff;
  color: #667eea;
}

/* ===== 三维评分进度条（列表行内） ===== */
.member-quality-scores {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  padding: 8rpx 0;
}
.score-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.score-label {
  width: 56rpx;
  font-size: 20rpx;
  color: #999;
}
.score-bar-bg {
  flex: 1;
  height: 10rpx;
  background: #f0f0f0;
  border-radius: 5rpx;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  border-radius: 5rpx;
}
.score-bar-fill.trust { background: #10B981; }
.score-bar-fill.intimacy { background: #FF6B9D; }
.score-bar-fill.communication { background: #6366F1; }
.score-value {
  width: 44rpx;
  font-size: 18rpx;
  color: #999;
  text-align: right;
}

/* ===== 弹窗遮罩 ===== */
.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;
}

/* ===== Settings 弹窗 ===== */
.settings-card {
  background: #fff;
  border-radius: 24rpx;
  width: 500rpx;
  overflow: hidden;
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 30rpx 0;
}
.settings-title {
  font-size: 32rpx;
  font-weight: bold;
}
.settings-close {
  font-size: 44rpx;
  color: #999;
  padding: 4rpx 8rpx;
}
.settings-body {
  padding: 20rpx 30rpx 30rpx;
}
.settings-item {
  display: flex;
  align-items: center;
  padding: 22rpx 16rpx;
  border-radius: 12rpx;
  margin-bottom: 8rpx;
}
.settings-item:active {
  background: #f5f5f5;
}
.settings-item-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
  width: 40rpx;
  text-align: center;
}
.settings-item-text {
  font-size: 28rpx;
  color: #333;
}

/* ===== 邀请卡片 ===== */
.invite-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 580rpx;
  text-align: center;
}
.invite-card-title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
}
.invite-card-family {
  font-size: 28rpx;
  color: #667eea;
  display: block;
  margin-top: 8rpx;
}
.invite-qr-wrap {
  margin: 30rpx auto;
  width: 320rpx;
  height: 320rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.invite-qr {
  width: 320rpx;
  height: 320rpx;
}
.loading-qr {
  background: #f5f5f5;
  border-radius: 16rpx;
}
.invite-code-section {
  margin: 20rpx 0;
}
.invite-code-label {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 8rpx;
}
.invite-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
}
.invite-code {
  font-size: 48rpx;
  font-weight: bold;
  letter-spacing: 6rpx;
  color: #333;
}
.copy-btn {
  font-size: 24rpx;
  color: #667eea;
  background: #eef0ff;
  border: none;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  line-height: 1.5;
}
.invite-tip {
  font-size: 24rpx;
  color: #bbb;
  display: block;
  margin: 20rpx 0;
}
.close-btn {
  width: 100%;
  background: #f5f5f5;
  border: none;
  border-radius: 12rpx;
  padding: 18rpx 0;
  font-size: 28rpx;
  color: #666;
}

/* ===== 成员详情弹窗 ===== */
.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: #667eea;
  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 #667eea;
}
.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;
}
</style>