Переглянути джерело

fix: 解决全局滤镜导致TS打包报错问题,修改壁纸不更随滤镜变换的问题

奔跑的面条 3 роки тому
батько
коміт
b402969a44

+ 1 - 1
src/settings/systemSetting.ts

@@ -13,5 +13,5 @@ export const systemSetting = {
   // 图表拖拽时的吸附距离(px)
   [SettingStoreEnums.CHART_ALIGN_RANGE]: 10,
   // 图表工具栏状态(侧边工具状态)
-  [SettingStoreEnums.CHART_TOOLS_STATUS]: ToolsStatusEnum.ASIDE
+  [SettingStoreEnums.CHART_TOOLS_STATUS]: ToolsStatusEnum.DOCK
 }

+ 6 - 0
src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -61,6 +61,12 @@ export interface EditCanvasConfigType {
   [FilterEnum.CONTRAST]: number
   // 滤镜-不透明度
   [FilterEnum.OPACITY]: number
+  // 变换(暂不使用)
+  [FilterEnum.ROTATE_Z]: number
+  [FilterEnum.ROTATE_X]: number
+  [FilterEnum.ROTATE_Y]: number
+  [FilterEnum.SKEW_X]: number
+  [FilterEnum.SKEW_Y]: number
   // 大屏宽度
   [EditCanvasConfigEnum.WIDTH]: number
   // 大屏高度

+ 6 - 0
src/store/modules/chartEditStore/chartEditStore.ts

@@ -82,6 +82,12 @@ export const useChartEditStore = defineStore({
       brightness: 1,
       // 透明度
       opacity: 1,
+      // 变换(暂不更改)
+      rotateZ: 0,
+      rotateX: 0,
+      rotateY: 0,
+      skewX: 0,
+      skewY: 0,
       // 默认背景色
       background: undefined,
       backgroundImage: undefined,

+ 24 - 1
src/views/chart/ContentEdit/index.vue

@@ -15,7 +15,10 @@
       <!-- 展示 -->
       <edit-range>
         <!-- 滤镜预览 -->
-        <div :style="getFilterStyle(chartEditStore.getEditCanvasConfig)">
+        <div :style="{
+            ...getFilterStyle(chartEditStore.getEditCanvasConfig),
+            ...rangeStyle
+          }">
           <!-- 图表 -->
           <edit-shape-box
             v-for="(item, index) in chartEditStore.getComponentList"
@@ -98,6 +101,26 @@ const themeColor = computed(() => {
   return chartColors[chartThemeColor]
 })
 
+// 背景
+const rangeStyle = computed(() => {
+  // 设置背景色和图片背景
+  const background = chartEditStore.getEditCanvasConfig.background
+  const backgroundImage = chartEditStore.getEditCanvasConfig.backgroundImage
+  const selectColor = chartEditStore.getEditCanvasConfig.selectColor
+  const backgroundColor = background ? background : undefined
+
+  const computedBackground = selectColor
+    ? { background: backgroundColor }
+    : { background: `url(${backgroundImage}) no-repeat center/100% !important` }
+
+  // @ts-ignore
+  return {
+    ...computedBackground,
+    width: 'inherit',
+    height: 'inherit'
+  }
+})
+
 // 键盘事件
 onMounted(() => {
   useAddKeyboard()