From b50f84fa1e69f26457b0b1dc0dc8d3677dd308b8 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Thu, 5 Oct 2023 15:37:11 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E8=92=99=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/slides.ts                           | 14 +---------
 .../Toolbar/common/ElementColorMask.vue       | 28 +++++--------------
 .../element/ImageElement/BaseImageElement.vue |  3 +-
 .../components/element/ImageElement/index.vue |  3 +-
 4 files changed, 10 insertions(+), 38 deletions(-)

diff --git a/src/types/slides.ts b/src/types/slides.ts
index e4eddc8d..29b50488 100644
--- a/src/types/slides.ts
+++ b/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
 }
 
 
diff --git a/src/views/Editor/Toolbar/common/ElementColorMask.vue b/src/views/Editor/Toolbar/common/ElementColorMask.vue
index 148f59a2..bb9ed807 100644
--- a/src/views/Editor/Toolbar/common/ElementColorMask.vue
+++ b/src/views/Editor/Toolbar/common/ElementColorMask.vue
@@ -15,24 +15,13 @@
         <Popover trigger="click" style="width: 60%;">
           <template #content>
             <ColorPicker
-              :modelValue="colorMask.color"
-              @update:modelValue="value => updateColorMask({ color: value })"
+              :modelValue="colorMask"
+              @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 newColorMask = { ...colorMask.value, ...colorMaskProp }
-  slidesStore.updateElement({ id: handleElementId.value, props: { colorMask: newColorMask } })
+const updateColorMask = (colorMask: string) => {
+  slidesStore.updateElement({ id: handleElementId.value, props: { colorMask } })
   addHistorySnapshot()
 }
 </script>
diff --git a/src/views/components/element/ImageElement/BaseImageElement.vue b/src/views/components/element/ImageElement/BaseImageElement.vue
index d1a0bee9..c7bce8f4 100644
--- a/src/views/components/element/ImageElement/BaseImageElement.vue
+++ b/src/views/components/element/ImageElement/BaseImageElement.vue
@@ -37,8 +37,7 @@
           <div class="color-mask"
             v-if="elementInfo.colorMask"
             :style="{
-              backgroundColor: elementInfo.colorMask.color,
-              opacity: elementInfo.colorMask.opacity,
+              backgroundColor: elementInfo.colorMask,
             }"
           ></div>
         </div>
diff --git a/src/views/components/element/ImageElement/index.vue b/src/views/components/element/ImageElement/index.vue
index 8f96d3e7..972743a3 100644
--- a/src/views/components/element/ImageElement/index.vue
+++ b/src/views/components/element/ImageElement/index.vue
@@ -55,8 +55,7 @@
           <div class="color-mask"
             v-if="elementInfo.colorMask"
             :style="{
-              backgroundColor: elementInfo.colorMask.color,
-              opacity: elementInfo.colorMask.opacity,
+              backgroundColor: elementInfo.colorMask,
             }"
           ></div>
         </div>