style(sns): reorder summary and my timeline

src/pages/SnsPage.scss

@@ -68,6 +68,10 @@
     }
 
     .feed-stats-line {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-wrap: wrap;
         font-size: 13px;
         color: var(--text-secondary);
         line-height: 1.4;
@@ -81,6 +85,20 @@
         }
     }
 
+    .feed-stats-range {
+        gap: 0;
+    }
+
+    .feed-overview-total {
+        font-size: inherit;
+        color: inherit;
+        white-space: nowrap;
+    }
+
+    .feed-stats-divider {
+        color: color-mix(in srgb, var(--text-secondary) 78%, transparent);
+    }
+
     .feed-my-timeline-entry {
         display: inline-flex;
         align-items: center;
@@ -89,7 +107,7 @@
         padding: 0;
         border: none;
         background: transparent;
-        font-size: 14px;
+        font-size: 13px;
         line-height: 1.4;
         color: var(--text-secondary);
         cursor: default;

src/pages/SnsPage.tsx

@@ -537,7 +537,7 @@ export default function SnsPage() {
         }
     }, [persistSnsPageCache])
 
-    const renderOverviewStats = () => {
+    const renderOverviewRangeText = () => {
         if (overviewStatsStatus === 'error') {
             return (
                 <button type="button" className="feed-stats-retry" onClick={() => { void loadOverviewStats() }}>
@@ -548,7 +548,7 @@ export default function SnsPage() {
         if (overviewStatsStatus === 'loading') {
             return '统计中...'
         }
-        return `共 ${overviewStats.totalPosts} 条 ｜ ${formatDateOnly(overviewStats.earliestTime)} ~ ${formatDateOnly(overviewStats.latestTime)}`
+        return `${formatDateOnly(overviewStats.earliestTime)} ~ ${formatDateOnly(overviewStats.latestTime)}`
     }
 
     const loadPosts = useCallback(async (options: { reset?: boolean, direction?: 'older' | 'newer' } = {}) => {
@@ -1059,6 +1059,13 @@ export default function SnsPage() {
                     <div className="feed-header">
                         <div className="feed-header-main">
                             <h2>朋友圈</h2>
+                            <div className={`feed-stats-line ${overviewStatsStatus}`}>
+                                <span className="feed-overview-total">
+                                    {overviewStatsStatus === 'loading'
+                                        ? '共 统计中...'
+                                        : `共 ${overviewStats.totalPosts.toLocaleString('zh-CN')} 条`}
+                                </span>
+                                <span className="feed-stats-divider" aria-hidden="true">｜</span>
                                 <button
                                     type="button"
                                     className={`feed-my-timeline-entry ${resolvedCurrentUserContact ? 'ready' : ''} ${myTimelineCountLoading ? 'loading' : ''}`}
@@ -1077,8 +1084,9 @@ export default function SnsPage() {
                                                 : '--'}
                                     </span>
                                 </button>
-                            <div className={`feed-stats-line ${overviewStatsStatus}`}>
+                            </div>
-                                {renderOverviewStats()}
+                            <div className={`feed-stats-line feed-stats-range ${overviewStatsStatus}`}>
+                                {renderOverviewRangeText()}
                             </div>
                         </div>
                         <div className="header-actions">