android-midscene-automation 0.1.41 → 0.1.42

package/src/api.ts

@@ -1,4 +1,5 @@
 import type { ScriptStep } from './script-generator';
+import type { MidsceneModelProvider } from './config/midscene-model-presets';
 import type {
   AndroidDevice,
   AppPreset,
@@ -109,16 +110,21 @@ export async function getConfig() {
   return readJson<ConfigForm>(response);
 }
 
-// 保存模型配置；当前由参数配置页的各模块保存按钮调用。
-export function saveConfig(input: ConfigForm) {
+// 运行配置独立保存，不携带尚未测试的模型草稿。
+export function saveConfig(input: Pick<ConfigForm, 'runtime'>) {
   return postJson<{ success?: boolean } | ConfigForm>(`${APP_BASE}/api/config`, input);
 }
 
+export function saveAppiumConfig(appium: Omit<ConfigForm['appium'], 'model'>) {
+  return postJson<{ success: boolean }>(`${APP_BASE}/api/config/appium`, { appium });
+}
+
 // 测试指定模型配置是否可用，通常用于保存前验证 baseUrl/apiKey/model。
 export function testModel(input: {
+  save?: boolean;
   modelKey: 'midscene' | 'scriptOptimizer' | 'appium';
   model: {
-    provider?: 'custom' | 'codex';
+    provider?: MidsceneModelProvider;
     baseUrl: string;
     apiKey: string;
     name: string;
@@ -126,6 +132,7 @@ export function testModel(input: {
   };
 }) {
   return postJson<{
+    saved?: boolean;
     content?: string;
     durationMs?: number;
     usage?: {

package/src/appium-recorder/AppiumPage.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, h, onMounted, onUnmounted, provide, reactive, shallowRef, watch } from 'vue';
-import { flowBackgroundKey, normalizeFlowBackground } from './flow-appearance';
+import { flowBackgroundKey, normalizeFlowBackground, flowLineColorKey, normalizeFlowLineColor } from './flow-appearance';
 import { DEFAULT_NODE_TIMEOUT_MS } from './node-timeout';
+import { aiPromptPresetsKey, DEFAULT_AI_PROMPT_PRESETS, type AiPromptPreset } from './ai-prompt-presets';
+import AiRecognitionPromptInput from './components/AiRecognitionPromptInput.vue';
 import { ElForm, ElFormItem, ElInputNumber, ElMessage, ElMessageBox, ElOption, ElSelect } from 'element-plus';
 import { ArrowDown, Check, CircleClose, CopyDocument, Delete, Document, Download, Edit, Plus, Refresh, Upload, VideoPlay, View, Clock } from '@element-plus/icons-vue';
 import RunHistoryDialog from './RunHistoryDialog.vue';
@@ -42,6 +44,8 @@ import RecordedSteps from './components/RecordedSteps.vue';
 import NewScriptDialog from './components/NewScriptDialog.vue';
 import VisualChangeDialog from './components/VisualChangeDialog.vue';
 import ImageCheckDialog from './components/ImageCheckDialog.vue';
+import AiRecognitionTestDialog from './components/AiRecognitionTestDialog.vue';
+import { validateAiRecognitionPrompt } from './ai-recognition';
 import { createImageCheckConfig, validateImageCheck, type ImageCheckConfig } from './image-check';
 import {
   createFlowClipboard,
@@ -100,7 +104,9 @@ const recordReplayVideo = shallowRef(false);
 
 const props = defineProps<{
   aiRecognitionModelConfigured?: boolean;
+  aiPromptPresets?: AiPromptPreset[];
   flowBackgroundColor?: string;
+  flowLineColor?: string;
   active: boolean;
   appPresets: AppPreset[];
   deviceActions: readonly DeviceAction[];
@@ -126,6 +132,9 @@ const props = defineProps<{
 
 // provide/inject 随组件关系传递，放大弹窗 teleport 后也能使用同一颜色。
 provide(flowBackgroundKey, computed(() => normalizeFlowBackground(props.flowBackgroundColor)));
+provide(flowLineColorKey, computed(() => normalizeFlowLineColor(props.flowLineColor)));
+const availableAiPromptPresets = computed(() => props.aiPromptPresets ?? DEFAULT_AI_PROMPT_PRESETS);
+provide(aiPromptPresetsKey, availableAiPromptPresets);
 const selectedDeviceId = computed(() => props.playgroundDeviceId);
 const tree = shallowRef<AppiumNode | null>(null);
 const selectedNode = shallowRef<AppiumNode | null>(null);
@@ -136,6 +145,7 @@ const newScriptRevision = shallowRef(0);
 const storedWorkbenchTab = window.localStorage.getItem(WORKBENCH_TAB_STORAGE_KEY);
 const activeWorkbenchTab = shallowRef<'recording' | 'scripts' | 'variables'>(storedWorkbenchTab === 'scripts' ? 'scripts' : storedWorkbenchTab === 'variables' ? 'variables' : 'recording');
 const steps = shallowRef<AppiumRecordedStep[]>([]);
+const aiRecognitionTestStep = shallowRef<AppiumRecordedStep | null>(null);
 const flowClipboard = shallowRef<FlowClipboard | null>(null);
 const rawXml = shallowRef('');
 const currentActivity = shallowRef('');
@@ -886,6 +896,11 @@ async function refreshTree() {
 
 async function executeFlowStep(index: number) {
   const step = steps.value[index];
+  if (step?.type === 'aiRecognition') {
+    if (replaying.value || recordingBusy.value) { ElMessage.warning('设备正在执行操作，请稍后测试'); return; }
+    aiRecognitionTestStep.value = { ...step };
+    return;
+  }
   if (!step || (step.type !== 'launchApp' && step.type !== 'clearAppData')) return;
   if (launchingApp.value) return;
   if (!selectedDeviceId.value) {
@@ -1384,8 +1399,27 @@ async function addAction(
     return;
   }
   if (action === 'aiRecognition') {
-    ElMessage.warning('AI 识别操作已移除，请使用图像判断或原生组件判断');
-    return;
+    const draft = reactive({ value: '', error: '' });
+    const result = await ElMessageBox({
+      title: '添加 AI 识别',
+      message: () => h(ElForm, { labelPosition: 'top', style: { width: 'min(380px, calc(100vw - 64px))' } },
+        () => h(ElFormItem, { label: '识别内容', error: draft.error },
+          () => h(AiRecognitionPromptInput, {
+            modelValue: draft.value, presets: availableAiPromptPresets.value,
+            placeholder: '例如：检查当前画面有没有显示黑屏',
+            'onUpdate:modelValue': (value: string) => { draft.value = value; draft.error = ''; },
+          }))),
+      showCancelButton: true, confirmButtonText: '添加', cancelButtonText: '取消',
+      beforeClose: (action, _instance, done) => {
+        if (action === 'confirm') {
+          try { draft.value = validateAiRecognitionPrompt(draft.value); }
+          catch (error) { draft.error = error instanceof Error ? error.message : '识别内容无效'; return; }
+        }
+        done();
+      },
+    }).catch(() => null);
+    if (!result) return;
+    return insertStep({ id: createStepId(), type: 'aiRecognition', label: 'AI 识别', value: draft.value, aiBranchEnabled: false, timeoutMs: DEFAULT_NODE_TIMEOUT_MS, flow: { nodeKind: 'action' } }, index, branchTarget);
   }
   if (action === 'textClick') {
     const step = reactive<AppiumRecordedStep>({
@@ -2277,9 +2311,6 @@ watch(
             </div>
           </el-tab-pane>
 
-          <el-tab-pane label="预设变量" name="variables" lazy>
-            <PresetVariables :key="`${selectedScriptId}:${newScriptRevision}`" v-model:variables="scriptVariables" :script-id="selectedScriptId" :script-name="form.name" :disabled="recordingBusy || saving" @saved="onVariablesSaved" />
-          </el-tab-pane>
           <el-tab-pane label="脚本列表" name="scripts">
             <div class="appium-script-list">
               <div class="appium-script-list__toolbar">
@@ -2357,6 +2388,9 @@ watch(
               </template>
             </div>
           </el-tab-pane>
+          <el-tab-pane label="预设变量" name="variables" lazy>
+            <PresetVariables :key="`${selectedScriptId}:${newScriptRevision}`" v-model:variables="scriptVariables" :script-id="selectedScriptId" :script-name="form.name" :disabled="recordingBusy || saving" @saved="onVariablesSaved" />
+          </el-tab-pane>
         </el-tabs>
       </el-card>
     </RecorderWorkspace>
@@ -2372,6 +2406,7 @@ watch(
     />
 
 
+    <AiRecognitionTestDialog v-if="aiRecognitionTestStep" :step="aiRecognitionTestStep" :device-id="selectedDeviceId" :model-configured="Boolean(aiRecognitionModelConfigured)" @close="aiRecognitionTestStep = null" />
     <ImageCheckDialog
       v-if="imageCheckDraft?.imageCheck"
       :timeout-branch="imageCheckDraft.timeoutBranch"

package/src/appium-recorder/RunHistoryDialog.vue

@@ -123,7 +123,7 @@ onMounted(load);
             <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>
+                <figcaption>{{ frame.label }} · {{ frame.phase === 'before' ? '执行前' : frame.phase === 'after' ? '执行后' : frame.phase === 'observation' ? '观察采样' : frame.phase }} · {{ time(frame.capturedAt) }}</figcaption>
                 <el-image :src="frame.imageUrl" :preview-src-list="[frame.imageUrl]" preview-teleported fit="contain" loading="lazy" />
               </figure>
             </div>

package/src/appium-recorder/action-descriptions.ts

@@ -26,7 +26,7 @@ export const actionDescriptions: Record<InsertAction, string> = {
   checkboxState: '读取原生 Checkbox 的 checked 状态，按 true/false 分支执行。',
   radioButtonState: '读取原生 RadioButton 的 checked 状态，按 true/false 分支执行。',
   checkedState: '读取 Checkbox、RadioButton 或 Switch 的真实勾选状态，按 true/false 分支执行。不支持仅用图片表示状态的普通 ImageView。',
-  aiRecognition: '此操作已移除，请使用图像判断或原生组件判断。',
+  aiRecognition: '将设备截图发送给视觉模型，支持单帧识别、观察结束后统一分析及检测命中后提前结束。默认顺序执行，启用分支后按判断结果选择分支。需要配置支持图片输入的模型；边观察边检测可能多次调用模型，实际响应受模型速度影响。',
   textClick: '在组件树中按指定文字精确或模糊匹配并点击，进入匹配到文字或未匹配到文字分支。不识别图片或自绘画面中的文字。',
   tapIfExists: '找到目标组件时点击，未找到则跳过并继续后续流程。',
   inputIfExists: '找到目标输入组件时写入文字，未找到则跳过。支持 {{变量名}} 引用。',

package/src/appium-recorder/ai-deduplication.ts

@@ -0,0 +1,34 @@
+export type AiDeduplicationConfig = {
+  method: 'none' | 'pixelmatch' | 'opencv';
+  pixelmatch: { threshold: number; maxChangedRatio: number };
+  opencv: { similarityThreshold: number; maxDimension: number };
+};
+
+export function resolveAiDeduplication(value?: unknown): AiDeduplicationConfig {
+  const object = (value: unknown): Record<string, unknown> => {
+    if (value === undefined) return {};
+    if (!value || typeof value !== 'object' || Array.isArray(value)) throw new Error('截图去重配置必须为对象');
+    return value as Record<string, unknown>;
+  };
+  const input = object(value), pixel = object(input.pixelmatch), cv = object(input.opencv);
+  const method = input.method ?? 'pixelmatch';
+  if (method !== 'none' && method !== 'pixelmatch' && method !== 'opencv') throw new Error('截图去重方式必须为 none、pixelmatch 或 opencv');
+  const number = (value: unknown, fallback: number, min: number, max: number, label: string, integer = false) => {
+    if (value === undefined) return fallback;
+    if (typeof value !== 'number' || !Number.isFinite(value) || value < min || value > max || (integer && !Number.isInteger(value))) {
+      throw new Error(`${label}需为 ${min}～${max} ${integer ? '的整数' : '的数值'}`);
+    }
+    return value;
+  };
+  return {
+    method,
+    pixelmatch: {
+      threshold: number(pixel.threshold, 0.1, 0, 1, '像素颜色容差'),
+      maxChangedRatio: number(pixel.maxChangedRatio, 0.5, 0, 100, '允许变化面积（%）'),
+    },
+    opencv: {
+      similarityThreshold: number(cv.similarityThreshold, 0.99, 0.5, 1, 'SSIM 相似度阈值'),
+      maxDimension: number(cv.maxDimension, 512, 128, 1024, '比较图像最长边', true),
+    },
+  };
+}

package/src/appium-recorder/ai-prompt-presets.ts

@@ -0,0 +1,34 @@
+import type { InjectionKey, Ref } from 'vue';
+import { validateAiRecognitionPrompt } from './ai-recognition';
+
+export type AiPromptPreset = { name: string; prompt: string };
+export const DEFAULT_AI_PROMPT_PRESETS: readonly AiPromptPreset[] = [
+  { name: '出图检测', prompt: '检测当前画面有没有出图？请排除黑屏、白屏和加载占位画面。' },
+  { name: '广告及跳过关闭按钮检测', prompt: '检查当前画面有没有广告出现，并说明有没有跳过、关闭按钮。升级弹窗、通知弹窗不属于广告。' },
+  { name: '广告内容提取', prompt: '识别当前广告的主要内容，并提取广告标题、产品名称和按钮文字。升级弹窗、通知弹窗不属于广告。' },
+  { name: '异常提示检测', prompt: '当前画面是否出现网络异常、加载失败或错误提示？' },
+];
+
+export const aiPromptPresetsKey: InjectionKey<Readonly<Ref<readonly AiPromptPreset[]>>> = Symbol('aiPromptPresets');
+
+export function resolveAiPromptPresets(value?: unknown): AiPromptPreset[] {
+  // 缺少字段时使用默认场景；空数组保留用户删除结果；兼容旧版纯文本预设。
+  if (value === undefined) return DEFAULT_AI_PROMPT_PRESETS.map(preset => ({ ...preset }));
+  if (!Array.isArray(value)) throw new Error('AI 识别预设提示词必须是列表');
+  const names = new Set<string>();
+  const prompts = new Set<string>();
+  return value.map((item, index) => {
+    const legacy = typeof item === 'string';
+    const prompt = validateAiRecognitionPrompt(legacy ? item : item?.prompt);
+    const name = legacy
+      ? DEFAULT_AI_PROMPT_PRESETS.find(preset => preset.prompt === prompt)?.name ?? `自定义场景 ${index + 1}`
+      : typeof item?.name === 'string' ? item.name.trim() : '';
+    if (!name) throw new Error('请输入测试场景名称');
+    if (name.length > 80) throw new Error('测试场景名称不能超过 80 字');
+    if (names.has(name)) throw new Error('测试场景名称已存在');
+    if (prompts.has(prompt)) throw new Error('该提示词已存在');
+    names.add(name);
+    prompts.add(prompt);
+    return { name, prompt };
+  });
+}

package/src/appium-recorder/ai-recognition.ts

@@ -1,7 +1,32 @@
+import type { AiDeduplicationConfig } from './ai-deduplication';
+
 export type AiRecognitionModel = { baseUrl: string; apiKey: string; name: string };
-export type AiRecognitionResult = { result: boolean; reason: string; durationMs: number };
+export type AiObservationConfig = { durationMs: number; intervalMs: number; mode?: 'batch' | 'untilMatch' };
+export type AiObservationFrame = { elapsedMs: number; imageDataUrl: string };
+export type AiRecognitionResult = {
+  result: boolean | null; reason: string; durationMs: number;
+  observation?: { durationMs: number; frames: AiObservationFrame[]; sampleCount?: number; deduplicationMethod?: AiDeduplicationConfig['method']; completion?: 'matched' | 'elapsed'; modelRequestCount?: number };
+};
+export const DEFAULT_AI_OBSERVATION: AiObservationConfig = { durationMs: 15000, intervalMs: 1000 };
+export const MAX_AI_OBSERVATION_FRAMES = 30;
+
+export function validateAiObservation(value: unknown): AiObservationConfig | undefined {
+  if (value === undefined || value === null) return undefined;
+  if (typeof value !== 'object' || Array.isArray(value)) throw new Error('持续观察配置无效');
+  const { durationMs, intervalMs, mode } = value as AiObservationConfig;
+  if (mode !== undefined && mode !== 'batch' && mode !== 'untilMatch') throw new Error('持续观察模式无效');
+  if (!Number.isInteger(durationMs) || durationMs < 1000 || durationMs > 60000) throw new Error('观察时长需为 1000～60000 ms');
+  if (!Number.isInteger(intervalMs) || intervalMs < 500 || intervalMs > 10000) throw new Error('采样间隔需为 500～10000 ms');
+  if (Math.ceil(durationMs / intervalMs) + 1 > MAX_AI_OBSERVATION_FRAMES) throw new Error('单次观察最多采集 30 帧，请增大采样间隔或缩短观察时长');
+  return { durationMs, intervalMs, ...(mode ? { mode } : {}) };
+}
+
+// 未保存此字段的是旧版判断节点，保留已有分支；新节点显式保存 false。
+export function isAiBranchEnabled(step: { aiBranchEnabled?: boolean }) {
+  return step.aiBranchEnabled !== false;
+}
 
-export const AI_MODEL_CONFIG_HINT = '请在参数配置 > Appium配置中填写并保存 AI 识别模型的 Base URL、API Key 和 Model Name';
+export const AI_MODEL_CONFIG_HINT = '请在参数配置 > Appium配置中填写 AI 识别模型的 Base URL、API Key 和 Model Name，配置会自动保存';
 
 export function isAiRecognitionModelConfigured(model?: Partial<AiRecognitionModel> | null) {
   return Boolean(model && [model.baseUrl, model.apiKey, model.name].every(

package/src/appium-recorder/api.ts

@@ -1,8 +1,22 @@
 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 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 });
 }

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,143 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUnmount, ref, watch } from 'vue';
+import { Loading, QuestionFilled } from '@element-plus/icons-vue';
+import { isAiBranchEnabled, validateAiRecognitionPrompt, DEFAULT_AI_OBSERVATION, validateAiObservation, type AiObservationConfig } from '../ai-recognition';
+import { 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 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;
+watch(() => props.step.value, value => { prompt.value = value || ''; });
+onBeforeUnmount(() => controller?.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 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" @change="error = ''; !branch && !untilMatch && save(false)" />
+    <div v-if="(branch || untilMatch) && prompt !== step.value" class="recognition-prompt-actions">
+      <el-button :disabled="disabled || busy" @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/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>