android-midscene-automation 0.2.1 → 0.2.3

package/src/composables/use-script-execution.ts

@@ -0,0 +1,277 @@
+import { computed, ref, shallowRef, onScopeDispose, type Ref } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import * as api from '../api';
+import type { SavedScript, ExecutionStep, RunScriptStreamEvent } from '../types';
+
+export function useScriptExecution(selectedScript: Ref<SavedScript | undefined>, selectedScriptId: Ref<string>, playgroundDeviceId: Ref<string>, loadSavedScripts: (id?: string) => Promise<void>, getMidsceneModelConfigError: () => string) {
+  const isRunningScript = ref(false);
+  const isStoppingScript = ref(false);
+  const executionLog = ref('');
+  const executionProcess = ref<ExecutionStep[]>([]);
+  const lastRunStatus = ref('');
+  const runStartedAt = shallowRef<number | null>(null);
+  const runningElapsedNow = shallowRef(0);
+  let executionProgressTimer: number | null = null;
+  let scriptRunAbortController: AbortController | null = null;
+  const buildExecutionProcess = (script: SavedScript): ExecutionStep[] => {
+    const activeSteps = (script.steps || []).filter((step) => step.enabled !== false);
+    if (!activeSteps.length) {
+      return [
+        {
+          id: 'script',
+          sourceIndex: 0,
+          title: script.promptTitle || script.name,
+          method: 'script',
+          prompt: script.filePath,
+          status: 'pending',
+          detail: '等待执行脚本',
+        },
+      ];
+    }
+
+    return activeSteps
+      .map((step, index) => ({
+        id: step.id || `${script.id}-${index}`,
+        sourceIndex: index,
+        title: step.label || `步骤 ${index + 1}`,
+        method: step.type,
+        prompt: step.prompt || step.value || '',
+        status: 'pending' as const,
+        detail: '等待前置步骤完成',
+      }))
+      .filter((step) => step.title !== '统一处理弹窗');
+  };
+
+  const markExecutionProcess = (success: boolean, output: string) => {
+    if (!executionProcess.value.length) return;
+    const runningIndex = executionProcess.value.findIndex((step) => step.status === 'running');
+    const errorIndex = executionProcess.value.findIndex((step) => step.status === 'error');
+    const failedIndex = success
+      ? -1
+      : runningIndex >= 0
+        ? runningIndex
+        : errorIndex >= 0
+          ? errorIndex
+          : Math.max(0, executionProcess.value.length - 1);
+    executionProcess.value = executionProcess.value.map((step, index) => {
+      if (success || index < failedIndex) {
+        return { ...step, status: 'success', detail: '执行完成' };
+      }
+      if (index === failedIndex) {
+        return {
+          ...step,
+          status: 'error',
+          detail: output || '执行失败',
+        };
+      }
+      return step;
+    });
+  };
+
+  const formatElapsed = (startedAt: number) => `${Math.max(0, Math.floor((Date.now() - startedAt) / 1000))} 秒`;
+  const formatCompactDuration = (milliseconds: number) => {
+    const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return minutes ? `${minutes}m${seconds}s` : `${seconds}s`;
+  };
+  const runningElapsedText = computed(() => {
+    if (lastRunStatus.value !== '执行中' || !runStartedAt.value) return '';
+    return formatCompactDuration(runningElapsedNow.value - runStartedAt.value);
+  });
+
+  const updateRunningStepElapsed = () => {
+    if (runStartedAt.value) {
+      runningElapsedNow.value = Date.now();
+    }
+    executionProcess.value = executionProcess.value.map((step) => {
+      if (step.status !== 'running' || !step.startedAt) {
+        return step;
+      }
+      return {
+        ...step,
+        detail: `执行中，已耗时 ${formatElapsed(step.startedAt)}`,
+      };
+    });
+  };
+
+  const startExecutionProgressTimer = () => {
+    if (executionProgressTimer) {
+      window.clearInterval(executionProgressTimer);
+    }
+    executionProgressTimer = window.setInterval(updateRunningStepElapsed, 1000);
+  };
+
+  const stopExecutionProgressTimer = () => {
+    if (!executionProgressTimer) return;
+    window.clearInterval(executionProgressTimer);
+    executionProgressTimer = null;
+  };
+
+  const appendExecutionStepLog = (event: Extract<RunScriptStreamEvent, { type: 'step' }>) => {
+    const title = event.title || `步骤 ${event.index + 1}`;
+    if (event.status === 'start') {
+      executionLog.value += `[步骤 ${event.index + 1}] 开始：${title}\n`;
+      return;
+    }
+    if (event.status === 'success') {
+      executionLog.value += `[步骤 ${event.index + 1}] 完成：${title}\n`;
+      return;
+    }
+    executionLog.value += `[步骤 ${event.index + 1}] 失败：${title}${event.detail ? `\n${event.detail}` : ''}\n`;
+  };
+
+  const applyRunScriptEvent = (event: RunScriptStreamEvent) => {
+    if (event.type === 'output') {
+      executionLog.value += event.chunk;
+      if (!lastRunStatus.value) {
+        lastRunStatus.value = '执行中';
+      }
+      return;
+    }
+
+    if (event.type === 'error') {
+      executionLog.value += `${event.message}\n`;
+      markExecutionProcess(false, event.message);
+      lastRunStatus.value = '执行失败';
+      return;
+    }
+
+    if (event.type === 'step') {
+      appendExecutionStepLog(event);
+      executionProcess.value = executionProcess.value.map((step) => {
+        if (step.sourceIndex !== event.index) {
+          return step;
+        }
+
+        if (event.status === 'start') {
+          const startedAt = Date.now();
+          return { ...step, status: 'running', startedAt, detail: `执行中，已耗时 ${formatElapsed(startedAt)}` };
+        }
+        if (event.status === 'success') {
+          return { ...step, status: 'success', startedAt: undefined, detail: '执行完成' };
+        }
+        return {
+          ...step,
+          status: 'error',
+          startedAt: undefined,
+          detail: event.detail || '执行失败',
+        };
+      });
+      return;
+    }
+
+    if (event.type === 'done') {
+      if (event.output && !executionLog.value.trim()) {
+        executionLog.value = event.output;
+      }
+      markExecutionProcess(event.success, event.output || executionLog.value);
+      lastRunStatus.value = event.success ? '执行完成' : event.output.includes('脚本执行已停止') ? '已停止' : '执行失败';
+    }
+  };
+
+  const runSelectedScript = async () => {
+    if (isRunningScript.value) return;
+
+    if (!selectedScript.value) {
+      lastRunStatus.value = '请先选择脚本';
+      return;
+    }
+
+    const modelConfigError = getMidsceneModelConfigError();
+    if (modelConfigError) {
+      lastRunStatus.value = '模型配置不完整';
+      executionLog.value = modelConfigError;
+      ElMessage.error('Midscene 模型配置不完整');
+      return;
+    }
+
+    isRunningScript.value = true;
+    isStoppingScript.value = false;
+    runStartedAt.value = Date.now();
+    runningElapsedNow.value = runStartedAt.value;
+    executionLog.value = '';
+    lastRunStatus.value = '执行中';
+
+    try {
+      await loadSavedScripts(selectedScriptId.value);
+      const script = selectedScript.value;
+      if (!script) {
+        throw new Error('脚本不存在');
+      }
+
+      executionProcess.value = buildExecutionProcess(script);
+      if (executionProcess.value[0]) {
+        const startedAt = Date.now();
+        executionProcess.value[0].status = 'running';
+        executionProcess.value[0].startedAt = startedAt;
+        executionProcess.value[0].detail = `执行中，已耗时 ${formatElapsed(startedAt)}`;
+      }
+      startExecutionProgressTimer();
+
+      scriptRunAbortController = new AbortController();
+      await api.runScript(
+        {
+          code: script.code,
+          scriptName: script.name,
+          deviceId: playgroundDeviceId.value,
+          steps: script.steps || [],
+          signal: scriptRunAbortController.signal,
+        },
+        applyRunScriptEvent,
+      );
+
+      if (!lastRunStatus.value) {
+        lastRunStatus.value = '执行完成';
+      }
+      if (!executionLog.value.trim()) {
+        executionLog.value = '执行完成，无输出';
+      }
+    } catch (error) {
+      const isAbortError = error instanceof DOMException && error.name === 'AbortError';
+      executionLog.value = isAbortError ? '脚本执行已停止。' : error instanceof Error ? error.message : '执行失败';
+      markExecutionProcess(false, executionLog.value);
+      lastRunStatus.value = isAbortError ? '已停止' : '执行失败';
+    } finally {
+      stopExecutionProgressTimer();
+      isRunningScript.value = false;
+      isStoppingScript.value = false;
+      runStartedAt.value = null;
+      runningElapsedNow.value = 0;
+      scriptRunAbortController = null;
+    }
+  };
+
+  const stopSelectedScript = async () => {
+    if (!isRunningScript.value || isStoppingScript.value) return;
+
+    try {
+      await ElMessageBox.confirm(
+        '停止后当前脚本进程会立即终止，未完成步骤不会继续执行。确定停止吗？',
+        '确认停止执行',
+        {
+          confirmButtonText: '停止执行',
+          cancelButtonText: '继续执行',
+          type: 'warning',
+          confirmButtonClass: 'el-button--danger',
+        },
+      );
+    } catch {
+      return;
+    }
+
+    isStoppingScript.value = true;
+    lastRunStatus.value = '停止中';
+
+    try {
+      await api.stopScript();
+    } catch (error) {
+      executionLog.value += `${error instanceof Error ? error.message : '停止执行失败'}\n`;
+      scriptRunAbortController?.abort();
+    }
+  };
+
+
+  onScopeDispose(() => { stopExecutionProgressTimer(); scriptRunAbortController?.abort(); });
+  return { isRunningScript, isStoppingScript, executionLog, executionProcess, lastRunStatus, runningElapsedText, runSelectedScript, stopSelectedScript };
+}

package/src/config/credentials.ts

@@ -0,0 +1,2 @@
+// The browser receives this marker instead of a saved API key.
+export const SAVED_API_KEY = '••••••••';

package/src/config/use-appium-auto-save.ts

@@ -1,5 +1,5 @@
 import { resolveReportSummary } from '../appium-recorder/report-summary';
-import { onScopeDispose, shallowRef, watch } from 'vue';
+import { computed, onScopeDispose, shallowRef, watch } from 'vue';
 import type { ConfigForm } from '../types';
 import { isHexColor } from '../appium-recorder/flow-appearance';
 import { resolveAiDeduplication } from '../appium-recorder/ai-deduplication';
@@ -8,7 +8,10 @@ import { resolveAiDeduplication } from '../appium-recorder/ai-deduplication';
 export function useAppiumAutoSave(config: ConfigForm, save: (value: Omit<ConfigForm['appium'], 'model' | 'promptOptimizer'>) => Promise<unknown>, onError: (error: unknown) => void) {
   const saving = shallowRef(false);
   const status = shallowRef('');
-  let initialized = false, saved = '', pending: string | undefined;
+  const saved = shallowRef('');
+  const initialized = shallowRef(false);
+  const failed = shallowRef(false);
+  let pending: string | undefined;
   let timer: ReturnType<typeof setTimeout> | undefined;
   // 模型只能通过“测试并保存”提交，自动保存仅观察其余设置。
   function snapshotSettings() {
@@ -19,7 +22,8 @@ export function useAppiumAutoSave(config: ConfigForm, save: (value: Omit<ConfigF
       customPresets: reportSummary.customPresets,
     } } : {}) });
   }
-  function initialize() { saved = snapshotSettings(); initialized = true; }
+  function initialize() { saved.value = snapshotSettings(); initialized.value = true; }
+  const dirty = computed(() => initialized.value && snapshotSettings() !== saved.value);
   async function flush() {
     if (saving.value || pending === undefined) return;
     saving.value = true;
@@ -27,22 +31,27 @@ export function useAppiumAutoSave(config: ConfigForm, save: (value: Omit<ConfigF
       while (pending !== undefined) {
         const snapshot = pending;
         pending = undefined;
-        if (snapshot === saved) { status.value = '已自动保存'; continue; }
+        if (snapshot === saved.value) { status.value = '已自动保存'; continue; }
         status.value = '正在自动保存…';
         try {
           await save(JSON.parse(snapshot));
-          saved = snapshot;
+          saved.value = snapshot;
+          failed.value = false;
           if (snapshotSettings() === snapshot) status.value = '已自动保存';
         } catch (error) {
-          status.value = '自动保存失败，请重新修改后重试';
+          status.value = '自动保存失败，修改已保留';
+          failed.value = true;
           onError(error);
-          // 不无限重试失败请求；若用户期间有新修改，继续保存最新快照。
+          // 保留失败快照，等待显式重试或下次修改，避免离线时无限请求。
+          pending = pending ?? snapshot;
+          break;
         }
       }
     } finally { saving.value = false; }
   }
-  watch(snapshotSettings, snapshot => {
-    if (!initialized) return;
+  function queue(snapshot: string) {
+    if (!initialized.value) return;
+    failed.value = false;
     clearTimeout(timer);
     pending = undefined;
     const value = config.appium;
@@ -56,7 +65,9 @@ export function useAppiumAutoSave(config: ConfigForm, save: (value: Omit<ConfigF
     pending = snapshot;
     status.value = '等待自动保存…';
     timer = setTimeout(() => { void flush(); }, 350);
-  }, { flush: 'sync' });
+  }
+  watch(snapshotSettings, queue, { flush: 'sync' });
+  function retry() { queue(snapshotSettings()); clearTimeout(timer); return flush(); }
   onScopeDispose(() => { clearTimeout(timer); pending = undefined; });
-  return { initialize, saving, status };
+  return { initialize, saving, status, failed, dirty, retry };
 }

package/src/config/use-model-config.ts

@@ -0,0 +1,157 @@
+import { reactive, ref, shallowRef } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { resolveReportSummary } from '../appium-recorder/report-summary';
+import { isAiRecognitionModelConfigured } from '../appium-recorder/ai-recognition';
+import { resolveAiDeduplication } from '../appium-recorder/ai-deduplication';
+import { resolveAiPromptPresets } from '../appium-recorder/ai-prompt-presets';
+import { normalizeFlowBackground, normalizeFlowLineColor } from '../appium-recorder/flow-appearance';
+import { selectMidsceneModelProvider, type MidsceneModelProvider } from './midscene-model-presets';
+import { useAppiumAutoSave } from './use-appium-auto-save';
+import type { ConfigForm } from '../types';
+import * as api from '../api';
+
+export function useModelConfig() {
+  const isSavingModelConfig = ref(false);
+  const testingModelKey = ref('');
+  const modelTestStatus = reactive({
+    midscene: '',
+    scriptOptimizer: '',
+    appium: '',
+    promptOptimizer: '',
+  });
+  const aiRecognitionModelConfigured = shallowRef(false);
+  const ready = shallowRef(false);
+  const configForm = reactive<ConfigForm>({
+    appium: { reportSummary: resolveReportSummary(), model: { baseUrl: '', apiKey: '', name: '' }, promptOptimizer: { model: { baseUrl: '', apiKey: '', name: '' } }, aiDeduplication: resolveAiDeduplication(), screenshotReport: false },
+    runtime: {
+      androidSdkPath: '',
+      reportOutputPath: '',
+    },
+    midscene: {
+      model: {
+        provider: 'custom',
+        baseUrl: '',
+        apiKey: '',
+        name: '',
+        family: '',
+      },
+      env: {},
+    },
+    scriptOptimizer: {
+      model: {
+        baseUrl: '',
+        apiKey: '',
+        name: '',
+      },
+    },
+  });
+  const lastCustomMidsceneModel = reactive({
+    baseUrl: '',
+    apiKey: '',
+    name: '',
+    family: '',
+  });
+
+  const appiumAutoSave = useAppiumAutoSave(configForm, async value => {
+    await api.saveAppiumConfig(value);
+  }, error => {
+    ElMessage.error(error instanceof Error ? error.message : 'Appium 配置自动保存失败');
+  });
+
+  const loadConfig = async () => {
+    if (ready.value) return;
+    const payload = await api.getConfig();
+    Object.assign(configForm.runtime, payload.runtime || {});
+    Object.assign(configForm.midscene.model, payload.midscene.model);
+    Object.keys(configForm.midscene.env).forEach((key) => {
+      delete configForm.midscene.env[key];
+    });
+    Object.assign(configForm.midscene.env, payload.midscene.env || {});
+    Object.assign(configForm.scriptOptimizer.model, payload.scriptOptimizer.model);
+    Object.assign(configForm.appium.model, payload.appium?.model || { baseUrl: '', apiKey: '', name: '' });
+    Object.assign(configForm.appium.promptOptimizer!.model, payload.appium?.promptOptimizer?.model || { baseUrl: '', apiKey: '', name: '' });
+    configForm.appium.screenshotReport = payload.appium?.screenshotReport === true;
+    configForm.appium.reportSummary = resolveReportSummary(payload.appium?.reportSummary);
+    configForm.appium.aiDeduplication = resolveAiDeduplication(payload.appium?.aiDeduplication);
+    configForm.appium.aiPromptPresets = resolveAiPromptPresets(payload.appium?.aiPromptPresets);
+    configForm.appium.flowBackgroundColor = normalizeFlowBackground(payload.appium?.flowBackgroundColor);
+    configForm.appium.flowLineColor = normalizeFlowLineColor(payload.appium?.flowLineColor);
+    appiumAutoSave.initialize();
+    ready.value = true;
+    aiRecognitionModelConfigured.value = isAiRecognitionModelConfigured(configForm.appium.model);
+    if (configForm.midscene.model.provider !== 'codex') {
+      rememberCustomMidsceneModel();
+    }
+  };
+
+  const rememberCustomMidsceneModel = () => {
+    if (configForm.midscene.model.provider === 'codex') return;
+    lastCustomMidsceneModel.baseUrl = configForm.midscene.model.baseUrl;
+    lastCustomMidsceneModel.apiKey = configForm.midscene.model.apiKey;
+    lastCustomMidsceneModel.name = configForm.midscene.model.name;
+    lastCustomMidsceneModel.family = configForm.midscene.model.family;
+  };
+
+  const updateMidsceneModelProvider = (provider: MidsceneModelProvider) => {
+    if (configForm.midscene.model.provider !== 'codex') {
+      rememberCustomMidsceneModel();
+    }
+    Object.assign(configForm.midscene.model, selectMidsceneModelProvider(provider, configForm.midscene.model, lastCustomMidsceneModel));
+    modelTestStatus.midscene = '';
+  };
+
+  const getMidsceneModelConfigError = () => {
+    const model = configForm.midscene.model;
+    const missing = [];
+
+    if (!model.baseUrl.trim()) missing.push('Base URL');
+    if (!model.name.trim()) missing.push('Model Name');
+    if (!model.family.trim()) missing.push('Model Family');
+    if (model.provider !== 'codex' && !model.apiKey.trim()) missing.push('API Key');
+
+    if (!missing.length) return '';
+    return `Midscene 模型配置不完整：缺少 ${missing.join('、')}。请在“参数配置 > Midscene配置 > Midscene 模型”中选择“使用 Codex”，或补齐自定义提供方后测试并保存。`;
+  };
+
+  const saveModelConfig = async () => {
+    if (!ready.value || isSavingModelConfig.value) return;
+    isSavingModelConfig.value = true;
+    try {
+      await api.saveConfig({ runtime: { ...configForm.runtime } });
+      ElMessage.success('参数配置已保存');
+    } catch (error) {
+      const message = error instanceof Error ? error.message : '参数配置保存失败';
+      ElMessage.error(message);
+    } finally {
+      isSavingModelConfig.value = false;
+    }
+  };
+
+  const testModel = async (key: 'midscene' | 'scriptOptimizer' | 'appium' | 'promptOptimizer') => {
+    if (!ready.value || testingModelKey.value) return;
+    testingModelKey.value = key;
+    modelTestStatus[key] = '';
+    const model = { ...(key === 'promptOptimizer'
+        ? configForm.appium.promptOptimizer!.model
+        : configForm[key].model) };
+
+    try {
+      const payload = await api.testModel({ modelKey: key, model, save: true });
+      if (!payload.saved) throw new Error('模型未保存，请重试');
+      const successMessage = `测试通过，配置已保存${payload.content ? `：${payload.content}` : ''}`;
+      modelTestStatus[key] = '';
+      if (key === 'appium') aiRecognitionModelConfigured.value = isAiRecognitionModelConfigured(model);
+      void ElMessageBox.alert(successMessage, '模型测试成功', {
+        type: 'success',
+        confirmButtonText: '确定',
+      }).catch(() => {});
+    } catch (error) {
+      modelTestStatus[key] = `未保存：${error instanceof Error ? error.message : '测试失败'}`;
+    } finally {
+      testingModelKey.value = '';
+    }
+  };
+
+
+  return { ready, configForm, appiumAutoSave, isSavingModelConfig, testingModelKey, modelTestStatus, aiRecognitionModelConfigured, loadConfig, updateMidsceneModelProvider, getMidsceneModelConfigError, saveModelConfig, testModel };
+}

package/src/main.ts

@@ -1,10 +1,10 @@
 import { createApp } from 'vue';
 import ElementPlus from 'element-plus';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import 'element-plus/dist/index.css';
 import '@vue-flow/core/dist/style.css';
 import '@vue-flow/core/dist/theme-default.css';
 import App from './App.vue';
 import './style.css';
-import './ui-refresh.css';
 
-createApp(App).use(ElementPlus).mount('#app');
+createApp(App).use(ElementPlus, { locale: zhCn }).mount('#app');

package/src/pages/AnalysisPage.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { shallowRef, watch } from 'vue';
+import { Refresh } from '@element-plus/icons-vue';
+import { getTestAnalytics } from '../api';
+import type { AnalysisResponse } from '../analytics/summary';
+import AnalysisCharts from '../components/analytics/AnalysisCharts.vue';
+import ReportAnalysis from '../components/analytics/ReportAnalysis.vue';
+const props = defineProps<{ active: boolean }>();
+const days = shallowRef(0);
+const data = shallowRef<AnalysisResponse | null>(null);
+const loading = shallowRef(false);
+const error = shallowRef('');
+let requestId = 0;
+async function refresh() {
+  const id = ++requestId;
+  loading.value = true;
+  error.value = '';
+  try { const result = await getTestAnalytics(days.value); if (id === requestId) data.value = result; }
+  catch (reason) { if (id === requestId) error.value = reason instanceof Error ? reason.message : '统计数据加载失败'; }
+  finally { if (id === requestId) loading.value = false; }
+}
+watch(() => props.active, active => { if (active) void refresh(); }, { immediate: true });
+watch(days, () => { void refresh(); });
+</script>
+
+<template>
+  <div class="analysis-page" :aria-busy="loading">
+    <div class="analysis-page__heading">
+      <div><h1>测试分析</h1><p>基于已保存脚本与测试执行记录，查看两种引擎的运行情况。</p></div>
+      <div class="analysis-page__actions">
+        <el-select v-model="days" aria-label="统计时间范围" style="width: 150px">
+          <el-option label="全部时间" :value="0" /><el-option label="最近 7 天" :value="7" /><el-option label="最近 30 天" :value="30" /><el-option label="最近 90 天" :value="90" />
+        </el-select>
+        <el-button :icon="Refresh" :loading="loading" @click="refresh">刷新统计</el-button>
+      </div>
+    </div>
+    <el-alert v-if="error" type="error" :closable="false" show-icon :title="error"><el-button link type="primary" @click="refresh">重新加载</el-button></el-alert>
+    <div v-if="loading && !data" class="page-loading" role="status">正在汇总测试记录…</div>
+    <template v-if="data">
+      <div class="analysis-page__note">
+        <span>{{ data.days ? `最近 ${data.days} 天` : '全部时间' }} · 通过率 = 通过 ÷（通过 + 失败）；平均耗时仅统计已完成测试，停止和运行中单独列出。</span>
+        <span>更新于 {{ new Date(data.generatedAt).toLocaleString('zh-CN', { hour12: false }) }}{{ loading ? ' · 更新中…' : '' }}</span>
+      </div>
+      <AnalysisCharts :data="data" />
+      <ReportAnalysis title="Midscene" :summary="data.midscene" />
+      <ReportAnalysis title="Appium" :summary="data.appium" />
+      <p class="analysis-page__footnote">统计来自数据库中的执行记录，不依赖 HTML 报告开关。Midscene 按历史脚本名称关联，Appium 按脚本 ID 关联；已删除或无法匹配的记录标记为“历史脚本”。未保存执行记录的测试不计入统计。</p>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.analysis-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
+.analysis-page__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
+h1 { margin: 0; font-size: 22px; font-weight: 600; }
+.analysis-page__heading p { margin: 8px 0 0; color: var(--ui-text-secondary); font-size: 13px; }
+.analysis-page__actions { display: flex; gap: 12px; }
+.analysis-page__note { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ui-text-secondary); }
+.analysis-page__footnote { margin: 0; color: var(--ui-text-secondary); font-size: 12px; line-height: 1.8; }
+</style>

package/src/pages/ConfigPage.vue

@@ -14,12 +14,14 @@ defineProps<{
   isSavingModelConfig: boolean;
   isSavingAppPreset: boolean;
   appiumSaveStatus?: string;
+  appiumSaveFailed?: boolean;
   modelTestStatus: { midscene: string; scriptOptimizer: string; appium?: string; promptOptimizer?: string };
 }>();
 
 defineEmits<{
   testModel: [key: 'midscene' | 'scriptOptimizer' | 'appium' | 'promptOptimizer'];
   saveModelConfig: [];
+  retryAppiumSave: [];
   saveAppPreset: [];
   editAppPreset: [app: AppPreset];
   deleteAppPreset: [id: string];
@@ -115,6 +117,8 @@ function handleTabKeydown(event: KeyboardEvent, index: number) {
         :prompt-optimizer-test-status="modelTestStatus.promptOptimizer"
         @test-prompt-optimizer-model="$emit('testModel', 'promptOptimizer')"
         :save-status="appiumSaveStatus"
+        :save-failed="appiumSaveFailed"
+        @retry-save="$emit('retryAppiumSave')"
         @test-model="$emit('testModel', 'appium')"
       />
     </section>
@@ -123,13 +127,40 @@ function handleTabKeydown(event: KeyboardEvent, index: number) {
 
 <style scoped>
 .config-tabs {
+  display: flex;
+  width: 100%;
   max-width: 100%;
   flex-wrap: wrap;
+  gap: 28px;
+  margin: 0;
+  padding: 0 28px;
+  border: 0;
+  border-bottom: 1px solid var(--ui-border);
+  border-radius: 0;
+  background: var(--ui-surface);
 }
-
-@media (max-width: 640px) {
-  :deep(.config-model-grid) {
-    grid-template-columns: minmax(0, 1fr);
-  }
+.config-tabs .subnav__item {
+  min-height: 46px;
+  padding: 10px 2px;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  font-size: 14px;
+}
+.config-tabs .subnav__item--active {
+  border-bottom-color: var(--ui-primary);
+  background: transparent;
+  color: var(--ui-primary);
+  box-shadow: none;
+}
+.config-page > [role="tabpanel"] { padding: 24px; }
+:deep(.config-module-card > .el-card__header) { padding: 18px 24px; font-size: 16px; font-weight: 500; }
+:deep(.config-module-card > .el-card__body) { padding: 24px; background: var(--ui-surface); }
+:deep(.el-form-item) { margin-bottom: 22px; }
+:deep(.el-form-item__label) { margin-bottom: 8px; font-size: 14px; }
+:deep(.el-input__wrapper), :deep(.el-select__wrapper) { min-height: 36px; }
+:deep(.config-grid) { margin-bottom: 0; gap: 24px; }
+@media (max-width: 1000px) {
+  :deep(.config-model-grid) { grid-template-columns: minmax(0, 1fr); }
+  :deep(.config-model-grid > section + section) { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--ui-border); }
 }
 </style>