md2ui 1.0.8 → 1.0.10

package/bin/build.js

@@ -232,7 +232,7 @@ async function renderMarkdownToHtml(markdown, currentDocKey, docsList) {
 
     // 纯锚点
     if (decoded.startsWith('#')) {
-      const anchor = slugger.slug(decoded.slice(1), false)
+      const anchor = decoded.slice(1)
       return `<a href="#${anchor}"${titleAttr}>${text}</a>`
     }
 
@@ -243,9 +243,8 @@ async function renderMarkdownToHtml(markdown, currentDocKey, docsList) {
       const doc = findDocInTree(docsList, targetKey)
       if (doc) {
         const hash = docHash(doc.key)
-        const anchorSlug = anchor ? slugger.slug(anchor, false) : ''
-        const url = anchorSlug ? `/${hash}.html#${anchorSlug}` : `/${hash}.html`
-        return `<a href="${url}" data-doc-key="${doc.key}"${anchorSlug ? ` data-anchor="${anchorSlug}"` : ''}${titleAttr}>${text}</a>`
+        const url = anchor ? `/${hash}.html#${anchor}` : `/${hash}.html`
+        return `<a href="${url}" data-doc-key="${doc.key}"${anchor ? ` data-anchor="${anchor}"` : ''}${titleAttr}>${text}</a>`
       }
       return `<a href="javascript:void(0)" class="broken-link" title="文档未找到: ${decoded}">${text}</a>`
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md2ui",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "type": "module",
   "description": "将本地 Markdown 文档转换为美观的 HTML 页面",
   "author": "",
@@ -33,6 +33,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"
@@ -53,7 +54,7 @@
     />
     <!-- 桌面端 TOC -->
     <div v-if="!isMobile && !tocCollapsed && tocItems.length > 0" class="resizer resizer-right" @mousedown="startResize('right', $event)"></div>
-    <TableOfContents v-if="!isMobile" :tocItems="tocItems" :activeHeading="activeHeading" :collapsed="tocCollapsed" :width="tocWidth" @toggle="tocCollapsed = !tocCollapsed" @scroll-to="scrollToHeading" />
+    <TableOfContents v-if="!isMobile" :tocItems="tocItems" :activeHeading="activeHeading" :collapsed="tocCollapsed" :width="tocWidth" @toggle="tocCollapsed = !tocCollapsed" @scroll-to="(id) => scrollToHeading(id, { push: true })" />
     <button v-if="!isMobile && tocCollapsed && tocItems.length > 0" class="expand-btn expand-btn-right" @click="tocCollapsed = false" title="展开目录">
       <ChevronLeft :size="14" />
     </button>
@@ -67,7 +68,7 @@
       :showWelcome="showWelcome"
       @toggle="mobileTocOpen = !mobileTocOpen"
       @close="mobileTocOpen = false"
-      @scroll-to="(id) => { scrollToHeading(id); mobileTocOpen = false }"
+      @scroll-to="(id) => { scrollToHeading(id, { push: true }); mobileTocOpen = false }"
     />
     <!-- 返回顶部 -->
     <transition name="fade">
@@ -107,7 +108,7 @@ const zoomContent = ref('')
 
 // composables
 const {
-  docsList, currentDoc, showWelcome, htmlContent, tocItems,
+  docsList, currentDoc, currentDocTitle, showWelcome, htmlContent, tocItems,
   scrollProgress, showBackToTop, activeHeading,
   handleScroll, scrollToHeading, scrollToTop,
   loadDocsList, loadFromUrl, goHome, loadDoc, loadFirstDoc,

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/composables/useDocManager.js

@@ -4,7 +4,7 @@ import { useMarkdown } from './useMarkdown.js'
 import { useSearch } from './useSearch.js'
 import { useScroll } from './useScroll.js'
 import { useMobile } from './useMobile.js'
-import { findDoc, findFirstDoc, findDocByHash, expandParents, flattenDocsList, expandAll, collapseAll } from './useDocTree.js'
+import { findDoc, findFirstDoc, findReadmeDoc, findDocByHash, expandParents, flattenDocsList, expandAll, collapseAll } from './useDocTree.js'
 
 // 等待内容区域图片加载完成
 async function waitForContentImages(timeoutMs = 3000) {
@@ -36,23 +36,38 @@ export function useDocManager() {
   } = useScroll()
   const { isMobile, mobileDrawerOpen } = useMobile()
 
-  // 滚动处理，同步锚点到 URL
+  // 获取当前滚动位置
+  function getScrollTop() {
+    const el = document.querySelector('.content')
+    return el ? el.scrollTop : 0
+  }
+
+  // 构造 history state，保留滚动位置
+  function makeState(scrollTop) {
+    return { scrollTop: scrollTop ?? getScrollTop() }
+  }
+
+  // 滚动处理，同步锚点到 URL（replaceState 保留滚动位置）
   function handleScroll(e) {
     _handleScroll(e)
     if (activeHeading.value && currentDoc.value) {
-      history.replaceState(null, '', `/${docHash(currentDoc.value)}#${activeHeading.value}`)
+      history.replaceState(makeState(), '', `/${docHash(currentDoc.value)}#${activeHeading.value}`)
     }
   }
 
   // push: true 表示用户主动点击锚点，产生可回退的历史条目
   function scrollToHeading(id, { push = false } = {}) {
+    if (push && currentDoc.value) {
+      // 先把当前滚动位置写入即将被覆盖的历史条目
+      history.replaceState(makeState(), '', window.location.href)
+    }
     _scrollToHeading(id)
     if (currentDoc.value) {
       const url = `/${docHash(currentDoc.value)}#${id}`
       if (push) {
-        history.pushState(null, '', url)
+        history.pushState(makeState(), '', url)
       } else {
-        history.replaceState(null, '', url)
+        history.replaceState(makeState(), '', url)
       }
     }
   }
@@ -63,26 +78,33 @@ export function useDocManager() {
     buildIndex(docsList.value)
   }
 
-  // 回到欢迎页
-  function goHome() {
+  // 回到欢迎页（isPopstate: true 表示由浏览器回退触发，不操作 history）
+  function goHome({ isPopstate = false } = {}) {
     currentDoc.value = ''
     showWelcome.value = true
     htmlContent.value = ''
     tocItems.value = []
-    history.pushState(null, '', '/')
+    if (!isPopstate) {
+      // 用户主动点击，保存旧条目滚动位置后 push
+      history.replaceState(makeState(), '', window.location.href)
+      history.pushState(makeState(0), '', '/')
+    }
     if (isMobile.value) mobileDrawerOpen.value = false
   }
 
   // 加载文档
-  async function loadDoc(key, { replace = false, anchor = '' } = {}) {
+  async function loadDoc(key, { replace = false, anchor = '', keepState = false } = {}) {
     currentDoc.value = key
     showWelcome.value = false
     const hash = docHash(key)
     const url = anchor ? `/${hash}#${anchor}` : `/${hash}`
     if (replace) {
-      history.replaceState(null, '', url)
+      // keepState: popstate 回退时保留浏览器已有的 state（含 scrollTop）
+      if (!keepState) history.replaceState(makeState(0), '', url)
     } else {
-      history.pushState(null, '', url)
+      // push 前先保存当前滚动位置到旧条目
+      history.replaceState(makeState(), '', window.location.href)
+      history.pushState(makeState(0), '', url)
     }
     const doc = findDoc(docsList.value, key)
     if (!doc) return
@@ -150,6 +172,13 @@ export function useDocManager() {
     }
   }
 
+  // 当前文档标题
+  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
@@ -175,22 +204,35 @@ export function useDocManager() {
   async function loadFromUrl() {
     const pathname = window.location.pathname.replace(/^\//, '')
     const anchor = window.location.hash.replace('#', '')
+    const savedScroll = history.state?.scrollTop
     if (!pathname) {
       if (currentDoc.value) {
-        // 从文档页回退到首页
-        goHome()
+        // 浏览器回退到首页，不操作 history
+        goHome({ isPopstate: true })
       } else if (docsList.value.length === 0) {
         showWelcome.value = false
         renderMarkdown('# 当前目录没有 Markdown 文档\n\n请在当前目录下添加 `.md` 文件，然后刷新页面。')
+      } else {
+        // 优先定位到 README，没有则定位到第一篇文档
+        const readme = findReadmeDoc(docsList.value)
+        const target = readme || findFirstDoc(docsList.value)
+        if (target) {
+          expandParents(docsList.value, target.key)
+          await loadDoc(target.key, { replace: true })
+        }
       }
       return
     }
     const doc = findDocByHash(docsList.value, pathname, docHash)
     if (!doc) return
-    // 同一文档内的锚点变化，只需滚动，无需重新加载
+    // 同一文档内的锚点变化（含回退）
     if (doc.key === currentDoc.value) {
-      if (anchor) {
-        await nextTick()
+      await nextTick()
+      if (savedScroll != null) {
+        // 有保存的滚动位置，直接恢复（回退场景）
+        const contentEl = document.querySelector('.content')
+        if (contentEl) contentEl.scrollTo({ top: savedScroll, behavior: 'smooth' })
+      } else if (anchor) {
         _scrollToHeading(decodeURIComponent(anchor))
       } else {
         const contentEl = document.querySelector('.content')
@@ -199,14 +241,21 @@ export function useDocManager() {
       return
     }
     expandParents(docsList.value, doc.key)
-    await loadDoc(doc.key, { replace: true, anchor: anchor ? decodeURIComponent(anchor) : '' })
-    if (anchor) { await nextTick(); await waitForContentImages(); _scrollToHeading(decodeURIComponent(anchor)) }
+    await loadDoc(doc.key, { replace: true, keepState: savedScroll != null, anchor: anchor ? decodeURIComponent(anchor) : '' })
+    if (savedScroll != null) {
+      await nextTick()
+      const contentEl = document.querySelector('.content')
+      if (contentEl) contentEl.scrollTo({ top: savedScroll })
+    } else if (anchor) {
+      await nextTick(); await waitForContentImages(); _scrollToHeading(decodeURIComponent(anchor))
+    }
   }
 
   return {
     // 状态
     docsList,
     currentDoc,
+    currentDocTitle,
     showWelcome,
     htmlContent,
     tocItems,

package/src/composables/useDocTree.js

@@ -24,6 +24,22 @@ export function findFirstDoc(items) {
   return null
 }
 
+// 查找 README 文档（不区分大小写，优先根目录）
+export function findReadmeDoc(items) {
+  // 先在当前层级找
+  for (const item of items) {
+    if (item.type === 'file' && /^readme$/i.test(item.key?.split('/').pop() || '')) return item
+  }
+  // 再递归子目录找
+  for (const item of items) {
+    if (item.type === 'folder' && item.children) {
+      const found = findReadmeDoc(item.children)
+      if (found) return found
+    }
+  }
+  return null
+}
+
 // 根据 hash 查找文档
 export function findDocByHash(items, hash, docHash) {
   for (const item of items) {

package/src/composables/useExportWord.js

@@ -0,0 +1,506 @@
+import { ref } from 'vue'
+import {
+  Document, Packer, Paragraph, TextRun, HeadingLevel,
+  Table, TableRow, TableCell, WidthType, BorderStyle,
+  ImageRun, AlignmentType, ShadingType,
+  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') {
+        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 === 'BR') {
+        runs.push(new TextRun({ break: 1 }))
+      } 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)
+
+    // 提取文本（排除嵌套列表）
+    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 && child.tagName !== 'UL' && child.tagName !== 'OL') {
+        if (child.tagName === 'INPUT') continue // 跳过 checkbox 本身
+        textRuns.push(...extractTextRuns(child))
+      }
+    }
+
+    const bullet = isOrdered ? `${idx + 1}. ` : '  '
+    const indent = level * 360
+    items.push(new Paragraph({
+      children: [
+        new TextRun({ text: '  '.repeat(level) + bullet }),
+        ...textRuns,
+      ],
+      spacing: { before: 40, after: 40 },
+      indent: { left: indent },
+    }))
+
+    // 嵌套列表
+    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 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 runs = extractTextRuns(node)
+      elements.push(new Paragraph({
+        children: runs,
+        spacing: { before: 80, after: 80 },
+        indent: { left: 400 },
+        border: {
+          left: { style: BorderStyle.SINGLE, size: 6, color: 'cccccc' },
+        },
+        shading: { type: ShadingType.CLEAR, fill: 'fafafa' },
+      }))
+      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

@@ -7,8 +7,8 @@
   --color-text: #1a1e1b;
   --color-text-secondary: #505856;
   --color-text-tertiary: #848e89;
-  --color-border: #d4dbd6;
-  --color-border-light: #e4e9e5;
+  --color-border: rgba(66, 184, 131, 0.25);
+  --color-border-light: rgba(66, 184, 131, 0.15);
   --color-accent: #42b883;
   --color-accent-hover: #359d6e;
   --color-accent-bg: rgba(66, 184, 131, 0.1);
@@ -18,7 +18,7 @@
   --color-code-border: transparent;
   --color-pre-bg: #ffffff;
   --color-pre-header: #f7f9f8;
-  --color-pre-border: #d4dbd6;
+  --color-pre-border: rgba(66, 184, 131, 0.25);
   --color-pre-text: #1a1e1b;
   --color-blockquote-border: #42b883;
   --color-blockquote-bg: rgba(66, 184, 131, 0.03);
@@ -1074,7 +1074,7 @@ body {
   align-items: center;
   padding: 8px 16px;
   background: var(--color-bg);
-  border-bottom: 2px solid var(--color-accent);
+  border-bottom: 1px solid var(--color-border);
   flex-shrink: 0;
   gap: 12px;
   z-index: 100;
@@ -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;