简单 fix 导航菜单 BUG

alibaba/lowcode-engine#1305
alibaba · Dec 2, 2022 · f368374 · f368374
1 parent 59b30a4
commit f368374
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 81 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"