feat: 列表组件的image渲染支持url模式

2024-11-30 02:38:30 +08:00 · 2023-05-17 20:09:03 +08:00 · 2023-05-17 20:09:03 +08:00 · 9f41ad1811
commit 9f41ad1811
parent 6bbe489162
1 changed files with 89 additions and 87 deletions
--- 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<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
-  eager: true
-})
-const indexModules: Record<string, { default: string }> = import.meta.glob('./components/**/index.vue', {
-  eager: true
-})
-const imagesModules: Record<string, { default: string }> = 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<string, { default: string }> = import.meta.glob('./components/**/config.vue', {
+  eager: true
+})
+const indexModules: Record<string, { default: string }> = import.meta.glob('./components/**/index.vue', {
+  eager: true
+})
+const imagesModules: Record<string, { default: string }> = 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 ''
+}