jvs-ppt-ui 0.0.14 → 0.0.16

package/src/components/PresentationMode.vue

@@ -16,7 +16,9 @@ import {
   hasElementBorderGradient,
   getElementBorderGradientCss,
   getGradientAngleDeg,
-  getSvgGradientCoords
+  getSvgGradientCoords,
+  isElementPatternTile,
+  getElementPatternTileSize
 } from '../utils/canvas/elementStyles'
 import {
   getLineElementPath, getLineElementRenderPath, getLineDashArray, getSvgWidth, getSvgHeight, isEllipseShape
@@ -532,6 +534,22 @@ function getElementWidthHeight(el: any) {
   return { width, height }
 }
 
+function getShapePatternTransform(el: any, isTriangle = false): string | undefined {
+  if (!isElementPatternTile(el)) return undefined
+  const dim = getElementWidthHeight(el)
+  const w = Math.max(1, dim.width || 100)
+  const h = Math.max(1, dim.height || 100)
+  if (isTriangle) {
+    return `scale(${+(100 / w).toFixed(4)}, ${+(100 / h).toFixed(4)})`
+  }
+  const vbW = el.viewBox ? el.viewBox[0] : 200
+  const vbH = el.viewBox ? el.viewBox[1] : 200
+  const bw = el.shapType === 'arc' ? 0 : (el.style?.borderWidth ? parseFloat(el.style.borderWidth) : 2)
+  const effW = Math.max(1, w - bw)
+  const effH = Math.max(1, h - bw)
+  return `scale(${+(vbW / effW).toFixed(4)}, ${+(vbH / effH).toFixed(4)})`
+}
+
 function parseColorString(fill: any, fallback = 'none'): string {
   if (!fill) return fallback
   if (typeof fill === 'string') return fill
@@ -1120,14 +1138,17 @@ function getSafeShapeText(el: any): string {
               <svg v-if="el.path || (el.content && (el.content.trim().startsWith('M') || el.content.trim().startsWith('m')))"
                 :viewBox="`0 0 ${el.viewBox ? el.viewBox[0] : (el.width || 200)} ${el.viewBox ? el.viewBox[1] : (el.height || 200)}`"
                 preserveAspectRatio="none" style="width: 100%; height: 100%; display: block; overflow: visible;">
-                <defs v-if="getElementPattern(el)">
-                  <pattern :id="`pres-master-pat-${slide.id || activeIndex}-${el.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-                    <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
-                  </pattern>
-                </defs>
                 <defs>
-                  <pattern v-if="getElementPattern(el)" :id="`pres-master-pat-${slide.id || activeIndex}-${el.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-                    <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+                  <pattern v-if="getElementPattern(el)" :id="`pres-master-pat-${slide.id || activeIndex}-${el.id}`"
+                    :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : '100%'"
+                    :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : '100%'"
+                    :patternUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                    :patternContentUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                    :patternTransform="getShapePatternTransform(el, false)">
+                    <image :href="getElementPattern(el)"
+                      :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : 1"
+                      :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : 1"
+                      preserveAspectRatio="none" />
                   </pattern>
                   <template v-if="getElementGradientConfig(el)">
                     <radialGradient v-if="getElementGradientConfig(el)!.path && getElementGradientConfig(el)!.path !== 'line'"
@@ -1169,7 +1190,9 @@ function getSafeShapeText(el: any): string {
               <div v-else :style="{
                 backgroundColor: getElementPattern(el) ? 'transparent' : ((getElementGradientCss(el) || (getElementFill(el) !== undefined && getElementFill(el) !== 'none')) ? (getElementGradientCss(el) ? 'transparent' : getElementFill(el)) : (getElementFill(el) === 'none' ? 'transparent' : '#3b82f6')),
                 backgroundImage: getElementPattern(el) ? `url('${getElementPattern(el)}')` : (getElementGradientCss(el) || 'none'),
-                backgroundSize: getElementPattern(el) ? 'cover' : undefined,
+                backgroundSize: getElementPattern(el) ? (isElementPatternTile(el) ? `${getElementPatternTileSize(el).w}px ${getElementPatternTileSize(el).h}px` : 'cover') : undefined,
+                backgroundPosition: getElementPattern(el) ? (isElementPatternTile(el) ? '0 0' : 'center center') : undefined,
+                backgroundRepeat: getElementPattern(el) ? (isElementPatternTile(el) ? 'repeat' : 'no-repeat') : undefined,
                 width: '100%',
                 height: '100%',
                 borderRadius: el.style?.borderRadius || '0px',
@@ -1321,9 +1344,9 @@ function getSafeShapeText(el: any): string {
                   height: '100%',
                   backgroundColor: getElementPattern(el) ? 'transparent' : ((getElementGradientCss(el) || (getElementFill(el) !== undefined && getElementFill(el) !== 'none')) ? (getElementGradientCss(el) ? 'transparent' : getElementFill(el)) : (getElementFill(el) === 'none' ? 'transparent' : '#3b82f6')),
                   backgroundImage: getElementPattern(el) ? `url('${getElementPattern(el)}')` : (getElementGradientCss(el) || 'none'),
-                  backgroundSize: getElementPattern(el) ? 'cover' : undefined,
-                  backgroundPosition: getElementPattern(el) ? 'center center' : undefined,
-                  backgroundRepeat: getElementPattern(el) ? 'no-repeat' : undefined,
+                  backgroundSize: getElementPattern(el) ? (isElementPatternTile(el) ? `${getElementPatternTileSize(el).w}px ${getElementPatternTileSize(el).h}px` : 'cover') : undefined,
+                  backgroundPosition: getElementPattern(el) ? (isElementPatternTile(el) ? '0 0' : 'center center') : undefined,
+                  backgroundRepeat: getElementPattern(el) ? (isElementPatternTile(el) ? 'repeat' : 'no-repeat') : undefined,
                   borderRadius: '50%',
                   borderWidth: `${getElementBorderWidth(el)}px`,
                   borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',
@@ -1337,9 +1360,16 @@ function getSafeShapeText(el: any): string {
                     style="width: 100%; height: 100%; display: block; overflow: visible;"
                     :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#pres-shape-inner-shadow-${el.id})` : '' }">
                     <defs>
-                      <pattern v-if="getElementPattern(el)" :id="`pres-main-shape-pattern-${el.id}`" width="100%" height="100%"
-                        patternContentUnits="objectBoundingBox">
-                        <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+                      <pattern v-if="getElementPattern(el)" :id="`pres-main-shape-pattern-${el.id}`"
+                        :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : '100%'"
+                        :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : '100%'"
+                        :patternUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                        :patternContentUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                        :patternTransform="getShapePatternTransform(el, true)">
+                        <image :href="getElementPattern(el)"
+                          :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : 1"
+                          :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : 1"
+                          preserveAspectRatio="none" />
                       </pattern>
                       <template v-if="getElementGradientConfig(el)">
                         <radialGradient
@@ -1394,9 +1424,16 @@ function getSafeShapeText(el: any): string {
                   <svg overflow="visible" style="width: 100%; height: 100%; display: block; overflow: visible;"
                     :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#pres-shape-inner-shadow-${el.id})` : '' }">
                     <defs>
-                      <pattern v-if="getElementPattern(el)" :id="`pres-main-shape-pattern-${el.id}`" width="100%" height="100%"
-                        patternContentUnits="objectBoundingBox">
-                        <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+                      <pattern v-if="getElementPattern(el)" :id="`pres-main-shape-pattern-${el.id}`"
+                        :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : '100%'"
+                        :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : '100%'"
+                        :patternUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                        :patternContentUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                        :patternTransform="getShapePatternTransform(el, false)">
+                        <image :href="getElementPattern(el)"
+                          :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : 1"
+                          :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : 1"
+                          preserveAspectRatio="none" />
                       </pattern>
                       <template v-if="getElementGradientConfig(el)">
                         <radialGradient
@@ -1453,9 +1490,9 @@ function getSafeShapeText(el: any): string {
                   height: '100%',
                   backgroundColor: getElementPattern(el) ? 'transparent' : ((getElementGradientCss(el) || (getElementFill(el) !== undefined && getElementFill(el) !== 'none')) ? (getElementGradientCss(el) ? 'transparent' : getElementFill(el)) : (getElementFill(el) === 'none' ? 'transparent' : '#10b981')),
                   backgroundImage: getElementPattern(el) ? `url('${getElementPattern(el)}')` : (getElementGradientCss(el) || 'none'),
-                  backgroundSize: getElementPattern(el) ? 'cover' : undefined,
-                  backgroundPosition: getElementPattern(el) ? 'center center' : undefined,
-                  backgroundRepeat: getElementPattern(el) ? 'no-repeat' : undefined,
+                  backgroundSize: getElementPattern(el) ? (isElementPatternTile(el) ? `${getElementPatternTileSize(el).w}px ${getElementPatternTileSize(el).h}px` : 'cover') : undefined,
+                  backgroundPosition: getElementPattern(el) ? (isElementPatternTile(el) ? '0 0' : 'center center') : undefined,
+                  backgroundRepeat: getElementPattern(el) ? (isElementPatternTile(el) ? 'repeat' : 'no-repeat') : undefined,
                   borderRadius: el.style?.borderRadius !== undefined ? el.style.borderRadius : '0px',
                   borderWidth: `${getElementBorderWidth(el)}px`,
                   borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',
@@ -1765,9 +1802,9 @@ function getSafeShapeText(el: any): string {
                     height: '100%',
                     backgroundColor: getElementPattern(el) ? 'transparent' : ((getElementGradientCss(el) || (getElementFill(el) !== undefined && getElementFill(el) !== 'none')) ? (getElementGradientCss(el) ? 'transparent' : getElementFill(el)) : (getElementFill(el) === 'none' ? 'transparent' : '#3b82f6')),
                     backgroundImage: getElementPattern(el) ? `url('${getElementPattern(el)}')` : (getElementGradientCss(el) || 'none'),
-                    backgroundSize: getElementPattern(el) ? 'cover' : undefined,
-                    backgroundPosition: getElementPattern(el) ? 'center center' : undefined,
-                    backgroundRepeat: getElementPattern(el) ? 'no-repeat' : undefined,
+                    backgroundSize: getElementPattern(el) ? (isElementPatternTile(el) ? `${getElementPatternTileSize(el).w}px ${getElementPatternTileSize(el).h}px` : 'cover') : undefined,
+                    backgroundPosition: getElementPattern(el) ? (isElementPatternTile(el) ? '0 0' : 'center center') : undefined,
+                    backgroundRepeat: getElementPattern(el) ? (isElementPatternTile(el) ? 'repeat' : 'no-repeat') : undefined,
                     borderRadius: '50%',
                     borderWidth: `${getElementBorderWidth(el)}px`,
                     borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',
@@ -1781,9 +1818,16 @@ function getSafeShapeText(el: any): string {
                       style="width: 100%; height: 100%; display: block; overflow: visible;"
                       :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#pres-shape-inner-shadow-${el.id})` : '' }">
                       <defs>
-                        <pattern v-if="getElementPattern(el)" :id="`pres-shape-pattern-${el.id}`" width="100%" height="100%"
-                          patternContentUnits="objectBoundingBox">
-                          <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+                        <pattern v-if="getElementPattern(el)" :id="`pres-shape-pattern-${el.id}`"
+                          :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : '100%'"
+                          :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : '100%'"
+                          :patternUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                          :patternContentUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                          :patternTransform="getShapePatternTransform(el, true)">
+                          <image :href="getElementPattern(el)"
+                            :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : 1"
+                            :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : 1"
+                            preserveAspectRatio="none" />
                         </pattern>
                         <template v-if="getElementGradientConfig(el)">
                           <radialGradient
@@ -1838,9 +1882,16 @@ function getSafeShapeText(el: any): string {
                     <svg overflow="visible" style="width: 100%; height: 100%; display: block; overflow: visible;"
                       :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#pres-shape-inner-shadow-${el.id})` : '' }">
                       <defs>
-                        <pattern v-if="getElementPattern(el)" :id="`pres-shape-pattern-${el.id}`" width="100%" height="100%"
-                          patternContentUnits="objectBoundingBox">
-                          <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+                        <pattern v-if="getElementPattern(el)" :id="`pres-shape-pattern-${el.id}`"
+                          :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : '100%'"
+                          :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : '100%'"
+                          :patternUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                          :patternContentUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                          :patternTransform="getShapePatternTransform(el, false)">
+                          <image :href="getElementPattern(el)"
+                            :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : 1"
+                            :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : 1"
+                            preserveAspectRatio="none" />
                         </pattern>
                         <template v-if="getElementGradientConfig(el)">
                           <radialGradient
@@ -1897,9 +1948,9 @@ function getSafeShapeText(el: any): string {
                     height: '100%',
                     backgroundColor: getElementPattern(el) ? 'transparent' : ((getElementGradientCss(el) || getElementFill(el) !== undefined) ? (getElementGradientCss(el) ? 'transparent' : getElementFill(el)) : (getElementFill(el) === 'none' ? 'transparent' : '#10b981')),
                     backgroundImage: getElementPattern(el) ? `url('${getElementPattern(el)}')` : (getElementGradientCss(el) || 'none'),
-                    backgroundSize: getElementPattern(el) ? 'cover' : undefined,
-                    backgroundPosition: getElementPattern(el) ? 'center center' : undefined,
-                    backgroundRepeat: getElementPattern(el) ? 'no-repeat' : undefined,
+                    backgroundSize: getElementPattern(el) ? (isElementPatternTile(el) ? `${getElementPatternTileSize(el).w}px ${getElementPatternTileSize(el).h}px` : 'cover') : undefined,
+                    backgroundPosition: getElementPattern(el) ? (isElementPatternTile(el) ? '0 0' : 'center center') : undefined,
+                    backgroundRepeat: getElementPattern(el) ? (isElementPatternTile(el) ? 'repeat' : 'no-repeat') : undefined,
                     borderRadius: '4px',
                     borderWidth: `${getElementBorderWidth(el)}px`,
                     borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',

package/src/components/QuickBorderPopover.vue

@@ -5,15 +5,18 @@ import { useSlides } from '../composables/useSlides'
 interface Props {
   visible: boolean
   color: string
+  alpha?: number
   borderStyle: string
   borderWidth: number
   recentColors?: string[]
   hideHeaderSettings?: boolean
+  offset?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
   recentColors: () => [],
-  hideHeaderSettings: false
+  hideHeaderSettings: false,
+  offset: 4
 })
 
 const emit = defineEmits<{
@@ -150,17 +153,38 @@ async function triggerQuickEyeDropper() {
 const customColorBtnRef = ref()
 const customColorPickerRef = ref()
 
+function getCurrentColor(): string {
+  const col = props.color || '#000000'
+  if (!col || col === 'transparent' || col === 'none') {
+    return 'rgba(0, 0, 0, 0)'
+  }
+  if (props.alpha !== undefined && props.alpha >= 0 && props.alpha <= 100) {
+    const cleanHex = col.trim().replace('#', '')
+    if (cleanHex.length === 6) {
+      const r = parseInt(cleanHex.substring(0, 2), 16) || 0
+      const g = parseInt(cleanHex.substring(2, 4), 16) || 0
+      const b = parseInt(cleanHex.substring(4, 6), 16) || 0
+      return `rgba(${r}, ${g}, ${b}, ${props.alpha / 100})`
+    }
+  }
+  return col
+}
+
 function openCustomColor() {
   customColorBtnRef.value = document.querySelector('.custom-color-trigger-btn')
+  const curColor = getCurrentColor()
   nextTick(() => {
     if (customColorPickerRef.value) {
+      const pickerInstance = customColorPickerRef.value.$el || customColorPickerRef.value
+      if (typeof customColorPickerRef.value.initPickerColor === 'function') {
+        customColorPickerRef.value.initPickerColor(curColor)
+      } else if (pickerInstance && typeof pickerInstance.initPickerColor === 'function') {
+        pickerInstance.initPickerColor(curColor)
+      }
       if (typeof customColorPickerRef.value.openColorPicker === 'function') {
-        customColorPickerRef.value.openColorPicker()
-      } else {
-        const pickerInstance = customColorPickerRef.value.$el || customColorPickerRef.value
-        if (pickerInstance && typeof pickerInstance.openColorPicker === 'function') {
-          pickerInstance.openColorPicker()
-        }
+        customColorPickerRef.value.openColorPicker(curColor)
+      } else if (pickerInstance && typeof pickerInstance.openColorPicker === 'function') {
+        pickerInstance.openColorPicker(curColor)
       }
     }
   })
@@ -185,7 +209,7 @@ defineExpose({
 </script>
 
 <template>
-  <el-popover v-model:visible="popoverVisible" placement="bottom" :width="260" trigger="click"
+  <el-popover v-model:visible="popoverVisible" placement="bottom" :offset="props.offset" :width="260" trigger="click"
     popper-class="quick-color-popover" :show-arrow="false">
     <template #reference>
       <slot name="reference"></slot>
@@ -284,12 +308,13 @@ defineExpose({
 
       <div style="padding: 0px 16px 6px;">
         <!-- Custom Colors -->
-        <jvs-picker-color-v3 ref="customColorPickerRef" :color="props.color" :options="{
+        <jvs-picker-color-v3 ref="customColorPickerRef" :color="getCurrentColor()" :options="{
           openGradual: false,
           pickerButtonRef: customColorBtnRef,
           showFooterBtn: false,
-          popoverWidth: 260,
-          selectorWidth: 260,
+          popoverWidth: 290,
+          selectorWidth: 290,
+          popoverPadding: '12px 16px',
           showHistory: false,
           showCommonColor: false
         }" @change="(val: any) => selectCustomColor(val.hex || val)" @colorShow="emit('color-picker-show')"
@@ -342,6 +367,21 @@ defineExpose({
   border-radius: 8px !important;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
   border: 1px solid #E2E8F0 !important;
+  background: #ffffff !important;
+  z-index: 3000 !important;
+}
+
+:global(.color-picker-popover-box) {
+  z-index: 3100 !important;
+}
+
+:global(.color-picker-popover-box .rgb-color-input) {
+  padding: 0 6px !important;
+}
+
+:global(.color-picker-popover-box .rgb-color-input .el-input__inner) {
+  font-size: 12px !important;
+  padding: 0 2px !important;
 }
 
 .quick-color-square {

package/src/components/QuickColorPopover.vue

@@ -1,22 +1,25 @@
 <script setup lang="ts">
-import { ref, computed, nextTick, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, nextTick, watch, onMounted, onUnmounted, getCurrentInstance } from 'vue'
 import { useSlides } from '../composables/useSlides'
 
 interface Props {
   visible?: boolean
   color?: string
+  alpha?: number
   textBackground?: string
   showTabs?: boolean
   recentColors?: string[]
   themeColors?: string[]
   placement?: string
+  offset?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
   textBackground: 'transparent',
   showTabs: false,
   recentColors: () => [],
-  placement: 'bottom'
+  placement: 'bottom',
+  offset: 4
 })
 
 const emit = defineEmits<{
@@ -69,14 +72,21 @@ onUnmounted(() => {
   document.body.removeEventListener('pointerup', handleBodyBubble)
 })
 
+const internalVisible = ref(false)
+const instance = getCurrentInstance()
+const isControlled = computed(() => {
+  return !!(instance?.vnode.props && ('visible' in instance.vnode.props || 'onUpdate:visible' in instance.vnode.props))
+})
+
 const popoverVisible = computed({
   get() {
-    return props.visible
+    return isControlled.value ? !!props.visible : internalVisible.value
   },
   set(val) {
     if (!val && isCustomColorPickerShow.value) {
       return
     }
+    internalVisible.value = val
     emit('update:visible', val)
   }
 })
@@ -97,7 +107,7 @@ function addColorToRecent(color: string) {
   emit('update:recentColors', list)
 }
 
-watch(() => props.visible, (newVal) => {
+watch(popoverVisible, (newVal) => {
   if (newVal) {
     if (props.showTabs) {
       activeQuickColorTab.value = 'color'
@@ -129,12 +139,26 @@ function getQuickColorActive(color: string): boolean {
   }
 }
 
-function getCurrentColorHex(): string {
+function getCurrentColor(): string {
+  let col = '#000000'
   if (props.showTabs && activeQuickColorTab.value === 'background') {
-    return props.textBackground || '#FFFFFF'
+    col = props.textBackground || '#FFFFFF'
   } else {
-    return props.color || '#000000'
+    col = props.color || '#000000'
+  }
+  if (!col || col === 'transparent' || col === 'none') {
+    return 'rgba(0, 0, 0, 0)'
+  }
+  if (props.alpha !== undefined && props.alpha >= 0 && props.alpha <= 100) {
+    const cleanHex = col.trim().replace('#', '')
+    if (cleanHex.length === 6) {
+      const r = parseInt(cleanHex.substring(0, 2), 16) || 0
+      const g = parseInt(cleanHex.substring(2, 4), 16) || 0
+      const b = parseInt(cleanHex.substring(4, 6), 16) || 0
+      return `rgba(${r}, ${g}, ${b}, ${props.alpha / 100})`
+    }
   }
+  return col
 }
 
 function selectQuickColor(color: string) {
@@ -203,15 +227,19 @@ const customColorPickerRef = ref()
 
 function openCustomColor() {
   customColorBtnRef.value = document.querySelector('.custom-color-trigger-btn')
+  const curColor = getCurrentColor()
   nextTick(() => {
     if (customColorPickerRef.value) {
+      const pickerInstance = customColorPickerRef.value.$el || customColorPickerRef.value
+      if (typeof customColorPickerRef.value.initPickerColor === 'function') {
+        customColorPickerRef.value.initPickerColor(curColor)
+      } else if (pickerInstance && typeof pickerInstance.initPickerColor === 'function') {
+        pickerInstance.initPickerColor(curColor)
+      }
       if (typeof customColorPickerRef.value.openColorPicker === 'function') {
-        customColorPickerRef.value.openColorPicker()
-      } else {
-        const pickerInstance = customColorPickerRef.value.$el || customColorPickerRef.value
-        if (pickerInstance && typeof pickerInstance.openColorPicker === 'function') {
-          pickerInstance.openColorPicker()
-        }
+        customColorPickerRef.value.openColorPicker(curColor)
+      } else if (pickerInstance && typeof pickerInstance.openColorPicker === 'function') {
+        pickerInstance.openColorPicker(curColor)
       }
     }
   })
@@ -236,7 +264,7 @@ defineExpose({
 </script>
 
 <template>
-  <el-popover v-model:visible="popoverVisible" :placement="props.placement" :width="260" trigger="click"
+  <el-popover v-model:visible="popoverVisible" :placement="props.placement" :offset="props.offset" :width="260" trigger="click"
     popper-class="quick-color-popover" :show-arrow="false">
     <template #reference>
       <span ref="referenceWrapperRef" style="display: inline-block; vertical-align: middle;" class="color-span-box">
@@ -270,9 +298,8 @@ defineExpose({
             }" :class="{
               'is-active': getQuickColorActive(tCol)
             }" @click="selectQuickColor(tCol)" :title="`主题颜色 ${tIdx + 1}: ${tCol}`">
-              <svg v-if="getQuickColorActive(tCol)" viewBox="0 0 24 24" width="10"
-                height="10" fill="none" stroke="currentColor" stroke-width="3.5"
-                style="color: #ffffff; z-index: 2;">
+              <svg v-if="getQuickColorActive(tCol)" viewBox="0 0 24 24" width="10" height="10" fill="none"
+                stroke="currentColor" stroke-width="3.5" style="color: #ffffff; z-index: 2;">
                 <polyline points="20 6 9 17 4 12" />
               </svg>
             </div>
@@ -324,15 +351,15 @@ defineExpose({
       </div>
 
       <div class="quick-color-popover-divider"></div>
-
       <div style="padding: 0px 16px 6px;">
         <!-- Custom Colors -->
-        <jvs-picker-color-v3 ref="customColorPickerRef" :color="getCurrentColorHex()" :options="{
+        <jvs-picker-color-v3 ref="customColorPickerRef" :color="getCurrentColor()" :options="{
           openGradual: false,
           pickerButtonRef: customColorBtnRef,
           showFooterBtn: false,
-          popoverWidth: 260,
-          selectorWidth: 260,
+          popoverWidth: 290,
+          selectorWidth: 290,
+          popoverPadding: '12px 16px',
           showHistory: false,
           showCommonColor: false
         }" @change="(val: any) => selectCustomColor(val.hex || val)"
@@ -386,6 +413,21 @@ defineExpose({
   border-radius: 8px !important;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
   border: 1px solid #E2E8F0 !important;
+  background: #ffffff !important;
+  z-index: 3000 !important;
+}
+
+:global(.color-picker-popover-box) {
+  z-index: 3100 !important;
+}
+
+:global(.color-picker-popover-box .rgb-color-input) {
+  padding: 0 6px !important;
+}
+
+:global(.color-picker-popover-box .rgb-color-input .el-input__inner) {
+  font-size: 12px !important;
+  padding: 0 2px !important;
 }
 
 .quick-color-square {
@@ -445,6 +487,8 @@ defineExpose({
 .quick-color-popover-container {
   display: flex;
   flex-direction: column;
+  background: #ffffff;
+  border-radius: 8px;
 }
 
 .quick-color-tabs-header {