md2ui 1.0.19 → 1.0.21

package/src/composables/useDocTree.js

@@ -1,5 +1,26 @@
 // 文档树操作：查找、展开、扁平化等纯逻辑
 
+// ===== Hash 索引（O(1) 查找 + 碰撞检测） =====
+// 文档列表变更时由 buildHashIndex 重建
+let _hashIndex = new Map() // hash → doc
+
+// 构建 hash → doc 索引，同时检测碰撞
+export function buildHashIndex(items, docHashFn) {
+  _hashIndex = new Map()
+  const allDocs = flattenDocsList(items)
+  for (const doc of allDocs) {
+    const hash = docHashFn(doc.key)
+    if (_hashIndex.has(hash)) {
+      const existing = _hashIndex.get(hash)
+      console.warn(
+        `[md2ui] hash 碰撞检测：「${doc.key}」与「${existing.key}」生成了相同的 hash「${hash}」，` +
+        '后者将被覆盖。请考虑重命名其中一个文档。'
+      )
+    }
+    _hashIndex.set(hash, doc)
+  }
+}
+
 // 在文档树中查找文档
 export function findDoc(items, key) {
   for (const item of items) {
@@ -40,8 +61,12 @@ export function findReadmeDoc(items) {
   return null
 }
 
-// 根据 hash 查找文档
+// 根据 hash 查找文档（优先走索引，O(1)；索引未建时回退全树遍历）
 export function findDocByHash(items, hash, docHash) {
+  if (_hashIndex.size > 0) {
+    return _hashIndex.get(hash) || null
+  }
+  // 回退：索引未建时全树遍历
   for (const item of items) {
     if (item.type === 'file' && docHash(item.key) === hash) return item
     if (item.type === 'folder' && item.children) {
@@ -99,53 +124,4 @@ export function collapseAll(items) {
   })
 }
 
-// 查找节点的父级列表（用于插入/删除操作）
-// 返回 { parent: 父节点children数组, index: 节点在数组中的索引 }
-export function findParent(items, targetKey) {
-  for (let i = 0; i < items.length; i++) {
-    if (items[i].key === targetKey) {
-      return { parent: items, index: i }
-    }
-    if (items[i].type === 'folder' && items[i].children) {
-      const found = findParent(items[i].children, targetKey)
-      if (found) return found
-    }
-  }
-  return null
-}
-
-// 查找文件夹节点
-export function findFolder(items, key) {
-  for (const item of items) {
-    if (item.type === 'folder' && item.key === key) return item
-    if (item.type === 'folder' && item.children) {
-      const found = findFolder(item.children, key)
-      if (found) return found
-    }
-  }
-  return null
-}
-
-// 收集所有已展开文件夹的 key
-export function collectExpandedKeys(items) {
-  const keys = new Set()
-  for (const item of items) {
-    if (item.type === 'folder') {
-      if (item.expanded) keys.add(item.key)
-      if (item.children) {
-        for (const k of collectExpandedKeys(item.children)) keys.add(k)
-      }
-    }
-  }
-  return keys
-}
 
-// 根据 key 集合恢复展开状态
-export function restoreExpandedKeys(items, keys) {
-  for (const item of items) {
-    if (item.type === 'folder') {
-      if (keys.has(item.key)) item.expanded = true
-      if (item.children) restoreExpandedKeys(item.children, keys)
-    }
-  }
-}

package/src/composables/useMarkdown.js

@@ -86,7 +86,8 @@ function createRenderer(currentDocKey, docsList) {
   renderer.code = function(code, language) {
     if (language === 'mermaid') {
       const id = 'mermaid-' + Math.random().toString(36).substr(2, 9)
-      return `<div class="mermaid" id="${id}">${code}</div>`
+      const encoded = encodeURIComponent(code)
+      return `<div class="mermaid mermaid-pending" id="${id}" data-source="${encoded}"><div class="mermaid-loading">渲染中...</div></div>`
     }
     // 高亮代码
     let highlighted
@@ -239,159 +240,66 @@ function showCopyTip(btn, success) {
   }, 1500)
 }
 
-// 将图片 URL 转为 PNG blob（兼容同源和跨域）
-async function imgToPngBlob(src) {
-  // 策略1：fetch 获取（同源图片直接成功）
-  try {
-    const resp = await fetch(src)
-    const blob = await resp.blob()
-    if (blob.type === 'image/png') return blob
-    // 非 PNG 通过 canvas 转换
-    return new Promise((resolve, reject) => {
-      const url = URL.createObjectURL(blob)
-      const image = new Image()
-      image.onload = () => {
-        const canvas = document.createElement('canvas')
-        canvas.width = image.naturalWidth
-        canvas.height = image.naturalHeight
-        canvas.getContext('2d').drawImage(image, 0, 0)
-        URL.revokeObjectURL(url)
-        canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob null')), 'image/png')
-      }
-      image.onerror = () => { URL.revokeObjectURL(url); reject(new Error('load fail')) }
-      image.src = url
-    })
-  } catch {
-    // 策略2：crossOrigin Image（需服务器支持 CORS）
-    try {
-      return await loadImageToBlob(src, true)
-    } catch {
-      // 策略3：不设 crossOrigin 直接画
-      return loadImageToBlob(src, false)
-    }
-  }
-}
-
-function loadImageToBlob(src, useCors) {
-  return new Promise((resolve, reject) => {
-    const image = new Image()
-    if (useCors) image.crossOrigin = 'anonymous'
-    image.onload = () => {
-      try {
-        const canvas = document.createElement('canvas')
-        canvas.width = image.naturalWidth
-        canvas.height = image.naturalHeight
-        canvas.getContext('2d').drawImage(image, 0, 0)
-        canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob null')), 'image/png')
-      } catch (e) { reject(e) }
-    }
-    image.onerror = () => reject(new Error('图片加载失败'))
-    image.src = src
-  })
-}
-
-// SVG 转 PNG blob（处理 foreignObject 导致的 tainted canvas 问题）
-function svgToPngBlob(svgEl, scale = 2) {
-  return new Promise((resolve, reject) => {
-    const clone = svgEl.cloneNode(true)
-    // 从 viewBox 或属性中获取 SVG 实际尺寸，确保复制完整
-    const viewBox = clone.getAttribute('viewBox')
-    let svgWidth, svgHeight
-    if (viewBox) {
-      const parts = viewBox.split(/[\s,]+/)
-      svgWidth = parseFloat(parts[2])
-      svgHeight = parseFloat(parts[3])
-    }
-    if (!svgWidth || !svgHeight) {
-      svgWidth = parseFloat(clone.getAttribute('width')) || svgEl.getBoundingClientRect().width || 800
-      svgHeight = parseFloat(clone.getAttribute('height')) || svgEl.getBoundingClientRect().height || 600
-    }
-    // 显式设置 width/height，确保 Image 加载时尺寸正确
-    clone.setAttribute('width', svgWidth)
-    clone.setAttribute('height', svgHeight)
-    // 将 foreignObject 替换为 text 元素，避免 canvas 被污染
-    clone.querySelectorAll('foreignObject').forEach(fo => {
-      const text = fo.textContent.trim()
-      const x = fo.getAttribute('x') || '0'
-      const y = fo.getAttribute('y') || '0'
-      const width = fo.getAttribute('width') || '100'
-      const height = fo.getAttribute('height') || '20'
-      const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text')
-      textEl.setAttribute('x', String(parseFloat(x) + parseFloat(width) / 2))
-      textEl.setAttribute('y', String(parseFloat(y) + parseFloat(height) / 2 + 5))
-      textEl.setAttribute('text-anchor', 'middle')
-      textEl.setAttribute('font-size', '14')
-      textEl.setAttribute('fill', '#455a64')
-      textEl.textContent = text
-      fo.parentNode.replaceChild(textEl, fo)
-    })
-    const svgData = new XMLSerializer().serializeToString(clone)
-    const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
-    const url = URL.createObjectURL(svgBlob)
-    const image = new Image()
-    image.onload = () => {
-      const w = svgWidth * scale
-      const h = svgHeight * scale
-      const canvas = document.createElement('canvas')
-      canvas.width = w
-      canvas.height = h
-      const ctx = canvas.getContext('2d')
-      ctx.scale(scale, scale)
-      ctx.drawImage(image, 0, 0, svgWidth, svgHeight)
-      URL.revokeObjectURL(url)
-      canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob null')), 'image/png')
-    }
-    image.onerror = () => { URL.revokeObjectURL(url); reject(new Error('SVG加载失败')) }
-    image.src = url
-  })
-}
+// 图片格式转换工具（从共享模块导入）
+import { imgToPngBlob, svgToPngBlob } from '../utils/imageConverter.js'
+import { getMermaidCache, setMermaidCache } from './useMermaidCache.js'
 
-// 渲染 Mermaid 图表
+// 渲染 Mermaid 图表（并行渲染所有图表，等全部完成后返回）
 async function renderMermaid() {
   await nextTick()
-  const mermaidElements = document.querySelectorAll('.mermaid')
-  for (const element of mermaidElements) {
+  const mermaidElements = document.querySelectorAll('.mermaid-pending')
+  if (!mermaidElements.length) return
+
+  // 所有图表并行渲染
+  const tasks = Array.from(mermaidElements).map(async (element) => {
+    const code = decodeURIComponent(element.dataset.source || '')
+    if (!code) return
+    const id = element.id
     try {
-      const id = element.id
-      const code = element.textContent
-      const { svg } = await mermaid.render(id + '-svg', code)
+      // 优先使用缓存
+      let svg = getMermaidCache(code)
+      if (!svg) {
+        const result = await mermaid.render(id + '-svg', code)
+        svg = result.svg
+        setMermaidCache(code, svg)
+      }
       element.innerHTML = svg
+      element.classList.remove('mermaid-pending')
       element.classList.add('zoomable-image')
       element.style.cursor = 'zoom-in'
       element.title = '点击放大查看'
       // 添加复制按钮
-      if (!element.querySelector('.mermaid-copy-btn')) {
-        element.style.position = 'relative'
-        const copyBtn = document.createElement('button')
-        copyBtn.className = 'mermaid-copy-btn image-copy-btn'
-        copyBtn.title = '复制图片'
-        copyBtn.innerHTML = COPY_ICON
-        copyBtn.addEventListener('click', async (e) => {
-          e.stopPropagation()
-          e.preventDefault()
-          try {
-            const svgEl = element.querySelector('svg')
-            if (!svgEl) return
-            // 克隆 SVG 并替换 foreignObject 为 text（避免 canvas tainted）
-            const blobPromise = svgToPngBlob(svgEl, 2)
-            const item = new ClipboardItem({ 'image/png': blobPromise })
-            await navigator.clipboard.write([item])
-            showCopyTip(copyBtn, true)
-          } catch (err) {
-            console.warn('复制Mermaid图表失败:', err)
-            showCopyTip(copyBtn, false)
-          }
-        })
-        element.appendChild(copyBtn)
-      }
+      element.style.position = 'relative'
+      const copyBtn = document.createElement('button')
+      copyBtn.className = 'mermaid-copy-btn image-copy-btn'
+      copyBtn.title = '复制图片'
+      copyBtn.innerHTML = COPY_ICON
+      copyBtn.addEventListener('click', async (e) => {
+        e.stopPropagation()
+        e.preventDefault()
+        try {
+          const svgEl = element.querySelector('svg')
+          if (!svgEl) return
+          const blobPromise = svgToPngBlob(svgEl, 2)
+          const item = new ClipboardItem({ 'image/png': blobPromise })
+          await navigator.clipboard.write([item])
+          showCopyTip(copyBtn, true)
+        } catch (err) {
+          console.warn('复制Mermaid图表失败:', err)
+          showCopyTip(copyBtn, false)
+        }
+      })
+      element.appendChild(copyBtn)
     } catch (error) {
       console.error('Mermaid 渲染失败:', error)
-      // 清理 Mermaid 渲染失败时残留在 DOM 中的错误容器
-      const errorEl = document.getElementById(element.id + '-svg')
+      const errorEl = document.getElementById(id + '-svg')
       if (errorEl) errorEl.remove()
+      element.classList.remove('mermaid-pending')
       element.innerHTML = `<pre class="mermaid-error">图表渲染失败\n${error.message}</pre>`
     }
-  }
+  })
+
+  await Promise.all(tasks)
 }
 
 // 为表格添加滚动容器和工具栏按钮
@@ -402,6 +310,9 @@ function wrapTables() {
       // 已经处理过的跳过
       if (table.closest('.table-outer')) return
 
+      // 代码块内的行号表格跳过
+      if (table.closest('.code-block-wrapper') || table.closest('pre')) return
+
       // 构建结构：.table-outer > .table-toolbar + .table-wrapper > table
       const outer = document.createElement('div')
       outer.className = 'table-outer'

package/src/composables/useMermaidCache.js

@@ -0,0 +1,15 @@
+// Mermaid SVG 渲染缓存，以源码为 key，SVG 字符串为 value
+const _cache = new Map()
+
+export function getMermaidCache(code) {
+  return _cache.get(code.trim()) || null
+}
+
+export function setMermaidCache(code, svg) {
+  _cache.set(code.trim(), svg)
+}
+
+// 切换文档时清空缓存，避免内存泄漏
+export function clearMermaidCache() {
+  _cache.clear()
+}