From abc8e3e8289eaa0433fbc546f4e7fe0f8ec7693a Mon Sep 17 00:00:00 2001
From: 2977094657 <2977094657@qq.com>
Date: Thu, 19 Feb 2026 20:01:29 +0800
Subject: [PATCH] =?UTF-8?q?improvement(sns):=20=E4=BC=98=E5=8C=96=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E5=8F=B7=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F=EF=BC=88?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2/=E5=AF=BC=E5=87=BA=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sns.vue：视频号 card 改为正方形封面（无图用文字占位），并移除 source/显示计数

- sns_export_service：HTML 导出同步相同布局与播放按钮样式
---
 frontend/pages/sns.vue                        | 46 +++++++------------
 src/wechat_decrypt_tool/sns_export_service.py | 23 ++++------
 2 files changed, 26 insertions(+), 43 deletions(-)

diff --git a/frontend/pages/sns.vue b/frontend/pages/sns.vue
index c7ca3d5..e095bce 100644
--- a/frontend/pages/sns.vue
+++ b/frontend/pages/sns.vue
@@ -179,9 +179,7 @@
             <div v-else-if="posts.length === 0" class="text-sm text-gray-400 py-16 text-center">暂无朋友圈数据</div>
 
             <div v-if="!error && posts.length > 0" class="text-[11px] text-gray-500 mb-2 flex flex-wrap gap-x-3 gap-y-1">
-              <span>已显示：{{ posts.length }}</span>
               <span v-if="selectedSnsUserInfo">缓存统计：{{ selectedSnsUserInfo.postCount || 0 }}</span>
-              <span v-if="timelineSource">source: {{ timelineSource }}</span>
               <span v-if="!hasMore && !isLoading">（已到末尾）</span>
             </div>
             <div v-if="showSnsCountMismatchHint" class="text-[11px] text-amber-700 mb-3">
@@ -247,30 +245,23 @@
                   </a>
                 </div>
 
-                <div v-else-if="post.type === 28 && post.finderFeed && Object.keys(post.finderFeed).length > 0" class="mt-2 w-full" :class="{ 'privacy-blur': privacyMode }">
-                  <!-- 浏览器没有看微信视频号的环境，暂时不进行跳转！！ -->
-                  <div class="block w-full bg-[#F7F7F7] p-2 rounded-sm">
-                    <div class="flex items-center gap-3">
-                      <div class="flex-1 min-w-0 flex items-center overflow-hidden h-12">
-                        <div class="text-[13px] text-gray-900 leading-tight line-clamp-2">{{ formatFinderFeedCardText(post) }}</div>
-                      </div>
-                      <div class="relative w-12 h-12 rounded-sm overflow-hidden flex-shrink-0 bg-white">
-                        <img
-                            v-if="getFinderFeedThumbSrc(post)"
-                            :src="getFinderFeedThumbSrc(post)"
-                            class="w-full h-full object-cover"
-                            alt=""
-                            loading="lazy"
-                            referrerpolicy="no-referrer"
-                        />
-                        <div v-else class="w-full h-full flex items-center justify-center bg-gray-200 text-gray-400 text-xs">
-                          视频
-                        </div>
-                        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
-                          <div class="w-8 h-8 rounded-full bg-black/45 flex items-center justify-center">
-                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
-                          </div>
-                        </div>
+                <div v-else-if="post.type === 28 && post.finderFeed && Object.keys(post.finderFeed).length > 0" class="mt-2 w-full max-w-[304px]" :class="{ 'privacy-blur': privacyMode }">
+                  <!-- 浏览器没有看微信视频号的环境，暂时不进行跳转 -->
+                  <div class="relative w-full overflow-hidden rounded-sm bg-[#F7F7F7]">
+                    <img
+                        v-if="getFinderFeedThumbSrc(post)"
+                        :src="getFinderFeedThumbSrc(post)"
+                        class="block w-full aspect-square object-cover"
+                        alt=""
+                        loading="lazy"
+                        referrerpolicy="no-referrer"
+                    />
+                    <div v-else class="w-full aspect-square flex items-center justify-center bg-gray-200">
+                      <span class="line-clamp-3 px-4 text-center text-[13px] leading-5 text-gray-500">{{ formatFinderFeedCardText(post) }}</span>
+                    </div>
+                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+                      <div class="w-12 h-12 rounded-full bg-black/45 flex items-center justify-center">
+                        <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                       </div>
                     </div>
                   </div>
@@ -622,7 +613,6 @@ const seenPostIds = new Set()
 // NOTE: Backend `/api/sns/timeline` uses SQL OFFSET on the raw timeline rows.
 // The UI filters out some rows (e.g. type=7 cover), so `posts.length` must NOT be used as the next OFFSET.
 const timelineOffset = ref(0)
-const timelineSource = ref('')
 const hasMore = ref(true)
 // When timeline API reports `hasMore=false` but cached sidebar count indicates more, keep paging.
 // If we hit an empty page, stop trying to avoid infinite requests.
@@ -1615,7 +1605,6 @@ const loadPosts = async ({ reset }) => {
   try {
     if (reset) {
       timelineOffset.value = 0
-      timelineSource.value = ''
       hasMore.value = true
       cachePagingExhausted.value = false
       seenPostIds.clear()
@@ -1633,7 +1622,6 @@ const loadPosts = async ({ reset }) => {
       offset,
       usernames: selectedSnsUser.value ? [String(selectedSnsUser.value).trim()] : []
     })
-    timelineSource.value = String(resp?.source || '').trim()
     const items = Array.isArray(resp?.timeline) ? resp.timeline : []
     // Advance offset by the number of rows consumed by the backend.
     // When `hasMore` is true, the backend definitely scanned at least `limit` raw rows (even if it filtered some out).
diff --git a/src/wechat_decrypt_tool/sns_export_service.py b/src/wechat_decrypt_tool/sns_export_service.py
index 0e4fa6e..81a940b 100644
--- a/src/wechat_decrypt_tool/sns_export_service.py
+++ b/src/wechat_decrypt_tool/sns_export_service.py
@@ -1204,29 +1204,24 @@ class SnsExportManager:
                 ff = post.get("finderFeed") if isinstance(post.get("finderFeed"), dict) else {}
                 thumb_url = str(ff.get("thumbUrl") or "").strip() if isinstance(ff, dict) else ""
                 thumb_arc = export_external_thumb(thumb_url, kind="finder") if thumb_url else ""
-                out.append('<div class="mt-2 w-full">')
-                out.append('<div class="block w-full bg-[#F7F7F7] p-2 rounded-sm">')
-                out.append('<div class="flex items-center gap-3">')
-                out.append('<div class="flex-1 min-w-0 flex items-center overflow-hidden h-12">')
-                out.append(
-                    f'<div class="text-[13px] text-gray-900 leading-tight line-clamp-2">{_esc_text(format_finder_feed_card_text(post))}</div>'
-                )
-                out.append("</div>")
-                out.append('<div class="relative w-12 h-12 rounded-sm overflow-hidden flex-shrink-0 bg-white">')
+                out.append('<div class="mt-2 w-full max-w-[304px]">')
+                out.append('<div class="relative w-full overflow-hidden rounded-sm bg-[#F7F7F7]">')
                 if thumb_arc:
                     out.append(
-                        f'<img src="{_esc_attr(thumb_arc)}" class="w-full h-full object-cover" alt="" loading="lazy" referrerpolicy="no-referrer" />'
+                        f'<img src="{_esc_attr(thumb_arc)}" class="block w-full aspect-square object-cover" alt="" loading="lazy" referrerpolicy="no-referrer" />'
                     )
                 else:
                     out.append(
-                        '<div class="w-full h-full flex items-center justify-center bg-gray-200 text-gray-400 text-xs">视频</div>'
+                        '<div class="w-full aspect-square flex items-center justify-center bg-gray-200">'
+                        f'<span class="line-clamp-3 px-4 text-center text-[13px] leading-5 text-gray-500">{_esc_text(format_finder_feed_card_text(post))}</span>'
+                        "</div>"
                     )
                 out.append('<div class="absolute inset-0 flex items-center justify-center pointer-events-none">')
-                out.append('<div class="w-8 h-8 rounded-full bg-black/45 flex items-center justify-center">')
+                out.append('<div class="w-12 h-12 rounded-full bg-black/45 flex items-center justify-center">')
                 out.append(
-                    '<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>'
+                    '<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>'
                 )
-                out.append("</div></div></div></div></div></div>")
+                out.append("</div></div></div>")
             else:
                 out.append(render_media_block(zf=zf, post=post))