fix: 修改预览页面动态注册方式

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']:

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)
 

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)
-      }
-    })
-  }
-}
 
 /**
  * 全局注册自定义组件

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'

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'

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"

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,