md2ui 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md2ui",
-  "version": "1.0.9",
+  "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"
@@ -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

@@ -172,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
@@ -248,6 +255,7 @@ export function useDocManager() {
     // 状态
     docsList,
     currentDoc,
+    currentDocTitle,
     showWelcome,
     htmlContent,
     tocItems,

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

@@ -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;