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

src/views/chart/ContentEdit/index.vue

@@ -23,7 +23,9 @@
         >
           <!-- 图表 -->
           <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
-            <EditGroup v-if="item.isGroup" :groupData="item" :groupIndex="index"> </EditGroup>
+            <!-- 分组 -->
+            <edit-group v-if="item.isGroup" :groupData="item" :groupIndex="index"></edit-group>
+            
             <!-- 单组件 -->
             <edit-shape-box
               v-if="!item.isGroup"

src/views/chart/hooks/useSync.hook.ts

@@ -4,6 +4,7 @@ import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditS
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
 import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
+import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
 
 // 请求处理
 export const useSync = () => {
@@ -14,7 +15,7 @@ export const useSync = () => {
    * * 组件动态注册
    * @param projectData 项目数据
    * @param isSplace 是否替换数据
-   * @returns 
+   * @returns
    */
   const updateComponent = async (projectData: ChartEditStorage, isSplace = false) => {
     if (isSplace) {
@@ -26,18 +27,19 @@ export const useSync = () => {
     }
     // 列表组件注册
     projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
-      // 排除分组
-      if (e.isGroup) return
-      const target = e as CreateComponentType
-      if (!window['$vue'].component(target.chartConfig.chartKey)) {
-        window['$vue'].component(
-          target.chartConfig.chartKey,
-          fetchChartComponent(target.chartConfig)
-        )
-        window['$vue'].component(
-          target.chartConfig.conKey,
-          fetchConfigComponent(target.chartConfig)
-        )
+      const intComponent = (target: CreateComponentType) => {
+        if (!window['$vue'].component(target.chartConfig.chartKey)) {
+          window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
+          window['$vue'].component(target.chartConfig.conKey, fetchConfigComponent(target.chartConfig))
+        }
+      }
+
+      if (e.isGroup) {
+        ;(e as CreateComponentGroupType).groupList.forEach(groupItem => {
+          intComponent(groupItem)
+        })
+      } else {
+        intComponent(e as CreateComponentType)
       }
     })
     // 数据赋值
@@ -45,15 +47,37 @@ export const useSync = () => {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
         for (const comItem of projectData[key]) {
-          // 补充 class 上的方法
-          let newComponent: CreateComponentType = await createComponent(
-            comItem.chartConfig as ConfigType
-          )
-          chartEditStore.addComponentList(
-            Object.assign(newComponent, {...comItem, id: getUUID()}),
-            false,
-            true
-          )
+
+          // 重新创建是为了处理类种方法消失的问题
+          const create = async (e: CreateComponentType, callBack?: (e: CreateComponentType) => void) => {
+            // 补充 class 上的方法
+            let newComponent: CreateComponentType = await createComponent(e.chartConfig as ConfigType)
+            if (callBack) {
+              callBack(Object.assign(newComponent, { ...e, id: getUUID() }))
+            } else {
+              chartEditStore.addComponentList(Object.assign(newComponent, { ...e, id: getUUID() }), false, true)
+            }
+          }
+
+          if (comItem.isGroup) {
+            // 创建分组
+            let groupClass = new PublicGroupConfigClass()
+            groupClass = Object.assign(groupClass, comItem)
+
+            // 注册子应用
+            const targetList: CreateComponentType[] = []
+            ;(comItem as CreateComponentGroupType).groupList.forEach(groupItem => {
+              create(groupItem, e => {
+                targetList.push(e)
+              })
+            })
+            groupClass.groupList = targetList
+            
+            // 分组插入到列表
+            chartEditStore.addComponentList(groupClass, false, true)
+          } else {
+            create(comItem as CreateComponentType)
+          }
         }
       } else {
         // 非组件(顺便排除脏数据)
@@ -66,4 +90,4 @@ export const useSync = () => {
   return {
     updateComponent
   }
-}
+}

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