md2ui 1.0.19 → 1.0.21

package/src/style.css

@@ -248,7 +248,7 @@ body {
   max-width: 960px;
   margin: 0 auto;
   background: var(--color-bg);
-  padding: 24px 32px;
+  padding: 24px 20px;
 }
 
 /* Markdown 内容样式 */
@@ -279,6 +279,19 @@ body {
 .markdown-content h5,
 .markdown-content h6 {
   position: relative;
+  scroll-margin-top: 60px;
+}
+
+/* 标题锚点跳转高亮闪烁动画 */
+@keyframes heading-flash {
+  0% { background-color: transparent; }
+  15% { background-color: rgba(66, 184, 131, 0.15); }
+  100% { background-color: transparent; }
+}
+
+.markdown-content .heading-flash {
+  animation: heading-flash 1.5s ease-out;
+  border-radius: 4px;
 }
 
 .markdown-content h1:hover .heading-anchor,
@@ -295,6 +308,44 @@ body {
   text-decoration: none;
 }
 
+/* 锚点提示气泡（hover + 点击复制共用同一位置） */
+.markdown-content .heading-anchor::after {
+  content: '复制链接';
+  position: absolute;
+  left: 0.7em;
+  bottom: calc(100% + 4px);
+  padding: 1px 6px;
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+  font-size: 10px;
+  font-weight: 400;
+  border-radius: 3px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s;
+  z-index: 10;
+}
+
+.markdown-content .heading-anchor:hover::after {
+  opacity: 1;
+}
+
+/* 点击复制后切换为"已复制"状态 */
+.markdown-content .heading-anchor.anchor-copied::after {
+  content: '已复制';
+  background: var(--color-success-bg, #dafbe1);
+  color: var(--color-success, #1a7f37);
+  opacity: 1;
+}
+
+.markdown-content .heading-anchor.anchor-copy-error::after {
+  content: '复制失败';
+  background: var(--color-error-bg, #ffebe9);
+  color: var(--color-error-text, #cf222e);
+  opacity: 1;
+}
+
 .markdown-content h1 {
   font-size: 2em;
   margin-bottom: 8px;
@@ -333,6 +384,22 @@ body {
   font-weight: 600;
 }
 
+.markdown-content h5 {
+  font-size: 0.95em;
+  margin-top: 14px;
+  margin-bottom: 6px;
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.markdown-content h6 {
+  font-size: 0.9em;
+  margin-top: 12px;
+  margin-bottom: 6px;
+  color: var(--color-text-secondary);
+  font-weight: 600;
+}
+
 .markdown-content p {
   margin-bottom: 12px;
   color: var(--color-text);
@@ -1049,9 +1116,9 @@ body {
   align-items: center;
   justify-content: center;
   gap: 1px;
-  background: var(--color-bg);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border);
+  background: #fff;
+  color: var(--color-accent);
+  border: 1px solid var(--color-accent);
   border-radius: 6px;
   cursor: pointer;
   box-shadow: 0 1px 3px var(--color-shadow);
@@ -1060,9 +1127,9 @@ body {
 }
 
 .back-to-top:hover {
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border-color: var(--color-border);
+  background: var(--color-accent);
+  color: #fff;
+  border-color: var(--color-accent);
 }
 
 .progress-text {
@@ -1098,6 +1165,11 @@ body {
   justify-content: space-between;
   padding: 0 12px 8px;
   border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  background: var(--color-bg);
+  z-index: 1;
+  padding-top: 0;
 }
 
 .toc-title {
@@ -1157,6 +1229,31 @@ body {
 
 .toc-nav {
   padding: 8px 0;
+  position: relative;
+}
+
+/* 左侧连续竖线 */
+.toc-track {
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 2px;
+  background: var(--color-border-light);
+  border-radius: 1px;
+}
+
+/* marker 滑块 — 平滑过渡 */
+.toc-marker {
+  position: absolute;
+  left: 0;
+  width: 2px;
+  background: var(--color-accent);
+  border-radius: 1px;
+  transition: top 0.25s cubic-bezier(0.65, 0, 0.35, 1),
+              height 0.25s cubic-bezier(0.65, 0, 0.35, 1),
+              opacity 0.25s;
+  z-index: 1;
 }
 
 .toc-item {
@@ -1169,7 +1266,6 @@ body {
   font-size: 12px;
   line-height: 1.5;
   transition: all 0.1s;
-  border-left: 2px solid transparent;
 }
 
 .toc-item-text {
@@ -1216,7 +1312,6 @@ body {
 
 .toc-item.active {
   color: var(--color-accent);
-  border-left-color: var(--color-accent);
   font-weight: 500;
   background: var(--color-accent-bg);
   border-radius: 0 4px 4px 0;
@@ -1232,6 +1327,8 @@ body {
 .toc-item.toc-level-2 { padding-left: 20px; }
 .toc-item.toc-level-3 { padding-left: 28px; font-size: 11px; }
 .toc-item.toc-level-4 { padding-left: 36px; font-size: 11px; }
+.toc-item.toc-level-5 { padding-left: 44px; font-size: 11px; }
+.toc-item.toc-level-6 { padding-left: 52px; font-size: 11px; }
 
 /* ===== 拖拽条 ===== */
 .resizer {
@@ -1514,7 +1611,7 @@ body {
 
 @media (max-width: 768px) {
   .markdown-content {
-    padding: 16px;
+    padding: 16px 20px;
     width: 100%;
   }
   .back-to-top {
@@ -3522,3 +3619,131 @@ body {
     padding: 12px 16px 24px;
   }
 }
+
+/* ===== 移动端搜索页面 ===== */
+.mobile-search-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--color-bg);
+  overflow: hidden;
+}
+
+.mobile-search-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.mobile-search-input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+}
+
+.mobile-search-input-wrapper:focus-within {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-bg);
+}
+
+.mobile-search-icon {
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+
+.mobile-search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 15px;
+  color: var(--color-text);
+  min-width: 0;
+}
+
+.mobile-search-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.mobile-search-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+  border-radius: 50%;
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.mobile-search-cancel {
+  border: none;
+  background: transparent;
+  color: var(--color-accent);
+  font-size: 14px;
+  cursor: pointer;
+  white-space: nowrap;
+  padding: 4px 0;
+}
+
+.mobile-search-results {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mobile-search-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--color-border-light);
+  transition: background 0.1s;
+}
+
+.mobile-search-item:active,
+.mobile-search-item.active {
+  background: var(--color-accent-bg);
+}
+
+.mobile-search-item-icon {
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+
+.mobile-search-item-title {
+  flex: 1;
+  font-size: 14px;
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mobile-search-empty {
+  padding: 32px 16px;
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: 14px;
+}
+
+.mobile-search-tip {
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: 13px;
+}

package/src/utils/imageConverter.js

@@ -0,0 +1,129 @@
+/**
+ * 图片格式转换工具（共享模块）
+ * 提供 imgToPngBlob / svgToPngBlob 方法
+ * 供 useMarkdown.js 和 ImageZoom.vue 共用
+ */
+
+/**
+ * 将图片 URL 转为 PNG blob（兼容同源和跨域）
+ * 策略1：fetch 获取 → 策略2：crossOrigin Image → 策略3：无 crossOrigin 直接画
+ */
+export async function imgToPngBlob(src) {
+  try {
+    const resp = await fetch(src)
+    const blob = await resp.blob()
+    if (blob.type === 'image/png') return blob
+    return blobToCanvasPng(blob)
+  } catch {
+    try {
+      return await loadImageToBlob(src, true)
+    } catch {
+      return loadImageToBlob(src, false)
+    }
+  }
+}
+
+/**
+ * 加载图片到 canvas 并转 PNG blob
+ * @param {string} src - 图片地址
+ * @param {boolean} useCors - 是否设置 crossOrigin
+ */
+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
+  })
+}
+
+/**
+ * 将任意图片 blob 通过 canvas 转为 PNG blob
+ */
+function blobToCanvasPng(srcBlob, scale = 1) {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(srcBlob)
+    const image = new Image()
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = image.naturalWidth * scale
+      canvas.height = image.naturalHeight * scale
+      const ctx = canvas.getContext('2d')
+      if (scale !== 1) ctx.scale(scale, scale)
+      ctx.drawImage(image, 0, 0)
+      URL.revokeObjectURL(url)
+      canvas.toBlob(b => resolve(b), 'image/png')
+    }
+    image.onerror = () => { URL.revokeObjectURL(url); reject(new Error('图片加载失败')) }
+    image.src = url
+  })
+}
+
+/**
+ * SVG 转 PNG blob（处理 foreignObject 导致的 tainted canvas 问题）
+ * @param {SVGElement} svgEl - SVG DOM 元素
+ * @param {number} scale - 缩放倍数，默认 2
+ */
+export 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
+  })
+}