From ee4d1f5689f7dc9ed4b72262d05dd51025f981f0 Mon Sep 17 00:00:00 2001
From: aits2026 <wxdaochu@gmail.com>
Date: Tue, 10 Mar 2026 14:18:07 +0800
Subject: [PATCH] style: tighten export tab content layout

---
 src/pages/ExportPage.scss | 10 ++++++++--
 src/pages/ExportPage.tsx  | 15 ++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss
index 0595164..83a40da 100644
--- a/src/pages/ExportPage.scss
+++ b/src/pages/ExportPage.scss
@@ -1625,14 +1625,20 @@
     border: 1px solid var(--border-color);
     background: var(--bg-secondary);
     color: var(--text-secondary);
-    padding: 7px 8px;
+    padding: 7px 6px;
     border-radius: 999px;
     cursor: pointer;
     font-size: 13px;
     white-space: nowrap;
     display: inline-flex;
     align-items: center;
-    gap: 4px;
+
+    .tab-btn-content {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      line-height: 1;
+    }
 
     &.active {
       border-color: var(--primary);
diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx
index 4287c27..ae7460b 100644
--- a/src/pages/ExportPage.tsx
+++ b/src/pages/ExportPage.tsx
@@ -6338,13 +6338,22 @@ function ExportPage() {
                   <div className="table-toolbar">
                     <div className="table-tabs" role="tablist" aria-label="会话类型">
                       <button className={`tab-btn ${activeTab === 'private' ? 'active' : ''}`} onClick={() => setActiveTab('private')}>
-                        私聊 {isTabCountComputing ? <span className="count-loading">计算中<span className="animated-ellipsis" aria-hidden="true">...</span></span> : tabCounts.private}
+                        <span className="tab-btn-content">
+                          <span>私聊</span>
+                          <span>{isTabCountComputing ? <span className="count-loading">计算中<span className="animated-ellipsis" aria-hidden="true">...</span></span> : tabCounts.private}</span>
+                        </span>
                       </button>
                       <button className={`tab-btn ${activeTab === 'group' ? 'active' : ''}`} onClick={() => setActiveTab('group')}>
-                        群聊 {isTabCountComputing ? <span className="count-loading">计算中<span className="animated-ellipsis" aria-hidden="true">...</span></span> : tabCounts.group}
+                        <span className="tab-btn-content">
+                          <span>群聊</span>
+                          <span>{isTabCountComputing ? <span className="count-loading">计算中<span className="animated-ellipsis" aria-hidden="true">...</span></span> : tabCounts.group}</span>
+                        </span>
                       </button>
                       <button className={`tab-btn ${activeTab === 'former_friend' ? 'active' : ''}`} onClick={() => setActiveTab('former_friend')}>
-                        曾经的好友 {isTabCountComputing ? <span className="count-loading">计算中<span className="animated-ellipsis" aria-hidden="true">...</span></span> : tabCounts.former_friend}
+                        <span className="tab-btn-content">
+                          <span>曾经的好友</span>
+                          <span>{isTabCountComputing ? <span className="count-loading">计算中<span className="animated-ellipsis" aria-hidden="true">...</span></span> : tabCounts.former_friend}</span>
+                        </span>
                       </button>
                     </div>