android-midscene-automation 0.1.43 → 0.2.2

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/config/AppiumConfigPanel.vue

@@ -12,8 +12,10 @@ defineProps<{
   testStatus?: string;
   promptOptimizerTestStatus?: string;
   saveStatus?: string;
+  saveFailed?: boolean;
 }>();
-defineEmits<{ testModel: []; testPromptOptimizerModel: [] }>();
+defineEmits<{
+  retrySave: []; testModel: []; testPromptOptimizerModel: [] }>();
 </script>
 
 <template>
@@ -22,6 +24,7 @@ defineEmits<{ testModel: []; testPromptOptimizerModel: [] }>();
       <header class="appium-section-heading">
         <div><h2 id="appium-models-title">模型服务</h2><p>不同任务使用独立模型，配置修改需测试通过后保存。</p></div>
         <span v-if="saveStatus" class="config-save-status" role="status">{{ saveStatus }}</span>
+        <el-button v-if="saveFailed" link type="primary" @click="$emit('retrySave')">重试保存</el-button>
       </header>
       <div class="appium-model-grid">
         <AppiumModelSettings v-model="configForm.appium.model" title="AI 识别模型" badge="视觉"

package/src/components/config/AppiumModelSettings.vue

@@ -27,7 +27,7 @@ defineEmits<{ test: [] }>();
     <p class="appium-model-description">{{ description }}</p>
     <el-form label-position="top" :disabled="!!testingModelKey">
       <el-form-item label="Base URL"><el-input v-model="model.baseUrl" placeholder="兼容 OpenAI 的 API 地址" /></el-form-item>
-      <el-form-item label="API Key"><el-input v-model="model.apiKey" type="password" show-password /></el-form-item>
+      <el-form-item label="API Key"><el-input v-model="model.apiKey" type="password" placeholder="已保存的 Key 显示为掩码，可输入新 Key 替换" show-password /></el-form-item>
       <el-form-item label="Model Name"><el-input v-model="model.name" :placeholder="namePlaceholder" /></el-form-item>
       <el-alert v-if="testStatus" class="appium-model-status" :title="testStatus"
         :type="testStatus.startsWith('测试通过') ? 'success' : 'warning'" :closable="false" show-icon />

package/src/components/config/BaseConfigPanel.vue

@@ -31,7 +31,7 @@ defineEmits<{
         </div>
       </template>
 
-      <el-form label-position="top">
+      <el-form label-position="top" class="runtime-config-form">
         <el-form-item label="Android SDK 路径">
           <el-input
             v-model="configForm.runtime.androidSdkPath"
@@ -69,7 +69,7 @@ defineEmits<{
         </el-form-item>
         <div class="app-preset-actions">
           <el-button v-if="appPresetForm.id" :disabled="isSavingAppPreset" @click="$emit('cancelAppPresetEdit')">取消编辑</el-button>
-          <el-button native-type="submit" :loading="isSavingAppPreset">{{ appPresetForm.id ? '保存修改' : '添加' }}</el-button>
+          <el-button type="primary" native-type="submit" :loading="isSavingAppPreset">{{ appPresetForm.id ? '保存修改' : '添加' }}</el-button>
         </div>
       </el-form>
 
@@ -92,6 +92,10 @@ defineEmits<{
 </template>
 
 <style scoped>
+.runtime-config-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
+.runtime-config-form :deep(.el-form-item) { margin-bottom: 0; }
+@media (max-width: 1000px) { .runtime-config-form { grid-template-columns: minmax(0, 1fr); } }
+
 .app-preset-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
 .app-preset-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
 .app-preset-layout .app-preset-list { margin-top: 0; padding-left: 24px; border-left: 1px solid var(--ui-border); }

package/src/components/config/MidsceneConfigPanel.vue

@@ -89,7 +89,7 @@ const openModelConfigGuide = () => {
       <section>
         <div class="panel-header panel-header--sub">
           <span>Midscene 模型</span>
-          <el-button
+          <el-button type="primary" plain
             :loading="testingModelKey === 'midscene'"
             :disabled="!!testingModelKey"
             @click="$emit('testModel', 'midscene')"
@@ -118,7 +118,7 @@ const openModelConfigGuide = () => {
               />
             </el-form-item>
             <el-form-item label="API Key">
-              <el-input v-model="configForm.midscene.model.apiKey" show-password />
+              <el-input v-model="configForm.midscene.model.apiKey" placeholder="已保存的 Key 显示为掩码，可输入新 Key 替换" show-password />
             </el-form-item>
           </template>
           <template v-else>
@@ -168,7 +168,7 @@ const openModelConfigGuide = () => {
       <section>
         <div class="panel-header panel-header--sub">
           <span>脚本优化模型</span>
-          <el-button
+          <el-button type="primary" plain
             :loading="testingModelKey === 'scriptOptimizer'"
             :disabled="!!testingModelKey"
             @click="$emit('testModel', 'scriptOptimizer')"
@@ -181,7 +181,7 @@ 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" show-password />
+            <el-input v-model="configForm.scriptOptimizer.model.apiKey" placeholder="已保存的 Key 显示为掩码，可输入新 Key 替换" show-password />
           </el-form-item>
           <el-form-item label="Model Name">
             <el-input v-model="configForm.scriptOptimizer.model.name" />
@@ -197,6 +197,5 @@ const openModelConfigGuide = () => {
 </template>
 
 <style scoped>
-.config-midscene-card :deep(.el-card__body) { background: var(--ui-bg-soft, #f8f9fb); }
 .config-model-input { width: 100%; }
 </style>

package/src/components/help/HelpCenter.vue

@@ -0,0 +1,185 @@
+<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 type { AppiumVersionInfo } from '../../types';
+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 props = defineProps<{ active: boolean }>();
+const appiumVersion = shallowRef<AppiumVersionInfo | null>(null);
+const loadingVersion = shallowRef(false);
+const versionError = shallowRef('');
+let checkedAt = 0;
+async function refreshVersion(force = true) {
+  if (!force && Date.now() - checkedAt < 60_000) return;
+  if (loadingVersion.value) return;
+  loadingVersion.value = true;
+  versionError.value = '';
+  try {
+    appiumVersion.value = await getAppiumVersion();
+    checkedAt = Date.now();
+  } catch {
+    versionError.value = '无法读取版本信息，请检查后端连接后刷新';
+  } finally {
+    loadingVersion.value = false;
+  }
+}
+watch(() => props.active, active => { if (active) void refreshVersion(false); }, { immediate: 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 versions = computed(() => [
+  { name: '应用版本', version: `v${appVersion}`, description: '移动自动化控制台', icon: Monitor },
+  { name: 'Midscene', version: `v${midsceneVersion}`, description: 'AI 驱动的界面理解与自动化', icon: Cpu },
+  { 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: '类型与工程开发语言' },
+]);
+
+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>
+  <section class="help-center-page" aria-label="关于">
+    <el-tabs v-model="activeTab" class="help-center">
+      <el-tab-pane name="about">
+        <template #label><el-icon><InfoFilled /></el-icon><span>关于</span></template>
+        <div class="help-center__content">
+          <div class="help-center__version-heading">
+            <h2>版本信息</h2>
+            <el-button text :icon="Refresh" :loading="loadingVersion" @click="refreshVersion(true)">刷新版本</el-button>
+          </div>
+          <div class="help-center__versions" aria-live="polite" :aria-busy="loadingVersion">
+            <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>
+            </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">
+        <template #label><el-icon><QuestionFilled /></el-icon><span>操作说明</span></template>
+        <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-tab-pane>
+      <el-tab-pane name="changelog">
+        <template #label><el-icon><Tools /></el-icon><span>更新记录</span></template>
+        <div class="help-center__document"><MarkdownDocument :content="changelog" /></div>
+      </el-tab-pane>
+    </el-tabs>
+  </section>
+</template>
+
+<style scoped>
+.help-center-page { padding: 12px 24px 24px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
+
+.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__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-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-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__operations { padding: 18px 6px 18px 2px; }
+.help-center__operation-types { margin-bottom: 16px; }
+.help-center__operation-menu { border-top: 1px solid var(--ui-border); }
+.help-center__operation-title { color: var(--ui-text); 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 var(--ui-border); border-left: 1px solid var(--ui-border); }
+.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; }
+}
+</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>