feat: 新增 public 预览配置项preview

src/packages/components/Informations/Texts/TextBarrage/config.ts

@@ -15,7 +15,6 @@ export const FontWeightObject = {
 }
 
 export const option = {
-  
   dataset: '让数字化看得见',
   fontSize: 32,
   fontColor: '#ffffff',
@@ -39,4 +38,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: -1 }
   public chartConfig = cloneDeep(TextBarrageConfig)
   public option = cloneDeep(option)
+  public preview = { overFlowHidden: true } 
 }

src/packages/index.d.ts

@@ -114,6 +114,10 @@ export interface PublicConfigType {
     // 动画
     animations: string[]
   }
+  preview?: {
+    // 预览超出隐藏
+    overFlowHidden?: boolean
+  }
   filter?: string
   status: StatusType
   events: {

src/packages/public/publicConfig.ts

@@ -78,6 +78,10 @@ export class PublicConfigClass implements PublicConfigType {
     // 动画
     animations: []
   }
+  // 预览
+  public preview = {
+    overFlowHidden: false
+  }
   // 状态
   public status = {
     lock: false,

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

@@ -9,6 +9,7 @@
       ...getFilterStyle(item.styles),
       ...getTransformStyle(item.styles),
       ...getStatusStyle(item.status),
+      ...getPreviewConfigStyle(item.preview),
       ...getBlendModeStyle(item.styles) as any
     }"
   >
@@ -28,7 +29,7 @@
 import { PropType } from 'vue'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
-import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
+import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils'
 import { useLifeHandler } from '@/hooks'
 
 const props = defineProps({
@@ -54,6 +55,5 @@ const props = defineProps({
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
-  overflow: hidden;
 }
 </style>

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

@@ -2,13 +2,14 @@
   <div
     class="chart-item"
     v-for="(item, index) in localStorageInfo.componentList"
-    :class="[animationsClass(item.styles.animations), !item.isGroup && 'hidden']"
+    :class="animationsClass(item.styles.animations)"
     :key="item.id"
     :style="{
       ...getComponentAttrStyle(item.attr, index),
       ...getFilterStyle(item.styles),
       ...getTransformStyle(item.styles),
       ...getStatusStyle(item.status),
+      ...getPreviewConfigStyle(item.preview),
       ...getBlendModeStyle(item.styles) as any
     }"
   >
@@ -43,7 +44,7 @@ import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { chartColors } from '@/settings/chartThemes/index'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
-import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
+import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils'
 import { useLifeHandler } from '@/hooks'
 
 // 初始化数据池
@@ -78,8 +79,5 @@ onMounted(() => {
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
-  &.hidden {
-    overflow: hidden;
-  }
 }
 </style>

src/views/preview/utils/style.ts

@@ -3,6 +3,7 @@ import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditSt
 
 type AttrType = PickCreateComponentType<'attr'>
 type StatusType = PickCreateComponentType<'status'>
+type PreviewConfig = PickCreateComponentType<'preview'>
 
 // 设置位置
 export const getComponentAttrStyle = (attr: AttrType, index: number) => {
@@ -29,6 +30,17 @@ export const getStatusStyle = (attr: StatusType) => {
   }
 }
 
+// 设置预览配置样式
+export const getPreviewConfigStyle = (previewConfig: PreviewConfig) => {
+  const previewStyle: Partial<CSSStyleDeclaration> = {}
+  if (previewConfig) {
+    if (previewConfig.overFlowHidden) {
+      previewStyle.overflow = 'hidden'
+    }
+  }
+  return previewStyle
+}
+
 // 全局样式
 export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
   // 背景