fix: 处理分组预览和动态引入的问题

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

@@ -0,0 +1,3 @@
+import PreviewRenderGroup from './index.vue'
+
+export { PreviewRenderGroup }

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

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="chart-item"
+    v-for="item in groupData.groupList"
+    :class="animationsClass(item.styles.animations)"
+    :key="item.id"
+    :style="{ 
+      ...getComponentAttrStyle(item.attr, groupIndex),
+      ...getFilterStyle(item.styles),
+      ...getTransformStyle(item.styles)
+    }"
+  >
+    <component
+      :is="item.chartConfig.chartKey"
+      :chartConfig="item"
+      :themeSetting="themeSetting"
+      :themeColor="themeColor"
+      :style="{...getSizeStyle(item.attr)}"
+    ></component>
+  </div>
+</template>
+
+<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'
+
+const props = defineProps({
+  groupData: {
+    type: Object as PropType<CreateComponentGroupType>,
+    required: true
+  },
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  groupIndex: {
+    type: Number,
+    required: true
+  }
+})
+
+console.log(props.groupData)
+</script>
+
+<style lang="scss" scoped>
+.chart-item {
+  position: absolute;
+}
+</style>

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

@@ -1,21 +1,31 @@
 <template>
   <div
     class="chart-item"
-    :class="animationsClass(item.styles.animations)"
     v-for="(item, index) in localStorageInfo.componentList"
+    :class="animationsClass(item.styles.animations)"
     :key="item.id"
-    :style="{ 
+    :style="{
       ...getComponentAttrStyle(item.attr, index),
       ...getFilterStyle(item.styles),
       ...getTransformStyle(item.styles)
     }"
   >
+    <!-- 分组 -->
+    <preview-render-group
+      v-if="item.isGroup"
+      :groupData="item"
+      :groupIndex="index"
+      :themeSetting="themeSetting"
+      :themeColor="themeColor"
+    ></preview-render-group>
+
+    <!-- 单组件 -->
     <component
       :is="item.chartConfig.chartKey"
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
-      :style="{...getSizeStyle(item.attr)}"
+      :style="{ ...getSizeStyle(item.attr) }"
     ></component>
   </div>
 </template>
@@ -23,6 +33,7 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { ChartEditStorageType } from '../../index.d'
+import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
 import { chartColors } from '@/settings/chartThemes/index'
 import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle } from '../../utils'
@@ -45,7 +56,6 @@ const themeColor = computed(() => {
   const chartThemeColor = props.localStorageInfo.editCanvasConfig.chartThemeColor
   return chartColors[chartThemeColor]
 })
-
 </script>
 
 <style lang="scss" scoped>

src/views/preview/hooks/useComInstall.hook.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { ChartEditStorageType } from '../index.d'
-import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { fetchChartComponent } from '@/packages/index'
 
 export const useComInstall = (localStorageInfo: ChartEditStorageType) => {
@@ -10,12 +10,20 @@ export const useComInstall = (localStorageInfo: ChartEditStorageType) => {
   const intervalTiming = setInterval(() => {
     if (window['$vue'].component) {
       clearInterval(intervalTiming)
-      localStorageInfo.componentList.forEach(async (e: CreateComponentType) => {
-        if (!window['$vue'].component(e.chartConfig.chartKey)) {
-          window['$vue'].component(
-            e.chartConfig.chartKey,
-            fetchChartComponent(e.chartConfig)
-          )
+
+      const intComponent = (target: CreateComponentType) => {
+        if (!window['$vue'].component(target.chartConfig.chartKey)) {
+          window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
+        }
+      }
+
+      localStorageInfo.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
+        if (e.isGroup) {
+          (e as CreateComponentGroupType).groupList.forEach(groupItem => {
+            intComponent(groupItem)
+          })
+        } else {
+          intComponent(e as CreateComponentType)
         }
       })
       show.value = true