From a598099fba573731746b90f4c704131de9a7a01e Mon Sep 17 00:00:00 2001
From: panyy <yf_pan.yuanyin@unisinsight.com>
Date: Tue, 23 Jun 2026 16:42:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=80=9D=E7=BB=B4=E5=AF=BC=E5=9B=BE?=
 =?UTF-8?q?=E5=8A=A9=E6=89=8B)=EF=BC=9A=E4=BC=98=E5=8C=96=E6=80=9D?=
 =?UTF-8?q?=E7=BB=B4=E5=AF=BC=E5=9B=BE=E5=8A=A9=E6=89=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web_ui/src/components/ConfigPanel.vue         |  64 +++-
 web_ui/src/components/MarkdownRenderer.vue    |  90 +++--
 web_ui/src/components/MindMapRenderer.vue     | 336 ++++++++++++++----
 .../src/composables/useDocumentProcessor.ts   |  36 +-
 web_ui/src/views/DocumentProcessor.vue        | 191 ++++++----
 5 files changed, 537 insertions(+), 180 deletions(-)

diff --git a/web_ui/src/components/ConfigPanel.vue b/web_ui/src/components/ConfigPanel.vue
index 5426f09..4269299 100644
--- a/web_ui/src/components/ConfigPanel.vue
+++ b/web_ui/src/components/ConfigPanel.vue
@@ -13,6 +13,29 @@
           class="slider"
         />
       </el-form-item>
+
+      <el-form-item label="导出分辨率" class="form-item">
+        <el-select v-model="exportResolutionPreset" style="width: 100%" class="select">
+          <el-option
+            v-for="option in exportResolutionOptions"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
+        <el-input-number
+          v-if="exportResolutionPreset === 'custom'"
+          v-model="draftConfig.exportResolution"
+          :min="720"
+          :max="16384"
+          :step="100"
+          controls-position="right"
+          class="export-resolution-input"
+        />
+        <div class="form-item-description">
+          PNG/JPEG 导出长边上限；默认 8K，导出文件会按该最大长边生效。
+        </div>
+      </el-form-item>
       
       <!-- 解析后端 -->
       <el-form-item :label="$t('config.backend')" class="form-item">
@@ -113,9 +136,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
-import type { DocumentConfig } from '@/composables/useDocumentProcessor'
+import { DEFAULT_DOCUMENT_CONFIG, type DocumentConfig } from '@/composables/useDocumentProcessor'
 
 interface Props {
   modelValue: DocumentConfig
@@ -126,16 +149,45 @@ interface Props {
 interface Emits {
   (e: 'update:modelValue', value: DocumentConfig): void
   (e: 'backendChange', backend: string): void
+  (e: 'close'): void
 }
 
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
+const exportResolutionOptions = [
+  { label: '1080P', value: 1080 },
+  { label: '2K', value: 2560 },
+  { label: '4K', value: 3840 },
+  { label: '8K', value: 7680 },
+  { label: '自定义', value: 'custom' }
+] as const
+
 const createDraft = (value: DocumentConfig): DocumentConfig => ({ ...value })
 const draftConfig = reactive<DocumentConfig>(createDraft(props.modelValue))
 
+const getExportResolutionPreset = (resolution: number): number | 'custom' => {
+  const isPreset = exportResolutionOptions.some((option) => {
+    return typeof option.value === 'number' && option.value === resolution
+  })
+  return isPreset ? resolution : 'custom'
+}
+
+const exportResolutionPreset = ref<number | 'custom'>(getExportResolutionPreset(props.modelValue.exportResolution))
+
+watch(exportResolutionPreset, (value) => {
+  if (value === 'custom') {
+    if (getExportResolutionPreset(draftConfig.exportResolution) !== 'custom') {
+      draftConfig.exportResolution = 3840
+    }
+    return
+  }
+  draftConfig.exportResolution = value
+})
+
 const syncDraft = (value: DocumentConfig) => {
   Object.assign(draftConfig, createDraft(value))
+  exportResolutionPreset.value = getExportResolutionPreset(value.exportResolution)
 }
 
 watch(
@@ -159,7 +211,12 @@ const onBackendChange = (backend: string) => {
 }
 
 const resetDraft = () => {
-  syncDraft(props.modelValue)
+  const defaults = createDraft(DEFAULT_DOCUMENT_CONFIG)
+  syncDraft(defaults)
+  emit('update:modelValue', defaults)
+  emit('backendChange', defaults.backend)
+  ElMessage.success('已恢复默认设置')
+  emit('close')
 }
 
 const confirmConfig = () => {
@@ -167,6 +224,7 @@ const confirmConfig = () => {
   emit('update:modelValue', confirmed)
   emit('backendChange', confirmed.backend)
   ElMessage.success('设置已确认')
+  emit('close')
 }
 
 const getFormulaLabel = (backend: string) => {
diff --git a/web_ui/src/components/MarkdownRenderer.vue b/web_ui/src/components/MarkdownRenderer.vue
index a488259..04a63c1 100644
--- a/web_ui/src/components/MarkdownRenderer.vue
+++ b/web_ui/src/components/MarkdownRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="markdown-renderer">
     <template v-if="content">
-      <div class="render-actions">
+      <div class="content-toolbar render-actions">
         <div class="render-actions-left">
           <el-segmented
             v-if="mode === 'markdown'"
@@ -16,12 +16,14 @@
             size="small"
           />
         </div>
-        <el-button type="primary" size="small" class="action-button primary" @click="handleDownload()">
-          <template #icon>
-            <el-icon><Download /></el-icon>
-          </template>
-          下载
-        </el-button>
+        <div class="render-actions-right">
+          <el-button type="primary" size="small" class="action-button primary" @click="handleDownload()">
+            <template #icon>
+              <el-icon><Download /></el-icon>
+            </template>
+            下载
+          </el-button>
+        </div>
       </div>
       <div class="render-content">
         <div v-if="mode === 'markdown'" class="render-shell">
@@ -52,11 +54,7 @@
         </div>
 
         <div v-else class="render-shell">
-          <div class="richtext-stage">
-            <article ref="richtextRef" class="richtext-document">
-              <div class="markdown-content richtext-content" v-html="renderedContent"></div>
-            </article>
-          </div>
+          <div ref="richtextRef" class="markdown-content rendered-html richtext-content" v-html="renderedContent"></div>
         </div>
       </div>
     </template>
@@ -390,22 +388,35 @@ async function handleDownload() {
   display: flex;
   flex-direction: column;
   background-color: #FFFFFF;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  box-shadow: none;
   overflow: hidden;
   min-height: 0;
 }
 
-.render-actions {
+.content-toolbar {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   gap: 12px;
-  padding: 10px 16px;
   flex-shrink: 0;
-  position: sticky;
-  top: 0;
-  z-index: 2;
+}
+
+.content-toolbar-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #343A40;
+  white-space: nowrap;
+}
+
+.content-toolbar-meta {
+  font-size: 12px;
+  color: #86909C;
+  white-space: nowrap;
+}
+
+.render-actions {
+  padding: 0 0 12px;
   background-color: #FFFFFF;
 }
 
@@ -414,6 +425,15 @@ async function handleDownload() {
   align-items: center;
   gap: 12px;
   min-height: 32px;
+  flex: 1;
+  min-width: 0;
+}
+
+.render-actions-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
 }
 
 .action-button {
@@ -447,7 +467,7 @@ async function handleDownload() {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 0 16px 16px;
+  padding: 0;
 }
 
 .render-header {
@@ -473,7 +493,7 @@ async function handleDownload() {
 .markdown-content {
   padding: 20px;
   background: white;
-  border-radius: 10px;
+  border-radius: 4px;
   min-height: 400px;
 }
 
@@ -483,10 +503,9 @@ async function handleDownload() {
 
 .pdf-stage {
   padding: 20px;
-  border-radius: 12px;
-  background:
-    radial-gradient(circle at top, rgba(22, 93, 255, 0.08), transparent 30%),
-    #eef2f7;
+  border: 1px solid #E9ECEF;
+  border-radius: 4px;
+  background: #F8F9FA;
 }
 
 .pdf-preview-pages {
@@ -522,17 +541,18 @@ async function handleDownload() {
 
 .richtext-stage {
   padding: 12px;
-  border-radius: 12px;
-  background: linear-gradient(180deg, #f3f4f6 0%, #eef2f7 100%);
+  border: 1px solid #E9ECEF;
+  border-radius: 4px;
+  background: #F8F9FA;
 }
 
 .richtext-document {
   min-height: 100%;
   background: white;
   border: 1px solid #dde3ea;
-  border-radius: 12px;
+  border-radius: 4px;
   overflow: hidden;
-  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+  box-shadow: none;
 }
 
 .richtext-content {
@@ -633,9 +653,19 @@ async function handleDownload() {
 }
 
 @media (max-width: 768px) {
+  .render-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .render-actions-left {
     flex: 1;
     min-width: 0;
+    flex-wrap: wrap;
+  }
+
+  .render-actions-right {
+    justify-content: flex-end;
   }
 
   .pdf-page {
diff --git a/web_ui/src/components/MindMapRenderer.vue b/web_ui/src/components/MindMapRenderer.vue
index 2e093d0..55925bd 100644
--- a/web_ui/src/components/MindMapRenderer.vue
+++ b/web_ui/src/components/MindMapRenderer.vue
@@ -1,41 +1,42 @@
 <template>
   <div class="mindmap-container">
-    <div class="mindmap-actions">
-      <span class="mindmap-subtitle" v-if="content">已生成 {{ nodeCount }} 个节点</span>
-      <el-dropdown @command="handleDownload">
+    <div class="content-toolbar mindmap-actions">
+      <div class="mindmap-actions-left">
+        <span class="content-toolbar-meta">{{ nodeSummary }}</span>
+      </div>
+      <div class="mindmap-actions-right">
+        <el-dropdown @command="handleDownload">
+          <el-button 
+            type="primary" 
+            size="small"
+            class="action-button primary"
+          >
+            <template #icon>
+              <el-icon><Download /></el-icon>
+            </template>
+            下载
+            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="svg">SVG 格式</el-dropdown-item>
+              <el-dropdown-item command="png">PNG 格式</el-dropdown-item>
+              <el-dropdown-item command="jpeg">JPEG 格式</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
         <el-button 
-          type="primary" 
+          type="default" 
           size="small"
-          class="action-button primary"
+          @click="resetView"
+          class="action-button secondary"
         >
           <template #icon>
-            <el-icon><Download /></el-icon>
+            <el-icon><Refresh /></el-icon>
           </template>
-          下载
-          <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+          重置视图
         </el-button>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item command="full-svg">全部导图 SVG</el-dropdown-item>
-            <el-dropdown-item command="full-png">全部导图 PNG</el-dropdown-item>
-            <el-dropdown-item command="full-jpeg">全部导图 JPEG</el-dropdown-item>
-            <el-dropdown-item divided command="viewport-svg">当前窗口 SVG</el-dropdown-item>
-            <el-dropdown-item command="viewport-png">当前窗口 PNG</el-dropdown-item>
-            <el-dropdown-item command="viewport-jpeg">当前窗口 JPEG</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <el-button 
-        type="default" 
-        size="small"
-        @click="resetView"
-        class="action-button secondary"
-      >
-        <template #icon>
-          <el-icon><Refresh /></el-icon>
-        </template>
-        重置视图
-      </el-button>
+      </div>
     </div>
     <div class="mindmap-content" @wheel.prevent="handleWheel" @click="handleNodeClick">
       <div class="empty-state" v-if="!content">
@@ -65,6 +66,10 @@ const props = defineProps({
   content: {
     type: String,
     default: ''
+  },
+  exportResolution: {
+    type: Number,
+    default: 0
   }
 })
 
@@ -78,12 +83,66 @@ let renderTimer: number | undefined
 const transformer = new Transformer()
 const scale = ref(1)
 const isRendering = ref(false)
+const totalNodeCount = ref(0)
+const hiddenNodeCount = ref(0)
 
-const nodeCount = computed(() => {
-  if (!props.content) return 0
-  return (props.content.match(/^#{1,6}\s+/gm) || []).length
+type MarkmapNode = {
+  content?: string
+  children?: MarkmapNode[]
+  payload?: {
+    fold?: number
+  }
+}
+
+const nodeSummary = computed(() => {
+  if (!props.content) return '暂无节点'
+  return hiddenNodeCount.value > 0
+    ? `已生成 ${totalNodeCount.value} 个节点，隐藏 ${hiddenNodeCount.value} 个节点`
+    : `已生成 ${totalNodeCount.value} 个节点`
 })
 
+const updateNodeStats = () => {
+  const root = mmInstance?.state?.data as MarkmapNode | undefined
+  if (!root || !props.content) {
+    totalNodeCount.value = 0
+    hiddenNodeCount.value = 0
+    return
+  }
+
+  const countSubtree = (node: MarkmapNode): number => {
+    const children = node.children || []
+    return 1 + children.reduce((sum, child) => sum + countSubtree(child), 0)
+  }
+
+  const walkVisible = (node: MarkmapNode): { total: number; hidden: number } => {
+    const children = node.children || []
+    const total = 1 + children.reduce((sum, child) => sum + countSubtree(child), 0)
+
+    if (node.payload?.fold && children.length > 0) {
+      return {
+        total,
+        hidden: children.reduce((sum, child) => sum + countSubtree(child), 0)
+      }
+    }
+
+    const childStats = children.reduce(
+      (stats, child) => {
+        const childStat = walkVisible(child)
+        return {
+          total: stats.total + childStat.total,
+          hidden: stats.hidden + childStat.hidden
+        }
+      },
+      { total: 1, hidden: 0 }
+    )
+    return childStats
+  }
+
+  const stats = walkVisible(root)
+  totalNodeCount.value = Math.max(0, stats.total - 1)
+  hiddenNodeCount.value = Math.max(0, stats.hidden)
+}
+
 const initMarkmap = async () => {
   if (!svgRef.value) return
 
@@ -107,11 +166,12 @@ const initMarkmap = async () => {
 
     await nextTick()
 
-    const initialExpandLevel = nodeCount.value > 80 ? 2 : -1
+    const sourceNodeCount = (props.content.match(/^#{1,6}\s+/gm) || []).length
+    const initialExpandLevel = sourceNodeCount > 80 ? 2 : -1
     
     if (mmInstance) {
       if (typeof mmInstance.setData === 'function') {
-        mmInstance.setData(root)
+        await mmInstance.setData(root, { initialExpandLevel })
         mmInstance.fit()
       } else {
         mmInstance = Markmap.create(svgRef.value, {
@@ -132,6 +192,7 @@ const initMarkmap = async () => {
     svgRef.value?.querySelectorAll('text').forEach((text) => {
       text.setAttribute('data-editable-node', 'true')
     })
+    updateNodeStats()
   } catch (error) {
     console.error('Error initializing markmap:', error)
     mmInstance = null
@@ -180,7 +241,13 @@ function downloadBlob(blob: Blob, fileName: string) {
 }
 
 type ExportFormat = 'svg' | 'png' | 'jpeg'
-type ExportScope = 'full' | 'viewport'
+
+interface ExportBox {
+  x: number
+  y: number
+  width: number
+  height: number
+}
 
 function getViewportSize(svg: SVGElement) {
   const rect = svg.getBoundingClientRect()
@@ -197,6 +264,84 @@ function cleanExportSvg(svg: SVGElement) {
   svg.querySelectorAll('[style*="cursor"]').forEach((node) => node.removeAttribute('style'))
 }
 
+function getBoxFromSvgRect(rect: DOMRect): ExportBox {
+  return {
+    x: rect.x,
+    y: rect.y,
+    width: rect.width,
+    height: rect.height
+  }
+}
+
+function transformBox(box: ExportBox, matrix: DOMMatrix): ExportBox {
+  const points = [
+    new DOMPoint(box.x, box.y).matrixTransform(matrix),
+    new DOMPoint(box.x + box.width, box.y).matrixTransform(matrix),
+    new DOMPoint(box.x, box.y + box.height).matrixTransform(matrix),
+    new DOMPoint(box.x + box.width, box.y + box.height).matrixTransform(matrix)
+  ]
+  const xs = points.map((point) => point.x)
+  const ys = points.map((point) => point.y)
+  const minX = Math.min(...xs)
+  const minY = Math.min(...ys)
+  const maxX = Math.max(...xs)
+  const maxY = Math.max(...ys)
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  }
+}
+
+function getIntersection(a: ExportBox, b: ExportBox): ExportBox | null {
+  const x = Math.max(a.x, b.x)
+  const y = Math.max(a.y, b.y)
+  const right = Math.min(a.x + a.width, b.x + b.width)
+  const bottom = Math.min(a.y + a.height, b.y + b.height)
+  if (right <= x || bottom <= y) return null
+  return {
+    x,
+    y,
+    width: right - x,
+    height: bottom - y
+  }
+}
+
+function padBox(box: ExportBox, padding: number, boundary?: ExportBox): ExportBox {
+  const padded = {
+    x: box.x - padding,
+    y: box.y - padding,
+    width: box.width + padding * 2,
+    height: box.height + padding * 2
+  }
+
+  if (!boundary) return padded
+  const clipped = getIntersection(padded, boundary)
+  return clipped || box
+}
+
+function normalizeBox(box: ExportBox): ExportBox {
+  const x = Math.min(box.x, box.x + box.width)
+  const y = Math.min(box.y, box.y + box.height)
+  return {
+    x,
+    y,
+    width: Math.abs(box.width),
+    height: Math.abs(box.height)
+  }
+}
+
+function isCompleteInViewport(contentBox: ExportBox, viewportBox: ExportBox) {
+  const tolerance = 4
+  return (
+    contentBox.x >= viewportBox.x - tolerance &&
+    contentBox.y >= viewportBox.y - tolerance &&
+    contentBox.x + contentBox.width <= viewportBox.x + viewportBox.width + tolerance &&
+    contentBox.y + contentBox.height <= viewportBox.y + viewportBox.height + tolerance
+  )
+}
+
 function createFullExportSvg() {
   const svg = svgRef.value
   if (!svg) return null
@@ -227,17 +372,40 @@ function createFullExportSvg() {
   }
 }
 
-function createViewportExportSvg() {
+function createVisibleExportSvg() {
   const svg = svgRef.value
   if (!svg) return null
 
+  const contentGroup = svg.querySelector('g') as SVGGElement | null
+  if (!contentGroup) return createFullExportSvg()
+
+  const viewport = getViewportSize(svg)
+  const viewportBox = { x: 0, y: 0, width: viewport.width, height: viewport.height }
+  const ctm = contentGroup.getCTM()
+  if (!ctm) return createFullExportSvg()
+
+  const contentBox = transformBox(getBoxFromSvgRect(contentGroup.getBBox()), ctm)
+  if (isCompleteInViewport(contentBox, viewportBox)) {
+    return createFullExportSvg()
+  }
+
   const svgCopy = svg.cloneNode(true) as SVGElement
   cleanExportSvg(svgCopy)
 
-  const { width, height } = getViewportSize(svg)
+  const screenVisibleBox = padBox(getIntersection(contentBox, viewportBox) || viewportBox, 24, viewportBox)
+  const localVisibleBox = normalizeBox(transformBox(screenVisibleBox, ctm.inverse()))
+  const localContentBox = getBoxFromSvgRect(contentGroup.getBBox())
+  const clippedLocalBox = getIntersection(localVisibleBox, localContentBox) || localVisibleBox
+  const visibleBox = padBox(clippedLocalBox, 24)
+  const width = Math.ceil(Math.max(visibleBox.width, 320))
+  const height = Math.ceil(Math.max(visibleBox.height, 240))
+  const viewBox = `${Math.floor(visibleBox.x)} ${Math.floor(visibleBox.y)} ${width} ${height}`
+
+  const viewportGroupCopy = svgCopy.querySelector('g')
+  viewportGroupCopy?.removeAttribute('transform')
   svgCopy.setAttribute('width', String(width))
   svgCopy.setAttribute('height', String(height))
-  svgCopy.setAttribute('viewBox', svg.getAttribute('viewBox') || `0 0 ${width} ${height}`)
+  svgCopy.setAttribute('viewBox', viewBox)
 
   return {
     data: new XMLSerializer().serializeToString(svgCopy),
@@ -247,19 +415,22 @@ function createViewportExportSvg() {
 }
 
 // 下载思维导图
-const downloadMindMap = async (format: ExportFormat = 'svg', scope: ExportScope = 'full') => {
-  const exportSvg = scope === 'viewport' ? createViewportExportSvg() : createFullExportSvg()
+const downloadMindMap = async (format: ExportFormat = 'svg') => {
+  const exportSvg = createVisibleExportSvg()
   if (!exportSvg) return
 
   const time = new Date().getTime()
-  const scopeName = scope === 'viewport' ? 'viewport' : 'full'
   if (format === 'svg') {
-    downloadBlob(new Blob([exportSvg.data], { type: 'image/svg+xml;charset=utf-8' }), `mindmap_${scopeName}_${time}.svg`)
+    downloadBlob(new Blob([exportSvg.data], { type: 'image/svg+xml;charset=utf-8' }), `mindmap_${time}.svg`)
     return
   }
 
-  const maxCanvasPixels = scope === 'viewport' ? 16_000_000 : 64_000_000
-  const scaleFactor = Math.min(3, Math.max(1, Math.sqrt(maxCanvasPixels / (exportSvg.width * exportSvg.height))))
+  const baseScale = 3
+  const maxResolution = Number(props.exportResolution) || 0
+  const longEdge = Math.max(exportSvg.width, exportSvg.height)
+  const scaleFactor = maxResolution > 0
+    ? Math.min(baseScale, Math.max(0.1, maxResolution / longEdge))
+    : baseScale
   const canvas = document.createElement('canvas')
   const ctx = canvas.getContext('2d')
   if (!ctx) return
@@ -276,7 +447,7 @@ const downloadMindMap = async (format: ExportFormat = 'svg', scope: ExportScope
     const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png'
     canvas.toBlob((blob) => {
       if (!blob) return
-      downloadBlob(blob, `mindmap_${scopeName}_${time}.${format === 'jpeg' ? 'jpg' : 'png'}`)
+      downloadBlob(blob, `mindmap_${time}.${format === 'jpeg' ? 'jpg' : 'png'}`)
     }, mimeType, 0.96)
   }
   img.onerror = () => ElMessage.error('导出图片失败')
@@ -285,9 +456,8 @@ const downloadMindMap = async (format: ExportFormat = 'svg', scope: ExportScope
 
 // 处理下载命令
 const handleDownload = (command: string) => {
-  const [scope, format] = command.split('-') as [ExportScope, ExportFormat]
-  if ((scope === 'full' || scope === 'viewport') && (format === 'svg' || format === 'png' || format === 'jpeg')) {
-    downloadMindMap(format, scope)
+  if (command === 'svg' || command === 'png' || command === 'jpeg') {
+    downloadMindMap(command)
   }
 }
 
@@ -295,6 +465,7 @@ const handleDownload = (command: string) => {
 const resetView = () => {
   mmInstance?.fit()
   scale.value = 1
+  window.setTimeout(updateNodeStats, 0)
 }
 
 // 放大
@@ -333,6 +504,7 @@ const handleWheel = (event: WheelEvent) => {
 }
 
 const handleNodeClick = async (event: MouseEvent) => {
+  window.setTimeout(updateNodeStats, 0)
   const textNode = (event.target as Element | null)?.closest?.('text')
   const oldText = textNode?.textContent?.trim()
   if (!oldText || !props.content || oldText === '文档思维导图') return
@@ -360,28 +532,52 @@ const handleNodeClick = async (event: MouseEvent) => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #FFFFFF;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  background-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
   overflow: hidden;
   min-height: 0;
 }
 
-.mindmap-actions {
+.content-toolbar {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 10px 16px;
+  justify-content: space-between;
   gap: 12px;
+  flex-shrink: 0;
 }
 
-.mindmap-subtitle {
+.mindmap-actions {
+  padding: 0 0 12px;
+}
+
+.mindmap-actions-left,
+.mindmap-actions-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.mindmap-actions-left {
+  flex: 1;
+}
+
+.mindmap-actions-right {
+  flex-shrink: 0;
+}
+
+.content-toolbar-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #343A40;
+  white-space: nowrap;
+}
+
+.content-toolbar-meta {
   font-size: 12px;
   color: #86909C;
-  background-color: #F2F3F5;
-  padding: 2px 8px;
-  border-radius: 10px;
-  margin-right: auto;
+  white-space: nowrap;
 }
 
 .action-button {
@@ -423,6 +619,8 @@ const handleNodeClick = async (event: MouseEvent) => {
   background-color: #F9FAFC;
   cursor: grab;
   min-height: 0;
+  border: 1px solid #E9ECEF;
+  border-radius: 4px;
 }
 
 .mindmap-content:active {
@@ -490,16 +688,18 @@ const handleNodeClick = async (event: MouseEvent) => {
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .mindmap-header {
-    padding: 12px 16px;
+  .mindmap-actions {
+    flex-direction: column;
+    align-items: stretch;
   }
-  
-  .mindmap-title {
-    font-size: 14px;
+
+  .mindmap-actions-left,
+  .mindmap-actions-right {
+    justify-content: space-between;
   }
-  
-  .mindmap-subtitle {
-    font-size: 10px;
+
+  .content-toolbar-meta {
+    font-size: 11px;
   }
   
   .action-button {
diff --git a/web_ui/src/composables/useDocumentProcessor.ts b/web_ui/src/composables/useDocumentProcessor.ts
index af25d1b..91836f4 100644
--- a/web_ui/src/composables/useDocumentProcessor.ts
+++ b/web_ui/src/composables/useDocumentProcessor.ts
@@ -13,6 +13,7 @@ export interface DocumentConfig {
   maxPages: number
   backend: string
   serverUrl: string
+  exportResolution: number
   tableEnable: boolean
   formulaEnable: boolean
   language: string
@@ -26,11 +27,22 @@ export interface ProcessResult {
   downloadUrl?: string
 }
 
-const CONFIG_STORAGE_KEY = 'mineru.documentProcessor.config'
+export const DOCUMENT_CONFIG_STORAGE_KEY = 'mineru.documentProcessor.config.v4'
+
+export const DEFAULT_DOCUMENT_CONFIG: DocumentConfig = {
+  maxPages: 1000,
+  backend: 'hybrid-auto-engine',
+  serverUrl: 'http://localhost:30000',
+  exportResolution: 7680,
+  tableEnable: true,
+  formulaEnable: true,
+  language: 'ch',
+  forceOcr: false
+}
 
 function loadCachedConfig(): Partial<DocumentConfig> {
   try {
-    const raw = window.localStorage.getItem(CONFIG_STORAGE_KEY)
+    const raw = window.localStorage.getItem(DOCUMENT_CONFIG_STORAGE_KEY)
     return raw ? JSON.parse(raw) : {}
   } catch {
     return {}
@@ -43,17 +55,8 @@ export function useDocumentProcessor() {
   const isUploading = ref(false)
   
   // 配置相关
-  const defaultConfig: DocumentConfig = {
-    maxPages: 1000,
-    backend: 'hybrid-auto-engine',
-    serverUrl: 'http://localhost:30000',
-    tableEnable: true,
-    formulaEnable: true,
-    language: 'ch',
-    forceOcr: false
-  }
   const config = reactive<DocumentConfig>({
-    ...defaultConfig,
+    ...DEFAULT_DOCUMENT_CONFIG,
     ...loadCachedConfig()
   })
 
@@ -61,7 +64,7 @@ export function useDocumentProcessor() {
     config,
     (value) => {
       try {
-        window.localStorage.setItem(CONFIG_STORAGE_KEY, JSON.stringify(value))
+        window.localStorage.setItem(DOCUMENT_CONFIG_STORAGE_KEY, JSON.stringify(value))
       } catch {
         // 浏览器禁用本地存储时不影响当前页面使用。
       }
@@ -120,15 +123,16 @@ export function useDocumentProcessor() {
     
     console.log('Processing file:', fileName, 'type:', fileType)
     
-    // 验证文件类型 - 支持 PDF、图片和 Word 文档
-    const isImage = fileType.startsWith('image/')
+    // 验证文件类型 - 支持 PDF、Word 和后端可转换为 PDF 的图片格式
+    const supportedImageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.bmp', '.tiff', '.gif', '.jp2']
+    const isImage = fileType.startsWith('image/') && supportedImageExtensions.some((ext) => fileName.endsWith(ext))
     const isPdf = fileType === 'application/pdf'
     const isWord = fileName.endsWith('.docx') || fileName.endsWith('.doc') || fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
     
     console.log('File type checks - isImage:', isImage, 'isPdf:', isPdf, 'isWord:', isWord)
     
     if (!isImage && !isPdf && !isWord) {
-      error.value = '不支持的文件类型'
+      error.value = '不支持的文件类型，请选择 PDF、Word、JPG、PNG、WEBP、BMP、TIFF、GIF 或 JP2 文件'
       console.log('Unsupported file type:', fileName, fileType)
       return
     }
diff --git a/web_ui/src/views/DocumentProcessor.vue b/web_ui/src/views/DocumentProcessor.vue
index 0f146b3..d6888f9 100644
--- a/web_ui/src/views/DocumentProcessor.vue
+++ b/web_ui/src/views/DocumentProcessor.vue
@@ -17,13 +17,15 @@
           @dragleave="isDragging = false"
           @click="triggerUpload"
         >
-          <div class="upload-content" v-show="!isUploadAreaCollapsed">
+          <div class="upload-content" v-if="uploadedFiles.length === 0">
             <el-icon class="upload-icon"><Folder /></el-icon>
-            <div class="upload-text">文件导入</div>
-            <div class="upload-hint">支持 PDF、Word、PNG 格式单个文件，可转换为 Markdown 和思维导图，也可手动粘贴 Markdown 源码</div>
+            <div class="upload-copy">
+              <div class="upload-text">文件导入</div>
+              <div class="upload-hint">支持 PDF、Word、JPG、PNG、WEBP、BMP、TIFF、GIF、JP2 单个文件</div>
+            </div>
           </div>
 
-          <div class="uploaded-files">
+          <div class="uploaded-files" v-else>
             <div class="file-item" v-for="(file, index) in uploadedFiles" :key="index">
               <el-icon class="file-icon"><Document /></el-icon>
               <span class="file-name">{{ file.name }}</span>
@@ -33,15 +35,15 @@
                 @click.stop="removeFile(index)"
                 class="remove-button"
               />
+              <el-button
+                type="primary"
+                :loading="isProcessing || isUploading"
+                @click.stop="handleProcessDocument"
+              >
+                开始转换
+              </el-button>
             </div>
           </div>
-
-          <div class="upload-actions" v-if="uploadedFiles.length > 0">
-            <el-button type="primary" :loading="isProcessing || isUploading" @click.stop="handleProcessDocument">
-              开始转换
-            </el-button>
-            <el-button @click.stop="clearAllFiles">清空</el-button>
-          </div>
         </div>
 
         <div v-if="showSettings" class="settings-panel">
@@ -52,10 +54,12 @@
             </el-button>
           </div>
           <ConfigPanel
-            v-model="config"
+            :model-value="config"
             :backend-options="backendOptions"
             :language-options="languageOptions"
+            @update:model-value="applyConfig"
             @backend-change="handleBackendChange"
+            @close="closeSettings"
           />
         </div>
       </div>
@@ -136,17 +140,20 @@
             </div>
 
             <div v-show="activeTab === 'source'" class="source-content">
-              <div class="source-toolbar">
-                <el-button
-                  :type="hasActiveReplacementRules ? 'primary' : 'default'"
-                  class="replacement-config-button"
-                  @click="openReplacementDialog"
-                >
-                  {{ hasActiveReplacementRules ? `动态模板渲染（已配置${activeReplacementRuleCount}条）` : '动态模板渲染' }}
-                </el-button>
+              <div class="content-toolbar source-toolbar">
                 <div v-if="templateRenderError" class="template-error-inline">
                   {{ templateRenderError }}
                 </div>
+                <div v-else></div>
+                <div class="content-toolbar-actions">
+                  <el-button
+                    :type="hasActiveReplacementRules ? 'primary' : 'default'"
+                    class="replacement-config-button"
+                    @click="openReplacementDialog"
+                  >
+                    {{ hasActiveReplacementRules ? `动态模板渲染（已配置${activeReplacementRuleCount}条）` : '动态模板渲染' }}
+                  </el-button>
+                </div>
               </div>
 
               <div class="source-panel">
@@ -163,7 +170,11 @@
 
             <div v-show="activeTab === 'mindmap'" class="mindmap-content">
               <div class="mindmap-box">
-                <MindMapRenderer :content="renderedMindmapContent" @node-edit="handleMindmapNodeEdit" />
+                <MindMapRenderer
+                  :content="renderedMindmapContent"
+                  :export-resolution="config.exportResolution"
+                  @node-edit="handleMindmapNodeEdit"
+                />
               </div>
             </div>
           </div>
@@ -174,7 +185,7 @@
     <input
       ref="fileInput"
       type="file"
-      accept=".pdf,.doc,.docx,.png"
+      accept=".pdf,.doc,.docx,.png,.jpg,.jpeg,.webp,.bmp,.tiff,.gif,.jp2"
       style="position: absolute; width: 0; height: 0; overflow: hidden;"
       @change="handleFileInputChange"
     />
@@ -224,7 +235,7 @@ import { ElMessage } from 'element-plus'
 import ConfigPanel from '@/components/ConfigPanel.vue'
 import MarkdownRenderer from '@/components/MarkdownRenderer.vue'
 import MindMapRenderer from '@/components/MindMapRenderer.vue'
-import { useDocumentProcessor } from '@/composables/useDocumentProcessor'
+import { DOCUMENT_CONFIG_STORAGE_KEY, useDocumentProcessor } from '@/composables/useDocumentProcessor'
 import { markdownToAstString } from '@/utils/markdownAst'
 import { buildMindmapMarkdown, replaceFirstMindmapText } from '@/utils/mindmapMarkdown'
 import { createEmptyReplacementRule, renderMarkdownTemplate, type ReplacementRule } from '@/utils/markdownTemplate'
@@ -359,6 +370,12 @@ const toggleSettings = () => {
   }
 }
 
+const closeSettings = () => {
+  if (showSettings.value) {
+    toggleSettings()
+  }
+}
+
 const handleClickOutside = (event: MouseEvent) => {
   const settingsPanel = document.querySelector('.settings-panel')
   const settingsButton = document.querySelector('.settings-button')
@@ -383,6 +400,15 @@ const handleBackendChange = (backend: string) => {
   console.log('Backend changed to:', backend)
 }
 
+const applyConfig = (nextConfig: typeof config) => {
+  Object.assign(config, nextConfig)
+  try {
+    window.localStorage.setItem(DOCUMENT_CONFIG_STORAGE_KEY, JSON.stringify(nextConfig))
+  } catch {
+    // 浏览器禁用本地存储时不影响当前页面使用。
+  }
+}
+
 const handleProcessDocument = async () => {
   await processDocument()
   if (error.value) {
@@ -550,7 +576,7 @@ onUnmounted(() => {
 
 .main-content {
   flex: 1;
-  padding: 24px;
+  padding: 0 24px;
   overflow: hidden;
   min-height: 0;
   display: flex;
@@ -565,19 +591,21 @@ onUnmounted(() => {
 .drag-upload-area {
   border: 2px dashed #CED4DA;
   border-radius: 8px;
-  padding: 20px 24px;
+  padding: 8px 16px;
   text-align: center;
   cursor: pointer;
   transition: all 0.3s ease;
   background-color: #FFFFFF;
-  margin-bottom: 16px;
+  margin-bottom: 0;
   overflow: hidden;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
 }
 
 .drag-upload-area.collapsed {
   padding: 8px 16px;
   min-height: 36px;
-  display: block;
 }
 
 .drag-upload-area:hover,
@@ -588,54 +616,48 @@ onUnmounted(() => {
 
 .upload-content {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  gap: 12px;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
 }
 
 .upload-icon {
-  font-size: 48px;
+  font-size: 24px;
   color: #165DFF;
 }
 
+.upload-copy {
+  min-width: 0;
+  text-align: left;
+}
+
 .upload-text {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   color: #343A40;
 }
 
 .upload-hint {
-  font-size: 14px;
+  font-size: 12px;
   color: #6C757D;
-  line-height: 1.5;
-  max-width: 400px;
+  line-height: 1.4;
 }
 
 .uploaded-files {
-  margin-top: 24px;
-  text-align: left;
-}
-
-.upload-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.drag-upload-area.collapsed .uploaded-files {
-  margin-top: 0;
   width: 100%;
+  text-align: left;
 }
 
 .file-item {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 6px 10px;
+  padding: 0;
   background-color: #F8F9FA;
-  border-radius: 4px;
-  margin-bottom: 2px;
+  border-radius: 6px;
+  margin-bottom: 0;
   transition: all 0.3s ease;
   width: 100%;
   box-sizing: border-box;
@@ -653,15 +675,16 @@ onUnmounted(() => {
 
 .file-name {
   flex: 1;
+  min-width: 0;
   font-size: 13px;
   color: #343A40;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: calc(100% - 40px);
 }
 
 .remove-button {
+  flex-shrink: 0;
   color: #6C757D;
   padding: 4px;
 }
@@ -738,6 +761,10 @@ onUnmounted(() => {
   border-bottom: 1px solid #E9ECEF;
 }
 
+.result-tabs :deep(.el-tabs__header) {
+  margin: 0;
+}
+
 .result-tabs :deep(.el-tabs__nav) {
   padding-left: 16px;
 }
@@ -885,23 +912,21 @@ onUnmounted(() => {
 .markdown-box {
   height: 100%;
   min-height: 0;
-  border: 1px solid #E9ECEF;
-  border-radius: 4px;
+  border: 0;
+  border-radius: 0;
   box-shadow: none;
-  padding: 16px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: white;
+  overflow: hidden;
+  background-color: transparent;
 }
 
 .mindmap-box {
   height: 100%;
   min-height: 0;
-  border: 1px solid #E9ECEF;
-  border-radius: 4px;
+  border: 0;
+  border-radius: 0;
   box-shadow: none;
   overflow: hidden;
-  background-color: white;
+  background-color: transparent;
 }
 
 .source-content {
@@ -920,6 +945,35 @@ onUnmounted(() => {
   flex-shrink: 0;
 }
 
+.content-toolbar-info,
+.content-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.content-toolbar-info {
+  flex: 1;
+}
+
+.content-toolbar-actions {
+  flex-shrink: 0;
+}
+
+.content-toolbar-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #343A40;
+  white-space: nowrap;
+}
+
+.content-toolbar-meta {
+  font-size: 12px;
+  color: #86909C;
+  white-space: nowrap;
+}
+
 .replacement-config-button {
   border-radius: 6px;
 }
@@ -1022,7 +1076,10 @@ onUnmounted(() => {
 }
 
 @media (max-width: 768px) {
-  .main-content,
+  .main-content {
+    padding: 0 16px;
+  }
+
   .result-content {
     padding: 16px;
   }
@@ -1032,11 +1089,11 @@ onUnmounted(() => {
   }
 
   .drag-upload-area {
-    padding: 32px 16px;
+    padding: 8px 12px;
   }
 
   .upload-icon {
-    font-size: 32px;
+    font-size: 22px;
   }
 
   .upload-text {
@@ -1061,6 +1118,14 @@ onUnmounted(() => {
     align-items: stretch;
   }
 
+  .content-toolbar-info {
+    flex-wrap: wrap;
+  }
+
+  .content-toolbar-actions {
+    justify-content: flex-end;
+  }
+
   .replacement-dialog-body {
     max-height: none;
     padding-right: 0;