From 57e8a96a4a197f476bcc3c69f7265fe15a73f71c Mon Sep 17 00:00:00 2001
From: aits2026 <wxdaochu@gmail.com>
Date: Fri, 6 Mar 2026 17:09:23 +0800
Subject: [PATCH] feat: animate load detail entry icon

---
 src/pages/ExportPage.scss | 56 +++++++++++++++++++++++++++++++++++++++
 src/pages/ExportPage.tsx  | 16 +++++++++--
 2 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss
index 439bb0d..ccde095 100644
--- a/src/pages/ExportPage.scss
+++ b/src/pages/ExportPage.scss
@@ -52,6 +52,62 @@
     color: var(--text-primary);
     background: color-mix(in srgb, var(--primary) 8%, var(--bg-secondary));
   }
+
+  &.active {
+    border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color));
+    background: color-mix(in srgb, var(--primary) 8%, var(--bg-secondary));
+    color: var(--text-primary);
+  }
+}
+
+.session-load-detail-entry-icon {
+  width: 16px;
+  height: 14px;
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.session-load-detail-entry-bar {
+  width: 3px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary) 78%, var(--text-tertiary));
+  opacity: 0.82;
+  animation: sessionLoadDetailBars 1.8s ease-in-out infinite;
+
+  &:nth-child(1) {
+    height: 7px;
+    animation-delay: 0s;
+  }
+
+  &:nth-child(2) {
+    height: 11px;
+    animation-delay: 0.18s;
+  }
+
+  &:nth-child(3) {
+    height: 9px;
+    animation-delay: 0.36s;
+  }
+}
+
+.session-load-detail-entry.active .session-load-detail-entry-bar {
+  animation-duration: 1.1s;
+  opacity: 1;
+}
+
+@keyframes sessionLoadDetailBars {
+  0%, 100% {
+    transform: scaleY(0.72);
+    opacity: 0.5;
+  }
+
+  50% {
+    transform: scaleY(1.18);
+    opacity: 1;
+  }
 }
 
 .export-section-title {
diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx
index 37a0bf7..085af11 100644
--- a/src/pages/ExportPage.tsx
+++ b/src/pages/ExportPage.tsx
@@ -5580,6 +5580,14 @@ function ExportPage() {
     }
     return latest
   }, [sessionLoadDetailRows])
+  const isSessionLoadDetailActive = useMemo(() => (
+    sessionLoadDetailRows.some(row => (
+      row.messageCount.statusLabel.startsWith('加载中') ||
+      row.mediaMetrics.statusLabel.startsWith('加载中') ||
+      row.snsPostCounts.statusLabel.startsWith('加载中') ||
+      row.mutualFriends.statusLabel.startsWith('加载中')
+    ))
+  ), [sessionLoadDetailRows])
   const closeTaskCenter = useCallback(() => {
     setIsTaskCenterOpen(false)
     setExpandedPerfTaskId(null)
@@ -6093,11 +6101,15 @@ function ExportPage() {
           ]}
         />
         <button
-          className="session-load-detail-entry"
+          className={`session-load-detail-entry ${isSessionLoadDetailActive ? 'active' : ''}`}
           type="button"
           onClick={() => setShowSessionLoadDetailModal(true)}
         >
-          <ClipboardList size={14} />
+          <span className="session-load-detail-entry-icon" aria-hidden="true">
+            <span className="session-load-detail-entry-bar" />
+            <span className="session-load-detail-entry-bar" />
+            <span className="session-load-detail-entry-bar" />
+          </span>
           <span>数据加载详情</span>
         </button>
       </div>