From 52c29298892d419b942f089cef2539f68fe457f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sat, 8 Jul 2023 18:36:36 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=BB=A4=E9=95=9C?=
 =?UTF-8?q?=E9=A2=84=E8=AE=BE=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/ChartItemSetting/StylesSetting.vue  | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/Pages/ChartItemSetting/StylesSetting.vue b/src/components/Pages/ChartItemSetting/StylesSetting.vue
index 064f2fff..efb1d653 100644
--- a/src/components/Pages/ChartItemSetting/StylesSetting.vue
+++ b/src/components/Pages/ChartItemSetting/StylesSetting.vue
@@ -72,17 +72,17 @@
     <!--  预设滤镜  -->
     <div v-if="presetImageList.length" class="preset-filter">
       <n-image
-          v-for="(item, index) in presetImageList"
-          :key="index"
-          :class="{ 'active-preset': item.hueRotate === chartStyles.hueRotate }"
-          :style="{ filter: `hue-rotate(${item.hueRotate}deg)` }"
-          :src="item.src"
-          class="preset-img"
-          width="70"
-          height="50"
-          preview-disabled
-          object-fit="fill"
-          @click="() => (chartStyles.hueRotate = item.hueRotate)"></n-image>
+        class="preset-img"
+        width="46"
+        preview-disabled
+        object-fit="scale-down"
+        v-for="(item, index) in presetImageList"
+        :key="index"
+        :class="{ 'active-preset': item.hueRotate === chartStyles.hueRotate }"
+        :style="{ filter: `hue-rotate(${item.hueRotate}deg)` }"
+        :src="item.src"
+        @click="() => (chartStyles.hueRotate = item.hueRotate)"
+      ></n-image>
     </div>
 
     <!-- 混合模式 -->
@@ -165,12 +165,12 @@
 </template>
 
 <script setup lang="ts">
-import {ref, PropType} from 'vue'
+import { ref, PropType } from 'vue'
 import { PickCreateComponentType, BlendModeEnumList } from '@/packages/index.d'
 import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
 import { icon } from '@/plugins'
 import logoImg from '@/assets/logo.png'
-import {presetFilterData} from "@/store/modules/chartEditStore/chartEditStore";
+import { useDesignStore } from '@/store/modules/designStore/designStore'
 
 const props = defineProps({
   isGroup: {
@@ -193,18 +193,21 @@ const { HelpOutlineIcon } = icon.ionicons5
 const sliderFormatTooltip = (v: string) => {
   return `${(parseFloat(v) * 100).toFixed(0)}%`
 }
+
 // 角度格式化
 const degFormatTooltip = (v: string) => {
   return `${v}deg`
 }
+
 // 预设滤镜
 interface presetImageData {
-  index: number,
-  src: string,
+  index: number
+  src: string
   hueRotate: number
 }
+
 const presetImageList = ref([] as presetImageData[])
-for(let i = 1; i <= 12; i ++) {
+for (let i = 1; i <= 12; i++) {
   presetImageList.value.push({
     index: i,
     src: logoImg,
@@ -222,15 +225,16 @@ for(let i = 1; i <= 12; i ++) {
   justify-content: space-between;
   .preset-img {
     margin-bottom: 10px;
-    cursor: pointer;
+    padding: 2px;
     border-radius: 6px;
     transition: 0.2s all;
+    cursor: pointer;
     &:hover {
-      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+      box-shadow: 0 0 0 2px #66a9c9;
     }
   }
   .active-preset {
-    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+    box-shadow: 0 0 0 2px #66a9c9;
   }
 }
 </style>