jvs-ppt-ui 0.0.14 → 0.0.16

package/src/composables/canvas/useCanvasShortcuts.ts

@@ -91,6 +91,20 @@ export function useCanvasShortcuts(options: ShortcutsOptions) {
   function handleGlobalKeyDown(e: KeyboardEvent) {
     if (e.defaultPrevented) return
 
+    // 如果焦点在输入框、文本域或富文本编辑区（无论是在 PPT 内部还是在外部宿主中），绝不拦截原生输入行为
+    const activeEl = document.activeElement as HTMLElement | null
+    const target = (e.target || activeEl) as HTMLElement | null
+    if (
+      target &&
+      (target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable ||
+        target.getAttribute('contenteditable') === 'true' ||
+        target.closest?.('input, textarea, [contenteditable="true"]'))
+    ) {
+      return
+    }
+
     if (isReadonly?.value) {
       if (e.key === 'F5') {
         e.preventDefault()
@@ -270,13 +284,13 @@ export function useCanvasShortcuts(options: ShortcutsOptions) {
     if (isEditingText.value) return
 
     // Prevent deleting slides or moving elements when editing other standard input elements
-    const activeEl = document.activeElement as HTMLElement | null
+    const currentActiveEl = document.activeElement as HTMLElement | null
     if (
-      activeEl &&
-      (activeEl.tagName === 'INPUT' ||
-        activeEl.tagName === 'TEXTAREA' ||
-        activeEl.isContentEditable ||
-        activeEl.getAttribute('contenteditable') === 'true')
+      currentActiveEl &&
+      (currentActiveEl.tagName === 'INPUT' ||
+        currentActiveEl.tagName === 'TEXTAREA' ||
+        currentActiveEl.isContentEditable ||
+        currentActiveEl.getAttribute('contenteditable') === 'true')
     ) {
       return
     }

package/src/composables/canvas/useCanvasText.ts

@@ -385,7 +385,7 @@ export function useCanvasText(options: TextOptions) {
           if (container) {
             container.innerHTML = isShape ? (isSvgPathString(templateDefault) ? '' : templateDefault) : templateDefault
           }
-        } else if (prevEl.type === 'text') {
+        } else if (prevEl.type === 'text' && (!clickedEl || clickedEl.id !== prevEl.id)) {
           activeSlide.value.elements = activeSlide.value.elements.filter((x: any) => x.id !== prevEl.id)
           if (selectedElementId.value === prevEl.id) {
             selectedElementId.value = null

package/src/composables/canvas/useCanvasTransform.ts

@@ -47,6 +47,7 @@ export interface CanvasTransformOptions {
   updateLineGeometry?: (el: any, start: [number, number], end: [number, number], absControls?: any, allElements?: any[], parentGroupDim?: { left: number; top: number; width: number; height: number }) => void
   selectedElementWidth?: Ref<string>
   selectedElementHeight?: Ref<string>
+  activeSlideVersion?: Ref<number>
 }
 
 export function useCanvasTransform(options: CanvasTransformOptions) {
@@ -349,9 +350,31 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
         if (typeof item.height === 'number') item.height = newH
       }
 
+      if (item.type === 'shape' && item.pathFormula === 'roundRect') {
+        const formulaObj = shapeFormulas()[item.pathFormula]
+        if (formulaObj && typeof formulaObj.formula === 'function') {
+          const kps = Array.isArray(item.keypoints) && item.keypoints.length > 0
+            ? item.keypoints
+            : (formulaObj.defaultValue ? [...formulaObj.defaultValue] : [0.125])
+          item.viewBox = [newW, newH]
+          const newPath = formulaObj.formula(newW, newH, kps)
+          item.content = newPath
+          item.path = newPath
+        }
+      }
+
       // Auto-update font scaling for autoFit text boxes
       updateTextFontScale(item)
 
+      if (selectedElementId.value === item.id) {
+        if (options.selectedElementWidth && !isAutoWidthText) {
+          options.selectedElementWidth.value = `${newW.toFixed(1)}px`
+        }
+        if (options.selectedElementHeight && !isAutoHeightText) {
+          options.selectedElementHeight.value = `${newH.toFixed(1)}px`
+        }
+      }
+
       // Real-time table resize handling
       if (item.type === 'text' && item.content && typeof item.content === 'string' && item.content.includes('<table')) {
         const canvasDom = document.getElementById(`canvas-el-${item.id}`)
@@ -431,6 +454,12 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
 
     for (const state of resizeStates) {
       const item = state.el
+      if (item && selectedElementId.value === item.id) {
+        const curW = item.style?.width && item.style.width !== 'auto' ? parseFloat(item.style.width) : (typeof item.width === 'number' ? item.width : 0)
+        const curH = item.style?.height && item.style.height !== 'auto' ? parseFloat(item.style.height) : (typeof item.height === 'number' ? item.height : 0)
+        if (options.selectedElementWidth && curW > 0) options.selectedElementWidth.value = `${curW}px`
+        if (options.selectedElementHeight && curH > 0) options.selectedElementHeight.value = `${curH}px`
+      }
       if (item && item.type === 'text' && item.content && typeof item.content === 'string' && item.content.includes('<table')) {
         const container = document.getElementById(`editable-${item.id}`)
         if (container) {
@@ -455,6 +484,7 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
     if (isCanvasDragging) isCanvasDragging.value = false
     pauseHistory.value = false
     addHistorySnapshot()
+    if (options.activeSlideVersion) options.activeSlideVersion.value++
 
     currentElement.value = null
     resizeStates = []
@@ -566,6 +596,7 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
     if (isCanvasDragging) isCanvasDragging.value = false
     pauseHistory.value = false
     addHistorySnapshot()
+    if (options.activeSlideVersion) options.activeSlideVersion.value++
   }
 
   function startDragKeypoint(e: MouseEvent, el: any, index: number) {
@@ -627,6 +658,9 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
     const geom = getElementPixels(curEl)
     const actualW = geom.width || 200
     const actualH = geom.height || 200
+    if (curEl.pathFormula === 'roundRect') {
+      curEl.viewBox = [actualW, actualH]
+    }
     const viewBoxW = curEl.viewBox?.[0] || 200
     const viewBoxH = curEl.viewBox?.[1] || 200
 
@@ -1030,6 +1064,14 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
     const newPath = formulaObj.formula(viewBoxW, viewBoxH, curEl.keypoints)
     curEl.content = newPath
     curEl.path = newPath
+    if (curEl.pathFormula === 'roundRect') {
+      if (curEl.style && curEl.style.borderRadius !== undefined) {
+        delete curEl.style.borderRadius
+      }
+      if (curEl.radius !== undefined) {
+        delete curEl.radius
+      }
+    }
   
     const parentGroup = findParentGroup(curEl.id)
     if (parentGroup && parentGroup.elements) {
@@ -1057,6 +1099,7 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
     currentElement.value = null
     pauseHistory.value = false
     addHistorySnapshot()
+    if (options.activeSlideVersion) options.activeSlideVersion.value++
   }
 
   function startDragLinePoint(e: MouseEvent, el: any, type: 'start' | 'end') {
@@ -1264,6 +1307,7 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
     }
     pauseHistory.value = false
     addHistorySnapshot()
+    if (options.activeSlideVersion) options.activeSlideVersion.value++
   }
 
   return {

package/src/composables/presetThemes.ts

@@ -69,20 +69,20 @@ export interface StyleRecipe {
 }
 
 export const defaultStyleRecipe: StyleRecipe = {
-  id: 'default-recipe',
-  name: 'Template PresentationGO',
-  styleColors: ['#ea580c', '#1e293b', '#475569', '#cbd5e1', '#f97316', '#10b981', '#6366f1', '#0ea5e9'],
+  id: 'tech-blue',
+  name: '商务科技蓝',
+  styleColors: ['#2563eb', '#1d4ed8', '#0284c7', '#0ea5e9', '#38bdf8', '#64748b', '#0f172a', '#6366f1'],
   styleFonts: {
     titleFont: 'SourceHanSansCN',
     bodyFont: 'SourceHanSansCN'
   },
-  backgroundColor: '#ffffff',
-  bulletPointsColor: '#64748b',
-  linkColor: '#ea580c',
+  backgroundColor: '#f8fafc',
+  bulletPointsColor: '#3b82f6',
+  linkColor: '#2563eb',
   linkUnderline: true,
   textStyles: {
     title: {
-      color: '#0f172a',
+      color: '#1e3a8a',
       fontSize: 48,
       fontWeight: 'bold',
       letterSpacing: 0,
@@ -91,8 +91,8 @@ export const defaultStyleRecipe: StyleRecipe = {
       uppercase: false
     },
     headline: {
-      color: '#0f172a',
-      fontSize: 28,
+      color: '#2563eb',
+      fontSize: 32,
       fontWeight: 'bold',
       letterSpacing: 0,
       lineHeight: 1.3,
@@ -100,8 +100,8 @@ export const defaultStyleRecipe: StyleRecipe = {
       uppercase: false
     },
     subheadline: {
-      color: '#0f172a',
-      fontSize: 18,
+      color: '#0284c7',
+      fontSize: 20,
       fontWeight: 'normal',
       letterSpacing: 0,
       lineHeight: 1.3,
@@ -110,7 +110,7 @@ export const defaultStyleRecipe: StyleRecipe = {
     },
     normalText: {
       color: '#334155',
-      fontSize: 14,
+      fontSize: 16,
       fontWeight: 'normal',
       letterSpacing: 0,
       lineHeight: 1.5,
@@ -119,7 +119,7 @@ export const defaultStyleRecipe: StyleRecipe = {
     },
     smallText: {
       color: '#64748b',
-      fontSize: 12,
+      fontSize: 13,
       fontWeight: 'normal',
       letterSpacing: 0,
       lineHeight: 1.4,
@@ -128,27 +128,26 @@ export const defaultStyleRecipe: StyleRecipe = {
     }
   },
   table: {
-    headerBg: '#e05638',
+    headerBg: '#1e40af',
     headerTextColor: '#ffffff',
-    borderColor: '#fecaca',
-    alternateRowBg: '#fde8e4'
+    borderColor: '#cbd5e1',
+    alternateRowBg: '#eff6ff'
   },
   chart: {
-    chartColor: '#6366f1',
+    chartColor: '#0f172a',
     paletteName: 'Chart colors - Mono',
-    palette: ['#6366f1', '#7c3aed', '#93c5fd', '#bfdbfe', '#dbeafe', '#eff6ff', '#f8fafc', '#ffffff'],
+    palette: generateMonoPalette('#0f172a', 8),
     labelColor: '#1e293b',
     gridColor: '#e2e8f0'
   },
   shape: {
-    fillColor: '#ea580c',
-    borderColor: '#1e293b',
+    fillColor: '#2563eb',
+    borderColor: '#1d4ed8',
     textColor: '#ffffff'
   }
 }
 
 export const builtinStyleRecipes: StyleRecipe[] = [
-  JSON.parse(JSON.stringify(defaultStyleRecipe)),
   {
     id: 'tech-blue',
     name: '商务科技蓝',
@@ -168,30 +167,11 @@ export const builtinStyleRecipes: StyleRecipe[] = [
     chart: { chartColor: '#0f172a', paletteName: 'Chart colors - Mono', palette: generateMonoPalette('#0f172a', 8), labelColor: '#1e293b', gridColor: '#e2e8f0' },
     shape: { fillColor: '#2563eb', borderColor: '#1d4ed8', textColor: '#ffffff' }
   },
-  {
-    id: 'dark-gold',
-    name: '高端暗黑金',
-    styleColors: ['#b45309', '#d97706', '#f59e0b', '#fbbf24', '#78350f', '#451a03', '#0f172a', '#1e293b'],
-    styleFonts: { titleFont: 'Abhaya Libre', bodyFont: 'Abhaya Libre' },
-    backgroundColor: '#0f172a',
-    bulletPointsColor: '#f59e0b',
-    linkColor: '#fbbf24',
-    textStyles: {
-      title: { color: '#fbbf24', fontSize: 48, fontWeight: 'bold', letterSpacing: 0, lineHeight: 1.2, paragraphSpacing: 0, uppercase: false },
-      headline: { color: '#f59e0b', fontSize: 32, fontWeight: 'bold', letterSpacing: 0, lineHeight: 1.3, paragraphSpacing: 0, uppercase: false },
-      subheadline: { color: '#d97706', fontSize: 20, fontWeight: 'normal', letterSpacing: 0, lineHeight: 1.3, paragraphSpacing: 0, uppercase: false },
-      normalText: { color: '#e2e8f0', fontSize: 16, fontWeight: 'normal', letterSpacing: 0, lineHeight: 1.5, paragraphSpacing: 0, uppercase: false },
-      smallText: { color: '#94a3b8', fontSize: 13, fontWeight: 'normal', letterSpacing: 0, lineHeight: 1.4, paragraphSpacing: 0, uppercase: false }
-    },
-    table: { headerBg: '#b45309', headerTextColor: '#ffffff', borderColor: '#334155', alternateRowBg: '#1e293b' },
-    chart: { chartColor: '#0f172a', paletteName: 'Chart colors - Mono', palette: generateMonoPalette('#0f172a', 8), labelColor: '#f8fafc', gridColor: '#334155' },
-    shape: { fillColor: '#d97706', borderColor: '#fbbf24', textColor: '#ffffff' }
-  },
   {
     id: 'fresh-green',
     name: '薄荷清新绿',
     styleColors: ['#10b981', '#059669', '#047857', '#065f46', '#84cc16', '#06b6d4', '#1f2937', '#a7f3d0'],
-    styleFonts: { titleFont: 'SourceHanSansCN', bodyFont: 'SourceHanSansCN' },
+    styleFonts: { titleFont: '抖音美好体', bodyFont: '抖音美好体' },
     backgroundColor: '#f0fdf4',
     bulletPointsColor: '#10b981',
     linkColor: '#059669',
@@ -210,7 +190,7 @@ export const builtinStyleRecipes: StyleRecipe[] = [
     id: 'fashion-purple',
     name: '时尚梦幻紫',
     styleColors: ['#8b5cf6', '#7c3aed', '#6d28d9', '#5b21b6', '#ec4899', '#06b6d4', '#111827', '#ddd6fe'],
-    styleFonts: { titleFont: 'Montserrat', bodyFont: 'Montserrat' },
+    styleFonts: { titleFont: '字魂扁桃体', bodyFont: '字魂扁桃体' },
     backgroundColor: '#f5f3ff',
     bulletPointsColor: '#8b5cf6',
     linkColor: '#7c3aed',
@@ -225,11 +205,30 @@ export const builtinStyleRecipes: StyleRecipe[] = [
     chart: { chartColor: '#111827', paletteName: 'Chart colors - Mono', palette: generateMonoPalette('#111827', 8), labelColor: '#4c1d95', gridColor: '#ddd6fe' },
     shape: { fillColor: '#8b5cf6', borderColor: '#6d28d9', textColor: '#ffffff' }
   },
+  {
+    id: 'dark-gold',
+    name: '高端暗黑金',
+    styleColors: ['#b45309', '#d97706', '#f59e0b', '#fbbf24', '#78350f', '#451a03', '#0f172a', '#1e293b'],
+    styleFonts: { titleFont: '字魂扁桃体', bodyFont: '字魂扁桃体' },
+    backgroundColor: '#121826',
+    bulletPointsColor: '#f59e0b',
+    linkColor: '#fbbf24',
+    textStyles: {
+      title: { color: '#fbbf24', fontSize: 48, fontWeight: 'bold', letterSpacing: 0, lineHeight: 1.2, paragraphSpacing: 0, uppercase: false },
+      headline: { color: '#f59e0b', fontSize: 32, fontWeight: 'bold', letterSpacing: 0, lineHeight: 1.3, paragraphSpacing: 0, uppercase: false },
+      subheadline: { color: '#d97706', fontSize: 20, fontWeight: 'normal', letterSpacing: 0, lineHeight: 1.3, paragraphSpacing: 0, uppercase: false },
+      normalText: { color: '#e2e8f0', fontSize: 16, fontWeight: 'normal', letterSpacing: 0, lineHeight: 1.5, paragraphSpacing: 0, uppercase: false },
+      smallText: { color: '#94a3b8', fontSize: 13, fontWeight: 'normal', letterSpacing: 0, lineHeight: 1.4, paragraphSpacing: 0, uppercase: false }
+    },
+    table: { headerBg: '#b45309', headerTextColor: '#ffffff', borderColor: '#334155', alternateRowBg: '#1e293b' },
+    chart: { chartColor: '#0f172a', paletteName: 'Chart colors - Mono', palette: generateMonoPalette('#0f172a', 8), labelColor: '#f8fafc', gridColor: '#334155' },
+    shape: { fillColor: '#d97706', borderColor: '#fbbf24', textColor: '#ffffff' }
+  },
   {
     id: 'warm-amber',
-    name: '活力暖阳橙',
+    name: '活力阳光橙',
     styleColors: ['#f97316', '#ea580c', '#c2410c', '#f59e0b', '#ef4444', '#475569', '#1e293b', '#fed7aa'],
-    styleFonts: { titleFont: 'SourceHanSansCN', bodyFont: 'SourceHanSansCN' },
+    styleFonts: { titleFont: '字魂扁桃体', bodyFont: '字魂扁桃体' },
     backgroundColor: '#fffaf5',
     bulletPointsColor: '#f97316',
     linkColor: '#ea580c',

package/src/composables/sidebar/useSidebarAnimation.ts

@@ -16,6 +16,7 @@ export function useSidebarAnimation() {
     addAnimation,
     deleteAnimation,
     updateAnimationEffect,
+    updateAnimationTargetElement,
     updateAnimationTrigger,
     updateAnimationDuration,
     updateAnimationOrder,
@@ -73,9 +74,39 @@ export function useSidebarAnimation() {
     return null
   }
 
+  const allSlideElements = computed(() => {
+    if (!activeSlide.value?.elements) return []
+    const list: any[] = []
+    const collect = (els: any[]) => {
+      for (const el of els) {
+        list.push(el)
+        if (el.type === 'group' && Array.isArray(el.elements)) {
+          collect(el.elements)
+        }
+      }
+    }
+    collect(activeSlide.value.elements)
+    return list
+  })
+
+  function inferAnimationType(effect: string): 'in' | 'out' | 'attention' {
+    for (const cat of ENTER_ANIMATIONS) {
+      if (cat.children?.some(c => c.value === effect)) return 'in'
+    }
+    for (const cat of EXIT_ANIMATIONS) {
+      if (cat.children?.some(c => c.value === effect)) return 'out'
+    }
+    for (const cat of ATTENTION_ANIMATIONS) {
+      if (cat.children?.some(c => c.value === effect)) return 'attention'
+    }
+    if (effect.includes('Out')) return 'out'
+    if (effect.includes('In')) return 'in'
+    return 'in'
+  }
+
   function getElTypeName(type: string): string {
     const types: Record<string, string> = {
-      text: '文本框',
+      text: '文本',
       shape: '形状',
       image: '图片',
       video: '视频',
@@ -90,7 +121,7 @@ export function useSidebarAnimation() {
     if (!activeSlide.value) return ''
     const el = findElementInSlide(elId)
     if (!el) return ''
-    const sameTypeEls = activeSlide.value.elements.filter((e: any) => e.type === el.type)
+    const sameTypeEls = allSlideElements.value.filter((e: any) => e.type === el.type)
     const idx = sameTypeEls.findIndex((e: any) => e.id === elId)
     return idx !== -1 ? String(idx + 1) : ''
   }
@@ -118,7 +149,7 @@ export function useSidebarAnimation() {
     }
     if (el.type === 'text') {
       if (el.name) return el.name
-      return '文本框'
+      return '文本'
     }
     return getElTypeName(el.type)
   }
@@ -133,41 +164,59 @@ export function useSidebarAnimation() {
   function getDirectionConfig(effect: string, type: 'in' | 'out' | 'attention'): DirectionOption[] {
     if (type === 'attention') return []
     let animationFamily = ''
-    if (effect.includes('bounce')) animationFamily = 'bounce'
+    if (effect.includes('fade')) animationFamily = 'fade'
+    else if (effect.includes('bounce')) animationFamily = 'bounce'
     else if (effect.includes('back')) animationFamily = 'back'
     else if (effect.includes('slide')) animationFamily = 'slide'
+    else if (effect.includes('zoom')) animationFamily = 'zoom'
     else if (effect.includes('lightSpeed')) animationFamily = 'lightSpeed'
     else if (effect.includes('flip')) animationFamily = 'flip'
 
     if (!animationFamily) return []
+    if (animationFamily === 'fade') {
+      return [
+        { label: '从底部', value: 'up', effectValue: type === 'in' ? 'fadeInUp' : 'fadeOutUp' },
+        { label: '从左侧', value: 'left', effectValue: type === 'in' ? 'fadeInLeft' : 'fadeOutLeft' },
+        { label: '从右侧', value: 'right', effectValue: type === 'in' ? 'fadeInRight' : 'fadeOutRight' },
+        { label: '从顶部', value: 'down', effectValue: type === 'in' ? 'fadeInDown' : 'fadeOutDown' },
+      ]
+    }
     if (animationFamily === 'bounce') {
       return [
-        { label: '自底部', value: 'up', effectValue: type === 'in' ? 'bounceInUp' : 'bounceOutUp' },
-        { label: '自左侧', value: 'left', effectValue: type === 'in' ? 'bounceInLeft' : 'bounceOutLeft' },
-        { label: '自右侧', value: 'right', effectValue: type === 'in' ? 'bounceInRight' : 'bounceOutRight' },
-        { label: '自顶部', value: 'down', effectValue: type === 'in' ? 'bounceInDown' : 'bounceOutDown' },
+        { label: '从底部', value: 'up', effectValue: type === 'in' ? 'bounceInUp' : 'bounceOutUp' },
+        { label: '从左侧', value: 'left', effectValue: type === 'in' ? 'bounceInLeft' : 'bounceOutLeft' },
+        { label: '从右侧', value: 'right', effectValue: type === 'in' ? 'bounceInRight' : 'bounceOutRight' },
+        { label: '从顶部', value: 'down', effectValue: type === 'in' ? 'bounceInDown' : 'bounceOutDown' },
       ]
     }
     if (animationFamily === 'back') {
       return [
-        { label: '自底部', value: 'up', effectValue: type === 'in' ? 'backInUp' : 'backOutUp' },
-        { label: '自左侧', value: 'left', effectValue: type === 'in' ? 'backInLeft' : 'backOutLeft' },
-        { label: '自右侧', value: 'right', effectValue: type === 'in' ? 'backInRight' : 'backOutRight' },
-        { label: '自顶部', value: 'down', effectValue: type === 'in' ? 'backInDown' : 'backOutDown' },
+        { label: '从底部', value: 'up', effectValue: type === 'in' ? 'backInUp' : 'backOutUp' },
+        { label: '从左侧', value: 'left', effectValue: type === 'in' ? 'backInLeft' : 'backOutLeft' },
+        { label: '从右侧', value: 'right', effectValue: type === 'in' ? 'backInRight' : 'backOutRight' },
+        { label: '从顶部', value: 'down', effectValue: type === 'in' ? 'backInDown' : 'backOutDown' },
       ]
     }
     if (animationFamily === 'slide') {
       return [
-        { label: '自底部', value: 'up', effectValue: type === 'in' ? 'slideInUp' : 'slideOutUp' },
-        { label: '自左侧', value: 'left', effectValue: type === 'in' ? 'slideInLeft' : 'slideOutLeft' },
-        { label: '自右侧', value: 'right', effectValue: type === 'in' ? 'slideInRight' : 'slideOutRight' },
-        { label: '自顶部', value: 'down', effectValue: type === 'in' ? 'slideInDown' : 'slideOutDown' },
+        { label: '从底部', value: 'up', effectValue: type === 'in' ? 'slideInUp' : 'slideOutUp' },
+        { label: '从左侧', value: 'left', effectValue: type === 'in' ? 'slideInLeft' : 'slideOutLeft' },
+        { label: '从右侧', value: 'right', effectValue: type === 'in' ? 'slideInRight' : 'slideOutRight' },
+        { label: '从顶部', value: 'down', effectValue: type === 'in' ? 'slideInDown' : 'slideOutDown' },
+      ]
+    }
+    if (animationFamily === 'zoom') {
+      return [
+        { label: '从底部', value: 'up', effectValue: type === 'in' ? 'zoomInUp' : 'zoomOutUp' },
+        { label: '从左侧', value: 'left', effectValue: type === 'in' ? 'zoomInLeft' : 'zoomOutLeft' },
+        { label: '从右侧', value: 'right', effectValue: type === 'in' ? 'zoomInRight' : 'zoomOutRight' },
+        { label: '从顶部', value: 'down', effectValue: type === 'in' ? 'zoomInDown' : 'zoomOutDown' },
       ]
     }
     if (animationFamily === 'lightSpeed') {
       return [
-        { label: '自右侧', value: 'right', effectValue: type === 'in' ? 'lightSpeedInRight' : 'lightSpeedOutRight' },
-        { label: '自左侧', value: 'left', effectValue: type === 'in' ? 'lightSpeedInLeft' : 'lightSpeedOutLeft' },
+        { label: '从右侧', value: 'right', effectValue: type === 'in' ? 'lightSpeedInRight' : 'lightSpeedOutRight' },
+        { label: '从左侧', value: 'left', effectValue: type === 'in' ? 'lightSpeedInLeft' : 'lightSpeedOutLeft' },
       ]
     }
     if (animationFamily === 'flip') {
@@ -183,7 +232,7 @@ export function useSidebarAnimation() {
     if (type === 'attention') return effect
     if (type === 'in') {
       if (effect.includes('bounce')) return 'bounceIn'
-      if (effect.includes('fadeIn') || effect.includes('fadeOut')) return 'fadeIn'
+      if (effect.includes('fade')) return 'fadeIn'
       if (effect.includes('zoom')) return 'zoomIn'
       if (effect.includes('back')) return 'backInUp'
       if (effect.includes('slide')) return 'slideInUp'
@@ -192,7 +241,7 @@ export function useSidebarAnimation() {
       if (effect.includes('flip')) return 'flipInX'
     } else if (type === 'out') {
       if (effect.includes('bounce')) return 'bounceOut'
-      if (effect.includes('fadeIn') || effect.includes('fadeOut')) return 'fadeOut'
+      if (effect.includes('fade')) return 'fadeOut'
       if (effect.includes('zoom')) return 'zoomOut'
       if (effect.includes('back')) return 'backOutDown'
       if (effect.includes('slide')) return 'slideOutDown'
@@ -206,6 +255,9 @@ export function useSidebarAnimation() {
   function getCurrentDirectionValue(anim: any): string {
     const configs = getDirectionConfig(anim.effect, anim.type)
     if (configs.length === 0) return 'none'
+    if (anim.direction && configs.some(c => c.value === anim.direction)) {
+      return anim.direction
+    }
     const match = configs.find(c => c.effectValue === anim.effect)
     return match ? match.value : configs[0].value
   }
@@ -216,16 +268,21 @@ export function useSidebarAnimation() {
     if (match) {
       updateAnimationEffect(anim.id, anim.type, match.effectValue)
       anim.direction = match.value
+      previewAnimationInCanvas(anim.elId, match.effectValue, anim.duration || 1000)
       addHistorySnapshot()
     }
   }
 
   const allEffects = computed(() => {
     const list: { label: string; value: string }[] = []
+    const seenLabels = new Set<string>()
     const collect = (arr: any[]) => {
       for (const group of arr) {
         for (const item of group.children) {
-          list.push({ label: item.name, value: item.value })
+          if (!seenLabels.has(item.name)) {
+            seenLabels.add(item.name)
+            list.push({ label: item.name, value: item.value })
+          }
         }
       }
     }
@@ -237,7 +294,7 @@ export function useSidebarAnimation() {
 
   function previewAnimationInCanvas(elId: string, effect: string, duration: number) {
     if (!activeSlide.value) return
-    const targetEl = activeSlide.value.elements.find((e: any) => e.id === elId)
+    const targetEl = findElementInSlide(elId)
     const groupId = targetEl?.groupId
 
     const targetIds = groupId
@@ -245,7 +302,8 @@ export function useSidebarAnimation() {
       : [elId]
 
     for (const id of targetIds) {
-      const elRef = document.getElementById(`canvas-el-${id}`) || document.getElementById(`canvas-content-${id}`)
+      // 优先在真实内容容器 canvas-content-${id} 上播放动画，避免将选中边框和控制点手柄整体晃动
+      const elRef = document.getElementById(`canvas-content-${id}`) || document.getElementById(`canvas-el-${id}`)
       if (elRef) {
         const animationName = `animate__${effect}`
         elRef.style.setProperty('--animate-duration', `${duration}ms`)
@@ -260,8 +318,9 @@ export function useSidebarAnimation() {
     }
   }
 
-  function handleSelectAnimation(effect: string) {
-    addAnimation(activeAnimTab.value as any, effect)
+  function handleSelectAnimation(effect: string, type?: 'in' | 'out' | 'attention') {
+    const animType = type || (activeAnimTab.value as any)
+    addAnimation(animType, effect)
     animationPopoverVisible.value = false
     addHistorySnapshot()
     setTimeout(() => {
@@ -271,6 +330,19 @@ export function useSidebarAnimation() {
     }, 50)
   }
 
+  function handleUpdateAnimationTargetElement(animId: string, newElId: string) {
+    updateAnimationTargetElement(animId, newElId)
+    if (selectedElementId) {
+      selectedElementId.value = newElId
+    }
+    const anim = activeSlide.value?.animations?.find((a: any) => a.id === animId)
+    if (anim) {
+      setTimeout(() => {
+        previewAnimationInCanvas(newElId, anim.effect, anim.duration || 1000)
+      }, 50)
+    }
+  }
+
   function toggleAnimationCard(animId: string, elId?: string) {
     if (elId && selectedElementId) {
       selectedElementId.value = elId
@@ -292,7 +364,9 @@ export function useSidebarAnimation() {
     dragOverIndex,
     activeAnimationsList,
     allEffects,
+    allSlideElements,
     findElementInSlide,
+    inferAnimationType,
     getElTypeName,
     getElementIndexName,
     getAnimationStepIndex,
@@ -307,10 +381,12 @@ export function useSidebarAnimation() {
     handleDragEnd,
     handleDrop,
     handleSelectAnimation,
+    handleUpdateAnimationTargetElement,
     previewAnimationInCanvas,
     toggleAnimationCard,
     deleteAnimation,
     updateAnimationEffect,
+    updateAnimationTargetElement,
     updateAnimationTrigger,
     updateAnimationDuration,
     addHistorySnapshot

package/src/composables/sidebar/useSidebarDesign.ts

@@ -17,16 +17,25 @@ export function useSidebarDesign() {
       id: master.id,
       name: master.name || '默认母版',
       background: master.background || '#ffffff',
-      layouts: (master.layouts || []).map(layout => ({
-        id: layout.id,
-        name: layout.name || '自定义版式',
-        background: layout.background || master.background || '#ffffff',
-        // 该合并列表仅供缩略图渲染（弹层/设计面板）。导入版式的占位符按分流契约
-        // 只进 placeholders，若不并入，占位符型版式（标题/两栏等）缩略图会整片空白。
-        // 应用版式（addSlideWithLayout/applyLayoutToCurrentSlide）走 findMasterLayout
-        // 读 slideMasters 原始数据，不受此处影响。
-        elements: [...(master.elements || []), ...(layout.elements || []), ...(layout.placeholders || [])]
-      }))
+      layouts: (master.layouts || []).map(layout => {
+        const extraPlaceholders = (layout.type === 'custom' && Array.isArray(layout.elements) && layout.elements.length > 0)
+          ? []
+          : (layout.placeholders || [])
+        const rawList = [...(master.elements || []), ...(layout.elements || []), ...extraPlaceholders]
+        const seenIds = new Set<string>()
+        const deduped = rawList.filter((el: any) => {
+          if (!el) return false
+          if (el.id && seenIds.has(el.id)) return false
+          if (el.id) seenIds.add(el.id)
+          return true
+        })
+        return {
+          id: layout.id,
+          name: layout.name || '自定义版式',
+          background: layout.background || master.background || '#ffffff',
+          elements: deduped
+        }
+      })
     }))
   })
 
@@ -124,7 +133,17 @@ export function useSidebarDesign() {
       }
 
       const parentMaster = (slideMasters.value || []).find((m: any) => (m.layouts || []).some((l: any) => l.id === masterLayout.id))
-      const layoutElements = [...(masterLayout.elements || []), ...(masterLayout.placeholders || [])]
+      const extraPlaceholders = (masterLayout.type === 'custom' && Array.isArray(masterLayout.elements) && masterLayout.elements.length > 0)
+        ? []
+        : (masterLayout.placeholders || [])
+      const rawLayoutElements = [...(masterLayout.elements || []), ...extraPlaceholders]
+      const seenIds = new Set<string>()
+      const layoutElements = rawLayoutElements.filter((el: any) => {
+        if (!el) return false
+        if (el.id && seenIds.has(el.id)) return false
+        if (el.id) seenIds.add(el.id)
+        return true
+      })
       const newElements = layoutElements.map((el: any) => {
         const cloned = JSON.parse(JSON.stringify(el))
         const isPh = isLayoutPlaceholderElement(cloned)