From adff7b9e1e5d546c80f95be4acbcfb37be65eb97 Mon Sep 17 00:00:00 2001
From: tisonhuang <tison@tss-MacBook-Pro.local>
Date: Sun, 1 Mar 2026 16:24:12 +0800
Subject: [PATCH] feat(export): refine task center and loading interactions

---
 src/pages/ExportPage.scss | 121 +++++++++++++++++++++++++-
 src/pages/ExportPage.tsx  | 173 ++++++++++++++++++++++++--------------
 2 files changed, 229 insertions(+), 65 deletions(-)

diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss
index 5f31d01..e8a1380 100644
--- a/src/pages/ExportPage.scss
+++ b/src/pages/ExportPage.scss
@@ -41,6 +41,13 @@
     gap: 6px;
   }
 
+  .path-inline-row {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
   .path-value {
     border: 1px dashed var(--border-color);
     border-radius: 10px;
@@ -51,11 +58,29 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .path-link {
+    cursor: pointer;
+    text-align: left;
+
+    &:hover:not(:disabled) {
+      border-color: var(--primary);
+      color: var(--primary);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.65;
+    }
   }
 
   .path-actions {
     display: flex;
     gap: 8px;
+    flex-shrink: 0;
   }
 
   .write-layout-control {
@@ -75,10 +100,15 @@
     font-size: 13px;
     text-align: left;
     cursor: pointer;
+    transition: border-color 0.12s ease;
 
     &:hover {
       border-color: var(--primary);
     }
+
+    &.active {
+      border-color: var(--primary);
+    }
   }
 
   .layout-dropdown {
@@ -94,8 +124,21 @@
     z-index: 3000;
     max-height: 260px;
     overflow-y: auto;
-    opacity: 1;
+    opacity: 0;
+    transform: translateY(-4px);
+    pointer-events: none;
+    visibility: hidden;
+    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s step-end;
     backdrop-filter: none;
+    will-change: opacity, transform;
+
+    &.open {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+      visibility: visible;
+      transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s step-start;
+    }
   }
 
   .layout-option {
@@ -201,6 +244,15 @@
   }
 }
 
+.count-loading {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 1px;
+}
+
 .task-center {
   border: 1px solid var(--border-color);
   border-radius: 12px;
@@ -208,14 +260,51 @@
   padding: 12px;
   flex-shrink: 0;
 
+  .task-center-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+  }
+
   .section-title {
     font-size: 14px;
     font-weight: 700;
     color: var(--text-primary);
-    margin-bottom: 8px;
+    margin: 0;
+    flex-shrink: 0;
+  }
+
+  .task-summary {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    white-space: nowrap;
+  }
+
+  .task-collapse-btn {
+    border: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    padding: 4px 8px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--primary);
+      color: var(--primary);
+    }
   }
 
   .task-empty {
+    margin-top: 10px;
     padding: 12px;
     background: var(--bg-secondary);
     border-radius: 8px;
@@ -224,6 +313,7 @@
   }
 
   .task-list {
+    margin-top: 10px;
     display: grid;
     gap: 8px;
     max-height: 190px;
@@ -377,6 +467,7 @@
     white-space: nowrap;
     display: inline-flex;
     align-items: center;
+    gap: 4px;
 
     &.active {
       border-color: var(--primary);
@@ -386,6 +477,14 @@
   }
 }
 
+.animated-ellipsis {
+  display: inline-block;
+  width: 0;
+  overflow: hidden;
+  vertical-align: bottom;
+  animation: exportDots 1s steps(4, end) infinite;
+}
+
 .toolbar-actions {
   display: flex;
   align-items: center;
@@ -952,6 +1051,15 @@
   }
 }
 
+@keyframes exportDots {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 1.8em;
+  }
+}
+
 @media (max-width: 1360px) {
   .export-top-panel {
     grid-template-columns: 1fr;
@@ -959,6 +1067,15 @@
 
   .global-export-controls {
     grid-template-columns: 1fr;
+
+    .path-inline-row {
+      flex-wrap: wrap;
+    }
+
+    .path-actions {
+      width: 100%;
+      justify-content: flex-end;
+    }
   }
 
   .content-card-grid {
diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx
index c7c2daf..486d31e 100644
--- a/src/pages/ExportPage.tsx
+++ b/src/pages/ExportPage.tsx
@@ -2,6 +2,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import {
   Aperture,
+  ChevronDown,
+  ChevronRight,
   CheckSquare,
   Download,
   ExternalLink,
@@ -241,6 +243,8 @@ function ExportPage() {
   const [isLoading, setIsLoading] = useState(true)
   const [isSessionEnriching, setIsSessionEnriching] = useState(false)
   const [isSnsStatsLoading, setIsSnsStatsLoading] = useState(true)
+  const [isBaseConfigLoading, setIsBaseConfigLoading] = useState(true)
+  const [isTaskCenterExpanded, setIsTaskCenterExpanded] = useState(false)
   const [sessions, setSessions] = useState<SessionRow[]>([])
   const [sessionMetrics, setSessionMetrics] = useState<Record<string, SessionMetrics>>({})
   const [searchKeyword, setSearchKeyword] = useState('')
@@ -296,6 +300,7 @@ function ExportPage() {
   const sessionLoadTokenRef = useRef(0)
   const loadingMetricsRef = useRef<Set<string>>(new Set())
   const preselectAppliedRef = useRef(false)
+  const writeLayoutControlRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
     tasksRef.current = tasks
@@ -323,6 +328,7 @@ function ExportPage() {
   }, [])
 
   const loadBaseConfig = useCallback(async () => {
+    setIsBaseConfigLoading(true)
     try {
       const [savedPath, savedFormat, savedMedia, savedVoiceAsText, savedExcelCompactColumns, savedTxtColumns, savedConcurrency, savedWriteLayout, savedSessionMap, savedContentMap, savedSnsPostCount] = await Promise.all([
         configService.getExportPath(),
@@ -362,6 +368,8 @@ function ExportPage() {
       }))
     } catch (error) {
       console.error('加载导出配置失败:', error)
+    } finally {
+      setIsBaseConfigLoading(false)
     }
   }, [])
 
@@ -499,6 +507,18 @@ function ExportPage() {
     preselectAppliedRef.current = false
   }, [location.key, preselectSessionIds])
 
+  useEffect(() => {
+    if (!showWriteLayoutSelect) return
+
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (writeLayoutControlRef.current?.contains(event.target as Node)) return
+      setShowWriteLayoutSelect(false)
+    }
+
+    document.addEventListener('mousedown', handleOutsideClick)
+    return () => document.removeEventListener('mousedown', handleOutsideClick)
+  }, [showWriteLayoutSelect])
+
   useEffect(() => {
     if (preselectAppliedRef.current) return
     if (sessions.length === 0 || preselectSessionIds.length === 0) return
@@ -1275,6 +1295,10 @@ function ExportPage() {
   const formatCandidateOptions = exportDialog.scope === 'sns'
     ? formatOptions.filter(option => option.value === 'html' || option.value === 'json')
     : formatOptions
+  const isTabCountComputing = isLoading || isSessionEnriching
+  const isSessionCardStatsLoading = isLoading || isBaseConfigLoading
+  const taskRunningCount = tasks.filter(task => task.status === 'running').length
+  const taskQueuedCount = tasks.filter(task => task.status === 'queued').length
   const showInitialSkeleton = isLoading && sessions.length === 0
 
   return (
@@ -1283,75 +1307,76 @@ function ExportPage() {
         <div className="global-export-controls">
           <div className="path-control">
             <span className="control-label">导出位置</span>
-            <div className="path-value" title={exportFolder}>{exportFolder || '未设置'}</div>
-            <div className="path-actions">
-              <button className="secondary-btn" onClick={() => exportFolder && void window.electronAPI.shell.openPath(exportFolder)}>
-                <ExternalLink size={14} /> 打开目录
-              </button>
+            <div className="path-inline-row">
               <button
-                className="secondary-btn"
-                onClick={async () => {
-                  const result = await window.electronAPI.dialog.openFile({
-                    title: '选择导出目录',
-                    properties: ['openDirectory']
-                  })
-                  if (!result.canceled && result.filePaths.length > 0) {
-                    const nextPath = result.filePaths[0]
-                    setExportFolder(nextPath)
-                    await configService.setExportPath(nextPath)
-                  }
-                }}
+                className="path-value path-link"
+                type="button"
+                title={exportFolder}
+                disabled={!exportFolder}
+                onClick={() => exportFolder && void window.electronAPI.shell.openPath(exportFolder)}
               >
-                <FolderOpen size={14} /> 更换目录
+                {exportFolder || '未设置'}
               </button>
+              <div className="path-actions">
+                <button className="secondary-btn" onClick={() => exportFolder && void window.electronAPI.shell.openPath(exportFolder)}>
+                  <ExternalLink size={14} /> 打开
+                </button>
+                <button
+                  className="secondary-btn"
+                  onClick={async () => {
+                    const result = await window.electronAPI.dialog.openFile({
+                      title: '选择导出目录',
+                      properties: ['openDirectory']
+                    })
+                    if (!result.canceled && result.filePaths.length > 0) {
+                      const nextPath = result.filePaths[0]
+                      setExportFolder(nextPath)
+                      await configService.setExportPath(nextPath)
+                    }
+                  }}
+                >
+                  <FolderOpen size={14} /> 更换
+                </button>
+              </div>
             </div>
           </div>
 
-          <div className="write-layout-control">
+          <div className="write-layout-control" ref={writeLayoutControlRef}>
             <span className="control-label">写入目录方式</span>
-            <button className="layout-trigger" onClick={() => setShowWriteLayoutSelect(prev => !prev)}>
+            <button
+              className={`layout-trigger ${showWriteLayoutSelect ? 'active' : ''}`}
+              type="button"
+              onClick={() => setShowWriteLayoutSelect(prev => !prev)}
+            >
               {writeLayoutLabel}
             </button>
-            {showWriteLayoutSelect && (
-              <div className="layout-dropdown">
-                {writeLayoutOptions.map(option => (
-                  <button
-                    key={option.value}
-                    className={`layout-option ${writeLayout === option.value ? 'active' : ''}`}
-                    onClick={async () => {
-                      setWriteLayout(option.value)
-                      setShowWriteLayoutSelect(false)
-                      await configService.setExportWriteLayout(option.value)
-                    }}
-                  >
-                    <span className="layout-option-label">{option.label}</span>
-                    <span className="layout-option-desc">{option.desc}</span>
-                  </button>
-                ))}
-              </div>
-            )}
+            <div className={`layout-dropdown ${showWriteLayoutSelect ? 'open' : ''}`}>
+              {writeLayoutOptions.map(option => (
+                <button
+                  key={option.value}
+                  className={`layout-option ${writeLayout === option.value ? 'active' : ''}`}
+                  type="button"
+                  onClick={async () => {
+                    setWriteLayout(option.value)
+                    setShowWriteLayoutSelect(false)
+                    await configService.setExportWriteLayout(option.value)
+                  }}
+                >
+                  <span className="layout-option-label">{option.label}</span>
+                  <span className="layout-option-desc">{option.desc}</span>
+                </button>
+              ))}
+            </div>
           </div>
         </div>
       </div>
 
       <div className="content-card-grid">
-        {showInitialSkeleton ? Array.from({ length: 6 }).map((_, index) => (
-          <div key={`skeleton-card-${index}`} className="content-card skeleton-card">
-            <div className="skeleton-shimmer skeleton-line w-60"></div>
-            <div className="card-stats">
-              <div className="stat-item">
-                <span className="skeleton-shimmer skeleton-line w-40"></span>
-                <strong className="skeleton-shimmer skeleton-line w-20"></strong>
-              </div>
-              <div className="stat-item">
-                <span className="skeleton-shimmer skeleton-line w-40"></span>
-                <strong className="skeleton-shimmer skeleton-line w-20"></strong>
-              </div>
-            </div>
-            <div className="skeleton-shimmer skeleton-line w-100 h-32"></div>
-          </div>
-        )) : contentCards.map(card => {
+        {contentCards.map(card => {
           const Icon = card.icon
+          const isCardStatsLoading = card.type === 'sns'
+            ? (isSnsStatsLoading || isBaseConfigLoading)
+            : isSessionCardStatsLoading
           return (
             <div key={card.type} className="content-card">
               <div className="card-header">
@@ -1361,7 +1386,13 @@ function ExportPage() {
                 {card.stats.map((stat) => (
                   <div key={stat.label} className="stat-item">
                     <span>{stat.label}</span>
-                    <strong>{isSnsStatsLoading && card.type === 'sns' ? '--' : stat.value.toLocaleString()}</strong>
+                    <strong>
+                      {isCardStatsLoading ? (
+                        <span className="count-loading">
+                          统计中<span className="animated-ellipsis" aria-hidden="true">...</span>
+                        </span>
+                      ) : stat.value.toLocaleString()}
+                    </strong>
                   </div>
                 ))}
               </div>
@@ -1382,9 +1413,25 @@ function ExportPage() {
         })}
       </div>
 
-      <div className="task-center">
-        <div className="section-title">任务中心</div>
-        {tasks.length === 0 ? (
+      <div className={`task-center ${isTaskCenterExpanded ? 'expanded' : 'collapsed'}`}>
+        <div className="task-center-header">
+          <div className="section-title">任务中心</div>
+          <div className="task-summary">
+            <span>进行中 {taskRunningCount}</span>
+            <span>排队 {taskQueuedCount}</span>
+            <span>总计 {tasks.length}</span>
+          </div>
+          <button
+            className="task-collapse-btn"
+            type="button"
+            onClick={() => setIsTaskCenterExpanded(prev => !prev)}
+          >
+            {isTaskCenterExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+            {isTaskCenterExpanded ? '收起' : '展开'}
+          </button>
+        </div>
+
+        {isTaskCenterExpanded && (tasks.length === 0 ? (
           <div className="task-empty">暂无任务。点击会话导出或卡片导出后会在这里创建任务。</div>
         ) : (
           <div className="task-list">
@@ -1422,23 +1469,23 @@ function ExportPage() {
               </div>
             ))}
           </div>
-        )}
+        ))}
       </div>
 
       <div className="session-table-section">
         <div className="table-toolbar">
           <div className="table-tabs" role="tablist" aria-label="会话类型">
             <button className={`tab-btn ${activeTab === 'private' ? 'active' : ''}`} onClick={() => setActiveTab('private')}>
-              私聊（{tabCounts.private}）
+              私聊 {isTabCountComputing ? <span className="count-loading">计算中<span className="animated-ellipsis" aria-hidden="true">...</span></span> : tabCounts.private}
             </button>
             <button className={`tab-btn ${activeTab === 'group' ? 'active' : ''}`} onClick={() => setActiveTab('group')}>
-              群聊（{tabCounts.group}）
+              群聊 {isTabCountComputing ? <span className="count-loading">计算中<span className="animated-ellipsis" aria-hidden="true">...</span></span> : tabCounts.group}
             </button>
             <button className={`tab-btn ${activeTab === 'official' ? 'active' : ''}`} onClick={() => setActiveTab('official')}>
-              公众号（{tabCounts.official}）
+              公众号 {isTabCountComputing ? <span className="count-loading">计算中<span className="animated-ellipsis" aria-hidden="true">...</span></span> : tabCounts.official}
             </button>
             <button className={`tab-btn ${activeTab === 'former_friend' ? 'active' : ''}`} onClick={() => setActiveTab('former_friend')}>
-              曾经的好友（{tabCounts.former_friend}）
+              曾经的好友 {isTabCountComputing ? <span className="count-loading">计算中<span className="animated-ellipsis" aria-hidden="true">...</span></span> : tabCounts.former_friend}
             </button>
           </div>