From 5c5f3352fe732b8157bff2d352d6b1a92adc88e0 Mon Sep 17 00:00:00 2001 From: huangapple Date: Fri, 2 Dec 2022 14:42:59 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AE=80=E5=8D=95=20fix=20=E5=AF=BC=E8=88=AA?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=20BUG=20https://github.com/alibaba/lowcode-e?= =?UTF-8?q?ngine/issues/1305?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lowcode/menu/meta.ts | 164 ++++++++++-------- .../lowcode/menu/snippets.ts | 29 +++- .../lowcode/space/meta.ts | 4 +- packages/antd-lowcode-materials/package.json | 2 + 4 files changed, 118 insertions(+), 81 deletions(-) diff --git a/packages/antd-lowcode-materials/lowcode/menu/meta.ts b/packages/antd-lowcode-materials/lowcode/menu/meta.ts index 8c592406..48a093b9 100644 --- a/packages/antd-lowcode-materials/lowcode/menu/meta.ts +++ b/packages/antd-lowcode-materials/lowcode/menu/meta.ts @@ -1,84 +1,101 @@ import { uuid } from '../_utils/utils'; -import { itemsExtraProps } from './utils'; import snippets from './snippets'; +import { ComponentMetadata, Configure, DynamicSetter, FieldConfig, SettingTarget } from "@alilc/lowcode-types"; -export default { - snippets, - componentName: 'Menu', - title: '导航菜单', - category: '导航', - props: [ - { - name: 'items', - title: '菜单项', - setter: { - componentName: 'ArraySetter', +//todo 这是不够完善 +let ItemsSetter: DynamicSetter = () => { + return { + componentName: 'ArraySetter', + props: { + itemSetter: { + componentName: 'ObjectSetter', props: { - itemSetter: { - componentName: 'ObjectSetter', - props: { - config: { - items: [ - { - name: 'key', - title: 'key', - setter: 'StringSetter', - initialValue: (val) => val || uuid(), - }, - { - name: 'children', - title: '菜单名称', - setter: 'StringSetter', - }, - { - name: 'category', - title: { - label: '类型', - tip: '菜单项类型', - }, - propType: { - type: 'oneOf', - value: ['Menu.Item', 'Menu.SubMenu', 'Menu.ItemGroup'], - }, - setter: [ + config: { + items: [ + { + name: 'key', + description: "必须保存同节点下唯一", + isRequired: true, + title: 'key', + setter: 'StringSetter', + initialValue: (val: any) => val || uuid(), + }, + { + name: 'label', + title: '菜单项标题', + isRequired: true, + setter: ['StringSetter', "node"], + }, + { + name: 'danger', + title: '展示错误状态样式', + setter: 'BoolSetter', + }, + { + name: 'title', + title: '设置收缩时展示的悬浮标题', + setter: 'StringSetter', + }, + { + name: 'disabled', + title: '是否禁用', + setter: 'BoolSetter', + }, + { + name: 'icon', + title: { label: '图标', tip: 'icon | 设置按钮的图标组件' }, + propType: 'node', + setter: { + componentName: 'SlotSetter', + initialValue: { + type: 'JSSlot', + value: [ { - componentName: 'RadioGroupSetter', + componentName: 'Icon', props: { - options: [ - { - title: 'Item', - value: 'Menu.Item', - }, - { - title: 'SubMenu', - value: 'Menu.SubMenu', - }, - { - title: 'ItemGroup', - value: 'Menu.ItemGroup', - }, - ], + type: 'SmileOutlined', + size: 20, + rotate: 0, + spin: false, }, }, - 'VariableSetter', ], }, - ], + }, }, - }, - initialValue: () => { - return { - key: 'item-' + uuid(), - category: 'Menu.Item', - children: '菜单名', - }; - }, + { + "name": "children", + setter: ItemsSetter, + } + + + ], }, }, + initialValue: () => { + return { + key: 'item-' + uuid(), + label: '菜单项标题', + children: [], + }; + }, }, - extraProps: itemsExtraProps, - }, + + } + } +} +export default { + snippets, + componentName: 'Menu', + title: '导航菜单', + category: '导航', + props: [ + { + name: 'items', + title: '菜单项', + setter: ItemsSetter, + } as FieldConfig, { name: 'defaultOpenKeys', title: { @@ -190,6 +207,7 @@ export default { tip: '展开/关闭的触发行为', }, propType: { type: 'oneOf', value: ['hover', 'click'] }, + defaultValue: "click" }, { name: 'onOpenChange', @@ -213,25 +231,21 @@ export default { events: [ { name: 'onClick', - template: - "onClick({item,key,keyPath,domEvent},${extParams}){\n// 点击 MenuItem 调用此函数\nconsole.log('onClick',item,key,keyPath,domEvent);}", + 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);}", + 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);}", + 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);}", + template: "onSelect({item,key,keyPath,selectedKeys,domEvent},${extParams}){\n// 被选中时调用\nconsole.log('onSelect',item,key,keyPath,selectedKeys,domEvent);}", }, ], }, }, -}; +} as unknown as (ComponentMetadata & Configure); diff --git a/packages/antd-lowcode-materials/lowcode/menu/snippets.ts b/packages/antd-lowcode-materials/lowcode/menu/snippets.ts index 61029879..3f2733d9 100644 --- a/packages/antd-lowcode-materials/lowcode/menu/snippets.ts +++ b/packages/antd-lowcode-materials/lowcode/menu/snippets.ts @@ -6,14 +6,35 @@ export default [ componentName: 'Menu', props: { mode: 'inline', - defaultSelectedKeys: ['1'], - defaultOpenKeys: ['sub1'], + defaultSelectedKeys: ["item-i6we2"], + defaultOpenKeys: ["item-i6we2"], theme: 'dark', items: [ { key: 'item-i5wd', - category: 'Menu.Item', - children: '菜单名', + label: "菜单1", + type: "group", + children: [], + }, + { + + key: 'sub1', + label: "菜单2", + type: "group", + children: [ + { + key: 'item-i6we', + label: "子菜单1", + type: "group", + children: [ + { + key: 'item-i6we2', + label: "子菜单1", + type: "group", + }, + ] + }, + ], }, ], }, diff --git a/packages/antd-lowcode-materials/lowcode/space/meta.ts b/packages/antd-lowcode-materials/lowcode/space/meta.ts index 811cdfbc..8252e583 100644 --- a/packages/antd-lowcode-materials/lowcode/space/meta.ts +++ b/packages/antd-lowcode-materials/lowcode/space/meta.ts @@ -1,4 +1,4 @@ -import { ComponentMetadata } from "@alilc/lowcode-types"; +import { ComponentMetadata, Configure } from "@alilc/lowcode-types"; import snippets from './snippets'; export default { @@ -51,4 +51,4 @@ export default { }, ], configure: { component: { isContainer: true }, supports: { style: true } }, -} as ComponentMetadata | any; +} as (ComponentMetadata & Configure); diff --git a/packages/antd-lowcode-materials/package.json b/packages/antd-lowcode-materials/package.json index e3ceb976..9e156f27 100644 --- a/packages/antd-lowcode-materials/package.json +++ b/packages/antd-lowcode-materials/package.json @@ -5,6 +5,7 @@ "main": "lib/index.js", "scripts": { "build": "build-scripts build", + "dev": "npm run lowcode:dev", "lowcode:dev": "build-scripts start --config ./build.lowcode.js", "lowcode:build": "build-scripts build --config ./build.lowcode.js", "prepublishOnly": "npm run lowcode:build" @@ -42,6 +43,7 @@ } ], "dependencies": { + "@alilc/lowcode-types": "^1.0.17", "@ant-design/icons": "^4.6.2", "antd": "^4.23.1", "moment": "^2.29.1"