md2ui 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md2ui",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "type": "module",
   "description": "将本地 Markdown 文档转换为美观的 HTML 页面",
   "author": "",
@@ -22,7 +22,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "publish": "bash publish.sh"
   },
   "files": [
     "bin",
@@ -33,6 +34,8 @@
   ],
   "dependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
+    "docx": "^9.6.1",
+    "file-saver": "^2.0.5",
     "flexsearch": "^0.8.212",
     "github-slugger": "^2.0.0",
     "highlight.js": "^11.11.1",

package/src/App.vue

@@ -46,6 +46,7 @@
       :htmlContent="htmlContent"
       :prevDoc="prevDoc"
       :nextDoc="nextDoc"
+      :docTitle="currentDocTitle"
       @scroll="handleScroll"
       @content-click="onContentClick"
       @start="loadFirstDoc"
@@ -77,7 +78,7 @@
       </button>
     </transition>
     <!-- 图片放大 -->
-    <ImageZoom :visible="zoomVisible" :imageContent="zoomContent" @close="zoomVisible = false" />
+    <ImageZoom :visible="zoomVisible" :images="zoomImages" :currentIndex="zoomIndex" @update:currentIndex="zoomIndex = $event" @close="zoomVisible = false" />
 
   </div>
 </template>
@@ -104,10 +105,12 @@ const sidebarCollapsed = ref(false)
 const tocCollapsed = ref(false)
 const zoomVisible = ref(false)
 const zoomContent = ref('')
+const zoomImages = ref([])
+const zoomIndex = ref(0)
 
 // composables
 const {
-  docsList, currentDoc, showWelcome, htmlContent, tocItems,
+  docsList, currentDoc, currentDocTitle, showWelcome, htmlContent, tocItems,
   scrollProgress, showBackToTop, activeHeading,
   handleScroll, scrollToHeading, scrollToTop,
   loadDocsList, loadFromUrl, goHome, loadDoc, loadFirstDoc,
@@ -125,8 +128,9 @@ const { isMobile, mobileDrawerOpen, mobileTocOpen } = useMobile()
 // 内容区点击：委托给 docManager，图片放大回调在这里处理
 function onContentClick(event) {
   handleContentClick(event, {
-    onZoom(content) {
-      zoomContent.value = content
+    onZoom({ images, index }) {
+      zoomImages.value = images
+      zoomIndex.value = index
       zoomVisible.value = true
     }
   })

package/src/components/DocContent.vue

@@ -2,6 +2,12 @@
   <main class="content" @scroll="$emit('scroll', $event)" @click="$emit('content-click', $event)">
     <WelcomePage v-if="showWelcome" @start="$emit('start')" />
     <template v-else>
+      <div class="doc-toolbar">
+        <button class="export-word-btn" :disabled="exporting" @click="handleExport" title="导出为 Word 文档">
+          <FileDown :size="15" />
+          <span>{{ exporting ? '导出中...' : '导出 Word' }}</span>
+        </button>
+      </div>
       <article class="markdown-content" v-html="htmlContent"></article>
       <nav v-if="prevDoc || nextDoc" class="doc-nav">
         <a v-if="prevDoc" class="doc-nav-link prev" @click.prevent="$emit('load-doc', prevDoc.key)">
@@ -25,15 +31,23 @@
 </template>
 
 <script setup>
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { ChevronLeft, ChevronRight, FileDown } from 'lucide-vue-next'
 import WelcomePage from './WelcomePage.vue'
+import { useExportWord } from '../composables/useExportWord.js'
 
-defineProps({
+const props = defineProps({
   showWelcome: { type: Boolean, default: true },
   htmlContent: { type: String, default: '' },
   prevDoc: { type: Object, default: null },
-  nextDoc: { type: Object, default: null }
+  nextDoc: { type: Object, default: null },
+  docTitle: { type: String, default: '文档' }
 })
 
 defineEmits(['scroll', 'content-click', 'start', 'load-doc'])
+
+const { exporting, exportToWord } = useExportWord()
+
+function handleExport() {
+  exportToWord(props.docTitle)
+}
 </script>

package/src/components/ImageZoom.vue

@@ -23,11 +23,25 @@
             <RotateCcw :size="16" />
           </button>
           <span class="zoom-level">{{ Math.round(scale * 100) }}%</span>
+          <!-- 图片计数 -->
+          <span v-if="images.length > 1" class="image-counter">{{ currentIndex + 1 }} / {{ images.length }}</span>
           <button class="zoom-btn close-btn" @click="close" title="关闭">
             <X :size="16" />
           </button>
         </div>
 
+        <!-- 左切换按钮 -->
+        <button
+          v-if="images.length > 1"
+          class="nav-btn nav-btn-left"
+          :class="{ 'nav-btn-disabled': currentIndex <= 0 }"
+          :disabled="currentIndex <= 0"
+          @click="goPrev"
+          title="上一张"
+        >
+          <ChevronLeft :size="28" />
+        </button>
+
         <!-- 图片容器 -->
         <div
           class="image-wrapper"
@@ -35,16 +49,28 @@
             transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,
             transformOrigin: 'center center'
           }"
-          v-html="imageContent"
+          v-html="currentContent"
         ></div>
+
+        <!-- 右切换按钮 -->
+        <button
+          v-if="images.length > 1"
+          class="nav-btn nav-btn-right"
+          :class="{ 'nav-btn-disabled': currentIndex >= images.length - 1 }"
+          :disabled="currentIndex >= images.length - 1"
+          @click="goNext"
+          title="下一张"
+        >
+          <ChevronRight :size="28" />
+        </button>
       </div>
     </div>
   </teleport>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { ZoomIn, ZoomOut, RotateCcw, X } from 'lucide-vue-next'
+import { ref, computed } from 'vue'
+import { ZoomIn, ZoomOut, RotateCcw, X, ChevronLeft, ChevronRight } from 'lucide-vue-next'
 
 // Props
 const props = defineProps({
@@ -52,14 +78,33 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  // 兼容单图模式
   imageContent: {
     type: String,
     default: ''
+  },
+  // 图片列表（多图切换）
+  images: {
+    type: Array,
+    default: () => []
+  },
+  // 当前图片索引
+  currentIndex: {
+    type: Number,
+    default: 0
   }
 })
 
 // Emits
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'update:currentIndex'])
+
+// 当前展示内容：优先使用列表模式
+const currentContent = computed(() => {
+  if (props.images.length > 0) {
+    return props.images[props.currentIndex] || ''
+  }
+  return props.imageContent
+})
 
 // 缩放和拖拽状态
 const scale = ref(1)
@@ -95,6 +140,21 @@ function resetZoom() {
   translateY.value = 0
 }
 
+// 切换图片时重置缩放
+function goPrev() {
+  if (props.currentIndex > 0) {
+    resetZoom()
+    emit('update:currentIndex', props.currentIndex - 1)
+  }
+}
+
+function goNext() {
+  if (props.currentIndex < props.images.length - 1) {
+    resetZoom()
+    emit('update:currentIndex', props.currentIndex + 1)
+  }
+}
+
 // 关闭
 function close() {
   resetZoom()
@@ -111,12 +171,9 @@ function handleOverlayClick(event) {
 // 处理滚轮缩放
 function handleWheel(event) {
   event.preventDefault()
-  
-  // 使用比例缩放，每次滚轮缩放 2%，体感更平滑
   const zoomFactor = 0.02
   const direction = event.deltaY > 0 ? -1 : 1
   const newScale = Math.max(minScale, Math.min(maxScale, scale.value * (1 + direction * zoomFactor)))
-  
   if (newScale !== scale.value) {
     scale.value = newScale
   }
@@ -124,8 +181,7 @@ function handleWheel(event) {
 
 // 处理鼠标按下
 function handleMouseDown(event) {
-  if (event.target.closest('.zoom-toolbar')) return
-  
+  if (event.target.closest('.zoom-toolbar') || event.target.closest('.nav-btn')) return
   isDragging.value = true
   lastMouseX.value = event.clientX
   lastMouseY.value = event.clientY
@@ -135,13 +191,10 @@ function handleMouseDown(event) {
 // 处理鼠标移动
 function handleMouseMove(event) {
   if (!isDragging.value) return
-  
   const deltaX = event.clientX - lastMouseX.value
   const deltaY = event.clientY - lastMouseY.value
-  
   translateX.value += deltaX
   translateY.value += deltaY
-  
   lastMouseX.value = event.clientX
   lastMouseY.value = event.clientY
 }
@@ -154,7 +207,6 @@ function handleMouseUp() {
 // 监听键盘事件
 function handleKeyDown(event) {
   if (!props.visible) return
-  
   switch (event.key) {
     case 'Escape':
       close()
@@ -169,10 +221,15 @@ function handleKeyDown(event) {
     case '0':
       resetZoom()
       break
+    case 'ArrowLeft':
+      goPrev()
+      break
+    case 'ArrowRight':
+      goNext()
+      break
   }
 }
 
-// 添加键盘监听
 if (typeof window !== 'undefined') {
   window.addEventListener('keydown', handleKeyDown)
 }
@@ -261,6 +318,53 @@ if (typeof window !== 'undefined') {
   text-align: center;
 }
 
+.image-counter {
+  font-size: 12px;
+  font-weight: 600;
+  color: #718096;
+  padding: 0 4px;
+  white-space: nowrap;
+}
+
+/* 左右切换按钮 */
+.nav-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10000;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  color: #2d3748;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s;
+}
+
+.nav-btn:hover:not(:disabled) {
+  background: #fff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.nav-btn-disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.nav-btn-left {
+  left: 20px;
+}
+
+.nav-btn-right {
+  right: 20px;
+}
+
 .image-wrapper {
   transition: transform 0.2s ease-out;
   cursor: grab;
@@ -284,4 +388,4 @@ if (typeof window !== 'undefined') {
   width: auto !important;
   height: auto !important;
 }
-</style>
+</style>

package/src/composables/useDocManager.js

@@ -160,18 +160,34 @@ export function useDocManager() {
       }
       return
     }
-    // 图片放大
-    if (target.tagName === 'IMG' && target.classList.contains('zoomable-image')) {
-      onZoom(`<img src="${target.src}" alt="${target.alt || ''}" style="max-width: 100%; height: auto;" />`)
-      return
-    }
-    // Mermaid 图表放大
+    // 图片/Mermaid 放大（收集所有可放大元素，支持左右切换）
+    const isImg = target.tagName === 'IMG' && target.classList.contains('zoomable-image')
     const mermaidEl = target.closest('.mermaid')
-    if (mermaidEl && mermaidEl.classList.contains('zoomable-image')) {
-      onZoom(mermaidEl.innerHTML)
+    const isMermaid = mermaidEl && mermaidEl.classList.contains('zoomable-image')
+    if (isImg || isMermaid) {
+      const container = document.querySelector('.markdown-content')
+      if (!container) return
+      // 收集所有可放大元素
+      const allZoomable = [...container.querySelectorAll('.zoomable-image')]
+      const images = allZoomable.map(el => {
+        if (el.tagName === 'IMG') {
+          return `<img src="${el.src}" alt="${el.alt || ''}" style="max-width: 100%; height: auto;" />`
+        }
+        return el.innerHTML
+      })
+      const clickedEl = isImg ? target : mermaidEl
+      const index = allZoomable.indexOf(clickedEl)
+      onZoom({ images, index: Math.max(index, 0) })
     }
   }
 
+  // 当前文档标题
+  const currentDocTitle = computed(() => {
+    if (!currentDoc.value) return '文档'
+    const doc = findDoc(docsList.value, currentDoc.value)
+    return doc?.label || '文档'
+  })
+
   // 上一篇/下一篇
   const prevDoc = computed(() => {
     if (!currentDoc.value) return null
@@ -248,6 +264,7 @@ export function useDocManager() {
     // 状态
     docsList,
     currentDoc,
+    currentDocTitle,
     showWelcome,
     htmlContent,
     tocItems,

package/src/composables/useExportWord.js

@@ -0,0 +1,632 @@
+import { ref } from 'vue'
+import {
+  Document, Packer, Paragraph, TextRun, HeadingLevel,
+  Table, TableRow, TableCell, WidthType, BorderStyle,
+  ImageRun, AlignmentType, ShadingType,
+  ExternalHyperlink,
+  convertInchesToTwip
+} from 'docx'
+import { saveAs } from 'file-saver'
+
+// ---- SVG 转 PNG ----
+
+async function svgToBase64Png(svgEl) {
+  const svgClone = svgEl.cloneNode(true)
+  const bbox = svgEl.getBoundingClientRect()
+  const width = Math.ceil(bbox.width) || 800
+  const height = Math.ceil(bbox.height) || 400
+  svgClone.setAttribute('width', width)
+  svgClone.setAttribute('height', height)
+  if (!svgClone.getAttribute('xmlns')) {
+    svgClone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+  }
+  // 内联所有计算样式到 SVG 元素，确保文字可见
+  inlineStyles(svgEl, svgClone)
+
+  const svgData = new XMLSerializer().serializeToString(svgClone)
+  // 将 SVG 字符串编码为 base64（支持 UTF-8 中文字符）
+  const encoder = new TextEncoder()
+  const bytes = encoder.encode(svgData)
+  let binary = ''
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i])
+  }
+  const base64Svg = btoa(binary)
+  const dataUri = `data:image/svg+xml;base64,${base64Svg}`
+
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => {
+      const scale = 2
+      const canvas = document.createElement('canvas')
+      canvas.width = width * scale
+      canvas.height = height * scale
+      const ctx = canvas.getContext('2d')
+      ctx.fillStyle = '#ffffff'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      ctx.scale(scale, scale)
+      ctx.drawImage(img, 0, 0, width, height)
+      resolve({ dataUrl: canvas.toDataURL('image/png'), width, height })
+    }
+    img.onerror = () => reject(new Error('SVG 转图片失败'))
+    img.src = dataUri
+  })
+}
+
+// 递归内联计算样式（确保 SVG 序列化后文字、颜色等不丢失）
+function inlineStyles(source, target) {
+  const computed = window.getComputedStyle(source)
+  const dominated = ['font-family', 'font-size', 'font-weight', 'fill', 'stroke',
+    'stroke-width', 'opacity', 'visibility', 'display', 'text-anchor',
+    'dominant-baseline', 'color', 'transform']
+  let style = ''
+  for (const prop of dominated) {
+    const val = computed.getPropertyValue(prop)
+    if (val) style += `${prop}:${val};`
+  }
+  if (style) target.setAttribute('style', (target.getAttribute('style') || '') + ';' + style)
+
+  const sourceChildren = source.children
+  const targetChildren = target.children
+  for (let i = 0; i < sourceChildren.length && i < targetChildren.length; i++) {
+    inlineStyles(sourceChildren[i], targetChildren[i])
+  }
+}
+
+// ---- DOM 解析为 docx 元素 ----
+
+const HEADING_MAP = {
+  H1: HeadingLevel.HEADING_1,
+  H2: HeadingLevel.HEADING_2,
+  H3: HeadingLevel.HEADING_3,
+  H4: HeadingLevel.HEADING_4,
+  H5: HeadingLevel.HEADING_5,
+  H6: HeadingLevel.HEADING_6,
+}
+
+// 从 DOM 节点提取内联文本 runs（支持超链接、高亮、上下标、内联图片）
+function extractTextRuns(node, inherited = {}) {
+  const runs = []
+  if (!node) return runs
+
+  for (const child of node.childNodes) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      const text = child.textContent
+      if (text) {
+        runs.push(new TextRun({ text, ...inherited }))
+      }
+    } else if (child.nodeType === Node.ELEMENT_NODE) {
+      const tag = child.tagName
+      // 跳过锚点图标
+      if (child.classList?.contains('heading-anchor')) continue
+
+      if (tag === 'STRONG' || tag === 'B') {
+        runs.push(...extractTextRuns(child, { ...inherited, bold: true }))
+      } else if (tag === 'EM' || tag === 'I') {
+        runs.push(...extractTextRuns(child, { ...inherited, italics: true }))
+      } else if (tag === 'CODE') {
+        runs.push(new TextRun({
+          text: child.textContent,
+          font: 'Consolas',
+          size: 18, // 9pt
+          shading: { type: ShadingType.CLEAR, fill: 'f0f0f0' },
+          ...inherited,
+        }))
+      } else if (tag === 'A') {
+        const href = child.getAttribute('href') || ''
+        // 生成真正的可点击超链接
+        if (href && (href.startsWith('http') || href.startsWith('mailto:'))) {
+          runs.push(new ExternalHyperlink({
+            children: [new TextRun({
+              text: child.textContent,
+              style: 'Hyperlink',
+              color: '4a6cf7',
+              underline: {},
+              ...inherited,
+            })],
+            link: href,
+          }))
+        } else {
+          runs.push(new TextRun({
+            text: child.textContent,
+            color: '4a6cf7',
+            underline: {},
+            ...inherited,
+          }))
+        }
+      } else if (tag === 'DEL' || tag === 'S') {
+        runs.push(...extractTextRuns(child, { ...inherited, strike: true }))
+      } else if (tag === 'MARK') {
+        // 高亮文本
+        runs.push(...extractTextRuns(child, {
+          ...inherited,
+          shading: { type: ShadingType.CLEAR, fill: 'ffff00' },
+        }))
+      } else if (tag === 'SUP') {
+        runs.push(...extractTextRuns(child, { ...inherited, superScript: true }))
+      } else if (tag === 'SUB') {
+        runs.push(...extractTextRuns(child, { ...inherited, subScript: true }))
+      } else if (tag === 'BR') {
+        runs.push(new TextRun({ break: 1 }))
+      } else if (tag === 'IMG') {
+        // 内联图片标记为占位符（实际图片在段落级处理）
+        const alt = child.getAttribute('alt') || '[图片]'
+        runs.push(new TextRun({ text: alt, color: '999999', italics: true }))
+      } else {
+        runs.push(...extractTextRuns(child, inherited))
+      }
+    }
+  }
+  return runs
+}
+
+// 解析表格
+function parseTable(tableEl) {
+  const rows = []
+  const allTr = tableEl.querySelectorAll('tr')
+  for (const tr of allTr) {
+    const cells = []
+    const tds = tr.querySelectorAll('th, td')
+    const isHeader = tr.querySelector('th') !== null
+    for (const td of tds) {
+      cells.push(new TableCell({
+        children: [new Paragraph({
+          children: extractTextRuns(td, isHeader ? { bold: true } : {}),
+          spacing: { before: 40, after: 40 },
+        })],
+        shading: isHeader
+          ? { type: ShadingType.CLEAR, fill: 'f0f0f0' }
+          : undefined,
+        width: { size: 100 / tds.length, type: WidthType.PERCENTAGE },
+      }))
+    }
+    if (cells.length > 0) {
+      rows.push(new TableRow({ children: cells }))
+    }
+  }
+  if (rows.length === 0) return null
+  return new Table({
+    rows,
+    width: { size: 100, type: WidthType.PERCENTAGE },
+  })
+}
+
+// 解析列表
+function parseList(listEl, level = 0) {
+  const items = []
+  for (const li of listEl.children) {
+    if (li.tagName !== 'LI') continue
+    // 检查 checkbox（任务列表）
+    const checkbox = li.querySelector('input[type="checkbox"]')
+    let prefix = ''
+    if (checkbox) {
+      prefix = checkbox.checked ? '[x] ' : '[ ] '
+    }
+    const isOrdered = listEl.tagName === 'OL'
+    const idx = Array.from(listEl.children).indexOf(li)
+
+    // 提取文本（排除嵌套列表，支持 li 内 p 包裹的多段落）
+    const textRuns = []
+    if (prefix) {
+      textRuns.push(new TextRun({ text: prefix, font: 'Consolas', size: 20 }))
+    }
+    for (const child of li.childNodes) {
+      if (child.nodeType === Node.TEXT_NODE) {
+        const t = child.textContent.trim()
+        if (t) textRuns.push(new TextRun({ text: t }))
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        const cTag = child.tagName
+        if (cTag === 'UL' || cTag === 'OL') continue // 嵌套列表单独处理
+        if (cTag === 'INPUT') continue // 跳过 checkbox 本身
+        // li 内的 p 标签：提取内容并在段落间加换行
+        if (cTag === 'P') {
+          if (textRuns.length > 0) {
+            textRuns.push(new TextRun({ break: 1 }))
+          }
+          textRuns.push(...extractTextRuns(child))
+        } else {
+          textRuns.push(...extractTextRuns(child))
+        }
+      }
+    }
+
+    const bullet = isOrdered ? `${idx + 1}. ` : '\u2022 '
+    const baseIndent = 360
+    const indent = baseIndent + level * 360
+    items.push(new Paragraph({
+      children: [
+        new TextRun({ text: bullet }),
+        ...textRuns,
+      ],
+      spacing: { before: 40, after: 40 },
+      indent: { left: indent, hanging: 240 },
+    }))
+
+    // 嵌套列表
+    const nested = li.querySelector('ul, ol')
+    if (nested) {
+      items.push(...parseList(nested, level + 1))
+    }
+  }
+  return items
+}
+
+// 主解析函数：将 DOM 转为 docx 元素数组
+async function parseDomToDocx(contentEl) {
+  const elements = []
+
+  for (const node of contentEl.children) {
+    const tag = node.tagName
+
+    // 标题
+    if (HEADING_MAP[tag]) {
+      const runs = extractTextRuns(node)
+      elements.push(new Paragraph({
+        children: runs,
+        heading: HEADING_MAP[tag],
+        spacing: { before: 240, after: 120 },
+      }))
+      continue
+    }
+
+    // 段落（处理内嵌图片）
+    if (tag === 'P') {
+      // 检查段落内是否有图片
+      const imgs = node.querySelectorAll('img')
+      if (imgs.length > 0) {
+        // 先输出文本部分
+        const runs = extractTextRuns(node)
+        const textOnly = runs.filter(r => !(r instanceof ImageRun))
+        if (textOnly.length > 0) {
+          elements.push(new Paragraph({
+            children: textOnly,
+            spacing: { before: 80, after: 80 },
+          }))
+        }
+        // 再逐个输出图片
+        for (const img of imgs) {
+          try {
+            const imgData = await fetchImageAsBytes(img.src)
+            if (imgData) {
+              elements.push(new Paragraph({
+                children: [new ImageRun({
+                  data: imgData.bytes,
+                  transformation: { width: imgData.width, height: imgData.height },
+                  type: 'png',
+                })],
+                spacing: { before: 120, after: 120 },
+                alignment: AlignmentType.CENTER,
+              }))
+            }
+          } catch { /* 跳过无法加载的图片 */ }
+        }
+      } else {
+        const runs = extractTextRuns(node)
+        if (runs.length > 0) {
+          elements.push(new Paragraph({
+            children: runs,
+            spacing: { before: 80, after: 80 },
+          }))
+        }
+      }
+      continue
+    }
+
+    // 文档元信息
+    if (node.classList?.contains('doc-meta')) {
+      elements.push(new Paragraph({
+        children: [new TextRun({
+          text: node.textContent.trim(),
+          color: '999999',
+          size: 18,
+        })],
+        spacing: { before: 40, after: 120 },
+      }))
+      continue
+    }
+
+    // 代码块
+    if (node.classList?.contains('code-block-wrapper')) {
+      const rawCode = decodeURIComponent(node.dataset.rawCode || '')
+      const lang = (node.dataset.lang || '').toUpperCase()
+
+      const codeLines = rawCode.split('\n')
+      const codeRuns = []
+
+      // 语言标签
+      if (lang) {
+        codeRuns.push(new TextRun({
+          text: lang,
+          font: 'Consolas',
+          size: 16,
+          color: '999999',
+        }))
+        codeRuns.push(new TextRun({ break: 1 }))
+      }
+
+      // 代码内容，逐行添加
+      codeLines.forEach((line, i) => {
+        codeRuns.push(new TextRun({
+          text: line || ' ', // 空行用空格占位
+          font: 'Consolas',
+          size: 18,
+          color: '333333',
+        }))
+        if (i < codeLines.length - 1) {
+          codeRuns.push(new TextRun({ break: 1 }))
+        }
+      })
+
+      elements.push(new Paragraph({
+        children: codeRuns,
+        alignment: AlignmentType.LEFT,
+        shading: { type: ShadingType.CLEAR, fill: 'f5f5f5' },
+        spacing: { before: 120, after: 120, line: 276 },
+        border: {
+          top: { style: BorderStyle.SINGLE, size: 1, color: 'dddddd' },
+          bottom: { style: BorderStyle.SINGLE, size: 1, color: 'dddddd' },
+          left: { style: BorderStyle.SINGLE, size: 1, color: 'dddddd' },
+          right: { style: BorderStyle.SINGLE, size: 1, color: 'dddddd' },
+        },
+        indent: { left: 200, right: 200 },
+      }))
+      continue
+    }
+
+    // Mermaid 图表
+    if (node.classList?.contains('mermaid')) {
+      const svg = node.querySelector('svg')
+      if (svg) {
+        try {
+          const { dataUrl, width, height } = await svgToBase64Png(svg)
+          // base64 数据提取
+          const base64Data = dataUrl.split(',')[1]
+          const binaryString = atob(base64Data)
+          const bytes = new Uint8Array(binaryString.length)
+          for (let i = 0; i < binaryString.length; i++) {
+            bytes[i] = binaryString.charCodeAt(i)
+          }
+          // 限制最大宽度为 6 英寸（Word 页面宽度约 6.5 英寸）
+          const maxWidth = 6 * 96 // 576px
+          const scale = width > maxWidth ? maxWidth / width : 1
+          const imgWidth = Math.round(width * scale)
+          const imgHeight = Math.round(height * scale)
+
+          elements.push(new Paragraph({
+            children: [new ImageRun({
+              data: bytes,
+              transformation: { width: imgWidth, height: imgHeight },
+              type: 'png',
+            })],
+            spacing: { before: 120, after: 120 },
+            alignment: AlignmentType.CENTER,
+          }))
+        } catch {
+          elements.push(new Paragraph({
+            children: [new TextRun({ text: '[图表无法导出]', color: '999999', italics: true })],
+          }))
+        }
+      }
+      continue
+    }
+
+    // 表格（可能被 table-wrapper 包裹）
+    if (tag === 'TABLE' || node.classList?.contains('table-wrapper')) {
+      const tableEl = tag === 'TABLE' ? node : node.querySelector('table')
+      if (tableEl) {
+        const table = parseTable(tableEl)
+        if (table) elements.push(table)
+      }
+      continue
+    }
+
+    // 列表
+    if (tag === 'UL' || tag === 'OL') {
+      elements.push(...parseList(node))
+      continue
+    }
+
+    // 引用块：递归处理内部块级元素，保留完整结构
+    if (tag === 'BLOCKQUOTE') {
+      const bqStyle = {
+        indent: { left: 400 },
+        border: {
+          left: { style: BorderStyle.SINGLE, size: 6, color: 'cccccc' },
+        },
+        shading: { type: ShadingType.CLEAR, fill: 'fafafa' },
+      }
+      if (node.children.length > 0) {
+        for (const child of node.children) {
+          const childTag = child.tagName
+          // 嵌套引用块：增加缩进
+          if (childTag === 'BLOCKQUOTE') {
+            const innerChildren = child.children.length > 0 ? child.children : [child]
+            for (const inner of innerChildren) {
+              const runs = extractTextRuns(inner)
+              if (runs.length > 0) {
+                elements.push(new Paragraph({
+                  children: runs,
+                  spacing: { before: 80, after: 80 },
+                  indent: { left: 800 },
+                  border: {
+                    left: { style: BorderStyle.SINGLE, size: 6, color: 'aaaaaa' },
+                  },
+                  shading: { type: ShadingType.CLEAR, fill: 'f5f5f5' },
+                }))
+              }
+            }
+          } else if (childTag === 'UL' || childTag === 'OL') {
+            // 引用块内的列表
+            const listItems = parseList(child)
+            for (const item of listItems) {
+              elements.push(item)
+            }
+          } else if (childTag === 'PRE' || child.classList?.contains('code-block-wrapper')) {
+            // 引用块内的代码块，走正常代码块逻辑但加引用样式
+            const runs = extractTextRuns(child)
+            if (runs.length > 0) {
+              elements.push(new Paragraph({
+                children: runs,
+                spacing: { before: 80, after: 80 },
+                ...bqStyle,
+              }))
+            }
+          } else {
+            const runs = extractTextRuns(child)
+            if (runs.length > 0) {
+              elements.push(new Paragraph({
+                children: runs,
+                spacing: { before: 80, after: 80 },
+                ...bqStyle,
+              }))
+            }
+          }
+        }
+      } else {
+        const runs = extractTextRuns(node)
+        if (runs.length > 0) {
+          elements.push(new Paragraph({
+            children: runs,
+            spacing: { before: 80, after: 80 },
+            ...bqStyle,
+          }))
+        }
+      }
+      continue
+    }
+
+    // 图片
+    if (tag === 'IMG') {
+      try {
+        const imgData = await fetchImageAsBytes(node.src)
+        if (imgData) {
+          elements.push(new Paragraph({
+            children: [new ImageRun({
+              data: imgData.bytes,
+              transformation: { width: imgData.width, height: imgData.height },
+              type: 'png',
+            })],
+            spacing: { before: 120, after: 120 },
+            alignment: AlignmentType.CENTER,
+          }))
+        }
+      } catch { /* 跳过无法加载的图片 */ }
+      continue
+    }
+
+    // 水平线
+    if (tag === 'HR') {
+      elements.push(new Paragraph({
+        children: [],
+        border: { bottom: { style: BorderStyle.SINGLE, size: 1, color: 'cccccc' } },
+        spacing: { before: 120, after: 120 },
+      }))
+      continue
+    }
+
+    // 其他 div 容器，递归处理子元素
+    if (tag === 'DIV' || tag === 'SECTION' || tag === 'ARTICLE') {
+      const sub = await parseDomToDocx(node)
+      elements.push(...sub)
+      continue
+    }
+
+    // 兜底：提取文本
+    const text = node.textContent?.trim()
+    if (text) {
+      elements.push(new Paragraph({
+        children: [new TextRun({ text })],
+        spacing: { before: 80, after: 80 },
+      }))
+    }
+  }
+
+  return elements
+}
+
+// 加载图片为字节数组
+async function fetchImageAsBytes(src) {
+  try {
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    await new Promise((resolve, reject) => {
+      img.onload = resolve
+      img.onerror = reject
+      img.src = src
+    })
+    const maxWidth = 576
+    const scale = img.naturalWidth > maxWidth ? maxWidth / img.naturalWidth : 1
+    const w = Math.round(img.naturalWidth * scale)
+    const h = Math.round(img.naturalHeight * scale)
+    const canvas = document.createElement('canvas')
+    canvas.width = w
+    canvas.height = h
+    const ctx = canvas.getContext('2d')
+    ctx.drawImage(img, 0, 0, w, h)
+    const dataUrl = canvas.toDataURL('image/png')
+    const base64 = dataUrl.split(',')[1]
+    const binary = atob(base64)
+    const bytes = new Uint8Array(binary.length)
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+    return { bytes, width: w, height: h }
+  } catch {
+    return null
+  }
+}
+
+// ---- 主 composable ----
+
+export function useExportWord() {
+  const exporting = ref(false)
+
+  async function exportToWord(title = '文档') {
+    exporting.value = true
+    try {
+      const contentEl = document.querySelector('.markdown-content')
+      if (!contentEl) return
+
+      const children = await parseDomToDocx(contentEl)
+
+      const doc = new Document({
+        styles: {
+          default: {
+            document: {
+              run: {
+                font: 'Microsoft YaHei',
+                size: 22, // 11pt
+                color: '333333',
+              },
+              paragraph: {
+                spacing: { line: 360 }, // 1.5 倍行距
+                alignment: AlignmentType.LEFT,
+              },
+            },
+          },
+        },
+        sections: [{
+          properties: {
+            page: {
+              margin: {
+                top: convertInchesToTwip(1),
+                bottom: convertInchesToTwip(1),
+                left: convertInchesToTwip(1.2),
+                right: convertInchesToTwip(1.2),
+              },
+            },
+          },
+          children,
+        }],
+      })
+
+      const blob = await Packer.toBlob(doc)
+      const fileName = title.replace(/[\\/:*?"<>|]/g, '_') + '.docx'
+      saveAs(blob, fileName)
+    } catch (err) {
+      console.error('导出 Word 失败:', err)
+    } finally {
+      exporting.value = false
+    }
+  }
+
+  return { exporting, exportToWord }
+}

package/src/style.css

@@ -1260,6 +1260,48 @@ body {
   color: var(--color-border);
 }
 
+/* ===== 文档工具栏 ===== */
+.doc-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 8px 32px 0;
+}
+
+.export-word-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.export-word-btn:hover {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+  background: var(--color-accent-bg);
+}
+
+.export-word-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+  .doc-toolbar {
+    padding: 8px 16px 0;
+  }
+}
+
 /* ===== 上一篇/下一篇导航 ===== */
 .doc-nav {
   display: flex;