jvs-ppt-ui 0.0.7 → 0.0.8

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

@@ -1,1336 +1,1341 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import StyleBuilderDialog from '../../StyleBuilderDialog.vue'
-import LayoutThumbSvg from './LayoutThumbSvg.vue'
-import QuickColorPopover from '../../QuickColorPopover.vue'
-import GradientEditor from './GradientEditor.vue'
-import { useSlides, gradientPresets, normalizeSlideBackground } from '../../../composables/useSlides'
-import { SYS_FONTS } from '../../../configs/fonts'
-
-const props = defineProps<{
-  designActiveTab: string
-  slideRatio: string
-  styleBuilderVisible: boolean
-  styleBuilderTargetMode: 'all' | 'single'
-  styleBuilderInitialRecipeId: string
-  styleBuilderIsNewCustom: boolean
-  builtinStyleRecipes: any[]
-  slides: any[]
-  activeIndex: number
-  masterGroupedLayouts: any[]
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:designActiveTab', val: string): void
-  (e: 'update:slideRatio', val: string): void
-  (e: 'update:styleBuilderVisible', val: boolean): void
-  (e: 'openStyleBuilder', mode: 'all' | 'single', recipeId?: string, isNew?: boolean): void
-  (e: 'applyStyleRecipeToSlides', recipe: any, isAll: boolean): void
-  (e: 'enterMasterView'): void
-  (e: 'applyLayoutToCurrentSlide', layoutId: string): void
-}>()
-
-const {
-  globalFontFamily,
-  globalFontColor,
-  globalBgColor,
-  globalThemeColor,
-  globalBorderStyle,
-  globalBorderColor,
-  globalBorderWidth,
-  presetThemes,
-  applyBackgroundToAll,
-  applyThemeToAll,
-  applyFontToAll,
-  applyPresetTheme,
-  activeSlide,
-  slides,
-  activeIndex,
-  notify,
-  isMasterEditingView,
-  activeMasterId,
-  slideMasters,
-  getThemeUsageLabel,
-  addHistorySnapshot,
-  uploadResource
-} = useSlides()
-
-const currentActiveThemeId = computed(() => {
-  if (isMasterEditingView.value) {
-    const master = slideMasters.value.find(m => m.id === activeMasterId.value) || slideMasters.value[0]
-    return (master as any)?.themeId || 'default-recipe'
-  }
-  return props.slides[props.activeIndex]?.themeId || 'default-recipe'
-})
-
-// Quick Color Popover recent colors
-const quickRecentColors = ref<string[]>([])
-const globalFontColorPopoverVisible = ref(false)
-const globalBorderColorPopoverVisible = ref(false)
-const bgColorPopoverVisible = ref(false)
-const isCustomColorPickerOpen = ref(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()
-}
-
-// 字体显示名称
-const fontLabel = (font: string) => SYS_FONTS.find(f => f.value === font || f.label === font)?.label || font
-
-// 背景类型与颜色
-const bgFillType = computed({
-  get() {
-    if (activeSlide.value?.bgType) return activeSlide.value.bgType
-    const bg = activeSlide.value?.background
-    if (bg) {
-      return normalizeSlideBackground(bg).bgType || 'color'
-    }
-    return 'color'
-  },
-  set(val: 'color' | 'gradient' | 'image') {
-    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'))) {
-          activeSlide.value.background = '#ffffff'
-        }
-      } else if (val === 'gradient') {
-        activeSlide.value.background = 'linear-gradient(135deg, #f43f5e 0%, #f97316 100%)'
-      } else if (val === 'image') {
-        activeSlide.value.background = ''
-      }
-      addHistorySnapshot()
-    }
-  }
-})
-
-const activeBgColor = computed({
-  get() {
-    const bg = activeSlide.value?.background
-    if (!bg) return '#ffffff'
-    if (typeof bg === 'string') {
-      if (bg.startsWith('#') || bg.startsWith('rgb')) return bg
-      const colorMatch = bg.match(/(#[0-9a-fA-F]{3,8}|rgba?\([^)]+\))/)
-      if (colorMatch) return colorMatch[1]
-      return '#ffffff'
-    }
-    if (typeof bg === 'object' && bg !== null) {
-      if (bg.type === 'color') return typeof bg.value === 'string' ? bg.value : '#ffffff'
-      if (bg.type === 'gradient') {
-        const c = bg.value?.colors?.[0]?.color
-        return typeof c === 'string' ? c : '#ffffff'
-      }
-      if (bg.type === 'image') {
-        const c = bg.value?.color || bg.value?.src || bg.value?.base64
-        return typeof c === 'string' && c.startsWith('#') ? c : '#ffffff'
-      }
-      if (typeof bg.value === 'string') return bg.value
-    }
-    return '#ffffff'
-  },
-  set(val: string) {
-    if (activeSlide.value) {
-      activeSlide.value.background = val
-      activeSlide.value.bgType = 'color'
-      addHistorySnapshot()
-    }
-  }
-})
-
-const bgImageMode = computed({
-  get() {
-    return (activeSlide.value as any)?.bgImageMode || 'stretch'
-  },
-  set(val: string) {
-    if (activeSlide.value) {
-      (activeSlide.value as any).bgImageMode = val
-      addHistorySnapshot()
-    }
-  }
-})
-
-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] : ''
-  },
-  set(url: string) {
-    if (activeSlide.value) {
-      if (!url) {
-        activeSlide.value.background = '#ffffff'
-        activeSlide.value.bgType = 'color'
-      } else {
-        activeSlide.value.background = `url("${url}")`
-        activeSlide.value.bgType = 'image'
-      }
-      addHistorySnapshot()
-    }
-  }
-})
-
-const bgFileInputRef = ref<HTMLInputElement | null>(null)
-const uploadBgImage = () => {
-  bgFileInputRef.value?.click()
-}
-const onBgFileChange = async (e: Event) => {
-  const input = e.target as HTMLInputElement
-  if (!input.files || !input.files[0]) return
-  const file = input.files[0]
-  try {
-    const url = await uploadResource(file, { type: 'image', source: 'background', filename: file.name }, () => {
-      return new Promise<string>((resolve) => {
-        const reader = new FileReader()
-        reader.onload = (evt) => resolve(typeof evt.target?.result === 'string' ? evt.target.result : '')
-        reader.readAsDataURL(file)
-      })
-    })
-    if (url) {
-      bgImageUrl.value = url
-      notify('已成功更新背景图片')
-    }
-  } catch (err: any) {
-    console.error(err)
-    notify('背景图片上传失败: ' + (err?.message || err))
-  }
-  input.value = ''
-}
-
-const applyBackground = (css: string) => {
-  if (activeSlide.value) {
-    activeSlide.value.background = css
-    activeSlide.value.bgType = 'gradient'
-    addHistorySnapshot()
-  }
-}
-
-const activeGradientCss = computed(() => {
-  const bg = activeSlide.value?.background
-  if (!bg) return 'linear-gradient(135deg, #f43f5e 0%, #f97316 100%)'
-  if (typeof bg === 'string') {
-    if (bg.includes('gradient')) return bg
-    return `linear-gradient(135deg, ${bg} 0%, #ffffff 100%)`
-  }
-  if (typeof bg === 'object' && bg !== null) {
-    const norm = normalizeSlideBackground(bg)
-    if (norm.bgType === 'gradient') return norm.background
-  }
-  return 'linear-gradient(135deg, #f43f5e 0%, #f97316 100%)'
-})
-
-const onGradientEditorUpdate = (css: string) => {
-  if (activeSlide.value) {
-    activeSlide.value.background = css
-    activeSlide.value.bgType = 'gradient'
-  }
-}
-
-const onGradientEditorChange = (css: string) => {
-  if (activeSlide.value) {
-    activeSlide.value.background = css
-    activeSlide.value.bgType = 'gradient'
-    addHistorySnapshot()
-  }
-}
-
-// 主题提取器
-const themeExtractorVisible = ref(false)
-const extractTab = ref<'current' | 'all'>('current')
-const saveFont = ref(true)
-const saveFontColor = ref(true)
-const saveBgColor = ref(true)
-const extractedFont = ref('默认字体')
-const extractedFontColor = ref('#000000')
-const extractedBgColor = ref('#FFFFFF')
-const extractedThemeColors = ref<{ color: string; selected: boolean }[]>([])
-
-function toHexString(color: string): string {
-  if (!color) return '#000000'
-  if (color.startsWith('#')) return color
-  if (color.startsWith('rgb')) {
-    const rgb = color.match(/\d+/g)
-    if (rgb && rgb.length >= 3) {
-      const hex = rgb.slice(0, 3).map(x => parseInt(x).toString(16).padStart(2, '0')).join('')
-      return `#${hex}`
-    }
-  }
-  return color
-}
-
-function normalizeColor(color: string): string | null {
-  if (!color || typeof color !== 'string') return null
-  const hex = toHexString(color).toUpperCase()
-  return hex.startsWith('#') && (hex.length === 7 || hex.length === 4) ? hex : null
-}
-
-function extractThemeStyles(target: any) {
-  const slidesToExtract = Array.isArray(target) ? target : [target]
-  const fontNames: Record<string, number> = {}
-  const fontColors: Record<string, number> = {}
-  const backgroundColors: Record<string, number> = {}
-  const themeColors: Record<string, number> = {}
-
-  slidesToExtract.forEach((slide: any) => {
-    if (!slide) return
-    if (slide.background && typeof slide.background === 'string') {
-      const c = normalizeColor(slide.background)
-      if (c) backgroundColors[c] = (backgroundColors[c] || 0) + 1000
-    }
-    const elements = slide.elements || []
-    elements.forEach((el: any) => {
-      const area = (el.width || 100) * (el.height || 100)
-      if (el.type === 'text') {
-        const font = el.style?.fontFamily || el.fontFamily
-        if (font) fontNames[font] = (fontNames[font] || 0) + area
-        const fc = normalizeColor(el.style?.color || el.color)
-        if (fc) fontColors[fc] = (fontColors[fc] || 0) + area
-      }
-      if (el.type === 'shape' || el.type === 'line') {
-        const fill = normalizeColor(el.style?.fill || el.fill)
-        if (fill && fill !== '#FFFFFF' && fill !== '#000000') {
-          themeColors[fill] = (themeColors[fill] || 0) + area
-        }
-        const border = normalizeColor(el.style?.borderColor || el.borderColor)
-        if (border && border !== '#FFFFFF' && border !== '#000000') {
-          themeColors[border] = (themeColors[border] || 0) + area * 0.5
-        }
-      }
-    })
-  })
-
-  return {
-    fontNames: Object.keys(fontNames).sort((a, b) => fontNames[b] - fontNames[a]),
-    fontColors: Object.keys(fontColors).sort((a, b) => fontColors[b] - fontColors[a]),
-    backgroundColors: Object.keys(backgroundColors).sort((a, b) => backgroundColors[b] - backgroundColors[a]),
-    themeColors: Object.keys(themeColors).sort((a, b) => themeColors[b] - themeColors[a])
-  }
-}
-
-function performExtraction() {
-  saveFont.value = true
-  saveFontColor.value = true
-  saveBgColor.value = true
-
-  const target = extractTab.value === 'current' ? activeSlide.value : slides.value
-  if (!target) return
-
-  const styles = extractThemeStyles(target)
-  extractedBgColor.value = styles.backgroundColors[0] || '#FFFFFF'
-  extractedFontColor.value = styles.fontColors[0] || '#000000'
-  extractedFont.value = styles.fontNames[0] || '默认字体'
-
-  const bgHex = extractedBgColor.value.toUpperCase()
-  const fontHex = extractedFontColor.value.toUpperCase()
-
-  const finalColors = styles.themeColors.filter(c => {
-    const u = c.toUpperCase()
-    return u !== bgHex && u !== fontHex && u !== '#FFFFFF' && u !== '#000000'
-  })
-  extractedThemeColors.value = finalColors.slice(0, 8).map(color => ({ color, selected: true }))
-}
-
-function openThemeExtractor() {
-  extractTab.value = 'current'
-  performExtraction()
-  themeExtractorVisible.value = true
-}
-
-function saveExtractedTheme() {
-  if (saveFont.value) globalFontFamily.value = extractedFont.value
-  if (saveFontColor.value) globalFontColor.value = extractedFontColor.value
-  if (saveBgColor.value) globalBgColor.value = extractedBgColor.value
-
-  const selectedColors = extractedThemeColors.value.filter(c => c.selected).map(c => c.color)
-  if (selectedColors.length > 0) {
-    const finalPalette = [...selectedColors]
-    while (finalPalette.length < 5) {
-      finalPalette.push(finalPalette[finalPalette.length - 1] || '#3b82f6')
-    }
-    globalThemeColor.value = finalPalette.slice(0, 5)
-  }
-
-  const targetSlides = extractTab.value === 'current' ? (activeSlide.value ? [activeSlide.value] : []) : slides.value
-  targetSlides.forEach((s: any) => {
-    if (saveBgColor.value) {
-      s.background = extractedBgColor.value
-      s.bgType = 'color'
-    }
-    (s.elements || []).forEach((el: any) => {
-      if (el.type === 'text') {
-        if (!el.style) el.style = {}
-        if (saveFont.value) el.style.fontFamily = extractedFont.value
-        if (saveFontColor.value) el.style.color = extractedFontColor.value
-      }
-    })
-  })
-
-  themeExtractorVisible.value = false
-  notify?.('提取的主题已成功保存并应用！')
-  addHistorySnapshot()
-}
-
-watch(extractTab, () => {
-  performExtraction()
-})
-</script>
-
-<template>
-  <div class="sidebar-design-panel flex-column" style="display: flex; flex-direction: column;">
-    <!-- 隐藏的图片背景上传 input -->
-    <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 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>
-
-      <!-- 字体 -->
-      <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>
-
-      <!-- 字体颜色 -->
-      <div class="design-property-row">
-        <span class="shape-property-label">字体颜色</span>
-        <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>
-            </div>
-          </template>
-        </QuickColorPopover>
-      </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>
-      </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>
-          </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 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>
-            </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>
-            </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">
-                  </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>
-            </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>
-
-      <!-- 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>
-      </div>
-    </div>
-
-    <!-- 2. 主题设置 Tab (Theme Settings) -->
-    <div v-else-if="designActiveTab === 'theme'"
-      style="display: flex; flex-direction: column; gap: 14px; padding: 16px;">
-      <StyleBuilderDialog :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 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>
-
-            <!-- 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>
-            </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>
-
-    <!-- 3. 版式设置 Tab (Layout Settings) -->
-    <div v-else-if="designActiveTab === 'layout' && !isMasterEditingView"
-      style="display: flex; flex-direction: column; gap: 14px; padding: 16px;">
-      <div style="display: flex; justify-content: space-between; align-items: center;">
-        <span style="font-size: 13px; font-weight: bold; color: var(--text-primary);">布局</span>
-        <span style="font-size: 12px; color: var(--accent-primary); cursor: pointer;"
-          @click="emit('enterMasterView')">编辑母版</span>
-      </div>
-
-      <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">
-          {{ masterGroup.name }}
-        </div>
-        <div class="preset-layout-grid"
-          style="grid-template-columns: repeat(2, 1fr); gap: 12px; max-height: none; overflow: visible;">
-          <div v-for="layout in masterGroup.layouts" :key="layout.id" class="preset-layout-item"
-            :class="{ 'is-active-layout': slides[activeIndex]?.layoutId === layout.id }"
-            @click="emit('applyLayoutToCurrentSlide', layout.id)">
-            <div class="preset-layout-thumb"
-              :style="{ width: '100%', aspectRatio: '16/9', height: 'auto', background: layout.background || masterGroup.background || '#ffffff', outline: slides[activeIndex]?.layoutId === layout.id ? '2px solid var(--accent-primary, #3b82f6)' : undefined, outlineOffset: '1px', borderRadius: '4px' }">
-              <LayoutThumbSvg :elements="layout.elements || []"
-                :background="layout.background || masterGroup.background || '#ffffff'" />
-            </div>
-            <div class="preset-layout-name"
-              :style="{ fontSize: '11px', color: slides[activeIndex]?.layoutId === layout.id ? 'var(--accent-primary, #3b82f6)' : 'var(--text-secondary)', fontWeight: slides[activeIndex]?.layoutId === layout.id ? '600' : 'normal', marginTop: '4px', textAlign: 'center' }">
-              {{ layout.name }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Theme Extractor Dialog -->
-    <el-dialog v-model="themeExtractorVisible" width="440px" destroy-on-close align-center :show-close="false"
-      class="theme-extractor-dialog">
-      <div class="extractor-container">
-        <!-- Tabs Header -->
-        <div class="extractor-tabs">
-          <div class="extractor-tab" :class="{ active: extractTab === 'current' }" @click="extractTab = 'current'">
-            从当前页中提取
-          </div>
-          <div class="extractor-tab" :class="{ active: extractTab === 'all' }" @click="extractTab = 'all'">
-            从全部幻灯片提取
-          </div>
-        </div>
-
-        <!-- Extractor Content -->
-        <div class="extractor-content">
-          <!-- Font Row -->
-          <div class="extractor-row">
-            <div class="extractor-row-label">字体：</div>
-            <div class="extractor-row-body">
-              <div class="extractor-val-box">
-                {{ fontLabel(extractedFont) }}
-              </div>
-              <el-checkbox v-model="saveFont" class="extractor-checkbox">
-                选择 应用到主题
-              </el-checkbox>
-            </div>
-          </div>
-
-          <!-- Text Color Row -->
-          <div class="extractor-row">
-            <div class="extractor-row-label">文字颜色：</div>
-            <div class="extractor-row-body">
-              <div class="extractor-color-box">
-                <div class="color-preview-bar" :style="{ background: extractedFontColor }"></div>
-                <span>{{ extractedFontColor.toUpperCase() }}</span>
-              </div>
-              <el-checkbox v-model="saveFontColor" class="extractor-checkbox">
-                选择 应用到主题
-              </el-checkbox>
-            </div>
-          </div>
-
-          <!-- Background Color Row -->
-          <div class="extractor-row">
-            <div class="extractor-row-label">背景颜色：</div>
-            <div class="extractor-row-body">
-              <div class="extractor-color-box">
-                <div class="color-preview-bar" :style="{ background: extractedBgColor }"></div>
-                <span>{{ extractedBgColor.toUpperCase() }}</span>
-              </div>
-              <el-checkbox v-model="saveBgColor" class="extractor-checkbox">
-                选择 应用到主题
-              </el-checkbox>
-            </div>
-          </div>
-
-          <!-- Theme Colors Row -->
-          <div class="extractor-row">
-            <div class="extractor-row-label"
-              style="display: flex; align-items: center; justify-content: space-between;">
-              <span>主题色：<span
-                  style="font-size: 11px; color: var(--text-muted); font-weight: normal;">（点击色块排除不要的颜色）</span></span>
-            </div>
-            <div class="extractor-palette-grid">
-              <div v-for="(c, cIdx) in extractedThemeColors" :key="cIdx" class="extractor-palette-block"
-                :class="{ excluded: !c.selected }" :style="{ background: c.color }" @click="c.selected = !c.selected"
-                :title="c.color">
-                <div v-if="!c.selected" class="block-slash"></div>
-              </div>
-              <div v-if="extractedThemeColors.length === 0"
-                style="font-size: 11px; color: var(--text-muted); padding: 4px 0;">
-                未检测到可用配色
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Action Button -->
-        <button class="extractor-save-btn" @click="saveExtractedTheme">
-          ✓ 将选中配置保存为主题
-        </button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<style scoped>
-.design-property-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.design-property-row-start {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.shape-property-label {
-  font-size: 12px;
-  color: var(--text-secondary, #64748b);
-  width: 80px;
-  flex-shrink: 0;
-  text-align: left;
-}
-
-.design-select {
-  flex: 1;
-}
-
-.design-select :deep(.el-select__wrapper) {
-  background-color: #F5F6F7 !important;
-  border: none !important;
-  box-shadow: none !important;
-  height: 32px !important;
-  min-height: 32px !important;
-  line-height: 32px !important;
-  padding: 0 10px !important;
-  border-radius: 4px !important;
-  cursor: pointer;
-}
-
-.design-select :deep(.el-select__wrapper.is-focused) {
-  box-shadow: 0 0 0 1px var(--accent-primary, #6366f1) inset !important;
-}
-
-.design-select :deep(.el-select__selected-item) {
-  font-size: 12px !important;
-  color: var(--text-primary, #1e293b) !important;
-  font-weight: 500;
-}
-
-.design-select :deep(.el-select__placeholder) {
-  font-size: 12px !important;
-}
-
-.design-select :deep(.el-select__suffix) {
-  color: #94a3b8;
-}
-
-/* 4 操作按钮网格样式 */
-.design-btn-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-  margin-top: 6px;
-}
-
-.design-action-btn-primary {
-  margin: 0 !important;
-  height: 32px !important;
-  background-color: #2563eb !important;
-  border-color: #2563eb !important;
-  color: #ffffff !important;
-  font-size: 12px !important;
-  font-weight: 500 !important;
-  border-radius: 4px !important;
-}
-
-.design-action-btn-primary:hover {
-  background-color: #1d4ed8 !important;
-  border-color: #1d4ed8 !important;
-}
-
-.design-action-btn-secondary {
-  margin: 0 !important;
-  height: 32px !important;
-  background-color: #e0ebff !important;
-  border-color: #e0ebff !important;
-  color: #2563eb !important;
-  font-size: 12px !important;
-  font-weight: 500 !important;
-  border-radius: 4px !important;
-}
-
-.design-action-btn-secondary:hover {
-  background-color: #d0e1fd !important;
-  border-color: #d0e1fd !important;
-}
-
-/* 颜色选择药丸外观 */
-.color-picker-pill-wrapper {
-  background: #f5f6f7;
-  border-radius: 4px;
-  padding: 0 10px;
-  cursor: pointer;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-}
-
-.color-pill-inner {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-}
-
-.color-square-preview {
-  width: 14px;
-  height: 14px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
-  flex-shrink: 0;
-}
-
-/* 主题色 5 色预览条 */
-.theme-color-trigger {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 12px;
-  background: #f5f6f7;
-  border-radius: 4px;
-  cursor: pointer;
-  height: 32px;
-  box-sizing: border-box;
-}
-
-.theme-color-preview-list {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.theme-preview-rect {
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  box-sizing: border-box;
-}
-
-/* 主题提取器弹窗样式 */
-.extractor-container {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.extractor-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border-color);
-  margin-bottom: 6px;
-}
-
-.extractor-tab {
-  flex: 1;
-  text-align: center;
-  font-size: 14px;
-  font-weight: 600;
-  padding: 10px 0;
-  cursor: pointer;
-  color: var(--text-secondary);
-  border-bottom: 2px solid transparent;
-  transition: all 0.2s ease;
-}
-
-.extractor-tab.active {
-  color: #2563eb;
-  border-bottom-color: #2563eb;
-}
-
-.extractor-content {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.extractor-row {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  border-bottom: 1px dashed var(--border-color);
-  padding-bottom: 14px;
-}
-
-.extractor-row:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-.extractor-row-label {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text-primary);
-}
-
-.extractor-row-body {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.extractor-val-box,
-.extractor-color-box {
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  height: 32px;
-  flex: 1.2;
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-  font-size: 12px;
-  color: var(--text-primary);
-  background: #ffffff;
-}
-
-.extractor-color-box {
-  gap: 8px;
-}
-
-.color-preview-bar {
-  width: 48px;
-  height: 16px;
-  border-radius: 2px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-}
-
-.extractor-palette-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 4px;
-}
-
-.extractor-palette-block {
-  width: 28px;
-  height: 28px;
-  border-radius: 4px;
-  cursor: pointer;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  position: relative;
-  transition: all 0.2s ease;
-}
-
-.extractor-palette-block:hover {
-  transform: scale(1.1);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-}
-
-.extractor-palette-block.excluded {
-  opacity: 0.25;
-}
-
-.block-slash {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: 1.5px;
-  background: #ef4444;
-  transform: translateY(-50%) rotate(45deg);
-}
-
-.extractor-save-btn {
-  background: #2563eb;
-  border: none;
-  border-radius: 4px;
-  color: #ffffff;
-  font-size: 13px;
-  font-weight: 600;
-  padding: 10px 0;
-  cursor: pointer;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  transition: all 0.2s ease;
-}
-
-.extractor-save-btn:hover {
-  background: #1d4ed8;
-  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
-}
-
-:deep(.theme-extractor-dialog) {
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-:deep(.theme-extractor-dialog .el-dialog__header) {
-  display: none !important;
-}
-
-:deep(.theme-extractor-dialog .el-dialog__body) {
-  padding: 20px 24px 24px 24px !important;
-  background: #ffffff;
-}
-
-:deep(.extractor-checkbox) {
-  flex: 0.8;
-  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;
-  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);
-}
-
-.recipe-theme-card.active-slide-theme {
-  border-color: #6366f1;
-  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
-}
-
-.recipe-card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.recipe-theme-name {
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.2;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.current-slide-pill {
-  font-size: 10px;
-  background: #6366f1;
-  color: #ffffff;
-  padding: 1px 6px;
-  border-radius: 10px;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.recipe-usage-badge {
-  font-size: 10px;
-  padding: 2px 7px;
-  border-radius: 10px;
-  font-weight: 500;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.recipe-usage-badge.all {
-  background: #ecfdf5;
-  color: #059669;
-  border: 1px solid #a7f3d0;
-}
-
-.recipe-usage-badge.partial {
-  background: #eff6ff;
-  color: #2563eb;
-  border: 1px solid #bfdbfe;
-}
-
-.recipe-usage-badge.none {
-  background: #f8fafc;
-  color: #94a3b8;
-  border: 1px solid #e2e8f0;
-}
-
-.recipe-card-preview {
-  cursor: pointer;
-  padding: 8px 10px;
-  background: rgba(0, 0, 0, 0.02);
-  border-radius: 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  transition: background 0.15s ease;
-}
-
-.recipe-card-preview:hover {
-  background: rgba(99, 102, 241, 0.05);
-}
-
-.recipe-font-preview {
-  display: flex;
-  align-items: baseline;
-}
-
-.recipe-palette-strip {
-  display: flex;
-  height: 10px;
-  border-radius: 3px;
-  overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-}
-
-.palette-strip-block {
-  flex: 1;
-  height: 100%;
-}
-
-.recipe-card-actions {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.recipe-act-btn {
-  flex: 1;
-  padding: 5px 6px;
-  border-radius: 5px;
-  border: 1px solid #e2e8f0;
-  background: #ffffff;
-  color: #334155;
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.recipe-act-btn:hover {
-  background: #f1f5f9;
-  border-color: #cbd5e1;
-  color: #0f172a;
-}
-
-.recipe-act-btn.btn-edit {
-  flex: 0 0 auto;
-  padding: 5px 8px;
-  color: #6366f1;
-  border-color: #c7d2fe;
-  background: #eef2ff;
-}
-
-.recipe-act-btn.btn-edit:hover {
-  background: #e0e7ff;
-  border-color: #a5b4fc;
-}
-
-:deep(.color-span-box) {
-  width: 100%;
-}
-
-.shape-num-field {
-  -moz-appearance: textfield;
-  appearance: textfield;
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}
-</style>
+<script setup lang="ts">
+import { ref, computed, watch, defineAsyncComponent } from 'vue'
+// 样式构建器大弹层(~100KB 源码)异步化：首次打开才加载
+const StyleBuilderDialog = defineAsyncComponent(() => import('../../StyleBuilderDialog.vue'))
+import LayoutThumbSvg from './LayoutThumbSvg.vue'
+import QuickColorPopover from '../../QuickColorPopover.vue'
+import GradientEditor from './GradientEditor.vue'
+import { useSlides, gradientPresets, normalizeSlideBackground } from '../../../composables/useSlides'
+import { SYS_FONTS } from '../../../configs/fonts'
+
+const props = defineProps<{
+  designActiveTab: string
+  slideRatio: string
+  styleBuilderVisible: boolean
+  styleBuilderTargetMode: 'all' | 'single'
+  styleBuilderInitialRecipeId: string
+  styleBuilderIsNewCustom: boolean
+  builtinStyleRecipes: any[]
+  slides: any[]
+  activeIndex: number
+  masterGroupedLayouts: any[]
+}>()
+
+// 样式构建器挂载闩锁：首次打开后保持挂载，异步 chunk 只加载一次
+const styleBuilderMounted = ref(false)
+watch(() => props.styleBuilderVisible, v => { if (v) styleBuilderMounted.value = true })
+
+const emit = defineEmits<{
+  (e: 'update:designActiveTab', val: string): void
+  (e: 'update:slideRatio', val: string): void
+  (e: 'update:styleBuilderVisible', val: boolean): void
+  (e: 'openStyleBuilder', mode: 'all' | 'single', recipeId?: string, isNew?: boolean): void
+  (e: 'applyStyleRecipeToSlides', recipe: any, isAll: boolean): void
+  (e: 'enterMasterView'): void
+  (e: 'applyLayoutToCurrentSlide', layoutId: string): void
+}>()
+
+const {
+  globalFontFamily,
+  globalFontColor,
+  globalBgColor,
+  globalThemeColor,
+  globalBorderStyle,
+  globalBorderColor,
+  globalBorderWidth,
+  presetThemes,
+  applyBackgroundToAll,
+  applyThemeToAll,
+  applyFontToAll,
+  applyPresetTheme,
+  activeSlide,
+  slides,
+  activeIndex,
+  notify,
+  isMasterEditingView,
+  activeMasterId,
+  slideMasters,
+  getThemeUsageLabel,
+  addHistorySnapshot,
+  uploadResource
+} = useSlides()
+
+const currentActiveThemeId = computed(() => {
+  if (isMasterEditingView.value) {
+    const master = slideMasters.value.find(m => m.id === activeMasterId.value) || slideMasters.value[0]
+    return (master as any)?.themeId || 'default-recipe'
+  }
+  return props.slides[props.activeIndex]?.themeId || 'default-recipe'
+})
+
+// Quick Color Popover recent colors
+const quickRecentColors = ref<string[]>([])
+const globalFontColorPopoverVisible = ref(false)
+const globalBorderColorPopoverVisible = ref(false)
+const bgColorPopoverVisible = ref(false)
+const isCustomColorPickerOpen = ref(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()
+}
+
+// 字体显示名称
+const fontLabel = (font: string) => SYS_FONTS.find(f => f.value === font || f.label === font)?.label || font
+
+// 背景类型与颜色
+const bgFillType = computed({
+  get() {
+    if (activeSlide.value?.bgType) return activeSlide.value.bgType
+    const bg = activeSlide.value?.background
+    if (bg) {
+      return normalizeSlideBackground(bg).bgType || 'color'
+    }
+    return 'color'
+  },
+  set(val: 'color' | 'gradient' | 'image') {
+    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'))) {
+          activeSlide.value.background = '#ffffff'
+        }
+      } else if (val === 'gradient') {
+        activeSlide.value.background = 'linear-gradient(135deg, #f43f5e 0%, #f97316 100%)'
+      } else if (val === 'image') {
+        activeSlide.value.background = ''
+      }
+      addHistorySnapshot()
+    }
+  }
+})
+
+const activeBgColor = computed({
+  get() {
+    const bg = activeSlide.value?.background
+    if (!bg) return '#ffffff'
+    if (typeof bg === 'string') {
+      if (bg.startsWith('#') || bg.startsWith('rgb')) return bg
+      const colorMatch = bg.match(/(#[0-9a-fA-F]{3,8}|rgba?\([^)]+\))/)
+      if (colorMatch) return colorMatch[1]
+      return '#ffffff'
+    }
+    if (typeof bg === 'object' && bg !== null) {
+      if (bg.type === 'color') return typeof bg.value === 'string' ? bg.value : '#ffffff'
+      if (bg.type === 'gradient') {
+        const c = bg.value?.colors?.[0]?.color
+        return typeof c === 'string' ? c : '#ffffff'
+      }
+      if (bg.type === 'image') {
+        const c = bg.value?.color || bg.value?.src || bg.value?.base64
+        return typeof c === 'string' && c.startsWith('#') ? c : '#ffffff'
+      }
+      if (typeof bg.value === 'string') return bg.value
+    }
+    return '#ffffff'
+  },
+  set(val: string) {
+    if (activeSlide.value) {
+      activeSlide.value.background = val
+      activeSlide.value.bgType = 'color'
+      addHistorySnapshot()
+    }
+  }
+})
+
+const bgImageMode = computed({
+  get() {
+    return (activeSlide.value as any)?.bgImageMode || 'stretch'
+  },
+  set(val: string) {
+    if (activeSlide.value) {
+      (activeSlide.value as any).bgImageMode = val
+      addHistorySnapshot()
+    }
+  }
+})
+
+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] : ''
+  },
+  set(url: string) {
+    if (activeSlide.value) {
+      if (!url) {
+        activeSlide.value.background = '#ffffff'
+        activeSlide.value.bgType = 'color'
+      } else {
+        activeSlide.value.background = `url("${url}")`
+        activeSlide.value.bgType = 'image'
+      }
+      addHistorySnapshot()
+    }
+  }
+})
+
+const bgFileInputRef = ref<HTMLInputElement | null>(null)
+const uploadBgImage = () => {
+  bgFileInputRef.value?.click()
+}
+const onBgFileChange = async (e: Event) => {
+  const input = e.target as HTMLInputElement
+  if (!input.files || !input.files[0]) return
+  const file = input.files[0]
+  try {
+    const url = await uploadResource(file, { type: 'image', source: 'background', filename: file.name }, () => {
+      return new Promise<string>((resolve) => {
+        const reader = new FileReader()
+        reader.onload = (evt) => resolve(typeof evt.target?.result === 'string' ? evt.target.result : '')
+        reader.readAsDataURL(file)
+      })
+    })
+    if (url) {
+      bgImageUrl.value = url
+      notify('已成功更新背景图片')
+    }
+  } catch (err: any) {
+    console.error(err)
+    notify('背景图片上传失败: ' + (err?.message || err))
+  }
+  input.value = ''
+}
+
+const applyBackground = (css: string) => {
+  if (activeSlide.value) {
+    activeSlide.value.background = css
+    activeSlide.value.bgType = 'gradient'
+    addHistorySnapshot()
+  }
+}
+
+const activeGradientCss = computed(() => {
+  const bg = activeSlide.value?.background
+  if (!bg) return 'linear-gradient(135deg, #f43f5e 0%, #f97316 100%)'
+  if (typeof bg === 'string') {
+    if (bg.includes('gradient')) return bg
+    return `linear-gradient(135deg, ${bg} 0%, #ffffff 100%)`
+  }
+  if (typeof bg === 'object' && bg !== null) {
+    const norm = normalizeSlideBackground(bg)
+    if (norm.bgType === 'gradient') return norm.background
+  }
+  return 'linear-gradient(135deg, #f43f5e 0%, #f97316 100%)'
+})
+
+const onGradientEditorUpdate = (css: string) => {
+  if (activeSlide.value) {
+    activeSlide.value.background = css
+    activeSlide.value.bgType = 'gradient'
+  }
+}
+
+const onGradientEditorChange = (css: string) => {
+  if (activeSlide.value) {
+    activeSlide.value.background = css
+    activeSlide.value.bgType = 'gradient'
+    addHistorySnapshot()
+  }
+}
+
+// 主题提取器
+const themeExtractorVisible = ref(false)
+const extractTab = ref<'current' | 'all'>('current')
+const saveFont = ref(true)
+const saveFontColor = ref(true)
+const saveBgColor = ref(true)
+const extractedFont = ref('默认字体')
+const extractedFontColor = ref('#000000')
+const extractedBgColor = ref('#FFFFFF')
+const extractedThemeColors = ref<{ color: string; selected: boolean }[]>([])
+
+function toHexString(color: string): string {
+  if (!color) return '#000000'
+  if (color.startsWith('#')) return color
+  if (color.startsWith('rgb')) {
+    const rgb = color.match(/\d+/g)
+    if (rgb && rgb.length >= 3) {
+      const hex = rgb.slice(0, 3).map(x => parseInt(x).toString(16).padStart(2, '0')).join('')
+      return `#${hex}`
+    }
+  }
+  return color
+}
+
+function normalizeColor(color: string): string | null {
+  if (!color || typeof color !== 'string') return null
+  const hex = toHexString(color).toUpperCase()
+  return hex.startsWith('#') && (hex.length === 7 || hex.length === 4) ? hex : null
+}
+
+function extractThemeStyles(target: any) {
+  const slidesToExtract = Array.isArray(target) ? target : [target]
+  const fontNames: Record<string, number> = {}
+  const fontColors: Record<string, number> = {}
+  const backgroundColors: Record<string, number> = {}
+  const themeColors: Record<string, number> = {}
+
+  slidesToExtract.forEach((slide: any) => {
+    if (!slide) return
+    if (slide.background && typeof slide.background === 'string') {
+      const c = normalizeColor(slide.background)
+      if (c) backgroundColors[c] = (backgroundColors[c] || 0) + 1000
+    }
+    const elements = slide.elements || []
+    elements.forEach((el: any) => {
+      const area = (el.width || 100) * (el.height || 100)
+      if (el.type === 'text') {
+        const font = el.style?.fontFamily || el.fontFamily
+        if (font) fontNames[font] = (fontNames[font] || 0) + area
+        const fc = normalizeColor(el.style?.color || el.color)
+        if (fc) fontColors[fc] = (fontColors[fc] || 0) + area
+      }
+      if (el.type === 'shape' || el.type === 'line') {
+        const fill = normalizeColor(el.style?.fill || el.fill)
+        if (fill && fill !== '#FFFFFF' && fill !== '#000000') {
+          themeColors[fill] = (themeColors[fill] || 0) + area
+        }
+        const border = normalizeColor(el.style?.borderColor || el.borderColor)
+        if (border && border !== '#FFFFFF' && border !== '#000000') {
+          themeColors[border] = (themeColors[border] || 0) + area * 0.5
+        }
+      }
+    })
+  })
+
+  return {
+    fontNames: Object.keys(fontNames).sort((a, b) => fontNames[b] - fontNames[a]),
+    fontColors: Object.keys(fontColors).sort((a, b) => fontColors[b] - fontColors[a]),
+    backgroundColors: Object.keys(backgroundColors).sort((a, b) => backgroundColors[b] - backgroundColors[a]),
+    themeColors: Object.keys(themeColors).sort((a, b) => themeColors[b] - themeColors[a])
+  }
+}
+
+function performExtraction() {
+  saveFont.value = true
+  saveFontColor.value = true
+  saveBgColor.value = true
+
+  const target = extractTab.value === 'current' ? activeSlide.value : slides.value
+  if (!target) return
+
+  const styles = extractThemeStyles(target)
+  extractedBgColor.value = styles.backgroundColors[0] || '#FFFFFF'
+  extractedFontColor.value = styles.fontColors[0] || '#000000'
+  extractedFont.value = styles.fontNames[0] || '默认字体'
+
+  const bgHex = extractedBgColor.value.toUpperCase()
+  const fontHex = extractedFontColor.value.toUpperCase()
+
+  const finalColors = styles.themeColors.filter(c => {
+    const u = c.toUpperCase()
+    return u !== bgHex && u !== fontHex && u !== '#FFFFFF' && u !== '#000000'
+  })
+  extractedThemeColors.value = finalColors.slice(0, 8).map(color => ({ color, selected: true }))
+}
+
+function openThemeExtractor() {
+  extractTab.value = 'current'
+  performExtraction()
+  themeExtractorVisible.value = true
+}
+
+function saveExtractedTheme() {
+  if (saveFont.value) globalFontFamily.value = extractedFont.value
+  if (saveFontColor.value) globalFontColor.value = extractedFontColor.value
+  if (saveBgColor.value) globalBgColor.value = extractedBgColor.value
+
+  const selectedColors = extractedThemeColors.value.filter(c => c.selected).map(c => c.color)
+  if (selectedColors.length > 0) {
+    const finalPalette = [...selectedColors]
+    while (finalPalette.length < 5) {
+      finalPalette.push(finalPalette[finalPalette.length - 1] || '#3b82f6')
+    }
+    globalThemeColor.value = finalPalette.slice(0, 5)
+  }
+
+  const targetSlides = extractTab.value === 'current' ? (activeSlide.value ? [activeSlide.value] : []) : slides.value
+  targetSlides.forEach((s: any) => {
+    if (saveBgColor.value) {
+      s.background = extractedBgColor.value
+      s.bgType = 'color'
+    }
+    (s.elements || []).forEach((el: any) => {
+      if (el.type === 'text') {
+        if (!el.style) el.style = {}
+        if (saveFont.value) el.style.fontFamily = extractedFont.value
+        if (saveFontColor.value) el.style.color = extractedFontColor.value
+      }
+    })
+  })
+
+  themeExtractorVisible.value = false
+  notify?.('提取的主题已成功保存并应用！')
+  addHistorySnapshot()
+}
+
+watch(extractTab, () => {
+  performExtraction()
+})
+</script>
+
+<template>
+  <div class="sidebar-design-panel flex-column" style="display: flex; flex-direction: column;">
+    <!-- 隐藏的图片背景上传 input -->
+    <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 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>
+
+      <!-- 字体 -->
+      <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>
+
+      <!-- 字体颜色 -->
+      <div class="design-property-row">
+        <span class="shape-property-label">字体颜色</span>
+        <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>
+            </div>
+          </template>
+        </QuickColorPopover>
+      </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>
+      </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>
+          </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 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>
+            </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>
+            </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">
+                  </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>
+            </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>
+
+      <!-- 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>
+      </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 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>
+
+            <!-- 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>
+            </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>
+
+    <!-- 3. 版式设置 Tab (Layout Settings) -->
+    <div v-else-if="designActiveTab === 'layout' && !isMasterEditingView"
+      style="display: flex; flex-direction: column; gap: 14px; padding: 16px;">
+      <div style="display: flex; justify-content: space-between; align-items: center;">
+        <span style="font-size: 13px; font-weight: bold; color: var(--text-primary);">布局</span>
+        <span style="font-size: 12px; color: var(--accent-primary); cursor: pointer;"
+          @click="emit('enterMasterView')">编辑母版</span>
+      </div>
+
+      <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">
+          {{ masterGroup.name }}
+        </div>
+        <div class="preset-layout-grid"
+          style="grid-template-columns: repeat(2, 1fr); gap: 12px; max-height: none; overflow: visible;">
+          <div v-for="layout in masterGroup.layouts" :key="layout.id" class="preset-layout-item"
+            :class="{ 'is-active-layout': slides[activeIndex]?.layoutId === layout.id }"
+            @click="emit('applyLayoutToCurrentSlide', layout.id)">
+            <div class="preset-layout-thumb"
+              :style="{ width: '100%', aspectRatio: '16/9', height: 'auto', background: layout.background || masterGroup.background || '#ffffff', outline: slides[activeIndex]?.layoutId === layout.id ? '2px solid var(--accent-primary, #3b82f6)' : undefined, outlineOffset: '1px', borderRadius: '4px' }">
+              <LayoutThumbSvg :elements="layout.elements || []"
+                :background="layout.background || masterGroup.background || '#ffffff'" />
+            </div>
+            <div class="preset-layout-name"
+              :style="{ fontSize: '11px', color: slides[activeIndex]?.layoutId === layout.id ? 'var(--accent-primary, #3b82f6)' : 'var(--text-secondary)', fontWeight: slides[activeIndex]?.layoutId === layout.id ? '600' : 'normal', marginTop: '4px', textAlign: 'center' }">
+              {{ layout.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Theme Extractor Dialog -->
+    <el-dialog v-model="themeExtractorVisible" width="440px" destroy-on-close align-center :show-close="false"
+      class="theme-extractor-dialog">
+      <div class="extractor-container">
+        <!-- Tabs Header -->
+        <div class="extractor-tabs">
+          <div class="extractor-tab" :class="{ active: extractTab === 'current' }" @click="extractTab = 'current'">
+            从当前页中提取
+          </div>
+          <div class="extractor-tab" :class="{ active: extractTab === 'all' }" @click="extractTab = 'all'">
+            从全部幻灯片提取
+          </div>
+        </div>
+
+        <!-- Extractor Content -->
+        <div class="extractor-content">
+          <!-- Font Row -->
+          <div class="extractor-row">
+            <div class="extractor-row-label">字体：</div>
+            <div class="extractor-row-body">
+              <div class="extractor-val-box">
+                {{ fontLabel(extractedFont) }}
+              </div>
+              <el-checkbox v-model="saveFont" class="extractor-checkbox">
+                选择 应用到主题
+              </el-checkbox>
+            </div>
+          </div>
+
+          <!-- Text Color Row -->
+          <div class="extractor-row">
+            <div class="extractor-row-label">文字颜色：</div>
+            <div class="extractor-row-body">
+              <div class="extractor-color-box">
+                <div class="color-preview-bar" :style="{ background: extractedFontColor }"></div>
+                <span>{{ extractedFontColor.toUpperCase() }}</span>
+              </div>
+              <el-checkbox v-model="saveFontColor" class="extractor-checkbox">
+                选择 应用到主题
+              </el-checkbox>
+            </div>
+          </div>
+
+          <!-- Background Color Row -->
+          <div class="extractor-row">
+            <div class="extractor-row-label">背景颜色：</div>
+            <div class="extractor-row-body">
+              <div class="extractor-color-box">
+                <div class="color-preview-bar" :style="{ background: extractedBgColor }"></div>
+                <span>{{ extractedBgColor.toUpperCase() }}</span>
+              </div>
+              <el-checkbox v-model="saveBgColor" class="extractor-checkbox">
+                选择 应用到主题
+              </el-checkbox>
+            </div>
+          </div>
+
+          <!-- Theme Colors Row -->
+          <div class="extractor-row">
+            <div class="extractor-row-label"
+              style="display: flex; align-items: center; justify-content: space-between;">
+              <span>主题色：<span
+                  style="font-size: 11px; color: var(--text-muted); font-weight: normal;">（点击色块排除不要的颜色）</span></span>
+            </div>
+            <div class="extractor-palette-grid">
+              <div v-for="(c, cIdx) in extractedThemeColors" :key="cIdx" class="extractor-palette-block"
+                :class="{ excluded: !c.selected }" :style="{ background: c.color }" @click="c.selected = !c.selected"
+                :title="c.color">
+                <div v-if="!c.selected" class="block-slash"></div>
+              </div>
+              <div v-if="extractedThemeColors.length === 0"
+                style="font-size: 11px; color: var(--text-muted); padding: 4px 0;">
+                未检测到可用配色
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Action Button -->
+        <button class="extractor-save-btn" @click="saveExtractedTheme">
+          ✓ 将选中配置保存为主题
+        </button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.design-property-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.design-property-row-start {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.shape-property-label {
+  font-size: 12px;
+  color: var(--text-secondary, #64748b);
+  width: 80px;
+  flex-shrink: 0;
+  text-align: left;
+}
+
+.design-select {
+  flex: 1;
+}
+
+.design-select :deep(.el-select__wrapper) {
+  background-color: #F5F6F7 !important;
+  border: none !important;
+  box-shadow: none !important;
+  height: 32px !important;
+  min-height: 32px !important;
+  line-height: 32px !important;
+  padding: 0 10px !important;
+  border-radius: 4px !important;
+  cursor: pointer;
+}
+
+.design-select :deep(.el-select__wrapper.is-focused) {
+  box-shadow: 0 0 0 1px var(--accent-primary, #6366f1) inset !important;
+}
+
+.design-select :deep(.el-select__selected-item) {
+  font-size: 12px !important;
+  color: var(--text-primary, #1e293b) !important;
+  font-weight: 500;
+}
+
+.design-select :deep(.el-select__placeholder) {
+  font-size: 12px !important;
+}
+
+.design-select :deep(.el-select__suffix) {
+  color: #94a3b8;
+}
+
+/* 4 操作按钮网格样式 */
+.design-btn-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.design-action-btn-primary {
+  margin: 0 !important;
+  height: 32px !important;
+  background-color: #2563eb !important;
+  border-color: #2563eb !important;
+  color: #ffffff !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  border-radius: 4px !important;
+}
+
+.design-action-btn-primary:hover {
+  background-color: #1d4ed8 !important;
+  border-color: #1d4ed8 !important;
+}
+
+.design-action-btn-secondary {
+  margin: 0 !important;
+  height: 32px !important;
+  background-color: #e0ebff !important;
+  border-color: #e0ebff !important;
+  color: #2563eb !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  border-radius: 4px !important;
+}
+
+.design-action-btn-secondary:hover {
+  background-color: #d0e1fd !important;
+  border-color: #d0e1fd !important;
+}
+
+/* 颜色选择药丸外观 */
+.color-picker-pill-wrapper {
+  background: #f5f6f7;
+  border-radius: 4px;
+  padding: 0 10px;
+  cursor: pointer;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.color-pill-inner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.color-square-preview {
+  width: 14px;
+  height: 14px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+/* 主题色 5 色预览条 */
+.theme-color-trigger {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  background: #f5f6f7;
+  border-radius: 4px;
+  cursor: pointer;
+  height: 32px;
+  box-sizing: border-box;
+}
+
+.theme-color-preview-list {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.theme-preview-rect {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+}
+
+/* 主题提取器弹窗样式 */
+.extractor-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.extractor-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 6px;
+}
+
+.extractor-tab {
+  flex: 1;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px 0;
+  cursor: pointer;
+  color: var(--text-secondary);
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.extractor-tab.active {
+  color: #2563eb;
+  border-bottom-color: #2563eb;
+}
+
+.extractor-content {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.extractor-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-bottom: 1px dashed var(--border-color);
+  padding-bottom: 14px;
+}
+
+.extractor-row:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.extractor-row-label {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.extractor-row-body {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.extractor-val-box,
+.extractor-color-box {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  height: 32px;
+  flex: 1.2;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  font-size: 12px;
+  color: var(--text-primary);
+  background: #ffffff;
+}
+
+.extractor-color-box {
+  gap: 8px;
+}
+
+.color-preview-bar {
+  width: 48px;
+  height: 16px;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.extractor-palette-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.extractor-palette-block {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.extractor-palette-block:hover {
+  transform: scale(1.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.extractor-palette-block.excluded {
+  opacity: 0.25;
+}
+
+.block-slash {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 1.5px;
+  background: #ef4444;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.extractor-save-btn {
+  background: #2563eb;
+  border: none;
+  border-radius: 4px;
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 10px 0;
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  transition: all 0.2s ease;
+}
+
+.extractor-save-btn:hover {
+  background: #1d4ed8;
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
+}
+
+:deep(.theme-extractor-dialog) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:deep(.theme-extractor-dialog .el-dialog__header) {
+  display: none !important;
+}
+
+:deep(.theme-extractor-dialog .el-dialog__body) {
+  padding: 20px 24px 24px 24px !important;
+  background: #ffffff;
+}
+
+:deep(.extractor-checkbox) {
+  flex: 0.8;
+  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;
+  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);
+}
+
+.recipe-theme-card.active-slide-theme {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
+}
+
+.recipe-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.recipe-theme-name {
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.current-slide-pill {
+  font-size: 10px;
+  background: #6366f1;
+  color: #ffffff;
+  padding: 1px 6px;
+  border-radius: 10px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.recipe-usage-badge {
+  font-size: 10px;
+  padding: 2px 7px;
+  border-radius: 10px;
+  font-weight: 500;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.recipe-usage-badge.all {
+  background: #ecfdf5;
+  color: #059669;
+  border: 1px solid #a7f3d0;
+}
+
+.recipe-usage-badge.partial {
+  background: #eff6ff;
+  color: #2563eb;
+  border: 1px solid #bfdbfe;
+}
+
+.recipe-usage-badge.none {
+  background: #f8fafc;
+  color: #94a3b8;
+  border: 1px solid #e2e8f0;
+}
+
+.recipe-card-preview {
+  cursor: pointer;
+  padding: 8px 10px;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  transition: background 0.15s ease;
+}
+
+.recipe-card-preview:hover {
+  background: rgba(99, 102, 241, 0.05);
+}
+
+.recipe-font-preview {
+  display: flex;
+  align-items: baseline;
+}
+
+.recipe-palette-strip {
+  display: flex;
+  height: 10px;
+  border-radius: 3px;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.palette-strip-block {
+  flex: 1;
+  height: 100%;
+}
+
+.recipe-card-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.recipe-act-btn {
+  flex: 1;
+  padding: 5px 6px;
+  border-radius: 5px;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  color: #334155;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.recipe-act-btn:hover {
+  background: #f1f5f9;
+  border-color: #cbd5e1;
+  color: #0f172a;
+}
+
+.recipe-act-btn.btn-edit {
+  flex: 0 0 auto;
+  padding: 5px 8px;
+  color: #6366f1;
+  border-color: #c7d2fe;
+  background: #eef2ff;
+}
+
+.recipe-act-btn.btn-edit:hover {
+  background: #e0e7ff;
+  border-color: #a5b4fc;
+}
+
+:deep(.color-span-box) {
+  width: 100%;
+}
+
+.shape-num-field {
+  -moz-appearance: textfield;
+  appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+</style>