android-midscene-automation 0.1.43 → 0.2.2

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>