jvs-ppt-ui 0.0.14 → 0.0.16

package/src/composables/sidebar/useSidebarShapeFormat.ts

@@ -30,6 +30,9 @@ export function parseColor(colorStr: any) {
     }
   }
   const str = colorStr.trim().toLowerCase()
+  if (str === 'transparent' || str === 'none') {
+    return { hex: 'transparent', alpha: 0 }
+  }
   if (str.startsWith('rgba')) {
     const matches = str.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)/)
     if (matches) {
@@ -70,15 +73,151 @@ export function hexToRgba(hex: string, alphaPercent: number) {
   return `rgba(${r}, ${g}, ${b}, ${a})`
 }
 
+export function generateGradientEndColor(hex: string): string {
+  const parsed = parseColor(hex)
+  if (!parsed.hex || parsed.hex === 'transparent' || parsed.hex.toLowerCase() === 'none') return '#60A5FA'
+  const clean = parsed.hex.replace('#', '')
+  if (clean.length < 6) return '#60A5FA'
+  const r = parseInt(clean.substring(0, 2), 16) || 0
+  const g = parseInt(clean.substring(2, 4), 16) || 0
+  const b = parseInt(clean.substring(4, 6), 16) || 0
+
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+  if (brightness > 220) {
+    const darkR = Math.max(0, Math.round(r * 0.75)).toString(16).padStart(2, '0')
+    const darkG = Math.max(0, Math.round(g * 0.75)).toString(16).padStart(2, '0')
+    const darkB = Math.max(0, Math.round(b * 0.75)).toString(16).padStart(2, '0')
+    return `#${darkR}${darkG}${darkB}`.toUpperCase()
+  } else {
+    const lightR = Math.min(255, Math.round(r + (255 - r) * 0.55)).toString(16).padStart(2, '0')
+    const lightG = Math.min(255, Math.round(g + (255 - g) * 0.55)).toString(16).padStart(2, '0')
+    const lightB = Math.min(255, Math.round(b + (255 - b) * 0.55)).toString(16).padStart(2, '0')
+    return `#${lightR}${lightG}${lightB}`.toUpperCase()
+  }
+}
+
+function encodeSvgColor(color: string, fallback = '#3B82F6'): string {
+  const c = (color || fallback).trim()
+  if (!c || c === 'none') return 'transparent'
+  return c.replace(/#/g, '%23')
+}
+
+export function buildPatternSvgDataUrl(type: string, fgColor = '#3B82F6', bgColor = '#FFFFFF'): string {
+  const fg = encodeSvgColor(fgColor, '#3B82F6')
+  const bg = encodeSvgColor(bgColor, '#FFFFFF')
+  const rawFg = (fgColor || '#3B82F6').trim().replace(/#/g, '%23')
+  const rawBg = (bgColor || '#FFFFFF').trim().replace(/#/g, '%23')
+
+  let w = 10
+  let h = 10
+  let body = ''
+
+  switch (type) {
+    case 'dots-sparse':
+      w = 10; h = 10
+      body = `<circle cx='2.5' cy='2.5' r='1.1' fill='${fg}'/><circle cx='7.5' cy='7.5' r='1.1' fill='${fg}'/>`
+      break
+    case 'dots-dense':
+      w = 10; h = 10
+      body = `<circle cx='5' cy='5' r='2' fill='${fg}'/>`
+      break
+    case 'diag-up':
+      w = 10; h = 10
+      body = `<path d='M0 10L10 0M-2 2L2 -2M8 12L12 8' stroke='${fg}' stroke-width='1.5'/>`
+      break
+    case 'diag-down':
+      w = 10; h = 10
+      body = `<path d='M0 0L10 10M-2 8L2 12M8 -2L12 2' stroke='${fg}' stroke-width='1.5'/>`
+      break
+    case 'cross-diag':
+      w = 10; h = 10
+      body = `<path d='M0 10L10 0M0 0L10 10' stroke='${fg}' stroke-width='1.2'/>`
+      break
+    case 'grid':
+      w = 12; h = 12
+      body = `<path d='M12 0H0V12' fill='none' stroke='${fg}' stroke-width='1.2'/>`
+      break
+    case 'horizontal':
+      w = 8; h = 8
+      body = `<line x1='0' y1='4' x2='8' y2='4' stroke='${fg}' stroke-width='1.5'/>`
+      break
+    case 'vertical':
+      w = 8; h = 8
+      body = `<line x1='4' y1='0' x2='4' y2='8' stroke='${fg}' stroke-width='1.5'/>`
+      break
+    case 'brick':
+      w = 16; h = 16
+      body = `<path d='M0 8h16M8 0v8M0 16v-8' fill='none' stroke='${fg}' stroke-width='1.2'/>`
+      break
+    case 'wave':
+      w = 16; h = 8
+      body = `<path d='M0 4 Q4 0, 8 4 T16 4' fill='none' stroke='${fg}' stroke-width='1.3'/>`
+      break
+    case 'checker':
+      w = 12; h = 12
+      body = `<rect width='6' height='6' fill='${fg}'/><rect x='6' y='6' width='6' height='6' fill='${fg}'/>`
+      break
+    case 'zigzag':
+      w = 12; h = 8
+      body = `<path d='M0 6L6 2L12 6' fill='none' stroke='${fg}' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/>`
+      break
+    default:
+      w = 10; h = 10
+      body = `<path d='M0 10L10 0M-2 2L2 -2M8 12L12 8' stroke='${fg}' stroke-width='1.5'/>`
+      break
+  }
+
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${w}' height='${h}' data-pattern-type='${type}' data-fg='${rawFg}' data-bg='${rawBg}'><rect width='${w}' height='${h}' fill='${bg}'/>${body}</svg>`
+  const encoded = svg
+    .replace(/'/g, '%22')
+    .replace(/</g, '%3C')
+    .replace(/>/g, '%3E')
+    .replace(/\s+/g, '%20')
+  return `data:image/svg+xml;utf8,${encoded}`
+}
+
+export function parsePatternSvgMeta(url?: string): { type?: string; fg?: string; bg?: string } {
+  if (!url || typeof url !== 'string' || !url.startsWith('data:image/svg+xml')) return {}
+  let decoded = url
+  try {
+    decoded = decodeURIComponent(url)
+  } catch {
+    decoded = url.replace(/%22/g, '"').replace(/%27/g, "'").replace(/%23/g, '#')
+  }
+  const typeMatch = decoded.match(/data-pattern-type=['"]([^'"]+)['"]/)
+  const fgMatch = decoded.match(/data-fg=['"]([^'"]+)['"]/)
+  const bgMatch = decoded.match(/data-bg=['"]([^'"]+)['"]/)
+  let type = typeMatch ? typeMatch[1] : undefined
+  if (!type) {
+    if (decoded.includes('M0 10L10 0M0 0L10 10')) type = 'cross-diag'
+    else if (decoded.includes('M0 10L10 0')) type = 'diag-up'
+    else if (decoded.includes('M12 0H0V12')) type = 'grid'
+    else if (decoded.includes('cx="5" cy="5" r="2"') || decoded.includes("cx='5' cy='5' r='2'")) type = 'dots-dense'
+    else if (decoded.includes('M0 8h16')) type = 'brick'
+    else if (decoded.includes('y1="4" x2="8"') || decoded.includes("y1='4' x2='8'")) type = 'horizontal'
+    else if (decoded.includes('Q4 0, 8 4')) type = 'wave'
+    else if (decoded.includes('width="6" height="6"') || decoded.includes("width='6' height='6'")) type = 'checker'
+  }
+  return {
+    type,
+    fg: fgMatch ? fgMatch[1].replace(/%23/g, '#') : undefined,
+    bg: bgMatch ? bgMatch[1].replace(/%23/g, '#') : undefined
+  }
+}
+
 export const PATTERN_PRESETS = [
-  { name: '斜线', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect width='10' height='10' fill='%23ffffff'/><path d='M0 10L10 0M-2 2L2 -2M8 12L12 8' stroke='%233b82f6' stroke-width='1.5'/></svg>" },
-  { name: '网格', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><rect width='12' height='12' fill='%23ffffff'/><path d='M12 0H0V12' fill='none' stroke='%233b82f6' stroke-width='1.2'/></svg>" },
-  { name: '圆点', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect width='10' height='10' fill='%23ffffff'/><circle cx='5' cy='5' r='2' fill='%233b82f6'/></svg>" },
-  { name: '砖块', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%23ffffff'/><path d='M0 8h16M8 0v8M0 16v-8' fill='none' stroke='%233b82f6' stroke-width='1.2'/></svg>" },
-  { name: '横线', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><rect width='8' height='8' fill='%23ffffff'/><line x1='0' y1='4' x2='8' y2='4' stroke='%233b82f6' stroke-width='1.5'/></svg>" },
-  { name: '波浪', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8'><rect width='16' height='8' fill='%23ffffff'/><path d='M0 4 Q4 0, 8 4 T16 4' fill='none' stroke='%233b82f6' stroke-width='1.2'/></svg>" },
-  { name: '棋盘格', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><rect width='12' height='12' fill='%23ffffff'/><rect width='6' height='6' fill='%233b82f6'/><rect x='6' y='6' width='6' height='6' fill='%233b82f6'/></svg>" },
-  { name: '交叉线', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect width='10' height='10' fill='%23ffffff'/><path d='M0 10L10 0M0 0L10 10' stroke='%233b82f6' stroke-width='1.2'/></svg>" }
+  { key: 'dots-sparse', name: '稀疏圆点', url: buildPatternSvgDataUrl('dots-sparse', '#3B82F6', '#FFFFFF') },
+  { key: 'dots-dense', name: '密集圆点', url: buildPatternSvgDataUrl('dots-dense', '#3B82F6', '#FFFFFF') },
+  { key: 'diag-up', name: '上对角线', url: buildPatternSvgDataUrl('diag-up', '#3B82F6', '#FFFFFF') },
+  { key: 'diag-down', name: '下对角线', url: buildPatternSvgDataUrl('diag-down', '#3B82F6', '#FFFFFF') },
+  { key: 'cross-diag', name: '交叉斜线', url: buildPatternSvgDataUrl('cross-diag', '#3B82F6', '#FFFFFF') },
+  { key: 'grid', name: '细网格', url: buildPatternSvgDataUrl('grid', '#3B82F6', '#FFFFFF') },
+  { key: 'horizontal', name: '横线', url: buildPatternSvgDataUrl('horizontal', '#3B82F6', '#FFFFFF') },
+  { key: 'vertical', name: '竖线', url: buildPatternSvgDataUrl('vertical', '#3B82F6', '#FFFFFF') },
+  { key: 'brick', name: '砖块', url: buildPatternSvgDataUrl('brick', '#3B82F6', '#FFFFFF') },
+  { key: 'wave', name: '波浪', url: buildPatternSvgDataUrl('wave', '#3B82F6', '#FFFFFF') },
+  { key: 'checker', name: '棋盘格', url: buildPatternSvgDataUrl('checker', '#3B82F6', '#FFFFFF') },
+  { key: 'zigzag', name: '之字形', url: buildPatternSvgDataUrl('zigzag', '#3B82F6', '#FFFFFF') }
 ]
 
 export function useSidebarShapeFormat(
@@ -143,13 +282,17 @@ export function useSidebarShapeFormat(
 
   function hasElementFill(el: any): boolean {
     if (!el) return false
+    if (activeFillType.value && activeFillType.value !== 'transparent') {
+      return true
+    }
     // 1. 渐变填充
     const rawFill = (el.style && el.style.fill !== undefined) ? el.style.fill : el.fill
     if (el.gradient || el.style?.gradient || (rawFill && typeof rawFill === 'object' && rawFill.type === 'gradient')) {
       return true
     }
     // 2. 图片/图案填充
-    if (el.pattern || el.style?.pattern || (rawFill && typeof rawFill === 'object' && (rawFill.type === 'image' || rawFill.type === 'pattern'))) {
+    const hasPatternVal = (el.pattern !== undefined && el.pattern !== '') || (el.style?.pattern !== undefined && el.style?.pattern !== '')
+    if (hasPatternVal || (rawFill && typeof rawFill === 'object' && (rawFill.type === 'image' || rawFill.type === 'pattern'))) {
       return true
     }
     // 3. 常规色彩填充
@@ -258,6 +401,9 @@ export function useSidebarShapeFormat(
 
   const isFillEnabled = computed({
     get() {
+      if (activeFillType.value && activeFillType.value !== 'transparent') {
+        return true
+      }
       if (isMultiOrGroup()) {
         const elements = getFormattingElements()
         return elements.some((el: any) => hasElementFill(el))
@@ -265,42 +411,20 @@ export function useSidebarShapeFormat(
       return hasElementFill(selectedElement.value)
     },
     set(val: boolean) {
+      if (!val) {
+        activeFillType.value = null
+      }
       const newType = val ? 'color' : 'transparent'
-      if (isMultiOrGroup()) {
-        const elements = getFormattingElements()
-        elements.forEach((el: any) => {
-          if (!el.style) el.style = {}
-          if (newType === 'transparent') {
-            el.style.fill = 'transparent'
-            el.fill = 'transparent'
-            delete el.gradient
-            delete el.style.gradient
-            delete el.pattern
-            delete el.style.pattern
-          } else {
-            if (el.style.fill === 'transparent' || !el.style.fill || el.fill === 'transparent') {
-              let defaultColor = '#3b82f6'
-              if (el.type === 'shape') {
-                const shapeType = el.content || 'rect'
-                if (shapeType === 'circle') defaultColor = '#3b82f6'
-                else if (shapeType === 'triangle' || shapeType === 'M 100 0 L 0 200 L 200 200 Z') defaultColor = '#f59e0b'
-                else defaultColor = '#10b981'
-              }
-              el.style.fill = defaultColor
-              el.fill = defaultColor
-            }
-          }
-        })
-        if (selectedElement.value?.type === 'group') {
-          if (!selectedElement.value.style) selectedElement.value.style = {}
-          selectedElement.value.style.fill = newType === 'transparent' ? 'transparent' : '#3b82f6'
-          selectedElement.value.fill = newType === 'transparent' ? 'transparent' : '#3b82f6'
-        }
-      } else {
-        if (!selectedElement.value) return
-        const el = selectedElement.value
+      const elements = getFormattingElements()
+      elements.forEach((el: any) => {
         if (!el.style) el.style = {}
         if (newType === 'transparent') {
+          const curG = getStandardGradientConfig(el)
+          if (curG) el._lastGradient = curG
+          const curS = el.style.fill || el.fill
+          if (typeof curS === 'string' && curS !== 'none' && curS !== 'transparent') {
+            el._lastSolidFill = curS
+          }
           el.style.fill = 'transparent'
           el.fill = 'transparent'
           delete el.gradient
@@ -308,7 +432,14 @@ export function useSidebarShapeFormat(
           delete el.pattern
           delete el.style.pattern
         } else {
-          if (el.style.fill === 'transparent' || !el.style.fill || el.fill === 'transparent') {
+          if (el._lastGradient) {
+            el.gradient = el._lastGradient
+            el.fill = { type: 'gradient', value: el._lastGradient }
+            el.style.fill = 'none'
+          } else if (el._lastSolidFill) {
+            el.style.fill = el._lastSolidFill
+            el.fill = el._lastSolidFill
+          } else if (el.style.fill === 'transparent' || !el.style.fill || el.fill === 'transparent') {
             let defaultColor = '#3b82f6'
             if (el.type === 'shape') {
               const shapeType = el.content || 'rect'
@@ -320,6 +451,11 @@ export function useSidebarShapeFormat(
             el.fill = defaultColor
           }
         }
+      })
+      if (selectedElement.value?.type === 'group') {
+        if (!selectedElement.value.style) selectedElement.value.style = {}
+        selectedElement.value.style.fill = newType === 'transparent' ? 'transparent' : (selectedElement.value._lastSolidFill || '#3b82f6')
+        selectedElement.value.fill = newType === 'transparent' ? 'transparent' : (selectedElement.value._lastSolidFill || '#3b82f6')
       }
       addHistorySnapshot()
     }
@@ -332,10 +468,11 @@ export function useSidebarShapeFormat(
       if (activeFillType.value) return activeFillType.value
 
       const rawFill = (el.style && el.style.fill !== undefined) ? el.style.fill : el.fill
+      const hasPattern = (el.pattern !== undefined && el.pattern !== '') || (el.style?.pattern !== undefined && el.style?.pattern !== '')
       const patternVal = el.pattern || el.style?.pattern || (rawFill && typeof rawFill === 'object' && (rawFill.type === 'image' || rawFill.type === 'pattern') ? (rawFill.value?.src || rawFill.value?.url || rawFill.value) : '')
 
-      if (patternVal) {
-        if (PATTERN_PRESETS.some(item => item.url === patternVal)) {
+      if (hasPattern || patternVal) {
+        if (patternVal && (String(patternVal).startsWith('data:image/svg+xml') || el.patternType || el.style?.patternType || PATTERN_PRESETS.some(item => item.url === patternVal))) {
           return 'pattern'
         }
         return 'image'
@@ -347,29 +484,108 @@ export function useSidebarShapeFormat(
     },
     set(val: string) {
       if (!selectedElement.value) return
-      const el = selectedElement.value
+      const elements = getFormattingElements()
       activeFillType.value = val
-      if (!el.style) el.style = {}
-
-      delete el.fill
-      delete el.style.fill
-      delete el.gradient
-      delete el.style.gradient
-      delete el.pattern
-      delete el.style.pattern
-
-      if (val === 'solid') {
-        el.style.fill = '#3b82f6'
-      } else if (val === 'gradient') {
-        updateGradientConfig({})
-      } else if (val === 'image') {
-        el.style.fill = 'none'
-      } else if (val === 'pattern') {
-        const defaultPat = PATTERN_PRESETS[0].url
-        el.pattern = defaultPat
-        el.style.pattern = defaultPat
-        el.style.fill = 'none'
-      }
+
+      elements.forEach((el: any) => {
+        if (!el.style) el.style = {}
+
+        if (val === 'solid') {
+          const curG = getStandardGradientConfig(el)
+          if (curG) {
+            el._lastGradient = curG
+          }
+          let targetSolid = el._lastSolidFill
+          if (!targetSolid || targetSolid === 'none' || targetSolid === 'transparent') {
+            if (curG?.colors && curG.colors.length > 0 && curG.colors[0]?.color) {
+              targetSolid = curG.colors[0].color
+            } else {
+              const current = el.style?.fill || el.fill
+              if (typeof current === 'string' && current !== 'none' && current !== 'transparent') {
+                targetSolid = current
+              } else if (fillHex.value && fillHex.value !== 'transparent' && fillHex.value !== 'none') {
+                targetSolid = fillHex.value
+              } else {
+                targetSolid = '#3b82f6'
+              }
+            }
+          }
+          el._lastSolidFill = targetSolid
+          delete el.gradient
+          delete el.style.gradient
+          delete el.pattern
+          delete el.style.pattern
+          el.style.fill = targetSolid
+          el.fill = targetSolid
+          styleFill.value = targetSolid
+        } else if (val === 'gradient') {
+          const current = el.style?.fill || el.fill
+          if (typeof current === 'string' && current !== 'none' && current !== 'transparent') {
+            el._lastSolidFill = current
+          } else if (fillHex.value && fillHex.value !== 'transparent' && fillHex.value !== 'none') {
+            el._lastSolidFill = fillHex.value
+          }
+          delete el.pattern
+          delete el.style.pattern
+
+          const cachedG = getStandardGradientConfig(el) || el._lastGradient
+          if (cachedG && cachedG.colors && cachedG.colors.length >= 2) {
+            updateGradientConfig({
+              colors: cachedG.colors,
+              path: cachedG.path,
+              rot: cachedG.rot,
+              direction: cachedG.direction,
+              directionName: cachedG.directionName,
+              center: cachedG.center,
+              fillToRect: cachedG.fillToRect
+            })
+          } else {
+            const startColor = el._lastSolidFill ? parseColor(el._lastSolidFill).hex : (fillHex.value && fillHex.value !== 'transparent' && fillHex.value !== 'none' ? fillHex.value : '#3b82f6')
+            const endColor = generateGradientEndColor(startColor)
+            updateGradientConfig({
+              startColor,
+              endColor
+            })
+          }
+        } else if (val === 'image') {
+          const curG = getStandardGradientConfig(el)
+          if (curG) el._lastGradient = curG
+          const curS = el.style?.fill || el.fill
+          if (typeof curS === 'string' && curS !== 'none' && curS !== 'transparent') {
+            el._lastSolidFill = curS
+          }
+          delete el.gradient
+          delete el.style.gradient
+          const existing = el.pattern || el.style?.pattern || ''
+          const isPreset = String(existing).startsWith('data:image/svg+xml') || PATTERN_PRESETS.some(item => item.url === existing)
+          const patVal = (!existing || isPreset) ? '' : existing
+          el.pattern = patVal
+          el.style.pattern = patVal
+          el.style.fill = 'none'
+        } else if (val === 'pattern') {
+          const curG = getStandardGradientConfig(el)
+          if (curG) el._lastGradient = curG
+          const curS = el.style?.fill || el.fill
+          if (typeof curS === 'string' && curS !== 'none' && curS !== 'transparent') {
+            el._lastSolidFill = curS
+          }
+          delete el.gradient
+          delete el.style.gradient
+          const pType = el.patternType || el.style?.patternType || 'diag-up'
+          const pFg = el.patternFg || el.style?.patternFg || (el._lastSolidFill && el._lastSolidFill !== 'none' && el._lastSolidFill !== 'transparent' ? el._lastSolidFill : '#3B82F6')
+          const pBg = el.patternBg || el.style?.patternBg || '#FFFFFF'
+          el.patternType = pType
+          el.patternFg = pFg
+          el.patternBg = pBg
+          el.style.patternType = pType
+          el.style.patternFg = pFg
+          el.style.patternBg = pBg
+          const patUrl = buildPatternSvgDataUrl(pType, pFg, pBg)
+          el.pattern = patUrl
+          el.style.pattern = patUrl
+          el.style.fill = 'none'
+        }
+      })
       addHistorySnapshot()
     }
   })
@@ -386,26 +602,78 @@ export function useSidebarShapeFormat(
         }
         return 'transparent'
       }
+      const el = selectedElement.value
+      if (el?.style?.fill && el.style.fill !== 'none' && el.style.fill !== 'transparent') {
+        return parseColor(el.style.fill).hex
+      }
+      if (el?.fill && typeof el.fill === 'string' && el.fill !== 'none' && el.fill !== 'transparent') {
+        return parseColor(el.fill).hex
+      }
+      if (el?._lastSolidFill) {
+        return parseColor(el._lastSolidFill).hex
+      }
       const fill = styleFill.value || '#363B4C'
       return parseColor(fill).hex
     },
     set(val: string) {
       if (isMultiOrGroup()) {
         const elements = getFormattingElements()
+        const parsed = parseColor(val)
         elements.forEach((el: any) => {
           if (!el.style) el.style = {}
-          const currentFill = el.style.fill || '#363B4C'
-          const currentAlpha = parseColor(currentFill).alpha
-          el.style.fill = hexToRgba(val, currentAlpha)
+          delete el.gradient
+          delete el.style.gradient
+          delete el.pattern
+          delete el.style.pattern
+          if (val === 'transparent' || val === 'none') {
+            el.style.fill = 'transparent'
+            el.fill = 'transparent'
+          } else {
+            const currentFill = el.style.fill || '#363B4C'
+            let currentAlpha = parseColor(currentFill).alpha
+            if (currentAlpha === 0 || currentAlpha === undefined) currentAlpha = 100
+            const alphaToUse = (parsed.alpha !== undefined && parsed.alpha < 100) ? parsed.alpha : currentAlpha
+            const rgba = hexToRgba(parsed.hex, alphaToUse)
+            el.style.fill = rgba
+            el.fill = rgba
+            el._lastSolidFill = rgba
+          }
         })
         if (selectedElement.value?.type === 'group') {
           if (!selectedElement.value.style) selectedElement.value.style = {}
           selectedElement.value.style.fill = val
+          selectedElement.value.fill = val
+          selectedElement.value._lastSolidFill = val
         }
       } else {
         if (!selectedElement.value) return
-        const alpha = fillAlpha.value
-        styleFill.value = hexToRgba(val, alpha)
+        const el = selectedElement.value
+        delete el.gradient
+        if (el.style) delete el.style.gradient
+        delete el.pattern
+        if (el.style) delete el.style.pattern
+        activeFillType.value = 'solid'
+        if (val === 'transparent' || val === 'none') {
+          styleFill.value = 'transparent'
+          el.fill = 'transparent'
+          if (el.style) el.style.fill = 'transparent'
+        } else {
+          const parsed = parseColor(val)
+          let alpha = fillAlpha.value
+          if (alpha === 0 || alpha === undefined) alpha = 100
+          if (parsed.alpha !== undefined && parsed.alpha < 100) {
+            alpha = parsed.alpha
+          }
+          const rgba = hexToRgba(parsed.hex, alpha)
+          styleFill.value = rgba
+          el.fill = rgba
+          if (el.style) el.style.fill = rgba
+          el._lastSolidFill = rgba
+          if (parsed.alpha !== undefined && parsed.alpha < 100) {
+            el.opacity = alpha / 100
+            if (el.style) el.style.opacity = alpha / 100
+          }
+        }
       }
       addHistorySnapshot()
     }
@@ -415,6 +683,13 @@ export function useSidebarShapeFormat(
     get() {
       if (selectedElement.value) {
         const el = selectedElement.value
+        const rawFill = (el.style && el.style.fill !== undefined) ? el.style.fill : el.fill
+        if (rawFill) {
+          const colorParsed = parseColor(rawFill)
+          if (colorParsed.alpha !== undefined && colorParsed.alpha < 100) {
+            return colorParsed.alpha
+          }
+        }
         const op = el.style?.opacity !== undefined ? el.style.opacity : (el.opacity !== undefined ? el.opacity : undefined)
         if (op !== undefined) {
           return Math.round((typeof op === 'number' ? op : parseFloat(op) || 1) * 100)
@@ -433,7 +708,10 @@ export function useSidebarShapeFormat(
           el.style.opacity = alpha
           const currentFill = el.style.fill || '#363B4C'
           const hex = parseColor(currentFill).hex
-          el.style.fill = hexToRgba(hex, val)
+          const validHex = (hex && hex !== 'transparent') ? hex : '#3b82f6'
+          const rgba = hexToRgba(validHex, val)
+          el.style.fill = rgba
+          el.fill = rgba
         })
         if (selectedElement.value) {
           if (!selectedElement.value.style) selectedElement.value.style = {}
@@ -447,8 +725,11 @@ export function useSidebarShapeFormat(
         const alpha = val / 100
         el.opacity = alpha
         el.style.opacity = alpha
-        const hex = fillHex.value
-        styleFill.value = hexToRgba(hex, val)
+        const hex = (fillHex.value && fillHex.value !== 'transparent') ? fillHex.value : '#3b82f6'
+        const rgba = hexToRgba(hex, val)
+        styleFill.value = rgba
+        el.fill = rgba
+        if (el.style) el.style.fill = rgba
       }
       addHistorySnapshot()
     }
@@ -462,8 +743,16 @@ export function useSidebarShapeFormat(
   const gradientStartHex = computed<string>({
     get() {
       if (!selectedElement.value) return '#3b82f6'
-      const g = getStandardGradientConfig(selectedElement.value)
-      return g?.colors?.[0]?.color || '#3b82f6'
+      const g = getStandardGradientConfig(selectedElement.value) || selectedElement.value._lastGradient
+      if (g?.colors?.[0]?.color) {
+        return parseColor(g.colors[0].color).hex
+      }
+      const solid = selectedElement.value._lastSolidFill || styleFill.value || selectedElement.value.fill
+      if (solid && solid !== 'none' && solid !== 'transparent') {
+        const parsed = parseColor(solid)
+        if (parsed.hex && parsed.hex !== 'transparent') return parsed.hex
+      }
+      return '#3b82f6'
     },
     set(val: string) {
       updateGradientConfig({ startColor: val })
@@ -473,9 +762,13 @@ export function useSidebarShapeFormat(
   const gradientEndHex = computed<string>({
     get() {
       if (!selectedElement.value) return '#60a5fa'
-      const g = getStandardGradientConfig(selectedElement.value)
+      const g = getStandardGradientConfig(selectedElement.value) || selectedElement.value._lastGradient
       const colors = g?.colors || []
-      return colors[colors.length - 1]?.color || colors[0]?.color || '#60a5fa'
+      if (colors.length > 0 && colors[colors.length - 1]?.color) {
+        return parseColor(colors[colors.length - 1].color).hex
+      }
+      const start = gradientStartHex.value
+      return generateGradientEndColor(start)
     },
     set(val: string) {
       updateGradientConfig({ endColor: val })
@@ -542,12 +835,13 @@ export function useSidebarShapeFormat(
     directionName?: string
     center?: { x: number; y: number }
     fillToRect?: { l: number; t: number; r: number; b: number }
+    colors?: any[]
   }) {
     if (!selectedElement.value) return
     const el = selectedElement.value
-    const existingG = getStandardGradientConfig(el)
+    const existingG = getStandardGradientConfig(el) || el._lastGradient
     const curStart = opt.startColor !== undefined ? opt.startColor : gradientStartHex.value
-    const curEnd = opt.endColor !== undefined ? opt.endColor : gradientEndHex.value
+    const curEnd = opt.endColor !== undefined ? opt.endColor : (opt.startColor !== undefined ? generateGradientEndColor(opt.startColor) : gradientEndHex.value)
     const curPath = opt.path !== undefined ? opt.path : gradientPathType.value
     const curRot = opt.rot !== undefined ? opt.rot : (existingG?.rot !== undefined ? existingG.rot : gradientAngle.value)
 
@@ -575,10 +869,29 @@ export function useSidebarShapeFormat(
       curDirName = '沿路径'
     }
 
-    const colors = [
-      { color: curStart, pos: '0%' },
-      { color: curEnd, pos: '100%' }
-    ]
+    let colors: any[] = []
+    if (opt.colors && Array.isArray(opt.colors) && opt.colors.length > 0) {
+      colors = opt.colors
+    } else if (existingG?.colors && Array.isArray(existingG.colors) && existingG.colors.length >= 2) {
+      if (opt.startColor !== undefined || opt.endColor !== undefined) {
+        colors = existingG.colors.map((c: any, idx: number) => {
+          if (idx === 0 && opt.startColor !== undefined) {
+            return { ...c, color: opt.startColor }
+          }
+          if (idx === existingG.colors.length - 1 && opt.endColor !== undefined) {
+            return { ...c, color: opt.endColor }
+          }
+          return { ...c }
+        })
+      } else {
+        colors = existingG.colors
+      }
+    } else {
+      colors = [
+        { color: curStart, pos: '0%' },
+        { color: curEnd, pos: '100%' }
+      ]
+    }
 
     const normalized = normalizeGradientConfig({
       type: curPath === 'line' ? 'linear' : (curPath === 'circle' ? 'radial' : (curPath === 'rect' ? 'rect' : 'path')),
@@ -593,18 +906,21 @@ export function useSidebarShapeFormat(
       colors: colors
     })
 
-    el.fill = {
-      type: 'gradient',
-      value: normalized
-    }
-
-    el.gradient = normalized
+    const elements = getFormattingElements()
+    elements.forEach((targetEl: any) => {
+      targetEl.fill = {
+        type: 'gradient',
+        value: normalized
+      }
+      targetEl.gradient = normalized
+      targetEl._lastGradient = normalized
 
-    if (el.style) {
-      delete el.style.pattern
-      el.style.fill = 'none'
-    }
-    delete el.pattern
+      if (targetEl.style) {
+        delete targetEl.style.pattern
+        targetEl.style.fill = 'none'
+      }
+      delete targetEl.pattern
+    })
     addHistorySnapshot()
   }
 
@@ -632,6 +948,7 @@ export function useSidebarShapeFormat(
         value: normalized
       }
       targetEl.gradient = normalized
+      targetEl._lastGradient = normalized
 
       if (targetEl.style) {
         delete targetEl.style.pattern
@@ -646,9 +963,125 @@ export function useSidebarShapeFormat(
     }
   }
 
-  const shapePatternFill = computed(() => {
-    if (!selectedElement.value) return ''
-    return selectedElement.value.pattern || selectedElement.value.style?.pattern || ''
+  const shapePatternFill = computed({
+    get() {
+      if (!selectedElement.value) return ''
+      return selectedElement.value.pattern || selectedElement.value.style?.pattern || ''
+    },
+    set(val: string) {
+      if (!selectedElement.value) return
+      const elements = getFormattingElements()
+      const meta = parsePatternSvgMeta(val)
+      elements.forEach((el: any) => {
+        if (!el.style) el.style = {}
+        if (meta.type) {
+          el.patternType = meta.type
+          el.style.patternType = meta.type
+        }
+        if (meta.fg) {
+          el.patternFg = meta.fg
+          el.style.patternFg = meta.fg
+        }
+        if (meta.bg) {
+          el.patternBg = meta.bg
+          el.style.patternBg = meta.bg
+        }
+        el.pattern = val
+        el.style.pattern = val
+        el.style.fill = 'none'
+      })
+      addHistorySnapshot()
+    }
+  })
+
+  const shapePatternType = computed({
+    get() {
+      if (!selectedElement.value) return 'diag-up'
+      const el = selectedElement.value
+      if (el.patternType || el.style?.patternType) return el.patternType || el.style.patternType
+      const meta = parsePatternSvgMeta(el.pattern || el.style?.pattern)
+      return meta.type || 'diag-up'
+    },
+    set(val: string) {
+      if (!selectedElement.value) return
+      const elements = getFormattingElements()
+      const fg = shapePatternFg.value || '#3B82F6'
+      const bg = shapePatternBg.value || '#FFFFFF'
+      const url = buildPatternSvgDataUrl(val, fg, bg)
+      elements.forEach((el: any) => {
+        if (!el.style) el.style = {}
+        el.patternType = val
+        el.style.patternType = val
+        el.patternFg = fg
+        el.style.patternFg = fg
+        el.patternBg = bg
+        el.style.patternBg = bg
+        el.pattern = url
+        el.style.pattern = url
+        el.style.fill = 'none'
+      })
+      addHistorySnapshot()
+    }
+  })
+
+  const shapePatternFg = computed({
+    get() {
+      if (!selectedElement.value) return '#3B82F6'
+      const el = selectedElement.value
+      if (el.patternFg || el.style?.patternFg) return el.patternFg || el.style.patternFg
+      const meta = parsePatternSvgMeta(el.pattern || el.style?.pattern)
+      return meta.fg || '#3B82F6'
+    },
+    set(val: string) {
+      if (!selectedElement.value) return
+      const elements = getFormattingElements()
+      const pType = shapePatternType.value || 'diag-up'
+      const bg = shapePatternBg.value || '#FFFFFF'
+      const url = buildPatternSvgDataUrl(pType, val, bg)
+      elements.forEach((el: any) => {
+        if (!el.style) el.style = {}
+        el.patternType = pType
+        el.style.patternType = pType
+        el.patternFg = val
+        el.style.patternFg = val
+        el.patternBg = bg
+        el.style.patternBg = bg
+        el.pattern = url
+        el.style.pattern = url
+        el.style.fill = 'none'
+      })
+      addHistorySnapshot()
+    }
+  })
+
+  const shapePatternBg = computed({
+    get() {
+      if (!selectedElement.value) return '#FFFFFF'
+      const el = selectedElement.value
+      if (el.patternBg || el.style?.patternBg) return el.patternBg || el.style.patternBg
+      const meta = parsePatternSvgMeta(el.pattern || el.style?.pattern)
+      return meta.bg || '#FFFFFF'
+    },
+    set(val: string) {
+      if (!selectedElement.value) return
+      const elements = getFormattingElements()
+      const pType = shapePatternType.value || 'diag-up'
+      const fg = shapePatternFg.value || '#3B82F6'
+      const url = buildPatternSvgDataUrl(pType, fg, val)
+      elements.forEach((el: any) => {
+        if (!el.style) el.style = {}
+        el.patternType = pType
+        el.style.patternType = pType
+        el.patternFg = fg
+        el.style.patternFg = fg
+        el.patternBg = val
+        el.style.patternBg = val
+        el.pattern = url
+        el.style.pattern = url
+        el.style.fill = 'none'
+      })
+      addHistorySnapshot()
+    }
   })
 
   function handleShapePatternUpload(e: Event) {
@@ -661,6 +1094,7 @@ export function useSidebarShapeFormat(
         if (!selectedElement.value.style) selectedElement.value.style = {}
         selectedElement.value.pattern = dataUrl
         selectedElement.value.style.pattern = dataUrl
+        selectedElement.value.style.fill = 'none'
         addHistorySnapshot()
         notify('已设置形状图片填充')
       }
@@ -670,9 +1104,10 @@ export function useSidebarShapeFormat(
 
   function clearShapePatternFill() {
     if (selectedElement.value) {
-      delete selectedElement.value.pattern
+      selectedElement.value.pattern = ''
       if (selectedElement.value.style) {
-        delete selectedElement.value.style.pattern
+        selectedElement.value.style.pattern = ''
+        selectedElement.value.style.fill = 'none'
       }
       addHistorySnapshot()
       notify('已清除图片填充')
@@ -802,11 +1237,18 @@ export function useSidebarShapeFormat(
     set(val: string) {
       if (isMultiOrGroup()) {
         const elements = getFormattingElements().filter((el: any) => el.type !== 'line')
+        const parsed = parseColor(val)
         elements.forEach((el: any) => {
           if (!el.style) el.style = {}
-          const currentBorder = el.style.borderColor || '#363B4C'
-          const currentAlpha = parseColor(currentBorder).alpha
-          el.style.borderColor = hexToRgba(val, currentAlpha)
+          if (val === 'transparent' || val === 'none') {
+            el.style.borderColor = 'transparent'
+          } else {
+            const currentBorder = el.style.borderColor || '#363B4C'
+            let currentAlpha = parseColor(currentBorder).alpha
+            if (currentAlpha === 0 || currentAlpha === undefined) currentAlpha = 100
+            const alphaToUse = (parsed.alpha !== undefined && parsed.alpha < 100) ? parsed.alpha : currentAlpha
+            el.style.borderColor = hexToRgba(parsed.hex, alphaToUse)
+          }
         })
         if (selectedElement.value?.type === 'group') {
           if (!selectedElement.value.style) selectedElement.value.style = {}
@@ -814,8 +1256,17 @@ export function useSidebarShapeFormat(
         }
       } else {
         if (!selectedElement.value) return
-        const alpha = borderAlpha.value
-        getStyle().borderColor = hexToRgba(val, alpha)
+        if (val === 'transparent' || val === 'none') {
+          getStyle().borderColor = 'transparent'
+        } else {
+          const parsed = parseColor(val)
+          let alpha = borderAlpha.value
+          if (alpha === 0 || alpha === undefined) alpha = 100
+          if (parsed.alpha !== undefined && parsed.alpha < 100) {
+            alpha = parsed.alpha
+          }
+          getStyle().borderColor = hexToRgba(parsed.hex, alpha)
+        }
       }
       addHistorySnapshot()
     }
@@ -828,8 +1279,9 @@ export function useSidebarShapeFormat(
     },
     set(val: number) {
       if (!selectedElement.value) return
-      const hex = borderHex.value
+      const hex = (borderHex.value && borderHex.value !== 'transparent') ? borderHex.value : '#363B4C'
       getStyle().borderColor = hexToRgba(hex, val)
+      addHistorySnapshot()
     }
   })
 
@@ -1305,6 +1757,9 @@ export function useSidebarShapeFormat(
     updateGradientConfig,
     updateElementGradient,
     shapePatternFill,
+    shapePatternType,
+    shapePatternFg,
+    shapePatternBg,
     handleShapePatternUpload,
     clearShapePatternFill,
     styleBorderStyle,