模块定义

组件模块路径：lowcode-yudao-ui-admin-vue3/src/views/lowcode/components/designer-editor/widgets，在widgets目录下每个文件夹会被解析为一个组件模块，默认导入index.ts作为模块定义文件。

视频教程

TBD

如何新增一个模块

在 widgets 目录下创建一个文件夹，文件夹名称即为模块名称，文件夹下创建index.ts文件，设置模块名称、图标等信息即可。配置参数参考 模块定义类型。

模块定义类型

// 组件模块配置
export interface WidgetModuleInfo {
  /** 模块名称 */
  name?: string
  /** 模块Icon */
  icon?: string
  /** 模块Label */
  label?: string
  /** 模块忽略注册组件 */
  ignores?: (string | undefined)[]
  /** 模块下组件定义 */
  defines?: WidgetDefine[]
  /** 模块菜单 */
  menus?: (editor: DesignerEditor, args: UseWidgetMenusArgs) => MenuItem[]
  /** 是否菜单中禁用 */
  disableInMenu?: (
    action: WidgetMenuAction,
    widget?: WidgetInstance,
    widgetRenderContext?: WidgetRenderContext
  ) => boolean | ComputedRef<boolean>
  /** 是否菜单中隐藏 */
  hiddenInMenu?: (
    action: WidgetMenuAction,
    widget?: WidgetInstance,
    widgetRenderContext?: WidgetRenderContext
  ) => boolean | ComputedRef<boolean>
}

预定义模块

文件夹名称	模块名称
baseWidgetDefines	基础组件
advWidgetDefines	高级组件
codeWidgetDefines	代码类组件
containerWidgetDefines	容器组件
formWidgetDefines	表单组件
innerWidgetDefines	内部组件

示例

基础模块定义： baseWidgetDefines/index.ts 文件，定义基础模块。

import { WidgetModuleInfo } from '../../designer-editor.type'

const defaultConfig: WidgetModuleInfo = {
  label: '基础组件',
  icon: 'ep:menu'
}
export default defaultConfig

表单元素： formWidgetDefines/index.ts 文件，定义表单元素模块，该模块下组件仅可在表单容器下添加。

import { isNullOrUnDef } from '@/utils/is'
import { WidgetModuleInfo } from '../../designer-editor.type'

const defaultConfig: WidgetModuleInfo = {
  label: '表单元素',
  icon: 'ep:edit',
  disableInMenu(_, __, widgetRenderContext) {
    return isNullOrUnDef(
      widgetRenderContext?.seekParent?.({
        _moduleName: 'containerWidgetDefines',
        _key: 'form'
      }).seekWidget
    )
  }
}
export default defaultConfig

内部组件： innerWidgetDefines/index.ts 文件，定义内部组件，该模块下组件不可通过添加按钮手动添加，只能通过代码添加。

import { WidgetModuleInfo } from '../../designer-editor.type'

const defaultConfig: WidgetModuleInfo = {
  label: '内部组件',
  icon: 'ep:lock',
  hiddenInMenu: () => true
}
export default defaultConfig