android-midscene-automation 0.1.13 → 0.1.14

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed, reactive, shallowRef, watch } from 'vue';
-import { Delete, Edit, FullScreen, Timer } from '@element-plus/icons-vue';
-import type { AppiumRecordedStep, AppiumSelector } from '../types';
+import { Delete, Edit, FullScreen, Link, Timer, VideoPlay } from '@element-plus/icons-vue';
+import type { AppiumRecordedStep } from '../types';
+import FlowStepEditor from './FlowStepEditor.vue';
 
 type FlowKind = 'action' | 'condition' | 'assertion';
 type BranchName = 'yes' | 'no';
+type FlowViewport = 'main' | 'overview';
 type StepItem = { step: AppiumRecordedStep; index: number };
 type InsertAction =
   | 'delay'
@@ -36,6 +38,7 @@ const props = defineProps<{
   steps: AppiumRecordedStep[];
   disabled?: boolean;
   allowedLockedActions?: InsertAction[];
+  launchingStepId?: string;
 }>();
 
 const emit = defineEmits<{
@@ -43,7 +46,10 @@ const emit = defineEmits<{
   addDelay: [index?: number];
   insertAction: [index: number, action: InsertAction];
   insertBranchAction: [index: number, branch: BranchName, action: InsertAction];
+  connectNext: [index: number, branch: BranchName];
+  disconnectNext: [index: number, branch: BranchName];
   editInput: [index: number];
+  executeStep: [index: number];
   updateStep: [index: number, step: AppiumRecordedStep];
 }>();
 
@@ -51,21 +57,16 @@ const expandedStepIndex = shallowRef<number | null>(null);
 const flowDialogVisible = shallowRef(false);
 const flowPan = reactive({ x: 0, y: 0 });
 const flowScale = shallowRef(1);
-const flowDragging = shallowRef(false);
+const overviewPan = reactive({ x: 0, y: 0 });
+const overviewScale = shallowRef(1);
+const draggingViewport = shallowRef<FlowViewport | null>(null);
 const flowDragMoved = shallowRef(false);
-let dragStart = { pointerId: 0, x: 0, y: 0, panX: 0, panY: 0 };
-
-const stepOptions = computed(() => props.steps.map((step, index) => ({
-  label: `${index + 1}. ${step.label}`,
-  value: step.id,
-})));
+let dragStart = { pointerId: 0, x: 0, y: 0, panX: 0, panY: 0, viewport: 'main' as FlowViewport };
 
 const branchTargetIds = computed(() => {
   const ids = new Set<string>();
   props.steps.forEach((step) => {
     if (step.flow?.parentConditionId) ids.add(step.id);
-    if (step.flow?.yesTargetId) ids.add(step.flow.yesTargetId);
-    if (step.flow?.noTargetId) ids.add(step.flow.noTargetId);
   });
   return ids;
 });
@@ -78,6 +79,23 @@ const visibleStepItems = computed(() => stepItems.value
   .filter(({ step }) => !branchTargetIds.value.has(step.id)));
 const hasFlowSteps = computed(() => visibleStepItems.value.length > 0);
 const hasLaunchAppStep = computed(() => props.steps.some((step) => step.type === 'launchApp'));
+const flowAxisByStepId = computed(() => {
+  const axes = new Map<string, number>();
+  let inheritedAxis = 50;
+  visibleStepItems.value.forEach(({ step }) => {
+    const incomingAxes: number[] = [];
+    visibleStepItems.value.forEach(({ step: condition }) => {
+      if (defaultKind(condition) !== 'condition') return;
+      if (branchConnectionTargetId(condition, 'yes') === step.id) incomingAxes.push(25);
+      if (branchConnectionTargetId(condition, 'no') === step.id) incomingAxes.push(75);
+    });
+    if (incomingAxes.length) {
+      inheritedAxis = incomingAxes.reduce((total, axis) => total + axis, 0) / incomingAxes.length;
+    }
+    axes.set(step.id, inheritedAxis);
+  });
+  return axes;
+});
 
 const insertActionGroups: Array<{ title: string; actions: Array<{ type: InsertAction; label: string }> }> = [
   {
@@ -133,13 +151,12 @@ const mainActionGroups = insertActionGroups.map((group) => ({
 
 const startActionGroups = insertActionGroups;
 
-function scopedStepOptions() {
-  return stepOptions.value;
-}
-
 function stepMeta(step: AppiumRecordedStep) {
   if (step.type === 'delay') return `${step.timeoutMs || 1000}ms`;
   if (step.type === 'input' || step.type === 'inputIfExists') return `输入内容：${step.value || '空'}`;
+  if (defaultKind(step) === 'condition' && step.value) {
+    return `${step.flow?.textMatch === 'exact' ? '精准匹配' : '模糊匹配'}：${step.value}`;
+  }
   if (step.contextSelector && step.selector) {
     return `父级 ${step.contextSelector.strategy} ${step.contextSelector.value || ''} + 子级 ${step.selector.strategy} ${step.selector.value || ''}`;
   }
@@ -207,49 +224,80 @@ function targetLabel(id?: string) {
   return `${index + 1}. ${props.steps[index].label}`;
 }
 
-function targetStep(id?: string) {
-  if (!id) return null;
-  const index = props.steps.findIndex((step) => step.id === id);
-  if (index < 0) return null;
-  return { step: props.steps[index], index };
-}
-
 function branchStepItems(step: AppiumRecordedStep, branch: BranchName) {
-  const ownedItems = stepItems.value.filter((item) => (
+  return stepItems.value.filter((item) => (
     item.step.flow?.parentConditionId === step.id
     && item.step.flow?.parentBranch === branch
   ));
-  if (ownedItems.length) return ownedItems;
+}
 
+function branchConnectionTargetId(step: AppiumRecordedStep, branch: BranchName) {
+  const branchItems = branchStepItems(step, branch);
+  if (branchItems.length) {
+    return branchItems[branchItems.length - 1]?.step.flow?.successTargetId || '';
+  }
   const targetId = branch === 'yes' ? step.flow?.yesTargetId : step.flow?.noTargetId;
-  const target = targetStep(targetId);
-  return target ? [target] : [];
+  const target = props.steps.find((item) => item.id === targetId);
+  return target && !target.flow?.parentConditionId ? target.id : '';
 }
 
-function nextStepId(index: number) {
-  return props.steps[index + 1]?.id || '';
+function hasBranchConnection(step: AppiumRecordedStep) {
+  return Boolean(
+    branchConnectionTargetId(step, 'yes')
+    || branchConnectionTargetId(step, 'no'),
+  );
 }
 
-function toggleExpanded(index: number) {
-  expandedStepIndex.value = expandedStepIndex.value === index ? null : index;
+function hasFollowingMainStep(index: number) {
+  return props.steps.slice(index + 1).some((step) => !step.flow?.parentConditionId);
 }
 
-function patchStep(index: number, patch: Partial<AppiumRecordedStep>) {
-  const current = props.steps[index];
-  if (!current) return;
-  emit('updateStep', index, { ...current, ...patch });
+function hasFollowingVisibleStep(step: AppiumRecordedStep) {
+  const index = visibleStepItems.value.findIndex((item) => item.step.id === step.id);
+  return index >= 0 && index < visibleStepItems.value.length - 1;
 }
 
-function patchFlow(index: number, patch: NonNullable<AppiumRecordedStep['flow']>) {
-  const current = props.steps[index];
-  if (!current) return;
-  emit('updateStep', index, {
-    ...current,
-    flow: {
-      ...(current.flow || {}),
-      ...patch,
-    },
-  });
+function shouldShowBranchConnect(index: number, step: AppiumRecordedStep, branch: BranchName) {
+  return Boolean(branchConnectionTargetId(step, branch)) || hasFollowingMainStep(index);
+}
+
+function flowAxis(step: AppiumRecordedStep) {
+  return flowAxisByStepId.value.get(step.id) || 50;
+}
+
+function flowAxisStyle(step: AppiumRecordedStep) {
+  return { '--flow-axis': `${flowAxis(step)}%` };
+}
+
+function branchPath(step: AppiumRecordedStep, branch: BranchName) {
+  const targetAxis = branch === 'yes' ? 25 : 75;
+  return `M${flowAxis(step)} 0 C${flowAxis(step)} 16 ${targetAxis} 16 ${targetAxis} 31 L${targetAxis} 48`;
+}
+
+function mergeTargetAxis(step: AppiumRecordedStep) {
+  const axes = [
+    branchConnectionTargetId(step, 'yes') ? 25 : 0,
+    branchConnectionTargetId(step, 'no') ? 75 : 0,
+  ].filter(Boolean);
+  return axes.reduce((total, axis) => total + axis, 0) / axes.length;
+}
+
+function mergePath(step: AppiumRecordedStep, branch: BranchName) {
+  const sourceAxis = branch === 'yes' ? 25 : 75;
+  const targetAxis = mergeTargetAxis(step);
+  return `M${sourceAxis} 0 C${sourceAxis} 20 ${targetAxis} 20 ${targetAxis} 44`;
+}
+
+function toggleBranchConnection(index: number, step: AppiumRecordedStep, branch: BranchName) {
+  if (branchConnectionTargetId(step, branch)) {
+    emit('disconnectNext', index, branch);
+  } else {
+    emit('connectNext', index, branch);
+  }
+}
+
+function toggleExpanded(index: number) {
+  expandedStepIndex.value = expandedStepIndex.value === index ? null : index;
 }
 
 function insertAction(index: number, command: string | number | object) {
@@ -264,6 +312,10 @@ function insertBranchAction(index: number, branch: BranchName, command: string |
   emit('insertBranchAction', index, branch, command as InsertAction);
 }
 
+function updateStep(payload: { index: number; step: AppiumRecordedStep }) {
+  emit('updateStep', payload.index, payload.step);
+}
+
 function isInsertActionDisabled(action: InsertAction) {
   return Boolean(props.disabled && !props.allowedLockedActions?.includes(action));
 }
@@ -272,13 +324,19 @@ function isStartActionDisabled(action: InsertAction) {
   return (action === 'launchApp' && hasLaunchAppStep.value) || isInsertActionDisabled(action);
 }
 
+function isLaunchExecutionDisabled() {
+  return Boolean(props.disabled && !props.allowedLockedActions?.includes('launchApp'));
+}
+
 function canOpenInsertMenu() {
   return !props.disabled || Boolean(props.allowedLockedActions?.length);
 }
 
 function isInteractiveTarget(target: EventTarget | null) {
-  return target instanceof Element && Boolean(target.closest(
-    'button,input,textarea,select,.el-select,.el-dropdown,.el-input,.el-input-number,.appium-flow-node',
+  if (!(target instanceof Element)) return false;
+  if (target.closest('.appium-flow-node__toggle')) return false;
+  return Boolean(target.closest(
+    'button,input,textarea,select,.el-select,.el-input,.el-input-number',
   ));
 }
 
@@ -286,54 +344,68 @@ function resetFlowView() {
   flowPan.x = 0;
   flowPan.y = 0;
   flowScale.value = 1;
+  overviewPan.x = 0;
+  overviewPan.y = 0;
+  overviewScale.value = 1;
 }
 
-function handleFlowWheel(event: WheelEvent) {
+function viewportState(viewport: FlowViewport) {
+  return viewport === 'overview'
+    ? { pan: overviewPan, scale: overviewScale }
+    : { pan: flowPan, scale: flowScale };
+}
+
+function handleFlowWheel(event: WheelEvent, viewport: FlowViewport) {
   if (!event.ctrlKey) return;
   event.preventDefault();
+  const { pan, scale } = viewportState(viewport);
   const canvas = event.currentTarget as HTMLElement;
   const bounds = canvas.getBoundingClientRect();
   const cursorX = event.clientX - bounds.left;
   const cursorY = event.clientY - bounds.top;
-  const previousScale = flowScale.value;
+  const previousScale = scale.value;
   const direction = event.deltaY < 0 ? 1 : -1;
   const nextScale = Math.min(2, Math.max(0.5, Math.round((previousScale + direction * 0.1) * 10) / 10));
   if (nextScale === previousScale) return;
-  flowPan.x = cursorX - ((cursorX - flowPan.x) / previousScale) * nextScale;
-  flowPan.y = cursorY - ((cursorY - flowPan.y) / previousScale) * nextScale;
-  flowScale.value = nextScale;
+  pan.x = cursorX - ((cursorX - pan.x) / previousScale) * nextScale;
+  pan.y = cursorY - ((cursorY - pan.y) / previousScale) * nextScale;
+  scale.value = nextScale;
 }
 
 function handleNodeClick(index: number) {
+  if (flowDragMoved.value) return;
   toggleExpanded(index);
 }
 
-function startFlowDrag(event: PointerEvent) {
+function startFlowDrag(event: PointerEvent, viewport: FlowViewport) {
   if (isInteractiveTarget(event.target)) return;
-  flowDragging.value = true;
+  const { pan } = viewportState(viewport);
+  draggingViewport.value = viewport;
   flowDragMoved.value = false;
   dragStart = {
     pointerId: event.pointerId,
     x: event.clientX,
     y: event.clientY,
-    panX: flowPan.x,
-    panY: flowPan.y,
+    panX: pan.x,
+    panY: pan.y,
+    viewport,
   };
-  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
 }
 
-function moveFlowDrag(event: PointerEvent) {
-  if (!flowDragging.value || event.pointerId !== dragStart.pointerId) return;
-  if (Math.abs(event.clientX - dragStart.x) + Math.abs(event.clientY - dragStart.y) > 4) {
+function moveFlowDrag(event: PointerEvent, viewport: FlowViewport) {
+  if (draggingViewport.value !== viewport || event.pointerId !== dragStart.pointerId) return;
+  if (!flowDragMoved.value && Math.abs(event.clientX - dragStart.x) + Math.abs(event.clientY - dragStart.y) > 4) {
     flowDragMoved.value = true;
+    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
   }
-  flowPan.x = dragStart.panX + event.clientX - dragStart.x;
-  flowPan.y = dragStart.panY + event.clientY - dragStart.y;
+  const { pan } = viewportState(viewport);
+  pan.x = dragStart.panX + event.clientX - dragStart.x;
+  pan.y = dragStart.panY + event.clientY - dragStart.y;
 }
 
-function stopFlowDrag(event: PointerEvent) {
-  if (!flowDragging.value || event.pointerId !== dragStart.pointerId) return;
-  flowDragging.value = false;
+function stopFlowDrag(event: PointerEvent, viewport: FlowViewport) {
+  if (draggingViewport.value !== viewport || event.pointerId !== dragStart.pointerId) return;
+  draggingViewport.value = null;
   const target = event.currentTarget as HTMLElement;
   if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
   window.setTimeout(() => {
@@ -360,19 +432,31 @@ watch(() => props.steps.length, () => {
     </div>
     <div
       class="appium-flow-canvas"
-      :class="{ 'appium-flow-canvas--dragging': flowDragging }"
-      @pointerdown="startFlowDrag"
-      @pointermove="moveFlowDrag"
-      @pointerup="stopFlowDrag"
-      @pointercancel="stopFlowDrag"
-      @pointerleave="stopFlowDrag"
-      @wheel="handleFlowWheel"
+      :class="{ 'appium-flow-canvas--dragging': draggingViewport === 'main' }"
+      @pointerdown="startFlowDrag($event, 'main')"
+      @pointermove="moveFlowDrag($event, 'main')"
+      @pointerup="stopFlowDrag($event, 'main')"
+      @pointercancel="stopFlowDrag($event, 'main')"
+      @pointerleave="stopFlowDrag($event, 'main')"
+      @wheel="handleFlowWheel($event, 'main')"
     >
       <div
         class="appium-flow-content"
-        :style="{ transform: `translate(${flowPan.x}px, ${flowPan.y}px) scale(${flowScale})` }"
+        :style="{
+          transform: `translate(${flowPan.x}px, ${flowPan.y}px) scale(${flowScale})`,
+          '--appium-flow-line-width': '3px',
+        }"
       >
-        <div class="appium-flow-start" :class="{ 'appium-flow-start--has-next': hasFlowSteps }">
+        <div class="appium-flow-start">
+          <svg
+            v-if="hasFlowSteps"
+            class="appium-flow-line appium-flow-start__line"
+            viewBox="0 0 10 100"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+          >
+            <path d="M5 0 V100" />
+          </svg>
           <div class="appium-flow-start__node">开始</div>
           <el-dropdown
             trigger="click"
@@ -411,7 +495,17 @@ watch(() => props.steps.length, () => {
           :key="step.id"
           class="appium-flow-item"
           :class="{ 'appium-flow-item--condition': defaultKind(step) === 'condition' }"
+          :style="flowAxisStyle(step)"
         >
+          <svg
+            v-if="defaultKind(step) !== 'condition' && hasFollowingVisibleStep(step)"
+            class="appium-flow-line appium-flow-item__line"
+            viewBox="0 0 10 100"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+          >
+            <path d="M5 0 V100" />
+          </svg>
           <div
             class="appium-flow-node"
             :class="[
@@ -433,9 +527,20 @@ watch(() => props.steps.length, () => {
                   <template v-if="step.optional"> · 可选</template>
                   <template v-if="stepMeta(step)"> · {{ stepMeta(step) }}</template>
                 </span>
+                <span v-if="step.note" class="appium-flow-node__note" :title="step.note">{{ step.note }}</span>
               </span>
             </button>
             <span class="appium-flow-node__actions" @click.stop>
+              <el-button
+                v-if="step.type === 'launchApp'"
+                text
+                size="small"
+                :icon="VideoPlay"
+                :loading="launchingStepId === step.id"
+                :disabled="isLaunchExecutionDisabled()"
+                title="立即执行启动 App"
+                @click="$emit('executeStep', index)"
+              />
               <el-button
                 v-if="step.type === 'input' || step.type === 'inputIfExists'"
                 text
@@ -458,40 +563,78 @@ watch(() => props.steps.length, () => {
 
         <div v-if="defaultKind(step) === 'condition'" class="appium-flow-branches">
           <svg class="appium-flow-branch-lines" viewBox="0 0 100 48" preserveAspectRatio="none" aria-hidden="true">
-            <path d="M50 0 C50 16 25 16 25 31 L25 48" />
-            <path d="M50 0 C50 16 75 16 75 31 L75 48" />
+            <path :d="branchPath(step, 'yes')" />
+            <path :d="branchPath(step, 'no')" />
           </svg>
-          <div class="appium-flow-branch appium-flow-branch--yes">
+          <div
+            class="appium-flow-branch appium-flow-branch--yes"
+            :class="{ 'appium-flow-branch--connected': branchConnectionTargetId(step, 'yes') }"
+          >
+            <svg
+              class="appium-flow-line appium-flow-branch__line"
+              viewBox="0 0 10 100"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <path d="M5 0 V100" />
+            </svg>
             <strong class="appium-flow-branch__label">是</strong>
             <div v-if="branchStepItems(step, 'yes').length" class="appium-flow-branch-steps">
               <div
                 v-for="item in branchStepItems(step, 'yes')"
                 :key="item.step.id"
-                class="appium-flow-branch-step"
+                class="appium-flow-branch-step-group"
               >
-                <span class="appium-flow-branch-step__index">
-                  {{ item.index + 1 }}
-                </span>
-                <span class="appium-flow-branch-step__body">
-                  <span class="appium-flow-branch-step__title">
-                    {{ item.step.label }}
-                  </span>
-                  <span class="appium-flow-branch-step__meta">
-                    {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
+                <div
+                  class="appium-flow-node appium-flow-branch-step"
+                  :class="[
+                    `appium-flow-node--${defaultKind(item.step)}`,
+                    { 'appium-flow-node--expanded': expandedStepIndex === item.index },
+                  ]"
+                >
+                  <button
+                    type="button"
+                    class="appium-flow-node__toggle"
+                    :aria-expanded="expandedStepIndex === item.index"
+                    @click.stop="handleNodeClick(item.index)"
+                  >
+                    <span class="appium-flow-node__index">{{ item.index + 1 }}</span>
+                    <span class="appium-flow-node__body">
+                      <span class="appium-flow-node__title">{{ item.step.label }}</span>
+                      <span class="appium-flow-node__meta">
+                        {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
+                        <template v-if="stepMeta(item.step)"> · {{ stepMeta(item.step) }}</template>
+                      </span>
+                      <span v-if="item.step.note" class="appium-flow-node__note" :title="item.step.note">{{ item.step.note }}</span>
+                    </span>
+                  </button>
+                  <span class="appium-flow-node__actions" @click.stop>
+                    <el-button
+                      text
+                      size="small"
+                      :icon="Delete"
+                      :disabled="disabled"
+                      title="删除节点"
+                      @click="$emit('remove', item.index)"
+                    />
                   </span>
-                </span>
-                <el-button
-                  class="appium-flow-branch-step__delete"
-                  text
-                  size="small"
-                  :icon="Delete"
+                </div>
+                <FlowStepEditor
+                  v-if="expandedStepIndex === item.index"
+                  :step="item.step"
+                  :index="item.index"
                   :disabled="disabled"
-                  title="删除节点"
-                  @click.stop="$emit('remove', item.index)"
+                  @update="updateStep"
                 />
               </div>
             </div>
-            <span v-else class="appium-flow-branch__target">{{ targetLabel(step.flow?.yesTargetId) }}</span>
+            <span
+              v-if="!branchStepItems(step, 'yes').length && !branchConnectionTargetId(step, 'yes')"
+              class="appium-flow-branch__target"
+            >
+              {{ targetLabel(step.flow?.yesTargetId) }}
+            </span>
+            <div class="appium-flow-branch__actions">
             <el-dropdown
               trigger="click"
               :disabled="!canOpenInsertMenu()"
@@ -524,38 +667,88 @@ watch(() => props.steps.length, () => {
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
+            <el-button
+              v-if="shouldShowBranchConnect(index, step, 'yes')"
+              size="small"
+              class="appium-flow-branch__connect"
+              :icon="Link"
+              :disabled="disabled"
+              :title="branchConnectionTargetId(step, 'yes') ? '取消当前分支与主流程的连接' : '自动连接判断节点之后的主流程节点'"
+              @click.stop="toggleBranchConnection(index, step, 'yes')"
+            >
+              {{ branchConnectionTargetId(step, 'yes') ? '取消连接' : '连接到下一节点' }}
+            </el-button>
+            </div>
           </div>
-          <div class="appium-flow-branch appium-flow-branch--no">
+          <div
+            class="appium-flow-branch appium-flow-branch--no"
+            :class="{ 'appium-flow-branch--connected': branchConnectionTargetId(step, 'no') }"
+          >
+            <svg
+              class="appium-flow-line appium-flow-branch__line"
+              viewBox="0 0 10 100"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <path d="M5 0 V100" />
+            </svg>
             <strong class="appium-flow-branch__label">否</strong>
             <div v-if="branchStepItems(step, 'no').length" class="appium-flow-branch-steps">
               <div
                 v-for="item in branchStepItems(step, 'no')"
                 :key="item.step.id"
-                class="appium-flow-branch-step"
+                class="appium-flow-branch-step-group"
               >
-                <span class="appium-flow-branch-step__index">
-                  {{ item.index + 1 }}
-                </span>
-                <span class="appium-flow-branch-step__body">
-                  <span class="appium-flow-branch-step__title">
-                    {{ item.step.label }}
-                  </span>
-                  <span class="appium-flow-branch-step__meta">
-                    {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
+                <div
+                  class="appium-flow-node appium-flow-branch-step"
+                  :class="[
+                    `appium-flow-node--${defaultKind(item.step)}`,
+                    { 'appium-flow-node--expanded': expandedStepIndex === item.index },
+                  ]"
+                >
+                  <button
+                    type="button"
+                    class="appium-flow-node__toggle"
+                    :aria-expanded="expandedStepIndex === item.index"
+                    @click.stop="handleNodeClick(item.index)"
+                  >
+                    <span class="appium-flow-node__index">{{ item.index + 1 }}</span>
+                    <span class="appium-flow-node__body">
+                      <span class="appium-flow-node__title">{{ item.step.label }}</span>
+                      <span class="appium-flow-node__meta">
+                        {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
+                        <template v-if="stepMeta(item.step)"> · {{ stepMeta(item.step) }}</template>
+                      </span>
+                      <span v-if="item.step.note" class="appium-flow-node__note" :title="item.step.note">{{ item.step.note }}</span>
+                    </span>
+                  </button>
+                  <span class="appium-flow-node__actions" @click.stop>
+                    <el-button
+                      text
+                      size="small"
+                      :icon="Delete"
+                      :disabled="disabled"
+                      title="删除节点"
+                      @click="$emit('remove', item.index)"
+                    />
                   </span>
-                </span>
-                <el-button
-                  class="appium-flow-branch-step__delete"
-                  text
-                  size="small"
-                  :icon="Delete"
+                </div>
+                <FlowStepEditor
+                  v-if="expandedStepIndex === item.index"
+                  :step="item.step"
+                  :index="item.index"
                   :disabled="disabled"
-                  title="删除节点"
-                  @click.stop="$emit('remove', item.index)"
+                  @update="updateStep"
                 />
               </div>
             </div>
-            <span v-else class="appium-flow-branch__target">{{ targetLabel(step.flow?.noTargetId) }}</span>
+            <span
+              v-if="!branchStepItems(step, 'no').length && !branchConnectionTargetId(step, 'no')"
+              class="appium-flow-branch__target"
+            >
+              {{ targetLabel(step.flow?.noTargetId) }}
+            </span>
+            <div class="appium-flow-branch__actions">
             <el-dropdown
               trigger="click"
               :disabled="!canOpenInsertMenu()"
@@ -588,142 +781,44 @@ watch(() => props.steps.length, () => {
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
+            <el-button
+              v-if="shouldShowBranchConnect(index, step, 'no')"
+              size="small"
+              class="appium-flow-branch__connect"
+              :icon="Link"
+              :disabled="disabled"
+              :title="branchConnectionTargetId(step, 'no') ? '取消当前分支与主流程的连接' : '自动连接判断节点之后的主流程节点'"
+              @click.stop="toggleBranchConnection(index, step, 'no')"
+            >
+              {{ branchConnectionTargetId(step, 'no') ? '取消连接' : '连接到下一节点' }}
+            </el-button>
+            </div>
           </div>
         </div>
 
-        <div v-if="expandedStepIndex === index" class="appium-flow-editor">
-          <el-form label-position="top" size="small">
-            <el-form-item label="节点名称">
-              <el-input
-                :model-value="step.label"
-                :disabled="disabled"
-                @update:model-value="patchStep(index, { label: String($event) })"
-              />
-            </el-form-item>
-            <div class="appium-flow-editor__grid">
-              <el-form-item label="节点类型">
-                <el-select
-                  :model-value="defaultKind(step)"
-                  :disabled="disabled"
-                  @update:model-value="patchFlow(index, { nodeKind: $event as FlowKind })"
-                >
-                  <el-option label="操作" value="action" />
-                  <el-option label="判断" value="condition" />
-                  <el-option label="校验" value="assertion" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="超时时间 ms">
-                <el-input-number
-                  :model-value="step.timeoutMs || undefined"
-                  :disabled="disabled"
-                  :min="0"
-                  :max="999999"
-                  controls-position="right"
-                  @update:model-value="patchStep(index, { timeoutMs: Number($event || 0) || undefined })"
-                />
-              </el-form-item>
-            </div>
-            <el-form-item v-if="step.type === 'input' || step.type === 'inputIfExists' || step.type === 'assertText'" label="文本内容">
-              <el-input
-                :model-value="step.value || ''"
-                :disabled="disabled"
-                @update:model-value="patchStep(index, { value: String($event) })"
-              />
-            </el-form-item>
-            <div v-if="step.selector" class="appium-flow-editor__grid">
-              <el-form-item label="Selector 类型">
-                <el-select
-                  :model-value="step.selector.strategy"
-                  :disabled="disabled"
-                  @update:model-value="patchStep(index, { selector: { ...step.selector!, strategy: $event as AppiumSelector['strategy'] } })"
-                >
-                  <el-option label="accessibility id" value="accessibilityId" />
-                  <el-option label="id" value="id" />
-                  <el-option label="android uiAutomator" value="androidUiAutomator" />
-                  <el-option label="xpath" value="xpath" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="Selector 值">
-                <el-input
-                  :model-value="step.selector.value || ''"
-                  :disabled="disabled"
-                  @update:model-value="patchStep(index, { selector: { ...step.selector!, value: String($event) } })"
-                />
-              </el-form-item>
-            </div>
-            <div v-if="step.selector" class="appium-flow-editor__grid">
-              <el-form-item label="父级上下文类型">
-                <el-select
-                  :model-value="step.contextSelector?.strategy || ''"
-                  :disabled="disabled"
-                  clearable
-                  placeholder="不使用父级"
-                  @update:model-value="patchStep(index, { contextSelector: $event ? { ...(step.contextSelector || { value: '' }), strategy: $event as AppiumSelector['strategy'] } : undefined })"
-                >
-                  <el-option label="accessibility id" value="accessibilityId" />
-                  <el-option label="id" value="id" />
-                  <el-option label="android uiAutomator" value="androidUiAutomator" />
-                  <el-option label="xpath" value="xpath" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="父级上下文值">
-                <el-input
-                  :model-value="step.contextSelector?.value || ''"
-                  :disabled="disabled || !step.contextSelector"
-                  @update:model-value="patchStep(index, { contextSelector: { ...(step.contextSelector || { strategy: 'xpath' }), value: String($event) } })"
-                />
-              </el-form-item>
-            </div>
-            <el-form-item label="可选步骤">
-              <el-switch
-                :model-value="Boolean(step.optional)"
-                :disabled="disabled"
-                active-text="找不到时跳过"
-                inactive-text="找不到时失败"
-                @update:model-value="patchStep(index, { optional: Boolean($event) })"
-              />
-            </el-form-item>
-            <template v-if="defaultKind(step) === 'condition'">
-              <div class="appium-flow-editor__grid">
-                <el-form-item label="是，进入">
-                  <el-select
-                    :model-value="step.flow?.yesTargetId || ''"
-                    :disabled="disabled"
-                    clearable
-                    placeholder="默认下一步"
-                    @update:model-value="patchFlow(index, { yesTargetId: String($event || '') })"
-                  >
-                    <el-option v-for="option in scopedStepOptions()" :key="option.value" :label="option.label" :value="option.value" />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="否，进入">
-                  <el-select
-                    :model-value="step.flow?.noTargetId || ''"
-                    :disabled="disabled"
-                    clearable
-                    placeholder="默认结束"
-                    @update:model-value="patchFlow(index, { noTargetId: String($event || '') })"
-                  >
-                    <el-option v-for="option in scopedStepOptions()" :key="option.value" :label="option.label" :value="option.value" />
-                  </el-select>
-                </el-form-item>
-              </div>
-            </template>
-            <div class="appium-flow-editor__actions">
-              <el-button :icon="Timer" :disabled="disabled" @click="$emit('addDelay', index)">
-                插入延时
-              </el-button>
-              <el-button
-                v-if="defaultKind(step) !== 'condition'"
-                :disabled="disabled"
-                @click="patchFlow(index, { nodeKind: 'condition', yesTargetId: '', noTargetId: '' })"
-              >
-                转为判断节点
-              </el-button>
-            </div>
-          </el-form>
+        <div v-if="hasBranchConnection(step)" class="appium-flow-merge">
+          <svg viewBox="0 0 100 44" preserveAspectRatio="none" aria-hidden="true">
+            <path
+              v-if="branchConnectionTargetId(step, 'yes')"
+              class="appium-flow-merge__yes"
+              :d="mergePath(step, 'yes')"
+            />
+            <path
+              v-if="branchConnectionTargetId(step, 'no')"
+              class="appium-flow-merge__no"
+              :d="mergePath(step, 'no')"
+            />
+          </svg>
         </div>
 
+        <FlowStepEditor
+          v-if="expandedStepIndex === index"
+          :step="step"
+          :index="index"
+          :disabled="disabled"
+          @update="updateStep"
+        />
+
         <el-dropdown
           v-if="defaultKind(step) !== 'condition'"
           trigger="click"
@@ -766,12 +861,33 @@ watch(() => props.steps.length, () => {
       class="appium-flow-dialog"
       append-to-body
     >
-      <div class="appium-flow-dialog-canvas">
-        <div class="appium-flow-content appium-flow-content--overview">
-          <div
-            class="appium-flow-start appium-flow-start--overview"
-            :class="{ 'appium-flow-start--has-next': hasFlowSteps }"
-          >
+      <div
+        class="appium-flow-dialog-canvas"
+        :class="{ 'appium-flow-dialog-canvas--dragging': draggingViewport === 'overview' }"
+        @pointerdown="startFlowDrag($event, 'overview')"
+        @pointermove="moveFlowDrag($event, 'overview')"
+        @pointerup="stopFlowDrag($event, 'overview')"
+        @pointercancel="stopFlowDrag($event, 'overview')"
+        @pointerleave="stopFlowDrag($event, 'overview')"
+        @wheel="handleFlowWheel($event, 'overview')"
+      >
+        <div
+          class="appium-flow-content appium-flow-content--overview"
+          :style="{
+            transform: `translate(${overviewPan.x}px, ${overviewPan.y}px) scale(${overviewScale})`,
+            '--appium-flow-line-width': '3px',
+          }"
+        >
+          <div class="appium-flow-start appium-flow-start--overview">
+            <svg
+              v-if="hasFlowSteps"
+              class="appium-flow-line appium-flow-start__line"
+              viewBox="0 0 10 100"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <path d="M5 0 V100" />
+            </svg>
             <div class="appium-flow-start__node">开始</div>
           </div>
           <div
@@ -779,12 +895,30 @@ watch(() => props.steps.length, () => {
             :key="step.id"
             class="appium-flow-item"
             :class="{ 'appium-flow-item--condition': defaultKind(step) === 'condition' }"
+            :style="flowAxisStyle(step)"
           >
+            <svg
+              v-if="defaultKind(step) !== 'condition' && hasFollowingVisibleStep(step)"
+              class="appium-flow-line appium-flow-item__line"
+              viewBox="0 0 10 100"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <path d="M5 0 V100" />
+            </svg>
             <div
               class="appium-flow-node"
-              :class="`appium-flow-node--${defaultKind(step)}`"
+              :class="[
+                `appium-flow-node--${defaultKind(step)}`,
+                { 'appium-flow-node--expanded': expandedStepIndex === index },
+              ]"
             >
-              <span class="appium-flow-node__toggle">
+              <button
+                type="button"
+                class="appium-flow-node__toggle"
+                :aria-expanded="expandedStepIndex === index"
+                @click="handleNodeClick(index)"
+              >
                 <span class="appium-flow-node__index">{{ index + 1 }}</span>
                 <span class="appium-flow-node__body">
                   <span class="appium-flow-node__title" :title="step.label">{{ step.label }}</span>
@@ -793,54 +927,157 @@ watch(() => props.steps.length, () => {
                     <template v-if="step.optional"> · 可选</template>
                     <template v-if="stepMeta(step)"> · {{ stepMeta(step) }}</template>
                   </span>
+                  <span v-if="step.note" class="appium-flow-node__note" :title="step.note">{{ step.note }}</span>
                 </span>
-              </span>
+              </button>
             </div>
 
+            <FlowStepEditor
+              v-if="expandedStepIndex === index"
+              :step="step"
+              :index="index"
+              :disabled="disabled"
+              @update="updateStep"
+            />
+
             <div v-if="defaultKind(step) === 'condition'" class="appium-flow-branches">
               <svg class="appium-flow-branch-lines" viewBox="0 0 100 48" preserveAspectRatio="none" aria-hidden="true">
-                <path d="M50 0 C50 16 25 16 25 31 L25 48" />
-                <path d="M50 0 C50 16 75 16 75 31 L75 48" />
+                <path :d="branchPath(step, 'yes')" />
+                <path :d="branchPath(step, 'no')" />
               </svg>
-              <div class="appium-flow-branch appium-flow-branch--yes">
+              <div
+                class="appium-flow-branch appium-flow-branch--yes"
+                :class="{ 'appium-flow-branch--connected': branchConnectionTargetId(step, 'yes') }"
+              >
+                <svg
+                  class="appium-flow-line appium-flow-branch__line"
+                  viewBox="0 0 10 100"
+                  preserveAspectRatio="none"
+                  aria-hidden="true"
+                >
+                  <path d="M5 0 V100" />
+                </svg>
                 <strong class="appium-flow-branch__label">是</strong>
                 <div v-if="branchStepItems(step, 'yes').length" class="appium-flow-branch-steps">
                   <div
                     v-for="item in branchStepItems(step, 'yes')"
                     :key="item.step.id"
-                    class="appium-flow-branch-step"
+                    class="appium-flow-branch-step-group"
                   >
-                    <span class="appium-flow-branch-step__index">{{ item.index + 1 }}</span>
-                    <span class="appium-flow-branch-step__body">
-                      <span class="appium-flow-branch-step__title">{{ item.step.label }}</span>
-                      <span class="appium-flow-branch-step__meta">
-                        {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
-                      </span>
-                    </span>
+                    <div
+                      class="appium-flow-node appium-flow-branch-step"
+                      :class="[
+                        `appium-flow-node--${defaultKind(item.step)}`,
+                        { 'appium-flow-node--expanded': expandedStepIndex === item.index },
+                      ]"
+                    >
+                      <button
+                        type="button"
+                        class="appium-flow-node__toggle"
+                        :aria-expanded="expandedStepIndex === item.index"
+                        @click="handleNodeClick(item.index)"
+                      >
+                        <span class="appium-flow-node__index">{{ item.index + 1 }}</span>
+                        <span class="appium-flow-node__body">
+                          <span class="appium-flow-node__title">{{ item.step.label }}</span>
+                          <span class="appium-flow-node__meta">
+                            {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
+                            <template v-if="stepMeta(item.step)"> · {{ stepMeta(item.step) }}</template>
+                          </span>
+                          <span v-if="item.step.note" class="appium-flow-node__note" :title="item.step.note">{{ item.step.note }}</span>
+                        </span>
+                      </button>
+                    </div>
+                    <FlowStepEditor
+                      v-if="expandedStepIndex === item.index"
+                      :step="item.step"
+                      :index="item.index"
+                      :disabled="disabled"
+                      @update="updateStep"
+                    />
                   </div>
                 </div>
-                <span v-else class="appium-flow-branch__target">{{ targetLabel(step.flow?.yesTargetId) }}</span>
+                <span
+                  v-if="!branchStepItems(step, 'yes').length && !branchConnectionTargetId(step, 'yes')"
+                  class="appium-flow-branch__target"
+                >
+                  {{ targetLabel(step.flow?.yesTargetId) }}
+                </span>
               </div>
-              <div class="appium-flow-branch appium-flow-branch--no">
+              <div
+                class="appium-flow-branch appium-flow-branch--no"
+                :class="{ 'appium-flow-branch--connected': branchConnectionTargetId(step, 'no') }"
+              >
+                <svg
+                  class="appium-flow-line appium-flow-branch__line"
+                  viewBox="0 0 10 100"
+                  preserveAspectRatio="none"
+                  aria-hidden="true"
+                >
+                  <path d="M5 0 V100" />
+                </svg>
                 <strong class="appium-flow-branch__label">否</strong>
                 <div v-if="branchStepItems(step, 'no').length" class="appium-flow-branch-steps">
                   <div
                     v-for="item in branchStepItems(step, 'no')"
                     :key="item.step.id"
-                    class="appium-flow-branch-step"
+                    class="appium-flow-branch-step-group"
                   >
-                    <span class="appium-flow-branch-step__index">{{ item.index + 1 }}</span>
-                    <span class="appium-flow-branch-step__body">
-                      <span class="appium-flow-branch-step__title">{{ item.step.label }}</span>
-                      <span class="appium-flow-branch-step__meta">
-                        {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
-                      </span>
-                    </span>
+                    <div
+                      class="appium-flow-node appium-flow-branch-step"
+                      :class="[
+                        `appium-flow-node--${defaultKind(item.step)}`,
+                        { 'appium-flow-node--expanded': expandedStepIndex === item.index },
+                      ]"
+                    >
+                      <button
+                        type="button"
+                        class="appium-flow-node__toggle"
+                        :aria-expanded="expandedStepIndex === item.index"
+                        @click="handleNodeClick(item.index)"
+                      >
+                        <span class="appium-flow-node__index">{{ item.index + 1 }}</span>
+                        <span class="appium-flow-node__body">
+                          <span class="appium-flow-node__title">{{ item.step.label }}</span>
+                          <span class="appium-flow-node__meta">
+                            {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
+                            <template v-if="stepMeta(item.step)"> · {{ stepMeta(item.step) }}</template>
+                          </span>
+                          <span v-if="item.step.note" class="appium-flow-node__note" :title="item.step.note">{{ item.step.note }}</span>
+                        </span>
+                      </button>
+                    </div>
+                    <FlowStepEditor
+                      v-if="expandedStepIndex === item.index"
+                      :step="item.step"
+                      :index="item.index"
+                      :disabled="disabled"
+                      @update="updateStep"
+                    />
                   </div>
                 </div>
-                <span v-else class="appium-flow-branch__target">{{ targetLabel(step.flow?.noTargetId) }}</span>
+                <span
+                  v-if="!branchStepItems(step, 'no').length && !branchConnectionTargetId(step, 'no')"
+                  class="appium-flow-branch__target"
+                >
+                  {{ targetLabel(step.flow?.noTargetId) }}
+                </span>
               </div>
             </div>
+            <div v-if="hasBranchConnection(step)" class="appium-flow-merge">
+              <svg viewBox="0 0 100 44" preserveAspectRatio="none" aria-hidden="true">
+                <path
+                  v-if="branchConnectionTargetId(step, 'yes')"
+                  class="appium-flow-merge__yes"
+                  :d="mergePath(step, 'yes')"
+                />
+                <path
+                  v-if="branchConnectionTargetId(step, 'no')"
+                  class="appium-flow-merge__no"
+                  :d="mergePath(step, 'no')"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>