feat(client): menu schema settings

packages/client/src/schema-component/antd/icon-picker/IconPicker.tsx

@@ -65,7 +65,6 @@ export const IconPicker = connect(
   mapProps((props, field) => {
     return {
       ...props,
-      value: props.type,
       suffix: <span>{field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}</span>,
     };
   }),

packages/client/src/schema-component/antd/menu/Menu.Designer.tsx

@@ -1,23 +1,58 @@
-import { useField } from '@formily/react';
+import { ISchema, useField, useFieldSchema } from '@formily/react';
 import React from 'react';
-import { GeneralSchemaDesigner, SchemaSettings } from '../../../';
+import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '../../../';
 
 export const MenuDesigner = () => {
   const field = useField();
+  const fieldSchema = useFieldSchema();
+  const { dn, refresh } = useDesignable();
   return (
     <GeneralSchemaDesigner>
-      <SchemaSettings.Popup
-        schema={{
-          type: 'void',
-          'x-component': 'Action.Modal',
-          'x-decorator': 'Form',
-          'x-component-props': {
-            title: '标题',
-          },
+      <SchemaSettings.ModalItem
+        title={'编辑'}
+        schema={
+          {
+            type: 'object',
+            title: '编辑菜单项',
+            properties: {
+              title: {
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+                title: '菜单项名称',
+                'x-component-props': {},
+                // description: `原字段标题：${collectionField?.uiSchema?.title}`,
+              },
+              icon: {
+                title: '图标',
+                'x-component': 'IconPicker',
+                'x-decorator': 'FormItem',
+              },
+            },
+          } as ISchema
+        }
+        initialValues={{
+          title: field.title,
+          icon: field.componentProps.icon,
         }}
-      >
-        编辑
-      </SchemaSettings.Popup>
+        onSubmit={({ title, icon }) => {
+          const schema = {
+            ['x-uid']: fieldSchema['x-uid'],
+          };
+          if (title) {
+            fieldSchema.title = title;
+            field.title = title;
+            schema['title'] = title;
+            refresh();
+          }
+          field.componentProps.icon = icon;
+          schema['x-component-props'] = { icon };
+          fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+          fieldSchema['x-component-props']['icon'] = icon;
+          dn.emit('patch', {
+            schema,
+          });
+        }}
+      />
       <SchemaSettings.Divider />
       <SchemaSettings.Remove />
     </GeneralSchemaDesigner>

packages/client/src/schema-component/antd/menu/Menu.tsx

@@ -311,12 +311,13 @@ export const Menu: ComposedMenu = observer((props) => {
 Menu.Item = observer((props) => {
   const { icon, ...others } = props;
   const schema = useFieldSchema();
+  const field = useField();
   const Designer = useContext(MenuItemDesignerContext);
   return (
     <AntdMenu.Item {...others} key={schema.name} eventKey={schema.name} schema={schema}>
       <SortableItem className={designerCss}>
         <Icon type={icon} style={{ marginRight: 5 }} />
-        {schema.title}
+        {field.title}
         <Designer />
       </SortableItem>
     </AntdMenu.Item>
@@ -340,7 +341,7 @@ Menu.URL = observer((props) => {
     >
       <SortableItem className={designerCss}>
         <Icon style={{ marginRight: 5 }} type={icon} />
-        {schema.title}
+        {field.title}
         <Designer />
       </SortableItem>
     </AntdMenu.Item>