From 1c89ee27978f257cfa24c6b02ffb228467f7cafd Mon Sep 17 00:00:00 2001
From: aits2026 <wxdaochu@gmail.com>
Date: Fri, 6 Mar 2026 15:42:10 +0800
Subject: [PATCH] style(sns): move friends count to contact header

---
 src/components/Sns/SnsFilterPanel.tsx |  5 +++++
 src/pages/SnsPage.scss                | 12 ++++++++++++
 src/pages/SnsPage.tsx                 |  9 ++++++++-
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/Sns/SnsFilterPanel.tsx b/src/components/Sns/SnsFilterPanel.tsx
index 6814e82..d769360 100644
--- a/src/components/Sns/SnsFilterPanel.tsx
+++ b/src/components/Sns/SnsFilterPanel.tsx
@@ -22,6 +22,7 @@ interface SnsFilterPanelProps {
     setSearchKeyword: (val: string) => void
     jumpTargetDate?: Date
     setJumpTargetDate: (date?: Date) => void
+    totalFriendsLabel?: string
     selectedUsernames: string[]
     setSelectedUsernames: (val: string[]) => void
     contacts: Contact[]
@@ -36,6 +37,7 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
     setSearchKeyword,
     jumpTargetDate,
     setJumpTargetDate,
+    totalFriendsLabel,
     selectedUsernames,
     setSelectedUsernames,
     contacts,
@@ -270,6 +272,9 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
                         {selectedUsernames.length > 0 && (
                             <span className="badge">{selectedUsernames.length}</span>
                         )}
+                        {totalFriendsLabel && (
+                            <span className="widget-header-summary">{totalFriendsLabel}</span>
+                        )}
                     </div>
 
                     <div className="contact-search-bar">
diff --git a/src/pages/SnsPage.scss b/src/pages/SnsPage.scss
index 7624101..ef2fc6b 100644
--- a/src/pages/SnsPage.scss
+++ b/src/pages/SnsPage.scss
@@ -1021,9 +1021,21 @@
                 padding: 2px 6px;
                 border-radius: 10px;
             }
+
+            .widget-header-summary {
+                margin-left: auto;
+                font-size: 12px;
+                font-weight: 500;
+                color: var(--text-tertiary);
+                white-space: nowrap;
+            }
         }
     }
 
+    .contact-widget .widget-header .badge + .widget-header-summary {
+        margin-left: 8px;
+    }
+
     /* Search Widget */
     .input-group {
         position: relative;
diff --git a/src/pages/SnsPage.tsx b/src/pages/SnsPage.tsx
index 5b082cb..3c00fe8 100644
--- a/src/pages/SnsPage.tsx
+++ b/src/pages/SnsPage.tsx
@@ -451,7 +451,7 @@ export default function SnsPage() {
         if (overviewStatsStatus === 'loading') {
             return '统计中...'
         }
-        return `共 ${overviewStats.totalPosts} 条 ｜ ${formatDateOnly(overviewStats.earliestTime)} ~ ${formatDateOnly(overviewStats.latestTime)} ｜ ${overviewStats.totalFriends} 位好友`
+        return `共 ${overviewStats.totalPosts} 条 ｜ ${formatDateOnly(overviewStats.earliestTime)} ~ ${formatDateOnly(overviewStats.latestTime)}`
     }
 
     const loadPosts = useCallback(async (options: { reset?: boolean, direction?: 'older' | 'newer' } = {}) => {
@@ -1112,6 +1112,13 @@ export default function SnsPage() {
                 setSearchKeyword={setSearchKeyword}
                 jumpTargetDate={jumpTargetDate}
                 setJumpTargetDate={setJumpTargetDate}
+                totalFriendsLabel={
+                    overviewStatsStatus === 'loading'
+                        ? '统计中'
+                        : overviewStatsStatus === 'ready'
+                            ? `${overviewStats.totalFriends} 位好友`
+                            : undefined
+                }
                 selectedUsernames={selectedUsernames}
                 setSelectedUsernames={setSelectedUsernames}
                 contacts={contacts}