android-midscene-automation 0.2.4 → 1.1.1

package/src/components/analytics/AnalysisCharts.vue

@@ -145,16 +145,16 @@ function ringStyle(entries: { value: number; color: string }[]) {
 <style scoped>
 .analysis-charts { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
 .analysis-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
-.analysis-chart-card { padding: 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); min-width: 0; }
+.analysis-chart-card { padding: 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); min-width: 0; }
 h2 { margin: 0; font-size: 16px; font-weight: 600; }
 .metric-card__value { display: flex; justify-content: space-between; align-items: center; margin: 24px 0; }
 .metric-card__value > strong { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
 .metric-card__value .el-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 24px; }
 .metric-card p { margin: 0; color: var(--ui-text-secondary); font-size: 12px; }
 .chart-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
-.trend-tabs { display: flex; padding: 4px; border-radius: 6px; background: var(--ui-bg); }
+.trend-tabs { display: flex; padding: 4px; border-radius: var(--ui-radius-pill); background: var(--ui-bg-soft); }
 .trend-tabs button, .trend-legend button { cursor: pointer; border: 0; background: transparent; color: var(--ui-text-secondary); font-size: 13px; padding: 6px 12px; }
-.trend-tabs button.active { background: var(--ui-surface); color: var(--ui-text); border-radius: 4px; box-shadow: 0 1px 3px #00000012; }
+.trend-tabs button.active { background: var(--ui-surface); color: var(--ui-text); border-radius: var(--ui-radius-pill); box-shadow: 0 1px 3px #00000012; }
 .trend-legend { display: flex; gap: 8px; }
 .trend-legend button { display: flex; align-items: center; gap: 8px; }
 .trend-legend .muted { opacity: .4; }
@@ -163,7 +163,7 @@ i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: no
 .trend-chart-scroll { overflow-x: auto; }
 .trend-chart { display: block; width: 100%; min-width: 600px; margin-top: 8px; }
 .trend-chart text { fill: var(--ui-text-secondary); font-size: 12px; }
-.trend-chart:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -2px; border-radius: 4px; }
+.trend-chart:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -2px; border-radius: var(--ui-radius-control); }
 .analysis-distributions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
 .distribution-card__body { display: flex; align-items: center; flex-direction: column; gap: 22px; padding-top: 24px; }
 .donut { display: grid; place-items: center; width: 176px; aspect-ratio: 1; border-radius: 50%; }

package/src/components/analytics/ReportAnalysis.vue

@@ -57,7 +57,7 @@ const date = (value: string) => value && Number.isFinite(Date.parse(value)) ? ne
 </template>
 
 <style scoped>
-.report-analysis { padding: 20px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); min-width: 0; }
+.report-analysis { padding: 20px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-card); min-width: 0; }
 .report-analysis__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
 h2 { margin: 0; font-size: 17px; font-weight: 600; }
 p { margin: 8px 0 0; color: var(--ui-text-secondary); font-size: 12px; }

package/src/components/generator/TestCaseFileUpload.vue

@@ -81,7 +81,7 @@ const handleFileChange = (event: Event) => {
   gap: 4px;
   min-width: 0;
   max-width: 132px;
-  color: #606266;
+  color: var(--ui-text-secondary);
   font-size: 12px;
 }
 

package/src/components/help/HelpCenter.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, shallowRef, watch } from 'vue';
-import { InfoFilled, QuestionFilled, Tools, Refresh, Monitor, Cpu, Cellphone } from '@element-plus/icons-vue';
-import { getAppiumVersion } from '../../api';
+import { InfoFilled, QuestionFilled, Tools, Refresh, Cpu, Cellphone } from '@element-plus/icons-vue';
+import { getAppiumVersion, getArtemisVersion } from '../../api';
 import type { AppiumVersionInfo } from '../../types';
 import changelog from '../../../CHANGELOG.md?raw';
 import faq from '../../../FAQ.md?raw';
@@ -11,11 +11,13 @@ import operationGuide from '../../../USAGE.md?raw';
 import packageText from '../../../package.json?raw';
 import MarkdownDocument from './MarkdownDocument.vue';
 
-type PackageInfo = { version?: string; dependencies?: Record<string, string> };
+type PackageInfo = { dependencies?: Record<string, string> };
 type OperationSection = { id: string; title: string; content: string };
 
 const props = defineProps<{ active: boolean }>();
 const appiumVersion = shallowRef<AppiumVersionInfo | null>(null);
+const artemisVersion = shallowRef<Awaited<ReturnType<typeof getArtemisVersion>> | null>(null);
+const artemisVersionError = shallowRef('');
 const loadingVersion = shallowRef(false);
 const versionError = shallowRef('');
 let checkedAt = 0;
@@ -24,11 +26,20 @@ async function refreshVersion(force = true) {
   if (loadingVersion.value) return;
   loadingVersion.value = true;
   versionError.value = '';
+  artemisVersionError.value = '';
   try {
-    appiumVersion.value = await getAppiumVersion();
-    checkedAt = Date.now();
-  } catch {
-    versionError.value = '无法读取版本信息，请检查后端连接后刷新';
+    const [appium, artemis] = await Promise.allSettled([getAppiumVersion(), getArtemisVersion()]);
+    if (appium.status === 'fulfilled') appiumVersion.value = appium.value;
+    else {
+      appiumVersion.value = null;
+      versionError.value = '无法读取 Appium 版本，请检查后端连接后刷新';
+    }
+    if (artemis.status === 'fulfilled') artemisVersion.value = artemis.value;
+    else {
+      artemisVersion.value = null;
+      artemisVersionError.value = '无法读取 Artemis 版本，请检查后端连接后刷新';
+    }
+    if (appium.status === 'fulfilled' && artemis.status === 'fulfilled') checkedAt = Date.now();
   } finally {
     loadingVersion.value = false;
   }
@@ -42,23 +53,26 @@ const operationType = shallowRef<OperationType>('midscene');
 const activeOperation = shallowRef('');
 const packageInfo = JSON.parse(packageText) as PackageInfo;
 const dependencyVersion = (name: string) => packageInfo.dependencies?.[name]?.match(/(\d+\.\d+\.\d+)/)?.[1] ?? '未知';
-const appVersion = packageInfo.version ?? '未知';
 const midsceneVersion = dependencyVersion('@midscene/core');
 
 const versions = computed(() => [
-  { name: '应用版本', version: `v${appVersion}`, description: '移动自动化控制台', icon: Monitor },
-  { name: 'Midscene', version: `v${midsceneVersion}`, description: 'AI 驱动的界面理解与自动化', icon: Cpu },
+  { name: 'Midscene', version: `v${midsceneVersion}`, status: '当前项目依赖版本', icon: Cpu,
+    description: '通过视觉模型理解界面，用自然语言完成操作、数据提取与断言，减少对固定元素定位的依赖。',
+    scenarios: ['自然语言编写测试步骤', '界面内容识别与智能断言', '快速验证 Android 操作流程'],
+    integration: '本项目保留脚本生成与自动化功能，已停止日常维护，建议使用官方版本。',
+    url: 'https://midscenejs.com/zh/' },
   { name: 'Appium', version: appiumVersion.value?.version ? `v${appiumVersion.value.version}` : loadingVersion.value ? '检测中…' : '未获取',
-    description: loadingVersion.value ? '正在读取当前环境版本' : versionError.value || appiumVersion.value?.message || '等待检测', icon: Cellphone },
-]);
-
-const technologies = computed(() => [
-  { name: 'Vue', version: dependencyVersion('vue'), description: '界面与交互框架' },
-  { name: 'Element Plus', version: dependencyVersion('element-plus'), description: '界面组件库' },
-  { name: 'Vue Flow', version: dependencyVersion('@vue-flow/core'), description: 'Appium 流程画布' },
-  { name: 'OpenCV.js', version: dependencyVersion('@techstark/opencv-js'), description: '本地图像检测' },
-  { name: 'Vite', version: dependencyVersion('vite'), description: '开发与构建工具' },
-  { name: 'TypeScript', version: dependencyVersion('typescript'), description: '类型与工程开发语言' },
+    status: loadingVersion.value ? '正在读取当前环境版本' : versionError.value || appiumVersion.value?.message || '等待检测', icon: Cellphone,
+    description: '基于 WebDriver 协议和平台驱动的开源 UI 自动化框架，可通过元素定位和明确的操作步骤执行测试。',
+    scenarios: ['固定步骤的重复回归测试', '需要精确定位与流程控制的测试', '长期维护、重复执行的测试脚本'],
+    integration: '本项目提供 Android 录制、流程编排、脚本回放与执行报告。',
+    url: 'https://appium.io/' },
+  { name: 'Artemis', version: artemisVersion.value?.version ? `v${artemisVersion.value.version}` : loadingVersion.value ? '检测中…' : '未获取',
+    status: loadingVersion.value ? '正在读取本地源码版本' : artemisVersionError.value || artemisVersion.value?.message || '等待检测', icon: Cpu,
+    description: '面向 Android 的 AI 自动化工具，根据自然语言任务规划并执行操作，支持跨应用工作流和执行日志记录。',
+    scenarios: ['用任务目标描述端到端流程', '跨应用操作与探索性任务', '与 AI 编程助手配合验证移动应用'],
+    integration: '本项目嵌入独立控制台，模型、设备及任务在 Artemis 中单独配置。',
+    url: 'https://github.com/google/artemis' },
 ]);
 
 const extractOperationSections = (startHeading: string, endHeading: string) => {
@@ -114,16 +128,18 @@ const switchOperationType = (value: OperationType) => {
             <article v-for="item in versions" :key="item.name" class="help-center__version-card">
               <div class="help-center__version-label"><el-icon><component :is="item.icon" /></el-icon><span>{{ item.name }}</span></div>
               <strong>{{ item.version }}</strong>
-              <p>{{ item.description }}</p>
+              <p class="help-center__version-status">{{ item.status }}</p>
+              <div class="help-center__framework-details">
+                <h3>框架简介</h3>
+                <p>{{ item.description }}</p>
+                <h3>适合场景</h3>
+                <ul><li v-for="scenario in item.scenarios" :key="scenario">{{ scenario }}</li></ul>
+                <p class="help-center__integration">{{ item.integration }}</p>
+              </div>
+              <a class="help-center__framework-link" :href="item.url" target="_blank" rel="noopener noreferrer" :aria-label="`${item.name} 官方文档（新窗口打开）`">官方文档 ↗</a>
             </article>
           </div>
-          <h3 class="help-center__section-title">技术栈</h3>
-          <div class="help-center__technology-grid">
-            <div v-for="item in technologies" :key="item.name" class="help-center__technology">
-              <div><strong>{{ item.name }}</strong><el-tag size="small" effect="plain">{{ item.version }}</el-tag></div>
-              <p>{{ item.description }}</p>
-            </div>
-          </div>
+
         </div>
       </el-tab-pane>
       <el-tab-pane name="guide">
@@ -161,16 +177,20 @@ const switchOperationType = (value: OperationType) => {
 .help-center__version-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
 .help-center__version-heading h2 { margin: 0; font-size: 17px; font-weight: 600; }
 .help-center__versions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
-.help-center__version-card { min-width: 0; padding: 20px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); }
+.help-center__version-card { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
 .help-center__version-label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--ui-text-secondary); font-size: 14px; }
-.help-center__version-label .el-icon { padding: 8px; box-sizing: content-box; border-radius: 8px; background: var(--el-color-primary-light-9); color: var(--ui-primary); font-size: 18px; }
+.help-center__version-label .el-icon { padding: 8px; box-sizing: content-box; border-radius: var(--ui-radius-control); background: var(--el-color-primary-light-9); color: var(--ui-primary); font-size: 18px; }
 .help-center__version-card strong { display: block; color: var(--ui-text); font-size: 28px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
 .help-center__version-card p { margin: 10px 0 0; color: var(--ui-text-secondary); font-size: 12px; line-height: 1.6; }
-.help-center__section-title { margin: 24px 0 12px; color: var(--ui-text); font-size: 17px; }
-.help-center__technology-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
-.help-center__technology { padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: 9px; background: #fff; }
-.help-center__technology > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.help-center__technology p { margin: 6px 0 0; color: var(--ui-text-secondary); font-size: 13px; }
+.help-center__version-card .help-center__version-status { min-height: 38px; color: var(--ui-text-muted); overflow-wrap: anywhere; }
+.help-center__framework-details { flex: 1; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ui-border); }
+.help-center__framework-details h3 { margin: 0; color: var(--ui-text); font-size: 13px; font-weight: 600; }
+.help-center__framework-details h3:not(:first-child) { margin-top: 18px; }
+.help-center__framework-details ul { margin: 8px 0 0; padding-left: 18px; color: var(--ui-text-secondary); font-size: 12px; line-height: 1.8; }
+.help-center__version-card .help-center__integration { margin-top: 16px; padding: 10px 12px; border-radius: var(--ui-radius-control); background: var(--ui-bg-soft); }
+.help-center__framework-link { align-self: flex-start; margin-top: 16px; color: var(--ui-primary); font-size: 12px; text-decoration: none; }
+.help-center__framework-link:hover { text-decoration: underline; }
+.help-center__framework-link:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 3px; border-radius: 2px; }
 .help-center__operations { padding: 18px 6px 18px 2px; }
 .help-center__operation-types { margin-bottom: 16px; }
 .help-center__operation-menu { border-top: 1px solid var(--ui-border); }
@@ -179,7 +199,6 @@ const switchOperationType = (value: OperationType) => {
 .help-center__operation-menu :deep(.el-collapse-item__wrap) { border-right: 1px solid var(--ui-border); border-left: 1px solid var(--ui-border); }
 .help-center__operation-menu :deep(.el-collapse-item__content) { padding: 4px 18px 18px; }
 @media (max-width: 760px) {
-  .help-center__versions,
-  .help-center__technology-grid { grid-template-columns: 1fr; }
+  .help-center__versions { grid-template-columns: 1fr; }
 }
 </style>

package/src/pages/AiGeneratorPage.vue

@@ -241,7 +241,7 @@ const handlePromptFileChange = async (event: Event) => {
   height: auto;
   min-height: 64px;
   padding: 11px 12px;
-  border-radius: 6px;
+  border-radius: var(--ui-radius-control);
   line-height: 1.35;
   white-space: normal;
 }

package/src/pages/ArtemisPage.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { onScopeDispose, shallowRef, watch } from 'vue';
+import { APP_BASE } from '../api';
+
+const props = defineProps<{ active: boolean }>();
+const loading = shallowRef(false);
+const message = shallowRef('');
+const url = shallowRef('');
+const frameUrl = shallowRef('');
+const revision = shallowRef(0);
+let controller: AbortController | undefined;
+
+async function connect(reload = false) {
+  controller?.abort();
+  const request = new AbortController();
+  controller = request;
+  loading.value = true;
+  message.value = '';
+  try {
+    const response = await fetch(`${APP_BASE}/api/artemis/status`, { signal: request.signal });
+    const data = await response.json();
+    if (!response.ok) throw new Error(data.message || '连接检查失败');
+    url.value = data.url;
+    if (!data.available) throw new Error(data.message);
+    if (!data.ancestors.includes(window.location.origin)) {
+      throw new Error('Artemis 未允许当前页面嵌入。请停止原服务，再用 npm run artemis 启动；自定义端口需配置 ARTEMIS_EMBED_ORIGINS。');
+    }
+    frameUrl.value = data.url;
+    if (reload) revision.value++;
+  } catch (error) {
+    if (request.signal.aborted) return;
+    frameUrl.value = '';
+    message.value = error instanceof Error ? error.message : '连接检查失败';
+  } finally {
+    if (!request.signal.aborted) loading.value = false;
+  }
+}
+
+watch(() => props.active, active => { if (active) void connect(); }, { immediate: true });
+onScopeDispose(() => controller?.abort());
+</script>
+
+<template>
+  <section class="artemis-page" aria-label="Artemis 控制台">
+    <div class="artemis-toolbar">
+      <span>Artemis · Android AI 自动化</span>
+      <div class="artemis-actions">
+        <el-button :loading="loading" @click="connect(true)">重新连接</el-button>
+        <a v-if="url" :href="url" target="_blank" rel="noopener noreferrer">独立打开</a>
+      </div>
+    </div>
+    <div v-if="message" class="artemis-empty" role="status">
+      <h2>Artemis 暂不可用</h2>
+      <p>{{ message }}</p>
+      <p>启动服务后，点击“重新连接”。模型和设备在 Artemis 内配置。</p>
+      <code>npm run artemis</code>
+    </div>
+    <div v-else-if="!frameUrl" class="artemis-empty" role="status">正在连接 Artemis…</div>
+    <iframe v-if="frameUrl" :key="revision" :src="frameUrl" title="Artemis Android 自动化控制台" allow="clipboard-write" class="artemis-frame" />
+  </section>
+</template>
+
+<style scoped>
+.artemis-page { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ui-bg); }
+.artemis-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--ui-border); font-size: 14px; }
+.artemis-actions { display: flex; align-items: center; gap: 16px; }
+.artemis-actions a { color: var(--ui-primary); text-decoration: none; }
+.artemis-frame { flex: 1; width: 100%; min-height: 0; border: 0; }
+.artemis-empty { padding: 40px 24px; text-align: center; color: var(--ui-text-secondary); }
+.artemis-empty h2 { color: var(--ui-text); font-size: 18px; }
+.artemis-empty code { display: inline-block; padding: 10px 20px; background: var(--ui-bg); border-radius: var(--ui-radius-control); }
+</style>

package/src/pages/ConfigPage.vue

@@ -128,35 +128,34 @@ function handleTabKeydown(event: KeyboardEvent, index: number) {
 <style scoped>
 .config-tabs {
   display: flex;
-  width: 100%;
-  max-width: 100%;
+  width: fit-content;
+  max-width: calc(100% - 48px);
   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);
+  gap: 4px;
+  margin: 20px 24px 0;
+  padding: 4px;
+  border: 1px solid var(--ui-border);
+  border-radius: 24px;
+  background: var(--ui-bg-soft);
+  box-shadow: var(--ui-shadow-card);
 }
 .config-tabs .subnav__item {
-  min-height: 46px;
-  padding: 10px 2px;
-  border-bottom: 2px solid transparent;
-  border-radius: 0;
-  font-size: 14px;
+  min-height: 34px;
+  padding: 6px 16px;
+  border: 0;
+  border-radius: var(--ui-radius-pill);
+  font-size: 13px;
 }
 .config-tabs .subnav__item--active {
-  border-bottom-color: var(--ui-primary);
-  background: transparent;
+  background: var(--ui-surface);
   color: var(--ui-primary);
-  box-shadow: none;
+  box-shadow: var(--ui-shadow-card);
 }
 .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__header) { padding: 18px 24px; font-size: 16px; font-weight: 600; }
 :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-form-item__label) { margin-bottom: 8px; font-size: 13px; }
 :deep(.el-input__wrapper), :deep(.el-select__wrapper) { min-height: 36px; }
 :deep(.config-grid) { margin-bottom: 0; gap: 24px; }
 @media (max-width: 1000px) {