jvs-ppt-ui 0.0.7 → 0.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jvs-ppt-ui",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "main": "./dist/lib/jvs-ppt-ui.umd.js",
   "module": "./dist/lib/jvs-ppt-ui.es.js",

package/src/components/CanvasArea.vue

@@ -965,6 +965,18 @@ function getResizeCursor(handle: string, el: any) {
 // 拖拽期间全局图元尺寸缓存池：彻底消除拖动期间的 Forced Synchronous Layout（强制回流与 DOM 读取）
 const activeDragDimensions = new Map<string, { width: number; height: number }>()
 
+// 渲染期图元尺寸记忆化：模板对同一元素每渲染批会调 getElementWidthHeight 2-4 次，
+// 签名含全部输入（style 尺寸/排版项、内容长度+首尾采样、选中 RO 尺寸），命中则免重复 DOM 测量
+let elementDimCache = new WeakMap<object, { sig: string; dims: { width: number; height: number } }>()
+watch(activeIndex, () => {
+  elementDimCache = new WeakMap()
+})
+if (typeof document !== 'undefined' && (document as any).fonts?.ready) {
+  ;(document as any).fonts.ready.then(() => {
+    elementDimCache = new WeakMap()
+  }).catch(() => {})
+}
+
 const getOverlayWidth = (el: any) => {
   if (el.type === 'line') {
     return el.style?.width || (el.width !== undefined ? `${el.width}px` : '1px')
@@ -1197,8 +1209,11 @@ function observeSelectedElement() {
         const curW = curIsVertical && curEditableDom
           ? Math.max(curEditableDom.scrollWidth, dom.offsetWidth)
           : dom.offsetWidth
-        selectedElementWidth.value = `${curW}px`
-        selectedElementHeight.value = `${curH}px`
+        // 值相等守卫：避免 RO → 渲染 → RO 的无谓链路
+        const wStr = `${curW}px`
+        const hStr = `${curH}px`
+        if (selectedElementWidth.value !== wStr) selectedElementWidth.value = wStr
+        if (selectedElementHeight.value !== hStr) selectedElementHeight.value = hStr
       })
       selectedElementResizeObserver.observe(dom)
       if (editableDom && isVertical) {
@@ -1432,18 +1447,20 @@ function getCubeShadingPaths(el: any) {
 function fitToScreen() {
   if (!viewportContainerRef.value) return
 
-  viewportWidth.value = viewportContainerRef.value.clientWidth
-  viewportHeight.value = viewportContainerRef.value.clientHeight
+  const cw = viewportContainerRef.value.clientWidth
+  const ch = viewportContainerRef.value.clientHeight
 
   const padding = 60
-  const containerWidth = viewportWidth.value - padding
-  const containerHeight = viewportHeight.value - padding
+  const scale = Math.min((cw - padding) / logicalWidth.value, (ch - padding) / logicalHeight.value)
+  const targetZoom = Math.max(20, Math.min(200, Math.round(scale * 100)))
 
-  const scaleX = containerWidth / logicalWidth.value
-  const scaleY = containerHeight / logicalHeight.value
+  // 守卫：容器尺寸与目标 zoom 都与现状一致时直接返回，
+  // 吃掉 window resize 与 viewport RO 的双触发/RO 风暴（用户手动缩放不受影响：zoomRatio≠target 时照常重适配）
+  if (cw === viewportWidth.value && ch === viewportHeight.value && targetZoom === zoomRatio.value) return
 
-  const scale = Math.min(scaleX, scaleY)
-  zoomRatio.value = Math.max(20, Math.min(200, Math.round(scale * 100)))
+  viewportWidth.value = cw
+  viewportHeight.value = ch
+  zoomRatio.value = targetZoom
   centerSlideInViewport()
 }
 
@@ -4126,6 +4143,27 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
   const isWPercent = wStr.endsWith('%')
   const isHPercent = hStr.endsWith('%')
 
+  // 纯数学快路径：非文本、非选中的元素，宽高都能从 style 纯算（%×基数 / px 字面量 / 无 width 归 200），
+  // 与下方 else 分支逐条等价，但零 DOM 读、零 offset* 强制布局
+  if (el.type !== 'text' && el.id !== selectedElementId.value && hStr && hStr !== 'auto' && (!wStr || !isNaN(parseFloat(wStr)))) {
+    const parentGroup = findParentGroup(el.id)
+    const baseDim = parentGroup ? getElementPixels(parentGroup) : { width: logicalWidth.value, height: logicalHeight.value }
+    const width = !wStr
+      ? 200
+      : (isWPercent ? (parseFloat(wStr) / 100) * baseDim.width : (parseFloat(wStr) || 200))
+    const height = isHPercent ? (parseFloat(hStr) / 100) * baseDim.height : (parseFloat(hStr) || 100)
+    return { width, height }
+  }
+
+  // 记忆化：同渲染批内模板会重复调用本函数，签名命中直接复用上次测量结果
+  const st = el.style || {}
+  const selW = el.id === selectedElementId.value ? selectedElementWidth.value : ''
+  const selH = el.id === selectedElementId.value ? selectedElementHeight.value : ''
+  const contentSig = typeof el.content === 'string' ? `${el.content.length}|${el.content.slice(0, 12)}|${el.content.slice(-12)}` : ''
+  const dimSig = `${el.type}|${wStr}|${hStr}|${el.width || 0}|${el.height || 0}|${contentSig}|${el.latex || ''}|${st.fontSize || ''}|${st.fontFamily || ''}|${st.fontWeight || ''}|${st.lineHeight || ''}|${st.letterSpacing || ''}|${st.writingMode || ''}|${st.whiteSpace || ''}|${st.padding || ''}|${el.autoFit?.type || ''}|${el.autoFit?.fontScale || 0}|${selW}|${selH}|${logicalWidth.value}|${logicalHeight.value}|${isDragging.value ? 1 : 0}|${isResizing.value ? 1 : 0}`
+  const dimCached = elementDimCache.get(el)
+  if (dimCached && dimCached.sig === dimSig) return dimCached.dims
+
   if (!isWPercent && !isHPercent && wStr && hStr && wStr !== 'auto' && hStr !== 'auto') {
     const w = parseFloat(wStr)
     const h = parseFloat(hStr)
@@ -4221,7 +4259,9 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
     }
   }
 
-  return { width, height }
+  const dims = { width, height }
+  elementDimCache.set(el, { sig: dimSig, dims })
+  return dims
 }
 
 // Helper to get element dimensions in logical canvas pixel space

package/src/components/Header.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, nextTick, defineAsyncComponent, watch } from 'vue'
 import Toolbar from './Toolbar.vue'
 import { useSlides } from '../composables/useSlides'
 import type JSZip from 'jszip'
@@ -13,12 +13,16 @@ import { parseColorString, extractTextAlignFromHtml, updateTextAlignInHtml, norm
 
 import { SHAPE_LIST as PPTX_SHAPE_LIST, SHAPE_PATH_FORMULAS as PPTX_SHAPE_PATH_FORMULAS } from '../utils/pptxShapes'
 import { inferElementTextType, type SlideTextType } from '../utils/textTypes'
-import { mockAIPptDsl } from '../utils/dslTemplate'
-import ShortcutsDialog from './ShortcutsDialog.vue'
+// 快捷键弹层异步化；mock DSL 模板(~77KB)改为触发时动态加载
+const ShortcutsDialog = defineAsyncComponent(() => import('./ShortcutsDialog.vue'))
 
 const { presentationTitle, exportSlides, importSlides, currentZipMeta, startPresentation, activeIndex, slides, notify, renderLatexToSvg, globalFontFamily, globalFontColor, globalThemeColor, themeSchemeFillMap, themeClrScheme, logicalWidth, logicalHeight, dslInputDialogVisible, aiPptDialogVisible, shortcutsDialogVisible, registerPPTParser, isMasterEditingView, enterMasterView, exitMasterView, zoomRatio, resetZoom, normalizeSlideBackground, getEffectiveMasterElementsForSlide, getEffectiveSlideBackground, uploadMediaResourcesInSlides, getCustomUploadHandler } = useSlides()
 import { sanitizeNbspInHtml, checkIsVertical } from '../composables/useSlides'
 
+// 快捷键弹层挂载闩锁：首次打开后保持挂载，异步 chunk 只加载一次
+const shortcutsOpened = ref(false)
+watch(shortcutsDialogVisible, v => { if (v) shortcutsOpened.value = true })
+
 function handleZoomCommand(command: string | number) {
   if (command === 'reset') {
     resetZoom()
@@ -73,9 +77,11 @@ const handleAIPPT = () => {
 }
 
 const handleLoadDsl = () => {
-  importSlides(JSON.parse(JSON.stringify(mockAIPptDsl)))
-  presentationTitle.value = 'AI-DSL 智能技术排版示例'
-  notify('成功导入 AI-DSL 演示幻灯片')
+  import('../utils/dslTemplate').then(m => {
+    importSlides(JSON.parse(JSON.stringify(m.mockAIPptDsl)))
+    presentationTitle.value = 'AI-DSL 智能技术排版示例'
+    notify('成功导入 AI-DSL 演示幻灯片')
+  })
 }
 
 const handleJVSPPTImport = () => {
@@ -7220,7 +7226,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
 <template>
   <header class="app-header">
     <!-- Left side: Hamburger menu + Title input -->
-    <div style="display: flex; align-items: center; gap: 12px">
+    <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0;">
       <!-- 外部左侧前置插槽 (例如返回按钮、Logo) -->
       <slot name="left-prefix" v-bind="headerContext"></slot>
 
@@ -7229,7 +7235,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
         <el-popover ref="menuPopoverRef" placement="bottom-start" :width="320" trigger="click"
         popper-style="padding: 0; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border: 1px solid #e2e8f0; background: #fff; overflow: hidden;">
         <template #reference>
-          <button class="btn-icon" style="padding: 4px; color: var(--text-primary)" data-tooltip="菜单">
+          <button class="btn-icon" style="padding: 4px; color: var(--text-primary); flex-shrink: 0;" data-tooltip="菜单">
             <svg class="icon" style="width: 18px; height: 18px" viewBox="0 0 24 24">
               <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
             </svg>
@@ -7372,17 +7378,18 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
           </div>
         </div>
       </el-popover>
-      <div class="presentation-title-container" style="display: flex; align-items: center; gap: 6px; margin-left: 8px;">
+      <div class="presentation-title-container" style="display: flex; align-items: center; gap: 6px; margin-left: 8px; flex-shrink: 0; min-width: 0; max-width: 280px;">
         <span v-if="!isEditingTitle" @click="startEditingTitle" class="presentation-title-text"
-          style="font-size: 15px; font-weight: 600; color: #0f172a; cursor: pointer; transition: color 0.15s ease;">
+          style="font-size: 15px; font-weight: 600; color: #0f172a; cursor: pointer; transition: color 0.15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 240px;"
+          :title="presentationTitle || '未命名演示文稿'">
           {{ presentationTitle || '未命名演示文稿' }}
         </span>
         <input v-else ref="titleInputRef" class="presentation-title-input-edit" v-model="presentationTitle"
           @blur="stopEditingTitle" @keyup.enter="stopEditingTitle"
-          style="font-size: 15px; font-weight: 600; color: #0f172a; border: 1px solid #3b82f6; border-radius: 6px; padding: 4px 8px; outline: none; background: #fff; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); width: 240px;" />
+          style="font-size: 15px; font-weight: 600; color: #0f172a; border: 1px solid #3b82f6; border-radius: 6px; padding: 4px 8px; outline: none; background: #fff; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); width: 200px;" />
         <svg v-if="!isEditingTitle" @click="startEditingTitle" viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-          style="width: 14px; height: 14px; color: #3b82f6; cursor: pointer; margin-left: 2px;">
+          style="width: 14px; height: 14px; color: #3b82f6; cursor: pointer; margin-left: 2px; flex-shrink: 0;">
           <path d="M12 20h9" />
           <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
         </svg>
@@ -7394,7 +7401,7 @@ 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: visible; position: relative; z-index: 10; margin: 0 12px;">
+    <div class="header-center-tools" :style="{ justifyContent: isMasterEditingView ? 'flex-start' : 'center' }" style="flex: 1; display: flex; align-items: center; overflow: hidden; min-width: 0; position: relative; z-index: 10; margin: 0 8px;">
       <!-- 外部中间工具栏插槽 (默认呈现内置 Toolbar，支持前置/后置插槽扩展或整栏替换) -->
       <slot name="center" v-bind="headerContext">
         <slot name="toolbar" v-bind="headerContext">
@@ -7411,7 +7418,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
     </div>
 
     <!-- Right side: Utility icons -->
-    <div style="display: flex; align-items: center; gap: 10px">
+    <div style="display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap;">
       <!-- 外部右侧前置插槽 -->
       <slot name="right-prefix" v-bind="headerContext"></slot>
 
@@ -7422,7 +7429,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
       <!-- Zoom Ratio Selector Dropdown -->
       <el-dropdown trigger="click" @command="handleZoomCommand">
         <div class="zoom-select-btn"
-          style="height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; color: #334155; cursor: pointer; background: #f1f5f9;">
+          style="height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; color: #334155; cursor: pointer; background: #f1f5f9; white-space: nowrap; flex-shrink: 0;">
           <span>{{ zoomRatio }}%</span>
           <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="#64748b" stroke-width="2.5">
             <path d="M6 9l6 6 6-6" />
@@ -7444,7 +7451,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
 
       <!-- Exit Master View Button (Placed right after Zoom Ratio Dropdown) -->
       <button v-if="isMasterEditingView" class="btn-exit-master" @click="exitMasterView()"
-        style="height: 32px; padding: 0 12px; border: 1px solid #fee2e2; border-radius: 6px; background: #fef2f2; color: #ef4444; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.15s ease;"
+        style="height: 32px; padding: 0 12px; border: 1px solid #fee2e2; border-radius: 6px; background: #fef2f2; color: #ef4444; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; flex-shrink: 0;"
         title="退出母版" data-tooltip="退出母版">
         <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#ef4444" stroke-width="2.2"
           stroke-linecap="round" stroke-linejoin="round">
@@ -7455,8 +7462,8 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
 
       <!-- Slide Master Mode Toggle Button -->
       <button v-if="!isMasterEditingView" class="btn-master-toggle" @click="enterMasterView()"
-        style="height: 32px; padding: 0 12px; border: none; border-radius: 6px; background: #f1f5f9; color: #334155; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; cursor: pointer;">
-        <svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
+        style="height: 32px; padding: 0 12px; border: none; border-radius: 6px; background: #f1f5f9; color: #334155; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; flex-shrink: 0;">
+        <svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor" style="flex-shrink: 0;">
           <use xlink:href="#icon-muban"></use>
         </svg>
         <span>母版</span>
@@ -7465,7 +7472,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
       <!-- Presentation Mode Split Button -->
       <div v-if="!isMasterEditingView" class="presentation-split-btn">
         <button class="presentation-main-btn" @click="startFromBeginning" title="从头开始放映 (F5)">
-          <svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
+          <svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor" style="flex-shrink: 0;">
             <use xlink:href="#icon-huandengpianfangying"></use>
           </svg>
           <span>幻灯片放映</span>
@@ -7513,7 +7520,7 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
     </div>
 
     <!-- Shortcuts Dialog Modal -->
-    <ShortcutsDialog v-model:visible="shortcutsDialogVisible" />
+    <ShortcutsDialog v-if="shortcutsOpened" v-model:visible="shortcutsDialogVisible" />
   </header>
 
   <teleport to="body">
@@ -7746,6 +7753,8 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
   color: #3b82f6;
   transition: all 0.15s ease;
   box-sizing: border-box;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .presentation-split-btn:hover {
@@ -7767,6 +7776,8 @@ const importPptxArrayBuffer = async (buffer: ArrayBuffer, fileName?: string): Pr
   cursor: pointer;
   transition: background-color 0.15s ease;
   border-radius: 5px 0 0 5px;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .presentation-main-btn:hover {