From 1c0a57f5d965468f99e86b806a70bb77c266d43c 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 17:39:17 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E5=8D=95=E4=B8=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=97=8B=E8=BD=AC=E5=90=8E=EF=BC=8C=E5=86=8D?=
 =?UTF-8?q?=E7=BB=84=E5=90=88=E5=88=86=E7=BB=84=E6=B8=B2=E6=9F=93=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E4=BC=9A=E9=94=99=E4=BD=8D=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.解决单个组件旋转后，和其他组件组合分组后再次旋转，进行预览后该分组会错位的问题
2.解决TS类型报错
---
 src/views/preview/components/PreviewRenderGroup/index.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue
index 354fa29c..fd7b04c3 100644
--- a/src/views/preview/components/PreviewRenderGroup/index.vue
+++ b/src/views/preview/components/PreviewRenderGroup/index.vue
@@ -46,14 +46,11 @@ const props = defineProps({
     required: true
   },
   groupIndex: {
-    type: Number,
+    type: [String, Number],
     required: true
   }
 })
 </script>
 
 <style lang="scss" scoped>
-.chart-item {
-  position: absolute;
-}
 </style>

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 2/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=A2=84?=
 =?UTF-8?q?=E8=AE=BE=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>