md2ui 1.0.10 → 1.0.12

package/package.json

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

package/src/App.vue

@@ -78,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>
@@ -105,6 +105,8 @@ const sidebarCollapsed = ref(false)
 const tocCollapsed = ref(false)
 const zoomVisible = ref(false)
 const zoomContent = ref('')
+const zoomImages = ref([])
+const zoomIndex = ref(0)
 
 // composables
 const {
@@ -126,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/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,15 +160,24 @@ 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) })
     }
   }
 

package/src/composables/useExportWord.js

@@ -3,6 +3,7 @@ import {
   Document, Packer, Paragraph, TextRun, HeadingLevel,
   Table, TableRow, TableCell, WidthType, BorderStyle,
   ImageRun, AlignmentType, ShadingType,
+  ExternalHyperlink,
   convertInchesToTwip
 } from 'docx'
 import { saveAs } from 'file-saver'
@@ -83,7 +84,7 @@ const HEADING_MAP = {
   H6: HeadingLevel.HEADING_6,
 }
 
-// 从 DOM 节点提取内联文本 runs
+// 从 DOM 节点提取内联文本 runs（支持超链接、高亮、上下标、内联图片）
 function extractTextRuns(node, inherited = {}) {
   const runs = []
   if (!node) return runs
@@ -112,16 +113,45 @@ function extractTextRuns(node, inherited = {}) {
           ...inherited,
         }))
       } else if (tag === 'A') {
-        runs.push(new TextRun({
-          text: child.textContent,
-          color: '4a6cf7',
-          underline: {},
-          ...inherited,
-        }))
+        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))
       }
@@ -175,7 +205,7 @@ function parseList(listEl, level = 0) {
     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 }))
@@ -184,21 +214,32 @@ function parseList(listEl, level = 0) {
       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))
+      } 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}. ` : '  '
-    const indent = level * 360
+    const bullet = isOrdered ? `${idx + 1}. ` : '\u2022 '
+    const baseIndent = 360
+    const indent = baseIndent + level * 360
     items.push(new Paragraph({
       children: [
-        new TextRun({ text: '  '.repeat(level) + bullet }),
+        new TextRun({ text: bullet }),
         ...textRuns,
       ],
       spacing: { before: 40, after: 40 },
-      indent: { left: indent },
+      indent: { left: indent, hanging: 240 },
     }))
 
     // 嵌套列表
@@ -228,14 +269,45 @@ async function parseDomToDocx(contentEl) {
       continue
     }
 
-    // 段落
+    // 段落（处理内嵌图片）
     if (tag === 'P') {
-      const runs = extractTextRuns(node)
-      if (runs.length > 0) {
-        elements.push(new Paragraph({
-          children: runs,
-          spacing: { before: 80, after: 80 },
-        }))
+      // 检查段落内是否有图片
+      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
     }
@@ -354,18 +426,72 @@ async function parseDomToDocx(contentEl) {
       continue
     }
 
-    // 引用块
+    // 引用块：递归处理内部块级元素，保留完整结构
     if (tag === 'BLOCKQUOTE') {
-      const runs = extractTextRuns(node)
-      elements.push(new Paragraph({
-        children: runs,
-        spacing: { before: 80, after: 80 },
+      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
     }