android-midscene-automation 1.1.2 → 1.1.4

package/src/App.vue

@@ -790,7 +790,15 @@ onUnmounted(() => {
       width="760px"
       class="code-dialog"
     >
-      <div class="code-dialog__toolbar">
+      <el-input
+        v-if="codeDialog.editing"
+        v-model="codeDialog.draftCode"
+        type="textarea"
+        resize="none"
+        class="code-dialog__editor"
+      />
+      <pre v-else class="code-block code-dialog__body"><code>{{ codeDialog.code || '暂无代码' }}</code></pre>
+      <template #footer>
         <el-button :icon="CopyDocument" @click="copyDialogCode">复制</el-button>
         <el-button v-if="!codeDialog.editing" type="primary" :icon="Edit" @click="editCodeDialog">
           编辑
@@ -803,15 +811,7 @@ onUnmounted(() => {
             保存
           </el-button>
         </template>
-      </div>
-      <el-input
-        v-if="codeDialog.editing"
-        v-model="codeDialog.draftCode"
-        type="textarea"
-        resize="none"
-        class="code-dialog__editor"
-      />
-      <pre v-else class="code-block code-dialog__body"><code>{{ codeDialog.code || '暂无代码' }}</code></pre>
+      </template>
     </el-dialog>
 
     <AppSidebar :active-menu="activeMenu" :collapsed="sidebarCollapsed"

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/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>

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

@@ -367,6 +367,7 @@ function updateStep(index: number, step: AppiumRecordedStep) {
       class="appium-flow-dialog"
       align-center
       append-to-body
+      draggable
     >
       <div class="appium-flow-toolbar appium-flow-dialog__toolbar">
         <FlowNodeSearch v-model:query="searchQuery" :results="searchResults" :selected-id="searchTargetId" @select="focusSearchResult" />

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

@@ -11,21 +11,55 @@ function update(index: number, patch: Partial<ScriptReturn>) {
 </script>
 
 <template>
-  <el-form-item label="传入子脚本参数"><VariableTable :model-value="step.parameters || []" :disabled="disabled" @update:model-value="emit('update', { parameters: $event })" /></el-form-item>
-  <el-form-item label="返回值映射">
-    <div class="return-mappings">
+  <div class="script-parameter-settings">
+    <section class="script-parameter-settings__section">
+      <div class="script-parameter-settings__heading">
+        <strong>传入子脚本参数</strong>
+        <span>同名参数会覆盖子脚本中的变量值</span>
+      </div>
+      <VariableTable layout="cards" empty-text="暂无传入参数" :model-value="step.parameters || []" :disabled="disabled" @update:model-value="emit('update', { parameters: $event })" />
+    </section>
+    <section class="script-parameter-settings__section">
+      <div class="script-parameter-settings__heading">
+        <strong>返回值映射</strong>
+        <span>将子脚本执行后的变量保存到当前脚本</span>
+      </div>
+      <div class="return-mappings">
       <div v-for="(item, index) in step.returns || []" :key="index" class="return-row">
-        <el-input :model-value="item.name" placeholder="子脚本变量名" aria-label="子脚本返回变量" :disabled="disabled" @update:model-value="update(index, { name: String($event) })" />
-        <span>→</span>
-        <el-input :model-value="item.target" placeholder="当前脚本变量名" aria-label="返回目标变量" :disabled="disabled" @update:model-value="update(index, { target: String($event) })" />
+        <label><span>子脚本变量</span><el-input :model-value="item.name" placeholder="例如：result" aria-label="子脚本返回变量" :disabled="disabled" @update:model-value="update(index, { name: String($event) })" /></label>
+        <span class="return-row__arrow">→</span>
+        <label><span>当前脚本变量</span><el-input :model-value="item.target" placeholder="例如：deviceResult" aria-label="返回目标变量" :disabled="disabled" @update:model-value="update(index, { target: String($event) })" /></label>
         <el-tooltip content="删除映射"><el-button :icon="Delete" text :disabled="disabled" aria-label="删除返回映射" @click="emit('update', { returns: step.returns!.filter((_, i) => i !== index) })" /></el-tooltip>
       </div>
-      <el-button :icon="Plus" :disabled="disabled" size="small" @click="emit('update', { returns: [...(step.returns || []), { name: '', target: '' }] })">新增返回映射</el-button>
-    </div>
-  </el-form-item>
+      <div v-if="!(step.returns || []).length" class="return-mappings__empty">
+        <span>无需获取子脚本返回值</span>
+        <small>需要继续使用子脚本产生的变量时再添加映射</small>
+      </div>
+      <el-button class="return-mappings__add" :icon="Plus" :disabled="disabled" size="small" @click="emit('update', { returns: [...(step.returns || []), { name: '', target: '' }] })">新增返回映射</el-button>
+      </div>
+    </section>
+  </div>
 </template>
 
 <style scoped>
+.script-parameter-settings { container-type: inline-size; display: grid; width: 100%; gap: 18px; }
+.script-parameter-settings__section { min-width: 0; }
+.script-parameter-settings__section + .script-parameter-settings__section { padding-top: 18px; border-top: 1px solid var(--ui-border); }
+.script-parameter-settings__heading { display: grid; gap: 4px; margin-bottom: 10px; }
+.script-parameter-settings__heading strong { color: var(--ui-text); font-size: 14px; font-weight: 600; }
+.script-parameter-settings__heading span { color: var(--ui-text-muted); font-size: 12px; line-height: 1.5; }
 .return-mappings { width: 100%; }
-.return-row { display: grid; grid-template-columns: minmax(0, 1fr) 15px minmax(0, 1fr) 30px; gap: 5px; align-items: center; margin-bottom: 8px; }
+.return-row { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 28px; gap: 8px; align-items: end; margin-bottom: 10px; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); background: var(--ui-surface); }
+.return-row label { display: grid; min-width: 0; gap: 6px; }
+.return-row label > span { color: var(--ui-text-secondary); font-size: 12px; line-height: 1; }
+.return-row__arrow { align-self: end; padding-bottom: 7px; color: var(--ui-text-muted); text-align: center; }
+.return-mappings__empty { display: grid; place-items: center; gap: 7px; min-height: 76px; padding: 14px; border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-control); background: var(--ui-bg-soft); color: var(--ui-text-secondary); text-align: center; }
+.return-mappings__empty small { color: var(--ui-text-muted); font-size: 12px; }
+.return-mappings__add { margin-top: 10px; }
+@container (max-width: 390px) {
+  .return-row { grid-template-columns: minmax(0, 1fr) 28px; }
+  .return-row label { grid-column: 1; }
+  .return-row__arrow { display: none; }
+  .return-row > .el-button { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
+}
 </style>

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

@@ -2,7 +2,7 @@
 import { Delete, Plus, CopyDocument } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { sensitiveVariableName, type TestVariable } from '../variables';
-const props = defineProps<{ modelValue: TestVariable[]; disabled?: boolean }>();
+const props = defineProps<{ modelValue: TestVariable[]; disabled?: boolean; layout?: 'table' | 'cards'; emptyText?: string }>();
 const emit = defineEmits<{ 'update:modelValue': [TestVariable[]] }>();
 function update(index: number, patch: Partial<TestVariable>) {
   emit('update:modelValue', props.modelValue.map((item, i) => i === index ? { ...item, ...patch } : item));
@@ -14,8 +14,34 @@ async function copy(name: string) {
 </script>
 
 <template>
-  <div class="variable-table">
-    <el-table :data="modelValue" empty-text="暂无变量" size="small">
+  <div class="variable-table" :class="{ 'variable-table--cards': layout === 'cards' }">
+    <template v-if="layout === 'cards'">
+      <div v-if="modelValue.length" class="variable-table__cards">
+        <div v-for="(row, index) in modelValue" :key="index" class="variable-table__card">
+          <label class="variable-table__field">
+            <span>变量名</span>
+            <el-input :model-value="row.name" :disabled="disabled" placeholder="例如：account" aria-label="变量名" @update:model-value="update(index, { name: String($event) })" />
+          </label>
+          <label class="variable-table__field">
+            <span>传入值</span>
+            <el-input :model-value="row.value" :type="row.sensitive || sensitiveVariableName(row.name) ? 'password' : 'text'" :show-password="row.sensitive || sensitiveVariableName(row.name)" :disabled="disabled" placeholder="输入固定值或变量引用" aria-label="变量值" @update:model-value="update(index, { value: String($event) })" />
+          </label>
+          <div class="variable-table__card-footer">
+            <el-checkbox :model-value="row.sensitive || sensitiveVariableName(row.name)" :disabled="disabled || sensitiveVariableName(row.name)" @update:model-value="update(index, { sensitive: Boolean($event) })">敏感值</el-checkbox>
+            <div class="variable-table__actions">
+              <el-tooltip content="复制变量引用"><el-button :icon="CopyDocument" text size="small" :disabled="!row.name" aria-label="复制变量引用" @click="copy(row.name)" /></el-tooltip>
+              <el-tooltip content="删除参数"><el-button :icon="Delete" text size="small" :disabled="disabled" aria-label="删除变量" @click="emit('update:modelValue', modelValue.filter((_, i) => i !== index))" /></el-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="variable-table__empty">
+        <span>{{ emptyText || '暂无变量' }}</span>
+        <small>子脚本将使用自身已有的变量值</small>
+        <el-button :icon="Plus" :disabled="disabled" size="small" @click="emit('update:modelValue', [{ name: '', value: '', sensitive: false }])">新增参数</el-button>
+      </div>
+    </template>
+    <el-table v-else :data="modelValue" empty-text="暂无变量" size="small">
       <el-table-column label="变量名" min-width="110"><template #default="{ row, $index }"><el-input :model-value="row.name" :disabled="disabled" aria-label="变量名" @update:model-value="update($index, { name: String($event) })" /></template></el-table-column>
       <el-table-column label="值" min-width="125"><template #default="{ row, $index }"><el-input :model-value="row.value" :type="row.sensitive || sensitiveVariableName(row.name) ? 'password' : 'text'" :show-password="row.sensitive || sensitiveVariableName(row.name)" :disabled="disabled" aria-label="变量值" @update:model-value="update($index, { value: String($event) })" /></template></el-table-column>
       <el-table-column label="敏感" width="65"><template #default="{ row, $index }"><el-checkbox :model-value="row.sensitive || sensitiveVariableName(row.name)" :disabled="disabled || sensitiveVariableName(row.name)" aria-label="敏感变量" @update:model-value="update($index, { sensitive: Boolean($event) })" /></template></el-table-column>
@@ -24,8 +50,8 @@ async function copy(name: string) {
         <el-tooltip content="删除变量"><el-button :icon="Delete" text size="small" :disabled="disabled" aria-label="删除变量" @click="emit('update:modelValue', modelValue.filter((_, i) => i !== $index))" /></el-tooltip>
       </div></template></el-table-column>
     </el-table>
-    <div class="variable-table__footer">
-      <el-button :icon="Plus" :disabled="disabled" size="small" @click="emit('update:modelValue', [...modelValue, { name: '', value: '', sensitive: false }])">新增变量</el-button>
+    <div v-if="layout !== 'cards' || modelValue.length" class="variable-table__footer">
+      <el-button :icon="Plus" :disabled="disabled" size="small" @click="emit('update:modelValue', [...modelValue, { name: '', value: '', sensitive: false }])">{{ layout === 'cards' ? '新增参数' : '新增变量' }}</el-button>
       <slot />
     </div>
   </div>
@@ -33,6 +59,13 @@ async function copy(name: string) {
 
 <style scoped>
 .variable-table { min-width: 0; }
+.variable-table__cards { display: grid; gap: 10px; }
+.variable-table__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 10px 12px; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); background: var(--ui-surface); }
+.variable-table__field { display: grid; min-width: 0; gap: 6px; }
+.variable-table__field > span { color: var(--ui-text-secondary); font-size: 12px; line-height: 1; }
+.variable-table__card-footer { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; min-height: 28px; padding-top: 2px; }
+.variable-table__empty { display: grid; place-items: center; gap: 7px; min-height: 112px; padding: 16px; border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-control); background: var(--ui-bg-soft); color: var(--ui-text-secondary); text-align: center; }
+.variable-table__empty small { color: var(--ui-text-muted); font-size: 12px; }
 .variable-table__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
 .variable-table__actions { display: flex; align-items: center; gap: 2px; }
 .variable-table__actions :deep(.el-button) { width: 26px; height: 28px; padding: 0; }
@@ -40,4 +73,10 @@ async function copy(name: string) {
 .variable-table :deep(.el-table td.el-table__cell) { padding: 8px 0; }
 .variable-table :deep(.el-table .cell) { padding: 0 8px; }
 .variable-table :deep(.el-button + .el-button) { margin-left: 0; }
+.variable-table--cards .variable-table__footer :deep(.el-button) { margin-left: 0; }
+@container (max-width: 390px) {
+  .variable-table__card { grid-template-columns: minmax(0, 1fr); }
+  .variable-table__card-footer { grid-column: 1; }
+}
+.variable-table--cards { container-type: inline-size; }
 </style>

package/src/appium-recorder/tree.ts

@@ -19,6 +19,7 @@ function parseBounds(value: string): AppiumBounds | undefined {
   const top = Number(match[2]);
   const right = Number(match[3]);
   const bottom = Number(match[4]);
+  if (right <= left || bottom <= top) return undefined;
   return {
     left,
     top,