android-midscene-automation 1.1.3 → 1.1.5

package/src/appium-recorder/AppiumPage.vue

@@ -26,7 +26,7 @@ import {
   downloadAppiumScript,
   getAppiumScripts,
   getAppiumTree,
-  importAppiumScript,
+  importAppiumScripts,
   launchAppiumDeviceApp,
   replayAppiumScript,
   saveAppiumScript,
@@ -2053,23 +2053,67 @@ async function downloadScript(script: AppiumRecordedScript) {
 }
 
 function chooseScriptImportFile() {
+  if (importingScript.value) return;
   scriptImportInput.value?.click();
 }
 
 async function importScriptFile(event: Event) {
   const input = event.currentTarget as HTMLInputElement;
-  const file = input.files?.[0];
+  const files = Array.from(input.files || []);
   input.value = '';
-  if (!file) return;
+  if (!files.length) return;
   importingScript.value = true;
+
+  const importedScripts: AppiumRecordedScript[] = [];
+  const failedFiles: Array<{ name: string; reason: string }> = [];
   try {
-    const payload = JSON.parse(await file.text()) as unknown;
-    const result = await importAppiumScript(payload);
-    await loadScripts();
-    loadScript(result.script);
-    ElMessage.success(`脚本「${result.script.name}」已导入`);
-  } catch (error) {
-    ElMessage.error(error instanceof Error ? error.message : '导入脚本失败');
+    const parsedFiles: Array<{ name: string; payload: unknown }> = [];
+    for (const file of files) {
+      try {
+        const payload = JSON.parse(await file.text()) as unknown;
+        parsedFiles.push({ name: file.name, payload });
+      } catch (error) {
+        failedFiles.push({
+          name: file.name,
+          reason: error instanceof Error ? error.message : '文件格式无效',
+        });
+      }
+    }
+
+    if (parsedFiles.length) {
+      try {
+        const result = await importAppiumScripts(parsedFiles.map(item => item.payload));
+        importedScripts.push(...result.scripts);
+      } catch (error) {
+        const reason = error instanceof Error ? error.message : '导入失败';
+        failedFiles.push(...parsedFiles.map(file => ({ name: file.name, reason })));
+      }
+    }
+
+    if (importedScripts.length) {
+      try {
+        await loadScripts();
+      } catch (error) {
+        ElMessage.warning(`脚本已导入，但刷新列表失败：${error instanceof Error ? error.message : '未知错误'}`);
+        return;
+      }
+    }
+
+    if (!failedFiles.length) {
+      ElMessage.success(files.length === 1
+        ? `脚本「${importedScripts[0].name}」已导入`
+        : `已成功导入 ${importedScripts.length} 个脚本`);
+      return;
+    }
+
+    const failedSummary = failedFiles
+      .map(({ name, reason }) => `${name}（${reason}）`)
+      .join('；');
+    if (importedScripts.length) {
+      ElMessage.warning(`已导入 ${importedScripts.length} 个脚本，${failedFiles.length} 个失败：${failedSummary}`);
+    } else {
+      ElMessage.error(`导入失败：${failedSummary}`);
+    }
   } finally {
     importingScript.value = false;
   }
@@ -2374,7 +2418,7 @@ watch(
           <el-tab-pane label="脚本列表" name="scripts">
             <div class="appium-script-list">
               <div class="appium-script-list__toolbar">
-                <el-tooltip content="导入脚本" placement="top" :show-after="200"><span class="appium-script-icon">
+                <el-tooltip content="导入脚本（支持多选）" placement="top" :show-after="200"><span class="appium-script-icon">
                   <el-button size="small" :icon="Upload" aria-label="导入脚本" :loading="importingScript" @click="chooseScriptImportFile" />
                 </span></el-tooltip>
                 <input
@@ -2382,6 +2426,7 @@ watch(
                   class="appium-script-list__file-input"
                   type="file"
                   accept="application/json,.json"
+                  multiple
                   @change="importScriptFile"
                 >
               </div>
@@ -2520,7 +2565,8 @@ watch(
     <el-dialog
       v-model="linkedScriptDialogVisible"
       title="连接脚本"
-      width="520px"
+      width="640px"
+      class="appium-linked-script-dialog"
       align-center
       @closed="closeLinkedScriptDialog"
     >

package/src/appium-recorder/RunHistoryDialog.vue

@@ -72,63 +72,74 @@ onMounted(load);
 </script>
 
 <template>
-  <el-dialog :model-value="true" :title="`${scriptName} · 历史结果对比`" width="min(1200px, 96vw)" align-center append-to-body @closed="emit('close')">
+  <el-dialog :model-value="true" :title="`${scriptName} · 历史结果对比`" width="min(1200px, calc(100vw - 32px))" class="run-history-dialog" align-center append-to-body draggable overflow @closed="emit('close')">
     <div v-loading="loading" class="run-history">
       <div class="history-toolbar">
         <el-select v-model="version" clearable placeholder="全部应用版本" aria-label="应用版本"><el-option v-for="item in versions" :key="item" :value="item" /></el-select>
         <el-select v-model="device" clearable placeholder="全部设备" aria-label="设备"><el-option v-for="item in devices" :key="item" :value="item" /></el-select>
         <el-tooltip content="刷新历史"><el-button :icon="Refresh" aria-label="刷新历史" @click="load" /></el-tooltip>
-        <el-button :disabled="selected.length !== 2" :loading="comparing" @click="compare">对比两次运行</el-button>
+        <el-button type="primary" :disabled="selected.length !== 2" :loading="comparing" @click="compare">对比两次运行</el-button>
         <el-tooltip content="删除选中历史"><el-button :icon="Delete" type="danger" plain :disabled="!selected.length" aria-label="删除选中历史" @click="remove" /></el-tooltip>
       </div>
       <el-alert v-if="error" :title="error" type="error" :closable="false" />
       <el-empty v-else-if="!runs.length && !loading" description="暂无历史结果，后续运行会自动记录" />
       <template v-else>
-        <p>{{ filtered.length }} 次运行 · 通过率 {{ stats.passRate === null ? '—' : `${(stats.passRate * 100).toFixed(1)}%` }}（不含手动终止）</p>
-        <h3>耗时趋势</h3>
-        <svg class="history-trend" viewBox="0 0 800 160" role="img" aria-label="按时间从早到晚的运行耗时趋势">
-          <path d="M20 10V130H790" fill="none" stroke="#a0a8ad" />
-          <polyline :points="points" fill="none" stroke="#168a75" stroke-width="2" />
-          <circle v-for="(run, index) in trend" :key="run.id" :cx="20 + index * 760 / Math.max(1, trend.length - 1)" :cy="130 - run.durationMs / maxDuration * 110" r="4" :fill="run.status === 'failed' ? '#d14343' : '#168a75'">
-            <title>{{ time(run.startedAt) }} · {{ seconds(run.durationMs) }} · {{ run.appVersion || '未知版本' }}</title>
-          </circle>
-          <text x="24" y="14">{{ seconds(maxDuration) }}</text><text x="20" y="153">{{ trend[0] ? time(trend[0].startedAt) : '' }}</text><text x="780" y="153" text-anchor="end">{{ trend.length > 1 ? time(trend[trend.length - 1].startedAt) : '' }}</text>
-        </svg>
-        <el-table :data="filtered" row-key="id" max-height="270" @selection-change="selected = $event">
-          <el-table-column type="selection" width="42" />
-          <el-table-column label="运行时间" min-width="180"><template #default="{ row }">{{ time(row.startedAt) }}</template></el-table-column>
-          <el-table-column prop="appVersion" label="应用版本" min-width="140"><template #default="{ row }">{{ row.appVersion || '未知' }}</template></el-table-column>
-          <el-table-column prop="deviceId" label="设备" min-width="140" />
-          <el-table-column label="结果" width="85"><template #default="{ row }">{{ labels[row.status as keyof typeof labels] }}</template></el-table-column>
-          <el-table-column label="耗时" width="100"><template #default="{ row }">{{ seconds(row.durationMs) }}</template></el-table-column>
-          <el-table-column label="录像" width="70"><template #default="{ row }"><el-tooltip v-if="row.video" content="播放回放视频"><el-button :icon="VideoPlay" aria-label="播放回放视频" @click="videoRun = row" /></el-tooltip></template></el-table-column>
-        </el-table>
-        <h3>失败节点分布</h3>
-        <el-table :data="stats.failures" max-height="220" empty-text="暂无节点失败记录">
-          <el-table-column prop="label" label="节点" min-width="220" />
-          <el-table-column label="失败 / 到达次数" width="145"><template #default="{ row }">{{ row.failures }} / {{ row.runs }}</template></el-table-column>
-          <el-table-column label="观察结果" width="130"><template #default="{ row }">{{ row.runs < 2 ? '样本不足' : row.failures === row.runs ? '持续失败' : '偶发失败' }}</template></el-table-column>
-          <el-table-column label="首次失败 / 版本" min-width="190"><template #default="{ row }">{{ time(row.firstFailure) }} · {{ row.version || '未知' }}</template></el-table-column>
-        </el-table>
+        <div class="history-summary">
+          <strong>{{ filtered.length }}</strong><span>次运行</span>
+          <i />
+          <strong>{{ stats.passRate === null ? '—' : `${(stats.passRate * 100).toFixed(1)}%` }}</strong><span>通过率（不含手动终止）</span>
+        </div>
+        <section class="history-panel">
+          <h3>耗时趋势</h3>
+          <svg class="history-trend" viewBox="0 0 800 160" role="img" aria-label="按时间从早到晚的运行耗时趋势">
+            <path d="M20 10V130H790" fill="none" stroke="#a0a8ad" />
+            <polyline :points="points" fill="none" stroke="#168a75" stroke-width="2" />
+            <circle v-for="(run, index) in trend" :key="run.id" :cx="20 + index * 760 / Math.max(1, trend.length - 1)" :cy="130 - run.durationMs / maxDuration * 110" r="4" :fill="run.status === 'failed' ? '#d14343' : '#168a75'">
+              <title>{{ time(run.startedAt) }} · {{ seconds(run.durationMs) }} · {{ run.appVersion || '未知版本' }}</title>
+            </circle>
+            <text x="24" y="14">{{ seconds(maxDuration) }}</text><text x="20" y="153">{{ trend[0] ? time(trend[0].startedAt) : '' }}</text><text x="780" y="153" text-anchor="end">{{ trend.length > 1 ? time(trend[trend.length - 1].startedAt) : '' }}</text>
+          </svg>
+        </section>
+        <section class="history-panel">
+          <h3>运行记录</h3>
+          <el-table :data="filtered" row-key="id" max-height="270" @selection-change="selected = $event">
+            <el-table-column type="selection" width="42" />
+            <el-table-column label="运行时间" min-width="180"><template #default="{ row }">{{ time(row.startedAt) }}</template></el-table-column>
+            <el-table-column prop="appVersion" label="应用版本" min-width="140"><template #default="{ row }">{{ row.appVersion || '未知' }}</template></el-table-column>
+            <el-table-column prop="deviceId" label="设备" min-width="140" />
+            <el-table-column label="结果" width="90"><template #default="{ row }"><el-tag :type="row.status === 'passed' ? 'success' : row.status === 'failed' ? 'danger' : 'info'" size="small">{{ labels[row.status as keyof typeof labels] }}</el-tag></template></el-table-column>
+            <el-table-column label="耗时" width="100"><template #default="{ row }">{{ seconds(row.durationMs) }}</template></el-table-column>
+            <el-table-column label="录像" width="70"><template #default="{ row }"><el-tooltip v-if="row.video" content="播放回放视频"><el-button :icon="VideoPlay" text aria-label="播放回放视频" @click="videoRun = row" /></el-tooltip></template></el-table-column>
+          </el-table>
+        </section>
+        <section class="history-panel">
+          <h3>失败节点分布</h3>
+          <el-table :data="stats.failures" max-height="220" empty-text="暂无节点失败记录">
+            <el-table-column prop="label" label="节点" min-width="220" />
+            <el-table-column label="失败 / 到达次数" width="145"><template #default="{ row }">{{ row.failures }} / {{ row.runs }}</template></el-table-column>
+            <el-table-column label="观察结果" width="130"><template #default="{ row }">{{ row.runs < 2 ? '样本不足' : row.failures === row.runs ? '持续失败' : '偶发失败' }}</template></el-table-column>
+            <el-table-column label="首次失败 / 版本" min-width="190"><template #default="{ row }">{{ time(row.firstFailure) }} · {{ row.version || '未知' }}</template></el-table-column>
+          </el-table>
+        </section>
       </template>
-      <section v-if="details.length === 2" class="history-comparison">
-        <h3>运行对比 · 总耗时差 {{ seconds(details[1].durationMs - details[0].durationMs) }}</h3>
+      <section v-if="details.length === 2" class="history-panel history-comparison">
+        <div class="history-comparison__header"><h3>运行对比</h3><el-tag type="info">总耗时差 {{ seconds(details[1].durationMs - details[0].durationMs) }}</el-tag></div>
         <el-alert v-if="details[0].deviceId !== details[1].deviceId || details[0].appPackage !== details[1].appPackage" title="两次运行的设备或应用不同，耗时差不能直接归因于版本变化" type="warning" :closable="false" />
         <el-select v-model="nodeKey" clearable filterable placeholder="全部节点截图" aria-label="对比节点"><el-option v-for="node in comparisonNodes" :key="node.key" :label="node.label" :value="node.key" /></el-select>
         <div class="comparison-columns">
-          <section v-for="run in details" :key="run.id">
-            <h4>{{ time(run.startedAt) }} · {{ labels[run.status] }}</h4>
-            <p>{{ run.appVersion || '未知版本' }} · {{ run.deviceId }} · {{ seconds(run.durationMs) }}</p>
-            <p v-if="nodeKey">节点累计耗时（含截图开销）：{{ nodeDuration(run) }}</p>
-            <p v-if="!run.frames.some(frame => !nodeKey || frame.key === nodeKey)">未捕获到对应截图</p>
+          <section v-for="run in details" :key="run.id" class="comparison-run-card">
+            <div class="comparison-run-card__header"><h4>{{ time(run.startedAt) }}</h4><el-tag :type="run.status === 'passed' ? 'success' : run.status === 'failed' ? 'danger' : 'info'" size="small">{{ labels[run.status] }}</el-tag></div>
+            <p class="comparison-run-card__meta">{{ run.appVersion || '未知版本' }} · {{ run.deviceId }} · {{ seconds(run.durationMs) }}</p>
+            <p v-if="nodeKey" class="comparison-run-card__note">节点累计耗时（含截图开销）：{{ nodeDuration(run) }}</p>
+            <p v-if="!run.frames.some(frame => !nodeKey || frame.key === nodeKey)" class="comparison-run-card__note">未捕获到对应截图</p>
             <div class="history-frames">
               <figure v-for="(frame, index) in run.frames.filter(frame => !nodeKey || frame.key === nodeKey)" :key="index">
                 <figcaption>{{ frame.label }} · {{ frame.phase === 'before' ? '执行前' : frame.phase === 'after' ? '执行后' : frame.phase === 'observation' ? '观察采样' : frame.phase }} · {{ time(frame.capturedAt) }}</figcaption>
                 <el-image :src="frame.imageUrl" :preview-src-list="[frame.imageUrl]" preview-teleported fit="contain" loading="lazy" />
               </figure>
             </div>
-            <h4>节点结果</h4><ul><li v-for="(node, index) in run.nodes.filter(node => !nodeKey || node.key === nodeKey)" :key="index">{{ node.label }} · {{ node.failed ? '失败' : '完成' }} · {{ node.durationMs === null ? '耗时未知' : seconds(node.durationMs) }}</li></ul>
-            <h4>关键日志 / 完整日志</h4><el-input v-model="logQuery" clearable placeholder="日志关键字，如 stageLog" aria-label="日志关键字" /><pre>{{ logQuery ? run.output.split('\n').filter(line => line.toLowerCase().includes(logQuery.toLowerCase())).join('\n') || '无匹配日志' : run.output }}</pre>
+            <h4>节点结果</h4><ul class="history-node-results"><li v-for="(node, index) in run.nodes.filter(node => !nodeKey || node.key === nodeKey)" :key="index">{{ node.label }} · {{ node.failed ? '失败' : '完成' }} · {{ node.durationMs === null ? '耗时未知' : seconds(node.durationMs) }}</li></ul>
+            <h4>关键日志 / 完整日志</h4><el-input v-model="logQuery" class="history-log-search" clearable placeholder="日志关键字，如 stageLog" aria-label="日志关键字" /><pre class="history-log-output">{{ logQuery ? run.output.split('\n').filter(line => line.toLowerCase().includes(logQuery.toLowerCase())).join('\n') || '无匹配日志' : run.output }}</pre>
           </section>
         </div>
       </section>
@@ -139,25 +150,54 @@ onMounted(load);
       </el-select>
       <video v-if="videoRun" :src="`${base}/${encodeURIComponent(videoRun.id)}/video?segment=${videoSegment}`" controls preload="metadata" style="width:100%;max-height:70vh" />
     </el-dialog>
+    <template #footer><el-button type="primary" @click="emit('close')">关闭</el-button></template>
   </el-dialog>
 </template>
 
 <style scoped>
-.run-history { max-height: 78vh; overflow: auto; }
-.history-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+:global(.run-history-dialog.el-dialog) { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); overflow: hidden; padding: 0; }
+:global(.run-history-dialog > .el-dialog__body) { flex: 1; min-height: 0; overflow: hidden; padding: 20px; }
+.run-history { display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 0; overflow: auto; padding: 1px 8px 12px 1px; scrollbar-gutter: stable; }
+.history-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); background: var(--ui-bg-soft); box-shadow: var(--ui-shadow-inset); }
 .history-toolbar .el-select { width: 190px; }
-.history-trend { width: 100%; height: 160px; background: #f3faf7; }
+.history-summary { display: flex; align-items: baseline; gap: 6px; padding: 12px 16px; border: 1px solid #dbeafe; border-radius: var(--ui-radius-control); background: #eff6ff; color: var(--ui-text-secondary); font-size: 13px; }
+.history-summary strong { color: var(--ui-primary); font-size: 20px; line-height: 1; }
+.history-summary i { align-self: stretch; width: 1px; margin: 0 8px; background: #bfdbfe; }
+.history-panel { padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); }
+.history-trend { display: block; box-sizing: border-box; width: 100%; height: 160px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); background: linear-gradient(180deg, #f8fafc, #f3faf7); box-shadow: var(--ui-shadow-inset); }
 .history-trend text { font-size: 12px; fill: #52615b; }
-h3 { font-size: 15px; margin: 18px 0 10px; }
-h4 { font-size: 14px; margin: 12px 0 8px; }
+h3 { margin: 0 0 12px; color: var(--ui-text); font-size: 15px; }
+h4 { margin: 16px 0 8px; color: var(--ui-text); font-size: 14px; }
+.history-comparison { display: grid; gap: 14px; }
+.history-comparison__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.history-comparison__header h3 { margin: 0; }
 .history-comparison > .el-select { width: 100%; }
-.comparison-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
-.comparison-columns section { min-width: 0; overflow-wrap: anywhere; }
-.history-frames { max-height: 360px; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
-figure { margin: 0; }
-figcaption { font-size: 12px; }
-.el-image { width: 100%; height: 150px; }
-pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow: auto; background: #f1f5f4; padding: 10px; font-size: 12px; }
-ul { max-height: 160px; overflow: auto; padding-left: 20px; }
-@media (max-width: 650px) { .comparison-columns { grid-template-columns: minmax(0, 1fr); } }
+.comparison-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
+.comparison-run-card { min-width: 0; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); background: #fbfcfe; box-shadow: 0 3px 10px rgb(15 23 42 / 6%); overflow-wrap: anywhere; }
+.comparison-run-card__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.comparison-run-card__header h4 { margin: 0; }
+.comparison-run-card__meta { margin: 6px 0 0; color: var(--ui-text-muted); font-size: 12px; }
+.comparison-run-card__note { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--ui-bg-soft); color: var(--ui-text-secondary); font-size: 12px; }
+.history-frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 360px; overflow: auto; padding: 2px; }
+figure { margin: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); box-shadow: 0 2px 6px rgb(15 23 42 / 6%); }
+figcaption { min-height: 34px; padding: 8px 10px; border-bottom: 1px solid var(--ui-border); background: var(--ui-bg-soft); color: var(--ui-text-secondary); font-size: 12px; line-height: 1.5; }
+.el-image { display: block; width: 100%; height: 150px; }
+.history-node-results { box-sizing: border-box; max-height: 160px; margin: 0; overflow: auto; padding: 10px 12px 10px 30px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); color: var(--ui-text-secondary); font-size: 12px; line-height: 1.8; }
+.history-log-search { margin-bottom: 10px; }
+.history-log-output { box-sizing: border-box; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow: auto; margin: 0; padding: 12px; border: 1px solid #3c3c3c; border-radius: 6px; background: #1e1e1e; box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), inset 0 4px 12px rgb(0 0 0 / 32%), 0 4px 10px rgb(15 23 42 / 12%), 0 18px 30px -20px rgb(15 23 42 / 45%); color: #d4d4d4; font: 12px/1.6 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; scrollbar-color: #424242 #1e1e1e; }
+.history-log-output::-webkit-scrollbar { width: 10px; height: 10px; }
+.history-log-output::-webkit-scrollbar-track { background: #1e1e1e; }
+.history-log-output::-webkit-scrollbar-thumb { border: 2px solid #1e1e1e; border-radius: 6px; background: #424242; }
+.history-log-output::-webkit-scrollbar-thumb:hover { background: #4f4f4f; }
+.history-log-output::selection { background: #264f78; color: #fff; }
+@media (max-width: 760px) {
+  :global(.run-history-dialog > .el-dialog__body) { padding: 14px; }
+  .run-history { padding-right: 3px; }
+  .history-toolbar .el-select { width: 100%; }
+  .history-summary { flex-wrap: wrap; }
+  .history-summary i { display: none; }
+  .history-panel { padding: 12px; }
+  .comparison-columns { grid-template-columns: minmax(0, 1fr); }
+  .history-frames { grid-template-columns: minmax(0, 1fr); }
+}
 </style>

package/src/appium-recorder/api.ts

@@ -118,6 +118,10 @@ export function importAppiumScript(input: unknown) {
   return postJson<{ script: AppiumRecordedScript }>(`${APP_BASE}/api/appium-recorder/scripts/import`, input);
 }
 
+export function importAppiumScripts(inputs: unknown[]) {
+  return postJson<{ scripts: AppiumRecordedScript[] }>(`${APP_BASE}/api/appium-recorder/scripts/import`, { files: inputs });
+}
+
 export async function downloadAppiumScript(id: string) {
   const response = await fetch(`${APP_BASE}/api/appium-recorder/scripts/${encodeURIComponent(id)}/export`);
   if (!response.ok) await readJson(response);

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

@@ -1,42 +1,99 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue';
 import type { AppiumNode } from '../types';
-import { Search } from '@element-plus/icons-vue';
+import { ArrowDown, ArrowUp, Search } from '@element-plus/icons-vue';
+import { flattenNodes } from '../tree';
 
 const props = defineProps<{
   tree: AppiumNode | null;
   selectedId: string;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   select: [node: AppiumNode];
 }>();
 
 const containerRef = ref<HTMLElement | null>(null);
 const query = ref('');
+const currentMatchIndex = ref(-1);
 // Keep the tree data identity stable while typing so filtering is not reset.
 const treeData = computed(() => props.tree ? [props.tree] : []);
 const treeRef = ref<{ setCurrentKey: (key: string) => void; filter: (value: string) => void } | null>(null);
 const filterNode = (value: string, node: AppiumNode) => !value || [node.label, node.resourceId, node.text, node.contentDesc, node.className].some((text) => text?.toLowerCase().includes(value.toLowerCase()));
-watch(query, (value) => treeRef.value?.filter(value));
-watch(() => props.tree, async () => { await nextTick(); treeRef.value?.filter(query.value); });
+const matches = computed(() => {
+  const value = query.value.trim();
+  return value ? flattenNodes(props.tree).filter(node => filterNode(value, node)) : [];
+});
+const matchPosition = computed(() => matches.value.length && currentMatchIndex.value >= 0
+  ? `${currentMatchIndex.value + 1}/${matches.value.length}`
+  : `0/${matches.value.length}`);
+
+const scrollToCurrentNode = async () => {
+  await nextTick();
+  containerRef.value
+    ?.querySelector('.el-tree-node.is-current')
+    ?.scrollIntoView({ block: 'center', inline: 'nearest' });
+};
+
+const focusMatch = (index: number) => {
+  if (!matches.value.length) return;
+  currentMatchIndex.value = (index + matches.value.length) % matches.value.length;
+  const node = matches.value[currentMatchIndex.value];
+  treeRef.value?.setCurrentKey(node.id);
+  emit('select', node);
+  void scrollToCurrentNode();
+};
+
+const refreshSearch = async () => {
+  treeRef.value?.filter(query.value);
+  await nextTick();
+  if (!query.value.trim() || !matches.value.length) {
+    currentMatchIndex.value = -1;
+    return;
+  }
+  const selectedMatchIndex = matches.value.findIndex(node => node.id === props.selectedId);
+  focusMatch(selectedMatchIndex >= 0 ? selectedMatchIndex : 0);
+};
+
+watch(query, refreshSearch);
+watch(() => props.tree, refreshSearch);
 
 watch(
   () => props.selectedId,
   async () => {
-    query.value = '';
+    if (query.value.trim()) {
+      const selectedMatchIndex = matches.value.findIndex(node => node.id === props.selectedId);
+      if (selectedMatchIndex >= 0) currentMatchIndex.value = selectedMatchIndex;
+      else query.value = '';
+    }
     treeRef.value?.setCurrentKey(props.selectedId);
-    await nextTick();
-    containerRef.value
-      ?.querySelector('.el-tree-node.is-current')
-      ?.scrollIntoView({ block: 'center', inline: 'nearest' });
+    await scrollToCurrentNode();
   },
 );
 </script>
 
 <template>
   <div class="appium-tree-container">
-  <el-input v-model="query" size="small" :prefix-icon="Search" clearable placeholder="搜索文字、ID、组件类型" aria-label="搜索组件" />
+  <div class="appium-tree-search">
+    <el-input
+      v-model="query"
+      size="small"
+      :prefix-icon="Search"
+      clearable
+      placeholder="搜索文字、ID、组件类型"
+      aria-label="搜索组件"
+      @keydown.enter.prevent="focusMatch(currentMatchIndex + ($event.shiftKey ? -1 : 1))"
+      @keydown.up.prevent="focusMatch(currentMatchIndex - 1)"
+      @keydown.down.prevent="focusMatch(currentMatchIndex + 1)"
+    />
+    <span class="appium-tree-search__count" aria-live="polite">{{ matchPosition }}</span>
+    <el-tooltip content="上一个匹配项（Shift + Enter）" placement="top" :show-after="200">
+      <el-button :icon="ArrowUp" size="small" aria-label="上一个匹配项" :disabled="!matches.length" @click="focusMatch(currentMatchIndex - 1)" />
+    </el-tooltip>
+    <el-tooltip content="下一个匹配项（Enter）" placement="top" :show-after="200">
+      <el-button :icon="ArrowDown" size="small" aria-label="下一个匹配项" :disabled="!matches.length" @click="focusMatch(currentMatchIndex + 1)" />
+    </el-tooltip>
+  </div>
   <div ref="containerRef" class="appium-tree">
     <el-empty v-if="!tree" description="暂无组件树" />
     <el-tree
@@ -70,6 +127,11 @@ watch(
 
 <style scoped>
 .appium-tree-container { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
+.appium-tree-search { display: flex; align-items: center; gap: 2px; }
+.appium-tree-search .el-input { flex: 1; min-width: 0; }
+.appium-tree-search__count { min-width: 28px; padding: 0 2px; text-align: center; font-size: 11px; color: var(--ui-text-secondary); font-variant-numeric: tabular-nums; }
+.appium-tree-search .el-button { flex: none; width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 5px; }
+.appium-tree-search .el-button + .el-button { margin-left: 0; }
 .appium-tree { flex: 1; height: auto; overflow: auto; }
 .appium-tree :deep(.el-tree) { width: max-content; min-width: 100%; }
 .appium-tree-node { flex: 1 0 auto; }

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

@@ -42,6 +42,15 @@ const visualChangeRoleLabel = computed(() => (
 const visualChangeConfigDisabled = computed(() => Boolean(
   props.disabled || visualChangeConfig.value.role === 'end',
 ));
+const showTapCoordinates = computed(() => (
+  props.step.type === 'coordinateTap'
+  || (['tap', 'tapIfExists'].includes(props.step.type) && props.step.fallback?.strategy === 'bounds')
+));
+const invalidTapCoordinates = computed(() => (
+  showTapCoordinates.value
+  && Number(props.step.fallback?.centerX) === 0
+  && Number(props.step.fallback?.centerY) === 0
+));
 
 function defaultKind(): FlowKind {
   return defaultFlowKind(props.step);
@@ -195,15 +204,6 @@ function patchSelector(patch: Partial<AppiumSelector>) {
           <el-input-number :model-value="step.pinch?.percent ?? 0.5" :disabled="disabled" :min="0.01" :max="1" :step="0.05" controls-position="right" @update:model-value="patchPinch({ percent: $event ?? 0.5 })" />
         </el-form-item>
       </template>
-      <div v-if="step.type === 'coordinateTap'" class="appium-flow-editor__grid">
-        <el-form-item label="坐标 X">
-          <el-input-number :model-value="step.fallback?.centerX ?? 0" :disabled="disabled" :min="0" :max="99999" :precision="0" controls-position="right" aria-label="坐标 X" @update:model-value="patchTapCoordinate('centerX', $event)" />
-        </el-form-item>
-        <el-form-item label="坐标 Y">
-          <el-input-number :model-value="step.fallback?.centerY ?? 0" :disabled="disabled" :min="0" :max="99999" :precision="0" controls-position="right" aria-label="坐标 Y" @update:model-value="patchTapCoordinate('centerY', $event)" />
-        </el-form-item>
-      </div>
-      <CoordinatePointPicker v-if="step.type === 'coordinateTap'" :disabled="disabled" @select="applyTapPoint" />
       <StageLogSettings v-if="step.type === 'log'" :step="step" :disabled="disabled" @update="patchStep" />
       <VariableExtractionSettings v-if="step.type === 'extractVariable'" :step="step" :disabled="disabled" @update="patchStep" />
       <ScriptParameterSettings v-if="step.type === 'runScript'" :step="step" :disabled="disabled" @update="patchStep" />
@@ -428,6 +428,48 @@ function patchSelector(patch: Partial<AppiumSelector>) {
           </el-select>
         </el-form-item>
       </div>
+      <section v-if="showTapCoordinates" class="appium-flow-editor__fallback">
+        <div class="appium-flow-editor__grid">
+          <el-form-item :label="step.type === 'coordinateTap' ? '坐标 X' : '备用坐标 X'">
+            <el-input-number :model-value="step.fallback?.centerX ?? 0" :disabled="disabled" :min="0" :max="99999" :precision="0" controls-position="right" aria-label="坐标 X" @update:model-value="patchTapCoordinate('centerX', $event)" />
+          </el-form-item>
+          <el-form-item :label="step.type === 'coordinateTap' ? '坐标 Y' : '备用坐标 Y'">
+            <el-input-number :model-value="step.fallback?.centerY ?? 0" :disabled="disabled" :min="0" :max="99999" :precision="0" controls-position="right" aria-label="坐标 Y" @update:model-value="patchTapCoordinate('centerY', $event)" />
+          </el-form-item>
+        </div>
+        <el-alert
+          v-if="invalidTapCoordinates"
+          class="appium-flow-editor__fallback-alert"
+          type="warning"
+          show-icon
+          :closable="false"
+          title="备用坐标无效；组件定位失败时无法使用坐标兜底"
+        />
+        <CoordinatePointPicker :disabled="disabled" @select="applyTapPoint" />
+      </section>
     </el-form>
   </div>
 </template>
+
+<style scoped>
+.appium-flow-editor__fallback {
+  display: grid;
+  gap: 10px;
+  margin-top: 8px;
+  padding-top: 12px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.appium-flow-editor__fallback :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.appium-flow-editor__fallback-alert {
+  padding: 8px 12px;
+}
+
+.appium-flow-editor__fallback-alert :deep(.el-alert__title) {
+  font-size: 13px;
+  line-height: 20px;
+}
+</style>