fix: 新增全局滤镜

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