| 提交 | 用户 | 时间 | ||
| 314507 | 1 | /* |
| H | 2 | * 组件注册 |
| 3 | * | |
| 4 | * 组件规范： | |
| 5 | * 1. 每个子目录就是一个独立的组件，每个目录包括以下三个文件： | |
| 6 | * 2. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型 | |
| 7 | * 3. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可 | |
| 8 | * 4. property.vue：组件属性表单，用于配置组件，必选， | |
| 9 | * | |
| 10 | * 注： | |
| 11 | * 组件ID以config.ts中配置的id为准，与组件目录的名称无关，但还是建议组件目录的名称与组件ID保持一致 | |
| 12 | */ | |
| 13 | ||
| 14 | // 导入组件界面模块 | |
| 15 | const viewModules: Record<string, any> = import.meta.glob('./*/*.vue') | |
| 16 | // 导入配置模块 | |
| 17 | const configModules: Record<string, any> = import.meta.glob('./*/config.ts', { eager: true }) | |
| 18 | ||
| 19 | // 界面模块 | |
| 20 | const components = {} | |
| 21 | // 组件配置模块 | |
| 22 | const componentConfigs = {} | |
| 23 | ||
| 24 | // 组件界面的类型 | |
| 25 | type ViewType = 'index' | 'property' | |
| 26 | ||
| 27 | /** | |
| 28 | * 注册组件的界面模块 | |
| 29 | * | |
| 30 | * @param componentId 组件ID | |
| 31 | * @param configPath 配置模块的文件路径 | |
| 32 | * @param viewType 组件界面的类型 | |
| 33 | */ | |
| 34 | const registerComponentViewModule = ( | |
| 35 | componentId: string, | |
| 36 | configPath: string, | |
| 37 | viewType: ViewType | |
| 38 | ) => { | |
| 39 | const viewPath = configPath.replace('config.ts', `${viewType}.vue`) | |
| 40 | const viewModule = viewModules[viewPath] | |
| 41 | if (viewModule) { | |
| 42 | // 定义异步组件 | |
| 43 | components[componentId] = defineAsyncComponent(viewModule) | |
| 44 | } | |
| 45 | } | |
| 46 | ||
| 47 | // 注册 | |
| 48 | Object.keys(configModules).forEach((modulePath: string) => { | |
| 49 | const component = configModules[modulePath].component | |
| 50 | const componentId = component?.id | |
| 51 | if (componentId) { | |
| 52 | // 注册组件 | |
| 53 | componentConfigs[componentId] = component | |
| 54 | // 注册预览界面 | |
| 55 | registerComponentViewModule(componentId, modulePath, 'index') | |
| 56 | // 注册属性配置表单 | |
| 57 | registerComponentViewModule(`${componentId}Property`, modulePath, 'property') | |
| 58 | } | |
| 59 | }) | |
| 60 | ||
| 61 | export { components, componentConfigs } | |
