android-midscene-automation 0.1.13 → 0.1.14

package/src/appium-recorder/AppiumPage.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, shallowRef, watch } from 'vue';
+import { computed, onMounted, onUnmounted, reactive, shallowRef, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { Check, CopyDocument, Delete, FullScreen, Refresh, VideoPlay } from '@element-plus/icons-vue';
+import { Check, CopyDocument, Delete, Download, FullScreen, Refresh, Upload, VideoPlay } from '@element-plus/icons-vue';
 import type { AndroidDevice, AppPreset, DeviceAction } from '../types';
 import DevicePreviewPanel from '../components/device/DevicePreviewPanel.vue';
 import {
+  appiumScriptDownloadUrl,
   deleteAppiumScript,
   getAppiumScripts,
   getAppiumTree,
+  importAppiumScript,
+  launchAppiumDeviceApp,
   replayAppiumScript,
   saveAppiumScript,
   tapAppiumDevice,
@@ -25,6 +28,8 @@ type BranchTarget = {
   stepId: string;
   branch: BranchName;
   updateTarget?: boolean;
+  entryTargetId?: string;
+  nextTargetId?: string;
 };
 type RecorderAction =
   | 'delay'
@@ -49,6 +54,36 @@ type RecorderAction =
   | 'longPress'
   | 'pinch';
 
+const WORKBENCH_TAB_STORAGE_KEY = 'android-midscene-automation:appium-workbench-tab';
+const AUTO_TREE_REFRESH_INTERVAL_MS = 1800;
+
+const insertableRecorderActions: RecorderAction[] = [
+  'delay',
+  'tap',
+  'input',
+  'assertExists',
+  'waitFor',
+  'tapIfExists',
+  'inputIfExists',
+  'clearIfExists',
+  'backIfExists',
+  'popupCondition',
+  'runScript',
+  'keyBack',
+  'keyHome',
+  'keyRecent',
+  'keyPower',
+  'waitActivity',
+  'swipe',
+  'clearInput',
+  'coordinateTap',
+  'launchApp',
+  'waitDisappear',
+  'assertText',
+  'longPress',
+  'pinch',
+];
+
 const props = defineProps<{
   active: boolean;
   appPresets: AppPreset[];
@@ -78,7 +113,8 @@ const tree = shallowRef<AppiumNode | null>(null);
 const selectedNode = shallowRef<AppiumNode | null>(null);
 const scripts = shallowRef<AppiumRecordedScript[]>([]);
 const selectedScriptId = shallowRef('');
-const activeWorkbenchTab = shallowRef<'recording' | 'scripts'>('recording');
+const storedWorkbenchTab = window.localStorage.getItem(WORKBENCH_TAB_STORAGE_KEY);
+const activeWorkbenchTab = shallowRef<'recording' | 'scripts'>(storedWorkbenchTab === 'scripts' ? 'scripts' : 'recording');
 const steps = shallowRef<AppiumRecordedStep[]>([]);
 const rawXml = shallowRef('');
 const currentActivity = shallowRef('');
@@ -91,14 +127,21 @@ const linkedScriptBranchTarget = shallowRef<BranchTarget | null>(null);
 const linkedScriptExpectedActivity = shallowRef('');
 const loadingTree = shallowRef(false);
 const saving = shallowRef(false);
+const importingScript = shallowRef(false);
+const scriptImportInput = shallowRef<HTMLInputElement | null>(null);
 const deletingScriptId = shallowRef('');
 const replaying = shallowRef(false);
 const recordingTap = shallowRef(false);
 const resolvingNavigation = shallowRef(false);
+const launchingApp = shallowRef(false);
 const pendingNavigation = shallowRef<{
   beforeActivity: string;
   afterActivity: string;
 } | null>(null);
+type TreePayload = Awaited<ReturnType<typeof getAppiumTree>>;
+let treeRequest: Promise<TreePayload> | null = null;
+let autoTreeRefreshTimer: number | null = null;
+let autoTreeRefreshInFlight = false;
 
 const form = reactive({
   name: '',
@@ -106,11 +149,38 @@ const form = reactive({
   appActivity: '',
 });
 
+const savedDraftSnapshot = shallowRef('');
+const currentDraftSnapshot = computed(() => JSON.stringify({
+  name: form.name,
+  appPackage: form.appPackage,
+  appActivity: form.appActivity,
+  steps: steps.value,
+}));
+const hasUnsavedChanges = computed(() => currentDraftSnapshot.value !== savedDraftSnapshot.value);
+
+function markDraftSaved() {
+  savedDraftSnapshot.value = currentDraftSnapshot.value;
+}
+
+function warnBeforeUnload(event: BeforeUnloadEvent) {
+  if (!props.active || !hasUnsavedChanges.value) return;
+  event.preventDefault();
+  event.returnValue = '';
+}
+
+markDraftSaved();
+
 const selectedScript = computed(() => scripts.value.find((script) => script.id === selectedScriptId.value) || null);
 const linkableScripts = computed(() => scripts.value.filter((script) => script.id !== selectedScriptId.value));
 const compatibleLinkableScripts = computed(() => linkableScripts.value.filter((script) => (
-  Boolean(linkedScriptExpectedActivity.value)
-  && script.appActivity === linkedScriptExpectedActivity.value
+  script.appPackage === form.appPackage
+  && (
+    Boolean(linkedScriptBranchTarget.value)
+    || (
+      Boolean(linkedScriptExpectedActivity.value)
+      && script.appActivity === linkedScriptExpectedActivity.value
+    )
+  )
 )));
 const visibleReplayOutput = computed(() => {
   const lines = replayOutput.value.split(/\r?\n/);
@@ -142,15 +212,15 @@ function insertStep(step: AppiumRecordedStep, index?: number) {
   const nextSteps = [...steps.value];
   let insertedStep = step;
   if (index === -1) {
-    nextSteps.unshift(step);
+    nextSteps.unshift(insertedStep);
   } else if (typeof index === 'number') {
     const previousStep = nextSteps[index];
     const previousTargetId = previousStep?.flow?.successTargetId;
     if (previousStep && previousTargetId) {
       insertedStep = {
-        ...step,
+        ...insertedStep,
         flow: {
-          ...(step.flow || {}),
+          ...(insertedStep.flow || {}),
           successTargetId: previousTargetId,
         },
       };
@@ -384,6 +454,31 @@ function treeSignature(root: AppiumNode | null) {
     .join('\n');
 }
 
+async function fetchTreePayload(forceFresh = false) {
+  if (forceFresh && treeRequest) await treeRequest.catch(() => undefined);
+  if (treeRequest) return treeRequest;
+
+  const request = getAppiumTree(selectedDeviceId.value);
+  treeRequest = request;
+  try {
+    return await request;
+  } finally {
+    if (treeRequest === request) treeRequest = null;
+  }
+}
+
+function applyTreeSnapshot(payload: TreePayload, parsedTree: AppiumNode | null, clearSelection: boolean) {
+  const previousSelection = clearSelection ? null : selectedNode.value;
+  rawXml.value = payload.xml;
+  currentActivity.value = payload.activity || '';
+  tree.value = parsedTree;
+  selectedNode.value = previousSelection
+    ? flattenNodes(parsedTree).find((node) => (
+        node.id === previousSelection.id || node.xpath === previousSelection.xpath
+      )) || null
+    : null;
+}
+
 function currentPageSnapshot(node = selectedNode.value) {
   return {
     activity: currentActivity.value,
@@ -405,13 +500,10 @@ function getSelectedNode() {
   return null;
 }
 
-async function loadTreeSnapshot(clearSelection = true) {
-  const payload = await getAppiumTree(selectedDeviceId.value);
+async function loadTreeSnapshot(clearSelection = true, forceFresh = false) {
+  const payload = await fetchTreePayload(forceFresh);
   const parsedTree = parseWindowHierarchy(payload.xml);
-  rawXml.value = payload.xml;
-  currentActivity.value = payload.activity || '';
-  tree.value = parsedTree;
-  if (clearSelection) selectedNode.value = null;
+  applyTreeSnapshot(payload, parsedTree, clearSelection);
   return {
     activity: payload.activity || '',
     signature: treeSignature(parsedTree),
@@ -419,6 +511,56 @@ async function loadTreeSnapshot(clearSelection = true) {
   };
 }
 
+function stopAutoTreeRefresh() {
+  if (autoTreeRefreshTimer === null) return;
+  window.clearTimeout(autoTreeRefreshTimer);
+  autoTreeRefreshTimer = null;
+}
+
+function scheduleAutoTreeRefresh(delay = AUTO_TREE_REFRESH_INTERVAL_MS) {
+  stopAutoTreeRefresh();
+  if (!props.active || !selectedDeviceId.value || replaying.value) return;
+  autoTreeRefreshTimer = window.setTimeout(() => {
+    autoTreeRefreshTimer = null;
+    void syncTreeWhenPageChanges();
+  }, delay);
+}
+
+async function pauseAutoTreeRefresh() {
+  stopAutoTreeRefresh();
+  const pendingRequest = treeRequest;
+  if (pendingRequest) await pendingRequest.catch(() => undefined);
+  await wait(300);
+}
+
+async function syncTreeWhenPageChanges() {
+  if (
+    autoTreeRefreshInFlight
+    || loadingTree.value
+    || recordingBusy.value
+    || replaying.value
+    || launchingApp.value
+  ) {
+    scheduleAutoTreeRefresh();
+    return;
+  }
+
+  autoTreeRefreshInFlight = true;
+  try {
+    const payload = await fetchTreePayload();
+    const changed = (payload.activity || '') !== currentActivity.value
+      || payload.xml !== rawXml.value;
+    if (changed) {
+      applyTreeSnapshot(payload, parseWindowHierarchy(payload.xml), false);
+    }
+  } catch {
+    // A transient ADB/UIAutomator failure should not interrupt recording.
+  } finally {
+    autoTreeRefreshInFlight = false;
+    scheduleAutoTreeRefresh();
+  }
+}
+
 async function loadScripts() {
   const payload = await getAppiumScripts();
   scripts.value = payload.scripts || [];
@@ -428,6 +570,7 @@ async function loadScripts() {
 }
 
 async function switchDevice(deviceId: string) {
+  stopAutoTreeRefresh();
   tree.value = null;
   selectedNode.value = null;
   currentActivity.value = '';
@@ -438,20 +581,21 @@ async function triggerDeviceKey(keyCode: number) {
   if (!selectedDeviceId.value) return;
   try {
     await props.triggerDeviceKey(keyCode);
+    scheduleAutoTreeRefresh(500);
   } catch (error) {
     ElMessage.error(error instanceof Error ? error.message : '设备操作失败');
   }
 }
 
 async function refreshTree() {
-  if (loadingTree.value) return;
+  if (loadingTree.value || replaying.value) return;
   if (!selectedDeviceId.value) {
     ElMessage.warning('请选择设备');
     return;
   }
   loadingTree.value = true;
   try {
-    await loadTreeSnapshot();
+    await loadTreeSnapshot(true, true);
     props.refreshDevicePreview();
   } catch (error) {
     ElMessage.error(error instanceof Error ? error.message : '刷新组件树失败');
@@ -460,6 +604,42 @@ async function refreshTree() {
   }
 }
 
+async function executeFlowStep(index: number) {
+  const step = steps.value[index];
+  if (!step || step.type !== 'launchApp') return;
+  if (launchingApp.value) return;
+  if (!selectedDeviceId.value) {
+    ElMessage.warning('请选择设备');
+    return;
+  }
+  const packageName = step.value?.trim() || form.appPackage;
+  if (!packageName || !props.appPresets.some((app) => app.packageName === packageName)) {
+    ElMessage.warning('启动节点没有匹配的预设 App');
+    return;
+  }
+
+  launchingApp.value = true;
+  try {
+    await launchAppiumDeviceApp({
+      deviceId: selectedDeviceId.value,
+      packageName,
+    });
+    props.refreshDevicePreview();
+    await wait(800);
+    await loadTreeSnapshot(true, true);
+    props.refreshDevicePreview();
+    if (scriptActivityMismatch.value) {
+      ElMessage.warning(`App 已启动，当前页面仍为 ${currentActivity.value || '-'}`);
+    } else {
+      ElMessage.success('已进入脚本绑定页面，编辑锁定已解除');
+    }
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '启动 App 失败');
+  } finally {
+    launchingApp.value = false;
+  }
+}
+
 function selectNodeFromPoint(point: { x: number; y: number }) {
   const node = findSmallestNodeAtPoint(tree.value, point.x, point.y);
   if (node) {
@@ -485,6 +665,7 @@ async function swipePreview(gesture: {
       gesture.endY,
       gesture.duration,
     );
+    scheduleAutoTreeRefresh(500);
   } catch (error) {
     ElMessage.error(error instanceof Error ? error.message : '滑动失败');
   }
@@ -510,7 +691,7 @@ async function recordTapStep(index?: number) {
   try {
     await tapAppiumDevice({ deviceId: selectedDeviceId.value, x: bounds.centerX, y: bounds.centerY });
     await wait(1200);
-    const after = await loadTreeSnapshot();
+    const after = await loadTreeSnapshot(true, true);
     steps.value = steps.value.map((item) => (
       item.id === step.id ? { ...item, pageAfter: currentPageSnapshot() } : item
     ));
@@ -533,7 +714,7 @@ async function recordTapStep(index?: number) {
 }
 
 async function addStep(type: NodeStepType, index?: number) {
-  if (recordingLocked.value) return;
+  if (recordingBusy.value) return;
   if (!selectedNode.value) return;
   if (!ensureAppPackageSelected()) return;
   if (type === 'tap') {
@@ -554,7 +735,7 @@ async function addStep(type: NodeStepType, index?: number) {
 }
 
 async function addDelayStep(index?: number) {
-  if (recordingLocked.value) return;
+  if (recordingBusy.value) return;
   const input = await ElMessageBox.prompt('请输入延时时间，单位毫秒', '添加延时', {
     inputValue: '1000',
     inputPattern: /^[1-9]\d{0,5}$/,
@@ -573,19 +754,24 @@ function openLinkedScriptDialog(index?: number, branchTarget?: BranchTarget) {
     ElMessage.warning('暂无可连接的已保存脚本');
     return;
   }
+  linkedScriptBranchTarget.value = branchTarget || null;
   linkedScriptExpectedActivity.value = expectedActivityAfterStep(index);
-  if (!linkedScriptExpectedActivity.value) {
+  if (!linkedScriptBranchTarget.value && !linkedScriptExpectedActivity.value) {
     ElMessage.warning('无法确定当前插入点的 Activity，请先刷新组件树');
     return;
   }
   if (!compatibleLinkableScripts.value.length) {
-    ElMessage.warning(`没有入口 Activity 为 ${linkedScriptExpectedActivity.value} 的可连接脚本`);
+    ElMessage.warning(
+      linkedScriptBranchTarget.value
+        ? '没有属于当前 App 的可连接脚本'
+        : `没有入口 Activity 为 ${linkedScriptExpectedActivity.value} 的可连接脚本`,
+    );
     linkedScriptExpectedActivity.value = '';
+    linkedScriptBranchTarget.value = null;
     return;
   }
   linkedScriptTargetId.value = compatibleLinkableScripts.value[0]?.id || '';
   linkedScriptInsertIndex.value = index;
-  linkedScriptBranchTarget.value = branchTarget || null;
   linkedScriptDialogVisible.value = true;
 }
 
@@ -595,7 +781,14 @@ function addLinkedScriptStep() {
     ElMessage.warning('请选择要连接的脚本');
     return;
   }
-  if (!linkedScriptExpectedActivity.value || script.appActivity !== linkedScriptExpectedActivity.value) {
+  if (script.appPackage !== form.appPackage) {
+    ElMessage.error('连接脚本必须属于当前 App');
+    return;
+  }
+  if (
+    !linkedScriptBranchTarget.value
+    && (!linkedScriptExpectedActivity.value || script.appActivity !== linkedScriptExpectedActivity.value)
+  ) {
     ElMessage.error(
       `无法连接：插入点 Activity 为 ${linkedScriptExpectedActivity.value || '-'}，`
       + `目标脚本入口 Activity 为 ${script.appActivity || '-'}`,
@@ -605,11 +798,24 @@ function addLinkedScriptStep() {
   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,
-        step.id,
+        linkedScriptBranchTarget.value.entryTargetId || step.id,
       );
     }
   }
@@ -633,7 +839,6 @@ async function addAction(
   branchTarget?: BranchTarget,
 ) {
   if (recordingBusy.value) return;
-  if (scriptActivityMismatch.value && !['keyBack', 'runScript', 'launchApp', 'delay'].includes(action)) return;
   if (!ensureAppPackageSelected()) return;
   if (action === 'launchApp' && steps.value.some((step) => step.type === 'launchApp')) {
     ElMessage.warning('启动 APP 节点只能添加一个');
@@ -786,16 +991,91 @@ async function addAction(
 async function addBranchAction(index: number, branch: BranchName, action: RecorderAction) {
   const source = steps.value[index];
   if (!source) return;
+  const existingBranchSteps = steps.value.filter((step) => (
+    step.flow?.parentConditionId === source.id
+    && step.flow.parentBranch === branch
+  ));
   const currentTargetId = branch === 'yes' ? source.flow?.yesTargetId : source.flow?.noTargetId;
+  const currentTarget = steps.value.find((step) => step.id === currentTargetId);
+  const targetIsBranchStep = currentTarget?.flow?.parentConditionId === source.id
+    && currentTarget.flow.parentBranch === branch;
   const insertIndex = branchInsertIndex(source.id, branch, index);
   const inserted = await addAction(action, insertIndex, {
     stepId: source.id,
     branch,
-    updateTarget: !currentTargetId,
+    updateTarget: !currentTargetId || !targetIsBranchStep,
+    entryTargetId: existingBranchSteps[0]?.id,
+    nextTargetId: !targetIsBranchStep ? currentTargetId : undefined,
   });
   if (!inserted) return;
   attachStepToBranch(inserted.id, source.id, branch);
-  if (!currentTargetId) updateBranchTarget(source.id, branch, inserted.id);
+  if (!currentTargetId || !targetIsBranchStep) {
+    steps.value = steps.value.map((step) => (
+      step.id === inserted.id && currentTargetId
+        ? {
+            ...step,
+            flow: { ...(step.flow || {}), successTargetId: currentTargetId },
+          }
+        : step
+    ));
+    updateBranchTarget(source.id, branch, existingBranchSteps[0]?.id || inserted.id);
+  }
+}
+
+function connectBranchToNext(index: number, branch: BranchName) {
+  if (recordingLocked.value) return;
+  const condition = steps.value[index];
+  if (!condition) return;
+  const nextMainStep = steps.value.slice(index + 1).find((step) => !step.flow?.parentConditionId);
+  if (!nextMainStep) {
+    ElMessage.warning('当前判断节点后没有可连接的主流程节点');
+    return;
+  }
+
+  const branchSteps = steps.value.filter((step) => (
+    step.flow?.parentConditionId === condition.id
+    && step.flow.parentBranch === branch
+  ));
+  if (!branchSteps.length) {
+    updateBranchTarget(condition.id, branch, nextMainStep.id);
+  } else {
+    const firstBranchStep = branchSteps[0];
+    const lastBranchStep = branchSteps[branchSteps.length - 1];
+    updateBranchTarget(condition.id, branch, firstBranchStep.id);
+    steps.value = steps.value.map((step) => (
+      step.id === lastBranchStep.id
+        ? {
+            ...step,
+            flow: { ...(step.flow || {}), successTargetId: nextMainStep.id },
+          }
+        : step
+    ));
+  }
+  ElMessage.success(`${branch === 'yes' ? '是' : '否'}分支已连接到「${nextMainStep.label}」`);
+}
+
+function disconnectBranchFromNext(index: number, branch: BranchName) {
+  if (recordingLocked.value) return;
+  const condition = steps.value[index];
+  if (!condition) return;
+  const branchSteps = steps.value.filter((step) => (
+    step.flow?.parentConditionId === condition.id
+    && step.flow.parentBranch === branch
+  ));
+  if (!branchSteps.length) {
+    updateBranchTarget(condition.id, branch, '');
+  } else {
+    const lastBranchStep = branchSteps[branchSteps.length - 1];
+    steps.value = steps.value.map((step) => (
+      step.id === lastBranchStep.id
+        ? {
+            ...step,
+            flow: { ...(step.flow || {}), successTargetId: '' },
+          }
+        : step
+    ));
+  }
+  ElMessage.success(`${branch === 'yes' ? '是' : '否'}分支已取消连接`);
 }
 
 async function saveOnActivityChange() {
@@ -818,6 +1098,7 @@ async function saveOnActivityChange() {
     pendingNavigation.value = null;
     resetCurrentScript();
     form.appActivity = pending.afterActivity;
+    markDraftSaved();
     ElMessage.success(`脚本「${payload.script.name}」已保存，可开始录制新 Activity`);
   } catch (error) {
     ElMessage.error(error instanceof Error ? error.message : '保存脚本失败');
@@ -891,6 +1172,7 @@ function loadScript(script: AppiumRecordedScript) {
   }
   steps.value = (script.steps || []).map(normalizeLegacyFlowScope);
   activeWorkbenchTab.value = 'recording';
+  markDraftSaved();
 }
 
 function loadSelectedScript() {
@@ -907,6 +1189,7 @@ function resetCurrentScript() {
   form.appActivity = '';
   steps.value = [];
   replayOutput.value = '';
+  markDraftSaved();
 }
 
 function formatScriptTime(value: string) {
@@ -943,6 +1226,38 @@ 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();
+}
+
+function chooseScriptImportFile() {
+  scriptImportInput.value?.click();
+}
+
+async function importScriptFile(event: Event) {
+  const input = event.currentTarget as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (!file) return;
+  importingScript.value = true;
+  try {
+    const payload = JSON.parse(await file.text()) as unknown;
+    const result = await importAppiumScript(payload);
+    await loadScripts();
+    loadScript(result.script);
+    ElMessage.success(`脚本「${result.script.name}」已导入`);
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '导入脚本失败');
+  } finally {
+    importingScript.value = false;
+  }
+}
+
 async function saveScript() {
   if (!ensureAppPackageSelected()) return;
   saving.value = true;
@@ -957,6 +1272,7 @@ async function saveScript() {
     });
     await loadScripts();
     selectedScriptId.value = payload.script.id;
+    markDraftSaved();
     ElMessage.success('Appium 脚本已保存');
   } catch (error) {
     ElMessage.error(error instanceof Error ? error.message : '保存失败');
@@ -973,18 +1289,42 @@ async function replayScript() {
   replaying.value = true;
   replayOutput.value = '';
   try {
-    const result = await replayAppiumScript({ id: selectedScript.value.id, deviceId: selectedDeviceId.value });
+    await pauseAutoTreeRefresh();
+    const result = await replayAppiumScript(
+      { id: selectedScript.value.id, deviceId: selectedDeviceId.value },
+      (line) => {
+        replayOutput.value += `${replayOutput.value ? '\n' : ''}${line}`;
+      },
+    );
     replayOutput.value = result.output || '';
-    if (result.success) ElMessage.success('回放完成');
+    if (result.success) {
+      ElMessage.success('回放完成');
+    } else {
+      ElMessage.error('回放失败，详情见回放输出');
+    }
   } catch (error) {
-    replayOutput.value = error instanceof Error ? error.message : '回放失败';
+    const message = error instanceof Error ? error.message : '回放失败';
+    replayOutput.value += `${replayOutput.value ? '\n' : ''}${message}`;
     ElMessage.error('回放失败，详情见回放输出');
   } finally {
     replaying.value = false;
+    scheduleAutoTreeRefresh(800);
   }
 }
 
-onMounted(loadScripts);
+onMounted(() => {
+  window.addEventListener('beforeunload', warnBeforeUnload);
+  void loadScripts();
+});
+
+onUnmounted(() => {
+  window.removeEventListener('beforeunload', warnBeforeUnload);
+  stopAutoTreeRefresh();
+});
+
+watch(activeWorkbenchTab, (tab) => {
+  window.localStorage.setItem(WORKBENCH_TAB_STORAGE_KEY, tab);
+});
 
 watch(() => form.appPackage, (packageName) => {
   if (!packageName) return;
@@ -998,7 +1338,10 @@ watch(() => form.appPackage, (packageName) => {
 watch(
   () => [props.active, props.playgroundDeviceId] as const,
   ([active, deviceId]) => {
-    if (active && deviceId) void refreshTree();
+    stopAutoTreeRefresh();
+    if (active && deviceId) {
+      void refreshTree().finally(() => scheduleAutoTreeRefresh());
+    }
   },
   { immediate: true },
 );
@@ -1033,7 +1376,7 @@ watch(
         <template #header>
           <div class="panel-header">
             <span>App 组件树</span>
-            <el-button :icon="Refresh" :loading="loadingTree" @click="refreshTree">
+            <el-button :icon="Refresh" :loading="loadingTree" :disabled="replaying" @click="refreshTree">
               刷新组件树
             </el-button>
           </div>
@@ -1105,7 +1448,7 @@ watch(
                       <strong>当前 Activity</strong>
                       <code>{{ currentActivity || '正在获取' }}</code>
                     </div>
-                    <p>当前仅允许插入“系统返回”或连接与插入点 Activity 匹配的脚本，其他流程编辑已锁定。</p>
+                    <p>请在录制流程中添加或执行“启动 APP”节点；Activity 匹配后会自动解除编辑锁定。</p>
                   </div>
                 </el-alert>
                 <NodeDetail
@@ -1120,12 +1463,16 @@ watch(
                 <RecordedSteps
                   :steps="steps"
                   :disabled="recordingLocked"
-                  :allowed-locked-actions="scriptActivityMismatch && !recordingBusy ? ['keyBack', 'runScript', 'launchApp', 'delay'] : []"
+                  :allowed-locked-actions="scriptActivityMismatch && !recordingBusy ? insertableRecorderActions : []"
+                  :launching-step-id="launchingApp ? steps.find((step) => step.type === 'launchApp')?.id : ''"
                   @remove="removeStep"
                   @add-delay="addDelayStep"
                   @insert-action="(index, action) => addAction(action, index)"
                   @insert-branch-action="addBranchAction"
+                  @connect-next="connectBranchToNext"
+                  @disconnect-next="disconnectBranchFromNext"
                   @edit-input="editInputStep"
+                  @execute-step="executeFlowStep"
                   @update-step="updateStep"
                 />
               </section>
@@ -1167,6 +1514,18 @@ watch(
 
           <el-tab-pane label="脚本列表" name="scripts">
             <div class="appium-script-list">
+              <div class="appium-script-list__toolbar">
+                <el-button :icon="Upload" :loading="importingScript" @click="chooseScriptImportFile">
+                  导入脚本
+                </el-button>
+                <input
+                  ref="scriptImportInput"
+                  class="appium-script-list__file-input"
+                  type="file"
+                  accept="application/json,.json"
+                  @change="importScriptFile"
+                >
+              </div>
               <el-empty v-if="!scripts.length" description="暂无录制脚本" />
               <template v-else>
                 <article
@@ -1182,6 +1541,12 @@ watch(
                   </div>
                   <div class="appium-script-list__actions">
                     <el-button size="small" @click="loadScript(script)">加载</el-button>
+                    <el-button
+                      size="small"
+                      :icon="Download"
+                      title="下载脚本"
+                      @click="downloadScript(script)"
+                    />
                     <el-button
                       size="small"
                       type="danger"
@@ -1234,10 +1599,10 @@ watch(
       @closed="closeLinkedScriptDialog"
     >
       <el-form label-position="top">
-        <el-form-item label="插入点 Activity">
+        <el-form-item :label="linkedScriptBranchTarget ? '分支录制 Activity' : '插入点 Activity'">
           <code class="appium-linked-script-activity">{{ linkedScriptExpectedActivity || '-' }}</code>
         </el-form-item>
-        <el-form-item label="选择入口 Activity 匹配的脚本">
+        <el-form-item :label="linkedScriptBranchTarget ? '选择同一 App 的脚本（回放时等待入口 Activity）' : '选择入口 Activity 匹配的脚本'">
           <el-select
             v-model="linkedScriptTargetId"
             filterable
@@ -1247,7 +1612,7 @@ watch(
             <el-option
               v-for="script in compatibleLinkableScripts"
               :key="script.id"
-              :label="`${script.name} · ${script.steps.length} 步`"
+              :label="`${script.name} · ${script.appActivity || '未绑定 Activity'} · ${script.steps.length} 步`"
               :value="script.id"
             />
           </el-select>