jvs-ppt-ui 0.0.14 → 0.0.16

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

@@ -1,1427 +1,1938 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { getFontVariants } from '../../../configs/fonts'
-import QuickColorPopover from '../../QuickColorPopover.vue'
-import { type SlideTextType, TEXT_TYPE_LIST } from '../../../utils/textTypes'
-
-import ulDisc from '../../../assets/list/ul-disc.png'
-import ulDiamond from '../../../assets/list/ul-diamond.png'
-import ulTriangle from '../../../assets/list/ul-triangle.png'
-import ulCheckmark from '../../../assets/list/ul-checkmark.png'
-import ulSquare from '../../../assets/list/ul-square.png'
-import ulCircle from '../../../assets/list/ul-circle.png'
-import olDicimal from '../../../assets/list/ol-dicimal.png'
-import olCircledNumbers from '../../../assets/list/ol-circled-numbers.png'
-import olLowerAlpha from '../../../assets/list/ol-lower-alpha.png'
-import olUpperAlpha from '../../../assets/list/ol-upper-alpha.png'
-import olUpperRoman from '../../../assets/list/ol-upper-roman.png'
-import olChinese from '../../../assets/list/ol-chinese.png'
-
-const props = withDefaults(defineProps<{
-  selectedElement: any
-  selectedElementIds?: string[]
-  currentTextType?: SlideTextType
-  sysFonts?: Array<{ label: string; value: string }>
-  themeRecipe?: any
-  fontStyleSupport?: { bold: boolean; italic: boolean; boldItalic: boolean }
-  styleFontFamily?: string
-  styleFontSize?: string
-  styleFontWeightStyle?: string
-  lineHeightNumber?: number
-  letterSpacingNumber?: number
-  styleTextColor?: string
-  styleTextBackground?: string
-  styleTextAlign?: string
-  styleVerticalAlign?: string
-  styleWritingMode?: string
-  styleAutoFitType?: string
-  styleWordWrap?: boolean
-  paddingTop?: number
-  paddingRight?: number
-  paddingBottom?: number
-  paddingLeft?: number
-  isPaddingLocked?: boolean
-  hasUnorderedList?: boolean
-  hasOrderedList?: boolean
-  isActiveListStyle?: (type: any, val: string) => boolean
-  enableTextStroke?: boolean
-  textStrokeColor?: string
-  textStrokeWidth?: number
-  textStrokeStyle?: string
-  textStrokeAlpha?: number
-  enableTextShadow?: boolean
-  textShadowHex?: string
-  textShadowAlpha?: number
-  textShadowAngle?: number
-  textShadowSize?: number
-  textShadowDistance?: number
-  textShadowBlur?: number
-  enableTextReflection?: boolean
-  textReflectionDistance?: number
-  textReflectionSize?: number
-  textReflectionOpacity?: number
-  textReflectionBlur?: number
-  recentColors?: string[]
-  getStyleVal?: (prop: string, fallback?: any) => any
-}>(), {
-  selectedElementIds: () => [],
-  currentTextType: 'normalText',
-  sysFonts: () => [],
-  fontStyleSupport: () => ({ bold: true, italic: true, boldItalic: true }),
-  styleFontFamily: '默认字体',
-  styleFontSize: '16px',
-  styleFontWeightStyle: 'Regular',
-  lineHeightNumber: 1.3,
-  letterSpacingNumber: 0,
-  styleTextColor: '#000000',
-  styleTextBackground: 'transparent',
-  styleTextAlign: 'center',
-  styleVerticalAlign: 'middle',
-  styleWritingMode: 'horizontal-tb',
-  styleAutoFitType: 'shape',
-  styleWordWrap: true,
-  paddingTop: 4.8,
-  paddingRight: 9.6,
-  paddingBottom: 4.8,
-  paddingLeft: 9.6,
-  isPaddingLocked: false,
-  hasUnorderedList: false,
-  hasOrderedList: false,
-  enableTextStroke: false,
-  textStrokeColor: '#000000',
-  textStrokeWidth: 1,
-  textStrokeStyle: 'solid',
-  textStrokeAlpha: 100,
-  enableTextShadow: false,
-  textShadowHex: '#000000',
-  textShadowAlpha: 50,
-  textShadowAngle: 45,
-  textShadowSize: 100,
-  textShadowDistance: 3,
-  textShadowBlur: 4,
-  enableTextReflection: false,
-  textReflectionDistance: 0,
-  textReflectionSize: 100,
-  textReflectionOpacity: 10,
-  textReflectionBlur: 0,
-  recentColors: () => [],
-  getStyleVal: () => undefined
-})
-
-const emit = defineEmits<{
-  (e: 'changeTextType', val: SlideTextType): void
-  (e: 'changeFontFamily', val: string): void
-  (e: 'changeFontSize', val: string): void
-  (e: 'update:styleFontWeightStyle', val: string): void
-  (e: 'update:lineHeightNumber', val: number): void
-  (e: 'update:letterSpacingNumber', val: number): void
-  (e: 'update:styleTextColor', val: string): void
-  (e: 'update:styleTextBackground', val: string): void
-  (e: 'update:styleTextAlign', val: string): void
-  (e: 'update:styleVerticalAlign', val: string): void
-  (e: 'update:styleWritingMode', val: string): void
-  (e: 'update:styleAutoFitType', val: string): void
-  (e: 'update:styleWordWrap', val: boolean): void
-  (e: 'update:paddingTop', val: number): void
-  (e: 'update:paddingRight', val: number): void
-  (e: 'update:paddingBottom', val: number): void
-  (e: 'update:paddingLeft', val: number): void
-  (e: 'update:isPaddingLocked', val: boolean): void
-  (e: 'toggleListStyle', type: string, val: string, isFromPanel?: boolean): void
-  (e: 'update:enableTextStroke', val: boolean): void
-  (e: 'update:textStrokeColor', val: string): void
-  (e: 'update:textStrokeWidth', val: number): void
-  (e: 'update:textStrokeStyle', val: string): void
-  (e: 'update:textStrokeAlpha', val: number): void
-  (e: 'update:enableTextShadow', val: boolean): void
-  (e: 'update:textShadowHex', val: string): void
-  (e: 'update:textShadowAlpha', val: number): void
-  (e: 'update:textShadowAngle', val: number): void
-  (e: 'update:textShadowSize', val: number): void
-  (e: 'update:textShadowBlur', val: number): void
-  (e: 'update:textShadowDistance', val: number): void
-  (e: 'update:enableTextReflection', val: boolean): void
-  (e: 'update:textReflectionDistance', val: number): void
-  (e: 'update:textReflectionSize', val: number): void
-  (e: 'update:textReflectionOpacity', val: number): void
-  (e: 'update:textReflectionBlur', val: number): void
-  (e: 'toggleBold'): void
-  (e: 'toggleItalic'): void
-  (e: 'toggleUnderline'): void
-  (e: 'toggleStrikethrough'): void
-}>()
-
-// Default all accordion sections to true so headers display down-arrow ▼ matching target design
-const isListExpanded = ref(true)
-const isPaddingExpanded = ref(true)
-const isTextBorderExpanded = ref(true)
-const isTextShadowExpanded = ref(true)
-const isTextReflectionExpanded = ref(true)
-
-const isUlVisible = ref(false)
-const isOlVisible = ref(false)
-const textColorPopoverVisible = ref(false)
-const textBgPopoverVisible = ref(false)
-const textStrokePopoverVisible = ref(false)
-const textShadowPopoverVisible = ref(false)
-
-const fontSizeClean = computed(() => {
-  return String(props.styleFontSize || '16').replace('px', '')
-})
-
-function checkStyleVal(prop: string, fallback?: any): any {
-  if (props.getStyleVal) {
-    const val = props.getStyleVal(prop, fallback)
-    if (val !== undefined) return val
-  }
-  return fallback
-}
-
-const isBoldActive = computed(() => {
-  return checkStyleVal('fontWeight') === 'bold'
-})
-
-const isItalicActive = computed(() => {
-  return checkStyleVal('fontStyle') === 'italic'
-})
-
-const isUnderlineActive = computed(() => {
-  return (checkStyleVal('textDecoration') || '').includes('underline')
-})
-
-const isStrikethroughActive = computed(() => {
-  return (checkStyleVal('textDecoration') || '').includes('line-through')
-})
-
-const currentTextAlign = computed(() => {
-  return props.styleTextAlign || checkStyleVal('textAlign', 'center') || 'center'
-})
-
-const currentFontVariants = computed(() => {
-  return getFontVariants(props.styleFontFamily)
-})
-
-const displaySysFonts = computed(() => {
-  return props.sysFonts || []
-})
-
-function toggleTextBorderHeader() {
-  if (!props.enableTextStroke) return
-  isTextBorderExpanded.value = !isTextBorderExpanded.value
-}
-
-function toggleTextShadowHeader() {
-  if (!props.enableTextShadow) return
-  isTextShadowExpanded.value = !isTextShadowExpanded.value
-}
-
-function toggleTextReflectionHeader() {
-  if (!props.enableTextReflection) return
-  isTextReflectionExpanded.value = !isTextReflectionExpanded.value
-}
-
-function startDragAngle(e: MouseEvent) {
-  const dial = e.currentTarget as HTMLElement
-  const rect = dial.getBoundingClientRect()
-  const centerX = rect.left + rect.width / 2
-  const centerY = rect.top + rect.height / 2
-
-  function updateAngle(moveEvent: MouseEvent) {
-    const dx = moveEvent.clientX - centerX
-    const dy = moveEvent.clientY - centerY
-    let angle = Math.round(Math.atan2(dy, dx) * 180 / Math.PI)
-    if (angle < 0) angle += 360
-    emit('update:textShadowAngle', angle)
-  }
-
-  updateAngle(e)
-
-  function stopDrag() {
-    window.removeEventListener('mousemove', updateAngle)
-    window.removeEventListener('mouseup', stopDrag)
-  }
-
-  window.addEventListener('mousemove', updateAngle)
-  window.addEventListener('mouseup', stopDrag)
-}
-</script>
-
-<template>
-  <div class="sidebar-text-format-panel" style="padding: 16px 0 40px; display: flex; flex-direction: column;">
-    <div style="padding: 0 16px; display: flex; flex-direction: column; gap: 12px;">
-      <!-- Text Classification Selector (文本类型分类: title, headline, subheadline, normal text, small text) -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">类型</span>
-        <el-select :model-value="currentTextType || 'normalText'" @change="emit('changeTextType', $event)" size="small"
-          class="custom-select" style="flex: 1;" placement="bottom-start"
-          popper-class="sidebar-text-type-popper">
-          <el-option v-for="item in TEXT_TYPE_LIST" :key="item.type" :value="item.type" :label="`${item.label} (${item.enLabel})`">
-            <div style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px;">
-              <div style="display: flex; align-items: center; gap: 6px;">
-                <span :style="{ color: item.badgeColor, backgroundColor: item.badgeBg, fontSize: '10px', padding: '1px 5px', borderRadius: '3px', fontWeight: 600, minWidth: '40px', textAlign: 'center' }">{{ item.tag }}</span>
-                <span style="font-size: 13px; font-weight: 500;">{{ item.label }}</span>
-              </div>
-              <span style="font-size: 11px; color: #94a3b8;">{{ item.defaultFontSize }}px</span>
-            </div>
-          </el-option>
-        </el-select>
-      </div>
-
-      <!-- Shape Text Font Family -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">字体</span>
-        <el-select :model-value="styleFontFamily" @change="emit('changeFontFamily', $event)" size="small"
-          class="custom-select" style="flex: 1;" filterable placement="bottom-start"
-          :fallback-placements="['bottom-start', 'bottom', 'top-start']" popper-class="sidebar-font-popper">
-          <el-option label="默认字体" value="默认字体" />
-          <el-option v-for="font in displaySysFonts" :key="font.value" :label="font.label" :value="font.value">
-            <span :style="{ fontFamily: font.value }">{{ font.label }}</span>
-          </el-option>
-        </el-select>
-      </div>
-
-      <!-- Shape Text Style & Size -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">样式</span>
-        <div style="display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 1;">
-          <!-- Font Weight/Style Select -->
-          <el-select :model-value="styleFontWeightStyle"
-            @update:model-value="emit('update:styleFontWeightStyle', $event)" size="small" class="custom-select"
-            style="flex: 1;">
-            <el-option v-for="variant in currentFontVariants" :key="variant.value" :label="variant.label"
-              :value="variant.value" />
-          </el-select>
-          <!-- Font Size Select -->
-          <el-select :model-value="fontSizeClean" @change="emit('changeFontSize', $event)" size="small"
-            class="custom-select" style="flex: 1;" filterable allow-create default-first-option placeholder="字号">
-            <el-option v-for="size in ['12', '14', '16', '18', '20', '24', '28', '32', '36', '44', '52', '60', '72']"
-              :key="size" :label="size" :value="size" />
-          </el-select>
-        </div>
-      </div>
-
-      <!-- Line Height & Letter Spacing -->
-      <div class="shape-property-row">
-        <span class="shape-property-label"></span>
-        <div style="display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 1;">
-          <!-- Line height -->
-          <div class="custom-num-input" style="flex: 1; height: 32px;">
-            <svg class="icon"
-              style="width: 14px; height: 14px; margin-right: 6px; color: var(--text-secondary, #64748b); flex-shrink: 0;">
-              <use xlink:href="#icon-hanggao"></use>
-            </svg>
-            <input type="number" :value="lineHeightNumber"
-              @input="emit('update:lineHeightNumber', Number(($event.target as HTMLInputElement).value))"
-              class="custom-num-field" step="0.1" min="0.5" max="5" />
-          </div>
-          <!-- Letter spacing -->
-          <div class="custom-num-input" style="flex: 1; height: 32px;">
-            <svg class="icon"
-              style="width: 14px; height: 14px; margin-right: 6px; color: var(--text-secondary, #64748b); flex-shrink: 0;">
-              <use xlink:href="#icon-zijianju"></use>
-            </svg>
-            <input type="number" :value="letterSpacingNumber"
-              @input="emit('update:letterSpacingNumber', Number(($event.target as HTMLInputElement).value))"
-              class="custom-num-field" min="-10" max="50" />
-          </div>
-        </div>
-      </div>
-
-      <!-- Bold, Italic, Underline, Strikethrough Buttons -->
-      <div class="shape-property-row">
-        <span class="shape-property-label"></span>
-        <div style="display: flex; align-items: center; flex: 1;">
-          <div class="font-action-btn-rows font-styles">
-            <div class="font-action-btn-clean"
-              :style="isBoldActive ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              @click="emit('toggleBold')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use :xlink:href="isBoldActive ? '#icon-jiacu-xuanzhong' : '#icon-jiacu'"></use>
-              </svg>
-            </div>
-            <div class="font-action-btn-clean"
-              :style="isItalicActive ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              @click="emit('toggleItalic')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use :xlink:href="isItalicActive ? '#icon-qingxie-xuanzhong' : '#icon-qingxie'"></use>
-              </svg>
-            </div>
-            <div class="font-action-btn-clean"
-              :style="isUnderlineActive ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              @click="emit('toggleUnderline')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use :xlink:href="isUnderlineActive ? '#icon-xiahuaxian-xuanzhong' : '#icon-xiahuaxian'"></use>
-              </svg>
-            </div>
-            <div class="font-action-btn-clean"
-              :style="isStrikethroughActive ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              @click="emit('toggleStrikethrough')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use :xlink:href="isStrikethroughActive ? '#icon-shanchuxian-xuanzhong' : '#icon-shanchuxian'"></use>
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Alignment Buttons (Row 1: 水平对齐 5个; Row 2: 垂直对齐 3个 换行显示) -->
-      <div class="shape-property-row">
-        <span class="shape-property-label"></span>
-        <div style="display: flex; align-items: center; flex: 1;">
-          <!-- Horizontal Alignments -->
-          <div class="font-action-btn-rows" style="flex: 1;">
-            <div class="font-action-btn-clean"
-              :style="currentTextAlign === 'left' ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              title="左对齐" @click="emit('update:styleTextAlign', 'left')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use :xlink:href="currentTextAlign === 'left' ? '#icon-zuoduiqi-xuanzhong' : '#icon-zuoduiqi1'"></use>
-              </svg>
-            </div>
-            <div class="font-action-btn-clean"
-              :style="(currentTextAlign === 'center' || !currentTextAlign) ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              title="居中对齐" @click="emit('update:styleTextAlign', 'center')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use
-                  :xlink:href="(currentTextAlign === 'center' || !currentTextAlign) ? '#icon-juzhongduiqi-xuanzhong' : '#icon-juzhongduiqi'">
-                </use>
-              </svg>
-            </div>
-            <div class="font-action-btn-clean"
-              :style="currentTextAlign === 'right' ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              title="右对齐" @click="emit('update:styleTextAlign', 'right')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use :xlink:href="currentTextAlign === 'right' ? '#icon-youduiqi3-copy-copy' : '#icon-youduiqi3-copy'">
-                </use>
-              </svg>
-            </div>
-            <div class="font-action-btn-clean"
-              :style="currentTextAlign === 'justify' ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              title="两端对齐" @click="emit('update:styleTextAlign', 'justify')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use xlink:href="#icon-liangduanduiqi"></use>
-              </svg>
-            </div>
-            <div class="font-action-btn-clean"
-              :style="currentTextAlign === 'distribute' ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              title="分散对齐" @click="emit('update:styleTextAlign', 'distribute')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use xlink:href="#icon-fensanduiqi"></use>
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Vertical Alignments (换行显示) -->
-      <div class="shape-property-row">
-        <span class="shape-property-label"></span>
-        <div style="display: flex; align-items: center; flex: 1;">
-          <div class="font-action-btn-rows" style="flex: 1;">
-            <div class="font-action-btn-clean"
-              :style="styleVerticalAlign === 'top' ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              title="顶对齐" @click="emit('update:styleVerticalAlign', 'top')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use :xlink:href="styleVerticalAlign === 'top' ? '#icon-dingduiqi-xuanzhong' : '#icon-dingduiqi1'">
-                </use>
-              </svg>
-            </div>
-            <div class="font-action-btn-clean"
-              :style="(styleVerticalAlign === 'middle' || !styleVerticalAlign) ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              title="居中对齐" @click="emit('update:styleVerticalAlign', 'middle')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use
-                  :xlink:href="(styleVerticalAlign === 'middle' || !styleVerticalAlign) ? '#icon-chuizhiduiqi-xuanzhong' : '#icon-chuizhiduiqi'">
-                </use>
-              </svg>
-            </div>
-            <div class="font-action-btn-clean"
-              :style="styleVerticalAlign === 'bottom' ? { background: '#ffffff', color: 'var(--accent-primary, #6366f1)', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' } : {}"
-              title="底对齐" @click="emit('update:styleVerticalAlign', 'bottom')">
-              <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-                <use :xlink:href="styleVerticalAlign === 'bottom' ? '#icon-diduiqi1-copy' : '#icon-diduiqi1'"></use>
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Shape Text Color -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">字体颜色</span>
-        <div class="color-picker-cell-wrapper">
-          <QuickColorPopover v-model:visible="textColorPopoverVisible" :color="styleTextColor || '#000000'"
-            :recent-colors="recentColors" @select-color="emit('update:styleTextColor', $event)">
-            <template #reference>
-              <div class="color-picker-pill-wrapper">
-                <div style="display: flex; align-items: center; gap: 8px;">
-                  <div :style="{ background: styleTextColor || '#000000' }"
-                    style="width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.15);">
-                  </div>
-                  <span
-                    style="font-size: 11px; color: var(--text-primary, #1e293b); font-family: monospace; font-weight: 500;">{{
-                      (styleTextColor || '#000000').replace('#', '').toUpperCase() }}</span>
-                </div>
-              </div>
-            </template>
-          </QuickColorPopover>
-        </div>
-      </div>
-
-      <!-- Text Highlight Color -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">高亮色</span>
-        <div class="color-picker-cell-wrapper">
-          <QuickColorPopover v-model:visible="textBgPopoverVisible" :color="styleTextBackground || 'transparent'"
-            :recent-colors="recentColors" @select-color="emit('update:styleTextBackground', $event)">
-            <template #reference>
-              <div class="color-picker-pill-wrapper">
-                <div style="display: flex; align-items: center; gap: 8px;">
-                  <div :style="{ background: styleTextBackground || 'transparent' }"
-                    style="width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.15);">
-                  </div>
-                  <span
-                    style="font-size: 11px; color: var(--text-primary, #1e293b); font-family: monospace; font-weight: 500;">{{
-                      (styleTextBackground || 'transparent').replace('#', '').toUpperCase() }}</span>
-                </div>
-              </div>
-            </template>
-          </QuickColorPopover>
-        </div>
-      </div>
-
-      <!-- Text Direction -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">文字方向</span>
-        <el-select :model-value="styleWritingMode" @update:model-value="emit('update:styleWritingMode', $event)"
-          size="small" class="custom-select" style="flex: 1;">
-          <el-option label="横向" value="horizontal-tb" />
-          <el-option label="竖向（从左到右）" value="vertical-lr" />
-          <el-option label="竖向（从右到左）" value="vertical-rl" />
-        </el-select>
-      </div>
-
-      <!-- Text Auto Fit overflow setting -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">自动调整</span>
-        <el-select :model-value="styleAutoFitType" @update:model-value="emit('update:styleAutoFitType', $event)"
-          size="small" class="custom-select" style="flex: 1;">
-          <el-option label="文字溢出不自动调整" value="none" />
-          <el-option label="溢出时缩减文字大小" value="text" />
-          <el-option label="根据文字调整大小" value="shape" />
-        </el-select>
-      </div>
-
-      <!-- Word wrap setting -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">是否自动换行</span>
-        <el-select :model-value="styleWordWrap" @update:model-value="emit('update:styleWordWrap', $event)" size="small"
-          class="custom-select" style="flex: 1;">
-          <el-option label="是" :value="true" />
-          <el-option label="否" :value="false" />
-        </el-select>
-      </div>
-    </div>
-
-    <!-- Divider above List Accordion -->
-    <div class="control-divider" style="margin: 12px 0 6px; border-top: 1px solid var(--border-color, #E2E8F0);"></div>
-
-    <!-- List Numbering Accordion -->
-    <div class="control-group shape-accordion-group">
-      <div class="shape-accordion-header" @click="isListExpanded = !isListExpanded">
-        <span class="control-label shape-accordion-header-label">
-          <span class="accordion-arrow"
-            :style="{ transform: isListExpanded ? 'rotate(90deg)' : 'rotate(0deg)' }">▶</span>编号</span>
-      </div>
-
-      <div v-show="isListExpanded" class="shape-accordion-content" style="padding-top: 4px;">
-        <!-- Selector Buttons Row with Popovers -->
-        <div style="display: flex; gap: 8px;">
-          <!-- Unordered List Split Button -->
-          <div class="list-split-btn-group" :style="{
-            display: 'flex',
-            alignItems: 'center',
-            height: '32px',
-            background: hasUnorderedList ? '#e0ebff' : '#F5F6F7',
-            borderRadius: '6px',
-            color: hasUnorderedList ? '#2563eb' : '#475569',
-            fontSize: '12px',
-            fontWeight: '500',
-            flex: 1,
-            overflow: 'hidden',
-            border: '1px solid transparent'
-          }">
-            <!-- Left part: toggle list -->
-            <div class="list-split-left-action" @click="emit('toggleListStyle', 'ul', 'disc')" @mousedown.prevent style="
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            padding: 0 8px;
-            flex: 1;
-            height: 100%;
-            cursor: pointer;
-            user-select: none;
-          ">
-              <svg class="icon" style="width: 14px; height: 14px; fill: currentColor;">
-                <use xlink:href="#icon-wuxuliebiao"></use>
-              </svg>
-              <span>无序列表</span>
-            </div>
-
-            <!-- Vertical separator line -->
-            <div style="width: 1px; height: 16px; background: rgba(0,0,0,0.08);"></div>
-
-            <!-- Right part: popover arrow reference -->
-            <el-popover placement="bottom" :width="250" trigger="click" popper-class="list-popover-panel"
-              :show-arrow="false" @before-enter="isUlVisible = true" @before-leave="isUlVisible = false">
-              <template #reference>
-                <div class="list-split-right-arrow" :style="{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: '24px',
-                  height: '100%',
-                  cursor: 'pointer',
-                  userSelect: 'none',
-                  borderRadius: '0 6px 6px 0',
-                  background: isUlVisible ? 'rgba(0,0,0,0.04)' : 'transparent'
-                }">
-                  <span
-                    style="font-size: 9px; opacity: 0.6; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease;"
-                    :style="{ transform: isUlVisible ? 'rotate(180deg)' : 'rotate(0deg)' }">▼</span>
-                </div>
-              </template>
-              <!-- Unordered list presets grid -->
-              <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px;">
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ul', 'disc') : false }"
-                  @click="emit('toggleListStyle', 'ul', 'disc', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="ulDisc"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ul', '\'◆ \'') : false }"
-                  @click="emit('toggleListStyle', 'ul', '\'◆ \'', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="ulDiamond"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ul', '\'▸ \'') : false }"
-                  @click="emit('toggleListStyle', 'ul', '\'▸ \'', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="ulTriangle"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ul', '\'✔ \'') : false }"
-                  @click="emit('toggleListStyle', 'ul', '\'✔ \'', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="ulCheckmark"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ul', 'square') : false }"
-                  @click="emit('toggleListStyle', 'ul', 'square', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="ulSquare"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ul', 'circle') : false }"
-                  @click="emit('toggleListStyle', 'ul', 'circle', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="ulCircle"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-              </div>
-            </el-popover>
-          </div>
-
-          <!-- Ordered List Split Button -->
-          <div class="list-split-btn-group" :style="{
-            display: 'flex',
-            alignItems: 'center',
-            height: '32px',
-            background: hasOrderedList ? '#e0ebff' : '#F5F6F7',
-            borderRadius: '6px',
-            color: hasOrderedList ? '#2563eb' : '#475569',
-            fontSize: '12px',
-            fontWeight: '500',
-            flex: 1,
-            overflow: 'hidden',
-            border: '1px solid transparent'
-          }">
-            <!-- Left part: toggle list -->
-            <div class="list-split-left-action" @click="emit('toggleListStyle', 'ol', 'decimal')" @mousedown.prevent
-              style="
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            padding: 0 8px;
-            flex: 1;
-            height: 100%;
-            cursor: pointer;
-            user-select: none;
-          ">
-              <svg class="icon" style="width: 14px; height: 14px; fill: currentColor;">
-                <use xlink:href="#icon-youxuliebiao"></use>
-              </svg>
-              <span>有序列表</span>
-            </div>
-
-            <!-- Vertical separator line -->
-            <div style="width: 1px; height: 16px; background: rgba(0,0,0,0.08);"></div>
-
-            <!-- Right part: popover arrow reference -->
-            <el-popover placement="bottom" :width="250" trigger="click" popper-class="list-popover-panel"
-              :show-arrow="false" @before-enter="isOlVisible = true" @before-leave="isOlVisible = false">
-              <template #reference>
-                <div class="list-split-right-arrow" :style="{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: '24px',
-                  height: '100%',
-                  cursor: 'pointer',
-                  userSelect: 'none',
-                  borderRadius: '0 6px 6px 0',
-                  background: isOlVisible ? 'rgba(0,0,0,0.04)' : 'transparent'
-                }">
-                  <span
-                    style="font-size: 9px; opacity: 0.6; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease;"
-                    :style="{ transform: isOlVisible ? 'rotate(180deg)' : 'rotate(0deg)' }">▼</span>
-                </div>
-              </template>
-              <!-- Ordered list presets grid -->
-              <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px;">
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'decimal') : false }"
-                  @click="emit('toggleListStyle', 'ol', 'decimal', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="olDicimal"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'circled-numbers') : false }"
-                  @click="emit('toggleListStyle', 'ol', 'circled-numbers', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="olCircledNumbers"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'lower-alpha') : false }"
-                  @click="emit('toggleListStyle', 'ol', 'lower-alpha', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="olLowerAlpha"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'upper-alpha') : false }"
-                  @click="emit('toggleListStyle', 'ol', 'upper-alpha', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="olUpperAlpha"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'upper-roman') : false }"
-                  @click="emit('toggleListStyle', 'ol', 'upper-roman', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="olUpperRoman"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-                <div class="list-style-card"
-                  :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'simp-chinese-informal') : false }"
-                  @click="emit('toggleListStyle', 'ol', 'simp-chinese-informal', true)" @mousedown.prevent
-                  style="display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px;">
-                  <img :src="olChinese"
-                    style="max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none;" />
-                </div>
-              </div>
-            </el-popover>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Padding Accordion -->
-    <div class="control-group shape-accordion-group" v-if="selectedElement && selectedElement.type !== 'group'">
-      <div class="shape-accordion-header" @click="isPaddingExpanded = !isPaddingExpanded">
-        <span class="control-label shape-accordion-header-label">
-          <span class="accordion-arrow"
-            :style="{ transform: isPaddingExpanded ? 'rotate(90deg)' : 'rotate(0deg)' }">▶</span>内边距</span>
-      </div>
-
-      <div v-show="isPaddingExpanded" class="shape-accordion-content">
-        <div style="display: flex; gap: 8px; align-items: stretch;">
-          <!-- Grid of 4 inputs -->
-          <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; flex: 1;">
-            <!-- Padding Left (Top-Left) -->
-            <div class="custom-num-input"
-              style="height: 32px; padding: 0 8px; display: flex; align-items: center; background: #F5F6F7; border: none; border-radius: 4px;">
-              <span
-                style="font-size: 11px; color: var(--text-secondary, #64748b); margin-right: 6px; display: flex; align-items: center; opacity: 0.6;">
-                <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5">
-                  <line x1="4" y1="4" x2="4" y2="20" />
-                  <rect x="8" y="5" width="12" height="14" stroke-dasharray="2 2" />
-                </svg>
-              </span>
-              <input type="number" :value="paddingLeft"
-                @input="emit('update:paddingLeft', Number(($event.target as HTMLInputElement).value))"
-                class="custom-num-field" min="0" max="500"
-                style="width: 100%; border: none; background: transparent; outline: none; text-align: left; font-size: 12px; color: var(--text-primary, #1e293b);" />
-            </div>
-
-            <!-- Padding Right (Top-Right) -->
-            <div class="custom-num-input"
-              style="height: 32px; padding: 0 8px; display: flex; align-items: center; background: #F5F6F7; border: none; border-radius: 4px;">
-              <span
-                style="font-size: 11px; color: var(--text-secondary, #64748b); margin-right: 6px; display: flex; align-items: center; opacity: 0.6;">
-                <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5">
-                  <line x1="20" y1="4" x2="20" y2="20" />
-                  <rect x="4" y="5" width="12" height="14" stroke-dasharray="2 2" />
-                </svg>
-              </span>
-              <input type="number" :value="paddingRight"
-                @input="emit('update:paddingRight', Number(($event.target as HTMLInputElement).value))"
-                class="custom-num-field" min="0" max="500"
-                style="width: 100%; border: none; background: transparent; outline: none; text-align: left; font-size: 12px; color: var(--text-primary, #1e293b);" />
-            </div>
-
-            <!-- Padding Top (Bottom-Left) -->
-            <div class="custom-num-input"
-              style="height: 32px; padding: 0 8px; display: flex; align-items: center; background: #F5F6F7; border: none; border-radius: 4px;">
-              <span
-                style="font-size: 11px; color: var(--text-secondary, #64748b); margin-right: 6px; display: flex; align-items: center; opacity: 0.6;">
-                <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5">
-                  <line x1="4" y1="4" x2="20" y2="4" />
-                  <rect x="5" y="8" width="14" height="12" stroke-dasharray="2 2" />
-                </svg>
-              </span>
-              <input type="number" :value="paddingTop"
-                @input="emit('update:paddingTop', Number(($event.target as HTMLInputElement).value))"
-                class="custom-num-field" min="0" max="500"
-                style="width: 100%; border: none; background: transparent; outline: none; text-align: left; font-size: 12px; color: var(--text-primary, #1e293b);" />
-            </div>
-
-            <!-- Padding Bottom (Bottom-Right) -->
-            <div class="custom-num-input"
-              style="height: 32px; padding: 0 8px; display: flex; align-items: center; background: #F5F6F7; border: none; border-radius: 4px;">
-              <span
-                style="font-size: 11px; color: var(--text-secondary, #64748b); margin-right: 6px; display: flex; align-items: center; opacity: 0.6;">
-                <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5">
-                  <line x1="4" y1="20" x2="20" y2="20" />
-                  <rect x="5" y="4" width="14" height="12" stroke-dasharray="2 2" />
-                </svg>
-              </span>
-              <input type="number" :value="paddingBottom"
-                @input="emit('update:paddingBottom', Number(($event.target as HTMLInputElement).value))"
-                class="custom-num-field" min="0" max="500"
-                style="width: 100%; border: none; background: transparent; outline: none; text-align: left; font-size: 12px; color: var(--text-primary, #1e293b);" />
-            </div>
-          </div>
-
-          <!-- Link/Lock button -->
-          <div class="grid-btn" title="锁定所有边框内边距一致" @click="emit('update:isPaddingLocked', !isPaddingLocked)"
-            :style="isPaddingLocked ? { background: 'var(--accent-primary, #6366f1)', color: '#ffffff' } : { background: '#F5F6F7', color: 'var(--text-secondary, #64748b)' }"
-            style="width: 32px; height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-sizing: border-box; flex-shrink: 0; border: none;">
-            <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
-              <use :xlink:href="isPaddingLocked ? '#icon-suoding1' : '#icon-quxiaosuoding'"></use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Divider above Text Outline Accordion -->
-    <div class="control-divider" style="margin: 12px 0 4px; border-top: 1px solid var(--border-color, #E2E8F0);"></div>
-
-    <!-- Text Outline Accordion -->
-    <div class="control-group shape-accordion-group">
-      <div class="shape-accordion-header" @click="toggleTextBorderHeader">
-        <span class="control-label shape-accordion-header-label">
-          <span class="accordion-arrow"
-            :style="{ transform: (enableTextStroke && isTextBorderExpanded) ? 'rotate(90deg)' : 'rotate(0deg)' }">▶</span>文字轮廓</span>
-        <el-switch :model-value="enableTextStroke" size="small" @click.stop
-          @change="emit('update:enableTextStroke', $event); isTextBorderExpanded = $event" />
-      </div>
-
-      <div v-show="isTextBorderExpanded && enableTextStroke" class="shape-accordion-content">
-        <!-- Color Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">颜色</span>
-          <QuickColorPopover v-model:visible="textStrokePopoverVisible" :color="textStrokeColor || '#000000'"
-            :recent-colors="recentColors" @select-color="emit('update:textStrokeColor', $event)">
-            <template #reference>
-              <div class="color-picker-pill-wrapper">
-                <div style="display: flex; align-items: center; gap: 8px;">
-                  <div :style="{ background: textStrokeColor || '#000000' }"
-                    style="width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.15);">
-                  </div>
-                  <span
-                    style="font-size: 11px; color: var(--text-primary, #1e293b); font-family: monospace; font-weight: 500;">{{
-                      (textStrokeColor || '#000000').replace('#', '').toUpperCase() }}</span>
-                </div>
-              </div>
-            </template>
-          </QuickColorPopover>
-        </div>
-
-        <!-- Style & Width Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">样式</span>
-          <div class="shape-border-style-wrapper">
-            <!-- Style dropdown -->
-            <el-select :model-value="textStrokeStyle" @update:model-value="emit('update:textStrokeStyle', $event)"
-              size="small" class="custom-select" style="width: 96px; flex-shrink: 0;">
-              <el-option label="───" value="solid" />
-              <el-option label="---" value="dashed" />
-            </el-select>
-            <!-- Width selector -->
-            <div class="shape-border-width-wrapper" style="width: 96px; flex: none;">
-              <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"
-                style="margin-right: 6px; color: var(--text-secondary, #64748b); 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" :value="textStrokeWidth"
-                @input="emit('update:textStrokeWidth', Number(($event.target as HTMLInputElement).value))" :min="1"
-                :max="20" class="shape-num-field" />
-            </div>
-          </div>
-        </div>
-
-        <!-- Transparency Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">透明度</span>
-          <div class="shape-slider-wrapper">
-            <el-slider :model-value="textStrokeAlpha" @update:model-value="emit('update:textStrokeAlpha', $event)"
-              :min="0" :max="100" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
-              :show-input-controls="false" />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Shadow Accordion -->
-    <div class="control-group shape-accordion-group">
-      <div class="shape-accordion-header" @click="toggleTextShadowHeader">
-        <span class="control-label shape-accordion-header-label">
-          <span class="accordion-arrow"
-            :style="{ transform: (enableTextShadow && isTextShadowExpanded) ? 'rotate(90deg)' : 'rotate(0deg)' }">▶</span>阴影</span>
-        <el-switch :model-value="enableTextShadow" size="small" @click.stop
-          @change="emit('update:enableTextShadow', $event); isTextShadowExpanded = $event" />
-      </div>
-
-      <div v-show="isTextShadowExpanded && enableTextShadow" class="shape-accordion-content">
-        <!-- Color Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">阴影颜色</span>
-          <QuickColorPopover v-model:visible="textShadowPopoverVisible" :color="textShadowHex || '#000000'"
-            :recent-colors="recentColors" @select-color="emit('update:textShadowHex', $event)">
-            <template #reference>
-              <div class="color-picker-pill-wrapper">
-                <div style="display: flex; align-items: center; gap: 8px;">
-                  <div :style="{ background: textShadowHex || '#000000' }"
-                    style="width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.15);">
-                  </div>
-                  <span
-                    style="font-size: 11px; color: var(--text-primary, #1e293b); font-family: monospace; font-weight: 500;">{{
-                      (textShadowHex || '#000000').replace('#', '').toUpperCase() }}</span>
-                </div>
-              </div>
-            </template>
-          </QuickColorPopover>
-        </div>
-
-        <!-- Angle Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">角度</span>
-          <div style="display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end;">
-            <div class="shape-border-width-wrapper" style="position: relative;">
-              <input type="number" :value="textShadowAngle"
-                @input="emit('update:textShadowAngle', Number(($event.target as HTMLInputElement).value))"
-                class="shape-num-field" />
-              <span class="angle-icon"
-                :style="{ left: `calc(8px + ${String(textShadowAngle ?? 0).length * 8}px)` }">°</span>
-            </div>
-            <!-- Dial Picker -->
-            <div class="angle-dial" @mousedown="startDragAngle">
-              <div :style="{ transform: `rotate(${textShadowAngle || 0}deg)` }" class="dial-needle">
-                <div class="dial-needle-tip"></div>
-              </div>
-              <div class="dial-center-dot"></div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Size Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">大小</span>
-          <div class="shape-slider-wrapper">
-            <el-slider :model-value="textShadowSize" @update:model-value="emit('update:textShadowSize', $event)"
-              :min="0" :max="200" :step="1" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false"
-              show-input :show-input-controls="false" />
-          </div>
-        </div>
-
-        <!-- Blur Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">模糊</span>
-          <div class="shape-slider-wrapper">
-            <el-slider :model-value="textShadowBlur" @update:model-value="emit('update:textShadowBlur', $event)"
-              :min="0" :max="267" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
-              :show-input-controls="false" />
-          </div>
-        </div>
-
-        <!-- Distance Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">距离</span>
-          <div class="shape-slider-wrapper">
-            <el-slider :model-value="textShadowDistance" @update:model-value="emit('update:textShadowDistance', $event)"
-              :min="0" :max="267" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
-              :show-input-controls="false" />
-          </div>
-        </div>
-
-        <!-- Transparency Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">透明度</span>
-          <div class="shape-slider-wrapper">
-            <el-slider :model-value="textShadowAlpha" @update:model-value="emit('update:textShadowAlpha', $event)"
-              :min="0" :max="100" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
-              :show-input-controls="false" />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Reflection Accordion -->
-    <div class="control-group shape-accordion-group">
-      <div class="shape-accordion-header" @click="toggleTextReflectionHeader">
-        <span class="control-label shape-accordion-header-label">
-          <span class="accordion-arrow"
-            :style="{ transform: (enableTextReflection && isTextReflectionExpanded) ? 'rotate(90deg)' : 'rotate(0deg)' }">▶</span>倒影</span>
-        <el-switch :model-value="enableTextReflection" size="small" @click.stop
-          @change="emit('update:enableTextReflection', $event); isTextReflectionExpanded = $event" />
-      </div>
-
-      <div v-show="isTextReflectionExpanded && enableTextReflection" class="shape-accordion-content">
-        <!-- Distance Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">距离</span>
-          <div class="shape-slider-wrapper">
-            <el-slider :model-value="textReflectionDistance"
-              @update:model-value="emit('update:textReflectionDistance', $event)" :min="0" :max="100" :step="0.1"
-              size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
-              :show-input-controls="false" />
-          </div>
-        </div>
-
-        <!-- Size Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">大小</span>
-          <div class="shape-slider-wrapper">
-            <el-slider :model-value="textReflectionSize" @update:model-value="emit('update:textReflectionSize', $event)"
-              :min="0" :max="100" :step="0.1" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false"
-              show-input :show-input-controls="false" />
-          </div>
-        </div>
-
-        <!-- Opacity Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">透明度</span>
-          <div class="shape-slider-wrapper">
-            <el-slider :model-value="textReflectionOpacity"
-              @update:model-value="emit('update:textReflectionOpacity', $event)" :min="0" :max="100" :step="1"
-              size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
-              :show-input-controls="false" />
-          </div>
-        </div>
-
-        <!-- Blur Row -->
-        <div class="shape-property-row">
-          <span class="shape-property-label">模糊</span>
-          <div class="shape-slider-wrapper">
-            <el-slider :model-value="textReflectionBlur" @update:model-value="emit('update:textReflectionBlur', $event)"
-              :min="0" :max="100" :step="0.1" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false"
-              show-input :show-input-controls="false" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.shape-property-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0;
-  gap: 8px;
-}
-
-.shape-property-label {
-  font-size: 12px;
-  color: var(--text-secondary, #64748b);
-  width: 80px;
-  flex-shrink: 0;
-  text-align: left;
-}
-
-.font-action-btn-clean {
-  flex: 1;
-  height: 100%;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  color: var(--text-secondary, #64748b);
-  transition: all 0.15s ease;
-  padding: 0;
-  user-select: none;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.7);
-  }
-}
-
-.font-action-btn-rows {
-  padding: 4px 6px;
-  display: flex;
-  align-items: center;
-  background: #F5F6F7;
-  border-radius: 4px;
-  height: 32px;
-  box-sizing: border-box;
-  flex: 1;
-  justify-content: space-between;
-  gap: 4px;
-}
-
-.font-styles {
-  background: #F5F6F7 !important;
-  padding: 4px 6px !important;
-  border-radius: 4px !important;
-  height: 32px !important;
-  box-sizing: border-box !important;
-  flex: 1 !important;
-  gap: 4px !important;
-
-  .font-action-btn-clean {
-    flex: 1 !important;
-    height: 100% !important;
-    width: auto !important;
-    border-radius: 4px !important;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.6) !important;
-    }
-  }
-}
-
-.custom-num-input {
-  display: flex;
-  align-items: center;
-  background: #F5F6F7;
-  border: 1px solid #F5F6F7;
-  border-radius: 4px;
-  padding: 0 8px;
-  height: 32px;
-  box-sizing: border-box;
-  transition: border-color 0.15s ease;
-}
-
-.custom-num-input:focus-within {
-  border-color: var(--accent-primary, #6366f1);
-}
-
-.custom-num-field {
-  width: 100%;
-  border: none;
-  background: transparent;
-  outline: none;
-  font-size: 12px;
-  color: var(--text-primary, #1e293b);
-  padding: 0 4px;
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}
-
-.color-picker-cell-wrapper {
-  flex: 1;
-  display: flex;
-  width: 100%;
-
-  :deep(.quick-color-popover-trigger),
-  :deep(.color-span-box),
-  :deep(.el-popover__reference-wrapper) {
-    display: flex !important;
-    flex: 1 !important;
-    width: 100% !important;
-  }
-}
-
-.color-picker-pill-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #F5F6F7;
-  border-radius: 4px;
-  padding: 0 10px;
-  height: 32px;
-  width: 100%;
-  flex: 1;
-  cursor: pointer;
-  border: none;
-  box-sizing: border-box;
-}
-
-.shape-accordion-group {
-  margin-top: 2px;
-}
-
-
-.list-split-btn-group {
-  transition: border-color 0.2s, background-color 0.2s;
-
-  &:hover {
-    border-color: #cbd5e1;
-  }
-}
-
-.list-split-left-action {
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.04);
-  }
-
-  &:active {
-    background-color: rgba(0, 0, 0, 0.08);
-  }
-}
-
-.list-split-right-arrow {
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.04);
-  }
-
-  &:active {
-    background-color: rgba(0, 0, 0, 0.08);
-  }
-}
-
-.shape-accordion-header {
-  height: 34px;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.shape-accordion-header-label {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text-primary, #0f172a);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 80px;
-  flex-shrink: 0;
-  text-align: left;
-}
-
-.accordion-arrow {
-  font-size: 9px;
-  transition: transform 0.2s;
-  display: inline-block;
-  color: #0f172a;
-  transform-origin: center;
-}
-
-.shape-accordion-content {
-  padding: 8px 16px 4px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.shape-border-style-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  flex: 1;
-}
-
-.shape-border-width-wrapper {
-  display: flex;
-  align-items: center;
-  background: #F5F6F7;
-  border: none;
-  border-radius: 4px;
-  padding: 0 8px;
-  height: 32px;
-  box-sizing: border-box;
-  position: relative;
-}
-
-.shape-num-field {
-  border: none;
-  background: transparent;
-  outline: none;
-  font-size: 12px;
-  color: var(--text-primary, #1e293b);
-  width: 100%;
-  text-align: left;
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}
-
-.angle-icon {
-  position: absolute;
-  top: 50%;
-  transform: translateY(calc(-50% - 2px));
-  pointer-events: none;
-  font-size: 12px;
-  color: var(--text-secondary, #64748b);
-  margin-left: 2px;
-}
-
-.angle-dial {
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--border-color, #E2E8F0);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  position: relative;
-  background: #ffffff;
-  flex-shrink: 0;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  user-select: none;
-}
-
-.dial-needle {
-  width: 100%;
-  height: 2px;
-  position: absolute;
-  transform-origin: center;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.dial-needle-tip {
-  width: 16px;
-  height: 2px;
-  background: #6F7588;
-}
-
-.dial-center-dot {
-  position: absolute;
-  width: 4px;
-  height: 4px;
-  background-color: #6F7588;
-  border-radius: 50%;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
-.shape-slider-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1;
-}
-
-.custom-slider {
-  --el-slider-height: 4px !important;
-  --el-slider-button-size: 16px !important;
-  --el-slider-button-wrapper-offset: -16px !important;
-
-  :deep(.show-input) {
-    margin-right: 16px;
-  }
-
-  :deep(.el-input-number) {
-    width: 48px;
-    height: 30px;
-
-    .el-input__wrapper {
-      padding: 4px;
-      background: #F5F6F7;
-      border: none;
-      border-radius: 4px;
-      box-shadow: none;
-    }
-
-    .el-input__inner {
-      text-align: center;
-      font-size: 12px;
-      color: var(--text-primary, #1e293b);
-    }
-  }
-}
-
-:deep(.custom-select) {
-  .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;
-
-    &.is-focused {
-      box-shadow: 0 0 0 1px var(--accent-primary, #6366f1) inset !important;
-    }
-  }
-
-  .el-select__selected-item {
-    font-size: 12px !important;
-    color: var(--text-primary, #1e293b) !important;
-  }
-}
-
-
-:deep(.el-switch__core) {
-  border-radius: 4px !important;
-}
-
-:deep(.el-switch__action) {
-  border-radius: 3px !important;
-}
-
-:deep(.color-span-box) {
-  width: 100%;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { getFontVariants } from '../../../configs/fonts'
+import QuickColorPopover from '../../QuickColorPopover.vue'
+import { type SlideTextType, TEXT_TYPE_LIST } from '../../../utils/textTypes'
+
+import ulDisc from '../../../assets/list/ul-disc.png'
+import ulDiamond from '../../../assets/list/ul-diamond.png'
+import ulTriangle from '../../../assets/list/ul-triangle.png'
+import ulCheckmark from '../../../assets/list/ul-checkmark.png'
+import ulSquare from '../../../assets/list/ul-square.png'
+import ulCircle from '../../../assets/list/ul-circle.png'
+import olDicimal from '../../../assets/list/ol-dicimal.png'
+import olCircledNumbers from '../../../assets/list/ol-circled-numbers.png'
+import olLowerAlpha from '../../../assets/list/ol-lower-alpha.png'
+import olUpperAlpha from '../../../assets/list/ol-upper-alpha.png'
+import olUpperRoman from '../../../assets/list/ol-upper-roman.png'
+import olChinese from '../../../assets/list/ol-chinese.png'
+
+const props = withDefaults(defineProps<{
+  selectedElement: any
+  selectedElementIds?: string[]
+  currentTextType?: SlideTextType
+  sysFonts?: Array<{ label: string; value: string }>
+  themeRecipe?: any
+  fontStyleSupport?: { bold: boolean; italic: boolean; boldItalic: boolean }
+  styleFontFamily?: string
+  styleFontSize?: string
+  styleFontWeightStyle?: string
+  lineHeightNumber?: number
+  letterSpacingNumber?: number
+  styleTextColor?: string
+  styleTextBackground?: string
+  styleTextAlign?: string
+  styleVerticalAlign?: string
+  styleWritingMode?: string
+  styleAutoFitType?: string
+  styleWordWrap?: boolean
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  isPaddingLocked?: boolean
+  hasUnorderedList?: boolean
+  hasOrderedList?: boolean
+  isActiveListStyle?: (type: any, val: string) => boolean
+  enableTextStroke?: boolean
+  textStrokeColor?: string
+  textStrokeWidth?: number
+  textStrokeStyle?: string
+  textStrokeAlpha?: number
+  enableTextShadow?: boolean
+  textShadowHex?: string
+  textShadowAlpha?: number
+  textShadowAngle?: number
+  textShadowSize?: number
+  textShadowDistance?: number
+  textShadowBlur?: number
+  enableTextReflection?: boolean
+  textReflectionDistance?: number
+  textReflectionSize?: number
+  textReflectionOpacity?: number
+  textReflectionBlur?: number
+  recentColors?: string[]
+  getStyleVal?: (prop: string, fallback?: any) => any
+}>(), {
+  selectedElementIds: () => [],
+  currentTextType: 'normalText',
+  sysFonts: () => [],
+  fontStyleSupport: () => ({ bold: true, italic: true, boldItalic: true }),
+  styleFontFamily: '默认字体',
+  styleFontSize: '16px',
+  styleFontWeightStyle: 'Regular',
+  lineHeightNumber: 1.3,
+  letterSpacingNumber: 0,
+  styleTextColor: '#000000',
+  styleTextBackground: 'transparent',
+  styleTextAlign: 'center',
+  styleVerticalAlign: 'middle',
+  styleWritingMode: 'horizontal-tb',
+  styleAutoFitType: 'shape',
+  styleWordWrap: true,
+  paddingTop: 4.8,
+  paddingRight: 9.6,
+  paddingBottom: 4.8,
+  paddingLeft: 9.6,
+  isPaddingLocked: false,
+  hasUnorderedList: false,
+  hasOrderedList: false,
+  enableTextStroke: false,
+  textStrokeColor: '#000000',
+  textStrokeWidth: 1,
+  textStrokeStyle: 'solid',
+  textStrokeAlpha: 100,
+  enableTextShadow: false,
+  textShadowHex: '#000000',
+  textShadowAlpha: 50,
+  textShadowAngle: 45,
+  textShadowSize: 100,
+  textShadowDistance: 3,
+  textShadowBlur: 4,
+  enableTextReflection: false,
+  textReflectionDistance: 0,
+  textReflectionSize: 100,
+  textReflectionOpacity: 10,
+  textReflectionBlur: 0,
+  recentColors: () => [],
+  getStyleVal: () => undefined
+})
+
+const emit = defineEmits<{
+  (e: 'changeTextType', val: SlideTextType): void
+  (e: 'changeFontFamily', val: string): void
+  (e: 'changeFontSize', val: string): void
+  (e: 'update:styleFontWeightStyle', val: string): void
+  (e: 'update:lineHeightNumber', val: number): void
+  (e: 'update:letterSpacingNumber', val: number): void
+  (e: 'update:styleTextColor', val: string): void
+  (e: 'update:styleTextBackground', val: string): void
+  (e: 'update:styleTextAlign', val: string): void
+  (e: 'update:styleVerticalAlign', val: string): void
+  (e: 'update:styleWritingMode', val: string): void
+  (e: 'update:styleAutoFitType', val: string): void
+  (e: 'update:styleWordWrap', val: boolean): void
+  (e: 'update:paddingTop', val: number): void
+  (e: 'update:paddingRight', val: number): void
+  (e: 'update:paddingBottom', val: number): void
+  (e: 'update:paddingLeft', val: number): void
+  (e: 'update:isPaddingLocked', val: boolean): void
+  (e: 'toggleListStyle', type: string, val: string, isFromPanel?: boolean): void
+  (e: 'update:enableTextStroke', val: boolean): void
+  (e: 'update:textStrokeColor', val: string): void
+  (e: 'update:textStrokeWidth', val: number): void
+  (e: 'update:textStrokeStyle', val: string): void
+  (e: 'update:textStrokeAlpha', val: number): void
+  (e: 'update:enableTextShadow', val: boolean): void
+  (e: 'update:textShadowHex', val: string): void
+  (e: 'update:textShadowAlpha', val: number): void
+  (e: 'update:textShadowAngle', val: number): void
+  (e: 'update:textShadowSize', val: number): void
+  (e: 'update:textShadowBlur', val: number): void
+  (e: 'update:textShadowDistance', val: number): void
+  (e: 'update:enableTextReflection', val: boolean): void
+  (e: 'update:textReflectionDistance', val: number): void
+  (e: 'update:textReflectionSize', val: number): void
+  (e: 'update:textReflectionOpacity', val: number): void
+  (e: 'update:textReflectionBlur', val: number): void
+  (e: 'toggleBold'): void
+  (e: 'toggleItalic'): void
+  (e: 'toggleUnderline'): void
+  (e: 'toggleStrikethrough'): void
+}>()
+
+const isListExpanded = ref(true)
+const isPaddingExpanded = ref(true)
+const isTextBorderExpanded = ref(true)
+const isTextShadowExpanded = ref(true)
+const isTextReflectionExpanded = ref(true)
+
+const isUlVisible = ref(false)
+const isOlVisible = ref(false)
+const textColorPopoverVisible = ref(false)
+const textBgPopoverVisible = ref(false)
+const textStrokePopoverVisible = ref(false)
+const textShadowPopoverVisible = ref(false)
+const isAutoFitPopoverVisible = ref(false)
+const autoFitTriggerRef = ref<HTMLElement | null>(null)
+const autoFitTriggerWidth = ref(248)
+
+const autoFitOptions = [
+  { label: '文字溢出不自动调整', value: 'none' },
+  { label: '文字溢出缩小文字', value: 'text' },
+  { label: '文字溢出调整形状大小', value: 'shape' }
+]
+
+const currentAutoFitLabel = computed(() => {
+  const match = autoFitOptions.find(opt => opt.value === props.styleAutoFitType)
+  return match ? match.label : '文字溢出不自动调整'
+})
+
+function onAutoFitPopoverShow() {
+  if (autoFitTriggerRef.value) {
+    autoFitTriggerWidth.value = autoFitTriggerRef.value.offsetWidth
+  }
+}
+
+function selectAutoFitType(val: string) {
+  emit('update:styleAutoFitType', val)
+  isAutoFitPopoverVisible.value = false
+}
+
+const isWritingModePopoverVisible = ref(false)
+const writingModeTriggerRef = ref<HTMLElement | null>(null)
+const writingModeTriggerWidth = ref(248)
+
+const writingModeOptions = [
+  { label: '横向', value: 'horizontal-tb' },
+  { label: '竖向（从左到右）', value: 'vertical-lr' },
+  { label: '竖向（从右到左）', value: 'vertical-rl' }
+]
+
+const currentWritingModeLabel = computed(() => {
+  const match = writingModeOptions.find(opt => opt.value === props.styleWritingMode)
+  return match ? match.label : '横向'
+})
+
+function onWritingModePopoverShow() {
+  if (writingModeTriggerRef.value) {
+    writingModeTriggerWidth.value = writingModeTriggerRef.value.offsetWidth
+  }
+}
+
+function selectWritingMode(val: string) {
+  emit('update:styleWritingMode', val)
+  isWritingModePopoverVisible.value = false
+}
+
+// Text Classification (类型) Popover
+const isTextTypePopoverVisible = ref(false)
+const textTypeTriggerRef = ref<HTMLElement | null>(null)
+const textTypeTriggerWidth = ref(248)
+
+const currentTextTypeLabel = computed(() => {
+  const match = TEXT_TYPE_LIST.find(item => item.type === props.currentTextType)
+  return match ? `${match.label}（${match.enLabel}）` : '正文文本（Normal Text）'
+})
+
+function onTextTypePopoverShow() {
+  if (textTypeTriggerRef.value) {
+    textTypeTriggerWidth.value = textTypeTriggerRef.value.offsetWidth
+  }
+}
+
+function selectTextType(val: SlideTextType) {
+  emit('changeTextType', val)
+  isTextTypePopoverVisible.value = false
+}
+
+// Font Weight / Style (样式) Popover
+const isFontWeightPopoverVisible = ref(false)
+const fontWeightTriggerRef = ref<HTMLElement | null>(null)
+const fontWeightTriggerWidth = ref(120)
+
+const currentFontWeightLabel = computed(() => {
+  const match = currentFontVariants.value.find(v => v.value === props.styleFontWeightStyle)
+  return match ? match.label : (props.styleFontWeightStyle || 'Regular')
+})
+
+function onFontWeightPopoverShow() {
+  if (fontWeightTriggerRef.value) {
+    fontWeightTriggerWidth.value = fontWeightTriggerRef.value.offsetWidth
+  }
+}
+
+function selectFontWeight(val: string) {
+  emit('update:styleFontWeightStyle', val)
+  isFontWeightPopoverVisible.value = false
+}
+
+const fontSizeClean = computed(() => {
+  return String(props.styleFontSize || '16').replace('px', '')
+})
+
+// Font Size (字号) Popover
+const isFontSizePopoverVisible = ref(false)
+const fontSizeTriggerRef = ref<HTMLElement | null>(null)
+const fontSizeTriggerWidth = ref(120)
+
+function onFontSizePopoverShow() {
+  if (fontSizeTriggerRef.value) {
+    fontSizeTriggerWidth.value = fontSizeTriggerRef.value.offsetWidth
+  }
+}
+
+function selectFontSize(val: string) {
+  emit('changeFontSize', val)
+  isFontSizePopoverVisible.value = false
+}
+
+function onFontSizeInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  const raw = target.value.trim()
+  if (raw) {
+    emit('changeFontSize', raw)
+  }
+}
+
+function onFontSizeEnter(e: KeyboardEvent) {
+  const target = e.target as HTMLInputElement
+  const raw = target.value.trim()
+  if (raw) {
+    emit('changeFontSize', raw)
+  }
+  isFontSizePopoverVisible.value = false
+  target.blur()
+}
+
+function onFontSizeBlur(e: FocusEvent) {
+  const target = e.target as HTMLInputElement
+  const raw = target.value.trim()
+  if (raw) {
+    emit('changeFontSize', raw)
+  }
+}
+
+function checkStyleVal(prop: string, fallback?: any): any {
+  if (props.getStyleVal) {
+    const val = props.getStyleVal(prop, fallback)
+    if (val !== undefined) return val
+  }
+  return fallback
+}
+
+const isBoldActive = computed(() => {
+  return checkStyleVal('fontWeight') === 'bold'
+})
+
+const isItalicActive = computed(() => {
+  return checkStyleVal('fontStyle') === 'italic'
+})
+
+const isUnderlineActive = computed(() => {
+  return (checkStyleVal('textDecoration') || '').includes('underline')
+})
+
+const isStrikethroughActive = computed(() => {
+  return (checkStyleVal('textDecoration') || '').includes('line-through')
+})
+
+const currentTextAlign = computed(() => {
+  return props.styleTextAlign || checkStyleVal('textAlign', 'center') || 'center'
+})
+
+const currentFontVariants = computed(() => {
+  return getFontVariants(props.styleFontFamily)
+})
+
+const displaySysFonts = computed(() => {
+  return props.sysFonts || []
+})
+
+function toggleTextBorderHeader() {
+  if (!props.enableTextStroke) return
+  isTextBorderExpanded.value = !isTextBorderExpanded.value
+}
+
+function toggleTextShadowHeader() {
+  if (!props.enableTextShadow) return
+  isTextShadowExpanded.value = !isTextShadowExpanded.value
+}
+
+function toggleTextReflectionHeader() {
+  if (!props.enableTextReflection) return
+  isTextReflectionExpanded.value = !isTextReflectionExpanded.value
+}
+
+function startDragAngle(e: MouseEvent) {
+  const dial = e.currentTarget as HTMLElement
+  const rect = dial.getBoundingClientRect()
+  const centerX = rect.left + rect.width / 2
+  const centerY = rect.top + rect.height / 2
+
+  function updateAngle(moveEvent: MouseEvent) {
+    const dx = moveEvent.clientX - centerX
+    const dy = moveEvent.clientY - centerY
+    let angle = Math.round(Math.atan2(dy, dx) * 180 / Math.PI)
+    if (angle < 0) angle += 360
+    emit('update:textShadowAngle', angle)
+  }
+
+  updateAngle(e)
+
+  function stopDrag() {
+    window.removeEventListener('mousemove', updateAngle)
+    window.removeEventListener('mouseup', stopDrag)
+  }
+
+  window.addEventListener('mousemove', updateAngle)
+  window.addEventListener('mouseup', stopDrag)
+}
+</script>
+
+<template>
+  <div class="sidebar-text-format-panel">
+    <!-- 1. 类型 (Text Classification Selector) -->
+    <div class="form-item-block">
+      <div class="form-item-label">类型</div>
+      <el-popover v-model:visible="isTextTypePopoverVisible" placement="bottom-start" :width="textTypeTriggerWidth"
+        trigger="click" popper-class="autofit-popover-panel" :show-arrow="false" :offset="4"
+        @before-enter="onTextTypePopoverShow">
+        <template #reference>
+          <div ref="textTypeTriggerRef" class="custom-select-trigger"
+            :class="{ 'is-active': isTextTypePopoverVisible }">
+            <span class="select-trigger-text">{{ currentTextTypeLabel }}</span>
+            <svg viewBox="0 0 1024 1024" width="10" height="10" fill="currentColor" class="select-trigger-arrow"
+              :class="{ 'is-open': isTextTypePopoverVisible }">
+              <path
+                d="M831.872 340.777L512 652.672 192.128 340.777a31.968 31.968 0 0 0-45.12 45.312l342.4 333.568a32 32 0 0 0 45.184 0l342.4-333.568a31.968 31.968 0 0 0-45.12-45.312z">
+              </path>
+            </svg>
+          </div>
+        </template>
+
+        <div class="autofit-menu-container">
+          <div v-for="item in TEXT_TYPE_LIST" :key="item.type" class="autofit-menu-item text-type-menu-item"
+            :class="{ 'is-selected': (currentTextType === item.type) || (!currentTextType && item.type === 'normalText') }"
+            @click="selectTextType(item.type)">
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <span
+                :style="{ color: item.badgeColor, backgroundColor: item.badgeBg, fontSize: '10px', padding: '1px 6px', borderRadius: '4px', fontWeight: 600, minWidth: '36px', textAlign: 'center' }">{{
+                  item.tag }}</span>
+              <span class="autofit-item-label">{{ item.label }}（{{ item.enLabel }}）</span>
+            </div>
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <span style="font-size: 11px; color: #94a3b8;">{{ item.defaultFontSize }}px</span>
+              <svg v-if="(currentTextType === item.type) || (!currentTextType && item.type === 'normalText')"
+                viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5"
+                stroke-linecap="round" stroke-linejoin="round" class="autofit-check-icon">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </el-popover>
+    </div>
+
+    <!-- 2. 文字 (Font, Weight, Size, LineHeight, LetterSpacing, Lists, Alignments, Styles) -->
+    <div class="form-item-block">
+      <div class="form-item-label">文字</div>
+
+      <!-- Row 1: Font Family Selector (Full Width) -->
+      <el-select :model-value="styleFontFamily" @change="emit('changeFontFamily', $event)" size="small"
+        class="custom-select full-width-control" placement="bottom-start"
+        :fallback-placements="['bottom-start', 'bottom', 'top-start']" popper-class="sidebar-select-popper"
+        :show-arrow="false" :offset="4">
+        <el-option label="默认字体" value="默认字体" />
+        <el-option v-for="font in displaySysFonts" :key="font.value" :label="font.label" :value="font.value">
+          <span :style="{ fontFamily: font.value }">{{ font.label }}</span>
+        </el-option>
+      </el-select>
+
+      <!-- Row 2: Weight & Size (1:1 equal columns) -->
+      <div class="control-row-duo">
+        <div style="flex: 1; min-width: 0;">
+          <el-popover v-model:visible="isFontWeightPopoverVisible" placement="bottom-start"
+            :width="fontWeightTriggerWidth" trigger="click" popper-class="autofit-popover-panel" :show-arrow="false"
+            :offset="4" @before-enter="onFontWeightPopoverShow">
+            <template #reference>
+              <div ref="fontWeightTriggerRef" class="custom-select-trigger"
+                :class="{ 'is-active': isFontWeightPopoverVisible }">
+                <span class="select-trigger-text">{{ currentFontWeightLabel }}</span>
+                <svg viewBox="0 0 1024 1024" width="10" height="10" fill="currentColor" class="select-trigger-arrow"
+                  :class="{ 'is-open': isFontWeightPopoverVisible }">
+                  <path
+                    d="M831.872 340.777L512 652.672 192.128 340.777a31.968 31.968 0 0 0-45.12 45.312l342.4 333.568a32 32 0 0 0 45.184 0l342.4-333.568a31.968 31.968 0 0 0-45.12-45.312z">
+                  </path>
+                </svg>
+              </div>
+            </template>
+
+            <div class="autofit-menu-container">
+              <div v-for="variant in currentFontVariants" :key="variant.value" class="autofit-menu-item"
+                :class="{ 'is-selected': styleFontWeightStyle === variant.value || (!styleFontWeightStyle && variant.value === 'normal') }"
+                @click="selectFontWeight(variant.value)">
+                <span class="autofit-item-label">{{ variant.label }}</span>
+                <svg
+                  v-if="styleFontWeightStyle === variant.value || (!styleFontWeightStyle && variant.value === 'normal')"
+                  viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5"
+                  stroke-linecap="round" stroke-linejoin="round" class="autofit-check-icon">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              </div>
+            </div>
+          </el-popover>
+        </div>
+
+        <div style="flex: 1; min-width: 0;">
+          <el-popover v-model:visible="isFontSizePopoverVisible" placement="bottom-end" :width="fontSizeTriggerWidth"
+            trigger="click" popper-class="autofit-popover-panel font-size-popover" :show-arrow="false" :offset="4"
+            @before-enter="onFontSizePopoverShow">
+            <template #reference>
+              <div ref="fontSizeTriggerRef" class="custom-select-trigger font-size-trigger"
+                :class="{ 'is-active': isFontSizePopoverVisible }">
+                <input type="text" :value="fontSizeClean" class="custom-select-input" placeholder="字号"
+                  @input="onFontSizeInput" @keydown.enter="onFontSizeEnter" @blur="onFontSizeBlur" />
+                <svg viewBox="0 0 1024 1024" width="10" height="10" fill="currentColor" class="select-trigger-arrow"
+                  :class="{ 'is-open': isFontSizePopoverVisible }">
+                  <path
+                    d="M831.872 340.777L512 652.672 192.128 340.777a31.968 31.968 0 0 0-45.12 45.312l342.4 333.568a32 32 0 0 0 45.184 0l342.4-333.568a31.968 31.968 0 0 0-45.12-45.312z">
+                  </path>
+                </svg>
+              </div>
+            </template>
+
+            <el-scrollbar max-height="220px">
+              <div class="autofit-menu-container font-size-menu-container">
+                <div v-for="size in ['12', '14', '16', '18', '20', '24', '28', '32', '36', '44', '52', '60', '72']"
+                  :key="size" class="autofit-menu-item font-size-item"
+                  :class="{ 'is-selected': fontSizeClean === size }" @click="selectFontSize(size)">
+                  <span class="autofit-item-label">{{ size }}</span>
+                  <svg v-if="fontSizeClean === size" viewBox="0 0 24 24" width="14" height="14" fill="none"
+                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+                    class="autofit-check-icon">
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                </div>
+              </div>
+            </el-scrollbar>
+          </el-popover>
+        </div>
+      </div>
+
+      <!-- Row 3: Line Height & Letter Spacing (1:1 equal columns) -->
+      <div class="control-row-duo">
+        <div class="custom-num-pill" style="flex: 1;">
+          <svg class="icon input-icon">
+            <use xlink:href="#icon-hanggao"></use>
+          </svg>
+          <input type="number" :value="lineHeightNumber"
+            @input="emit('update:lineHeightNumber', Number(($event.target as HTMLInputElement).value))"
+            class="custom-num-field" step="0.1" min="0.5" max="50" />
+        </div>
+        <div class="custom-num-pill" style="flex: 1;">
+          <svg class="icon input-icon">
+            <use xlink:href="#icon-zijianju"></use>
+          </svg>
+          <input type="number" :value="letterSpacingNumber"
+            @input="emit('update:letterSpacingNumber', Number(($event.target as HTMLInputElement).value))"
+            class="custom-num-field" min="-10" max="50" />
+        </div>
+      </div>
+
+      <!-- Row 4: Lists & Vertical Alignment (merged in one row) -->
+      <div class="control-row-trio">
+        <!-- Unordered List Dropdown Button -->
+        <div class="list-dropdown-btn" :class="{ 'is-active': hasUnorderedList }">
+          <div class="list-btn-main" @click="emit('toggleListStyle', 'ul', 'disc')" @mousedown.prevent title="无序列表">
+            <svg class="icon" style="width: 14px; height: 14px; fill: currentColor;">
+              <use xlink:href="#icon-wuxuliebiao"></use>
+            </svg>
+          </div>
+          <el-popover placement="bottom" :width="250" trigger="click" popper-class="list-popover-panel"
+            :show-arrow="false" @before-enter="isUlVisible = true" @before-leave="isUlVisible = false">
+            <template #reference>
+              <div class="list-btn-arrow" :class="{ 'is-open': isUlVisible }">
+                <svg viewBox="0 0 1024 1024" width="7" height="7" fill="currentColor">
+                  <path
+                    d="M831.872 340.777L512 652.672 192.128 340.777a31.968 31.968 0 0 0-45.12 45.312l342.4 333.568a32 32 0 0 0 45.184 0l342.4-333.568a31.968 31.968 0 0 0-45.12-45.312z">
+                  </path>
+                </svg>
+              </div>
+            </template>
+            <div class="list-presets-grid">
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ul', 'disc') : false }"
+                @click="emit('toggleListStyle', 'ul', 'disc', true)" @mousedown.prevent>
+                <img :src="ulDisc" />
+              </div>
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ul', '\'◆ \'') : false }"
+                @click="emit('toggleListStyle', 'ul', '\'◆ \'', true)" @mousedown.prevent>
+                <img :src="ulDiamond" />
+              </div>
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ul', '\'▸ \'') : false }"
+                @click="emit('toggleListStyle', 'ul', '\'▸ \'', true)" @mousedown.prevent>
+                <img :src="ulTriangle" />
+              </div>
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ul', '\'✔ \'') : false }"
+                @click="emit('toggleListStyle', 'ul', '\'✔ \'', true)" @mousedown.prevent>
+                <img :src="ulCheckmark" />
+              </div>
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ul', 'square') : false }"
+                @click="emit('toggleListStyle', 'ul', 'square', true)" @mousedown.prevent>
+                <img :src="ulSquare" />
+              </div>
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ul', 'circle') : false }"
+                @click="emit('toggleListStyle', 'ul', 'circle', true)" @mousedown.prevent>
+                <img :src="ulCircle" />
+              </div>
+            </div>
+          </el-popover>
+        </div>
+
+        <!-- Ordered List Dropdown Button -->
+        <div class="list-dropdown-btn" :class="{ 'is-active': hasOrderedList }">
+          <div class="list-btn-main" @click="emit('toggleListStyle', 'ol', 'decimal')" @mousedown.prevent title="有序列表">
+            <svg class="icon" style="width: 14px; height: 14px; fill: currentColor;">
+              <use xlink:href="#icon-youxuliebiao"></use>
+            </svg>
+          </div>
+          <el-popover placement="bottom" :width="250" trigger="click" popper-class="list-popover-panel"
+            :show-arrow="false" @before-enter="isOlVisible = true" @before-leave="isOlVisible = false">
+            <template #reference>
+              <div class="list-btn-arrow" :class="{ 'is-open': isOlVisible }">
+                <svg viewBox="0 0 1024 1024" width="7" height="7" fill="currentColor">
+                  <path
+                    d="M831.872 340.777L512 652.672 192.128 340.777a31.968 31.968 0 0 0-45.12 45.312l342.4 333.568a32 32 0 0 0 45.184 0l342.4-333.568a31.968 31.968 0 0 0-45.12-45.312z">
+                  </path>
+                </svg>
+              </div>
+            </template>
+            <div class="list-presets-grid">
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'decimal') : false }"
+                @click="emit('toggleListStyle', 'ol', 'decimal', true)" @mousedown.prevent>
+                <img :src="olDicimal" />
+              </div>
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'circled-numbers') : false }"
+                @click="emit('toggleListStyle', 'ol', 'circled-numbers', true)" @mousedown.prevent>
+                <img :src="olCircledNumbers" />
+              </div>
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'lower-alpha') : false }"
+                @click="emit('toggleListStyle', 'ol', 'lower-alpha', true)" @mousedown.prevent>
+                <img :src="olLowerAlpha" />
+              </div>
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'upper-alpha') : false }"
+                @click="emit('toggleListStyle', 'ol', 'upper-alpha', true)" @mousedown.prevent>
+                <img :src="olUpperAlpha" />
+              </div>
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'upper-roman') : false }"
+                @click="emit('toggleListStyle', 'ol', 'upper-roman', true)" @mousedown.prevent>
+                <img :src="olUpperRoman" />
+              </div>
+              <div class="list-style-card"
+                :class="{ active: isActiveListStyle ? isActiveListStyle('ol', 'simp-chinese-informal') : false }"
+                @click="emit('toggleListStyle', 'ol', 'simp-chinese-informal', true)" @mousedown.prevent>
+                <img :src="olChinese" />
+              </div>
+            </div>
+          </el-popover>
+        </div>
+
+        <!-- Vertical Alignment 3-Button Group -->
+        <div class="button-group-pill vertical-align-group">
+          <div class="pill-action-btn" :class="{ 'is-active': styleVerticalAlign === 'top' }" title="顶对齐"
+            @click="emit('update:styleVerticalAlign', 'top')">
+            <svg class="icon" style="width: 15px; height: 15px; fill: currentColor;">
+              <use :xlink:href="styleVerticalAlign === 'top' ? '#icon-dingduiqi-xuanzhong' : '#icon-dingduiqi1'"></use>
+            </svg>
+          </div>
+          <div class="pill-action-btn"
+            :class="{ 'is-active': (styleVerticalAlign === 'middle' || !styleVerticalAlign) }" title="居中对齐"
+            @click="emit('update:styleVerticalAlign', 'middle')">
+            <svg class="icon" style="width: 15px; height: 15px; fill: currentColor;">
+              <use
+                :xlink:href="(styleVerticalAlign === 'middle' || !styleVerticalAlign) ? '#icon-chuizhiduiqi-xuanzhong' : '#icon-chuizhiduiqi'">
+              </use>
+            </svg>
+          </div>
+          <div class="pill-action-btn" :class="{ 'is-active': styleVerticalAlign === 'bottom' }" title="底对齐"
+            @click="emit('update:styleVerticalAlign', 'bottom')">
+            <svg class="icon" style="width: 15px; height: 15px; fill: currentColor;">
+              <use :xlink:href="styleVerticalAlign === 'bottom' ? '#icon-diduiqi1-copy' : '#icon-diduiqi1'"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <!-- Row 5: Text Styles: Bold, Italic, Underline, Strikethrough -->
+      <div class="button-group-pill full-width-control">
+        <div class="pill-action-btn font-style-letter" :class="{ 'is-active': isBoldActive }" title="加粗"
+          @click="emit('toggleBold')">
+          <span style="font-weight: 700; font-size: 14px;">B</span>
+        </div>
+        <div class="pill-action-btn font-style-letter" :class="{ 'is-active': isItalicActive }" title="斜体"
+          @click="emit('toggleItalic')">
+          <span
+            style="font-style: italic; font-weight: 600; font-size: 14px; font-family: serif, 'Times New Roman';">I</span>
+        </div>
+        <div class="pill-action-btn font-style-letter" :class="{ 'is-active': isUnderlineActive }" title="下划线"
+          @click="emit('toggleUnderline')">
+          <span style="text-decoration: underline; font-weight: 600; font-size: 14px;">U</span>
+        </div>
+        <div class="pill-action-btn" :class="{ 'is-active': isStrikethroughActive }" title="删除线"
+          @click="emit('toggleStrikethrough')">
+          <svg class="icon" style="width: 15px; height: 15px; fill: currentColor;">
+            <use :xlink:href="isStrikethroughActive ? '#icon-shanchuxian-xuanzhong' : '#icon-shanchuxian'"></use>
+          </svg>
+        </div>
+      </div>
+
+      <!-- Row 6: Horizontal Alignment (5 buttons) -->
+      <div class="button-group-pill full-width-control">
+        <div class="pill-action-btn" :class="{ 'is-active': currentTextAlign === 'left' }" title="左对齐"
+          @click="emit('update:styleTextAlign', 'left')">
+          <svg class="icon" style="width: 15px; height: 15px; fill: currentColor;">
+            <use :xlink:href="currentTextAlign === 'left' ? '#icon-zuoduiqi-xuanzhong' : '#icon-zuoduiqi1'"></use>
+          </svg>
+        </div>
+        <div class="pill-action-btn" :class="{ 'is-active': (currentTextAlign === 'center' || !currentTextAlign) }"
+          title="居中对齐" @click="emit('update:styleTextAlign', 'center')">
+          <svg class="icon" style="width: 15px; height: 15px; fill: currentColor;">
+            <use
+              :xlink:href="(currentTextAlign === 'center' || !currentTextAlign) ? '#icon-juzhongduiqi-xuanzhong' : '#icon-juzhongduiqi'">
+            </use>
+          </svg>
+        </div>
+        <div class="pill-action-btn" :class="{ 'is-active': currentTextAlign === 'right' }" title="右对齐"
+          @click="emit('update:styleTextAlign', 'right')">
+          <svg class="icon" style="width: 15px; height: 15px; fill: currentColor;">
+            <use :xlink:href="currentTextAlign === 'right' ? '#icon-youduiqi3-copy-copy' : '#icon-youduiqi3-copy'">
+            </use>
+          </svg>
+        </div>
+        <div class="pill-action-btn" :class="{ 'is-active': currentTextAlign === 'justify' }" title="两端对齐"
+          @click="emit('update:styleTextAlign', 'justify')">
+          <svg class="icon" style="width: 15px; height: 15px; fill: currentColor;">
+            <use xlink:href="#icon-liangduanduiqi"></use>
+          </svg>
+        </div>
+        <div class="pill-action-btn" :class="{ 'is-active': currentTextAlign === 'distribute' }" title="分散对齐"
+          @click="emit('update:styleTextAlign', 'distribute')">
+          <svg class="icon" style="width: 15px; height: 15px; fill: currentColor;">
+            <use xlink:href="#icon-fensanduiqi"></use>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="section-divider"></div>
+
+    <!-- 3. 字体颜色 -->
+    <div class="form-item-block">
+      <div class="form-item-label">字体颜色</div>
+      <QuickColorPopover v-model:visible="textColorPopoverVisible" :color="styleTextColor || '#000000'"
+        :recent-colors="recentColors" @select-color="emit('update:styleTextColor', $event)">
+        <template #reference>
+          <div class="full-color-card">
+            <div class="color-swatch-hex">
+              <div class="color-swatch-box" :style="{ background: styleTextColor || '#000000' }"></div>
+              <span class="color-hex-text">{{ (styleTextColor || '#000000').replace('#', '').toUpperCase() }}</span>
+            </div>
+            <span class="color-opacity-text">100%</span>
+          </div>
+        </template>
+      </QuickColorPopover>
+    </div>
+
+    <!-- 4. 高亮色 -->
+    <div class="form-item-block">
+      <div class="form-item-label">高亮色</div>
+      <QuickColorPopover v-model:visible="textBgPopoverVisible" :color="styleTextBackground || 'transparent'"
+        :recent-colors="recentColors" @select-color="emit('update:styleTextBackground', $event)">
+        <template #reference>
+          <div class="full-color-card">
+            <div class="color-swatch-hex">
+              <div class="color-swatch-box" :style="{
+                background: (styleTextBackground && styleTextBackground !== 'transparent') ? styleTextBackground : '#ffffff',
+                border: (!styleTextBackground || styleTextBackground === 'transparent') ? '1px dashed #cbd5e1' : 'none'
+              }"></div>
+              <span class="color-hex-text">{{ (!styleTextBackground || styleTextBackground === 'transparent') ? '无' :
+                styleTextBackground.replace('#', '').toUpperCase() }}</span>
+            </div>
+            <span class="color-opacity-text">{{ (!styleTextBackground || styleTextBackground === 'transparent') ? '0%' :
+              '100%' }}</span>
+          </div>
+        </template>
+      </QuickColorPopover>
+    </div>
+
+    <!-- 5. 文字轮廓 -->
+    <div class="accordion-item-block">
+      <div class="accordion-header-row" @click="toggleTextBorderHeader">
+        <div class="accordion-title-wrap">
+          <span class="accordion-title">文字轮廓</span>
+          <span class="accordion-arrow"
+            :style="{ transform: (enableTextStroke && isTextBorderExpanded) ? 'rotate(90deg)' : 'rotate(0deg)' }">▶</span>
+        </div>
+        <el-switch :model-value="enableTextStroke" size="small" @click.stop
+          @change="emit('update:enableTextStroke', $event); isTextBorderExpanded = $event" />
+      </div>
+
+      <div v-show="isTextBorderExpanded && enableTextStroke" class="accordion-inner-content">
+        <!-- Stroke Color card -->
+        <QuickColorPopover v-model:visible="textStrokePopoverVisible" :color="textStrokeColor || '#000000'"
+          :recent-colors="recentColors" @select-color="emit('update:textStrokeColor', $event)">
+          <template #reference>
+            <div class="full-color-card">
+              <div class="color-swatch-hex">
+                <div class="color-swatch-box" :style="{ background: textStrokeColor || '#000000' }"></div>
+                <span class="color-hex-text">{{ (textStrokeColor || '#000000').replace('#', '').toUpperCase() }}</span>
+              </div>
+              <span class="color-opacity-text">{{ textStrokeAlpha ?? 100 }}%</span>
+            </div>
+          </template>
+        </QuickColorPopover>
+
+        <!-- Stroke Width Pill -->
+        <div class="custom-num-pill full-width-pill">
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5"
+            class="input-icon">
+            <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" :value="textStrokeWidth"
+            @input="emit('update:textStrokeWidth', Number(($event.target as HTMLInputElement).value))" :min="1"
+            :max="20" class="custom-num-field" />
+        </div>
+      </div>
+    </div>
+
+    <div class="section-divider"></div>
+
+    <!-- 6. 文字边距 -->
+    <div class="accordion-item-block" v-if="selectedElement && selectedElement.type !== 'group'">
+      <div class="accordion-header-row" @click="isPaddingExpanded = !isPaddingExpanded">
+        <div class="accordion-title-wrap">
+          <span class="accordion-title">文字边距</span>
+          <span class="accordion-arrow"
+            :style="{ transform: isPaddingExpanded ? 'rotate(90deg)' : 'rotate(0deg)' }">▶</span>
+        </div>
+      </div>
+
+      <div v-show="isPaddingExpanded" class="accordion-inner-content">
+        <div class="padding-control-container">
+          <!-- 2x2 grid -->
+          <div class="padding-inputs-grid">
+            <!-- Left (Top-Left) -->
+            <div class="custom-num-pill">
+              <svg class="icon input-icon">
+                <use xlink:href="#icon-zuobianju"></use>
+              </svg>
+              <input type="number" :value="paddingLeft"
+                @input="emit('update:paddingLeft', Number(($event.target as HTMLInputElement).value))"
+                class="custom-num-field" min="0" max="500" />
+            </div>
+
+            <!-- Right (Top-Right) -->
+            <div class="custom-num-pill">
+              <svg class="icon input-icon">
+                <use xlink:href="#icon-youbianju"></use>
+              </svg>
+              <input type="number" :value="paddingRight"
+                @input="emit('update:paddingRight', Number(($event.target as HTMLInputElement).value))"
+                class="custom-num-field" min="0" max="500" />
+            </div>
+
+            <!-- Top (Bottom-Left) -->
+            <div class="custom-num-pill">
+              <svg class="icon input-icon">
+                <use xlink:href="#icon-shangbianju"></use>
+              </svg>
+              <input type="number" :value="paddingTop"
+                @input="emit('update:paddingTop', Number(($event.target as HTMLInputElement).value))"
+                class="custom-num-field" min="0" max="500" />
+            </div>
+
+            <!-- Bottom (Bottom-Right) -->
+            <div class="custom-num-pill">
+              <svg class="icon input-icon">
+                <use xlink:href="#icon-xiabianju"></use>
+              </svg>
+              <input type="number" :value="paddingBottom"
+                @input="emit('update:paddingBottom', Number(($event.target as HTMLInputElement).value))"
+                class="custom-num-field" min="0" max="500" />
+            </div>
+          </div>
+
+          <!-- Lock Button on bottom-right -->
+          <div class="padding-lock-btn" title="锁定所有边框内边距一致" :class="{ 'is-locked': isPaddingLocked }"
+            @click="emit('update:isPaddingLocked', !isPaddingLocked)">
+            <svg viewBox="0 0 1024 1024" width="16" height="16" style="display: block;">
+              <template v-if="isPaddingLocked">
+                <path
+                  d="M192 396.8v-30.4q0-125.248 88.576-213.824Q369.152 64 494.4 64q125.248 0 213.824 88.576 88.576 88.576 88.576 213.824V396.8a46.4 46.4 0 1 1-92.8 0v-30.4q0-86.848-61.44-148.224-61.312-61.376-148.16-61.376t-148.224 61.44q-61.376 61.312-61.376 148.16V396.8A46.4 46.4 0 1 1 192 396.8m92.8 259.2v30.4q0 86.848 61.44 148.224 61.312 61.376 148.16 61.376t148.224-61.44q61.376-61.312 61.376-148.16v-30.4a46.4 46.4 0 1 1 92.8 0v30.4q0 125.248-88.576 213.824-88.576 88.576-213.824 88.576-125.248 0-213.824-88.576Q192 811.648 192 686.4v-30.4a46.4 46.4 0 1 1 92.8 0"
+                  fill="currentColor" />
+                <path
+                  d="M448 320m46.4 0l0 0q46.4 0 46.4 46.4l0 320q0 46.4-46.4 46.4l0 0q-46.4 0-46.4-46.4l0-320q0-46.4 46.4-46.4Z"
+                  fill="currentColor" />
+              </template>
+              <template v-else>
+                <path
+                  d="M192 396.8v-30.4q0-125.248 88.576-213.824Q369.152 64 494.4 64q125.248 0 213.824 88.576 88.576 88.576 88.576 213.824V396.8a46.4 46.4 0 1 1-92.8 0v-30.4q0-86.848-61.44-148.224-61.312-61.376-148.16-61.376t-148.224 61.44q-61.376 61.312-61.376 148.16V396.8A46.4 46.4 0 1 1 192 396.8m92.8 259.2v30.4q0 86.848 61.44 148.224 61.312 61.376 148.16 61.376t148.224-61.44q61.376-61.312 61.376-148.16v-30.4a46.4 46.4 0 1 1 92.8 0v30.4q0 125.248-88.576 213.824-88.576 88.576-213.824 88.576-125.248 0-213.824-88.576Q192 811.648 192 686.4v-30.4a46.4 46.4 0 1 1 92.8 0"
+                  fill="currentColor" />
+                <path
+                  d="M448 604.8v81.6q0 4.544 0.896 9.024 0.896 4.48 2.624 8.704 1.792 4.224 4.288 8.064 2.56 3.84 5.76 7.04 3.2 3.2 7.04 5.76 3.84 2.56 8.064 4.288 4.224 1.728 8.704 2.624 4.48 0.896 9.024 0.896 4.544 0 9.024-0.896 4.48-0.896 8.704-2.624 4.224-1.792 8.064-4.288 3.84-2.56 7.04-5.76 3.2-3.2 5.76-7.04 2.56-3.84 4.288-8.064 1.728-4.224 2.624-8.704 0.896-4.48 0.896-9.024V604.8H448zM448 512h92.8V366.4q0-4.544-0.896-9.024-0.896-4.48-2.624-8.704-1.792-4.224-4.288-8.064-2.56-3.84-5.76-7.04-3.2-3.2-7.04-5.76-3.84-2.56-8.064-4.288-4.224-1.728-8.704-2.624Q498.944 320 494.4 320q-4.544 0-9.024 0.896-4.48 0.896-8.704 2.624-4.224 1.792-8.064 4.288-3.84 2.56-7.04 5.76-3.2 3.2-5.76 7.04-2.56 3.84-4.288 8.064-1.728 4.224-2.624 8.704Q448 361.856 448 366.4V512z"
+                  fill="currentColor" />
+                <path d="M142.4 480a46.4 46.4 0 1 0 0 92.8h675.2a46.4 46.4 0 1 0 0-92.8H142.4z" fill="currentColor" />
+              </template>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="section-divider"></div>
+
+    <!-- 7. 文字方向 (Custom Popover matching AutoFit style) -->
+    <div class="form-item-block">
+      <div class="form-item-label">文字方向</div>
+      <el-popover v-model:visible="isWritingModePopoverVisible" placement="bottom-start"
+        :width="writingModeTriggerWidth" trigger="click" popper-class="autofit-popover-panel" :show-arrow="false"
+        :offset="4" @before-enter="onWritingModePopoverShow">
+        <template #reference>
+          <div ref="writingModeTriggerRef" class="custom-select-trigger"
+            :class="{ 'is-active': isWritingModePopoverVisible }">
+            <span class="select-trigger-text">{{ currentWritingModeLabel }}</span>
+            <svg viewBox="0 0 1024 1024" width="10" height="10" fill="currentColor" class="select-trigger-arrow"
+              :class="{ 'is-open': isWritingModePopoverVisible }">
+              <path
+                d="M831.872 340.777L512 652.672 192.128 340.777a31.968 31.968 0 0 0-45.12 45.312l342.4 333.568a32 32 0 0 0 45.184 0l342.4-333.568a31.968 31.968 0 0 0-45.12-45.312z">
+              </path>
+            </svg>
+          </div>
+        </template>
+
+        <div class="autofit-menu-container">
+          <div v-for="item in writingModeOptions" :key="item.value" class="autofit-menu-item"
+            :class="{ 'is-selected': (styleWritingMode === item.value) || (!styleWritingMode && item.value === 'horizontal-tb') }"
+            @click="selectWritingMode(item.value)">
+            <span class="autofit-item-label">{{ item.label }}</span>
+            <svg v-if="(styleWritingMode === item.value) || (!styleWritingMode && item.value === 'horizontal-tb')"
+              viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5"
+              class="autofit-check-icon">
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+        </div>
+      </el-popover>
+    </div>
+
+    <!-- 8. 文字自动调整 (Custom Popover with Word Wrap Toggle) -->
+    <div class="form-item-block">
+      <div class="form-item-label">文字自动调整</div>
+      <el-popover v-model:visible="isAutoFitPopoverVisible" placement="bottom-start" :width="autoFitTriggerWidth"
+        trigger="click" popper-class="autofit-popover-panel" :show-arrow="false" :offset="4"
+        @before-enter="onAutoFitPopoverShow">
+        <template #reference>
+          <div ref="autoFitTriggerRef" class="custom-select-trigger" :class="{ 'is-active': isAutoFitPopoverVisible }">
+            <span class="select-trigger-text">{{ currentAutoFitLabel }}</span>
+            <svg viewBox="0 0 1024 1024" width="10" height="10" fill="currentColor" class="select-trigger-arrow"
+              :class="{ 'is-open': isAutoFitPopoverVisible }">
+              <path
+                d="M831.872 340.777L512 652.672 192.128 340.777a31.968 31.968 0 0 0-45.12 45.312l342.4 333.568a32 32 0 0 0 45.184 0l342.4-333.568a31.968 31.968 0 0 0-45.12-45.312z">
+              </path>
+            </svg>
+          </div>
+        </template>
+
+        <div class="autofit-menu-container">
+          <div v-for="item in autoFitOptions" :key="item.value" class="autofit-menu-item"
+            :class="{ 'is-selected': (styleAutoFitType === item.value) || (!styleAutoFitType && item.value === 'none') }"
+            @click="selectAutoFitType(item.value)">
+            <span class="autofit-item-label">{{ item.label }}</span>
+            <svg v-if="(styleAutoFitType === item.value) || (!styleAutoFitType && item.value === 'none')"
+              viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5"
+              class="autofit-check-icon">
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+
+          <div class="autofit-divider"></div>
+
+          <div class="autofit-wrap-row" @click.stop>
+            <span class="autofit-wrap-label">形状中的文字自动换行</span>
+            <el-switch :model-value="styleWordWrap" @change="emit('update:styleWordWrap', $event)" size="small" />
+          </div>
+        </div>
+      </el-popover>
+    </div>
+
+    <!-- 10. 阴影 (Shadow Accordion) -->
+    <div class="accordion-item-block">
+      <div class="accordion-header-row" @click="toggleTextShadowHeader">
+        <div class="accordion-title-wrap">
+          <span class="accordion-title">阴影</span>
+          <span class="accordion-arrow"
+            :style="{ transform: (enableTextShadow && isTextShadowExpanded) ? 'rotate(90deg)' : 'rotate(0deg)' }">▶</span>
+        </div>
+        <el-switch :model-value="enableTextShadow" size="small" @click.stop
+          @change="emit('update:enableTextShadow', $event); isTextShadowExpanded = $event" />
+      </div>
+
+      <div v-show="isTextShadowExpanded && enableTextShadow" class="accordion-inner-content">
+        <!-- Shadow color -->
+        <QuickColorPopover v-model:visible="textShadowPopoverVisible" :color="textShadowHex || '#000000'"
+          :recent-colors="recentColors" @select-color="emit('update:textShadowHex', $event)">
+          <template #reference>
+            <div class="full-color-card">
+              <div class="color-swatch-hex">
+                <div class="color-swatch-box" :style="{ background: textShadowHex || '#000000' }"></div>
+                <span class="color-hex-text">{{ (textShadowHex || '#000000').replace('#', '').toUpperCase() }}</span>
+              </div>
+              <span class="color-opacity-text">{{ textShadowAlpha ?? 100 }}%</span>
+            </div>
+          </template>
+        </QuickColorPopover>
+
+        <!-- Angle -->
+        <div class="shape-property-row">
+          <span class="slider-prop-label">角度</span>
+          <div style="display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end;">
+            <div class="custom-num-pill" style="width: 80px; position: relative;">
+              <input type="number" :value="textShadowAngle"
+                @input="emit('update:textShadowAngle', Number(($event.target as HTMLInputElement).value))"
+                class="custom-num-field" />
+              <span class="angle-icon"
+                :style="{ left: `calc(8px + ${String(textShadowAngle ?? 0).length * 8}px)` }">°</span>
+            </div>
+            <div class="angle-dial" @mousedown="startDragAngle">
+              <div :style="{ transform: `rotate(${textShadowAngle || 0}deg)` }" class="dial-needle">
+                <div class="dial-needle-tip"></div>
+              </div>
+              <div class="dial-center-dot"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Size -->
+        <div class="shape-property-row">
+          <span class="slider-prop-label">大小</span>
+          <div class="shape-slider-wrapper">
+            <el-slider :model-value="textShadowSize" @update:model-value="emit('update:textShadowSize', $event)"
+              :min="0" :max="200" :step="1" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false"
+              show-input :show-input-controls="false" />
+          </div>
+        </div>
+
+        <!-- Blur -->
+        <div class="shape-property-row">
+          <span class="slider-prop-label">模糊</span>
+          <div class="shape-slider-wrapper">
+            <el-slider :model-value="textShadowBlur" @update:model-value="emit('update:textShadowBlur', $event)"
+              :min="0" :max="267" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
+              :show-input-controls="false" />
+          </div>
+        </div>
+
+        <!-- Distance -->
+        <div class="shape-property-row">
+          <span class="slider-prop-label">距离</span>
+          <div class="shape-slider-wrapper">
+            <el-slider :model-value="textShadowDistance" @update:model-value="emit('update:textShadowDistance', $event)"
+              :min="0" :max="267" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
+              :show-input-controls="false" />
+          </div>
+        </div>
+
+        <!-- Transparency -->
+        <div class="shape-property-row">
+          <span class="slider-prop-label">透明度</span>
+          <div class="shape-slider-wrapper">
+            <el-slider :model-value="textShadowAlpha" @update:model-value="emit('update:textShadowAlpha', $event)"
+              :min="0" :max="100" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
+              :show-input-controls="false" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 11. 倒影 (Reflection Accordion) -->
+    <div class="accordion-item-block">
+      <div class="accordion-header-row" @click="toggleTextReflectionHeader">
+        <div class="accordion-title-wrap">
+          <span class="accordion-title">倒影</span>
+          <span class="accordion-arrow"
+            :style="{ transform: (enableTextReflection && isTextReflectionExpanded) ? 'rotate(90deg)' : 'rotate(0deg)' }">▶</span>
+        </div>
+        <el-switch :model-value="enableTextReflection" size="small" @click.stop
+          @change="emit('update:enableTextReflection', $event); isTextReflectionExpanded = $event" />
+      </div>
+
+      <div v-show="isTextReflectionExpanded && enableTextReflection" class="accordion-inner-content">
+        <!-- Distance -->
+        <div class="shape-property-row">
+          <span class="slider-prop-label">距离</span>
+          <div class="shape-slider-wrapper">
+            <el-slider :model-value="textReflectionDistance"
+              @update:model-value="emit('update:textReflectionDistance', $event)" :min="0" :max="100" :step="0.1"
+              size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
+              :show-input-controls="false" />
+          </div>
+        </div>
+
+        <!-- Size -->
+        <div class="shape-property-row">
+          <span class="slider-prop-label">大小</span>
+          <div class="shape-slider-wrapper">
+            <el-slider :model-value="textReflectionSize" @update:model-value="emit('update:textReflectionSize', $event)"
+              :min="0" :max="100" :step="0.1" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false"
+              show-input :show-input-controls="false" />
+          </div>
+        </div>
+
+        <!-- Opacity -->
+        <div class="shape-property-row">
+          <span class="slider-prop-label">透明度</span>
+          <div class="shape-slider-wrapper">
+            <el-slider :model-value="textReflectionOpacity"
+              @update:model-value="emit('update:textReflectionOpacity', $event)" :min="0" :max="100" :step="1"
+              size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
+              :show-input-controls="false" />
+          </div>
+        </div>
+
+        <!-- Blur -->
+        <div class="shape-property-row">
+          <span class="slider-prop-label">模糊</span>
+          <div class="shape-slider-wrapper">
+            <el-slider :model-value="textReflectionBlur" @update:model-value="emit('update:textReflectionBlur', $event)"
+              :min="0" :max="100" :step="0.1" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false"
+              show-input :show-input-controls="false" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.sidebar-text-format-panel {
+  padding: 16px 16px 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  box-sizing: border-box;
+}
+
+.form-item-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-item-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  text-align: left;
+  user-select: none;
+}
+
+.full-width-control {
+  width: 100% !important;
+}
+
+.control-row-duo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.control-row-trio {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.custom-num-pill {
+  display: flex;
+  align-items: center;
+  background: #FAFAFA;
+  border: 1px solid #edf0f3;
+  border-radius: 8px;
+  height: 32px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease;
+  gap: 6px;
+
+  &:hover {
+    border-color: #cbd5e1;
+  }
+
+  &:focus-within {
+    border-color: #2563eb;
+    background: #ffffff;
+  }
+}
+
+.full-width-pill {
+  width: 100%;
+}
+
+.input-icon {
+  width: 14px;
+  height: 14px;
+  color: #64748b;
+  flex-shrink: 0;
+}
+
+.custom-num-field {
+  width: 100%;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  padding: 0;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
+/* List Dropdown Split Button */
+.list-dropdown-btn {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  background: #FAFAFA;
+  border: 1px solid #edf0f3;
+  border-radius: 8px;
+  padding: 0 6px 0 8px;
+  box-sizing: border-box;
+  color: #64748b;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+  flex-shrink: 0;
+  gap: 4px;
+
+  &:hover {
+    background: #f8fafc;
+    border-color: #cbd5e1;
+    color: #1e293b;
+  }
+
+  &.is-active {
+    background: #e0ebff;
+    color: #2563eb;
+    border-color: #bfdbfe;
+  }
+}
+
+.list-btn-main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.list-btn-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 100%;
+  color: #94a3b8;
+  transition: transform 0.2s ease;
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+
+.list-presets-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  padding: 4px;
+}
+
+.list-style-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 56px;
+  padding: 4px;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+  transition: all 0.15s;
+
+  &:hover {
+    border-color: #2563eb;
+  }
+
+  &.active {
+    border-color: #2563eb;
+    background: #eff6ff;
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+  }
+}
+
+/* Button Group Pills */
+.button-group-pill {
+  display: flex;
+  align-items: center;
+  background: #FAFAFA;
+  border: 1px solid #edf0f3;
+  border-radius: 8px;
+  height: 36px;
+  padding: 2px;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.vertical-align-group {
+  flex: 1;
+}
+
+.pill-action-btn {
+  flex: 1;
+  height: 100%;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 500;
+  color: #64748b;
+  transition: all 0.15s ease;
+  user-select: none;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: #1e293b;
+  }
+
+  &.is-active {
+    background: #ffffff;
+    color: #2563eb;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  }
+}
+
+.font-style-letter {
+  span {
+    transition: color 0.15s ease;
+  }
+}
+
+.section-divider {
+  height: 1px;
+  background: #edf0f3;
+  margin: 2px 0;
+}
+
+/* Full Width Color Card */
+.full-color-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 32px;
+  background: #FAFAFA;
+  border: 1px solid #edf0f3;
+  border-radius: 8px;
+  padding: 0 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: #f8fafc;
+    border-color: #cbd5e1;
+  }
+}
+
+.color-swatch-hex {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.color-swatch-box {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  flex-shrink: 0;
+}
+
+.color-hex-text {
+  font-size: 13px;
+  font-weight: 500;
+  font-family: monospace;
+  color: #1e293b;
+}
+
+.color-opacity-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+}
+
+/* Accordion Block */
+.accordion-item-block {
+  display: flex;
+  flex-direction: column;
+}
+
+.accordion-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.accordion-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.accordion-title {
+  font-size: 14px;
+  font-weight: 400;
+  color: #1e293b;
+}
+
+.accordion-arrow {
+  font-size: 8px;
+  color: #1e293b;
+  display: inline-block;
+  transition: transform 0.2s ease;
+  transform-origin: center;
+}
+
+.accordion-inner-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 6px;
+}
+
+/* Padding Grid & Lock */
+.padding-control-container {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+
+.padding-inputs-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  flex: 1;
+}
+
+.padding-lock-btn {
+  width: 32px;
+  height: 32px;
+  background: #FAFAFA;
+  border: 1px solid #edf0f3;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+  color: #64748b;
+
+  &:not(.is-locked):hover {
+    background: rgba(30, 111, 255, 0.12);
+    border-color: rgba(30, 111, 255, 0.4);
+    color: #1E6FFF;
+  }
+
+  &.is-locked,
+  &.is-locked:hover {
+    background: #1E6FFF !important;
+    border-color: #1E6FFF !important;
+    color: #ffffff !important;
+  }
+}
+
+/* Slider rows for Shadow & Reflection */
+.shape-property-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  gap: 8px;
+}
+
+.slider-prop-label {
+  font-size: 12px;
+  color: #64748b;
+  width: 60px;
+  flex-shrink: 0;
+  text-align: left;
+}
+
+.shape-slider-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+}
+
+:deep(.custom-slider) {
+  --el-slider-main-bg-color: #334155 !important;
+  --el-slider-runway-bg-color: #e2e8f0 !important;
+  --el-slider-height: 4px !important;
+  --el-slider-button-size: 14px !important;
+
+  .el-slider__button {
+    border: 1px solid #d1d5db !important;
+    background-color: #ffffff !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
+  }
+
+  .el-input-number {
+    width: 48px;
+    height: 30px;
+
+    .el-input__wrapper {
+      padding: 0 4px;
+      background: #FAFAFA !important;
+      border: 1px solid #edf0f3 !important;
+      border-radius: 8px !important;
+      box-shadow: none !important;
+    }
+
+    .el-input__inner {
+      text-align: center;
+      font-size: 12px;
+      color: #1e293b;
+    }
+  }
+}
+
+.angle-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(calc(-50% - 2px));
+  pointer-events: none;
+  font-size: 12px;
+  color: #64748b;
+  margin-left: 2px;
+}
+
+.angle-dial {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #edf0f3;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  background: #ffffff;
+  flex-shrink: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  user-select: none;
+}
+
+.dial-needle {
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  transform-origin: center;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.dial-needle-tip {
+  width: 16px;
+  height: 2px;
+  background: #6F7588;
+}
+
+.dial-center-dot {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background-color: #6F7588;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+:deep(.custom-select) {
+  .el-select__wrapper {
+    background-color: #FAFAFA !important;
+    border: 1px solid #edf0f3 !important;
+    box-shadow: none !important;
+    height: 32px !important;
+    min-height: 32px !important;
+    max-height: 32px !important;
+    line-height: 30px !important;
+    padding: 0 10px !important;
+    border-radius: 8px !important;
+    transition: all 0.15s ease;
+
+    &:hover {
+      border-color: #cbd5e1 !important;
+    }
+
+    &.is-focused {
+      border-color: #2563eb !important;
+      background-color: #ffffff !important;
+    }
+  }
+
+  /* Selected item text color: crisp dark #1e293b */
+  .el-select__selected-item,
+  .el-select__placeholder,
+  .el-select__selected-item span,
+  .el-select__placeholder span,
+  .el-select__selection span,
+  .el-input__inner,
+  .el-select__input {
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    color: #1e293b !important;
+    -webkit-text-fill-color: #1e293b !important;
+  }
+
+  /* Only when truly empty placeholder */
+  .el-select__placeholder.is-placeholder,
+  .el-select__wrapper.is-empty .el-select__placeholder,
+  .el-select__wrapper.is-empty .el-select__placeholder span {
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    color: #94a3b8 !important;
+    -webkit-text-fill-color: #94a3b8 !important;
+  }
+
+  /* Suffix icon */
+  .el-select__caret,
+  .el-select__suffix .el-icon {
+    color: #94a3b8 !important;
+    font-size: 10px !important;
+    transition: transform 0.2s ease !important;
+  }
+
+  .el-select__wrapper.is-focused .el-select__caret,
+  .el-select__wrapper.is-focused .el-select__suffix .el-icon {
+    transform: rotate(180deg) !important;
+  }
+}
+
+:deep(.el-switch__core) {
+  border-radius: 12px !important;
+}
+
+:deep(.color-span-box) {
+  width: 100%;
+}
+
+/* Custom Select Trigger for AutoFit */
+.custom-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 36px;
+  background-color: #FAFAFA;
+  border: 1px solid #edf0f3;
+  border-radius: 8px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+
+  &:hover {
+    border-color: #cbd5e1;
+  }
+
+  &.is-active {
+    border-color: #2563eb;
+    background-color: #ffffff;
+  }
+}
+
+.select-trigger-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+}
+
+.select-trigger-arrow {
+  color: #94a3b8;
+  transition: transform 0.2s ease;
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+
+.font-size-trigger {
+  cursor: text;
+}
+
+.custom-select-input {
+  width: 100%;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  padding: 0;
+}
+
+.font-size-menu-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-right: 2px;
+}
+
+.font-size-item {
+  height: 32px !important;
+  padding: 0 10px !important;
+}
+
+.autofit-menu-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.autofit-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 34px;
+  min-height: 34px;
+  line-height: 34px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 0 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+
+  &:hover {
+    background-color: #f8fafc;
+  }
+
+  &.is-selected {
+    background-color: #eef2ff;
+
+    .autofit-item-label {
+      color: #2563eb;
+      font-weight: 500;
+    }
+  }
+}
+
+.autofit-item-label {
+  font-size: 13px;
+  color: #1e293b;
+  transition: color 0.15s ease;
+}
+
+.autofit-check-icon {
+  color: #2563eb;
+  flex-shrink: 0;
+}
+
+.autofit-divider {
+  height: 1px;
+  background-color: #edf0f3;
+  margin: 4px 0;
+}
+
+.autofit-wrap-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  padding: 0 10px;
+  user-select: none;
+}
+
+.autofit-wrap-label {
+  font-size: 13px;
+  color: #1e293b;
+}
+</style>
+
+<style lang="scss">
+.autofit-popover-panel,
+.font-size-popover {
+  min-width: 0 !important;
+  padding: 6px !important;
+  border-radius: 10px !important;
+  border: 1px solid #edf0f3 !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
+  background: #ffffff !important;
+  z-index: 9999 !important;
+
+  .el-popper__arrow {
+    display: none !important;
+  }
+}
+
+.font-size-popover {
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+  padding: 6px 4px 6px 6px !important;
+  background: #ffffff !important;
+
+  .el-scrollbar {
+    padding-right: 0 !important;
+  }
+
+  .el-scrollbar__bar.is-vertical {
+    width: 4px !important;
+    right: 1px !important;
+  }
+
+  .el-scrollbar__thumb {
+    background-color: #cbd5e1 !important;
+    border-radius: 4px !important;
+
+    &:hover {
+      background-color: #94a3b8 !important;
+    }
+  }
+}
+
+.el-popper.sidebar-select-popper {
+  min-width: 0 !important;
+  padding: 0 !important;
+  border-radius: 10px !important;
+  border: 1px solid #edf0f3 !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
+  background: #ffffff !important;
+  overflow: hidden !important;
+  z-index: 9999 !important;
+
+  .el-popper__arrow {
+    display: none !important;
+  }
+
+  .el-select-dropdown {
+    padding: 6px !important;
+    margin: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-sizing: border-box !important;
+  }
+
+  .el-select-dropdown__wrap {
+    max-height: 274px !important;
+  }
+
+  .el-scrollbar__bar.is-vertical {
+    width: 4px !important;
+    right: 2px !important;
+
+    .el-scrollbar__thumb {
+      background-color: #cbd5e1 !important;
+      border-radius: 2px !important;
+    }
+  }
+
+  .el-select-dropdown__list {
+    padding: 0 !important;
+    margin: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 2px !important;
+  }
+
+  .el-select-dropdown__item {
+    height: 34px !important;
+    min-height: 34px !important;
+    line-height: 34px !important;
+    flex-shrink: 0 !important;
+    box-sizing: border-box !important;
+    padding: 0 10px !important;
+    border-radius: 6px !important;
+    font-size: 13px !important;
+    color: #1e293b !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    transition: all 0.15s ease !important;
+    user-select: none !important;
+
+    &:hover,
+    &.hover,
+    &.is-hovering {
+      background-color: #f8fafc !important;
+      color: #1e293b !important;
+    }
+
+    &.is-selected {
+      background-color: #eef2ff !important;
+      color: #2563eb !important;
+      font-weight: 500 !important;
+
+      &::after {
+        content: '';
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        flex-shrink: 0;
+        margin-left: 8px;
+        background-color: #2563eb;
+        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
+        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
+      }
+    }
+  }
+}
+
+.el-select-dropdown.sidebar-select-popper {
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  padding: 6px !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+}
+</style>