From 413c17f4cdf00f455c401cc8dda38512ad27f820 Mon Sep 17 00:00:00 2001 From: ahukpyu Date: Tue, 14 Feb 2023 22:50:19 +0800 Subject: [PATCH 1/2] 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 = 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) // 添加 From 41bbbe7c9618eb7c6d7f62478e37c96dc1b39fb0 Mon Sep 17 00:00:00 2001 From: Yu1512 Date: Wed, 15 Feb 2023 15:21:00 +0800 Subject: [PATCH 2/2] refactor: replace the deprecate api 'globEager' --- .../Decorates/Three/ThreeEarth01/code/world/Assets.ts | 11 +++++------ .../Three/ThreeEarth01/code/world/Resources.ts | 5 +++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Assets.ts b/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Assets.ts index bd8df6c4..b6331dea 100644 --- a/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Assets.ts +++ b/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Assets.ts @@ -5,7 +5,7 @@ interface ITextures { name: string - url: string + url: () => Promise<{ default: string }> } export interface IResources { @@ -15,14 +15,13 @@ export interface IResources { const fileSuffix = ['earth', 'gradient', 'redCircle', 'label', 'aperture', 'glow', 'light_column', 'aircraft'] const textures: ITextures[] = [] -const modules = import.meta.globEager("../../images/earth/*"); - -for(let item in modules) { +const modules = import.meta.glob("../../images/earth/*"); +for (let item in modules) { const n = item.split('/').pop() - if(n) { + if (n) { textures.push({ name: n.split('.')[0], - url: modules[item].default + url: (modules[item] as () => Promise<{ default: string }>) }) } } diff --git a/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Resources.ts b/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Resources.ts index 71468dc2..227c8390 100644 --- a/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Resources.ts +++ b/src/packages/components/Decorates/Three/ThreeEarth01/code/world/Resources.ts @@ -45,8 +45,9 @@ export class Resources { */ private loadResources(): void { this.textureLoader = new TextureLoader(this.manager) - resources.textures?.forEach(item => { - this.textureLoader.load(item.url, t => { + resources.textures?.forEach(async item => { + const url = (await item.url()).default + this.textureLoader.load(url, t => { this.textures[item.name] = t }) })