android-midscene-automation 0.1.28 → 0.1.30

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import type { AppiumRecordedStep } from '../types';
+import { branchSteps, mergeBranches } from '../flow-merge';
+import { flowBranchLabel } from '../flow-labels';
+
+const props = defineProps<{ steps: AppiumRecordedStep[]; conditionId: string; disabled?: boolean }>();
+const emit = defineEmits<{ close: []; confirm: [steps: AppiumRecordedStep[]] }>();
+const commonId = ref('');
+const duplicateId = ref('');
+const confirmed = ref(false);
+const retainedSide = ref<'yes' | 'no'>('yes');
+const condition = computed(() => props.steps.find((step) => step.id === props.conditionId));
+const candidates = computed(() => branchSteps(props.steps, props.conditionId, retainedSide.value));
+const duplicates = computed(() => branchSteps(props.steps, props.conditionId, retainedSide.value === 'yes' ? 'no' : 'yes'));
+const preview = computed(() => {
+  if (!commonId.value) return undefined;
+  try { return mergeBranches(props.steps, props.conditionId, commonId.value, duplicateId.value); }
+  catch (error) { return error instanceof Error ? error.message : String(error); }
+});
+watch(() => props.conditionId, () => {
+  retainedSide.value = branchSteps(props.steps, props.conditionId, 'yes').length ? 'yes' : 'no';
+  commonId.value = ''; duplicateId.value = ''; confirmed.value = false;
+});
+// 切换方向时清空此前的选择和删除确认，避免误删新方向下的节点。
+watch(retainedSide, () => { commonId.value = ''; duplicateId.value = ''; confirmed.value = false; });
+watch(commonId, () => { duplicateId.value = ''; confirmed.value = false; });
+watch(duplicateId, () => { confirmed.value = false; });
+function submit() {
+  if (props.disabled || !preview.value || typeof preview.value === 'string') return;
+  if (preview.value.removedCount && !confirmed.value) return;
+  try {
+    emit('confirm', mergeBranches(props.steps, props.conditionId, commonId.value, duplicateId.value).steps);
+    emit('close');
+  } catch (error) { ElMessage.error(String(error)); }
+}
+</script>
+
+<template>
+  <el-dialog :model-value="Boolean(conditionId)" title="合并分支" width="min(520px, 94vw)" append-to-body :close-on-click-modal="false" @close="emit('close')">
+    <el-form label-position="top">
+      <el-form-item label="合并方向">
+        <el-radio-group v-model="retainedSide" aria-label="合并方向">
+          <el-radio-button value="yes">保留左侧流程</el-radio-button>
+          <el-radio-button value="no">保留右侧流程</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="保留的公共流程起点">
+        <el-select v-model="commonId" aria-label="保留的公共流程起点" style="width: 100%">
+          <el-option v-for="step in candidates" :key="step.id" :value="step.id"
+            :label="`${condition ? flowBranchLabel(condition, step.flow!.parentBranch!) : ''} · ${step.label}`" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="retainedSide === 'yes' ? '右侧重复部分起点' : '左侧重复部分起点'">
+        <el-select v-model="duplicateId" :disabled="!commonId" aria-label="另一侧重复部分起点" style="width: 100%">
+          <el-option value="" label="不删除，保留另一侧全部操作后接入" />
+          <el-option v-for="step in duplicates" :key="step.id" :value="step.id" :label="step.label" />
+        </el-select>
+      </el-form-item>
+      <el-alert v-if="typeof preview === 'string'" :title="preview" type="error" :closable="false" />
+      <el-checkbox v-else-if="preview?.removedCount" v-model="confirmed">确认删除另一侧从所选起点开始的 {{ preview.removedCount }} 个节点</el-checkbox>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('close')">取消</el-button>
+      <el-button type="primary" :disabled="disabled || !preview || typeof preview === 'string' || Boolean(preview.removedCount && !confirmed)" @click="submit">合并分支</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+:deep(.el-checkbox) { height: auto; white-space: normal; }
+:deep(.el-checkbox__label) { white-space: normal; overflow-wrap: anywhere; }
+</style>

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

@@ -23,9 +23,12 @@ type InsertAction =
   | 'swipe'
   | 'pinch'
   | 'launchApp'
+  | 'openGallery'
+  | 'endFlow'
   | 'clearAppData'
   | 'popupCondition'
   | 'checkboxState'
+  | 'checkedState'
   | 'radioButtonState'
   | 'aiRecognition'
   | 'textClick'
@@ -87,9 +90,8 @@ const actionGroups: Array<{ title: string; actions: Array<{ type: InsertAction;
       { type: 'clearInput', label: '清空输入' },
       { type: 'coordinateTap', label: '点击坐标' },
       { type: 'longPress', label: '长按' },
-      { type: 'checkboxState', label: '判断 Checkbox 状态' },
+      { type: 'checkedState', label: '判断勾选' },
       { type: 'textClick', label: '文字点击' },
-      { type: 'radioButtonState', label: '判断 RadioButton 状态' },
     ],
   },
   {
@@ -97,6 +99,7 @@ const actionGroups: Array<{ title: string; actions: Array<{ type: InsertAction;
     actions: [
       { type: 'keyBack', label: '系统返回' },
       { type: 'keyHome', label: 'Home 键' },
+      { type: 'openGallery', label: '启动相册' },
       { type: 'keyRecent', label: '最近任务' },
       { type: 'keyPower', label: '电源键' },
       { type: 'swipe', label: '滑动' },
@@ -126,6 +129,7 @@ const actionGroups: Array<{ title: string; actions: Array<{ type: InsertAction;
     title: '流程控制',
     actions: [
       { type: 'noop', label: '空节点' },
+      { type: 'endFlow', label: '终止流程' },
       { type: 'log', label: '输出日志' },
       { type: 'runScript', label: '连接脚本' },
     ],
@@ -145,10 +149,13 @@ function typeLabel(step: AppiumRecordedStep) {
     coordinateTap: '坐标点击', swipe: '滑动', launchApp: '启动 APP', clearAppData: '清理 APP 缓存', longPress: '长按',
     pinch: '双指缩放', runScript: '连接脚本', screenshot: '截图', visualChange: '检测画面变化',
     noop: '空节点',
+    endFlow: '终止流程',
     log: '输出日志',
     checkboxState: 'Checkbox 状态',
+    checkedState: '判断勾选',
     radioButtonState: 'RadioButton 状态',
     aiRecognition: 'AI 识别',
+    openGallery: '启动相册',
     textClick: '文字点击',
   };
   return labels[step.type] || step.type;
@@ -312,16 +319,19 @@ function branchSplitPath() {
                 </span>
               </button>
               <span class="appium-flow-node__actions" @click.stop>
+                <el-tooltip v-if="!copyMode && canCopyStep(item.step)" content="复制节点：复制后可在插入位置粘贴" placement="top" :show-after="200">
+                <span style="display: inline-flex">
                 <el-button
-                  v-if="!copyMode && canCopyStep(item.step)"
                   text
                   size="small"
                   :icon="CopyDocument"
                   title="复制节点"
                   @click="$emit('copy', [item.index])"
                 />
+                </span></el-tooltip>
+                <el-tooltip v-if="item.step.type === 'input' || item.step.type === 'inputIfExists'" content="修改输入内容：编辑此节点要输入的文字" placement="top" :show-after="200">
+                <span style="display: inline-flex">
                 <el-button
-                  v-if="item.step.type === 'input' || item.step.type === 'inputIfExists'"
                   text
                   size="small"
                   :icon="Edit"
@@ -329,6 +339,9 @@ function branchSplitPath() {
                   title="修改输入内容"
                   @click="$emit('editInput', item.index)"
                 />
+                </span></el-tooltip>
+                <el-tooltip content="删除节点：移除此操作；判断节点同时删除所属分支子节点" placement="top" :show-after="200">
+                <span style="display: inline-flex">
                 <el-button
                   text
                   size="small"
@@ -337,6 +350,7 @@ function branchSplitPath() {
                   title="删除节点"
                   @click="$emit('remove', item.index)"
                 />
+                </span></el-tooltip>
               </span>
             </div>
             <FlowStepEditor

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+import { View } from '@element-plus/icons-vue';
 import type { AppiumNode } from '../types';
 
 defineProps<{
@@ -6,6 +8,7 @@ defineProps<{
   currentActivity?: string;
   loading?: boolean;
 }>();
+const detailsVisible = ref(false);
 </script>
 
 <template>
@@ -14,6 +17,15 @@ defineProps<{
     element-loading-text="正在检测页面变化..."
     class="appium-node-detail"
   >
+    <div class="appium-node-summary">
+      <div class="appium-node-summary__text" v-if="node">
+        <strong :title="node.label">{{ node.label }}</strong>
+        <span>{{ node.className.split('.').pop() }}<template v-if="node.checkable"> · {{ node.checked === undefined ? '勾选状态未知' : node.checked ? '已勾选' : '未勾选' }}</template><template v-if="node.selector.matchCount"> · {{ node.selector.matchCount > 1 ? `定位重复 ${node.selector.matchCount}` : '定位唯一' }}</template></span>
+      </div>
+      <span v-else class="appium-node-summary__empty">请选择组件</span>
+      <el-button size="small" type="primary" :icon="View" :disabled="!node" @click="detailsVisible = true">详情</el-button>
+    </div>
+    <el-drawer v-model="detailsVisible" title="组件详情" size="520px" style="max-width: 94vw" append-to-body>
     <template v-if="node">
       <div class="appium-node-detail__title">{{ node.label }}</div>
       <el-descriptions :column="1" border size="small">
@@ -25,7 +37,6 @@ defineProps<{
         <el-descriptions-item v-if="node.checkable" label="checked">{{ node.checked === undefined ? '-' : String(node.checked) }}</el-descriptions-item>
         <el-descriptions-item label="当前 Activity">{{ currentActivity || '-' }}</el-descriptions-item>
         <el-descriptions-item label="selector">
-          <span v-if="currentActivity">Activity {{ currentActivity }} · </span>
           {{ node.selector.strategy }} {{ node.selector.value || '' }}
           <el-tag
             v-if="node.selector.matchCount"
@@ -37,12 +48,10 @@ defineProps<{
         </el-descriptions-item>
         <el-descriptions-item label="推荐定位">
           <span v-if="node.contextSelector">
-            <template v-if="currentActivity">Activity {{ currentActivity }} + </template>
             父级 {{ node.contextSelector.strategy }} {{ node.contextSelector.value || '' }}
             + 子级 {{ node.selector.strategy }} {{ node.selector.value || '' }}
           </span>
           <span v-else>
-            <template v-if="currentActivity">Activity {{ currentActivity }} + </template>
             {{ node.selector.unique ? '当前 selector 唯一' : '使用当前 selector 或坐标兜底' }}
           </span>
         </el-descriptions-item>
@@ -54,7 +63,16 @@ defineProps<{
         </el-descriptions-item>
       </el-descriptions>
     </template>
-    <el-empty v-else description="请选择组件" />
+    <p v-else>请选择组件</p>
+    </el-drawer>
 
   </div>
 </template>
+
+<style scoped>
+.appium-node-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 0; }
+.appium-node-summary__text { display: grid; gap: 2px; min-width: 0; font-size: 12px; }
+.appium-node-summary__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+.appium-node-summary__text span, .appium-node-summary__empty { color: var(--el-text-color-secondary); font-size: 12px; }
+:deep(.el-descriptions__content) { overflow-wrap: anywhere; word-break: break-word; }
+</style>

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed, nextTick, shallowRef, watch } from 'vue';
-import { ElMessage } from 'element-plus';
-import { Aim, CopyDocument, FullScreen } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Aim, CopyDocument, FullScreen, Close, Delete } from '@element-plus/icons-vue';
+import { removeFlowSteps } from '../flow-remove';
 import type { AppiumRecordedStep } from '../types';
 import { createFlowClipboard } from '../flow-copy';
 import FlowCanvas from './FlowCanvas.vue';
+import MergeBranchesDialog from './MergeBranchesDialog.vue';
 import { labelFlowStep } from '../flow-labels';
 import type { FlowActionGroup, FlowBranch, InsertAction } from '../flow-graph';
 
@@ -13,6 +15,7 @@ const props = defineProps<{
   steps: AppiumRecordedStep[];
   disabled?: boolean;
   removeDisabled?: boolean;
+  mergeDisabled?: boolean;
   allowedLockedActions?: InsertAction[];
   launchingStepId?: string;
   clipboardCount?: number;
@@ -29,10 +32,14 @@ const emit = defineEmits<{
   previewLinkedScript: [index: number];
   executeStep: [index: number];
   updateStep: [index: number, step: AppiumRecordedStep];
+  replaceSteps: [steps: AppiumRecordedStep[]];
 }>();
 
 const expandedStepIndex = shallowRef<number | null>(null);
+const mergeConditionId = shallowRef('');
 const copyMode = shallowRef(false);
+const deleteMode = shallowRef(false);
+const deleting = shallowRef(false);
 const selectedCopyIndexes = shallowRef<number[]>([]);
 const flowDialogVisible = shallowRef(false);
 const mainResetViewToken = shallowRef(0);
@@ -47,9 +54,8 @@ const insertActionGroups: FlowActionGroup[] = [
       { type: 'clearInput', label: '清空输入' },
       { type: 'coordinateTap', label: '点击坐标' },
       { type: 'longPress', label: '长按' },
-      { type: 'checkboxState', label: '判断 Checkbox 状态' },
+      { type: 'checkedState', label: '判断勾选' },
       { type: 'textClick', label: '文字点击' },
-      { type: 'radioButtonState', label: '判断 RadioButton 状态' },
     ],
   },
   {
@@ -63,6 +69,7 @@ const insertActionGroups: FlowActionGroup[] = [
       { type: 'pinch', label: '双指缩放' },
       { type: 'clearAppData', label: '清理 App 缓存' },
       { type: 'launchApp', label: '启动 App' },
+      { type: 'openGallery', label: '启动相册' },
     ],
   },
   {
@@ -88,6 +95,7 @@ const insertActionGroups: FlowActionGroup[] = [
     title: '流程控制',
     actions: [
       { type: 'noop', label: '空节点' },
+      { type: 'endFlow', label: '终止流程' },
       { type: 'log', label: '输出日志' },
       { type: 'runScript', label: '连接脚本' },
     ],
@@ -121,7 +129,7 @@ function toggleCopySelection(index: number) {
   const step = props.steps[index];
   if (!step) return;
   if (step.type === 'launchApp' || step.type === 'clearAppData') {
-    ElMessage.warning('App 初始化节点不能复制');
+    ElMessage.warning(deleteMode.value ? 'App 初始化节点不参与批量删除' : 'App 初始化节点不能复制');
     return;
   }
   if (selectedCopyIndexes.value.includes(index)) {
@@ -139,7 +147,8 @@ function toggleCopySelection(index: number) {
   try {
     createFlowClipboard(props.steps, candidate);
   } catch (error) {
-    ElMessage.warning(error instanceof Error ? error.message : '当前节点不能一起复制');
+    const message = error instanceof Error ? error.message : '当前节点不能一起选择';
+    ElMessage.warning(deleteMode.value ? message.replace(/复制/g, '删除') : message);
     return;
   }
   selectedCopyIndexes.value = candidate;
@@ -161,12 +170,14 @@ function handleNodeClick(index: number) {
 }
 
 function startCopyMode() {
+  deleteMode.value = false;
   copyMode.value = true;
   selectedCopyIndexes.value = [];
   expandedStepIndex.value = null;
 }
 
 function cancelCopyMode() {
+  deleteMode.value = false;
   copyMode.value = false;
   selectedCopyIndexes.value = [];
 }
@@ -177,6 +188,33 @@ function copySelectedNodes() {
   cancelCopyMode();
 }
 
+function startDeleteMode() {
+  if (props.mergeDisabled || props.removeDisabled) return;
+  startCopyMode();
+  deleteMode.value = true;
+}
+
+async function deleteSelectedNodes() {
+  if (deleting.value || props.mergeDisabled || props.removeDisabled || !selectedCopyIndexes.value.length) return;
+  const original = props.steps;
+  const next = removeFlowSteps(original, selectedCopyIndexes.value);
+  deleting.value = true;
+  try {
+    await ElMessageBox.confirm(`确认删除选中的 ${original.length - next.length} 个节点？所属分支子节点会一起删除，公共流程保留。`, '批量删除', {
+      type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消', appendTo: 'body',
+    });
+    if (props.steps !== original || props.mergeDisabled || props.removeDisabled) {
+      ElMessage.warning('流程或运行状态已变化，请重新选择');
+      return;
+    }
+    emit('replaceSteps', next);
+    cancelCopyMode();
+  } catch { /* 取消确认时保留选中状态。 */ }
+  finally { deleting.value = false; }
+}
+
+watch(() => props.steps, () => { if (copyMode.value) cancelCopyMode(); });
+
 function resetMainFlowPosition() {
   mainResetViewToken.value += 1;
 }
@@ -216,40 +254,43 @@ function updateStep(index: number, step: AppiumRecordedStep) {
     <div class="appium-flow-toolbar">
       <template v-if="copyMode">
         <span class="appium-flow-toolbar__status">已选择 {{ selectedCopyIndexes.length }} 个节点</span>
-        <el-button
+        <el-tooltip :content="deleteMode ? '删除选中' : '复制选中'" placement="top" :show-after="200"><span class="flow-toolbar-icon">
+        <el-button :aria-label="deleteMode ? '删除选中' : '复制选中'"
           size="small"
-          type="primary"
-          :disabled="!selectedCopyIndexes.length"
-          :icon="CopyDocument"
-          @click="copySelectedNodes"
-        >
-          复制选中
-        </el-button>
-        <el-button size="small" @click="cancelCopyMode">取消</el-button>
+          :type="deleteMode ? 'danger' : 'primary'"
+          :loading="deleting"
+          :disabled="!selectedCopyIndexes.length || (deleteMode && (mergeDisabled || removeDisabled))"
+          :icon="deleteMode ? Delete : CopyDocument"
+          @click="deleteMode ? deleteSelectedNodes() : copySelectedNodes()"
+        />
+        </span></el-tooltip>
+        <el-tooltip content="取消" placement="top" :show-after="200"><span class="flow-toolbar-icon"><el-button size="small" :icon="Close" aria-label="取消" @click="cancelCopyMode" /></span></el-tooltip>
       </template>
-      <el-button
-        v-else
+      <el-tooltip v-else content="批量复制" placement="top" :show-after="200"><span class="flow-toolbar-icon">
+      <el-button aria-label="批量复制"
         size="small"
         :icon="CopyDocument"
         :disabled="!steps.length"
         @click="startCopyMode"
-      >
-        批量复制
-      </el-button>
-      <el-button
+      />
+      </span></el-tooltip>
+      <el-tooltip v-if="!copyMode" content="批量删除" placement="top" :show-after="200"><span class="flow-toolbar-icon">
+        <el-button aria-label="批量删除" size="small" :icon="Delete" :disabled="!steps.length || mergeDisabled || removeDisabled" @click="startDeleteMode" />
+      </span></el-tooltip>
+      <el-tooltip content="还原位置" placement="top" :show-after="200"><span class="flow-toolbar-icon">
+      <el-button aria-label="还原位置"
         size="small"
         :icon="Aim"
         @click="resetMainFlowPosition"
-      >
-        还原位置
-      </el-button>
-      <el-button
+      />
+      </span></el-tooltip>
+      <el-tooltip content="放大" placement="top" :show-after="200"><span class="flow-toolbar-icon">
+      <el-button aria-label="放大"
         size="small"
         :icon="FullScreen"
         @click="flowDialogVisible = true"
-      >
-        放大
-      </el-button>
+      />
+      </span></el-tooltip>
     </div>
 
     <FlowCanvas
@@ -257,9 +298,11 @@ function updateStep(index: number, step: AppiumRecordedStep) {
       :steps="steps"
       :expanded-step-index="expandedStepIndex"
       :copy-mode="copyMode"
+      :delete-mode="deleteMode"
       :selected-copy-indexes="selectedCopyIndexes"
       :disabled="disabled"
       :remove-disabled="removeDisabled"
+      :merge-disabled="mergeDisabled"
       :launching-step-id="launchingStepId"
       :ai-recognition-model-configured="aiRecognitionModelConfigured"
       :clipboard-count="clipboardCount"
@@ -282,6 +325,7 @@ function updateStep(index: number, step: AppiumRecordedStep) {
       @preview-linked-script="(index) => emit('previewLinkedScript', index)"
       @execute-step="(index) => emit('executeStep', index)"
       @update-step="(index, step) => updateStep(index, step)"
+      @merge="mergeConditionId = steps[$event]?.id || ''"
     />
 
     <el-dialog
@@ -294,26 +338,29 @@ function updateStep(index: number, step: AppiumRecordedStep) {
       <div class="appium-flow-toolbar appium-flow-dialog__toolbar">
         <template v-if="copyMode">
           <span class="appium-flow-toolbar__status">已选择 {{ selectedCopyIndexes.length }} 个节点</span>
-          <el-button
+          <el-tooltip :content="deleteMode ? '删除选中' : '复制选中'" placement="top" :show-after="200"><span class="flow-toolbar-icon">
+          <el-button :aria-label="deleteMode ? '删除选中' : '复制选中'"
             size="small"
-            type="primary"
-            :disabled="!selectedCopyIndexes.length"
-            :icon="CopyDocument"
-            @click="copySelectedNodes"
-          >
-            复制选中
-          </el-button>
-          <el-button size="small" @click="cancelCopyMode">取消</el-button>
+            :type="deleteMode ? 'danger' : 'primary'"
+            :loading="deleting"
+            :disabled="!selectedCopyIndexes.length || (deleteMode && (mergeDisabled || removeDisabled))"
+            :icon="deleteMode ? Delete : CopyDocument"
+            @click="deleteMode ? deleteSelectedNodes() : copySelectedNodes()"
+          />
+          </span></el-tooltip>
+          <el-tooltip content="取消" placement="top" :show-after="200"><span class="flow-toolbar-icon"><el-button size="small" :icon="Close" aria-label="取消" @click="cancelCopyMode" /></span></el-tooltip>
         </template>
-        <el-button
-          v-else
+        <el-tooltip v-else content="批量复制" placement="top" :show-after="200"><span class="flow-toolbar-icon">
+        <el-button aria-label="批量复制"
           size="small"
           :icon="CopyDocument"
           :disabled="!steps.length"
           @click="startCopyMode"
-        >
-          批量复制
-        </el-button>
+        />
+        </span></el-tooltip>
+        <el-tooltip v-if="!copyMode" content="批量删除" placement="top" :show-after="200"><span class="flow-toolbar-icon">
+          <el-button aria-label="批量删除" size="small" :icon="Delete" :disabled="!steps.length || mergeDisabled || removeDisabled" @click="startDeleteMode" />
+        </span></el-tooltip>
       </div>
       <FlowCanvas
         id="appium-flow-dialog"
@@ -321,9 +368,11 @@ function updateStep(index: number, step: AppiumRecordedStep) {
         :steps="steps"
         :expanded-step-index="expandedStepIndex"
         :copy-mode="copyMode"
+        :delete-mode="deleteMode"
         :selected-copy-indexes="selectedCopyIndexes"
         :disabled="disabled"
         :remove-disabled="removeDisabled"
+        :merge-disabled="mergeDisabled"
         :launching-step-id="launchingStepId"
         :ai-recognition-model-configured="aiRecognitionModelConfigured"
         :clipboard-count="clipboardCount"
@@ -346,7 +395,15 @@ function updateStep(index: number, step: AppiumRecordedStep) {
         @preview-linked-script="(index) => emit('previewLinkedScript', index)"
         @execute-step="(index) => emit('executeStep', index)"
         @update-step="(index, step) => updateStep(index, step)"
+        @merge="mergeConditionId = steps[$event]?.id || ''"
       />
     </el-dialog>
+    <MergeBranchesDialog :steps="steps" :condition-id="mergeConditionId" :disabled="mergeDisabled"
+      @close="mergeConditionId = ''" @confirm="expandedStepIndex = null; emit('replaceSteps', $event)" />
   </div>
 </template>
+
+<style scoped>
+.flow-toolbar-icon { display: inline-flex; }
+.flow-toolbar-icon .el-button { width: 30px; height: 30px; padding: 0; }
+</style>

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

@@ -0,0 +1,15 @@
+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 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;
+  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

@@ -24,9 +24,12 @@ export type InsertAction =
   | 'swipe'
   | 'pinch'
   | 'launchApp'
+  | 'openGallery'
+  | 'endFlow'
   | 'clearAppData'
   | 'popupCondition'
   | 'checkboxState'
+  | 'checkedState'
   | 'radioButtonState'
   | 'aiRecognition'
   | 'textClick'
@@ -87,8 +90,10 @@ export type FlowGraphNodeData =
       expanded: boolean;
       selected: boolean;
       copyMode: boolean;
+      deleteMode?: boolean;
       disabled?: boolean;
       removeDisabled?: boolean;
+      mergeDisabled?: boolean;
       launching?: boolean;
       canCopy: boolean;
       canEditInput: boolean;
@@ -130,8 +135,10 @@ type BuildFlowGraphOptions = {
   expandedStepIndex: number | null;
   selectedCopyIndexes: number[];
   copyMode: boolean;
+  deleteMode?: boolean;
   disabled?: boolean;
   removeDisabled?: boolean;
+  mergeDisabled?: boolean;
   launchingStepId?: string;
   clipboardCount?: number;
   canOpenInsertMenu: boolean;
@@ -231,7 +238,7 @@ function branchConnectionTargetId(items: StepItem[], condition: AppiumRecordedSt
   }
   const targetId = branch === 'yes' ? condition.flow?.yesTargetId : condition.flow?.noTargetId;
   const target = items.find(({ step }) => step.id === targetId)?.step;
-  return target && !target.flow?.parentConditionId ? target.id : '';
+  return target && target.flow?.parentConditionId === condition.flow?.parentConditionId ? target.id : '';
 }
 
 function estimateTextLines(text: string | undefined, charsPerLine: number) {
@@ -421,10 +428,12 @@ export function buildFlowGraph(
         expanded: options.expandedStepIndex === item.index,
         selected: options.isCopySelected(item.index),
         copyMode: options.copyMode,
+        deleteMode: options.deleteMode,
         disabled: item.step.type === 'launchApp' || item.step.type === 'clearAppData'
           ? options.isAppExecutionDisabled(item.step.type)
           : item.step.type === 'aiRecognition' ? options.isInsertActionDisabled('aiRecognition') : options.disabled,
         removeDisabled: options.removeDisabled,
+        mergeDisabled: options.mergeDisabled,
         launching: options.launchingStepId === item.step.id,
         canCopy: item.step.type !== 'launchApp'
           && item.step.type !== 'clearAppData'
@@ -542,7 +551,8 @@ export function buildFlowGraph(
 
     const targetId = item.step.flow?.successTargetId;
     const explicitTarget = targetId ? stepById.get(targetId) : undefined;
-    const explicitMainTarget = explicitTarget && !explicitTarget.step.flow?.parentConditionId
+    const explicitMainTarget = explicitTarget && (!explicitTarget.step.flow?.parentConditionId
+      || explicitTarget.step.flow.parentConditionId !== item.step.flow?.parentConditionId)
       ? explicitTarget
       : undefined;
     const target = explicitMainTarget || nextSibling;
@@ -733,11 +743,29 @@ export function buildFlowGraph(
   const orderedLinks = [...links].sort((a, b) => (
     (nodeOrder.get(a.source) || 0) - (nodeOrder.get(b.source) || 0)
   ));
+  // 公共起点从两侧汇入，不能被最后一条分支连线拉到左列或右列。
+  const joins = new Map<string, string>();
+  items.forEach(({ step }) => {
+    const target = step.flow?.successTargetId && stepById.get(step.flow.successTargetId);
+    if (defaultKind(step) === 'condition' && target && !joins.has(nodeIdForStep(target.step))) {
+      joins.set(nodeIdForStep(target.step), nodeIdForStep(step));
+    }
+  });
   const alignVisibleChainGeometry = () => {
     orderedLinks.forEach((link) => {
       const source = nodeById.get(link.source);
       const target = nodeById.get(link.target);
       if (!source || !target?.data) return;
+      const joinOwner = joins.get(target.id);
+      if (joinOwner && target.id !== joinOwner) {
+        const incoming = links.filter((edge) => edge.target === target.id).map((edge) => nodeById.get(edge.source)!).filter(Boolean);
+        const owner = nodeById.get(joinOwner);
+        if (owner && incoming.length) {
+          target.position.y = Math.round(Math.max(...incoming.map((node) => node.position.y + nodeHeight(node))) + FLOW_STANDARD_LINE_GAP * 2);
+          setCenterX(target, centerX(owner));
+        }
+        return;
+      }
       const kind = target.data.kind;
       if (!['branch', 'split', 'insert'].includes(kind) && !canAlignStepAfterFlowPoint(source, target)) return;
 
@@ -777,7 +805,7 @@ export function buildFlowGraph(
     selectable: false,
     focusable: false,
     class: 'appium-vue-flow-edge',
-    data: { branch: link.branch },
+    data: { branch: link.branch, merge: joins.has(link.target) },
   }));
 
   return { nodes: positionedNodes, edges };