fix(export): refine session export table layout

src/pages/ExportPage.scss

@@ -1736,6 +1736,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  background: var(--bg-secondary);
 }
 
 .table-wrap {
@@ -1744,6 +1745,7 @@
     overflow-x: auto;
     overflow-y: visible;
     scrollbar-width: none;
+    background: var(--bg-secondary);
 
     &::-webkit-scrollbar {
       display: none;
@@ -1758,7 +1760,7 @@
     position: sticky;
     top: 0;
     z-index: 20;
-    background: var(--card-bg);
+    background: var(--bg-secondary);
   }
 
   .loading-state,
@@ -1771,6 +1773,7 @@
     align-items: center;
     justify-content: center;
     gap: 12px;
+    background: var(--bg-secondary);
     color: var(--text-tertiary);
     font-size: 14px;
 
@@ -1785,11 +1788,12 @@
     flex: 1;
     padding: 14px;
     overflow-y: auto;
+    background: var(--bg-secondary);
   }
 
   .issue-card {
     border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border-color));
-    background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--card-bg));
+    background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--bg-secondary));
     border-radius: 12px;
     padding: 14px;
     color: var(--text-primary);
@@ -1863,7 +1867,7 @@
   .issue-diagnostics {
     margin-top: 12px;
     border-radius: 8px;
-    background: var(--bg-primary);
+    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-primary));
     border: 1px dashed var(--border-color);
     padding: 10px;
     font-size: 12px;
@@ -1880,7 +1884,7 @@
     padding: 10px var(--contacts-inline-padding) 8px;
     min-width: max(100%, var(--contacts-table-min-width));
     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));
+    background: color-mix(in srgb, var(--bg-secondary) 90%, var(--bg-primary));
     font-size: 12px;
     color: var(--text-tertiary);
     font-weight: 600;
@@ -1963,7 +1967,7 @@
     position: sticky;
     right: 0;
     z-index: 8;
-    background: var(--bg-primary);
+    background: var(--bg-secondary);
     white-space: nowrap;
 
     &::before {
@@ -1974,7 +1978,7 @@
       left: -8px;
       width: 8px;
       pointer-events: none;
-      background: linear-gradient(to right, transparent, var(--bg-primary));
+      background: linear-gradient(to right, transparent, var(--bg-secondary));
     }
   }
 
@@ -1986,6 +1990,7 @@
     height: var(--contacts-default-list-height);
     overflow: hidden;
     padding: 0 0 12px;
+    background: var(--bg-secondary);
   }
 
   .contacts-virtuoso {
@@ -2007,7 +2012,7 @@
     flex: 0 0 auto;
     overflow-x: auto;
     overflow-y: hidden;
-    background: color-mix(in srgb, var(--bg-primary) 86%, var(--bg-secondary));
+    background: color-mix(in srgb, var(--bg-secondary) 90%, var(--bg-primary));
     scrollbar-width: thin;
     scrollbar-color: color-mix(in srgb, var(--text-tertiary) 70%, transparent) transparent;
 
@@ -2357,11 +2362,12 @@
   min-width: 1300px;
   border-collapse: separate;
   border-spacing: 0;
+  background: var(--bg-secondary);
 
   thead th {
     position: sticky;
     top: 0;
-    background: color-mix(in srgb, var(--bg-primary) 75%, var(--bg-secondary));
+    background: color-mix(in srgb, var(--bg-secondary) 90%, var(--bg-primary));
     z-index: 4;
     font-size: 12px;
     text-align: left;
@@ -2491,7 +2497,7 @@
   position: sticky;
   right: 0;
   z-index: 10;
-  background: var(--bg-primary);
+  background: var(--bg-secondary);
 
   &::before {
     content: '';
@@ -2501,7 +2507,7 @@
     left: -8px;
     width: 8px;
     pointer-events: none;
-    background: linear-gradient(to right, transparent, var(--bg-primary));
+    background: linear-gradient(to right, transparent, var(--bg-secondary));
   }
 
   .row-action-main {

src/pages/ExportPage.tsx

@@ -6328,6 +6328,49 @@ function ExportPage() {
       <div className="session-table-section" ref={sessionTableSectionRef}>
         <div className="session-table-layout">
           <div className="table-wrap" style={contactsTableStyle}>
+            <div className="table-toolbar">
+              <div className="table-tabs" role="tablist" aria-label="会话类型">
+                <button className={`tab-btn ${activeTab === 'private' ? 'active' : ''}`} onClick={() => setActiveTab('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')}>
+                  <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')}>
+                  <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>
+
+              <div className="toolbar-actions">
+                <div className="search-input-wrap">
+                  <Search size={14} />
+                  <input
+                    value={searchKeyword}
+                    onChange={(event) => setSearchKeyword(event.target.value)}
+                    placeholder={`搜索${activeTabLabel}联系人...`}
+                  />
+                  {searchKeyword && (
+                    <button className="clear-search" onClick={() => setSearchKeyword('')}>
+                      <X size={12} />
+                    </button>
+                  )}
+                </div>
+                <button className="secondary-btn" onClick={() => void loadContactsList()} disabled={isContactsListLoading}>
+                  <RefreshCw size={14} className={isContactsListLoading ? 'spin' : ''} />
+                  刷新
+                </button>
+              </div>
+            </div>
+
             <div
               ref={contactsHorizontalViewportRef}
               className="table-scroll-viewport"
@@ -6335,49 +6378,6 @@ function ExportPage() {
             >
               <div ref={contactsHorizontalContentRef} className="table-scroll-content">
                 <div className="session-table-sticky">
-                  <div className="table-toolbar">
-                    <div className="table-tabs" role="tablist" aria-label="会话类型">
-                      <button className={`tab-btn ${activeTab === 'private' ? 'active' : ''}`} onClick={() => setActiveTab('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')}>
-                        <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')}>
-                        <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>
-
-                    <div className="toolbar-actions">
-                      <div className="search-input-wrap">
-                        <Search size={14} />
-                        <input
-                          value={searchKeyword}
-                          onChange={(event) => setSearchKeyword(event.target.value)}
-                          placeholder={`搜索${activeTabLabel}联系人...`}
-                        />
-                        {searchKeyword && (
-                          <button className="clear-search" onClick={() => setSearchKeyword('')}>
-                            <X size={12} />
-                          </button>
-                        )}
-                      </div>
-                      <button className="secondary-btn" onClick={() => void loadContactsList()} disabled={isContactsListLoading}>
-                        <RefreshCw size={14} className={isContactsListLoading ? 'spin' : ''} />
-                        刷新
-                      </button>
-                    </div>
-                  </div>
-
                   {contactsList.length > 0 && isContactsListLoading && (
                     <div className="table-stage-hint">
                       <Loader2 size={14} className="spin" />