feat(export): refine top card copy and sns header count

src/pages/ExportPage.scss

@@ -320,6 +320,13 @@
     font-weight: 600;
   }
 
+  .card-title-meta {
+    color: var(--text-secondary);
+    font-size: 12px;
+    white-space: nowrap;
+    font-weight: 500;
+  }
+
   .card-refresh-hint {
     color: var(--text-tertiary);
     font-size: 11px;
@@ -1108,6 +1115,8 @@
 }
 
 .table-wrap {
+  --contacts-message-col-width: 92px;
+  --contacts-action-col-width: 172px;
   overflow: hidden;
   border: 1px solid var(--border-color);
   border-radius: 10px;
@@ -1227,6 +1236,37 @@
     word-break: break-word;
   }
 
+  .contacts-list-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px 8px;
+    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
+    background: color-mix(in srgb, var(--bg-primary) 78%, var(--bg-secondary));
+    font-size: 12px;
+    color: var(--text-tertiary);
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    flex-shrink: 0;
+  }
+
+  .contacts-list-header-main {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .contacts-list-header-count {
+    width: var(--contacts-message-col-width);
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  .contacts-list-header-actions {
+    width: var(--contacts-action-col-width);
+    text-align: right;
+    flex-shrink: 0;
+  }
+
   .contacts-list {
     flex: 1;
     min-height: 0;
@@ -1335,21 +1375,15 @@
   }
 
   .row-message-count {
-    min-width: 82px;
+    width: var(--contacts-message-col-width);
+    min-width: var(--contacts-message-col-width);
     display: flex;
-    flex-direction: column;
     align-items: flex-end;
-    gap: 2px;
+    justify-content: center;
     flex-shrink: 0;
     text-align: right;
   }
 
-  .row-message-count-label {
-    font-size: 11px;
-    color: var(--text-tertiary);
-    line-height: 1;
-  }
-
   .row-message-count-value {
     margin: 0;
     font-size: 13px;
@@ -1504,6 +1538,8 @@
   flex-direction: column;
   align-items: flex-end;
   gap: 4px;
+  width: var(--contacts-action-col-width);
+  flex-shrink: 0;
 
   .row-action-main {
     display: inline-flex;
@@ -2280,12 +2316,22 @@
 }
 
 @media (max-width: 720px) {
-  .table-wrap .row-message-count {
-    min-width: 66px;
+  .table-wrap {
+    --contacts-message-col-width: 66px;
+    --contacts-action-col-width: 148px;
   }
 
-  .table-wrap .row-message-count-label {
-    display: none;
+  .table-wrap .contacts-list-header {
+    gap: 8px;
+    padding: 8px 10px 6px;
+  }
+
+  .table-wrap .contacts-list {
+    padding: 0 10px 10px;
+  }
+
+  .table-wrap .row-message-count {
+    min-width: var(--contacts-message-col-width);
   }
 
   .diag-panel-header {

src/pages/ExportPage.tsx

@@ -2610,7 +2610,7 @@ function ExportPage() {
         ...item,
         label: contentTypeLabels[item.type],
         stats: [
-          { label: '已导出', value: exported }
+          { label: '已导出', value: exported, unit: '个对话' }
         ]
       }
     })
@@ -2619,9 +2619,9 @@ function ExportPage() {
       type: 'sns' as ContentCardType,
       icon: Aperture,
       label: '朋友圈',
+      headerCount: snsStats.totalPosts,
       stats: [
-        { label: '朋友圈条数', value: snsStats.totalPosts },
-        { label: '已导出', value: snsExportedCount }
+        { label: '已导出', value: snsExportedCount, unit: '条' }
       ]
     }
 
@@ -3661,6 +3661,15 @@ function ExportPage() {
             <div key={card.type} className="content-card">
               <div className="card-header">
                 <div className="card-title"><Icon size={16} /> {card.label}</div>
+                {card.type === 'sns' && (
+                  <div className="card-title-meta">
+                    {isCardStatsLoading ? (
+                      <span className="count-loading">
+                        统计中<span className="animated-ellipsis" aria-hidden="true">...</span>
+                      </span>
+                    ) : `${card.headerCount.toLocaleString()} 条`}
+                  </div>
+                )}
               </div>
               <div className="card-stats">
                 {card.stats.map((stat) => (
@@ -3671,7 +3680,7 @@ function ExportPage() {
                         <span className="count-loading">
                           统计中<span className="animated-ellipsis" aria-hidden="true">...</span>
                         </span>
-                      ) : stat.value.toLocaleString()}
+                      ) : `${stat.value.toLocaleString()} ${stat.unit}`}
                     </strong>
                   </div>
                 ))}
@@ -3951,6 +3960,12 @@ function ExportPage() {
                 <span>暂无联系人</span>
               </div>
             ) : (
+              <>
+                <div className="contacts-list-header">
+                  <span className="contacts-list-header-main">联系人（头像/名称/微信号）</span>
+                  <span className="contacts-list-header-count">总消息</span>
+                  <span className="contacts-list-header-actions">操作</span>
+                </div>
                 <div className="contacts-list" ref={contactsListRef} onScroll={onContactsListScroll}>
                   <div
                     className="contacts-list-virtual"
@@ -3992,7 +4007,6 @@ function ExportPage() {
                               <div className="contact-remark">{contact.username}</div>
                             </div>
                             <div className="row-message-count">
-                            <span className="row-message-count-label">总消息</span>
                               <strong className={`row-message-count-value ${typeof displayedMessageCount === 'number' ? '' : 'muted'}`}>
                                 {messageCountLabel}
                               </strong>
@@ -4032,6 +4046,7 @@ function ExportPage() {
                     })}
                   </div>
                 </div>
+              </>
             )}
           </div>