android-midscene-automation 0.1.29 → 0.1.31

package/server/appium-recorder/repository.ts

@@ -7,6 +7,7 @@ import {
   sqlString,
 } from '../storage/sqlite';
 import { normalizeLegacyNestedConditionBranches } from '../../src/appium-recorder/flow-normalize';
+import { validateLoopSteps } from '../../src/appium-recorder/bounded-loop';
 
 export type AppiumRecordedStepRecord = {
   id: string;
@@ -34,6 +35,8 @@ export type AppiumRecordedStepRecord = {
     | 'launchApp'
     | 'openGallery'
     | 'endFlow'
+    | 'loop'
+    | 'breakLoop'
     | 'clearAppData'
     | 'waitDisappear'
     | 'assertText'
@@ -86,6 +89,11 @@ export type AppiumRecordedStepRecord = {
   keyCode?: number;
   timeoutMs?: number;
   longPressMode?: 'element' | 'coordinates';
+  breakLoopTargetId?: string;
+  loop?: {
+    maxIterations: number;
+    exitWhen: 'never' | 'exists' | 'notExists';
+  };
   flow?: {
     nodeKind?: 'action' | 'condition' | 'assertion';
     yesTargetId?: string;
@@ -338,6 +346,7 @@ export function saveAppiumRecordedScript(input: {
   const name = input.name.trim();
   const appPackage = input.appPackage.trim();
   const steps = normalizeLegacyNestedConditionBranches(input.steps || []);
+  validateLoopSteps(steps);
   const appActivity = normalizeScriptActivity(appPackage, input.appActivity, steps);
 
   if (!name) throw new Error('脚本名称不能为空');

package/src/appium-recorder/AppiumPage.vue

@@ -5,6 +5,9 @@ import { ElForm, ElFormItem, ElInputNumber, ElMessage, ElMessageBox, ElOption, E
 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 LoopSettings from './components/LoopSettings.vue';
+import BreakLoopSettings from './components/BreakLoopSettings.vue';
+import { defaultLoopConfig, enclosingLoops, breakLoopTarget, validateLoop, validateLoopSteps } from './bounded-loop';
 import {
   clearAppiumDeviceAppData,
   deleteAppiumScript,
@@ -18,9 +21,9 @@ import {
   stopAppiumReplay,
   tapAppiumDevice,
 } from './api';
-import ComponentTree from './components/ComponentTree.vue';
+import ComponentInspector from './components/ComponentInspector.vue';
+import RecorderWorkspace from './components/RecorderWorkspace.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';
@@ -76,6 +79,7 @@ type BranchTarget = {
 type RecorderAction = InsertAction;
 
 const WORKBENCH_TAB_STORAGE_KEY = 'android-midscene-automation:appium-workbench-tab';
+const workspaceRef = shallowRef<InstanceType<typeof RecorderWorkspace>>();
 const AUTO_TREE_REFRESH_INTERVAL_MS = 1800;
 
 const insertableRecorderActions: RecorderAction[] = [
@@ -106,6 +110,8 @@ const insertableRecorderActions: RecorderAction[] = [
   'launchApp',
   'openGallery',
   'endFlow',
+  'loop',
+  'breakLoop',
   'clearAppData',
   'waitDisappear',
   'assertText',
@@ -357,6 +363,7 @@ function pasteFlowNodes(index: number, branch?: BranchName) {
       afterIndex: index,
       branch,
     });
+    validateLoopSteps(nextSteps);
     steps.value = nextSteps;
     ElMessage.success(`已粘贴 ${flowClipboardCount.value} 个节点${branch ? `到${branch === 'yes' ? '是' : '否'}分支` : ''}`);
     flowClipboard.value = null;
@@ -916,6 +923,7 @@ function selectNodeFromPoint(point: { x: number; y: number }) {
   const node = findSmallestNodeAtPoint(tree.value, point.x, point.y);
   if (node) {
     selectedNode.value = node;
+    workspaceRef.value?.showTree();
     return;
   }
   ElMessage.warning('未命中组件树节点');
@@ -928,6 +936,7 @@ async function swipePreview(gesture: {
   endY: number;
   duration: number;
 }) {
+  if (recordingBusy.value || replaying.value) return;
   if (!selectedDeviceId.value) return;
   try {
     await props.swipeDevice(
@@ -1208,6 +1217,7 @@ function pickVisualChangeRegion() {
     mode: 'region',
   });
   visualChangePicking.value = true;
+  workspaceRef.value?.showPreview();
   ElMessage.info('请在设备预览中拖拽框选检测区域');
 }
 
@@ -1286,6 +1296,46 @@ async function addAction(
   if (action === 'endFlow') {
     return insertStep({ id: createStepId(), type: 'endFlow', label: '终止流程', flow: { nodeKind: 'action' } }, index, branchTarget);
   }
+  if (action === 'loop') {
+    const step = reactive<AppiumRecordedStep>({
+      id: createStepId(), type: 'loop', label: '有界循环', loop: defaultLoopConfig(),
+      selector: selectedNode.value?.selector ? { ...selectedNode.value.selector } : { strategy: 'id', value: '' },
+      flow: { nodeKind: 'condition' },
+    });
+    const result = await ElMessageBox({
+      title: '添加有界循环',
+      message: h(ElForm, { labelPosition: 'top' }, () => h(LoopSettings, { step, onUpdate: (patch) => Object.assign(step, patch) })),
+      showCancelButton: true, confirmButtonText: '添加', cancelButtonText: '取消',
+      beforeClose: (action, _instance, done) => {
+        if (action === 'confirm') {
+          try { validateLoop(step); } catch (error) { ElMessage.warning((error as Error).message); return; }
+        }
+        done();
+      },
+    }).catch(() => null);
+    if (result) return insertStep({ ...step, loop: { ...step.loop! }, selector: { ...step.selector! } }, index, branchTarget);
+    return;
+  }
+  if (action === 'breakLoop') {
+    const step: AppiumRecordedStep = { id: createStepId(), type: 'breakLoop', label: '退出循环', flow: { nodeKind: 'action' } };
+    const scoped = reactive(branchTarget ? stepWithBranchTarget(step, branchTarget) : step);
+    const loops = enclosingLoops(steps.value, scoped);
+    if (!loops.length) { ElMessage.warning('退出循环只能添加在循环体内'); return; }
+    scoped.breakLoopTargetId = loops[0]!.id;
+    const result = await ElMessageBox({
+      title: '添加退出循环',
+      message: h(ElForm, { labelPosition: 'top' }, () => h(BreakLoopSettings, { step: scoped, steps: steps.value, onUpdate: (patch) => Object.assign(scoped, patch) })),
+      showCancelButton: true, confirmButtonText: '添加', cancelButtonText: '取消',
+      beforeClose: (action, _instance, done) => {
+        if (action === 'confirm') {
+          try { breakLoopTarget(steps.value, scoped); } catch (error) { ElMessage.warning((error as Error).message); return; }
+        }
+        done();
+      },
+    }).catch(() => null);
+    if (result) return insertStep({ ...step, breakLoopTargetId: scoped.breakLoopTargetId }, index, branchTarget);
+    return;
+  }
   if (action === 'aiRecognition') {
     const input = await ElMessageBox.prompt('识别内容', '添加 AI 识别', {
       inputType: 'textarea',
@@ -2027,8 +2077,11 @@ watch(
       </el-button>
     </div>
 
-    <div class="appium-recorder-layout">
+    <RecorderWorkspace ref="workspaceRef">
+      <template #preview>
       <DevicePreviewPanel
+        compact
+        :interaction-disabled="recordingBusy || replaying"
         :available="playgroundAvailable"
         :devices="androidDevices"
         :selected-device-id="selectedDeviceId"
@@ -2050,27 +2103,12 @@ watch(
         @region-select="applyVisualChangeRegion"
         @swipe="swipePreview"
       />
-
-      <el-card shadow="never" class="appium-recorder-card">
-        <template #header>
-          <div class="panel-header">
-            <span>App 组件树</span>
-            <el-button :icon="Refresh" :loading="loadingTree" :disabled="replaying" @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>
+      </template>
+      <template #tree>
+        <ComponentInspector :tree="tree" :node="selectedNode" :activity="currentActivity" :loading="loadingTree" :disabled="replaying" :recording="recordingTap" @refresh="refreshTree" @select="selectedNode = $event" />
+      </template>
 
       <el-card shadow="never" class="appium-recorder-card appium-recorder-card--workbench">
-        <template #header>录制与脚本</template>
         <el-tabs
           :model-value="activeWorkbenchTab"
           class="appium-workbench-tabs"
@@ -2095,14 +2133,11 @@ watch(
                     />
                   </el-select>
                 </div>
-                <el-alert
+                <details
                   v-if="scriptActivityMismatch"
-                  class="appium-activity-lock-alert"
-                  title="当前脚本已锁定"
-                  type="warning"
-                  show-icon
-                  :closable="false"
+                  class="appium-activity-summary"
                 >
+                  <summary>当前页面与脚本不一致，部分录制操作不可用</summary>
                   <div class="appium-activity-lock-alert__details">
                     <div>
                       <strong>脚本绑定</strong>
@@ -2114,16 +2149,10 @@ watch(
                     </div>
                     <p>请在录制流程中添加或执行“启动 APP”节点；Activity 匹配后会自动解除编辑锁定。</p>
                   </div>
-                </el-alert>
-                <NodeDetail
-                  :node="selectedNode"
-                  :current-activity="currentActivity"
-                  :loading="recordingTap"
-                />
+                </details>
               </section>
 
-              <section class="appium-workbench__section">
-                <h3>录制步骤</h3>
+              <section class="appium-workbench__section appium-workbench__flow">
                 <RecordedSteps
                   :key="newScriptRevision"
                   :ai-recognition-model-configured="aiRecognitionModelConfigured"
@@ -2154,9 +2183,9 @@ 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>
+                <el-tooltip content="导入脚本" placement="top" :show-after="200"><span class="appium-script-icon">
+                  <el-button size="small" :icon="Upload" aria-label="导入脚本" :loading="importingScript" @click="chooseScriptImportFile" />
+                </span></el-tooltip>
                 <input
                   ref="scriptImportInput"
                   class="appium-script-list__file-input"
@@ -2179,37 +2208,47 @@ watch(
                     <small>{{ script.steps.length }} 步 · {{ formatScriptTime(script.updatedAt) }}</small>
                   </div>
                   <div class="appium-script-list__actions">
-                    <el-button size="small" @click.stop="loadScript(script)">加载</el-button>
+                    <el-tooltip content="加载" placement="top" :show-after="200"><span class="appium-script-icon">
+                      <el-button size="small" :icon="Document" aria-label="加载" @click.stop="loadScript(script)" />
+                    </span></el-tooltip>
+                    <el-tooltip content="修改脚本名称" placement="top" :show-after="200"><span class="appium-script-icon">
                     <el-button
                       size="small"
                       :icon="Edit"
                       :loading="renamingScriptId === script.id"
-                      title="修改脚本名称"
+                      aria-label="修改脚本名称"
                       @click.stop="renameScript(script)"
                     />
+                    </span></el-tooltip>
+                    <el-tooltip content="复制脚本" placement="top" :show-after="200"><span class="appium-script-icon">
                     <el-button
                       size="small"
                       :icon="CopyDocument"
                       :loading="duplicatingScriptId === script.id"
-                      title="复制脚本"
+                      aria-label="复制脚本"
                       @click.stop="duplicateScript(script)"
                     />
+                    </span></el-tooltip>
+                    <el-tooltip content="下载脚本" placement="top" :show-after="200"><span class="appium-script-icon">
                     <el-button
                       size="small"
                       :icon="Download"
                       :loading="downloadingScriptId === script.id"
                       :disabled="Boolean(downloadingScriptId) && downloadingScriptId !== script.id"
-                      title="下载脚本"
+                      aria-label="下载脚本"
                       @click.stop="downloadScript(script)"
                     />
+                    </span></el-tooltip>
+                    <el-tooltip content="删除脚本" placement="top" :show-after="200"><span class="appium-script-icon">
                     <el-button
                       size="small"
                       type="danger"
                       :icon="Delete"
                       :loading="deletingScriptId === script.id"
-                      title="删除脚本"
+                      aria-label="删除脚本"
                       @click.stop="removeScript(script)"
                     />
+                    </span></el-tooltip>
                   </div>
                 </article>
               </template>
@@ -2217,7 +2256,7 @@ watch(
           </el-tab-pane>
         </el-tabs>
       </el-card>
-    </div>
+    </RecorderWorkspace>
 
     <NewScriptDialog
       v-if="newScriptDialogVisible"
@@ -2403,3 +2442,20 @@ watch(
     </el-tooltip>
   </section>
 </template>
+
+<style scoped>
+.appium-script-icon { display: inline-flex; }
+.appium-script-icon .el-button { width: 30px; height: 30px; min-height: 30px; padding: 0; margin: 0; }
+.appium-activity-summary { margin: 8px 0; color: #946000; font-size: 12px; }
+.appium-activity-summary summary { cursor: pointer; line-height: 20px; }
+.appium-activity-summary[open] .appium-activity-lock-alert__details { max-height: 110px; overflow: auto; margin-top: 6px; }
+:deep(.appium-recorder-card--workbench > .el-card__body) { overflow: hidden; }
+:deep(.appium-workbench-tabs > .el-tabs__content) { overflow: hidden; }
+:deep(.appium-workbench-tabs .el-tab-pane) { height: 100%; overflow: auto; }
+.appium-workbench { height: 100%; box-sizing: border-box; grid-template-rows: auto minmax(0, 1fr); gap: 10px; overflow: hidden; padding: 12px; }
+.appium-workbench__flow { display: flex; flex-direction: column; min-height: 0; }
+.appium-workbench__flow h3 { margin-bottom: 6px; }
+.appium-workbench__flow :deep(.appium-recorded-steps-panel) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.appium-workbench__flow :deep(.appium-flow-toolbar) { flex: none; margin-bottom: 8px; }
+.appium-workbench__flow :deep(.appium-flow-canvas--vue:not(.appium-flow-canvas--dialog)) { flex: 1; height: auto; min-height: 120px; }
+</style>

package/src/appium-recorder/bounded-loop.ts

@@ -0,0 +1,66 @@
+import type { AppiumRecordedStep } from './types';
+
+export const MAX_LOOP_ITERATIONS = 10000;
+export const defaultLoopConfig = () => ({ maxIterations: 3, exitWhen: 'never' as const });
+
+export function validateLoop(step: AppiumRecordedStep) {
+  const config = step.loop;
+  if (!config || !Number.isInteger(config.maxIterations) || config.maxIterations < 1 || config.maxIterations > MAX_LOOP_ITERATIONS) {
+    throw new Error(`循环最大次数必须是 1-${MAX_LOOP_ITERATIONS} 的整数`);
+  }
+  if (!['never', 'exists', 'notExists'].includes(config.exitWhen)) throw new Error('循环退出条件无效');
+  if (config.exitWhen !== 'never' && (!step.selector?.value?.trim() || !['id', 'accessibilityId', 'xpath', 'androidUiAutomator'].includes(step.selector.strategy))) {
+    throw new Error('请设置循环退出条件的元素定位内容');
+  }
+  return config;
+}
+
+// Branch ownership, not array adjacency, determines the innermost active loop.
+export function enclosingLoop(steps: readonly AppiumRecordedStep[], step: AppiumRecordedStep): AppiumRecordedStep | undefined {
+  return enclosingLoops(steps, step)[0];
+}
+
+export function enclosingLoops(steps: readonly AppiumRecordedStep[], step: AppiumRecordedStep): AppiumRecordedStep[] {
+  const loops: AppiumRecordedStep[] = [];
+  const byId = new Map(steps.map((item) => [item.id, item]));
+  const seen = new Set<string>();
+  let current = step;
+  while (current.flow?.parentConditionId) {
+    const parent = byId.get(current.flow.parentConditionId);
+    if (!parent || seen.has(parent.id)) break;
+    seen.add(parent.id);
+    if (parent.type === 'loop' && current.flow.parentBranch === 'yes') loops.push(parent);
+    current = parent;
+  }
+  return loops;
+}
+
+export function breakLoopTarget(steps: readonly AppiumRecordedStep[], step: AppiumRecordedStep) {
+  const loops = enclosingLoops(steps, step);
+  const target = step.breakLoopTargetId ? loops.find((loop) => loop.id === step.breakLoopTargetId) : loops[0];
+  if (!target) throw new Error('退出循环目标必须是当前节点所属的循环体，目标可能已删除或不在当前分支');
+  return target;
+}
+
+export function validateLoopSteps(steps: readonly AppiumRecordedStep[]) {
+  if (!steps.some((step) => step.type === 'loop' || step.type === 'breakLoop')) return;
+  const byId = new Map(steps.map((step) => [step.id, step]));
+  if (byId.size !== steps.length) throw new Error('流程节点 ID 重复');
+  for (const step of steps) {
+    let current: AppiumRecordedStep | undefined = step;
+    const seen = new Set<string>();
+    while (current) {
+      if (seen.has(current.id)) throw new Error('流程分支归属存在循环');
+      seen.add(current.id);
+      const id: string | undefined = current.flow?.parentConditionId;
+      if (id && !byId.has(id)) throw new Error('流程分支所属节点不存在');
+      current = id ? byId.get(id) : undefined;
+    }
+    if (step.type === 'loop') validateLoop(step);
+    if (step.type === 'breakLoop') breakLoopTarget(steps, step);
+    if (step.type === 'loop' && step.flow?.yesTargetId) {
+      const target = byId.get(step.flow.yesTargetId);
+      if (!target || target.flow?.parentConditionId !== step.id || target.flow.parentBranch !== 'yes') throw new Error('循环入口必须指向所属循环体');
+    }
+  }
+}

package/src/appium-recorder/components/BreakLoopSettings.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AppiumRecordedStep } from '../types';
+import { enclosingLoops } from '../bounded-loop';
+
+const props = defineProps<{ step: AppiumRecordedStep; steps: AppiumRecordedStep[]; disabled?: boolean }>();
+const emit = defineEmits<{ update: [patch: Partial<AppiumRecordedStep>] }>();
+const loops = computed(() => enclosingLoops(props.steps, props.step));
+</script>
+
+<template>
+  <el-form-item label="退出目标循环">
+    <el-select class="break-loop-target" popper-class="break-loop-target-popper" :model-value="step.breakLoopTargetId || loops[0]?.id" :disabled="disabled" aria-label="退出目标循环" @update:model-value="emit('update', { breakLoopTargetId: $event })">
+      <el-option class="break-loop-target-option" v-for="(loop, index) in loops" :key="loop.id" :value="loop.id" :label="`${loop.label}（${index === 0 ? '当前循环' : `外层 ${index}`} · 节点 ${steps.findIndex(item => item.id === loop.id) + 1}）`" />
+    </el-select>
+  </el-form-item>
+</template>
+
+<style scoped>
+.break-loop-target { width: 100%; min-width: 0; }
+.break-loop-target :deep(.el-select__wrapper) { height: auto; min-height: 36px; }
+.break-loop-target :deep(.el-select__placeholder) {
+  position: relative; top: auto; transform: none; z-index: 0; pointer-events: none;
+  white-space: normal; overflow-wrap: anywhere; line-height: 22px;
+}
+.break-loop-target :deep(.el-select__input-wrapper) { position: absolute; width: 100%; }
+.break-loop-target-option { height: auto; min-height: 34px; padding-top: 6px; padding-bottom: 6px; white-space: normal; overflow-wrap: anywhere; line-height: 22px; }
+:global(.break-loop-target-popper) { max-width: calc(100vw - 32px); }
+</style>

package/src/appium-recorder/components/ComponentInspector.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Refresh } from '@element-plus/icons-vue';
+import type { AppiumNode } from '../types';
+import ComponentTree from './ComponentTree.vue';
+import NodeDetail from './NodeDetail.vue';
+defineProps<{ tree: AppiumNode | null; node: AppiumNode | null; activity: string; loading: boolean; disabled: boolean; recording: boolean }>();
+defineEmits<{ refresh: []; select: [node: AppiumNode] }>();
+</script>
+
+<template>
+  <el-card shadow="never" class="appium-recorder-card component-inspector">
+    <template #header><div class="panel-header"><span>App 组件树</span><el-tooltip content="刷新组件树" placement="top" :show-after="200"><el-button class="recorder-panel-tool" :icon="Refresh" size="small" aria-label="刷新组件树" :loading="loading" :disabled="disabled" @click="$emit('refresh')" /></el-tooltip></div></template>
+    <ComponentTree :tree="tree" :selected-id="node?.id || ''" @select="$emit('select', $event)" />
+    <NodeDetail :node="node" :current-activity="activity" :loading="recording" />
+    <div class="component-inspector__activity"><span>Activity</span><code :title="activity">{{ activity || '-' }}</code></div>
+  </el-card>
+</template>
+
+<style scoped>
+.component-inspector :deep(> .el-card__body) { display: flex; flex-direction: column; overflow: hidden; gap: 8px; }
+.component-inspector :deep(.appium-tree-container) { flex: 1; min-height: 0; }
+.component-inspector :deep(.appium-node-summary) { flex: none; }
+.panel-header { font-size: 14px; gap: 4px; }
+.component-inspector__activity { flex: none; display: flex; min-width: 0; gap: 6px; padding-top: 8px; border-top: 1px solid #e4e7ed; font-size: 12px; color: #606266; }
+.component-inspector__activity code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+</style>

package/src/appium-recorder/components/ComponentTree.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import type { AppiumNode } from '../types';
+import { Search } from '@element-plus/icons-vue';
 
 const props = defineProps<{
   tree: AppiumNode | null;
@@ -12,11 +13,18 @@ defineEmits<{
 }>();
 
 const containerRef = ref<HTMLElement | null>(null);
-const treeRef = ref<{ setCurrentKey: (key: string) => void } | null>(null);
+const query = ref('');
+// Keep the tree data identity stable while typing so filtering is not reset.
+const treeData = computed(() => props.tree ? [props.tree] : []);
+const treeRef = ref<{ setCurrentKey: (key: string) => void; filter: (value: string) => void } | null>(null);
+const filterNode = (value: string, node: AppiumNode) => !value || [node.label, node.resourceId, node.text, node.contentDesc, node.className].some((text) => text?.toLowerCase().includes(value.toLowerCase()));
+watch(query, (value) => treeRef.value?.filter(value));
+watch(() => props.tree, async () => { await nextTick(); treeRef.value?.filter(query.value); });
 
 watch(
   () => props.selectedId,
   async () => {
+    query.value = '';
     treeRef.value?.setCurrentKey(props.selectedId);
     await nextTick();
     containerRef.value
@@ -27,22 +35,25 @@ watch(
 </script>
 
 <template>
+  <div class="appium-tree-container">
+  <el-input v-model="query" size="small" :prefix-icon="Search" clearable placeholder="搜索文字、ID、组件类型" aria-label="搜索组件" />
   <div ref="containerRef" class="appium-tree">
     <el-empty v-if="!tree" description="暂无组件树" />
     <el-tree
       v-else
       ref="treeRef"
-      :data="[tree]"
+      :data="treeData"
       node-key="id"
       :props="{ label: 'label', children: 'children' }"
       :current-node-key="selectedId"
       highlight-current
       default-expand-all
+      :filter-node-method="filterNode"
       @node-click="$emit('select', $event)"
     >
       <template #default="{ data }">
         <span class="appium-tree-node">
-          <span class="appium-tree-node__label">{{ data.label }}</span>
+          <span class="appium-tree-node__label" :title="`${data.label}\n${data.resourceId || data.className}`">{{ data.label }}</span>
           <span
             v-if="data.selector?.matchCount"
             class="appium-tree-node__badge"
@@ -54,4 +65,13 @@ watch(
       </template>
     </el-tree>
   </div>
+  </div>
 </template>
+
+<style scoped>
+.appium-tree-container { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
+.appium-tree { flex: 1; height: auto; overflow-x: hidden; }
+.appium-tree :deep(.el-tree) { min-width: 0; }
+.appium-tree-node { flex: 1; min-width: 0; overflow: hidden; }
+.appium-tree-node__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+</style>

package/src/appium-recorder/components/FlowCanvas.vue

@@ -21,6 +21,7 @@ const props = defineProps<{
   steps: AppiumRecordedStep[];
   expandedStepIndex: number | null;
   copyMode: boolean;
+  deleteMode?: boolean;
   selectedCopyIndexes: number[];
   disabled?: boolean;
   removeDisabled?: boolean;
@@ -29,6 +30,9 @@ const props = defineProps<{
   launchingStepId?: string;
   clipboardCount?: number;
   resetViewToken?: number;
+  searchTargetId?: string;
+  searchFocusToken?: number;
+  searchActive?: boolean;
   startActionGroups: FlowActionGroup[];
   mainActionGroups: FlowActionGroup[];
   canOpenInsertMenu: boolean;
@@ -54,13 +58,26 @@ const emit = defineEmits<{
 }>();
 
 const measuredNodeHeights = shallowRef<Record<string, number>>({});
-const { fitView, updateNodeInternals } = useVueFlow(props.id);
+const { fitView, updateNodeInternals, findNode, setCenter, viewport } = useVueFlow(props.id);
 const paneReady = shallowRef(false);
 let internalsFrame = 0;
 let resetViewFrame = 0;
 let pendingResetView = false;
+let searchFrame = 0;
+watch(() => [props.searchFocusToken, props.searchTargetId, props.searchActive, paneReady.value], async () => {
+  if (searchFrame) cancelAnimationFrame(searchFrame);
+  if (!props.searchActive || !props.searchTargetId || !paneReady.value) return;
+  await nextTick();
+  searchFrame = requestAnimationFrame(() => {
+    const node = findNode(`step:${props.searchTargetId}`);
+    if (!node || !props.searchActive) return;
+    // Move only the viewport; search never rewrites graph positions or selection state.
+    void setCenter(node.position.x + node.dimensions.width / 2, node.position.y + node.dimensions.height / 2, { zoom: viewport.value.zoom, duration: 0 });
+  });
+});
 
 const graph = computed(() => buildFlowGraph(props.steps, {
+  deleteMode: props.deleteMode,
   mergeDisabled: props.mergeDisabled,
   aiRecognitionModelConfigured: props.aiRecognitionModelConfigured,
   expandedStepIndex: props.expandedStepIndex,
@@ -152,6 +169,7 @@ watch(() => props.resetViewToken, () => {
 });
 
 onBeforeUnmount(() => {
+  if (searchFrame) cancelAnimationFrame(searchFrame);
   if (internalsFrame) window.cancelAnimationFrame(internalsFrame);
   if (resetViewFrame) window.cancelAnimationFrame(resetViewFrame);
   pendingResetView = false;
@@ -200,9 +218,11 @@ function handleInsert(payload: {
     >
       <template #node-flow-node="{ id: nodeId, data }">
         <FlowNodeCard
+          :steps="steps"
           :node-id="nodeId"
           :data="data"
           :readonly="props.readonly"
+          :search-highlighted="nodeId === `step:${searchTargetId}`"
           @node-click="emit('nodeClick', $event)"
           @copy="emit('copy', [$event])"
           @remove="emit('remove', $event)"

package/src/appium-recorder/components/FlowNodeCard.vue

@@ -16,7 +16,9 @@ import FlowActionMenu from './FlowActionMenu.vue';
 const props = defineProps<{
   nodeId: string;
   data: FlowGraphNodeData;
+  steps: AppiumRecordedStep[];
   readonly?: boolean;
+  searchHighlighted?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -88,7 +90,7 @@ watch(() => props.data, () => {
   <div
     ref="rootRef"
     class="appium-flow-graph-node nodrag nopan"
-    :class="`appium-flow-graph-node--${data.kind}`"
+    :class="[`appium-flow-graph-node--${data.kind}`, { 'appium-flow-graph-node--search-highlighted': searchHighlighted }]"
     :style="data.kind === 'branch' ? { width: `${data.width}px` } : undefined"
     @pointerdown.stop
     @mousedown.stop
@@ -159,6 +161,7 @@ watch(() => props.data, () => {
         {
           'appium-flow-step-shell--expanded': data.expanded,
           'appium-flow-step-shell--selected': data.selected,
+          'appium-flow-step-shell--delete-selected': data.selected && data.deleteMode,
           'appium-flow-step-shell--copying': data.copyMode,
           'appium-flow-step-shell--readonly': props.readonly,
         },
@@ -176,13 +179,13 @@ watch(() => props.data, () => {
               <WarningFilled />
             </el-icon>
           </el-tooltip>
-          <strong :title="data.title">{{ data.title }}</strong>
+          <strong :title="`${data.index + 1}. ${data.title}`"><span class="appium-flow-node-number">{{ data.index + 1 }}.</span> {{ data.title }}</strong>
           <small :title="data.meta">{{ data.meta }}</small>
           <em v-if="data.note" :title="data.note">{{ data.note }}</em>
         </span>
       </button>
-      <span v-if="!props.readonly" class="appium-flow-step-card__actions nodrag nopan" @click.stop>
-        <el-tooltip v-if="data.flowKind === 'condition' && !data.copyMode" content="合并分支：将两侧后续节点汇入公共流程" placement="top" :show-after="200">
+      <span v-if="!props.readonly && !data.deleteMode" class="appium-flow-step-card__actions nodrag nopan" @click.stop>
+        <el-tooltip v-if="data.flowKind === 'condition' && data.step.type !== 'loop' && !data.copyMode" content="合并分支：将两侧后续节点汇入公共流程" placement="top" :show-after="200">
         <span class="appium-node-action-tooltip"><el-button text size="small" :icon="Connection"
           title="合并分支" aria-label="合并分支" :disabled="data.mergeDisabled || Boolean(data.step.flow?.successTargetId)"
           @click="emit('merge', data.index)" />
@@ -247,6 +250,7 @@ watch(() => props.data, () => {
         v-if="!props.readonly && data.expanded"
         class="appium-flow-step-editor nodrag nopan"
         :step="data.step"
+        :steps="steps"
         :index="data.index"
         :disabled="data.disabled"
         @update="updateStep"
@@ -263,6 +267,10 @@ watch(() => props.data, () => {
 </template>
 
 <style scoped>
+.appium-flow-step-shell--delete-selected .appium-flow-step-card { background: #b83232; border-color: #a52a2a; }
+.appium-flow-step-shell--delete-selected .appium-flow-step-card__content strong,
+.appium-flow-step-shell--delete-selected .appium-flow-step-card__content em { color: #fff; }
+.appium-flow-step-shell--delete-selected .appium-flow-step-card__content small { color: #fee2e2; }
 .appium-node-action-tooltip { display: inline-flex; }
 .appium-ai-model-warning { float: left; margin: 2px 6px 0 0; font-size: 16px; }
 </style>