@tachybase/client 0.23.22 → 0.23.35

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

@@ -32,16 +32,20 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const schema_namespaceObject = require("@tachybase/schema");
 const client_namespaceObject = require("@tachybase/utils/client");
+const core_namespaceObject = require("@dnd-kit/core");
 const external_antd_namespaceObject = require("antd");
 const external_react_dom_namespaceObject = require("react-dom");
-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 useMenuItem_js_namespaceObject = require("../../../hooks/useMenuItem.js");
+const DragHandleMenu_js_namespaceObject = require("../../common/sortable-item/DragHandleMenu.js");
 const useProps_js_namespaceObject = require("../../hooks/useProps.js");
+const external_AdminMenu_js_namespaceObject = require("./AdminMenu.js");
 const external_locale_js_namespaceObject = require("./locale.js");
 const external_Menu_Designer_js_namespaceObject = require("./Menu.Designer.js");
 const external_Menu_styles_js_namespaceObject = require("./Menu.styles.js");
+const external_MenuSearch_js_namespaceObject = require("./MenuSearch.js");
+const external_tools_js_namespaceObject = require("./tools.js");
 const external_util_js_namespaceObject = require("./util.js");
 function _tagged_template_literal(strings, raw) {
     if (!raw) raw = strings.slice(0);
@@ -60,31 +64,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;
     const { Component, getMenuItems } = (0, useMenuItem_js_namespaceObject.useMenuItem)();
     const { token } = (0, external_index_js_namespaceObject_1.useToken)();
+    const { styles } = (0, external_Menu_styles_js_namespaceObject.useStyles)();
     const [items, setItems] = (0, external_react_namespaceObject.useState)([]);
-    const { t } = (0, external_react_i18next_namespaceObject.useTranslation)();
-    const { styles: itemStyle } = (0, external_Menu_styles_js_namespaceObject.useStyles)();
     const result = getMenuItems(()=>children);
     (0, external_react_namespaceObject.useEffect)(()=>{
         setItems(getItem());
@@ -148,9 +133,7 @@ const HeaderMenu = (param)=>{
         });
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        style: {
-            display: 'flex'
-        },
+        className: styles.headerMenuClass,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 style: {
@@ -163,74 +146,13 @@ const HeaderMenu = (param)=>{
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Popover, {
                         placement: "bottomRight",
                         arrow: false,
-                        content: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Card, {
-                                className: (0, external_index_js_namespaceObject_1.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, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.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, 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.jsxs)(external_index_js_namespaceObject.SortableItem, {
-                                                    role: "button",
-                                                    "aria-label": t(field.title),
-                                                    className: styles.designerCss,
-                                                    removeParentsIfNoChildren: false,
-                                                    style: {
-                                                        position: 'revert'
-                                                    },
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("a", {
-                                                            role: "button",
-                                                            "aria-label": t(field.title),
-                                                            title: t(field.title),
-                                                            className: (0, external_index_js_namespaceObject_1.css)(_templateObject2()),
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                    style: {
-                                                                        fontSize: '1.2rem',
-                                                                        textAlign: 'center',
-                                                                        marginBottom: '0.3rem'
-                                                                    },
-                                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
-                                                                        type: icon || 'QuestionCircleOutlined'
-                                                                    })
-                                                                }),
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                    style: {
-                                                                        textAlign: 'center',
-                                                                        whiteSpace: 'nowrap',
-                                                                        overflow: 'hidden',
-                                                                        textOverflow: 'ellipsis',
-                                                                        fontSize: token.fontSizeSM
-                                                                    },
-                                                                    children: t(field.title)
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {})
-                                                    ]
-                                                })
-                                            })
-                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
-                                            children: item.label
-                                        })
-                                    }, item.key);
-                                })
-                            }),
+                        overlayInnerStyle: {
+                            padding: 0
+                        },
+                        content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_AdminMenu_js_namespaceObject.AdminMenu, {
+                            items: items,
+                            onClick: onClick
+                        }),
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
                             className: "iconButton",
                             icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
@@ -254,11 +176,26 @@ const SideMenu = (param)=>{
     const { styles } = (0, external_Menu_styles_js_namespaceObject.useStyles)();
     const sideMenuSchemaRef = (0, external_react_namespaceObject.useRef)(sideMenuSchema);
     sideMenuSchemaRef.current = sideMenuSchema;
+    const [searchMenuTitle, setSearchMenuTitle] = (0, external_react_namespaceObject.useState)('');
     const items = (0, external_react_namespaceObject.useMemo)(()=>{
+        let newSideMenuSchema = sideMenuSchema;
+        if (searchMenuTitle) newSideMenuSchema = (0, external_tools_js_namespaceObject.getNewSideMenuSchema)(sideMenuSchema, searchMenuTitle);
         const result = getMenuItems(()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.RecursionField, {
-                schema: sideMenuSchema,
+                schema: newSideMenuSchema,
                 onlyRenderProperties: true
             }, (0, schema_namespaceObject.uid)()));
+        if (designable) {
+            const searchMenu = {
+                key: 'x-menu-search',
+                disabled: true,
+                label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_MenuSearch_js_namespaceObject.MenuSearch, {
+                    setSearchMenuTitle: setSearchMenuTitle
+                }),
+                order: -10,
+                notdelete: true
+            };
+            result.push(searchMenu);
+        }
         if (designable) result.push({
             key: 'x-designer-button',
             disabled: true,
@@ -275,7 +212,7 @@ const SideMenu = (param)=>{
                     dn.insertAdjacent('beforeEnd', s);
                 }
             }),
-            order: 1,
+            order: -1,
             notdelete: true
         });
         return result;
@@ -286,7 +223,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, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(MenuModeContext.Provider, {
@@ -301,7 +239,8 @@ const SideMenu = (param)=>{
                     null == onSelect || onSelect(info);
                 },
                 className: styles.sideMenuClass,
-                items: items
+                items: items,
+                expandIcon: null
             })
         ]
     }), sideMenuRef.current.firstChild);
@@ -320,11 +259,11 @@ const MenuItemDesignerContext = /*#__PURE__*/ (0, external_react_namespaceObject
 MenuItemDesignerContext.displayName = 'MenuItemDesignerContext';
 const Menu = (0, schema_namespaceObject.observer)((props)=>{
     const { onSelect, mode, selectedUid, defaultSelectedUid, sideMenuRefScopeKey, defaultSelectedKeys: dSelectedKeys, defaultOpenKeys: dOpenKeys, children, ...others } = (0, useProps_js_namespaceObject.useProps)(props);
-    const { t } = (0, external_react_i18next_namespaceObject.useTranslation)();
-    const Designer = (0, external_index_js_namespaceObject.useDesigner)();
-    const schema = (0, schema_namespaceObject.useFieldSchema)();
+    const { t } = (0, external_index_js_namespaceObject_1.useTranslation)();
     const { refresh } = (0, external_index_js_namespaceObject.useDesignable)();
     const api = (0, external_index_js_namespaceObject_1.useAPIClient)();
+    const Designer = (0, external_index_js_namespaceObject.useDesigner)();
+    const schema = (0, schema_namespaceObject.useFieldSchema)();
     const { render } = (0, external_index_js_namespaceObject_1.useSchemaInitializerRender)(schema['x-initializer'], schema['x-initializer-props']);
     const sideMenuRef = useSideMenuRef();
     const [selectedKeys, setSelectedKeys] = (0, external_react_namespaceObject.useState)();
@@ -341,6 +280,13 @@ const Menu = (0, schema_namespaceObject.observer)((props)=>{
         ].includes(mode)) return dOpenKeys || defaultSelectedKeys;
         return dOpenKeys;
     });
+    const sensors = (0, core_namespaceObject.useSensors)((0, core_namespaceObject.useSensor)(core_namespaceObject.PointerSensor, {
+        activationConstraint: {
+            distance: 1,
+            delay: 300,
+            tolerance: 5
+        }
+    }));
     const sideMenuSchema = (0, external_react_namespaceObject.useMemo)(()=>{
         let key;
         if (selectedUid) {
@@ -383,6 +329,7 @@ const Menu = (0, schema_namespaceObject.observer)((props)=>{
     ]);
     const { designable } = (0, external_index_js_namespaceObject.useDesignable)();
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject.DndContext, {
+        sensors: sensors,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MenuItemDesignerContext.Provider, {
             value: Designer,
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(MenuModeContext.Provider, {
@@ -448,27 +395,28 @@ Menu.Item = (0, schema_namespaceObject.observer)((props)=>{
                 value: schema,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.FieldContext.Provider, {
                     value: field,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject.SortableItem, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject.SortableItem, {
                         role: "button",
                         "aria-label": t(field.title),
                         className: styles.designerCss,
                         removeParentsIfNoChildren: false,
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
-                                type: icon
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                style: {
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    display: 'inline-block',
-                                    width: '100%',
-                                    verticalAlign: 'middle'
-                                },
-                                children: t(field.title)
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {})
-                        ]
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(DragHandleMenu_js_namespaceObject.DragHandleMenu, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                    className: 'menuitem-title-wrapper',
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
+                                            type: icon
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            className: 'menuitem-title',
+                                            children: t(field.title)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {})
+                            ]
+                        })
                     })
                 })
             })
@@ -519,26 +467,33 @@ Menu.URL = (0, schema_namespaceObject.observer)((props)=>{
                 value: schema,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.FieldContext.Provider, {
                     value: field,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject.SortableItem, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject.SortableItem, {
                         className: styles.designerCss,
                         removeParentsIfNoChildren: false,
                         "aria-label": t(field.title),
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
-                                type: icon
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                style: {
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    display: 'inline-block',
-                                    width: '100%',
-                                    verticalAlign: 'middle'
-                                },
-                                children: t(field.title)
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {})
-                        ]
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(DragHandleMenu_js_namespaceObject.DragHandleMenu, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                    className: 'menuitem-title-wrapper',
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
+                                            type: icon
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            style: {
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                display: 'inline-block',
+                                                width: '100%',
+                                                verticalAlign: 'middle'
+                                            },
+                                            children: t(field.title)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {})
+                            ]
+                        })
                     })
                 })
             })
@@ -580,17 +535,29 @@ Menu.SubMenu = (0, schema_namespaceObject.observer)((props)=>{
                 value: schema,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.FieldContext.Provider, {
                     value: field,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject.SortableItem, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject.SortableItem, {
                         className: styles.subMenuDesignerCss,
                         removeParentsIfNoChildren: false,
                         "aria-label": t(field.title),
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
-                                type: icon
-                            }),
-                            t(field.title),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {})
-                        ]
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(DragHandleMenu_js_namespaceObject.DragHandleMenu, {
+                            name: schema.name,
+                            isSubMenu: true,
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                    className: 'submenu-title',
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
+                                            type: icon
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            className: 'menuitem-title',
+                                            children: t(field.title)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {})
+                            ]
+                        })
                     })
                 })
             }),

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

@@ -39,7 +39,7 @@ function _tagged_template_literal(strings, raw) {
 }
 function _templateObject() {
     const data = _tagged_template_literal([
-        "\n      position: relative;\n      display: inline-block;\n      margin-left: -24px;\n      margin-right: -34px;\n      padding: 0 34px 0 24px;\n      width: calc(100% + 58px);\n      height: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      &:hover {\n        > .general-schema-designer {\n          display: block;\n        }\n      }\n      &.tb-action-link {\n        > .general-schema-designer {\n          top: -10px;\n          bottom: -10px;\n          left: -10px;\n          right: -10px;\n        }\n      }\n      > .general-schema-designer {\n        position: absolute;\n        z-index: 999;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        display: none;\n        background: var(--colorBgSettingsHover);\n        border: 0;\n        pointer-events: none;\n        > .general-schema-designer-icons {\n          position: absolute;\n          right: 2px;\n          top: 2px;\n          line-height: 16px;\n          pointer-events: all;\n          .ant-space-item {\n            background-color: var(--colorSettings);\n            color: #fff;\n            line-height: 16px;\n            width: 16px;\n            padding-left: 1px;\n            align-self: stretch;\n          }\n        }\n      }\n    "
+        "\n      position: relative;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      justify-content: space-between;\n      align-items: center;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      &:hover {\n        .general-schema-designer {\n          display: flex;\n        }\n        .ant-space-item:hover {\n          border-radius: 5px;\n          background-color: var(--colorSettings);\n          color: #fff;\n        }\n      }\n      &.tb-action-link {\n        > .general-schema-designer {\n          top: -10px;\n          bottom: -10px;\n          left: -10px;\n          right: -10px;\n        }\n      }\n      .submenu-title {\n        display: flex;\n        flex-direction: row;\n\n        width: 100%;\n        vertical-align: middle;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .general-schema-designer {\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-start;\n        align-items: center;\n        pointer-events: none;\n        display: none;\n        .general-schema-designer-icons {\n          pointer-events: all;\n          .ant-space-item {\n            line-height: 16px;\n            width: 16px;\n            padding-left: 1px;\n          }\n        }\n      }\n    "
     ]);
     _templateObject = function() {
         return data;
@@ -48,7 +48,7 @@ function _templateObject() {
 }
 function _templateObject1() {
     const data = _tagged_template_literal([
-        "\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-left: -20px;\n      margin-right: -20px;\n      padding: 0 20px;\n      width: calc(100% + 40px);\n      height: 100%;\n      &:hover {\n        > .general-schema-designer {\n          display: block;\n        }\n      }\n      &.tb-action-link {\n        > .general-schema-designer {\n          top: -10px;\n          bottom: -10px;\n          left: -10px;\n          right: -10px;\n        }\n      }\n      > .general-schema-designer {\n        position: absolute;\n        z-index: 999;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        display: none;\n        background: var(--colorBgSettingsHover);\n        border: 0;\n        pointer-events: none;\n        > .general-schema-designer-icons {\n          position: absolute;\n          right: 2px;\n          top: 2px;\n          line-height: 16px;\n          pointer-events: all;\n          .ant-space-item {\n            background-color: var(--colorSettings);\n            color: #fff;\n            line-height: 16px;\n            width: 16px;\n            padding-left: 1px;\n            align-self: stretch;\n          }\n        }\n      }\n    "
+        "\n      position: relative;\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      width: 100%;\n\n      &:hover {\n        .general-schema-designer {\n          display: flex;\n        }\n        .ant-space-item:hover {\n          border-radius: 5px;\n          background-color: var(--colorSettings);\n          color: #fff;\n        }\n      }\n      &.tb-action-link {\n        > .general-schema-designer {\n          top: -10px;\n          bottom: -10px;\n          left: -10px;\n          right: -10px;\n        }\n      }\n\n      .menuitem-title-wrapper {\n        display: flex;\n        flex-direction: row;\n        width: 100%;\n        overflow: hidden;\n      }\n      .menuitem-title {\n        vertical-align: middle;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .general-schema-designer {\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-start;\n        align-items: center;\n        display: none;\n        pointer-events: none;\n        > .general-schema-designer-icons {\n          pointer-events: all;\n          .ant-space-item {\n            line-height: 16px;\n            width: 16px;\n            padding-left: 1px;\n          }\n        }\n      }\n    "
     ]);
     _templateObject1 = function() {
         return data;
@@ -57,7 +57,7 @@ function _templateObject1() {
 }
 function _templateObject2() {
     const data = _tagged_template_literal([
-        "\n      .ant-menu-item:hover {\n        > .ant-menu-title-content > div {\n          .general-schema-designer {\n            display: block;\n          }\n        }\n      }\n    "
+        "\n      height: 100%;\n      overflow-y: auto;\n      overflow-x: hidden;\n\n      .ant-menu-submenu.ant-menu-submenu-inline .ant-menu-submenu-title {\n        position: relative;\n        ::before {\n          content: '';\n          position: absolute;\n          left: 0;\n          top: 50%;\n          transform: translateY(-50%);\n          width: 3px;\n          height: 50%;\n          background-color: var(--colorPrimaryText);\n\n          /* 使用 clip-path 裁剪为梯形 */\n          clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);\n        }\n      }\n\n      .ant-menu-item,\n      .ant-menu-submenu-title {\n        padding-inline-end: 10px;\n      }\n\n      .ant-menu-submenu-title {\n        .ant-menu-title-content {\n          > div {\n            > .general-schema-designer {\n              right: 6px !important;\n            }\n            > span.anticon {\n              margin-right: 10px;\n            }\n          }\n        }\n      }\n    "
     ]);
     _templateObject2 = function() {
         return data;
@@ -66,7 +66,7 @@ function _templateObject2() {
 }
 function _templateObject3() {
     const data = _tagged_template_literal([
-        "\n      height: 100%;\n      overflow-y: auto;\n      overflow-x: hidden;\n      .ant-menu-item {\n        > .ant-menu-title-content {\n          height: 100%;\n          margin-left: -24px;\n          margin-right: -16px;\n          padding: 0 16px 0 24px;\n          > div {\n            > .general-schema-designer {\n              right: 6px !important;\n            }\n          }\n        }\n      }\n      .ant-menu-submenu-title {\n        .ant-menu-title-content {\n          height: 100%;\n          margin-left: -24px;\n          margin-right: -34px;\n          padding: 0 34px 0 24px;\n          > div {\n            > .general-schema-designer {\n              right: 6px !important;\n            }\n            > span.anticon {\n              margin-right: 10px;\n            }\n          }\n        }\n      }\n    "
+        "\n      :active {\n        background: inherit;\n      }\n    "
     ]);
     _templateObject3 = function() {
         return data;
@@ -75,33 +75,21 @@ function _templateObject3() {
 }
 function _templateObject4() {
     const data = _tagged_template_literal([
-        "\n      :active {\n        background: inherit;\n      }\n    "
+        "\n      display: flex;\n    "
     ]);
     _templateObject4 = function() {
         return data;
     };
     return data;
 }
-function _templateObject5() {
-    const data = _tagged_template_literal([
-        "\n      &:hover {\n        border-radius: ",
-        "px;\n        background: rgba(0, 0, 0, 0.045);\n        overflow: hidden;\n      }\n      .ant-btn {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        box-shadow: none;\n        padding-left: 0;\n        padding-right: 0;\n        width: 100%;\n        span {\n          display: block;\n          text-align: center;\n          font-size: ",
-        "px;\n        }\n        .anticon {\n          font-size: 1.2rem;\n          margin-bottom: 0.3rem;\n          text-align: center;\n        }\n      }\n      .ant-btn-default {\n        box-shadow: none;\n      }\n      .general-schema-designer {\n        background: none;\n      }\n    "
-    ]);
-    _templateObject5 = function() {
-        return data;
-    };
-    return data;
-}
 const useStyles = (0, external_antd_style_namespaceObject.createStyles)((param)=>{
     let { css, token } = param;
     return {
         subMenuDesignerCss: css(_templateObject()),
         designerCss: css(_templateObject1()),
-        headerMenuClass: css(_templateObject2()),
-        sideMenuClass: css(_templateObject3()),
-        menuItemClass: css(_templateObject4()),
-        menuItem: css(_templateObject5(), token.borderRadius, token.fontSizeSM)
+        sideMenuClass: css(_templateObject2()),
+        menuItemClass: css(_templateObject3()),
+        headerMenuClass: css(_templateObject4())
     };
 });
 var __webpack_export_target__ = exports;

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

@@ -0,0 +1,80 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = function(module) {
+        var getter = module && module.__esModule ? function() {
+            return module['default'];
+        } : function() {
+            return module;
+        };
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __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__, {
+    MenuSearch: ()=>MenuSearch
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_antd_namespaceObject = require("antd");
+const external_lodash_namespaceObject = require("lodash");
+var external_lodash_default = /*#__PURE__*/ __webpack_require__.n(external_lodash_namespaceObject);
+const external_index_js_namespaceObject = require("../../../index.js");
+const MenuSearch = (props)=>{
+    const { setSearchMenuTitle } = props;
+    const { t } = (0, external_index_js_namespaceObject.useTranslation)();
+    const debounceChangeValue = external_lodash_default().debounce((value)=>{
+        setSearchMenuTitle(value);
+    }, 500);
+    const handleSearch = (value, event)=>{
+        event.stopPropagation();
+        debounceChangeValue(value.trim());
+    };
+    const handleClear = (event)=>{
+        if ('' === event.target.value) {
+            event.stopPropagation();
+            debounceChangeValue('');
+        }
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Input.Search, {
+        style: {
+            width: '100%'
+        },
+        allowClear: true,
+        placeholder: t('search Menu'),
+        prefix: null,
+        onSearch: handleSearch,
+        onChange: handleClear
+    });
+};
+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/tools.js

@@ -0,0 +1,72 @@
+"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__, {
+    getNewSideMenuSchema: function() {
+        return getNewSideMenuSchema;
+    }
+});
+function getNewSideMenuSchema(sideMenuSchema, searchMenuTitle) {
+    const newSchema = flattenAndFilterJson(sideMenuSchema, searchMenuTitle);
+    return newSchema;
+}
+function flattenAndFilterJson(data, targetTitle) {
+    const { title, properties, ...rest } = data;
+    const result = {
+        title,
+        ...rest,
+        properties: {}
+    };
+    const traverse = (node)=>{
+        if (!node) return;
+        const isSubMenu = 'Menu.SubMenu' === node['x-component'];
+        if (!isSubMenu) {
+            if ('string' == typeof (null == node ? void 0 : node.title) && node.title.includes(targetTitle)) result.properties[node.name] = {
+                ...node
+            };
+            return;
+        }
+        if (!node.properties) return;
+        Object.values(node.properties).forEach((child)=>{
+            const isSubMenu = 'Menu.SubMenu' === child['x-component'];
+            if (isSubMenu) traverse(child);
+            else {
+                var _child_title;
+                if (null == child ? void 0 : null === (_child_title = child.title) || void 0 === _child_title ? void 0 : _child_title.includes(targetTitle)) result.properties[child.name] = {
+                    ...child
+                };
+            }
+        });
+    };
+    traverse(data);
+    return result;
+}
+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/scroll-area/ScrollArea.js

@@ -37,23 +37,6 @@ const ScrollArea = ()=>{
     const ref = (0, external_react_namespaceObject.useRef)(null);
     const { t } = (0, external_index_js_namespaceObject.useTranslation)();
     (0, useJoystick_js_namespaceObject.useJoystick)(ref);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        const child = ref.current;
-        const handlerScroll = (e)=>{
-            if (e.target === child) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        };
-        if (child) child.addEventListener('mousewheel', handlerScroll, {
-            passive: false
-        });
-        return ()=>{
-            if (child) child.removeEventListener('mousewheel', handlerScroll);
-        };
-    }, [
-        ref
-    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
         style: {