From 6b24daf7bf9dd2bbba044c0bf36ac245166740bb Mon Sep 17 00:00:00 2001
From: 2977094657 <2977094657@qq.com>
Date: Thu, 26 Feb 2026 20:02:03 +0800
Subject: [PATCH] =?UTF-8?q?improvement(wrapped-ui):=20Bento=20=E6=80=BB?=
 =?UTF-8?q?=E8=A7=88=E6=94=AF=E6=8C=81=E5=BE=AE=E4=BF=A1=E8=A1=A8=E6=83=85?=
 =?UTF-8?q?=E8=B5=84=E6=BA=90=E6=B8=B2=E6=9F=93=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=8D=A0=E4=BD=8D=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- topEmoji.kind=wechat 时使用 assetPath 渲染图片，加载失败自动回退到文本/Unicode 展示
- 计数展示统一切到 topEmojiCount（兼容旧 topUnicodeEmojiCount 回退）
- Wrapped 首页占位壳对 Bento summary 卡片放行，交由卡片内部处理 loading/error 状态
---
 .../wrapped/cards/Card07BentoSummary.vue      | 58 +++++++++++++++++--
 frontend/pages/wrapped/index.vue              |  2 +-
 2 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/frontend/components/wrapped/cards/Card07BentoSummary.vue b/frontend/components/wrapped/cards/Card07BentoSummary.vue
index 9d6e6ec..38713b9 100644
--- a/frontend/components/wrapped/cards/Card07BentoSummary.vue
+++ b/frontend/components/wrapped/cards/Card07BentoSummary.vue
@@ -515,16 +515,26 @@
                 >👍</span
               >
 
-              <span
-                class="text-5xl sm:text-6xl filter drop-shadow-[0_4px_12px_rgba(250,204,21,0.5)] group-hover:scale-[1.25] group-hover:-rotate-12 transition-all duration-300 cursor-pointer z-10 relative"
-              >
-                {{ topUnicodeEmoji }}
-              </span>
+              <template v-if="topEmojiKind === 'wechat' && topEmojiAssetPath && !broken.topEmoji">
+                <img
+                  :src="topEmojiAssetPath"
+                  :alt="topEmojiLabel"
+                  class="w-16 h-16 sm:w-20 sm:h-20 object-contain filter drop-shadow-[0_4px_12px_rgba(250,204,21,0.35)] group-hover:scale-[1.12] group-hover:-rotate-6 transition-all duration-300 cursor-pointer z-10 relative"
+                  @error="markBroken('topEmoji')"
+                />
+              </template>
+              <template v-else>
+                <span
+                  class="text-5xl sm:text-6xl filter drop-shadow-[0_4px_12px_rgba(250,204,21,0.5)] group-hover:scale-[1.25] group-hover:-rotate-12 transition-all duration-300 cursor-pointer z-10 relative"
+                >
+                  {{ topEmojiLabel }}
+                </span>
+              </template>
             </div>
             <div
               class="text-[9px] sm:text-[10px] font-semibold text-yellow-700/80 bg-yellow-500/10 border border-yellow-500/15 px-2.5 py-0.5 rounded-full whitespace-nowrap shrink-0"
             >
-              使用了 <span class="font-black">{{ formatInt(topUnicodeEmojiCount) }}</span> 次
+              使用了 <span class="font-black">{{ formatInt(topEmojiCount) }}</span> 次
             </div>
             <div class="bento-watermark text-yellow-500">☺</div>
           </div>
@@ -1069,6 +1079,42 @@ watch(
 const topUnicodeEmoji = computed(() => String(snapshot.value?.topUnicodeEmoji || '😀'))
 const topUnicodeEmojiCount = computed(() => Number(snapshot.value?.topUnicodeEmojiCount || 0))
 
+const topEmoji = computed(() => {
+  const o = snapshot.value?.topEmoji
+  return o && typeof o === 'object' ? o : null
+})
+const topEmojiKind = computed(() => String(topEmoji.value?.kind || '').trim())
+const topEmojiLabel = computed(() => {
+  if (topEmoji.value) {
+    if (topEmojiKind.value === 'wechat') {
+      const key = String(topEmoji.value?.key || '').trim()
+      if (key) return key
+    } else if (topEmojiKind.value === 'unicode') {
+      const emo = String(topEmoji.value?.emoji || '').trim()
+      if (emo) return emo
+    }
+  }
+  return topUnicodeEmoji.value
+})
+const topEmojiCount = computed(() => {
+  if (topEmoji.value) {
+    const n = Number(topEmoji.value?.count || 0)
+    return Number.isFinite(n) ? n : 0
+  }
+  return topUnicodeEmojiCount.value
+})
+const topEmojiAssetPath = computed(() => {
+  if (!topEmoji.value || topEmojiKind.value !== 'wechat') return ''
+  return resolveMediaUrl(topEmoji.value?.assetPath || '')
+})
+watch(
+  topEmojiAssetPath,
+  () => {
+    broken.topEmoji = false
+  },
+  { immediate: true }
+)
+
 const rawMonthly = computed(() => (Array.isArray(snapshot.value?.monthlyBestBuddies) ? snapshot.value.monthlyBestBuddies : []))
 const monthlyNormalized = computed(() => {
   const byMonth = new Map()
diff --git a/frontend/pages/wrapped/index.vue b/frontend/pages/wrapped/index.vue
index 343fb6a..ec667dc 100644
--- a/frontend/pages/wrapped/index.vue
+++ b/frontend/pages/wrapped/index.vue
@@ -105,7 +105,7 @@
         :style="slideStyle"
       >
         <WrappedCardShell
-          v-if="!c || c.status !== 'ok'"
+          v-if="!c || (c.status !== 'ok' && !(c.kind === 'global/bento_summary' || c.id === 7))"
           :card-id="Number(c?.id || (idx + 1))"
           :title="c?.title || '正在生成…'"
           :narrative="c?.status === 'error' ? '生成失败' : (c?.status === 'loading' ? '正在生成本页数据…' : '进入该页后将开始生成')"