perf: 颜色按钮支持透明度

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue

@@ -212,7 +212,7 @@ export default defineComponent({
 
     watch(handleElement, () => {
       if (!handleElement.value || handleElement.value.type !== 'chart') return
-      fill.value = handleElement.value.fill || '#000'
+      fill.value = handleElement.value.fill || 'transparent'
 
       if (handleElement.value.options) {
         const {

src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue

@@ -148,10 +148,10 @@ export default defineComponent({
       '80px', '88px', '96px', '104px', '112px', '120px',
     ]
 
-    const fill = ref('#000')
+    const fill = ref('transparent')
     const outline = ref<PPTElementOutline>({
       width: 0,
-      color: '#000',
+      color: 'transparent',
       style: 'solid',
     })
 

src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue

@@ -233,7 +233,7 @@ export default defineComponent({
     watch(handleElement, () => {
       if (!handleElement.value || handleElement.value.type !== 'shape') return
 
-      fill.value = handleElement.value.fill || '#000'
+      fill.value = handleElement.value.fill || 'transparent'
       gradient.value = handleElement.value.gradient || { type: 'linear', rotate: 0, color: [fill.value, '#fff'] }
       fillType.value = handleElement.value.gradient ? 'gradient' : 'fill'
       textAlign.value = handleElement.value?.text?.align || 'middle'

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -71,20 +71,6 @@
           </Button>
         </Tooltip>
       </Popover>
-      <Popover trigger="click">
-        <template #content>
-          <ColorPicker
-            :modelValue="fill"
-            @update:modelValue="value => updateFill(value)"
-          />
-        </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文本框填充">
-          <Button class="text-color-btn" style="flex: 1;">
-            <IconFill />
-            <div class="text-color-block" :style="{ backgroundColor: fill }"></div>
-          </Button>
-        </Tooltip>
-      </Popover>
     </ButtonGroup>
 
     <CheckboxButtonGroup class="row">
@@ -225,6 +211,18 @@
         <SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
       </Select>
     </div>
+    <div class="row">
+      <div style="flex: 2;">文本框填充：</div>
+      <Popover trigger="click">
+        <template #content>
+          <ColorPicker
+            :modelValue="fill"
+            @update:modelValue="value => updateFill(value)"
+          />
+        </template>
+        <ColorButton :color="fill" style="flex: 3;" />
+      </Popover>
+    </div>
 
     <Divider />
     <ElementOutline />
@@ -248,6 +246,7 @@ import { message } from 'ant-design-vue'
 import ElementOpacity from '../common/ElementOpacity.vue'
 import ElementOutline from '../common/ElementOutline.vue'
 import ElementShadow from '../common/ElementShadow.vue'
+import ColorButton from '../common/ColorButton.vue'
 
 const presetStyles = [
   {
@@ -330,6 +329,7 @@ export default defineComponent({
     ElementOpacity,
     ElementOutline,
     ElementShadow,
+    ColorButton,
   },
   setup() {
     const slidesStore = useSlidesStore()
@@ -349,7 +349,7 @@ export default defineComponent({
     watch(handleElement, () => {
       if (!handleElement.value || handleElement.value.type !== 'text') return
 
-      fill.value = handleElement.value.fill || '#000'
+      fill.value = handleElement.value.fill || 'transparent'
       lineHeight.value = handleElement.value.lineHeight || 1.5
       wordSpace.value = handleElement.value.wordSpace || 0
     }, { deep: true, immediate: true })

src/views/Editor/Toolbar/common/ColorButton.vue

@@ -1,9 +1,8 @@
 <template>
   <Button class="color-btn">
-    <div 
+    <div class="color-block">
-      class="color-block" 
+      <div class="content" :style="{ backgroundColor: color }"></div>
-      :style="{ backgroundColor: color }"
+    </div>
-    ></div>
     <IconPlatte class="color-btn-icon" />
   </Button>
 </template>
@@ -34,6 +33,11 @@ export default defineComponent({
   margin-left: 8px;
   flex: 1;
   outline: 1px dashed rgba($color: #666, $alpha: .12);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAEBJREFUOE9jfPbs2X8GIoCkpCQRqhgYGEcNxBlOo2GIM2iGQLL5//8/UTnl+fPnxOWUUQNxhtNoGOLOKYM+2QAAh2Nq10DwkukAAAAASUVORK5CYII=);
+}
+.content {
+  width: 100%;
+  height: 100%;
 }
 .color-btn-icon {
   width: 30px;