@tachybase/client 0.23.22 → 0.23.40

package/lib/modules/menu/menuItemInitializer.js

@@ -26,15 +26,14 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    menuItemInitializer_deprecated: ()=>menuItemInitializer_deprecated,
     menuItemInitializer: ()=>menuItemInitializer
 });
 const SchemaInitializer_js_namespaceObject = require("../../application/schema-initializer/SchemaInitializer.js");
 const external_GroupItem_js_namespaceObject = require("./GroupItem.js");
 const external_LinkMenuItem_js_namespaceObject = require("./LinkMenuItem.js");
 const external_PageMenuItem_js_namespaceObject = require("./PageMenuItem.js");
-const menuItemInitializer_deprecated = new SchemaInitializer_js_namespaceObject.SchemaInitializer({
-    name: 'MenuItemInitializers',
+const menuItemInitializer = new SchemaInitializer_js_namespaceObject.SchemaInitializer({
+    name: 'menuInitializers:menuItem',
     insertPosition: 'beforeEnd',
     icon: 'PlusOutlined',
     title: '{{t("Add menu item")}}',
@@ -56,26 +55,6 @@ const menuItemInitializer_deprecated = new SchemaInitializer_js_namespaceObject.
         }
     ]
 });
-const menuItemInitializer = new SchemaInitializer_js_namespaceObject.SchemaInitializer({
-    name: 'menuInitializers:menuItem',
-    insertPosition: 'beforeEnd',
-    icon: 'PlusOutlined',
-    title: '{{t("Add menu item")}}',
-    items: [
-        {
-            name: 'submenu',
-            Component: external_GroupItem_js_namespaceObject.GroupItem
-        },
-        {
-            name: 'page',
-            Component: external_PageMenuItem_js_namespaceObject.PageMenuItem
-        },
-        {
-            name: 'link',
-            Component: external_LinkMenuItem_js_namespaceObject.LinkMenuItem
-        }
-    ]
-});
 var __webpack_export_target__ = exports;
 for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
 if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {

package/lib/schema-component/antd/action/Action.Designer.js

@@ -236,7 +236,10 @@ function SkipValidation() {
 }
 const findSchema = (schema)=>{
     if (!schema) return;
-    if ('ACLActionProvider' === schema['x-decorator']) return schema['x-component-props'].openMode;
+    if ('ACLActionProvider' === schema['x-decorator']) {
+        var _schema_xcomponentprops;
+        return null === (_schema_xcomponentprops = schema['x-component-props']) || void 0 === _schema_xcomponentprops ? void 0 : _schema_xcomponentprops.openMode;
+    }
     return findSchema(null == schema ? void 0 : schema.parent);
 };
 function AfterSuccess() {

package/lib/schema-component/antd/association-select/AssociationSelect.js

@@ -431,7 +431,8 @@ AssociationSelect.Designer = function() {
                                                 'x-component-props': {
                                                     style: {
                                                         width: 260
-                                                    }
+                                                    },
+                                                    optionLabelProp: 'fullLabel'
                                                 }
                                             },
                                             direction: {
@@ -814,7 +815,8 @@ AssociationSelect.FilterDesigner = function() {
                                                 'x-component-props': {
                                                     style: {
                                                         width: 260
-                                                    }
+                                                    },
+                                                    optionLabelProp: 'fullLabel'
                                                 }
                                             },
                                             direction: {

package/lib/schema-component/antd/checkbox/Checkbox.js

@@ -100,12 +100,17 @@ const InternalRadioGroup = (0, schema_namespaceObject.connect)((props)=>{
     });
 }, (0, schema_namespaceObject.mapReadPretty)(ReadPretty));
 const Checkbox = (props)=>{
-    if ('Radio group' === props.mode) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InternalRadioGroup, {
-        ...props
-    });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InternalCheckbox, {
-        ...props
-    });
+    switch(props.mode){
+        case 'Radio group':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InternalRadioGroup, {
+                ...props
+            });
+        case 'Checkbox':
+        default:
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InternalCheckbox, {
+                ...props
+            });
+    }
 };
 Checkbox.ReadPretty = ReadPretty;
 Checkbox.__ANT_CHECKBOX = true;

package/lib/schema-component/antd/date-picker/DatePicker.js

@@ -88,6 +88,10 @@ DatePicker.RangePicker = function(props) {
             external_dayjs_default()(originValue[1].value).add(-1, 'd').toISOString()
         ];
         props.onChange = (value)=>{
+            if (!value || !value.length) {
+                originOnChange(null);
+                return;
+            }
             originOnChange([
                 {
                     value: external_dayjs_default()(value[0]).toISOString(),

package/lib/schema-component/antd/form-item/FormItem.Settings.js

@@ -42,10 +42,12 @@ __webpack_require__.d(__webpack_exports__, {
     useIsAddNewForm: ()=>useIsAddNewForm,
     useIsFileField: ()=>useIsFileField,
     useIsFieldReadPretty: ()=>useIsFieldReadPretty,
+    useIsMuiltipleAble: ()=>useIsMuiltipleAble,
+    useIsMultipleSelect: ()=>useIsMultipleSelect,
     useIsSelectFieldMode: ()=>useIsSelectFieldMode,
+    formItemSettings: ()=>formItemSettings,
     useTitleFieldOptions: ()=>useTitleFieldOptions,
     useValidateSchema: ()=>useValidateSchema,
-    formItemSettings: ()=>formItemSettings,
     useIsAssociationField: ()=>useIsAssociationField,
     useIsFormReadPretty: ()=>useIsFormReadPretty,
     useFieldMode: ()=>useFieldMode
@@ -1202,6 +1204,19 @@ function useIsAssociationField() {
     ].includes(null == collectionField ? void 0 : collectionField.interface);
     return isAssociationField;
 }
+function useIsMultipleSelect() {
+    const collectionField = useFormItemCollectionField();
+    const isMultipleSelect = [
+        'select',
+        'radioGroup'
+    ].includes(null == collectionField ? void 0 : collectionField.interface);
+    return isMultipleSelect;
+}
+function useIsMuiltipleAble() {
+    const isAssociationField = useIsAssociationField();
+    const isMultipleSelect = useIsMultipleSelect();
+    return isAssociationField || isMultipleSelect;
+}
 function useIsFileField() {
     const { getCollection } = (0, external_collection_manager_index_js_namespaceObject.useCollectionManager_deprecated)();
     const collectionField = useFormItemCollectionField();

package/lib/schema-component/antd/form-v2/Form.Settings.js

@@ -251,7 +251,8 @@ const formDetailsSettings = new index_js_namespaceObject.SchemaSettings({
                                                     'x-component-props': {
                                                         style: {
                                                             width: 260
-                                                        }
+                                                        },
+                                                        optionLabelProp: 'fullLabel'
                                                     }
                                                 },
                                                 direction: {

package/lib/schema-component/antd/grid-card/GridCard.Designer.js

@@ -201,7 +201,8 @@ const GridCardDesigner = ()=>{
                                                     'x-component-props': {
                                                         style: {
                                                             width: 260
-                                                        }
+                                                        },
+                                                        optionLabelProp: 'fullLabel'
                                                     }
                                                 },
                                                 direction: {

package/lib/schema-component/antd/list/List.Designer.js

@@ -136,7 +136,8 @@ const ListDesigner = ()=>{
                                                 'x-component-props': {
                                                     style: {
                                                         width: 260
-                                                    }
+                                                    },
+                                                    optionLabelProp: 'fullLabel'
                                                 }
                                             },
                                             direction: {

package/lib/schema-component/antd/menu/AdminMenu.js

@@ -0,0 +1,109 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    AdminMenu: ()=>AdminMenu
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const schema_namespaceObject = require("@tachybase/schema");
+const external_antd_namespaceObject = require("antd");
+const external_react_i18next_namespaceObject = require("react-i18next");
+const external_index_js_namespaceObject = require("../../index.js");
+const external_index_js_namespaceObject_1 = require("../../../index.js");
+const DragHandleMenu_js_namespaceObject = require("../../common/sortable-item/DragHandleMenu.js");
+const external_AdminMenu_style_js_namespaceObject = require("./AdminMenu.style.js");
+const AdminMenu = (props)=>{
+    const { items, onClick } = props;
+    const { styles } = (0, external_AdminMenu_style_js_namespaceObject.useStyles)();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Card, {
+        className: styles.adminMenuStyle,
+        children: null == items ? void 0 : items.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AdminMenuCard, {
+                item: item,
+                onClick: onClick
+            }, item.key))
+    });
+};
+const AdminMenuCard = (props)=>{
+    const { item, onClick } = props;
+    const { icon, field, Designer, schema } = (null == item ? void 0 : item.menu) || {};
+    const { t } = (0, external_react_i18next_namespaceObject.useTranslation)();
+    const { styles } = (0, external_AdminMenu_style_js_namespaceObject.useStyles)();
+    const handleClick = ()=>onClick(item);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Card.Grid, {
+        className: styles.adminMenuCardStyle,
+        onClick: handleClick,
+        children: item.menu ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.SchemaContext.Provider, {
+            value: schema,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.FieldContext.Provider, {
+                value: field,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject.SortableItem, {
+                    className: "card-wrapper",
+                    role: "button",
+                    "aria-label": t(field.title),
+                    removeParentsIfNoChildren: false,
+                    overStyle: {
+                        background: 'transparent'
+                    },
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(DragHandleMenu_js_namespaceObject.DragHandleMenu, {
+                        className: "drag-handle-menu",
+                        isAdminMenu: true,
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "field-link",
+                                role: "button",
+                                "aria-label": t(field.title),
+                                title: t(field.title),
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "icon-wrapper",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
+                                            type: null != icon ? icon : 'QuestionCircleOutlined'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "field-title",
+                                        children: t(field.title)
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {
+                                isAdminMenu: true
+                            })
+                        ]
+                    })
+                })
+            })
+        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+            children: item.label
+        })
+    });
+};
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});

package/lib/schema-component/antd/menu/AdminMenu.style.js

@@ -0,0 +1,70 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useStyles: ()=>useStyles
+});
+const external_antd_style_namespaceObject = require("antd-style");
+function _tagged_template_literal(strings, raw) {
+    if (!raw) raw = strings.slice(0);
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    const data = _tagged_template_literal([
+        "\n      border: none;\n      border-radius: 8px 8px 8px 8px;\n      background: #ffffff;\n      box-shadow:\n        0px 4px 8px 0px rgba(0, 5, 26, 0.15),\n        0px 0px 8px 0px rgba(0, 5, 26, 0.05);\n\n      .ant-card-body {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(120px, 1fr));\n        justify-items: center;\n        gap: 10px;\n        grid-row-gap: 10px;\n      }\n\n      .ant-card-body::before {\n        display: none;\n      }\n    "
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal([
+        "\n      &.ant-card-grid {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        width: 100%;\n        height: 100%;\n        padding: 12px;\n        color: inherit;\n        border-radius: 8px;\n        border: none;\n        box-shadow: none;\n\n        &:focus,\n        &:active {\n          background-color: #f4f4f4;\n        }\n        &:hover {\n          border-radius: 8px;\n          background-color: #f4f4f4;\n          box-shadow: none;\n          cursor: pointer;\n        }\n\n        .card-wrapper {\n          width: 100%;\n          height: 100%;\n          background-color: transparent;\n          border: none;\n        }\n\n        .drag-handle-menu {\n          width: 100%;\n          height: 100%;\n          border-radius: 8px;\n          border: none;\n        }\n\n        .ant-btn-icon {\n          font-size: 1.2rem;\n          text-align: center;\n        }\n      }\n\n      &.ant-card-grid .ant-btn {\n        display: grid;\n        place-items: center;\n        align-items: end;\n\n        width: 100%;\n        border: none;\n        box-shadow: none;\n      }\n\n      .field-link {\n        display: grid;\n        place-items: center;\n\n        width: 100%;\n        height: 100%;\n        padding: 0;\n        border: none;\n        border-radius: 8px;\n        background-color: transparent;\n        box-shadow: none;\n\n        color: inherit;\n      }\n\n      .icon-wrapper {\n        font-size: 1.2rem;\n        text-align: center;\n        margin-bottom: 0.3rem;\n      }\n\n      .field-title {\n        text-align: center;\n        vertical-align: middle;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-size: ",
+        ";\n      }\n\n      .tb-sortable-designer {\n        width: 100%;\n        height: 5rem;\n      }\n\n      .general-schema-designer {\n        position: absolute;\n        left: 0;\n        bottom: 0;\n\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n\n        width: 100%;\n        height: 45%;\n        border-radius: 1px 1px 8px 8px;\n        background: rgba(0, 0, 0, 0.5);\n        visibility: hidden;\n      }\n\n      &.ant-card-grid:hover .general-schema-designer {\n        visibility: visible;\n      }\n\n      .general-schema-designer .anticon-menu {\n        padding: 1px;\n        border-radius: 2px;\n        background-color: #ffffff;\n        color: #2f2f2f;\n      }\n    "
+    ]);
+    _templateObject1 = function() {
+        return data;
+    };
+    return data;
+}
+const useStyles = (0, external_antd_style_namespaceObject.createStyles)((param)=>{
+    let { css, token } = param;
+    return {
+        adminMenuStyle: css(_templateObject()),
+        adminMenuCardStyle: css(_templateObject1(), token.fontSizeSM)
+    };
+});
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});

package/lib/schema-component/antd/menu/Menu.Designer.js

@@ -26,10 +26,10 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    InsertMenuItemsGroup: ()=>InsertMenuItemsGroup,
     MenuDesigner: ()=>MenuDesigner
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("react");
 const components_namespaceObject = require("@tachybase/components");
 const schema_namespaceObject = require("@tachybase/schema");
 const external_antd_namespaceObject = require("antd");
@@ -62,14 +62,10 @@ const findMenuSchema = (fieldSchema)=>{
         parent = parent.parent;
     }
 };
-const InsertMenuItems = (props)=>{
-    const { eventKey, title, insertPosition } = props;
+const InsertMenuItemsGroup = (props)=>{
     const { t } = (0, external_react_i18next_namespaceObject.useTranslation)();
-    const { dn } = (0, external_index_js_namespaceObject_3.useDesignable)();
-    const fieldSchema = (0, schema_namespaceObject.useFieldSchema)();
-    const isSubMenu = 'Menu.SubMenu' === fieldSchema['x-component'];
+    const designable = (0, external_index_js_namespaceObject_3.useDesignable)();
     const api = (0, external_index_js_namespaceObject_3.useAPIClient)();
-    if (!isSubMenu && 'beforeEnd' === insertPosition) return null;
     const serverHooks = [
         {
             type: 'onSelfCreate',
@@ -80,23 +76,26 @@ const InsertMenuItems = (props)=>{
             method: 'extractTextToLocale'
         }
     ];
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject_3.SchemaSettingsSubMenu, {
-        eventKey: eventKey,
-        title: title,
+    const insertPosition = 'beforeEnd';
+    const dn = props.dn || designable.dn;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject_3.SchemaSettingsItemGroup, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "group"),
-                title: t('Submenu'),
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'FolderAddOutlined'
+                }),
+                title: t('Create group'),
                 schema: {
                     type: 'object',
-                    title: t('Add group'),
+                    title: t('Create group'),
                     properties: {
                         title: {
                             'x-decorator': 'FormItem',
                             'x-component': 'Input',
+                            'x-component-props': {},
                             title: t('Menu item title'),
-                            required: true,
-                            'x-component-props': {}
+                            required: true
                         },
                         icon: {
                             title: t('Icon'),
@@ -121,10 +120,13 @@ const InsertMenuItems = (props)=>{
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "page"),
-                title: t('Page'),
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'FileOutlined'
+                }),
+                title: t('Create page'),
                 schema: {
                     type: 'object',
-                    title: t('Add page'),
+                    title: t('Create page'),
                     properties: {
                         title: {
                             'x-decorator': 'FormItem',
@@ -171,10 +173,13 @@ const InsertMenuItems = (props)=>{
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "link"),
-                title: t('Link'),
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'GlobalOutlined'
+                }),
+                title: t('Create link'),
                 schema: {
                     type: 'object',
-                    title: t('Add link'),
+                    title: t('Create link'),
                     properties: {
                         title: {
                             title: t('Menu item title'),
@@ -212,10 +217,13 @@ const InsertMenuItems = (props)=>{
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsDivider, {}),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "restore"),
-                title: t('Load'),
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'UploadOutlined'
+                }),
+                title: t('Load menu config'),
                 schema: {
                     type: 'object',
-                    title: t('Load'),
+                    title: t('Load menu config'),
                     properties: {
                         title: {
                             'x-decorator': 'FormItem',
@@ -224,6 +232,13 @@ const InsertMenuItems = (props)=>{
                             required: true,
                             'x-component-props': {}
                         },
+                        bindMenuToRole: {
+                            type: 'boolean',
+                            title: '{{ t("Automatically assign permissions to all matching roles") }}',
+                            'x-decorator': 'FormItem',
+                            'x-component': 'Checkbox',
+                            default: true
+                        },
                         file: {
                             type: 'object',
                             title: '{{ t("File") }}',
@@ -238,12 +253,19 @@ const InsertMenuItems = (props)=>{
                     }
                 },
                 onSubmit: async (param)=>{
-                    let { title, file } = param;
+                    let { title, file, bindMenuToRole } = param;
                     const { data } = await api.request({
                         url: file.url,
                         baseURL: '/'
                     });
                     const s = null != data ? data : {};
+                    if (bindMenuToRole) {
+                        const hooks = data['x-server-hooks'];
+                        if (!hooks.some((v)=>'onSelfCreate' === v.type && 'bindMenuToRole' === v.method)) hooks.push({
+                            type: 'onSelfCreate',
+                            method: 'bindMenuToRole'
+                        });
+                    }
                     s.title = title;
                     dn.insertAdjacent(insertPosition, s);
                 }
@@ -251,7 +273,8 @@ const InsertMenuItems = (props)=>{
         ]
     });
 };
-const MenuDesigner = ()=>{
+const MenuDesigner = (props)=>{
+    const { isAdminMenu } = props;
     const field = (0, schema_namespaceObject.useField)();
     const fieldSchema = (0, schema_namespaceObject.useFieldSchema)();
     const api = (0, external_index_js_namespaceObject_3.useAPIClient)();
@@ -304,8 +327,8 @@ const MenuDesigner = ()=>{
             },
             icon: {
                 title: t('Menu item icon'),
-                'x-component': 'IconPicker',
-                'x-decorator': 'FormItem'
+                'x-decorator': 'FormItem',
+                'x-component': 'IconPicker'
             }
         }
     };
@@ -313,6 +336,8 @@ const MenuDesigner = ()=>{
         title: field.title,
         icon: field.componentProps.icon
     };
+    const isSubMenu = 'Menu.SubMenu' === fieldSchema['x-component'];
+    const hiddenAddMenu = isAdminMenu || !isSubMenu;
     if ('Menu.URL' === fieldSchema['x-component']) {
         schema.properties['href'] = {
             title: t('Link'),
@@ -322,10 +347,15 @@ const MenuDesigner = ()=>{
         initialValues['href'] = field.componentProps.href;
     }
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject_3.GeneralSchemaDesigner, {
+        draggable: false,
+        AddMenuModalComponent: !hiddenAddMenu && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InsertMenuItemsGroup, {}),
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsModalItem, {
-                title: t('Edit'),
+                title: t('Modify the name and icon'),
                 eventKey: "edit",
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'FormOutlined'
+                }),
                 schema: schema,
                 initialValues: initialValues,
                 onSubmit: (param)=>{
@@ -366,6 +396,9 @@ const MenuDesigner = ()=>{
                     TreeSelect: components_namespaceObject.TreeSelect
                 },
                 effects: effects,
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'DragOutlined'
+                }),
                 schema: {
                     type: 'object',
                     title: t('Move to'),
@@ -414,24 +447,11 @@ const MenuDesigner = ()=>{
                 }
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsDivider, {}),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InsertMenuItems, {
-                eventKey: 'insertbeforeBegin',
-                title: t('Insert before'),
-                insertPosition: 'beforeBegin'
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InsertMenuItems, {
-                eventKey: 'insertafterEnd',
-                title: t('Insert after'),
-                insertPosition: 'afterEnd'
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InsertMenuItems, {
-                eventKey: 'insertbeforeEnd',
-                title: t('Insert inner'),
-                insertPosition: 'beforeEnd'
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsDivider, {}),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsItem, {
                 title: t('Dump'),
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'DownloadOutlined'
+                }),
                 onClick: async ()=>{
                     const deleteUid = (s)=>{
                         delete s['name'];
@@ -455,6 +475,7 @@ const MenuDesigner = ()=>{
                 }
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsRemove, {
+                icon: "DeleteOutlined",
                 confirm: {
                     title: t('Delete menu item')
                 }