android-midscene-automation 0.1.29 → 0.1.30

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # 更新记录
 
+## v0.1.30
+
+- 新增节点批量删除功能，支持多选节点，选中节点及所属子节点以柔和红色背景和浅色文字标记，确认后统一删除；支持普通与放大视图同步操作。
+
 ## v0.1.29
 
 - 判断节点新增“合并分支”，支持选择一侧公共流程起点，将两侧后续汇入同一段居中流程；另一侧可保留独有操作或确认删除重复后缀，支持嵌套判断及各类分支，公共节点只执行一次且不随单侧节点删除。

package/README.md

@@ -1229,6 +1229,10 @@ Linux: ~/.local/share/android-midscene-automation
 
 # 项目更新记录
 
+## v0.1.30
+
+- 新增节点批量删除功能，支持多选节点，选中节点及所属子节点以柔和红色背景和浅色文字标记，确认后统一删除；支持普通与放大视图同步操作。
+
 ## v0.1.29
 
 - 判断节点新增“合并分支”，支持选择一侧公共流程起点，将两侧后续汇入同一段居中流程；另一侧可保留独有操作或确认删除重复后缀，支持嵌套判断及各类分支，公共节点只执行一次且不随单侧节点删除。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "android-midscene-automation",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/oooooooko/android-midscene-automation.git"

package/src/appium-recorder/AppiumPage.vue

@@ -2095,14 +2095,11 @@ watch(
                     />
                   </el-select>
                 </div>
-                <el-alert
+                <details
                   v-if="scriptActivityMismatch"
-                  class="appium-activity-lock-alert"
-                  title="当前脚本已锁定"
-                  type="warning"
-                  show-icon
-                  :closable="false"
+                  class="appium-activity-summary"
                 >
+                  <summary>当前页面与脚本不一致，部分录制操作不可用</summary>
                   <div class="appium-activity-lock-alert__details">
                     <div>
                       <strong>脚本绑定</strong>
@@ -2114,7 +2111,7 @@ watch(
                     </div>
                     <p>请在录制流程中添加或执行“启动 APP”节点；Activity 匹配后会自动解除编辑锁定。</p>
                   </div>
-                </el-alert>
+                </details>
                 <NodeDetail
                   :node="selectedNode"
                   :current-activity="currentActivity"
@@ -2122,7 +2119,7 @@ watch(
                 />
               </section>
 
-              <section class="appium-workbench__section">
+              <section class="appium-workbench__section appium-workbench__flow">
                 <h3>录制步骤</h3>
                 <RecordedSteps
                   :key="newScriptRevision"
@@ -2403,3 +2400,18 @@ watch(
     </el-tooltip>
   </section>
 </template>
+
+<style scoped>
+.appium-activity-summary { margin: 8px 0; color: #946000; font-size: 12px; }
+.appium-activity-summary summary { cursor: pointer; line-height: 20px; }
+.appium-activity-summary[open] .appium-activity-lock-alert__details { max-height: 110px; overflow: auto; margin-top: 6px; }
+:deep(.appium-recorder-card--workbench > .el-card__body) { overflow: hidden; }
+:deep(.appium-workbench-tabs > .el-tabs__content) { overflow: hidden; }
+:deep(.appium-workbench-tabs .el-tab-pane) { height: 100%; overflow: auto; }
+.appium-workbench { height: 100%; box-sizing: border-box; grid-template-rows: auto minmax(180px, 1fr); gap: 10px; overflow: auto; }
+.appium-workbench__flow { display: flex; flex-direction: column; min-height: 0; }
+.appium-workbench__flow h3 { margin-bottom: 6px; }
+.appium-workbench__flow :deep(.appium-recorded-steps-panel) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.appium-workbench__flow :deep(.appium-flow-toolbar) { flex: none; margin-bottom: 8px; }
+.appium-workbench__flow :deep(.appium-flow-canvas--vue:not(.appium-flow-canvas--dialog)) { flex: 1; height: auto; min-height: 120px; }
+</style>

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

@@ -21,6 +21,7 @@ const props = defineProps<{
   steps: AppiumRecordedStep[];
   expandedStepIndex: number | null;
   copyMode: boolean;
+  deleteMode?: boolean;
   selectedCopyIndexes: number[];
   disabled?: boolean;
   removeDisabled?: boolean;
@@ -61,6 +62,7 @@ let resetViewFrame = 0;
 let pendingResetView = false;
 
 const graph = computed(() => buildFlowGraph(props.steps, {
+  deleteMode: props.deleteMode,
   mergeDisabled: props.mergeDisabled,
   aiRecognitionModelConfigured: props.aiRecognitionModelConfigured,
   expandedStepIndex: props.expandedStepIndex,

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

@@ -159,6 +159,7 @@ watch(() => props.data, () => {
         {
           'appium-flow-step-shell--expanded': data.expanded,
           'appium-flow-step-shell--selected': data.selected,
+          'appium-flow-step-shell--delete-selected': data.selected && data.deleteMode,
           'appium-flow-step-shell--copying': data.copyMode,
           'appium-flow-step-shell--readonly': props.readonly,
         },
@@ -181,7 +182,7 @@ watch(() => props.data, () => {
           <em v-if="data.note" :title="data.note">{{ data.note }}</em>
         </span>
       </button>
-      <span v-if="!props.readonly" class="appium-flow-step-card__actions nodrag nopan" @click.stop>
+      <span v-if="!props.readonly && !data.deleteMode" class="appium-flow-step-card__actions nodrag nopan" @click.stop>
         <el-tooltip v-if="data.flowKind === 'condition' && !data.copyMode" content="合并分支：将两侧后续节点汇入公共流程" placement="top" :show-after="200">
         <span class="appium-node-action-tooltip"><el-button text size="small" :icon="Connection"
           title="合并分支" aria-label="合并分支" :disabled="data.mergeDisabled || Boolean(data.step.flow?.successTargetId)"
@@ -263,6 +264,10 @@ watch(() => props.data, () => {
 </template>
 
 <style scoped>
+.appium-flow-step-shell--delete-selected .appium-flow-step-card { background: #b83232; border-color: #a52a2a; }
+.appium-flow-step-shell--delete-selected .appium-flow-step-card__content strong,
+.appium-flow-step-shell--delete-selected .appium-flow-step-card__content em { color: #fff; }
+.appium-flow-step-shell--delete-selected .appium-flow-step-card__content small { color: #fee2e2; }
 .appium-node-action-tooltip { display: inline-flex; }
 .appium-ai-model-warning { float: left; margin: 2px 6px 0 0; font-size: 16px; }
 </style>

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,7 +1,8 @@
 <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';
@@ -37,6 +38,8 @@ const emit = defineEmits<{
 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);
@@ -126,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)) {
@@ -144,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;
@@ -166,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 = [];
 }
@@ -182,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;
 }
@@ -221,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
@@ -262,6 +298,7 @@ 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"
@@ -301,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"
@@ -328,6 +368,7 @@ 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"
@@ -361,3 +402,8 @@ function updateStep(index: number, step: AppiumRecordedStep) {
       @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-graph.ts

@@ -90,6 +90,7 @@ export type FlowGraphNodeData =
       expanded: boolean;
       selected: boolean;
       copyMode: boolean;
+      deleteMode?: boolean;
       disabled?: boolean;
       removeDisabled?: boolean;
       mergeDisabled?: boolean;
@@ -134,6 +135,7 @@ type BuildFlowGraphOptions = {
   expandedStepIndex: number | null;
   selectedCopyIndexes: number[];
   copyMode: boolean;
+  deleteMode?: boolean;
   disabled?: boolean;
   removeDisabled?: boolean;
   mergeDisabled?: boolean;
@@ -426,6 +428,7 @@ 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,

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

@@ -4,6 +4,12 @@ type FlowTargetKey = 'yesTargetId' | 'noTargetId' | 'successTargetId' | 'failure
 
 const FLOW_TARGET_KEYS: FlowTargetKey[] = ['yesTargetId', 'noTargetId', 'successTargetId', 'failureTargetId'];
 
+export function removeFlowSteps(steps: AppiumRecordedStep[], indexes: number[]) {
+  const ids = [...new Set(indexes)].sort((a, b) => b - a).map((index) => steps[index]?.id).filter(Boolean);
+  // 使用稳定 ID 逐个删除，避免前一次删除导致后续索引错位。
+  return ids.reduce((current, id) => removeFlowStep(current, current.findIndex((step) => step.id === id)), steps);
+}
+
 function sameBranch(step: AppiumRecordedStep, removed: AppiumRecordedStep) {
   return Boolean(
     removed.flow?.parentConditionId