From c29ecc8b0bcae768786693422060fd5eba9c93c6 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Thu, 10 Mar 2022 14:34:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8A=A8=E6=80=81=E6=B3=A8=E5=86=8C=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChartItemSetting/PositionSetting.vue      |  1 -
 src/main.ts                                   |  5 +---
 src/plugins/customComponents.ts               | 20 ----------------
 src/plugins/index.ts                          |  2 +-
 .../components/ItemBox/index.vue              |  2 +-
 .../preview/components/RenderList/index.vue   |  2 +-
 src/views/preview/index.vue                   | 24 +++++++++++++++----
 7 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/src/components/ChartItemSetting/PositionSetting.vue b/src/components/ChartItemSetting/PositionSetting.vue
index 0c05f489..5e5ca2fe 100644
--- a/src/components/ChartItemSetting/PositionSetting.vue
+++ b/src/components/ChartItemSetting/PositionSetting.vue
@@ -101,7 +101,6 @@ const props = defineProps({
 })
 
 const positonHandle = (key: string) => {
-  console.log(key)
   switch (key) {
     // 局左
     case positionList[0]['key']:
diff --git a/src/main.ts b/src/main.ts
index da4c8778..7dc599e8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,7 @@ import App from './App.vue'
 import router, { setupRouter } from '@/router'
 import i18n from '@/i18n/index'
 import { setupStore } from '@/store'
-import { setupNaive, setupDirectives, setupCustomComponents, setupPreviewPackages } from '@/plugins'
+import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins'
 import { AppProvider } from '@/components/AppProvider/index'
 import { setHtmlTheme } from '@/utils'
 import 'animate.css/animate.min.css'
@@ -22,9 +22,6 @@ async function appInit() {
   // 注册全局自定义组件
   setupCustomComponents(app)
 
-  // 预览页面注册（）
-  setupPreviewPackages(app)
-  
   // 挂载状态管理
   setupStore(app)
 
diff --git a/src/plugins/customComponents.ts b/src/plugins/customComponents.ts
index 693fcc53..a11ea0b2 100644
--- a/src/plugins/customComponents.ts
+++ b/src/plugins/customComponents.ts
@@ -1,26 +1,6 @@
 import type { App } from 'vue'
 import { Skeleton } from '@/components/Skeleton'
 import { LoadingComponent } from '@/components/LoadingComponent'
-import { getLocalStorageInfo } from '@/views/preview/utils/index'
-import { fetchChartComponent } from '@/packages/index'
-import { CreateComponentType } from '@/packages/index.d'
-
-/**
- * * 预览页面动态注册 package 组件
- * @param app
- */
-export const setupPreviewPackages = (app: App) => {
-  if (document.location.hash.includes('preview')) {
-    const localStorageInfo = getLocalStorageInfo()
-    if (!localStorageInfo) return
-    localStorageInfo.componentList.forEach(async (e: CreateComponentType) => {
-      if (!app.component(e.key)) {
-        const chart = fetchChartComponent(e.chartConfig)
-        app.component(e.key, chart)
-      }
-    })
-  }
-}
 
 /**
  * 全局注册自定义组件
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 36a3dae2..c500f63a 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,4 +1,4 @@
 export { setupNaive } from '@/plugins/naive'
 export { setupDirectives } from '@/plugins/directives'
-export { setupCustomComponents, setupPreviewPackages } from '@/plugins/customComponents'
+export { setupCustomComponents } from '@/plugins/customComponents'
 export { icon } from '@/plugins/icon'
diff --git a/src/views/chart/ContentCharts/components/ItemBox/index.vue b/src/views/chart/ContentCharts/components/ItemBox/index.vue
index 16f80108..f6035d2c 100644
--- a/src/views/chart/ContentCharts/components/ItemBox/index.vue
+++ b/src/views/chart/ContentCharts/components/ItemBox/index.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRaw } from 'vue'
+import { PropType } from 'vue'
 import { MacOsControlBtn } from '@/components/MacOsControlBtn/index'
 import { componentInstall } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
diff --git a/src/views/preview/components/RenderList/index.vue b/src/views/preview/components/RenderList/index.vue
index e2c2970b..25b0a035 100644
--- a/src/views/preview/components/RenderList/index.vue
+++ b/src/views/preview/components/RenderList/index.vue
@@ -7,7 +7,7 @@
     :style="{ ...useComponentAttrStyle(item.attr, index), ...useSizeStyle(item.attr), ...useStyle(item.styles)}"
   >
     <component
-      :is="item.key"
+      :is="item.chartConfig.chartKey"
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index 094523aa..375c3bde 100644
--- a/src/views/preview/index.vue
+++ b/src/views/preview/index.vue
@@ -3,7 +3,7 @@
     <!-- 缩放层 -->
     <div ref="previewRef">
       <!-- 展示层 -->
-      <div :style="previewRefStyle">
+      <div :style="previewRefStyle" v-if="show">
         <!-- 渲染层 -->
         <RenderList :localStorageInfo="localStorageInfo" />
       </div>
@@ -18,6 +18,8 @@ import { RenderList } from './components/RenderList/index'
 import { ChartEditStorageType } from './index.d'
 import { getLocalStorageInfo } from './utils/index'
 import { useEditCanvasConfigStyle } from './utils'
+import { CreateComponentType } from '@/packages/index.d'
+import { fetchChartComponent } from '@/packages/index'
 
 const previewRef = ref()
 
@@ -25,15 +27,29 @@ const localStorageInfo: ChartEditStorageType = getLocalStorageInfo() as ChartEdi
 
 const width = ref(localStorageInfo?.editCanvasConfig.width)
 const height = ref(localStorageInfo?.editCanvasConfig.height)
+const show = ref(false)
 
 const previewRefStyle: any = computed(() => {
   return useEditCanvasConfigStyle(localStorageInfo.editCanvasConfig)
 })
 
-if (!localStorageInfo) {
-  window['$message'].warning('获取数据失败')
-}
+// 注册组件(一开始无法获取window['$vue'])
+const intervalTiming = setInterval(() => {
+  if (window['$vue'].component) {
+    clearInterval(intervalTiming)
+    show.value = true
+    localStorageInfo.componentList.forEach(async (e: CreateComponentType) => {
+      if (!window['$vue'].component(e.chartConfig.chartKey)) {
+        window['$vue'].component(
+          e.chartConfig.chartKey,
+          fetchChartComponent(e.chartConfig)
+        )
+      }
+    })
+  }
+}, 200)
 
+// 屏幕适配
 nextTick(() => {
   const { calcRate, windowResize, unWindowResize } = usePreviewScale(
     width.value as number,