更新

src/components/BatchTranscribeGlobal.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { Loader2, X, CheckCircle, XCircle, AlertCircle } from 'lucide-react'
+import { Loader2, X, CheckCircle, XCircle, AlertCircle, Clock } from 'lucide-react'
 import { useBatchTranscribeStore } from '../stores/batchTranscribeStore'
 import '../styles/batchTranscribe.scss'
 
@@ -16,10 +16,46 @@ export const BatchTranscribeGlobal: React.FC = () => {
     showResult,
     result,
     sessionName,
+    startTime,
     setShowToast,
     setShowResult
   } = useBatchTranscribeStore()
 
+  const [eta, setEta] = useState<string>('')
+
+  // 计算剩余时间
+  useEffect(() => {
+    if (!isBatchTranscribing || !startTime || progress.current === 0) {
+      setEta('')
+      return
+    }
+
+    const timer = setInterval(() => {
+      const now = Date.now()
+      const elapsed = now - startTime
+      const rate = progress.current / elapsed // ms per item
+      const remainingItems = progress.total - progress.current
+
+      if (remainingItems <= 0) {
+        setEta('')
+        return
+      }
+
+      const remainingTimeMs = remainingItems / rate
+      const remainingSeconds = Math.ceil(remainingTimeMs / 1000)
+
+      if (remainingSeconds < 60) {
+        setEta(`${remainingSeconds}秒`)
+      } else {
+        const minutes = Math.floor(remainingSeconds / 60)
+        const seconds = remainingSeconds % 60
+        setEta(`${minutes}分${seconds}秒`)
+      }
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [isBatchTranscribing, startTime, progress.current, progress.total])
+
   return (
     <>
       {/* 批量转写进度浮窗（非阻塞） */}
@@ -35,6 +71,7 @@ export const BatchTranscribeGlobal: React.FC = () => {
             </button>
           </div>
           <div className="batch-progress-toast-body">
+            <div className="progress-info-row">
               <div className="progress-text">
                 <span>{progress.current} / {progress.total}</span>
                 <span className="progress-percent">
@@ -43,6 +80,14 @@ export const BatchTranscribeGlobal: React.FC = () => {
                     : 0}%
                 </span>
               </div>
+              {eta && (
+                <div className="progress-eta">
+                  <Clock size={12} />
+                  <span>剩余 {eta}</span>
+                </div>
+              )}
+            </div>
+
             <div className="progress-bar">
               <div
                 className="progress-fill"

src/pages/ChatPage.tsx

@@ -1311,7 +1311,7 @@ function ChatPage(_props: ChatPageProps) {
     let successCount = 0
     let failCount = 0
     let completedCount = 0
-    const concurrency = 3
+    const concurrency = 10
 
     const transcribeOne = async (msg: Message) => {
       try {

src/stores/batchTranscribeStore.ts

@@ -12,6 +12,7 @@ export interface BatchTranscribeState {
   /** 转写结果 */
   result: { success: number; fail: number }
   /** 当前转写的会话名 */
+  startTime: number
   sessionName: string
 
   // Actions
@@ -30,6 +31,7 @@ export const useBatchTranscribeStore = create<BatchTranscribeState>((set) => ({
   showResult: false,
   result: { success: 0, fail: 0 },
   sessionName: '',
+  startTime: 0,
 
   startTranscribe: (total, sessionName) => set({
     isBatchTranscribing: true,
@@ -37,7 +39,8 @@ export const useBatchTranscribeStore = create<BatchTranscribeState>((set) => ({
     progress: { current: 0, total },
     showResult: false,
     result: { success: 0, fail: 0 },
-    sessionName
+    sessionName,
+    startTime: Date.now()
   }),
 
   updateProgress: (current, total) => set({
@@ -48,7 +51,8 @@ export const useBatchTranscribeStore = create<BatchTranscribeState>((set) => ({
     isBatchTranscribing: false,
     showToast: false,
     showResult: true,
-    result: { success, fail }
+    result: { success, fail },
+    startTime: 0
   }),
 
   setShowToast: (show) => set({ showToast: show }),
@@ -60,6 +64,7 @@ export const useBatchTranscribeStore = create<BatchTranscribeState>((set) => ({
     showToast: false,
     showResult: false,
     result: { success: 0, fail: 0 },
-    sessionName: ''
+    sessionName: '',
+    startTime: 0
   })
 }))

src/styles/batchTranscribe.scss

@@ -26,13 +26,25 @@
 }
 
 @keyframes batchFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes batchSlideUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 // 批量转写进度浮窗（非阻塞 toast）
@@ -64,7 +76,9 @@
       font-weight: 600;
       color: var(--text-primary);
 
-      svg { color: var(--primary-color); }
+      svg {
+        color: var(--primary);
+      }
     }
   }
 
@@ -90,21 +104,41 @@
   .batch-progress-toast-body {
     padding: 12px 14px;
 
+    .progress-info-row {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-bottom: 8px;
+
       .progress-text {
         display: flex;
         justify-content: space-between;
         align-items: center;
-      margin-bottom: 8px;
         font-size: 12px;
         color: var(--text-secondary);
 
         .progress-percent {
           font-weight: 600;
-        color: var(--primary-color);
+          color: var(--primary);
           font-size: 13px;
         }
       }
 
+      .progress-eta {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px; // 稍微小一点
+        color: var(--text-tertiary, #999); // 使用更淡的颜色
+
+        svg {
+          width: 12px;
+          height: 12px;
+          opacity: 0.8;
+        }
+      }
+    }
+
     .progress-bar {
       height: 6px;
       background: var(--bg-tertiary);
@@ -113,7 +147,7 @@
 
       .progress-fill {
         height: 100%;
-        background: linear-gradient(90deg, var(--primary-color), var(--primary-color));
+        background: linear-gradient(90deg, var(--primary), var(--primary));
         border-radius: 3px;
         transition: width 0.3s ease;
       }
@@ -122,8 +156,15 @@
 }
 
 @keyframes batchToastSlideIn {
-  from { opacity: 0; transform: translateY(16px) scale(0.96); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(16px) scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 // 批量转写结果对话框
@@ -138,7 +179,9 @@
     padding: 1.5rem;
     border-bottom: 1px solid var(--border-color);
 
-    svg { color: #4caf50; }
+    svg {
+      color: #4caf50;
+    }
 
     h3 {
       margin: 0;
@@ -165,7 +208,9 @@
         border-radius: 8px;
         background: var(--bg-tertiary);
 
-        svg { flex-shrink: 0; }
+        svg {
+          flex-shrink: 0;
+        }
 
         .label {
           font-size: 14px;
@@ -179,13 +224,23 @@
         }
 
         &.success {
-          svg { color: #4caf50; }
-          .value { color: #4caf50; }
+          svg {
+            color: #4caf50;
+          }
+
+          .value {
+            color: #4caf50;
+          }
         }
 
         &.fail {
-          svg { color: #f44336; }
-          .value { color: #f44336; }
+          svg {
+            color: #f44336;
+          }
+
+          .value {
+            color: #f44336;
+          }
         }
       }
     }
@@ -229,9 +284,12 @@
       border: none;
 
       &.btn-primary {
-        background: var(--primary-color);
+        background: var(--primary);
         color: white;
-        &:hover { opacity: 0.9; }
+
+        &:hover {
+          opacity: 0.9;
+        }
       }
     }
   }