android-midscene-automation 0.1.42 → 0.2.1

package/src/components/help/HelpCenterDialog.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { computed, shallowRef } from 'vue';
+import { InfoFilled, QuestionFilled, Tools } from '@element-plus/icons-vue';
+import changelog from '../../../CHANGELOG.md?raw';
+import faq from '../../../FAQ.md?raw';
+import aiRecognitionGuide from '../../../AI识别操作说明.md?raw';
+import appiumGuide from '../../../流程节点操作说明.md?raw';
+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 OperationSection = { id: string; title: string; content: string };
+
+const visible = defineModel<boolean>({ required: true });
+const activeTab = shallowRef('about');
+type OperationType = 'midscene' | 'appium' | 'aiRecognition' | 'faq';
+
+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 technologies = computed(() => [
+  { name: 'Vue', version: dependencyVersion('vue'), description: '界面与交互框架' },
+  { name: 'Element Plus', version: dependencyVersion('element-plus'), description: '界面组件库' },
+  { name: 'Appium', version: '2.x', description: 'Android 原生自动化与回放' },
+  { name: 'Midscene', version: midsceneVersion, description: 'AI 驱动的界面理解与自动化' },
+  { 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: '类型与工程开发语言' },
+]);
+
+const extractOperationSections = (startHeading: string, endHeading: string) => {
+  const start = operationGuide.indexOf(`## ${startHeading}`);
+  const end = operationGuide.indexOf(`## ${endHeading}`, start + 1);
+  if (start < 0) return [];
+  const source = operationGuide.slice(start, end < 0 ? undefined : end);
+  const matches = [...source.matchAll(/^###\s+(.+)$/gm)];
+  return matches.map<OperationSection>((match, index) => ({
+    id: `${startHeading}-${index}`,
+    title: match[1]!.trim(),
+    content: source.slice(match.index! + match[0].length, matches[index + 1]?.index).trim(),
+  }));
+};
+
+const extractDocumentSections = (source: string, prefix: string) => {
+  const matches = [...source.matchAll(/^##\s+(.+)$/gm)];
+  return matches.map<OperationSection>((match, index) => ({
+    id: `${prefix}-${index}`,
+    title: match[1]!.trim(),
+    content: source.slice(match.index! + match[0].length, matches[index + 1]?.index).trim(),
+  }));
+};
+
+const midsceneOperations = computed(() => extractOperationSections('Midscene 操作说明', 'Appium 使用前准备'));
+const appiumOperations = computed(() => extractDocumentSections(appiumGuide, 'appium'));
+const aiRecognitionOperations = computed(() => extractDocumentSections(aiRecognitionGuide, 'ai-recognition'));
+const faqOperations = computed(() => extractDocumentSections(faq, 'faq'));
+const visibleOperations = computed(() => {
+  if (operationType.value === 'midscene') return midsceneOperations.value;
+  if (operationType.value === 'appium') return appiumOperations.value;
+  if (operationType.value === 'aiRecognition') return aiRecognitionOperations.value;
+  return faqOperations.value;
+});
+
+const switchOperationType = (value: OperationType) => {
+  operationType.value = value;
+  activeOperation.value = '';
+};
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    title="帮助与版本"
+    width="min(960px, calc(100vw - 48px))"
+    class="help-center-dialog"
+    top="5vh"
+    draggable
+    destroy-on-close
+  >
+    <el-tabs v-model="activeTab" class="help-center">
+      <el-tab-pane name="about">
+        <template #label><el-icon><InfoFilled /></el-icon><span>关于</span></template>
+        <el-scrollbar height="min(620px, calc(100vh - 230px))">
+          <div class="help-center__content">
+            <div class="help-center__versions">
+              <div><span>当前版本</span><strong>v{{ appVersion }}</strong></div>
+              <div><span>Midscene 版本</span><strong>v{{ midsceneVersion }}</strong></div>
+            </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-scrollbar>
+      </el-tab-pane>
+      <el-tab-pane name="guide">
+        <template #label><el-icon><QuestionFilled /></el-icon><span>操作说明</span></template>
+        <el-scrollbar height="min(620px, calc(100vh - 230px))">
+          <div class="help-center__operations">
+            <el-radio-group :model-value="operationType" class="help-center__operation-types" @change="switchOperationType">
+              <el-radio-button value="midscene">Midscene</el-radio-button>
+              <el-radio-button value="appium">Appium</el-radio-button>
+              <el-radio-button value="aiRecognition">AI 识别</el-radio-button>
+              <el-radio-button value="faq">常见问题</el-radio-button>
+            </el-radio-group>
+            <el-collapse v-model="activeOperation" accordion class="help-center__operation-menu">
+              <el-collapse-item v-for="item in visibleOperations" :key="item.id" :name="item.id">
+                <template #title><span class="help-center__operation-title">{{ item.title }}</span></template>
+                <MarkdownDocument :content="item.content" />
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </el-scrollbar>
+      </el-tab-pane>
+      <el-tab-pane name="changelog">
+        <template #label><el-icon><Tools /></el-icon><span>更新记录</span></template>
+        <el-scrollbar height="min(620px, calc(100vh - 230px))">
+          <div class="help-center__document"><MarkdownDocument :content="changelog" /></div>
+        </el-scrollbar>
+      </el-tab-pane>
+    </el-tabs>
+  </el-dialog>
+</template>
+
+<style scoped>
+.help-center :deep(.el-tabs__header) { margin-bottom: 0; }
+.help-center :deep(.el-tabs__item) { display: inline-flex; align-items: center; gap: 6px; }
+.help-center__content,
+.help-center__document { padding: 22px 6px 18px 2px; }
+.help-center__versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+.help-center__versions div { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
+.help-center__versions span { color: #64748b; }
+.help-center__versions strong { color: #1677ff; font-size: 18px; }
+.help-center__section-title { margin: 24px 0 12px; color: #1f2937; 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 #e2e8f0; 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: #64748b; font-size: 13px; }
+.help-center__operations { padding: 18px 6px 18px 2px; }
+.help-center__operation-types { margin-bottom: 16px; }
+.help-center__operation-menu { border-top: 1px solid #e5e7eb; }
+.help-center__operation-title { color: #334155; font-size: 14px; font-weight: 600; }
+.help-center__operation-menu :deep(.el-collapse-item__header) { min-height: 48px; padding: 0 14px; border-right: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb; }
+.help-center__operation-menu :deep(.el-collapse-item__wrap) { border-right: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb; }
+.help-center__operation-menu :deep(.el-collapse-item__content) { padding: 4px 18px 18px; }
+:global(.help-center-dialog.el-dialog) { margin-top: 5vh; }
+@media (max-width: 760px) {
+  .help-center__versions,
+  .help-center__technology-grid { grid-template-columns: 1fr; }
+}
+</style>

package/src/components/help/MarkdownDocument.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+type DocumentBlock =
+  | { type: 'heading'; level: number; text: string }
+  | { type: 'paragraph'; text: string }
+  | { type: 'list'; ordered: boolean; items: string[] }
+  | { type: 'code'; text: string }
+  | { type: 'table'; headers: string[]; rows: string[][] };
+
+const props = defineProps<{ content: string }>();
+
+const cleanText = (value: string) => value
+  .replace(/\[([^\]]+)]\([^)]+\)/g, '$1')
+  .replace(/\*\*([^*]+)\*\*/g, '$1')
+  .replace(/`([^`]+)`/g, '$1')
+  .trim();
+
+const splitTableRow = (line: string) => line
+  .replace(/^\||\|$/g, '')
+  .split('|')
+  .map(cell => cleanText(cell));
+
+const blocks = computed<DocumentBlock[]>(() => {
+  const lines = props.content.replace(/\r\n/g, '\n').split('\n');
+  const result: DocumentBlock[] = [];
+  let index = 0;
+
+  while (index < lines.length) {
+    const line = lines[index] ?? '';
+    const trimmed = line.trim();
+    if (!trimmed) {
+      index += 1;
+      continue;
+    }
+
+    if (/^([-*_])\1{2,}$/.test(trimmed)) {
+      index += 1;
+      continue;
+    }
+
+    if (trimmed.startsWith('```')) {
+      const code: string[] = [];
+      index += 1;
+      while (index < lines.length && !lines[index]!.trim().startsWith('```')) {
+        code.push(lines[index]!);
+        index += 1;
+      }
+      result.push({ type: 'code', text: code.join('\n') });
+      index += 1;
+      continue;
+    }
+
+    const heading = /^(#{1,6})\s+(.+)$/.exec(trimmed);
+    if (heading) {
+      result.push({ type: 'heading', level: heading[1]!.length, text: cleanText(heading[2]!) });
+      index += 1;
+      continue;
+    }
+
+    if (trimmed.includes('|') && /^\s*\|?\s*:?-{3,}/.test(lines[index + 1] ?? '')) {
+      const headers = splitTableRow(trimmed);
+      const rows: string[][] = [];
+      index += 2;
+      while (index < lines.length && lines[index]!.includes('|') && lines[index]!.trim()) {
+        rows.push(splitTableRow(lines[index]!));
+        index += 1;
+      }
+      result.push({ type: 'table', headers, rows });
+      continue;
+    }
+
+    const listMatch = /^(?:[-*]\s+|(\d+)\.\s+)(.+)$/.exec(trimmed);
+    if (listMatch) {
+      const ordered = Boolean(listMatch[1]);
+      const items: string[] = [];
+      while (index < lines.length) {
+        const item = /^(?:[-*]\s+|(\d+)\.\s+)(.+)$/.exec(lines[index]!.trim());
+        if (!item || Boolean(item[1]) !== ordered) break;
+        items.push(cleanText(item[2]!));
+        index += 1;
+      }
+      result.push({ type: 'list', ordered, items });
+      continue;
+    }
+
+    const paragraph: string[] = [];
+    while (index < lines.length) {
+      const next = lines[index]!.trim();
+      if (!next || /^(#{1,6})\s+/.test(next) || next.startsWith('```') || /^(?:[-*]\s+|\d+\.\s+)/.test(next)) break;
+      if (next.includes('|') && /^\s*\|?\s*:?-{3,}/.test(lines[index + 1] ?? '')) break;
+      paragraph.push(cleanText(next));
+      index += 1;
+    }
+    result.push({ type: 'paragraph', text: paragraph.join(' ') });
+  }
+
+  return result;
+});
+</script>
+
+<template>
+  <article class="markdown-document">
+    <template v-for="(block, index) in blocks" :key="`${block.type}-${index}`">
+      <h1 v-if="block.type === 'heading' && block.level === 1" class="markdown-document__h1">{{ block.text }}</h1>
+      <h2 v-else-if="block.type === 'heading' && block.level === 2" class="markdown-document__h2">{{ block.text }}</h2>
+      <h3 v-else-if="block.type === 'heading'" class="markdown-document__h3">{{ block.text }}</h3>
+      <p v-else-if="block.type === 'paragraph'" class="markdown-document__paragraph">{{ block.text }}</p>
+      <ol v-else-if="block.type === 'list' && block.ordered" class="markdown-document__list">
+        <li v-for="item in block.items" :key="item">{{ item }}</li>
+      </ol>
+      <ul v-else-if="block.type === 'list'" class="markdown-document__list">
+        <li v-for="item in block.items" :key="item">{{ item }}</li>
+      </ul>
+      <pre v-else-if="block.type === 'code'" class="markdown-document__code"><code>{{ block.text }}</code></pre>
+      <div v-else-if="block.type === 'table'" class="markdown-document__table-wrap">
+        <table class="markdown-document__table">
+          <thead><tr><th v-for="header in block.headers" :key="header">{{ header }}</th></tr></thead>
+          <tbody><tr v-for="(row, rowIndex) in block.rows" :key="rowIndex"><td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td></tr></tbody>
+        </table>
+      </div>
+    </template>
+  </article>
+</template>
+
+<style scoped>
+.markdown-document { color: #475569; font-size: 14px; line-height: 1.75; }
+.markdown-document__h1 { margin: 0 0 18px; color: #1f2937; font-size: 24px; }
+.markdown-document__h2 { margin: 24px 0 10px; color: #1f2937; font-size: 19px; }
+.markdown-document__h3 { margin: 18px 0 8px; color: #334155; font-size: 16px; }
+.markdown-document__paragraph { margin: 8px 0; }
+.markdown-document__list { display: grid; gap: 5px; margin: 8px 0; padding-left: 24px; }
+.markdown-document__code { margin: 12px 0; padding: 14px; overflow: auto; border-radius: 8px; background: #f3f6fa; color: #334155; white-space: pre-wrap; }
+.markdown-document__table-wrap { margin: 12px 0; overflow-x: auto; }
+.markdown-document__table { width: 100%; border-collapse: collapse; }
+.markdown-document__table th,
+.markdown-document__table td { padding: 9px 12px; border: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
+.markdown-document__table th { background: #f8fafc; color: #334155; }
+</style>

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

@@ -1,16 +1,24 @@
+import { resolveReportSummary } from '../appium-recorder/report-summary';
 import { onScopeDispose, shallowRef, watch } from 'vue';
 import type { ConfigForm } from '../types';
 import { isHexColor } from '../appium-recorder/flow-appearance';
 import { resolveAiDeduplication } from '../appium-recorder/ai-deduplication';
 
 // 串行提交最新快照，较慢的旧请求不会在新请求后覆盖配置。
-export function useAppiumAutoSave(config: ConfigForm, save: (value: Omit<ConfigForm['appium'], 'model'>) => Promise<unknown>, onError: (error: unknown) => void) {
+export function useAppiumAutoSave(config: ConfigForm, save: (value: Omit<ConfigForm['appium'], 'model' | 'promptOptimizer'>) => Promise<unknown>, onError: (error: unknown) => void) {
   const saving = shallowRef(false);
   const status = shallowRef('');
   let initialized = false, saved = '', pending: string | undefined;
   let timer: ReturnType<typeof setTimeout> | undefined;
   // 模型只能通过“测试并保存”提交，自动保存仅观察其余设置。
-  function snapshotSettings() { const { model: _model, ...settings } = config.appium; return JSON.stringify(settings); }
+  function snapshotSettings() {
+    const { model: _model, promptOptimizer: _promptOptimizer, reportSummary, ...settings } = config.appium;
+    return JSON.stringify({ ...settings, ...(reportSummary ? { reportSummary: {
+      enabled: reportSummary.enabled,
+      prompt: reportSummary.prompt,
+      customPresets: reportSummary.customPresets,
+    } } : {}) });
+  }
   function initialize() { saved = snapshotSettings(); initialized = true; }
   async function flush() {
     if (saving.value || pending === undefined) return;
@@ -43,8 +51,8 @@ export function useAppiumAutoSave(config: ConfigForm, save: (value: Omit<ConfigF
       status.value = '颜色格式有误，尚未保存';
       return;
     }
-    try { resolveAiDeduplication(value.aiDeduplication); }
-    catch { status.value = '去重参数有误，尚未保存'; return; }
+    try { resolveAiDeduplication(value.aiDeduplication); resolveReportSummary(value.reportSummary); }
+    catch { status.value = '配置参数有误，尚未保存'; return; }
     pending = snapshot;
     status.value = '等待自动保存…';
     timer = setTimeout(() => { void flush(); }, 350);

package/src/pages/ConfigPage.vue

@@ -14,11 +14,11 @@ defineProps<{
   isSavingModelConfig: boolean;
   isSavingAppPreset: boolean;
   appiumSaveStatus?: string;
-  modelTestStatus: { midscene: string; scriptOptimizer: string; appium?: string };
+  modelTestStatus: { midscene: string; scriptOptimizer: string; appium?: string; promptOptimizer?: string };
 }>();
 
 defineEmits<{
-  testModel: [key: 'midscene' | 'scriptOptimizer' | 'appium'];
+  testModel: [key: 'midscene' | 'scriptOptimizer' | 'appium' | 'promptOptimizer'];
   saveModelConfig: [];
   saveAppPreset: [];
   editAppPreset: [app: AppPreset];
@@ -112,6 +112,8 @@ function handleTabKeydown(event: KeyboardEvent, index: number) {
         :config-form="configForm"
         :testing-model-key="testingModelKey"
         :test-status="modelTestStatus.appium"
+        :prompt-optimizer-test-status="modelTestStatus.promptOptimizer"
+        @test-prompt-optimizer-model="$emit('testModel', 'promptOptimizer')"
         :save-status="appiumSaveStatus"
         @test-model="$emit('testModel', 'appium')"
       />

package/src/style.css

@@ -40,6 +40,9 @@ select {
 }
 
 .layout-sidebar {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
   border-right: 1px solid #e4e7ed;
   background: #001529;
 }
@@ -64,6 +67,8 @@ select {
 }
 
 .layout-menu {
+  flex: 1;
+  min-height: 0;
   border-right: 0;
   background: transparent;
 }
@@ -75,6 +80,38 @@ select {
   --el-menu-active-color: #fff;
 }
 
+.layout-sidebar__footer {
+  display: flex;
+  justify-content: flex-end;
+  height: 52px;
+  background: #fff;
+}
+
+.layout-sidebar__help {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.layout-sidebar__help:hover,
+.layout-sidebar__help:focus-visible {
+  background: transparent;
+  color: #6b7280;
+  outline: none;
+}
+
+.layout-sidebar__help .el-icon {
+  font-size: 17px;
+}
+
 .layout-main {
   display: grid;
   grid-template-rows: 60px minmax(0, 1fr);
@@ -517,50 +554,6 @@ select {
   line-height: 18px;
 }
 
-.appium-activity-lock-alert {
-  align-items: flex-start;
-}
-
-.appium-activity-lock-alert .el-alert__content {
-  min-width: 0;
-}
-
-.appium-activity-lock-alert__details {
-  display: grid;
-  gap: 5px;
-  min-width: 0;
-  margin-top: 6px;
-  color: #b88230;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.appium-activity-lock-alert__details > div {
-  display: grid;
-  grid-template-columns: 72px minmax(0, 1fr);
-  gap: 6px;
-  min-width: 0;
-}
-
-.appium-activity-lock-alert__details strong {
-  font-weight: 600;
-}
-
-.appium-activity-lock-alert__details code {
-  min-width: 0;
-  color: inherit;
-  font-family: inherit;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  white-space: normal;
-}
-
-.appium-activity-lock-alert__details p {
-  min-width: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
 .appium-action-dropdown__item {
   display: flex;
   align-items: center;
@@ -1402,7 +1395,6 @@ select {
 .appium-replay-dialog.el-dialog {
   display: flex;
   padding: 16px;
-  width: min(820px, calc(100vw - 32px)) !important;
   height: min(620px, calc(100vh - 64px));
   min-width: 420px;
   min-height: 280px;

package/src/types.ts

@@ -1,3 +1,4 @@
+import type { ReportSummaryConfig } from './appium-recorder/report-summary';
 import type { AiPromptPreset } from './appium-recorder/ai-prompt-presets';
 import type { ScriptStep } from './script-generator';
 import type { MidsceneModelProvider } from './config/midscene-model-presets';
@@ -14,7 +15,7 @@ export type GeneratorForm = {
 };
 
 export type ConfigForm = {
-  appium: { model: AiRecognitionModel; aiPromptPresets?: AiPromptPreset[]; aiDeduplication?: AiDeduplicationConfig; flowBackgroundColor?: string; flowLineColor?: string; screenshotReport?: boolean };
+  appium: { reportSummary?: ReportSummaryConfig; model: AiRecognitionModel; promptOptimizer?: { model: AiRecognitionModel }; aiPromptPresets?: AiPromptPreset[]; aiDeduplication?: AiDeduplicationConfig; flowBackgroundColor?: string; flowLineColor?: string; screenshotReport?: boolean };
   runtime: {
     androidSdkPath: string;
     reportOutputPath: string;