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,13 +6328,6 @@ function ExportPage() {
       <div className="session-table-section" ref={sessionTableSectionRef}>
         <div className="session-table-layout">
           <div className="table-wrap" style={contactsTableStyle}>
-            <div
-              ref={contactsHorizontalViewportRef}
-              className="table-scroll-viewport"
-              onScroll={handleContactsHorizontalViewportScroll}
-            >
-              <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')}>
@@ -6378,6 +6371,13 @@ function ExportPage() {
               </div>
             </div>
 
+            <div
+              ref={contactsHorizontalViewportRef}
+              className="table-scroll-viewport"
+              onScroll={handleContactsHorizontalViewportScroll}
+            >
+              <div ref={contactsHorizontalContentRef} className="table-scroll-content">
+                <div className="session-table-sticky">
                   {contactsList.length > 0 && isContactsListLoading && (
                     <div className="table-stage-hint">
                       <Loader2 size={14} className="spin" />