android-midscene-automation 0.1.30 → 0.1.32

package/src/appium-recorder/AppiumPage.vue

@@ -2,9 +2,14 @@
 import { computed, h, onMounted, onUnmounted, provide, reactive, shallowRef, watch } from 'vue';
 import { flowBackgroundKey, normalizeFlowBackground } from './flow-appearance';
 import { ElForm, ElFormItem, ElInputNumber, ElMessage, ElMessageBox, ElOption, ElSelect } from 'element-plus';
-import { Check, CircleClose, CopyDocument, Delete, Document, Download, Edit, Plus, Refresh, Upload, VideoPlay, View } from '@element-plus/icons-vue';
+import { Check, CircleClose, CopyDocument, Delete, Document, Download, Edit, Plus, Refresh, Upload, VideoPlay, View, Clock } from '@element-plus/icons-vue';
+import RunHistoryDialog from './RunHistoryDialog.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 VisualChangeEndPicker from './components/VisualChangeEndPicker.vue';
+import { defaultLoopConfig, enclosingLoops, breakLoopTarget, validateLoop, validateLoopSteps } from './bounded-loop';
 import {
   clearAppiumDeviceAppData,
   deleteAppiumScript,
@@ -18,9 +23,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';
@@ -50,7 +55,7 @@ import {
   visualRegionToBounds,
 } from './visual-change';
 import {
-  findOpenVisualChangeStart,
+  findOpenVisualChangeStarts,
   nextVisualChangePairLabel,
 } from './visual-change-pairs';
 import type {
@@ -76,6 +81,8 @@ type BranchTarget = {
 type RecorderAction = InsertAction;
 
 const WORKBENCH_TAB_STORAGE_KEY = 'android-midscene-automation:appium-workbench-tab';
+const workspaceRef = shallowRef<InstanceType<typeof RecorderWorkspace>>();
+const historyScript = shallowRef<{ id: string; name: string } | null>(null);
 const AUTO_TREE_REFRESH_INTERVAL_MS = 1800;
 
 const insertableRecorderActions: RecorderAction[] = [
@@ -106,6 +113,8 @@ const insertableRecorderActions: RecorderAction[] = [
   'launchApp',
   'openGallery',
   'endFlow',
+  'loop',
+  'breakLoop',
   'clearAppData',
   'waitDisappear',
   'assertText',
@@ -357,6 +366,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 +926,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 +939,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 +1220,7 @@ function pickVisualChangeRegion() {
     mode: 'region',
   });
   visualChangePicking.value = true;
+  workspaceRef.value?.showPreview();
   ElMessage.info('请在设备预览中拖拽框选检测区域');
 }
 
@@ -1256,11 +1269,6 @@ async function addAction(
 ) {
   if (recordingBusy.value) return;
   if (!ensureAppPackageSelected()) return;
-  const previousStep = typeof index === 'number' && index >= 0 ? steps.value[index] : undefined;
-  if (action === 'launchApp' && steps.value.some((step) => step.type === 'launchApp')) {
-    ElMessage.warning('启动 APP 节点只能添加一个');
-    return;
-  }
   if (action === 'clearAppData' && steps.value.some((step) => step.type === 'clearAppData')) {
     ElMessage.warning('清理 App 缓存节点只能添加一个');
     return;
@@ -1269,10 +1277,6 @@ async function addAction(
     ElMessage.warning('清理 App 缓存只能从开始节点添加');
     return;
   }
-  if (action === 'launchApp' && index !== -1 && previousStep?.type !== 'clearAppData') {
-    ElMessage.warning('启动 APP 只能从开始节点或清理 App 缓存后添加');
-    return;
-  }
   if (action === 'runScript') {
     openLinkedScriptDialog(index, branchTarget);
     return;
@@ -1286,6 +1290,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',
@@ -1356,11 +1400,31 @@ async function addAction(
     return;
   }
   if (action === 'visualChangeEnd') {
-    const startStep = findOpenVisualChangeStart(steps.value, index, branchTarget);
-    if (!startStep) {
+    const candidates = findOpenVisualChangeStarts(steps.value, index, branchTarget);
+    if (!candidates.length) {
       ElMessage.warning('当前分支没有可对应的检测画面变化开始节点');
       return;
     }
+    let selectedId = candidates.length === 1 ? candidates[0].id : '';
+    if (candidates.length > 1) {
+      selectedId = await new Promise<string>((resolve) => { void ElMessageBox({
+        title: '选择要结束的画面变化检测',
+        showConfirmButton: false,
+        showCancelButton: false,
+        callback: () => resolve(''),
+        message: h(VisualChangeEndPicker, {
+          candidates: candidates.map(step => ({ id: step.id, label: step.visualChange?.pairLabel || step.label, number: steps.value.findIndex(item => item.id === step.id) + 1 })),
+          onSelect: (id: string) => { resolve(id); ElMessageBox.close(); },
+        }),
+      }); });
+      if (!selectedId) return;
+    }
+    // 选择期间流程可能发生变化；插入前重新检查配对，不能使用过期候选。
+    const startStep = findOpenVisualChangeStarts(steps.value, index, branchTarget).find(step => step.id === selectedId);
+    if (!startStep) {
+      ElMessage.warning('该开始节点已结束或不再属于当前路径，请重新选择');
+      return;
+    }
     const inserted = insertStep(createVisualChangeEndStep(startStep), index, branchTarget);
     ElMessage.success(`已添加 ${inserted.label}`);
     return inserted;
@@ -1410,14 +1474,12 @@ async function addAction(
     return;
   }
   if (action === 'launchApp') {
-    const clearStepIndex = steps.value.findIndex((step) => step.type === 'clearAppData');
-    const insertIndex = previousStep?.type === 'clearAppData' ? index : clearStepIndex >= 0 ? clearStepIndex : index;
     return insertStep({
       id: `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
       type: 'launchApp',
       label: `启动 APP ${form.appPackage}`,
       value: form.appPackage,
-    }, insertIndex);
+    }, index, branchTarget);
   }
   if (action === 'clearAppData') {
     return insertStep({
@@ -2027,8 +2089,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 +2115,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"
@@ -2112,15 +2162,9 @@ watch(
                     <p>请在录制流程中添加或执行“启动 APP”节点；Activity 匹配后会自动解除编辑锁定。</p>
                   </div>
                 </details>
-                <NodeDetail
-                  :node="selectedNode"
-                  :current-activity="currentActivity"
-                  :loading="recordingTap"
-                />
               </section>
 
               <section class="appium-workbench__section appium-workbench__flow">
-                <h3>录制步骤</h3>
                 <RecordedSteps
                   :key="newScriptRevision"
                   :ai-recognition-model-configured="aiRecognitionModelConfigured"
@@ -2151,9 +2195,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"
@@ -2176,37 +2220,50 @@ 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="Clock" aria-label="历史结果对比" @click.stop="historyScript = { id: script.id, name: script.name }" />
+                    </span></el-tooltip>
+                    <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>
@@ -2214,8 +2271,9 @@ watch(
           </el-tab-pane>
         </el-tabs>
       </el-card>
-    </div>
+    </RecorderWorkspace>
 
+    <RunHistoryDialog v-if="historyScript" :script-id="historyScript.id" :script-name="historyScript.name" @close="historyScript = null" />
     <NewScriptDialog
       v-if="newScriptDialogVisible"
       :script-name="form.name"
@@ -2402,13 +2460,15 @@ watch(
 </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(180px, 1fr); gap: 10px; 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; }

package/src/appium-recorder/RunHistoryDialog.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { Delete, Refresh } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { historyStatistics, type RunSummary, type RunDetail } from './run-history';
+
+const props = defineProps<{ scriptId: string; scriptName: string }>();
+const emit = defineEmits<{ close: [] }>();
+const runs = ref<RunSummary[]>([]);
+const selected = ref<RunSummary[]>([]);
+const details = ref<RunDetail[]>([]);
+const loading = ref(false);
+const comparing = ref(false);
+const version = ref('');
+const device = ref('');
+const error = ref('');
+const nodeKey = ref('');
+const logQuery = ref('');
+const base = `/api/appium-recorder/scripts/${encodeURIComponent(props.scriptId)}/history`;
+const labels = { passed: '通过', failed: '失败', stopped: '已终止' };
+const versions = computed(() => [...new Set(runs.value.map(run => run.appVersion || '未知'))]);
+const devices = computed(() => [...new Set(runs.value.map(run => run.deviceId))]);
+const filtered = computed(() => runs.value.filter(run => (!version.value || (run.appVersion || '未知') === version.value) && (!device.value || run.deviceId === device.value)));
+const stats = computed(() => historyStatistics(filtered.value));
+const trend = computed(() => [...filtered.value].sort((a, b) => a.startedAt.localeCompare(b.startedAt)));
+const maxDuration = computed(() => Math.max(1, ...trend.value.map(run => run.durationMs)));
+const points = computed(() => trend.value.map((run, index) => `${20 + index * 760 / Math.max(1, trend.value.length - 1)},${130 - run.durationMs / maxDuration.value * 110}`).join(' '));
+const comparisonNodes = computed(() => [...new Map(details.value.flatMap(run => run.nodes.map(node => [node.key, node] as const))).values()]);
+const time = (value: string) => new Date(value).toLocaleString('zh-CN', { hour12: false });
+const seconds = (value: number) => `${(value / 1000).toFixed(2)}s`;
+
+async function request<T>(url: string, method = 'GET'): Promise<T> {
+  const response = await fetch(url, { method });
+  if (!response.ok) throw new Error('历史结果请求失败');
+  return response.json();
+}
+async function load() {
+  loading.value = true; error.value = '';
+  try { runs.value = await request<RunSummary[]>(base); selected.value = []; }
+  catch (cause) { error.value = String(cause); }
+  finally { loading.value = false; }
+}
+async function compare() {
+  comparing.value = true;
+  try {
+    details.value = await Promise.all([...selected.value].sort((a, b) => a.startedAt.localeCompare(b.startedAt)).map(run => request<RunDetail>(`${base}/${encodeURIComponent(run.id)}`)));
+    nodeKey.value = '';
+  } catch (cause) { ElMessage.error(String(cause)); }
+  finally { comparing.value = false; }
+}
+async function remove() {
+  try { await ElMessageBox.confirm(`删除选中的 ${selected.value.length} 条历史及截图、日志快照？原始报告文件不受影响。`, '删除历史结果', { type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消' }); }
+  catch { return; }
+  loading.value = true;
+  try {
+    for (const run of selected.value) await request(`${base}/${encodeURIComponent(run.id)}`, 'DELETE');
+    details.value = [];
+    await load();
+  } catch (cause) { ElMessage.error(String(cause)); await load(); }
+  finally { loading.value = false; }
+}
+function nodeDuration(run: RunDetail) {
+  const matches = run.nodes.filter(node => node.key === nodeKey.value);
+  if (!matches.length) return '未执行';
+  if (matches.some(node => node.durationMs === null)) return '耗时不完整';
+  return seconds(matches.reduce((sum, node) => sum + (node.durationMs || 0), 0));
+}
+onMounted(load);
+</script>
+
+<template>
+  <el-dialog :model-value="true" :title="`${scriptName} · 历史结果对比`" width="min(1200px, 96vw)" align-center append-to-body @closed="emit('close')">
+    <div v-loading="loading" class="run-history">
+      <div class="history-toolbar">
+        <el-select v-model="version" clearable placeholder="全部应用版本" aria-label="应用版本"><el-option v-for="item in versions" :key="item" :value="item" /></el-select>
+        <el-select v-model="device" clearable placeholder="全部设备" aria-label="设备"><el-option v-for="item in devices" :key="item" :value="item" /></el-select>
+        <el-tooltip content="刷新历史"><el-button :icon="Refresh" aria-label="刷新历史" @click="load" /></el-tooltip>
+        <el-button :disabled="selected.length !== 2" :loading="comparing" @click="compare">对比两次运行</el-button>
+        <el-tooltip content="删除选中历史"><el-button :icon="Delete" type="danger" plain :disabled="!selected.length" aria-label="删除选中历史" @click="remove" /></el-tooltip>
+      </div>
+      <el-alert v-if="error" :title="error" type="error" :closable="false" />
+      <el-empty v-else-if="!runs.length && !loading" description="暂无历史结果，后续运行会自动记录" />
+      <template v-else>
+        <p>{{ filtered.length }} 次运行 · 通过率 {{ stats.passRate === null ? '—' : `${(stats.passRate * 100).toFixed(1)}%` }}（不含手动终止）</p>
+        <h3>耗时趋势</h3>
+        <svg class="history-trend" viewBox="0 0 800 160" role="img" aria-label="按时间从早到晚的运行耗时趋势">
+          <path d="M20 10V130H790" fill="none" stroke="#a0a8ad" />
+          <polyline :points="points" fill="none" stroke="#168a75" stroke-width="2" />
+          <circle v-for="(run, index) in trend" :key="run.id" :cx="20 + index * 760 / Math.max(1, trend.length - 1)" :cy="130 - run.durationMs / maxDuration * 110" r="4" :fill="run.status === 'failed' ? '#d14343' : '#168a75'">
+            <title>{{ time(run.startedAt) }} · {{ seconds(run.durationMs) }} · {{ run.appVersion || '未知版本' }}</title>
+          </circle>
+          <text x="24" y="14">{{ seconds(maxDuration) }}</text><text x="20" y="153">{{ trend[0] ? time(trend[0].startedAt) : '' }}</text><text x="780" y="153" text-anchor="end">{{ trend.length > 1 ? time(trend[trend.length - 1].startedAt) : '' }}</text>
+        </svg>
+        <el-table :data="filtered" row-key="id" max-height="270" @selection-change="selected = $event">
+          <el-table-column type="selection" width="42" />
+          <el-table-column label="运行时间" min-width="180"><template #default="{ row }">{{ time(row.startedAt) }}</template></el-table-column>
+          <el-table-column prop="appVersion" label="应用版本" min-width="140"><template #default="{ row }">{{ row.appVersion || '未知' }}</template></el-table-column>
+          <el-table-column prop="deviceId" label="设备" min-width="140" />
+          <el-table-column label="结果" width="85"><template #default="{ row }">{{ labels[row.status as keyof typeof labels] }}</template></el-table-column>
+          <el-table-column label="耗时" width="100"><template #default="{ row }">{{ seconds(row.durationMs) }}</template></el-table-column>
+        </el-table>
+        <h3>失败节点分布</h3>
+        <el-table :data="stats.failures" max-height="220" empty-text="暂无节点失败记录">
+          <el-table-column prop="label" label="节点" min-width="220" />
+          <el-table-column label="失败 / 到达次数" width="145"><template #default="{ row }">{{ row.failures }} / {{ row.runs }}</template></el-table-column>
+          <el-table-column label="观察结果" width="130"><template #default="{ row }">{{ row.runs < 2 ? '样本不足' : row.failures === row.runs ? '持续失败' : '偶发失败' }}</template></el-table-column>
+          <el-table-column label="首次失败 / 版本" min-width="190"><template #default="{ row }">{{ time(row.firstFailure) }} · {{ row.version || '未知' }}</template></el-table-column>
+        </el-table>
+      </template>
+      <section v-if="details.length === 2" class="history-comparison">
+        <h3>运行对比 · 总耗时差 {{ seconds(details[1].durationMs - details[0].durationMs) }}</h3>
+        <el-alert v-if="details[0].deviceId !== details[1].deviceId || details[0].appPackage !== details[1].appPackage" title="两次运行的设备或应用不同，耗时差不能直接归因于版本变化" type="warning" :closable="false" />
+        <el-select v-model="nodeKey" clearable filterable placeholder="全部节点截图" aria-label="对比节点"><el-option v-for="node in comparisonNodes" :key="node.key" :label="node.label" :value="node.key" /></el-select>
+        <div class="comparison-columns">
+          <section v-for="run in details" :key="run.id">
+            <h4>{{ time(run.startedAt) }} · {{ labels[run.status] }}</h4>
+            <p>{{ run.appVersion || '未知版本' }} · {{ run.deviceId }} · {{ seconds(run.durationMs) }}</p>
+            <p v-if="nodeKey">节点累计耗时（含截图开销）：{{ nodeDuration(run) }}</p>
+            <p v-if="!run.frames.some(frame => !nodeKey || frame.key === nodeKey)">未捕获到对应截图</p>
+            <div class="history-frames">
+              <figure v-for="(frame, index) in run.frames.filter(frame => !nodeKey || frame.key === nodeKey)" :key="index">
+                <figcaption>{{ frame.label }} · {{ frame.phase === 'before' ? '执行前' : frame.phase === 'after' ? '执行后' : frame.phase }} · {{ time(frame.capturedAt) }}</figcaption>
+                <el-image :src="frame.imageUrl" :preview-src-list="[frame.imageUrl]" preview-teleported fit="contain" loading="lazy" />
+              </figure>
+            </div>
+            <h4>节点结果</h4><ul><li v-for="(node, index) in run.nodes.filter(node => !nodeKey || node.key === nodeKey)" :key="index">{{ node.label }} · {{ node.failed ? '失败' : '完成' }} · {{ node.durationMs === null ? '耗时未知' : seconds(node.durationMs) }}</li></ul>
+            <h4>关键日志 / 完整日志</h4><el-input v-model="logQuery" clearable placeholder="日志关键字，如 stageLog" aria-label="日志关键字" /><pre>{{ logQuery ? run.output.split('\n').filter(line => line.toLowerCase().includes(logQuery.toLowerCase())).join('\n') || '无匹配日志' : run.output }}</pre>
+          </section>
+        </div>
+      </section>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.run-history { max-height: 78vh; overflow: auto; }
+.history-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.history-toolbar .el-select { width: 190px; }
+.history-trend { width: 100%; height: 160px; background: #f3faf7; }
+.history-trend text { font-size: 12px; fill: #52615b; }
+h3 { font-size: 15px; margin: 18px 0 10px; }
+h4 { font-size: 14px; margin: 12px 0 8px; }
+.history-comparison > .el-select { width: 100%; }
+.comparison-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
+.comparison-columns section { min-width: 0; overflow-wrap: anywhere; }
+.history-frames { max-height: 360px; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+figure { margin: 0; }
+figcaption { font-size: 12px; }
+.el-image { width: 100%; height: 150px; }
+pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow: auto; background: #f1f5f4; padding: 10px; font-size: 12px; }
+ul { max-height: 160px; overflow: auto; padding-left: 20px; }
+@media (max-width: 650px) { .comparison-columns { grid-template-columns: minmax(0, 1fr); } }
+</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>