From 5c797b738e1001546834261753e61045eaedfd22 Mon Sep 17 00:00:00 2001
From: mtruning <1262327911@qq.com>
Date: Sun, 6 Mar 2022 21:26:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8F=90=E4=BA=A4=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E6=B3=A8=E5=86=8C=E7=9A=84=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/index.ts                           | 11 ++++++++++-
 src/utils/componets.ts                          | 17 +++++++++++++++--
 .../ContentCharts/components/ItemBox/index.vue  |  2 +-
 .../preview/components/RenderList/index.vue     |  7 +++++++
 src/views/preview/index.vue                     |  3 +--
 5 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/packages/index.ts b/src/packages/index.ts
index 43a8a347..26d0c00f 100644
--- a/src/packages/index.ts
+++ b/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 }
diff --git a/src/utils/componets.ts b/src/utils/componets.ts
index 4ef9850b..a395a7e4 100644
--- a/src/utils/componets.ts
+++ b/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)
   }
 }
diff --git a/src/views/chart/ContentCharts/components/ItemBox/index.vue b/src/views/chart/ContentCharts/components/ItemBox/index.vue
index 6dfd0a3b..823e43e1 100644
--- a/src/views/chart/ContentCharts/components/ItemBox/index.vue
+++ b/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'
diff --git a/src/views/preview/components/RenderList/index.vue b/src/views/preview/components/RenderList/index.vue
index f3f8b61b..09180c63 100644
--- a/src/views/preview/components/RenderList/index.vue
+++ b/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
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index d0d6386f..817ef2ad 100644
--- a/src/views/preview/index.vue
+++ b/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)