cfc/cfc-frontend/components/FamilyEmptyState/FamilyEmptyState.vue

<template>
  <view class="family-empty-state" :class="['family-empty-' + type]">
    <view class="empty-icon">{{ iconChar }}</view>
    <view class="empty-title">{{ title }}</view>
    <view v-if="desc" class="empty-desc">{{ desc }}</view>
    <view class="empty-actions">
      <button class="empty-btn primary" @click="goCreate">{{ primaryText }}</button>
      <button class="empty-btn secondary" @click="goJoin">{{ secondaryText }}</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FamilyEmptyState',
  props: {
    // 形态: 'card'（嵌入卡片，紧凑）/ 'block'（中等块）/ 'list'（列表空态）
    type: { type: String, default: 'card' },
    title: { type: String, default: '请先创建或加入家庭' },
    desc: { type: String, default: '加入家庭后即可解锁本功能' },
    primaryText: { type: String, default: '创建家庭' },
    secondaryText: { type: String, default: '加入家庭' }
  },
  computed: {
    iconChar: function() {
      return this.type === 'card' ? '🏠' : '👨‍👩‍👧'
    }
  },
  methods: {
    goCreate: function() {
      uni.navigateTo({ url: '/pages/profile-extra/family-members?action=create' })
    },
    goJoin: function() {
      uni.navigateTo({ url: '/pages/profile-extra/family-members' })
    }
  }
}
</script>

<style lang="scss" scoped>
.family-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 16rpx;
}
.family-empty-card { padding: 24rpx 16rpx; }
.family-empty-block { padding: 60rpx 24rpx; }
.family-empty-list { padding: 40rpx 16rpx; }
.empty-icon { font-size: 48rpx; margin-bottom: 12rpx; }
.empty-title { font-size: 28rpx; color: #333; margin-bottom: 8rpx; }
.empty-desc { font-size: 24rpx; color: #999; margin-bottom: 16rpx; }
.empty-actions { display: flex; flex-direction: row; gap: 16rpx; margin-top: 8rpx; }
.empty-btn {
  font-size: 26rpx;
  padding: 10rpx 28rpx;
  border-radius: 32rpx;
}
.empty-btn.primary {
  background: #F97316;
  color: #fff;
}
.empty-btn.secondary {
  background: #FFF7ED;
  color: #F97316;
  border: 2rpx solid #F97316;
}
</style>