@tachybase/client 0.23.22 → 0.23.40

package/es/schema-component/antd/menu/Menu.Designer.mjs

@@ -1,5 +1,4 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
-import "react";
 import * as __WEBPACK_EXTERNAL_MODULE__tachybase_components__ from "@tachybase/components";
 import * as __WEBPACK_EXTERNAL_MODULE__tachybase_schema__ from "@tachybase/schema";
 import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
@@ -32,14 +31,10 @@ const findMenuSchema = (fieldSchema)=>{
         parent = parent.parent;
     }
 };
-const InsertMenuItems = (props)=>{
-    const { eventKey, title, insertPosition } = props;
+const InsertMenuItemsGroup = (props)=>{
     const { t } = (0, __WEBPACK_EXTERNAL_MODULE_react_i18next__.useTranslation)();
-    const { dn } = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useDesignable)();
-    const fieldSchema = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useFieldSchema)();
-    const isSubMenu = 'Menu.SubMenu' === fieldSchema['x-component'];
+    const designable = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useDesignable)();
     const api = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useAPIClient)();
-    if (!isSubMenu && 'beforeEnd' === insertPosition) return null;
     const serverHooks = [
         {
             type: 'onSelfCreate',
@@ -50,23 +45,26 @@ const InsertMenuItems = (props)=>{
             method: 'extractTextToLocale'
         }
     ];
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsSubMenu, {
-        eventKey: eventKey,
-        title: title,
+    const insertPosition = 'beforeEnd';
+    const dn = props.dn || designable.dn;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsItemGroup, {
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "group"),
-                title: t('Submenu'),
+                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.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'),
@@ -91,10 +89,13 @@ const InsertMenuItems = (props)=>{
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "page"),
-                title: t('Page'),
+                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                    type: 'FileOutlined'
+                }),
+                title: t('Create page'),
                 schema: {
                     type: 'object',
-                    title: t('Add page'),
+                    title: t('Create page'),
                     properties: {
                         title: {
                             'x-decorator': 'FormItem',
@@ -141,10 +142,13 @@ const InsertMenuItems = (props)=>{
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "link"),
-                title: t('Link'),
+                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.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'),
@@ -182,10 +186,13 @@ const InsertMenuItems = (props)=>{
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsDivider, {}),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "restore"),
-                title: t('Load'),
+                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                    type: 'UploadOutlined'
+                }),
+                title: t('Load menu config'),
                 schema: {
                     type: 'object',
-                    title: t('Load'),
+                    title: t('Load menu config'),
                     properties: {
                         title: {
                             'x-decorator': 'FormItem',
@@ -194,6 +201,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") }}',
@@ -208,12 +222,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);
                 }
@@ -221,7 +242,8 @@ const InsertMenuItems = (props)=>{
         ]
     });
 };
-const MenuDesigner = ()=>{
+const MenuDesigner = (props)=>{
+    const { isAdminMenu } = props;
     const field = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useField)();
     const fieldSchema = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useFieldSchema)();
     const api = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useAPIClient)();
@@ -274,8 +296,8 @@ const MenuDesigner = ()=>{
             },
             icon: {
                 title: t('Menu item icon'),
-                'x-component': 'IconPicker',
-                'x-decorator': 'FormItem'
+                'x-decorator': 'FormItem',
+                'x-component': 'IconPicker'
             }
         }
     };
@@ -283,6 +305,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'),
@@ -292,10 +316,15 @@ const MenuDesigner = ()=>{
         initialValues['href'] = field.componentProps.href;
     }
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.GeneralSchemaDesigner, {
+        draggable: false,
+        AddMenuModalComponent: !hiddenAddMenu && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(InsertMenuItemsGroup, {}),
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsModalItem, {
-                title: t('Edit'),
+                title: t('Modify the name and icon'),
                 eventKey: "edit",
+                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                    type: 'FormOutlined'
+                }),
                 schema: schema,
                 initialValues: initialValues,
                 onSubmit: (param)=>{
@@ -336,6 +365,9 @@ const MenuDesigner = ()=>{
                     TreeSelect: __WEBPACK_EXTERNAL_MODULE__tachybase_components__.TreeSelect
                 },
                 effects: effects,
+                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                    type: 'DragOutlined'
+                }),
                 schema: {
                     type: 'object',
                     title: t('Move to'),
@@ -384,24 +416,11 @@ const MenuDesigner = ()=>{
                 }
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsDivider, {}),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(InsertMenuItems, {
-                eventKey: 'insertbeforeBegin',
-                title: t('Insert before'),
-                insertPosition: 'beforeBegin'
-            }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(InsertMenuItems, {
-                eventKey: 'insertafterEnd',
-                title: t('Insert after'),
-                insertPosition: 'afterEnd'
-            }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(InsertMenuItems, {
-                eventKey: 'insertbeforeEnd',
-                title: t('Insert inner'),
-                insertPosition: 'beforeEnd'
-            }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsDivider, {}),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsItem, {
                 title: t('Dump'),
+                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                    type: 'DownloadOutlined'
+                }),
                 onClick: async ()=>{
                     const deleteUid = (s)=>{
                         delete s['name'];
@@ -425,6 +444,7 @@ const MenuDesigner = ()=>{
                 }
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SchemaSettingsRemove, {
+                icon: "DeleteOutlined",
                 confirm: {
                     title: t('Delete menu item')
                 }
@@ -432,4 +452,4 @@ const MenuDesigner = ()=>{
         ]
     });
 };
-export { MenuDesigner };
+export { InsertMenuItemsGroup, MenuDesigner };

package/es/schema-component/antd/menu/Menu.mjs

@@ -2,16 +2,20 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtim
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE__tachybase_schema__ from "@tachybase/schema";
 import * as __WEBPACK_EXTERNAL_MODULE__tachybase_utils_client__ from "@tachybase/utils/client";
+import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_core__ from "@dnd-kit/core";
 import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
 import * as __WEBPACK_EXTERNAL_MODULE_react_dom__ from "react-dom";
-import * as __WEBPACK_EXTERNAL_MODULE_react_i18next__ from "react-i18next";
 import * as __WEBPACK_EXTERNAL_MODULE__index_mjs__ from "../../index.mjs";
 import * as __WEBPACK_EXTERNAL_MODULE__index_mjs__ from "../../../index.mjs";
 import * as __WEBPACK_EXTERNAL_MODULE__hooks_useMenuItem_mjs__ from "../../../hooks/useMenuItem.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__common_sortable_item_DragHandleMenu_mjs__ from "../../common/sortable-item/DragHandleMenu.mjs";
 import * as __WEBPACK_EXTERNAL_MODULE__hooks_useProps_mjs__ from "../../hooks/useProps.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__AdminMenu_mjs__ from "./AdminMenu.mjs";
 import * as __WEBPACK_EXTERNAL_MODULE__locale_mjs__ from "./locale.mjs";
 import * as __WEBPACK_EXTERNAL_MODULE__Menu_Designer_mjs__ from "./Menu.Designer.mjs";
 import * as __WEBPACK_EXTERNAL_MODULE__Menu_styles_mjs__ from "./Menu.styles.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__MenuSearchAdd_mjs__ from "./MenuSearchAdd.mjs";
+import * as __WEBPACK_EXTERNAL_MODULE__tools_mjs__ from "./tools.mjs";
 import * as __WEBPACK_EXTERNAL_MODULE__util_mjs__ from "./util.mjs";
 function _tagged_template_literal(strings, raw) {
     if (!raw) raw = strings.slice(0);
@@ -30,31 +34,12 @@ function _templateObject() {
     };
     return data;
 }
-function _templateObject1() {
-    const data = _tagged_template_literal([
-        "\n                  border: none;\n                  max-width: 21rem;\n                "
-    ]);
-    _templateObject1 = function() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    const data = _tagged_template_literal([
-        "\n                                  display: block;\n                                  color: inherit;\n                                  &:hover {\n                                    color: inherit;\n                                  }\n                                "
-    ]);
-    _templateObject2 = function() {
-        return data;
-    };
-    return data;
-}
 const HeaderMenu = (param)=>{
-    let { others, schema, mode, onSelect, setLoading, setDefaultSelectedKeys, defaultSelectedKeys, defaultOpenKeys, selectedKeys, designable, render, children } = param;
+    let { others, schema, mode, onSelect, setLoading, setDefaultSelectedKeys, designable, render, children } = param;
     const { Component, getMenuItems } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useMenuItem_mjs__.useMenuItem)();
     const { token } = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useToken)();
+    const { styles } = (0, __WEBPACK_EXTERNAL_MODULE__Menu_styles_mjs__.useStyles)();
     const [items, setItems] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
-    const { t } = (0, __WEBPACK_EXTERNAL_MODULE_react_i18next__.useTranslation)();
-    const { styles: itemStyle } = (0, __WEBPACK_EXTERNAL_MODULE__Menu_styles_mjs__.useStyles)();
     const result = getMenuItems(()=>children);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         setItems(getItem());
@@ -118,9 +103,7 @@ const HeaderMenu = (param)=>{
         });
     };
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("div", {
-        style: {
-            display: 'flex'
-        },
+        className: styles.headerMenuClass,
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
                 style: {
@@ -133,74 +116,13 @@ const HeaderMenu = (param)=>{
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Popover, {
                         placement: "bottomRight",
                         arrow: false,
-                        content: ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Card, {
-                                className: (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.css)(_templateObject1()),
-                                children: null == items ? void 0 : items.map((item)=>{
-                                    const { icon, field, Designer, schema, styles } = (null == item ? void 0 : item.menu) || {};
-                                    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Card.Grid, {
-                                        style: {
-                                            display: 'block',
-                                            color: 'inherit',
-                                            padding: token.marginSM,
-                                            boxShadow: 'none',
-                                            width: '7rem',
-                                            height: '5rem'
-                                        },
-                                        className: itemStyle.menuItem,
-                                        onClick: ()=>{
-                                            onClick(item);
-                                        },
-                                        children: item.menu ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.SchemaContext.Provider, {
-                                            value: schema,
-                                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.FieldContext.Provider, {
-                                                value: field,
-                                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SortableItem, {
-                                                    role: "button",
-                                                    "aria-label": t(field.title),
-                                                    className: styles.designerCss,
-                                                    removeParentsIfNoChildren: false,
-                                                    style: {
-                                                        position: 'revert'
-                                                    },
-                                                    children: [
-                                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("a", {
-                                                            role: "button",
-                                                            "aria-label": t(field.title),
-                                                            title: t(field.title),
-                                                            className: (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.css)(_templateObject2()),
-                                                            children: [
-                                                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
-                                                                    style: {
-                                                                        fontSize: '1.2rem',
-                                                                        textAlign: 'center',
-                                                                        marginBottom: '0.3rem'
-                                                                    },
-                                                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
-                                                                        type: icon || 'QuestionCircleOutlined'
-                                                                    })
-                                                                }),
-                                                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
-                                                                    style: {
-                                                                        textAlign: 'center',
-                                                                        whiteSpace: 'nowrap',
-                                                                        overflow: 'hidden',
-                                                                        textOverflow: 'ellipsis',
-                                                                        fontSize: token.fontSizeSM
-                                                                    },
-                                                                    children: t(field.title)
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Designer, {})
-                                                    ]
-                                                })
-                                            })
-                                        }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.Fragment, {
-                                            children: item.label
-                                        })
-                                    }, item.key);
-                                })
-                            }),
+                        overlayInnerStyle: {
+                            padding: 0
+                        },
+                        content: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__AdminMenu_mjs__.AdminMenu, {
+                            items: items,
+                            onClick: onClick
+                        }),
                         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Button, {
                             className: "iconButton",
                             icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
@@ -224,30 +146,35 @@ const SideMenu = (param)=>{
     const { styles } = (0, __WEBPACK_EXTERNAL_MODULE__Menu_styles_mjs__.useStyles)();
     const sideMenuSchemaRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(sideMenuSchema);
     sideMenuSchemaRef.current = sideMenuSchema;
+    const [searchMenuTitle, setSearchMenuTitle] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)('');
     const items = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        let newSideMenuSchema = sideMenuSchema;
+        if (searchMenuTitle) newSideMenuSchema = (0, __WEBPACK_EXTERNAL_MODULE__tools_mjs__.getNewSideMenuSchema)(sideMenuSchema, searchMenuTitle);
         const result = getMenuItems(()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.RecursionField, {
-                schema: sideMenuSchema,
+                schema: newSideMenuSchema,
                 onlyRenderProperties: true
             }, (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.uid)()));
-        if (designable) result.push({
-            key: 'x-designer-button',
-            disabled: true,
-            label: render({
-                'data-testid': 'schema-initializer-Menu-side',
-                insert: (s)=>{
-                    const dn = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.createDesignable)({
-                        t,
-                        api,
-                        refresh,
-                        current: sideMenuSchemaRef.current
-                    });
-                    dn.loadAPIClientEvents();
-                    dn.insertAdjacent('beforeEnd', s);
-                }
-            }),
-            order: 1,
-            notdelete: true
-        });
+        {
+            const dn = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.createDesignable)({
+                t,
+                api,
+                refresh,
+                current: sideMenuSchemaRef.current
+            });
+            dn.loadAPIClientEvents();
+            const searchMenu = {
+                key: 'x-menu-search',
+                disabled: true,
+                label: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__MenuSearchAdd_mjs__.MenuSearchAdd, {
+                    designable: designable,
+                    setSearchMenuTitle: setSearchMenuTitle,
+                    dn: dn
+                }),
+                order: -10,
+                notdelete: true
+            };
+            result.push(searchMenu);
+        }
         return result;
     }, [
         getMenuItems,
@@ -256,7 +183,8 @@ const SideMenu = (param)=>{
         render,
         t,
         api,
-        refresh
+        refresh,
+        searchMenuTitle
     ]);
     if (loading) return null;
     return 'mix' === mode && (null == sideMenuSchema ? void 0 : sideMenuSchema['x-component']) === 'Menu.SubMenu' && (null == sideMenuRef ? void 0 : null === (_sideMenuRef_current = sideMenuRef.current) || void 0 === _sideMenuRef_current ? void 0 : _sideMenuRef_current.firstChild) && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_dom__.createPortal)(/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(MenuModeContext.Provider, {
@@ -271,7 +199,8 @@ const SideMenu = (param)=>{
                     null == onSelect || onSelect(info);
                 },
                 className: styles.sideMenuClass,
-                items: items
+                items: items,
+                expandIcon: null
             })
         ]
     }), sideMenuRef.current.firstChild);
@@ -290,11 +219,11 @@ const MenuItemDesignerContext = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_reac
 MenuItemDesignerContext.displayName = 'MenuItemDesignerContext';
 const Menu = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.observer)((props)=>{
     const { onSelect, mode, selectedUid, defaultSelectedUid, sideMenuRefScopeKey, defaultSelectedKeys: dSelectedKeys, defaultOpenKeys: dOpenKeys, children, ...others } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_useProps_mjs__.useProps)(props);
-    const { t } = (0, __WEBPACK_EXTERNAL_MODULE_react_i18next__.useTranslation)();
-    const Designer = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useDesigner)();
-    const schema = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useFieldSchema)();
+    const { t } = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useTranslation)();
     const { refresh } = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useDesignable)();
     const api = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useAPIClient)();
+    const Designer = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useDesigner)();
+    const schema = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.useFieldSchema)();
     const { render } = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useSchemaInitializerRender)(schema['x-initializer'], schema['x-initializer-props']);
     const sideMenuRef = useSideMenuRef();
     const [selectedKeys, setSelectedKeys] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
@@ -311,6 +240,11 @@ const Menu = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.observer)((props)
         ].includes(mode)) return dOpenKeys || defaultSelectedKeys;
         return dOpenKeys;
     });
+    const sensors = (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core__.useSensors)((0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core__.useSensor)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core__.PointerSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }));
     const sideMenuSchema = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         let key;
         if (selectedUid) {
@@ -353,6 +287,7 @@ const Menu = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.observer)((props)
     ]);
     const { designable } = (0, __WEBPACK_EXTERNAL_MODULE__index_mjs__.useDesignable)();
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.DndContext, {
+        sensors: sensors,
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(MenuItemDesignerContext.Provider, {
             value: Designer,
             children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(MenuModeContext.Provider, {
@@ -365,9 +300,6 @@ const Menu = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.observer)((props)
                         onSelect: onSelect,
                         setLoading: setLoading,
                         setDefaultSelectedKeys: setDefaultSelectedKeys,
-                        defaultSelectedKeys: defaultSelectedKeys,
-                        defaultOpenKeys: defaultOpenKeys,
-                        selectedKeys: selectedKeys,
                         designable: designable,
                         render: render,
                         children: children
@@ -418,27 +350,31 @@ Menu.Item = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.observer)((props)=
                 value: schema,
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.FieldContext.Provider, {
                     value: field,
-                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SortableItem, {
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SortableItem, {
                         role: "button",
                         "aria-label": t(field.title),
                         className: styles.designerCss,
                         removeParentsIfNoChildren: false,
-                        children: [
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
-                                type: icon
-                            }),
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("span", {
-                                style: {
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    display: 'inline-block',
-                                    width: '100%',
-                                    verticalAlign: 'middle'
-                                },
-                                children: t(field.title)
-                            }),
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Designer, {})
-                        ]
+                        overStyle: {
+                            background: 'transparent'
+                        },
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__common_sortable_item_DragHandleMenu_mjs__.DragHandleMenu, {
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("span", {
+                                    className: 'menuitem-title-wrapper',
+                                    children: [
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                                            type: icon
+                                        }),
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("span", {
+                                            className: 'menuitem-title',
+                                            children: t(field.title)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Designer, {})
+                            ]
+                        })
                     })
                 })
             })
@@ -489,26 +425,36 @@ Menu.URL = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.observer)((props)=>
                 value: schema,
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.FieldContext.Provider, {
                     value: field,
-                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SortableItem, {
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SortableItem, {
                         className: styles.designerCss,
                         removeParentsIfNoChildren: false,
                         "aria-label": t(field.title),
-                        children: [
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
-                                type: icon
-                            }),
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("span", {
-                                style: {
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    display: 'inline-block',
-                                    width: '100%',
-                                    verticalAlign: 'middle'
-                                },
-                                children: t(field.title)
-                            }),
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Designer, {})
-                        ]
+                        overStyle: {
+                            background: 'transparent'
+                        },
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__common_sortable_item_DragHandleMenu_mjs__.DragHandleMenu, {
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("span", {
+                                    className: 'menuitem-title-wrapper',
+                                    children: [
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                                            type: icon
+                                        }),
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("span", {
+                                            style: {
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                display: 'inline-block',
+                                                width: '100%',
+                                                verticalAlign: 'middle'
+                                            },
+                                            children: t(field.title)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Designer, {})
+                            ]
+                        })
                     })
                 })
             })
@@ -550,17 +496,32 @@ Menu.SubMenu = (0, __WEBPACK_EXTERNAL_MODULE__tachybase_schema__.observer)((prop
                 value: schema,
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__tachybase_schema__.FieldContext.Provider, {
                     value: field,
-                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SortableItem, {
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.SortableItem, {
                         className: styles.subMenuDesignerCss,
                         removeParentsIfNoChildren: false,
                         "aria-label": t(field.title),
-                        children: [
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
-                                type: icon
-                            }),
-                            t(field.title),
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Designer, {})
-                        ]
+                        overStyle: {
+                            background: 'transparent'
+                        },
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)(__WEBPACK_EXTERNAL_MODULE__common_sortable_item_DragHandleMenu_mjs__.DragHandleMenu, {
+                            name: schema.name,
+                            isSubMenu: true,
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("span", {
+                                    className: 'submenu-title',
+                                    children: [
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__index_mjs__.Icon, {
+                                            type: icon
+                                        }),
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("span", {
+                                            className: 'menuitem-title',
+                                            children: t(field.title)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Designer, {})
+                            ]
+                        })
                     })
                 })
             }),