From 43c46c873c583be530497c7dd114123d2f8d1439 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: Tue, 19 Apr 2022 22:07:54 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E9=A2=9C=E8=89=B2=E6=BB=A4=E9=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/ChartItemSetting/StylesSetting.vue  | 91 +++++++++++++++++--
 src/packages/index.d.ts                       | 15 ++-
 src/packages/public/publicConfig.ts           | 12 ++-
 .../chartEditStore/chartEditStore.d.ts        | 21 +++--
 src/views/preview/utils/style.ts              |  5 +-
 5 files changed, 121 insertions(+), 23 deletions(-)

diff --git a/src/components/Pages/ChartItemSetting/StylesSetting.vue b/src/components/Pages/ChartItemSetting/StylesSetting.vue
index 8a7794f9..b13534d5 100644
--- a/src/components/Pages/ChartItemSetting/StylesSetting.vue
+++ b/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">
-      <!-- 透明度 -->
-      <n-slider
-        v-model:value="chartStyles.opacity"
-        :step="0.1"
-        :min="0"
-        :max="1"
-      ></n-slider>
+      <setting-item
+        :name="`值：${(parseFloat(chartStyles.opacity) * 100).toFixed(0)}%`"
+      >
+        <!-- 透明度 -->
+        <n-slider
+          v-model:value="chartStyles.opacity"
+          :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>
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index 5c5b1e2e..37df8e98 100644
--- a/src/packages/index.d.ts
+++ b/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 {
diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts
index 508da632..2c0012b7 100644
--- a/src/packages/public/publicConfig.ts
+++ b/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: []
   }
   // 数据
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 85937840..81dceb1f 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/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
diff --git a/src/views/preview/utils/style.ts b/src/views/preview/utils/style.ts
index 1dfa11b6..0ea0c446 100644
--- a/src/views/preview/utils/style.ts
+++ b/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})`
   }
 }