android-midscene-automation 0.1.41 → 0.1.42

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

@@ -13,6 +13,7 @@ import LoopSettings from './LoopSettings.vue';
 import BreakLoopSettings from './BreakLoopSettings.vue';
 import VariableExtractionSettings from './VariableExtractionSettings.vue';
 import ScriptParameterSettings from './ScriptParameterSettings.vue';
+import AiRecognitionSettings from './AiRecognitionSettings.vue';
 
 type FlowKind = 'action' | 'condition' | 'assertion';
 type SwipeGesture = NonNullable<AppiumRecordedStep['swipe']>;
@@ -154,17 +155,21 @@ function patchSelector(patch: Partial<AppiumSelector>) {
         />
       </el-form-item>
       <div>
-        <el-form-item v-if="!['longPress', 'stopApp', 'log', 'openGallery', 'endFlow', 'loop', 'breakLoop'].includes(step.type)" label="超时时间 ms">
+        <el-form-item v-if="step.type === 'aiRecognition'">
+          <el-checkbox :model-value="step.aiTimeoutEnabled === true" :disabled="disabled" @update:model-value="patchStep({ aiTimeoutEnabled: $event === true })">启用超时</el-checkbox>
+        </el-form-item>
+        <el-form-item v-if="!['longPress', 'stopApp', 'log', 'openGallery', 'endFlow', 'loop', 'breakLoop'].includes(step.type) && (step.type !== 'aiRecognition' || step.aiTimeoutEnabled === true)" :label="step.type === 'aiRecognition' && step.aiObservation ? '模型请求超时 ms' : '超时时间 ms'">
           <el-input-number
             :model-value="step.timeoutMs ?? (step.type === 'delay' ? 1000 : DEFAULT_NODE_TIMEOUT_MS)"
             :disabled="disabled"
             :min="0"
             :max="999999"
+            :step="1000"
             controls-position="right"
             @update:model-value="patchTimeout($event)"
           />
         </el-form-item>
-        <BranchTimeoutSettings v-if="defaultKind() === 'condition'" :step="step" :disabled="disabled" @update="patchStep({ timeoutBranch: $event })" />
+        <BranchTimeoutSettings v-if="defaultKind() === 'condition' && (step.type !== 'aiRecognition' || step.aiTimeoutEnabled === true)" :step="step" :disabled="disabled" @update="patchStep({ timeoutBranch: $event })" />
       </div>
       <LongPressSettings v-if="step.type === 'longPress'" :step="step" :disabled="disabled" @update="patchStep" />
       <el-form-item v-if="['waitActivity', 'launchApp', 'stopApp', 'clearAppData'].includes(step.type)" :label="step.type === 'waitActivity' ? '目标 Activity' : '目标 APP 包名'">
@@ -197,6 +202,7 @@ function patchSelector(patch: Partial<AppiumSelector>) {
       <LoopSettings v-if="step.type === 'loop'" :step="step" :disabled="disabled" @update="patchStep" />
       <BreakLoopSettings v-if="step.type === 'breakLoop'" :step="step" :steps="steps" :disabled="disabled" @update="patchStep" />
       <TextClickSettings v-if="step.type === 'textClick'" :step="step" :disabled="disabled" @update="patchStep" />
+      <AiRecognitionSettings v-if="step.type === 'aiRecognition'" :step="step" :steps="steps" :disabled="disabled" @update="patchStep" />
       <el-form-item
         v-if="step.type === 'input' || step.type === 'inputIfExists' || step.type === 'assertText'"
         label="文本内容"

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

@@ -119,7 +119,6 @@ const actionGroups: Array<{ title: string; actions: Array<{ type: InsertAction;
     actions: [
       { type: 'delay', label: '添加延时' },
       { type: 'popupCondition', label: '判断存在' },
-      { type: 'imageCheck', label: '图像判断' },
       { type: 'tapIfExists', label: '存在则点击' },
       { type: 'inputIfExists', label: '存在则输入' },
       { type: 'clearIfExists', label: '存在则清空' },
@@ -131,6 +130,13 @@ const actionGroups: Array<{ title: string; actions: Array<{ type: InsertAction;
       { type: 'visualChangeEnd', label: '检测画面变化结束' },
     ],
   },
+  {
+    title: '视觉识别',
+    actions: [
+      { type: 'aiRecognition', label: 'AI 识别' },
+      { type: 'imageCheck', label: '图像判断' },
+    ],
+  },
   {
     title: '流程控制',
     actions: [

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

@@ -89,7 +89,6 @@ const insertActionGroups: FlowActionGroup[] = [
     actions: [
       { type: 'delay', label: '添加延时' },
       { type: 'popupCondition', label: '判断存在' },
-      { type: 'imageCheck', label: '图像判断' },
       { type: 'tapIfExists', label: '存在则点击' },
       { type: 'inputIfExists', label: '存在则输入' },
       { type: 'clearIfExists', label: '存在则清空' },
@@ -101,6 +100,13 @@ const insertActionGroups: FlowActionGroup[] = [
       { type: 'visualChangeEnd', label: '检测画面变化结束节点' },
     ],
   },
+  {
+    title: '视觉识别',
+    actions: [
+      { type: 'aiRecognition', label: 'AI 识别' },
+      { type: 'imageCheck', label: '图像判断' },
+    ],
+  },
   {
     title: '流程控制',
     actions: [

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

@@ -3,13 +3,24 @@ import type { InjectionKey, Ref } from 'vue';
 export const DEFAULT_FLOW_BACKGROUND = '#d4e8dd';
 export const FLOW_BACKGROUND_PRESETS = ['#d4e8dd', '#d5e6f5', '#e4dcf2', '#f2dedc', '#d5eae9', '#e8e4cc'];
 export const flowBackgroundKey: InjectionKey<Readonly<Ref<string>>> = Symbol('flowBackground');
+export const DEFAULT_FLOW_LINE_COLOR = '#719985';
+export const FLOW_LINE_COLOR_PRESETS = ['#719985', '#4b83c4', '#8b6bb1', '#c78a46', '#7b8794', '#374151'];
+export const flowLineColorKey: InjectionKey<Readonly<Ref<string>>> = Symbol('flowLineColor');
 
 export function isHexColor(value: unknown): value is string {
   return typeof value === 'string' && /^#(?:[\da-f]{3}|[\da-f]{6})$/i.test(value.trim());
 }
 
 export function normalizeFlowBackground(value: unknown) {
-  if (!isHexColor(value)) return DEFAULT_FLOW_BACKGROUND;
+  return normalizeFlowColor(value, DEFAULT_FLOW_BACKGROUND);
+}
+
+export function normalizeFlowLineColor(value: unknown) {
+  return normalizeFlowColor(value, DEFAULT_FLOW_LINE_COLOR);
+}
+
+function normalizeFlowColor(value: unknown, fallback: string) {
+  if (!isHexColor(value)) return fallback;
   const color = value.trim().toLowerCase();
   return color.length === 4 ? '#' + [...color.slice(1)].map((char) => char + char).join('') : color;
 }

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

@@ -460,8 +460,8 @@ export function buildFlowGraph(
           && item.step.type !== 'clearAppData'
           && item.step.visualChange?.role !== 'end',
         canEditInput: ['input', 'inputIfExists', 'imageCheck', 'runScript'].includes(item.step.type),
-        canExecute: item.step.type === 'launchApp' || item.step.type === 'clearAppData',
-        missingAiModel: item.step.type === 'aiRecognition',
+        canExecute: item.step.type === 'launchApp' || item.step.type === 'clearAppData' || item.step.type === 'aiRecognition',
+        missingAiModel: item.step.type === 'aiRecognition' && !options.aiRecognitionModelConfigured,
       },
     });
   };

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

@@ -5,12 +5,14 @@ import { longPressMode } from './long-press';
 import { isNativeStateCondition } from './native-control-state';
 import { DEFAULT_LOG_PREFIX } from './stage-log';
 import { imageCheckSummary } from './image-check';
+import { isAiBranchEnabled } from './ai-recognition';
 
-export function isBooleanCondition(step: Pick<AppiumRecordedStep, 'type'>) {
-  return isNativeStateCondition(step) || step.type === 'aiRecognition' || step.type === 'textClick' || step.type === 'imageCheck';
+export function isBooleanCondition(step: Pick<AppiumRecordedStep, 'type' | 'aiBranchEnabled'>) {
+  return isNativeStateCondition(step) || (step.type === 'aiRecognition' && isAiBranchEnabled(step)) || step.type === 'textClick' || step.type === 'imageCheck';
 }
 
 export function defaultFlowKind(step: AppiumRecordedStep): FlowKind {
+  if (step.type === 'aiRecognition') return isAiBranchEnabled(step) ? 'condition' : 'action';
   if (step.type === 'extractVariable') return 'action';
   if (step.type === 'loop') return 'condition';
   if (step.type === 'breakLoop') return 'action';
@@ -47,7 +49,7 @@ export function flowTypeLabel(step: AppiumRecordedStep) {
     checkboxState: 'Checkbox 状态',
     checkedState: '判断勾选',
     radioButtonState: 'RadioButton 状态',
-    aiRecognition: 'AI 识别（已移除）',
+    aiRecognition: 'AI 识别',
     imageCheck: '图像判断',
     textClick: '文字点击',
     assertText: '断言文本',
@@ -81,7 +83,7 @@ export function flowStepMeta(step: AppiumRecordedStep) {
   if (step.type === 'loop') return `最多 ${step.loop?.maxIterations ?? '?'} 次 · ${step.loop?.exitWhen === 'exists' ? '元素出现时退出' : step.loop?.exitWhen === 'notExists' ? '元素消失时退出' : '固定次数'}${step.loop?.exitWhen !== 'never' ? ` ${step.selector?.value || ''}` : ''}`;
   if (step.type === 'breakLoop') return step.breakLoopTargetId ? '退出指定循环，继续循环结束后的流程' : '退出当前循环，继续循环结束后的流程';
   if (step.type === 'log') return `${step.logPrefix ?? DEFAULT_LOG_PREFIX}:${step.value || ''}`;
-  if (step.type === 'aiRecognition') return '此操作已移除，请替换为图像判断或原生组件判断';
+  if (step.type === 'aiRecognition') return `AI ${step.aiObservation?.mode === 'untilMatch' ? '命中即结束' : step.aiObservation ? '持续观察' : '识别'} · ${step.value || '未填写识别内容'}`;
   if (step.type === 'longPress') {
     const target = longPressMode(step) === 'element'
       ? `元素 ${step.selector?.strategy || ''} ${step.selector?.value || ''}`

package/src/appium-recorder/types.ts

@@ -1,3 +1,4 @@
+import type { AiObservationConfig } from './ai-recognition';
 import type { TestVariable, VariableExtraction, ScriptReturn } from './variables';
 import type { ImageCheckConfig } from './image-check';
 
@@ -121,6 +122,9 @@ export type AppiumRecordedStep = {
   returns?: ScriptReturn[];
   keyCode?: number;
   timeoutMs?: number;
+  aiTimeoutEnabled?: boolean;
+  aiBranchEnabled?: boolean;
+  aiObservation?: AiObservationConfig;
   timeoutBranch?: 'stop' | 'yes' | 'no';
   longPressMode?: 'element' | 'coordinates';
   breakLoopTargetId?: string;

package/src/components/config/AiDeduplicationSettings.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { resolveAiDeduplication, type AiDeduplicationConfig } from '../../appium-recorder/ai-deduplication';
+
+const props = defineProps<{ modelValue?: AiDeduplicationConfig; disabled?: boolean }>();
+const emit = defineEmits<{ 'update:modelValue': [value: AiDeduplicationConfig] }>();
+const settings = computed(() => props.modelValue ?? resolveAiDeduplication());
+function patch(value: Partial<AiDeduplicationConfig>) {
+  emit('update:modelValue', { ...settings.value, ...value });
+}
+</script>
+
+<template>
+  <section class="ai-dedup-settings" aria-label="持续观察截图去重">
+    <h3 class="ai-dedup-title">持续观察截图去重</h3>
+    <el-form-item label="去重方式">
+      <el-radio-group :model-value="settings.method" :disabled="disabled" @update:model-value="patch({ method: $event as AiDeduplicationConfig['method'] })">
+        <el-radio-button value="none">不去重</el-radio-button>
+        <el-radio-button value="pixelmatch">pixelmatch（默认）</el-radio-button>
+        <el-radio-button value="opencv">OpenCV（SSIM）</el-radio-button>
+      </el-radio-group>
+    </el-form-item>
+    <template v-if="settings.method === 'pixelmatch'">
+      <el-form-item label="像素颜色容差">
+        <el-input-number :model-value="settings.pixelmatch.threshold" :disabled="disabled" :min="0" :max="1" :step="0.01" :precision="2" controls-position="right" @update:model-value="patch({ pixelmatch: { ...settings.pixelmatch, threshold: $event ?? 0.1 } })" />
+        <p class="ai-dedup-help">默认 0.10。越大越容易忽略颜色细微差异；设为 0 时逐像素严格比较。</p>
+      </el-form-item>
+      <el-form-item label="允许变化面积（%）">
+        <el-input-number :model-value="settings.pixelmatch.maxChangedRatio" :disabled="disabled" :min="0" :max="100" :step="0.1" :precision="2" controls-position="right" @update:model-value="patch({ pixelmatch: { ...settings.pixelmatch, maxChangedRatio: $event ?? 0.5 } })" />
+        <p class="ai-dedup-help">默认 0.50%。变化像素占比不超过此值时去重。越大保留越少，但可能忽略小弹窗或文字变化。</p>
+      </el-form-item>
+    </template>
+    <template v-else-if="settings.method === 'opencv'">
+      <el-form-item label="SSIM 相似度阈值">
+        <el-input-number :model-value="settings.opencv.similarityThreshold" :disabled="disabled" :min="0.5" :max="1" :step="0.005" :precision="3" controls-position="right" @update:model-value="patch({ opencv: { ...settings.opencv, similarityThreshold: $event ?? 0.99 } })" />
+        <p class="ai-dedup-help">默认 0.990。相似度达到此值时去重；越接近 1 越严格、保留越多，调低可减少提交图片。</p>
+      </el-form-item>
+      <el-form-item label="比较图像最长边（px）">
+        <el-input-number :model-value="settings.opencv.maxDimension" :disabled="disabled" :min="128" :max="1024" :step="128" :precision="0" controls-position="right" @update:model-value="patch({ opencv: { ...settings.opencv, maxDimension: $event ?? 512 } })" />
+        <p class="ai-dedup-help">默认 512。仅缩小本地比较图像；越大越能保留细节，也更耗本地计算资源，不改变提交模型的图片尺寸。</p>
+      </el-form-item>
+    </template>
+    <div class="ai-dedup-explanation">
+      <p><strong>不去重：</strong>全部采样截图交给模型，保留信息最多，图片输入消耗也最高。</p>
+      <p><strong>pixelmatch：</strong>比较原图的像素颜色和变化面积，适合同设备的静态画面，对细节变化敏感。</p>
+      <p><strong>OpenCV（SSIM）：</strong>缩小图片后比较彩色画面的局部亮度、对比度和结构，更侧重整体相似性；可能忽略小文字，不能识别语义，也不自动对齐位移。</p>
+      <p>仅对持续观察生效。首帧始终保留，后续与上一张保留的截图比较；两种去重均在本地完成，不调用模型。切换方式会保留各自参数，用于后续回放和识别测试。</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.ai-dedup-settings { height: 540px; box-sizing: border-box; overflow-y: auto; scrollbar-gutter: stable; padding-right: 4px; }
+.ai-dedup-title { margin: 0 0 20px; font-size: 15px; font-weight: 600; color: var(--el-text-color-primary); }
+.ai-dedup-help { width: 100%; margin: 6px 0 0; color: var(--el-text-color-secondary); font-size: 12px; line-height: 1.6; }
+.ai-dedup-explanation { color: var(--el-text-color-regular); font-size: 13px; line-height: 1.7; }
+.ai-dedup-explanation p { margin: 6px 0; }
+.ai-dedup-settings :deep(.el-radio-group) { gap: 4px 0; }
+</style>

package/src/components/config/AiPromptPresetsSettings.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Delete, Plus } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import { resolveAiPromptPresets, type AiPromptPreset } from '../../appium-recorder/ai-prompt-presets';
+import { validateAiRecognitionPrompt } from '../../appium-recorder/ai-recognition';
+
+const props = defineProps<{ modelValue?: AiPromptPreset[] }>();
+const emit = defineEmits<{ 'update:modelValue': [presets: AiPromptPreset[]] }>();
+const presets = computed(() => resolveAiPromptPresets(props.modelValue));
+const draft = ref('');
+const sceneName = ref('');
+
+function addPreset() {
+  try {
+    const prompt = validateAiRecognitionPrompt(draft.value);
+    const next = resolveAiPromptPresets([...presets.value, { name: sceneName.value, prompt }]);
+    emit('update:modelValue', next);
+    sceneName.value = '';
+    draft.value = '';
+  } catch (error) { ElMessage.warning(error instanceof Error ? error.message : '添加提示词失败'); }
+}
+</script>
+
+<template>
+  <section class="ai-prompt-settings" aria-labelledby="ai-prompt-presets-title">
+    <h3 id="ai-prompt-presets-title">预设提示词</h3>
+    <p class="ai-prompt-description">可在 AI 识别节点中选择并修改。删除预设不会修改已有节点的识别内容。</p>
+    <div class="ai-prompt-layout">
+      <el-form label-position="top" @submit.prevent="addPreset">
+        <el-form-item label="测试场景">
+          <el-input v-model="sceneName" maxlength="80" placeholder="例如：开屏广告检测" />
+        </el-form-item>
+        <el-form-item label="新增提示词">
+          <el-input v-model="draft" type="textarea" :rows="4" maxlength="4000" show-word-limit placeholder="输入常用的识别内容，例如：当前画面是否出现广告弹窗？" />
+        </el-form-item>
+        <div class="ai-prompt-actions"><el-button native-type="submit" :icon="Plus">添加提示词</el-button></div>
+      </el-form>
+      <div class="ai-prompt-list" aria-label="已添加的提示词">
+        <div v-for="(preset, index) in presets" :key="preset.name" class="ai-prompt-row">
+          <div class="ai-prompt-content"><strong>{{ preset.name }}</strong><p>{{ preset.prompt }}</p></div>
+          <el-button text :icon="Delete" :aria-label="`删除提示词 ${preset.name}`" @click="emit('update:modelValue', presets.filter((_, i) => i !== index))" />
+        </div>
+        <el-empty v-if="!presets.length" description="暂无预设提示词" :image-size="60" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.ai-prompt-settings { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ui-border); }
+.ai-prompt-settings h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
+.ai-prompt-description { margin: 0 0 20px; color: var(--el-text-color-secondary); font-size: 12px; }
+.ai-prompt-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
+.ai-prompt-actions { display: flex; justify-content: flex-end; }
+.ai-prompt-list { min-width: 0; max-height: 260px; overflow-y: auto; padding-left: 32px; border-left: 1px solid var(--ui-border); }
+.ai-prompt-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
+.ai-prompt-row + .ai-prompt-row { border-top: 1px solid var(--ui-border); }
+.ai-prompt-content { flex: 1; min-width: 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
+.ai-prompt-content p { margin: 4px 0 0; color: var(--el-text-color-secondary); }
+.ai-prompt-row .el-button { flex-shrink: 0; }
+@media (max-width: 1000px) {
+  .ai-prompt-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
+  .ai-prompt-list { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--ui-border); }
+}
+</style>

package/src/components/config/AppiumConfigPanel.vue

@@ -1,16 +1,61 @@
 <script setup lang="ts">
 import type { ConfigForm } from '../../types';
 import FlowAppearanceSettings from './FlowAppearanceSettings.vue';
+import AiDeduplicationSettings from './AiDeduplicationSettings.vue';
+import AiPromptPresetsSettings from './AiPromptPresetsSettings.vue';
 
 defineProps<{
   configForm: ConfigForm;
   testingModelKey: string;
-  isSavingModelConfig: boolean;
   testStatus?: string;
+  saveStatus?: string;
 }>();
-defineEmits<{ testModel: []; saveModelConfig: [] }>();
+defineEmits<{ testModel: [] }>();
 </script>
 
 <template>
-  <FlowAppearanceSettings v-model="configForm.appium.flowBackgroundColor" :saving="isSavingModelConfig" @save="$emit('saveModelConfig')" />
+  <el-card shadow="never" class="config-module-card config-appium-card" style="margin-bottom:20px">
+    <template #header><div class="panel-header"><span>AI 识别配置</span><span v-if="saveStatus" class="config-save-status" role="status">{{ saveStatus }}</span></div></template>
+    <div class="config-ai-layout">
+      <section aria-labelledby="appium-ai-model-title">
+        <h3 id="appium-ai-model-title" class="config-ai-title">模型连接</h3>
+        <el-form label-position="top" :disabled="!!testingModelKey">
+          <el-form-item label="Base URL"><el-input v-model="configForm.appium.model.baseUrl" /></el-form-item>
+          <el-form-item label="API Key"><el-input v-model="configForm.appium.model.apiKey" type="password" show-password /></el-form-item>
+          <el-form-item label="Model Name"><el-input v-model="configForm.appium.model.name" placeholder="支持图片输入的模型" /></el-form-item>
+          <el-form-item v-if="testStatus" label="测试结果"><el-input :model-value="testStatus" readonly /></el-form-item>
+          <el-button :loading="testingModelKey === 'appium'" @click="$emit('testModel')">测试并保存</el-button>
+        </el-form>
+      </section>
+      <el-form label-position="top" class="config-ai-dedup">
+        <AiDeduplicationSettings v-model="configForm.appium.aiDeduplication" />
+      </el-form>
+    </div>
+    <AiPromptPresetsSettings v-model="configForm.appium.aiPromptPresets" />
+  </el-card>
+  <el-card shadow="never" class="config-module-card config-appium-card">
+    <template #header>
+      <div class="panel-header">
+        <span>回放截图</span>
+      </div>
+    </template>
+    <el-form label-position="top">
+      <el-form-item label="截图与 HTML 报告">
+        <el-switch v-model="configForm.appium.screenshotReport" aria-label="截图与 HTML 报告" />
+      </el-form-item>
+    </el-form>
+    <el-alert title="默认关闭。开启后将在节点执行前后截图并生成 HTML 报告，截图会增加回放耗时，实际操作间隔可能超过设置的延时时间。" type="warning" :closable="false" show-icon />
+  </el-card>
+  <FlowAppearanceSettings v-model="configForm.appium.flowBackgroundColor" v-model:line-color="configForm.appium.flowLineColor" />
 </template>
+
+<style scoped>
+.config-save-status { font-size: 12px; font-weight: 400; color: var(--el-text-color-secondary); }
+.config-ai-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
+.config-ai-title { margin: 0 0 20px; font-size: 15px; font-weight: 600; color: var(--el-text-color-primary); }
+.config-ai-dedup { min-width: 0; padding-left: 32px; border-left: 1px solid var(--el-border-color-lighter); }
+@media (max-width: 1000px) {
+  .config-ai-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
+  .config-ai-dedup { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--el-border-color-lighter); }
+}
+</style>

package/src/components/config/BaseConfigPanel.vue

@@ -15,6 +15,7 @@ defineEmits<{
   saveAppPreset: [];
   editAppPreset: [app: AppPreset];
   deleteAppPreset: [id: string];
+  cancelAppPresetEdit: [];
 }>();
 </script>
 
@@ -55,21 +56,21 @@ defineEmits<{
             <span>预设 App 参数</span>
             <el-tag v-if="appPresetForm.id" size="small" type="warning">编辑中</el-tag>
           </div>
-          <div class="panel-header__actions">
-            <el-button type="primary" :loading="isSavingAppPreset" @click="$emit('saveAppPreset')">
-              {{ appPresetForm.id ? '保存修改' : '保存 App' }}
-            </el-button>
-          </div>
         </div>
       </template>
 
-      <el-form label-position="top">
+      <div class="app-preset-layout">
+      <el-form label-position="top" :disabled="isSavingAppPreset" @submit.prevent="$emit('saveAppPreset')">
         <el-form-item label="App 名称">
           <el-input v-model="appPresetForm.name" placeholder="例如：示例 App" />
         </el-form-item>
         <el-form-item label="App 包名">
           <el-input v-model="appPresetForm.packageName" placeholder="例如：com.example.app" />
         </el-form-item>
+        <div class="app-preset-actions">
+          <el-button v-if="appPresetForm.id" :disabled="isSavingAppPreset" @click="$emit('cancelAppPresetEdit')">取消编辑</el-button>
+          <el-button native-type="submit" :loading="isSavingAppPreset">{{ appPresetForm.id ? '保存修改' : '添加' }}</el-button>
+        </div>
       </el-form>
 
       <div class="app-preset-list">
@@ -79,12 +80,23 @@ defineEmits<{
             <span>{{ app.packageName }}</span>
           </div>
           <div class="script-row__actions">
-            <el-button text size="small" :icon="Edit" @click="$emit('editAppPreset', app)" />
-            <el-button text size="small" :icon="Delete" @click="$emit('deleteAppPreset', app.id)" />
+            <el-button text size="small" :icon="Edit" :disabled="isSavingAppPreset" :aria-label="`编辑 ${app.name}`" @click="$emit('editAppPreset', app)" />
+            <el-button text size="small" :icon="Delete" :disabled="isSavingAppPreset" :aria-label="`删除 ${app.name}`" @click="$emit('deleteAppPreset', app.id)" />
           </div>
         </div>
         <el-empty v-if="!appPresets.length" description="暂无预设 App" />
       </div>
+      </div>
     </el-card>
   </div>
 </template>
+
+<style scoped>
+.app-preset-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
+.app-preset-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
+.app-preset-layout .app-preset-list { margin-top: 0; padding-left: 24px; border-left: 1px solid var(--ui-border); }
+@media (max-width: 800px) {
+  .app-preset-layout { grid-template-columns: minmax(0, 1fr); }
+  .app-preset-layout .app-preset-list { padding: 24px 4px 0 0; border-left: 0; border-top: 1px solid var(--ui-border); }
+}
+</style>

package/src/components/config/FlowAppearanceSettings.vue

@@ -1,51 +1,71 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { RefreshLeft } from '@element-plus/icons-vue';
-import { DEFAULT_FLOW_BACKGROUND, FLOW_BACKGROUND_PRESETS, isHexColor, normalizeFlowBackground } from '../../appium-recorder/flow-appearance';
+import {
+  DEFAULT_FLOW_BACKGROUND, FLOW_BACKGROUND_PRESETS, normalizeFlowBackground,
+  DEFAULT_FLOW_LINE_COLOR, FLOW_LINE_COLOR_PRESETS, normalizeFlowLineColor, isHexColor,
+} from '../../appium-recorder/flow-appearance';
 
-const props = defineProps<{ modelValue?: string; saving: boolean }>();
-const emit = defineEmits<{ 'update:modelValue': [color: string]; save: [] }>();
-const color = computed(() => props.modelValue ?? DEFAULT_FLOW_BACKGROUND);
-const error = computed(() => isHexColor(color.value) ? '' : '请输入有效的十六进制颜色，如 #ABC 或 #AABBCC');
+const props = defineProps<{ modelValue?: string; lineColor?: string }>();
+const emit = defineEmits<{ 'update:modelValue': [color: string]; 'update:lineColor': [color: string] }>();
+const panels = computed(() => [
+  { key: 'background' as const, title: '流程背景色', color: props.modelValue ?? DEFAULT_FLOW_BACKGROUND,
+    fallback: DEFAULT_FLOW_BACKGROUND, presets: FLOW_BACKGROUND_PRESETS, normalize: normalizeFlowBackground,
+    inputLabel: '十六进制背景色', pickerLabel: '选择流程背景色', resetLabel: '恢复默认颜色', presetLabel: '选择颜色' },
+  { key: 'line' as const, title: '连接线条颜色', color: props.lineColor ?? DEFAULT_FLOW_LINE_COLOR,
+    fallback: DEFAULT_FLOW_LINE_COLOR, presets: FLOW_LINE_COLOR_PRESETS, normalize: normalizeFlowLineColor,
+    inputLabel: '十六进制线条颜色', pickerLabel: '选择连接线条颜色', resetLabel: '恢复默认线条颜色', presetLabel: '选择线条颜色' },
+].map(panel => ({ ...panel, error: isHexColor(panel.color) ? '' : '请输入有效的十六进制颜色，如 #ABC 或 #AABBCC' })));
+function update(key: 'background' | 'line', color: string) {
+  if (key === 'background') emit('update:modelValue', color);
+  else emit('update:lineColor', color);
+}
 </script>
 
 <template>
   <el-card shadow="never" class="config-module-card config-appium-card flow-appearance-settings">
-    <template #header>
-      <div class="panel-header">
-        <span>流程背景色</span>
-        <el-button type="primary" :loading="saving" :disabled="Boolean(error)" @click="emit('save')">保存背景色</el-button>
-      </div>
-    </template>
-    <el-form label-position="top">
-      <el-form-item label="预选颜色">
-        <div class="flow-color-presets">
-          <button v-for="preset in FLOW_BACKGROUND_PRESETS" :key="preset" type="button"
-            :style="{ backgroundColor: preset }" :aria-label="`选择颜色 ${preset}`" :title="preset"
-            :aria-pressed="normalizeFlowBackground(color) === preset && !error"
-            @click="emit('update:modelValue', preset)" />
-        </div>
-      </el-form-item>
-      <el-form-item label="自定义颜色" :error="error">
-        <div class="flow-color-input">
-          <el-color-picker :model-value="normalizeFlowBackground(color)" color-format="hex" :predefine="FLOW_BACKGROUND_PRESETS"
-            aria-label="选择流程背景色" @update:model-value="emit('update:modelValue', $event || DEFAULT_FLOW_BACKGROUND)" />
-          <el-input :model-value="color" aria-label="十六进制背景色" placeholder="#D4E8DD"
-            @update:model-value="emit('update:modelValue', String($event))" />
-          <el-button :icon="RefreshLeft" title="恢复默认颜色" aria-label="恢复默认颜色" @click="emit('update:modelValue', DEFAULT_FLOW_BACKGROUND)" />
-        </div>
-      </el-form-item>
-    </el-form>
+    <template #header><div class="panel-header"><span>流程外观</span></div></template>
+    <div class="flow-appearance-columns">
+      <section v-for="panel in panels" :key="panel.key" class="flow-appearance-section" :aria-label="panel.title">
+        <h3>{{ panel.title }}</h3>
+        <el-form label-position="top">
+          <el-form-item label="预选颜色">
+            <div class="flow-color-presets">
+              <button v-for="preset in panel.presets" :key="preset" type="button"
+                :style="{ backgroundColor: preset }" :aria-label="`${panel.presetLabel} ${preset}`" :title="preset"
+                :aria-pressed="panel.normalize(panel.color) === preset && !panel.error"
+                @click="update(panel.key, preset)" />
+            </div>
+          </el-form-item>
+          <el-form-item label="自定义颜色" :error="panel.error">
+            <div class="flow-color-input">
+              <el-color-picker :model-value="panel.normalize(panel.color)" color-format="hex" :predefine="panel.presets"
+                :aria-label="panel.pickerLabel" @update:model-value="update(panel.key, $event || panel.fallback)" />
+              <el-input :model-value="panel.color" :aria-label="panel.inputLabel" :placeholder="panel.fallback"
+                @update:model-value="update(panel.key, String($event))" />
+              <el-button :icon="RefreshLeft" :title="panel.resetLabel" :aria-label="panel.resetLabel" @click="update(panel.key, panel.fallback)" />
+            </div>
+          </el-form-item>
+        </el-form>
+      </section>
+    </div>
   </el-card>
 </template>
 
 <style scoped>
 .flow-appearance-settings { margin-top: 20px; }
-.flow-appearance-settings .el-form { max-width: 640px; }
+.flow-appearance-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
+.flow-appearance-section { min-width: 0; }
+.flow-appearance-section + .flow-appearance-section { padding-left: 32px; border-left: 1px solid var(--ui-border); }
+.flow-appearance-section h3 { margin: 0 0 20px; font-size: 15px; font-weight: 600; color: var(--el-text-color-primary); }
 .flow-color-presets, .flow-color-input { display: flex; align-items: center; gap: 10px; }
 .flow-color-presets { flex-wrap: wrap; }
 .flow-color-presets button { width: 32px; height: 32px; border: 1px solid var(--el-border-color-darker); border-radius: 4px; cursor: pointer; }
 .flow-color-presets button[aria-pressed="true"] { outline: 2px solid var(--el-color-primary); outline-offset: 2px; }
 .flow-color-input { width: 100%; }
 .flow-color-input .el-input { flex: 1; min-width: 0; }
+@media (max-width: 800px) {
+  .flow-appearance-columns { grid-template-columns: minmax(0, 1fr); gap: 24px; }
+  .flow-appearance-section + .flow-appearance-section { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--ui-border); }
+}
 </style>