cfc/cfc-frontend/components/FamilyFeed.vue

<template>
  <view class="family-feed">
    <!-- 标题 -->
    <view class="feed-header" v-if="showHeader">
      <view class="feed-header-left">
        <text class="feed-title">动态</text>
        <text class="feed-icon">📢</text>
        <view v-if="unreadCount > 0" class="feed-count-badge">
          <text class="feed-count-text">{{ unreadCount }} 条未读</text>
        </view>
      </view>
    </view>

    <!-- 未读动态卡片栈（从下往上翻） -->
    <view v-if="displayItems.length > 0" class="feed-stack">
      <view
        v-for="(item, idx) in displayItems"
        :key="getItemKey(item)"
        class="feed-card"
        :class="{'feed-card-closing': isClosing(item)}"
        :style="getCardStyle(idx, item)"
        @click="openDetail(item)"
      >
        <view class="feed-card-icon-wrap">
          <text class="feed-card-icon">{{ getItemIcon(item) }}</text>
        </view>
        <view class="feed-card-body">
          <text class="feed-card-title line-clamp-1">{{ getItemTitle(item) }}</text>
          <text class="feed-card-time" v-if="item.time">{{ item.time }}</text>
        </view>
        <text class="feed-card-arrow">›</text>
      </view>
    </view>

    <!-- 空态 -->
    <view v-else class="feed-empty">
      <text class="feed-empty-text">暂无未读动态</text>
    </view>

    <!-- 详情弹窗 -->
    <view v-if="detailItem" class="feed-detail-mask" @click="closeDetail">
      <view class="feed-detail-panel" @click.stop="noop">
        <view class="feed-detail-head">
          <text class="feed-detail-title">{{ getItemTitle(detailItem) }}</text>
          <view class="feed-detail-close" @click="closeDetail">
            <text class="feed-detail-close-text">✕</text>
          </view>
        </view>
        <scroll-view class="feed-detail-content" scroll-y>
          <text class="feed-detail-body">{{ getItemContent(detailItem) }}</text>
        </scroll-view>
        <view class="feed-detail-foot">
          <text class="feed-detail-time" v-if="detailItem.time">{{ detailItem.time }}</text>
          <view class="feed-detail-btn" @click="closeDetail">
            <text class="feed-detail-btn-text">我知道了</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FamilyFeed',
  props: {
    items: {
      type: Array,
      default: function() { return [] }
    },
    notices: {
      type: Array,
      default: function() { return [] }
    },
    showHeader: {
      type: Boolean,
      default: true
    }
  },
  data: function() {
    return {
      detailItem: null,
      closingKeys: []
    }
  },
  computed: {
    // 公告（notices prop）优先展示，再拼未读动态（items），按 feedKey 去重，
    // 避免 familyFeed 在父组件被 slice(0,10) 截断时公告漏显
    displayItems: function() {
      var seen = {}
      var result = []
      var i
      var notices = this.notices || []
      for (i = 0; i < notices.length; i++) {
        var n = notices[i]
        if (!n) continue
        var raw = n.notice || {}
        var nKey = 'notice-' + (raw.id !== undefined ? raw.id : '')
        if (!nKey || seen[nKey]) continue
        seen[nKey] = true
        result.push({
          text: n.text || raw.title || '公告',
          time: n.time || '',
          type: 'notice',
          title: raw.title || n.text || '公告',
          content: raw.content || '',
          unread: false,
          _feedKey: nKey,
          _srcId: raw.id
        })
      }
      var items = this.items || []
      for (i = 0; i < items.length; i++) {
        var item = items[i]
        if (!item) continue
        var key = this.getItemKey(item)
        if (seen[key]) continue
        seen[key] = true
        result.push(item)
      }
      return result
    },
    unreadCount: function() {
      return this.displayItems.length
    }
  },
  methods: {
    getItemKey: function(item) {
      return item._feedKey || ('feed-' + (item.title || '') + '-' + (item.time || ''))
    },
    getItemIcon: function(item) {
      if (item.type === 'notification') return '📬'
      if (item.type === 'notice') return '📢'
      if (item.type === 'task') return '🎯'
      return '✨'
    },
    getItemTitle: function(item) {
      return item.title || item.text || '动态'
    },
    getItemContent: function(item) {
      return item.content || item.text || '暂无更多内容'
    },
    // 入场错峰：从下往上逐张翻入（最底下的卡片先入场）
    getCardStyle: function(idx, item) {
      if (this.isClosing(item)) {
        return 'animation-delay:0ms;'
      }
      var total = this.displayItems.length
      var delay = Math.min((total - 1 - idx) * 120, 600)
      return 'animation-delay:' + delay + 'ms;'
    },
    isClosing: function(item) {
      var key = this.getItemKey(item)
      return this.closingKeys.indexOf(key) !== -1
    },
    openDetail: function(item) {
      if (this.isClosing(item)) return
      this.detailItem = item
    },
    // 关闭：先播放翻出动画，再通知父组件标记已读并从列表移除
    closeDetail: function() {
      var self = this
      var item = this.detailItem
      if (!item) return
      this.detailItem = null
      var key = this.getItemKey(item)
      if (this.closingKeys.indexOf(key) === -1) {
        this.closingKeys.push(key)
      }
      setTimeout(function() {
        var keys = self.closingKeys.slice()
        var i = keys.indexOf(key)
        if (i !== -1) keys.splice(i, 1)
        self.closingKeys = keys
        self.$emit('viewed', item)
      }, 380)
    },
    noop: function() {}
  }
}
</script>

<style>
.family-feed {
  margin: 12rpx 30rpx 0;
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  overflow: hidden;
}

.feed-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6rpx 4rpx 12rpx;
}

.feed-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6rpx;
}

.feed-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.feed-icon {
  font-size: 24rpx;
}

.feed-count-badge {
  margin-left: 12rpx;
  background: #ff5b5b;
  border-radius: 20rpx;
  padding: 2rpx 14rpx;
}

.feed-count-text {
  font-size: 20rpx;
  color: #fff;
}

/* ===== 翻转卡片栈 ===== */
.feed-stack {
  perspective: 800rpx;
}

.feed-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12rpx;
  padding: 18rpx 20rpx;
  background: #f7f8fa;
  border-radius: 12rpx;
  box-sizing: border-box;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  animation: feedFlipUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.feed-card:active {
  opacity: 0.85;
}

/* 入场：从下往上翻入 */
@keyframes feedFlipUp {
  0% {
    transform: translateY(40rpx) rotateX(-90deg);
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0deg);
    opacity: 1;
  }
}

/* 关闭：翻出（向下折叠 + 淡出） */
.feed-card-closing {
  animation: feedFlipDown 0.35s ease-in both;
}

@keyframes feedFlipDown {
  0% {
    transform: translateY(0) rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-20rpx) rotateX(-75deg);
    opacity: 0;
  }
}

.feed-card-icon-wrap {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 16rpx;
}

.feed-card-icon {
  font-size: 28rpx;
}

.feed-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.feed-card-title {
  font-size: 26rpx;
  color: #333;
  line-height: 34rpx;
}

.feed-card-time {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}

.feed-card-arrow {
  font-size: 28rpx;
  color: #ccc;
  margin-left: 12rpx;
  flex-shrink: 0;
}

/* ===== 详情弹窗 ===== */
.feed-detail-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60rpx 40rpx;
  perspective: 900rpx;
}

.feed-detail-panel {
  width: 100%;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 28rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  animation: feedPanelIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes feedPanelIn {
  0% {
    transform: translateY(80rpx) rotateX(40deg);
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0deg);
    opacity: 1;
  }
}

.feed-detail-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.feed-detail-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 16rpx;
}

.feed-detail-close {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feed-detail-close-text {
  font-size: 30rpx;
  color: #999;
}

.feed-detail-content {
  max-height: 480rpx;
  margin-top: 20rpx;
}

.feed-detail-body {
  font-size: 26rpx;
  color: #555;
  line-height: 42rpx;
  word-break: break-all;
  display: block;
}

.feed-detail-foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 24rpx;
}

.feed-detail-time {
  font-size: 22rpx;
  color: #999;
}

.feed-detail-btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 30rpx;
  padding: 12rpx 40rpx;
}

.feed-detail-btn-text {
  font-size: 26rpx;
  color: #fff;
}

/* ===== 空态 ===== */
.feed-empty {
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feed-empty-text {
  font-size: 24rpx;
  color: #ccc;
}

.line-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>