android-midscene-automation 1.1.4 → 1.1.5

package/CHANGELOG.md

@@ -1,4 +1,7 @@
 # 更新记录
+## v1.1.5
+- UI优化
+
 ## v1.1.4
 - [Appium]修复持续刷新页面中的操作超时，以及可选元素未出现时误报失败的问题。
 - [Appium]脚本列表支持批量导入并自动重建连接脚本关系；导入后保留列表页，不自动加载脚本。

package/README.md

@@ -1502,6 +1502,9 @@ Linux: ~/.local/share/android-midscene-automation
 
 # 项目更新记录
 
+## v1.1.5
+- UI优化
+
 ## v1.1.4
 - [Appium]修复持续刷新页面中的操作超时，以及可选元素未出现时误报失败的问题。
 - [Appium]脚本列表支持批量导入并自动重建连接脚本关系；导入后保留列表页，不自动加载脚本。

package/artemis-main/apps/admin_console/server.py

@@ -19,7 +19,9 @@ Modular entrypoint for full trace inspection, step replay, and task execution ma
 
 import argparse
 import asyncio
+import copy
 from contextlib import asynccontextmanager
+import logging
 import os
 from pathlib import Path
 import secrets
@@ -452,6 +454,35 @@ class ArtemisUvicornServer(uvicorn.Server):
         super().handle_exit(sig, frame)
 
 
+class QuietProbeAccessFilter(logging.Filter):
+    """Hide successful high-frequency probe requests from Uvicorn access logs."""
+
+    _quiet_paths = frozenset({"/api/status", "/api/system/readiness"})
+
+    def filter(self, record: logging.LogRecord) -> bool:
+        args = record.args
+        if not isinstance(args, tuple) or len(args) < 5:
+            return True
+        method = str(args[1]).upper()
+        path = str(args[2]).partition("?")[0]
+        try:
+            status_code = int(args[4])
+        except (TypeError, ValueError):
+            return True
+        return not (method == "GET" and path in self._quiet_paths and status_code == 200)
+
+
+def _uvicorn_log_config() -> dict:
+    """Keep normal access logs while silencing successful background probes."""
+    config = copy.deepcopy(uvicorn.config.LOGGING_CONFIG)
+    filter_name = "quiet_artemis_probes"
+    config.setdefault("filters", {})[filter_name] = {"()": QuietProbeAccessFilter}
+    access_handler = config.get("handlers", {}).get("access")
+    if access_handler is not None:
+        access_handler["filters"] = [*access_handler.get("filters", []), filter_name]
+    return config
+
+
 def run_ui_server(host: str, port: int, reload: bool = False) -> None:
     """Run the UI server with bounded, signal-aware graceful shutdown."""
     state.host = host
@@ -466,6 +497,7 @@ def run_ui_server(host: str, port: int, reload: bool = False) -> None:
                 port=port,
                 reload=True,
                 timeout_graceful_shutdown=5,
+                log_config=_uvicorn_log_config(),
             )
             return
 
@@ -474,6 +506,7 @@ def run_ui_server(host: str, port: int, reload: bool = False) -> None:
             host=host,
             port=port,
             timeout_graceful_shutdown=5,
+            log_config=_uvicorn_log_config(),
         )
         server = ArtemisUvicornServer(config)
         app.state.uvicorn_server = server

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "android-midscene-automation",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/oooooooko/android-midscene-automation.git"

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

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

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

@@ -11,7 +11,32 @@ const props = defineProps<{
   loading?: boolean;
 }>();
 const detailsVisible = ref(false);
-const locators = computed(() => props.node ? nodeLocators(props.node) : []);
+const locatorItems = computed(() => {
+  const node = props.node;
+  if (!node) return [];
+  const available = nodeLocators(node).filter(locator => Boolean(locator.value));
+  const preferredNames: Partial<Record<AppiumNode['selector']['strategy'], string>> = {
+    id: 'Resource ID',
+    accessibilityId: 'Accessibility ID',
+    xpath: 'XPath',
+    androidUiAutomator: 'UiAutomator',
+  };
+  const preferredName = preferredNames[node.selector.strategy];
+  const preferredIndex = Math.max(0, available.findIndex(locator => locator.name === preferredName));
+  const descriptions: Record<string, string> = {
+    'Resource ID': '通常最稳定，页面文案变化时也可继续定位',
+    'Accessibility ID': '使用 content-desc 定位，适合无 Resource ID 的组件',
+    XPath: '依赖组件层级，页面结构变化后可能需要重新获取',
+    UiAutomator: 'Android 原生定位表达式，可组合组件属性',
+  };
+  return available
+    .map((locator, index) => ({
+      ...locator,
+      description: descriptions[locator.name] || '',
+      recommended: index === preferredIndex,
+    }))
+    .sort((left, right) => Number(right.recommended) - Number(left.recommended));
+});
 async function copyLocator(value: string) {
   if (!value) return;
   try { await navigator.clipboard.writeText(value); ElMessage.success('定位内容已复制'); }
@@ -33,53 +58,77 @@ async function copyLocator(value: string) {
       <span v-else class="appium-node-summary__empty">请选择组件</span>
       <el-button size="small" type="primary" :icon="View" :disabled="!node" @click="detailsVisible = true">详情</el-button>
     </div>
-    <el-drawer v-model="detailsVisible" title="组件详情" size="520px" style="max-width: 94vw" append-to-body>
-    <template v-if="node">
-      <div class="appium-node-detail__title">{{ node.label }}</div>
-      <el-descriptions class="appium-node-properties" :column="1" border size="small">
-        <el-descriptions-item v-for="locator in locators" :key="locator.name">
-          <template #label><span class="appium-node-locator-label">{{ locator.name }}<small v-if="locator.attribute">{{ locator.attribute }}</small></span></template>
-          <div class="appium-node-locator">
-            <code>{{ locator.value || '未提供' }}</code>
-            <el-tooltip :content="`复制 ${locator.name}`" placement="top" :show-after="200">
-              <el-button class="appium-node-locator-copy" size="small" :icon="CopyDocument" :disabled="!locator.value" :aria-label="`复制 ${locator.name}`" @click="copyLocator(locator.value)" />
-            </el-tooltip>
-          </div>
-          <small v-if="locator.warning" class="appium-node-locator-warning">{{ locator.warning }}</small>
-        </el-descriptions-item>
-        <el-descriptions-item label="text">{{ node.text || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="class">{{ node.className || '-' }}</el-descriptions-item>
-        <el-descriptions-item v-if="node.checkable !== undefined" label="checkable">{{ String(node.checkable) }}</el-descriptions-item>
-        <el-descriptions-item v-if="node.checkable" label="checked">{{ node.checked === undefined ? '-' : String(node.checked) }}</el-descriptions-item>
-        <el-descriptions-item label="当前 Activity">{{ currentActivity || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="selector">
-          {{ node.selector.strategy }} {{ node.selector.value || '' }}
-          <el-tag
-            v-if="node.selector.matchCount"
-            size="small"
-            :type="node.selector.matchCount > 1 ? 'warning' : 'success'"
-          >
-            {{ node.selector.matchCount > 1 ? `重复 ${node.selector.matchCount}` : '唯一' }}
-          </el-tag>
-        </el-descriptions-item>
-        <el-descriptions-item label="推荐定位">
-          <span v-if="node.contextSelector">
-            父级 {{ node.contextSelector.strategy }} {{ node.contextSelector.value || '' }}
-            + 子级 {{ node.selector.strategy }} {{ node.selector.value || '' }}
-          </span>
-          <span v-else>
-            {{ node.selector.unique ? '当前 selector 唯一' : '使用当前 selector 或坐标兜底' }}
-          </span>
-        </el-descriptions-item>
-        <el-descriptions-item label="bounds">
-          <span v-if="node.bounds">
-            [{{ node.bounds.left }},{{ node.bounds.top }}][{{ node.bounds.right }},{{ node.bounds.bottom }}]
-          </span>
-          <span v-else>-</span>
-        </el-descriptions-item>
-      </el-descriptions>
-    </template>
-    <p v-else>请选择组件</p>
+    <el-drawer v-model="detailsVisible" title="组件详情" size="560px" class="appium-node-detail-drawer" append-to-body destroy-on-close>
+      <template v-if="node">
+        <div class="appium-node-detail__content">
+          <section class="appium-node-detail__summary">
+            <div>
+              <span>当前组件</span>
+              <strong>{{ node.label }}</strong>
+              <code>{{ node.className || '未知组件类型' }}</code>
+            </div>
+            <div class="appium-node-detail__tags">
+              <el-tag :type="node.enabled ? 'success' : 'info'" size="small">{{ node.enabled ? '可用' : '不可用' }}</el-tag>
+              <el-tag :type="node.clickable ? 'primary' : 'info'" size="small">{{ node.clickable ? '可点击' : '不可点击' }}</el-tag>
+              <el-tag v-if="node.selector.matchCount" :type="node.selector.matchCount > 1 ? 'warning' : 'success'" size="small">{{ node.selector.matchCount > 1 ? `定位重复 ${node.selector.matchCount}` : '定位唯一' }}</el-tag>
+            </div>
+          </section>
+
+          <section class="appium-node-detail__panel appium-node-detail__panel--locators">
+            <div class="appium-node-detail__heading">
+              <strong>定位方式</strong>
+              <span>已按当前脚本使用优先级排列，未提供的定位属性自动隐藏</span>
+            </div>
+            <div class="appium-node-locators">
+              <article v-for="locator in locatorItems" :key="locator.name" class="appium-node-locator-card" :class="{ 'is-recommended': locator.recommended }">
+                <div class="appium-node-locator-card__header">
+                  <el-tooltip :content="locator.description" placement="top" :show-after="300">
+                    <span class="appium-node-locator-label"><strong>{{ locator.name }}</strong><small v-if="locator.attribute">{{ locator.attribute }}</small></span>
+                  </el-tooltip>
+                  <el-tag v-if="locator.recommended" type="primary" size="small">当前使用</el-tag>
+                </div>
+                <div class="appium-node-locator-value">
+                  <code>{{ locator.value }}</code>
+                  <el-tooltip :content="`复制 ${locator.name}`" placement="top" :show-after="200">
+                    <el-button class="appium-node-locator-copy" text size="small" :icon="CopyDocument" :aria-label="`复制 ${locator.name}`" @click="copyLocator(locator.value)" />
+                  </el-tooltip>
+                </div>
+                <small v-if="locator.warning" class="appium-node-locator-warning">{{ locator.warning }}</small>
+              </article>
+              <el-empty v-if="!locatorItems.length" :image-size="48" description="当前组件没有可用定位信息" />
+            </div>
+          </section>
+
+          <section class="appium-node-detail__panel">
+            <div class="appium-node-detail__heading"><strong>组件属性</strong><span>当前组件树快照中的原始信息</span></div>
+            <el-descriptions class="appium-node-properties" :column="1" border size="small">
+              <el-descriptions-item label="text">{{ node.text || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="content-desc">{{ node.contentDesc || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="resource-id">{{ node.resourceId || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="class">{{ node.className || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="package">{{ node.packageName || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="enabled">{{ String(node.enabled) }}</el-descriptions-item>
+              <el-descriptions-item label="clickable">{{ String(node.clickable) }}</el-descriptions-item>
+              <el-descriptions-item v-if="node.checkable !== undefined" label="checkable">{{ String(node.checkable) }}</el-descriptions-item>
+              <el-descriptions-item v-if="node.checkable" label="checked">{{ node.checked === undefined ? '-' : String(node.checked) }}</el-descriptions-item>
+              <el-descriptions-item label="当前 Activity">{{ currentActivity || '-' }}</el-descriptions-item>
+              <el-descriptions-item label="selector">
+                <code>{{ node.selector.strategy }} {{ node.selector.value || '' }}</code>
+              </el-descriptions-item>
+              <el-descriptions-item label="推荐定位">
+                <span v-if="node.contextSelector">父级 {{ node.contextSelector.strategy }} {{ node.contextSelector.value || '' }} + 子级 {{ node.selector.strategy }} {{ node.selector.value || '' }}</span>
+                <span v-else>{{ node.selector.unique ? '当前 selector 唯一' : '使用当前 selector，定位失败时使用坐标兜底' }}</span>
+              </el-descriptions-item>
+              <el-descriptions-item label="bounds">
+                <code v-if="node.bounds">[{{ node.bounds.left }},{{ node.bounds.top }}][{{ node.bounds.right }},{{ node.bounds.bottom }}]</code>
+                <span v-else>-</span>
+              </el-descriptions-item>
+            </el-descriptions>
+          </section>
+        </div>
+      </template>
+      <el-empty v-else description="请选择组件" />
+      <template #footer><el-button type="primary" @click="detailsVisible = false">关闭</el-button></template>
     </el-drawer>
 
   </div>
@@ -90,13 +139,41 @@ async function copyLocator(value: string) {
 .appium-node-summary__text { display: grid; gap: 2px; min-width: 0; font-size: 12px; }
 .appium-node-summary__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
 .appium-node-summary__text span, .appium-node-summary__empty { color: var(--el-text-color-secondary); font-size: 12px; }
+:global(.appium-node-detail-drawer.el-drawer) { max-width: calc(100vw - 24px); border-left: 1px solid var(--ui-border); background: var(--ui-bg); box-shadow: -18px 0 48px rgb(15 23 42 / 18%); }
+:global(.appium-node-detail-drawer .el-drawer__header) { min-height: 56px; margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--ui-border); background: linear-gradient(180deg, #fff, #f8fafc); color: var(--ui-text); }
+:global(.appium-node-detail-drawer .el-drawer__title) { font-size: 16px; font-weight: 650; }
+:global(.appium-node-detail-drawer .el-drawer__body) { padding: 20px; background: var(--ui-bg); }
+:global(.appium-node-detail-drawer .el-drawer__footer) { padding: 14px 20px; border-top: 1px solid var(--ui-border); background: #f8fafc; }
+.appium-node-detail__content { display: grid; gap: 16px; }
+.appium-node-detail__summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; border: 1px solid #dbeafe; border-radius: var(--ui-radius); background: linear-gradient(135deg, #f8fbff, #eff6ff); box-shadow: var(--ui-shadow-card); }
+.appium-node-detail__summary > div:first-child { display: grid; min-width: 0; gap: 5px; }
+.appium-node-detail__summary span { color: var(--ui-text-muted); font-size: 12px; }
+.appium-node-detail__summary strong { color: var(--ui-text); font-size: 16px; overflow-wrap: anywhere; }
+.appium-node-detail__summary code { color: var(--ui-text-secondary); font-size: 12px; overflow-wrap: anywhere; }
+.appium-node-detail__tags { display: flex; flex: none; justify-content: flex-end; gap: 6px; flex-wrap: wrap; max-width: 220px; }
+.appium-node-detail__panel { padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); }
+.appium-node-detail__panel--locators { padding: 12px; }
+.appium-node-detail__panel--locators .appium-node-detail__heading { margin-bottom: 8px; }
+.appium-node-detail__heading { display: grid; gap: 4px; margin-bottom: 12px; }
+.appium-node-detail__heading strong { color: var(--ui-text); font-size: 14px; }
+.appium-node-detail__heading span { color: var(--ui-text-muted); font-size: 12px; }
+.appium-node-locators { display: grid; gap: 7px; }
+.appium-node-locator-card { display: grid; gap: 6px; min-width: 0; padding: 9px 10px; border: 1px solid var(--ui-border); border-radius: 9px; background: #fbfcfe; box-shadow: 0 2px 6px rgb(15 23 42 / 5%); }
+.appium-node-locator-card.is-recommended { border-color: #bfdbfe; background: linear-gradient(135deg, #f8fbff, #eff6ff); box-shadow: 0 0 0 2px rgb(26 115 232 / 8%), 0 4px 10px rgb(26 115 232 / 8%); }
+.appium-node-locator-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.appium-node-locator-value { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 6px; }
+.appium-node-locator-value code { min-height: 26px; padding: 5px 8px; border: 1px solid rgb(203 213 225 / 65%); border-radius: 7px; background: #f1f5f9; color: var(--ui-text-secondary); font-size: 11px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
 :deep(.el-descriptions__content) { overflow-wrap: anywhere; word-break: break-word; }
 .appium-node-properties :deep(.el-descriptions__table) { table-layout: fixed; width: 100%; }
 .appium-node-properties :deep(.el-descriptions__label) { width: 118px; overflow-wrap: anywhere; }
-.appium-node-locator-label { display: grid; gap: 2px; }
+.appium-node-locator-label { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ui-text); cursor: help; }
 .appium-node-locator-label small { font-weight: 400; color: var(--el-text-color-secondary); }
-.appium-node-locator { display: flex; align-items: flex-start; gap: 8px; }
-.appium-node-locator code { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
-.appium-node-locator .appium-node-locator-copy { flex: none; width: 26px; height: 26px; min-height: 26px; padding: 0; }
+.appium-node-locator-copy { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; margin: 0; }
 .appium-node-locator-warning { display: block; margin-top: 4px; color: var(--el-color-warning); }
+@media (max-width: 520px) {
+  :global(.appium-node-detail-drawer .el-drawer__body) { padding: 14px; }
+  .appium-node-detail__summary { display: grid; padding: 14px; }
+  .appium-node-detail__tags { justify-content: flex-start; max-width: none; }
+  .appium-node-detail__panel { padding: 12px; }
+}
 </style>

package/src/components/config/AiDeduplicationSettings.vue

@@ -56,5 +56,4 @@ function patch(value: Partial<AiDeduplicationConfig>) {
 .ai-dedup-explanation { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ui-border); color: var(--el-text-color-regular); font-size: 13px; line-height: 1.7; }
 .ai-dedup-explanation h4 { margin: 0 0 8px; color: var(--el-text-color-primary); font-size: 13px; }
 .ai-dedup-explanation p { margin: 6px 0; }
-.ai-dedup-settings :deep(.el-radio-group) { gap: 4px 0; }
 </style>

package/src/components/config/MidsceneConfigPanel.vue

@@ -118,7 +118,12 @@ const openModelConfigGuide = () => {
               />
             </el-form-item>
             <el-form-item label="API Key">
-              <el-input v-model="configForm.midscene.model.apiKey" placeholder="已保存的 Key 显示为掩码，可输入新 Key 替换" show-password />
+              <el-input
+                v-model="configForm.midscene.model.apiKey"
+                type="password"
+                placeholder="已保存的 Key 显示为掩码，可输入新 Key 替换"
+                show-password
+              />
             </el-form-item>
           </template>
           <template v-else>
@@ -181,7 +186,12 @@ const openModelConfigGuide = () => {
             <el-input v-model="configForm.scriptOptimizer.model.baseUrl" />
           </el-form-item>
           <el-form-item label="API Key">
-            <el-input v-model="configForm.scriptOptimizer.model.apiKey" placeholder="已保存的 Key 显示为掩码，可输入新 Key 替换" show-password />
+            <el-input
+              v-model="configForm.scriptOptimizer.model.apiKey"
+              type="password"
+              placeholder="已保存的 Key 显示为掩码，可输入新 Key 替换"
+              show-password
+            />
           </el-form-item>
           <el-form-item label="Model Name">
             <el-input v-model="configForm.scriptOptimizer.model.name" />

package/src/style.css

@@ -3296,11 +3296,81 @@ body {
 }
 
 .el-message-box {
+  --el-messagebox-padding-primary: 0;
+  padding: 0;
+  overflow: hidden;
   border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius);
   box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
 }
 
+.el-message-box__header {
+  box-sizing: border-box;
+  min-height: 56px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.el-message-box__header.show-close {
+  padding-right: 64px;
+}
+
+.el-message-box__headerbtn {
+  top: 8px;
+  right: 12px;
+  border-radius: var(--ui-radius-control);
+}
+
+.el-message-box__headerbtn:hover {
+  background: #eff6ff;
+}
+
+.el-message-box__title {
+  color: var(--ui-text);
+  font-size: 16px;
+  font-weight: 650;
+  line-height: 24px;
+}
+
+.el-message-box__content {
+  display: grid;
+  align-content: center;
+  box-sizing: border-box;
+  min-height: 88px;
+  padding: 18px 24px;
+}
+
+.el-message-box__container {
+  justify-content: center;
+  width: 100%;
+}
+
+.el-message-box__message {
+  text-align: center;
+}
+
+.el-message-box__input {
+  width: 100%;
+  padding-top: 14px;
+}
+
+.el-message-box__btns {
+  gap: 10px;
+  min-height: 68px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--ui-border);
+  background: #f8fafc;
+}
+
+.el-message-box__btns .el-button + .el-button {
+  margin-left: 0;
+}
+
+@media (max-width: 520px) {
+  .el-message-box__content { padding: 16px 18px; }
+  .el-message-box__btns { padding: 12px 16px; }
+}
+
 .el-tabs__item {
   color: var(--ui-text-secondary);
   font-weight: 500;
@@ -3955,10 +4025,85 @@ button:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -2p
   box-shadow: var(--ui-shadow-inset);
 }
 .layout .subnav__item--active, .layout .trend-tabs button.active,
-.el-tabs:not(.el-tabs--card):not(.el-tabs--border-card) > .el-tabs__header .el-tabs__item.is-active,
-.el-radio-group .el-radio-button.is-active .el-radio-button__inner {
+.el-tabs:not(.el-tabs--card):not(.el-tabs--border-card) > .el-tabs__header .el-tabs__item.is-active {
   box-shadow: var(--ui-shadow-control);
 }
+
+.el-radio-group:has(.el-radio-button) {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 2px;
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: 100%;
+  padding: 2px;
+  border: 1px solid #dbe3ee;
+  border-radius: 14px;
+  background: linear-gradient(180deg, #fff, #f8fafc);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 4px 12px -4px rgb(15 23 42 / 20%);
+}
+
+.el-radio-group:has(.el-radio-button) .el-radio-button {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.el-radio-group:has(.el-radio-button) .el-radio-button__inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-height: 32px;
+  padding: 6px 12px;
+  border: 0 !important;
+  border-radius: 11px !important;
+  background: transparent;
+  box-shadow: none !important;
+  color: var(--ui-text-secondary);
+  font-weight: 500;
+  line-height: 1.25;
+  white-space: normal;
+  text-align: center;
+  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+
+.el-radio-group:has(.el-radio-button) .el-radio-button:not(.is-active):not(.is-disabled) .el-radio-button__inner:hover {
+  background: #f1f5f9;
+  color: var(--ui-primary);
+}
+
+.el-radio-group:has(.el-radio-button) .el-radio-button.is-active .el-radio-button__inner {
+  background: linear-gradient(180deg, #438cf5, #2574e8);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 4px 12px rgb(37 116 232 / 34%) !important;
+  color: #fff;
+  font-weight: 600;
+}
+
+.el-radio-group:has(.el-radio-button) .el-radio-button.is-active:not(.is-disabled) .el-radio-button__inner:active {
+  box-shadow: inset 0 2px 5px rgb(15 23 42 / 20%) !important;
+  transform: translateY(1px);
+}
+
+.el-radio-group:has(.el-radio-button) .el-radio-button.is-disabled .el-radio-button__inner {
+  background: transparent;
+  color: var(--el-disabled-text-color);
+}
+
+.el-radio-group:has(.el-radio-button) .el-radio-button.is-active.is-disabled .el-radio-button__inner {
+  background: #dbeafe;
+  color: #64748b;
+}
+
+.el-radio-group:has(.el-radio-button) .el-radio-button__original-radio:focus-visible + .el-radio-button__inner {
+  outline: 2px solid var(--ui-primary);
+  outline-offset: 1px;
+}
+
+.el-radio-group:has(.el-radio-button) .el-radio-button--small .el-radio-button__inner {
+  min-height: 27px;
+  padding: 4px 9px;
+  font-size: 12px;
+}
 .el-dialog, .el-message-box, .el-popper.is-light { box-shadow: var(--ui-shadow-popover); }
 .el-dialog__header, .el-message-box__header { background: linear-gradient(180deg, #fff, #f8fafc); }
 .el-table {