android-midscene-automation 0.1.41 → 0.1.43

package/src/appium-recorder/api.ts

@@ -1,8 +1,32 @@
 import { APP_BASE } from '../api';
+import type { AiObservationConfig, AiRecognitionResult } from './ai-recognition';
 import type { AppiumRecordedScript, AppiumRecordedStep } from './types';
 import type { TestVariable } from './variables';
 import type { AppiumVisualChangeRegion } from './types';
 
+export async function testAiRecognition(input: { deviceId: string; prompt: string; timeoutMs?: number; aiTimeoutEnabled?: boolean; aiBranchEnabled?: boolean; aiObservation?: AiObservationConfig }, signal?: AbortSignal) {
+  const response = await fetch(`${APP_BASE}/api/appium-recorder/ai-recognition/test`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(input), signal,
+  });
+  return readJson<AiRecognitionResult & { imageBase64: string }>(response);
+}
+
+export async function validateAiBranchQuestion(prompt: string, signal?: AbortSignal) {
+  return readJson<{ result: boolean; reason: string }>(await fetch(`${APP_BASE}/api/appium-recorder/ai-recognition/validate-question`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }), signal,
+  }));
+}
+
+export async function optimizeAppiumPrompt(input: {
+  kind: 'aiRecognition' | 'reportSummary';
+  prompt: string;
+  condition?: boolean;
+}, signal?: AbortSignal) {
+  return readJson<{ prompt: string }>(await fetch(`${APP_BASE}/api/appium-recorder/prompts/optimize`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(input), signal,
+  }));
+}
+
 export function captureImageCheckRegion(deviceId: string, region: AppiumVisualChangeRegion, screenWidth: number, screenHeight: number) {
   return postJson<{ base64: string; screenWidth: number; screenHeight: number }>(`${APP_BASE}/api/appium-recorder/image-check/capture`, { deviceId, region, screenWidth, screenHeight });
 }
@@ -124,7 +148,7 @@ type ReplayStreamEvent =
   | { type: 'error'; message: string };
 
 export async function replayAppiumScript(
-  input: { id: string; deviceId?: string; recordVideo?: boolean; parameters?: import('./variables').TestVariable[] },
+  input: { id: string; deviceId?: string; recordVideo?: boolean; reportSummaryEnabled?: boolean; reportSummaryPrompt?: string; parameters?: import('./variables').TestVariable[] },
   onOutput?: (line: string) => void,
 ) {
   const response = await fetch(`${APP_BASE}/api/appium-recorder/scripts/${encodeURIComponent(input.id)}/replay`, {
@@ -133,7 +157,13 @@ export async function replayAppiumScript(
       'Content-Type': 'application/json',
       Accept: 'application/x-ndjson',
     },
-    body: JSON.stringify({ deviceId: input.deviceId, parameters: input.parameters, recordVideo: input.recordVideo }),
+    body: JSON.stringify({
+      deviceId: input.deviceId,
+      parameters: input.parameters,
+      recordVideo: input.recordVideo,
+      reportSummaryEnabled: input.reportSummaryEnabled,
+      reportSummaryPrompt: input.reportSummaryPrompt,
+    }),
   });
   if (!response.ok || !response.body) return readJson<ReplayResult>(response);
 
@@ -163,6 +193,10 @@ export async function replayAppiumScript(
   return result;
 }
 
+export function checkReportSummaryModel() {
+  return postJson<{ enabled: boolean; available: boolean; message?: string }>(`${APP_BASE}/api/appium-recorder/report-summary/check`);
+}
+
 export function stopAppiumReplay(deviceId?: string) {
   return postJson<{ success: boolean; stopped: boolean }>(
     `${APP_BASE}/api/appium-recorder/replay/stop`,

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

@@ -42,8 +42,15 @@ export function breakLoopTarget(steps: readonly AppiumRecordedStep[], step: Appi
   return target;
 }
 
+export function continueLoopTarget(steps: readonly AppiumRecordedStep[], step: AppiumRecordedStep) {
+  const loops = enclosingLoops(steps, step);
+  const target = step.continueLoopTargetId ? loops.find((loop) => loop.id === step.continueLoopTargetId) : 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;
+  if (!steps.some((step) => ['loop', 'breakLoop', 'continueLoop'].includes(step.type))) 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) {
@@ -58,6 +65,7 @@ export function validateLoopSteps(steps: readonly AppiumRecordedStep[]) {
     }
     if (step.type === 'loop') validateLoop(step);
     if (step.type === 'breakLoop') breakLoopTarget(steps, step);
+    if (step.type === 'continueLoop') continueLoopTarget(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/AiRecognitionPromptInput.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { AiPromptPreset } from '../ai-prompt-presets';
+const props = defineProps<{ modelValue: string; presets: readonly AiPromptPreset[]; disabled?: boolean; placeholder?: string }>();
+const selectedPreset = computed(() => props.presets.find(preset => preset.prompt === props.modelValue));
+const dropdownOpen = ref(false);
+const emit = defineEmits<{ 'update:modelValue': [value: string]; change: [value: string] }>();
+function selectPreset(value: string) {
+  const preset = props.presets.find(preset => preset.name === value);
+  if (!preset) return;
+  emit('update:modelValue', preset.prompt);
+  emit('change', preset.prompt);
+}
+</script>
+
+<template>
+  <div class="recognition-prompt-input">
+    <el-tooltip :disabled="!selectedPreset || dropdownOpen" :show-after="300" placement="top">
+      <template #content><div class="recognition-preset-detail">{{ selectedPreset?.prompt }}</div></template>
+    <el-select :model-value="selectedPreset?.name" :disabled="disabled" filterable placeholder="选择测试场景，或在下方输入" aria-label="选择测试场景" @change="selectPreset" @visible-change="dropdownOpen = $event">
+      <el-option v-for="preset in presets" :key="preset.name" :label="preset.name" :value="preset.name" class="recognition-preset-option">
+        <el-tooltip :show-after="300" placement="right">
+          <template #content><div class="recognition-preset-detail">{{ preset.prompt }}</div></template>
+          <span class="recognition-preset-name">{{ preset.name }}</span>
+        </el-tooltip>
+      </el-option>
+      <template #empty><div class="recognition-preset-empty">暂无匹配的预设，可在 AI 识别配置中添加</div></template>
+    </el-select>
+    </el-tooltip>
+    <el-input :model-value="modelValue" type="textarea" :rows="3" maxlength="4000" :placeholder="placeholder" :disabled="disabled" @update:model-value="emit('update:modelValue', $event)" @change="emit('change', $event)" />
+  </div>
+</template>
+
+<style scoped>
+.recognition-prompt-input { width: 100%; }
+.recognition-prompt-input .el-select { width: 100%; margin-bottom: 10px; }
+.recognition-preset-name { display: block; }
+.recognition-preset-detail { max-width: min(360px, calc(100vw - 40px)); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
+.recognition-preset-option { height: auto; min-height: 34px; white-space: normal; line-height: 1.6; padding-top: 8px; padding-bottom: 8px; overflow-wrap: anywhere; }
+.recognition-preset-empty { padding: 12px; color: var(--el-text-color-secondary); font-size: 12px; }
+</style>

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

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
+import { Loading, QuestionFilled } from '@element-plus/icons-vue';
+import { isAiBranchEnabled, validateAiRecognitionPrompt, DEFAULT_AI_OBSERVATION, validateAiObservation, type AiObservationConfig } from '../ai-recognition';
+import { optimizeAppiumPrompt, validateAiBranchQuestion } from '../api';
+import type { AppiumRecordedStep } from '../types';
+import { aiPromptPresetsKey, DEFAULT_AI_PROMPT_PRESETS } from '../ai-prompt-presets';
+import AiRecognitionPromptInput from './AiRecognitionPromptInput.vue';
+
+const props = defineProps<{ step: AppiumRecordedStep; steps: AppiumRecordedStep[]; disabled?: boolean }>();
+const emit = defineEmits<{ update: [patch: Partial<AppiumRecordedStep>] }>();
+const prompt = ref(props.step.value || '');
+const promptPresets = inject(aiPromptPresetsKey, ref(DEFAULT_AI_PROMPT_PRESETS));
+const busy = ref(false);
+const optimizingPrompt = shallowRef(false);
+const error = ref('');
+const branch = computed(() => isAiBranchEnabled(props.step));
+const untilMatch = computed(() => props.step.aiObservation?.mode === 'untilMatch');
+const branchChoice = ref(branch.value);
+watch(branch, value => { branchChoice.value = value; });
+let controller: AbortController | undefined;
+let optimizeController: AbortController | undefined;
+watch(() => props.step.value, value => { prompt.value = value || ''; });
+onBeforeUnmount(() => { controller?.abort(); optimizeController?.abort(); });
+
+function updateObservation(patch: Partial<AiObservationConfig>) {
+  try {
+    const aiObservation = validateAiObservation({ ...DEFAULT_AI_OBSERVATION, ...props.step.aiObservation, ...patch });
+    error.value = '';
+    emit('update', { aiObservation });
+  } catch (cause) { error.value = cause instanceof Error ? cause.message : '持续观察配置无效'; }
+}
+
+async function toggleBranch(enabled: boolean) {
+  branchChoice.value = enabled;
+  await save(enabled);
+  branchChoice.value = branch.value;
+}
+
+async function optimizePrompt() {
+  if (busy.value || optimizingPrompt.value || props.disabled) return;
+  error.value = '';
+  optimizeController = new AbortController();
+  optimizingPrompt.value = true;
+  let optimized = '';
+  try {
+    optimized = (await optimizeAppiumPrompt({
+      kind: 'aiRecognition',
+      prompt: prompt.value,
+      condition: branch.value || untilMatch.value,
+    }, optimizeController.signal)).prompt;
+    prompt.value = optimized;
+  } catch (cause) {
+    if (!optimizeController.signal.aborted) error.value = cause instanceof Error ? cause.message : '提示词优化失败';
+  } finally {
+    optimizingPrompt.value = false;
+  }
+  if (optimized) await save(branch.value);
+}
+
+async function save(enabled: boolean, observation?: AiObservationConfig) {
+  if (busy.value || props.disabled) return;
+  error.value = '';
+  if (!enabled && branch.value && (props.step.flow?.yesTargetId || props.step.flow?.noTargetId
+    || props.steps.some(step => step.flow?.parentConditionId === props.step.id))) {
+    error.value = '请先移除当前 AI 节点的子分支，再关闭分支模式';
+    return;
+  }
+  controller = new AbortController();
+  const signal = controller.signal;
+  busy.value = true;
+  try {
+    const value = validateAiRecognitionPrompt(prompt.value);
+    if (enabled || (observation ?? props.step.aiObservation)?.mode === 'untilMatch') {
+      const validation = await validateAiBranchQuestion(value, signal);
+      if (!validation.result) throw new Error(`${enabled ? '无法进入分支' : '命中条件无效'}：${validation.reason || '请填写可用 true/false 判断的问题'}`);
+    }
+    if (signal.aborted) return;
+    emit('update', { value, aiBranchEnabled: enabled, ...(observation ? { aiObservation: observation } : {}), flow: { ...props.step.flow, nodeKind: enabled ? 'condition' : 'action' } });
+  } catch (cause) {
+    if (!signal.aborted) error.value = `${cause instanceof Error ? cause.message : '问题验证失败'}（未保存本次修改）`;
+  } finally { busy.value = false; }
+}
+</script>
+
+<template>
+  <el-form-item label="识别方式">
+    <template #label>
+      <span class="recognition-label">识别方式
+        <el-tooltip placement="top" :show-after="200">
+          <template #content><div class="recognition-help-content">单帧识别：截取当前画面并分析。持续观察：按采样间隔连续截图，判断目标是否在观察期间出现过。建议紧接启动 App 或触发广告的操作放置本节点。</div></template>
+          <el-button class="recognition-help" text :icon="QuestionFilled" aria-label="识别方式说明" @click.prevent />
+        </el-tooltip>
+      </span>
+    </template>
+    <el-radio-group :model-value="Boolean(step.aiObservation)" :disabled="disabled || busy" @update:model-value="emit('update', { aiObservation: $event ? { ...DEFAULT_AI_OBSERVATION } : undefined }); error = ''">
+      <el-radio-button :value="false">单帧识别</el-radio-button>
+      <el-radio-button :value="true">持续观察</el-radio-button>
+    </el-radio-group>
+  </el-form-item>
+  <template v-if="step.aiObservation">
+    <el-form-item label="观察模式">
+      <template #label>
+        <span class="recognition-label">观察模式
+          <el-tooltip placement="top" :show-after="200">
+            <template #content>
+              <div class="recognition-help-content">
+                <p>观察结束后统一分析：完成采样后，将保留的截图一次提交给模型。</p>
+                <p>检测命中后提前结束：采样期间逐次识别，确认命中后停止观察并执行下一节点；启用分支时走“是”分支。达到最长观察时间后停止采样，等待剩余关键帧判断，未命中则继续下一节点或走“否”分支。</p>
+                <p>最多采样 30 帧，实际速度取决于设备，截图按去重配置保留。观察时长与模型请求超时分别计时；提前结束模式可能多次调用模型，实际结束时间包含模型等待，识别错误不会视为未命中。</p>
+              </div>
+            </template>
+            <el-button class="recognition-help" text :icon="QuestionFilled" aria-label="观察模式说明" @click.prevent />
+          </el-tooltip>
+        </span>
+      </template>
+      <el-radio-group :model-value="step.aiObservation.mode ?? 'batch'" :disabled="disabled || busy" @update:model-value="$event === 'untilMatch' ? save(branch, { ...step.aiObservation!, mode: 'untilMatch' }) : updateObservation({ mode: 'batch' })">
+        <el-radio-button value="batch">观察结束后统一分析</el-radio-button>
+        <el-radio-button value="untilMatch">检测命中后提前结束</el-radio-button>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item :label="untilMatch ? '最长观察时间 ms' : '观察时长 ms'">
+      <el-input-number :model-value="step.aiObservation.durationMs" :min="1000" :max="60000" :step="1000" :disabled="disabled || busy" controls-position="right" @change="updateObservation({ durationMs: $event })" />
+    </el-form-item>
+    <el-form-item label="采样间隔 ms">
+      <el-input-number :model-value="step.aiObservation.intervalMs" :min="500" :max="10000" :step="500" :disabled="disabled || busy" controls-position="right" @change="updateObservation({ intervalMs: $event })" />
+    </el-form-item>
+  </template>
+  <el-form-item :label="untilMatch ? '命中条件' : '识别内容'">
+    <template #label>
+      <span class="recognition-label">{{ untilMatch ? '命中条件' : '识别内容' }}
+        <el-tooltip v-if="untilMatch" placement="top" :show-after="200">
+          <template #content><div class="recognition-help-content">填写能用“是 / 否”判断的具体条件，例如“当前画面是否出现广告弹窗？”。模型判断为“是”即命中并提前结束观察；修改条件后需验证并保存。“广告内容是什么”等开放式问题请使用统一分析模式。</div></template>
+          <el-button class="recognition-help" text :icon="QuestionFilled" aria-label="命中条件说明" @click.prevent />
+        </el-tooltip>
+      </span>
+    </template>
+    <AiRecognitionPromptInput v-model="prompt" :presets="promptPresets" :placeholder="untilMatch ? '例如：当前画面是否出现广告弹窗？' : ''" :disabled="disabled || busy || optimizingPrompt" @change="error = ''; !branch && !untilMatch && save(false)" />
+    <div class="recognition-prompt-actions">
+      <el-button :loading="optimizingPrompt" :disabled="disabled || busy || !prompt.trim()" @click="optimizePrompt">优化提示词</el-button>
+      <el-button v-if="(branch || untilMatch) && prompt !== step.value" :disabled="disabled || busy || optimizingPrompt" @click="save(branch)">验证并保存问题</el-button>
+    </div>
+  </el-form-item>
+  <el-form-item>
+    <el-checkbox :model-value="branchChoice" :disabled="disabled || busy" @update:model-value="toggleBranch($event === true)">启用分支</el-checkbox>
+    <span v-if="busy" class="validation-status" role="status">
+      <el-icon class="is-loading" aria-hidden="true"><Loading /></el-icon>
+      正在验证…
+    </span>
+  </el-form-item>
+  <el-alert v-if="error" :title="error" type="warning" :closable="false" show-icon />
+</template>
+
+<style scoped>
+.recognition-label { display: inline-flex; align-items: center; gap: 4px; }
+.recognition-help { width: 28px; height: 28px; padding: 0; font-size: 16px; }
+.recognition-help-content { max-width: min(360px, calc(100vw - 40px)); line-height: 1.6; overflow-wrap: anywhere; }
+.recognition-help-content p { margin: 0 0 8px; }
+.recognition-help-content p:last-child { margin-bottom: 0; }
+.recognition-prompt-actions { display: flex; justify-content: flex-end; width: 100%; margin-top: 10px; }
+.validation-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 8px;
+}
+</style>

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, shallowRef } from 'vue';
+import { Refresh } from '@element-plus/icons-vue';
+import { testAiRecognition } from '../api';
+import { AI_MODEL_CONFIG_HINT, validateAiRecognitionPrompt, isAiBranchEnabled } from '../ai-recognition';
+import type { AppiumRecordedStep } from '../types';
+
+const props = defineProps<{ step: AppiumRecordedStep; deviceId: string; modelConfigured: boolean }>();
+defineEmits<{ close: [] }>();
+const loading = shallowRef(false);
+const error = shallowRef('');
+const result = shallowRef<Awaited<ReturnType<typeof testAiRecognition>> | null>(null);
+let controller: AbortController | undefined;
+
+async function runTest() {
+  if (loading.value) return;
+  error.value = '';
+  result.value = null;
+  controller = new AbortController();
+  loading.value = true;
+  try {
+    if (!props.modelConfigured) throw new Error(AI_MODEL_CONFIG_HINT);
+    if (!props.deviceId) throw new Error('请选择设备');
+    const prompt = validateAiRecognitionPrompt(props.step.value);
+    result.value = await testAiRecognition({ deviceId: props.deviceId, prompt, timeoutMs: props.step.timeoutMs, aiTimeoutEnabled: props.step.aiTimeoutEnabled === true, aiBranchEnabled: isAiBranchEnabled(props.step), aiObservation: props.step.aiObservation }, controller.signal);
+  } catch (cause) {
+    if (!controller.signal.aborted) error.value = cause instanceof Error ? cause.message : 'AI 识别测试失败';
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(runTest);
+onBeforeUnmount(() => controller?.abort());
+</script>
+
+<template>
+  <el-dialog :model-value="true" title="测试 AI 识别" width="min(560px, calc(100vw - 32px))" append-to-body @close="$emit('close')">
+    <div class="ai-recognition-test" aria-live="polite">
+      <p class="ai-recognition-test__prompt">{{ step.value }}</p>
+      <el-alert v-if="error" type="error" :title="error" :closable="false" show-icon />
+      <p v-if="loading">{{ step.aiObservation?.mode === 'untilMatch' ? `边观察边检测中…（最长采样 ${step.aiObservation.durationMs / 1000} 秒，命中即结束，未命中需等待剩余识别）` : step.aiObservation ? `持续观察并分析中…（观察 ${step.aiObservation.durationMs / 1000} 秒，之后等待模型返回）` : '识别中…' }}</p>
+      <template v-if="result">
+        <div class="ai-recognition-test__result">
+          <strong>{{ result.result === null ? '识别完成' : String(result.result) }}</strong>
+          <span>{{ result.durationMs }}ms</span>
+        </div>
+        <p>{{ result.reason }}</p>
+        <template v-if="result.observation">
+          <p v-if="result.observation.completion">{{ result.observation.completion === 'matched' ? '检测命中，已结束观察' : '观察结束，未命中条件' }} · 模型请求 {{ result.observation.modelRequestCount }} 次</p>
+          <p>实际观察 {{ (result.observation.durationMs / 1000).toFixed(1) }} 秒，采集 {{ result.observation.sampleCount ?? result.observation.frames.length }} 帧，提交模型 {{ result.observation.frames.length }} 帧</p>
+          <p v-if="result.observation.deduplicationMethod">去重方式：{{ result.observation.deduplicationMethod === 'none' ? '不去重' : result.observation.deduplicationMethod === 'opencv' ? 'OpenCV（SSIM）' : 'pixelmatch' }}；下方为实际提交画面。</p>
+          <div class="ai-observation-frames">
+            <figure v-for="(frame, index) in result.observation.frames" :key="index">
+              <el-image :src="frame.imageDataUrl" :preview-src-list="result.observation.frames.map(item => item.imageDataUrl)" :initial-index="index" preview-teleported fit="contain" :alt="`观察第 ${index + 1} 帧`" />
+              <figcaption>第 {{ index + 1 }} 帧 · {{ (frame.elapsedMs / 1000).toFixed(1) }}s</figcaption>
+            </figure>
+          </div>
+        </template>
+        <el-image
+          v-else-if="result.imageBase64"
+          class="ai-recognition-test__image" fit="contain"
+          :src="`data:image/png;base64,${result.imageBase64}`"
+          :preview-src-list="[`data:image/png;base64,${result.imageBase64}`]"
+          preview-teleported alt="AI 识别使用的设备截图"
+        />
+      </template>
+    </div>
+    <template #footer>
+      <el-button @click="$emit('close')">关闭</el-button>
+      <el-button type="primary" :icon="Refresh" :loading="loading" :disabled="!modelConfigured || !deviceId" @click="runTest">重新测试</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.ai-observation-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 360px; overflow-y: auto; }
+.ai-observation-frames figure { margin: 0; }
+.ai-observation-frames .el-image { width: 100%; height: 140px; }
+.ai-observation-frames figcaption { font-size: 12px; text-align: center; }
+.ai-recognition-test { overflow-wrap: anywhere; }
+.ai-recognition-test__prompt { white-space: pre-wrap; margin-top: 0; }
+.ai-recognition-test__result { display: flex; align-items: center; gap: 16px; }
+.ai-recognition-test__result strong { font-size: 20px; }
+.ai-recognition-test__image { display: block; width: 100%; height: 280px; }
+</style>

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

@@ -3,14 +3,30 @@ import { computed } from 'vue';
 import type { AppiumRecordedStep } from '../types';
 import { enclosingLoops } from '../bounded-loop';
 
-const props = defineProps<{ step: AppiumRecordedStep; steps: AppiumRecordedStep[]; disabled?: boolean }>();
+const props = defineProps<{
+  step: AppiumRecordedStep;
+  steps: AppiumRecordedStep[];
+  disabled?: boolean;
+  mode?: 'break' | 'continue';
+}>();
 const emit = defineEmits<{ update: [patch: Partial<AppiumRecordedStep>] }>();
 const loops = computed(() => enclosingLoops(props.steps, props.step));
+const isContinue = computed(() => props.mode === 'continue');
+const fieldLabel = computed(() => isContinue.value ? '继续目标循环' : '退出目标循环');
+const targetId = computed(() => (
+  isContinue.value ? props.step.continueLoopTargetId : props.step.breakLoopTargetId
+) || loops.value[0]?.id);
+
+function updateTarget(value: string) {
+  emit('update', isContinue.value
+    ? { continueLoopTargetId: value }
+    : { breakLoopTargetId: value });
+}
 </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-form-item :label="fieldLabel">
+    <el-select class="break-loop-target" popper-class="break-loop-target-popper" :model-value="targetId" :disabled="disabled" :aria-label="fieldLabel" @update:model-value="updateTarget">
       <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>

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

@@ -69,9 +69,9 @@ watch(
 </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; }
+.appium-tree-container { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
+.appium-tree { flex: 1; height: auto; overflow: auto; }
+.appium-tree :deep(.el-tree) { width: max-content; min-width: 100%; }
+.appium-tree-node { flex: 1 0 auto; }
+.appium-tree-node__label { white-space: nowrap; }
 </style>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUnmount, watch } from 'vue';
+import { Aim } from '@element-plus/icons-vue';
+import { coordinatePreviewKey } from '../coordinate-preview';
+
+const props = defineProps<{ disabled?: boolean }>();
+const emit = defineEmits<{ select: [point: { x: number; y: number }] }>();
+const picker = inject(coordinatePreviewKey, undefined);
+const owner = Symbol('coordinate-editor');
+const picking = computed(() => picker?.owner.value === owner);
+function cancel() { picker?.cancel(owner); }
+watch(() => props.disabled, (disabled) => { if (disabled) cancel(); });
+onBeforeUnmount(cancel);
+</script>
+
+<template>
+  <el-form-item>
+    <el-button :icon="Aim" :disabled="disabled || !picker?.enabled.value" @click="picker?.start(owner, point => emit('select', point))">
+      {{ picking ? '请在左侧设备预览点击' : '获取点击坐标' }}
+    </el-button>
+    <el-button v-if="picking" text @click="cancel">取消取点</el-button>
+  </el-form-item>
+</template>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { nextTick, shallowRef } from 'vue';
 import type { MenuInstance, PopoverInstance } from 'element-plus';
-import { PASTE_COMMAND, type FlowActionGroup, type InsertAction } from '../flow-graph';
+import { PASTE_COMMAND, type FlowActionGroup, type FlowActionSubgroup, type InsertAction } from '../flow-graph';
 import { actionDescriptions } from '../action-descriptions';
 
 const props = defineProps<{
@@ -21,6 +21,10 @@ const menuRef = shallowRef<HTMLElement>();
 const menuControlRef = shallowRef<MenuInstance>();
 const menuMounted = shallowRef(false);
 
+function isSubgroup(item: FlowActionGroup['actions'][number]): item is FlowActionSubgroup {
+  return 'actions' in item;
+}
+
 async function openMenu() {
   // 每次打开重新创建面板，避免上次选中的操作被当成当前值而无法重复添加。
   menuMounted.value = true;
@@ -55,7 +59,7 @@ async function handleMenuKeydown(event: KeyboardEvent) {
   } else if (group) {
     menuControlRef.value?.open(group);
     await nextTick();
-    target.querySelector<HTMLElement>('.el-menu-item:not(.is-disabled)')?.focus();
+    target.querySelector<HTMLElement>('[role="menuitem"]:not(.is-disabled)')?.focus();
   } else if (event.key !== 'ArrowRight') {
     target.click();
   }
@@ -119,25 +123,51 @@ function selectAction(value: string) {
             @click="openGroupOnClick($event, group.title)"
           >
             <template #title>{{ group.title }}</template>
-            <el-tooltip
-              v-for="action in group.actions"
-              :key="action.type"
-              :content="actionDescriptions[action.type]"
-              placement="right"
-              effect="dark"
-              :show-after="350"
-              :hide-after="0"
-              :enterable="false"
-              :popper-options="{ modifiers: [{ name: 'preventOverflow', options: { altAxis: true, padding: 8 } }] }"
-              popper-class="appium-action-description"
-            >
-              <el-menu-item
-                :index="action.type"
-                :disabled="isActionDisabled(action.type)"
+            <template v-for="item in group.actions" :key="isSubgroup(item) ? item.label : item.type">
+              <el-sub-menu
+                v-if="isSubgroup(item)"
+                :index="`${group.title}/${item.label}`"
+                :data-group="`${group.title}/${item.label}`"
+                :aria-label="item.label"
+                tabindex="-1"
+                :teleported="true"
+                popper-class="appium-action-submenu appium-action-submenu--third"
+                @click.stop="openGroupOnClick($event, `${group.title}/${item.label}`)"
+              >
+                <template #title>{{ item.label }}</template>
+                <el-tooltip
+                  v-for="action in item.actions"
+                  :key="action.type"
+                  :content="actionDescriptions[action.type]"
+                  placement="right"
+                  effect="dark"
+                  :show-after="350"
+                  :hide-after="0"
+                  :enterable="false"
+                  :popper-options="{ modifiers: [{ name: 'preventOverflow', options: { altAxis: true, padding: 8 } }] }"
+                  popper-class="appium-action-description"
+                >
+                  <el-menu-item :index="action.type" :disabled="isActionDisabled(action.type)">
+                    {{ action.label }}
+                  </el-menu-item>
+                </el-tooltip>
+              </el-sub-menu>
+              <el-tooltip
+                v-else
+                :content="actionDescriptions[item.type]"
+                placement="right"
+                effect="dark"
+                :show-after="350"
+                :hide-after="0"
+                :enterable="false"
+                :popper-options="{ modifiers: [{ name: 'preventOverflow', options: { altAxis: true, padding: 8 } }] }"
+                popper-class="appium-action-description"
               >
-                {{ action.label }}
-              </el-menu-item>
-            </el-tooltip>
+                <el-menu-item :index="item.type" :disabled="isActionDisabled(item.type)">
+                  {{ item.label }}
+                </el-menu-item>
+              </el-tooltip>
+            </template>
           </el-sub-menu>
           <el-menu-item v-if="clipboardCount" :index="PASTE_COMMAND" class="appium-action-paste">
             粘贴 {{ clipboardCount }} 个节点

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, nextTick, onBeforeUnmount, shallowRef, watch } from 'vue';
-import { DEFAULT_FLOW_BACKGROUND, flowBackgroundKey } from '../flow-appearance';
+import { DEFAULT_FLOW_BACKGROUND, flowBackgroundKey, DEFAULT_FLOW_LINE_COLOR, flowLineColorKey } from '../flow-appearance';
 import { useVueFlow, VueFlow } from '@vue-flow/core';
 import FlowNodeCard from './FlowNodeCard.vue';
 import FlowRoundedEdge from './FlowRoundedEdge.vue';
@@ -14,6 +14,7 @@ import {
 import type { AppiumRecordedStep } from '../types';
 
 const flowBackground = inject(flowBackgroundKey, computed(() => DEFAULT_FLOW_BACKGROUND));
+const flowLineColor = inject(flowLineColorKey, computed(() => DEFAULT_FLOW_LINE_COLOR));
 
 const props = defineProps<{
   aiRecognitionModelConfigured?: boolean;
@@ -195,7 +196,7 @@ function handleInsert(payload: {
 </script>
 
 <template>
-  <div class="appium-flow-canvas appium-flow-canvas--vue" :style="{ '--flow-background': flowBackground }">
+  <div class="appium-flow-canvas appium-flow-canvas--vue" :style="{ '--flow-background': flowBackground, '--appium-flow-line-color': flowLineColor }">
     <VueFlow
       :id="id"
       class="appium-vue-flow"

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

@@ -175,8 +175,8 @@ watch(() => props.data, () => {
         @click="handleStepClick"
       >
         <span class="appium-flow-step-card__content">
-          <el-tooltip v-if="data.missingAiModel" content="AI 识别操作已移除，请删除此节点并改用图像判断或原生组件判断" placement="top">
-            <el-icon class="appium-ai-model-warning" color="var(--el-color-danger)" role="img" aria-label="AI 识别操作已移除" tabindex="0">
+          <el-tooltip v-if="data.missingAiModel" content="请在参数配置 > Appium配置中配置 AI 识别模型" placement="top">
+            <el-icon class="appium-ai-model-warning" color="var(--el-color-danger)" role="img" aria-label="AI 识别模型未配置" tabindex="0">
               <WarningFilled />
             </el-icon>
           </el-tooltip>