android-midscene-automation 0.1.0

package/src/appium-recorder/AppiumPage.vue

@@ -0,0 +1,894 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, shallowRef, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Check, Delete, Refresh, VideoPlay } from '@element-plus/icons-vue';
+import type { AndroidDevice, AppPreset, DeviceAction } from '../types';
+import DevicePreviewPanel from '../components/device/DevicePreviewPanel.vue';
+import {
+  deleteAppiumScript,
+  getAppiumScripts,
+  getAppiumTree,
+  pressAppiumDeviceKey,
+  replayAppiumScript,
+  saveAppiumScript,
+  tapAppiumDevice,
+} from './api';
+import ComponentTree from './components/ComponentTree.vue';
+import NodeDetail from './components/NodeDetail.vue';
+import RecordedSteps from './components/RecordedSteps.vue';
+import { findSmallestNodeAtPoint, flattenNodes, parseWindowHierarchy } from './tree';
+import type { AppiumNode, AppiumRecordedScript, AppiumRecordedStep } from './types';
+
+type NodeStepType = 'tap' | 'input' | 'assertExists';
+type RecorderAction =
+  | 'delay'
+  | NodeStepType
+  | 'keyBack'
+  | 'keyHome'
+  | 'keyRecent'
+  | 'keyPower'
+  | 'waitActivity'
+  | 'swipe'
+  | 'clearInput'
+  | 'coordinateTap'
+  | 'launchApp'
+  | 'waitDisappear'
+  | 'assertText'
+  | 'longPress'
+  | 'pinch';
+
+const props = defineProps<{
+  active: boolean;
+  appPresets: AppPreset[];
+  deviceActions: readonly DeviceAction[];
+  playgroundAvailable: boolean;
+  playgroundDeviceId: string;
+  playgroundFrameUrl: string;
+  playgroundPreviewError: string;
+  devicePreviewUrl: string;
+  androidDevices: AndroidDevice[];
+  deviceWidth: number;
+  deviceHeight: number;
+  switchAndroidDevice: (deviceId: string) => Promise<void>;
+  triggerDeviceKey: (keyCode: number) => Promise<void>;
+  refreshDevicePreview: () => void;
+  swipeDevice: (
+    startX: number,
+    startY: number,
+    endX: number,
+    endY: number,
+    duration?: number,
+  ) => Promise<void>;
+}>();
+
+const selectedDeviceId = computed(() => props.playgroundDeviceId);
+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 steps = shallowRef<AppiumRecordedStep[]>([]);
+const rawXml = shallowRef('');
+const currentActivity = shallowRef('');
+const replayOutput = shallowRef('');
+const loadingTree = shallowRef(false);
+const saving = shallowRef(false);
+const deletingScriptId = shallowRef('');
+const replaying = shallowRef(false);
+const recordingTap = shallowRef(false);
+const resolvingNavigation = shallowRef(false);
+const maxReplayOutputLength = 20_000;
+const pendingNavigation = shallowRef<{
+  beforeActivity: string;
+  afterActivity: string;
+  beforeSignature: string;
+  afterSignature: string;
+} | null>(null);
+
+const form = reactive({
+  name: '',
+  appPackage: '',
+  appActivity: '',
+});
+
+const selectedScript = computed(() => scripts.value.find((script) => script.id === selectedScriptId.value) || null);
+const visibleReplayOutput = computed(() => replayOutput.value);
+const hasSelectedAppPackage = computed(() => props.appPresets.some((app) => app.packageName === form.appPackage));
+const recordingLocked = computed(() => recordingTap.value || resolvingNavigation.value || Boolean(pendingNavigation.value));
+const overlayBounds = computed(() => flattenNodes(tree.value).flatMap((node) => (
+  node.bounds ? [{ id: node.id, ...node.bounds }] : []
+)));
+const selectedBounds = computed(() => {
+  const bounds = selectedNode.value?.bounds;
+  return bounds && selectedNode.value ? { id: selectedNode.value.id, ...bounds } : undefined;
+});
+
+function createStep(type: NodeStepType, node: AppiumNode): AppiumRecordedStep {
+  const labelMap = {
+    tap: '点击',
+    input: '输入',
+    assertExists: '断言存在',
+  };
+  return {
+    id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
+    type,
+    label: `${labelMap[type]} ${node.label}`,
+    selector: node.selector,
+    fallback: node.bounds ? { strategy: 'bounds', centerX: node.bounds.centerX, centerY: node.bounds.centerY } : undefined,
+    timeoutMs: type === 'assertExists' ? 10000 : undefined,
+    snapshot: {
+      text: node.text,
+      resourceId: node.resourceId,
+      contentDesc: node.contentDesc,
+      className: node.className,
+    },
+  };
+}
+
+function trimReplayOutput(output: string) {
+  if (output.length <= maxReplayOutputLength) return output;
+  return `... 已截断前 ${output.length - maxReplayOutputLength} 个字符，仅显示最后 ${maxReplayOutputLength} 个字符\n${output.slice(-maxReplayOutputLength)}`;
+}
+
+function createDelayStep(timeoutMs: number): AppiumRecordedStep {
+  return {
+    id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
+    type: 'delay',
+    label: `延时 ${timeoutMs}ms`,
+    timeoutMs,
+  };
+}
+
+function createNodeActionStep(
+  type: AppiumRecordedStep['type'],
+  label: string,
+  node: AppiumNode,
+  options: Pick<AppiumRecordedStep, 'timeoutMs' | 'value'> = {},
+): AppiumRecordedStep {
+  return {
+    id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
+    type,
+    label: `${label} ${node.label}`,
+    selector: node.selector,
+    fallback: node.bounds ? { strategy: 'bounds', centerX: node.bounds.centerX, centerY: node.bounds.centerY } : undefined,
+    ...options,
+    snapshot: {
+      text: node.text,
+      resourceId: node.resourceId,
+      contentDesc: node.contentDesc,
+      className: node.className,
+    },
+  };
+}
+
+function createKeyStep(keyCode: number, label = '按返回键'): AppiumRecordedStep {
+  return {
+    id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
+    type: 'key',
+    label,
+    keyCode,
+  };
+}
+
+function createSwipeStep(direction: string): AppiumRecordedStep {
+  const normalizedDirection = ({ 上: 'up', 下: 'down', 左: 'left', 右: 'right' } as Record<string, string>)[direction] || direction;
+  const width = props.deviceWidth || 1080;
+  const height = props.deviceHeight || 1920;
+  const centerX = Math.round(width * 0.5);
+  const centerY = Math.round(height * 0.5);
+  const distanceX = Math.round(width * 0.35);
+  const distanceY = Math.round(height * 0.35);
+  const swipeMap: Record<string, AppiumRecordedStep['swipe']> = {
+    up: { startX: centerX, startY: centerY + distanceY, endX: centerX, endY: centerY - distanceY, duration: 500 },
+    down: { startX: centerX, startY: centerY - distanceY, endX: centerX, endY: centerY + distanceY, duration: 500 },
+    left: { startX: centerX + distanceX, startY: centerY, endX: centerX - distanceX, endY: centerY, duration: 500 },
+    right: { startX: centerX - distanceX, startY: centerY, endX: centerX + distanceX, endY: centerY, duration: 500 },
+  };
+  const labelMap: Record<string, string> = { up: '上滑', down: '下滑', left: '左滑', right: '右滑' };
+  return {
+    id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
+    type: 'swipe',
+    label: labelMap[normalizedDirection] || '滑动',
+    swipe: swipeMap[normalizedDirection] || swipeMap.up,
+  };
+}
+
+function createWaitActivityStep(activity: string): AppiumRecordedStep {
+  return {
+    id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
+    type: 'waitActivity',
+    label: `等待 Activity ${activity}`,
+    value: activity,
+    timeoutMs: 10000,
+  };
+}
+
+function wait(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function treeSignature(root: AppiumNode | null) {
+  return flattenNodes(root)
+    .slice(0, 300)
+    .map((node) => [
+      node.resourceId,
+      node.text,
+      node.contentDesc,
+      node.className,
+      node.xpath,
+    ].join('|'))
+    .join('\n');
+}
+
+function ensureAppPackageSelected() {
+  if (hasSelectedAppPackage.value) return true;
+  ElMessage.warning('请先从预设 App 参数中选择 App 包名');
+  return false;
+}
+
+function getSelectedNode() {
+  if (selectedNode.value) return selectedNode.value;
+  ElMessage.warning('请先选择组件');
+  return null;
+}
+
+async function loadTreeSnapshot(clearSelection = true) {
+  const payload = await getAppiumTree(selectedDeviceId.value);
+  const parsedTree = parseWindowHierarchy(payload.xml);
+  rawXml.value = payload.xml;
+  currentActivity.value = payload.activity || '';
+  tree.value = parsedTree;
+  if (clearSelection) selectedNode.value = null;
+  return {
+    activity: payload.activity || '',
+    signature: treeSignature(parsedTree),
+    tree: parsedTree,
+  };
+}
+
+async function loadScripts() {
+  const payload = await getAppiumScripts();
+  scripts.value = payload.scripts || [];
+  if (selectedScriptId.value && !scripts.value.some((script) => script.id === selectedScriptId.value)) {
+    selectedScriptId.value = '';
+  }
+  if (!selectedScriptId.value) {
+    selectedScriptId.value = scripts.value[0]?.id || '';
+  }
+}
+
+async function switchDevice(deviceId: string) {
+  tree.value = null;
+  selectedNode.value = null;
+  currentActivity.value = '';
+  await props.switchAndroidDevice(deviceId);
+}
+
+async function triggerDeviceKey(keyCode: number) {
+  if (!selectedDeviceId.value) return;
+  try {
+    await props.triggerDeviceKey(keyCode);
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '设备操作失败');
+  }
+}
+
+async function refreshTree() {
+  if (loadingTree.value) return;
+  if (!selectedDeviceId.value) {
+    ElMessage.warning('请选择设备');
+    return;
+  }
+  loadingTree.value = true;
+  try {
+    await loadTreeSnapshot();
+    props.refreshDevicePreview();
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '刷新组件树失败');
+  } finally {
+    loadingTree.value = false;
+  }
+}
+
+function selectNodeFromPoint(point: { x: number; y: number }) {
+  const node = findSmallestNodeAtPoint(tree.value, point.x, point.y);
+  if (node) {
+    selectedNode.value = node;
+    return;
+  }
+  ElMessage.warning('未命中组件树节点');
+}
+
+async function swipePreview(gesture: {
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+  duration: number;
+}) {
+  if (!selectedDeviceId.value) return;
+  try {
+    await props.swipeDevice(
+      gesture.startX,
+      gesture.startY,
+      gesture.endX,
+      gesture.endY,
+      gesture.duration,
+    );
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '滑动失败');
+  }
+}
+
+async function recordTapStep() {
+  if (!selectedNode.value || recordingTap.value) return;
+  if (!ensureAppPackageSelected()) return;
+  if (!selectedDeviceId.value) {
+    ElMessage.warning('请选择设备');
+    return;
+  }
+  const node = selectedNode.value;
+  const bounds = node.bounds;
+  if (!bounds) {
+    ElMessage.warning('当前组件没有可点击坐标');
+    return;
+  }
+  const beforeActivity = currentActivity.value;
+  const beforeSignature = treeSignature(tree.value);
+  const step = createStep('tap', node);
+  steps.value = [...steps.value, step];
+  recordingTap.value = true;
+  try {
+    await tapAppiumDevice({ deviceId: selectedDeviceId.value, x: bounds.centerX, y: bounds.centerY });
+    await wait(1200);
+    const after = await loadTreeSnapshot();
+    const activityChanged = Boolean(beforeActivity && after.activity && beforeActivity !== after.activity);
+    const treeChanged = Boolean(beforeSignature && after.signature && beforeSignature !== after.signature);
+    if (activityChanged || treeChanged) {
+      pendingNavigation.value = {
+        beforeActivity,
+        afterActivity: after.activity,
+        beforeSignature,
+        afterSignature: after.signature,
+      };
+      return;
+    }
+    ElMessage.success('已录制点击');
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '录制点击失败');
+  } finally {
+    recordingTap.value = false;
+  }
+}
+
+async function addStep(type: NodeStepType) {
+  if (recordingLocked.value) return;
+  if (!selectedNode.value) return;
+  if (!ensureAppPackageSelected()) return;
+  if (type === 'tap') {
+    await recordTapStep();
+    return;
+  }
+  const step = createStep(type, selectedNode.value);
+  if (type === 'input') {
+    const input = await ElMessageBox.prompt('', '录制输入', {
+      inputValue: '',
+      confirmButtonText: '添加',
+      cancelButtonText: '取消',
+      center: true,
+    }).catch(() => null);
+    if (!input) return;
+    step.value = input.value;
+  }
+  steps.value = [...steps.value, step];
+}
+
+async function addDelayStep(index?: number) {
+  if (recordingLocked.value) return;
+  const input = await ElMessageBox.prompt('请输入延时时间，单位毫秒', '添加延时', {
+    inputValue: '1000',
+    inputPattern: /^[1-9]\d{0,5}$/,
+    inputErrorMessage: '请输入 1 到 999999 之间的整数',
+    confirmButtonText: '添加',
+    cancelButtonText: '取消',
+  }).catch(() => null);
+  if (!input) return;
+  const timeoutMs = Number(input.value);
+  const step = createDelayStep(timeoutMs);
+  const nextSteps = [...steps.value];
+  nextSteps.splice(typeof index === 'number' ? index + 1 : nextSteps.length, 0, step);
+  steps.value = nextSteps;
+}
+
+async function addAction(action: RecorderAction) {
+  if (recordingLocked.value) return;
+  if (!ensureAppPackageSelected()) return;
+  if (action === 'delay') {
+    await addDelayStep();
+    return;
+  }
+  if (action === 'tap' || action === 'input' || action === 'assertExists') {
+    await addStep(action);
+    return;
+  }
+  if (action === 'keyBack') {
+    steps.value = [...steps.value, createKeyStep(4, '返回键')];
+    return;
+  }
+  if (action === 'keyHome') {
+    steps.value = [...steps.value, createKeyStep(3, 'Home 键')];
+    return;
+  }
+  if (action === 'keyRecent') {
+    steps.value = [...steps.value, createKeyStep(187, '最近任务')];
+    return;
+  }
+  if (action === 'keyPower') {
+    steps.value = [...steps.value, createKeyStep(26, '电源键')];
+    return;
+  }
+  if (action === 'waitActivity') {
+    const input = await ElMessageBox.prompt('请输入目标 Activity', '等待 Activity', {
+      inputValue: currentActivity.value,
+      confirmButtonText: '添加',
+      cancelButtonText: '取消',
+    }).catch(() => null);
+    if (input?.value) steps.value = [...steps.value, createWaitActivityStep(input.value)];
+    return;
+  }
+  if (action === 'swipe') {
+    const input = await ElMessageBox.prompt('请输入滑动方向：上 / 下 / 左 / 右', '添加滑动', {
+      inputValue: '上',
+      inputPattern: /^(上|下|左|右|up|down|left|right)$/,
+      inputErrorMessage: '只能输入 上、下、左、右',
+      confirmButtonText: '添加',
+      cancelButtonText: '取消',
+    }).catch(() => null);
+    if (input?.value) steps.value = [...steps.value, createSwipeStep(input.value)];
+    return;
+  }
+  if (action === 'pinch') {
+    const input = await ElMessageBox.prompt('请输入缩放方向：放大 / 缩小', '添加双指缩放', {
+      inputValue: '放大',
+      inputPattern: /^(放大|缩小|out|in)$/,
+      inputErrorMessage: '只能输入 放大 或 缩小',
+      confirmButtonText: '添加',
+      cancelButtonText: '取消',
+    }).catch(() => null);
+    if (!input?.value) return;
+    const direction = input.value === '缩小' || input.value === 'in' ? 'in' : 'out';
+    steps.value = [...steps.value, {
+      id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
+      type: 'pinch',
+      label: direction === 'out' ? '双指放大' : '双指缩小',
+      pinch: {
+        direction,
+        centerX: Math.round((props.deviceWidth || 1080) / 2),
+        centerY: Math.round((props.deviceHeight || 1920) / 2),
+        percent: 0.5,
+      },
+    }];
+    return;
+  }
+  if (action === 'launchApp') {
+    steps.value = [...steps.value, {
+      id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
+      type: 'launchApp',
+      label: `启动 App ${form.appPackage}`,
+      value: form.appPackage,
+    }];
+    return;
+  }
+  const node = getSelectedNode();
+  if (!node) return;
+  if (action === 'clearInput') {
+    steps.value = [...steps.value, createNodeActionStep('clearInput', '清空输入', node)];
+    return;
+  }
+  if (action === 'coordinateTap') {
+    if (!node.bounds) {
+      ElMessage.warning('当前组件没有可点击坐标');
+      return;
+    }
+    steps.value = [...steps.value, {
+      id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
+      type: 'coordinateTap',
+      label: `点击坐标 ${node.bounds.centerX},${node.bounds.centerY}`,
+      fallback: { strategy: 'bounds', centerX: node.bounds.centerX, centerY: node.bounds.centerY },
+    }];
+    return;
+  }
+  if (action === 'longPress') {
+    if (!node.bounds) {
+      ElMessage.warning('当前组件没有可长按坐标');
+      return;
+    }
+    steps.value = [...steps.value, {
+      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: 800,
+    }];
+    return;
+  }
+  if (action === 'waitDisappear') {
+    steps.value = [...steps.value, createNodeActionStep('waitDisappear', '等待元素消失', node, { timeoutMs: 10000 })];
+    return;
+  }
+  if (action === 'assertText') {
+    const input = await ElMessageBox.prompt('请输入要断言的文本', '断言文本', {
+      inputValue: node.text,
+      confirmButtonText: '添加',
+      cancelButtonText: '取消',
+    }).catch(() => null);
+    if (input?.value) steps.value = [...steps.value, createNodeActionStep('assertText', '断言文本', node, { value: input.value })];
+  }
+}
+
+async function returnToPreviousPage() {
+  const pending = pendingNavigation.value;
+  if (!pending || resolvingNavigation.value) return;
+  resolvingNavigation.value = true;
+  try {
+    await pressAppiumDeviceKey({ deviceId: selectedDeviceId.value, keyCode: 4 });
+    let returned = false;
+    for (let index = 0; index < 6; index += 1) {
+      await wait(700);
+      const snapshot = await loadTreeSnapshot();
+      const activityReturned = !pending.beforeActivity || snapshot.activity === pending.beforeActivity;
+      const leftDestination = !pending.afterSignature || snapshot.signature !== pending.afterSignature;
+      if (activityReturned && leftDestination) {
+        returned = true;
+        break;
+      }
+    }
+    if (!returned) throw new Error('设备页面未返回，请确认当前页面支持系统返回键');
+    steps.value = [
+      ...steps.value,
+      createKeyStep(4),
+      ...(pending.beforeActivity ? [createWaitActivityStep(pending.beforeActivity)] : []),
+    ];
+    pendingNavigation.value = null;
+    ElMessage.success('已返回原页面，可继续录制');
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '返回原页面失败');
+  } finally {
+    resolvingNavigation.value = false;
+  }
+}
+
+function stayOnCurrentPage() {
+  if (resolvingNavigation.value) return;
+  pendingNavigation.value = null;
+  ElMessage.success('继续在当前页面录制');
+}
+
+async function saveAsBranchScript() {
+  const pending = pendingNavigation.value;
+  if (!pending || resolvingNavigation.value) return;
+  if (!ensureAppPackageSelected()) return;
+  resolvingNavigation.value = true;
+  const activityName = (pending.afterActivity || 'branch').split(/[/.]/).filter(Boolean).pop() || 'branch';
+  const branchName = `${form.name || 'Appium脚本'}-${activityName}-${Date.now().toString(36).slice(-4)}`;
+  try {
+    const payload = await saveAppiumScript({
+      name: branchName,
+      appPackage: form.appPackage,
+      appActivity: form.appActivity,
+      deviceId: selectedDeviceId.value,
+      steps: steps.value,
+    });
+    await loadScripts();
+    selectedScriptId.value = payload.script.id;
+    form.name = payload.script.name;
+    pendingNavigation.value = null;
+    ElMessage.success('已保存为新用例');
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '保存新用例失败');
+  } finally {
+    resolvingNavigation.value = false;
+  }
+}
+
+function removeStep(index: number) {
+  steps.value = steps.value.filter((_step, stepIndex) => stepIndex !== index);
+}
+
+async function editInputStep(index: number) {
+  const step = steps.value[index];
+  if (!step || step.type !== 'input' || recordingLocked.value) return;
+  const input = await ElMessageBox.prompt('请输入新的录制文本', '修改输入内容', {
+    inputValue: step.value || '',
+    confirmButtonText: '保存',
+    cancelButtonText: '取消',
+    center: true,
+  }).catch(() => null);
+  if (!input) return;
+  const nextSteps = [...steps.value];
+  nextSteps[index] = { ...step, value: input.value };
+  steps.value = nextSteps;
+}
+
+function loadScript(script: AppiumRecordedScript) {
+  selectedScriptId.value = script.id;
+  form.name = script.name;
+  form.appPackage = script.appPackage;
+  form.appActivity = script.appActivity;
+  if (script.deviceId && script.deviceId !== selectedDeviceId.value) {
+    void switchDevice(script.deviceId);
+  }
+  steps.value = script.steps || [];
+  activeWorkbenchTab.value = 'recording';
+}
+
+function loadSelectedScript() {
+  if (selectedScript.value) loadScript(selectedScript.value);
+}
+
+function resetCurrentScript() {
+  selectedScriptId.value = '';
+  form.name = '';
+  form.appActivity = '';
+  steps.value = [];
+  replayOutput.value = '';
+}
+
+function formatScriptTime(value: string) {
+  if (!value) return '-';
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? '-' : date.toLocaleString();
+}
+
+async function removeScript(script: AppiumRecordedScript) {
+  try {
+    await ElMessageBox.confirm(`确定删除脚本「${script.name}」吗？`, '删除脚本', {
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+      confirmButtonClass: 'el-button--danger',
+    });
+  } catch {
+    return;
+  }
+
+  deletingScriptId.value = script.id;
+  const wasCurrent = selectedScriptId.value === script.id;
+  try {
+    await deleteAppiumScript(script.id);
+    await loadScripts();
+    if (wasCurrent) {
+      resetCurrentScript();
+    }
+    ElMessage.success('脚本已删除');
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '删除脚本失败');
+  } finally {
+    deletingScriptId.value = '';
+  }
+}
+
+async function saveScript() {
+  if (!ensureAppPackageSelected()) return;
+  saving.value = true;
+  try {
+    const payload = await saveAppiumScript({
+      id: selectedScript.value?.id,
+      name: form.name,
+      appPackage: form.appPackage,
+      appActivity: form.appActivity,
+      deviceId: selectedDeviceId.value,
+      steps: steps.value,
+    });
+    await loadScripts();
+    selectedScriptId.value = payload.script.id;
+    ElMessage.success('Appium 脚本已保存');
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '保存失败');
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function replayScript() {
+  if (!selectedScript.value) {
+    ElMessage.warning('请选择已保存脚本');
+    return;
+  }
+  replaying.value = true;
+  replayOutput.value = '';
+  try {
+    const result = await replayAppiumScript({ id: selectedScript.value.id, deviceId: selectedDeviceId.value });
+    replayOutput.value = trimReplayOutput(result.output);
+    if (result.success) ElMessage.success('回放完成');
+  } catch (error) {
+    replayOutput.value = trimReplayOutput(error instanceof Error ? error.message : '回放失败');
+    ElMessage.error('回放失败，详情见回放输出');
+  } finally {
+    replaying.value = false;
+  }
+}
+
+onMounted(loadScripts);
+
+watch(
+  () => [props.active, props.playgroundDeviceId] as const,
+  ([active, deviceId]) => {
+    if (active && deviceId) void refreshTree();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <section class="appium-recorder-page">
+    <div v-if="active" class="appium-header-actions">
+      <el-select
+        v-model="selectedScriptId"
+        placeholder="选择脚本"
+        class="appium-header-actions__script"
+        @change="loadSelectedScript"
+      >
+        <el-option v-for="script in scripts" :key="script.id" :label="script.name" :value="script.id" />
+      </el-select>
+      <el-button :icon="Check" :loading="saving" @click="saveScript">保存</el-button>
+      <el-button
+        type="primary"
+        :icon="VideoPlay"
+        :loading="replaying"
+        :disabled="!selectedScript"
+        @click="replayScript"
+      >
+        回放
+      </el-button>
+    </div>
+
+    <div class="appium-recorder-layout">
+      <el-card shadow="never" class="appium-recorder-card">
+        <template #header>
+          <div class="panel-header">
+            <span>App 组件树</span>
+            <el-button :icon="Refresh" :loading="loadingTree" @click="refreshTree">
+              刷新组件树
+            </el-button>
+          </div>
+        </template>
+        <div class="appium-tree-panel">
+          <ComponentTree :tree="tree" :selected-id="selectedNode?.id || ''" @select="selectedNode = $event" />
+          <div class="appium-current-activity">
+            <span>当前 Activity</span>
+            <code>{{ currentActivity || '-' }}</code>
+          </div>
+        </div>
+      </el-card>
+
+      <DevicePreviewPanel
+        :available="playgroundAvailable"
+        :devices="androidDevices"
+        :selected-device-id="selectedDeviceId"
+        :frame-url="playgroundFrameUrl"
+        :image-url="devicePreviewUrl"
+        :preview-error="playgroundPreviewError"
+        :actions="deviceActions"
+        :overlay-bounds="overlayBounds"
+        :selected-bounds="selectedBounds"
+        :device-width="deviceWidth"
+        :device-height="deviceHeight"
+        @switch-device="switchDevice"
+        @trigger-key="triggerDeviceKey"
+        @refresh-preview="refreshDevicePreview"
+        @tap="selectNodeFromPoint"
+        @swipe="swipePreview"
+      />
+
+      <el-card shadow="never" class="appium-recorder-card appium-recorder-card--workbench">
+        <template #header>录制与脚本</template>
+        <el-tabs v-model="activeWorkbenchTab" class="appium-workbench-tabs">
+          <el-tab-pane label="当前录制" name="recording">
+            <div class="appium-workbench">
+              <section class="appium-workbench__section">
+                <h3>节点与脚本</h3>
+                <div class="appium-side-form">
+                  <el-input v-model="form.name" placeholder="脚本名称" />
+                  <el-select
+                    v-model="form.appPackage"
+                    filterable
+                    placeholder="选择预设 App 参数"
+                  >
+                    <el-option
+                      v-for="app in appPresets"
+                      :key="app.id"
+                      :label="`${app.name} · ${app.packageName}`"
+                      :value="app.packageName"
+                    />
+                  </el-select>
+                </div>
+                <NodeDetail
+                  :node="selectedNode"
+                  :disabled="recordingLocked"
+                  :loading="recordingTap"
+                  @add-action="addAction"
+                />
+              </section>
+
+              <section class="appium-workbench__section">
+                <h3>录制步骤</h3>
+                <RecordedSteps
+                  :steps="steps"
+                  :disabled="recordingLocked"
+                  @remove="removeStep"
+                  @add-delay="addDelayStep"
+                  @edit-input="editInputStep"
+                />
+              </section>
+
+              <section class="appium-workbench__section">
+                <h3>回放输出</h3>
+                <pre class="appium-replay-output">{{ visibleReplayOutput }}</pre>
+              </section>
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane label="脚本列表" name="scripts">
+            <div class="appium-script-list">
+              <el-empty v-if="!scripts.length" description="暂无录制脚本" />
+              <template v-else>
+                <article
+                  v-for="script in scripts"
+                  :key="script.id"
+                  class="appium-script-list__item"
+                  :class="{ 'appium-script-list__item--active': script.id === selectedScriptId }"
+                >
+                  <div class="appium-script-list__main">
+                    <strong>{{ script.name }}</strong>
+                    <span>{{ script.appPackage }}</span>
+                    <small>{{ script.steps.length }} 步 · {{ formatScriptTime(script.updatedAt) }}</small>
+                  </div>
+                  <div class="appium-script-list__actions">
+                    <el-button size="small" @click="loadScript(script)">加载</el-button>
+                    <el-button
+                      size="small"
+                      type="danger"
+                      :icon="Delete"
+                      :loading="deletingScriptId === script.id"
+                      @click="removeScript(script)"
+                    />
+                  </div>
+                </article>
+              </template>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+
+    <el-dialog
+      :model-value="Boolean(pendingNavigation)"
+      title="检测到页面变化"
+      width="680px"
+      :close-on-click-modal="false"
+      @close="stayOnCurrentPage"
+    >
+      <div class="appium-navigation-dialog">
+        <p>录制点击后检测到页面已变化。</p>
+        <dl>
+          <div>
+            <dt>点击前</dt>
+            <dd>{{ pendingNavigation?.beforeActivity || '-' }}</dd>
+          </div>
+          <div>
+            <dt>点击后</dt>
+            <dd>{{ pendingNavigation?.afterActivity || '-' }}</dd>
+          </div>
+        </dl>
+      </div>
+      <template #footer>
+        <div class="appium-navigation-footer">
+          <el-button :disabled="resolvingNavigation" @click="stayOnCurrentPage">留在当前页面继续录制</el-button>
+          <el-button :loading="resolvingNavigation" @click="saveAsBranchScript">保存为新用例</el-button>
+          <el-button type="primary" :loading="resolvingNavigation" @click="returnToPreviousPage">添加返回键继续录制</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </section>
+</template>