jvs-ppt-ui 0.0.14 → 0.0.16

package/src/components/sidebar/panels/SidebarDesignPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, defineAsyncComponent } from 'vue'
+import { ref, computed, watch, nextTick, defineAsyncComponent } from 'vue'
 // 样式构建器大弹层(~100KB 源码)异步化：首次打开才加载
 const StyleBuilderDialog = defineAsyncComponent(() => import('../../StyleBuilderDialog.vue'))
 import LayoutThumbSvg from './LayoutThumbSvg.vue'
@@ -7,6 +7,7 @@ import QuickColorPopover from '../../QuickColorPopover.vue'
 import GradientEditor from './GradientEditor.vue'
 import { useSlides, gradientPresets, normalizeSlideBackground } from '../../../composables/useSlides'
 import { SYS_FONTS } from '../../../configs/fonts'
+import { PATTERN_PRESETS, parseColor, hexToRgba, generateGradientEndColor, buildPatternSvgDataUrl, parsePatternSvgMeta } from '../../../composables/sidebar/useSidebarShapeFormat'
 
 const props = defineProps<{
   designActiveTab: string
@@ -56,16 +57,23 @@ const {
   activeMasterId,
   slideMasters,
   getThemeUsageLabel,
+  getThemeUsageSlides,
   addHistorySnapshot,
-  uploadResource
+  uploadResource,
+  logicalWidth,
+  logicalHeight
 } = useSlides()
 
 const currentActiveThemeId = computed(() => {
+  let themeId = ''
   if (isMasterEditingView.value) {
     const master = slideMasters.value.find(m => m.id === activeMasterId.value) || slideMasters.value[0]
-    return (master as any)?.themeId || 'default-recipe'
+    themeId = (master as any)?.themeId || 'tech-blue'
+  } else {
+    themeId = props.slides[props.activeIndex]?.themeId || 'tech-blue'
   }
-  return props.slides[props.activeIndex]?.themeId || 'default-recipe'
+  if (themeId === 'default-recipe') return 'tech-blue'
+  return themeId
 })
 
 // Quick Color Popover recent colors
@@ -73,20 +81,287 @@ const quickRecentColors = ref<string[]>([])
 const globalFontColorPopoverVisible = ref(false)
 const globalBorderColorPopoverVisible = ref(false)
 const bgColorPopoverVisible = ref(false)
+const bgPatternFgPopoverVisible = ref(false)
+const bgPatternBgPopoverVisible = ref(false)
 const isCustomColorPickerOpen = ref(false)
 
+// 画布尺寸下拉 Popover 状态
+const isRatioPopoverVisible = ref(false)
+const ratioTriggerRef = ref<HTMLElement | null>(null)
+const ratioTriggerWidth = ref(258)
+
+const ratioOptions = [
+  { label: '宽屏 16:9', value: '16:9' },
+  { label: '正宽 4:3', value: '4:3' },
+  { label: '宽屏 16:10', value: '16:10' },
+  { label: '手机竖屏 9:16 (移动端)', value: '9:16' }
+]
+
+const currentRatioLabel = computed(() => {
+  const match = ratioOptions.find(opt => opt.value === props.slideRatio)
+  if (match) return match.label
+  if (props.slideRatio === 'custom') return '自定义尺寸'
+  return props.slideRatio || '宽屏 16:9'
+})
+
+function onRatioPopoverShow() {
+  if (ratioTriggerRef.value) {
+    ratioTriggerWidth.value = ratioTriggerRef.value.offsetWidth
+  }
+}
+
+function selectRatio(val: string) {
+  emit('update:slideRatio', val)
+  isRatioPopoverVisible.value = false
+}
+
+// 背景图片适配模式下拉 Popover 状态
+const isImageModePopoverVisible = ref(false)
+const imageModeTriggerRef = ref<HTMLElement | null>(null)
+const imageModeTriggerWidth = ref(180)
+
+const imageModeOptions = [
+  { label: '拉伸铺满', value: 'stretch' },
+  { label: '等比缩放', value: 'contain' },
+  { label: '居中', value: 'cover' },
+  { label: '平铺', value: 'tile' }
+]
+
+const currentImageModeLabel = computed(() => {
+  const match = imageModeOptions.find(opt => opt.value === bgImageMode.value)
+  return match ? match.label : '拉伸铺满'
+})
+
+function onImageModePopoverShow() {
+  if (imageModeTriggerRef.value) {
+    imageModeTriggerWidth.value = imageModeTriggerRef.value.offsetWidth
+  }
+}
+
+function selectImageMode(val: string) {
+  bgImageMode.value = val as any
+  isImageModePopoverVisible.value = false
+}
+
+// 字体下拉 Popover 状态
+const isFontPopoverVisible = ref(false)
+const fontTriggerRef = ref<HTMLElement | null>(null)
+const fontTriggerWidth = ref(258)
+
+const currentFontFamilyLabel = computed(() => {
+  if (!globalFontFamily.value || globalFontFamily.value === '默认字体') return '默认字体'
+  return fontLabel(globalFontFamily.value)
+})
+
+function onFontPopoverShow() {
+  if (fontTriggerRef.value) {
+    fontTriggerWidth.value = fontTriggerRef.value.offsetWidth
+  }
+}
+
+function selectFont(fontVal: string) {
+  globalFontFamily.value = fontVal
+  isFontPopoverVisible.value = false
+}
+
 // 主题色色盘 Popover
 const themePalettePopoverVisible = ref(false)
 const globalThemeColorPopoverVisible = ref<boolean[]>(Array(5).fill(false))
 
-// 格式化 hex 显示（去掉 # 并大写）
-const formatHexDisplay = (color: string) => {
-  if (!color || typeof color !== 'string') return 'FFFFFF'
-  return color.replace('#', '').toUpperCase()
+// 格式化 hex 显示（去掉 # 并大写，保留 6 位纯色）
+const formatHexDisplay = (color: any) => {
+  if (!color) return 'FFFFFF'
+  let str = ''
+  if (typeof color === 'string') {
+    str = color
+  } else if (typeof color === 'object' && color !== null) {
+    if (color.type === 'color' && typeof color.value === 'string') {
+      str = color.value
+    } else if (typeof color.value === 'string') {
+      str = color.value
+    }
+  }
+  if (!str || str === 'transparent' || str === 'none') return 'FFFFFF'
+  const parsed = parseColor(str)
+  let clean = (parsed.hex || str).replace('#', '').trim().toUpperCase()
+  if (clean.length === 8) clean = clean.slice(0, 6)
+  return clean
 }
 
 // 字体显示名称
-const fontLabel = (font: string) => SYS_FONTS.find(f => f.value === font || f.label === font)?.label || font
+const fontLabel = (font?: string) => {
+  if (!font) return '思源黑体 CN'
+  if (font === 'SourceHanSansCN' || font === '思源黑体') return '思源黑体 CN'
+  return SYS_FONTS.find(f => f.value === font || f.label === font)?.label || font
+}
+
+const getThemeSlideCount = (recipeId: string) => {
+  const pages = getThemeUsageSlides(recipeId)
+  return pages ? pages.length : 0
+}
+
+const getThemeFontColors = (recipe: any) => {
+  if (recipe.id === 'tech-blue') return { aa: '#2563eb', font: '#64748b' }
+  if (recipe.id === 'fresh-green') return { aa: '#047857', font: '#059669' }
+  if (recipe.id === 'fashion-purple') return { aa: '#7c3aed', font: '#8b5cf6' }
+  if (recipe.id === 'dark-gold') return { aa: '#fbbf24', font: '#d97706' }
+  if (recipe.id === 'warm-amber') return { aa: '#ea580c', font: '#c2410c' }
+
+  const isDark = recipe.backgroundColor && (recipe.backgroundColor === '#121826' || recipe.backgroundColor === '#0f172a' || recipe.backgroundColor === '#18181b')
+  return {
+    aa: recipe.styleColors?.[0] || '#2563eb',
+    font: isDark ? '#e2e8f0' : (recipe.textStyles?.subheadline?.color || '#64748b')
+  }
+}
+
+function handleSelectTheme(recipe: any) {
+  emit('applyStyleRecipeToSlides', recipe, false)
+}
+
+function handleEditTheme(recipe: any) {
+  emit('openStyleBuilder', isMasterEditingView.value ? 'all' : 'single', recipe.id)
+}
+
+function handleDuplicateTheme(recipe: any) {
+  const newRecipe = JSON.parse(JSON.stringify(recipe))
+  newRecipe.id = 'theme-' + Date.now()
+  newRecipe.name = `${recipe.name} 副本`
+  const list = props.builtinStyleRecipes
+  const idx = list.findIndex((r: any) => r.id === recipe.id)
+  if (idx >= 0) {
+    list.splice(idx + 1, 0, newRecipe)
+  } else {
+    list.push(newRecipe)
+  }
+  notify?.(`已复制主题「${recipe.name}」`)
+}
+
+function handleApplyToAllSlides(recipe: any) {
+  emit('applyStyleRecipeToSlides', recipe, true)
+}
+
+function handleDeleteTheme(recipe: any) {
+  const list = props.builtinStyleRecipes
+  const idx = list.findIndex((r: any) => r.id === recipe.id)
+  if (idx >= 0) {
+    list.splice(idx, 1)
+    notify?.(`已删除主题「${recipe.name}」`)
+  }
+}
+
+// 缓存背景图片的原始宽高，用于居中/平铺模式的精确比例计算
+const bgImageNaturalSizes = ref<Record<string, { w: number; h: number }>>({})
+const loadingBgImageUrls = new Set<string>()
+
+function extractUrlFromBgCss(bg: any): string {
+  if (!bg) return ''
+  if (typeof bg === 'string') {
+    const startIdx = bg.indexOf('url(')
+    if (startIdx === -1) return ''
+    const closeIdx = bg.lastIndexOf(')')
+    if (closeIdx <= startIdx + 4) return ''
+    let inner = bg.slice(startIdx + 4, closeIdx).trim()
+    if ((inner.startsWith('"') && inner.endsWith('"')) || (inner.startsWith("'") && inner.endsWith("'"))) {
+      inner = inner.slice(1, -1).trim()
+    }
+    return inner
+  }
+  if (typeof bg === 'object' && bg !== null) {
+    const norm = normalizeSlideBackground(bg)
+    if (norm.bgType === 'image') {
+      return extractUrlFromBgCss(norm.background)
+    }
+  }
+  return ''
+}
+
+function ensureBgImageSizeLoaded(url: string) {
+  if (!url || url.startsWith('data:image/svg+xml') || bgImageNaturalSizes.value[url] || loadingBgImageUrls.has(url)) {
+    return
+  }
+  loadingBgImageUrls.add(url)
+  const img = new Image()
+  img.onload = () => {
+    loadingBgImageUrls.delete(url)
+    const w = img.naturalWidth || img.width
+    const h = img.naturalHeight || img.height
+    if (w > 0 && h > 0) {
+      bgImageNaturalSizes.value = {
+        ...bgImageNaturalSizes.value,
+        [url]: { w, h }
+      }
+      // 若当前幻灯片正在使用该图片且处于居中或平铺模式，按真实尺寸比例刷新背景 CSS
+      const curUrl = extractUrlFromBgCss(activeSlide.value?.background)
+      const curMode = bgImageMode.value
+      if (activeSlide.value && curUrl === url && (curMode === 'cover' || curMode === 'tile')) {
+        const formatted = formatSlideBgImageCss(url, curMode)
+        if (activeSlide.value.background !== formatted) {
+          activeSlide.value.background = formatted
+        }
+      }
+    }
+  }
+  img.onerror = () => {
+    loadingBgImageUrls.delete(url)
+  }
+  img.src = url
+}
+
+function formatSlideBgImageCss(url: string, mode: string): string {
+  if (!url) return ''
+  if (url.startsWith('data:image/svg+xml')) {
+    if (mode === 'stretch') return `url("${url}") center center / 100% 100% no-repeat`
+    if (mode === 'contain') return `url("${url}") center center / contain no-repeat`
+    if (mode === 'cover') return `url("${url}") center center / auto no-repeat`
+    return `url("${url}") left top / auto repeat`
+  }
+
+  if (mode === 'stretch') {
+    return `url("${url}") center center / 100% 100% no-repeat`
+  }
+  if (mode === 'contain') {
+    return `url("${url}") center center / contain no-repeat`
+  }
+  if (mode === 'cover') {
+    ensureBgImageSizeLoaded(url)
+    const dim = bgImageNaturalSizes.value[url]
+    const slideW = logicalWidth?.value || 1280
+    const slideH = logicalHeight?.value || 720
+    if (dim && dim.w > 0 && dim.h > 0) {
+      if (dim.w <= slideW * 0.75 && dim.h <= slideH * 0.75) {
+        const wPct = ((dim.w / slideW) * 100).toFixed(2)
+        const hPct = ((dim.h / slideH) * 100).toFixed(2)
+        return `url("${url}") center center / ${wPct}% ${hPct}% no-repeat`
+      } else {
+        const scale = Math.min((slideW * 0.6) / dim.w, (slideH * 0.6) / dim.h)
+        const wPct = ((dim.w * scale / slideW) * 100).toFixed(2)
+        const hPct = ((dim.h * scale / slideH) * 100).toFixed(2)
+        return `url("${url}") center center / ${wPct}% ${hPct}% no-repeat`
+      }
+    }
+    return `url("${url}") center center / 60% auto no-repeat`
+  }
+  if (mode === 'tile') {
+    ensureBgImageSizeLoaded(url)
+    const dim = bgImageNaturalSizes.value[url]
+    const slideW = logicalWidth?.value || 1280
+    const slideH = logicalHeight?.value || 720
+    if (dim && dim.w > 0 && dim.h > 0) {
+      if (dim.w <= slideW * 0.35 && dim.h <= slideH * 0.35) {
+        const wPct = ((dim.w / slideW) * 100).toFixed(2)
+        const hPct = ((dim.h / slideH) * 100).toFixed(2)
+        return `url("${url}") left top / ${wPct}% ${hPct}% repeat`
+      } else {
+        const scale = Math.min((slideW * 0.25) / dim.w, (slideH * 0.3333) / dim.h)
+        const wPct = ((dim.w * scale / slideW) * 100).toFixed(2)
+        const hPct = ((dim.h * scale / slideH) * 100).toFixed(2)
+        return `url("${url}") left top / ${wPct}% ${hPct}% repeat`
+      }
+    }
+    return `url("${url}") left top / 25% auto repeat`
+  }
+  return `url("${url}") center center / 100% 100% no-repeat`
+}
 
 // 背景类型与颜色
 const bgFillType = computed({
@@ -102,13 +377,37 @@ const bgFillType = computed({
     if (activeSlide.value) {
       activeSlide.value.bgType = val
       if (val === 'color') {
-        if (typeof activeSlide.value.background === 'string' && (activeSlide.value.background.startsWith('linear-gradient') || activeSlide.value.background.startsWith('radial-gradient') || activeSlide.value.background.startsWith('url'))) {
+        if (typeof activeSlide.value.background === 'string' && (activeSlide.value.background.startsWith('linear-gradient') || activeSlide.value.background.startsWith('radial-gradient') || activeSlide.value.background.includes('url('))) {
           activeSlide.value.background = '#ffffff'
         }
       } else if (val === 'gradient') {
-        activeSlide.value.background = 'linear-gradient(135deg, #f43f5e 0%, #f97316 100%)'
+        if (typeof activeSlide.value.background !== 'string' || !activeSlide.value.background.includes('gradient')) {
+          activeSlide.value.background = 'linear-gradient(135deg, #f43f5e 0%, #f97316 100%)'
+        }
       } else if (val === 'image') {
-        activeSlide.value.background = ''
+        const existingUrl = extractUrlFromBgCss(activeSlide.value.background)
+        const isExistingSvgPattern = existingUrl.startsWith('data:image/svg+xml')
+        if (activeBgTab.value === 'image') {
+          const targetUrl = (!isExistingSvgPattern && existingUrl) ? existingUrl : ((activeSlide.value as any)._lastBgImageUrl || '')
+            ; (activeSlide.value as any).isPattern = false
+          if (targetUrl) {
+            const mode = (activeSlide.value as any).bgImageMode || 'stretch'
+            activeSlide.value.background = formatSlideBgImageCss(targetUrl, mode)
+          } else {
+            activeSlide.value.background = ''
+          }
+        } else if (activeBgTab.value === 'pattern') {
+          ; (activeSlide.value as any).isPattern = true
+          if (isExistingSvgPattern && existingUrl) {
+            activeSlide.value.background = `url("${existingUrl}") left top / auto repeat`
+          } else {
+            const pType = (activeSlide.value as any).bgPatternType || 'dots-sparse'
+            const pFg = (activeSlide.value as any).bgPatternFg || '#3B82F6'
+            const pBg = (activeSlide.value as any).bgPatternBg || '#FFFFFF'
+            const patUrl = buildPatternSvgDataUrl(pType, pFg, pBg)
+            activeSlide.value.background = `url("${patUrl}") left top / auto repeat`
+          }
+        }
       }
       addHistorySnapshot()
     }
@@ -140,21 +439,78 @@ const activeBgColor = computed({
     return '#ffffff'
   },
   set(val: string) {
+    onSelectBgColor(val)
+  }
+})
+
+const activeBgHex = computed(() => {
+  return parseColor(activeBgColor.value).hex || '#FFFFFF'
+})
+
+const displayBgOpacity = computed(() => {
+  const bg = activeSlide.value?.background
+  if (!bg) return 100
+  const parsed = parseColor(bg)
+  return parsed.alpha !== undefined ? Math.max(0, Math.min(100, Math.round(parsed.alpha))) : 100
+})
+
+function handleBgOpacityInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  let val = parseInt(target.value)
+  if (isNaN(val)) val = 100
+  val = Math.max(0, Math.min(100, val))
+  setBgColorWithOpacity(activeBgHex.value, val)
+}
+
+function onSelectBgColor(color: string) {
+  if (!color || color === 'transparent' || color === 'none') {
     if (activeSlide.value) {
-      activeSlide.value.background = val
+      activeSlide.value.background = '#ffffff'
       activeSlide.value.bgType = 'color'
       addHistorySnapshot()
     }
+    return
   }
-})
+  const parsed = parseColor(color)
+  const alpha = (parsed.alpha !== undefined && parsed.alpha < 100) ? parsed.alpha : displayBgOpacity.value
+  setBgColorWithOpacity(parsed.hex, alpha)
+}
+
+function setBgColorWithOpacity(hexColor: string, alpha: number) {
+  if (!activeSlide.value) return
+  const cleanHex = hexColor.startsWith('#') ? hexColor.slice(0, 7) : `#${hexColor.slice(0, 6)}`
+  if (alpha >= 100) {
+    activeSlide.value.background = cleanHex
+  } else {
+    const alphaHex = Math.round(alpha * 255 / 100).toString(16).padStart(2, '0').toUpperCase()
+    activeSlide.value.background = `${cleanHex}${alphaHex}`
+  }
+  activeSlide.value.bgType = 'color'
+  addHistorySnapshot()
+}
 
 const bgImageMode = computed({
   get() {
-    return (activeSlide.value as any)?.bgImageMode || 'stretch'
+    if ((activeSlide.value as any)?.bgImageMode) {
+      return (activeSlide.value as any).bgImageMode
+    }
+    const bg = activeSlide.value?.background
+    if (typeof bg === 'string' && bg.includes('url(')) {
+      if (/\brepeat\b/i.test(bg) && !/\bno-repeat\b/i.test(bg)) return 'tile'
+      if (/\bcontain\b/i.test(bg)) return 'contain'
+      if (/\bcover\b/i.test(bg) || /\bauto\s+no-repeat\b/i.test(bg)) return 'cover'
+    }
+    return 'stretch'
   },
   set(val: string) {
     if (activeSlide.value) {
-      (activeSlide.value as any).bgImageMode = val
+      ; (activeSlide.value as any).bgImageMode = val
+      const currentUrl = bgImageUrl.value || (activeSlide.value as any)._lastBgImageUrl || ''
+      if (currentUrl) {
+        ; (activeSlide.value as any).isPattern = false
+        activeSlide.value.background = formatSlideBgImageCss(currentUrl, val)
+        activeSlide.value.bgType = 'image'
+      }
       addHistorySnapshot()
     }
   }
@@ -162,17 +518,32 @@ const bgImageMode = computed({
 
 const bgImageUrl = computed({
   get() {
-    if (!activeSlide.value?.background || typeof activeSlide.value.background !== 'string') return ''
-    const match = activeSlide.value.background.match(/url\(['"]?(.*?)['"]?\)/)
-    return match ? match[1] : ''
+    const rawUrl = extractUrlFromBgCss(activeSlide.value?.background)
+    if (activeBgTab.value === 'pattern') {
+      return rawUrl
+    }
+    if (rawUrl && !rawUrl.startsWith('data:image/svg+xml')) {
+      return rawUrl
+    }
+    return (activeSlide.value as any)?._lastBgImageUrl || rawUrl || ''
   },
   set(url: string) {
     if (activeSlide.value) {
       if (!url) {
-        activeSlide.value.background = '#ffffff'
-        activeSlide.value.bgType = 'color'
+        ; (activeSlide.value as any)._lastBgImageUrl = ''
+          ; (activeSlide.value as any).isPattern = false
+        activeSlide.value.background = ''
+        activeSlide.value.bgType = 'image'
       } else {
-        activeSlide.value.background = `url("${url}")`
+        const isSvgPattern = url.startsWith('data:image/svg+xml')
+          ; (activeSlide.value as any).isPattern = isSvgPattern
+        if (!isSvgPattern) {
+          ; (activeSlide.value as any)._lastBgImageUrl = url
+          const mode = bgImageMode.value || 'stretch'
+          activeSlide.value.background = formatSlideBgImageCss(url, mode)
+        } else {
+          activeSlide.value.background = `url("${url}") left top / auto repeat`
+        }
         activeSlide.value.bgType = 'image'
       }
       addHistorySnapshot()
@@ -180,6 +551,89 @@ const bgImageUrl = computed({
   }
 })
 
+const bgImagePreviewStyle = computed(() => {
+  const url = bgImageUrl.value
+  if (!url) return {}
+  const css = formatSlideBgImageCss(url, bgImageMode.value)
+  return {
+    background: `transparent ${css}`
+  }
+})
+
+const activeBgPatternMeta = computed(() => {
+  const rawUrl = extractUrlFromBgCss(activeSlide.value?.background)
+  return parsePatternSvgMeta(rawUrl)
+})
+
+const activeBgPatternType = computed(() => {
+  return (activeSlide.value as any)?.bgPatternType || activeBgPatternMeta.value.type || 'dots-sparse'
+})
+
+const activeBgPatternFg = computed(() => {
+  return (activeSlide.value as any)?.bgPatternFg || activeBgPatternMeta.value.fg || '#3B82F6'
+})
+
+const activeBgPatternBg = computed(() => {
+  return (activeSlide.value as any)?.bgPatternBg || activeBgPatternMeta.value.bg || '#FFFFFF'
+})
+
+const parsedBgPatternFg = computed(() => parseColor(activeBgPatternFg.value))
+const parsedBgPatternBg = computed(() => parseColor(activeBgPatternBg.value))
+
+function getBgPatternPresetPreviewUrl(p: { key: string; url: string }) {
+  return buildPatternSvgDataUrl(p.key, activeBgPatternFg.value, activeBgPatternBg.value)
+}
+
+function isBgPatternPresetActive(p: { key: string; url: string }) {
+  return activeBgPatternType.value === p.key
+}
+
+function applyBgPattern(type: string, fg: string, bg: string) {
+  if (!activeSlide.value) return
+  ;(activeSlide.value as any).bgPatternType = type
+  ;(activeSlide.value as any).bgPatternFg = fg
+  ;(activeSlide.value as any).bgPatternBg = bg
+  ;(activeSlide.value as any).isPattern = true
+  const patUrl = buildPatternSvgDataUrl(type, fg, bg)
+  activeSlide.value.background = `url("${patUrl}") left top / auto repeat`
+  activeSlide.value.bgType = 'image'
+  addHistorySnapshot()
+}
+
+function selectBgPatternPreset(p: { key: string; url: string }) {
+  applyBgPattern(p.key, activeBgPatternFg.value, activeBgPatternBg.value)
+}
+
+function onSelectBgPatternFgColor(color: string) {
+  const fg = (!color || color === 'transparent' || color === 'none') ? 'transparent' : color
+  applyBgPattern(activeBgPatternType.value, fg, activeBgPatternBg.value)
+}
+
+function handleBgPatternFgOpacityInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  let val = parseInt(target.value)
+  if (isNaN(val)) val = 100
+  val = Math.max(0, Math.min(100, val))
+  const hex = parsedBgPatternFg.value.hex === 'transparent' ? '#3B82F6' : parsedBgPatternFg.value.hex
+  const fg = val === 0 ? 'transparent' : (val === 100 ? hex : hexToRgba(hex, val))
+  applyBgPattern(activeBgPatternType.value, fg, activeBgPatternBg.value)
+}
+
+function onSelectBgPatternBgColor(color: string) {
+  const bg = (!color || color === 'transparent' || color === 'none') ? 'transparent' : color
+  applyBgPattern(activeBgPatternType.value, activeBgPatternFg.value, bg)
+}
+
+function handleBgPatternBgOpacityInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  let val = parseInt(target.value)
+  if (isNaN(val)) val = 100
+  val = Math.max(0, Math.min(100, val))
+  const hex = parsedBgPatternBg.value.hex === 'transparent' ? '#FFFFFF' : parsedBgPatternBg.value.hex
+  const bg = val === 0 ? 'transparent' : (val === 100 ? hex : hexToRgba(hex, val))
+  applyBgPattern(activeBgPatternType.value, activeBgPatternFg.value, bg)
+}
+
 const bgFileInputRef = ref<HTMLInputElement | null>(null)
 const uploadBgImage = () => {
   bgFileInputRef.value?.click()
@@ -215,6 +669,82 @@ const applyBackground = (css: string) => {
   }
 }
 
+type BgFillMode = 'solid' | 'gradient-linear' | 'gradient-radial' | 'gradient-rect' | 'image' | 'pattern'
+
+const activeBgTab = ref<BgFillMode>('solid')
+
+const isSolidBg = computed(() => activeBgTab.value === 'solid' || (activeBgTab.value as string) === 'color')
+const isGradientBg = computed(() => activeBgTab.value.startsWith('gradient'))
+const isImageBg = computed(() => activeBgTab.value === 'image')
+const isPatternBg = computed(() => activeBgTab.value === 'pattern')
+
+const bgGradientEditorRef = ref<any>(null)
+
+watch(
+  [() => activeSlide.value?.bgType, () => activeSlide.value?.background, () => activeIndex.value],
+  () => {
+    const bg = activeSlide.value?.background
+    const effectiveType = activeSlide.value?.bgType || (bg ? normalizeSlideBackground(bg).bgType : 'color')
+    if (effectiveType === 'image' || (typeof bg === 'string' && bg.includes('url('))) {
+      const url = extractUrlFromBgCss(bg)
+      if (url && !url.startsWith('data:image/svg+xml') && activeSlide.value) {
+        ; (activeSlide.value as any)._lastBgImageUrl = url
+        ensureBgImageSizeLoaded(url)
+        if (!(activeSlide.value as any)?.isPattern) {
+          const formatted = formatSlideBgImageCss(url, bgImageMode.value)
+          if (typeof bg === 'string' && bg !== formatted) {
+            activeSlide.value.background = formatted
+          }
+        }
+      }
+      if ((typeof bg === 'string' && bg.includes('data:image/svg+xml')) || (activeSlide.value as any)?.isPattern) {
+        activeBgTab.value = 'pattern'
+      } else {
+        activeBgTab.value = 'image'
+      }
+    } else if (effectiveType === 'gradient' || (typeof bg === 'string' && bg.includes('gradient('))) {
+      if (typeof bg === 'string') {
+        if (bg.includes('closest-side') || bg.includes('rect') || bg.includes('ellipse')) activeBgTab.value = 'gradient-rect'
+        else if (bg.includes('radial') || bg.includes('circle')) activeBgTab.value = 'gradient-radial'
+        else activeBgTab.value = 'gradient-linear'
+      } else {
+        activeBgTab.value = 'gradient-linear'
+      }
+    } else {
+      if (!(activeBgTab.value === 'image' && activeSlide.value?.bgType === 'image' && !bg)) {
+        activeBgTab.value = 'solid'
+      }
+    }
+  },
+  { immediate: true }
+)
+
+function selectBgTab(tab: BgFillMode) {
+  activeBgTab.value = tab
+  if (tab === 'solid') {
+    bgFillType.value = 'color'
+  } else if (tab === 'image') {
+    bgFillType.value = 'image'
+  } else if (tab === 'pattern') {
+    bgFillType.value = 'image'
+  } else if (tab.startsWith('gradient-')) {
+    bgFillType.value = 'gradient'
+    const gType = tab.replace('gradient-', '') as 'linear' | 'radial' | 'rect'
+    if (gType === 'linear') {
+      applyBackground('linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%)')
+    } else if (gType === 'radial') {
+      applyBackground('radial-gradient(circle farthest-corner at 50% 50%, #f8fafc 0%, #cbd5e1 100%)')
+    } else if (gType === 'rect') {
+      applyBackground('radial-gradient(closest-side at 50% 50%, #ffffff 0%, #cbd5e1 100%)')
+    }
+    nextTick(() => {
+      if (bgGradientEditorRef.value?.changeType) {
+        bgGradientEditorRef.value.changeType(gType)
+      }
+    })
+  }
+}
+
 const activeGradientCss = computed(() => {
   const bg = activeSlide.value?.background
   if (!bg) return 'linear-gradient(135deg, #f43f5e 0%, #f97316 100%)'
@@ -229,6 +759,36 @@ const activeGradientCss = computed(() => {
   return 'linear-gradient(135deg, #f43f5e 0%, #f97316 100%)'
 })
 
+const activeGradientStart = computed(() => {
+  const bg = activeSlide.value?.background
+  if (typeof bg === 'string' && bg.includes('gradient')) {
+    const match = bg.match(/#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)/g)
+    if (match && match.length > 0) return parseColor(match[0]).hex
+  }
+  return '#3b82f6'
+})
+
+const activeGradientEnd = computed(() => {
+  const bg = activeSlide.value?.background
+  if (typeof bg === 'string' && bg.includes('gradient')) {
+    const match = bg.match(/#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)/g)
+    if (match && match.length > 1) return parseColor(match[match.length - 1]).hex
+  }
+  return generateGradientEndColor(activeGradientStart.value)
+})
+
+const activeGradientMid = computed(() => {
+  const bg = activeSlide.value?.background
+  if (typeof bg === 'string' && bg.includes('gradient')) {
+    const match = bg.match(/#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)/g)
+    if (match && match.length > 2) {
+      const midIdx = Math.floor(match.length / 2)
+      return parseColor(match[midIdx]).hex
+    }
+  }
+  return '#cbd5e1'
+})
+
 const onGradientEditorUpdate = (css: string) => {
   if (activeSlide.value) {
     activeSlide.value.background = css
@@ -391,351 +951,441 @@ watch(extractTab, () => {
     <input ref="bgFileInputRef" type="file" accept="image/*" style="display: none;" @change="onBgFileChange" />
 
     <!-- 1. 全局设置 Tab (Global Settings) -->
-    <div v-if="designActiveTab === 'global'" style="display: flex; flex-direction: column; gap: 14px; padding: 16px;">
+    <div v-if="designActiveTab === 'global'" class="global-tab-content">
       <!-- 画布尺寸 -->
-      <div class="design-property-row">
-        <span class="shape-property-label">画布尺寸</span>
-        <el-select :model-value="slideRatio" @update:model-value="emit('update:slideRatio', $event)" size="small"
-          style="flex: 1;" class="design-select" placement="bottom-start"
-          :fallback-placements="['bottom-start', 'bottom', 'top-start']">
-          <el-option label="宽屏 16:9" value="16:9" />
-          <el-option label="正宽 4:3" value="4:3" />
-          <el-option label="宽屏 16:10" value="16:10" />
-          <el-option label="手机竖屏 9:16 (移动端)" value="9:16" />
-          <el-option v-if="slideRatio === 'custom'" label="自定义尺寸" value="custom" />
-        </el-select>
+      <div class="global-form-item">
+        <div class="global-item-label">画布尺寸</div>
+        <el-popover v-model:visible="isRatioPopoverVisible" placement="bottom-start" :width="ratioTriggerWidth"
+          trigger="click" popper-class="autofit-popover-panel" :show-arrow="false" :offset="4"
+          @before-enter="onRatioPopoverShow">
+          <template #reference>
+            <div ref="ratioTriggerRef" class="custom-select-trigger" :class="{ 'is-active': isRatioPopoverVisible }">
+              <span class="select-trigger-text">{{ currentRatioLabel }}</span>
+              <svg viewBox="0 0 1024 1024" width="10" height="10" fill="currentColor" class="select-trigger-arrow"
+                :class="{ 'is-open': isRatioPopoverVisible }">
+                <path
+                  d="M831.872 340.777L512 652.672 192.128 340.777a31.968 31.968 0 0 0-45.12 45.312l342.4 333.568a32 32 0 0 0 45.184 0l342.4-333.568a31.968 31.968 0 0 0-45.12-45.312z">
+                </path>
+              </svg>
+            </div>
+          </template>
+
+          <div class="autofit-menu-container">
+            <div v-for="opt in ratioOptions" :key="opt.value" class="autofit-menu-item"
+              :class="{ 'is-selected': slideRatio === opt.value }" @click="selectRatio(opt.value)">
+              <span class="autofit-item-label">{{ opt.label }}</span>
+              <svg v-if="slideRatio === opt.value" viewBox="0 0 24 24" width="15" height="15" fill="none"
+                stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+                class="autofit-check-icon">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+          </div>
+        </el-popover>
       </div>
 
+      <!-- 分割线 -->
+      <div class="global-divider"></div>
+
       <!-- 字体 -->
-      <div class="design-property-row">
-        <span class="shape-property-label">字体</span>
-        <el-select v-model="globalFontFamily" size="small" style="flex: 1;" class="design-select" filterable
-          placement="bottom-start" :fallback-placements="['bottom-start', 'bottom', 'top-start']">
-          <el-option label="默认字体" value="默认字体" />
-          <el-option v-for="font in SYS_FONTS" :key="font.value" :label="font.label" :value="font.value">
-            <span :style="{ fontFamily: font.value }">{{ font.label }}</span>
-          </el-option>
-        </el-select>
+      <div class="global-form-item">
+        <div class="global-item-label">字体</div>
+        <el-popover v-model:visible="isFontPopoverVisible" placement="bottom-start" :width="fontTriggerWidth"
+          trigger="click" popper-class="autofit-popover-panel font-select-popover" :show-arrow="false" :offset="4"
+          @before-enter="onFontPopoverShow">
+          <template #reference>
+            <div ref="fontTriggerRef" class="custom-select-trigger" :class="{ 'is-active': isFontPopoverVisible }">
+              <span class="select-trigger-text"
+                :style="{ fontFamily: (globalFontFamily && globalFontFamily !== '默认字体') ? globalFontFamily : undefined }">
+                {{ currentFontFamilyLabel }}
+              </span>
+              <svg viewBox="0 0 1024 1024" width="10" height="10" fill="currentColor" class="select-trigger-arrow"
+                :class="{ 'is-open': isFontPopoverVisible }">
+                <path
+                  d="M831.872 340.777L512 652.672 192.128 340.777a31.968 31.968 0 0 0-45.12 45.312l342.4 333.568a32 32 0 0 0 45.184 0l342.4-333.568a31.968 31.968 0 0 0-45.12-45.312z">
+                </path>
+              </svg>
+            </div>
+          </template>
+
+          <div class="autofit-menu-container font-menu-scrollable">
+            <div class="autofit-menu-item" :class="{ 'is-selected': !globalFontFamily || globalFontFamily === '默认字体' }"
+              @click="selectFont('默认字体')">
+              <span class="autofit-item-label">默认字体</span>
+              <svg v-if="!globalFontFamily || globalFontFamily === '默认字体'" viewBox="0 0 24 24" width="15" height="15"
+                fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+                class="autofit-check-icon">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+            <div v-for="font in SYS_FONTS" :key="font.value" class="autofit-menu-item"
+              :class="{ 'is-selected': globalFontFamily === font.value }" @click="selectFont(font.value)">
+              <span class="autofit-item-label" :style="{ fontFamily: font.value }">{{ font.label }}</span>
+              <svg v-if="globalFontFamily === font.value" viewBox="0 0 24 24" width="15" height="15" fill="none"
+                stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+                class="autofit-check-icon">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+          </div>
+        </el-popover>
       </div>
 
       <!-- 字体颜色 -->
-      <div class="design-property-row">
-        <span class="shape-property-label">字体颜色</span>
+      <div class="global-form-item" style="margin-top: 14px;">
+        <div class="global-item-label">字体颜色</div>
         <QuickColorPopover v-model:visible="globalFontColorPopoverVisible" :color="globalFontColor"
           v-model:recentColors="quickRecentColors" @select-color="(color) => globalFontColor = color">
           <template #reference>
-            <div class="color-picker-pill-wrapper" style="flex: 1;">
-              <div class="color-pill-inner" style="height: 32px;">
-                <div :style="{ background: globalFontColor }" class="color-square-preview"></div>
-                <span style="font-size: 11px; color: var(--text-primary); font-family: monospace; font-weight: 500;">
-                  {{ formatHexDisplay(globalFontColor) }}
-                </span>
+            <div class="global-color-pill">
+              <div class="color-pill-left">
+                <div class="color-swatch" :style="{ backgroundColor: globalFontColor }"></div>
+                <span class="color-hex-text">{{ formatHexDisplay(globalFontColor) }}</span>
               </div>
+              <div class="color-opacity-text">100%</div>
             </div>
           </template>
         </QuickColorPopover>
+
+        <button class="global-action-btn" style="margin-top: 10px;" @click="applyFontToAll">
+          全局统一字体
+        </button>
       </div>
 
-      <!-- 背景颜色 -->
-      <div :class="bgFillType === 'color' ? 'design-property-row-start' : 'design-property-row'">
-        <span class="shape-property-label" :style="bgFillType === 'color' ? 'margin-top: 6px;' : ''">背景颜色</span>
-        <div style="flex: 1; display: flex; flex-direction: column; gap: 8px;">
-          <el-select v-model="bgFillType" size="small" style="width: 100%;" class="design-select"
-            placement="bottom-start" :fallback-placements="['bottom-start', 'bottom', 'top-start']">
-            <el-option label="纯色填充" value="color" />
-            <el-option label="渐变填充" value="gradient" />
-            <el-option label="图片填充" value="image" />
-          </el-select>
-
-          <!-- 纯色填充色块选择器 (独占一行，不与下拉框挤在一起) -->
-          <QuickColorPopover v-if="bgFillType === 'color'" v-model:visible="bgColorPopoverVisible"
-            :color="activeBgColor" v-model:recentColors="quickRecentColors"
-            @select-color="(color) => activeBgColor = color">
-            <template #reference>
-              <div class="color-picker-pill-wrapper" style="width: 100%;">
-                <div class="color-pill-inner" style="height: 32px;">
-                  <div :style="{ background: activeBgColor }" class="color-square-preview"></div>
-                  <span style="font-size: 11px; color: var(--text-primary); font-family: monospace; font-weight: 500;">
-                    {{ formatHexDisplay(activeBgColor) }}
-                  </span>
-                </div>
-              </div>
-            </template>
-          </QuickColorPopover>
+      <!-- 分割线 -->
+      <div class="global-divider"></div>
+
+      <!-- 背景色 -->
+      <div class="global-form-item">
+        <div class="global-item-label">背景色</div>
+
+        <!-- 7 个填充类型切换按钮 -->
+        <div class="fill-types-bar">
+          <button type="button" class="fill-type-icon-btn" :class="{ active: isSolidBg }" @click="selectBgTab('solid')"
+            title="纯色填充">
+            <svg viewBox="0 0 18 18" width="18" height="18">
+              <rect x="0.5" y="0.5" width="17" height="17" rx="2"
+                :fill="isSolidBg ? (activeBgColor && activeBgColor !== 'transparent' ? activeBgColor : '#3b82f6') : '#cbd5e1'"
+                :stroke="isSolidBg ? '#1E6FFF' : '#94a3b8'" stroke-width="1" />
+            </svg>
+          </button>
+          <button type="button" class="fill-type-icon-btn" :class="{ active: activeBgTab === 'gradient-linear' }"
+            @click="selectBgTab('gradient-linear')" title="线性渐变">
+            <svg viewBox="0 0 18 18" width="18" height="18">
+              <defs>
+                <linearGradient id="bgFillBarLinear" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" :stop-color="activeBgTab === 'gradient-linear' ? activeGradientStart : '#94a3b8'" />
+                  <stop offset="100%" :stop-color="activeBgTab === 'gradient-linear' ? activeGradientEnd : '#ffffff'" />
+                </linearGradient>
+              </defs>
+              <rect x="0.5" y="0.5" width="17" height="17" rx="2" fill="url(#bgFillBarLinear)"
+                :stroke="activeBgTab === 'gradient-linear' ? '#1E6FFF' : '#94a3b8'" stroke-width="1" />
+            </svg>
+          </button>
+          <button type="button" class="fill-type-icon-btn" :class="{ active: activeBgTab === 'gradient-radial' }"
+            @click="selectBgTab('gradient-radial')" title="径向渐变">
+            <svg viewBox="0 0 18 18" width="18" height="18">
+              <defs>
+                <radialGradient id="bgFillBarRadial" cx="50%" cy="50%" r="50%">
+                  <stop offset="15%" :stop-color="activeBgTab === 'gradient-radial' ? activeGradientEnd : '#ffffff'" />
+                  <stop offset="100%"
+                    :stop-color="activeBgTab === 'gradient-radial' ? activeGradientStart : '#cbd5e1'" />
+                </radialGradient>
+              </defs>
+              <rect x="0.5" y="0.5" width="17" height="17" rx="2" fill="url(#bgFillBarRadial)"
+                :stroke="activeBgTab === 'gradient-radial' ? '#1E6FFF' : '#94a3b8'" stroke-width="1" />
+            </svg>
+          </button>
+          <button type="button" class="fill-type-icon-btn" :class="{ active: activeBgTab === 'gradient-rect' }"
+            @click="selectBgTab('gradient-rect')" title="菱形渐变">
+            <svg viewBox="0 0 18 18" width="18" height="18">
+              <defs>
+                <radialGradient id="bgFillBarRect" cx="50%" cy="50%" r="50%">
+                  <stop offset="0%" :stop-color="activeBgTab === 'gradient-rect' ? activeGradientEnd : '#ffffff'" />
+                  <stop offset="60%" :stop-color="activeBgTab === 'gradient-rect' ? activeGradientMid : '#e2e8f0'" />
+                  <stop offset="100%" :stop-color="activeBgTab === 'gradient-rect' ? activeGradientStart : '#94a3b8'" />
+                </radialGradient>
+              </defs>
+              <rect x="0.5" y="0.5" width="17" height="17" rx="2" fill="url(#bgFillBarRect)"
+                :stroke="activeBgTab === 'gradient-rect' ? '#1E6FFF' : '#94a3b8'" stroke-width="1" />
+            </svg>
+          </button>
+          <button type="button" class="fill-type-icon-btn" :class="{ active: activeBgTab === 'image' }"
+            @click="selectBgTab('image')" title="图片填充">
+            <svg viewBox="0 0 18 18" width="18" height="18" fill="none">
+              <rect x="0.5" y="0.5" width="17" height="17" rx="2"
+                :stroke="activeBgTab === 'image' ? '#1E6FFF' : '#94a3b8'" stroke-width="1" fill="#ffffff" />
+              <circle cx="6" cy="6" r="1.5" :fill="activeBgTab === 'image' ? '#1E6FFF' : '#94a3b8'" />
+              <path d="M2.5 14L7 9.5L10.5 13L12.5 11L15.5 14" :stroke="activeBgTab === 'image' ? '#1E6FFF' : '#94a3b8'"
+                stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </button>
+          <button type="button" class="fill-type-icon-btn" :class="{ active: activeBgTab === 'pattern' }"
+            @click="selectBgTab('pattern')" title="图案填充">
+            <svg viewBox="0 0 18 18" width="18" height="18">
+              <defs>
+                <pattern id="bgFillBarPattern" width="4" height="4" patternUnits="userSpaceOnUse"
+                  patternTransform="rotate(45)">
+                  <line x1="0" y1="0" x2="0" y2="4" :stroke="activeBgTab === 'pattern' ? '#1E6FFF' : '#94a3b8'"
+                    stroke-width="1" />
+                </pattern>
+              </defs>
+              <rect x="0.5" y="0.5" width="17" height="17" rx="2" fill="url(#bgFillBarPattern)"
+                :stroke="activeBgTab === 'pattern' ? '#1E6FFF' : '#94a3b8'" stroke-width="1" />
+            </svg>
+          </button>
         </div>
-      </div>
 
-      <!-- 渐变填充专业设置 (与背景颜色同一级) -->
-      <template v-if="bgFillType === 'gradient'">
-        <GradientEditor
-          :model-value="activeGradientCss"
-          :recent-colors="quickRecentColors"
-          :theme-colors="globalThemeColor"
-          @update:model-value="onGradientEditorUpdate"
-          @change="onGradientEditorChange"
-        />
-        <div class="design-property-row-start" style="margin-top: 2px;">
-          <span class="shape-property-label" style="margin-top: 4px;">渐变预设</span>
-          <div class="color-picker-grid" style="flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;">
-            <div v-for="preset in gradientPresets" :key="preset.name" class="color-option"
-              :style="{ background: preset.css, height: '24px', borderRadius: '4px', cursor: 'pointer', border: '1px solid rgba(0,0,0,0.1)' }"
-              @click="applyBackground(preset.css)" :title="preset.name"></div>
+        <!-- 纯色填充卡片 (对齐 SidebarShapeFormatPanel.vue) -->
+        <template v-if="isSolidBg">
+          <div class="full-color-pill">
+            <QuickColorPopover v-model:visible="bgColorPopoverVisible" :color="activeBgHex" :alpha="displayBgOpacity"
+              v-model:recentColors="quickRecentColors" @select-color="onSelectBgColor">
+              <template #reference>
+                <div class="color-left-info">
+                  <div class="color-square-preview" :style="{ backgroundColor: activeBgColor }"></div>
+                  <span class="color-hex-text">{{ formatHexDisplay(activeBgColor) }}</span>
+                </div>
+              </template>
+            </QuickColorPopover>
+            <div class="color-opacity-input-wrapper" @click.stop title="不透明度 (0%为完全透明，100%为完全不透明)">
+              <input type="number" class="color-opacity-num-input" :value="displayBgOpacity" min="0" max="100"
+                @input="handleBgOpacityInput" @keydown.enter="($event.target as HTMLElement).blur()" />
+              <span class="percent-unit">%</span>
+            </div>
           </div>
-        </div>
-      </template>
-
-      <!-- 图片填充模式 (与背景颜色同一级) -->
-      <template v-else-if="bgFillType === 'image'">
-        <div class="design-property-row">
-          <span class="shape-property-label">图片排版</span>
-          <el-select v-model="bgImageMode" size="small" style="flex: 1;" class="design-select">
-            <el-option label="拉伸铺满" value="stretch" />
-            <el-option label="平铺" value="tile" />
-          </el-select>
-        </div>
-        <div class="design-property-row-start">
-          <span class="shape-property-label" style="margin-top: 6px;">背景图片</span>
-          <div class="bg-image-uploader-box"
-            style="flex: 1; height: 72px; border: 1px dashed var(--border-color); border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #fafafa; cursor: pointer;"
-            @click="uploadBgImage">
+        </template>
+
+        <!-- 渐变填充卡片 -->
+        <template v-else-if="isGradientBg">
+          <GradientEditor ref="bgGradientEditorRef" :hide-type-buttons="true" :model-value="activeGradientCss"
+            :recent-colors="quickRecentColors" :theme-colors="globalThemeColor"
+            @update:model-value="onGradientEditorUpdate" @change="onGradientEditorChange" />
+        </template>
+
+        <!-- 图片填充卡片 (默认及选中态) -->
+        <div v-else-if="isImageBg" class="global-image-card">
+          <div class="image-mode-row">
+            <el-popover v-model:visible="isImageModePopoverVisible" placement="bottom-start"
+              :width="imageModeTriggerWidth" trigger="click" popper-class="autofit-popover-panel" :show-arrow="false"
+              :offset="4" @before-enter="onImageModePopoverShow">
+              <template #reference>
+                <div ref="imageModeTriggerRef" class="custom-select-trigger image-mode-trigger"
+                  :class="{ 'is-active': isImageModePopoverVisible }">
+                  <span class="select-trigger-text">{{ currentImageModeLabel }}</span>
+                  <svg viewBox="0 0 1024 1024" width="10" height="10" fill="currentColor" class="select-trigger-arrow"
+                    :class="{ 'is-open': isImageModePopoverVisible }">
+                    <path
+                      d="M831.872 340.777L512 652.672 192.128 340.777a31.968 31.968 0 0 0-45.12 45.312l342.4 333.568a32 32 0 0 0 45.184 0l342.4-333.568a31.968 31.968 0 0 0-45.12-45.312z">
+                    </path>
+                  </svg>
+                </div>
+              </template>
+
+              <div class="autofit-menu-container">
+                <div v-for="opt in imageModeOptions" :key="opt.value" class="autofit-menu-item"
+                  :class="{ 'is-selected': bgImageMode === opt.value }" @click="selectImageMode(opt.value)">
+                  <span class="autofit-item-label">{{ opt.label }}</span>
+                  <svg v-if="bgImageMode === opt.value" viewBox="0 0 24 24" width="15" height="15" fill="none"
+                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+                    class="autofit-check-icon">
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                </div>
+              </div>
+            </el-popover>
+
+            <button class="image-fit-btn" @click="bgImageMode = 'stretch'" title="铺满模式">
+              <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.3"
+                stroke-linecap="round" stroke-linejoin="round">
+                <path d="M2 5V2h3M14 5V2h-3M2 11v3h3M14 11v3h-3" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- 棋盘格预览框 -->
+          <div class="checkerboard-preview-box" @click="uploadBgImage">
             <template v-if="bgImageUrl">
-              <img :src="bgImageUrl" style="width: 100%; height: 100%; object-fit: contain; pointer-events: none;" />
-              <div class="bg-image-hover-overlay"
-                style="position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; gap: 8px;"
-                @click.stop>
-                <button class="design-action-btn"
-                  style="padding: 3px 8px; font-size: 11px; background: #fff; color: #333; border: none; border-radius: 4px; cursor: pointer;"
-                  @click="uploadBgImage">更换</button>
-                <button class="design-action-btn"
-                  style="padding: 3px 8px; font-size: 11px; background: #ef4444; color: #fff; border: none; border-radius: 4px; cursor: pointer;"
-                  @click="bgImageUrl = ''">删除</button>
+              <div class="bg-img-preview" :style="bgImagePreviewStyle"></div>
+              <div class="bg-img-hover-actions" @click.stop>
+                <button class="bg-img-action-btn" @click="uploadBgImage">更换图片</button>
+                <button class="bg-img-action-btn btn-del" @click="bgImageUrl = ''">删除</button>
               </div>
             </template>
             <template v-else>
-              <div
-                style="display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-muted);">
-                <span style="font-size: 11px;">点击上传图片</span>
-              </div>
+              <button class="select-img-btn" @click.stop="uploadBgImage">
+                选择图片
+              </button>
             </template>
           </div>
         </div>
-      </template>
-
-      <!-- 主题色 -->
-      <div class="design-property-row">
-        <span class="shape-property-label">主题色</span>
-        <div style="flex: 1; display: flex; align-items: center;">
-          <el-popover placement="bottom-end" :width="220" trigger="click" popper-class="theme-palette-popover"
-            v-model:visible="themePalettePopoverVisible">
-            <template #reference>
-              <div class="theme-color-trigger">
-                <div class="theme-color-preview-list">
-                  <div v-for="(color, cIdx) in globalThemeColor" :key="cIdx" :style="{ background: color }"
-                    class="theme-preview-rect">
+
+        <!-- 图案填充卡片 -->
+        <template v-else-if="isPatternBg">
+          <div class="pattern-fill-container">
+            <div class="pattern-presets-grid">
+              <div v-for="p in PATTERN_PRESETS" :key="p.key" class="pattern-preset-card"
+                :class="{ active: isBgPatternPresetActive(p) }" :title="p.name"
+                :style="{ backgroundImage: `url('${getBgPatternPresetPreviewUrl(p)}')` }"
+                @click="selectBgPatternPreset(p)"></div>
+            </div>
+
+            <!-- 前景 / 背景 颜色选择 (对齐 PPT / WPS 图案填充) -->
+            <div class="pattern-colors-section">
+              <div class="pattern-color-row">
+                <span class="pattern-color-label">前景</span>
+                <div class="full-color-pill" style="flex: 1;">
+                  <QuickColorPopover v-model:visible="bgPatternFgPopoverVisible"
+                    :color="parsedBgPatternFg.hex === 'transparent' ? '#3B82F6' : parsedBgPatternFg.hex"
+                    :alpha="parsedBgPatternFg.alpha" v-model:recentColors="quickRecentColors"
+                    @select-color="onSelectBgPatternFgColor">
+                    <template #reference>
+                      <div class="color-left-info">
+                        <div class="color-square-preview"
+                          :style="{ backgroundColor: parsedBgPatternFg.hex === 'transparent' ? 'transparent' : parsedBgPatternFg.hex }">
+                        </div>
+                        <span class="color-hex-text">{{ formatHexDisplay(parsedBgPatternFg.hex) }}</span>
+                      </div>
+                    </template>
+                  </QuickColorPopover>
+                  <div class="color-opacity-input-wrapper" @click.stop title="前景不透明度">
+                    <input type="number" class="color-opacity-num-input" :value="parsedBgPatternFg.alpha" min="0"
+                      max="100" @input="handleBgPatternFgOpacityInput"
+                      @keydown.enter="($event.target as HTMLElement).blur()" />
+                    <span class="percent-unit">%</span>
                   </div>
                 </div>
-                <span style="font-size: 10px; color: var(--text-muted);">▼</span>
               </div>
-            </template>
-            <div style="display: flex; flex-direction: column; gap: 10px; padding: 4px 0;">
-              <div v-for="cIdx in 5" :key="cIdx"
-                style="display: flex; align-items: center; justify-content: space-between; gap: 12px;">
-                <span style="font-size: 12px; color: var(--text-secondary); width: 64px;">色彩 {{ cIdx }}</span>
-                <QuickColorPopover v-model:visible="globalThemeColorPopoverVisible[cIdx - 1]"
-                  :color="globalThemeColor[cIdx - 1]" v-model:recentColors="quickRecentColors" placement="left-start"
-                  @select-color="(color) => globalThemeColor[cIdx - 1] = color"
-                  @color-picker-show="isCustomColorPickerOpen = true"
-                  @color-picker-hide="() => { isCustomColorPickerOpen = false }">
-                  <template #reference>
-                    <div class="color-picker-pill-wrapper" style="width: 100%;">
-                      <div class="color-pill-inner" style="height: 28px;">
-                        <div
-                          style="width: 12px; height: 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 2px; flex-shrink: 0;"
-                          :style="{ background: globalThemeColor[cIdx - 1] }"></div>
-                        <span
-                          style="font-size: 11px; color: var(--text-primary); font-family: monospace; font-weight: 500;">
-                          {{ formatHexDisplay(globalThemeColor[cIdx - 1]) }}
-                        </span>
-                      </div>
-                    </div>
-                  </template>
-                </QuickColorPopover>
-              </div>
-            </div>
-          </el-popover>
-        </div>
-      </div>
 
-      <!-- 边框颜色 -->
-      <div class="design-property-row">
-        <span class="shape-property-label">边框颜色</span>
-        <QuickColorPopover v-model:visible="globalBorderColorPopoverVisible" :color="globalBorderColor"
-          v-model:recentColors="quickRecentColors" @select-color="(color) => globalBorderColor = color">
-          <template #reference>
-            <div class="color-picker-pill-wrapper" style="flex: 1;">
-              <div class="color-pill-inner" style="height: 32px;">
-                <div :style="{ background: globalBorderColor }" class="color-square-preview"></div>
-                <span style="font-size: 11px; color: var(--text-primary); font-family: monospace; font-weight: 500;">
-                  {{ formatHexDisplay(globalBorderColor) }}
-                </span>
+              <div class="pattern-color-row">
+                <span class="pattern-color-label">背景</span>
+                <div class="full-color-pill" style="flex: 1;">
+                  <QuickColorPopover v-model:visible="bgPatternBgPopoverVisible"
+                    :color="parsedBgPatternBg.hex === 'transparent' ? '#FFFFFF' : parsedBgPatternBg.hex"
+                    :alpha="parsedBgPatternBg.alpha" v-model:recentColors="quickRecentColors"
+                    @select-color="onSelectBgPatternBgColor">
+                    <template #reference>
+                      <div class="color-left-info">
+                        <div class="color-square-preview"
+                          :style="{ backgroundColor: parsedBgPatternBg.hex === 'transparent' ? 'transparent' : parsedBgPatternBg.hex }">
+                        </div>
+                        <span class="color-hex-text">{{ formatHexDisplay(parsedBgPatternBg.hex) }}</span>
+                      </div>
+                    </template>
+                  </QuickColorPopover>
+                  <div class="color-opacity-input-wrapper" @click.stop title="背景不透明度">
+                    <input type="number" class="color-opacity-num-input" :value="parsedBgPatternBg.alpha" min="0"
+                      max="100" @input="handleBgPatternBgOpacityInput"
+                      @keydown.enter="($event.target as HTMLElement).blur()" />
+                    <span class="percent-unit">%</span>
+                  </div>
+                </div>
               </div>
             </div>
-          </template>
-        </QuickColorPopover>
-      </div>
-
-      <!-- 边框样式 -->
-      <div class="design-property-row">
-        <span class="shape-property-label">边框样式</span>
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; flex: 1;">
-          <el-select v-model="globalBorderStyle" size="small" style="flex: 1;" class="design-select"
-            placement="bottom-start" :fallback-placements="['bottom-start', 'bottom', 'top-start']">
-            <el-option value="solid" label="──────" />
-            <el-option value="dashed" label="------" />
-            <el-option value="dotted" label="······" />
-            <el-option value="none" label="无" />
-          </el-select>
-          <div class="shape-border-width-wrapper"
-            style="height: 32px; border: none; border-radius: 4px; padding: 0 8px; display: flex; align-items: center; box-sizing: border-box; background: #F5F6F7;">
-            <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"
-              style="margin-right: 4px; color: var(--text-secondary); flex-shrink: 0;">
-              <line x1="3" y1="6" x2="21" y2="6" />
-              <line x1="3" y1="12" x2="21" y2="12" />
-              <line x1="3" y1="18" x2="21" y2="18" />
-            </svg>
-            <input type="number" v-model.number="globalBorderWidth" :min="0" :max="20" class="shape-num-field"
-              style="width: 100%; border: none; background: transparent; outline: none; text-align: left; font-size: 12px; color: var(--text-primary); -moz-appearance: textfield; appearance: none;" />
           </div>
-        </div>
-      </div>
+        </template>
 
-      <!-- 4 个操作按钮网格 (2x2) -->
-      <div class="design-btn-grid">
-        <el-button type="primary" size="small" class="design-action-btn-primary"
-          @click="applyBackgroundToAll">背景色应用到全部</el-button>
-        <el-button type="primary" size="small" class="design-action-btn-primary"
-          @click="applyThemeToAll">主题色应用到全部</el-button>
-        <el-button type="primary" size="small" class="design-action-btn-secondary"
-          @click="applyFontToAll">全局统一字体</el-button>
-        <el-button type="primary" size="small" class="design-action-btn-secondary"
-          @click="openThemeExtractor">从幻灯片提取主题</el-button>
+        <!-- 背景色应用到全部 按钮 -->
+        <button class="global-action-btn" style="margin-top: 10px;" @click="applyBackgroundToAll">
+          背景色应用到全部
+        </button>
       </div>
     </div>
 
     <!-- 2. 主题设置 Tab (Theme Settings) -->
-    <div v-else-if="designActiveTab === 'theme'"
-      style="display: flex; flex-direction: column; gap: 14px; padding: 16px;">
-      <StyleBuilderDialog v-if="styleBuilderMounted" :visible="styleBuilderVisible" @update:visible="emit('update:styleBuilderVisible', $event)"
-        :target-mode="styleBuilderTargetMode" :initial-recipe-id="styleBuilderInitialRecipeId"
-        :is-new-custom="styleBuilderIsNewCustom" />
-
-      <!-- 主题样式套件 -->
-      <div class="design-section" style="padding: 0;">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
-          <div class="section-title" style="margin: 0; font-weight: bold; color: var(--text-primary);">
-            主题样式套件
-          </div>
-          <span style="font-size: 11px; color: #6366f1; cursor: pointer; font-weight: 500;"
-            @click="emit('openStyleBuilder', isMasterEditingView ? 'all' : 'single', 'new-custom', true)">
-            + 定制主题
-          </span>
-        </div>
+    <div v-else-if="designActiveTab === 'theme'" class="theme-tab-content">
+      <StyleBuilderDialog v-if="styleBuilderMounted" :visible="styleBuilderVisible"
+        @update:visible="emit('update:styleBuilderVisible', $event)" :target-mode="styleBuilderTargetMode"
+        :initial-recipe-id="styleBuilderInitialRecipeId" :is-new-custom="styleBuilderIsNewCustom" />
+
+      <div class="theme-card-list">
+        <div v-for="recipe in builtinStyleRecipes" :key="recipe.id" class="theme-recipe-card"
+          :class="{ 'is-active': currentActiveThemeId === recipe.id }" @click="handleSelectTheme(recipe)">
+          <!-- Card Header: Title + More Actions Menu -->
+          <div class="theme-card-header">
+            <span class="theme-name-text">{{ recipe.name }}</span>
+            <el-popover trigger="click" placement="left-start" popper-class="theme-actions-popper" :width="156"
+              :offset="175" :show-arrow="false" :teleported="true">
+              <template #reference>
+                <button class="theme-more-btn" @click.stop title="更多选项">
+                  <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
+                    <circle cx="8" cy="3" r="1.5" />
+                    <circle cx="8" cy="8" r="1.5" />
+                    <circle cx="8" cy="13" r="1.5" />
+                  </svg>
+                </button>
+              </template>
 
-        <div class="style-recipes-grid" style="display: flex; flex-direction: column; gap: 10px;">
-          <div v-for="recipe in builtinStyleRecipes" :key="recipe.id" class="recipe-theme-card" :class="{
-            'active-slide-theme': currentActiveThemeId === recipe.id
-          }" :style="{ backgroundColor: recipe.backgroundColor || '#ffffff' }">
-
-            <!-- Card Header -->
-            <div class="recipe-card-header">
-              <div style="display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1;">
-                <span class="recipe-theme-name" :style="{ color: recipe.textStyles?.title?.color || '#0f172a' }">
-                  {{ recipe.name }}
-                </span>
-                <span v-if="currentActiveThemeId === recipe.id" class="current-slide-pill">
-                  {{ isMasterEditingView ? '当前母版' : '当前页' }}
-                </span>
-              </div>
-              <div v-if="!isMasterEditingView" class="recipe-usage-badge" :class="getThemeUsageLabel(recipe.id).type">
-                {{ getThemeUsageLabel(recipe.id).text }}
-              </div>
-            </div>
+              <div class="theme-menu-list" @click.stop>
+                <div class="theme-menu-item" @click="handleEditTheme(recipe)">
+                  <svg class="menu-item-icon" viewBox="0 0 16 16" width="14" height="14" fill="none"
+                    stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="2" y="2" width="12" height="12" rx="2" />
+                    <path d="M5 5h6M5 8h4M5 11h2" />
+                  </svg>
+                  <span>编辑</span>
+                </div>
 
-            <!-- Preview Area -->
-            <div class="recipe-card-preview" @click="emit('applyStyleRecipeToSlides', recipe, false)">
-              <div class="recipe-font-preview"
-                :style="{ fontFamily: recipe.styleFonts?.titleFont || 'PingFang SC', color: recipe.textStyles?.title?.color || '#1e293b' }">
-                <span style="font-size: 16px; font-weight: 700;">Aa</span>
-                <span style="font-size: 11px; opacity: 0.8; margin-left: 6px;">{{ recipe.styleFonts?.titleFont || '默认字体'
-                }}</span>
-              </div>
-              <!-- 8 Color Palette Strip -->
-              <div class="recipe-palette-strip">
-                <div v-for="(color, cIdx) in recipe.styleColors" :key="cIdx" class="palette-strip-block"
-                  :style="{ backgroundColor: color }"></div>
+                <div class="theme-menu-item" @click="handleDuplicateTheme(recipe)">
+                  <svg class="menu-item-icon" viewBox="0 0 16 16" width="14" height="14" fill="none"
+                    stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="5" y="5" width="9" height="9" rx="1.5" />
+                    <path d="M11 2H3.5A1.5 1.5 0 0 0 2 3.5V11" />
+                  </svg>
+                  <span>复制</span>
+                </div>
+
+                <div class="theme-menu-item" @click="handleApplyToAllSlides(recipe)">
+                  <svg class="menu-item-icon" viewBox="0 0 16 16" width="14" height="14" fill="none"
+                    stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="2" y="2" width="12" height="12" rx="2" />
+                    <path d="M8 5v5M6 8l2 2 2-2" />
+                  </svg>
+                  <span>应用到所有幻灯片</span>
+                </div>
+
+                <div class="theme-menu-item item-danger" @click="handleDeleteTheme(recipe)">
+                  <svg class="menu-item-icon" viewBox="0 0 16 16" width="14" height="14" fill="none"
+                    stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+                    <path
+                      d="M3 4h10M6 4V2.5A1.5 1.5 0 0 1 7.5 1h1A1.5 1.5 0 0 1 10 2.5V4M4 4l.8 9.2A1.5 1.5 0 0 0 6.3 14.5h3.4a1.5 1.5 0 0 0 1.5-1.3L12 4" />
+                  </svg>
+                  <span>删除</span>
+                </div>
+
+                <div class="theme-menu-divider"></div>
+
+                <div class="theme-menu-footer">
+                  用于 {{ getThemeSlideCount(recipe.id) }} 张幻灯片
+                </div>
               </div>
+            </el-popover>
+          </div>
+
+          <!-- Card Inner Preview Box -->
+          <div class="theme-preview-box" :style="{ backgroundColor: recipe.backgroundColor || '#f8fafc' }">
+            <div class="theme-font-row">
+              <span class="font-preview-aa" :style="{
+                color: getThemeFontColors(recipe).aa,
+                fontFamily: recipe.styleFonts?.titleFont || 'SourceHanSansCN'
+              }">
+                Aa
+              </span>
+              <span class="font-preview-name" :style="{
+                color: getThemeFontColors(recipe).font,
+                fontFamily: recipe.styleFonts?.titleFont || 'SourceHanSansCN'
+              }">
+                {{ fontLabel(recipe.styleFonts?.titleFont) }}
+              </span>
             </div>
-
-            <!-- Quick Actions -->
-            <div class="recipe-card-actions">
-              <template v-if="isMasterEditingView">
-                <button class="recipe-act-btn" @click.stop="emit('applyStyleRecipeToSlides', recipe, false)"
-                  title="仅应用到当前选中的母版及下属版式">
-                  ⚡ 当前母版
-                </button>
-                <button class="recipe-act-btn" @click.stop="emit('applyStyleRecipeToSlides', recipe, true)"
-                  title="应用到所有母版">
-                  🌐 全部母版
-                </button>
-                <button class="recipe-act-btn btn-edit" @click.stop="emit('openStyleBuilder', 'all', recipe.id)"
-                  title="进入 Style Builder 编辑该主题">
-                  ✏️ 编辑
-                </button>
-              </template>
-              <template v-else>
-                <button class="recipe-act-btn" @click.stop="emit('applyStyleRecipeToSlides', recipe, false)"
-                  :title="`仅应用到第 ${activeIndex + 1} 页`">
-                  ⚡ 仅当前页 (P{{ activeIndex + 1 }})
-                </button>
-                <button class="recipe-act-btn" @click.stop="emit('applyStyleRecipeToSlides', recipe, true)"
-                  title="应用到全部幻灯片">
-                  🌐 全部幻灯片
-                </button>
-                <button class="recipe-act-btn btn-edit" @click.stop="emit('openStyleBuilder', 'all', recipe.id)"
-                  title="进入 Style Builder 编辑该主题">
-                  ✏️ 编辑
-                </button>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 预置主题列表 -->
-      <div v-if="presetThemes && presetThemes.length > 0" class="design-section" style="padding: 0; margin-top: 10px;">
-        <div class="section-title" style="margin-bottom: 12px; font-weight: bold; color: var(--text-primary);">预置配色主题
-        </div>
-        <div class="preset-themes-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
-          <div v-for="preset in presetThemes" :key="preset.name" class="preset-theme-card"
-            :style="{ background: preset.bgColor }" @click="applyPresetTheme(preset)"
-            style="width: 100%; box-sizing: border-box; padding: 10px 8px; border-radius: 8px; border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 6px; cursor: pointer;">
-            <div class="preset-theme-title" :style="{ fontFamily: preset.fontFamily, color: preset.fontColor }"
-              style="font-size: 13px; font-weight: bold; margin: 0; text-align: left;">
-              文字 Aa
-            </div>
-            <div class="preset-theme-palette"
-              style="display: flex; gap: 2px; border-radius: 2px; overflow: hidden; height: 8px;">
-              <div v-for="color in preset.palette" :key="color" :style="{ background: color, flex: 1, height: '100%' }">
-              </div>
-            </div>
-            <div class="preset-theme-name" :style="{ color: preset.isDark ? '#cbd5e1' : 'var(--text-muted)' }"
-              style="font-size: 10px; margin-top: auto; opacity: 0.8; text-align: left;">
-              {{ preset.name }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+            <div class="theme-palette-strip">
+              <div v-for="(color, cIdx) in (recipe.styleColors || []).slice(0, 8)" :key="cIdx"
+                class="palette-color-block" :style="{ backgroundColor: color }"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
     <!-- 3. 版式设置 Tab (Layout Settings) -->
     <div v-else-if="designActiveTab === 'layout' && !isMasterEditingView"
@@ -748,7 +1398,9 @@ watch(extractTab, () => {
 
       <div v-for="masterGroup in masterGroupedLayouts" :key="masterGroup.id" class="preset-layout-master-group"
         style="margin-bottom: 16px;">
-        <div style="font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 8px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" :title="masterGroup.name">
+        <div
+          style="font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 8px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+          :title="masterGroup.name">
           {{ masterGroup.name }}
         </div>
         <div class="preset-layout-grid"
@@ -1172,156 +1824,729 @@ watch(extractTab, () => {
   font-size: 12px;
 }
 
-/* Style Builder Theme Recipe Cards in Sidebar */
-.recipe-theme-card {
-  width: 100%;
-  box-sizing: border-box;
-  border-radius: 10px;
-  border: 1.5px solid var(--border-color, #e2e8f0);
-  padding: 12px;
+/* Global Tab New UI Styles (Matching Reference Screenshot) */
+.global-tab-content {
+  padding: 16px 15px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  transition: all 0.2s ease;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
-.recipe-theme-card:hover {
-  border-color: #a5b4fc;
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
+.global-form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.recipe-theme-card.active-slide-theme {
-  border-color: #6366f1;
-  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
+.global-item-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #374151;
+  line-height: 1.2;
 }
 
-.recipe-card-header {
+.global-select-full {
+  width: 100%;
+
+  :deep(.el-select__wrapper) {
+    background-color: #ffffff !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 6px !important;
+    box-shadow: none !important;
+    height: 32px !important;
+    min-height: 32px !important;
+    line-height: 32px !important;
+    padding: 0 10px !important;
+    transition: all 0.15s ease !important;
+
+    &:hover {
+      border-color: #cbd5e1 !important;
+    }
+
+    &.is-focused {
+      border-color: #1e6fff !important;
+      box-shadow: 0 0 0 2px rgba(30, 111, 255, 0.1) !important;
+    }
+  }
+
+  :deep(.el-select__selected-item) {
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    color: #1e293b !important;
+  }
+}
+
+.custom-select-trigger {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  width: 100%;
+  height: 34px;
+  padding: 0 10px;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: #cbd5e1;
+  }
+
+  &.is-active {
+    border-color: #1e6fff;
+    box-shadow: 0 0 0 2px rgba(30, 111, 255, 0.1);
+  }
+
+  &.image-mode-trigger {
+    flex: 1;
+  }
 }
 
-.recipe-theme-name {
+.select-trigger-text {
   font-size: 13px;
-  font-weight: 700;
-  line-height: 1.2;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  font-weight: 500;
+  color: #1e293b;
 }
 
-.current-slide-pill {
-  font-size: 10px;
-  background: #6366f1;
-  color: #ffffff;
-  padding: 1px 6px;
-  border-radius: 10px;
-  font-weight: 600;
-  flex-shrink: 0;
+.select-trigger-arrow {
+  color: #94a3b8;
+  transition: transform 0.2s ease;
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
 }
 
-.recipe-usage-badge {
-  font-size: 10px;
-  padding: 2px 7px;
-  border-radius: 10px;
-  font-weight: 500;
+.autofit-menu-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.font-menu-scrollable {
+  max-height: 274px;
+  overflow-y: auto;
+  padding-right: 2px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #cbd5e1;
+    border-radius: 4px;
+  }
+}
+
+.autofit-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 34px;
+  min-height: 34px;
+  line-height: 34px;
   flex-shrink: 0;
-  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+
+  &:hover {
+    background-color: #f8fafc;
+  }
+
+  &.is-selected {
+    background-color: #eef2ff;
+
+    .autofit-item-label {
+      color: #1e6fff;
+      font-weight: 500;
+    }
+  }
 }
 
-.recipe-usage-badge.all {
-  background: #ecfdf5;
-  color: #059669;
-  border: 1px solid #a7f3d0;
+.autofit-item-label {
+  font-size: 13px;
+  line-height: 34px;
+  color: #1e293b;
+  transition: color 0.15s ease;
 }
 
-.recipe-usage-badge.partial {
-  background: #eff6ff;
-  color: #2563eb;
-  border: 1px solid #bfdbfe;
+.autofit-check-icon {
+  color: #1e6fff;
+  flex-shrink: 0;
 }
 
-.recipe-usage-badge.none {
-  background: #f8fafc;
-  color: #94a3b8;
-  border: 1px solid #e2e8f0;
+.global-divider {
+  height: 1px;
+  background-color: #f1f5f9;
+  margin: 14px 0;
+  width: 100%;
 }
 
-.recipe-card-preview {
+.global-color-pill {
+  width: 100%;
+  box-sizing: border-box;
+  height: 34px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #ffffff;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   cursor: pointer;
-  padding: 8px 10px;
-  background: rgba(0, 0, 0, 0.02);
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: #cbd5e1;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  }
+
+  .color-pill-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .color-swatch {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      flex-shrink: 0;
+    }
+
+    .color-hex-text {
+      font-size: 13px;
+      font-weight: 500;
+      color: #1f2937;
+      font-family: inherit;
+    }
+  }
+
+  .color-opacity-text {
+    font-size: 13px;
+    color: #4b5563;
+  }
+}
+
+.global-action-btn {
+  width: 100%;
+  box-sizing: border-box;
+  height: 34px;
+  border: 1px solid #e5e7eb;
   border-radius: 6px;
+  background: #ffffff;
+  color: #374151;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
-  transition: background 0.15s ease;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: #f9fafb;
+    border-color: #cbd5e1;
+    color: #111827;
+  }
+
+  &:active {
+    background: #f3f4f6;
+  }
 }
 
-.recipe-card-preview:hover {
-  background: rgba(99, 102, 241, 0.05);
+.fill-types-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  width: 100%;
+  height: 40px;
+  background: #f8f9fa;
+  border: 1px solid #edf0f3;
+  border-radius: 10px;
+  padding: 3px 4px;
+  box-sizing: border-box;
 }
 
-.recipe-font-preview {
+.fill-type-icon-btn {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+  border-radius: 9px;
+  background: transparent;
+  border: 1px solid transparent;
   display: flex;
-  align-items: baseline;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  transition: all 0.15s ease;
+  box-sizing: border-box;
+
+  &:hover:not(.active) {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  &.active {
+    width: 32px;
+    height: 32px;
+    background: #FFFFFF;
+    border-radius: 9px;
+    border: 1px solid #E5E7EB;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
 }
 
-.recipe-palette-strip {
+:deep(.color-span-box),
+:deep(.el-popover__reference-wrapper) {
+  display: block !important;
+  width: 100% !important;
+}
+
+.full-color-pill {
+  width: 100%;
+  height: 34px;
+  background: #f8f9fa;
+  border: 1px solid #edf0f3;
+  border-radius: 8px;
+  padding: 0 10px;
   display: flex;
-  height: 10px;
-  border-radius: 3px;
-  overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: #f1f5f9;
+    border-color: #e2e8f0;
+  }
+
+  :deep(.color-span-box) {
+    display: flex !important;
+    align-items: center !important;
+    flex: 1 !important;
+    height: 100% !important;
+    cursor: pointer;
+  }
 }
 
-.palette-strip-block {
+.color-left-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   flex: 1;
   height: 100%;
+  cursor: pointer;
 }
 
-.recipe-card-actions {
+.color-square-preview {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.color-hex-text {
+  font-size: 13px;
+  font-weight: 500;
+  font-family: monospace, sans-serif;
+  color: #1e293b;
+  letter-spacing: 0.5px;
+}
+
+.color-opacity-input-wrapper {
   display: flex;
-  gap: 6px;
   align-items: center;
+  justify-content: flex-end;
+  height: 24px;
+  padding: 0 4px;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+  background: transparent;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  &:focus-within {
+    background: #ffffff;
+    box-shadow: 0 0 0 1px #1E6FFF;
+  }
 }
 
-.recipe-act-btn {
-  flex: 1;
-  padding: 5px 6px;
-  border-radius: 5px;
-  border: 1px solid #e2e8f0;
-  background: #ffffff;
-  color: #334155;
-  font-size: 11px;
+.color-opacity-num-input {
+  width: 26px;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 12px;
   font-weight: 500;
+  color: #475569;
+  text-align: right;
+  padding: 0 1px 0 0;
+  font-family: inherit;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
+.percent-unit {
+  font-size: 12px;
+  font-weight: 500;
+  color: #64748b;
+  user-select: none;
+}
+
+.pattern-fill-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.pattern-colors-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 2px;
+}
+
+.pattern-color-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pattern-color-label {
+  width: 36px;
+  font-size: 13px;
+  color: #475569;
+  flex-shrink: 0;
+}
+
+.pattern-presets-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.pattern-preset-card {
+  height: 38px;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
+  background-repeat: repeat;
   cursor: pointer;
-  white-space: nowrap;
   transition: all 0.15s ease;
+
+  &:hover {
+    border-color: #94a3b8;
+  }
+
+  &.active {
+    border-color: #1E6FFF;
+    box-shadow: 0 0 0 1px #1E6FFF;
+  }
+}
+
+.global-image-card {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.image-mode-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .image-mode-select {
+    flex: 1;
+  }
+
+  .image-fit-btn {
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    background: #ffffff;
+    color: #6b7280;
+    cursor: pointer;
+    padding: 0;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: #f9fafb;
+      border-color: #cbd5e1;
+      color: #111827;
+    }
+  }
+}
+
+.checkerboard-preview-box {
+  width: 100%;
+  height: 120px;
+  box-sizing: border-box;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  background-color: #ffffff;
+  background-image:
+    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
+    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
+    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+
+  .select-img-btn {
+    padding: 7px 16px;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #374151;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: #ffffff;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  .bg-img-preview {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .bg-img-hover-actions {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    .bg-img-action-btn {
+      padding: 4px 10px;
+      font-size: 11px;
+      background: #ffffff;
+      color: #334155;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+
+      &.btn-del {
+        background: #ef4444;
+        color: #ffffff;
+      }
+    }
+  }
+
+  &:hover .bg-img-hover-actions {
+    display: flex;
+  }
+}
+
+/* Theme Tab New UI Styles (Matching Reference Screenshot) */
+.theme-tab-content {
+  padding: 14px 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.theme-card-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.theme-recipe-card {
+  width: 100%;
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 10px 12px 12px 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  user-select: none;
+
+  &:hover {
+    border-color: #cbd5e1;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  }
+
+  &.is-active {
+    border: 1.5px solid #2970ff;
+    box-shadow: 0 0 0 1px rgba(41, 112, 255, 0.08);
+  }
+}
+
+.theme-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 1.2;
+}
+
+.theme-name-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.theme-more-btn {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: #f3f4f6;
+    color: #111827;
+  }
+}
+
+.theme-preview-box {
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 6px;
+  padding: 9px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.theme-font-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+
+  .font-preview-aa {
+    font-size: 15px;
+    font-weight: 700;
+    font-style: italic;
+    line-height: 1;
+  }
+
+  .font-preview-name {
+    font-size: 12px;
+    line-height: 1;
+  }
+}
+
+.theme-palette-strip {
+  display: flex;
+  width: 100%;
+  height: 12px;
+  border-radius: 2px;
+  overflow: hidden;
+
+  .palette-color-block {
+    flex: 1;
+    height: 100%;
+  }
+}
+
+:global(.theme-actions-popper.el-popover.el-popper) {
+  padding: 4px 0 !important;
+  border-radius: 8px !important;
+  border: 1px solid #eaecf0 !important;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
+  min-width: 146px !important;
 }
 
-.recipe-act-btn:hover {
-  background: #f1f5f9;
-  border-color: #cbd5e1;
-  color: #0f172a;
+.theme-menu-list {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
 }
 
-.recipe-act-btn.btn-edit {
-  flex: 0 0 auto;
-  padding: 5px 8px;
-  color: #6366f1;
-  border-color: #c7d2fe;
-  background: #eef2ff;
+.theme-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 14px;
+  font-size: 13px;
+  color: #374151;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  .menu-item-icon {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    background-color: #f3f4f6;
+  }
+
+  &.item-danger {
+    color: #ef4444;
+
+    .menu-item-icon {
+      color: #ef4444;
+    }
+
+    &:hover {
+      background-color: #fef2f2;
+      color: #dc2626;
+    }
+  }
+}
+
+.theme-menu-divider {
+  height: 1px;
+  background-color: #f3f4f6;
+  margin: 4px 0;
 }
 
-.recipe-act-btn.btn-edit:hover {
-  background: #e0e7ff;
-  border-color: #a5b4fc;
+.theme-menu-footer {
+  font-size: 11px;
+  color: #9ca3af;
+  text-align: center;
+  padding: 6px 12px;
 }
 
 :deep(.color-span-box) {
@@ -1339,3 +2564,116 @@ watch(extractTab, () => {
   }
 }
 </style>
+
+<style lang="scss">
+.autofit-popover-panel {
+  min-width: 0 !important;
+  padding: 6px !important;
+  border-radius: 10px !important;
+  border: 1px solid #edf0f3 !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
+  background: #ffffff !important;
+  z-index: 9999 !important;
+
+  .el-popper__arrow {
+    display: none !important;
+  }
+
+  .autofit-menu-item {
+    height: 34px !important;
+    min-height: 34px !important;
+    line-height: 34px !important;
+    flex-shrink: 0 !important;
+    box-sizing: border-box !important;
+  }
+}
+
+.el-popper.sidebar-select-popper {
+  min-width: 0 !important;
+  padding: 0 !important;
+  border-radius: 10px !important;
+  border: 1px solid #edf0f3 !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
+  background: #ffffff !important;
+  overflow: hidden !important;
+  z-index: 9999 !important;
+
+  .el-popper__arrow {
+    display: none !important;
+  }
+
+  .el-select-dropdown {
+    padding: 6px !important;
+    margin: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-sizing: border-box !important;
+  }
+
+  .el-select-dropdown__wrap {
+    max-height: 274px !important;
+  }
+
+  .el-select-dropdown__list {
+    padding: 0 !important;
+    margin: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 2px !important;
+  }
+
+  .el-select-dropdown__item {
+    height: 34px !important;
+    min-height: 34px !important;
+    line-height: 34px !important;
+    flex-shrink: 0 !important;
+    box-sizing: border-box !important;
+    padding: 0 10px !important;
+    border-radius: 6px !important;
+    font-size: 13px !important;
+    color: #1e293b !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    transition: all 0.15s ease !important;
+    user-select: none !important;
+
+    &:hover,
+    &.hover,
+    &.is-hovering {
+      background-color: #f8fafc !important;
+      color: #1e293b !important;
+    }
+
+    &.is-selected {
+      background-color: #eef2ff !important;
+      color: #2563eb !important;
+      font-weight: 500 !important;
+
+      &::after {
+        content: '';
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        flex-shrink: 0;
+        margin-left: 8px;
+        background-color: #2563eb;
+        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
+        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
+      }
+    }
+  }
+}
+
+.el-select-dropdown.sidebar-select-popper {
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  padding: 6px !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+}
+</style>