From 413c17f4cdf00f455c401cc8dda38512ad27f820 Mon Sep 17 00:00:00 2001
From: ahukpyu <ahukpyu@gmail.com>
Date: Tue, 14 Feb 2023 22:50:19 +0800
Subject: [PATCH] refactor: replace the deprecate api of vite

---
 src/packages/index.ts                         | 22 ++++++++++---------
 .../components/ChartsItemBox/index.vue        | 13 ++++++-----
 .../components/ChartsSearch/index.vue         |  4 ++--
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/packages/index.ts b/src/packages/index.ts
index 4f530faa..410fdf1e 100644
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@@ -4,9 +4,9 @@ import { InformationList } from '@/packages/components/Informations/index'
 import { TableList } from '@/packages/components/Tables/index'
 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
 
-const configModules = import.meta.globEager('./components/**/config.vue')
-const indexModules = import.meta.globEager('./components/**/index.vue')
-const imagesModules = import.meta.globEager('../assets/images/chart/**')
+const configModules = import.meta.glob('./components/**/config.vue')
+const indexModules = import.meta.glob('./components/**/index.vue')
+const imagesModules = import.meta.glob('../assets/images/chart/**')
 
 // * 所有图表
 export let packagesList: PackagesType = {
@@ -31,12 +31,13 @@ export const createComponent = async (targetData: ConfigType) => {
  * @param {string} chartName 名称
  * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
  */
-const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
+const fetchComponent = async (chartName: string, flag: FetchComFlagType) => {
   const module = flag === FetchComFlagType.VIEW ? indexModules : configModules
   for (const key in module) {
     const urlSplit = key.split('/')
     if (urlSplit[urlSplit.length - 2] === chartName) {
-      return module[key]
+      const loader = module[key] as () => Promise<{ default: any }>
+      return (await loader()).default
     }
   }
 }
@@ -45,18 +46,18 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
  * * 获取展示组件
  * @param {ConfigType} dropData 配置项
  */
-export const fetchChartComponent = (dropData: ConfigType) => {
+export const fetchChartComponent = async (dropData: ConfigType) => {
   const { key } = dropData
-  return fetchComponent(key, FetchComFlagType.VIEW)?.default
+  return await fetchComponent(key, FetchComFlagType.VIEW)
 }
 
 /**
  * * 获取配置组件
  * @param {ConfigType} dropData 配置项
  */
-export const fetchConfigComponent = (dropData: ConfigType) => {
+export const fetchConfigComponent = async (dropData: ConfigType) => {
   const { key } = dropData
-  return fetchComponent(key, FetchComFlagType.CONFIG)?.default
+  return await fetchComponent(key, FetchComFlagType.CONFIG)
 }
 
 /**
@@ -74,7 +75,8 @@ export const fetchImages = async (targetData?: ConfigType) => {
   for (const key in imagesModules) {
     const urlSplit = key.split('/')
     if (urlSplit[urlSplit.length - 1] === imageName) {
-      return imagesModules[key]?.default
+      const loader = imagesModules[key] as () => Promise<{ default: string }>
+      return (await loader()).default
     }
   }
   return ''
diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
index 7ca3b1b0..17349fb6 100644
--- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
@@ -68,14 +68,15 @@ const chartMode: Ref<ChartModeEnum> = computed(() => {
 })
 
 // 拖拽处理
-const dragStartHandle = (e: DragEvent, item: ConfigType) => {
-  // 动态注册图表组件
-  componentInstall(item.chartKey, fetchChartComponent(item))
-  componentInstall(item.conKey, fetchConfigComponent(item))
+const dragStartHandle = async (e: DragEvent, item: ConfigType) => {
   // 将配置项绑定到拖拽属性上
   e!.dataTransfer!.setData(DragKeyEnum.DRAG_KEY, JSONStringify(omit(item, ['image'])))
   // 修改状态
   chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
+  
+  // 动态注册图表组件
+  componentInstall(item.chartKey, await fetchChartComponent(item))
+  componentInstall(item.conKey, await fetchConfigComponent(item))
 }
 
 // 拖拽结束
@@ -88,8 +89,8 @@ const dblclickHandle = async (item: ConfigType) => {
   try {
     loadingStart()
     // 动态注册图表组件
-    componentInstall(item.chartKey, fetchChartComponent(item))
-    componentInstall(item.conKey, fetchConfigComponent(item))
+    componentInstall(item.chartKey, await fetchChartComponent(item))
+    componentInstall(item.conKey, await fetchConfigComponent(item))
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(item)
     // 添加
diff --git a/src/views/chart/ContentCharts/components/ChartsSearch/index.vue b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
index f1a25ddd..f5a22712 100644
--- a/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
+++ b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue
@@ -149,8 +149,8 @@ const selectChartHandle = async (item: ConfigType) => {
   try {
     loadingStart()
     // 动态注册图表组件
-    componentInstall(item.chartKey, fetchChartComponent(item))
-    componentInstall(item.conKey, fetchConfigComponent(item))
+    componentInstall(item.chartKey, await fetchChartComponent(item))
+    componentInstall(item.conKey, await fetchConfigComponent(item))
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(item)
     // 添加