jvs-ppt-ui 0.0.15 → 0.0.16

package/src/components/canvas/elements/CanvasShapeElement.vue

@@ -2,6 +2,8 @@
 import { computed, ref, watch, onBeforeUnmount, nextTick } from 'vue'
 import {
   getElementPattern,
+  isElementPatternTile,
+  getElementPatternTileSize,
   getElementGradientConfig,
   getElementGradientCss,
   getSvgGradientCoords,
@@ -24,7 +26,8 @@ import { createTextSelectionOverlay, type TextSelectionOverlayHandle } from '../
 
 const { shapeFormatPainter, isReadonly } = useSlides()
 const isTextPaintActive = computed(() => !!(shapeFormatPainter.value && shapeFormatPainter.value.mode === 'text-range'))
-const isTextSelectable = computed(() => (props.isEditingText && props.selectedElementId === props.element.id) || isTextPaintActive.value)
+const svgIdKey = computed(() => props.isReflection ? `${props.element.id}-refl` : `${props.element.id}`)
+const isTextSelectable = computed(() => !props.isReflection && ((props.isEditingText && props.selectedElementId === props.element.id) || isTextPaintActive.value))
 
 function getEffectiveBorderWidth(el: any): number {
   if (props.isImagePlaceholder && props.isImagePlaceholder(el) && el.style?.enableBorder !== true) return 0
@@ -35,6 +38,23 @@ function getEffectiveBorderWidth(el: any): number {
   return 0
 }
 
+function getShapePatternTransform(el: any, isTriangle = false): string | undefined {
+  if (!el || !isElementPatternTile(el)) return undefined
+  const { width, height } = getElementWidthHeight(el)
+  if (isTriangle) {
+    const sx = width > 0 ? 100 / width : 1
+    const sy = height > 0 ? 100 / height : 1
+    return `scale(${sx}, ${sy})`
+  }
+  const vbW = el.viewBox ? el.viewBox[0] : (width || 200)
+  const vbH = el.viewBox ? el.viewBox[1] : (height || 200)
+  const hasBorder = hasElementBorder(el)
+  const bw = hasBorder ? getEffectiveBorderWidth(el) : 0
+  const effW = bw > 0 ? Math.max(1, width - bw) : Math.max(1, width)
+  const effH = bw > 0 ? Math.max(1, height - bw) : Math.max(1, height)
+  return `scale(${vbW / effW}, ${vbH / effH})`
+}
+
 function getShapeSvgTransform(el: any): string | undefined {
   if (!el) return undefined
   const { width, height } = getElementWidthHeight(el)
@@ -65,7 +85,7 @@ function getShapeSvgTransform(el: any): string | undefined {
 function getEffectiveBorderColor(el: any, fallback = '#10b981'): string {
   if (props.isImagePlaceholder && props.isImagePlaceholder(el) && el.style?.enableBorder !== true) return 'transparent'
   if (el.style?.enableBorder === false) return 'transparent'
-  if (hasElementBorderGradient(el)) return `url(#shape-border-gradient-${el.id})`
+  if (hasElementBorderGradient(el)) return `url(#shape-border-gradient-${svgIdKey.value})`
   return el.style?.borderColor || getElementBorderColor(el) || fallback
 }
 
@@ -102,22 +122,32 @@ function isRectShape(el: any): boolean {
 
 function getRectRadiusInVb(el: any): { rx: number; ry: number } {
   if (!el) return { rx: 0, ry: 0 }
+  const { width, height } = getElementWidthHeight(el)
   let r = 0
+  const isRoundRect = el.pathFormula === 'roundRect' || el.shapType === 'roundRect' || el.title === '圆角矩形'
   const rVal = el.style?.borderRadius !== undefined && el.style?.borderRadius !== null && el.style?.borderRadius !== ''
     ? el.style.borderRadius
     : el.radius
 
-  if (rVal !== undefined && rVal !== null && rVal !== '') {
+  if (isRoundRect && Array.isArray(el.keypoints) && el.keypoints[0] !== undefined && el.keypoints[0] !== null) {
+    const kp = Number(el.keypoints[0])
+    if (!isNaN(kp)) {
+      r = Math.min(width, height) * Math.max(0, Math.min(0.5, kp))
+    }
+  } else if (isRoundRect && el.keypoints && typeof el.keypoints === 'object' && !Array.isArray(el.keypoints) && (el.keypoints as any).adj !== undefined) {
+    const adj = Number((el.keypoints as any).adj)
+    if (!isNaN(adj)) {
+      r = Math.min(width, height) * Math.max(0, Math.min(0.5, adj * 0.5))
+    }
+  } else if (rVal !== undefined && rVal !== null && rVal !== '') {
     const parsed = parseFloat(String(rVal))
     if (!isNaN(parsed)) r = parsed
-  } else if (el.pathFormula === 'roundRect' || el.shapType === 'roundRect') {
-    const { width, height } = getElementWidthHeight(el)
-    r = Math.min(width, height) * 0.15
+  } else if (isRoundRect) {
+    r = Math.min(width, height) * 0.125
   }
 
   if (r <= 0) return { rx: 0, ry: 0 }
 
-  const { width, height } = getElementWidthHeight(el)
   const { w: vbW, h: vbH } = getShapeVb(el)
 
   const maxR = Math.min(width, height) / 2
@@ -146,6 +176,7 @@ const props = defineProps<{
   getElementTextShadow?: (el: any) => string
   getReflectionLeadingCompensation?: (el: any) => number
   isImagePlaceholder?: (el: any) => boolean
+  isReflection?: boolean
   // 直接父盒子（组合）的像素尺寸，用于把 % 样式的宽高解析成 px。
   // 由 CanvasGroupElement 传入；顶层元素不传，走 px 样式分支。
   parentWidthPx?: number
@@ -345,9 +376,9 @@ function formatShapeHtml(el: any): string {
         height: '100%',
         backgroundColor: getElementPattern(element) ? 'transparent' : ((getElementGradientCss(element) || (getElementFill(element) !== undefined && getElementFill(element) !== 'none')) ? (getElementGradientCss(element) ? 'transparent' : getElementFill(element)) : (getElementFill(element) === 'none' ? 'transparent' : '#3b82f6')),
         backgroundImage: getElementPattern(element) ? `url('${getElementPattern(element)}')` : (getElementGradientCss(element) || 'none'),
-        backgroundSize: getElementPattern(element) ? 'cover' : undefined,
-        backgroundPosition: getElementPattern(element) ? 'center center' : undefined,
-        backgroundRepeat: getElementPattern(element) ? 'no-repeat' : undefined,
+        backgroundSize: getElementPattern(element) ? (isElementPatternTile(element) ? `${getElementPatternTileSize(element).w}px ${getElementPatternTileSize(element).h}px` : 'cover') : undefined,
+        backgroundPosition: getElementPattern(element) ? (isElementPatternTile(element) ? '0 0' : 'center center') : undefined,
+        backgroundRepeat: getElementPattern(element) ? (isElementPatternTile(element) ? 'repeat' : 'no-repeat') : undefined,
         borderRadius: '50%',
         borderWidth: (isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true)
           ? '0px'
@@ -375,7 +406,7 @@ function formatShapeHtml(el: any): string {
         <defs v-if="getElementBorderGradientConfig(element)">
           <radialGradient
             v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-            :id="`shape-border-gradient-${element.id}`"
+            :id="`shape-border-gradient-${svgIdKey}`"
             :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
             :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
             :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
@@ -392,7 +423,7 @@ function formatShapeHtml(el: any): string {
           </radialGradient>
           <linearGradient
             v-else
-            :id="`shape-border-gradient-${element.id}`"
+            :id="`shape-border-gradient-${svgIdKey}`"
             :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
             :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
             :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
@@ -430,13 +461,26 @@ function formatShapeHtml(el: any): string {
         :style="{ filter: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
       >
         <defs>
-          <pattern v-if="getElementPattern(element)" :id="`shape-pattern-${element.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-            <image :href="getElementPattern(element)" width="1" height="1" preserveAspectRatio="none" />
+          <pattern
+            v-if="getElementPattern(element)"
+            :id="`shape-pattern-${svgIdKey}`"
+            :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : '100%'"
+            :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : '100%'"
+            :patternUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+            :patternContentUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+            :patternTransform="getShapePatternTransform(element, true)"
+          >
+            <image
+              :href="getElementPattern(element)"
+              :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : 1"
+              :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : 1"
+              preserveAspectRatio="none"
+            />
           </pattern>
           <template v-if="getElementGradientConfig(element)">
             <radialGradient
               v-if="getElementGradientConfig(element)!.path && getElementGradientConfig(element)!.path !== 'line'"
-              :id="`shape-gradient-${element.id}`"
+              :id="`shape-gradient-${svgIdKey}`"
               :cx="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.x * 100) : 50}%`"
               :cy="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.y * 100) : 50}%`"
               :r="getElementGradientConfig(element)!.path === 'rect' ? '60%' : (getElementGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
@@ -453,7 +497,7 @@ function formatShapeHtml(el: any): string {
             </radialGradient>
             <linearGradient
               v-else
-              :id="`shape-gradient-${element.id}`"
+              :id="`shape-gradient-${svgIdKey}`"
               :x1="getSvgGradientCoords(element).x1"
               :y1="getSvgGradientCoords(element).y1"
               :x2="getSvgGradientCoords(element).x2"
@@ -471,7 +515,7 @@ function formatShapeHtml(el: any): string {
           <template v-if="getElementBorderGradientConfig(element)">
             <radialGradient
               v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-              :id="`shape-border-gradient-${element.id}`"
+              :id="`shape-border-gradient-${svgIdKey}`"
               :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
               :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
               :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
@@ -488,7 +532,7 @@ function formatShapeHtml(el: any): string {
             </radialGradient>
             <linearGradient
               v-else
-              :id="`shape-border-gradient-${element.id}`"
+              :id="`shape-border-gradient-${svgIdKey}`"
               :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
               :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
               :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
@@ -506,7 +550,7 @@ function formatShapeHtml(el: any): string {
         </defs>
         <polygon
           points="50,0 0,100 100,100"
-          :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${element.id})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${element.id})` : (element.style?.fill !== undefined ? element.style.fill : '#f59e0b'))) : 'none'"
+          :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (element.style?.fill !== undefined ? element.style.fill : '#f59e0b'))) : 'none'"
           :stroke="getEffectiveBorderColor(element, '#d97706')"
           :stroke-width="getEffectiveBorderWidth(element)"
           :stroke-dasharray="element.style?.borderStyle === 'dashed' ? '5 5' : ''"
@@ -525,13 +569,26 @@ function formatShapeHtml(el: any): string {
         :style="{ filter: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
       >
         <defs>
-          <pattern v-if="getElementPattern(element)" :id="`shape-pattern-${element.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-            <image :href="getElementPattern(element)" width="1" height="1" preserveAspectRatio="none" />
+          <pattern
+            v-if="getElementPattern(element)"
+            :id="`shape-pattern-${svgIdKey}`"
+            :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : '100%'"
+            :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : '100%'"
+            :patternUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+            :patternContentUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+            :patternTransform="getShapePatternTransform(element, false)"
+          >
+            <image
+              :href="getElementPattern(element)"
+              :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : 1"
+              :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : 1"
+              preserveAspectRatio="none"
+            />
           </pattern>
           <template v-if="getElementGradientConfig(element)">
             <radialGradient
               v-if="getElementGradientConfig(element)!.path && getElementGradientConfig(element)!.path !== 'line'"
-              :id="`shape-gradient-${element.id}`"
+              :id="`shape-gradient-${svgIdKey}`"
               :cx="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.x * 100) : 50}%`"
               :cy="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.y * 100) : 50}%`"
               :r="getElementGradientConfig(element)!.path === 'rect' ? '60%' : (getElementGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
@@ -548,7 +605,7 @@ function formatShapeHtml(el: any): string {
             </radialGradient>
             <linearGradient
               v-else
-              :id="`shape-gradient-${element.id}`"
+              :id="`shape-gradient-${svgIdKey}`"
               :x1="getSvgGradientCoords(element).x1"
               :y1="getSvgGradientCoords(element).y1"
               :x2="getSvgGradientCoords(element).x2"
@@ -566,7 +623,7 @@ function formatShapeHtml(el: any): string {
           <template v-if="getElementBorderGradientConfig(element)">
             <radialGradient
               v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-              :id="`shape-border-gradient-${element.id}`"
+              :id="`shape-border-gradient-${svgIdKey}`"
               :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
               :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
               :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
@@ -583,7 +640,7 @@ function formatShapeHtml(el: any): string {
             </radialGradient>
             <linearGradient
               v-else
-              :id="`shape-border-gradient-${element.id}`"
+              :id="`shape-border-gradient-${svgIdKey}`"
               :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
               :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
               :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
@@ -611,7 +668,7 @@ function formatShapeHtml(el: any): string {
             :rx="getRectRadiusInVb(element).rx"
             :ry="getRectRadiusInVb(element).ry"
             vector-effect="non-scaling-stroke"
-            :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${element.id})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${element.id})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : 'none'"
+            :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : 'none'"
             :stroke="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 'none' : (element.style?.enableBorder === false ? 'none' : getEffectiveBorderColor(element, 'none'))"
             :stroke-width="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 0 : (element.style?.enableBorder === false ? 0 : getElementBorderWidth(element))"
             :stroke-linecap="element.style?.strokeLinecap || element.borderLineCap || element.lineCap || (element.shapType === 'arc' ? 'round' : (isOpenLineShape(element) ? 'butt' : undefined))"
@@ -621,7 +678,7 @@ function formatShapeHtml(el: any): string {
             v-else
             vector-effect="non-scaling-stroke"
             :d="element.path || element.content"
-            :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${element.id})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${element.id})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : 'none'"
+            :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : 'none'"
             :stroke="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 'none' : (element.style?.enableBorder === false ? 'none' : getEffectiveBorderColor(element, 'none'))"
             :stroke-width="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 0 : (element.style?.enableBorder === false ? 0 : getElementBorderWidth(element))"
             :stroke-linecap="element.style?.strokeLinecap || element.borderLineCap || element.lineCap || (element.shapType === 'arc' ? 'round' : (isOpenLineShape(element) ? 'butt' : undefined))"
@@ -649,9 +706,9 @@ function formatShapeHtml(el: any): string {
         height: '100%',
         backgroundColor: getElementPattern(element) ? 'transparent' : ((isImagePlaceholder && isImagePlaceholder(element) && !getElementGradientCss(element)) ? getImagePlaceholderFill(element) : ((getElementGradientCss(element) || (getElementFill(element) !== undefined && getElementFill(element) !== 'none')) ? (getElementGradientCss(element) ? 'transparent' : getElementFill(element)) : (getElementFill(element) === 'none' ? 'transparent' : '#10b981'))),
         backgroundImage: getElementPattern(element) ? `url('${getElementPattern(element)}')` : (getElementGradientCss(element) || 'none'),
-        backgroundSize: getElementPattern(element) ? 'cover' : undefined,
-        backgroundPosition: getElementPattern(element) ? 'center center' : undefined,
-        backgroundRepeat: getElementPattern(element) ? 'no-repeat' : undefined,
+        backgroundSize: getElementPattern(element) ? (isElementPatternTile(element) ? `${getElementPatternTileSize(element).w}px ${getElementPatternTileSize(element).h}px` : 'cover') : undefined,
+        backgroundPosition: getElementPattern(element) ? (isElementPatternTile(element) ? '0 0' : 'center center') : undefined,
+        backgroundRepeat: getElementPattern(element) ? (isElementPatternTile(element) ? 'repeat' : 'no-repeat') : undefined,
         borderRadius: (isImagePlaceholder && isImagePlaceholder(element)) ? getImagePlaceholderRadius(element) : (element.style?.borderRadius !== undefined ? (typeof element.style.borderRadius === 'number' ? `${element.style.borderRadius}px` : element.style.borderRadius) : (element.radius ? `${element.radius}px` : '0px')),
         borderWidth: (isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true)
           ? '0px'
@@ -677,7 +734,7 @@ function formatShapeHtml(el: any): string {
         <defs v-if="getElementBorderGradientConfig(element)">
           <radialGradient
             v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-            :id="`shape-border-gradient-${element.id}`"
+            :id="`shape-border-gradient-${svgIdKey}`"
             :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
             :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
             :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
@@ -694,7 +751,7 @@ function formatShapeHtml(el: any): string {
           </radialGradient>
           <linearGradient
             v-else
-            :id="`shape-border-gradient-${element.id}`"
+            :id="`shape-border-gradient-${svgIdKey}`"
             :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
             :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
             :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
@@ -759,7 +816,7 @@ function formatShapeHtml(el: any): string {
       }">
         <div
           ref="shapeEditableRef"
-          :id="`editable-${element.id}`"
+          :id="isReflection ? undefined : `editable-${element.id}`"
           :contenteditable="isTextSelectable ? 'true' : 'false'"
           @mousedown="isTextSelectable ? $event.stopPropagation() : null"
           @click="isTextSelectable ? $event.stopPropagation() : null"
@@ -784,7 +841,7 @@ function formatShapeHtml(el: any): string {
             boxSizing: 'content-box',
             overflow: 'wrap',
             wordBreak: 'break-word',
-            pointerEvents: isTextSelectable ? 'auto' : (getRawText(element).trim() ? 'auto' : 'none'),
+            pointerEvents: isReflection ? 'none' : (isTextSelectable ? 'auto' : (getRawText(element).trim() ? 'auto' : 'none')),
             cursor: isTextSelectable ? 'text' : undefined,
             userSelect: isTextSelectable ? 'text' : 'none',
             color: element.style?.textColor || element.style?.color || element.textColor || ((isImagePlaceholder && isImagePlaceholder(element)) ? '#6366f1' : (element.style?.fill === '#ffffff' || element.style?.fill === '#FFFFFF' ? '#475569' : (themeRecipe?.shape?.textColor || '#ffffff'))),

package/src/components/sidebar/common/SidebarBorderAccordion.vue

@@ -250,8 +250,8 @@ function onBorderWidthBlur(e: Event) {
 }
 
 .shape-accordion-header-label {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 400;
   color: #1e293b;
   display: flex;
   align-items: center;

package/src/components/sidebar/common/SidebarReflectionAccordion.vue

@@ -297,8 +297,8 @@ function onOpacityBlur(e: Event) {
 }
 
 .shape-accordion-header-label {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 400;
   color: #1e293b;
   display: flex;
   align-items: center;

package/src/components/sidebar/common/SidebarShadowAccordion.vue

@@ -481,8 +481,8 @@ function onAlphaBlur(e: Event) {
 }
 
 .shape-accordion-header-label {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 400;
   color: #1e293b;
   display: flex;
   align-items: center;

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

@@ -229,7 +229,7 @@ function toggleFillSwitch(val: any) {
       <div class="shape-property-row"
         style="display: flex; align-items: center; justify-content: space-between; gap: 8px; height: auto;">
         <span class="shape-property-label" style="flex-shrink: 0; width: 64px; text-align: left;">图表类型</span>
-        <el-popover placement="bottom" :width="380" trigger="click" popper-class="chart-popover-popper"
+        <el-popover placement="bottom" :width="568" trigger="click" popper-class="chart-popover-popper"
           v-model:visible="chartTypePopoverVisible" :show-arrow="false">
           <template #reference>
             <div
@@ -477,8 +477,8 @@ function toggleFillSwitch(val: any) {
 }
 
 .shape-accordion-header-label {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 400;
   color: var(--text-primary);
   display: flex;
   align-items: center;

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

@@ -7,7 +7,7 @@ import QuickColorPopover from '../../QuickColorPopover.vue'
 import GradientEditor from './GradientEditor.vue'
 import { useSlides, gradientPresets, normalizeSlideBackground } from '../../../composables/useSlides'
 import { SYS_FONTS } from '../../../configs/fonts'
-import { PATTERN_PRESETS, parseColor, generateGradientEndColor } from '../../../composables/sidebar/useSidebarShapeFormat'
+import { PATTERN_PRESETS, parseColor, hexToRgba, generateGradientEndColor, buildPatternSvgDataUrl, parsePatternSvgMeta } from '../../../composables/sidebar/useSidebarShapeFormat'
 
 const props = defineProps<{
   designActiveTab: string
@@ -81,6 +81,8 @@ const quickRecentColors = ref<string[]>([])
 const globalFontColorPopoverVisible = ref(false)
 const globalBorderColorPopoverVisible = ref(false)
 const bgColorPopoverVisible = ref(false)
+const bgPatternFgPopoverVisible = ref(false)
+const bgPatternBgPopoverVisible = ref(false)
 const isCustomColorPickerOpen = ref(false)
 
 // 画布尺寸下拉 Popover 状态
@@ -399,8 +401,11 @@ const bgFillType = computed({
           if (isExistingSvgPattern && existingUrl) {
             activeSlide.value.background = `url("${existingUrl}") left top / auto repeat`
           } else {
-            const defaultPattern = PATTERN_PRESETS[0]?.url || ''
-            activeSlide.value.background = defaultPattern ? `url("${defaultPattern}") left top / auto repeat` : ''
+            const pType = (activeSlide.value as any).bgPatternType || 'dots-sparse'
+            const pFg = (activeSlide.value as any).bgPatternFg || '#3B82F6'
+            const pBg = (activeSlide.value as any).bgPatternBg || '#FFFFFF'
+            const patUrl = buildPatternSvgDataUrl(pType, pFg, pBg)
+            activeSlide.value.background = `url("${patUrl}") left top / auto repeat`
           }
         }
       }
@@ -555,6 +560,80 @@ const bgImagePreviewStyle = computed(() => {
   }
 })
 
+const activeBgPatternMeta = computed(() => {
+  const rawUrl = extractUrlFromBgCss(activeSlide.value?.background)
+  return parsePatternSvgMeta(rawUrl)
+})
+
+const activeBgPatternType = computed(() => {
+  return (activeSlide.value as any)?.bgPatternType || activeBgPatternMeta.value.type || 'dots-sparse'
+})
+
+const activeBgPatternFg = computed(() => {
+  return (activeSlide.value as any)?.bgPatternFg || activeBgPatternMeta.value.fg || '#3B82F6'
+})
+
+const activeBgPatternBg = computed(() => {
+  return (activeSlide.value as any)?.bgPatternBg || activeBgPatternMeta.value.bg || '#FFFFFF'
+})
+
+const parsedBgPatternFg = computed(() => parseColor(activeBgPatternFg.value))
+const parsedBgPatternBg = computed(() => parseColor(activeBgPatternBg.value))
+
+function getBgPatternPresetPreviewUrl(p: { key: string; url: string }) {
+  return buildPatternSvgDataUrl(p.key, activeBgPatternFg.value, activeBgPatternBg.value)
+}
+
+function isBgPatternPresetActive(p: { key: string; url: string }) {
+  return activeBgPatternType.value === p.key
+}
+
+function applyBgPattern(type: string, fg: string, bg: string) {
+  if (!activeSlide.value) return
+  ;(activeSlide.value as any).bgPatternType = type
+  ;(activeSlide.value as any).bgPatternFg = fg
+  ;(activeSlide.value as any).bgPatternBg = bg
+  ;(activeSlide.value as any).isPattern = true
+  const patUrl = buildPatternSvgDataUrl(type, fg, bg)
+  activeSlide.value.background = `url("${patUrl}") left top / auto repeat`
+  activeSlide.value.bgType = 'image'
+  addHistorySnapshot()
+}
+
+function selectBgPatternPreset(p: { key: string; url: string }) {
+  applyBgPattern(p.key, activeBgPatternFg.value, activeBgPatternBg.value)
+}
+
+function onSelectBgPatternFgColor(color: string) {
+  const fg = (!color || color === 'transparent' || color === 'none') ? 'transparent' : color
+  applyBgPattern(activeBgPatternType.value, fg, activeBgPatternBg.value)
+}
+
+function handleBgPatternFgOpacityInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  let val = parseInt(target.value)
+  if (isNaN(val)) val = 100
+  val = Math.max(0, Math.min(100, val))
+  const hex = parsedBgPatternFg.value.hex === 'transparent' ? '#3B82F6' : parsedBgPatternFg.value.hex
+  const fg = val === 0 ? 'transparent' : (val === 100 ? hex : hexToRgba(hex, val))
+  applyBgPattern(activeBgPatternType.value, fg, activeBgPatternBg.value)
+}
+
+function onSelectBgPatternBgColor(color: string) {
+  const bg = (!color || color === 'transparent' || color === 'none') ? 'transparent' : color
+  applyBgPattern(activeBgPatternType.value, activeBgPatternFg.value, bg)
+}
+
+function handleBgPatternBgOpacityInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  let val = parseInt(target.value)
+  if (isNaN(val)) val = 100
+  val = Math.max(0, Math.min(100, val))
+  const hex = parsedBgPatternBg.value.hex === 'transparent' ? '#FFFFFF' : parsedBgPatternBg.value.hex
+  const bg = val === 0 ? 'transparent' : (val === 100 ? hex : hexToRgba(hex, val))
+  applyBgPattern(activeBgPatternType.value, activeBgPatternFg.value, bg)
+}
+
 const bgFileInputRef = ref<HTMLInputElement | null>(null)
 const uploadBgImage = () => {
   bgFileInputRef.value?.click()
@@ -1042,7 +1121,7 @@ watch(extractTab, () => {
             </svg>
           </button>
           <button type="button" class="fill-type-icon-btn" :class="{ active: activeBgTab === 'pattern' }"
-            @click="selectBgTab('pattern')" title="纹理填充">
+            @click="selectBgTab('pattern')" title="图案填充">
             <svg viewBox="0 0 18 18" width="18" height="18">
               <defs>
                 <pattern id="bgFillBarPattern" width="4" height="4" patternUnits="userSpaceOnUse"
@@ -1141,12 +1220,68 @@ watch(extractTab, () => {
           </div>
         </div>
 
-        <!-- 纹理填充卡片 -->
+        <!-- 图案填充卡片 -->
         <template v-else-if="isPatternBg">
-          <div class="pattern-presets-grid" style="margin-bottom: 8px;">
-            <div v-for="p in PATTERN_PRESETS" :key="p.name" class="pattern-preset-card"
-              :class="{ active: bgImageUrl === p.url }" :title="p.name" :style="{ backgroundImage: `url(${p.url})` }"
-              @click="bgImageUrl = p.url"></div>
+          <div class="pattern-fill-container">
+            <div class="pattern-presets-grid">
+              <div v-for="p in PATTERN_PRESETS" :key="p.key" class="pattern-preset-card"
+                :class="{ active: isBgPatternPresetActive(p) }" :title="p.name"
+                :style="{ backgroundImage: `url('${getBgPatternPresetPreviewUrl(p)}')` }"
+                @click="selectBgPatternPreset(p)"></div>
+            </div>
+
+            <!-- 前景 / 背景 颜色选择 (对齐 PPT / WPS 图案填充) -->
+            <div class="pattern-colors-section">
+              <div class="pattern-color-row">
+                <span class="pattern-color-label">前景</span>
+                <div class="full-color-pill" style="flex: 1;">
+                  <QuickColorPopover v-model:visible="bgPatternFgPopoverVisible"
+                    :color="parsedBgPatternFg.hex === 'transparent' ? '#3B82F6' : parsedBgPatternFg.hex"
+                    :alpha="parsedBgPatternFg.alpha" v-model:recentColors="quickRecentColors"
+                    @select-color="onSelectBgPatternFgColor">
+                    <template #reference>
+                      <div class="color-left-info">
+                        <div class="color-square-preview"
+                          :style="{ backgroundColor: parsedBgPatternFg.hex === 'transparent' ? 'transparent' : parsedBgPatternFg.hex }">
+                        </div>
+                        <span class="color-hex-text">{{ formatHexDisplay(parsedBgPatternFg.hex) }}</span>
+                      </div>
+                    </template>
+                  </QuickColorPopover>
+                  <div class="color-opacity-input-wrapper" @click.stop title="前景不透明度">
+                    <input type="number" class="color-opacity-num-input" :value="parsedBgPatternFg.alpha" min="0"
+                      max="100" @input="handleBgPatternFgOpacityInput"
+                      @keydown.enter="($event.target as HTMLElement).blur()" />
+                    <span class="percent-unit">%</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="pattern-color-row">
+                <span class="pattern-color-label">背景</span>
+                <div class="full-color-pill" style="flex: 1;">
+                  <QuickColorPopover v-model:visible="bgPatternBgPopoverVisible"
+                    :color="parsedBgPatternBg.hex === 'transparent' ? '#FFFFFF' : parsedBgPatternBg.hex"
+                    :alpha="parsedBgPatternBg.alpha" v-model:recentColors="quickRecentColors"
+                    @select-color="onSelectBgPatternBgColor">
+                    <template #reference>
+                      <div class="color-left-info">
+                        <div class="color-square-preview"
+                          :style="{ backgroundColor: parsedBgPatternBg.hex === 'transparent' ? 'transparent' : parsedBgPatternBg.hex }">
+                        </div>
+                        <span class="color-hex-text">{{ formatHexDisplay(parsedBgPatternBg.hex) }}</span>
+                      </div>
+                    </template>
+                  </QuickColorPopover>
+                  <div class="color-opacity-input-wrapper" @click.stop title="背景不透明度">
+                    <input type="number" class="color-opacity-num-input" :value="parsedBgPatternBg.alpha" min="0"
+                      max="100" @input="handleBgPatternBgOpacityInput"
+                      @keydown.enter="($event.target as HTMLElement).blur()" />
+                    <span class="percent-unit">%</span>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </template>
 
@@ -2072,6 +2207,32 @@ watch(extractTab, () => {
   user-select: none;
 }
 
+.pattern-fill-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.pattern-colors-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 2px;
+}
+
+.pattern-color-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pattern-color-label {
+  width: 36px;
+  font-size: 13px;
+  color: #475569;
+  flex-shrink: 0;
+}
+
 .pattern-presets-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);