android-midscene-automation 0.1.43 → 0.2.1

package/server/appium-recorder/ai-recognition.ts

@@ -17,16 +17,28 @@ export function aiAnswerText(content: string | null | undefined) {
   return (content || '').replace(/<think>[\s\S]*?<\/think>/gi, '').trim().replace(/^```(?:json)?\s*([\s\S]*?)\s*```$/i, '$1').trim();
 }
 
+export class AiInvalidResultError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'AiInvalidResultError';
+  }
+}
+
+export function resolveAiInvalidResultFallback(error: unknown, branch?: 'yes' | 'no'): boolean | null {
+  if (!(error instanceof AiInvalidResultError) || (branch !== 'yes' && branch !== 'no')) return null;
+  return branch === 'yes';
+}
+
 export function parseAiRecognitionResult(content: string | null | undefined): { result: boolean; reason: string } {
   // 只接受 JSON 布尔值；字符串 "false"、不确定或格式错误不能误走 false 分支。
   const text = aiAnswerText(content);
   let value: unknown;
-  try { value = JSON.parse(text); } catch { throw new Error('AI 识别未返回有效 JSON 结果'); }
+  try { value = JSON.parse(text); } catch { throw new AiInvalidResultError('AI 识别未返回有效 JSON 结果'); }
   if (!value || typeof value !== 'object' || !('result' in value) || typeof value.result !== 'boolean') {
     if (value && typeof value === 'object' && 'result' in value && value.result === null) {
-      throw new Error(`AI 无法判断，无法进入分支：${'reason' in value && typeof value.reason === 'string' ? value.reason.slice(0, 2000) : '未返回确定的判断结果'}`);
+      throw new AiInvalidResultError(`AI 无法判断：${'reason' in value && typeof value.reason === 'string' ? value.reason.slice(0, 2000) : '未返回确定的判断结果'}`);
     }
-    throw new Error('AI 识别结果必须包含布尔值 result（true/false）');
+    throw new AiInvalidResultError('AI 识别结果必须包含布尔值 result（true/false）');
   }
   const reason = 'reason' in value && typeof value.reason === 'string' ? value.reason.trim() : '';
   return { result: value.result, reason: reason.slice(0, 2000) };
@@ -96,7 +108,7 @@ export async function recognizeDeviceScreen(input: {
       // 先记录正文再解析，格式错误或被截断的回答也可排查；不记录请求与鉴权信息。
       const content = (choice?.message.content || '').split(model.apiKey).join('[REDACTED]');
       input.onModelOutput?.(content || '（空响应）');
-      if (choice?.finish_reason !== 'stop') throw new Error('AI 识别响应未完整返回');
+      if (choice?.finish_reason !== 'stop') throw new AiInvalidResultError('AI 识别响应未完整返回');
       if (input.aiBranchEnabled === false && observationConfig?.mode !== 'untilMatch') {
         const reason = aiAnswerText(content);
         if (!reason) throw new Error('AI 识别未返回回答内容');

package/server/appium-recorder/appium-runner.ts

@@ -10,7 +10,7 @@ import { adbScreenshotBase64 } from './screenshot';
 import { loadConfig } from '../config';
 import { timestampReplayLog } from './replay-log';
 import { checkImage } from './image-check';
-import { recognizeDeviceScreen } from './ai-recognition';
+import { recognizeDeviceScreen, resolveAiInvalidResultFallback } from './ai-recognition';
 import { IMAGE_CHECK_MODES, type ImageCheckResult } from '../../src/appium-recorder/image-check';
 import { formatStageLog } from '../../src/appium-recorder/stage-log';
 import { openGalleryOnDevice } from './open-gallery';
@@ -1347,6 +1347,16 @@ async function replayFlowSteps(
           await captureReplayFrame(sessionId, step, index + 1, options.scriptName || '', 'stopped', '已终止');
           throw new ReplayStoppedError();
         }
+        const invalidResultFallback = step.type === 'aiRecognition'
+          ? resolveAiInvalidResultFallback(error, step.aiInvalidResultBranch)
+          : null;
+        if (invalidResultFallback !== null) {
+          const status = `AI 未返回有效 true/false，按兜底配置进入 ${invalidResultFallback ? 'true' : 'false'} 分支`;
+          lines.push(`[节点 ${index + 1}] ${status}；${errorDetail(error)}`);
+          await captureReplayFrame(sessionId, frameStep, index + 1, options.scriptName || '', 'after', status);
+          index = traversal.branch(step, invalidResultFallback);
+          continue;
+        }
         if (error instanceof ConditionTimeoutError && (step.timeoutBranch === 'yes' || step.timeoutBranch === 'no')) {
           const branch = step.timeoutBranch;
           const status = `判断超时，按配置进入${branch === 'yes' ? '左' : '右'}侧分支（${flowBranchLabel(step, branch)}）`;

package/server/appium-recorder/repository.ts

@@ -1,4 +1,4 @@
-import { validateAiObservation, type AiObservationConfig } from '../../src/appium-recorder/ai-recognition';
+import { validateAiInvalidResultBranch, validateAiObservation, type AiInvalidResultBranch, type AiObservationConfig } from '../../src/appium-recorder/ai-recognition';
 import {
   createId,
   querySql,
@@ -103,6 +103,7 @@ export type AppiumRecordedStepRecord = {
   timeoutMs?: number;
   aiTimeoutEnabled?: boolean;
   aiBranchEnabled?: boolean;
+  aiInvalidResultBranch?: AiInvalidResultBranch;
   aiObservation?: AiObservationConfig;
   timeoutBranch?: 'stop' | 'yes' | 'no';
   longPressMode?: 'element' | 'coordinates';
@@ -382,7 +383,10 @@ export function saveAppiumRecordedScript(input: {
   if (input.variables !== undefined) validateVariables(input.variables);
   for (const step of steps) {
     // 读取旧脚本必须容错，让用户能打开并修正无效配置；仅在写入时校验。
-    if (step.type === 'aiRecognition') validateAiObservation(step.aiObservation);
+    if (step.type === 'aiRecognition') {
+      validateAiObservation(step.aiObservation);
+      validateAiInvalidResultBranch(step.aiInvalidResultBranch);
+    }
     if (step.type === 'imageCheck') validateImageCheck(step.imageCheck);
     if (step.type === 'extractVariable') validateExtraction(step.extractVariable);
     if (step.type === 'runScript') { validateVariables(step.parameters); validateReturns(step.returns); }

package/src/App.vue

@@ -12,6 +12,7 @@ import {
   Loading,
   Monitor,
   Operation,
+  QuestionFilled,
   RefreshLeft,
   Setting,
   VideoPause,
@@ -40,6 +41,7 @@ import AppiumPage from './appium-recorder/AppiumPage.vue';
 import { normalizeFlowBackground, normalizeFlowLineColor } from './appium-recorder/flow-appearance';
 import ConfigPage from './pages/ConfigPage.vue';
 import GeneratorPage from './pages/GeneratorPage.vue';
+import HelpCenterDialog from './components/help/HelpCenterDialog.vue';
 import type {
   AndroidDevice,
   ConfigForm,
@@ -67,6 +69,7 @@ const isSavingAppPreset = ref(false);
 const isRunningScript = ref(false);
 const isStoppingScript = ref(false);
 const showGeneratedCode = ref(false);
+const helpCenterVisible = shallowRef(false);
 const generatedCodeOverride = shallowRef<string | null>(null);
 const generatedCodeDraft = shallowRef('');
 const generatedCodeEditing = shallowRef(false);
@@ -1451,6 +1454,18 @@ onUnmounted(() => {
           <span>参数配置</span>
         </el-menu-item>
       </el-menu>
+      <div class="layout-sidebar__footer">
+        <el-tooltip content="帮助与版本" placement="right">
+          <button
+            type="button"
+            class="layout-sidebar__help"
+            aria-label="打开帮助与版本信息"
+            @click="helpCenterVisible = true"
+          >
+            <el-icon><QuestionFilled /></el-icon>
+          </button>
+        </el-tooltip>
+      </div>
     </aside>
 
     <div class="layout-main">
@@ -1607,7 +1622,10 @@ onUnmounted(() => {
           :refresh-device-preview="refreshDevicePreview"
           :swipe-device="swipeDevice"
         />
+
       </main>
     </div>
+
+    <HelpCenterDialog v-model="helpCenterVisible" />
   </div>
 </template>

package/src/appium-recorder/ai-recognition.ts

@@ -1,6 +1,7 @@
 import type { AiDeduplicationConfig } from './ai-deduplication';
 
 export type AiRecognitionModel = { baseUrl: string; apiKey: string; name: string };
+export type AiInvalidResultBranch = 'yes' | 'no';
 export type AiObservationConfig = { durationMs: number; intervalMs: number; mode?: 'batch' | 'untilMatch' };
 export type AiObservationFrame = { elapsedMs: number; imageDataUrl: string };
 export type AiRecognitionResult = {
@@ -21,6 +22,12 @@ export function validateAiObservation(value: unknown): AiObservationConfig | und
   return { durationMs, intervalMs, ...(mode ? { mode } : {}) };
 }
 
+export function validateAiInvalidResultBranch(value: unknown): AiInvalidResultBranch | undefined {
+  if (value === undefined || value === null || value === '') return undefined;
+  if (value !== 'yes' && value !== 'no') throw new Error('AI 无有效结果兜底分支无效');
+  return value;
+}
+
 // 未保存此字段的是旧版判断节点，保留已有分支；新节点显式保存 false。
 export function isAiBranchEnabled(step: { aiBranchEnabled?: boolean }) {
   return step.aiBranchEnabled !== false;

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

@@ -3,6 +3,7 @@ import { computed, inject, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
 import { Loading, QuestionFilled } from '@element-plus/icons-vue';
 import { isAiBranchEnabled, validateAiRecognitionPrompt, DEFAULT_AI_OBSERVATION, validateAiObservation, type AiObservationConfig } from '../ai-recognition';
 import { optimizeAppiumPrompt, validateAiBranchQuestion } from '../api';
+import { flowBranchLabel } from '../flow-labels';
 import type { AppiumRecordedStep } from '../types';
 import { aiPromptPresetsKey, DEFAULT_AI_PROMPT_PRESETS } from '../ai-prompt-presets';
 import AiRecognitionPromptInput from './AiRecognitionPromptInput.vue';
@@ -17,7 +18,9 @@ const error = ref('');
 const branch = computed(() => isAiBranchEnabled(props.step));
 const untilMatch = computed(() => props.step.aiObservation?.mode === 'untilMatch');
 const branchChoice = ref(branch.value);
+const fallbackEnabled = shallowRef(Boolean(props.step.aiInvalidResultBranch));
 watch(branch, value => { branchChoice.value = value; });
+watch(() => props.step.aiInvalidResultBranch, value => { fallbackEnabled.value = Boolean(value); });
 let controller: AbortController | undefined;
 let optimizeController: AbortController | undefined;
 watch(() => props.step.value, value => { prompt.value = value || ''; });
@@ -37,6 +40,12 @@ async function toggleBranch(enabled: boolean) {
   branchChoice.value = branch.value;
 }
 
+function toggleFallback(enabled: boolean) {
+  fallbackEnabled.value = enabled;
+  error.value = '';
+  if (!enabled) emit('update', { aiInvalidResultBranch: undefined });
+}
+
 async function optimizePrompt() {
   if (busy.value || optimizingPrompt.value || props.disabled) return;
   error.value = '';
@@ -148,6 +157,24 @@ async function save(enabled: boolean, observation?: AiObservationConfig) {
       正在验证…
     </span>
   </el-form-item>
+  <el-form-item v-if="branch">
+    <el-checkbox :model-value="fallbackEnabled" :disabled="disabled || busy" @update:model-value="toggleFallback($event === true)">启用兜底</el-checkbox>
+    <el-tooltip placement="top" :show-after="200">
+      <template #content><div class="recognition-help-content">仅在模型返回空内容、无效格式、无法判断或没有返回 true/false 时生效。正常返回布尔结果时仍按识别结果进入分支；请求失败和超时不使用此兜底。</div></template>
+      <el-button class="recognition-help" text :icon="QuestionFilled" aria-label="AI 识别兜底说明" @click.prevent />
+    </el-tooltip>
+  </el-form-item>
+  <el-form-item v-if="branch && fallbackEnabled" label="兜底分支">
+    <el-select
+      :model-value="step.aiInvalidResultBranch || ''"
+      :disabled="disabled || busy"
+      placeholder="请选择左右分支"
+      @update:model-value="emit('update', { aiInvalidResultBranch: $event })"
+    >
+      <el-option :label="`进入左侧分支（${flowBranchLabel(step, 'yes')}）`" value="yes" />
+      <el-option :label="`进入右侧分支（${flowBranchLabel(step, 'no')}）`" value="no" />
+    </el-select>
+  </el-form-item>
   <el-alert v-if="error" :title="error" type="warning" :closable="false" show-icon />
 </template>
 

package/src/appium-recorder/flow-labels.ts

@@ -85,7 +85,7 @@ export function flowStepMeta(step: AppiumRecordedStep) {
   if (step.type === 'breakLoop') return step.breakLoopTargetId ? '退出指定循环，继续循环结束后的流程' : '退出当前循环，继续循环结束后的流程';
   if (step.type === 'continueLoop') return step.continueLoopTargetId ? '结束本轮，进入指定循环的下一轮' : '结束本轮，进入当前循环的下一轮';
   if (step.type === 'log') return `${step.logPrefix ?? DEFAULT_LOG_PREFIX}:${step.value || ''}`;
-  if (step.type === 'aiRecognition') return `AI ${step.aiObservation?.mode === 'untilMatch' ? '命中即结束' : step.aiObservation ? '持续观察' : '识别'} · ${step.value || '未填写识别内容'}`;
+  if (step.type === 'aiRecognition') return `AI ${step.aiObservation?.mode === 'untilMatch' ? '命中即结束' : step.aiObservation ? '持续观察' : '识别'} · ${step.value || '未填写识别内容'}${step.aiInvalidResultBranch ? ` · 无有效结果→${step.aiInvalidResultBranch === 'yes' ? 'true' : 'false'}` : ''}`;
   if (step.type === 'longPress') {
     const target = longPressMode(step) === 'element'
       ? `元素 ${step.selector?.strategy || ''} ${step.selector?.value || ''}`

package/src/appium-recorder/types.ts

@@ -1,4 +1,4 @@
-import type { AiObservationConfig } from './ai-recognition';
+import type { AiInvalidResultBranch, AiObservationConfig } from './ai-recognition';
 import type { TestVariable, VariableExtraction, ScriptReturn } from './variables';
 import type { ImageCheckConfig } from './image-check';
 
@@ -125,6 +125,7 @@ export type AppiumRecordedStep = {
   timeoutMs?: number;
   aiTimeoutEnabled?: boolean;
   aiBranchEnabled?: boolean;
+  aiInvalidResultBranch?: AiInvalidResultBranch;
   aiObservation?: AiObservationConfig;
   timeoutBranch?: 'stop' | 'yes' | 'no';
   longPressMode?: 'element' | 'coordinates';

package/src/components/config/AiPromptPresetsSettings.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import { Delete, Plus } from '@element-plus/icons-vue';
+import { computed, ref, shallowRef } from 'vue';
+import { Check, Close, Delete, Edit, 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';
@@ -10,6 +10,9 @@ const emit = defineEmits<{ 'update:modelValue': [presets: AiPromptPreset[]] }>()
 const presets = computed(() => resolveAiPromptPresets(props.modelValue));
 const draft = ref('');
 const sceneName = ref('');
+const editIndex = shallowRef<number | null>(null);
+const editSceneName = ref('');
+const editPrompt = ref('');
 
 function addPreset() {
   try {
@@ -20,6 +23,34 @@ function addPreset() {
     draft.value = '';
   } catch (error) { ElMessage.warning(error instanceof Error ? error.message : '添加提示词失败'); }
 }
+
+function startEdit(index: number) {
+  const preset = presets.value[index];
+  if (!preset) return;
+  editIndex.value = index;
+  editSceneName.value = preset.name;
+  editPrompt.value = preset.prompt;
+}
+
+function cancelEdit() {
+  editIndex.value = null;
+  editSceneName.value = '';
+  editPrompt.value = '';
+}
+
+function saveEdit() {
+  if (editIndex.value === null) return;
+  try {
+    const next = presets.value.map((preset, index) => index === editIndex.value
+      ? { name: editSceneName.value, prompt: validateAiRecognitionPrompt(editPrompt.value) }
+      : preset);
+    emit('update:modelValue', resolveAiPromptPresets(next));
+    cancelEdit();
+    ElMessage.success('预设提示词已修改');
+  } catch (error) {
+    ElMessage.warning(error instanceof Error ? error.message : '修改提示词失败');
+  }
+}
 </script>
 
 <template>
@@ -37,9 +68,24 @@ function addPreset() {
         <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 v-for="(preset, index) in presets" :key="`${preset.name}-${index}`" class="ai-prompt-row" :class="{ 'ai-prompt-row--editing': editIndex === index }">
+          <template v-if="editIndex === index">
+            <div class="ai-prompt-editor">
+              <el-input v-model="editSceneName" maxlength="80" placeholder="测试场景名称" />
+              <el-input v-model="editPrompt" type="textarea" :rows="3" maxlength="4000" show-word-limit placeholder="提示词内容" />
+              <div class="ai-prompt-editor__actions">
+                <el-button size="small" :icon="Close" @click="cancelEdit">取消</el-button>
+                <el-button size="small" type="primary" :icon="Check" @click="saveEdit">保存</el-button>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div class="ai-prompt-content"><strong>{{ preset.name }}</strong><p>{{ preset.prompt }}</p></div>
+            <div class="ai-prompt-row__actions">
+              <el-button text :icon="Edit" :disabled="editIndex !== null" :aria-label="`编辑提示词 ${preset.name}`" @click="startEdit(index)" />
+              <el-button text :icon="Delete" :disabled="editIndex !== null" :aria-label="`删除提示词 ${preset.name}`" @click="emit('update:modelValue', presets.filter((_, i) => i !== index))" />
+            </div>
+          </template>
         </div>
         <el-empty v-if="!presets.length" description="暂无预设提示词" :image-size="60" />
       </div>
@@ -54,10 +100,14 @@ function addPreset() {
 .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--editing { height: auto; min-height: var(--ai-prompt-row-height); }
 .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__actions { display: flex; flex-shrink: 0; }
+.ai-prompt-editor { display: grid; flex: 1; gap: 10px; min-width: 0; padding-right: 4px; }
+.ai-prompt-editor__actions { display: flex; justify-content: flex-end; gap: 8px; }
 .ai-prompt-row .el-button { flex-shrink: 0; }
 .ai-prompt-list :deep(.el-empty) { height: 100%; padding: 0; }
 </style>

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>