perf: 优化图片蒙板

src/types/slides.ts

@@ -216,18 +216,6 @@ export interface ImageElementClip {
   shape: string
 }
 
-/**
- * 图片蒙版
- * 
- * color: 蒙版颜色
- * 
- * opacity: 蒙版透明度
- */
-export interface ImageColorElementMask {
-  color: string
-  opacity: number
-}
-
 /**
  * 图片元素
  * 
@@ -259,7 +247,7 @@ export interface PPTImageElement extends PPTBaseElement {
   flipH?: boolean
   flipV?: boolean
   shadow?: PPTElementShadow
-  colorMask?: ImageColorElementMask
+  colorMask?: string
 }
 
 

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

@@ -15,24 +15,13 @@
         <Popover trigger="click" style="width: 60%;">
           <template #content>
             <ColorPicker
-              :modelValue="colorMask.color"
+              :modelValue="colorMask"
-              @update:modelValue="value => updateColorMask({ color: value })"
+              @update:modelValue="value => updateColorMask(value)"
             />
           </template>
-          <ColorButton :color="colorMask.color" />
+          <ColorButton :color="colorMask" />
         </Popover>
       </div>
-      <div class="row">
-        <div style="width: 40%;">不透明度：</div>
-        <Slider
-          :max="1"
-          :min="0"
-          :step="0.05"
-          :value="colorMask.opacity"
-          @update:value="value => updateColorMask({ opacity: value as number })"
-          style="width: 60%;"
-        />
-      </div>
     </template>
   </div>
 </template>
@@ -41,21 +30,19 @@
 import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
-import type { ImageColorElementMask } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from './ColorButton.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Switch from '@/components/Switch.vue'
-import Slider from '@/components/Slider.vue'
 import Popover from '@/components/Popover.vue'
 
-const defaultColorMask = { color: 'transparent', opacity: 0.3 }
+const defaultColorMask = 'rgba(226, 83, 77, 0.5)'
 
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId } = storeToRefs(useMainStore())
 
-const colorMask = ref<ImageColorElementMask>(defaultColorMask)
+const colorMask = ref(defaultColorMask)
 const hasColorMask = ref(false)
 
 const { addHistorySnapshot } = useHistorySnapshot()
@@ -81,9 +68,8 @@ const toggleColorMask = (checked: boolean) => {
   addHistorySnapshot()
 }
 
-const updateColorMask = (colorMaskProp: Partial<ImageColorElementMask>) => {
+const updateColorMask = (colorMask: string) => {
-  const newColorMask = { ...colorMask.value, ...colorMaskProp }
+  slidesStore.updateElement({ id: handleElementId.value, props: { colorMask } })
-  slidesStore.updateElement({ id: handleElementId.value, props: { colorMask: newColorMask } })
   addHistorySnapshot()
 }
 </script>

src/views/components/element/ImageElement/BaseImageElement.vue

@@ -37,8 +37,7 @@
           <div class="color-mask"
             v-if="elementInfo.colorMask"
             :style="{
-              backgroundColor: elementInfo.colorMask.color,
+              backgroundColor: elementInfo.colorMask,
-              opacity: elementInfo.colorMask.opacity,
             }"
           ></div>
         </div>

src/views/components/element/ImageElement/index.vue

@@ -55,8 +55,7 @@
           <div class="color-mask"
             v-if="elementInfo.colorMask"
             :style="{
-              backgroundColor: elementInfo.colorMask.color,
+              backgroundColor: elementInfo.colorMask,
-              opacity: elementInfo.colorMask.opacity,
             }"
           ></div>
         </div>