perf: 优化滤镜预设展示

src/components/Pages/ChartItemSetting/StylesSetting.vue

@@ -72,17 +72,17 @@
     <!--  预设滤镜  -->
     <div v-if="presetImageList.length" class="preset-filter">
       <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"
-          class="preset-img"
-          width="70"
-          height="50"
-          preview-disabled
-          object-fit="fill"
-          @click="() => (chartStyles.hueRotate = item.hueRotate)"></n-image>
+        @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>