fix: 调整预览状态下控制状态样式

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

@@ -7,9 +7,9 @@
     :style="{
       ...getComponentAttrStyle(item.attr, groupIndex),
       ...getFilterStyle(item.styles),
-      ...getTransformStyle(item.styles)
+      ...getTransformStyle(item.styles),
+      ...getStatusStyle(item.status)
     }"
-    v-show="!item.status.hide"
   >
     <component
       :is="item.chartConfig.chartKey"
@@ -25,7 +25,7 @@
 import { PropType } from 'vue'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
-import { getSizeStyle, getComponentAttrStyle } from '../../utils'
+import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
 
 const props = defineProps({
   groupData: {

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

@@ -7,9 +7,9 @@
     :style="{
       ...getComponentAttrStyle(item.attr, index),
       ...getFilterStyle(item.styles),
-      ...getTransformStyle(item.styles)
+      ...getTransformStyle(item.styles),
+      ...getStatusStyle(item.status)
     }"
-    v-show="!item.status.hide"
   >
     <!-- 分组 -->
     <preview-render-group
@@ -39,7 +39,7 @@ 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 { 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'
+  }
 }
 
 // 全局样式