fix(client): auto collapse menu items when overflow

packages/client/src/route-switch/antd/admin-layout/index.tsx

@@ -13,7 +13,7 @@ import {
   RemoteSchemaTemplateManagerProvider,
   useDocumentTitle,
   useRoute,
-  useSystemSettings,
+  useSystemSettings
 } from '../../../';
 
 const InternalAdminLayout = (props: any) => {
@@ -58,6 +58,11 @@ const InternalAdminLayout = (props: any) => {
             />
             {/* {result?.data?.data?.title} */}
           </div>
+          <div
+            style={{
+              width: 'calc(100% - 590px)',
+            }}
+          >
             <RemoteSchemaComponent
               hidden={hidden}
               uid={route.uiSchemaUid}
@@ -89,6 +94,7 @@ const InternalAdminLayout = (props: any) => {
               }}
             />
           </div>
+        </div>
         <div style={{ position: 'absolute', top: 0, right: 0 }}>
           <PluginManager.Toolbar
             items={[

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

@@ -134,6 +134,19 @@ const useSideMenuRef = () => {
 
 const MenuItemDesignerContext = createContext(null);
 
+const AddMenuItemButton = () => {
+  const schema = useFieldSchema();
+  const { render } = useSchemaInitializer(schema['x-initializer']);
+  const { designable } = useDesignable();
+  return (
+    designable && (
+      <AntdMenu.Item disabled style={{ padding: '0 8px', order: 9999 }}>
+        {render({ style: { background: 'none' } })}
+      </AntdMenu.Item>
+    )
+  );
+};
+
 export const Menu: ComposedMenu = observer((props) => {
   let {
     onSelect,
@@ -192,19 +205,13 @@ export const Menu: ComposedMenu = observer((props) => {
     <DndContext>
       <MenuItemDesignerContext.Provider value={Designer}>
         <MenuModeContext.Provider value={mode}>
-          <div
-            style={{
-              width: 'calc(100% - 200px - 390px)',
-              display: 'flex',
-              justifyContent: 'flex-start',
-              alignItems: 'center',
-            }}
-          >
           <AntdMenu
             {...others}
-              style={{
+            style={
+              {
                 // width: mode === 'mix' ? '100%' : undefined,
-              }}
+              }
+            }
             className={css`
               .ant-menu-item:hover {
                 > .ant-menu-title-content > div {
@@ -249,9 +256,10 @@ export const Menu: ComposedMenu = observer((props) => {
             mode={mode === 'mix' ? 'horizontal' : mode}
             defaultOpenKeys={defaultOpenKeys}
             defaultSelectedKeys={defaultSelectedKeys}
-            ></AntdMenu>
-            {render({ style: { background: 'none' } })}
-          </div>
+          >
+            <AddMenuItemButton />
+            {props.children}
+          </AntdMenu>
           {loading
             ? null
             : mode === 'mix' &&