From 0f3ecdc4eeb2e911abb006b2f85321ae93f16e47 Mon Sep 17 00:00:00 2001
From: aits2026 <wxdaochu@gmail.com>
Date: Tue, 10 Mar 2026 14:39:23 +0800
Subject: [PATCH] fix(export): hide duplicate session table scrollbar

---
 src/pages/ExportPage.scss |   8 ++
 src/pages/ExportPage.tsx  | 254 +++++++++++++++++++-------------------
 2 files changed, 136 insertions(+), 126 deletions(-)

diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss
index 00730ba..596c2f8 100644
--- a/src/pages/ExportPage.scss
+++ b/src/pages/ExportPage.scss
@@ -1717,6 +1717,7 @@
 }
 
 .table-wrap {
+  --contacts-native-scrollbar-compensation: 18px;
   --contacts-row-height: 76px;
   --contacts-default-visible-rows: 10;
   --contacts-default-list-height: calc(var(--contacts-row-height) * var(--contacts-default-visible-rows));
@@ -1740,12 +1741,19 @@
 }
 
 .table-wrap {
+  .table-scroll-shell {
+    overflow: hidden;
+  }
+
   .table-scroll-viewport {
     min-height: 0;
     overflow-x: auto;
     overflow-y: visible;
     scrollbar-width: none;
+    -ms-overflow-style: none;
     background: var(--bg-secondary);
+    padding-bottom: var(--contacts-native-scrollbar-compensation);
+    margin-bottom: calc(-1 * var(--contacts-native-scrollbar-compensation));
 
     &::-webkit-scrollbar {
       display: none;
diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx
index fae2112..2a47938 100644
--- a/src/pages/ExportPage.tsx
+++ b/src/pages/ExportPage.tsx
@@ -6371,137 +6371,139 @@ 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" />
-                      联系人列表同步中…
-                    </div>
-                  )}
+            <div className="table-scroll-shell">
+              <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" />
+                        联系人列表同步中…
+                      </div>
+                    )}
 
-                  {hasFilteredContacts && (
-                    <div
-                      className={`contacts-list-header ${hasContactsHorizontalOverflow ? 'is-draggable' : ''} ${isContactsHeaderDragging ? 'is-dragging' : ''}`}
-                      onPointerDown={handleContactsHeaderPointerDown}
-                      onPointerMove={handleContactsHeaderPointerMove}
-                      onPointerUp={handleContactsHeaderPointerUp}
-                      onPointerCancel={handleContactsHeaderPointerCancel}
-                    >
-                      <span className="contacts-list-header-select">
-                        <button
-                          className={`select-icon-btn ${isAllVisibleSelected ? 'checked' : ''}`}
-                          type="button"
-                          onClick={toggleSelectAllVisible}
-                          disabled={visibleSelectableCount === 0}
-                          title={isAllVisibleSelected ? '取消全选当前筛选联系人' : '全选当前筛选联系人'}
-                        >
-                          {isAllVisibleSelected ? <CheckSquare size={16} /> : <Square size={16} />}
-                        </button>
-                      </span>
-                      <span className="contacts-list-header-main">
-                        <span className="contacts-list-header-main-label">{contactsHeaderMainLabel}</span>
-                      </span>
-                      <span className="contacts-list-header-count">总消息数</span>
-                      <span className="contacts-list-header-media">表情包</span>
-                      <span className="contacts-list-header-media">语音</span>
-                      <span className="contacts-list-header-media">图片</span>
-                      <span className="contacts-list-header-media">视频</span>
-                      {shouldShowSnsColumn && (
-                        <span className="contacts-list-header-media">朋友圈</span>
-                      )}
-                      {shouldShowMutualFriendsColumn && (
-                        <span className="contacts-list-header-media">共同好友</span>
-                      )}
-                      <span className="contacts-list-header-actions">
-                        {selectedCount > 0 && (
-                          <>
-                            <button
-                              className="selection-clear-btn"
-                              type="button"
-                              onClick={clearSelection}
-                            >
-                              清空
-                            </button>
-                            <button
-                              className="selection-export-btn"
-                              type="button"
-                              onClick={openBatchExport}
-                            >
-                              <span>批量导出</span>
-                              <span className="selection-export-count">{selectedCount}</span>
-                            </button>
-                          </>
+                    {hasFilteredContacts && (
+                      <div
+                        className={`contacts-list-header ${hasContactsHorizontalOverflow ? 'is-draggable' : ''} ${isContactsHeaderDragging ? 'is-dragging' : ''}`}
+                        onPointerDown={handleContactsHeaderPointerDown}
+                        onPointerMove={handleContactsHeaderPointerMove}
+                        onPointerUp={handleContactsHeaderPointerUp}
+                        onPointerCancel={handleContactsHeaderPointerCancel}
+                      >
+                        <span className="contacts-list-header-select">
+                          <button
+                            className={`select-icon-btn ${isAllVisibleSelected ? 'checked' : ''}`}
+                            type="button"
+                            onClick={toggleSelectAllVisible}
+                            disabled={visibleSelectableCount === 0}
+                            title={isAllVisibleSelected ? '取消全选当前筛选联系人' : '全选当前筛选联系人'}
+                          >
+                            {isAllVisibleSelected ? <CheckSquare size={16} /> : <Square size={16} />}
+                          </button>
+                        </span>
+                        <span className="contacts-list-header-main">
+                          <span className="contacts-list-header-main-label">{contactsHeaderMainLabel}</span>
+                        </span>
+                        <span className="contacts-list-header-count">总消息数</span>
+                        <span className="contacts-list-header-media">表情包</span>
+                        <span className="contacts-list-header-media">语音</span>
+                        <span className="contacts-list-header-media">图片</span>
+                        <span className="contacts-list-header-media">视频</span>
+                        {shouldShowSnsColumn && (
+                          <span className="contacts-list-header-media">朋友圈</span>
                         )}
-                      </span>
+                        {shouldShowMutualFriendsColumn && (
+                          <span className="contacts-list-header-media">共同好友</span>
+                        )}
+                        <span className="contacts-list-header-actions">
+                          {selectedCount > 0 && (
+                            <>
+                              <button
+                                className="selection-clear-btn"
+                                type="button"
+                                onClick={clearSelection}
+                              >
+                                清空
+                              </button>
+                              <button
+                                className="selection-export-btn"
+                                type="button"
+                                onClick={openBatchExport}
+                              >
+                                <span>批量导出</span>
+                                <span className="selection-export-count">{selectedCount}</span>
+                              </button>
+                            </>
+                          )}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+
+                  {contactsList.length === 0 && contactsLoadIssue ? (
+                    <div className="load-issue-state">
+                      <div className="issue-card">
+                        <div className="issue-title">
+                          <AlertTriangle size={18} />
+                          <span>{contactsLoadIssue.title}</span>
+                        </div>
+                        <p className="issue-message">{contactsLoadIssue.message}</p>
+                        <p className="issue-reason">{contactsLoadIssue.reason}</p>
+                        <ul className="issue-hints">
+                          <li>可能原因1：数据库当前仍在执行高开销查询（例如导出页后台统计）。</li>
+                          <li>可能原因2：contact.db 数据量较大，首次查询时间过长。</li>
+                          <li>可能原因3：数据库连接状态异常或 IPC 调用卡住。</li>
+                        </ul>
+                        <div className="issue-actions">
+                          <button className="issue-btn primary" onClick={() => void loadContactsList()}>
+                            <RefreshCw size={14} />
+                            <span>重试加载</span>
+                          </button>
+                          <button className="issue-btn" onClick={() => setShowContactsDiagnostics(prev => !prev)}>
+                            <ClipboardList size={14} />
+                            <span>{showContactsDiagnostics ? '收起诊断详情' : '查看诊断详情'}</span>
+                          </button>
+                          <button className="issue-btn" onClick={copyContactsDiagnostics}>
+                            <span>复制诊断信息</span>
+                          </button>
+                        </div>
+                        {showContactsDiagnostics && (
+                          <pre className="issue-diagnostics">{contactsDiagnosticsText}</pre>
+                        )}
+                      </div>
+                    </div>
+                  ) : isContactsListLoading && contactsList.length === 0 ? (
+                    <div className="loading-state">
+                      <Loader2 size={32} className="spin" />
+                      <span>联系人加载中...</span>
+                    </div>
+                  ) : !hasFilteredContacts ? (
+                    <div className="empty-state">
+                      <span>暂无联系人</span>
+                    </div>
+                  ) : (
+                    <div
+                      className="contacts-list"
+                      onWheelCapture={handleContactsListWheelCapture}
+                    >
+                      <Virtuoso
+                        ref={contactsVirtuosoRef}
+                        className="contacts-virtuoso"
+                        data={filteredContacts}
+                        computeItemKey={(_, contact) => contact.username}
+                        fixedItemHeight={76}
+                        itemContent={renderContactRow}
+                        rangeChanged={handleContactsRangeChanged}
+                        atTopStateChange={setIsContactsListAtTop}
+                        overscan={420}
+                      />
                     </div>
                   )}
                 </div>
-
-                {contactsList.length === 0 && contactsLoadIssue ? (
-                  <div className="load-issue-state">
-                    <div className="issue-card">
-                      <div className="issue-title">
-                        <AlertTriangle size={18} />
-                        <span>{contactsLoadIssue.title}</span>
-                      </div>
-                      <p className="issue-message">{contactsLoadIssue.message}</p>
-                      <p className="issue-reason">{contactsLoadIssue.reason}</p>
-                      <ul className="issue-hints">
-                        <li>可能原因1：数据库当前仍在执行高开销查询（例如导出页后台统计）。</li>
-                        <li>可能原因2：contact.db 数据量较大，首次查询时间过长。</li>
-                        <li>可能原因3：数据库连接状态异常或 IPC 调用卡住。</li>
-                      </ul>
-                      <div className="issue-actions">
-                        <button className="issue-btn primary" onClick={() => void loadContactsList()}>
-                          <RefreshCw size={14} />
-                          <span>重试加载</span>
-                        </button>
-                        <button className="issue-btn" onClick={() => setShowContactsDiagnostics(prev => !prev)}>
-                          <ClipboardList size={14} />
-                          <span>{showContactsDiagnostics ? '收起诊断详情' : '查看诊断详情'}</span>
-                        </button>
-                        <button className="issue-btn" onClick={copyContactsDiagnostics}>
-                          <span>复制诊断信息</span>
-                        </button>
-                      </div>
-                      {showContactsDiagnostics && (
-                        <pre className="issue-diagnostics">{contactsDiagnosticsText}</pre>
-                      )}
-                    </div>
-                  </div>
-                ) : isContactsListLoading && contactsList.length === 0 ? (
-                  <div className="loading-state">
-                    <Loader2 size={32} className="spin" />
-                    <span>联系人加载中...</span>
-                  </div>
-                ) : !hasFilteredContacts ? (
-                  <div className="empty-state">
-                    <span>暂无联系人</span>
-                  </div>
-                ) : (
-                  <div
-                    className="contacts-list"
-                    onWheelCapture={handleContactsListWheelCapture}
-                  >
-                    <Virtuoso
-                      ref={contactsVirtuosoRef}
-                      className="contacts-virtuoso"
-                      data={filteredContacts}
-                      computeItemKey={(_, contact) => contact.username}
-                      fixedItemHeight={76}
-                      itemContent={renderContactRow}
-                      rangeChanged={handleContactsRangeChanged}
-                      atTopStateChange={setIsContactsListAtTop}
-                      overscan={420}
-                    />
-                  </div>
-                )}
               </div>
             </div>