From e02dad5e2c4d0130c61535e15daae6a9fffa87c4 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: Mon, 25 Apr 2022 16:17:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=BB=A4=E9=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/index.d.ts                       | 21 ++++++++++++++-----
 src/packages/public/publicConfig.ts           |  8 +++----
 .../chartEditStore/chartEditStore.d.ts        | 18 ++++++----------
 .../modules/chartEditStore/chartEditStore.ts  | 12 +++++------
 .../components/CanvasPage/index.vue           |  7 ++++++-
 src/views/preview/index.vue                   |  4 ++--
 src/views/preview/utils/style.ts              |  2 +-
 7 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index 37df8e98..a38bb3e1 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -25,6 +25,16 @@ interface EchartsDataType {
   dimensions: string[],
   source: any[]
 }
+
+// 滤镜枚举
+export enum FilterEnum {
+  HUE_ROTATE = 'hueRotate',
+  SATURATE = 'saturate',
+  BRIGHTNESS = 'brightness',
+  CONTRAST = 'contrast',
+  OPACITY = 'opacity',
+}
+
 // 组件实例类
 export interface PublicConfigType extends requestConfig {
   id: string
@@ -32,20 +42,21 @@ export interface PublicConfigType extends requestConfig {
   attr: { x: number; y: number; w: number; h: number; zIndex: number }
   styles: {
     // 透明度
-    opacity: number;
+    [FilterEnum.OPACITY]: number;
     // 饱和度
-    saturate: number;
+    [FilterEnum.SATURATE]: number;
     // 对比度
-    contrast: number;
+    [FilterEnum.CONTRAST]: number;
     // 色相
-    hueRotate: number;
+    [FilterEnum.HUE_ROTATE]: number;
     // 亮度
-    brightness: number;
+    [FilterEnum.BRIGHTNESS]: number;
     // 动画
     animations: string[]
   }
   setPosition: Function
 }
+
 export interface CreateComponentType extends PublicConfigType {
   key: string
   chartConfig: ConfigType
diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts
index 5a1c8ad5..5b50f746 100644
--- a/src/packages/public/publicConfig.ts
+++ b/src/packages/public/publicConfig.ts
@@ -17,16 +17,16 @@ export class publicConfig implements PublicConfigType {
   public attr = { ...chartInitConfig, zIndex: -1 }
   // 基本样式
   public styles = {
-    // 透明
-    opacity: 1,
+    // 色相
+    hueRotate: 0,
     // 饱和度
     saturate: 1,
     // 对比度
     contrast: 1,
-    // 色相
-    hueRotate: 0,
     // 亮度
     brightness: 1,
+    // 透明
+    opacity: 1,
     // 动画
     animations: []
   }
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 81dceb1f..9e378850 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -1,4 +1,4 @@
-import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, FilterEnum} from '@/packages/index.d'
 import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
 import type {
@@ -41,11 +41,6 @@ export type EditCanvasType = {
 export enum EditCanvasConfigEnum {
   WIDTH = 'width',
   HEIGHT = 'height',
-  HUE_ROTATE = 'hueRotate',
-  SATURATE = 'saturate',
-  BRIGHTNESS = 'brightness',
-  CONTRAST = 'contrast',
-  UN_OPACITY = 'unOpacity',
   CHART_THEME_COLOR = 'chartThemeColor',
   CHART_THEME_SETTING = 'chartThemeSetting',
   BACKGROUND = 'background',
@@ -55,16 +50,15 @@ export enum EditCanvasConfigEnum {
 
 export interface EditCanvasConfigType {
   // 滤镜-色相
-  [EditCanvasConfigEnum.HUE_ROTATE]: number
+  [FilterEnum.HUE_ROTATE]: number
   // 滤镜-饱和度
-  [EditCanvasConfigEnum.SATURATE]: number
+  [FilterEnum.SATURATE]: number
   // 滤镜-亮度
-  [EditCanvasConfigEnum.BRIGHTNESS]: number
+  [FilterEnum.BRIGHTNESS]: number
   // 滤镜-对比度
-  [EditCanvasConfigEnum.CONTRAST]: number
+  [FilterEnum.CONTRAST]: number
   // 滤镜-不透明度
-  [EditCanvasConfigEnum.UN_OPACITY]: number
-  
+  [FilterEnum.OPACITY]: number
   // 大屏宽度
   [EditCanvasConfigEnum.WIDTH]: number
   // 大屏高度
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 12149f9c..a237119a 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -74,13 +74,13 @@ export const useChartEditStore = defineStore({
       // 色相
       hueRotate: 0,
       // 饱和度
-      saturate: 0,
-      // 亮度
-      brightness: 100,
+      saturate: 1,
       // 对比度
-      contrast: 100,
-      // 不透明度
-      unOpacity: 100,
+      contrast: 1,
+      // 亮度
+      brightness: 1,
+      // 透明度
+      opacity: 1,
       // 默认背景色
       background: undefined,
       backgroundImage: undefined,
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
index 651094f2..272c716a 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
@@ -72,6 +72,10 @@
       </n-space>
     </n-space>
 
+    <!-- 滤镜 -->
+    <styles-setting :chartStyles="canvasConfig"></styles-setting>
+    <n-divider style="margin: 10px 0;"></n-divider>
+
     <!-- 主题选择和全局配置 -->
     <n-tabs class="tabs-box" size="small" type="segment">
       <n-tab-pane
@@ -101,6 +105,7 @@ import { backgroundImageSize } from '@/settings/designSetting'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { StylesSetting } from '@/components/Pages/ChartItemSetting'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { fileToUrl, loadAsyncComponent } from '@/utils'
 import { icon } from '@/plugins'
@@ -121,7 +126,7 @@ const ChartDataSetting = loadAsyncComponent(() =>
   import('./components/ChartDataSetting/index.vue')
 )
 
-// 展示颜色列表
+// 北京默认展示颜色列表
 const swatchesColors = [
   '#232324',
   '#2a2a2b',
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index 136eccbe..2f766668 100644
--- a/src/views/preview/index.vue
+++ b/src/views/preview/index.vue
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { PreviewRenderList } from './components/PreviewRenderList'
-import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
+import { getEditCanvasConfigStyle, getStyle, getSessionStorageInfo } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
 import { useStore } from './hooks/useStore.hook'
@@ -25,7 +25,7 @@ import type { ChartEditStorageType } from './index.d'
 const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
 
 const previewRefStyle: any = computed(() => {
-  return getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig)
+  return { ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), ...getStyle(localStorageInfo.editCanvasConfig) }
 })
 
 useStore(localStorageInfo)
diff --git a/src/views/preview/utils/style.ts b/src/views/preview/utils/style.ts
index 0ea0c446..1a8845b9 100644
--- a/src/views/preview/utils/style.ts
+++ b/src/views/preview/utils/style.ts
@@ -45,7 +45,7 @@ export const animationsClass = (animations: string[]) => {
 }
 
 // 样式
-export const getStyle = (styles: StylesType) => {
+export const getStyle = (styles: StylesType | EditCanvasConfigType) => {
   const { opacity, saturate, contrast, hueRotate, brightness } = styles
   return {
     // 透明度