jvs-ppt-ui 0.0.7 → 0.0.9

package/src/components/PptEditor.vue

@@ -1,1005 +1,1047 @@
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, nextTick, useSlots, getCurrentInstance } from 'vue'
-import jvsPickerColorV3 from 'jvs-picker-color-v3'
-import { saveAs } from 'file-saver'
-import Header from './Header.vue'
-import Toolbar from './Toolbar.vue'
-import SidebarLeft from './SidebarLeft.vue'
-import CanvasArea from './CanvasArea.vue'
-import SidebarRight from './SidebarRight.vue'
-import PresentationMode from './PresentationMode.vue'
-import ToastNotification from './ToastNotification.vue'
-import FormulaDialog from './FormulaDialog.vue'
-import DslInputDialog from './DslInputDialog.vue'
-import AIPptDialog from './AIPptDialog.vue'
-import UnsplashImageDialog from './UnsplashImageDialog.vue'
-
-// 自动检测并兼容单组件 import { PptEditor } 局部引用的场景（若宿主未调用 app.use(JvsPptUi) 则静默自动装配）
-// Element Plus 组件已由构建期按需解析（unplugin-vue-components），无需运行时全局注册
-const currentApp = getCurrentInstance()?.appContext?.app
-if (currentApp) {
-  const registeredComponents = currentApp._context?.components || {}
-  if (!registeredComponents['jvs-picker-color-v3']) {
-    currentApp.use(jvsPickerColorV3)
-  }
-}
-
-import { useSlides } from '../composables/useSlides'
-import type { Slide, SlideMaster, DeckData, PptEditorProps, PptEditorApi, SaveOptions, LoadSourceOptions, LoadSourceResult } from '../types'
-
-const props = withDefaults(defineProps<PptEditorProps>(), {
-  modelValue: null,
-  readonly: false,
-  showHeader: true,
-  showSidebarLeft: true,
-  showSidebarRight: true,
-  enableMcp: false,
-  enableAi: undefined,
-  aiApiUrl: '',
-  aiHeaders: () => ({}),
-  enableMaterial: undefined,
-  materialApiUrl: '',
-  materialListApiUrl: '',
-  materialTreeApiUrl: '',
-  materialPageApiUrl: '',
-  materialTypeApiUrl: '',
-  materialSaveApiUrl: '',
-  materialHeaders: () => ({}),
-  config: () => ({})
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: DeckData | Slide[]): void
-  (e: 'change', payload: { slides: Slide[]; activeIndex: number; title: string }): void
-  (e: 'save', payload: any): void
-  (e: 'load', payload: LoadSourceResult): void
-  (e: 'export', payload: { format: string; title: string; data?: any }): void
-  (e: 'slideChange', payload: { index: number; slide: Slide | null }): void
-  (e: 'ready', api: PptEditorApi): void
-}>()
-
-const slidesState = useSlides()
-const {
-  slides,
-  activeIndex,
-  activeSlide,
-  presentationTitle,
-  slideMasters,
-  themeClrScheme,
-  slideRatio,
-  slideHeight,
-  logicalWidth,
-  logicalHeight,
-  formulaDialogVisible,
-  dslInputDialogVisible,
-  aiPptDialogVisible,
-  importSlides,
-  exportSlides,
-  currentEditingFormulaEl,
-  addElement,
-  notify,
-  activeTab,
-  undo,
-  redo,
-  canUndo,
-  canRedo,
-  addSlide,
-  deleteSlide,
-  selectSlide,
-  startPresentation,
-  stopPresentation,
-  zoomIn,
-  zoomOut,
-  resetZoom,
-  setAiConfig,
-  isAiBeautifyEnabled,
-  setMaterialConfig,
-  isMaterialEnabled,
-  saveCurrentSlideToMaterial,
-  isCanvasDragging,
-  pauseHistory,
-  setCustomUploadHandler,
-  getCustomUploadHandler,
-  uploadMediaResourcesInSlides
-} = slidesState
-
-// 标志位：防止外部 v-model 变化与内部 watch 产生互相覆盖的回环
-let isInternalUpdating = false
-let lastEmittedModelValue: any = null
-
-// 监听外部传入的 AI 相关配置（优先 props，次选 config 对象）
-watch(
-  [
-    () => props.aiApiUrl,
-    () => props.config?.aiApiUrl,
-    () => props.enableAi,
-    () => props.config?.enableAi,
-    () => props.aiHeaders,
-    () => props.config?.aiHeaders
-  ],
-  () => {
-    const url = props.aiApiUrl || props.config?.aiApiUrl || ''
-    const headers = { ...(props.config?.aiHeaders || {}), ...(props.aiHeaders || {}) }
-    // 若显式传入 enableAi，则以其为准；若传了 url 则开启；未指定时保留 undefined 触发默认策略
-    const rawEnabled = props.enableAi !== undefined ? props.enableAi : props.config?.enableAi
-    const enabled = rawEnabled !== undefined ? rawEnabled : (url ? true : undefined)
-    setAiConfig({ apiUrl: url, headers, enable: enabled })
-  },
-  { immediate: true, deep: true }
-)
-
-// 监听外部传入的素材库相关配置（优先 props，次选 config 对象）
-watch(
-  [
-    () => props.materialApiUrl,
-    () => props.config?.materialApiUrl,
-    () => props.materialListApiUrl,
-    () => props.config?.materialListApiUrl,
-    () => props.materialTreeApiUrl,
-    () => props.config?.materialTreeApiUrl,
-    () => props.materialPageApiUrl,
-    () => props.config?.materialPageApiUrl,
-    () => props.materialTypeApiUrl,
-    () => props.config?.materialTypeApiUrl,
-    () => props.materialSaveApiUrl,
-    () => props.config?.materialSaveApiUrl,
-    () => props.enableMaterial,
-    () => props.config?.enableMaterial,
-    () => props.materialHeaders,
-    () => props.config?.materialHeaders
-  ],
-  () => {
-    const listUrl = props.materialListApiUrl || props.config?.materialListApiUrl || props.materialApiUrl || props.config?.materialApiUrl || ''
-    const treeUrl = props.materialTreeApiUrl || props.config?.materialTreeApiUrl || listUrl || ''
-    const pageUrl = props.materialPageApiUrl || props.config?.materialPageApiUrl || ''
-    const typeUrl = props.materialTypeApiUrl || props.config?.materialTypeApiUrl || ''
-    const saveUrl = props.materialSaveApiUrl || props.config?.materialSaveApiUrl || ''
-    const headers = { ...(props.config?.materialHeaders || {}), ...(props.materialHeaders || {}) }
-    // 只要配置了获取内容的 API，且未显式关闭，就展示并激活素材功能
-    const rawEnabled = props.enableMaterial !== undefined ? props.enableMaterial : props.config?.enableMaterial
-    const enabled = rawEnabled !== undefined ? rawEnabled : ((treeUrl || pageUrl || listUrl) ? true : undefined)
-    setMaterialConfig({
-      listApiUrl: listUrl,
-      apiUrl: listUrl,
-      treeApiUrl: treeUrl,
-      pageApiUrl: pageUrl,
-      typeApiUrl: typeUrl,
-      saveApiUrl: saveUrl,
-      headers,
-      enable: enabled
-    })
-  },
-  { immediate: true, deep: true }
-)
-
-// 监听外部传入的自定义资源上传函数（优先 props，次选 config 对象）
-watch(
-  [
-    () => props.customUpload,
-    () => props.uploadHandler,
-    () => props.config?.customUpload,
-    () => props.config?.uploadHandler
-  ],
-  () => {
-    const handler = props.customUpload || props.uploadHandler || props.config?.customUpload || props.config?.uploadHandler || null
-    setCustomUploadHandler(handler)
-  },
-  { immediate: true }
-)
-
-// 初始化标题
-if (props.config?.title) {
-  presentationTitle.value = props.config.title
-}
-
-// 获取当前完整 Deck 工程数据
-function getDeck(): DeckData {
-  return {
-    title: presentationTitle.value || '未命名演示文稿',
-    slides: JSON.parse(JSON.stringify(slides.value || [])),
-    slideMasters: JSON.parse(JSON.stringify(slideMasters.value || [])),
-    themeClrScheme: themeClrScheme.value,
-    slideRatio: slideRatio.value,
-    slideHeight: slideHeight.value,
-    logicalWidth: logicalWidth.value,
-    logicalHeight: logicalHeight.value
-  }
-}
-
-// 获取幻灯片列表
-function getSlides(): Slide[] {
-  return JSON.parse(JSON.stringify(slides.value || []))
-}
-
-// 设置/替换当前幻灯片列表
-function setSlides(newSlides: Slide[]) {
-  if (!newSlides || !Array.isArray(newSlides)) return
-  isInternalUpdating = true
-  importSlides(newSlides)
-  nextTick(() => {
-    isInternalUpdating = false
-  })
-}
-
-// 加载完整 Deck 工程数据
-function loadDeck(deck: DeckData | Slide[]) {
-  if (!deck) return
-  isInternalUpdating = true
-  if (Array.isArray(deck)) {
-    importSlides(deck)
-  } else {
-    if (deck.title) {
-      presentationTitle.value = deck.title
-    }
-    if (deck.slideMasters && Array.isArray(deck.slideMasters)) {
-      slideMasters.value = deck.slideMasters
-    }
-    if (deck.slides && Array.isArray(deck.slides)) {
-      importSlides(deck.slides)
-    }
-  }
-  nextTick(() => {
-    isInternalUpdating = false
-  })
-}
-
-const headerRef = ref<any>(null)
-
-/**
- * 直接获取 JSON 格式的 Blob 对象
- */
-function getSaveJsonBlob(): Blob {
-  const deck = getDeck()
-  return new Blob([JSON.stringify(deck, null, 2)], { type: 'application/json' })
-}
-
-/**
- * 直接获取带文件名的 JSON File 对象
- */
-function getSaveJsonFile(filename?: string): File {
-  const blob = getSaveJsonBlob()
-  const name = `${filename || presentationTitle.value || 'presentation'}.json`
-  return new File([blob], name, { type: 'application/json' })
-}
-
-/**
- * 异步生成并获取可编辑的 PPTX 二进制 Blob 对象
- */
-async function getSavePptxBlob(): Promise<Blob | null> {
-  if (headerRef.value?.generatePptxBlob) {
-    return await headerRef.value.generatePptxBlob()
-  }
-  return null
-}
-
-/**
- * 异步生成并获取带文件名的 PPTX File 对象
- */
-async function getSavePptxFile(filename?: string): Promise<File | null> {
-  const blob = await getSavePptxBlob()
-  if (!blob) return null
-  const name = `${filename || presentationTitle.value || 'presentation'}.pptx`
-  return new File([blob], name, {
-    type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
-  })
-}
-
-/**
- * 核心保存 API：供外部使用方直接调用获取保存内容
- * @param options 保存配置
- * @returns 对应格式的内容 (DeckData | Blob | File)
- */
-async function save(options?: SaveOptions): Promise<any> {
-  const format = options?.format || 'json'
-  const customName = options?.filename || presentationTitle.value || 'presentation'
-  const currentDeck = getDeck()
-
-  let result: any = null
-
-  if (format === 'json' || format === 'deck') {
-    result = currentDeck
-    if (options?.autoDownload) {
-      const blob = getSaveJsonBlob()
-      saveAs(blob, `${customName}.json`)
-    }
-  } else if (format === 'json-blob') {
-    result = getSaveJsonBlob()
-    if (options?.autoDownload) {
-      saveAs(result, `${customName}.json`)
-    }
-  } else if (format === 'json-file') {
-    result = getSaveJsonFile(customName)
-    if (options?.autoDownload) {
-      saveAs(result, result.name)
-    }
-  } else if (format === 'pptx' || format === 'pptx-blob') {
-    const blob = await getSavePptxBlob()
-    result = blob
-    if (blob && options?.autoDownload) {
-      saveAs(blob, `${customName}.pptx`)
-    }
-  } else if (format === 'pptx-file') {
-    const file = await getSavePptxFile(customName)
-    result = file
-    if (file && options?.autoDownload) {
-      saveAs(file, file.name)
-    }
-  } else if (format === 'images-zip') {
-    if (headerRef.value?.generateImagesZipBlob) {
-      const zipBlob = await headerRef.value.generateImagesZipBlob()
-      result = zipBlob
-      if (zipBlob && options?.autoDownload) {
-        saveAs(zipBlob, `${customName}.zip`)
-      }
-    }
-  } else {
-    result = currentDeck
-  }
-
-  // 抛出保存事件，携带最终产物与工程元数据
-  emit('save', {
-    format,
-    data: result,
-    deck: currentDeck
-  })
-
-  return result
-}
-
-// 导出相关方法
-async function exportPptx() {
-  if (headerRef.value?.downloadAsPptx) {
-    await headerRef.value.downloadAsPptx()
-  } else {
-    exportJson()
-  }
-  emit('export', { format: 'pptx', title: presentationTitle.value })
-}
-
-function exportJson() {
-  exportSlides()
-  emit('export', { format: 'json', title: presentationTitle.value })
-}
-
-async function exportImages() {
-  if (headerRef.value?.downloadAllSlidesAsZip) {
-    await headerRef.value.downloadAllSlidesAsZip()
-  }
-  emit('export', { format: 'images', title: presentationTitle.value })
-}
-
-/**
- * 通用多源数据与文件加载/渲染方法
- * 支持传入 File 对象、Blob 二进制流、ArrayBuffer、JSON 字符串/对象、XML 字符串
- * 自动探测类型并一键渲染进编辑器画布
- */
-async function loadFile(source: File | Blob | ArrayBuffer | string | any, options?: LoadSourceOptions): Promise<LoadSourceResult> {
-  if (!source) {
-    throw new Error('加载失败：未提供任何有效数据源 (source is null or undefined)')
-  }
-
-  let detectedType: string = options?.type || 'auto'
-  let customTitle = options?.title || ''
-
-  // 1. 探测 File 类型与获取标题
-  if (typeof File !== 'undefined' && source instanceof File) {
-    if (!customTitle) {
-      customTitle = source.name.replace(/\.[^.]+$/, '')
-    }
-    if (detectedType === 'auto') {
-      const ext = (source.name.split('.').pop() || '').toLowerCase()
-      if (ext === 'pptx') detectedType = 'pptx'
-      else if (ext === 'json') detectedType = 'json'
-      else if (ext === 'xml') detectedType = 'xml'
-      else if (source.type.includes('presentation') || source.type.includes('powerpoint')) detectedType = 'pptx'
-      else if (source.type.includes('json')) detectedType = 'json'
-      else if (source.type.includes('xml')) detectedType = 'xml'
-    }
-  }
-
-  // 2. 探测 Blob 类型
-  if (typeof Blob !== 'undefined' && source instanceof Blob && detectedType === 'auto') {
-    if (source.type.includes('presentation') || source.type.includes('powerpoint')) {
-      detectedType = 'pptx'
-    } else if (source.type.includes('json')) {
-      detectedType = 'json'
-    } else if (source.type.includes('xml')) {
-      detectedType = 'xml'
-    } else {
-      try {
-        const headBuffer = await source.slice(0, 4).arrayBuffer()
-        const headBytes = new Uint8Array(headBuffer)
-        if (headBytes[0] === 0x50 && headBytes[1] === 0x4B) {
-          detectedType = 'pptx'
-        } else {
-          const textSample = (await source.slice(0, 200).text()).trim()
-          if (textSample.startsWith('{') || textSample.startsWith('[')) {
-            detectedType = 'json'
-          } else if (textSample.startsWith('<')) {
-            detectedType = 'xml'
-          }
-        }
-      } catch (e) {
-        console.warn('探测 Blob 头部签名失败:', e)
-      }
-    }
-  }
-
-  // 3. 探测 ArrayBuffer 类型
-  if (source instanceof ArrayBuffer && detectedType === 'auto') {
-    const headBytes = new Uint8Array(source.slice(0, 4))
-    if (headBytes[0] === 0x50 && headBytes[1] === 0x4B) {
-      detectedType = 'pptx'
-    } else {
-      detectedType = 'pptx'
-    }
-  }
-
-  // 4. 探测纯字符串类型 (支持 JSON 文本、XML 文本，或 URL 文件地址)
-  if (typeof source === 'string') {
-    const trimmed = source.trim()
-    const isUrl = /^(https?:\/\/|blob:|data:|\/|\.\/|\.\.\/)/i.test(trimmed) || /\.(pptx|json|xml)(\?.*)?$/i.test(trimmed)
-
-    if (isUrl && !trimmed.startsWith('{') && !trimmed.startsWith('[') && !trimmed.startsWith('<')) {
-      const urlPath = trimmed.split('?')[0].split('#')[0]
-      const fileNameFromUrl = urlPath.substring(urlPath.lastIndexOf('/') + 1)
-      if (!customTitle && fileNameFromUrl) {
-        try {
-          customTitle = decodeURIComponent(fileNameFromUrl.replace(/\.[^.]+$/, ''))
-        } catch (e) {
-          customTitle = fileNameFromUrl.replace(/\.[^.]+$/, '')
-        }
-      }
-
-      if (detectedType === 'auto' && fileNameFromUrl) {
-        const ext = (fileNameFromUrl.split('.').pop() || '').toLowerCase()
-        if (ext === 'pptx') detectedType = 'pptx'
-        else if (ext === 'json') detectedType = 'json'
-        else if (ext === 'xml') detectedType = 'xml'
-      }
-
-      const res = await fetch(trimmed, options?.fetchOptions)
-      if (!res.ok) {
-        throw new Error(`加载文件地址失败 (${res.status} ${res.statusText}): ${trimmed}`)
-      }
-
-      const contentType = res.headers.get('content-type') || ''
-      if (detectedType === 'auto') {
-        if (contentType.includes('presentation') || contentType.includes('powerpoint')) detectedType = 'pptx'
-        else if (contentType.includes('json')) detectedType = 'json'
-        else if (contentType.includes('xml')) detectedType = 'xml'
-      }
-
-      const downloadedBlob = await res.blob()
-      return await loadFile(downloadedBlob, {
-        ...options,
-        type: detectedType !== 'auto' ? detectedType as any : undefined,
-        title: customTitle || options?.title
-      })
-    }
-
-    if (detectedType === 'auto') {
-      if (trimmed.startsWith('<')) {
-        detectedType = 'xml'
-      } else if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
-        detectedType = 'json'
-      }
-    }
-  }
-
-  // 5. 探测普通 JS 对象
-  if (typeof source === 'object' && !(source instanceof Blob) && !(source instanceof ArrayBuffer) && detectedType === 'auto') {
-    detectedType = 'json'
-  }
-
-  // 兜底识别
-  if (detectedType === 'auto') {
-    detectedType = typeof source === 'string' ? 'json' : 'pptx'
-  }
-
-  if (customTitle) {
-    presentationTitle.value = customTitle
-  }
-
-  // 分发执行解析渲染
-  if (detectedType === 'pptx') {
-    let buffer: ArrayBuffer
-    if (source instanceof ArrayBuffer) {
-      buffer = source
-    } else if (typeof Blob !== 'undefined' && source instanceof Blob) {
-      buffer = await source.arrayBuffer()
-    } else {
-      throw new Error('PPTX 格式需要 File / Blob / ArrayBuffer 数据源')
-    }
-
-    if (!headerRef.value?.importPptxArrayBuffer) {
-      throw new Error('PPTX 解析器模块尚未就绪')
-    }
-
-    const success = await headerRef.value.importPptxArrayBuffer(buffer, customTitle)
-    if (!success) {
-      throw new Error('PPTX 解析导入失败')
-    }
-
-    const result: LoadSourceResult = {
-      success: true,
-      title: presentationTitle.value,
-      slidesCount: slides.value?.length || 0,
-      type: 'pptx'
-    }
-    emit('load', result)
-    return result
-  } else if (detectedType === 'json' || detectedType === 'deck') {
-    let data: any
-    if (typeof Blob !== 'undefined' && source instanceof Blob) {
-      const text = await source.text()
-      data = JSON.parse(text)
-    } else if (typeof source === 'string') {
-      data = JSON.parse(source)
-    } else {
-      data = source
-    }
-
-    if (uploadMediaResourcesInSlides) {
-      await uploadMediaResourcesInSlides(data)
-    }
-
-    if (Array.isArray(data)) {
-      setSlides(data)
-    } else if (data && typeof data === 'object' && Array.isArray(data.slides)) {
-      loadDeck(data)
-    } else {
-      throw new Error('无效的 JSON 幻灯片数据格式，缺少 slides 数组')
-    }
-
-    if (options?.notify !== false) {
-      notify('已成功导入幻灯片工程')
-    }
-
-    const result: LoadSourceResult = {
-      success: true,
-      title: presentationTitle.value,
-      slidesCount: slides.value?.length || 0,
-      type: 'json'
-    }
-    emit('load', result)
-    return result
-  } else if (detectedType === 'xml') {
-    let xmlText = ''
-    if (typeof Blob !== 'undefined' && source instanceof Blob) {
-      xmlText = await source.text()
-    } else if (typeof source === 'string') {
-      xmlText = source
-    } else {
-      throw new Error('XML 格式需要字符串或文本 Blob 数据源')
-    }
-
-    const parser = new DOMParser()
-    const doc = parser.parseFromString(xmlText, 'text/xml')
-    const parserError = doc.querySelector('parsererror')
-    if (parserError) {
-      throw new Error(`XML 语法解析错误: ${parserError.textContent}`)
-    }
-
-    const parsedSlides: Slide[] = []
-    const deckNode = doc.querySelector('deck') || doc.querySelector('presentation')
-    if (deckNode && deckNode.getAttribute('title')) {
-      presentationTitle.value = deckNode.getAttribute('title') || presentationTitle.value
-    }
-
-    const slideNodes = doc.querySelectorAll('slide')
-    if (slideNodes && slideNodes.length > 0) {
-      slideNodes.forEach((sNode, sIdx) => {
-        const title = sNode.querySelector('title')?.textContent || `幻灯片 ${sIdx + 1}`
-        const subtitle = sNode.querySelector('subtitle')?.textContent || ''
-        const background = sNode.getAttribute('background') || sNode.querySelector('background')?.textContent || '#ffffff'
-        const elements: any[] = []
-
-        const elemNodes = sNode.querySelectorAll('element, shape, text, item')
-        elemNodes.forEach((eNode, eIdx) => {
-          const type = eNode.getAttribute('type') || eNode.tagName.toLowerCase()
-          const content = eNode.textContent || ''
-          const left = eNode.getAttribute('left') || `${50 + eIdx * 20}px`
-          const top = eNode.getAttribute('top') || `${100 + eIdx * 40}px`
-          const width = eNode.getAttribute('width') || '400px'
-          const height = eNode.getAttribute('height') || '100px'
-
-          elements.push({
-            id: `el_xml_${Date.now()}_${eIdx}`,
-            type: type === 'shape' ? 'shape' : 'text',
-            content: content || '文本内容',
-            style: {
-              left,
-              top,
-              width,
-              height,
-              color: eNode.getAttribute('color') || '#000000',
-              fontSize: eNode.getAttribute('fontSize') || '20px'
-            }
-          })
-        })
-
-        parsedSlides.push({
-          id: `slide_xml_${Date.now()}_${sIdx}`,
-          title,
-          subtitle,
-          background,
-          bgType: 'color',
-          elements,
-          notes: sNode.querySelector('notes')?.textContent || '',
-          transition: 'none'
-        } as any)
-      })
-    } else {
-      const pSld = doc.querySelector('p\\:sld, sld')
-      if (pSld) {
-        const elements: any[] = []
-        const spList = doc.querySelectorAll('p\\:sp, sp')
-        spList.forEach((sp, spIdx) => {
-          const tNodes = sp.querySelectorAll('a\\:t, t')
-          let textVal = ''
-          tNodes.forEach(t => { textVal += t.textContent + ' ' })
-          textVal = textVal.trim()
-
-          const off = sp.querySelector('a\\:off, off')
-          const ext = sp.querySelector('a\\:ext, ext')
-          const xEmu = off ? parseInt(off.getAttribute('x') || '0', 10) : 0
-          const yEmu = off ? parseInt(off.getAttribute('y') || '0', 10) : 0
-          const cxEmu = ext ? parseInt(ext.getAttribute('cx') || '0', 10) : 0
-          const cyEmu = ext ? parseInt(ext.getAttribute('cy') || '0', 10) : 0
-
-          const left = `${Math.round(xEmu / 9525)}px`
-          const top = `${Math.round(yEmu / 9525)}px`
-          const width = cxEmu ? `${Math.round(cxEmu / 9525)}px` : '300px'
-          const height = cyEmu ? `${Math.round(cyEmu / 9525)}px` : '80px'
-
-          elements.push({
-            id: `el_xml_${Date.now()}_${spIdx}`,
-            type: 'text',
-            content: textVal || '形状元素',
-            style: {
-              left,
-              top,
-              width,
-              height,
-              color: '#1e293b',
-              fontSize: '18px'
-            }
-          })
-        })
-
-        parsedSlides.push({
-          id: `slide_xml_${Date.now()}`,
-          title: customTitle || 'XML 导入幻灯片',
-          subtitle: '',
-          background: '#ffffff',
-          bgType: 'color',
-          elements,
-          notes: '',
-          transition: 'none'
-        } as any)
-      } else {
-        throw new Error('未识别的 XML 幻灯片格式，请提供标准 deck/slide 或 p:sld 格式')
-      }
-    }
-
-    if (parsedSlides.length === 0) {
-      throw new Error('XML 解析成功，但未提取到有效幻灯片页面')
-    }
-
-    setSlides(parsedSlides)
-    if (options?.notify !== false) {
-      notify(`已成功从 XML 渲染 ${parsedSlides.length} 页幻灯片`)
-    }
-
-    const result: LoadSourceResult = {
-      success: true,
-      title: presentationTitle.value,
-      slidesCount: parsedSlides.length,
-      type: 'xml'
-    }
-    emit('load', result)
-    return result
-  } else {
-    throw new Error(`暂不支持的数据格式类型: ${detectedType}`)
-  }
-}
-
-// 监听外部传入的 modelValue
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (isInternalUpdating) return
-    if (!val) return
-    if (val === lastEmittedModelValue) return
-    loadDeck(val as any)
-  },
-  { immediate: true, deep: true }
-)
-
-// 监听内部 slides 变化，向外部同步（拖拽/变形交互期间冻结，避免高频触发几十毫秒的深拷贝序列化）
-watch(
-  () => slides.value,
-  (newSlides) => {
-    if (isInternalUpdating) return
-    if (isCanvasDragging?.value || pauseHistory?.value) return
-    isInternalUpdating = true
-    const currentDeck = getDeck()
-    lastEmittedModelValue = currentDeck
-    emit('update:modelValue', currentDeck)
-    emit('change', {
-      slides: newSlides,
-      activeIndex: activeIndex.value,
-      title: presentationTitle.value
-    })
-    nextTick(() => {
-      isInternalUpdating = false
-    })
-  },
-  { deep: true }
-)
-
-// 拖拽/变形结束后，统一补偿同步一次最新的 Deck 状态给外部
-watch([() => isCanvasDragging?.value, () => pauseHistory?.value], ([isDragging, isPaused], [prevDragging, prevPaused]) => {
-  if ((prevDragging && !isDragging) || (prevPaused && !isPaused)) {
-    if (!isDragging && !isPaused) {
-      if (isInternalUpdating) return
-      isInternalUpdating = true
-      const currentDeck = getDeck()
-      lastEmittedModelValue = currentDeck
-      emit('update:modelValue', currentDeck)
-      emit('change', {
-        slides: slides.value,
-        activeIndex: activeIndex.value,
-        title: presentationTitle.value
-      })
-      nextTick(() => {
-        isInternalUpdating = false
-      })
-    }
-  }
-})
-
-// 监听当前选中的幻灯片切换
-watch(
-  () => activeIndex.value,
-  (idx) => {
-    emit('slideChange', {
-      index: idx,
-      slide: activeSlide.value || null
-    })
-  }
-)
-
-// 公式编辑确认
-function handleFormulaConfirm(latex: string) {
-  if (currentEditingFormulaEl.value) {
-    currentEditingFormulaEl.value.latex = latex
-    currentEditingFormulaEl.value.content = latex
-    notify('已更新公式')
-    currentEditingFormulaEl.value = null
-  } else {
-    addElement('text', latex, latex)
-  }
-}
-
-// 组装对外暴露的编程式 API 对象
-const editorApi: PptEditorApi = {
-  save,
-  getSaveData: () => getDeck(),
-  getSaveJsonBlob,
-  getSaveJsonFile,
-  getSavePptxBlob,
-  getSavePptxFile,
-  getSlides,
-  getDeck,
-  setSlides,
-  loadDeck,
-  loadFile,
-  importFile: loadFile,
-  getActiveSlide: () => activeSlide.value || null,
-  getActiveIndex: () => activeIndex.value,
-  selectSlide: (index: number) => selectSlide(index),
-  addSlide: () => addSlide(),
-  deleteSlide: (index?: number) => {
-    const targetIdx = typeof index === 'number' ? index : activeIndex.value
-    deleteSlide(targetIdx)
-  },
-  exportPptx,
-  exportJson,
-  exportImages,
-  undo,
-  redo,
-  canUndo,
-  canRedo,
-  startPresentation,
-  stopPresentation,
-  notify,
-  zoomIn,
-  zoomOut,
-  resetZoom,
-  setAiConfig,
-  isAiBeautifyEnabled,
-  setMaterialConfig,
-  isMaterialEnabled,
-  saveMaterial: (meta) => saveCurrentSlideToMaterial(meta),
-  setCustomUploadHandler,
-  getCustomUploadHandler,
-  slidesComposable: slidesState
-}
-
-// 获取当前插槽实例
-const slots = useSlots()
-
-// 顶部工具栏插槽作用域上下文数据
-const headerSlotContext = computed(() => ({
-  api: editorApi,
-  deck: getDeck(),
-  slides: slidesState.slides.value,
-  activeSlide: slidesState.activeSlide.value || null,
-  activeIndex: slidesState.activeIndex.value,
-  title: presentationTitle.value,
-  setTitle: (newTitle: string) => {
-    presentationTitle.value = newTitle
-  },
-  save,
-  exportPptx,
-  exportJson,
-  exportImages,
-  undo,
-  redo,
-  canUndo: canUndo.value,
-  canRedo: canRedo.value,
-  zoomIn,
-  zoomOut,
-  resetZoom,
-  zoomRatio: slidesState.zoomRatio.value,
-  isMasterEditingView: slidesState.isMasterEditingView.value
-}))
-
-// 对外通过 ref 暴露所有方法
-defineExpose(editorApi)
-
-onMounted(async () => {
-  // 触发 ready 事件
-  emit('ready', editorApi)
-
-  // 若启用 MCP 自动拉取
-  if (props.enableMcp) {
-    const params = new URLSearchParams(window.location.search)
-    const deckId = params.get('deckId')
-    const deckPath = params.get('deck')
-    if (deckId || deckPath) {
-      try {
-        const query = deckId
-          ? `deckId=${encodeURIComponent(deckId)}`
-          : `path=${encodeURIComponent(deckPath || '')}`
-        const response = await fetch(`/__mcp_deck?${query}`)
-        if (!response.ok) {
-          throw new Error(await response.text())
-        }
-        const deck = await response.json()
-        loadDeck(deck)
-        notify('已从 MCP 打开可编辑稿')
-      } catch (error: any) {
-        notify(`打开 MCP 稿件失败：${error?.message || error}`)
-      }
-    }
-  }
-})
-</script>
-
-<template>
-  <div class="app-container jvs-ppt-editor-root" :class="{ 'is-readonly': readonly }">
-    <!-- Main top Navigation bar (支持完整 header 插槽替换或精细区域插槽定制) -->
-    <slot name="header" v-bind="headerSlotContext">
-      <Header ref="headerRef" v-show="showHeader" :slot-props="headerSlotContext">
-        <!-- 左侧前置 (Logo、返回按钮等) -->
-        <template v-if="slots['header-left-prefix']" #left-prefix="sp">
-          <slot name="header-left-prefix" v-bind="sp"></slot>
-        </template>
-
-        <!-- 左侧主体（若外部传了 header-left，则覆盖默认汉堡菜单和标题） -->
-        <template v-if="slots['header-left']" #left="sp">
-          <slot name="header-left" v-bind="sp"></slot>
-        </template>
-
-        <!-- 左侧后置 (文档副标题、状态标签等) -->
-        <template v-if="slots['header-left-suffix']" #left-suffix="sp">
-          <slot name="header-left-suffix" v-bind="sp"></slot>
-        </template>
-
-        <!-- 中间工具栏主体（若外部传了 toolbar 或 header-center，则覆盖默认 Toolbar） -->
-        <template v-if="slots['toolbar'] || slots['header-center']" #center="sp">
-          <slot name="toolbar" v-bind="sp">
-            <slot name="header-center" v-bind="sp"></slot>
-          </slot>
-        </template>
-
-        <!-- 工具栏前置 (插入到撤销按钮前) -->
-        <template v-if="slots['toolbar-prefix']" #toolbar-prefix="sp">
-          <slot name="toolbar-prefix" v-bind="sp"></slot>
-        </template>
-
-        <!-- 工具栏后置 (插入到一键美化按钮后) -->
-        <template v-if="slots['toolbar-suffix']" #toolbar-suffix="sp">
-          <slot name="toolbar-suffix" v-bind="sp"></slot>
-        </template>
-
-        <!-- 右侧前置 (缩放/放映前) -->
-        <template v-if="slots['header-right-prefix']" #right-prefix="sp">
-          <slot name="header-right-prefix" v-bind="sp"></slot>
-        </template>
-
-        <!-- 右侧主体 (保存、导出、分享等自定义按钮) -->
-        <template v-if="slots['header-right']" #right="sp">
-          <slot name="header-right" v-bind="sp"></slot>
-        </template>
-
-        <!-- 右侧后置 (最右侧，放映按钮后) -->
-        <template v-if="slots['header-right-suffix']" #right-suffix="sp">
-          <slot name="header-right-suffix" v-bind="sp"></slot>
-        </template>
-      </Header>
-    </slot>
-
-    <!-- Main Workspace consisting of SidebarLeft, Center Canvas, and SidebarRight -->
-    <main class="app-workspace" :class="{ 'hide-right-sidebar': !activeTab || !showSidebarRight }">
-      <!-- 左侧幻灯片列表 -->
-      <SidebarLeft v-if="showSidebarLeft" class="sidebar-left" />
-      
-      <!-- 中间主画布区 -->
-      <CanvasArea class="canvas-area" />
-
-      <!-- 右侧属性配置栏 -->
-      <SidebarRight v-if="showSidebarRight && !readonly" />
-    </main>
-
-    <!-- Fullscreen slide deck display panel -->
-    <PresentationMode />
-
-    <!-- Action feedback notifications banner -->
-    <ToastNotification />
-
-    <!-- Global LaTeX Formula Editor Dialog -->
-    <FormulaDialog
-      v-if="!readonly"
-      v-model:visible="formulaDialogVisible"
-      :initialLatex="currentEditingFormulaEl?.latex || ''"
-      @confirm="handleFormulaConfirm"
-    />
-
-    <!-- Global DSL JSON Input Dialog -->
-    <DslInputDialog
-      v-if="!readonly"
-      v-model:visible="dslInputDialogVisible"
-      @confirm="importSlides"
-    />
-
-    <!-- Global AI PPT Streaming Dialog -->
-    <AIPptDialog
-      v-if="!readonly"
-      v-model:visible="aiPptDialogVisible"
-    />
-
-    <!-- Global Unsplash AI Image Search & Insertion Dialog -->
-    <UnsplashImageDialog v-if="!readonly" />
-  </div>
-</template>
-
-<style scoped>
-.jvs-ppt-editor-root {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 只读模式下的禁用样式微调 */
-.jvs-ppt-editor-root.is-readonly :deep(.action-btn-disabled) {
-  pointer-events: none;
-  opacity: 0.6;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, useSlots, getCurrentInstance, defineAsyncComponent, type Ref } from 'vue'
+import jvsPickerColorV3 from 'jvs-picker-color-v3'
+import '../assets/iconfont/iconfont.js'
+import { saveAs } from 'file-saver'
+import Header from './Header.vue'
+import Toolbar from './Toolbar.vue'
+import SidebarLeft from './SidebarLeft.vue'
+import CanvasArea from './CanvasArea.vue'
+import SidebarRight from './SidebarRight.vue'
+import ToastNotification from './ToastNotification.vue'
+// 大弹层/放映视图异步化：不进首屏主包，首次打开才加载
+const PresentationMode = defineAsyncComponent(() => import('./PresentationMode.vue'))
+const FormulaDialog = defineAsyncComponent(() => import('./FormulaDialog.vue'))
+const DslInputDialog = defineAsyncComponent(() => import('./DslInputDialog.vue'))
+const AIPptDialog = defineAsyncComponent(() => import('./AIPptDialog.vue'))
+const UnsplashImageDialog = defineAsyncComponent(() => import('./UnsplashImageDialog.vue'))
+
+// 自动检测并兼容单组件 import { PptEditor } 局部引用的场景（若宿主未调用 app.use(JvsPptUi) 则静默自动装配）
+// Element Plus 组件已由构建期按需解析（unplugin-vue-components），无需运行时全局注册
+const currentApp = getCurrentInstance()?.appContext?.app
+if (currentApp) {
+  const registeredComponents = currentApp._context?.components || {}
+  if (!registeredComponents['jvs-picker-color-v3']) {
+    currentApp.use(jvsPickerColorV3)
+  }
+}
+
+import { useSlides } from '../composables/useSlides'
+import type { Slide, SlideMaster, DeckData, PptEditorProps, PptEditorApi, SaveOptions, LoadSourceOptions, LoadSourceResult } from '../types'
+
+const props = withDefaults(defineProps<PptEditorProps>(), {
+  modelValue: null,
+  readonly: false,
+  showHeader: true,
+  showMenu: true,
+  showSidebarLeft: true,
+  showSidebarRight: true,
+  enableMcp: false,
+  enableAi: undefined,
+  aiApiUrl: '',
+  aiHeaders: () => ({}),
+  enableMaterial: undefined,
+  materialApiUrl: '',
+  materialListApiUrl: '',
+  materialTreeApiUrl: '',
+  materialPageApiUrl: '',
+  materialTypeApiUrl: '',
+  materialSaveApiUrl: '',
+  materialHeaders: () => ({}),
+  config: () => ({})
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: DeckData | Slide[]): void
+  (e: 'change', payload: { slides: Slide[]; activeIndex: number; title: string }): void
+  (e: 'save', payload: any): void
+  (e: 'load', payload: LoadSourceResult): void
+  (e: 'export', payload: { format: string; title: string; data?: any }): void
+  (e: 'slideChange', payload: { index: number; slide: Slide | null }): void
+  (e: 'ready', api: PptEditorApi): void
+}>()
+
+const slidesState = useSlides()
+const {
+  slides,
+  activeIndex,
+  activeSlide,
+  presentationTitle,
+  slideMasters,
+  themeClrScheme,
+  slideRatio,
+  slideHeight,
+  logicalWidth,
+  logicalHeight,
+  formulaDialogVisible,
+  dslInputDialogVisible,
+  aiPptDialogVisible,
+  unsplashDialogVisible,
+  isPresenting,
+  importSlides,
+  exportSlides,
+  currentEditingFormulaEl,
+  addElement,
+  notify,
+  activeTab,
+  undo,
+  redo,
+  canUndo,
+  canRedo,
+  addSlide,
+  deleteSlide,
+  selectSlide,
+  startPresentation,
+  stopPresentation,
+  zoomIn,
+  zoomOut,
+  resetZoom,
+  setAiConfig,
+  isAiBeautifyEnabled,
+  setMaterialConfig,
+  isMaterialEnabled,
+  saveCurrentSlideToMaterial,
+  isCanvasDragging,
+  pauseHistory,
+  setCustomUploadHandler,
+  getCustomUploadHandler,
+  uploadMediaResourcesInSlides
+} = slidesState
+
+// 弹层挂载闩锁：首次 visible 后保持挂载（异步组件只加载一次，关闭动画不被 v-if 掐断）
+function latchMount(source: Ref<boolean>) {
+  const opened = ref(false)
+  watch(source, v => { if (v) opened.value = true })
+  return computed(() => source.value || opened.value)
+}
+const showFormulaDialog = latchMount(formulaDialogVisible)
+const showDslInputDialog = latchMount(dslInputDialogVisible)
+const showAiPptDialog = latchMount(aiPptDialogVisible)
+const showUnsplashDialog = latchMount(unsplashDialogVisible)
+
+// 标志位：防止外部 v-model 变化与内部 watch 产生互相覆盖的回环
+let isInternalUpdating = false
+let lastEmittedModelValue: any = null
+
+// 监听外部传入的 AI 相关配置（优先 props，次选 config 对象）
+watch(
+  [
+    () => props.aiApiUrl,
+    () => props.config?.aiApiUrl,
+    () => props.enableAi,
+    () => props.config?.enableAi,
+    () => props.aiHeaders,
+    () => props.config?.aiHeaders
+  ],
+  () => {
+    const url = props.aiApiUrl || props.config?.aiApiUrl || ''
+    const headers = { ...(props.config?.aiHeaders || {}), ...(props.aiHeaders || {}) }
+    // 若显式传入 enableAi，则以其为准；若传了 url 则开启；未指定时保留 undefined 触发默认策略
+    const rawEnabled = props.enableAi !== undefined ? props.enableAi : props.config?.enableAi
+    const enabled = rawEnabled !== undefined ? rawEnabled : (url ? true : undefined)
+    setAiConfig({ apiUrl: url, headers, enable: enabled })
+  },
+  { immediate: true, deep: true }
+)
+
+// 监听外部传入的素材库相关配置（优先 props，次选 config 对象）
+watch(
+  [
+    () => props.materialApiUrl,
+    () => props.config?.materialApiUrl,
+    () => props.materialListApiUrl,
+    () => props.config?.materialListApiUrl,
+    () => props.materialTreeApiUrl,
+    () => props.config?.materialTreeApiUrl,
+    () => props.materialPageApiUrl,
+    () => props.config?.materialPageApiUrl,
+    () => props.materialTypeApiUrl,
+    () => props.config?.materialTypeApiUrl,
+    () => props.materialSaveApiUrl,
+    () => props.config?.materialSaveApiUrl,
+    () => props.enableMaterial,
+    () => props.config?.enableMaterial,
+    () => props.materialHeaders,
+    () => props.config?.materialHeaders
+  ],
+  () => {
+    const listUrl = props.materialListApiUrl || props.config?.materialListApiUrl || props.materialApiUrl || props.config?.materialApiUrl || ''
+    const treeUrl = props.materialTreeApiUrl || props.config?.materialTreeApiUrl || listUrl || ''
+    const pageUrl = props.materialPageApiUrl || props.config?.materialPageApiUrl || ''
+    const typeUrl = props.materialTypeApiUrl || props.config?.materialTypeApiUrl || ''
+    const saveUrl = props.materialSaveApiUrl || props.config?.materialSaveApiUrl || ''
+    const headers = { ...(props.config?.materialHeaders || {}), ...(props.materialHeaders || {}) }
+    // 只要配置了获取内容的 API，且未显式关闭，就展示并激活素材功能
+    const rawEnabled = props.enableMaterial !== undefined ? props.enableMaterial : props.config?.enableMaterial
+    const enabled = rawEnabled !== undefined ? rawEnabled : ((treeUrl || pageUrl || listUrl) ? true : undefined)
+    setMaterialConfig({
+      listApiUrl: listUrl,
+      apiUrl: listUrl,
+      treeApiUrl: treeUrl,
+      pageApiUrl: pageUrl,
+      typeApiUrl: typeUrl,
+      saveApiUrl: saveUrl,
+      headers,
+      enable: enabled
+    })
+  },
+  { immediate: true, deep: true }
+)
+
+// 监听外部传入的自定义资源上传函数（优先 props，次选 config 对象）
+watch(
+  [
+    () => props.customUpload,
+    () => props.uploadHandler,
+    () => props.config?.customUpload,
+    () => props.config?.uploadHandler
+  ],
+  () => {
+    const handler = props.customUpload || props.uploadHandler || props.config?.customUpload || props.config?.uploadHandler || null
+    setCustomUploadHandler(handler)
+  },
+  { immediate: true }
+)
+
+// 初始化标题
+if (props.config?.title) {
+  presentationTitle.value = props.config.title
+}
+
+// 获取当前完整 Deck 工程数据
+function getDeck(): DeckData {
+  return {
+    title: presentationTitle.value || '未命名演示文稿',
+    slides: JSON.parse(JSON.stringify(slides.value || [])),
+    slideMasters: JSON.parse(JSON.stringify(slideMasters.value || [])),
+    themeClrScheme: themeClrScheme.value,
+    slideRatio: slideRatio.value,
+    slideHeight: slideHeight.value,
+    logicalWidth: logicalWidth.value,
+    logicalHeight: logicalHeight.value
+  }
+}
+
+// 获取幻灯片列表
+function getSlides(): Slide[] {
+  return JSON.parse(JSON.stringify(slides.value || []))
+}
+
+// 设置/替换当前幻灯片列表
+function setSlides(newSlides: Slide[]) {
+  if (!newSlides || !Array.isArray(newSlides)) return
+  isInternalUpdating = true
+  importSlides(newSlides)
+  nextTick(() => {
+    isInternalUpdating = false
+  })
+}
+
+// 加载完整 Deck 工程数据
+function loadDeck(deck: DeckData | Slide[]) {
+  if (!deck) return
+  isInternalUpdating = true
+  if (Array.isArray(deck)) {
+    importSlides(deck)
+  } else {
+    if (deck.title) {
+      presentationTitle.value = deck.title
+    }
+    if (deck.slideMasters && Array.isArray(deck.slideMasters)) {
+      slideMasters.value = deck.slideMasters
+    }
+    if (deck.slides && Array.isArray(deck.slides)) {
+      importSlides(deck.slides)
+    }
+  }
+  nextTick(() => {
+    isInternalUpdating = false
+  })
+}
+
+const headerRef = ref<any>(null)
+
+/**
+ * 直接获取 JSON 格式的 Blob 对象
+ */
+function getSaveJsonBlob(): Blob {
+  const deck = getDeck()
+  return new Blob([JSON.stringify(deck, null, 2)], { type: 'application/json' })
+}
+
+/**
+ * 直接获取带文件名的 JSON File 对象
+ */
+function getSaveJsonFile(filename?: string): File {
+  const blob = getSaveJsonBlob()
+  const name = `${filename || presentationTitle.value || 'presentation'}.json`
+  return new File([blob], name, { type: 'application/json' })
+}
+
+/**
+ * 异步生成并获取可编辑的 PPTX 二进制 Blob 对象
+ */
+async function getSavePptxBlob(): Promise<Blob | null> {
+  if (headerRef.value?.generatePptxBlob) {
+    return await headerRef.value.generatePptxBlob()
+  }
+  return null
+}
+
+/**
+ * 异步生成并获取带文件名的 PPTX File 对象
+ */
+async function getSavePptxFile(filename?: string): Promise<File | null> {
+  const blob = await getSavePptxBlob()
+  if (!blob) return null
+  const name = `${filename || presentationTitle.value || 'presentation'}.pptx`
+  return new File([blob], name, {
+    type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+  })
+}
+
+/**
+ * 核心保存 API：供外部使用方直接调用获取保存内容
+ * @param options 保存配置
+ * @returns 对应格式的内容 (DeckData | Blob | File)
+ */
+async function save(options?: SaveOptions): Promise<any> {
+  const format = options?.format || 'json'
+  const customName = options?.filename || presentationTitle.value || 'presentation'
+  const currentDeck = getDeck()
+
+  let result: any = null
+
+  if (format === 'json' || format === 'deck') {
+    result = currentDeck
+    if (options?.autoDownload) {
+      const blob = getSaveJsonBlob()
+      saveAs(blob, `${customName}.json`)
+    }
+  } else if (format === 'json-blob') {
+    result = getSaveJsonBlob()
+    if (options?.autoDownload) {
+      saveAs(result, `${customName}.json`)
+    }
+  } else if (format === 'json-file') {
+    result = getSaveJsonFile(customName)
+    if (options?.autoDownload) {
+      saveAs(result, result.name)
+    }
+  } else if (format === 'pptx' || format === 'pptx-blob') {
+    const blob = await getSavePptxBlob()
+    result = blob
+    if (blob && options?.autoDownload) {
+      saveAs(blob, `${customName}.pptx`)
+    }
+  } else if (format === 'pptx-file') {
+    const file = await getSavePptxFile(customName)
+    result = file
+    if (file && options?.autoDownload) {
+      saveAs(file, file.name)
+    }
+  } else if (format === 'images-zip') {
+    if (headerRef.value?.generateImagesZipBlob) {
+      const zipBlob = await headerRef.value.generateImagesZipBlob()
+      result = zipBlob
+      if (zipBlob && options?.autoDownload) {
+        saveAs(zipBlob, `${customName}.zip`)
+      }
+    }
+  } else {
+    result = currentDeck
+  }
+
+  // 抛出保存事件，携带最终产物与工程元数据
+  emit('save', {
+    format,
+    data: result,
+    deck: currentDeck
+  })
+
+  return result
+}
+
+// 导出相关方法
+async function exportPptx() {
+  if (headerRef.value?.downloadAsPptx) {
+    await headerRef.value.downloadAsPptx()
+  } else {
+    exportJson()
+  }
+  emit('export', { format: 'pptx', title: presentationTitle.value })
+}
+
+function exportJson() {
+  exportSlides()
+  emit('export', { format: 'json', title: presentationTitle.value })
+}
+
+async function exportImages() {
+  if (headerRef.value?.downloadAllSlidesAsZip) {
+    await headerRef.value.downloadAllSlidesAsZip()
+  }
+  emit('export', { format: 'images', title: presentationTitle.value })
+}
+
+/**
+ * 通用多源数据与文件加载/渲染方法
+ * 支持传入 File 对象、Blob 二进制流、ArrayBuffer、JSON 字符串/对象、XML 字符串
+ * 自动探测类型并一键渲染进编辑器画布
+ */
+async function loadFile(source: File | Blob | ArrayBuffer | string | any, options?: LoadSourceOptions): Promise<LoadSourceResult> {
+  if (!source) {
+    throw new Error('加载失败：未提供任何有效数据源 (source is null or undefined)')
+  }
+
+  let detectedType: string = options?.type || 'auto'
+  let customTitle = options?.title || ''
+
+  // 1. 探测 File 类型与获取标题
+  if (typeof File !== 'undefined' && source instanceof File) {
+    if (!customTitle) {
+      customTitle = source.name.replace(/\.[^.]+$/, '')
+    }
+    if (detectedType === 'auto') {
+      const ext = (source.name.split('.').pop() || '').toLowerCase()
+      if (ext === 'pptx') detectedType = 'pptx'
+      else if (ext === 'json') detectedType = 'json'
+      else if (ext === 'xml') detectedType = 'xml'
+      else if (source.type.includes('presentation') || source.type.includes('powerpoint')) detectedType = 'pptx'
+      else if (source.type.includes('json')) detectedType = 'json'
+      else if (source.type.includes('xml')) detectedType = 'xml'
+    }
+  }
+
+  // 2. 探测 Blob 类型
+  if (typeof Blob !== 'undefined' && source instanceof Blob && detectedType === 'auto') {
+    if (source.type.includes('presentation') || source.type.includes('powerpoint')) {
+      detectedType = 'pptx'
+    } else if (source.type.includes('json')) {
+      detectedType = 'json'
+    } else if (source.type.includes('xml')) {
+      detectedType = 'xml'
+    } else {
+      try {
+        const headBuffer = await source.slice(0, 4).arrayBuffer()
+        const headBytes = new Uint8Array(headBuffer)
+        if (headBytes[0] === 0x50 && headBytes[1] === 0x4B) {
+          detectedType = 'pptx'
+        } else {
+          const textSample = (await source.slice(0, 200).text()).trim()
+          if (textSample.startsWith('{') || textSample.startsWith('[')) {
+            detectedType = 'json'
+          } else if (textSample.startsWith('<')) {
+            detectedType = 'xml'
+          }
+        }
+      } catch (e) {
+        console.warn('探测 Blob 头部签名失败:', e)
+      }
+    }
+  }
+
+  // 3. 探测 ArrayBuffer 类型
+  if (source instanceof ArrayBuffer && detectedType === 'auto') {
+    const headBytes = new Uint8Array(source.slice(0, 4))
+    if (headBytes[0] === 0x50 && headBytes[1] === 0x4B) {
+      detectedType = 'pptx'
+    } else {
+      detectedType = 'pptx'
+    }
+  }
+
+  // 4. 探测纯字符串类型 (支持 JSON 文本、XML 文本，或 URL 文件地址)
+  if (typeof source === 'string') {
+    const trimmed = source.trim()
+    const isUrl = /^(https?:\/\/|blob:|data:|\/|\.\/|\.\.\/)/i.test(trimmed) || /\.(pptx|json|xml)(\?.*)?$/i.test(trimmed)
+
+    if (isUrl && !trimmed.startsWith('{') && !trimmed.startsWith('[') && !trimmed.startsWith('<')) {
+      const urlPath = trimmed.split('?')[0].split('#')[0]
+      const fileNameFromUrl = urlPath.substring(urlPath.lastIndexOf('/') + 1)
+      if (!customTitle && fileNameFromUrl) {
+        try {
+          customTitle = decodeURIComponent(fileNameFromUrl.replace(/\.[^.]+$/, ''))
+        } catch (e) {
+          customTitle = fileNameFromUrl.replace(/\.[^.]+$/, '')
+        }
+      }
+
+      if (detectedType === 'auto' && fileNameFromUrl) {
+        const ext = (fileNameFromUrl.split('.').pop() || '').toLowerCase()
+        if (ext === 'pptx') detectedType = 'pptx'
+        else if (ext === 'json') detectedType = 'json'
+        else if (ext === 'xml') detectedType = 'xml'
+      }
+
+      const res = await fetch(trimmed, options?.fetchOptions)
+      if (!res.ok) {
+        throw new Error(`加载文件地址失败 (${res.status} ${res.statusText}): ${trimmed}`)
+      }
+
+      const contentType = res.headers.get('content-type') || ''
+      if (detectedType === 'auto') {
+        if (contentType.includes('presentation') || contentType.includes('powerpoint')) detectedType = 'pptx'
+        else if (contentType.includes('json')) detectedType = 'json'
+        else if (contentType.includes('xml')) detectedType = 'xml'
+      }
+
+      const downloadedBlob = await res.blob()
+      return await loadFile(downloadedBlob, {
+        ...options,
+        type: detectedType !== 'auto' ? detectedType as any : undefined,
+        title: customTitle || options?.title
+      })
+    }
+
+    if (detectedType === 'auto') {
+      if (trimmed.startsWith('<')) {
+        detectedType = 'xml'
+      } else if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+        detectedType = 'json'
+      }
+    }
+  }
+
+  // 5. 探测普通 JS 对象
+  if (typeof source === 'object' && !(source instanceof Blob) && !(source instanceof ArrayBuffer) && detectedType === 'auto') {
+    detectedType = 'json'
+  }
+
+  // 兜底识别
+  if (detectedType === 'auto') {
+    detectedType = typeof source === 'string' ? 'json' : 'pptx'
+  }
+
+  if (customTitle) {
+    presentationTitle.value = customTitle
+  }
+
+  // 分发执行解析渲染
+  if (detectedType === 'pptx') {
+    let buffer: ArrayBuffer
+    if (source instanceof ArrayBuffer) {
+      buffer = source
+    } else if (typeof Blob !== 'undefined' && source instanceof Blob) {
+      buffer = await source.arrayBuffer()
+    } else {
+      throw new Error('PPTX 格式需要 File / Blob / ArrayBuffer 数据源')
+    }
+
+    if (!headerRef.value?.importPptxArrayBuffer) {
+      throw new Error('PPTX 解析器模块尚未就绪')
+    }
+
+    const success = await headerRef.value.importPptxArrayBuffer(buffer, customTitle)
+    if (!success) {
+      throw new Error('PPTX 解析导入失败')
+    }
+
+    const result: LoadSourceResult = {
+      success: true,
+      title: presentationTitle.value,
+      slidesCount: slides.value?.length || 0,
+      type: 'pptx'
+    }
+    emit('load', result)
+    return result
+  } else if (detectedType === 'json' || detectedType === 'deck') {
+    let data: any
+    if (typeof Blob !== 'undefined' && source instanceof Blob) {
+      const text = await source.text()
+      data = JSON.parse(text)
+    } else if (typeof source === 'string') {
+      data = JSON.parse(source)
+    } else {
+      data = source
+    }
+
+    if (uploadMediaResourcesInSlides) {
+      await uploadMediaResourcesInSlides(data)
+    }
+
+    if (Array.isArray(data)) {
+      setSlides(data)
+    } else if (data && typeof data === 'object' && Array.isArray(data.slides)) {
+      loadDeck(data)
+    } else {
+      throw new Error('无效的 JSON 幻灯片数据格式，缺少 slides 数组')
+    }
+
+    if (options?.notify !== false) {
+      notify('已成功导入幻灯片工程')
+    }
+
+    const result: LoadSourceResult = {
+      success: true,
+      title: presentationTitle.value,
+      slidesCount: slides.value?.length || 0,
+      type: 'json'
+    }
+    emit('load', result)
+    return result
+  } else if (detectedType === 'xml') {
+    let xmlText = ''
+    if (typeof Blob !== 'undefined' && source instanceof Blob) {
+      xmlText = await source.text()
+    } else if (typeof source === 'string') {
+      xmlText = source
+    } else {
+      throw new Error('XML 格式需要字符串或文本 Blob 数据源')
+    }
+
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(xmlText, 'text/xml')
+    const parserError = doc.querySelector('parsererror')
+    if (parserError) {
+      throw new Error(`XML 语法解析错误: ${parserError.textContent}`)
+    }
+
+    const parsedSlides: Slide[] = []
+    const deckNode = doc.querySelector('deck') || doc.querySelector('presentation')
+    if (deckNode && deckNode.getAttribute('title')) {
+      presentationTitle.value = deckNode.getAttribute('title') || presentationTitle.value
+    }
+
+    const slideNodes = doc.querySelectorAll('slide')
+    if (slideNodes && slideNodes.length > 0) {
+      slideNodes.forEach((sNode, sIdx) => {
+        const title = sNode.querySelector('title')?.textContent || `幻灯片 ${sIdx + 1}`
+        const subtitle = sNode.querySelector('subtitle')?.textContent || ''
+        const background = sNode.getAttribute('background') || sNode.querySelector('background')?.textContent || '#ffffff'
+        const elements: any[] = []
+
+        const elemNodes = sNode.querySelectorAll('element, shape, text, item')
+        elemNodes.forEach((eNode, eIdx) => {
+          const type = eNode.getAttribute('type') || eNode.tagName.toLowerCase()
+          const content = eNode.textContent || ''
+          const left = eNode.getAttribute('left') || `${50 + eIdx * 20}px`
+          const top = eNode.getAttribute('top') || `${100 + eIdx * 40}px`
+          const width = eNode.getAttribute('width') || '400px'
+          const height = eNode.getAttribute('height') || '100px'
+
+          elements.push({
+            id: `el_xml_${Date.now()}_${eIdx}`,
+            type: type === 'shape' ? 'shape' : 'text',
+            content: content || '文本内容',
+            style: {
+              left,
+              top,
+              width,
+              height,
+              color: eNode.getAttribute('color') || '#000000',
+              fontSize: eNode.getAttribute('fontSize') || '20px'
+            }
+          })
+        })
+
+        parsedSlides.push({
+          id: `slide_xml_${Date.now()}_${sIdx}`,
+          title,
+          subtitle,
+          background,
+          bgType: 'color',
+          elements,
+          notes: sNode.querySelector('notes')?.textContent || '',
+          transition: 'none'
+        } as any)
+      })
+    } else {
+      const pSld = doc.querySelector('p\\:sld, sld')
+      if (pSld) {
+        const elements: any[] = []
+        const spList = doc.querySelectorAll('p\\:sp, sp')
+        spList.forEach((sp, spIdx) => {
+          const tNodes = sp.querySelectorAll('a\\:t, t')
+          let textVal = ''
+          tNodes.forEach(t => { textVal += t.textContent + ' ' })
+          textVal = textVal.trim()
+
+          const off = sp.querySelector('a\\:off, off')
+          const ext = sp.querySelector('a\\:ext, ext')
+          const xEmu = off ? parseInt(off.getAttribute('x') || '0', 10) : 0
+          const yEmu = off ? parseInt(off.getAttribute('y') || '0', 10) : 0
+          const cxEmu = ext ? parseInt(ext.getAttribute('cx') || '0', 10) : 0
+          const cyEmu = ext ? parseInt(ext.getAttribute('cy') || '0', 10) : 0
+
+          const left = `${Math.round(xEmu / 9525)}px`
+          const top = `${Math.round(yEmu / 9525)}px`
+          const width = cxEmu ? `${Math.round(cxEmu / 9525)}px` : '300px'
+          const height = cyEmu ? `${Math.round(cyEmu / 9525)}px` : '80px'
+
+          elements.push({
+            id: `el_xml_${Date.now()}_${spIdx}`,
+            type: 'text',
+            content: textVal || '形状元素',
+            style: {
+              left,
+              top,
+              width,
+              height,
+              color: '#1e293b',
+              fontSize: '18px'
+            }
+          })
+        })
+
+        parsedSlides.push({
+          id: `slide_xml_${Date.now()}`,
+          title: customTitle || 'XML 导入幻灯片',
+          subtitle: '',
+          background: '#ffffff',
+          bgType: 'color',
+          elements,
+          notes: '',
+          transition: 'none'
+        } as any)
+      } else {
+        throw new Error('未识别的 XML 幻灯片格式，请提供标准 deck/slide 或 p:sld 格式')
+      }
+    }
+
+    if (parsedSlides.length === 0) {
+      throw new Error('XML 解析成功，但未提取到有效幻灯片页面')
+    }
+
+    setSlides(parsedSlides)
+    if (options?.notify !== false) {
+      notify(`已成功从 XML 渲染 ${parsedSlides.length} 页幻灯片`)
+    }
+
+    const result: LoadSourceResult = {
+      success: true,
+      title: presentationTitle.value,
+      slidesCount: parsedSlides.length,
+      type: 'xml'
+    }
+    emit('load', result)
+    return result
+  } else {
+    throw new Error(`暂不支持的数据格式类型: ${detectedType}`)
+  }
+}
+
+// 监听外部传入的 modelValue
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (isInternalUpdating) return
+    if (!val) return
+    if (val === lastEmittedModelValue) return
+    loadDeck(val as any)
+  },
+  { immediate: true, deep: true }
+)
+
+// 对外 deck 同步防抖：打字/连续微编辑不再每次都整册 getDeck 深拷贝+emit，
+// 300ms 静默后统一发一次；拖拽落沿/翻页/卸载时立即冲刷，宿主侧最终一致
+let emitDeckTimer: ReturnType<typeof setTimeout> | null = null
+let emitDeckPending = false
+
+function emitDeckNow() {
+  if (emitDeckTimer) {
+    clearTimeout(emitDeckTimer)
+    emitDeckTimer = null
+  }
+  if (!emitDeckPending) return
+  if (isInternalUpdating) return // 保留 pending，下次调度/冲刷再试
+  emitDeckPending = false
+  isInternalUpdating = true
+  const currentDeck = getDeck()
+  lastEmittedModelValue = currentDeck
+  emit('update:modelValue', currentDeck)
+  emit('change', {
+    slides: slides.value,
+    activeIndex: activeIndex.value,
+    title: presentationTitle.value
+  })
+  nextTick(() => {
+    isInternalUpdating = false
+  })
+}
+
+function scheduleEmitDeck() {
+  if (isInternalUpdating) return
+  emitDeckPending = true
+  if (emitDeckTimer) clearTimeout(emitDeckTimer)
+  emitDeckTimer = setTimeout(() => {
+    emitDeckTimer = null
+    emitDeckNow()
+  }, 300)
+}
+
+// 监听内部 slides 变化，向外部同步（拖拽/变形交互期间冻结，避免高频触发几十毫秒的深拷贝序列化）
+watch(
+  () => slides.value,
+  () => {
+    if (isInternalUpdating) return
+    if (isCanvasDragging?.value || pauseHistory?.value) return
+    scheduleEmitDeck()
+  },
+  { deep: true }
+)
+
+// 拖拽/变形结束后，立即冲刷防抖中的对外同步
+watch([() => isCanvasDragging?.value, () => pauseHistory?.value], ([isDragging, isPaused], [prevDragging, prevPaused]) => {
+  if ((prevDragging && !isDragging) || (prevPaused && !isPaused)) {
+    if (!isDragging && !isPaused) {
+      emitDeckNow()
+    }
+  }
+})
+
+// 监听当前选中的幻灯片切换（翻页前冲刷防抖中的对外同步，宿主拿到的 deck 与页码一致）
+watch(
+  () => activeIndex.value,
+  (idx) => {
+    emitDeckNow()
+    emit('slideChange', {
+      index: idx,
+      slide: activeSlide.value || null
+    })
+  }
+)
+
+// 公式编辑确认
+function handleFormulaConfirm(latex: string) {
+  if (currentEditingFormulaEl.value) {
+    currentEditingFormulaEl.value.latex = latex
+    currentEditingFormulaEl.value.content = latex
+    notify('已更新公式')
+    currentEditingFormulaEl.value = null
+  } else {
+    addElement('text', latex, latex)
+  }
+}
+
+// 组装对外暴露的编程式 API 对象
+// 卸载前冲刷防抖中的对外同步，避免最后 300ms 内的编辑丢失
+onBeforeUnmount(() => {
+  emitDeckNow()
+})
+
+const editorApi: PptEditorApi = {
+  save,
+  getSaveData: () => getDeck(),
+  getSaveJsonBlob,
+  getSaveJsonFile,
+  getSavePptxBlob,
+  getSavePptxFile,
+  getSlides,
+  getDeck,
+  setSlides,
+  loadDeck,
+  loadFile,
+  importFile: loadFile,
+  getActiveSlide: () => activeSlide.value || null,
+  getActiveIndex: () => activeIndex.value,
+  selectSlide: (index: number) => selectSlide(index),
+  addSlide: () => addSlide(),
+  deleteSlide: (index?: number) => {
+    const targetIdx = typeof index === 'number' ? index : activeIndex.value
+    deleteSlide(targetIdx)
+  },
+  exportPptx,
+  exportJson,
+  exportImages,
+  undo,
+  redo,
+  canUndo,
+  canRedo,
+  startPresentation,
+  stopPresentation,
+  notify,
+  zoomIn,
+  zoomOut,
+  resetZoom,
+  setAiConfig,
+  isAiBeautifyEnabled,
+  setMaterialConfig,
+  isMaterialEnabled,
+  saveMaterial: (meta) => saveCurrentSlideToMaterial(meta),
+  setCustomUploadHandler,
+  getCustomUploadHandler,
+  slidesComposable: slidesState
+}
+
+// 获取当前插槽实例
+const slots = useSlots()
+
+// 顶部工具栏插槽作用域上下文数据
+const headerSlotContext = computed(() => ({
+  api: editorApi,
+  deck: getDeck(),
+  slides: slidesState.slides.value,
+  activeSlide: slidesState.activeSlide.value || null,
+  activeIndex: slidesState.activeIndex.value,
+  title: presentationTitle.value,
+  setTitle: (newTitle: string) => {
+    presentationTitle.value = newTitle
+  },
+  save,
+  exportPptx,
+  exportJson,
+  exportImages,
+  undo,
+  redo,
+  canUndo: canUndo.value,
+  canRedo: canRedo.value,
+  zoomIn,
+  zoomOut,
+  resetZoom,
+  zoomRatio: slidesState.zoomRatio.value,
+  isMasterEditingView: slidesState.isMasterEditingView.value
+}))
+
+// 对外通过 ref 暴露所有方法
+defineExpose(editorApi)
+
+const computedShowMenu = computed(() => {
+  if (props.showMenu !== undefined) return props.showMenu
+  if (props.config?.showMenu !== undefined) return props.config.showMenu
+  return true
+})
+
+onMounted(async () => {
+  // 触发 ready 事件
+  emit('ready', editorApi)
+
+  // 若启用 MCP 自动拉取
+  if (props.enableMcp) {
+    const params = new URLSearchParams(window.location.search)
+    const deckId = params.get('deckId')
+    const deckPath = params.get('deck')
+    if (deckId || deckPath) {
+      try {
+        const query = deckId
+          ? `deckId=${encodeURIComponent(deckId)}`
+          : `path=${encodeURIComponent(deckPath || '')}`
+        const response = await fetch(`/__mcp_deck?${query}`)
+        if (!response.ok) {
+          throw new Error(await response.text())
+        }
+        const deck = await response.json()
+        loadDeck(deck)
+        notify('已从 MCP 打开可编辑稿')
+      } catch (error: any) {
+        notify(`打开 MCP 稿件失败：${error?.message || error}`)
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="app-container jvs-ppt-editor-root" :class="{ 'is-readonly': readonly }">
+    <!-- Main top Navigation bar (支持完整 header 插槽替换或精细区域插槽定制) -->
+    <slot name="header" v-bind="headerSlotContext">
+      <Header ref="headerRef" v-show="showHeader" :show-menu="computedShowMenu" :slot-props="headerSlotContext">
+        <!-- 左侧前置 (Logo、返回按钮等) -->
+        <template v-if="slots['header-left-prefix']" #left-prefix="sp">
+          <slot name="header-left-prefix" v-bind="sp"></slot>
+        </template>
+
+        <!-- 左侧主体（若外部传了 header-left，则覆盖默认汉堡菜单和标题） -->
+        <template v-if="slots['header-left']" #left="sp">
+          <slot name="header-left" v-bind="sp"></slot>
+        </template>
+
+        <!-- 左侧后置 (文档副标题、状态标签等) -->
+        <template v-if="slots['header-left-suffix']" #left-suffix="sp">
+          <slot name="header-left-suffix" v-bind="sp"></slot>
+        </template>
+
+        <!-- 中间工具栏主体（若外部传了 toolbar 或 header-center，则覆盖默认 Toolbar） -->
+        <template v-if="slots['toolbar'] || slots['header-center']" #center="sp">
+          <slot name="toolbar" v-bind="sp">
+            <slot name="header-center" v-bind="sp"></slot>
+          </slot>
+        </template>
+
+        <!-- 工具栏前置 (插入到撤销按钮前) -->
+        <template v-if="slots['toolbar-prefix']" #toolbar-prefix="sp">
+          <slot name="toolbar-prefix" v-bind="sp"></slot>
+        </template>
+
+        <!-- 工具栏后置 (插入到一键美化按钮后) -->
+        <template v-if="slots['toolbar-suffix']" #toolbar-suffix="sp">
+          <slot name="toolbar-suffix" v-bind="sp"></slot>
+        </template>
+
+        <!-- 右侧前置 (缩放/放映前) -->
+        <template v-if="slots['header-right-prefix']" #right-prefix="sp">
+          <slot name="header-right-prefix" v-bind="sp"></slot>
+        </template>
+
+        <!-- 右侧主体 (保存、导出、分享等自定义按钮) -->
+        <template v-if="slots['header-right']" #right="sp">
+          <slot name="header-right" v-bind="sp"></slot>
+        </template>
+
+        <!-- 右侧后置 (最右侧，放映按钮后) -->
+        <template v-if="slots['header-right-suffix']" #right-suffix="sp">
+          <slot name="header-right-suffix" v-bind="sp"></slot>
+        </template>
+      </Header>
+    </slot>
+
+    <!-- Main Workspace consisting of SidebarLeft, Center Canvas, and SidebarRight -->
+    <main class="app-workspace" :class="{ 'hide-right-sidebar': !activeTab || !showSidebarRight }">
+      <!-- 左侧幻灯片列表 -->
+      <SidebarLeft v-if="showSidebarLeft" class="sidebar-left" />
+      
+      <!-- 中间主画布区 -->
+      <CanvasArea class="canvas-area" />
+
+      <!-- 右侧属性配置栏 -->
+      <SidebarRight v-if="showSidebarRight && !readonly" />
+    </main>
+
+    <!-- Fullscreen slide deck display panel -->
+    <PresentationMode v-if="isPresenting" />
+
+    <!-- Action feedback notifications banner -->
+    <ToastNotification />
+
+    <!-- Global LaTeX Formula Editor Dialog -->
+    <FormulaDialog
+      v-if="!readonly && showFormulaDialog"
+      v-model:visible="formulaDialogVisible"
+      :initialLatex="currentEditingFormulaEl?.latex || ''"
+      @confirm="handleFormulaConfirm"
+    />
+
+    <!-- Global DSL JSON Input Dialog -->
+    <DslInputDialog
+      v-if="!readonly && showDslInputDialog"
+      v-model:visible="dslInputDialogVisible"
+      @confirm="importSlides"
+    />
+
+    <!-- Global AI PPT Streaming Dialog -->
+    <AIPptDialog
+      v-if="!readonly && showAiPptDialog"
+      v-model:visible="aiPptDialogVisible"
+    />
+
+    <!-- Global Unsplash AI Image Search & Insertion Dialog -->
+    <UnsplashImageDialog v-if="!readonly && showUnsplashDialog" />
+  </div>
+</template>
+
+<style scoped>
+.jvs-ppt-editor-root {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 只读模式下的禁用样式微调 */
+.jvs-ppt-editor-root.is-readonly :deep(.action-btn-disabled) {
+  pointer-events: none;
+  opacity: 0.6;
+}
+</style>