jvs-ppt-ui 0.0.9 → 0.0.10

package/src/components/Header.vue

@@ -11,7 +11,7 @@ import { toPoints, normalizeSvgPath } from '../utils/svgPathParser'
 import { getLineElementPath, scaleSvgPath, extractPathStartEnd, isStandardShapeType } from '../utils/line'
 import { parseColorString, extractTextAlignFromHtml, updateTextAlignInHtml, normalizeGradientConfig, getLinearDirectionByRot, getRadialDirectionByCenter } from '../utils/canvas/elementStyles'
 
-import { SHAPE_LIST as PPTX_SHAPE_LIST, SHAPE_PATH_FORMULAS as PPTX_SHAPE_PATH_FORMULAS } from '../utils/pptxShapes'
+import { shapeFormulas, shapeList as getPptxShapeList, ensurePptxShapes } from '../utils/pptxShapesLazy'
 import { inferElementTextType, type SlideTextType } from '../utils/textTypes'
 // 快捷键弹层异步化；mock DSL 模板(~77KB)改为触发时动态加载
 const ShortcutsDialog = defineAsyncComponent(() => import('./ShortcutsDialog.vue'))
@@ -117,6 +117,8 @@ const onJSONFileChange = (e: Event) => {
   const reader = new FileReader()
   reader.onload = async (event) => {
     try {
+      // JSON 装稿可能含 PPTist 原生格式，解析前确保形状预设表就绪（通常已后台预载完成）
+      await ensurePptxShapes()
       const data = JSON.parse(event.target?.result as string)
       if (Array.isArray(data)) {
         if (uploadMediaResourcesInSlides) {
@@ -1463,13 +1465,88 @@ const blobToDataUrl = (blob: Blob): Promise<string> => {
   })
 }
 
-const resolveMediaSrc = async (input: any): Promise<string> => {
+/**
+ * 将图片 DataURL 或位图通过 Canvas 转为高兼容性的 PNG Base64
+ * 解决 PowerPoint / WPS 对 WebP 或部分 SVG 渲染兼容性差的问题
+ */
+function convertImageToPngBase64(dataUrl: string): Promise<string> {
+  return new Promise((resolve) => {
+    if (typeof Image === 'undefined') {
+      resolve(dataUrl)
+      return
+    }
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas')
+        canvas.width = img.naturalWidth || img.width || 400
+        canvas.height = img.naturalHeight || img.height || 300
+        const ctx = canvas.getContext('2d')
+        if (ctx) {
+          ctx.drawImage(img, 0, 0)
+          const pngUrl = canvas.toDataURL('image/png')
+          if (pngUrl && pngUrl.startsWith('data:image/png')) {
+            resolve(pngUrl)
+            return
+          }
+        }
+      } catch (e) {
+        // canvas 污染或导出失败
+      }
+      resolve(dataUrl)
+    }
+    img.onerror = () => resolve(dataUrl)
+    img.src = dataUrl
+  })
+}
+
+/**
+ * 创建合法兜底占位图（避免 PPTX 缺少媒体部件关系而直接报文件损坏或无法打开）
+ */
+function createFallbackImageBase64(label = '图片资源'): string {
+  try {
+    if (typeof document !== 'undefined') {
+      const canvas = document.createElement('canvas')
+      canvas.width = 400
+      canvas.height = 300
+      const ctx = canvas.getContext('2d')
+      if (ctx) {
+        ctx.fillStyle = '#f8fafc'
+        ctx.fillRect(0, 0, 400, 300)
+        ctx.strokeStyle = '#cbd5e1'
+        ctx.lineWidth = 2
+        ctx.strokeRect(4, 4, 392, 292)
+        ctx.fillStyle = '#94a3b8'
+        ctx.font = '14px sans-serif'
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
+        ctx.fillText(label, 200, 150)
+        return canvas.toDataURL('image/png')
+      }
+    }
+  } catch (e) { }
+  // 1x1 透明 PNG 兜底
+  return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='
+}
+
+/**
+ * 全面解析并预载多媒体资源为 Base64 DataURL，
+ * 避免浏览器导出 PPTX 时触发跨域 XHR 失败，导致 PPT 缺少媒体文件或被 pptxgenjs 写入错误损坏二进制包
+ */
+const resolveMediaSrc = async (input: any, mediaType: 'image' | 'video' | 'audio' | 'auto' = 'auto'): Promise<string> => {
   if (!input) return ''
 
   if (typeof Blob !== 'undefined' && input instanceof Blob) {
     try {
       const dataUrl = await blobToDataUrl(input)
-      if (dataUrl && dataUrl.startsWith('data:')) return dataUrl
+      if (dataUrl && dataUrl.startsWith('data:')) {
+        if (dataUrl.startsWith('data:image/webp') || dataUrl.startsWith('data:image/svg+xml')) {
+          const png = await convertImageToPngBase64(dataUrl)
+          if (png) return png
+        }
+        return dataUrl
+      }
     } catch (e) {
       console.warn('Converting Blob to DataURL failed:', e)
     }
@@ -1478,39 +1555,86 @@ const resolveMediaSrc = async (input: any): Promise<string> => {
   const src = typeof input === 'string' ? input : (input.src || input.blob || input.value || input.content || '')
   if (!src || typeof src !== 'string') return ''
 
-  if (src.startsWith('blob:')) {
-    // 方式 1: 尝试 fetch 读取 blob
+  // 1. 如果是 SVG 代码字符串，转为 data:image/svg+xml;base64
+  if (src.startsWith('<svg') || src.includes('xmlns="http://www.w3.org/2000/svg"')) {
     try {
-      const res = await fetch(src)
+      const b64 = typeof window !== 'undefined' ? window.btoa(unescape(encodeURIComponent(src))) : ''
+      if (b64) return `data:image/svg+xml;base64,${b64}`
+    } catch (e) { }
+  }
+
+  // 2. 如果本身已是 DataURL
+  if (src.startsWith('data:')) {
+    if (src.startsWith('data:image/webp') || src.startsWith('data:image/svg+xml')) {
+      const png = await convertImageToPngBase64(src)
+      if (png) return png
+    }
+    return src
+  }
+
+  // 补全相对路径为完整 URL
+  let targetUrl = src
+  if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://') && !targetUrl.startsWith('blob:')) {
+    if (typeof window !== 'undefined') {
+      const origin = window.location.origin
+      targetUrl = targetUrl.startsWith('/') ? `${origin}${targetUrl}` : `${origin}/${targetUrl}`
+    }
+  }
+
+  // 3. 方式 A: 优先使用 fetch 获取真实媒体二进制流（支持 blob:、相对路径、带 CORS 的 HTTP 资源）
+  try {
+    const res = await fetch(targetUrl, { mode: 'cors' })
+    if (res.ok) {
       const blob = await res.blob()
-      const base64 = await blobToDataUrl(blob)
-      if (base64 && base64.startsWith('data:')) return base64
-    } catch (e) {
-      console.warn('Fetch blob URL failed:', src, e)
+      if (blob && blob.size > 0) {
+        const dataUrl = await blobToDataUrl(blob)
+        if (dataUrl && dataUrl.startsWith('data:')) {
+          if (dataUrl.startsWith('data:image/webp') || dataUrl.startsWith('data:image/svg+xml')) {
+            const png = await convertImageToPngBase64(dataUrl)
+            if (png) return png
+          }
+          return dataUrl
+        }
+      }
     }
+  } catch (e) {
+    // fetch 失败（常见于跨域限制、网络异常），转入回退处理
+  }
 
-    // 方式 2: 尝试 XMLHttpRequest 读取 blob 对象
-    try {
-      const blob = await new Promise<Blob>((resolve, reject) => {
-        const xhr = new XMLHttpRequest()
-        xhr.open('GET', src, true)
-        xhr.responseType = 'blob'
-        xhr.onload = () => {
-          if ((xhr.status === 200 || xhr.status === 0) && xhr.response) resolve(xhr.response)
-          else reject(new Error(`XHR status ${xhr.status}`))
+  // 4. 方式 B: XMLHttpRequest 回退
+  try {
+    const blob = await new Promise<Blob>((resolve, reject) => {
+      const xhr = new XMLHttpRequest()
+      xhr.open('GET', targetUrl, true)
+      xhr.responseType = 'blob'
+      xhr.onload = () => {
+        if ((xhr.status === 200 || xhr.status === 0) && xhr.response && xhr.response.size > 0) {
+          resolve(xhr.response)
+        } else {
+          reject(new Error(`XHR status ${xhr.status}`))
         }
-        xhr.onerror = reject
-        xhr.send()
-      })
-      const base64 = await blobToDataUrl(blob)
-      if (base64 && base64.startsWith('data:')) return base64
-    } catch (e) {
-      console.warn('XHR blob URL failed:', src, e)
+      }
+      xhr.onerror = reject
+      xhr.ontimeout = reject
+      xhr.timeout = 8000
+      xhr.send()
+    })
+    const dataUrl = await blobToDataUrl(blob)
+    if (dataUrl && dataUrl.startsWith('data:')) {
+      if (dataUrl.startsWith('data:image/webp') || dataUrl.startsWith('data:image/svg+xml')) {
+        const png = await convertImageToPngBase64(dataUrl)
+        if (png) return png
+      }
+      return dataUrl
     }
+  } catch (e) {
+    // XHR 回退失败
+  }
 
-    // 方式 3: 仅针对图片做 Canvas 渲染转码
+  // 5. 方式 C: 如果是图片资源，通过 Image + Canvas 获取（浏览器对 img 的跨域加载限制通常比 fetch/xhr 宽松）
+  if (mediaType === 'image' || mediaType === 'auto') {
     try {
-      return await new Promise<string>((resolve) => {
+      const canvasData = await new Promise<string>((resolve) => {
         const img = new Image()
         img.crossOrigin = 'anonymous'
         img.onload = () => {
@@ -1522,34 +1646,31 @@ const resolveMediaSrc = async (input: any): Promise<string> => {
             if (ctx) {
               ctx.drawImage(img, 0, 0)
               const dataUrl = canvas.toDataURL('image/png')
-              if (dataUrl && dataUrl.startsWith('data:image')) {
+              if (dataUrl && dataUrl.startsWith('data:image/png')) {
                 resolve(dataUrl)
                 return
               }
             }
           } catch (err) {
-            console.warn('Canvas drawImage failed:', err)
+            // Tainted canvas
           }
           resolve('')
         }
         img.onerror = () => resolve('')
-        img.src = src
+        img.src = targetUrl
       })
+      if (canvasData) return canvasData
     } catch (e) {
-      console.warn('Canvas conversion failed:', e)
-      return ''
+      // ignore
     }
   }
 
-  if (!src.startsWith('http') && !src.startsWith('data:')) {
-    if (src.startsWith('/')) {
-      return (typeof window !== 'undefined' ? window.location.origin : '') + src
-    } else {
-      return (typeof window !== 'undefined' ? window.location.origin : '') + '/' + src
-    }
+  // 6. 兜底保护：如果是图片类型，返回有效占位图，确保 pptxgenjs 能写入合法的 media 文件，绝不产生损坏的 pptx
+  if (mediaType === 'image') {
+    return createFallbackImageBase64('图片资源加载失败')
   }
 
-  return src
+  return ''
 }
 
 const generatePptxBlob = async (): Promise<Blob | null> => {
@@ -1599,11 +1720,13 @@ const generatePptxBlob = async (): Promise<Blob | null> => {
             pptxBg = { color: parsed.color, transparency: parsed.transparency }
           } else if (bgObj.type === 'image' && bgObj.image) {
             const src = bgObj.image.src || bgObj.image
-            const bgUrl = await resolveMediaSrc(src)
-            if (bgUrl.startsWith('data:')) {
+            const bgUrl = await resolveMediaSrc(src, 'image')
+            if (bgUrl && bgUrl.startsWith('data:')) {
               pptxBg = { data: bgUrl }
-            } else {
+            } else if (bgUrl) {
               pptxBg = { path: bgUrl }
+            } else {
+              pptxBg = { color: 'FFFFFF', transparency: 0 }
             }
           } else if (bgObj.type === 'gradient' && bgObj.gradient) {
             const colors = bgObj.gradient.colors || []
@@ -1960,7 +2083,10 @@ const generatePptxBlob = async (): Promise<Blob | null> => {
             }
           }
           else if (el.type === 'image') {
-            let imgPath = await resolveMediaSrc(el.content || (el as any).src || '')
+            let imgPath = await resolveMediaSrc(el.content || (el as any).src || '', 'image')
+            if (!imgPath) {
+              imgPath = createFallbackImageBase64('图片缺失')
+            }
 
             const imgOpts: pptxgen.ImageProps = {
               x, y, w, h,
@@ -2106,7 +2232,7 @@ const generatePptxBlob = async (): Promise<Blob | null> => {
             const buildNativeShapeFill = async (): Promise<any> => {
               // 图片填充 → 原生 a:blipFill
               if (patternUrl) {
-                const pUrl = await resolveMediaSrc(patternUrl)
+                const pUrl = await resolveMediaSrc(patternUrl, 'image')
                 if (pUrl && /^data:image\/svg\+xml/i.test(pUrl)) {
                   const pngUrl = await rasterizeSvgFill(pUrl, pixelWidth, pixelHeight)
                   return pngUrl ? { type: 'image', data: pngUrl } : undefined
@@ -2529,9 +2655,9 @@ const generatePptxBlob = async (): Promise<Blob | null> => {
               }
             }
             if (!mediaPath) {
-              mediaPath = await resolveMediaSrc(mediaInput)
+              mediaPath = await resolveMediaSrc(mediaInput, el.type as 'video' | 'audio')
             }
-            if (mediaPath) {
+            if (mediaPath && mediaPath.startsWith('data:')) {
               let extn = el.type === 'audio' ? 'mp3' : 'mp4'
               if (mediaPath.startsWith('data:audio/')) {
                 if (mediaPath.includes('audio/wav')) extn = 'wav'
@@ -2544,23 +2670,40 @@ const generatePptxBlob = async (): Promise<Blob | null> => {
                 else extn = 'mp4'
               }
 
-              if (mediaPath.startsWith('data:')) {
-                pptxSlide.addMedia({
-                  type: el.type,
-                  data: mediaPath,
-                  extn,
-                  x, y, w, h,
-                  objectName: el.id
-                })
-              } else if (mediaPath.startsWith('http') || mediaPath.startsWith('/') || mediaPath.startsWith('./')) {
-                pptxSlide.addMedia({
-                  type: el.type,
-                  path: mediaPath,
-                  extn,
-                  x, y, w, h,
-                  objectName: el.id
-                })
-              }
+              pptxSlide.addMedia({
+                type: el.type,
+                data: mediaPath,
+                extn,
+                x, y, w, h,
+                objectName: el.id
+              })
+            } else {
+              // 无法获取或跨域拦截二进制数据时的防护兜底：
+              // 严禁调用带 path 的 addMedia，否则 pptxgenjs 会因为 XHR 失败向媒体文件写入损坏的图片数据，导致导出的 PPTX 无法打开！
+              // 生成规范的优雅多媒体占位卡片并挂载在线超链接，确保 PPT 100% 正常打开且可点击跳转播放
+              const isVideo = el.type === 'video'
+              const mediaTitle = isVideo ? '视频' : '音频'
+              const displayUrl = typeof mediaInput === 'string' ? mediaInput : ''
+
+              pptxSlide.addShape('rect' as any, {
+                x, y, w, h,
+                fill: { color: isVideo ? '1E293B' : '0F172A' },
+                line: { color: '3B82F6', width: 1.5, dashType: 'dash' },
+                rectRadius: 0.08,
+                hyperlink: displayUrl ? { url: displayUrl, tooltip: `点击在线打开${mediaTitle}` } : undefined,
+                objectName: el.id
+              })
+
+              pptxSlide.addText([
+                { text: isVideo ? '▶ 视频多媒体' : '🎵 音频多媒体', options: { bold: true, fontSize: 13, color: 'FFFFFF' } },
+                { text: displayUrl ? `\n(在线链接: ${displayUrl.length > 36 ? displayUrl.slice(0, 36) + '...' : displayUrl})` : '', options: { fontSize: 9, color: '94A3B8' } },
+                { text: '\n[点击卡片在浏览器中播放]', options: { fontSize: 9, color: '60A5FA' } }
+              ], {
+                x, y, w, h,
+                align: 'center',
+                valign: 'middle',
+                hyperlink: displayUrl ? { url: displayUrl, tooltip: `点击在线打开${mediaTitle}` } : undefined
+              })
             }
           }
           else if (el.type === 'table') {
@@ -3027,7 +3170,7 @@ const getMaxFontSize = (html: string, defaultFontSize: number = 18): number => {
 const getParagraphMetrics = (html: string, ratio: number, defaultFontSize: number = 18) => {
   const tagRegex = /<(div|p|li)(?![a-z0-9])[^>]*>/gi
 
-  const lineHeights = []
+  const explicitLineHeights: number[] = []
   const margins = []
   let paragraphCount = 0
 
@@ -3055,6 +3198,7 @@ const getParagraphMetrics = (html: string, ratio: number, defaultFontSize: numbe
     const marginTop = getProp('margin-top')
     const marginBottom = getProp('margin-bottom')
     const lineHeight = getProp('line-height')
+    const hasExplicitLineHeight = !!lineHeight
 
     const tagStartIndex = match.index
     const tagName = match[1]
@@ -3083,7 +3227,7 @@ const getParagraphMetrics = (html: string, ratio: number, defaultFontSize: numbe
     if (lineHeightValue < 1.1) {
       lineHeightValue = 1.2
     }
-    lineHeights.push(lineHeightValue)
+    if (hasExplicitLineHeight) explicitLineHeights.push(lineHeightValue)
 
     const isFirstParagraph = paragraphIndex === 0
     const isLastParagraph = match.index + fullTag.length >= html.lastIndexOf('</' + tagName + '>')
@@ -3094,7 +3238,10 @@ const getParagraphMetrics = (html: string, ratio: number, defaultFontSize: numbe
         marginTopValue = parseFloat(marginTop.replace('pt', ''))
       }
       else if (marginTop.indexOf('em') !== -1) {
-        marginTopValue = parseFloat(marginTop.replace('em', '')) * maxFontSize
+        // 解析器把 OOXML spcPct（千分比）输出为 `val/1000 + 'em'`（如 val=20000 → "20em"），
+        // 其真实语义是 20%（= 0.2em）。必须按百分比换算；若按字面 em × 字号会放大 100 倍，
+        // 段间距变成几百像素。
+        marginTopValue = parseFloat(marginTop.replace('em', '')) / 100 * maxFontSize
       }
       if (marginTopValue > 0) margins.push(marginTopValue)
     }
@@ -3105,7 +3252,8 @@ const getParagraphMetrics = (html: string, ratio: number, defaultFontSize: numbe
         marginBottomValue = parseFloat(marginBottom.replace('pt', ''))
       }
       else if (marginBottom.indexOf('em') !== -1) {
-        marginBottomValue = parseFloat(marginBottom.replace('em', '')) * maxFontSize
+        // 同 margin-top：解析器的 em 实为 OOXML spcPct 百分比（见上方注释）
+        marginBottomValue = parseFloat(marginBottom.replace('em', '')) / 100 * maxFontSize
       }
       if (marginBottomValue > 0) margins.push(marginBottomValue)
     }
@@ -3114,8 +3262,12 @@ const getParagraphMetrics = (html: string, ratio: number, defaultFontSize: numbe
   }
 
   let lineHeight = 1.2
-  if (lineHeights.length) {
-    lineHeight = +(lineHeights.reduce((sum, height) => sum + height, 0) / paragraphCount).toFixed(2)
+  // OOXML 的行距(lnSpc)是段落级属性：容器行高不能取各段平均值，
+  // 否则没有显式行距的段落（默认 100%）会被其它段落的行距（如 200%）污染，
+  // 整块文本行距虚高、溢出文本框。容器只在"所有段落都有显式行距"时取最小值兜底，
+  // 其余情况保持默认 1.2，显式行距由段落内联 style 自行生效。
+  if (explicitLineHeights.length && explicitLineHeights.length === paragraphCount) {
+    lineHeight = +Math.min(...explicitLineHeights).toFixed(2)
   }
 
   let margin = 0
@@ -3664,7 +3816,7 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
   const defaultThemeColors = [globalThemeColor.value || '#5b9bd5', '#ed7d31', '#a5a5a5', '#ffc000', '#4472c4', '#70ad47']
 
   const shapeList: any[] = []
-  for (const item of PPTX_SHAPE_LIST) {
+  for (const item of getPptxShapeList()) {
     shapeList.push(...item.children)
   }
 
@@ -3849,7 +4001,10 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
               shapeEl.text!.inset = [0, 0, 0, 0]
               shapeEl.style.padding = '0px'
             }
-            if (metrics.lineHeight) shapeEl.text!.lineHeight = metrics.lineHeight
+            if (metrics.lineHeight) {
+              shapeEl.text!.lineHeight = metrics.lineHeight
+              shapeEl.style.lineHeight = metrics.lineHeight
+            }
             if (metrics.margin) shapeEl.text!.paragraphSpace = metrics.margin
             slide.elements.push(shapeEl)
           }
@@ -3983,7 +4138,10 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
               textEl.inset = [0, 0, 0, 0]
               textEl.style.padding = '0px'
             }
-            if (metrics.lineHeight) textEl.lineHeight = metrics.lineHeight
+            if (metrics.lineHeight) {
+              textEl.lineHeight = metrics.lineHeight
+              textEl.style.lineHeight = metrics.lineHeight
+            }
             if (metrics.margin) textEl.paragraphSpace = metrics.margin
             slide.elements.push(textEl)
           }
@@ -4285,7 +4443,10 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
               element.color = shapeTextColor
             }
             if (el.link) element.link = { type: 'web', target: el.link }
-            if (metrics.lineHeight) element.text!.lineHeight = metrics.lineHeight
+            if (metrics.lineHeight) {
+              element.text!.lineHeight = metrics.lineHeight
+              element.style.lineHeight = metrics.lineHeight
+            }
             if (metrics.margin) element.text!.paragraphSpace = metrics.margin
             if (el.textInset) {
               element.text!.inset = [
@@ -4358,7 +4519,7 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
                 element.pathFormula = shape.pathFormula
                 element.viewBox = [el.width, el.height]
 
-                const pathFormula = PPTX_SHAPE_PATH_FORMULAS[shape.pathFormula]
+                const pathFormula = shapeFormulas()[shape.pathFormula]
                 if (pathFormula && 'editable' in pathFormula && pathFormula.editable) {
                   let keypointValues = pathFormula.defaultValue
                   if (el.keypoints) {
@@ -4632,7 +4793,7 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
                 }
               }
             }
-            else if (el.path && el.path.indexOf('NaN') === -1) {
+            else if (el.path && el.path.indexOf('NaN') === -1 && el.shapType !== 'custom') {
               if (el.shapType === 'arc') {
                 element.path = el.path
                 element.viewBox = [originWidth, originHeight]
@@ -4656,22 +4817,14 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
               }
             }
             if (el.shapType === 'custom') {
-              let pathInput = el.path!
+              let pathInput = el.path || ''
               if (pathInput.indexOf('NaN') !== -1) {
                 if (element.width === 0) element.width = 0.1
                 if (element.height === 0) element.height = 0.1
                 pathInput = pathInput.replace(/NaN/g, '0')
               }
-              const normalized = normalizeSvgPath(pathInput)
-              element.path = normalized.path
-              const w = normalized.width
-              const h = normalized.height
-              if ((w / h) > (originWidth / originHeight)) {
-                element.viewBox = [w, w * originHeight / originWidth]
-              }
-              else {
-                element.viewBox = [h * originWidth / originHeight, h]
-              }
+              element.path = pathInput
+              element.viewBox = [originWidth, originHeight]
             }
 
             if (element.path && typeof element.path === 'string') {
@@ -4906,7 +5059,7 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
 
             const normType = String(shapType).toLowerCase()
 
-            for (const group of PPTX_SHAPE_LIST) {
+            for (const group of getPptxShapeList()) {
               for (const item of group.children) {
                 const itemPptxType = (item.pptxShapeType || '').toLowerCase()
                 const itemFormula = (item.pathFormula || '').toLowerCase()
@@ -4927,8 +5080,8 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
                   const matchedShapType = item.pptxShapeType || shapType
                   const matchedPathFormula = item.pathFormula
 
-                  if (item.pathFormula && PPTX_SHAPE_PATH_FORMULAS[item.pathFormula]) {
-                    const formula = PPTX_SHAPE_PATH_FORMULAS[item.pathFormula]
+                  if (item.pathFormula && shapeFormulas()[item.pathFormula]) {
+                    const formula = shapeFormulas()[item.pathFormula]
                     let kps = formula.defaultValue ? [...formula.defaultValue] : []
                     if (_element.keypoints) {
                       if (normType === 'roundrect' || normType === 'snip1rect' || normType === 'cutrectsingle' || normType === 'round1rect' || normType === 'roundrectsingle') {
@@ -5094,18 +5247,27 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
             const isChildVertical = checkIsVertical(_el)
 
             // 提取原生字号，防止 CanvasShapeElement 回退到 16px 导致小形状文本溢出/折行被裁切
+            // 必须取所有 run 字号的最小值：容器字号决定 <p> 的 strut（字号 × lineHeight），
+            // 若取首个字号（如标题 21px）会把 16px 正文行撑到 27px+，行距虚高、文字溢出文本框；
+            // 各 run 自身字号仍由内联 span 生效，取最小值不影响大字号标题的渲染。
             let childFontSize = _el.fontSize || _el.style?.fontSize
             if (!childFontSize && (_el.content || _el.text)) {
               const textToProbe = typeof _el.content === 'string' ? _el.content : (typeof _el.text === 'string' ? _el.text : (_el.text?.content || ''))
-              const ptMatch = textToProbe.match(/font-size\s*:\s*([\d.]+)pt/i)
-              if (ptMatch) {
-                childFontSize = Math.round(parseFloat(ptMatch[1]) * ratio)
-              } else {
-                const pxMatch = textToProbe.match(/font-size\s*:\s*([\d.]+)px/i)
-                if (pxMatch) {
-                  childFontSize = Math.round(parseFloat(pxMatch[1]))
-                }
+              const sizeCandidates: number[] = []
+              for (const m of textToProbe.matchAll(/font-size\s*:\s*([\d.]+)\s*(pt|px)/gi)) {
+                const v = parseFloat(m[1])
+                sizeCandidates.push(m[2].toLowerCase() === 'pt' ? Math.round(v * ratio) : Math.round(v))
               }
+              if (sizeCandidates.length) childFontSize = Math.min(...sizeCandidates)
+            }
+
+            // 组内文本与顶层文本走同一套段落度量（getParagraphMetrics）：
+            // 容器 lineHeight（默认 1.2）与段间距，否则 contenteditable 回退 'normal'（≈1.3~1.43）
+            // 同样会造成行距虚高，与容器字号问题叠加后正文明显比原 PPT 疏。
+            let childMetrics: { lineHeight: number; margin: number | null } | null = null
+            const childHtmlForMetrics = typeof _el.content === 'string' ? _el.content : (typeof _el.text === 'string' ? _el.text : (_el.text?.content || ''))
+            if (/<(p|div|li)[\s>]/i.test(childHtmlForMetrics)) {
+              childMetrics = getParagraphMetrics(childHtmlForMetrics, ratio, childFontSize || 16)
             }
 
             const rawChildLineCap = _el.borderLineCap || _el.border?.lineCap || _el.lineCap
@@ -5130,6 +5292,10 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
               fontSize: childFontSize ? `${childFontSize}px` : undefined,
               whiteSpace: (_el.wrap === 'none' || _el.wrap === false) ? 'nowrap' : (_el.style?.whiteSpace || 'normal'),
             }
+            // 段落度量落到容器样式：lineHeight 撑住 strut、paragraphSpace 驱动段间距（px 数值，
+            // CanvasTextElement 以 element.style.paragraphSpace 组装 --paragraphSpace）
+            if (childMetrics?.lineHeight) childStyle.lineHeight = childMetrics.lineHeight
+            if (childMetrics?.margin) childStyle.paragraphSpace = childMetrics.margin
             if (_el.reflection) {
               childStyle.reflection = {
                 enabled: _el.reflection.enabled,
@@ -6577,6 +6743,7 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
 registerPPTParser(parsePPTXJSONData)
 
 const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Promise<boolean> => {
+  await ensurePptxShapes() // PPTX 解析依赖形状预设表（已后台预载，此处通常瞬时）
   const nameWithoutExt = fileName ? (fileName.substring(0, fileName.lastIndexOf('.')) || fileName) : presentationTitle.value || '演示文稿'
 
   loadingText.value = '正在导入 PPTX，请稍候...'
@@ -7192,28 +7359,59 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
   const props = withDefaults(defineProps<{
     slotProps?: any
     showMenu?: boolean
+    toolbarMode?: 'auto' | 'more' | 'full'
+    visible?: boolean
   }>(), {
-    showMenu: true
+    showMenu: true,
+    toolbarMode: 'auto',
+    visible: true
   })
 
-  const headerContext = computed(() => ({
-    ...(props.slotProps || {}),
-    showMenu: props.showMenu,
-    presentationTitle: presentationTitle.value,
-    isEditingTitle: isEditingTitle.value,
-    startEditingTitle,
-    stopEditingTitle,
-    zoomRatio: zoomRatio.value,
-    setZoomRatio: (val: number) => { zoomRatio.value = val },
-    resetZoom,
-    isMasterEditingView: isMasterEditingView.value,
-    enterMasterView,
-    exitMasterView,
-    startPresentation,
-    startFromBeginning,
-    triggerPPTXImport,
-    triggerJSONImport
-  }))
+  // 不能整体展开 slotProps：其 deck 是惰性 getter，展开会立刻执行 getDeck() 整册深拷贝
+  // （110 页实测 ~500ms/次），且展开发生在本 computed 内会把本 computed 订阅到全册，
+  // 拖拽/打字每步都失效重算。改为逐键拷贝（跳过 deck），deck 仍以 getter 形式透传，
+  // 只在消费者真正读取时才现算
+  const headerContext = computed(() => {
+    const sp: any = props.slotProps || {}
+    const merged: any = {
+      showMenu: props.showMenu,
+      presentationTitle: presentationTitle.value,
+      isEditingTitle: isEditingTitle.value,
+      startEditingTitle,
+      stopEditingTitle,
+      zoomRatio: zoomRatio.value,
+      setZoomRatio: (val: number) => { zoomRatio.value = val },
+      resetZoom,
+      isMasterEditingView: isMasterEditingView.value,
+      enterMasterView,
+      exitMasterView,
+      startPresentation,
+      startFromBeginning,
+      triggerPPTXImport,
+      triggerJSONImport
+    }
+    for (const k of Object.keys(sp)) {
+      if (k === 'deck' || k in merged) continue
+      merged[k] = sp[k]
+    }
+    if ('deck' in sp) {
+      Object.defineProperty(merged, 'deck', {
+        get: () => sp.deck,
+        enumerable: true,
+        configurable: true
+      })
+    }
+    return merged
+  })
+
+  function handleToolbarWheel(e: WheelEvent) {
+    const el = e.currentTarget as HTMLElement
+    if (el && el.scrollWidth > el.clientWidth) {
+      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+        el.scrollLeft += e.deltaY
+      }
+    }
+  }
 
   defineExpose({
     generatePptxBlob,
@@ -7228,7 +7426,10 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
 </script>
 
 <template>
-  <header class="app-header">
+  <!-- v-show 落在内层根元素而非组件本身：组件是多根节点（含 teleport），
+       组件级运行时指令会触发 Vue "non-element root node" 警告，
+       该警告在 dev 下会被 Vite 的 console 转发炸成异常并中断渲染 -->
+  <header v-show="visible" class="app-header">
     <!-- Left side: Hamburger menu + Title input -->
     <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0;">
       <!-- 外部左侧前置插槽 (例如返回按钮、Logo) -->
@@ -7405,18 +7606,20 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
     </div>
 
     <!-- Center Section: Integrated Top Toolbar -->
-    <div class="header-center-tools" :style="{ justifyContent: isMasterEditingView ? 'flex-start' : 'center' }" style="flex: 1; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; min-width: 0; position: relative; z-index: 10; margin: 0 8px; scrollbar-width: none; -ms-overflow-style: none;">
+    <div class="header-center-tools" @wheel.passive="handleToolbarWheel" style="flex: 1; display: flex; align-items: center; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; min-width: 0; position: relative; z-index: 10; margin: 0 8px; scrollbar-width: none; -ms-overflow-style: none;">
       <!-- 外部中间工具栏插槽 (默认呈现内置 Toolbar，支持前置/后置插槽扩展或整栏替换) -->
       <slot name="center" v-bind="headerContext">
         <slot name="toolbar" v-bind="headerContext">
-          <Toolbar>
-            <template v-if="$slots['toolbar-prefix']" #prefix>
-              <slot name="toolbar-prefix" v-bind="headerContext"></slot>
-            </template>
-            <template v-if="$slots['toolbar-suffix']" #suffix>
-              <slot name="toolbar-suffix" v-bind="headerContext"></slot>
-            </template>
-          </Toolbar>
+          <div :style="{ margin: isMasterEditingView ? '0' : '0 auto' }" style="display: flex; align-items: center; flex-shrink: 0;">
+            <Toolbar :toolbar-mode="toolbarMode">
+              <template v-if="$slots['toolbar-prefix']" #prefix>
+                <slot name="toolbar-prefix" v-bind="headerContext"></slot>
+              </template>
+              <template v-if="$slots['toolbar-suffix']" #suffix>
+                <slot name="toolbar-suffix" v-bind="headerContext"></slot>
+              </template>
+            </Toolbar>
+          </div>
         </slot>
       </slot>
     </div>
@@ -7748,7 +7951,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
 }
 
 .presentation-split-btn {
-  display: flex;
+  display: inline-flex !important;
   align-items: center;
   height: 32px;
   border: 1px solid #3b82f6;
@@ -7756,9 +7959,11 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
   background: #ffffff;
   color: #3b82f6;
   transition: all 0.15s ease;
-  box-sizing: border-box;
-  white-space: nowrap;
-  flex-shrink: 0;
+  box-sizing: border-box !important;
+  white-space: nowrap !important;
+  flex-shrink: 0 !important;
+  position: relative;
+  overflow: hidden;
 }
 
 .presentation-split-btn:hover {
@@ -7767,25 +7972,42 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
 }
 
 .presentation-main-btn {
-  display: flex;
+  display: inline-flex !important;
   align-items: center;
   gap: 6px;
-  height: 100%;
-  padding: 0 10px 0 12px;
-  background: transparent;
-  border: none;
-  color: #3b82f6;
-  font-size: 13px;
-  font-weight: 600;
+  height: 100% !important;
+  padding: 0 10px 0 12px !important;
+  background: transparent !important;
+  border: none !important;
+  color: #3b82f6 !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
   cursor: pointer;
   transition: background-color 0.15s ease;
   border-radius: 5px 0 0 5px;
-  white-space: nowrap;
-  flex-shrink: 0;
+  white-space: nowrap !important;
+  flex-shrink: 0 !important;
+  line-height: 1 !important;
+  box-sizing: border-box !important;
+  position: relative;
+}
+
+.presentation-main-btn::before,
+.presentation-main-btn::after {
+  display: none !important;
+  content: none !important;
+}
+
+.presentation-main-btn span {
+  white-space: nowrap !important;
+  display: inline-block !important;
+  line-height: 1 !important;
+  font-size: 13px !important;
+  color: #3b82f6 !important;
 }
 
 .presentation-main-btn:hover {
-  background: rgba(59, 130, 246, 0.08);
+  background: rgba(59, 130, 246, 0.08) !important;
 }
 
 .presentation-arrow-btn {