fix: 新增全局滤镜

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

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: []
   }

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
   // 大屏高度

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,

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',

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)

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 {
     // 透明度