feat(community): 家庭动态改为未读卡片栈并新增翻转动画、详情弹窗与未读角标

FamilyFeed 由单行列表改为未读卡片栈（逐张翻入/翻出动画），点击卡片弹出详情；首页仅展示未读通知与公告（unreadFeedItems）。同文件同步 getImageUrl 绝对 URL 守卫。

cfc-frontend/components/FamilyFeed.vue

@@ -1,21 +1,61 @@
 <template>
   <view class="family-feed">
-    <!-- 有动态：标题 + 小喇叭 + 单行滚动 -->
-    <view class="feed-row" v-if="marqueeText">
-      <view class="feed-header" v-if="showHeader">
+    <!-- 标题 -->
+    <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 class="feed-marquee">
-        <view class="feed-marquee-inner">
-          <text class="feed-marquee-text">{{ marqueeText }}</text>
-          <text class="feed-marquee-text">{{ marqueeText }}</text>
+    </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>
+      <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>
@@ -37,26 +77,105 @@ export default {
       default: true
     }
   },
+  data: function() {
+    return {
+      detailItem: null,
+      closingKeys: []
+    }
+  },
   computed: {
-    marqueeText: function() {
-      var parts = []
+    // 公告（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 && n.title) {
-          parts.push(n.title)
-        }
+        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 && item.type !== 'notice' && item.text) {
-          parts.push(item.text)
-        }
+        if (!item) continue
+        var key = this.getItemKey(item)
+        if (seen[key]) continue
+        seen[key] = true
+        result.push(item)
       }
-      return parts.join('　｜　')
+      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>
@@ -71,70 +190,257 @@ export default {
   overflow: hidden;
 }
 
-.feed-row {
+.feed-header {
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: 44rpx;
-  line-height: 44rpx;
-  overflow: hidden;
+  padding: 6rpx 4rpx 12rpx;
 }
 
-.feed-header {
+.feed-header-left {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 4rpx;
-  flex-shrink: 0;
-  margin-right: 12rpx;
+  gap: 6rpx;
 }
 
 .feed-title {
-  font-size: 24rpx;
+  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-marquee {
+.feed-detail-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
   flex: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  height: 44rpx;
-  line-height: 44rpx;
+  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-marquee-inner {
-  display: inline-flex;
+.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;
-  white-space: nowrap;
-  animation: feedMarquee 20s linear infinite;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 24rpx;
 }
 
-.feed-marquee-text {
-  font-size: 24rpx;
-  color: #666;
-  white-space: nowrap;
-  padding-right: 40rpx;
+.feed-detail-time {
+  font-size: 22rpx;
+  color: #999;
 }
 
-@keyframes feedMarquee {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(-50%); }
+.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: 44rpx;
-  line-height: 44rpx;
-  text-align: center;
+  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>

cfc-frontend/pages/index-home/index.vue

@@ -101,7 +101,7 @@
     <!-- ② 发现区 — 上传报告 -->
 
     <FamilyFeed
-      :items="feedItems"
+      :items="unreadFeedItems"
       :notices="notices"
       :showHeader="true"
       @viewed="onFeedItemViewed" />
@@ -777,6 +777,14 @@ title: '添加家庭成员',
       return list.filter(function(item) {
         return !item._feedKey || viewed.indexOf(item._feedKey) === -1
       }).slice(0, 20)
+    },
+    // ===== 未读动态提醒（仅未读通知 + 公告）=====
+    // 过滤 feedItems：仅保留未读项（unread === true）与公告（type === 'notice' 隐式未读），
+    // 排除能量/积分/CF 变动和任务完成（均为 unread: false），顺序与 feedItems 保持一致
+    unreadFeedItems: function() {
+      return this.feedItems.filter(function(item) {
+        return item.unread === true || item.type === 'notice'
+      })
     }
   },
   onLoad(options) {