From 6f87e0c26042b45738a50116307ed9e73ea82830 Mon Sep 17 00:00:00 2001
From: whm <973418690@qq.com>
Date: Sun, 22 Mar 2026 01:45:03 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E5=85=B3=E6=B3=A8=E6=88=91?=
 =?UTF-8?q?=E4=BB=AC=E5=88=97=E8=A1=A8=E5=9B=BE=E7=94=A8=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E5=BC=8F=E5=80=99=E9=80=89=E4=B8=8B=E6=A0=87=EF=BC=8C=E9=81=BF?=
 =?UTF-8?q?=E5=85=8D=E9=87=8D=E6=B8=B2=E6=9F=93=E8=A6=86=E7=9B=96=20@error?=
 =?UTF-8?q?=20=E5=AF=BC=E8=87=B4=E8=A3=82=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Made-with: Cursor
---
 web/src/views/Home.vue | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 8745332..0ab29a7 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -145,13 +145,13 @@
         >
           <span class="social-pill-icon-wrap">
             <img
-              :src="item.imageCandidates[0]"
+              :src="socialListImgSrc(item)"
               :alt="item.label"
               class="social-pill-icon"
               width="32"
               height="32"
               loading="lazy"
-              @error="(e) => onSocialFollowListImgError(e, item)"
+              @error="onSocialFollowListImgError(item)"
             />
           </span>
           <span class="social-pill-label">{{ item.label }}</span>
@@ -333,6 +333,15 @@ import { getCachedWebSiteId, fetchWebRoutes } from '../api/webPages'
 
 const socialFollowItems = PROMOTION_SOCIAL_FOLLOW
 
+/** 「关注我们」列表图标：必须用响应式候选下标驱动 :src，勿在 @error 里只改 DOM，否则重渲染会回到 candidates[0] 裂图 */
+const socialListImgIdx = reactive(Object.fromEntries(PROMOTION_SOCIAL_FOLLOW.map((x) => [x.id, 0])))
+function socialListImgSrc(item) {
+  const list = item.imageCandidates || []
+  if (!list.length) return ''
+  const i = Math.min(socialListImgIdx[item.id] ?? 0, list.length - 1)
+  return list[i]
+}
+
 const starsEl = ref(null)
 let cometTimer = null
 const scrollY = ref(0)
@@ -539,9 +548,11 @@ function closeVideoModal() {
 
 function openSocialFollow(item) {
   socialQrTitle.value = item.label
-  socialQrCandidates.value = item.imageCandidates || []
-  socialQrCandidateIdx.value = 0
-  socialQrImage.value = item.imageCandidates?.[0] || ''
+  const list = item.imageCandidates || []
+  socialQrCandidates.value = list
+  const start = Math.min(socialListImgIdx[item.id] ?? 0, Math.max(0, list.length - 1))
+  socialQrCandidateIdx.value = start
+  socialQrImage.value = list[start] || ''
   socialQrHref.value = item.href || ''
   socialQrOpen.value = true
 }
@@ -554,14 +565,12 @@ function closeSocialFollow() {
   socialQrCandidateIdx.value = 0
 }
 
-/** public /social、public 根路径无图时依次尝试 /promotion/social/ */
-function onSocialFollowListImgError(e, item) {
-  const img = e.target
+/** 当前候选 404/裂图时换下一 URL（与 :src 绑定同一套下标，避免被 Vue 刷回） */
+function onSocialFollowListImgError(item) {
   const list = item.imageCandidates || []
-  let i = Number(img.dataset.fi || 0)
+  const i = socialListImgIdx[item.id] ?? 0
   if (i + 1 < list.length) {
-    img.dataset.fi = String(i + 1)
-    img.src = list[i + 1]
+    socialListImgIdx[item.id] = i + 1
   }
 }