feat: 合并1.1.1

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -7,7 +7,9 @@
     :style="{
       ...getComponentAttrStyle(item.attr, groupIndex),
       ...getFilterStyle(item.styles),
-      ...getTransformStyle(item.styles)
+      ...getTransformStyle(item.styles),
+      ...getStatusStyle(item.status),
+      ...getBlendModeStyle(item.styles) as any
     }"
   >
     <component
@@ -23,8 +25,8 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { CreateComponentGroupType } from '@/packages/index.d'
-import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
-import { getSizeStyle, getComponentAttrStyle } from '../../utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
+import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
 
 const props = defineProps({
   groupData: {

src/views/preview/components/PreviewRenderList/index.vue

@@ -7,8 +7,10 @@
     :style="{
       ...getComponentAttrStyle(item.attr, index),
       ...getFilterStyle(item.styles),
-      ...getTransformStyle(item.styles)
-    }"
+      ...getTransformStyle(item.styles),
+      ...getStatusStyle(item.status),
+      ...getBlendModeStyle(item.styles) as any
+    } as any"
   >
     <!-- 分组 -->
     <preview-render-group
@@ -37,8 +39,8 @@ import { ChartEditStorageType } from '../../index.d'
 import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { chartColors } from '@/settings/chartThemes/index'
-import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
-import { getSizeStyle, getComponentAttrStyle } from '../../utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
+import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
 
 const props = defineProps({
   localStorageInfo: {

src/views/preview/utils/style.ts

@@ -2,7 +2,7 @@ import { PickCreateComponentType } from '@/packages/index.d'
 import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 type AttrType = PickCreateComponentType<'attr'>
-type StylesType = PickCreateComponentType<'styles'>
+type StatusType = PickCreateComponentType<'status'>
 
 // 设置位置
 export const getComponentAttrStyle = (attr: AttrType, index: number) => {
@@ -16,10 +16,17 @@ export const getComponentAttrStyle = (attr: AttrType, index: number) => {
 
 // 设置大小
 export const getSizeStyle = (attr: AttrType, scale?: number) => {
-  return ({
+  return {
     width: `${scale ? scale * attr.w : attr.w}px`,
     height: `${scale ? scale * attr.h : attr.h}px`
-  })
+  }
+}
+
+// 设置状态样式
+export const getStatusStyle = (attr: StatusType) => {
+  return {
+    display: attr.hide ? 'none' : 'block'
+  }
 }
 
 // 全局样式