android-midscene-automation 0.1.30 → 0.1.32

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

@@ -30,6 +30,9 @@ const props = defineProps<{
   launchingStepId?: string;
   clipboardCount?: number;
   resetViewToken?: number;
+  searchTargetId?: string;
+  searchFocusToken?: number;
+  searchActive?: boolean;
   startActionGroups: FlowActionGroup[];
   mainActionGroups: FlowActionGroup[];
   canOpenInsertMenu: boolean;
@@ -55,11 +58,23 @@ 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,
@@ -154,6 +169,7 @@ watch(() => props.resetViewToken, () => {
 });
 
 onBeforeUnmount(() => {
+  if (searchFrame) cancelAnimationFrame(searchFrame);
   if (internalsFrame) window.cancelAnimationFrame(internalsFrame);
   if (resetViewFrame) window.cancelAnimationFrame(resetViewFrame);
   pendingResetView = false;
@@ -202,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
@@ -177,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 && !data.deleteMode" 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">
+        <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)" />
@@ -248,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"

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+import { ArrowDown, ArrowUp, Search } from '@element-plus/icons-vue';
+import type { FlowSearchResult } from '../flow-search';
+
+const props = defineProps<{ query: string; results: FlowSearchResult[]; selectedId: string }>();
+const emit = defineEmits<{ 'update:query': [value: string]; select: [id: string] }>();
+const input = ref<{ focus: () => void }>();
+const list = ref<HTMLElement>();
+const currentIndex = computed(() => props.results.findIndex((result) => result.id === props.selectedId));
+async function choose(id: string) {
+  emit('select', id);
+  await nextTick();
+  list.value?.querySelector('[aria-current="true"]')?.scrollIntoView({ block: 'nearest' });
+}
+function move(direction: number) {
+  if (!props.results.length) return;
+  const index = (currentIndex.value + direction + props.results.length) % props.results.length;
+  void choose(props.results[index]!.id);
+}
+</script>
+
+<template>
+  <el-popover trigger="click" placement="bottom-start" :width="360" popper-class="flow-node-search-popover" @after-enter="input?.focus()">
+    <template #reference><span class="flow-node-search-trigger"><el-tooltip content="搜索节点" placement="top" :show-after="200"><el-button :icon="Search" aria-label="搜索节点" size="small" /></el-tooltip></span></template>
+    <div class="flow-node-search">
+      <el-input ref="input" :model-value="query" placeholder="搜索名称、操作、定位内容或日志" aria-label="搜索流程节点" clearable @update:model-value="emit('update:query', $event)" @keydown.enter.prevent="move($event.shiftKey ? -1 : 1)" @keydown.down.prevent="move(1)" @keydown.up.prevent="move(-1)" />
+      <div class="flow-node-search__navigation">
+        <span aria-live="polite">{{ currentIndex + 1 }} / {{ results.length }}</span>
+        <el-tooltip content="上一个结果" placement="top"><span><el-button :icon="ArrowUp" size="small" aria-label="上一个结果" :disabled="!results.length" @click="move(-1)" /></span></el-tooltip>
+        <el-tooltip content="下一个结果" placement="top"><span><el-button :icon="ArrowDown" size="small" aria-label="下一个结果" :disabled="!results.length" @click="move(1)" /></span></el-tooltip>
+      </div>
+      <div ref="list" class="flow-node-search__results">
+        <button v-for="result in results" :key="result.id" type="button" class="flow-node-search__result" :aria-current="result.id === selectedId" @click="choose(result.id)">
+          <strong>{{ result.index + 1 }}. {{ result.title }}</strong>
+          <span>{{ result.meta }}</span>
+          <small>{{ result.branch }}</small>
+        </button>
+        <div v-if="query.trim() && !results.length" class="flow-node-search__empty">未找到匹配节点</div>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<style scoped>
+.flow-node-search-trigger { display: inline-flex; }
+.flow-node-search-trigger .el-button { width: 30px; height: 30px; min-height: 30px; padding: 0; }
+.flow-node-search__navigation { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 8px 0; }
+.flow-node-search__navigation > span:first-child { margin-right: auto; font-size: 12px; }
+.flow-node-search__navigation .el-button { width: 26px; height: 26px; min-height: 26px; padding: 0; }
+.flow-node-search__results { max-height: min(320px, 45vh); overflow: auto; }
+.flow-node-search__result { display: flex; flex-direction: column; text-align: left; gap: 4px; width: 100%; border: 0; border-bottom: 1px solid #e4e7ed; padding: 10px 8px; background: #fff; color: #303133; cursor: pointer; overflow-wrap: anywhere; }
+.flow-node-search__result[aria-current="true"] { background: #e6f4ff; }
+.flow-node-search__result:hover { background: #f0f7fc; }
+.flow-node-search__result strong { font-size: 13px; }
+.flow-node-search__result span, .flow-node-search__result small { font-size: 12px; color: #606266; }
+.flow-node-search__empty { padding: 16px 0; text-align: center; color: #606266; }
+</style>
+
+<style>
+.flow-node-search-popover.el-popover { max-width: calc(100vw - 24px); box-sizing: border-box; }
+</style>

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

@@ -8,6 +8,8 @@ import TextClickSettings from './TextClickSettings.vue';
 import { isNativeStateCondition } from '../native-control-state';
 import LongPressSettings from './LongPressSettings.vue';
 import StageLogSettings from './StageLogSettings.vue';
+import LoopSettings from './LoopSettings.vue';
+import BreakLoopSettings from './BreakLoopSettings.vue';
 
 type FlowKind = 'action' | 'condition' | 'assertion';
 type SwipeGesture = NonNullable<AppiumRecordedStep['swipe']>;
@@ -15,6 +17,7 @@ type VisualChangeConfig = NonNullable<AppiumRecordedStep['visualChange']>;
 
 const props = defineProps<{
   step: AppiumRecordedStep;
+  steps: AppiumRecordedStep[];
   index: number;
   disabled?: boolean;
 }>();
@@ -98,7 +101,7 @@ function patchTimeout(value: unknown) {
   patchStep({ timeoutMs: timeout || undefined });
 }
 
-const showSelector = computed(() => props.step.selector && (
+const showSelector = computed(() => props.step.type !== 'loop' && props.step.selector && (
   props.step.type !== 'longPress' || longPressMode(props.step) === 'element'
 ));
 
@@ -134,7 +137,7 @@ function patchSelector(patch: Partial<AppiumSelector>) {
         <el-form-item label="节点类型">
           <el-select
             :model-value="defaultKind()"
-            :disabled="disabled || isBooleanCondition(step) || step.type === 'log' || step.type === 'openGallery' || step.type === 'endFlow'"
+            :disabled="disabled || isBooleanCondition(step) || step.type === 'log' || step.type === 'openGallery' || step.type === 'endFlow' || step.type === 'loop' || step.type === 'breakLoop'"
             @update:model-value="patchFlow({ nodeKind: $event as FlowKind })"
           >
             <el-option label="操作" value="action" />
@@ -142,7 +145,7 @@ function patchSelector(patch: Partial<AppiumSelector>) {
             <el-option label="校验" value="assertion" />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="step.type !== 'longPress' && step.type !== 'log' && step.type !== 'openGallery' && step.type !== 'endFlow'" label="超时时间 ms">
+        <el-form-item v-if="!['longPress', 'log', 'openGallery', 'endFlow', 'loop', 'breakLoop'].includes(step.type)" label="超时时间 ms">
           <el-input-number
             :model-value="step.timeoutMs || undefined"
             :disabled="disabled"
@@ -155,6 +158,8 @@ function patchSelector(patch: Partial<AppiumSelector>) {
       </div>
       <LongPressSettings v-if="step.type === 'longPress'" :step="step" :disabled="disabled" @update="patchStep" />
       <StageLogSettings v-if="step.type === 'log'" :step="step" :disabled="disabled" @update="patchStep" />
+      <LoopSettings v-if="step.type === 'loop'" :step="step" :disabled="disabled" @update="patchStep" />
+      <BreakLoopSettings v-if="step.type === 'breakLoop'" :step="step" :steps="steps" :disabled="disabled" @update="patchStep" />
       <TextClickSettings v-if="step.type === 'textClick'" :step="step" :disabled="disabled" @update="patchStep" />
       <el-form-item v-if="step.type === 'aiRecognition'" label="识别内容">
         <el-input
@@ -358,7 +363,7 @@ function patchSelector(patch: Partial<AppiumSelector>) {
           />
         </el-form-item>
       </div>
-      <div v-if="defaultKind() === 'condition' && !isBooleanCondition(step)" class="appium-flow-editor__grid">
+      <div v-if="defaultKind() === 'condition' && step.type !== 'loop' && !isBooleanCondition(step)" class="appium-flow-editor__grid">
         <el-form-item label="指定文本（可选）">
           <el-input
             :model-value="step.value || ''"

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { AppiumRecordedStep, AppiumSelector } from '../types';
+import { defaultLoopConfig, MAX_LOOP_ITERATIONS } from '../bounded-loop';
+
+const props = defineProps<{ step: AppiumRecordedStep; disabled?: boolean }>();
+const emit = defineEmits<{ update: [patch: Partial<AppiumRecordedStep>] }>();
+function patch(config: Partial<NonNullable<AppiumRecordedStep['loop']>>) {
+  emit('update', { loop: { ...defaultLoopConfig(), ...props.step.loop, ...config } });
+}
+function selector(patch: Partial<AppiumSelector>) {
+  emit('update', { selector: { strategy: 'id', value: '', ...props.step.selector, ...patch } });
+}
+</script>
+
+<template>
+  <el-form-item label="循环方式">
+    <el-select :model-value="step.loop?.exitWhen || 'never'" :disabled="disabled" @update:model-value="patch({ exitWhen: $event })">
+      <el-option value="never" label="固定次数" />
+      <el-option value="exists" label="元素出现时退出" />
+      <el-option value="notExists" label="元素消失时退出" />
+    </el-select>
+  </el-form-item>
+  <el-form-item :label="step.loop?.exitWhen === 'never' ? '执行次数' : '最大执行次数'" required>
+    <el-input-number :model-value="step.loop?.maxIterations" :disabled="disabled" :min="1" :max="MAX_LOOP_ITERATIONS" :precision="0" controls-position="right" @update:model-value="patch({ maxIterations: Number($event) })" />
+  </el-form-item>
+  <template v-if="step.loop?.exitWhen && step.loop.exitWhen !== 'never'">
+    <el-form-item label="退出条件定位方式">
+      <el-select :model-value="step.selector?.strategy || 'id'" :disabled="disabled" @update:model-value="selector({ strategy: $event })">
+        <el-option value="id" label="Resource ID" /><el-option value="accessibilityId" label="Accessibility ID" />
+        <el-option value="xpath" label="XPath" /><el-option value="androidUiAutomator" label="UiAutomator" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="退出条件定位内容" required>
+      <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 8 }" :model-value="step.selector?.value || ''" :disabled="disabled" @update:model-value="selector({ value: $event })" />
+    </el-form-item>
+  </template>
+</template>

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

@@ -25,6 +25,8 @@ type InsertAction =
   | 'launchApp'
   | 'openGallery'
   | 'endFlow'
+  | 'loop'
+  | 'breakLoop'
   | 'clearAppData'
   | 'popupCondition'
   | 'checkboxState'
@@ -97,6 +99,7 @@ const actionGroups: Array<{ title: string; actions: Array<{ type: InsertAction;
   {
     title: '设备操作',
     actions: [
+      { type: 'launchApp', label: '启动 App' },
       { type: 'keyBack', label: '系统返回' },
       { type: 'keyHome', label: 'Home 键' },
       { type: 'openGallery', label: '启动相册' },
@@ -121,8 +124,8 @@ const actionGroups: Array<{ title: string; actions: Array<{ type: InsertAction;
       { type: 'assertText', label: '断言文本' },
       { type: 'waitDisappear', label: '等待元素消失' },
       { type: 'waitActivity', label: '等待 Activity' },
-      { type: 'visualChangeStart', label: '检测画面变化开始节点' },
-      { type: 'visualChangeEnd', label: '检测画面变化结束节点' },
+      { type: 'visualChangeStart', label: '检测画面变化开始' },
+      { type: 'visualChangeEnd', label: '检测画面变化结束' },
     ],
   },
   {
@@ -130,6 +133,8 @@ const actionGroups: Array<{ title: string; actions: Array<{ type: InsertAction;
     actions: [
       { type: 'noop', label: '空节点' },
       { type: 'endFlow', label: '终止流程' },
+      { type: 'loop', label: '有界循环' },
+      { type: 'breakLoop', label: '退出循环' },
       { type: 'log', label: '输出日志' },
       { type: 'runScript', label: '连接脚本' },
     ],
@@ -150,6 +155,8 @@ function typeLabel(step: AppiumRecordedStep) {
     pinch: '双指缩放', runScript: '连接脚本', screenshot: '截图', visualChange: '检测画面变化',
     noop: '空节点',
     endFlow: '终止流程',
+    loop: '有界循环',
+    breakLoop: '退出循环',
     log: '输出日志',
     checkboxState: 'Checkbox 状态',
     checkedState: '判断勾选',
@@ -310,7 +317,7 @@ function branchSplitPath() {
                 @click.stop="$emit('nodeClick', item.index)"
               >
                 <span class="appium-flow-node__body">
-                  <span class="appium-flow-node__title">{{ item.step.label }}</span>
+                  <span class="appium-flow-node__title"><span class="appium-flow-node-number">{{ item.index + 1 }}.</span> {{ item.step.label }}</span>
                   <span class="appium-flow-node__meta">
                     {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
                     <template v-if="stepMeta(item.step)"> · {{ stepMeta(item.step) }}</template>
@@ -356,6 +363,7 @@ function branchSplitPath() {
             <FlowStepEditor
               v-if="expandedStepIndex === item.index"
               :step="item.step"
+              :steps="steps"
               :index="item.index"
               :disabled="disabled"
               @update="updateStep"

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

@@ -1,14 +1,22 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { View } from '@element-plus/icons-vue';
+import { computed, ref } from 'vue';
+import { View, CopyDocument } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
 import type { AppiumNode } from '../types';
+import { nodeLocators } from '../node-locators';
 
-defineProps<{
+const props = defineProps<{
   node: AppiumNode | null;
   currentActivity?: string;
   loading?: boolean;
 }>();
 const detailsVisible = ref(false);
+const locators = computed(() => props.node ? nodeLocators(props.node) : []);
+async function copyLocator(value: string) {
+  if (!value) return;
+  try { await navigator.clipboard.writeText(value); ElMessage.success('定位内容已复制'); }
+  catch { ElMessage.error('复制失败，请手动选择定位内容复制'); }
+}
 </script>
 
 <template>
@@ -28,9 +36,17 @@ const detailsVisible = ref(false);
     <el-drawer v-model="detailsVisible" title="组件详情" size="520px" style="max-width: 94vw" append-to-body>
     <template v-if="node">
       <div class="appium-node-detail__title">{{ node.label }}</div>
-      <el-descriptions :column="1" border size="small">
-        <el-descriptions-item label="resource-id">{{ node.resourceId || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="content-desc">{{ node.contentDesc || '-' }}</el-descriptions-item>
+      <el-descriptions class="appium-node-properties" :column="1" border size="small">
+        <el-descriptions-item v-for="locator in locators" :key="locator.name">
+          <template #label><span class="appium-node-locator-label">{{ locator.name }}<small v-if="locator.attribute">{{ locator.attribute }}</small></span></template>
+          <div class="appium-node-locator">
+            <code>{{ locator.value || '未提供' }}</code>
+            <el-tooltip :content="`复制 ${locator.name}`" placement="top" :show-after="200">
+              <el-button class="appium-node-locator-copy" size="small" :icon="CopyDocument" :disabled="!locator.value" :aria-label="`复制 ${locator.name}`" @click="copyLocator(locator.value)" />
+            </el-tooltip>
+          </div>
+          <small v-if="locator.warning" class="appium-node-locator-warning">{{ locator.warning }}</small>
+        </el-descriptions-item>
         <el-descriptions-item label="text">{{ node.text || '-' }}</el-descriptions-item>
         <el-descriptions-item label="class">{{ node.className || '-' }}</el-descriptions-item>
         <el-descriptions-item v-if="node.checkable !== undefined" label="checkable">{{ String(node.checkable) }}</el-descriptions-item>
@@ -75,4 +91,12 @@ const detailsVisible = ref(false);
 .appium-node-summary__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
 .appium-node-summary__text span, .appium-node-summary__empty { color: var(--el-text-color-secondary); font-size: 12px; }
 :deep(.el-descriptions__content) { overflow-wrap: anywhere; word-break: break-word; }
+.appium-node-properties :deep(.el-descriptions__table) { table-layout: fixed; width: 100%; }
+.appium-node-properties :deep(.el-descriptions__label) { width: 118px; overflow-wrap: anywhere; }
+.appium-node-locator-label { display: grid; gap: 2px; }
+.appium-node-locator-label small { font-weight: 400; color: var(--el-text-color-secondary); }
+.appium-node-locator { display: flex; align-items: flex-start; gap: 8px; }
+.appium-node-locator code { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
+.appium-node-locator .appium-node-locator-copy { flex: none; width: 26px; height: 26px; min-height: 26px; padding: 0; }
+.appium-node-locator-warning { display: block; margin-top: 4px; color: var(--el-color-warning); }
 </style>

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

@@ -7,6 +7,8 @@ import type { AppiumRecordedStep } from '../types';
 import { createFlowClipboard } from '../flow-copy';
 import FlowCanvas from './FlowCanvas.vue';
 import MergeBranchesDialog from './MergeBranchesDialog.vue';
+import FlowNodeSearch from './FlowNodeSearch.vue';
+import { searchFlowNodes } from '../flow-search';
 import { labelFlowStep } from '../flow-labels';
 import type { FlowActionGroup, FlowBranch, InsertAction } from '../flow-graph';
 
@@ -44,6 +46,14 @@ const selectedCopyIndexes = shallowRef<number[]>([]);
 const flowDialogVisible = shallowRef(false);
 const mainResetViewToken = shallowRef(0);
 const dialogResetViewToken = shallowRef(0);
+const searchQuery = shallowRef('');
+const searchTargetId = shallowRef('');
+const searchFocusToken = shallowRef(0);
+const searchResults = computed(() => searchFlowNodes(props.steps, searchQuery.value));
+function focusSearchResult(id: string) { searchTargetId.value = id; searchFocusToken.value++; }
+watch(searchResults, (results) => {
+  if (!results.some((result) => result.id === searchTargetId.value)) focusSearchResult(results[0]?.id || '');
+});
 
 const insertActionGroups: FlowActionGroup[] = [
   {
@@ -96,6 +106,8 @@ const insertActionGroups: FlowActionGroup[] = [
     actions: [
       { type: 'noop', label: '空节点' },
       { type: 'endFlow', label: '终止流程' },
+      { type: 'loop', label: '有界循环' },
+      { type: 'breakLoop', label: '退出循环' },
       { type: 'log', label: '输出日志' },
       { type: 'runScript', label: '连接脚本' },
     ],
@@ -104,10 +116,9 @@ const insertActionGroups: FlowActionGroup[] = [
 
 const mainActionGroups = insertActionGroups.map((group) => ({
   ...group,
-  actions: group.actions.filter((action) => action.type !== 'launchApp' && action.type !== 'clearAppData'),
+  actions: group.actions.filter((action) => action.type !== 'clearAppData'),
 }));
 const startActionGroups = insertActionGroups;
-const hasLaunchAppStep = computed(() => props.steps.some((step) => step.type === 'launchApp'));
 const hasClearAppDataStep = computed(() => props.steps.some((step) => step.type === 'clearAppData'));
 
 function isDescendantStep(descendantIndex: number, ancestorIndex: number) {
@@ -235,8 +246,7 @@ function isInsertActionDisabled(action: InsertAction) {
 }
 
 function isStartActionDisabled(action: InsertAction) {
-  return (action === 'launchApp' && hasLaunchAppStep.value)
-    || (action === 'clearAppData' && hasClearAppDataStep.value)
+  return (action === 'clearAppData' && hasClearAppDataStep.value)
     || isInsertActionDisabled(action);
 }
 
@@ -252,6 +262,7 @@ function updateStep(index: number, step: AppiumRecordedStep) {
 <template>
   <div class="appium-recorded-steps-panel">
     <div class="appium-flow-toolbar">
+      <FlowNodeSearch v-model:query="searchQuery" :results="searchResults" :selected-id="searchTargetId" @select="focusSearchResult" />
       <template v-if="copyMode">
         <span class="appium-flow-toolbar__status">已选择 {{ selectedCopyIndexes.length }} 个节点</span>
         <el-tooltip :content="deleteMode ? '删除选中' : '复制选中'" placement="top" :show-after="200"><span class="flow-toolbar-icon">
@@ -295,6 +306,9 @@ function updateStep(index: number, step: AppiumRecordedStep) {
 
     <FlowCanvas
       id="appium-flow-main"
+      :search-target-id="searchTargetId"
+      :search-focus-token="searchFocusToken"
+      :search-active="!flowDialogVisible"
       :steps="steps"
       :expanded-step-index="expandedStepIndex"
       :copy-mode="copyMode"
@@ -331,11 +345,14 @@ function updateStep(index: number, step: AppiumRecordedStep) {
     <el-dialog
       v-model="flowDialogVisible"
       title="流程总览"
+      @opened="searchTargetId && focusSearchResult(searchTargetId)"
       width="86vw"
       class="appium-flow-dialog"
+      align-center
       append-to-body
     >
       <div class="appium-flow-toolbar appium-flow-dialog__toolbar">
+        <FlowNodeSearch v-model:query="searchQuery" :results="searchResults" :selected-id="searchTargetId" @select="focusSearchResult" />
         <template v-if="copyMode">
           <span class="appium-flow-toolbar__status">已选择 {{ selectedCopyIndexes.length }} 个节点</span>
           <el-tooltip :content="deleteMode ? '删除选中' : '复制选中'" placement="top" :show-after="200"><span class="flow-toolbar-icon">
@@ -364,6 +381,9 @@ function updateStep(index: number, step: AppiumRecordedStep) {
       </div>
       <FlowCanvas
         id="appium-flow-dialog"
+        :search-target-id="searchTargetId"
+        :search-focus-token="searchFocusToken"
+        :search-active="flowDialogVisible"
         class="appium-flow-canvas--dialog"
         :steps="steps"
         :expanded-step-index="expandedStepIndex"