feat: animate load detail entry icon

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 {

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>