From d24daf5b1540abdc9440c10b2afe999d5d243071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=B1=9F=E8=83=9C?= <857949055@qq.com>
Date: Thu, 29 Jun 2023 18:45:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=A2=84=E8=AE=BE?=
 =?UTF-8?q?=E6=BB=A4=E9=95=9C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.滤镜变换：新增了快捷预设滤镜
---
 .../Pages/ChartItemSetting/StylesSetting.vue  | 56 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/ChartItemSetting/StylesSetting.vue b/src/components/Pages/ChartItemSetting/StylesSetting.vue
index 27275449..064f2fff 100644
--- a/src/components/Pages/ChartItemSetting/StylesSetting.vue
+++ b/src/components/Pages/ChartItemSetting/StylesSetting.vue
@@ -69,6 +69,22 @@
       </setting-item>
     </setting-item-box>
 
+    <!--  预设滤镜  -->
+    <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>
+    </div>
+
     <!-- 混合模式 -->
     <setting-item-box v-if="!isCanvas" :alone="true">
       <template #name>
@@ -149,10 +165,12 @@
 </template>
 
 <script setup lang="ts">
-import { 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";
 
 const props = defineProps({
   isGroup: {
@@ -179,6 +197,40 @@ const sliderFormatTooltip = (v: string) => {
 const degFormatTooltip = (v: string) => {
   return `${v}deg`
 }
+// 预设滤镜
+interface presetImageData {
+  index: number,
+  src: string,
+  hueRotate: number
+}
+const presetImageList = ref([] as presetImageData[])
+for(let i = 1; i <= 12; i ++) {
+  presetImageList.value.push({
+    index: i,
+    src: logoImg,
+    hueRotate: i * 30
+  })
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+// 预设滤镜
+.preset-filter {
+  margin: 20px 0 10px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .preset-img {
+    margin-bottom: 10px;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: 0.2s all;
+    &:hover {
+      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+    }
+  }
+  .active-preset {
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+  }
+}
+</style>