jvs-ppt-ui 0.0.7 → 0.0.9

package/src/composables/useSlides.ts

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick, type WatchStopHandle } from 'vue'
 import { extractAnimationsFromPptxArrayBuffer } from '../utils/pptxAnimationExtractor'
 import { syncSlideConnections, scaleSvgPath, extractPathStartEnd, isEllipseShape, isStandardShapeType } from '../utils/line'
 import { getSvgPathRange } from '../utils/svgPathParser'
@@ -1737,6 +1737,11 @@ function applyStyleRecipeToMaster(
     globalBgColor.value = recipe.backgroundColor
   }
 
+  // 同 tick 多母版变更 + 急切快照：pre-flush watcher 尚未排空，显式标脏目标母版
+  targetMasters.forEach(m => {
+    const i = slideMasters.value.indexOf(m)
+    if (i >= 0) dirtyMasterIndexes.add(i)
+  })
   addMasterHistorySnapshot()
   notify(isAll ? `已应用主题「${recipe.name}」到全部母版` : `已应用主题「${recipe.name}」到当前母版`)
 }
@@ -1848,6 +1853,8 @@ function applyStyleRecipeToSlides(
     globalThemeColor.value = [...recipe.styleColors]
   }
 
+  // 同 tick 多页变更 + 急切快照：非 single 模式涉及多页，显式全量标脏（字符串比对会自动去重）
+  if (effectiveMode !== 'single') markAllPagesDirty()
   addHistorySnapshot()
   if (effectiveMode === 'all') {
     notify(`已应用主题「${recipe.name}」到全部幻灯片与母版`)
@@ -2495,20 +2502,84 @@ function notify(msg: string) {
   }, 2500)
 }
 
-// 历史栈只存 slides 的 JSON 字符串；每条快照对应的激活页记录在平行数组中，
-// 翻页时只更新一个数字，不再对整册快照做 parse + stringify
-const historyStack = ref<string[]>([])
+// 历史栈按页存 JSON 字符串：每条快照是 string[]（每页一条），未变页的字符串引用跨快照共享，
+// 编辑只序列化脏页、撤销只解析变更页；每条快照对应的激活页仍记在平行数组中，翻页只改一个数字
+const historyStack = ref<string[][]>([])
 const historyIndex = ref(-1)
 const isUndoingRedoing = ref(false)
 let historyActiveIndexes: number[] = []
 
-const masterHistoryStack = ref<string[]>([])
+const masterHistoryStack = ref<string[][]>([])
 const masterHistoryIndex = ref(-1)
-let lastSnapshotMastersStr = ''
 // 母版栈同理：激活的母版/版式 id 记在平行数组，切换母版不触发整册重序列化
 let masterHistoryActiveMids: string[] = []
 let masterHistoryActiveLids: string[] = []
 
+// --- 按页脏跟踪（slides 与 slideMasters 各一套） ---
+let pageWatchers: WatchStopHandle[] = []
+const dirtyPageIndexes = new Set<number>()
+let currentPageStrs: string[] = []              // 最近一次落盘的每页字符串（与栈内条目按引用共享）
+let currentPageIds: (string | undefined)[] = [] // 最近一次落盘的每页 id，用于重排漏检兜底
+
+let masterWatchers: WatchStopHandle[] = []
+const dirtyMasterIndexes = new Set<number>()
+let currentMasterStrs: string[] = []
+let currentMasterIds: (string | undefined)[] = []
+
+// --- 资源池：data URL 大字符串 intern 成短 id，避免随每条快照重复拷贝 ---
+// 池只在 initHistory 清空（届时双栈同时重置，不会留下悬空 id）；slides 与 masters 共用
+const assetPool = new Map<string, string>()   // id -> 原始 data URL
+const assetIntern = new Map<string, string>() // 原始 data URL -> id
+let assetSeq = 0
+
+const ASSET_MIN_LEN = 1024
+
+function assetReplacer(_k: string, v: any): any {
+  if (typeof v === 'string' && v.length >= ASSET_MIN_LEN && v.charCodeAt(0) === 100 && v.startsWith('data:')) {
+    let id = assetIntern.get(v)
+    if (id === undefined) {
+      assetSeq += 1
+      id = `@@JVSAsset:${assetSeq}@@`
+      assetIntern.set(v, id)
+      assetPool.set(id, v)
+    }
+    return id
+  }
+  return v
+}
+
+function assetReviver(_k: string, v: any): any {
+  if (typeof v === 'string' && v.length <= 32 && v.charCodeAt(0) === 64) {
+    const hit = assetPool.get(v)
+    if (hit !== undefined) return hit
+  }
+  return v
+}
+
+function serializePage(page: any): string {
+  return JSON.stringify(page, assetReplacer)
+}
+
+function parsePage<T>(s: string): T {
+  return JSON.parse(s, assetReviver) as T
+}
+
+function markAllPagesDirty() {
+  for (let i = 0; i < slides.value.length; i++) dirtyPageIndexes.add(i)
+}
+
+// 递归释放元素（含组合内子元素）的 blob: URL，防止导入替换后组内媒体泄漏
+function revokeElementBlobUrls(el: any) {
+  if (!el) return
+  if (Array.isArray(el.elements)) {
+    for (const child of el.elements) revokeElementBlobUrls(child)
+  }
+  const src = el.src || el.content
+  if (typeof src === 'string' && src.startsWith('blob:')) {
+    try { URL.revokeObjectURL(src) } catch (e) {}
+  }
+}
+
 function revokeSlideBlobUrls(slideList: any[]) {
   if (!slideList || !Array.isArray(slideList)) return
   for (const slide of slideList) {
@@ -2526,35 +2597,40 @@ function revokeSlideBlobUrls(slideList: any[]) {
     }
     if (slide.elements && Array.isArray(slide.elements)) {
       for (const el of slide.elements) {
-        if (!el) continue
-        const src = el.src || el.content
-        if (typeof src === 'string' && src.startsWith('blob:')) {
-          try { URL.revokeObjectURL(src) } catch (e) {}
-        }
+        revokeElementBlobUrls(el)
       }
     }
   }
 }
 
 function initHistory() {
-  const slidesStr = JSON.stringify(slides.value)
-  historyStack.value = [slidesStr]
+  ensurePageWatchers()
+  ensureMasterWatchers()
+  // 双栈即将整体重置，此时清资源池是安全的（不会有存活条目引用池内 id）
+  assetPool.clear()
+  assetIntern.clear()
+  assetSeq = 0
+  dirtyPageIndexes.clear()
+  dirtyMasterIndexes.clear()
+
+  if (import.meta.env.DEV) console.debug(`[perf:initHistory] pages=${slides.value.length} masters=${slideMasters.value.length}`)
+
+  currentPageStrs = slides.value.map(serializePage)
+  currentPageIds = slides.value.map(s => s && s.id)
+  historyStack.value = [currentPageStrs.slice()]
   historyActiveIndexes = [activeIndex.value]
   historyIndex.value = 0
-  lastSnapshotSlidesStr = slidesStr
 
   // 母版历史独立初始化（导入/重置演示文稿时同样清空）
-  const mastersStr = JSON.stringify(slideMasters.value)
-  masterHistoryStack.value = [mastersStr]
+  currentMasterStrs = slideMasters.value.map(serializePage)
+  currentMasterIds = slideMasters.value.map(m => m && m.id)
+  masterHistoryStack.value = [currentMasterStrs.slice()]
   masterHistoryActiveMids = [activeMasterId.value || '']
   masterHistoryActiveLids = [activeLayoutId.value || '']
   masterHistoryIndex.value = 0
-  lastSnapshotMastersStr = mastersStr
   activeSlideVersion.value++
 }
 
-let lastSnapshotSlidesStr = ''
-
 function syncActiveEditingTextToElement() {
   if (typeof document === 'undefined' || !slides.value) return
   const curSlide = slides.value[activeIndex.value]
@@ -2565,8 +2641,11 @@ function syncActiveEditingTextToElement() {
       if (container && (!el.content || !el.content.includes('<table'))) {
         const htmlVal = container.innerHTML
         if (el.type === 'shape') {
-          el.text = htmlVal
-        } else {
+          // 空 DOM 抓到 '' 时不能给无文本 shape 制造 text:"" 新键：
+          // 语义等价但字符串不等，会被当作变更推入幽灵快照，导致 undo 永远撤不到底
+          const isEmptyNoop = htmlVal === '' && !el.text
+          if (!isEmptyNoop && el.text !== htmlVal) el.text = htmlVal
+        } else if (el.content !== htmlVal) {
           el.content = htmlVal
         }
       }
@@ -2594,19 +2673,47 @@ function syncDOMWithRestoredSlides() {
 function addHistorySnapshot() {
   if (isUndoingRedoing.value || pauseHistory.value) return
   syncActiveEditingTextToElement()
-  const currentSlidesStr = JSON.stringify(slides.value)
-  if (currentSlidesStr === lastSnapshotSlidesStr) {
+  ensurePageWatchers()
+
+  const __perfT0 = performance.now()
+  const n = slides.value.length
+  // 结构性变化（增删页/watcher 数漂移）时全量比对；否则只比对候选脏页
+  const structural = n !== currentPageStrs.length || pageWatchers.length !== n
+  const candidates: Set<number> = new Set(structural ? undefined : dirtyPageIndexes)
+  if (!structural) {
+    // 同 tick 内先改数据再急切调用 addHistorySnapshot 的调用点全部只动当前页，标当前页兜底
+    candidates.add(activeIndex.value)
+    // id 错位说明发生过 watcher 覆盖不到的重排/对调，把这些页也纳入比对
+    for (let i = 0; i < n; i++) {
+      if (slides.value[i]?.id !== currentPageIds[i]) candidates.add(i)
+    }
+  } else {
+    for (let i = 0; i < n; i++) candidates.add(i)
+  }
+
+  let changed = false
+  for (const i of candidates) {
+    const s = serializePage(slides.value[i])
+    if (s !== currentPageStrs[i]) {
+      currentPageStrs[i] = s
+      changed = true
+    }
+  }
+  currentPageStrs.length = n
+  dirtyPageIndexes.clear()
+
+  if (!changed) {
+    if (import.meta.env.DEV) console.debug(`[perf:addSnapshot-dedup] ${(performance.now() - __perfT0).toFixed(1)}ms pages=${slides.value.length} dirty=${candidates.size}`)
     return
   }
-  lastSnapshotSlidesStr = currentSlidesStr
 
   if (historyIndex.value >= 0) {
     historyStack.value = historyStack.value.slice(0, historyIndex.value + 1)
     historyActiveIndexes = historyActiveIndexes.slice(0, historyIndex.value + 1)
   }
 
-  // 零拷贝优化：直接合成快照字符串，避免反序列化为海量对象后再重新序列化的巨大内存与CPU开销
-  historyStack.value.push(currentSlidesStr)
+  // 未变页的字符串引用跨快照共享（string 不可变，零拷贝）
+  historyStack.value.push(currentPageStrs.slice())
   historyActiveIndexes.push(activeIndex.value)
 
   if (historyStack.value.length > 15) {
@@ -2615,20 +2722,48 @@ function addHistorySnapshot() {
   }
 
   historyIndex.value = historyStack.value.length - 1
+  currentPageIds = slides.value.map(s => s && s.id)
+  if (import.meta.env.DEV) {
+    console.debug(`[perf:addSnapshot] ${(performance.now() - __perfT0).toFixed(1)}ms pages=${slides.value.length} dirty=${candidates.size} stack=${historyStack.value.length}`)
+    // 漏标脏页保险丝：未纳入候选集的页应与落盘字符串完全一致，不一致说明脏标漏页（仅 DEV）
+    const __bad = slides.value.findIndex((s: any, i: number) => !candidates.has(i) && serializePage(s) !== currentPageStrs[i])
+    if (__bad >= 0) console.error(`[history-parity] 第 ${__bad} 页未被标脏但内容已变化：存在漏标脏页！`)
+  }
 }
 
 function addMasterHistorySnapshot() {
   if (isUndoingRedoing.value || pauseHistory.value) return
-  const currentMastersStr = JSON.stringify(slideMasters.value)
-  if (currentMastersStr === lastSnapshotMastersStr) {
-    return
+  ensureMasterWatchers()
+
+  const n = slideMasters.value.length
+  const structural = n !== currentMasterStrs.length || masterWatchers.length !== n
+  const candidates: Set<number> = new Set(structural ? undefined : dirtyMasterIndexes)
+  if (!structural) {
+    const activeIdx = slideMasters.value.findIndex(m => m.id === activeMasterId.value)
+    if (activeIdx >= 0) candidates.add(activeIdx)
+    for (let i = 0; i < n; i++) {
+      if (slideMasters.value[i]?.id !== currentMasterIds[i]) candidates.add(i)
+    }
+  } else {
+    for (let i = 0; i < n; i++) candidates.add(i)
+  }
+
+  let changed = false
+  for (const i of candidates) {
+    const s = serializePage(slideMasters.value[i])
+    if (s !== currentMasterStrs[i]) {
+      currentMasterStrs[i] = s
+      changed = true
+    }
   }
-  lastSnapshotMastersStr = currentMastersStr
+  currentMasterStrs.length = n
+  dirtyMasterIndexes.clear()
+  if (!changed) return
 
   masterHistoryStack.value = masterHistoryStack.value.slice(0, masterHistoryIndex.value + 1)
   masterHistoryActiveMids = masterHistoryActiveMids.slice(0, masterHistoryIndex.value + 1)
   masterHistoryActiveLids = masterHistoryActiveLids.slice(0, masterHistoryIndex.value + 1)
-  masterHistoryStack.value.push(currentMastersStr)
+  masterHistoryStack.value.push(currentMasterStrs.slice())
   masterHistoryActiveMids.push(activeMasterId.value || '')
   masterHistoryActiveLids.push(activeLayoutId.value || '')
 
@@ -2639,6 +2774,7 @@ function addMasterHistorySnapshot() {
   }
 
   masterHistoryIndex.value = masterHistoryStack.value.length - 1
+  currentMasterIds = slideMasters.value.map(m => m && m.id)
 }
 
 let historySnapshotTimer: any = null
@@ -2664,9 +2800,28 @@ function scheduleHistorySnapshot() {
   }, 350)
 }
 
-watch(slides, () => {
+// 每页一个 deep watcher：任何页的任何深层变更只标脏自己那一页（替代原整册 deep watch）。
+// 标脏不受守卫限制（守卫只作用于 flush），pauseHistory/撤销期间产生的标记靠下次 flush 的字符串比对自愈
+function ensurePageWatchers() {
+  const n = slides.value.length
+  while (pageWatchers.length > n) pageWatchers.pop()!()
+  while (pageWatchers.length < n) {
+    const i = pageWatchers.length
+    pageWatchers.push(watch(() => slides.value[i], () => {
+      // undo/redo 整体替换数组会触发全部页 watcher（deep 回调不比较新旧值），全是假阳性；
+      // 此窗口内还原路径已同步 currentPageStrs，无需标脏。watcher 回调先于 nextTick 复位执行，守卫可靠
+      if (isUndoingRedoing.value) return
+      dirtyPageIndexes.add(i)
+      scheduleHistorySnapshot()
+    }, { deep: true }))
+  }
+}
+
+// 长度哨兵：纯尾部追加（末页后 addSlide）不触发任何 index getter，必须靠它补注册 watcher
+watch(() => slides.value.length, () => {
+  ensurePageWatchers()
   scheduleHistorySnapshot()
-}, { deep: true })
+})
 
 watch(activeIndex, (newIdx) => {
   if (isUndoingRedoing.value) return
@@ -2698,9 +2853,23 @@ function scheduleMasterHistorySnapshot() {
   }, 350)
 }
 
-watch(slideMasters, () => {
+function ensureMasterWatchers() {
+  const n = slideMasters.value.length
+  while (masterWatchers.length > n) masterWatchers.pop()!()
+  while (masterWatchers.length < n) {
+    const i = masterWatchers.length
+    masterWatchers.push(watch(() => slideMasters.value[i], () => {
+      if (isUndoingRedoing.value) return
+      dirtyMasterIndexes.add(i)
+      scheduleMasterHistorySnapshot()
+    }, { deep: true }))
+  }
+}
+
+watch(() => slideMasters.value.length, () => {
+  ensureMasterWatchers()
   scheduleMasterHistorySnapshot()
-}, { deep: true })
+})
 
 // 切换母版/版式只更新栈顶快照的激活状态（与 activeIndex 同理），不产生新历史记录
 watch([activeMasterId, activeLayoutId], ([mid, lid]) => {
@@ -2746,18 +2915,39 @@ const canRedo = computed(() => isMasterEditingView.value
   ? masterHistoryIndex.value < masterHistoryStack.value.length - 1
   : historyIndex.value < historyStack.value.length - 1)
 
+// 按页还原：只解析与当前状态字符串不同的页，未变页对象引用复用（缩略图/组件 vnode 稳定）。
+// 始终返回新数组：依赖 slides.value 数组 identity 的 watcher（缩略图测量/滚动重置等）照常触发
+function applyHistoryEntry<T>(entryStrs: string[], currentStrs: string[], list: T[]): { list: T[]; changed: boolean } {
+  if (entryStrs.length !== list.length || entryStrs.length !== currentStrs.length) {
+    // 结构性差异（增删页）：与旧行为一致，整册逐页解析
+    return { list: entryStrs.map(s => parsePage<T>(s)), changed: true }
+  }
+  let changed = false
+  const next = list.map((page, i) => {
+    if (entryStrs[i] === currentStrs[i]) return page
+    changed = true
+    return parsePage<T>(entryStrs[i])
+  })
+  return { list: next, changed }
+}
+
 function undo() {
   if (isMasterEditingView.value) {
     // 先落盘防抖中的快照：编辑后 350ms 内撤销不再丢最后一步编辑
     flushPendingMasterHistorySnapshot()
     if (masterHistoryIndex.value > 0) {
+      const __perfT0 = performance.now()
       isUndoingRedoing.value = true
       masterHistoryIndex.value--
-      slideMasters.value = JSON.parse(masterHistoryStack.value[masterHistoryIndex.value]) as SlideMaster[]
+      const entry = masterHistoryStack.value[masterHistoryIndex.value]
+      slideMasters.value = applyHistoryEntry<SlideMaster>(entry, currentMasterStrs, slideMasters.value).list
+      currentMasterStrs = entry.slice()
+      currentMasterIds = slideMasters.value.map(m => m && m.id)
       activeMasterId.value = masterHistoryActiveMids[masterHistoryIndex.value]
       activeLayoutId.value = masterHistoryActiveLids[masterHistoryIndex.value]
       selectedElementId.value = null
       selectedElementIds.value = []
+      if (import.meta.env.DEV) console.debug(`[perf:undo-master] patch ${(performance.now() - __perfT0).toFixed(1)}ms masters=${slideMasters.value.length}`)
       notify('已撤销')
       nextTick(() => {
         isUndoingRedoing.value = false
@@ -2770,14 +2960,19 @@ function undo() {
   // 先落盘防抖中的快照：编辑后 350ms 内撤销不再丢最后一步编辑
   flushPendingHistorySnapshot()
   if (canUndo.value) {
+    const __perfT0 = performance.now()
     isUndoingRedoing.value = true
     historyIndex.value--
-    slides.value = JSON.parse(historyStack.value[historyIndex.value]) as Slide[]
+    const entry = historyStack.value[historyIndex.value]
+    slides.value = applyHistoryEntry<Slide>(entry, currentPageStrs, slides.value).list
+    currentPageStrs = entry.slice()
+    currentPageIds = slides.value.map(s => s && s.id)
     activeIndex.value = historyActiveIndexes[historyIndex.value]
     selectedElementId.value = null
     selectedElementIds.value = []
     syncDOMWithRestoredSlides()
     activeSlideVersion.value++
+    if (import.meta.env.DEV) console.debug(`[perf:undo] patch ${(performance.now() - __perfT0).toFixed(1)}ms pages=${slides.value.length}`)
     notify('已撤销')
     nextTick(() => {
       isUndoingRedoing.value = false
@@ -2791,15 +2986,20 @@ function redo() {
   if (isMasterEditingView.value) {
     flushPendingMasterHistorySnapshot()
     if (masterHistoryIndex.value < masterHistoryStack.value.length - 1) {
+      const __perfT0 = performance.now()
       isUndoingRedoing.value = true
       masterHistoryIndex.value++
-      slideMasters.value = JSON.parse(masterHistoryStack.value[masterHistoryIndex.value]) as SlideMaster[]
+      const entry = masterHistoryStack.value[masterHistoryIndex.value]
+      slideMasters.value = applyHistoryEntry<SlideMaster>(entry, currentMasterStrs, slideMasters.value).list
+      currentMasterStrs = entry.slice()
+      currentMasterIds = slideMasters.value.map(m => m && m.id)
       activeMasterId.value = masterHistoryActiveMids[masterHistoryIndex.value]
       activeLayoutId.value = masterHistoryActiveLids[masterHistoryIndex.value]
       selectedElementId.value = null
       selectedElementIds.value = []
       syncDOMWithRestoredSlides()
       activeSlideVersion.value++
+      if (import.meta.env.DEV) console.debug(`[perf:redo-master] patch ${(performance.now() - __perfT0).toFixed(1)}ms masters=${slideMasters.value.length}`)
       notify('已重做')
       nextTick(() => {
         isUndoingRedoing.value = false
@@ -2811,14 +3011,19 @@ function redo() {
   }
   flushPendingHistorySnapshot()
   if (canRedo.value) {
+    const __perfT0 = performance.now()
     isUndoingRedoing.value = true
     historyIndex.value++
-    slides.value = JSON.parse(historyStack.value[historyIndex.value]) as Slide[]
+    const entry = historyStack.value[historyIndex.value]
+    slides.value = applyHistoryEntry<Slide>(entry, currentPageStrs, slides.value).list
+    currentPageStrs = entry.slice()
+    currentPageIds = slides.value.map(s => s && s.id)
     activeIndex.value = historyActiveIndexes[historyIndex.value]
     selectedElementId.value = null
     selectedElementIds.value = []
     syncDOMWithRestoredSlides()
     activeSlideVersion.value++
+    if (import.meta.env.DEV) console.debug(`[perf:redo] patch ${(performance.now() - __perfT0).toFixed(1)}ms pages=${slides.value.length}`)
     notify('已重做')
     nextTick(() => {
       isUndoingRedoing.value = false

package/src/index.ts

@@ -4,7 +4,8 @@ import jvsPickerColorV3 from 'jvs-picker-color-v3'
 import PptEditor from './components/PptEditor.vue'
 import { useSlides } from './composables/useSlides'
 
-// 自动打入所有依赖样式，合并至 dist/lib/style.css，宿主无需额外引入 element-plus 样式
+// 自动打入所有依赖样式与图标库，宿主无需在 index.html 额外引入 iconfont 或 element-plus 样式
+import './assets/iconfont/iconfont.js'
 import 'element-plus/dist/index.css'
 import 'jvs-picker-color-v3/lib/jvs-picker-color-v3.css'
 import 'animate.css'

package/src/types/index.ts

@@ -92,6 +92,8 @@ export type CustomUploadHandler = (
 export interface PptEditorConfig {
   /** 演示文稿初始标题 */
   title?: string
+  /** 是否显示左上角主菜单按钮（导入/导出/快捷键等弹窗菜单），默认为 true */
+  showMenu?: boolean
   /** 是否启用 AI PPT 智能生成与一键美化功能。未配置或为 false 时不显示一键美化功能 */
   enableAi?: boolean
   /** AI 一键美化请求接口地址。如果未配置或未开启，则不显示一键美化功能 */
@@ -138,6 +140,8 @@ export interface PptEditorProps {
   readonly?: boolean
   /** 是否显示顶部导航与工具栏 */
   showHeader?: boolean
+  /** 是否显示左上角主菜单按钮（导入/导出/快捷键等弹窗菜单），默认为 true */
+  showMenu?: boolean
   /** 是否显示左侧缩略图导航栏 */
   showSidebarLeft?: boolean
   /** 是否显示右侧属性面板 */