index.ts
3.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
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 { PhotoList } from '@/packages/components/Photos/index'
import { IconList } from '@/packages/components/Icons/index'
import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
import { useInjectLib } from './components/external/utils/useInjectLib' // THINGS_KIT 修改注册组件
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,
[PackagesCategoryEnum.PHOTOS]: PhotoList,
[PackagesCategoryEnum.ICONS]: IconList
}
// 组件缓存, 可以大幅度提升组件加载速度
const componentCacheMap = new Map<string, any>()
const loadConfig = (packageName: string, categoryName: string, keyName: string) => {
const key = packageName + categoryName + keyName
if (!componentCacheMap.has(key)) {
componentCacheMap.set(key, import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`))
}
return componentCacheMap.get(key)
}
/**
* * 获取目标组件配置信息
* @param targetData
*/
export const createComponent = async (targetData: ConfigType) => {
const { redirectComponent, category, key } = targetData
// redirectComponent 是给图片组件库和图标组件库使用的
if (redirectComponent) {
const [packageName, categoryName, keyName] = redirectComponent.split('/')
const redirectChart = await loadConfig(packageName, categoryName, keyName)
return new redirectChart.default()
}
const chart = await loadConfig(targetData.package, category, key)
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 (/^(http|https):\/\/([\w.]+\/?)\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 ''
}
useInjectLib(packagesList as any) // THINGS_KIT 修改注册组件