feat：新增图表颜色滤镜

src/components/Pages/ChartItemSetting/StylesSetting.vue

@@ -1,13 +1,72 @@
 <template>
   <collapse-item name="通用">
+    <setting-item-box name="色相" :alone="true">
+      <setting-item :name="`值：${chartStyles.hueRotate}deg`">
+        <!-- 透明度 -->
+        <n-slider
+          v-model:value="chartStyles.hueRotate"
+          :step="3"
+          :min="0"
+          :max="360"
+          :format-tooltip="degFormatTooltip"
+        ></n-slider>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="饱和度" :alone="true">
+      <setting-item
+        :name="`值：${(parseFloat(chartStyles.saturate) * 100).toFixed(0)}%`"
+      >
+        <!-- 透明度 -->
+        <n-slider
+          v-model:value="chartStyles.saturate"
+          :step="0.1"
+          :min="0"
+          :max="2"
+          :format-tooltip="sliderFormatTooltip"
+        ></n-slider>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="对比度" :alone="true">
+      <setting-item
+        :name="`值：${(parseFloat(chartStyles.contrast) * 100).toFixed(0)}%`"
+      >
+        <!-- 透明度 -->
+        <n-slider
+          v-model:value="chartStyles.contrast"
+          :step="0.1"
+          :min="0"
+          :max="2"
+          :format-tooltip="sliderFormatTooltip"
+        ></n-slider>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="亮度" :alone="true">
+      <setting-item
+        :name="`值：${(parseFloat(chartStyles.brightness) * 100).toFixed(0)}%`"
+      >
+        <!-- 透明度 -->
+        <n-slider
+          v-model:value="chartStyles.brightness"
+          :step="0.1"
+          :min="0"
+          :max="2"
+          :format-tooltip="sliderFormatTooltip"
+        ></n-slider>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="透明度" :alone="true">
-      <!-- 透明度 -->
+      <setting-item
-      <n-slider
+        :name="`值：${(parseFloat(chartStyles.opacity) * 100).toFixed(0)}%`"
-        v-model:value="chartStyles.opacity"
+      >
-        :step="0.1"
+        <!-- 透明度 -->
-        :min="0"
+        <n-slider
-        :max="1"
+          v-model:value="chartStyles.opacity"
-      ></n-slider>
+          :step="0.1"
+          :min="0"
+          :max="1"
+          :format-tooltip="sliderFormatTooltip"
+        ></n-slider>
+      </setting-item>
     </setting-item-box>
   </collapse-item>
 </template>
@@ -17,15 +76,27 @@ import { PropType } from 'vue'
 import { PickCreateComponentType } from '@/packages/index.d'
 import {
   SettingItemBox,
-  CollapseItem
+  SettingItem,
+  CollapseItem,
 } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
   chartStyles: {
     type: Object as PropType<PickCreateComponentType<'styles'>>,
-    required: true
+    required: true,
-  }
+  },
 })
+
+// 百分比格式化persen
+const sliderFormatTooltip = (v: string) => {
+  // @ts-ignore
+  return `${(parseFloat(v) * 100).toFixed(0)}%`
+}
+// 角度格式化
+const degFormatTooltip = (v: string) => {
+  // @ts-ignore
+  return `${v}deg`
+}
 </script>
 
 <style lang="scss" scoped></style>

src/packages/index.d.ts

@@ -30,7 +30,20 @@ export interface PublicConfigType extends requestConfig {
   id: string
   rename?: string
   attr: { x: number; y: number; w: number; h: number; zIndex: number }
-  styles: { opacity: number; animations: string[] }
+  styles: {
+    // 透明度
+    opacity: number;
+    // 饱和度
+    saturate: number;
+    // 对比度
+    contrast: number;
+    // 色相
+    hueRotate: number;
+    // 亮度
+    brightness: number;
+    // 动画
+    animations: string[]
+  }
   setPosition: Function
 }
 export interface CreateComponentType extends PublicConfigType {

src/packages/public/publicConfig.ts

@@ -14,9 +14,19 @@ export class publicConfig implements PublicConfigType {
   public rename = undefined
   // 基本信息
   public attr = { x: 0, y: 0, w: 500, h: 300, zIndex: -1 }
-  // 基本样式（动画，透明）
+  // 基本样式
   public styles = {
+    // 透明
     opacity: 1,
+    // 饱和度
+    saturate: 1,
+    // 对比度
+    contrast: 1,
+    // 色相
+    hueRotate: 0,
+    // 亮度
+    brightness: 1,
+    // 动画
     animations: []
   }
   // 数据

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -54,20 +54,21 @@ export enum EditCanvasConfigEnum {
 }
 
 export interface EditCanvasConfigType {
+  // 滤镜-色相
+  [EditCanvasConfigEnum.HUE_ROTATE]: number
+  // 滤镜-饱和度
+  [EditCanvasConfigEnum.SATURATE]: number
+  // 滤镜-亮度
+  [EditCanvasConfigEnum.BRIGHTNESS]: number
+  // 滤镜-对比度
+  [EditCanvasConfigEnum.CONTRAST]: number
+  // 滤镜-不透明度
+  [EditCanvasConfigEnum.UN_OPACITY]: number
+  
   // 大屏宽度
   [EditCanvasConfigEnum.WIDTH]: number
   // 大屏高度
   [EditCanvasConfigEnum.HEIGHT]: number
-  // 色相
-  [EditCanvasConfigEnum.HUE_ROTATE]: number
-  // 饱和度
-  [EditCanvasConfigEnum.SATURATE]: number
-  // 亮度
-  [EditCanvasConfigEnum.BRIGHTNESS]: number
-  // 对比度
-  [EditCanvasConfigEnum.CONTRAST]: number
-  // 不透明度
-  [EditCanvasConfigEnum.UN_OPACITY]: number
   // 背景色
   [EditCanvasConfigEnum.BACKGROUND]?: string
   [EditCanvasConfigEnum.BACKGROUND_IAMGE]?: string | null

src/views/preview/utils/style.ts

@@ -44,9 +44,12 @@ export const animationsClass = (animations: string[]) => {
   return ''
 }
 
+// 样式
 export const getStyle = (styles: StylesType) => {
+  const { opacity, saturate, contrast, hueRotate, brightness } = styles
   return {
     // 透明度
-    opacity: styles.opacity
+    opacity: opacity,
+    filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`
   }
 }