jvs-ppt-ui 0.0.8 → 0.0.10

package/package.json

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

package/src/App.vue

@@ -1,53 +1,53 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import PptEditor from './components/PptEditor.vue'
-import type { DeckData, PptEditorApi, UploadResourceContext } from './types'
-
-const editorRef = ref<PptEditorApi | null>(null)
-
-function handleSave(deck: DeckData) {
-  console.log('[JVS-PPT 独立运行模式] 保存幻灯片:', deck)
-}
-
-function handleReady(api: PptEditorApi) {
-  console.log('[JVS-PPT 独立运行模式] 编辑器初始化完成:', api)
-}
-
-/**
- * 模拟资源上传函数
- * 覆盖场景：导入 PPTX/JSON、上传图片、视频、音频、剪贴板粘贴、占位符上传、背景上传等
- */
-async function handleCustomUpload(fileOrBlob: File | Blob, context: UploadResourceContext): Promise<string> {
-  console.log('[模拟自定义上传函数触发] 接收到待上传资源:', {
-    type: context.type,        // 资源类型: 'image' | 'video' | 'audio'
-    source: context.source,    // 触发来源: 'file-upload' | 'pptx-import' | 'json-import' | 'paste' | 'placeholder' | 'background'
-    filename: context.filename,
-    size: `${(fileOrBlob.size / 1024).toFixed(2)} KB`,
-    fileOrBlob
-  })
-
-  // 1. 模拟网络上传请求耗时
-  await new Promise(resolve => setTimeout(resolve, 300))
-
-  // 2. 实际业务生产代码范例：
-  // const formData = new FormData()
-  // formData.append('file', fileOrBlob, context.filename || `upload_${Date.now()}`)
-  // formData.append('type', context.type)
-  // const res = await fetch('/api/oss/upload', { method: 'POST', body: formData }).then(r => r.json())
-  // return res.data.url
-
-  // 3. 模拟环境：生成可正常渲染的地址作为模拟的服务器返回 URL
-  const mockServerUrl = URL.createObjectURL(fileOrBlob)
-  console.log(`[模拟上传成功] 已返回服务器文件地址:`, mockServerUrl)
-  return mockServerUrl
-}
-</script>
-
-<template>
-  <!-- :custom-upload="handleCustomUpload" -->
-  <PptEditor ref="editorRef" :custom-upload="handleCustomUpload" :enable-mcp="true" :enable-ai="true"
-    ai-api-url="/jvs-dam/api/ppt/ai-replace" :enable-material="true"
-    material-tree-api-url="/jvs-dam/api/dam/material/tree" material-page-api-url="/jvs-dam/api/dam/material/page"
-    material-api-url="/jvs-dam/api/dam/material/tree" material-save-api-url="/jvs-dam/api/dam/material/save"
-    @save="handleSave" @ready="handleReady" />
-</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import PptEditor from './components/PptEditor.vue'
+import type { DeckData, PptEditorApi, UploadResourceContext } from './types'
+
+const editorRef = ref<PptEditorApi | null>(null)
+
+function handleSave(deck: DeckData) {
+  console.log('[JVS-PPT 独立运行模式] 保存幻灯片:', deck)
+}
+
+function handleReady(api: PptEditorApi) {
+  console.log('[JVS-PPT 独立运行模式] 编辑器初始化完成:', api)
+}
+
+/**
+ * 模拟资源上传函数
+ * 覆盖场景：导入 PPTX/JSON、上传图片、视频、音频、剪贴板粘贴、占位符上传、背景上传等
+ */
+async function handleCustomUpload(fileOrBlob: File | Blob, context: UploadResourceContext): Promise<string> {
+  console.log('[模拟自定义上传函数触发] 接收到待上传资源:', {
+    type: context.type,        // 资源类型: 'image' | 'video' | 'audio'
+    source: context.source,    // 触发来源: 'file-upload' | 'pptx-import' | 'json-import' | 'paste' | 'placeholder' | 'background'
+    filename: context.filename,
+    size: `${(fileOrBlob.size / 1024).toFixed(2)} KB`,
+    fileOrBlob
+  })
+
+  // 1. 模拟网络上传请求耗时
+  await new Promise(resolve => setTimeout(resolve, 300))
+
+  // 2. 实际业务生产代码范例：
+  // const formData = new FormData()
+  // formData.append('file', fileOrBlob, context.filename || `upload_${Date.now()}`)
+  // formData.append('type', context.type)
+  // const res = await fetch('/api/oss/upload', { method: 'POST', body: formData }).then(r => r.json())
+  // return res.data.url
+
+  // 3. 模拟环境：生成可正常渲染的地址作为模拟的服务器返回 URL
+  const mockServerUrl = URL.createObjectURL(fileOrBlob)
+  console.log(`[模拟上传成功] 已返回服务器文件地址:`, mockServerUrl)
+  return mockServerUrl
+}
+</script>
+
+<template>
+  <!-- :custom-upload="handleCustomUpload" -->
+  <PptEditor ref="editorRef" :custom-upload="handleCustomUpload" :enable-mcp="true" :enable-ai="true"
+    ai-api-url="/jvs-dam/api/ppt/ai-replace" :enable-material="true"
+    material-tree-api-url="/jvs-dam/api/dam/material/tree" material-page-api-url="/jvs-dam/api/dam/material/page"
+    material-api-url="/jvs-dam/api/dam/material/tree" material-save-api-url="/jvs-dam/api/dam/material/save"
+    @save="handleSave" @ready="handleReady" />
+</template>

package/src/components/AIPptDialog.vue

@@ -2,6 +2,7 @@
 import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
 import { useSlides } from '../composables/useSlides'
 import { compileSchemaToSlides } from '../utils/dslCompiler'
+import { ensurePptxShapes } from '../utils/pptxShapesLazy'
 
 const props = defineProps<{
   visible: boolean
@@ -352,6 +353,7 @@ const startGenerating = async () => {
 
       streamCodeText.value += `> PPTX 解析完成，正在绑定排版与动画...\n`
 
+      await ensurePptxShapes() // 解析 PPTist 原生格式前确保形状预设表就绪
       let parsedResult: any = null
       const currentParser = pptParserFn()
       if (currentParser) {

package/src/components/CanvasArea.vue

@@ -3,7 +3,7 @@ import { ref, watch, onMounted, onUnmounted, nextTick, computed } from 'vue'
 import { useSlides, sanitizeNbspInHtml } from '../composables/useSlides'
 import SvgChart from './SvgChart.vue'
 import { SHAPE_LIST as CAT_SHAPE_LIST } from '../utils/shapes'
-import { SHAPE_PATH_FORMULAS } from '../utils/pptxShapes'
+import { shapeFormulas } from '../utils/pptxShapesLazy'
 import { promoteListIndentation, restoreParagraphIndentation, collectBlockIndents, convertListElements, reapplyMissingListIndents, removeListStyle, mergeAdjacentSameTagLists, isContentListDominated, formatListStyleTypeForCss, snapSelectionStartToNextBlock, rangeTextLengthIn, collectBlockStyles, reapplyBlockStylesToListItems } from '../utils/listIndent'
 import CanvasContextMenu from './canvas/CanvasContextMenu.vue'
 import CanvasSmartGuides from './canvas/CanvasSmartGuides.vue'
@@ -19,7 +19,7 @@ import CanvasSymbolPanel from './canvas/panels/CanvasSymbolPanel.vue'
 import CanvasSearchPanel from './canvas/panels/CanvasSearchPanel.vue'
 import CanvasSelectionPanel from './canvas/panels/CanvasSelectionPanel.vue'
 
-import { useCanvasTable } from '../composables/canvas/useCanvasTable'
+import { useCanvasTable, cleanTableDOMForSaving } from '../composables/canvas/useCanvasTable'
 import { useCanvasAlignment } from '../composables/canvas/useCanvasAlignment'
 import { useCanvasShortcuts } from '../composables/canvas/useCanvasShortcuts'
 import { useCanvasContextMenu } from '../composables/canvas/useCanvasContextMenu'
@@ -61,7 +61,7 @@ const {
   activeSlide, selectedElementId, selectedElementIds, deleteElement, combineElements, uncombineElement, updateGroupBounds, zoomRatio, fitTrigger, activeTool, pendingTextType, pendingShapeSubtype, pendingShapeViewBox, pendingLineContent, activeIndex, slides, undo, redo, notify,
   showSearchPanel, showSelectionPanel, activeSearchTab, searchText, replaceText, isCaseSensitive, searchResults, currentResultIndex,
   nextSearchMatch, prevSearchMatch, replaceCurrent, replaceAll, formulaDialogVisible, currentEditingFormulaEl, renderLatexToSvg,
-  editingElementId, symbolPanelVisible, addElement, isPresenting, startPresentation, clipboard, slideClipboard, pasteSlideData, pasteElementsData, handleUnifiedPaste, shapeFormatPainter,
+  editingElementId, symbolPanelVisible, addElement, isPresenting, startPresentation, clipboard, slideClipboard, pasteSlideData, pasteElementsData, copySelectedElements, handleUnifiedPaste, shapeFormatPainter,
   activeTab: activeTabRaw, isOpenedFromFloatToolbar, formatedAnimations, logicalWidth, logicalHeight, pauseHistory, isCanvasDragging, activeSlideVersion, addHistorySnapshot, normalizeHtmlFontFamily,
   globalThemeColor, globalFontColor, globalFontFamily, globalBgColor, getActiveSlideThemeRecipe, croppingElementId,
   isMasterEditingView, slideMasters, activeMasterId, activeLayoutId, activeLayout, sortSlideElements,
@@ -142,6 +142,26 @@ const viewportContainerRef = ref<HTMLElement | null>(null)
 let viewportResizeObserver: ResizeObserver | null = null
 const selectedElementWidth = ref('0px')
 const selectedElementHeight = ref('0px')
+
+// 拖拽期间全局图元尺寸缓存池：彻底消除拖动期间的 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()
+  cachedRenderElements = []
+  cachedRenderElementsSlideId = ''
+  cachedRenderElementsCount = -1
+  masterCacheMap.clear()
+})
+if (typeof document !== 'undefined' && (document as any).fonts?.ready) {
+  ;(document as any).fonts.ready.then(() => {
+    elementDimCache = new WeakMap()
+  }).catch(() => {})
+}
+
 const isDraggingLine = ref(false)
 const isDraggingChild = ref(false)
 const isDraggingLineControlPoint = ref(false)
@@ -231,6 +251,7 @@ const {
   selectElement: (id: string, e?: MouseEvent) => selectElement(id, e),
   updateSelectionBorders: (tableEl: HTMLTableElement) => updateSelectionBorders(tableEl),
   deleteElement: (id: string) => deleteElement(id),
+  copySelectedElements: () => copySelectedElements(),
   handleUnifiedPaste: () => handleUnifiedPaste(),
   getElementPixels: (el: any) => getElementPixels(el),
   notify
@@ -344,7 +365,6 @@ const {
   getSelectionBounds,
   expandSelection,
   updateSelectionBorders,
-  cleanTableDOMForSaving,
   doSelectColumn,
   selectColumnCells,
   doSelectRow,
@@ -581,6 +601,8 @@ const {
   logicalWidth,
   logicalHeight,
   getElementPixels: (el: any) => getElementPixels(el),
+  findElementInSlide: (id: any) => findElementInSlide(id),
+  findParentGroup: (id: any) => findParentGroup(id),
   addHistorySnapshot
 })
 
@@ -962,21 +984,6 @@ function getResizeCursor(handle: string, el: any) {
   return getHandleCursor(handle, el?.style?.rotate || 0, !!el?.style?.flipH, !!el?.style?.flipV)
 }
 
-// 拖拽期间全局图元尺寸缓存池：彻底消除拖动期间的 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')
@@ -1451,6 +1458,9 @@ function fitToScreen() {
   const ch = viewportContainerRef.value.clientHeight
 
   const padding = 60
+  // 防御：若容器正在过渡动画或不可见时，clientWidth/Height 为 0 或 <= padding，此时绝不能计算并将 zoomRatio 设为 20%
+  if (cw <= padding || ch <= padding) return
+
   const scale = Math.min((cw - padding) / logicalWidth.value, (ch - padding) / logicalHeight.value)
   const targetZoom = Math.max(20, Math.min(200, Math.round(scale * 100)))
 
@@ -1551,6 +1561,17 @@ watch(selectedElementId, (newId, oldId) => {
         }
         if (oldEl.type === 'shape') oldEl.text = htmlVal
         else {
+          // 表格：退出编辑存档前剥离编辑态运行时属性（contenteditable/选区边框等），
+          // 否则会烙进 content（退出后单元格仍可聚焦、蓝边框残留）
+          if (htmlVal.includes('<table')) {
+            const div = document.createElement('div')
+            div.innerHTML = htmlVal
+            const tableEl = div.querySelector('table')
+            if (tableEl) {
+              cleanTableDOMForSaving(tableEl)
+              htmlVal = div.innerHTML
+            }
+          }
           oldEl.content = htmlVal
           if (!isMasterOrPlaceholder(oldEl) && oldContainer.offsetHeight > 0) {
             oldEl.height = `${oldContainer.offsetHeight}px`
@@ -1852,6 +1873,11 @@ onUnmounted(() => {
   if (selectedElementResizeObserver) {
     selectedElementResizeObserver.disconnect()
   }
+  cachedRenderElements = []
+  cachedRenderElementsSlideId = ''
+  cachedRenderElementsCount = -1
+  masterCacheMap.clear()
+  activeDragDimensions.clear()
 })
 
 function handleWindowMouseDown(e: MouseEvent) {
@@ -2763,7 +2789,7 @@ function handleCanvasMouseDown(e: MouseEvent) {
       if (match.keypoints) {
         keypoints = [...match.keypoints]
       } else {
-        const formulaObj = SHAPE_PATH_FORMULAS[match.pathFormula]
+        const formulaObj = shapeFormulas()[match.pathFormula]
         if (formulaObj && formulaObj.defaultValue) {
           keypoints = [...formulaObj.defaultValue]
         }
@@ -2899,7 +2925,7 @@ function updateCreationPosition(e: MouseEvent) {
     createdElement.style.width = `${widthPx.toFixed(0)}px`
     createdElement.style.height = `${heightPx.toFixed(0)}px`
     if (createdElement.pathFormula) {
-      const formulaObj = SHAPE_PATH_FORMULAS[createdElement.pathFormula]
+      const formulaObj = shapeFormulas()[createdElement.pathFormula]
       if (formulaObj) {
         const logicalW = parseFloat(createdElement.style.width) || 120
         const logicalH = parseFloat(createdElement.style.height) || 120
@@ -3021,7 +3047,7 @@ function stopCreationDrag() {
         if (match.keypoints) {
           createdElement.keypoints = [...match.keypoints]
         } else {
-          const formulaObj = SHAPE_PATH_FORMULAS[match.pathFormula]
+          const formulaObj = shapeFormulas()[match.pathFormula]
           if (formulaObj && formulaObj.defaultValue) {
             createdElement.keypoints = [...formulaObj.defaultValue]
           }
@@ -3029,7 +3055,7 @@ function stopCreationDrag() {
       }
       // If shape has path formula, generate initial correct path and viewBox
       if (createdElement.pathFormula) {
-        const formulaObj = SHAPE_PATH_FORMULAS[createdElement.pathFormula]
+        const formulaObj = shapeFormulas()[createdElement.pathFormula]
         if (formulaObj) {
           const logicalW = parseFloat(createdElement.style.width) || 120
           const logicalH = parseFloat(createdElement.style.height) || 120
@@ -3086,6 +3112,9 @@ function stopCreationDrag() {
     }
 
     activeSlide.value.elements.push(createdElement)
+    if (createdElement.type === 'line' && (createdElement.startConnection || createdElement.endConnection)) {
+      syncSlideConnections(activeSlide.value, logicalWidth.value, logicalHeight.value, [createdElement.id])
+    }
     selectedElementId.value = createdElement.id
     selectedElementIds.value = [createdElement.id]
     justCreatedElement = true
@@ -3628,12 +3657,25 @@ function handleElementDblClick(e: MouseEvent, el: any) {
       target = activeSelectedEl
     }
   }
+  // 已在编辑该元素时的双击 = 原生选词，保持选区不重进编辑
+  // （重跑 startEditingShapeText 会覆盖 initialTextContent 变更基线）
+  if (isEditingText.value && (selectedElementId.value === target.id || editingElementId?.value === target.id)) {
+    return
+  }
   if (isImagePlaceholder(target)) {
     triggerPlaceholderImageUpload(target.id)
   } else if (target.type === 'shape') {
     startEditingShapeText(target, e)
   } else if (target.type === 'text') {
-    startEditingTextElement(target.id, e)
+    if (target.content?.includes?.('<table')) {
+      // 表格元素必须走 handleTableDblClick（td 动态设 contenteditable）；
+      // startEditingTextElement 对表格无效——容器 contenteditable=false、焦点落
+      // BODY，表现为"双击后进入了编辑态却打不了字"。真实双击常因两击间选中态
+      // 重渲染被重定向到 .main-slide，经四层兜底进到这里
+      handleTableDblClick(e, target)
+    } else {
+      startEditingTextElement(target.id, e)
+    }
   }
 }
 
@@ -4033,6 +4075,10 @@ function handleChildClick(e: MouseEvent, child: any, parentGroup: any) {
 function handleChildDblClick(e: MouseEvent, child: any, parentGroup: any) {
   e.stopPropagation()
   if (isLockedMasterElement(child)) return
+  // 已在编辑该子元素时的双击 = 原生选词，保持选区不重进编辑
+  if (isEditingText.value && (selectedElementId.value === child.id || editingElementId?.value === child.id)) {
+    return
+  }
   if (child.type === 'group') {
     const rootGroup = getRootParentGroup(child) || parentGroup
     selectElement(rootGroup.id, e)
@@ -4127,7 +4173,7 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
   if (!el || typeof el !== 'object') return { width: 200, height: 100 }
 
   // 拖拽中优先从尺寸缓存中直接获取，0 次 DOM 读取与回流
-  if (isDragging.value && el.id && activeDragDimensions.has(el.id)) {
+  if (isDragging.value && el.id && typeof activeDragDimensions !== 'undefined' && activeDragDimensions?.has(el.id)) {
     return activeDragDimensions.get(el.id)!
   }
 
@@ -4161,7 +4207,7 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
   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)
+  const dimCached = (typeof elementDimCache !== 'undefined' && elementDimCache) ? elementDimCache.get(el) : undefined
   if (dimCached && dimCached.sig === dimSig) return dimCached.dims
 
   if (!isWPercent && !isHPercent && wStr && hStr && wStr !== 'auto' && hStr !== 'auto') {
@@ -4204,7 +4250,7 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
   // 关键：拖拽期间绝不查询 DOM，杜绝强制重排
   const dom = isDragging.value ? null : (document.getElementById(`canvas-el-${el.id}`) || document.getElementById(`editable-${el.id}`))
 
-  if (el.id === selectedElementId.value && !isResizing.value) {
+  if (el.id === selectedElementId.value && !isResizing.value && el.type !== 'group') {
     if (selectedElementWidth.value && selectedElementWidth.value !== '0px') {
       const parsedW = parseFloat(selectedElementWidth.value)
       if (!isNaN(parsedW) && parsedW > 0) width = parsedW
@@ -4260,7 +4306,9 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
   }
 
   const dims = { width, height }
-  elementDimCache.set(el, { sig: dimSig, dims })
+  if (typeof elementDimCache !== 'undefined' && elementDimCache) {
+    elementDimCache.set(el, { sig: dimSig, dims })
+  }
   return dims
 }
 
@@ -4575,14 +4623,37 @@ function startDrag(e: MouseEvent, el: any) {
     : selectedEls
 
   // 检查是否有连线需要同步，避免无连线时每帧循环
-  const selIds = new Set(selectedElementIds.value)
-  hasConnectionsToSync = (activeSlide.value?.elements || []).some((it: any) =>
-    it && it.type === 'line' && (
-      selIds.has(it.id) ||
-      (it.startConnection && selIds.has(it.startConnection.id)) ||
-      (it.endConnection && selIds.has(it.endConnection.id))
-    )
-  )
+  const selIds = new Set<string>(selectedElementIds.value)
+  if (Array.isArray(targetIds)) targetIds.forEach(id => selIds.add(id))
+  dragTargetEls.forEach((item: any) => {
+    if (item?.id) selIds.add(item.id)
+    if (item?.type === 'group' && Array.isArray(item.elements)) {
+      const addChildren = (children: any[]) => {
+        children.forEach(ch => {
+          if (ch?.id) selIds.add(ch.id)
+          if (ch?.type === 'group' && Array.isArray(ch.elements)) addChildren(ch.elements)
+        })
+      }
+      addChildren(item.elements)
+    }
+  })
+  const checkHasConnection = (elements: any[]): boolean => {
+    for (const it of elements) {
+      if (!it) continue
+      if (it.type === 'line' && (
+        selIds.has(it.id) ||
+        (it.startConnection && selIds.has(it.startConnection.id)) ||
+        (it.endConnection && selIds.has(it.endConnection.id))
+      )) {
+        return true
+      }
+      if (it.type === 'group' && Array.isArray(it.elements)) {
+        if (checkHasConnection(it.elements)) return true
+      }
+    }
+    return false
+  }
+  hasConnectionsToSync = checkHasConnection(activeSlide.value?.elements || [])
 
   // Record drag states
   dragStates = dragTargetEls.map((item: any) => {
@@ -4828,7 +4899,8 @@ function stopDrag(e?: any) {
   } finally {
     isDragging.value = false
     isCanvasDragging.value = false
-    activeSlideVersion.value++
+    // 不再显式 bump activeSlideVersion：真实拖拽变更经下方 5000/5003 的 addHistorySnapshot
+    // 落盘时统一 bump；纯点击选中无页面状态变化（选中态本就在画布 v-memo 签名里），无需全量失效
     activeDragDimensions.clear()
     hasConnectionsToSync = false
     dragStates = []
@@ -4978,7 +5050,7 @@ const selectedElementKeypoints = computed(() => {
   const el = selectedElement.value
   if (!el.pathFormula || !el.keypoints || !Array.isArray(el.keypoints)) return []
 
-  const formulaObj = SHAPE_PATH_FORMULAS[el.pathFormula as string]
+  const formulaObj = shapeFormulas()[el.pathFormula as string]
   if (!formulaObj) return []
 
   const geom = getElementPixels(el)
@@ -5487,7 +5559,8 @@ function changeQuickFontSize(el: any, size: string) {
     }
   }
   size = formattedSize
-  const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+  // 嵌套感知解析：组合内子元素也要能命中（findElementInSlide 走 elementMaps，含组内子元素）
+  const els = selectedElementIds.value.map((id: string) => findElementInSlide(id)).filter((e: any) => Boolean(e))
   if (els.length === 0) return
 
   // 1. First check if there are selected cells (cell-level selection)
@@ -5663,7 +5736,8 @@ function changeQuickTextAlign(el: any, align: string) {
   }
 
   if (selectedElementIds.value.length > 1 && activeSlide.value) {
-    const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+    // 嵌套感知解析：组合内子元素也要能命中（findElementInSlide 走 elementMaps，含组内子元素）
+  const els = selectedElementIds.value.map((id: string) => findElementInSlide(id)).filter((e: any) => Boolean(e))
     els.forEach((item: any) => {
       if (item.style) item.style.textAlign = align
       syncHtmlAlign(item)
@@ -5678,7 +5752,8 @@ function changeQuickTextAlign(el: any, align: string) {
 function changeQuickVerticalAlign(el: any, align: string) {
   if (!el || !el.style) return
   if (selectedElementIds.value.length > 1 && activeSlide.value) {
-    const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+    // 嵌套感知解析：组合内子元素也要能命中（findElementInSlide 走 elementMaps，含组内子元素）
+  const els = selectedElementIds.value.map((id: string) => findElementInSlide(id)).filter((e: any) => Boolean(e))
     els.forEach((item: any) => {
       if (item.style) item.style.verticalAlign = align
     })
@@ -5692,7 +5767,8 @@ function toggleQuickBold(el: any) {
   if (!el || !el.style) return
   const targetState = el.style.fontWeight === 'bold' ? 'normal' : 'bold'
   if (selectedElementIds.value.length > 1 && activeSlide.value) {
-    const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+    // 嵌套感知解析：组合内子元素也要能命中（findElementInSlide 走 elementMaps，含组内子元素）
+  const els = selectedElementIds.value.map((id: string) => findElementInSlide(id)).filter((e: any) => Boolean(e))
     els.forEach((item: any) => {
       if (item.style) item.style.fontWeight = targetState
     })
@@ -5706,7 +5782,8 @@ function toggleQuickItalic(el: any) {
   if (!el || !el.style) return
   const targetState = el.style.fontStyle === 'italic' ? 'normal' : 'italic'
   if (selectedElementIds.value.length > 1 && activeSlide.value) {
-    const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+    // 嵌套感知解析：组合内子元素也要能命中（findElementInSlide 走 elementMaps，含组内子元素）
+  const els = selectedElementIds.value.map((id: string) => findElementInSlide(id)).filter((e: any) => Boolean(e))
     els.forEach((item: any) => {
       if (item.style) item.style.fontStyle = targetState
     })
@@ -5735,7 +5812,8 @@ function toggleQuickUnderline(el: any) {
   const hasUnderline = (el.style.textDecoration || '').includes('underline')
   const decorator = 'underline'
   if (selectedElementIds.value.length > 1 && activeSlide.value) {
-    const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+    // 嵌套感知解析：组合内子元素也要能命中（findElementInSlide 走 elementMaps，含组内子元素）
+  const els = selectedElementIds.value.map((id: string) => findElementInSlide(id)).filter((e: any) => Boolean(e))
     els.forEach((item: any) => {
       if (item.style) {
         const current = item.style.textDecoration || ''
@@ -5761,7 +5839,8 @@ function toggleQuickStrikethrough(el: any) {
   const hasLineThrough = (el.style.textDecoration || '').includes('line-through')
   const decorator = 'line-through'
   if (selectedElementIds.value.length > 1 && activeSlide.value) {
-    const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+    // 嵌套感知解析：组合内子元素也要能命中（findElementInSlide 走 elementMaps，含组内子元素）
+  const els = selectedElementIds.value.map((id: string) => findElementInSlide(id)).filter((e: any) => Boolean(e))
     els.forEach((item: any) => {
       if (item.style) {
         const current = item.style.textDecoration || ''
@@ -7206,16 +7285,13 @@ function handleGlobalCopy(e: ClipboardEvent) {
 
   if (!activeSlide.value) return
 
-  const copied = activeSlide.value.elements
-    .filter(el => selectedElementIds.value.includes(el.id))
-    .map(el => JSON.parse(JSON.stringify(el)))
-
-  clipboard.value = copied
-  slideClipboard.value = null
-  e.clipboardData?.setData('text/plain', JSON.stringify(copied))
-  e.preventDefault()
-  e.stopPropagation()
-  notify(`已复制 ${copied.length} 个元素`)
+  const payload = copySelectedElements()
+  if (payload) {
+    e.clipboardData?.setData('text/plain', JSON.stringify(payload))
+    e.preventDefault()
+    e.stopPropagation()
+    notify(`已复制 ${payload.data.length} 个元素`)
+  }
 }
 
 function handleGlobalCut(e: ClipboardEvent) {
@@ -7252,22 +7328,19 @@ function handleGlobalCut(e: ClipboardEvent) {
 
   if (!activeSlide.value) return
 
-  const copied = activeSlide.value.elements
-    .filter(el => selectedElementIds.value.includes(el.id))
-    .map(el => JSON.parse(JSON.stringify(el)))
-
-  clipboard.value = copied
-  slideClipboard.value = null
-  e.clipboardData?.setData('text/plain', JSON.stringify(copied))
-  e.preventDefault()
-  e.stopPropagation()
+  const payload = copySelectedElements()
+  if (payload) {
+    e.clipboardData?.setData('text/plain', JSON.stringify(payload))
+    e.preventDefault()
+    e.stopPropagation()
 
-  selectedElementIds.value.forEach(id => {
-    deleteElement(id)
-  })
-  selectedElementIds.value = []
-  selectedElementId.value = null
-  notify(`已剪切 ${copied.length} 个元素`)
+    selectedElementIds.value.forEach(id => {
+      deleteElement(id)
+    })
+    selectedElementIds.value = []
+    selectedElementId.value = null
+    notify(`已剪切 ${payload.data.length} 个元素`)
+  }
 }
 
 function extractImagesAndTextFromRawString(rawStr: string): { imageSources: string[]; remainingText: string } {
@@ -7428,6 +7501,14 @@ async function handleGlobalPaste(e: ClipboardEvent) {
         pasteSlideData(data.data, activeIndex.value)
         return
       }
+      if (data && data.type === 'elements' && Array.isArray(data.data) && data.data.length > 0) {
+        e.preventDefault()
+        e.stopPropagation()
+        clipboard.value = data.data
+        slideClipboard.value = null
+        pasteElementsData(data.data, { sourceWidth: data.sourceWidth, sourceHeight: data.sourceHeight })
+        return
+      }
       if (Array.isArray(data) && data.length > 0 && data[0].type && data[0].style) {
         e.preventDefault()
         e.stopPropagation()
@@ -7809,6 +7890,8 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                     v-else-if="replica.el.type === 'group'"
                     :element="replica.el"
                     :active-slide="activeSlide"
+                    :parent-width-px="logicalWidth"
+                    :parent-height-px="logicalHeight"
                     :is-selected="false"
                     :selected-element-id="null"
                     :selected-child-id="null"
@@ -7920,8 +8003,12 @@ async function handleGlobalPaste(e: ClipboardEvent) {
               v-show="el.visible !== false"
               v-memo="[
                 (isDragging || isCanvasDragging)
-                  ? (selectedElementIds.includes(el.id) ? `${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}` : 'frozen')
-                  : `${el.id}_${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}_${selectedElementIds.includes(el.id)}_${selectedElementId === el.id}_${isEditingText}_${activeTab}_${activeSlideVersion}`
+                  ? (selectedElementIds.includes(el.id)
+                      ? `${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}`
+                      : (el.type === 'line'
+                          ? `${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.start?.join(',')}_${el.end?.join(',')}_${el.broken?.join(',')}_${el.broken2?.join(',')}_${el.curve?.join(',')}`
+                          : 'frozen'))
+                  : `${el.id}_${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}_${el.type === 'line' ? `${el.start?.join(',')}_${el.end?.join(',')}_${el.broken?.join(',')}_${el.broken2?.join(',')}_${el.curve?.join(',')}_` : ''}${selectedElementIds.includes(el.id)}_${selectedElementId === el.id}_${isEditingText}_${activeTab}_${activeSlideVersion}`
               ]"
               :class="{
                 selected: selectedElementIds.includes(el.id),
@@ -8938,6 +9025,11 @@ async function handleGlobalPaste(e: ClipboardEvent) {
   outline: none !important;
 }
 
+/* 焦点（光标）所在的唯一选中格：不显示选中蒙层 */
+:deep(td.selected-cell.focused-cell) {
+  background-image: none !important;
+}
+
 /* ================= 版式实时切换测试控制面板样式 ================= */
 .layout-test-floating-panel {
   position: absolute;