fix: 提交动态注册的代码

src/packages/index.ts

@@ -28,4 +28,13 @@ const createComponent = async (dropData: ConfigType) => {
   return new chart.default()
 }
 
-export { packagesList, createComponent }
+/**
+ * * 获取组件信息
+ */
+const fetchChartComponent = async (dropData: ConfigType | Omit<ConfigType, "node">) => {
+  const key = dropData.key.substring(1)
+  const { category } = dropData
+  return await import(`../packages/components/${dropData.package}/${category}/${key}/index.vue`)
+}
+
+export { packagesList, createComponent, fetchChartComponent }

src/utils/componets.ts

@@ -1,11 +1,24 @@
 import { defineAsyncComponent, AsyncComponentLoader } from 'vue'
 import { AsyncLoading, AsyncSkeletonLoading } from '@/components/LoadingComponent'
-
+import { ConfigType } from '@/packages/index.d'
+import { fetchChartComponent } from '@/packages/index'
+/**
+ * * 预览页面动态注册 package 组件
+ * @param  {ConfigType} dropData
+ */
+export const componentPackageInstall = async (dropData: Omit<ConfigType, "node">)  => {
+  const key = dropData.key.substring(1)
+  console.log(window['$vue']);
+  if (!window['$vue'].component(key)) {
+    const chart = await fetchChartComponent(dropData)
+    window['$vue'].component(key, chart)
+  }
+}
 /**
  * * 动态注册组件
  */
 export const componentInstall = <T> (key:string, node: T)  => {
-  if(!window['$vue'].component(key) && key && node) {
+  if(!window['$vue'].component(key) && node) {
     window['$vue'].component(key, node)
   }
 }

src/views/chart/ContentCharts/components/ItemBox/index.vue

@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { MacOsControlBtn } from '@/components/MacOsControlBtn/index'
-import { requireErrorImg, componentInstall } from '@/utils'
+import { componentInstall } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { ConfigType } from '@/packages/index.d'
 import omit from 'lodash/omit'

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

@@ -19,6 +19,8 @@ import { PropType, computed } from 'vue'
 import { ChartEditStorageType } from '../../index.d'
 import { chartColors } from '@/settings/chartThemes/index'
 import { useSizeStyle, useComponentStyle } from '../../hooks/useStyle.hook'
+import { componentPackageInstall } from '@/utils'
+import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({
   localStorageInfo: {
@@ -27,6 +29,11 @@ const props = defineProps({
   }
 })
 
+// 动态注册
+props.localStorageInfo.componentList.forEach((e: CreateComponentType) => {
+  componentPackageInstall(e.chartConfig)
+});
+
 // 主题色
 const themeSetting = computed(() => {
   const chartThemeSetting = props.localStorageInfo.editCanvasConfig.chartThemeSetting

src/views/preview/index.vue

@@ -18,7 +18,6 @@ import { getLocalStorage, fetchRouteParams } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { RenderList } from './components/RenderList/index'
 import { ChartEditStorageType } from './index.d'
-import { useSizeStyle } from './hooks/useStyle.hook'
 
 const previewRef = ref()
 
@@ -55,7 +54,7 @@ const previewRefStyle = computed(() => {
 if (!localStorageInfo) {
   window['$message'].warning('获取数据失败')
 }
-console.log(localStorageInfo);
+
 nextTick(() => {
   const { calcRate, windowResize, unWindowResize } = usePreviewScale(width.value as number, height.value as number, previewRef.value)