From 9f41ad1811ec9aba392ec7b884738ad4b9b4e73f Mon Sep 17 00:00:00 2001 From: tnt group Date: Wed, 17 May 2023 20:09:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=97=E8=A1=A8=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=9A=84image=E6=B8=B2=E6=9F=93=E6=94=AF=E6=8C=81url=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/index.ts | 176 +++++++++++++++++++++--------------------- 1 file changed, 89 insertions(+), 87 deletions(-) diff --git a/src/packages/index.ts b/src/packages/index.ts index 131fad80..b7a60c04 100644 --- a/src/packages/index.ts +++ b/src/packages/index.ts @@ -1,87 +1,89 @@ -import { ChartList } from '@/packages/components/Charts/index' -import { DecorateList } from '@/packages/components/Decorates/index' -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: Record = import.meta.glob('./components/**/config.vue', { - eager: true -}) -const indexModules: Record = import.meta.glob('./components/**/index.vue', { - eager: true -}) -const imagesModules: Record = import.meta.glob('../assets/images/chart/**', { - eager: true -}) - -// * 所有图表 -export let packagesList: PackagesType = { - [PackagesCategoryEnum.CHARTS]: ChartList, - [PackagesCategoryEnum.INFORMATIONS]: InformationList, - [PackagesCategoryEnum.TABLES]: TableList, - [PackagesCategoryEnum.DECORATES]: DecorateList -} - -/** - * * 获取目标组件配置信息 - * @param targetData - */ -export const createComponent = async (targetData: ConfigType) => { - const { category, key } = targetData - const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`) - return new chart.default() -} - -/** - * * 获取组件 - * @param {string} chartName 名称 - * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件 - */ -const fetchComponent = (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] - } - } -} - -/** - * * 获取展示组件 - * @param {ConfigType} dropData 配置项 - */ -export const fetchChartComponent = (dropData: ConfigType) => { - const { key } = dropData - return fetchComponent(key, FetchComFlagType.VIEW)?.default -} - -/** - * * 获取配置组件 - * @param {ConfigType} dropData 配置项 - */ -export const fetchConfigComponent = (dropData: ConfigType) => { - const { key } = dropData - return fetchComponent(key, FetchComFlagType.CONFIG)?.default -} - -/** - * * 获取图片内容 - * @param {ConfigType} targetData 配置项 - */ -export const fetchImages = async (targetData?: ConfigType) => { - if (!targetData) return '' - // 新数据动态处理 - const { image, package: targetDataPackage } = targetData - // 兼容旧数据 - if (image.includes('@') || image.includes('base64')) return image - - const imageName = image.substring(image.lastIndexOf('/') + 1) - for (const key in imagesModules) { - const urlSplit = key.split('/') - if (urlSplit[urlSplit.length - 1] === imageName) { - return imagesModules[key]?.default - } - } - return '' -} +import { ChartList } from '@/packages/components/Charts/index' +import { DecorateList } from '@/packages/components/Decorates/index' +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: Record = import.meta.glob('./components/**/config.vue', { + eager: true +}) +const indexModules: Record = import.meta.glob('./components/**/index.vue', { + eager: true +}) +const imagesModules: Record = import.meta.glob('../assets/images/chart/**', { + eager: true +}) + +// * 所有图表 +export let packagesList: PackagesType = { + [PackagesCategoryEnum.CHARTS]: ChartList, + [PackagesCategoryEnum.INFORMATIONS]: InformationList, + [PackagesCategoryEnum.TABLES]: TableList, + [PackagesCategoryEnum.DECORATES]: DecorateList +} + +/** + * * 获取目标组件配置信息 + * @param targetData + */ +export const createComponent = async (targetData: ConfigType) => { + const { category, key } = targetData + const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`) + return new chart.default() +} + +/** + * * 获取组件 + * @param {string} chartName 名称 + * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件 + */ +const fetchComponent = (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] + } + } +} + +/** + * * 获取展示组件 + * @param {ConfigType} dropData 配置项 + */ +export const fetchChartComponent = (dropData: ConfigType) => { + const { key } = dropData + return fetchComponent(key, FetchComFlagType.VIEW)?.default +} + +/** + * * 获取配置组件 + * @param {ConfigType} dropData 配置项 + */ +export const fetchConfigComponent = (dropData: ConfigType) => { + const { key } = dropData + return fetchComponent(key, FetchComFlagType.CONFIG)?.default +} + +/** + * * 获取图片内容 + * @param {ConfigType} targetData 配置项 + */ +export const fetchImages = async (targetData?: ConfigType) => { + if (!targetData) return '' + // 判断图片是否为 url，是则直接返回该 url + if (/^(?:https?):\/\/[^\s/.?#].[^\s]*/.test(targetData.image)) return targetData.image + // 新数据动态处理 + const { image, package: targetDataPackage } = targetData + // 兼容旧数据 + if (image.includes('@') || image.includes('base64')) return image + + const imageName = image.substring(image.lastIndexOf('/') + 1) + for (const key in imagesModules) { + const urlSplit = key.split('/') + if (urlSplit[urlSplit.length - 1] === imageName) { + return imagesModules[key]?.default + } + } + return '' +}