From 18613e4035e8b4e1ad3639102afce1ca92e26c9b Mon Sep 17 00:00:00 2001
From: Misaka_Company <pengqiangqiang0@gmail.com>
Date: Fri, 17 Apr 2026 13:52:16 +0800
Subject: [PATCH] feat(cleaner): add video recording toggle to execution
 settings UI

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../cleaner/CleanerExecutionBar.tsx           | 20 +++++++++++++++++++
 src/renderer/src/pages/CleanerPage.tsx        |  4 ++++
 2 files changed, 24 insertions(+)

diff --git a/src/renderer/src/components/cleaner/CleanerExecutionBar.tsx b/src/renderer/src/components/cleaner/CleanerExecutionBar.tsx
index 35e34bc..1abe6a9 100644
--- a/src/renderer/src/components/cleaner/CleanerExecutionBar.tsx
+++ b/src/renderer/src/components/cleaner/CleanerExecutionBar.tsx
@@ -8,6 +8,8 @@ interface CleanerExecutionBarProps {
   setDryRun: (value: boolean) => void
   headless: boolean
   setHeadless: (value: boolean) => void
+  recordVideo: boolean
+  setRecordVideo: (value: boolean) => void
   processConcurrency: number
   updateProcessConcurrency: (value: number) => void
   showSettingsMenu: boolean
@@ -24,6 +26,8 @@ export function CleanerExecutionBar({
   setDryRun,
   headless,
   setHeadless,
+  recordVideo,
+  setRecordVideo,
   processConcurrency,
   updateProcessConcurrency,
   showSettingsMenu,
@@ -82,6 +86,22 @@ export function CleanerExecutionBar({
                     </button>
                   </div>
                 </div>
+                <div className="border-t border-slate-100 pt-3">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="text-sm font-medium text-slate-800">视频录制</div>
+                      <div className="text-xs text-slate-500 mt-0.5">
+                        录制浏览器操作过程，保存到 logs/video
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => setRecordVideo(!recordVideo)}
+                      className={`transition-colors flex-shrink-0 ml-4 ${recordVideo ? 'text-purple-500' : 'text-slate-300'}`}
+                    >
+                      {recordVideo ? <ToggleRight size={32} /> : <ToggleLeft size={32} />}
+                    </button>
+                  </div>
+                </div>
                 <div className="border-t border-slate-100 pt-3 space-y-3">
                   <div>
                     <div className="text-sm font-medium text-slate-800">并行处理数量</div>
diff --git a/src/renderer/src/pages/CleanerPage.tsx b/src/renderer/src/pages/CleanerPage.tsx
index db98dd4..ca2997d 100644
--- a/src/renderer/src/pages/CleanerPage.tsx
+++ b/src/renderer/src/pages/CleanerPage.tsx
@@ -40,6 +40,8 @@ const CleanerPage: React.FC = () => {
     setIsTypeDialogOpen,
     headless,
     setHeadless,
+    recordVideo,
+    setRecordVideo,
     processConcurrency,
     updateProcessConcurrency,
     showSettingsMenu,
@@ -124,6 +126,8 @@ const CleanerPage: React.FC = () => {
           setDryRun={setDryRun}
           headless={headless}
           setHeadless={setHeadless}
+          recordVideo={recordVideo}
+          setRecordVideo={setRecordVideo}
           processConcurrency={processConcurrency}
           updateProcessConcurrency={updateProcessConcurrency}
           showSettingsMenu={showSettingsMenu}