android-midscene-automation 0.1.41 → 0.1.43

package/src/components/config/AiPromptPresetsSettings.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { Delete, Plus } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import { resolveAiPromptPresets, type AiPromptPreset } from '../../appium-recorder/ai-prompt-presets';
+import { validateAiRecognitionPrompt } from '../../appium-recorder/ai-recognition';
+
+const props = defineProps<{ modelValue?: AiPromptPreset[] }>();
+const emit = defineEmits<{ 'update:modelValue': [presets: AiPromptPreset[]] }>();
+const presets = computed(() => resolveAiPromptPresets(props.modelValue));
+const draft = ref('');
+const sceneName = ref('');
+
+function addPreset() {
+  try {
+    const prompt = validateAiRecognitionPrompt(draft.value);
+    const next = resolveAiPromptPresets([...presets.value, { name: sceneName.value, prompt }]);
+    emit('update:modelValue', next);
+    sceneName.value = '';
+    draft.value = '';
+  } catch (error) { ElMessage.warning(error instanceof Error ? error.message : '添加提示词失败'); }
+}
+</script>
+
+<template>
+  <section class="ai-prompt-settings" aria-labelledby="ai-prompt-presets-title">
+    <h3 id="ai-prompt-presets-title" class="ai-prompt-visually-hidden">AI 识别预设提示词</h3>
+    <p class="ai-prompt-description">添加常用测试场景，录制 AI 识别节点时可以直接选择。删除预设不会修改已有节点。</p>
+    <div class="ai-prompt-layout">
+      <el-form label-position="top" @submit.prevent="addPreset">
+        <el-form-item label="测试场景">
+          <el-input v-model="sceneName" maxlength="80" placeholder="例如：开屏广告检测" />
+        </el-form-item>
+        <el-form-item label="新增提示词">
+          <el-input v-model="draft" type="textarea" :rows="4" maxlength="4000" show-word-limit placeholder="输入常用的识别内容，例如：当前画面是否出现广告弹窗？" />
+        </el-form-item>
+        <div class="ai-prompt-actions"><el-button native-type="submit" :icon="Plus">添加提示词</el-button></div>
+      </el-form>
+      <div class="ai-prompt-list" aria-label="已添加的提示词">
+        <div v-for="(preset, index) in presets" :key="preset.name" class="ai-prompt-row">
+          <div class="ai-prompt-content"><strong>{{ preset.name }}</strong><p>{{ preset.prompt }}</p></div>
+          <el-button text :icon="Delete" :aria-label="`删除提示词 ${preset.name}`" @click="emit('update:modelValue', presets.filter((_, i) => i !== index))" />
+        </div>
+        <el-empty v-if="!presets.length" description="暂无预设提示词" :image-size="60" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.ai-prompt-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.ai-prompt-description { margin: 0 0 20px; color: var(--el-text-color-secondary); font-size: 12px; }
+.ai-prompt-layout { display: grid; gap: 20px; }
+.ai-prompt-actions { display: flex; justify-content: flex-end; }
+.ai-prompt-list { --ai-prompt-row-height: 76px; min-width: 0; height: calc(var(--ai-prompt-row-height) * 3 + 1px); overflow-y: auto; scrollbar-gutter: stable; border-top: 1px solid var(--ui-border); }
+.ai-prompt-row { display: flex; align-items: flex-start; gap: 12px; height: var(--ai-prompt-row-height); box-sizing: border-box; padding: 10px 0; }
+.ai-prompt-row + .ai-prompt-row { border-top: 1px solid var(--ui-border); }
+.ai-prompt-content { flex: 1; min-width: 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
+.ai-prompt-content strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ai-prompt-content p { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: var(--el-text-color-secondary); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+.ai-prompt-row .el-button { flex-shrink: 0; }
+.ai-prompt-list :deep(.el-empty) { height: 100%; padding: 0; }
+</style>

package/src/components/config/AppiumConfigPanel.vue

@@ -1,16 +1,89 @@
 <script setup lang="ts">
+import ReplayReportSummarySettings from './ReplayReportSummarySettings.vue';
 import type { ConfigForm } from '../../types';
 import FlowAppearanceSettings from './FlowAppearanceSettings.vue';
+import AiDeduplicationSettings from './AiDeduplicationSettings.vue';
+import AiPromptPresetsSettings from './AiPromptPresetsSettings.vue';
+import AppiumModelSettings from './AppiumModelSettings.vue';
 
 defineProps<{
   configForm: ConfigForm;
   testingModelKey: string;
-  isSavingModelConfig: boolean;
   testStatus?: string;
+  promptOptimizerTestStatus?: string;
+  saveStatus?: string;
 }>();
-defineEmits<{ testModel: []; saveModelConfig: [] }>();
+defineEmits<{ testModel: []; testPromptOptimizerModel: [] }>();
 </script>
 
 <template>
-  <FlowAppearanceSettings v-model="configForm.appium.flowBackgroundColor" :saving="isSavingModelConfig" @save="$emit('saveModelConfig')" />
+  <div class="appium-config-stack">
+    <section class="appium-config-section" aria-labelledby="appium-models-title">
+      <header class="appium-section-heading">
+        <div><h2 id="appium-models-title">模型服务</h2><p>不同任务使用独立模型，配置修改需测试通过后保存。</p></div>
+        <span v-if="saveStatus" class="config-save-status" role="status">{{ saveStatus }}</span>
+      </header>
+      <div class="appium-model-grid">
+        <AppiumModelSettings v-model="configForm.appium.model" title="AI 识别模型" badge="视觉"
+          description="用于识别设备截图和持续观察，需要选择支持图片输入的模型。" name-placeholder="支持图片输入的模型"
+          model-key="appium" :testing-model-key="testingModelKey" :test-status="testStatus" @test="$emit('testModel')" />
+        <AppiumModelSettings v-if="configForm.appium.promptOptimizer" v-model="configForm.appium.promptOptimizer.model"
+          title="提示词优化模型" badge="文本" description="用于优化 AI 识别和回放报告提示词，也用于生成回放测试报告总结，只需支持文本输入。"
+          name-placeholder="用于优化提示词的文本模型" model-key="promptOptimizer" :testing-model-key="testingModelKey"
+          :test-status="promptOptimizerTestStatus" @test="$emit('testPromptOptimizerModel')" />
+      </div>
+    </section>
+
+    <section class="appium-config-section" aria-labelledby="appium-recognition-title">
+      <header class="appium-section-heading"><div><h2 id="appium-recognition-title">AI 识别设置</h2><p>控制持续观察的截图筛选，并管理录制节点可选的常用提示词。</p></div></header>
+      <div class="appium-settings-grid">
+        <el-card shadow="never" class="config-module-card config-appium-card">
+          <template #header><div class="panel-header"><span>持续观察截图去重</span></div></template>
+          <el-form label-position="top"><AiDeduplicationSettings v-model="configForm.appium.aiDeduplication" /></el-form>
+        </el-card>
+        <el-card shadow="never" class="config-module-card config-appium-card">
+          <template #header><div class="panel-header"><span>AI 识别预设提示词</span></div></template>
+          <AiPromptPresetsSettings v-model="configForm.appium.aiPromptPresets" />
+        </el-card>
+      </div>
+    </section>
+
+    <section class="appium-config-section" aria-labelledby="appium-replay-title">
+      <header class="appium-section-heading"><div><h2 id="appium-replay-title">回放与报告</h2><p>配置回放证据、基础报告和 AI 总结。</p></div></header>
+      <el-card shadow="never" class="config-module-card config-appium-card">
+        <template #header>
+          <div class="panel-header">
+            <span class="panel-header__title">
+              <span>回放截图</span>
+              <el-switch v-model="configForm.appium.screenshotReport" aria-label="截图与 HTML 报告" />
+            </span>
+          </div>
+        </template>
+        <el-alert title="开启后会在节点执行前后截图并生成 HTML 报告。截图会增加回放耗时，实际操作间隔可能超过设置的延时时间。" type="info" :closable="false" show-icon />
+      </el-card>
+      <ReplayReportSummarySettings v-if="configForm.appium.reportSummary" :config="configForm.appium.reportSummary" :testing-model-key="testingModelKey" />
+    </section>
+
+    <section class="appium-config-section" aria-labelledby="appium-editor-title">
+      <header class="appium-section-heading"><div><h2 id="appium-editor-title">流程编辑器</h2><p>调整流程画布和连接线的显示颜色。</p></div></header>
+      <FlowAppearanceSettings v-model="configForm.appium.flowBackgroundColor" v-model:line-color="configForm.appium.flowLineColor" />
+    </section>
+  </div>
 </template>
+
+<style scoped>
+.config-save-status { font-size: 12px; font-weight: 400; color: var(--el-text-color-secondary); }
+.appium-config-stack { display: grid; gap: 28px; }
+.appium-config-section { display: grid; gap: 14px; min-width: 0; }
+.appium-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 4px; }
+.appium-section-heading h2 { margin: 0; color: var(--el-text-color-primary); font-size: 16px; line-height: 1.4; }
+.appium-section-heading p { margin: 4px 0 0; color: var(--el-text-color-secondary); font-size: 12px; line-height: 1.5; }
+.appium-model-grid, .appium-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
+.appium-settings-grid > .config-appium-card { display: flex; flex-direction: column; }
+.appium-settings-grid > .config-appium-card :deep(.el-card__body) { flex: 1; }
+.appium-config-section > .config-appium-card + .config-appium-card { margin-top: 2px; }
+@media (max-width: 1000px) {
+  .appium-model-grid, .appium-settings-grid { grid-template-columns: minmax(0, 1fr); }
+  .appium-section-heading { align-items: flex-start; flex-direction: column; }
+}
+</style>

package/src/components/config/AppiumModelSettings.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { AiRecognitionModel } from '../../appium-recorder/ai-recognition';
+
+const model = defineModel<AiRecognitionModel>({ required: true });
+const props = defineProps<{
+  title: string;
+  badge: string;
+  description: string;
+  namePlaceholder: string;
+  modelKey: 'appium' | 'promptOptimizer';
+  testingModelKey: string;
+  testStatus?: string;
+}>();
+defineEmits<{ test: [] }>();
+</script>
+
+<template>
+  <el-card shadow="never" class="config-module-card config-appium-card appium-model-card">
+    <template #header>
+      <div class="panel-header">
+        <span class="panel-header__title">
+          <span>{{ title }}</span>
+          <el-tag size="small" effect="plain">{{ badge }}</el-tag>
+        </span>
+      </div>
+    </template>
+    <p class="appium-model-description">{{ description }}</p>
+    <el-form label-position="top" :disabled="!!testingModelKey">
+      <el-form-item label="Base URL"><el-input v-model="model.baseUrl" placeholder="兼容 OpenAI 的 API 地址" /></el-form-item>
+      <el-form-item label="API Key"><el-input v-model="model.apiKey" type="password" show-password /></el-form-item>
+      <el-form-item label="Model Name"><el-input v-model="model.name" :placeholder="namePlaceholder" /></el-form-item>
+      <el-alert v-if="testStatus" class="appium-model-status" :title="testStatus"
+        :type="testStatus.startsWith('测试通过') ? 'success' : 'warning'" :closable="false" show-icon />
+      <div class="appium-model-actions">
+        <el-button type="primary" plain :loading="testingModelKey === modelKey" :disabled="!!testingModelKey && testingModelKey !== modelKey" @click="$emit('test')">测试并保存</el-button>
+      </div>
+    </el-form>
+  </el-card>
+</template>
+
+<style scoped>
+.appium-model-description { min-height: 40px; margin: 0 0 18px; color: var(--el-text-color-secondary); font-size: 13px; line-height: 1.6; }
+.appium-model-status { margin-bottom: 16px; }
+.appium-model-actions { display: flex; justify-content: flex-end; }
+</style>

package/src/components/config/BaseConfigPanel.vue

@@ -15,6 +15,7 @@ defineEmits<{
   saveAppPreset: [];
   editAppPreset: [app: AppPreset];
   deleteAppPreset: [id: string];
+  cancelAppPresetEdit: [];
 }>();
 </script>
 
@@ -55,21 +56,21 @@ defineEmits<{
             <span>预设 App 参数</span>
             <el-tag v-if="appPresetForm.id" size="small" type="warning">编辑中</el-tag>
           </div>
-          <div class="panel-header__actions">
-            <el-button type="primary" :loading="isSavingAppPreset" @click="$emit('saveAppPreset')">
-              {{ appPresetForm.id ? '保存修改' : '保存 App' }}
-            </el-button>
-          </div>
         </div>
       </template>
 
-      <el-form label-position="top">
+      <div class="app-preset-layout">
+      <el-form label-position="top" :disabled="isSavingAppPreset" @submit.prevent="$emit('saveAppPreset')">
         <el-form-item label="App 名称">
           <el-input v-model="appPresetForm.name" placeholder="例如：示例 App" />
         </el-form-item>
         <el-form-item label="App 包名">
           <el-input v-model="appPresetForm.packageName" placeholder="例如：com.example.app" />
         </el-form-item>
+        <div class="app-preset-actions">
+          <el-button v-if="appPresetForm.id" :disabled="isSavingAppPreset" @click="$emit('cancelAppPresetEdit')">取消编辑</el-button>
+          <el-button native-type="submit" :loading="isSavingAppPreset">{{ appPresetForm.id ? '保存修改' : '添加' }}</el-button>
+        </div>
       </el-form>
 
       <div class="app-preset-list">
@@ -79,12 +80,23 @@ defineEmits<{
             <span>{{ app.packageName }}</span>
           </div>
           <div class="script-row__actions">
-            <el-button text size="small" :icon="Edit" @click="$emit('editAppPreset', app)" />
-            <el-button text size="small" :icon="Delete" @click="$emit('deleteAppPreset', app.id)" />
+            <el-button text size="small" :icon="Edit" :disabled="isSavingAppPreset" :aria-label="`编辑 ${app.name}`" @click="$emit('editAppPreset', app)" />
+            <el-button text size="small" :icon="Delete" :disabled="isSavingAppPreset" :aria-label="`删除 ${app.name}`" @click="$emit('deleteAppPreset', app.id)" />
           </div>
         </div>
         <el-empty v-if="!appPresets.length" description="暂无预设 App" />
       </div>
+      </div>
     </el-card>
   </div>
 </template>
+
+<style scoped>
+.app-preset-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
+.app-preset-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
+.app-preset-layout .app-preset-list { margin-top: 0; padding-left: 24px; border-left: 1px solid var(--ui-border); }
+@media (max-width: 800px) {
+  .app-preset-layout { grid-template-columns: minmax(0, 1fr); }
+  .app-preset-layout .app-preset-list { padding: 24px 4px 0 0; border-left: 0; border-top: 1px solid var(--ui-border); }
+}
+</style>

package/src/components/config/FlowAppearanceSettings.vue

@@ -1,51 +1,70 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { RefreshLeft } from '@element-plus/icons-vue';
-import { DEFAULT_FLOW_BACKGROUND, FLOW_BACKGROUND_PRESETS, isHexColor, normalizeFlowBackground } from '../../appium-recorder/flow-appearance';
+import {
+  DEFAULT_FLOW_BACKGROUND, FLOW_BACKGROUND_PRESETS, normalizeFlowBackground,
+  DEFAULT_FLOW_LINE_COLOR, FLOW_LINE_COLOR_PRESETS, normalizeFlowLineColor, isHexColor,
+} from '../../appium-recorder/flow-appearance';
 
-const props = defineProps<{ modelValue?: string; saving: boolean }>();
-const emit = defineEmits<{ 'update:modelValue': [color: string]; save: [] }>();
-const color = computed(() => props.modelValue ?? DEFAULT_FLOW_BACKGROUND);
-const error = computed(() => isHexColor(color.value) ? '' : '请输入有效的十六进制颜色，如 #ABC 或 #AABBCC');
+const props = defineProps<{ modelValue?: string; lineColor?: string }>();
+const emit = defineEmits<{ 'update:modelValue': [color: string]; 'update:lineColor': [color: string] }>();
+const panels = computed(() => [
+  { key: 'background' as const, title: '流程背景色', color: props.modelValue ?? DEFAULT_FLOW_BACKGROUND,
+    fallback: DEFAULT_FLOW_BACKGROUND, presets: FLOW_BACKGROUND_PRESETS, normalize: normalizeFlowBackground,
+    inputLabel: '十六进制背景色', pickerLabel: '选择流程背景色', resetLabel: '恢复默认颜色', presetLabel: '选择颜色' },
+  { key: 'line' as const, title: '连接线条颜色', color: props.lineColor ?? DEFAULT_FLOW_LINE_COLOR,
+    fallback: DEFAULT_FLOW_LINE_COLOR, presets: FLOW_LINE_COLOR_PRESETS, normalize: normalizeFlowLineColor,
+    inputLabel: '十六进制线条颜色', pickerLabel: '选择连接线条颜色', resetLabel: '恢复默认线条颜色', presetLabel: '选择线条颜色' },
+].map(panel => ({ ...panel, error: isHexColor(panel.color) ? '' : '请输入有效的十六进制颜色，如 #ABC 或 #AABBCC' })));
+function update(key: 'background' | 'line', color: string) {
+  if (key === 'background') emit('update:modelValue', color);
+  else emit('update:lineColor', color);
+}
 </script>
 
 <template>
   <el-card shadow="never" class="config-module-card config-appium-card flow-appearance-settings">
-    <template #header>
-      <div class="panel-header">
-        <span>流程背景色</span>
-        <el-button type="primary" :loading="saving" :disabled="Boolean(error)" @click="emit('save')">保存背景色</el-button>
-      </div>
-    </template>
-    <el-form label-position="top">
-      <el-form-item label="预选颜色">
-        <div class="flow-color-presets">
-          <button v-for="preset in FLOW_BACKGROUND_PRESETS" :key="preset" type="button"
-            :style="{ backgroundColor: preset }" :aria-label="`选择颜色 ${preset}`" :title="preset"
-            :aria-pressed="normalizeFlowBackground(color) === preset && !error"
-            @click="emit('update:modelValue', preset)" />
-        </div>
-      </el-form-item>
-      <el-form-item label="自定义颜色" :error="error">
-        <div class="flow-color-input">
-          <el-color-picker :model-value="normalizeFlowBackground(color)" color-format="hex" :predefine="FLOW_BACKGROUND_PRESETS"
-            aria-label="选择流程背景色" @update:model-value="emit('update:modelValue', $event || DEFAULT_FLOW_BACKGROUND)" />
-          <el-input :model-value="color" aria-label="十六进制背景色" placeholder="#D4E8DD"
-            @update:model-value="emit('update:modelValue', String($event))" />
-          <el-button :icon="RefreshLeft" title="恢复默认颜色" aria-label="恢复默认颜色" @click="emit('update:modelValue', DEFAULT_FLOW_BACKGROUND)" />
-        </div>
-      </el-form-item>
-    </el-form>
+    <template #header><div class="panel-header"><span>流程外观</span></div></template>
+    <div class="flow-appearance-columns">
+      <section v-for="panel in panels" :key="panel.key" class="flow-appearance-section" :aria-label="panel.title">
+        <h3>{{ panel.title }}</h3>
+        <el-form label-position="top">
+          <el-form-item label="预选颜色">
+            <div class="flow-color-presets">
+              <button v-for="preset in panel.presets" :key="preset" type="button"
+                :style="{ backgroundColor: preset }" :aria-label="`${panel.presetLabel} ${preset}`" :title="preset"
+                :aria-pressed="panel.normalize(panel.color) === preset && !panel.error"
+                @click="update(panel.key, preset)" />
+            </div>
+          </el-form-item>
+          <el-form-item label="自定义颜色" :error="panel.error">
+            <div class="flow-color-input">
+              <el-color-picker :model-value="panel.normalize(panel.color)" color-format="hex" :predefine="panel.presets"
+                :aria-label="panel.pickerLabel" @update:model-value="update(panel.key, $event || panel.fallback)" />
+              <el-input :model-value="panel.color" :aria-label="panel.inputLabel" :placeholder="panel.fallback"
+                @update:model-value="update(panel.key, String($event))" />
+              <el-button :icon="RefreshLeft" :title="panel.resetLabel" :aria-label="panel.resetLabel" @click="update(panel.key, panel.fallback)" />
+            </div>
+          </el-form-item>
+        </el-form>
+      </section>
+    </div>
   </el-card>
 </template>
 
 <style scoped>
-.flow-appearance-settings { margin-top: 20px; }
-.flow-appearance-settings .el-form { max-width: 640px; }
+.flow-appearance-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
+.flow-appearance-section { min-width: 0; }
+.flow-appearance-section + .flow-appearance-section { padding-left: 32px; border-left: 1px solid var(--ui-border); }
+.flow-appearance-section h3 { margin: 0 0 20px; font-size: 15px; font-weight: 600; color: var(--el-text-color-primary); }
 .flow-color-presets, .flow-color-input { display: flex; align-items: center; gap: 10px; }
 .flow-color-presets { flex-wrap: wrap; }
 .flow-color-presets button { width: 32px; height: 32px; border: 1px solid var(--el-border-color-darker); border-radius: 4px; cursor: pointer; }
 .flow-color-presets button[aria-pressed="true"] { outline: 2px solid var(--el-color-primary); outline-offset: 2px; }
 .flow-color-input { width: 100%; }
 .flow-color-input .el-input { flex: 1; min-width: 0; }
+@media (max-width: 800px) {
+  .flow-appearance-columns { grid-template-columns: minmax(0, 1fr); gap: 24px; }
+  .flow-appearance-section + .flow-appearance-section { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--ui-border); }
+}
 </style>

package/src/components/config/MidsceneConfigPanel.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { QuestionFilled } from '@element-plus/icons-vue';
+import { computed, reactive } from 'vue';
+import { ArrowDown, QuestionFilled } from '@element-plus/icons-vue';
 import {
   codexMidsceneModelOptions,
   midsceneModelPresets,
+  midsceneModelOptions,
+  midsceneModelFamilyOptions,
   type MidsceneModelProvider,
 } from '../../config/midscene-model-presets';
 import type { ConfigForm } from '../../types';
@@ -11,44 +13,52 @@ import type { ConfigForm } from '../../types';
 const props = defineProps<{
   configForm: ConfigForm;
   testingModelKey: string;
-  isSavingModelConfig: boolean;
   modelTestStatus: { midscene: string; scriptOptimizer: string };
 }>();
 
 const emit = defineEmits<{
   testModel: [key: 'midscene' | 'scriptOptimizer'];
-  saveModelConfig: [];
   updateMidsceneModelProvider: [provider: MidsceneModelProvider];
 }>();
 
 const activeMidsceneProvider = computed<MidsceneModelProvider>(() =>
-  props.configForm.midscene.model.provider === 'codex' ? 'codex' : 'custom',
+  props.configForm.midscene.model.provider || 'custom',
 );
-const modelConfigGuideUrl = 'https://midscenejs.com/zh/model-common-config.html';
-
-const normalizeBaseUrl = (value: string) => value.trim().replace(/\/+$/, '');
+const activePreset = computed(() => midsceneModelPresets.find(item => item.key === activeMidsceneProvider.value));
+const modelFamilyOptions = computed(() => {
+  if (activeMidsceneProvider.value === 'custom') return midsceneModelFamilyOptions;
+  const families = activeMidsceneProvider.value === 'codex'
+    ? codexMidsceneModelOptions.map(option => option.family)
+    : activePreset.value?.modelFamilies ?? (activePreset.value ? [activePreset.value.modelFamily] : []);
+  return [...new Set(families)].map(family => ({ label: family, value: family }));
+});
+const modelNameOptions = computed(() => activeMidsceneProvider.value === 'codex'
+  ? codexMidsceneModelOptions
+  : midsceneModelOptions.filter(option => modelFamilyOptions.value.some(family => family.value === option.family)));
+const modelSearchActive = reactive({ name: false, family: false });
+const modelSuggestions = (field: 'name' | 'family', query: string) => {
+  const options = field === 'name' ? modelNameOptions.value : modelFamilyOptions.value;
+  return modelSearchActive[field]
+    ? options.filter(option => option.value.toLowerCase().includes(query.toLowerCase()))
+    : options;
+};
+const modelConfigGuideUrl = 'https://midscenejs.com/zh/model-common-config.html#glm-v';
 
 const updateMidsceneModelName = (value: string) => {
   props.configForm.midscene.model.name = value;
-  const option = codexMidsceneModelOptions.find((item) => item.value === value);
+  const option = modelNameOptions.value.find((item) => item.value === value);
   if (option) {
     props.configForm.midscene.model.family = option.family;
   }
 };
 
-const updateCustomMidsceneBaseUrl = (value: string) => {
-  props.configForm.midscene.model.baseUrl = value;
-  const preset = midsceneModelPresets.find((item) => normalizeBaseUrl(item.baseUrl) === normalizeBaseUrl(value));
-  if (preset) {
-    props.configForm.midscene.model.name = preset.modelName;
-    props.configForm.midscene.model.family = preset.modelFamily;
-  }
-};
-
 const updateMidsceneProvider = (value: string) => {
   if (value === 'custom' || value === 'codex') {
     emit('updateMidsceneModelProvider', value);
+    return;
   }
+  const preset = midsceneModelPresets.find(item => item.key === value);
+  if (preset) emit('updateMidsceneModelProvider', preset.key);
 };
 
 const openModelConfigGuide = () => {
@@ -57,13 +67,21 @@ const openModelConfigGuide = () => {
 </script>
 
 <template>
-  <el-card shadow="never" class="config-module-card">
+  <el-card shadow="never" class="config-module-card config-midscene-card">
     <template #header>
       <div class="panel-header">
-        <span>模型配置</span>
-        <el-button type="primary" :loading="isSavingModelConfig" @click="$emit('saveModelConfig')">
-          保存模型配置
-        </el-button>
+        <span class="panel-header__title">
+          <span>模型配置</span>
+          <el-tooltip content="模型参考配置" placement="top" :show-after="200">
+            <el-button
+              class="config-model-help"
+              text
+              :icon="QuestionFilled"
+              aria-label="模型参考配置"
+              @click="openModelConfigGuide"
+            />
+          </el-tooltip>
+        </span>
       </div>
     </template>
 
@@ -73,71 +91,36 @@ const openModelConfigGuide = () => {
           <span>Midscene 模型</span>
           <el-button
             :loading="testingModelKey === 'midscene'"
+            :disabled="!!testingModelKey"
             @click="$emit('testModel', 'midscene')"
           >
-            测试模型
+            测试并保存
           </el-button>
         </div>
-        <el-form label-position="top">
+        <el-form label-position="top" :disabled="!!testingModelKey">
           <el-form-item label="接入方式">
             <el-select
               :model-value="activeMidsceneProvider"
               @change="updateMidsceneProvider"
             >
               <el-option label="自定义提供方" value="custom" />
+              <el-option v-for="preset in midsceneModelPresets" :key="preset.key" :label="preset.label" :value="preset.key" />
               <el-option label="使用 Codex" value="codex" />
             </el-select>
           </el-form-item>
 
-          <template v-if="activeMidsceneProvider === 'custom'">
+          <template v-if="activeMidsceneProvider !== 'codex'">
+            <el-alert v-if="activePreset?.hint" class="config-form-alert" type="info" :closable="false" :title="activePreset.hint" />
             <el-form-item label="Base URL">
               <el-input
-                :model-value="configForm.midscene.model.baseUrl"
-                placeholder="输入 Base URL，匹配已知提供方时自动填充模型"
-                @input="updateCustomMidsceneBaseUrl"
+                v-model="configForm.midscene.model.baseUrl"
+                placeholder="选择接入方式自动填充，也可手动修改"
               />
             </el-form-item>
             <el-form-item label="API Key">
               <el-input v-model="configForm.midscene.model.apiKey" show-password />
             </el-form-item>
-            <el-form-item>
-              <template #label>
-                <span class="config-field-label">
-                  <span>Model Name</span>
-                  <el-tooltip content="查看模型填写参考" placement="top">
-                    <el-button
-                      class="config-field-help"
-                      text
-                      size="small"
-                      :icon="QuestionFilled"
-                      aria-label="查看 Model Name 填写参考"
-                      @click.stop="openModelConfigGuide"
-                    />
-                  </el-tooltip>
-                </span>
-              </template>
-              <el-input v-model="configForm.midscene.model.name" placeholder="例如：gpt-5.5" />
-            </el-form-item>
-            <el-form-item>
-              <template #label>
-                <span class="config-field-label">
-                  <span>Model Family</span>
-                  <el-tooltip content="查看模型填写参考" placement="top">
-                    <el-button
-                      class="config-field-help"
-                      text
-                      size="small"
-                      :icon="QuestionFilled"
-                      aria-label="查看 Model Family 填写参考"
-                      @click.stop="openModelConfigGuide"
-                    />
-                  </el-tooltip>
-                </span>
-              </template>
-              <el-input v-model="configForm.midscene.model.family" placeholder="例如：gpt-5" />
-            </el-form-item>
           </template>
-
           <template v-else>
             <el-alert
               class="config-form-alert"
@@ -148,25 +131,34 @@ const openModelConfigGuide = () => {
             <el-form-item label="Base URL">
               <el-input :model-value="configForm.midscene.model.baseUrl" readonly />
             </el-form-item>
-            <el-form-item label="Model Name">
-              <el-select
-                :model-value="configForm.midscene.model.name"
-                @change="updateMidsceneModelName"
-              >
-                <el-option
-                  v-for="option in codexMidsceneModelOptions"
-                  :key="option.value"
-                  :label="option.label"
-                  :value="option.value"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="Model Family">
-              <el-select v-model="configForm.midscene.model.family" disabled>
-                <el-option label="gpt-5" value="gpt-5" />
-              </el-select>
-            </el-form-item>
           </template>
+          <el-form-item label="Model Name">
+            <el-autocomplete
+              class="config-model-input"
+              :model-value="configForm.midscene.model.name"
+              :fetch-suggestions="(query: string) => modelSuggestions('name', query)"
+              :debounce="0"
+              :suffix-icon="ArrowDown"
+              fit-input-width
+              placeholder="选择或输入模型名称"
+              @focus="modelSearchActive.name = false"
+              @input="modelSearchActive.name = true"
+              @update:model-value="updateMidsceneModelName"
+            />
+          </el-form-item>
+          <el-form-item label="Model Family">
+            <el-autocomplete
+              v-model="configForm.midscene.model.family"
+              class="config-model-input"
+              :fetch-suggestions="(query: string) => modelSuggestions('family', query)"
+              :debounce="0"
+              :suffix-icon="ArrowDown"
+              fit-input-width
+              placeholder="选择或输入模型系列"
+              @focus="modelSearchActive.family = false"
+              @input="modelSearchActive.family = true"
+            />
+          </el-form-item>
           <el-form-item v-if="modelTestStatus.midscene" label="测试结果">
             <el-input :model-value="modelTestStatus.midscene" readonly />
           </el-form-item>
@@ -178,12 +170,13 @@ const openModelConfigGuide = () => {
           <span>脚本优化模型</span>
           <el-button
             :loading="testingModelKey === 'scriptOptimizer'"
+            :disabled="!!testingModelKey"
             @click="$emit('testModel', 'scriptOptimizer')"
           >
-            测试模型
+            测试并保存
           </el-button>
         </div>
-        <el-form label-position="top">
+        <el-form label-position="top" :disabled="!!testingModelKey">
           <el-form-item label="Base URL">
             <el-input v-model="configForm.scriptOptimizer.model.baseUrl" />
           </el-form-item>
@@ -202,3 +195,8 @@ const openModelConfigGuide = () => {
 
   </el-card>
 </template>
+
+<style scoped>
+.config-midscene-card :deep(.el-card__body) { background: var(--ui-bg-soft, #f8f9fb); }
+.config-model-input { width: 100%; }
+</style>