android-midscene-automation 0.1.26 → 0.1.28

package/src/appium-recorder/AppiumPage.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { computed, h, onMounted, onUnmounted, reactive, shallowRef, watch } from 'vue';
 import { ElForm, ElFormItem, ElInputNumber, ElMessage, ElMessageBox, ElOption, ElSelect } from 'element-plus';
-import { Check, CircleClose, CopyDocument, Delete, Document, Download, Refresh, Upload, VideoPlay, View } from '@element-plus/icons-vue';
+import { Check, CircleClose, CopyDocument, Delete, Document, Download, Edit, Plus, Refresh, Upload, VideoPlay, View } from '@element-plus/icons-vue';
 import type { AndroidDevice, AppPreset, DeviceAction } from '../types';
 import DevicePreviewPanel from '../components/device/DevicePreviewPanel.vue';
 import {
-  appiumScriptDownloadUrl,
   clearAppiumDeviceAppData,
   deleteAppiumScript,
+  downloadAppiumScript,
   getAppiumScripts,
   getAppiumTree,
   importAppiumScript,
@@ -20,16 +20,45 @@ import {
 import ComponentTree from './components/ComponentTree.vue';
 import FlowCanvas from './components/FlowCanvas.vue';
 import NodeDetail from './components/NodeDetail.vue';
+import LongPressSettings from './components/LongPressSettings.vue';
+import StageLogSettings from './components/StageLogSettings.vue';
+import TextClickSettings from './components/TextClickSettings.vue';
+import { textClickSelector } from './text-click';
+import { DEFAULT_LOG_PREFIX, validateStageLog } from './stage-log';
 import RecordedSteps from './components/RecordedSteps.vue';
+import NewScriptDialog from './components/NewScriptDialog.vue';
+import VisualChangeDialog from './components/VisualChangeDialog.vue';
+import AiRecognitionTestDialog from './components/AiRecognitionTestDialog.vue';
+import { validateAiRecognitionPrompt } from './ai-recognition';
 import {
   createFlowClipboard,
   pasteFlowClipboard,
   type FlowClipboard,
 } from './flow-copy';
 import { labelFlowStep } from './flow-labels';
+import { validateLongPress } from './long-press';
+import { nativeControlName, nativeControlType } from './native-control-state';
+import { normalizeLegacyNestedConditionBranches } from './flow-normalize';
+import { removeFlowStep } from './flow-remove';
 import type { FlowActionGroup, InsertAction } from './flow-graph';
 import { findSmallestNodeAtPoint, flattenNodes, parseWindowHierarchy } from './tree';
-import type { AppiumNode, AppiumRecordedScript, AppiumRecordedStep } from './types';
+import {
+  boundsToVisualRegion,
+  createStepId,
+  normalizeVisualChangeConfig,
+  visualRegionToBounds,
+} from './visual-change';
+import {
+  findOpenVisualChangeStart,
+  nextVisualChangePairLabel,
+} from './visual-change-pairs';
+import type {
+  AppiumNode,
+  AppiumRecordedScript,
+  AppiumRecordedStep,
+  AppiumVisualChangeConfig,
+  AppiumVisualChangeRegion,
+} from './types';
 
 type NodeStepType = 'tap' | 'input' | 'assertExists' | 'waitFor';
 type BranchName = 'yes' | 'no';
@@ -43,29 +72,7 @@ type BranchTarget = {
   entryTargetId?: string;
   nextTargetId?: string;
 };
-type RecorderAction =
-  | 'delay'
-  | NodeStepType
-  | 'tapIfExists'
-  | 'inputIfExists'
-  | 'clearIfExists'
-  | 'backIfExists'
-  | 'popupCondition'
-  | 'runScript'
-  | 'keyBack'
-  | 'keyHome'
-  | 'keyRecent'
-  | 'keyPower'
-  | 'waitActivity'
-  | 'swipe'
-  | 'clearInput'
-  | 'coordinateTap'
-  | 'launchApp'
-  | 'clearAppData'
-  | 'waitDisappear'
-  | 'assertText'
-  | 'longPress'
-  | 'pinch';
+type RecorderAction = InsertAction;
 
 const WORKBENCH_TAB_STORAGE_KEY = 'android-midscene-automation:appium-workbench-tab';
 const AUTO_TREE_REFRESH_INTERVAL_MS = 1800;
@@ -81,6 +88,10 @@ const insertableRecorderActions: RecorderAction[] = [
   'clearIfExists',
   'backIfExists',
   'popupCondition',
+  'checkboxState',
+  'radioButtonState',
+  'aiRecognition',
+  'textClick',
   'runScript',
   'keyBack',
   'keyHome',
@@ -96,11 +107,16 @@ const insertableRecorderActions: RecorderAction[] = [
   'assertText',
   'longPress',
   'pinch',
+  'noop',
+  'log',
+  'visualChangeStart',
+  'visualChangeEnd',
 ];
 const readonlyFlowActionGroups: FlowActionGroup[] = [];
 const readonlyFlowSelectedIndexes: number[] = [];
 
 const props = defineProps<{
+  aiRecognitionModelConfigured?: boolean;
   active: boolean;
   appPresets: AppPreset[];
   deviceActions: readonly DeviceAction[];
@@ -129,9 +145,12 @@ const tree = shallowRef<AppiumNode | null>(null);
 const selectedNode = shallowRef<AppiumNode | null>(null);
 const scripts = shallowRef<AppiumRecordedScript[]>([]);
 const selectedScriptId = shallowRef('');
+const newScriptDialogVisible = shallowRef(false);
+const newScriptRevision = shallowRef(0);
 const storedWorkbenchTab = window.localStorage.getItem(WORKBENCH_TAB_STORAGE_KEY);
 const activeWorkbenchTab = shallowRef<'recording' | 'scripts'>(storedWorkbenchTab === 'scripts' ? 'scripts' : 'recording');
 const steps = shallowRef<AppiumRecordedStep[]>([]);
+const aiRecognitionTestStep = shallowRef<AppiumRecordedStep | null>(null);
 const flowClipboard = shallowRef<FlowClipboard | null>(null);
 const rawXml = shallowRef('');
 const currentActivity = shallowRef('');
@@ -145,11 +164,19 @@ const linkedScriptExpectedActivity = shallowRef('');
 const linkedScriptPreviewVisible = shallowRef(false);
 const linkedScriptPreviewScriptId = shallowRef('');
 const linkedScriptPreviewResetToken = shallowRef(0);
+const visualChangeDialogVisible = shallowRef(false);
+const visualChangePicking = shallowRef(false);
+const visualChangeInsertIndex = shallowRef<number | undefined>();
+const visualChangeBranchTarget = shallowRef<BranchTarget | null>(null);
+const visualChangeConfig = shallowRef<AppiumVisualChangeConfig>(normalizeVisualChangeConfig());
 const loadingTree = shallowRef(false);
 const saving = shallowRef(false);
 const importingScript = shallowRef(false);
 const scriptImportInput = shallowRef<HTMLInputElement | null>(null);
 const deletingScriptId = shallowRef('');
+const duplicatingScriptId = shallowRef('');
+const renamingScriptId = shallowRef('');
+const downloadingScriptId = shallowRef('');
 const replaying = shallowRef(false);
 const stoppingReplay = shallowRef(false);
 const activeReplayDeviceId = shallowRef('');
@@ -222,6 +249,7 @@ const recordingBusy = computed(() => (
   || Boolean(pendingNavigation.value)
 ));
 const recordingLocked = computed(() => recordingBusy.value || scriptActivityMismatch.value);
+const newScriptDisabled = computed(() => saving.value || replaying.value || recordingBusy.value || launchingApp.value || importingScript.value);
 const overlayBounds = computed(() => flattenNodes(tree.value).flatMap((node) => (
   node.bounds ? [{ id: node.id, ...node.bounds }] : []
 )));
@@ -229,16 +257,38 @@ const selectedBounds = computed(() => {
   const bounds = selectedNode.value?.bounds;
   return bounds && selectedNode.value ? { id: selectedNode.value.id, ...bounds } : undefined;
 });
+const visualChangeSelectedRegion = computed(() => {
+  if (!visualChangeDialogVisible.value || visualChangeConfig.value.mode !== 'region') return undefined;
+  return visualRegionToBounds('visual-change-region', visualChangeConfig.value.region);
+});
+const visualChangeRegionSelectionEnabled = computed(() => (
+  visualChangeDialogVisible.value && visualChangeConfig.value.mode === 'region'
+));
 
-function insertStep(step: AppiumRecordedStep, index?: number) {
-  const nextSteps = [...steps.value];
-  let insertedStep = step;
+function stepWithBranchTarget(step: AppiumRecordedStep, branchTarget: BranchTarget) {
+  return {
+    ...step,
+    flow: {
+      ...(step.flow || {}),
+      parentConditionId: branchTarget.stepId,
+      parentBranch: branchTarget.branch,
+      ...(branchTarget.nextTargetId ? { successTargetId: branchTarget.nextTargetId } : {}),
+    },
+  };
+}
+
+function insertStep(step: AppiumRecordedStep, index?: number, branchTarget?: BranchTarget) {
+  let nextSteps = [...steps.value];
+  let insertedStep = branchTarget ? stepWithBranchTarget(step, branchTarget) : step;
   if (index === -1) {
     nextSteps.unshift(insertedStep);
   } else if (typeof index === 'number') {
     const previousStep = nextSteps[index];
     const previousTargetId = previousStep?.flow?.successTargetId;
-    if (previousStep && previousTargetId) {
+    const shouldRewireSuccess = previousStep
+      && previousTargetId
+      && !(branchTarget && previousStep.id === branchTarget.stepId);
+    if (shouldRewireSuccess) {
       insertedStep = {
         ...insertedStep,
         flow: {
@@ -256,7 +306,22 @@ function insertStep(step: AppiumRecordedStep, index?: number) {
     }
     nextSteps.splice(index + 1, 0, insertedStep);
   } else {
-    nextSteps.push(step);
+    nextSteps.push(insertedStep);
+  }
+  if (branchTarget?.updateTarget) {
+    const targetKey = branchTarget.branch === 'yes' ? 'yesTargetId' : 'noTargetId';
+    nextSteps = nextSteps.map((item) => (
+      item.id === branchTarget.stepId
+        ? {
+            ...item,
+            flow: {
+              ...(item.flow || {}),
+              nodeKind: 'condition',
+              [targetKey]: branchTarget.entryTargetId || insertedStep.id,
+            },
+          }
+        : item
+    ));
   }
   steps.value = nextSteps;
   return insertedStep;
@@ -287,6 +352,7 @@ function pasteFlowNodes(index: number, branch?: BranchName) {
     });
     steps.value = nextSteps;
     ElMessage.success(`已粘贴 ${flowClipboardCount.value} 个节点${branch ? `到${branch === 'yes' ? '是' : '否'}分支` : ''}`);
+    flowClipboard.value = null;
   } catch (error) {
     ElMessage.warning(error instanceof Error ? error.message : '粘贴节点失败');
   }
@@ -334,17 +400,38 @@ function attachStepToBranch(stepId: string, conditionId: string, branch: BranchN
   ));
 }
 
+function applyBranchTargetToInsertedStep(inserted: AppiumRecordedStep, branchTarget: BranchTarget) {
+  attachStepToBranch(inserted.id, branchTarget.stepId, branchTarget.branch);
+  if (branchTarget.nextTargetId) {
+    steps.value = steps.value.map((step) => (
+      step.id === inserted.id
+        ? {
+            ...step,
+            flow: { ...(step.flow || {}), successTargetId: branchTarget.nextTargetId },
+          }
+        : step
+    ));
+  }
+  if (branchTarget.updateTarget) {
+    updateBranchTarget(
+      branchTarget.stepId,
+      branchTarget.branch,
+      branchTarget.entryTargetId || inserted.id,
+    );
+  }
+}
+
 function branchContextForInsert(index: number, branch: BranchName) {
   const anchor = steps.value[index];
   if (!anchor) return undefined;
+  if (anchor.flow?.nodeKind === 'condition') {
+    return { condition: anchor, conditionIndex: index };
+  }
   if (anchor.flow?.parentConditionId && anchor.flow.parentBranch === branch) {
     const conditionIndex = steps.value.findIndex((step) => step.id === anchor.flow?.parentConditionId);
     const condition = conditionIndex >= 0 ? steps.value[conditionIndex] : undefined;
     return condition ? { condition, conditionIndex } : undefined;
   }
-  if (anchor.flow?.nodeKind === 'condition') {
-    return { condition: anchor, conditionIndex: index };
-  }
   return undefined;
 }
 
@@ -489,6 +576,87 @@ function createRunScriptStep(script: AppiumRecordedScript): AppiumRecordedStep {
   };
 }
 
+function createNoopStep(): AppiumRecordedStep {
+  return {
+    id: createStepId(),
+    type: 'noop',
+    label: '空节点',
+    flow: { nodeKind: 'action' },
+  };
+}
+
+function defaultVisualChangeRegion(): AppiumVisualChangeRegion {
+  const width = props.deviceWidth || 1080;
+  const height = props.deviceHeight || 1920;
+  const regionWidth = Math.max(1, Math.round(width * 0.5));
+  const regionHeight = Math.max(1, Math.round(height * 0.25));
+  return {
+    x: Math.max(0, Math.round((width - regionWidth) / 2)),
+    y: Math.max(0, Math.round((height - regionHeight) / 2)),
+    width: regionWidth,
+    height: regionHeight,
+  };
+}
+
+function currentVisualChangeConfig() {
+  const bounds = selectedNode.value?.bounds;
+  return normalizeVisualChangeConfig({
+    mode: bounds ? 'selectedElement' : 'region',
+    region: bounds ? boundsToVisualRegion(bounds) : defaultVisualChangeRegion(),
+  } as AppiumVisualChangeConfig);
+}
+
+function createVisualChangeStartStep(config: AppiumVisualChangeConfig): AppiumRecordedStep {
+  const normalizedConfig = normalizeVisualChangeConfig(config);
+  const pairId = createStepId();
+  const pairLabel = nextVisualChangePairLabel(steps.value);
+  const visualChange = {
+    ...normalizedConfig,
+    role: 'start' as const,
+    pairId,
+    pairLabel,
+    startStepId: '',
+    endStepId: '',
+  };
+  const node = normalizedConfig.mode === 'selectedElement' ? selectedNode.value : null;
+  if (node) {
+    const step = createNodeActionStep('visualChange', `${pairLabel}-开始节点`, node);
+    return {
+      ...step,
+      label: `${pairLabel}-开始节点`,
+      visualChange,
+      flow: { ...(step.flow || {}), nodeKind: 'assertion' },
+    };
+  }
+  return {
+    id: createStepId(),
+    type: 'visualChange',
+    label: `${pairLabel}-开始节点`,
+    visualChange,
+    flow: { nodeKind: 'assertion' },
+  };
+}
+
+function createVisualChangeEndStep(startStep: AppiumRecordedStep): AppiumRecordedStep {
+  const config = normalizeVisualChangeConfig(startStep.visualChange);
+  const id = createStepId();
+  const pairLabel = config.pairLabel || '检测画面变化';
+  const pairId = config.pairId || startStep.id;
+  return {
+    id,
+    type: 'visualChange',
+    label: `${pairLabel}-结束节点`,
+    visualChange: {
+      ...config,
+      role: 'end',
+      pairId,
+      startStepId: startStep.id,
+      endStepId: id,
+    },
+    flow: { nodeKind: 'assertion' },
+  };
+}
+
 function linkedScriptExitActivity(script: AppiumRecordedScript) {
   for (let index = script.steps.length - 1; index >= 0; index -= 1) {
     const activity = script.steps[index]?.pageAfter?.activity;
@@ -679,6 +847,11 @@ async function refreshTree() {
 
 async function executeFlowStep(index: number) {
   const step = steps.value[index];
+  if (step?.type === 'aiRecognition') {
+    if (replaying.value || recordingBusy.value) { ElMessage.warning('设备正在执行操作，请稍后测试'); return; }
+    aiRecognitionTestStep.value = { ...step };
+    return;
+  }
   if (!step || (step.type !== 'launchApp' && step.type !== 'clearAppData')) return;
   if (launchingApp.value) return;
   if (!selectedDeviceId.value) {
@@ -763,7 +936,7 @@ async function swipePreview(gesture: {
   }
 }
 
-async function recordTapStep(index?: number) {
+async function recordTapStep(index?: number, branchTarget?: BranchTarget) {
   if (!selectedNode.value || recordingTap.value) return;
   if (!ensureAppPackageSelected()) return;
   if (!selectedDeviceId.value) {
@@ -778,7 +951,7 @@ async function recordTapStep(index?: number) {
   }
   const beforeActivity = currentActivity.value;
   const step = createStep('tap', node);
-  insertStep(step, index);
+  const inserted = insertStep(step, index, branchTarget);
   recordingTap.value = true;
   try {
     await tapAppiumDevice({ deviceId: selectedDeviceId.value, x: bounds.centerX, y: bounds.centerY });
@@ -805,12 +978,12 @@ async function recordTapStep(index?: number) {
   }
 }
 
-async function addStep(type: NodeStepType, index?: number) {
+async function addStep(type: NodeStepType, index?: number, branchTarget?: BranchTarget) {
   if (recordingBusy.value) return;
   if (!selectedNode.value) return;
   if (!ensureAppPackageSelected()) return;
   if (type === 'tap') {
-    return recordTapStep(index);
+    return recordTapStep(index, branchTarget);
   }
   const step = createStep(type, selectedNode.value);
   if (type === 'input') {
@@ -823,10 +996,10 @@ async function addStep(type: NodeStepType, index?: number) {
     if (!input) return;
     step.value = input.value;
   }
-  return insertStep(step, index);
+  return insertStep(step, index, branchTarget);
 }
 
-async function addDelayStep(index?: number) {
+async function addDelayStep(index?: number, branchTarget?: BranchTarget) {
   if (recordingBusy.value) return;
   const input = await ElMessageBox.prompt('请输入延时时间，单位毫秒', '添加延时', {
     inputValue: '1000',
@@ -838,7 +1011,7 @@ async function addDelayStep(index?: number) {
   if (!input) return;
   const timeoutMs = Number(input.value);
   const step = createDelayStep(timeoutMs);
-  return insertStep(step, index);
+  return insertStep(step, index, branchTarget);
 }
 
 function toSwipeNumber(value: unknown, fallback: number) {
@@ -884,7 +1057,7 @@ function renderSwipeForm(form: SwipeForm) {
   ]);
 }
 
-async function addSwipeStep(index?: number) {
+async function addSwipeStep(index?: number, branchTarget?: BranchTarget) {
   const preset = swipePreset('up');
   const form = reactive<SwipeForm>({
     direction: preset.direction,
@@ -909,7 +1082,7 @@ async function addSwipeStep(index?: number) {
       endY: toSwipeNumber(form.endY, finalPreset.swipe.endY),
       duration: Math.max(80, toSwipeNumber(form.duration, finalPreset.swipe.duration)),
     },
-  }), index);
+  }), index, branchTarget);
 }
 
 function openLinkedScriptDialog(index?: number, branchTarget?: BranchTarget) {
@@ -958,30 +1131,11 @@ function addLinkedScriptStep() {
     );
     return;
   }
-  const step = insertStep(createRunScriptStep(script), linkedScriptInsertIndex.value);
-  if (linkedScriptBranchTarget.value) {
-    attachStepToBranch(step.id, linkedScriptBranchTarget.value.stepId, linkedScriptBranchTarget.value.branch);
-    if (linkedScriptBranchTarget.value.nextTargetId) {
-      steps.value = steps.value.map((item) => (
-        item.id === step.id
-          ? {
-              ...item,
-              flow: {
-                ...(item.flow || {}),
-                successTargetId: linkedScriptBranchTarget.value?.nextTargetId,
-              },
-            }
-          : item
-      ));
-    }
-    if (linkedScriptBranchTarget.value.updateTarget) {
-      updateBranchTarget(
-        linkedScriptBranchTarget.value.stepId,
-        linkedScriptBranchTarget.value.branch,
-        linkedScriptBranchTarget.value.entryTargetId || step.id,
-      );
-    }
-  }
+  insertStep(
+    createRunScriptStep(script),
+    linkedScriptInsertIndex.value,
+    linkedScriptBranchTarget.value || undefined,
+  );
   linkedScriptInsertIndex.value = undefined;
   linkedScriptBranchTarget.value = null;
   linkedScriptExpectedActivity.value = '';
@@ -1018,6 +1172,64 @@ function loadPreviewScriptForEditing() {
   loadScript(linkedScriptPreviewScript.value);
 }
 
+function openVisualChangeDialog(index?: number, branchTarget?: BranchTarget) {
+  visualChangeInsertIndex.value = index;
+  visualChangeBranchTarget.value = branchTarget || null;
+  visualChangeConfig.value = currentVisualChangeConfig();
+  visualChangePicking.value = false;
+  visualChangeDialogVisible.value = true;
+}
+
+function closeVisualChangeDialog() {
+  visualChangeDialogVisible.value = false;
+  visualChangePicking.value = false;
+  visualChangeInsertIndex.value = undefined;
+  visualChangeBranchTarget.value = null;
+}
+
+function updateVisualChangeConfig(config: AppiumVisualChangeConfig) {
+  visualChangeConfig.value = normalizeVisualChangeConfig(config);
+}
+
+function pickVisualChangeRegion() {
+  if (!selectedDeviceId.value) {
+    ElMessage.warning('请选择设备');
+    return;
+  }
+  visualChangeConfig.value = normalizeVisualChangeConfig({
+    ...visualChangeConfig.value,
+    mode: 'region',
+  });
+  visualChangePicking.value = true;
+  ElMessage.info('请在设备预览中拖拽框选检测区域');
+}
+
+function applyVisualChangeRegion(region: AppiumVisualChangeRegion) {
+  visualChangeConfig.value = normalizeVisualChangeConfig({
+    ...visualChangeConfig.value,
+    mode: 'region',
+    region,
+  });
+  visualChangePicking.value = false;
+  ElMessage.success('已选择检测区域');
+}
+
+function confirmVisualChangeStep() {
+  const config = normalizeVisualChangeConfig(visualChangeConfig.value);
+  if (config.mode === 'selectedElement' && !selectedNode.value?.bounds) {
+    ElMessage.warning('当前没有可用的选中元素，请先选择组件或改为手动框选区域');
+    return;
+  }
+  const step = createVisualChangeStartStep(config);
+  insertStep(
+    step,
+    visualChangeInsertIndex.value,
+    visualChangeBranchTarget.value || undefined,
+  );
+  closeVisualChangeDialog();
+  ElMessage.success('已添加检测画面变化开始节点');
+}
+
 function isReadonlyFlowActionDisabled(_action: InsertAction) {
   return true;
 }
@@ -1037,6 +1249,7 @@ async function addAction(
 ) {
   if (recordingBusy.value) return;
   if (!ensureAppPackageSelected()) return;
+  const previousStep = typeof index === 'number' && index >= 0 ? steps.value[index] : undefined;
   if (action === 'launchApp' && steps.value.some((step) => step.type === 'launchApp')) {
     ElMessage.warning('启动 APP 节点只能添加一个');
     return;
@@ -1045,8 +1258,12 @@ async function addAction(
     ElMessage.warning('清理 App 缓存节点只能添加一个');
     return;
   }
-  if ((action === 'launchApp' || action === 'clearAppData') && index !== -1) {
-    ElMessage.warning(`${action === 'launchApp' ? '启动 APP' : '清理 App 缓存'}只能从开始节点添加`);
+  if (action === 'clearAppData' && index !== -1) {
+    ElMessage.warning('清理 App 缓存只能从开始节点添加');
+    return;
+  }
+  if (action === 'launchApp' && index !== -1 && previousStep?.type !== 'clearAppData') {
+    ElMessage.warning('启动 APP 只能从开始节点或清理 App 缓存后添加');
     return;
   }
   if (action === 'runScript') {
@@ -1054,22 +1271,60 @@ async function addAction(
     return;
   }
   if (action === 'delay') {
-    return addDelayStep(index);
+    return addDelayStep(index, branchTarget);
+  }
+  if (action === 'aiRecognition') {
+    const input = await ElMessageBox.prompt('识别内容', '添加 AI 识别', {
+      inputType: 'textarea',
+      inputPlaceholder: '例如：检查当前画面有没有显示黑屏',
+      inputValidator: (value) => {
+        try { validateAiRecognitionPrompt(value); return true; }
+        catch (error) { return error instanceof Error ? error.message : '识别内容无效'; }
+      },
+      confirmButtonText: '添加', cancelButtonText: '取消',
+    }).catch(() => null);
+    if (!input) return;
+    return insertStep({
+      id: createStepId(), type: 'aiRecognition', label: 'AI 识别',
+      value: validateAiRecognitionPrompt(input.value), timeoutMs: 60000,
+      flow: { nodeKind: 'condition' },
+    }, index, branchTarget);
+  }
+  if (action === 'textClick') {
+    const step = reactive<AppiumRecordedStep>({
+      id: createStepId(), type: 'textClick', label: '文字点击', value: '', timeoutMs: 10000,
+      flow: { nodeKind: 'condition', textMatch: 'exact' },
+    });
+    const result = await ElMessageBox({
+      title: '添加文字点击',
+      message: h(ElForm, { labelPosition: 'top', style: { width: 'min(380px, calc(100vw - 64px))' } },
+        () => h(TextClickSettings, { step, onUpdate: (patch) => Object.assign(step, patch) })),
+      showCancelButton: true, confirmButtonText: '添加', cancelButtonText: '取消',
+      beforeClose: (action, _instance, done) => {
+        if (action === 'confirm') {
+          try { textClickSelector(step); }
+          catch (error) { ElMessage.warning((error as Error).message); return; }
+        }
+        done();
+      },
+    }).catch(() => null);
+    if (result) return insertStep({ ...step }, index, branchTarget);
+    return;
   }
   if (action === 'tap' || action === 'input' || action === 'assertExists' || action === 'waitFor') {
-    return addStep(action, index);
+    return addStep(action, index, branchTarget);
   }
   if (action === 'keyBack') {
-    return insertStep(createKeyStep(4, '系统返回'), index);
+    return insertStep(createKeyStep(4, '系统返回'), index, branchTarget);
   }
   if (action === 'keyHome') {
-    return insertStep(createKeyStep(3, 'Home 键'), index);
+    return insertStep(createKeyStep(3, 'Home 键'), index, branchTarget);
   }
   if (action === 'keyRecent') {
-    return insertStep(createKeyStep(187, '最近任务'), index);
+    return insertStep(createKeyStep(187, '最近任务'), index, branchTarget);
   }
   if (action === 'keyPower') {
-    return insertStep(createKeyStep(26, '电源键'), index);
+    return insertStep(createKeyStep(26, '电源键'), index, branchTarget);
   }
   if (action === 'waitActivity') {
     const input = await ElMessageBox.prompt('请输入目标 Activity', '等待 Activity', {
@@ -1077,11 +1332,25 @@ async function addAction(
       confirmButtonText: '添加',
       cancelButtonText: '取消',
     }).catch(() => null);
-    if (input?.value) return insertStep(createWaitActivityStep(input.value), index);
+    if (input?.value) return insertStep(createWaitActivityStep(input.value), index, branchTarget);
     return;
   }
   if (action === 'swipe') {
-    return addSwipeStep(index);
+    return addSwipeStep(index, branchTarget);
+  }
+  if (action === 'visualChange' || action === 'visualChangeStart') {
+    openVisualChangeDialog(index, branchTarget);
+    return;
+  }
+  if (action === 'visualChangeEnd') {
+    const startStep = findOpenVisualChangeStart(steps.value, index, branchTarget);
+    if (!startStep) {
+      ElMessage.warning('当前分支没有可对应的检测画面变化开始节点');
+      return;
+    }
+    const inserted = insertStep(createVisualChangeEndStep(startStep), index, branchTarget);
+    ElMessage.success(`已添加 ${inserted.label}`);
+    return inserted;
   }
   if (action === 'pinch') {
     const input = await ElMessageBox.prompt('请输入缩放方向：放大 / 缩小', '添加双指缩放', {
@@ -1103,16 +1372,39 @@ async function addAction(
         centerY: Math.round((props.deviceHeight || 1920) / 2),
         percent: 0.5,
       },
-    }, index);
+    }, index, branchTarget);
+  }
+  if (action === 'noop') {
+    return insertStep(createNoopStep(), index, branchTarget);
+  }
+  if (action === 'log') {
+    const step = reactive<AppiumRecordedStep>({
+      id: createStepId(), type: 'log', label: '输出日志', logPrefix: DEFAULT_LOG_PREFIX, value: '',
+    });
+    const result = await ElMessageBox({
+      title: '添加输出日志',
+      message: h(ElForm, { labelPosition: 'top', style: { width: 'min(380px, calc(100vw - 64px))' } }, () => h(StageLogSettings, {
+        step, onUpdate: (patch) => Object.assign(step, patch),
+      })),
+      showCancelButton: true, confirmButtonText: '添加', cancelButtonText: '取消',
+      beforeClose: (action, _instance, done) => {
+        const error = action === 'confirm' ? validateStageLog(step) : '';
+        if (error) { ElMessage.warning(error); return; }
+        done();
+      },
+    }).catch(() => null);
+    if (result) return insertStep({ ...step }, index, branchTarget);
+    return;
   }
   if (action === 'launchApp') {
     const clearStepIndex = steps.value.findIndex((step) => step.type === 'clearAppData');
+    const insertIndex = previousStep?.type === 'clearAppData' ? index : clearStepIndex >= 0 ? clearStepIndex : index;
     return insertStep({
       id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
       type: 'launchApp',
       label: `启动 APP ${form.appPackage}`,
       value: form.appPackage,
-    }, clearStepIndex >= 0 ? clearStepIndex : index);
+    }, insertIndex);
   }
   if (action === 'clearAppData') {
     return insertStep({
@@ -1124,14 +1416,35 @@ async function addAction(
   }
   const node = getSelectedNode();
   if (!node) return;
+  if (action === 'checkboxState' || action === 'radioButtonState') {
+    const controlName = nativeControlName(action);
+    if (nativeControlType(node.className) !== action || node.checkable !== true) {
+      ElMessage.warning(`请选择原生 ${controlName} 元素，当前选中：${node.className || '未知类型'}`);
+      return;
+    }
+    const step = createNodeActionStep(action, `判断 ${controlName} 状态`, node, { timeoutMs: 2000 });
+    if ((!step.selector?.value || step.selector.strategy === 'bounds') && node.xpath) {
+      step.selector = { strategy: 'xpath', value: node.xpath };
+      step.contextSelector = undefined;
+      step.selectorChain = undefined;
+    }
+    if (!step.selector?.value || step.selector.strategy === 'bounds') {
+      ElMessage.warning(`当前 ${controlName} 没有可用的元素定位器`);
+      return;
+    }
+    // 只保存定位信息，回放时读取实时状态；坐标不能用于判断元素属性。
+    step.fallback = undefined;
+    step.flow = { nodeKind: 'condition' };
+    return insertStep(step, index, branchTarget);
+  }
   if (action === 'popupCondition') {
     const step = createNodeActionStep('assertExists', '判断存在', node, { timeoutMs: 2000 });
-    const inserted = insertStep({ ...step, flow: { nodeKind: 'condition' } }, index);
+    const inserted = insertStep({ ...step, flow: { nodeKind: 'condition' } }, index, branchTarget);
     ElMessage.success('已添加判断节点，请在节点面板配置是/否分支');
     return inserted;
   }
   if (action === 'tapIfExists') {
-    return insertStep(createNodeActionStep('tapIfExists', '存在则点击', node, { timeoutMs: 2000 }), index);
+    return insertStep(createNodeActionStep('tapIfExists', '存在则点击', node, { timeoutMs: 2000 }), index, branchTarget);
   }
   if (action === 'inputIfExists') {
     const input = await ElMessageBox.prompt('', '存在则输入', {
@@ -1141,16 +1454,20 @@ async function addAction(
       center: true,
     }).catch(() => null);
     if (!input) return;
-    return insertStep(createNodeActionStep('inputIfExists', '存在则输入', node, { timeoutMs: 2000, value: input.value }), index);
+    return insertStep(
+      createNodeActionStep('inputIfExists', '存在则输入', node, { timeoutMs: 2000, value: input.value }),
+      index,
+      branchTarget,
+    );
   }
   if (action === 'clearIfExists') {
-    return insertStep(createNodeActionStep('clearIfExists', '存在则清空', node, { timeoutMs: 2000 }), index);
+    return insertStep(createNodeActionStep('clearIfExists', '存在则清空', node, { timeoutMs: 2000 }), index, branchTarget);
   }
   if (action === 'backIfExists') {
-    return insertStep(createNodeActionStep('backIfExists', '存在则返回', node, { timeoutMs: 2000 }), index);
+    return insertStep(createNodeActionStep('backIfExists', '存在则返回', node, { timeoutMs: 2000 }), index, branchTarget);
   }
   if (action === 'clearInput') {
-    return insertStep(createNodeActionStep('clearInput', '清空输入', node), index);
+    return insertStep(createNodeActionStep('clearInput', '清空输入', node), index, branchTarget);
   }
   if (action === 'coordinateTap') {
     if (!node.bounds) {
@@ -1162,32 +1479,39 @@ async function addAction(
       type: 'coordinateTap',
       label: `点击坐标 ${node.bounds.centerX},${node.bounds.centerY}`,
       fallback: { strategy: 'bounds', centerX: node.bounds.centerX, centerY: node.bounds.centerY },
-    }, index);
+    }, index, branchTarget);
   }
   if (action === 'longPress') {
-    if (!node.bounds) {
-      ElMessage.warning('当前组件没有可长按坐标');
-      return;
+    const step = reactive<AppiumRecordedStep>({
+      ...createNodeActionStep('longPress', '长按', node, { timeoutMs: 800 }),
+      longPressMode: 'element',
+    });
+    // 无 id/text 的组件仍可用组件树中的绝对 XPath 定位，不依赖录制坐标。
+    if ((!step.selector?.value || step.selector.strategy === 'bounds') && node.xpath) {
+      step.selector = { strategy: 'xpath', value: node.xpath };
+      step.contextSelector = undefined;
+      step.selectorChain = undefined;
     }
-    const input = await ElMessageBox.prompt('请输入长按时间（毫秒）', '添加长按', {
-      inputValue: '800',
-      inputPattern: /^[1-9]\d*$/,
-      inputErrorMessage: '请输入大于 0 的整数',
+    const result = await ElMessageBox({
+      title: '添加长按',
+      message: h(ElForm, { labelPosition: 'top', size: 'small' }, () => [
+        h(ElFormItem, { label: '当前元素' }, () => h('div', { style: { overflowWrap: 'anywhere' } }, node.label)),
+        h(LongPressSettings, { step, onUpdate: (patch) => Object.assign(step, patch) }),
+      ]),
+      showCancelButton: true,
       confirmButtonText: '添加',
       cancelButtonText: '取消',
+      beforeClose: (action, _instance, done) => {
+        const error = action === 'confirm' ? validateLongPress(step) : '';
+        if (error) { ElMessage.warning(error); return; }
+        done();
+      },
     }).catch(() => null);
-    if (!input?.value) return;
-    const duration = Math.max(80, Math.round(Number(input.value) || 800));
-    return insertStep({
-      id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
-      type: 'longPress',
-      label: `长按 ${node.label}`,
-      fallback: { strategy: 'bounds', centerX: node.bounds.centerX, centerY: node.bounds.centerY },
-      timeoutMs: duration,
-    }, index);
+    if (!result) return;
+    return insertStep({ ...step }, index, branchTarget);
   }
   if (action === 'waitDisappear') {
-    return insertStep(createNodeActionStep('waitDisappear', '等待元素消失', node, { timeoutMs: 10000 }), index);
+    return insertStep(createNodeActionStep('waitDisappear', '等待元素消失', node, { timeoutMs: 10000 }), index, branchTarget);
   }
   if (action === 'assertText') {
     const input = await ElMessageBox.prompt('请输入要断言的文本', '断言文本', {
@@ -1195,7 +1519,7 @@ async function addAction(
       confirmButtonText: '添加',
       cancelButtonText: '取消',
     }).catch(() => null);
-    if (input?.value) return insertStep(createNodeActionStep('assertText', '断言文本', node, { value: input.value }), index);
+    if (input?.value) return insertStep(createNodeActionStep('assertText', '断言文本', node, { value: input.value }), index, branchTarget);
   }
 }
 
@@ -1215,28 +1539,18 @@ async function addBranchAction(index: number, branch: BranchName, action: Record
   const nextTargetId = insertAtBranchEntry
     ? nextBranchStepAfter(condition.id, branch, index)?.id || (!targetIsBranchStep ? currentTargetId : undefined)
     : undefined;
-  const inserted = await addAction(action, insertIndex, {
+  const branchTarget: BranchTarget = {
     stepId: condition.id,
     branch,
     updateTarget: insertAtBranchEntry || !currentTargetId || !targetIsBranchStep,
     entryTargetId: insertAtBranchEntry ? undefined : existingBranchSteps[0]?.id,
     nextTargetId,
-  });
+  };
+  const inserted = await addAction(action, insertIndex, branchTarget);
   if (!inserted) return;
-  attachStepToBranch(inserted.id, condition.id, branch);
-  if (nextTargetId) {
-    steps.value = steps.value.map((step) => (
-      step.id === inserted.id
-        ? {
-            ...step,
-            flow: { ...(step.flow || {}), successTargetId: nextTargetId },
-          }
-        : step
-    ));
-  }
-  if (insertAtBranchEntry || !currentTargetId || !targetIsBranchStep) {
-    updateBranchTarget(condition.id, branch, insertAtBranchEntry ? inserted.id : existingBranchSteps[0]?.id || inserted.id);
-  }
+  const currentInserted = steps.value.find((step) => step.id === inserted.id);
+  if (currentInserted?.flow?.parentConditionId === condition.id && currentInserted.flow.parentBranch === branch) return;
+  applyBranchTargetToInsertedStep(inserted, branchTarget);
 }
 
 async function saveOnActivityChange() {
@@ -1270,41 +1584,42 @@ async function saveOnActivityChange() {
 
 function removeStep(index: number) {
   if (recordingBusy.value) return;
-  const removed = steps.value[index];
-  if (!removed) return;
-  const nextBranchStep = removed.flow?.parentConditionId && removed.flow.parentBranch
-    ? steps.value.slice(index + 1).find((step) => (
-        step.flow?.parentConditionId === removed.flow?.parentConditionId
-        && step.flow?.parentBranch === removed.flow?.parentBranch
-      ))
-    : undefined;
-  const replacementId = removed.flow?.parentConditionId
-    ? nextBranchStep?.id || ''
-    : steps.value[index + 1]?.id || '';
-  steps.value = steps.value
-    .filter((_step, stepIndex) => stepIndex !== index)
-    .map((step) => {
-      if (!step.flow) return step;
-      const flow = { ...step.flow };
-      let changed = false;
-      (['yesTargetId', 'noTargetId', 'successTargetId', 'failureTargetId'] as const).forEach((key) => {
-        if (flow[key] !== removed.id) return;
-        flow[key] = replacementId;
-        changed = true;
-      });
-      if (flow.parentConditionId === removed.id) {
-        delete flow.parentConditionId;
-        delete flow.parentBranch;
-        changed = true;
-      }
-      return changed ? { ...step, flow } : step;
-    });
+  steps.value = removeFlowStep(steps.value, index);
+}
+
+function syncVisualChangePairConfig(
+  candidate: AppiumRecordedStep,
+  sourceConfig: NonNullable<AppiumRecordedStep['visualChange']>,
+) {
+  if (candidate.visualChange?.role !== 'end') return candidate;
+  if (!sourceConfig.pairId || candidate.visualChange.pairId !== sourceConfig.pairId) return candidate;
+  return {
+    ...candidate,
+    visualChange: {
+      ...candidate.visualChange,
+      mode: sourceConfig.mode,
+      region: sourceConfig.region,
+      pairLabel: sourceConfig.pairLabel,
+      durationMs: sourceConfig.durationMs,
+      intervalMs: sourceConfig.intervalMs,
+      changeRatioThreshold: sourceConfig.changeRatioThreshold,
+      pixelmatchThreshold: sourceConfig.pixelmatchThreshold,
+    },
+  };
 }
 
 function updateStep(index: number, step: AppiumRecordedStep) {
   if (recordingLocked.value) return;
-  const nextSteps = [...steps.value];
-  nextSteps[index] = step;
+  const visualChange = step.visualChange?.role === 'start'
+    ? normalizeVisualChangeConfig(step.visualChange)
+    : undefined;
+  const nextSteps = steps.value.map((candidate, stepIndex) => (
+    stepIndex === index
+      ? step
+      : visualChange
+        ? syncVisualChangePairConfig(candidate, visualChange)
+        : candidate
+  ));
   steps.value = nextSteps;
 }
 
@@ -1339,7 +1654,7 @@ function loadScript(script: AppiumRecordedScript) {
   if (script.deviceId && script.deviceId !== selectedDeviceId.value) {
     void switchDevice(script.deviceId);
   }
-  steps.value = (script.steps || []).map(normalizeLegacyFlowScope);
+  steps.value = normalizeLegacyNestedConditionBranches((script.steps || []).map(normalizeLegacyFlowScope));
   markDraftSaved();
 }
 
@@ -1361,12 +1676,121 @@ function resetCurrentScript() {
   markDraftSaved();
 }
 
+function requestNewScript() {
+  if (newScriptDisabled.value) return;
+  if (selectedScriptId.value || form.name.trim() || steps.value.length) {
+    newScriptDialogVisible.value = true;
+    return;
+  }
+  startNewScript();
+}
+
+function startNewScript() {
+  if (newScriptDisabled.value) return;
+  resetCurrentScript();
+  // 新脚本不沿用旧画布的展开、批量选择和缩放状态。
+  newScriptRevision.value += 1;
+  newScriptDialogVisible.value = false;
+  setActiveWorkbenchTab('recording');
+}
+
+async function saveAndNewScript() {
+  if (newScriptDisabled.value) return;
+  // 保存成功后才重置，校验错误或网络异常均保留当前草稿。
+  if (await saveScript()) startNewScript();
+}
+
 function formatScriptTime(value: string) {
   if (!value) return '-';
   const date = new Date(value);
   return Number.isNaN(date.getTime()) ? '-' : date.toLocaleString();
 }
 
+function cloneScriptSteps(stepList: AppiumRecordedStep[]) {
+  return JSON.parse(JSON.stringify(stepList || [])) as AppiumRecordedStep[];
+}
+
+function isScriptNameTaken(name: string, exceptId = '') {
+  return scripts.value.some((script) => script.id !== exceptId && script.name === name);
+}
+
+function createDuplicateScriptName(sourceName: string) {
+  const baseName = `${sourceName} Copy`;
+  if (!isScriptNameTaken(baseName)) return baseName;
+
+  let suffix = 2;
+  let nextName = `${baseName} ${suffix}`;
+  while (isScriptNameTaken(nextName)) {
+    suffix += 1;
+    nextName = `${baseName} ${suffix}`;
+  }
+  return nextName;
+}
+
+async function duplicateScript(script: AppiumRecordedScript) {
+  if (duplicatingScriptId.value) return;
+  duplicatingScriptId.value = script.id;
+  try {
+    const payload = await saveAppiumScript({
+      name: createDuplicateScriptName(script.name),
+      appPackage: script.appPackage,
+      appActivity: script.appActivity,
+      deviceId: script.deviceId,
+      steps: cloneScriptSteps(script.steps),
+    });
+    await loadScripts();
+    ElMessage.success(`已复制为「${payload.script.name}」`);
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '复制脚本失败');
+  } finally {
+    duplicatingScriptId.value = '';
+  }
+}
+
+async function renameScript(script: AppiumRecordedScript) {
+  if (renamingScriptId.value) return;
+  const input = await ElMessageBox.prompt('请输入新的脚本名称', '修改脚本名称', {
+    inputValue: script.name,
+    confirmButtonText: '保存',
+    cancelButtonText: '取消',
+    center: true,
+    inputValidator(value) {
+      const nextName = String(value || '').trim();
+      if (!nextName) return '脚本名称不能为空';
+      if (isScriptNameTaken(nextName, script.id)) return '脚本名称已存在';
+      return true;
+    },
+  }).catch(() => null);
+  const nextName = input ? String(input.value || '').trim() : '';
+  if (!nextName || nextName === script.name) return;
+
+  const wasCurrentScript = selectedScriptId.value === script.id;
+  const hadUnsavedChanges = hasUnsavedChanges.value;
+  renamingScriptId.value = script.id;
+  try {
+    const payload = await saveAppiumScript({
+      id: script.id,
+      name: nextName,
+      appPackage: script.appPackage,
+      appActivity: script.appActivity,
+      deviceId: script.deviceId,
+      steps: cloneScriptSteps(script.steps),
+    });
+    await loadScripts();
+    if (wasCurrentScript) {
+      form.name = payload.script.name;
+      if (!hadUnsavedChanges) {
+        markDraftSaved();
+      }
+    }
+    ElMessage.success('脚本名称已修改');
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '修改脚本名称失败');
+  } finally {
+    renamingScriptId.value = '';
+  }
+}
+
 async function removeScript(script: AppiumRecordedScript) {
   try {
     await ElMessageBox.confirm(`确定删除脚本「${script.name}」吗？`, '删除脚本', {
@@ -1395,13 +1819,24 @@ async function removeScript(script: AppiumRecordedScript) {
   }
 }
 
-function downloadScript(script: AppiumRecordedScript) {
-  const link = document.createElement('a');
-  link.href = appiumScriptDownloadUrl(script.id);
-  link.download = `${script.name}.json`;
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
+async function downloadScript(script: AppiumRecordedScript) {
+  if (downloadingScriptId.value) return;
+  downloadingScriptId.value = script.id;
+  try {
+    const { blob, fileName } = await downloadAppiumScript(script.id);
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '导出脚本失败');
+  } finally {
+    downloadingScriptId.value = '';
+  }
 }
 
 function chooseScriptImportFile() {
@@ -1428,7 +1863,7 @@ async function importScriptFile(event: Event) {
 }
 
 async function saveScript() {
-  if (!ensureAppPackageSelected()) return;
+  if (!ensureAppPackageSelected()) return false;
   saving.value = true;
   try {
     const payload = await saveAppiumScript({
@@ -1443,8 +1878,10 @@ async function saveScript() {
     selectedScriptId.value = payload.script.id;
     markDraftSaved();
     ElMessage.success('Appium 脚本已保存');
+    return true;
   } catch (error) {
     ElMessage.error(error instanceof Error ? error.message : '保存失败');
+    return false;
   } finally {
     saving.value = false;
   }
@@ -1455,6 +1892,10 @@ async function replayScript() {
     ElMessage.warning('请选择已保存脚本');
     return;
   }
+  if (hasUnsavedChanges.value) {
+    const saved = await saveScript();
+    if (!saved || !selectedScript.value) return;
+  }
   replaying.value = true;
   stoppingReplay.value = false;
   activeReplayDeviceId.value = selectedDeviceId.value;
@@ -1470,6 +1911,8 @@ async function replayScript() {
     replayOutput.value = result.output || '';
     if (result.stopped) {
       ElMessage.info('回放已终止，报告、日志和截图回放已生成');
+    } else if (result.softFailureCount) {
+      ElMessage.warning(`回放完成，但存在 ${result.softFailureCount} 个视觉变化未达预期节点`);
     } else if (result.success) {
       ElMessage.success('回放完成');
     } else {
@@ -1549,6 +1992,7 @@ watch(
       >
         <el-option v-for="script in scripts" :key="script.id" :label="script.name" :value="script.id" />
       </el-select>
+      <el-button :icon="Plus" :disabled="newScriptDisabled || newScriptDialogVisible" @click="requestNewScript">新建</el-button>
       <el-button :icon="Check" :loading="saving" @click="saveScript">保存</el-button>
       <el-button
         type="primary"
@@ -1581,12 +2025,16 @@ watch(
         :actions="deviceActions"
         :overlay-bounds="overlayBounds"
         :selected-bounds="selectedBounds"
+        :selected-region="visualChangeSelectedRegion"
+        :region-selection="visualChangeRegionSelectionEnabled"
+        :region-draw-mode="visualChangePicking"
         :device-width="deviceWidth"
         :device-height="deviceHeight"
         @switch-device="switchDevice"
         @trigger-key="triggerDeviceKey"
         @refresh-preview="refreshDevicePreview"
         @tap="selectNodeFromPoint"
+        @region-select="applyVisualChangeRegion"
         @swipe="swipePreview"
       />
 
@@ -1664,6 +2112,8 @@ watch(
               <section class="appium-workbench__section">
                 <h3>录制步骤</h3>
                 <RecordedSteps
+                  :key="newScriptRevision"
+                  :ai-recognition-model-configured="aiRecognitionModelConfigured"
                   :steps="steps"
                   :clipboard-count="flowClipboardCount"
                   :disabled="recordingLocked"
@@ -1715,18 +2165,35 @@ watch(
                   </div>
                   <div class="appium-script-list__actions">
                     <el-button size="small" @click.stop="loadScript(script)">加载</el-button>
+                    <el-button
+                      size="small"
+                      :icon="Edit"
+                      :loading="renamingScriptId === script.id"
+                      title="修改脚本名称"
+                      @click.stop="renameScript(script)"
+                    />
+                    <el-button
+                      size="small"
+                      :icon="CopyDocument"
+                      :loading="duplicatingScriptId === script.id"
+                      title="复制脚本"
+                      @click.stop="duplicateScript(script)"
+                    />
                     <el-button
                       size="small"
                       :icon="Download"
+                      :loading="downloadingScriptId === script.id"
+                      :disabled="Boolean(downloadingScriptId) && downloadingScriptId !== script.id"
                       title="下载脚本"
-                      @click="downloadScript(script)"
+                      @click.stop="downloadScript(script)"
                     />
                     <el-button
                       size="small"
                       type="danger"
                       :icon="Delete"
                       :loading="deletingScriptId === script.id"
-                      @click="removeScript(script)"
+                      title="删除脚本"
+                      @click.stop="removeScript(script)"
                     />
                   </div>
                 </article>
@@ -1737,6 +2204,34 @@ watch(
       </el-card>
     </div>
 
+    <NewScriptDialog
+      v-if="newScriptDialogVisible"
+      :script-name="form.name"
+      :saving="saving"
+      @save="saveAndNewScript"
+      @discard="startNewScript"
+      @cancel="newScriptDialogVisible = false"
+    />
+
+    <AiRecognitionTestDialog
+      v-if="aiRecognitionTestStep"
+      :step="aiRecognitionTestStep"
+      :device-id="selectedDeviceId"
+      :model-configured="Boolean(aiRecognitionModelConfigured)"
+      @close="aiRecognitionTestStep = null"
+    />
+
+    <VisualChangeDialog
+      :model-value="visualChangeDialogVisible"
+      :config="visualChangeConfig"
+      :has-selected-element="Boolean(selectedNode?.bounds)"
+      :picking-region="visualChangePicking"
+      @update:model-value="$event ? (visualChangeDialogVisible = true) : closeVisualChangeDialog()"
+      @update:config="updateVisualChangeConfig"
+      @pick-region="pickVisualChangeRegion"
+      @confirm="confirmVisualChangeStep"
+    />
+
     <el-dialog
       :model-value="Boolean(pendingNavigation)"
       title="检测到 Activity 跳转"
@@ -1827,6 +2322,7 @@ watch(
         </div>
         <FlowCanvas
           id="appium-linked-script-preview"
+          :ai-recognition-model-configured="aiRecognitionModelConfigured"
           class="appium-linked-script-preview-canvas"
           readonly
           disabled