lowcode-engine
lowcode-engine copied to clipboard
Published
20 hours ago •
alibaba
alibaba
自定义Antd Menu物料能在大纲面板中选中，而无法在画布中选中。
克隆官方物料仓库，更改的文件如下 build.lowcode.js，升级antd和引擎版本
const { name, version } = require("./package.json");
const library = 'AntdLowcode';
module.exports = {
sourceMap: false,
alias: {
'@': './src',
lowcode: './lowcode'
},
plugins: [
[
'@alifd/build-plugin-lowcode',
{
noParse: true,
engineScope: '@alilc',
library,
staticResources: {
engineCoreCssUrl:
'https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/css/engine-core.css',
engineExtCssUrl:
'https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/css/engine-ext.css',
engineCoreJsUrl:
'https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/js/engine-core.js',
engineExtJsUrl:
'https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/js/engine-ext.js',
},
npmInfo: {
package: name,
version,
},
lowcodeDir: 'lowcode',
entryPath: 'src/index.tsx',
categories: ['通用', '导航', '信息输入', '信息展示', '信息反馈'],
baseUrl: {
prod: `https://alifd.alicdn.com/npm/${name}@${version}`,
daily: `https://alifd.alicdn.com/npm/${name}@${version}`,
},
builtinAssets: [
{
packages: [
{
package: 'moment',
version: '2.24.0',
urls: ['https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js'],
library: 'moment',
},
{
package: 'lodash',
library: '_',
urls: ['https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js'],
},
{
package: 'iconfont-icons',
urls: '//at.alicdn.com/t/font_2369445_ukrtsovd92r.js',
},
{
package: '@ant-design/icons',
version: '4.7.0',
urls: [`//g.alicdn.com/code/npm/@ali/ant-design-icons-cdn/4.5.0/index.umd.min.js`],
library: 'icons',
},
{
package: 'antd',
version: '4.23.0',
urls: [
`//g.alicdn.com/code/lib/antd/4.23.0/antd.min.js`,
`//g.alicdn.com/code/lib/antd/4.23.0/antd.min.css`,
],
library: 'antd',
},
],
components: [],
},
],
},
],
],
};
lowcode/menu/meta.ts
import {uuid} from '../_utils/utils';
import {itemsExtraProps} from './utils';
import snippets from './snippets';
export default {
snippets,
componentName: 'Menu',
title: '导航菜单',
category: '导航',
props: [
{
name: 'items',
title: '菜单项',
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'type',
title: {
label: '类型',
tip: '菜单项类型',
},
propType: {
type: 'oneOf',
value: ['Menu.Item', 'Menu.SubMenu', 'Menu.ItemGroup', 'Mneu.Divider'],
},
setter: [
{
componentName: 'RadioGroupSetter',
props: {
options: [
{
title: 'MenuItem',
value: 'Menu.Item',
},
{
title: 'SubMenu',
value: 'Menu.SubMenu',
},
{
title: 'ItemGroup',
value: 'Menu.ItemGroup',
},
{
title: 'Divider',
value: 'Menu.MenuDivider'
}
],
},
},
'VariableSetter',
],
},
{
name: 'key',
title: 'key',
setter: 'StringSetter',
initialValue: (val) => val || uuid(),
},
{
name: 'label',
title: '菜单名称',
setter: 'StringSetter',
},
],
},
},
initialValue: () => {
return {
type: 'Menu.Item',
key: 'item-' + uuid(),
label: '菜单名',
};
},
},
},
},
extraProps: itemsExtraProps,
},
{
name: 'defaultOpenKeys',
title: {
label: '初始展开菜单项',
tip: '初始展开的 SubMenu 菜单项 key 数组',
},
propType: {type: 'arrayOf', value: 'string'},
},
{
name: 'defaultSelectedKeys',
title: {label: '初始选中的菜单项', tip: '初始选中的菜单项 key 数组'},
propType: {type: 'arrayOf', value: 'string'},
},
{
name: 'forceSubMenuRender',
title: {
label: '子菜单预渲染',
tip: '在子菜单展示之前就渲染进 DOM',
},
propType: 'bool',
defaultValue: false,
},
{
name: 'inlineCollapsed',
title: {label: '是否收起', tip: 'inline 时菜单是否收起状态'},
propType: 'bool',
},
{
name: 'inlineIndent',
title: {label: '缩进宽度', tip: 'inline 模式的菜单缩进宽度'},
propType: 'number',
},
{
name: 'mode',
title: {
label: '菜单类型',
tip: '菜单类型，现在支持垂直、水平、和内嵌模式三种',
},
propType: {type: 'oneOf', value: ['vertical', 'horizontal', 'inline']},
},
{
name: 'multiple',
title: {label: '是否允许多选', tip: '是否允许多选'},
propType: 'bool',
defaultValue: false,
},
{
name: 'openKeys',
title: {
label: '当前展开的菜单项',
tip: '当前展开的 SubMenu 菜单项 key 数组',
},
propType: {type: 'arrayOf', value: 'string'},
},
{
name: 'selectable',
title: {label: '是否允许选中', tip: '是否允许选中'},
propType: 'bool',
defaultValue: true,
},
{
name: 'selectedKeys',
title: {label: '当前选中项', tip: '当前选中的菜单项 key 数组'},
propType: {type: 'arrayOf', value: 'string'},
},
{
name: 'style',
title: {label: '根节点样式', tip: '根节点样式'},
propType: 'object',
},
{
name: 'subMenuCloseDelay',
title: {
label: '关闭延时',
tip: '用户鼠标离开子菜单后关闭延时，单位：秒',
},
propType: 'number',
},
{
name: 'subMenuOpenDelay',
title: {
label: '开启延时',
tip: '用户鼠标进入子菜单后开启延时，单位：秒',
},
propType: 'number',
},
{
name: 'theme',
title: {label: '主题颜色', tip: '主题颜色'},
propType: {type: 'oneOf', value: ['light', 'dark']},
},
{
name: 'onClick',
title: {label: '点击 MenuItem 调用函数', tip: '点击 MenuItem 调用函数'},
propType: 'func',
},
{
name: 'onDeselect',
title: {
label: '取消选中时调用函数',
tip: '取消选中时调用，仅在 multiple 生效',
},
propType: 'func',
},
{
name: 'triggerSubMenuAction',
title: {
label: '触发方式',
tip: '展开/关闭的触发行为',
},
propType: {type: 'oneOf', value: ['hover', 'click']},
},
{
name: 'onOpenChange',
title: {label: 'SubMenu 展开/关闭的回调', tip: '展开/关闭的回调'},
propType: 'func',
},
{
name: 'onSelect',
title: {label: '被选中时调用函数', tip: '被选中时调用函数'},
propType: 'func',
},
{
name: 'overflowedIndicator',
title: {label: '折叠图标', tip: '自定义 Menu 折叠时的图标'},
propType: 'node',
},
],
configure: {
supports: {
style: true,
events: [
{
name: 'onClick',
template:
"onClick({item,key,keyPath,domEvent},${extParams}){\n// 点击 MenuItem 调用此函数\nconsole.log('onClick',item,key,keyPath,domEvent);}",
},
{
name: 'onDeselect',
template:
"onDeselect({item,key,keyPath,selectedKeys,domEvent},${extParams}){\n// 取消选中时调用，仅在 multiple 生效\nconsole.log('onDeselect',item,key,keyPath,selectedKeys,domEvent);}",
},
{
name: 'onOpenChange',
template:
"onOpenChange(openKeys,${extParams}){\n// SubMenu 展开/关闭的回调\nconsole.log('onOpenChange',openKeys);}",
},
{
name: 'onSelect',
template:
"onSelect({item,key,keyPath,selectedKeys,domEvent},${extParams}){\n// 被选中时调用\nconsole.log('onSelect',item,key,keyPath,selectedKeys,domEvent);}",
},
],
},
},
};
/lowcode/menu/snippets.ts
import {uuid} from '../_utils/utils';
export default [
{
title: '导航菜单',
screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/menu-1.jpg',
schema: {
componentName: 'Menu',
props: {
mode: 'inline',
defaultSelectedKeys: ['1'],
defaultOpenKeys: ['sub1'],
theme: 'dark',
items: [
{
key: 'item-' + uuid(),
type: 'Menu.Item',
label: '菜单名',
},
],
},
},
},
];
/lowcode/menu.item/meta.ts
import snippets from './snippets';
export default {
snippets,
componentName: 'Menu.Item',
title: '菜单项',
props: [
{
name: 'label',
title: { label: '菜单项标题', tip: '菜单项标题' },
propType: 'string'
},
{
name: 'danger',
title: { label: '错误状态', tip: '展示错误状态样式' },
propType: 'bool',
defaultValue: false,
},
{
name: 'disabled',
title: { label: '是否禁用', tip: '是否为禁用状态' },
propType: 'bool',
defaultValue: false,
},
{
name: 'icon',
title: { label: '菜单图标', tip: '菜单图标' },
propType: { type: 'oneOfType', value: ['string', 'node'] },
defaultValue: false,
},
{
name: 'key',
title: { label: '唯一标志', tip: 'item 的唯一标志' },
propType: 'string',
},
{
name: 'title',
title: {
label: '悬浮标题',
tip: '设置收缩时展示的悬浮标题',
},
propType: 'string',
},
],
configure: {
component: {
isContainer: true,
nestingRule: { parentWhitelist: ['Menu'] },
},
supports: { style: true },
},
};
行为如下:
