Merge feature/cleaner-progress into dev

Merged progress indicator feature for cleaner execution: - CleanerProgress type for tracking execution progress - Progress calculation: (1 + i + j/Mᵢ)/(1+N) × 100 - cleaner.onProgress IPC event for real-time updates - Enhanced ExecutionReportDialog with progress bar - Progress state management in useCleaner hook
2026-03-05 13:28:34 +08:00
parent ba64c27457 dc01896d8b
commit 49ac29e70c
8 changed files with 481 additions and 133 deletions
--- a/src/main/ipc/cleaner-handler.ts
+++ b/src/main/ipc/cleaner-handler.ts
@@ -1,4 +1,4 @@
-import { ipcMain } from 'electron'
+import { ipcMain, webContents } from 'electron'
 import { ErpAuthService } from '../services/erp/erp-auth'
 import { CleanerService } from '../services/erp/cleaner'
 import { OrderNumberResolver } from '../services/erp/order-resolver'
@@ -11,12 +11,38 @@ import { ErpConnectionError, ValidationError, DatabaseQueryError } from '../type
 import type {
  CleanerInput,
  CleanerResult,
+  CleanerProgress,
  ExportResultItem,
  ExportResultResponse
 } from '../types/cleaner.types'

 const log = createLogger('CleanerHandler')

+function sendProgress(
+  windowId: number,
+  message: string,
+  progress: number,
+  extra?: Partial<CleanerProgress>
+): void {
+  try {
+    const progressData: CleanerProgress = {
+      message,
+      progress,
+      currentOrderIndex: extra?.currentOrderIndex ?? 0,
+      totalOrders: extra?.totalOrders ?? 0,
+      currentMaterialIndex: extra?.currentMaterialIndex ?? 0,
+      totalMaterialsInOrder: extra?.totalMaterialsInOrder ?? 0,
+      currentOrderNumber: extra?.currentOrderNumber,
+      phase: extra?.phase ?? 'processing'
+    }
+    webContents.getAllWebContents().forEach((wc) => {
+      wc.send('cleaner:progress', progressData)
+    })
+  } catch (error) {
+    log.warn('Failed to send progress event', { error })
+  }
+}
+
 async function getDatabaseService(): Promise<MySqlService | SqlServerService> {
  const dbType = process.env.DB_TYPE?.toLowerCase()

@@ -50,7 +76,9 @@ async function getDatabaseService(): Promise<MySqlService | SqlServerService> {
 export function registerCleanerHandlers(): void {
  ipcMain.handle(
    'cleaner:run',
-    async (_event, input: CleanerInput): Promise<IpcResult<CleanerResult>> => {
+    async (event, input: CleanerInput): Promise<IpcResult<CleanerResult>> => {
+      const windowId = event.sender.id
+
      return withErrorHandling(async () => {
        let authService: ErpAuthService | null = null
        let dbService: MySqlService | SqlServerService | null = null
@@ -125,12 +153,25 @@ export function registerCleanerHandlers(): void {
          }
          log.info('Login successful')

+          // Send login complete progress
+          const totalOrders = validOrderNumbers.length
+          const loginProgress = (1 / (1 + totalOrders)) * 100
+          sendProgress(windowId, 'ERP 登录成功', loginProgress, {
+            phase: 'login',
+            currentOrderIndex: 0,
+            totalOrders,
+            currentMaterialIndex: 0,
+            totalMaterialsInOrder: 0
+          })
+
          const cleaner = new CleanerService(authService)

          const modifiedInput: CleanerInput = {
            ...input,
            orderNumbers: validOrderNumbers,
-            onProgress: input.onProgress
+            onProgress: (message, progress, extra) => {
+              sendProgress(windowId, message, progress ?? 0, extra)
+            }
          }

          log.info('Starting cleaning', { orderCount: validOrderNumbers.length })
@@ -140,6 +181,15 @@ export function registerCleanerHandlers(): void {
            result.errors = [...warnings, ...result.errors]
          }

+          // Send completion progress
+          sendProgress(windowId, '清理完成', 100, {
+            phase: 'complete',
+            currentOrderIndex: totalOrders,
+            totalOrders,
+            currentMaterialIndex: 0,
+            totalMaterialsInOrder: 0
+          })
+
          log.info('Cleaning completed', {
            processedCount: result.ordersProcessed,
            errorCount: result.errors.length
--- a/src/main/services/erp/cleaner.ts
+++ b/src/main/services/erp/cleaner.ts
@@ -87,6 +87,8 @@ export class CleanerService {
      details: []
    }

+    const totalOrders = input.orderNumbers.length
+
    // Create delete set for O(1) lookup
    const deleteSet = new Set(input.materialCodes)

@@ -100,14 +102,8 @@ export class CleanerService {
      await this.setupQueryInterface(workFrame)

      // Process each order
-      for (let i = 0; i < input.orderNumbers.length; i++) {
+      for (let i = 0; i < totalOrders; i++) {
        const orderNumber = input.orderNumbers[i]
-        const progress = ((i + 1) / input.orderNumbers.length) * 100
-
-        input.onProgress?.(
-          `Processing order ${i + 1}/${input.orderNumbers.length}: ${orderNumber}`,
-          progress
-        )

        try {
          const detail = await this.processOrder({
@@ -115,7 +111,7 @@ export class CleanerService {
            popupPage,
            orderNumber,
            orderIndex: i,
-            totalOrders: input.orderNumbers.length,
+            totalOrders,
            deleteSet,
            dryRun: input.dryRun ?? this.dryRun,
            onProgress: input.onProgress
@@ -212,7 +208,11 @@ export class CleanerService {
    totalOrders: number
    deleteSet: Set<string>
    dryRun: boolean
-    onProgress?: (message: string, progress?: number) => void
+    onProgress?: (
+      message: string,
+      progress?: number,
+      extra?: Partial<import('../../types/cleaner.types').CleanerProgress>
+    ) => void
  }): Promise<OrderCleanDetail> {
    const {
      workFrame,
@@ -280,6 +280,19 @@ export class CleanerService {
      const statusMatch = statusText.replace(/\n/g, '').match(/备料状态:(.+)$/)
      const detailStatus = statusMatch ? statusMatch[1].trim() : ''

+      // Send progress for order start
+      onProgress?.(
+        `开始处理订单 ${orderIndex + 1}/${totalOrders}: ${orderNumber}`,
+        ((1 + orderIndex) / (1 + totalOrders)) * 100,
+        {
+          currentOrderIndex: orderIndex + 1,
+          totalOrders,
+          currentMaterialIndex: 0,
+          totalMaterialsInOrder: detailCount,
+          currentOrderNumber: orderNumber
+        }
+      )
+
      // Process based on status (Python lines 228-441)
      if (detailStatus === '审批通过' && detailCount > 0) {
        // Click modify button (Python line 235)
@@ -319,10 +332,20 @@ export class CleanerService {
          const materialName = await this.getInputValue(childForm, /^材料名称/)
          const pendingQty = await this.getInputValue(childForm, /^累计待发数量$/)

-          // Report progress
+          // Report progress using formula: (1 + i + j/Mᵢ) / (1 + N) × 100
+          // where i = orderIndex (0-based), j = materialIdx (1-based), Mᵢ = detailCount, N = totalOrders
+          const progress = ((1 + orderIndex + materialIdx / detailCount) / (1 + totalOrders)) * 100
+
          onProgress?.(
-            `Order ${orderNumber} - Material ${materialIdx}/${detailCount}: ${materialName}`,
-            ((orderIndex + materialIdx / detailCount) / totalOrders) * 100
+            `订单 ${orderIndex + 1}/${totalOrders} - 物料 ${materialIdx}/${detailCount}: ${materialName}`,
+            progress,
+            {
+              currentOrderIndex: orderIndex + 1,
+              totalOrders,
+              currentMaterialIndex: materialIdx,
+              totalMaterialsInOrder: detailCount,
+              currentOrderNumber: orderNumber
+            }
          )

          // Check if should delete (Python lines 284-406)
--- a/src/main/types/cleaner.types.ts
+++ b/src/main/types/cleaner.types.ts
@@ -1,9 +1,22 @@
+export type CleanerPhase = 'login' | 'processing' | 'complete'
+
+export interface CleanerProgress {
+  message: string
+  progress: number
+  currentOrderIndex: number
+  totalOrders: number
+  currentMaterialIndex: number
+  totalMaterialsInOrder: number
+  currentOrderNumber?: string
+  phase: CleanerPhase
+}
+
 export interface CleanerInput {
  orderNumbers: string[]
  materialCodes: string[]
  dryRun: boolean
  headless?: boolean
-  onProgress?: (message: string, progress?: number) => void
+  onProgress?: (message: string, progress?: number, extra?: Partial<CleanerProgress>) => void
 }

 export interface CleanerResult {
--- a/src/main/types/ipc-api.types.ts
+++ b/src/main/types/ipc-api.types.ts
@@ -7,6 +7,7 @@ import type { ExtractorInput, ExtractorResult, ExtractionProgress } from './extr
 import type {
  CleanerInput,
  CleanerResult,
+  CleanerProgress,
  ExportResultItem,
  ExportResultResponse
 } from './cleaner.types'
@@ -108,6 +109,13 @@ export interface CleanerAPI {
   * @param items - Validation result items to export
   */
  exportResults: (items: ExportResultItem[]) => Promise<ExportResultResponse>
+
+  /**
+   * Subscribe to progress updates
+   * @param callback - Callback function receiving progress data
+   * @returns Unsubscribe function
+   */
+  onProgress: (callback: (data: CleanerProgress) => void) => () => void
 }

 /**
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -2,7 +2,7 @@ import { contextBridge, ipcRenderer } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
 import type { MySqlConfig, SqlServerConfig } from '../main/types/ipc-api.types'
 import type { ExtractorInput, ExtractionProgress } from '../main/types/extractor.types'
-import type { CleanerInput, ExportResultItem } from '../main/types/cleaner.types'
+import type { CleanerInput, CleanerProgress, ExportResultItem } from '../main/types/cleaner.types'
 import type { ResolverInput } from '../main/ipc/resolver-handler'
 import type { LoginRequest } from '../main/ipc/auth-handler'
 import type { UserInfo } from '../main/types/user.types'
@@ -47,7 +47,14 @@ const api = {
  // Cleaner service
  cleaner: {
    runCleaner: (input: CleanerInput) => ipcRenderer.invoke('cleaner:run', input),
-    exportResults: (items: ExportResultItem[]) => ipcRenderer.invoke('cleaner:exportResults', items)
+    exportResults: (items: ExportResultItem[]) =>
+      ipcRenderer.invoke('cleaner:exportResults', items),
+    onProgress: (callback: (data: CleanerProgress) => void) => {
+      const subscription = (_event: Electron.IpcRendererEvent, data: CleanerProgress) =>
+        callback(data)
+      ipcRenderer.on('cleaner:progress', subscription)
+      return () => ipcRenderer.removeListener('cleaner:progress', subscription)
+    }
  },

  // Order number resolver
--- a/src/renderer/src/components/ExecutionReportDialog.tsx
+++ b/src/renderer/src/components/ExecutionReportDialog.tsx
@@ -1,142 +1,220 @@
 /**
- * Execution Report Dialog - Shows execution results after cleaner runs
+ * Execution Report Dialog - Shows execution progress and results after cleaner runs
 *
 * Displays:
- * - Orders processed count
- * - Materials deleted count
- * - Materials skipped count
+ * - Progress bar during execution
+ * - Orders processed count, Materials deleted/skipped count after completion
 * - Error list (if any)
 */

 import React from 'react'
-import { CheckCircle, XCircle, SkipForward, Package } from 'lucide-react'
+import { CheckCircle, XCircle, SkipForward, Package, Loader2 } from 'lucide-react'
+
+interface CleanerProgress {
+  message: string
+  progress: number
+  currentOrderIndex: number
+  totalOrders: number
+  currentMaterialIndex: number
+  totalMaterialsInOrder: number
+  currentOrderNumber?: string
+  phase: 'login' | 'processing' | 'complete'
+}

 interface ExecutionReportDialogProps {
  isOpen: boolean
  onClose: () => void
-  ordersProcessed: number
-  materialsDeleted: number
-  materialsSkipped: number
+  ordersProcessed?: number
+  materialsDeleted?: number
+  materialsSkipped?: number
  errors?: string[]
  dryRun?: boolean
+  isExecuting?: boolean
+  progress?: CleanerProgress | null
 }

 export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
  isOpen,
  onClose,
-  ordersProcessed,
-  materialsDeleted,
-  materialsSkipped,
+  ordersProcessed = 0,
+  materialsDeleted = 0,
+  materialsSkipped = 0,
  errors = [],
-  dryRun = false
+  dryRun = false,
+  isExecuting = false,
+  progress = null
 }) => {
  if (!isOpen) return null

  const hasErrors = errors.length > 0
+  const showProgress = isExecuting && progress

  return (
    <div className="execution-report-overlay" onClick={onClose}>
-      <div className="execution-report-dialog" onClick={(e) => e.stopPropagation()}>
-        <div className="report-header">
-          <div className="report-icon-wrapper">
-            {dryRun ? (
-              <Package className="report-icon preview" />
-            ) : hasErrors ? (
-              <XCircle className="report-icon error" />
-            ) : (
-              <CheckCircle className="report-icon success" />
-            )}
+      <div
+        className="execution-report-dialog"
+        onClick={(e) => e.stopPropagation()}
+        style={{ width: showProgress ? '560px' : '480px' }}
+      >
+        {showProgress ? (
+          // Progress View
+          <div className="progress-header">
+            <div className="progress-icon-wrapper">
+              <Loader2 className="progress-icon spinning" />
+            </div>
+            <h2 className="progress-title">正在执行清理...</h2>
+            <p className="progress-subtitle">{progress?.message || '处理中...'}</p>
          </div>
-          <h2 className="report-title">
-            {dryRun ? '预览执行报告' : hasErrors ? '执行完成 (有错误)' : '执行完成'}
-          </h2>
-          <p className="report-subtitle">
-            {dryRun
-              ? '预览模式 - 未实际删除数据'
-              : hasErrors
-                ? '部分操作未能完成，请查看下方错误信息'
-                : '所有操作已成功完成'}
-          </p>
-        </div>
+        ) : (
+          // Result View
+          <div className="report-header">
+            <div className="report-icon-wrapper">
+              {dryRun ? (
+                <Package className="report-icon preview" />
+              ) : hasErrors ? (
+                <XCircle className="report-icon error" />
+              ) : (
+                <CheckCircle className="report-icon success" />
+              )}
+            </div>
+            <h2 className="report-title">
+              {dryRun ? '预览执行报告' : hasErrors ? '执行完成 (有错误)' : '执行完成'}
+            </h2>
+            <p className="report-subtitle">
+              {dryRun
+                ? '预览模式 - 未实际删除数据'
+                : hasErrors
+                  ? '部分操作未能完成，请查看下方错误信息'
+                  : '所有操作已成功完成'}
+            </p>
+          </div>
+        )}

        <div className="report-body">
-          <div className="stats-grid">
-            <div className="stat-card">
-              <div className="stat-icon orders">
-                <Package size={20} />
+          {showProgress ? (
+            // Progress View Content
+            <div className="progress-content">
+              <div className="progress-bar-container">
+                <div
+                  className="progress-bar-fill"
+                  style={{ width: `${progress?.progress || 0}%` }}
+                />
              </div>
-              <div className="stat-content">
-                <div className="stat-label">处理订单</div>
-                <div className="stat-value">{ordersProcessed}</div>
-              </div>
-            </div>

-            <div className="stat-card">
-              <div className="stat-icon deleted">
-                <CheckCircle size={20} />
-              </div>
-              <div className="stat-content">
-                <div className="stat-label">{dryRun ? '拟删除物料' : '删除物料'}</div>
-                <div className="stat-value">{materialsDeleted}</div>
-              </div>
-            </div>
-
-            <div className="stat-card">
-              <div className="stat-icon skipped">
-                <SkipForward size={20} />
-              </div>
-              <div className="stat-content">
-                <div className="stat-label">跳过物料</div>
-                <div className="stat-value">{materialsSkipped}</div>
-              </div>
-            </div>
-
-            {hasErrors && (
-              <div className="stat-card">
-                <div className="stat-icon errors">
-                  <XCircle size={20} />
+              <div className="progress-stats">
+                <div className="progress-stat-item">
+                  <span className="stat-label">订单进度</span>
+                  <span className="stat-value">
+                    {Math.min(progress!.currentOrderIndex, progress!.totalOrders)} /{' '}
+                    {progress!.totalOrders}
+                  </span>
                </div>
-                <div className="stat-content">
-                  <div className="stat-label">错误数量</div>
-                  <div className="stat-value error">{errors.length}</div>
-                </div>
-              </div>
-            )}
-          </div>
-
-          {hasErrors && (
-            <div className="errors-section">
-              <div className="errors-title">错误详情</div>
-              <div className="errors-list">
-                {errors.map((error, index) => (
-                  <div key={index} className="error-item">
-                    <XCircle size={14} className="error-icon" />
-                    <span className="error-text">{error}</span>
+                {progress!.totalMaterialsInOrder > 0 && (
+                  <div className="progress-stat-item">
+                    <span className="stat-label">物料进度</span>
+                    <span className="stat-value">
+                      {progress!.currentMaterialIndex} / {progress!.totalMaterialsInOrder}
+                    </span>
                  </div>
-                ))}
+                )}
+                <div className="progress-stat-item">
+                  <span className="stat-label">总进度</span>
+                  <span className="stat-value">{Math.round(progress?.progress || 0)}%</span>
+                </div>
              </div>
-            </div>
-          )}

-          {!hasErrors && !dryRun && (
-            <div className="success-message">
-              <CheckCircle size={16} className="success-icon" />
-              <span>操作已成功完成，数据已同步到 ERP 系统</span>
+              {progress?.currentOrderNumber && (
+                <div className="current-order-info">
+                  <Package size={14} className="order-icon" />
+                  <span className="order-label">当前订单:</span>
+                  <span className="order-number">{progress.currentOrderNumber}</span>
+                </div>
+              )}
            </div>
-          )}
+          ) : (
+            // Result View Content
+            <>
+              <div className="stats-grid">
+                <div className="stat-card">
+                  <div className="stat-icon orders">
+                    <Package size={20} />
+                  </div>
+                  <div className="stat-content">
+                    <div className="stat-label">处理订单</div>
+                    <div className="stat-value">{ordersProcessed}</div>
+                  </div>
+                </div>

-          {!hasErrors && dryRun && (
-            <div className="preview-message">
-              <Package size={16} className="preview-icon" />
-              <span>预览模式结束，数据未实际修改。确认无误后可正式执行。</span>
-            </div>
+                <div className="stat-card">
+                  <div className="stat-icon deleted">
+                    <CheckCircle size={20} />
+                  </div>
+                  <div className="stat-content">
+                    <div className="stat-label">{dryRun ? '拟删除物料' : '删除物料'}</div>
+                    <div className="stat-value">{materialsDeleted}</div>
+                  </div>
+                </div>
+
+                <div className="stat-card">
+                  <div className="stat-icon skipped">
+                    <SkipForward size={20} />
+                  </div>
+                  <div className="stat-content">
+                    <div className="stat-label">跳过物料</div>
+                    <div className="stat-value">{materialsSkipped}</div>
+                  </div>
+                </div>
+
+                {hasErrors && (
+                  <div className="stat-card">
+                    <div className="stat-icon errors">
+                      <XCircle size={20} />
+                    </div>
+                    <div className="stat-content">
+                      <div className="stat-label">错误数量</div>
+                      <div className="stat-value error">{errors.length}</div>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {hasErrors && (
+                <div className="errors-section">
+                  <div className="errors-title">错误详情</div>
+                  <div className="errors-list">
+                    {errors.map((error, index) => (
+                      <div key={index} className="error-item">
+                        <XCircle size={14} className="error-icon" />
+                        <span className="error-text">{error}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {!hasErrors && !dryRun && (
+                <div className="success-message">
+                  <CheckCircle size={16} className="success-icon" />
+                  <span>操作已成功完成，数据已同步到 ERP 系统</span>
+                </div>
+              )}
+
+              {!hasErrors && dryRun && (
+                <div className="preview-message">
+                  <Package size={16} className="preview-icon" />
+                  <span>预览模式结束，数据未实际修改。确认无误后可正式执行。</span>
+                </div>
+              )}
+            </>
          )}
        </div>

        <div className="report-footer">
-          <button className="btn-report-close" onClick={onClose}>
-            关闭
-          </button>
+          {!showProgress && (
+            <button className="btn-report-close" onClick={onClose}>
+              关闭
+            </button>
+          )}
        </div>

        <style>{`
@@ -174,27 +252,58 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
            }
          }

+          @keyframes spin {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(360deg);
+            }
+          }
+
          .execution-report-dialog {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-            width: 480px;
            max-width: 90vw;
            animation: slideDown 0.2s ease-out;
+            transition: width 0.3s ease;
          }

+          .progress-header,
          .report-header {
            text-align: center;
            padding: 24px 24px 16px 24px;
            border-bottom: 1px solid #f0f0f0;
          }

+          .progress-icon-wrapper,
          .report-icon-wrapper {
            display: flex;
            justify-content: center;
            margin-bottom: 12px;
          }

+          .progress-icon {
+            width: 48px;
+            height: 48px;
+            color: #1890ff;
+            animation: spin 1.5s linear infinite;
+          }
+
+          .progress-title {
+            font-size: 20px;
+            font-weight: 600;
+            color: #333;
+            margin: 0 0 8px 0;
+          }
+
+          .progress-subtitle {
+            font-size: 13px;
+            color: #666;
+            margin: 0;
+          }
+
          .report-icon {
            width: 48px;
            height: 48px;
@@ -229,6 +338,112 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
            padding: 20px 24px;
          }

+          /* Progress View Styles */
+          .progress-content {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+          }
+
+          .progress-bar-container {
+            width: 100%;
+            height: 24px;
+            background: linear-gradient(90deg, #e6f7ff 0%, #bae7ff 100%);
+            border-radius: 12px;
+            overflow: hidden;
+            border: 1px solid #91d5ff;
+            position: relative;
+          }
+
+          .progress-bar-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #1890ff 0%, #096dd9 100%);
+            border-radius: 12px;
+            transition: width 0.3s ease;
+            position: relative;
+            overflow: hidden;
+          }
+
+          .progress-bar-fill::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(
+              90deg,
+              transparent 0%,
+              rgba(255, 255, 255, 0.3) 50%,
+              transparent 100%
+            );
+            animation: shimmer 1.5s infinite;
+          }
+
+          @keyframes shimmer {
+            0% {
+              transform: translateX(-100%);
+            }
+            100% {
+              transform: translateX(100%);
+            }
+          }
+
+          .progress-stats {
+            display: flex;
+            justify-content: space-around;
+            padding: 16px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border: 1px solid #e8e8e8;
+          }
+
+          .progress-stat-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+          }
+
+          .progress-stat-item .stat-label {
+            font-size: 12px;
+            color: #666;
+          }
+
+          .progress-stat-item .stat-value {
+            font-size: 18px;
+            font-weight: 600;
+            color: #1890ff;
+          }
+
+          .current-order-info {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 12px;
+            background: #f0f5ff;
+            border-radius: 6px;
+            border: 1px solid #d6e4ff;
+          }
+
+          .current-order-info .order-icon {
+            color: #1890ff;
+          }
+
+          .current-order-info .order-label {
+            font-size: 13px;
+            color: #666;
+          }
+
+          .current-order-info .order-number {
+            font-size: 14px;
+            font-weight: 500;
+            color: #333;
+            font-family: monospace;
+          }
+
+          /* Result View Styles */
          .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
@@ -368,10 +583,7 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
            border: 1px solid #ffd591;
          }

-          .success-icon {
-            flex-shrink: 0;
-          }
-
+          .success-icon,
          .preview-icon {
            flex-shrink: 0;
          }
--- a/src/renderer/src/hooks/useCleaner.ts
+++ b/src/renderer/src/hooks/useCleaner.ts
@@ -10,6 +10,17 @@ export interface ValidationResult {
  matchedTypeKeyword?: string
 }

+export interface CleanerProgress {
+  message: string
+  progress: number
+  currentOrderIndex: number
+  totalOrders: number
+  currentMaterialIndex: number
+  totalMaterialsInOrder: number
+  currentOrderNumber?: string
+  phase: 'login' | 'processing' | 'complete'
+}
+
 export function useCleaner() {
  // Authentication & permissions
  const [isAdmin, setIsAdmin] = useState(false)
@@ -37,6 +48,7 @@ export function useCleaner() {
  const [isRunning, setIsRunning] = useState(false)
  const [isValidationRunning, setIsValidationRunning] = useState(false)
  const [isExporting, setIsExporting] = useState(false)
+  const [isExecuting, setIsExecuting] = useState(false)

  // Shared Production IDs state
  const [sharedProductionIdsCount, setSharedProductionIdsCount] = useState(0)
@@ -53,6 +65,9 @@ export function useCleaner() {
    errors: string[]
  } | null>(null)

+  // Progress state
+  const [progress, setProgress] = useState<CleanerProgress | null>(null)
+
  // Execution settings state
  const [headless, setHeadless] = useState(() => {
    const saved = sessionStorage.getItem('cleaner_headless')
@@ -96,6 +111,17 @@ export function useCleaner() {
    initializePage()
  }, [])

+  // Subscribe to cleaner progress events
+  useEffect(() => {
+    const unsubscribeProgress = window.electron.cleaner.onProgress((data) => {
+      setProgress(data)
+    })
+
+    return () => {
+      unsubscribeProgress()
+    }
+  }, [])
+
  useEffect(() => {
    sessionStorage.setItem('cleaner_dryRun', dryRun.toString())
  }, [dryRun])
@@ -288,6 +314,10 @@ export function useCleaner() {
    }

    setIsRunning(true)
+    setIsExecuting(true)
+    setProgress(null)
+    setIsReportDialogOpen(true)
+
    try {
      const cleanerDataResult = await window.electron.validation.getCleanerData()
      if (!cleanerDataResult.success) {
@@ -316,7 +346,6 @@ export function useCleaner() {
          materialsSkipped: response.data.materialsSkipped,
          errors: response.data.errors
        })
-        setIsReportDialogOpen(true)
      } else {
        throw new Error(response.error || '清理失败')
      }
@@ -324,6 +353,8 @@ export function useCleaner() {
      alert(err instanceof Error ? err.message : '发生未知错误')
    } finally {
      setIsRunning(false)
+      setIsExecuting(false)
+      setProgress(null)
    }
  }

@@ -376,6 +407,7 @@ export function useCleaner() {
    selectedManagers,
    setSelectedManagers,
    isRunning,
+    isExecuting,
    isValidationRunning,
    isExporting,
    sharedProductionIdsCount,
@@ -397,6 +429,7 @@ export function useCleaner() {
    saveEdit,
    cancelEdit,
    handleAssignManagerOnSelect,
+    progress,
    handleValidation,
    handleCheckboxToggle,
    handleConfirmDeletion,
--- a/src/renderer/src/pages/CleanerPage.tsx
+++ b/src/renderer/src/pages/CleanerPage.tsx
@@ -35,6 +35,7 @@ const CleanerPage: React.FC = () => {
    selectedManagers,
    setSelectedManagers,
    isRunning,
+    isExecuting,
    isValidationRunning,
    isExporting,
    isTypeDialogOpen,
@@ -55,6 +56,7 @@ const CleanerPage: React.FC = () => {
    saveEdit,
    cancelEdit,
    handleAssignManagerOnSelect,
+    progress,
    handleValidation,
    handleCheckboxToggle,
    handleConfirmDeletion,
@@ -473,17 +475,17 @@ const CleanerPage: React.FC = () => {
      />

      {/* Execution Report Dialog */}
-      {reportData && (
-        <ExecutionReportDialog
-          isOpen={isReportDialogOpen}
-          onClose={() => setIsReportDialogOpen(false)}
-          ordersProcessed={reportData.ordersProcessed}
-          materialsDeleted={reportData.materialsDeleted}
-          materialsSkipped={reportData.materialsSkipped}
-          errors={reportData.errors}
-          dryRun={dryRun}
-        />
-      )}
+      <ExecutionReportDialog
+        isOpen={isReportDialogOpen}
+        onClose={() => setIsReportDialogOpen(false)}
+        ordersProcessed={reportData?.ordersProcessed}
+        materialsDeleted={reportData?.materialsDeleted}
+        materialsSkipped={reportData?.materialsSkipped}
+        errors={reportData?.errors}
+        dryRun={dryRun}
+        isExecuting={isExecuting}
+        progress={progress}
+      />
    </div>
  )
 }