android-midscene-automation 0.1.30 → 0.1.32

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

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+import { RefreshLeft, Fold, Operation } from '@element-plus/icons-vue';
+
+const STORAGE_KEY = 'android-midscene-automation:recorder-layout';
+const defaults = { previewWidth: null as number | null, treeWidth: null as number | null, previewHidden: false, treeHidden: false, mode: 'recording' };
+const settings = reactive({ ...defaults });
+try {
+  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
+  if (saved) {
+    for (const key of ['previewWidth', 'treeWidth'] as const) {
+      if (Number.isFinite(saved[key])) settings[key] = Math.max(key === 'previewWidth' ? 260 : 220, Math.min(600, saved[key]));
+    }
+    // The previous fixed defaults should follow the restored proportional layout.
+    if (saved.previewWidth === 320 && saved.treeWidth === 260) {
+      settings.previewWidth = null;
+      settings.treeWidth = null;
+    }
+    settings.previewHidden = saved.previewHidden === true;
+    settings.treeHidden = saved.treeHidden === true;
+    settings.mode = saved.mode === 'flow' ? 'flow' : 'recording';
+  }
+} catch { /* Layout persistence is optional when browser storage is unavailable. */ }
+watch(settings, () => {
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(settings)); } catch { /* Keep the layout usable without storage. */ }
+});
+
+const container = ref<HTMLElement>();
+const width = ref(1400);
+const drawer = ref<'preview' | 'tree' | null>(null);
+const narrow = computed(() => width.value < 700);
+const treeCollapsed = computed(() => settings.treeHidden || settings.mode === 'flow' || width.value < 1100);
+const previewCollapsed = computed(() => settings.previewHidden || narrow.value);
+watch(() => width.value < 1100 ? (narrow.value ? 'small' : 'medium') : 'wide', () => { drawer.value = null; });
+// Match the original 2.8fr / 3fr / 4.2fr columns, including the preview's 320px minimum.
+const defaultPreviewWidth = computed(() => Math.max(320, (width.value - 16) * .28));
+const defaultTreeWidth = computed(() => (width.value - 16 - defaultPreviewWidth.value) * 3 / 7.2);
+const previewWidth = computed(() => Math.max(260, Math.min(settings.previewWidth ?? defaultPreviewWidth.value, width.value - 440 - (treeCollapsed.value ? 36 : 220) - 16)));
+const treeWidth = computed(() => Math.max(220, Math.min(settings.treeWidth ?? defaultTreeWidth.value, width.value - 440 - (previewCollapsed.value ? 36 : previewWidth.value) - 16)));
+const columns = computed(() => `${previewCollapsed.value ? 36 : previewWidth.value}px 8px ${treeCollapsed.value ? 36 : treeWidth.value}px 8px minmax(0, 1fr)`);
+
+function showTree() {
+  if (width.value < 1100) drawer.value = 'tree';
+  else { settings.mode = 'recording'; settings.treeHidden = false; }
+}
+function showPreview() {
+  if (narrow.value) drawer.value = 'preview';
+  else settings.previewHidden = false;
+}
+function setMode(mode: string | number | boolean | undefined) {
+  settings.mode = mode === 'flow' ? 'flow' : 'recording';
+  drawer.value = null;
+  if (settings.mode === 'recording') { settings.treeHidden = false; settings.previewHidden = false; }
+}
+function resetLayout() { Object.assign(settings, defaults); drawer.value = null; }
+
+let drag: { key: 'previewWidth' | 'treeWidth'; startX: number; startWidth: number; pointerId: number } | null = null;
+function beginResize(event: PointerEvent, key: 'previewWidth' | 'treeWidth') {
+  if (event.button !== 0) return;
+  drag = { key, startX: event.clientX, startWidth: key === 'previewWidth' ? previewWidth.value : treeWidth.value, pointerId: event.pointerId };
+  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+}
+function changeWidth(key: 'previewWidth' | 'treeWidth', value: number) {
+  const other = key === 'previewWidth' ? (treeCollapsed.value ? 36 : treeWidth.value) : (previewCollapsed.value ? 36 : previewWidth.value);
+  settings[key] = Math.max(key === 'previewWidth' ? 260 : 220, Math.min(600, width.value - other - 456, value));
+}
+function resize(event: PointerEvent) {
+  if (drag?.pointerId === event.pointerId) changeWidth(drag.key, drag.startWidth + event.clientX - drag.startX);
+}
+function resizeKey(event: KeyboardEvent, key: 'previewWidth' | 'treeWidth') {
+  if (!['ArrowLeft', 'ArrowRight'].includes(event.key)) return;
+  event.preventDefault();
+  changeWidth(key, (key === 'previewWidth' ? previewWidth.value : treeWidth.value) + (event.key === 'ArrowRight' ? 20 : -20));
+}
+let observer: ResizeObserver | undefined;
+onMounted(() => {
+  observer = new ResizeObserver(([entry]) => { if (entry) width.value = entry.contentRect.width; });
+  if (container.value) observer.observe(container.value);
+});
+onBeforeUnmount(() => observer?.disconnect());
+defineExpose({ showTree, showPreview });
+</script>
+
+<template>
+  <div ref="container" class="recorder-workspace">
+    <div class="recorder-workspace__toolbar">
+      <el-radio-group :model-value="settings.mode" size="small" aria-label="工作区布局" @update:model-value="setMode">
+        <el-radio-button value="recording">录制布局</el-radio-button>
+        <el-radio-button value="flow">流程布局</el-radio-button>
+      </el-radio-group>
+      <div class="recorder-workspace__tools">
+        <el-tooltip content="恢复默认布局" placement="top"><el-button :icon="RefreshLeft" size="small" aria-label="恢复默认布局" @click="resetLayout" /></el-tooltip>
+      </div>
+    </div>
+    <div class="recorder-workspace__panels" :style="{ gridTemplateColumns: columns }">
+      <div v-show="!previewCollapsed || drawer === 'preview'" class="recorder-workspace__panel" :class="{ 'recorder-workspace__panel--drawer': drawer === 'preview' }">
+        <slot name="preview" />
+        <el-tooltip content="收起设备预览" placement="top" :show-after="200"><el-button class="recorder-workspace__collapse recorder-panel-tool" :icon="Fold" size="small" aria-label="收起设备预览" @click="settings.previewHidden = true; drawer = null" /></el-tooltip>
+      </div>
+      <button v-if="previewCollapsed" class="recorder-workspace__rail" aria-label="展开设备预览" title="展开设备预览" @click="showPreview"><el-icon><Operation /></el-icon><span>设备预览</span></button>
+      <div class="recorder-workspace__separator" :class="{ 'is-disabled': previewCollapsed }" role="separator" aria-label="调整设备预览宽度" aria-orientation="vertical" :aria-valuenow="previewWidth" :tabindex="previewCollapsed ? -1 : 0" @pointerdown="!previewCollapsed && beginResize($event, 'previewWidth')" @pointermove="resize" @pointerup="drag = null" @pointercancel="drag = null" @keydown="resizeKey($event, 'previewWidth')" />
+      <div v-show="!treeCollapsed || drawer === 'tree'" class="recorder-workspace__panel" :class="{ 'recorder-workspace__panel--drawer': drawer === 'tree' }">
+        <slot name="tree" />
+        <el-tooltip content="收起组件树" placement="top" :show-after="200"><el-button class="recorder-workspace__collapse recorder-panel-tool" :icon="Fold" size="small" aria-label="收起组件树" @click="settings.treeHidden = true; drawer = null" /></el-tooltip>
+      </div>
+      <button v-if="treeCollapsed" class="recorder-workspace__rail" aria-label="展开组件树" title="展开组件树" @click="showTree"><el-icon><Operation /></el-icon><span>组件树</span></button>
+      <div class="recorder-workspace__separator" :class="{ 'is-disabled': treeCollapsed }" role="separator" aria-label="调整组件树宽度" aria-orientation="vertical" :aria-valuenow="treeWidth" :tabindex="treeCollapsed ? -1 : 0" @pointerdown="!treeCollapsed && beginResize($event, 'treeWidth')" @pointermove="resize" @pointerup="drag = null" @pointercancel="drag = null" @keydown="resizeKey($event, 'treeWidth')" />
+      <div class="recorder-workspace__main"><slot /></div>
+      <button v-if="drawer" class="recorder-workspace__backdrop" aria-label="关闭侧面板" @click="drawer = null" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.recorder-workspace { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; gap: 8px; }
+.recorder-workspace__toolbar { display: flex; align-items: center; flex: none; gap: 8px; }
+.recorder-workspace__tools { display: flex; }
+.recorder-workspace__tools .el-button { width: 24px; height: 24px; min-height: 24px; padding: 0; font-size: 12px; border-radius: 4px; }
+.recorder-workspace__panels { display: grid; position: relative; flex: 1; min-height: 0; }
+.recorder-workspace__panel, .recorder-workspace__main { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+.recorder-workspace__panel :deep(> .el-card), .recorder-workspace__main :deep(> .el-card) { flex: 1; min-width: 0; min-height: 0; }
+.recorder-workspace__panel :deep(.el-card__header) { padding: 12px 46px 12px 12px; min-height: 56px; }
+.recorder-workspace__panel :deep(.el-card__body) { padding: 10px; }
+.recorder-workspace__collapse { position: absolute; right: 9px; top: 13px; }
+.recorder-workspace__rail { display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px solid #dce3e8; border-radius: 4px; background: #fff; color: #475569; padding: 14px 4px; cursor: pointer; }
+.recorder-workspace__rail span { writing-mode: vertical-rl; font-size: 13px; }
+.recorder-workspace__separator { cursor: col-resize; touch-action: none; user-select: none; }
+.recorder-workspace__separator:hover, .recorder-workspace__separator:focus-visible { background: #b3d8ff; outline: none; }
+.recorder-workspace__separator.is-disabled { pointer-events: none; }
+.recorder-workspace__panel--drawer { position: absolute; inset: 0 auto 0 0; width: min(340px, 100%); z-index: 22; background: #fff; box-shadow: 3px 0 16px #0002; }
+.recorder-workspace__backdrop { position: absolute; inset: 0; border: 0; background: #0003; z-index: 21; }
+</style>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{ candidates: { id: string; label: string; number: number }[] }>();
+const emit = defineEmits<{ select: [id: string] }>();
+</script>
+
+<template>
+  <div class="visual-end-picker" aria-label="可结束的画面变化检测">
+    <button v-for="item in candidates" :key="item.id" type="button" @click="emit('select', item.id)">
+      <strong>{{ item.label }}</strong>
+      <span>开始节点 #{{ item.number }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.visual-end-picker { display: grid; gap: 4px; max-height: 320px; overflow: auto; }
+.visual-end-picker button { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; width: 100%; padding: 10px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--el-text-color-primary); font: inherit; text-align: left; cursor: pointer; }
+.visual-end-picker button:hover, .visual-end-picker button:focus-visible { background: var(--el-fill-color-light); outline: 2px solid var(--el-color-primary); outline-offset: -2px; }
+.visual-end-picker strong { font-size: 14px; overflow-wrap: anywhere; }
+.visual-end-picker span { font-size: 12px; color: var(--el-text-color-secondary); }
+</style>

package/src/appium-recorder/flow-copy.ts

@@ -179,6 +179,7 @@ export function pasteFlowClipboard(
   const copies = clipboard.steps.map((source) => {
     const step = clone(source);
     step.id = idMap.get(source.id) || createId();
+    if (step.breakLoopTargetId) step.breakLoopTargetId = idMap.get(step.breakLoopTargetId) || step.breakLoopTargetId;
     const flow = { ...(step.flow || {}) };
     for (const key of targetKeys) {
       const mappedId = flow[key] ? idMap.get(flow[key] || '') : '';

package/src/appium-recorder/flow-graph.ts

@@ -26,6 +26,8 @@ export type InsertAction =
   | 'launchApp'
   | 'openGallery'
   | 'endFlow'
+  | 'loop'
+  | 'breakLoop'
   | 'clearAppData'
   | 'popupCondition'
   | 'checkboxState'
@@ -359,11 +361,6 @@ export function buildFlowGraph(
   ) => {
     const id = insertNodeId(afterIndex, branch, condition?.step.id);
     const isStartInsert = afterIndex < 0 && !branch;
-    const previousStep = afterIndex >= 0 ? steps[afterIndex] : undefined;
-    const canLaunchAfterClearAppData = !isStartInsert
-      && !branch
-      && previousStep?.type === 'clearAppData'
-      && !steps.some((step) => step.type === 'launchApp');
     addNode({
       id,
       type: 'flow-node',
@@ -379,9 +376,7 @@ export function buildFlowGraph(
         kind: 'insert',
         actionGroups: isStartInsert
           ? options.startActionGroups
-          : canLaunchAfterClearAppData
-            ? withLaunchAppAction(options.mainActionGroups)
-            : options.mainActionGroups,
+          : withLaunchAppAction(options.mainActionGroups),
         afterIndex,
         branch,
         branchLabel: branch && condition ? flowBranchLabel(condition.step, branch) : undefined,
@@ -447,7 +442,7 @@ export function buildFlowGraph(
 
   const addBranchNode = (condition: StepItem, branch: FlowBranch) => {
     const id = branchNodeId(condition.step, branch);
-    const width = condition.step.type === 'textClick' ? 116 : isBooleanCondition(condition.step) ? 56 : FLOW_BRANCH_NODE_WIDTH;
+    const width = condition.step.type === 'textClick' ? 116 : condition.step.type === 'loop' ? 80 : isBooleanCondition(condition.step) ? 56 : FLOW_BRANCH_NODE_WIDTH;
     addNode({
       id,
       type: 'flow-node',

package/src/appium-recorder/flow-labels.ts

@@ -10,6 +10,8 @@ export function isBooleanCondition(step: Pick<AppiumRecordedStep, 'type'>) {
 }
 
 export function defaultFlowKind(step: AppiumRecordedStep): FlowKind {
+  if (step.type === 'loop') return 'condition';
+  if (step.type === 'breakLoop') return 'action';
   if (step.type === 'log' || step.type === 'openGallery' || step.type === 'endFlow') return 'action';
   if (isBooleanCondition(step)) return 'condition';
   if (step.flow?.nodeKind) return step.flow.nodeKind;
@@ -18,6 +20,7 @@ export function defaultFlowKind(step: AppiumRecordedStep): FlowKind {
 }
 
 export function flowBranchLabel(step: Pick<AppiumRecordedStep, 'type'>, branch: FlowBranch) {
+  if (step.type === 'loop') return branch === 'yes' ? '循环体' : '循环结束';
   if (step.type === 'textClick') return branch === 'yes' ? '匹配到文字' : '未匹配到文字';
   if (isBooleanCondition(step)) return branch === 'yes' ? 'true' : 'false';
   return branch === 'yes' ? '是' : '否';
@@ -54,6 +57,8 @@ export function flowTypeLabel(step: AppiumRecordedStep) {
     launchApp: '启动 APP',
     openGallery: '启动相册',
     endFlow: '终止流程',
+    loop: '有界循环',
+    breakLoop: '退出循环',
     clearAppData: '清理 APP 缓存',
     longPress: '长按',
     pinch: '双指缩放',
@@ -66,6 +71,8 @@ export function flowTypeLabel(step: AppiumRecordedStep) {
 }
 
 export function flowStepMeta(step: AppiumRecordedStep) {
+  if (step.type === 'loop') return `最多 ${step.loop?.maxIterations ?? '?'} 次 · ${step.loop?.exitWhen === 'exists' ? '元素出现时退出' : step.loop?.exitWhen === 'notExists' ? '元素消失时退出' : '固定次数'}${step.loop?.exitWhen !== 'never' ? ` ${step.selector?.value || ''}` : ''}`;
+  if (step.type === 'breakLoop') return step.breakLoopTargetId ? '退出指定循环，继续循环结束后的流程' : '退出当前循环，继续循环结束后的流程';
   if (step.type === 'log') return `${step.logPrefix ?? DEFAULT_LOG_PREFIX}:${step.value || ''}`;
   if (step.type === 'aiRecognition') return step.value || '未填写识别内容';
   if (step.type === 'longPress') {

package/src/appium-recorder/flow-merge.ts

@@ -25,6 +25,7 @@ export function mergeBranches(steps: AppiumRecordedStep[], conditionId: string,
   const condition = steps.find((step) => step.id === conditionId);
   const common = steps.find((step) => step.id === commonId);
   if (!condition || defaultFlowKind(condition) !== 'condition') throw new Error('请选择判断节点');
+  if (condition.type === 'loop') throw new Error('循环体与循环结束路径不能合并');
   if (condition.flow?.successTargetId) throw new Error('该判断已有后续公共流程，不能重复合流');
   if (!common || common.flow?.parentConditionId !== conditionId || !common.flow.parentBranch) throw new Error('公共起点必须属于当前判断的直接分支');
   const side = common.flow.parentBranch;
@@ -62,10 +63,10 @@ export function mergeBranches(steps: AppiumRecordedStep[], conditionId: string,
     }
   }
   function connectEnd(step: typeof next[number]) {
-    if (step.type === 'endFlow') return;
+    if (step.type === 'endFlow' || step.type === 'breakLoop') return;
     step.flow.successTargetId = commonId;
     if (defaultFlowKind(step) === 'condition') {
-      for (const branch of ['yes', 'no'] as const) {
+      for (const branch of (step.type === 'loop' ? ['no'] : ['yes', 'no']) as Branch[]) {
         const children = branchSteps(next, step.id, branch);
         if (children.length) connectEnd(byId.get(children[children.length - 1]!.id)!);
         else step.flow[branch === 'yes' ? 'yesTargetId' : 'noTargetId'] = commonId;

package/src/appium-recorder/flow-normalize.ts

@@ -11,6 +11,7 @@ function isEmptyNestedCondition(step: AppiumRecordedStep) {
   return isCondition(step)
     // 新类型不存在旧版分支数据，不应把后续同级节点迁入 true 分支。
     && !isBooleanCondition(step)
+    && step.type !== 'loop'
     && Boolean(step.flow?.parentConditionId)
     && Boolean(step.flow?.parentBranch)
     && !step.flow?.yesTargetId

package/src/appium-recorder/flow-search.ts

@@ -0,0 +1,29 @@
+import type { AppiumRecordedStep } from './types';
+import { flowBranchLabel, labelFlowStep } from './flow-labels';
+
+export type FlowSearchResult = { id: string; index: number; title: string; meta: string; branch: string };
+
+export function searchFlowNodes(steps: AppiumRecordedStep[], query: string): FlowSearchResult[] {
+  const terms = query.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
+  if (!terms.length) return [];
+  const byId = new Map(steps.map((step) => [step.id, step]));
+  return steps.flatMap((step, index) => {
+    const label = labelFlowStep(step);
+    const content = [label.title, label.meta, label.note, step.type, step.selector?.value, step.contextSelector?.value,
+      step.value, step.logPrefix].filter(Boolean).join(' ').toLocaleLowerCase();
+    if (!terms.every((term) => content.includes(term))) return [];
+    const path: string[] = [];
+    const visited = new Set([step.id]);
+    let current = step;
+    // Follow ownership rather than outgoing edges so merged flows never inherit a sibling branch.
+    while (current.flow?.parentConditionId) {
+      const parent = byId.get(current.flow.parentConditionId);
+      if (!parent || visited.has(parent.id)) break;
+      visited.add(parent.id);
+      const branch = current.flow.parentBranch;
+      path.unshift(`${parent.label} · ${branch ? flowBranchLabel(parent, branch) : '分支'}`);
+      current = parent;
+    }
+    return [{ id: step.id, index, title: label.title, meta: label.meta, branch: ['主流程', ...path].join(' / ') }];
+  });
+}

package/src/appium-recorder/node-locators.ts

@@ -0,0 +1,25 @@
+import type { AppiumNode } from './types';
+
+export function xpathStringLiteral(value: string) {
+  if (!value.includes("'")) return `'${value}'`;
+  if (!value.includes('"')) return `"${value}"`;
+  return `concat(${value.split("'").map((part) => `'${part}'`).join(', "\'", ')})`;
+}
+
+function uiAutomatorLocator(node: AppiumNode) {
+  // Prefer stable identifiers; adding current text to an ID selector would make it state-dependent.
+  if (node.resourceId) return `new UiSelector().resourceId(${JSON.stringify(node.resourceId)})`;
+  if (node.contentDesc) return `new UiSelector().description(${JSON.stringify(node.contentDesc)})`;
+  const classClause = node.className && node.className !== 'node' ? `.className(${JSON.stringify(node.className)})` : '';
+  if (node.text) return `new UiSelector().text(${JSON.stringify(node.text)})${classClause}`;
+  return classClause ? `new UiSelector()${classClause}` : '';
+}
+
+export function nodeLocators(node: AppiumNode) {
+  return [
+    { name: 'Resource ID', attribute: 'resource-id', value: node.resourceId },
+    { name: 'Accessibility ID', attribute: 'content-desc', value: node.contentDesc },
+    { name: 'XPath', attribute: '', value: node.xpath },
+    { name: 'UiAutomator', attribute: '', value: uiAutomatorLocator(node), warning: !node.resourceId && !node.contentDesc && !node.text && node.className && node.className !== 'node' ? '仅按组件类型匹配，可能匹配多个元素' : '' },
+  ];
+}

package/src/appium-recorder/run-history.ts

@@ -0,0 +1,50 @@
+export type HistoryNode = {
+  key: string;
+  label: string;
+  failed: boolean;
+  durationMs: number | null;
+};
+
+export type RunSummary = {
+  id: string;
+  scriptId: string;
+  scriptName: string;
+  appPackage: string;
+  appVersion: string;
+  deviceId: string;
+  startedAt: string;
+  durationMs: number;
+  status: 'passed' | 'failed' | 'stopped';
+  nodes: HistoryNode[];
+};
+
+export type RunDetail = RunSummary & {
+  output: string;
+  frames: { key: string; label: string; phase: string; capturedAt: string; imageUrl: string }[];
+};
+
+// 分母只计算实际到达该节点的运行；未执行的分支不能当作通过。
+export function historyStatistics(runs: RunSummary[]) {
+  const completed = runs.filter(run => run.status !== 'stopped');
+  const nodes = new Map<string, { key: string; label: string; runs: number; failures: number; firstFailure: string; version: string }>();
+  for (const run of [...completed].sort((a, b) => a.startedAt.localeCompare(b.startedAt))) {
+    const unique = new Map<string, HistoryNode>();
+    for (const node of run.nodes) {
+      const prior = unique.get(node.key);
+      unique.set(node.key, { ...node, failed: node.failed || Boolean(prior?.failed) });
+    }
+    for (const node of unique.values()) {
+      const item = nodes.get(node.key) || { key: node.key, label: node.label, runs: 0, failures: 0, firstFailure: '', version: '' };
+      item.runs++;
+      if (node.failed) {
+        item.failures++;
+        if (!item.firstFailure) { item.firstFailure = run.startedAt; item.version = run.appVersion; }
+      }
+      nodes.set(node.key, item);
+    }
+  }
+  return {
+    passRate: completed.length ? completed.filter(run => run.status === 'passed').length / completed.length : null,
+    failures: [...nodes.values()].filter(node => node.failures).sort((a, b) => b.failures - a.failures),
+  };
+}

package/src/appium-recorder/tree.ts

@@ -1,5 +1,6 @@
 import type { AppiumBounds, AppiumNode, AppiumSelector } from './types';
 import { parseNativeBoolean } from './native-control-state';
+import { xpathStringLiteral } from './node-locators';
 
 type SelectorCounts = {
   contentDesc: Map<string, number>;
@@ -75,10 +76,6 @@ function elementChildren(element: Element) {
   return Array.from(element.children).filter((child) => child.tagName === 'node');
 }
 
-function escapeXpathValue(value: string) {
-  return value.replace(/'/g, "&apos;");
-}
-
 function transformNode(
   element: Element,
   parentPath: string,
@@ -95,7 +92,7 @@ function transformNode(
     .slice(0, index + 1)
     .filter((sibling) => (attr(sibling, 'class') || sibling.tagName) === className).length;
   const xpath = resourceId && resourceIdCounts.get(resourceId) === 1
-    ? `//*[@resource-id='${escapeXpathValue(resourceId)}']`
+    ? `//*[@resource-id=${xpathStringLiteral(resourceId)}]`
     : `${parentPath}/${className}[${sameClassIndex}]`;
   const selector = buildSelector(element, counts, bounds);
   const selfContextSelector: AppiumSelector = selector.unique && selector.strategy !== 'bounds'

package/src/appium-recorder/types.ts

@@ -90,6 +90,8 @@ export type AppiumRecordedStep = {
     | 'launchApp'
     | 'openGallery'
     | 'endFlow'
+    | 'loop'
+    | 'breakLoop'
     | 'clearAppData'
     | 'waitDisappear'
     | 'assertText'
@@ -110,6 +112,11 @@ export type AppiumRecordedStep = {
   keyCode?: number;
   timeoutMs?: number;
   longPressMode?: 'element' | 'coordinates';
+  breakLoopTargetId?: string;
+  loop?: {
+    maxIterations: number;
+    exitWhen: 'never' | 'exists' | 'notExists';
+  };
   flow?: {
     nodeKind?: 'action' | 'condition' | 'assertion';
     yesTargetId?: string;

package/src/appium-recorder/visual-change-pairs.ts

@@ -93,10 +93,6 @@ export function branchPathForInsert(
     : [];
 }
 
-function sameBranchPath(left: string[], right: string[]) {
-  return left.length === right.length && left.every((value, index) => value === right[index]);
-}
-
 function branchPathContains(parent: string[], child: string[]) {
   return parent.length <= child.length && parent.every((value, index) => value === child[index]);
 }
@@ -118,19 +114,21 @@ function isEndForStart(endStep: AppiumRecordedStep, startStep: AppiumRecordedSte
   );
 }
 
-export function findOpenVisualChangeStart(
+export function findOpenVisualChangeStarts(
   steps: AppiumRecordedStep[],
   index?: number,
   branchTarget?: VisualChangeBranchTarget,
 ) {
   const insertPath = branchPathForInsert(steps, index, branchTarget);
   const insertIndex = typeof index === 'number' ? index : steps.length - 1;
-  // A start marker may be closed once per concrete branch path. This allows a
-  // root start before a condition to have independent yes/no end markers, while
-  // preventing a yes-branch start from pairing with a no-branch end.
+  // 祖先或子分支中的结束节点可能与新节点在同一路径执行，不能重复关闭。
+  // 互斥的兄弟分支不包含彼此，仍允许分别结束同一个开始节点。
   const hasEndInInsertBranch = (startStep: AppiumRecordedStep) => steps.some((step) => (
     isEndForStart(step, startStep)
-    && sameBranchPath(branchPathForStep(steps, step), insertPath)
+    && (
+      branchPathContains(branchPathForStep(steps, step), insertPath)
+      || branchPathContains(insertPath, branchPathForStep(steps, step))
+    )
   ));
 
   return steps
@@ -143,5 +141,13 @@ export function findOpenVisualChangeStart(
     ))
     .sort((left, right) => (
       right.path.length - left.path.length || right.stepIndex - left.stepIndex
-    ))[0]?.step;
+    )).map(({ step }) => step);
+}
+
+export function findOpenVisualChangeStart(
+  steps: AppiumRecordedStep[],
+  index?: number,
+  branchTarget?: VisualChangeBranchTarget,
+) {
+  return findOpenVisualChangeStarts(steps, index, branchTarget)[0];
 }

package/src/components/device/DevicePreviewPanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, shallowRef, watch } from 'vue';
-import { Cpu, Refresh } from '@element-plus/icons-vue';
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+import { Close, Cpu, FullScreen, Refresh } from '@element-plus/icons-vue';
 import type { AndroidDevice, DeviceAction } from '../../types';
 
 type DeviceOverlayBounds = {
@@ -33,6 +33,8 @@ const props = defineProps<{
   regionDrawMode?: boolean;
   deviceWidth?: number;
   deviceHeight?: number;
+  compact?: boolean;
+  interactionDisabled?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -53,6 +55,20 @@ const emit = defineEmits<{
 }>();
 
 const imageSize = shallowRef({ width: 0, height: 0 });
+const previewRef = ref<HTMLElement>();
+const previewSize = ref({ width: 0, height: 0 });
+const enlarged = ref(false);
+let observer: ResizeObserver | undefined;
+function closeOnEscape(event: KeyboardEvent) { if (event.key === 'Escape') enlarged.value = false; }
+onMounted(() => {
+  if (!props.compact) return;
+  observer = new ResizeObserver(([entry]) => {
+    if (entry) previewSize.value = { width: entry.contentRect.width, height: entry.contentRect.height };
+  });
+  if (previewRef.value) observer.observe(previewRef.value);
+  window.addEventListener('keydown', closeOnEscape);
+});
+onBeforeUnmount(() => { observer?.disconnect(); window.removeEventListener('keydown', closeOnEscape); });
 let pointerSession: {
   mode: 'gesture' | 'region-draw' | 'region-move';
   pointerId: number;
@@ -64,9 +80,14 @@ let pointerSession: {
 const draftRegion = shallowRef<DeviceOverlayBounds | null>(null);
 const hasPreview = computed(() => Boolean(props.frameUrl || props.imageUrl));
 const imageBoxStyle = computed(() => {
-  if (props.frameUrl) return {};
   const width = props.deviceWidth || imageSize.value.width;
   const height = props.deviceHeight || imageSize.value.height;
+  if (props.compact) {
+    const ratio = width && height ? width / height : 9 / 20;
+    const fittedWidth = Math.min(previewSize.value.width, previewSize.value.height * ratio);
+    return { width: `${fittedWidth}px`, height: `${fittedWidth / ratio}px` };
+  }
+  if (props.frameUrl) return {};
   return { aspectRatio: width && height ? `${width} / ${height}` : '9 / 20' };
 });
 const overlayViewBox = computed(() => {
@@ -184,6 +205,7 @@ function emitRegion(bounds: DeviceOverlayBounds) {
 }
 
 function handlePointerDown(event: PointerEvent) {
+  if (props.interactionDisabled && !props.regionSelection) return;
   if (event.pointerType === 'mouse' && event.button !== 0) return;
   const target = event.currentTarget as HTMLElement;
   const point = getDevicePoint(target, event.clientX, event.clientY);
@@ -268,22 +290,28 @@ function handlePointerCancel(event: PointerEvent) {
 </script>
 
 <template>
-  <el-card shadow="never" class="automation-card device-preview-card">
+  <el-card shadow="never" class="automation-card device-preview-card" :class="{ 'device-preview-card--compact': compact, 'device-preview-card--enlarged': enlarged }">
     <template #header>
       <div class="panel-header">
         <span>设备预览</span>
         <div class="device-status">
+          <el-tag v-if="compact" :type="available ? 'success' : 'info'">
+            {{ available ? '已连接' : '未连接' }}
+          </el-tag>
+          <el-tooltip v-if="compact" :content="enlarged ? '退出设备放大' : '放大设备预览'" placement="top" :show-after="200"><el-button class="recorder-panel-tool" size="small" :icon="enlarged ? Close : FullScreen" :aria-label="enlarged ? '退出设备放大' : '放大设备预览'" @click="enlarged = !enlarged" /></el-tooltip>
+          <el-tooltip content="刷新画面" placement="top" :show-after="200">
           <el-button
-            text
-            circle
+            :text="!compact"
+            :circle="!compact"
+            :class="{ 'recorder-panel-tool': compact }"
+            :size="compact ? 'small' : 'default'"
             :icon="Refresh"
             :disabled="!selectedDeviceId"
-            title="刷新画面"
+            aria-label="刷新画面"
             @click="emit('refreshPreview')"
           />
-          <el-tag :type="available ? 'success' : 'info'">
-            {{ available ? 'ADB 已连接' : '未检测到设备' }}
-          </el-tag>
+          </el-tooltip>
+          <el-tag v-if="!compact" :type="available ? 'success' : 'info'">{{ available ? 'ADB 已连接' : '未检测到设备' }}</el-tag>
         </div>
       </div>
     </template>
@@ -310,6 +338,8 @@ function handlePointerCancel(event: PointerEvent) {
         :key="action.key"
         type="button"
         class="device-action-button"
+        :disabled="interactionDisabled || regionSelection"
+        :aria-label="action.label"
         @click="emit('triggerKey', action.keyCode)"
       >
         <img :src="action.icon" :alt="action.label" class="device-action-button__icon" />
@@ -318,6 +348,7 @@ function handlePointerCancel(event: PointerEvent) {
     </div>
 
     <div
+      ref="previewRef"
       class="device-preview"
       :class="{
         'device-preview--image': imageUrl && !frameUrl,
@@ -411,3 +442,24 @@ function handlePointerCancel(event: PointerEvent) {
     </div>
   </el-card>
 </template>
+
+<style scoped>
+.device-preview-card--compact { display: flex; flex-direction: column; min-height: 0; }
+.device-preview-card--compact :deep(> .el-card__body) { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; gap: 8px; }
+.device-preview-card--compact .panel-header { flex-wrap: wrap; gap: 8px; font-size: 14px; }
+.device-preview-card--compact .device-status { gap: 8px; margin-left: auto; }
+.device-preview-card--compact .device-status .el-tag { font-size: 11px; padding: 0 4px; }
+.device-preview-card--compact .device-toolbar, .device-preview-card--compact .device-actions { flex: none; margin: 0; }
+.device-preview-card--compact .device-toolbar { display: flex; padding: 0; }
+.device-preview-card--compact .device-select { width: 100%; min-width: 0; }
+.device-preview-card--compact .device-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 0; }
+.device-preview-card--compact .device-actions::before { display: none; }
+.device-preview-card--compact .device-action-button { margin: 0; width: 30px; height: 30px; }
+.device-preview-card--compact .device-action-button:disabled { opacity: .45; cursor: not-allowed; }
+.device-preview-card--compact .device-preview { flex: 1; height: auto; min-height: 0; }
+.device-preview-card--compact .device-preview__empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
+.device-preview-card--compact.device-preview-card--enlarged { position: fixed; inset: 24px; z-index: 2100; margin: 0; box-shadow: 0 0 0 100vmax #0007; }
+.device-preview-card--enlarged :deep(.el-card__header) { padding-right: 12px; }
+.device-preview-card--enlarged .device-toolbar { max-width: 420px; align-self: center; width: 100%; }
+@media (max-width: 600px) { .device-preview-card--compact.device-preview-card--enlarged { inset: 12px; } }
+</style>