jvs-ppt-ui 0.0.14 → 0.0.16

package/src/composables/useSlides.ts

@@ -13,6 +13,7 @@ import {
   normalizeTextType
 } from '../utils/textTypes'
 import { applyGroupGeometryFlip } from '../utils/groupFlip'
+import { getFontVariants, getFontVariantStyle } from '../configs/fonts'
 import type { CustomUploadHandler, UploadResourceContext, UploadResourceType } from '../types'
 
 export type { SlideTextType }
@@ -65,6 +66,8 @@ export interface SlideElement {
   link?: string
   locked?: boolean
   isMaster?: boolean
+  isPlaceholder?: boolean
+  placeholder?: any
   hasCustomZIndex?: boolean
   groupId?: string
   elements?: SlideElement[]
@@ -266,6 +269,10 @@ export interface Slide {
   notes?: string
   animations?: PPTAnimation[]
   transition?: string
+  transitionDuration?: number
+  autoAdvance?: boolean
+  autoAdvanceDelay?: number
+  clickAdvance?: boolean
   schema?: any
 }
 
@@ -822,18 +829,17 @@ export function createDefaultSlideMasters(W: number = 1280, H: number = 720): Sl
               type: 'shape',
               name: '图片占位符',
               content: 'rect',
-              text: '<div>图片占位符</div>',
+              text: '',
+              isPlaceholder: true,
+              placeholder: { type: 'image', prompt: '图片占位符' },
               style: {
                 left: `${marginX}px`,
                 top: '80px',
                 width: `${colW}px`,
                 height: `${Math.max(200, H - 80 - 55)}px`,
-                fill: '#f8fafc',
-                borderColor: '#cbd5e1',
-                borderWidth: '1px',
-                borderStyle: 'dashed',
-                borderRadius: '4px',
-                textColor: '#94a3b8',
+                fill: '#d9dde3',
+                borderRadius: '12px',
+                textColor: '#475569',
                 fontSize: '16px',
                 textAlign: 'center'
               }
@@ -1024,20 +1030,45 @@ function applyBackgroundToAll() {
   if (!activeSlide.value) return
   const bg = activeSlide.value.background
   const type = activeSlide.value.bgType || 'color'
+  const imgMode = (activeSlide.value as any).bgImageMode
+  const isPattern = (activeSlide.value as any).isPattern
+  const bgPatternType = (activeSlide.value as any).bgPatternType
+  const bgPatternFg = (activeSlide.value as any).bgPatternFg
+  const bgPatternBg = (activeSlide.value as any).bgPatternBg
+  const lastImgUrl = (activeSlide.value as any)._lastBgImageUrl
   slides.value.forEach(slide => {
     slide.background = bg
     slide.bgType = type
+    if (imgMode !== undefined) (slide as any).bgImageMode = imgMode
+    if (isPattern !== undefined) (slide as any).isPattern = isPattern
+    if (bgPatternType !== undefined) (slide as any).bgPatternType = bgPatternType
+    if (bgPatternFg !== undefined) (slide as any).bgPatternFg = bgPatternFg
+    if (bgPatternBg !== undefined) (slide as any).bgPatternBg = bgPatternBg
+    if (lastImgUrl !== undefined) (slide as any)._lastBgImageUrl = lastImgUrl
   })
   if (isMasterEditingView.value || slideMasters.value.length > 0) {
     slideMasters.value.forEach(m => {
       m.background = bg
       m.bgType = type
+      if (imgMode !== undefined) (m as any).bgImageMode = imgMode
+      if (isPattern !== undefined) (m as any).isPattern = isPattern
+      if (bgPatternType !== undefined) (m as any).bgPatternType = bgPatternType
+      if (bgPatternFg !== undefined) (m as any).bgPatternFg = bgPatternFg
+      if (bgPatternBg !== undefined) (m as any).bgPatternBg = bgPatternBg
+      if (lastImgUrl !== undefined) (m as any)._lastBgImageUrl = lastImgUrl
       m.layouts?.forEach(l => {
         l.background = bg
         l.bgType = type
+        if (imgMode !== undefined) (l as any).bgImageMode = imgMode
+        if (isPattern !== undefined) (l as any).isPattern = isPattern
+        if (bgPatternType !== undefined) (l as any).bgPatternType = bgPatternType
+        if (bgPatternFg !== undefined) (l as any).bgPatternFg = bgPatternFg
+        if (bgPatternBg !== undefined) (l as any).bgPatternBg = bgPatternBg
+        if (lastImgUrl !== undefined) (l as any)._lastBgImageUrl = lastImgUrl
       })
     })
   }
+  addHistorySnapshot()
   notify('已应用背景到全部幻灯片')
 }
 
@@ -1099,13 +1130,139 @@ function applyThemeToAll() {
 }
 
 function applyFontToAll() {
-  slides.value.forEach(slide => {
-    slide.elements.forEach(el => {
-      if (el.type === 'text') {
-        el.style.fontFamily = globalFontFamily.value
+  const rawFont = globalFontFamily.value
+  const hasExplicitFont = Boolean(rawFont && rawFont !== '默认字体')
+  const targetColor = globalFontColor.value
+
+  const updateHtmlFontAndColor = (htmlStr: string, effectiveFont: string) => {
+    if (!htmlStr || typeof htmlStr !== 'string') return htmlStr
+    let res = htmlStr
+    if (/font-family\s*:/i.test(res)) {
+      res = res.replace(/font-family\s*:\s*[^;'"\}]+;?/gi, `font-family: ${effectiveFont};`)
+    }
+    if (/<font\b[^>]*\bface=/i.test(res)) {
+      res = res.replace(/(<font\b[^>]*?\bface\s*=\s*['"])([^'"]+)(['"])/gi, `$1${effectiveFont}$3`)
+    }
+    if (targetColor) {
+      if (/(?:^|[;"'\s\{])color\s*:/i.test(res)) {
+        res = res.replace(/(^|[;"'\s\{])(color\s*:\s*)([^;'"\}]+)/gi, `$1$2${targetColor}`)
+      }
+      if (/<font\b[^>]*\bcolor=/i.test(res)) {
+        res = res.replace(/(<font\b[^>]*?\bcolor\s*=\s*['"])([^'"]+)(['"])/gi, `$1${targetColor}$3`)
+      }
+    }
+    return res
+  }
+
+  const applyToElementList = (elements: any[], slideRecipe: any) => {
+    if (!Array.isArray(elements)) return
+    elements.forEach((el: any) => {
+      if (!el || typeof el !== 'object') return
+      if (el.type === 'group' && Array.isArray(el.elements)) {
+        applyToElementList(el.elements, slideRecipe)
+        return
+      }
+      if (el.type === 'text' || el.type === 'shape') {
+        if (!el.style) el.style = {}
+        const isHeading = el.textType === 'title' || el.textType === 'headline' || (el.id && String(el.id).startsWith('title'))
+        const fallbackFont = isHeading
+          ? (slideRecipe?.styleFonts?.titleFont || 'SourceHanSansCN')
+          : (slideRecipe?.styleFonts?.bodyFont || 'SourceHanSansCN')
+        const effectiveFont = hasExplicitFont ? rawFont : fallbackFont
+
+        el.style.fontFamily = hasExplicitFont ? rawFont : effectiveFont
+        el.fontFamily = hasExplicitFont ? rawFont : effectiveFont
+
+        const variants = getFontVariants(effectiveFont)
+        const firstVariant = variants[0]?.value || 'Regular'
+        el.style.fontFamilyStyle = firstVariant
+        const vStyle = getFontVariantStyle(effectiveFont, firstVariant)
+        if (vStyle) {
+          el.style.fontWeight = vStyle.fontWeight
+          el.style.fontStyle = vStyle.fontStyle
+          if (vStyle.faceName) {
+            ;(el.style as any).fontVariantFace = vStyle.faceName
+          } else {
+            delete (el.style as any).fontVariantFace
+          }
+        }
+
+        if (targetColor) {
+          el.style.color = targetColor
+          el.style.textColor = targetColor
+          el.color = targetColor
+          el.textColor = targetColor
+          if (el.text && typeof el.text === 'object') {
+            el.text.defaultColor = targetColor
+          }
+        }
+
+        if (el.content && typeof el.content === 'string') {
+          el.content = updateHtmlFontAndColor(el.content, effectiveFont)
+        }
+        if (el.text) {
+          if (typeof el.text === 'string') {
+            el.text = updateHtmlFontAndColor(el.text, effectiveFont)
+          } else if (typeof el.text.content === 'string') {
+            el.text.content = updateHtmlFontAndColor(el.text.content, effectiveFont)
+          }
+        }
+
+        if (typeof document !== 'undefined') {
+          const container = document.getElementById(`editable-${el.id}`)
+          if (container) {
+            container.style.fontFamily = effectiveFont
+            if (targetColor) {
+              container.style.color = targetColor
+            }
+            container.querySelectorAll('*').forEach((child: any) => {
+              if (child.style) {
+                if (child.style.fontFamily) {
+                  child.style.fontFamily = effectiveFont
+                }
+                if (targetColor && child.style.color) {
+                  child.style.color = targetColor
+                }
+              }
+              if (child.tagName === 'FONT') {
+                child.setAttribute('face', effectiveFont)
+                child.style.fontFamily = effectiveFont
+                if (targetColor) {
+                  child.setAttribute('color', targetColor)
+                  child.style.color = targetColor
+                }
+              }
+            })
+            if (!el.content || !el.content.includes('<table')) {
+              if (el.type === 'shape') {
+                if (typeof el.text === 'string') {
+                  el.text = container.innerHTML
+                } else if (el.text && typeof el.text === 'object') {
+                  el.text.content = container.innerHTML
+                }
+              } else {
+                el.content = container.innerHTML
+              }
+            }
+          }
+        }
       }
     })
+  }
+
+  slides.value.forEach(slide => {
+    const slideRecipe = getActiveSlideThemeRecipe(slide)
+    applyToElementList(slide.elements, slideRecipe)
   })
+
+  if (isMasterEditingView.value && activeSlide.value?.elements) {
+    const masterRecipe = getActiveSlideThemeRecipe(activeSlide.value)
+    applyToElementList(activeSlide.value.elements, masterRecipe)
+  }
+
+  markAllPagesDirty()
+  addHistorySnapshot()
+  activeSlideVersion.value++
   notify('已统一全局字体')
 }
 
@@ -1646,6 +1803,24 @@ function resolveSlideMasterAndLayout(slide?: any): { masterId: string, layoutId:
   }
 }
 
+function formatBareUrlWithMode(bg: any, mode?: string, isPattern?: boolean): any {
+  if (typeof bg !== 'string') return bg
+  const trimmed = bg.trim()
+  if (!trimmed.startsWith('url(')) return bg
+  const closeParenIdx = trimmed.lastIndexOf(')')
+  if (closeParenIdx === -1) return bg
+  const afterUrl = trimmed.slice(closeParenIdx + 1).trim()
+  if (afterUrl) return bg
+  const urlPart = trimmed.slice(0, closeParenIdx + 1)
+  if (trimmed.includes('data:image/svg+xml') || isPattern) {
+    return `${urlPart} left top / auto repeat`
+  }
+  if (mode === 'contain') return `${urlPart} center center / contain no-repeat`
+  if (mode === 'cover') return `${urlPart} center center / 60% auto no-repeat`
+  if (mode === 'tile') return `${urlPart} left top / 25% auto repeat`
+  return `${urlPart} center center / 100% 100% no-repeat`
+}
+
 export function getEffectiveSlideBackground(slide?: any): any {
   if (!slide) return '#ffffff'
 
@@ -1653,16 +1828,30 @@ export function getEffectiveSlideBackground(slide?: any): any {
   if (isMasterEditingView.value) {
     const master = slideMasters.value.find(m => m.id === activeMasterId.value) || slideMasters.value[0]
     const layout = activeLayoutId.value ? master?.layouts?.find(l => l.id === activeLayoutId.value) : null
-    return layout?.background || master?.background || '#ffffff'
+    if (layout?.background && layout.background !== '#ffffff' && layout.background !== 'none') {
+      return formatBareUrlWithMode(layout.background, (layout as any).bgImageMode, (layout as any).isPattern)
+    }
+    if (master?.background) {
+      return formatBareUrlWithMode(master.background, (master as any).bgImageMode, (master as any).isPattern)
+    }
+    return '#ffffff'
   }
 
   // 2. 如果当前幻灯片自身设置了明确的独立自定义背景（包含 url、gradient 或非白色自定义色）
-  const directBg = slide.schema?.bgColor || slide.background || slide.fill
+  const hasSlideBgSpecial = typeof slide.background === 'string' && (
+    slide.background.includes('url(') ||
+    slide.background.includes('gradient(') ||
+    slide.bgType === 'image' ||
+    slide.bgType === 'gradient'
+  )
+  const directBg = hasSlideBgSpecial
+    ? (slide.background || slide.fill || slide.schema?.bgColor)
+    : (slide.schema?.bgColor || slide.background || slide.fill)
   if (directBg) {
     if (typeof directBg === 'string') {
       const trimmed = directBg.trim().toLowerCase()
       if (trimmed.includes('url(') || trimmed.includes('gradient(') || (!['#ffffff', '#fff', 'white', 'transparent', 'none', ''].includes(trimmed))) {
-        return directBg
+        return formatBareUrlWithMode(directBg, slide.bgImageMode, slide.isPattern)
       }
     } else if (typeof directBg === 'object' && (directBg.image || directBg.gradient || (directBg.color && !['#ffffff', '#fff', 'white'].includes(String(directBg.color).toLowerCase())))) {
       return directBg
@@ -1675,13 +1864,13 @@ export function getEffectiveSlideBackground(slide?: any): any {
   const layout = layoutId && master ? master.layouts?.find(l => l && l.id === layoutId) : null
 
   if (layout?.background && layout.background !== '#ffffff' && layout.background !== 'none') {
-    return layout.background
+    return formatBareUrlWithMode(layout.background, (layout as any).bgImageMode, (layout as any).isPattern)
   }
   if (master?.background && master.background !== '#ffffff' && master.background !== 'none') {
-    return master.background
+    return formatBareUrlWithMode(master.background, (master as any).bgImageMode, (master as any).isPattern)
   }
 
-  return directBg || '#ffffff'
+  return directBg ? formatBareUrlWithMode(directBg, slide.bgImageMode, slide.isPattern) : '#ffffff'
 }
 
 function applyStyleRecipeToMaster(
@@ -2033,8 +2222,8 @@ function getThemeUsageSlides(themeId: string): number[] {
   const pages: number[] = []
   const hasAnyExplicitTheme = slides.value.some(s => !!s.themeId)
   slides.value.forEach((slide, idx) => {
-    const effId = slide.themeId || (hasAnyExplicitTheme ? 'default-recipe' : 'default-recipe')
-    if (effId === themeId) {
+    const effId = slide.themeId || (hasAnyExplicitTheme ? 'tech-blue' : 'tech-blue')
+    if (effId === themeId || (themeId === 'tech-blue' && (effId === 'default-recipe' || !effId))) {
       pages.push(idx + 1)
     }
   })
@@ -2062,8 +2251,8 @@ function getActiveSlideThemeRecipe(targetSlide?: any): StyleRecipe {
   } else if (activeSlide.value) {
     effSlide = activeSlide.value
   }
-  const themeId = effSlide?.themeId || (isMasterEditingView.value ? ((slideMasters.value.find(m => m.id === activeMasterId.value) as any)?.themeId || 'default-recipe') : 'default-recipe')
-  const recipe = builtinStyleRecipes.find(r => r.id === themeId) || defaultStyleRecipe
+  const themeId = effSlide?.themeId || (isMasterEditingView.value ? ((slideMasters.value.find(m => m.id === activeMasterId.value) as any)?.themeId || 'tech-blue') : 'tech-blue')
+  const recipe = builtinStyleRecipes.find(r => r.id === themeId || (themeId === 'default-recipe' && r.id === 'tech-blue')) || defaultStyleRecipe
   return recipe
 }
 
@@ -2159,13 +2348,22 @@ const activeSlide = computed<Slide>({
           if (prop === 'id') return target.id
           if (prop === 'title') return target.name || '母版编辑'
           if (prop === 'subtitle') return ''
-          if (prop === 'background') return target.background || master?.background || '#ffffff'
+          if (prop === 'background') return target.background !== undefined ? target.background : (master?.background || '#ffffff')
           if (prop === 'bgType') {
             if (target.bgType) return target.bgType
             if (master?.bgType) return master.bgType
             const effBg = target.background || master?.background
             return normalizeSlideBackground(effBg).bgType || 'color'
           }
+          if (prop === 'bgImageMode') {
+            return (target as any).bgImageMode || (master as any)?.bgImageMode || 'stretch'
+          }
+          if (prop === 'isPattern') {
+            return (target as any).isPattern ?? (master as any)?.isPattern ?? false
+          }
+          if (prop === '_lastBgImageUrl') {
+            return (target as any)._lastBgImageUrl !== undefined ? (target as any)._lastBgImageUrl : ((master as any)?._lastBgImageUrl || '')
+          }
           if (prop === 'themeId') return target.themeId || (master as any)?.themeId || 'default-recipe'
           if (prop === 'themeName') return target.themeName || (master as any)?.themeName || ''
           if (prop === 'themeColors') return (master as any)?.themeColors || globalThemeColor.value
@@ -2173,10 +2371,16 @@ const activeSlide = computed<Slide>({
             if (!target.elements) target.elements = []
             // 确保版式或母版中的占位符存在于 target.elements 中，使用户在母版视图下可以直接点击选中、拖拽调整与编辑
             if (target.placeholders && Array.isArray(target.placeholders)) {
-              for (const ph of target.placeholders) {
-                if (!target.elements.some((el: any) => el.id === ph.id || (Math.abs((el.left || 0) - (ph.left || 0)) < 5 && Math.abs((el.top || 0) - (ph.top || 0)) < 5))) {
-                  target.elements.push(ph)
+              if (target.type === 'custom' && target.elements.length > 0) {
+                target.placeholders = target.elements.filter((x: any) => x && (x.isPlaceholder || x.placeholder))
+                target._placeholdersMerged = true
+              } else if (!target._placeholdersMerged) {
+                for (const ph of target.placeholders) {
+                  if (!target.elements.some((el: any) => el.id === ph.id || (Math.abs((el.left || 0) - (ph.left || 0)) < 5 && Math.abs((el.top || 0) - (ph.top || 0)) < 5))) {
+                    target.elements.push(ph)
+                  }
                 }
+                target._placeholdersMerged = true
               }
             }
             // 🌟 兜底保障：若当前选中的是顶级母版（target === master），且母版本身 elements 为空且无 placeholders（如自定义极简母版）：
@@ -2220,27 +2424,39 @@ const activeSlide = computed<Slide>({
           if (prop === 'elements') {
             target.elements = value
             if (Array.isArray(value)) {
-              const phs = value.filter((x: any) => x && (x.isPlaceholder || x.placeholder))
-              if (phs.length > 0) {
-                target.placeholders = phs
-              }
+              target.placeholders = value.filter((x: any) => x && (x.isPlaceholder || x.placeholder))
             }
             return true
           }
           if (prop === 'background') {
+            const prevBg = target.background
             target.background = value
             if (target === master && master.layouts) {
               master.layouts.forEach((l: any) => {
-                if (!l.background || l.background === '#ffffff') l.background = value
+                if (!l.background || l.background === '#ffffff' || l.background === prevBg) {
+                  l.background = value
+                }
               })
             }
             return true
           }
           if (prop === 'bgType') {
+            const prevType = target.bgType
             target.bgType = value
             if (target === master && master.layouts) {
               master.layouts.forEach((l: any) => {
-                if (!l.bgType || l.bgType === 'color') l.bgType = value
+                if (!l.bgType || l.bgType === 'color' || l.bgType === prevType) {
+                  l.bgType = value
+                }
+              })
+            }
+            return true
+          }
+          if (prop === 'bgImageMode' || prop === 'isPattern' || prop === '_lastBgImageUrl') {
+            target[prop] = value
+            if (target === master && master.layouts) {
+              master.layouts.forEach((l: any) => {
+                l[prop] = value
               })
             }
             return true
@@ -2362,11 +2578,23 @@ const formatedAnimations = computed(() => {
   return formatted
 })
 
+function findElementInSlideElements(id: string, elements: any[] = activeSlide.value?.elements || []): any {
+  if (!id || !elements || !elements.length) return null
+  for (const el of elements) {
+    if (el.id === id) return el
+    if (el.type === 'group' && Array.isArray(el.elements)) {
+      const found = findElementInSlideElements(id, el.elements)
+      if (found) return found
+    }
+  }
+  return null
+}
+
 function addAnimation(type: 'in' | 'out' | 'attention', effect: string) {
   if (!activeSlide.value || !selectedElementId.value) return
   if (!activeSlide.value.animations) activeSlide.value.animations = []
 
-  const targetEl = activeSlide.value.elements.find(e => e.id === selectedElementId.value)
+  const targetEl = findElementInSlideElements(selectedElementId.value, activeSlide.value.elements)
   if (!targetEl) return
 
   const groupId = targetEl.groupId
@@ -2400,7 +2628,7 @@ function deleteAnimation(id: string) {
   const targetAnim = activeSlide.value.animations.find(a => a.id === id)
   if (!targetAnim) return
 
-  const targetEl = activeSlide.value.elements.find(e => e.id === targetAnim.elId)
+  const targetEl = findElementInSlideElements(targetAnim.elId, activeSlide.value.elements)
   const groupId = targetEl?.groupId
 
   if (groupId) {
@@ -2419,7 +2647,7 @@ function updateAnimationDuration(id: string, duration: number) {
   const targetAnim = activeSlide.value.animations.find(a => a.id === id)
   if (!targetAnim) return
 
-  const targetEl = activeSlide.value.elements.find(e => e.id === targetAnim.elId)
+  const targetEl = findElementInSlideElements(targetAnim.elId, activeSlide.value.elements)
   const groupId = targetEl?.groupId
 
   if (groupId) {
@@ -2447,7 +2675,7 @@ function updateAnimationEffect(id: string, type: 'in' | 'out' | 'attention', eff
   const targetAnim = activeSlide.value.animations.find(a => a.id === id)
   if (!targetAnim) return
 
-  const targetEl = activeSlide.value.elements.find(e => e.id === targetAnim.elId)
+  const targetEl = findElementInSlideElements(targetAnim.elId, activeSlide.value.elements)
   const groupId = targetEl?.groupId
 
   if (groupId) {
@@ -2463,6 +2691,15 @@ function updateAnimationEffect(id: string, type: 'in' | 'out' | 'attention', eff
   }
 }
 
+function updateAnimationTargetElement(id: string, newElId: string) {
+  if (!activeSlide.value || !activeSlide.value.animations || !newElId) return
+  const targetAnim = activeSlide.value.animations.find(a => a.id === id)
+  if (!targetAnim) return
+  targetAnim.elId = newElId
+  addHistorySnapshot()
+  notify('已将动画修改到对应元素')
+}
+
 function updateAnimationOrder(oldIndex: number, newIndex: number) {
   if (!activeSlide.value || !activeSlide.value.animations) return
   if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) return
@@ -4030,8 +4267,10 @@ function addElement(
     const typeConf = TEXT_TYPE_CONFIGS[textType] || TEXT_TYPE_CONFIGS.normalText
     const textCfg = recipe.textStyles?.[textType] || defaultStyleRecipe.textStyles[textType] || defaultStyleRecipe.textStyles.normalText
     const isHeading = textType === 'title' || textType === 'headline'
-    const textFont = textCfg.fontFamily || (isHeading ? (recipe.styleFonts?.titleFont || 'SourceHanSansCN') : (recipe.styleFonts?.bodyFont || 'SourceHanSansCN'))
-    const textColor = textCfg.color || (textType === 'smallText' ? '#64748b' : (isHeading ? (recipe.textStyles?.title?.color || '#0f172a') : (recipe.textStyles?.normalText?.color || '#334155')))
+    const textFont = (globalFontFamily.value && globalFontFamily.value !== '默认字体')
+      ? globalFontFamily.value
+      : (textCfg.fontFamily || (isHeading ? (recipe.styleFonts?.titleFont || 'SourceHanSansCN') : (recipe.styleFonts?.bodyFont || 'SourceHanSansCN')))
+    const textColor = globalFontColor.value || textCfg.color || (textType === 'smallText' ? '#64748b' : (isHeading ? (recipe.textStyles?.title?.color || '#0f172a') : (recipe.textStyles?.normalText?.color || '#334155')))
     const fontSize = `${textCfg.fontSize || typeConf.defaultFontSize}px`
     const fontWeight = textCfg.fontWeight || typeConf.defaultFontWeight
     const lineHeight = textCfg.lineHeight || typeConf.defaultLineHeight
@@ -4062,9 +4301,11 @@ function addElement(
     const shapeFill = recipe.shape?.fillColor || (recipe.styleColors && recipe.styleColors[0]) || '#2563eb'
     const shapeBorder = recipe.shape?.borderColor || (recipe.styleColors && recipe.styleColors[1]) || '#1d4ed8'
     const shapeTextCol = recipe.shape?.textColor || '#ffffff'
-    const shapeFont = (recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体')
-      ? recipe.styleFonts.bodyFont
-      : 'SourceHanSansCN'
+    const shapeFont = (globalFontFamily.value && globalFontFamily.value !== '默认字体')
+      ? globalFontFamily.value
+      : ((recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体')
+        ? recipe.styleFonts.bodyFont
+        : 'SourceHanSansCN')
 
     style = {
       top: '40%',
@@ -4274,10 +4515,10 @@ function addElementAt(
   let style: any = {}
 
   if (type === 'text') {
-    const textColor = recipe.textStyles?.title?.color || recipe.styleColors?.[0] || globalFontColor.value || recipe.textStyles?.normalText?.color || '#0f172a'
-    const textFont = (recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体')
-      ? recipe.styleFonts.bodyFont
-      : (globalFontFamily.value && globalFontFamily.value !== '默认字体' ? globalFontFamily.value : 'SourceHanSansCN')
+    const textColor = globalFontColor.value || recipe.textStyles?.title?.color || recipe.styleColors?.[0] || recipe.textStyles?.normalText?.color || '#0f172a'
+    const textFont = (globalFontFamily.value && globalFontFamily.value !== '默认字体')
+      ? globalFontFamily.value
+      : ((recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体') ? recipe.styleFonts.bodyFont : 'SourceHanSansCN')
     content = `<div style="color:${textColor}; font-family:${textFont};"><br></div>`
     style = {
       top: `${topPct.toFixed(2)}%`,
@@ -4306,9 +4547,11 @@ function addElementAt(
     const shapeFill = recipe.shape?.fillColor || (recipe.styleColors && recipe.styleColors[0]) || '#2563eb'
     const shapeBorder = recipe.shape?.borderColor || (recipe.styleColors && recipe.styleColors[1]) || '#1d4ed8'
     const shapeTextCol = recipe.shape?.textColor || '#ffffff'
-    const shapeFont = (recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体')
-      ? recipe.styleFonts.bodyFont
-      : 'SourceHanSansCN'
+    const shapeFont = (globalFontFamily.value && globalFontFamily.value !== '默认字体')
+      ? globalFontFamily.value
+      : ((recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体')
+        ? recipe.styleFonts.bodyFont
+        : 'SourceHanSansCN')
 
     style = {
       top: `${topPct.toFixed(2)}%`,
@@ -4354,7 +4597,9 @@ function addElementAt(
     content = ''
     const chartPalette = (recipe.chart?.palette && recipe.chart.palette.length > 0) ? [...recipe.chart.palette] : (recipe.styleColors || ['#2563eb', '#3b82f6', '#60a5fa'])
     const chartTextCol = recipe.chart?.textColor || recipe.chart?.labelColor || '#1e293b'
-    const chartFont = recipe.chart?.fontFamily || recipe.styleFonts?.bodyFont || 'SourceHanSansCN'
+    const chartFont = (globalFontFamily.value && globalFontFamily.value !== '默认字体')
+      ? globalFontFamily.value
+      : (recipe.chart?.fontFamily || recipe.styleFonts?.bodyFont || 'SourceHanSansCN')
 
     style = {
       top: `${topPct.toFixed(2)}%`,
@@ -4379,6 +4624,9 @@ function addElementAt(
 
   if (type === 'text') {
     newElement.verticalAlign = 'middle'
+    newElement.color = style.color
+    newElement.textColor = style.color
+    newElement.fontFamily = style.fontFamily
   }
 
   if (type === 'shape') {
@@ -8847,16 +9095,18 @@ export function useSlides() {
   function addMaster(name = '自定义母版') {
     const newMasterId = 'master-' + Date.now().toString()
     const newLayoutId = 'layout-' + Date.now().toString()
-    const dateStr = getCurrentFormattedDate()
     const W = logicalWidth.value || 1280
     const H = logicalHeight.value || 720
 
-    const masterElements: SlideElement[] = [
+    const createPlaceholders = (scope: 'master' | 'layout') => [
       {
-        id: 'ph-title-' + Date.now().toString(),
-        type: 'text',
+        id: `ph-title-${scope}-${Date.now().toString(36)}`,
+        type: 'text' as const,
         name: '母版标题占位符',
         content: '<div>单击此处编辑母版标题样式</div>',
+        isMaster: true,
+        isPlaceholder: true,
+        placeholder: { type: 'title', prompt: '单击此处编辑母版标题样式' },
         style: {
           left: '50px',
           top: '40px',
@@ -8868,10 +9118,13 @@ export function useSlides() {
         }
       },
       {
-        id: 'ph-body-' + Date.now().toString(),
-        type: 'text',
+        id: `ph-body-${scope}-${Date.now().toString(36)}`,
+        type: 'text' as const,
         name: '母版文本占位符',
         content: '<div>• 单击此处编辑母版文本样式</div><div style="padding-left: 24px;">• 第二级</div><div style="padding-left: 48px;">• 第三级</div><div style="padding-left: 72px;">• 第四级</div><div style="padding-left: 96px;">• 第五级</div>',
+        isMaster: true,
+        isPlaceholder: true,
+        placeholder: { type: 'body', prompt: '单击此处编辑母版文本样式' },
         style: {
           left: '50px',
           top: '130px',
@@ -8881,51 +9134,6 @@ export function useSlides() {
           color: '#475569',
           lineHeight: '1.6'
         }
-      },
-      {
-        id: 'ph-date-' + Date.now().toString(),
-        type: 'text',
-        name: '日期占位符',
-        content: `<div>${dateStr}</div>`,
-        style: {
-          left: '50px',
-          top: `${H - 48}px`,
-          width: '220px',
-          height: '30px',
-          fontSize: '12px',
-          color: '#94a3b8',
-          textAlign: 'left'
-        }
-      },
-      {
-        id: 'ph-footer-' + Date.now().toString(),
-        type: 'text',
-        name: '页脚占位符',
-        content: '<div>页脚区</div>',
-        style: {
-          left: `${Math.round(W / 2 - 110)}px`,
-          top: `${H - 48}px`,
-          width: '220px',
-          height: '30px',
-          fontSize: '12px',
-          color: '#94a3b8',
-          textAlign: 'center'
-        }
-      },
-      {
-        id: 'ph-num-' + Date.now().toString(),
-        type: 'text',
-        name: '页码占位符',
-        content: '<div>&lt;#&gt;</div>',
-        style: {
-          left: `${W - 270}px`,
-          top: `${H - 48}px`,
-          width: '220px',
-          height: '30px',
-          fontSize: '12px',
-          color: '#94a3b8',
-          textAlign: 'right'
-        }
       }
     ]
 
@@ -8935,13 +9143,14 @@ export function useSlides() {
       background: '#ffffff',
       themeColors: ['#3b82f6', '#f59e0b', '#ef4444', '#10b981', '#8b5cf6'],
       fontFamily: 'SourceHanSansCN',
-      elements: masterElements,
+      elements: [],
+      placeholders: createPlaceholders('master'),
       layouts: [
         {
           id: newLayoutId,
           name: '默认版式',
           type: 'title-body',
-          elements: masterElements,
+          elements: createPlaceholders('layout'),
           placeholders: []
         }
       ]
@@ -8956,16 +9165,17 @@ export function useSlides() {
     const targetMaster = slideMasters.value.find(m => m.id === masterId)
     if (!targetMaster) return
     const newLayoutId = 'layout-' + Date.now().toString() + Math.random().toString(36).substring(2, 6)
-    const dateStr = getCurrentFormattedDate()
     const W = logicalWidth.value || 1280
-    const H = logicalHeight.value || 720
 
     const layoutElements: SlideElement[] = [
       {
-        id: 'ph-title-' + Date.now().toString(),
+        id: 'ph-title-' + Date.now().toString(36) + Math.random().toString(36).substring(2, 6),
         type: 'text',
         name: '母版标题占位符',
         content: '<div>单击此处编辑母版标题样式</div>',
+        isMaster: true,
+        isPlaceholder: true,
+        placeholder: { type: 'title', prompt: '单击此处编辑母版标题样式' },
         style: {
           left: '50px',
           top: '40px',
@@ -8975,51 +9185,6 @@ export function useSlides() {
           fontWeight: 'bold',
           color: '#1e293b'
         }
-      },
-      {
-        id: 'ph-date-' + Date.now().toString(),
-        type: 'text',
-        name: '日期占位符',
-        content: `<div>${dateStr}</div>`,
-        style: {
-          left: '50px',
-          top: `${H - 48}px`,
-          width: '220px',
-          height: '30px',
-          fontSize: '12px',
-          color: '#94a3b8',
-          textAlign: 'left'
-        }
-      },
-      {
-        id: 'ph-footer-' + Date.now().toString(),
-        type: 'text',
-        name: '页脚占位符',
-        content: '<div>页脚区</div>',
-        style: {
-          left: `${Math.round(W / 2 - 110)}px`,
-          top: `${H - 48}px`,
-          width: '220px',
-          height: '30px',
-          fontSize: '12px',
-          color: '#94a3b8',
-          textAlign: 'center'
-        }
-      },
-      {
-        id: 'ph-num-' + Date.now().toString(),
-        type: 'text',
-        name: '页码占位符',
-        content: '<div>&lt;#&gt;</div>',
-        style: {
-          left: `${W - 270}px`,
-          top: `${H - 48}px`,
-          width: '220px',
-          height: '30px',
-          fontSize: '12px',
-          color: '#94a3b8',
-          textAlign: 'right'
-        }
       }
     ]
 
@@ -9167,14 +9332,17 @@ export function useSlides() {
         type: 'shape',
         name: '图片占位符',
         content: 'rect',
-        text: '<div>图片占位符</div>',
+        text: '',
+        isPlaceholder: true,
+        placeholder: { type: 'image', prompt: '图片占位符' },
         style: {
           left: '50px',
           top: '140px',
           width: `${W - 100}px`,
           height: `${Math.max(200, H - 210)}px`,
-          fill: '#f1f5f9',
-          textColor: '#6366f1',
+          fill: '#d9dde3',
+          borderRadius: '12px',
+          textColor: '#475569',
           fontSize: '16px',
           textAlign: 'center'
         }
@@ -9186,6 +9354,8 @@ export function useSlides() {
         textType: 'smallText',
         name: '页码占位符',
         content: '<div>&lt;#&gt;</div>',
+        isPlaceholder: true,
+        placeholder: { type: 'slide-number', prompt: '<#>' },
         style: {
           left: `${W - 270}px`,
           top: `${H - 48}px`,
@@ -9204,6 +9374,8 @@ export function useSlides() {
         textType: 'smallText',
         name: '日期占位符',
         content: `<div>${dateStr}</div>`,
+        isPlaceholder: true,
+        placeholder: { type: 'date', prompt: dateStr },
         style: {
           left: '50px',
           top: `${H - 48}px`,
@@ -9220,6 +9392,8 @@ export function useSlides() {
         type: 'text',
         name: '页脚占位符',
         content: '<div>页脚文本描述</div>',
+        isPlaceholder: true,
+        placeholder: { type: 'footer', prompt: '页脚文本描述' },
         style: {
           left: `${Math.round(W / 2 - 110)}px`,
           top: `${H - 48}px`,
@@ -9233,7 +9407,10 @@ export function useSlides() {
     }
 
     if (!targetObj.elements) targetObj.elements = []
-    if (newEl) newEl.isMaster = true
+    if (newEl) {
+      newEl.isMaster = true
+      newEl.isPlaceholder = true
+    }
     targetObj.elements.push(newEl)
     selectedElementId.value = newId
     selectedElementIds.value = [newId]
@@ -9354,6 +9531,7 @@ export function useSlides() {
     updateAnimationDuration,
     updateAnimationTrigger,
     updateAnimationEffect,
+    updateAnimationTargetElement,
     updateAnimationOrder,
     currentAnimationIndex,
     execNext,