chore: remove menu data render

config/routes.ts

@@ -14,9 +14,9 @@ export default [
   },
   {
     name: 'playground',
-    // icon: 'icon-experiment',
+    icon: 'icon-experiment',
-    // selectedIcon: 'icon-experiment-filled',
+    selectedIcon: 'icon-experiment-filled',
-    // defaultIcon: 'icon-experiment',
+    defaultIcon: 'icon-experiment',
     path: '/playground',
     key: 'playground',
     routes: [
@@ -84,7 +84,7 @@ export default [
     routes: [
       {
         path: '/models',
-        redirect: '/models/deployment'
+        redirect: '/models/deployments'
       },
       {
         name: 'modelCatalog',
@@ -98,7 +98,7 @@ export default [
       },
       {
         name: 'deployment',
-        path: '/models/deployment',
+        path: '/models/deployments',
         key: 'modelDeployments',
         icon: 'icon-model',
         selectedIcon: 'icon-model-filled',
@@ -164,7 +164,6 @@ export default [
         icon: 'icon-users',
         selectedIcon: 'icon-users-filled',
         defaultIcon: 'icon-users',
-        access: 'canSeeAdmin',
         component: './users'
       }
     ]

src/layouts/index.tsx

@@ -326,14 +326,8 @@ export default (props: any) => {
     setCollapseKeys(new Set(collapseKeys));
   };
 
-  const onMenuItemClick = (menuItem) => {
-    navigate(menuItem.path);
-  };
-
   const menuContentRender = (menuProps, defaultDom) => {
-    return (
+    return <SiderMenu {...menuProps}></SiderMenu>;
-      <SiderMenu {...menuProps} onMenuItemClick={onMenuItemClick}></SiderMenu>
-    );
   };
 
   const actionRender = (layoutProps) => {
@@ -531,8 +525,6 @@ export default (props: any) => {
         splitMenus={true}
         logo={collapsed ? SLogoIcon : LogoIcon}
         menuContentRender={menuContentRender}
-        menuItemRender={menuItemRender}
-        menuDataRender={menuDataRender}
         disableContentMargin
         fixSiderbar
         fixedHeader

src/layouts/rightRender.tsx

@@ -341,7 +341,6 @@ export const getRightRenderContent = (opts: {
   return (
     <>
       <Menu {...helpMenu} style={getMenuStyle(collapsed, siderWidth)} />
-      {/* <Menu {...langMenu} style={getMenuStyle(collapsed, siderWidth)} /> */}
       <Menu
         {...userMenu}
         style={getMenuStyle(collapsed, siderWidth, {

src/layouts/sider-menu.tsx

@@ -1,6 +1,6 @@
 import IconFont from '@/components/icon-font';
 import { CaretDownOutlined } from '@ant-design/icons';
-import { useLocation } from '@umijs/max';
+import { Link, useLocation } from '@umijs/max';
 import { Divider, Tooltip } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { useMemo, useState } from 'react';
@@ -17,7 +17,6 @@ interface MenuItem {
 interface SiderMenuProps {
   menuData: MenuItem[];
   collapsed?: boolean;
-  onMenuItemClick: (item: MenuItem) => void;
 }
 
 const useStyles = createStyles(({ css, token }) => {
@@ -45,7 +44,6 @@ const useStyles = createStyles(({ css, token }) => {
       padding-bottom: 4px;
       overflow: hidden;
       height: 30px;
-      transtion: all var(--ant-motion-duration-slow);
       &:hover {
         .group-title-text {
           color: var(--ant-color-text);
@@ -76,6 +74,8 @@ const useStyles = createStyles(({ css, token }) => {
     `,
     menuItemWrapper: css`
       display: flex;
+      align-items: center;
+      justify-content: flex-start;
       gap: 12px;
       cursor: pointer;
       position: relative;
@@ -92,6 +92,9 @@ const useStyles = createStyles(({ css, token }) => {
       &.menu-item-selected {
         background-color: ${Menu.itemSelectedBg};
         color: ${Menu.itemSelectedColor};
+        .anticon {
+          color: ${Menu.itemSelectedColor};
+        }
       }
       &:active {
         background-color: ${Menu.itemActiveBg};
@@ -117,7 +120,7 @@ const useStyles = createStyles(({ css, token }) => {
 });
 
 const SiderMenu: React.FC<SiderMenuProps> = (props) => {
-  const { menuData, collapsed, onMenuItemClick } = props;
+  const { menuData, collapsed } = props;
   const { styles, cx } = useStyles();
   const location = useLocation();
   const [collapseKeys, setCollapseKeys] = useState<Set<string>>(new Set());
@@ -156,8 +159,9 @@ const SiderMenu: React.FC<SiderMenuProps> = (props) => {
         className={cx(styles.menuItemContent, 'menu-item-content')}
         key={key}
       >
-        <div
+        <Link
-          onClick={() => onMenuItemClick(menuItem)}
+          to={menuItem.path.replace('/*', '')}
+          target={menuItem.target}
           className={cx(styles.menuItemWrapper, 'menu-item', {
             'menu-item-selected': location.pathname === menuItem.path
           })}
@@ -176,11 +180,17 @@ const SiderMenu: React.FC<SiderMenuProps> = (props) => {
             </Tooltip>
           ) : (
             <>
-              {menuItem.icon}
+              <IconFont
+                type={
+                  location.pathname === menuItem.path
+                    ? menuItem.selectedIcon || ''
+                    : menuItem.defaultIcon || ''
+                }
+              ></IconFont>
               <span>{menuItem.name}</span>
             </>
           )}
-        </div>
+        </Link>
       </div>
     );
   };
@@ -195,25 +205,23 @@ const SiderMenu: React.FC<SiderMenuProps> = (props) => {
         <div key={item.key}>
           {item.children && item.children.length > 0 ? (
             <>
-              {
+              <div
-                <div
+                className={cx(styles.groupTitle, {
-                  className={cx(styles.groupTitle, {
+                  'menu-item-group-title-collapsed': collapsed
-                    'menu-item-group-title-collapsed': collapsed
+                })}
-                  })}
+                onClick={(e) => handleToggleGroup(e, item)}
-                  onClick={(e) => handleToggleGroup(e, item)}
+              >
-                >
+                {!collapsed ? (
-                  {!collapsed ? (
+                  <span className="group-title-text">
-                    <span className="group-title-text">
+                    <span>{item.name}</span>
-                      <span>{item.name}</span>
+                    <CaretDownOutlined
-                      <CaretDownOutlined
+                      rotate={collapseKeys.has(item.key) ? -90 : 0}
-                        rotate={collapseKeys.has(item.key) ? -90 : 0}
+                    ></CaretDownOutlined>
-                      ></CaretDownOutlined>
+                  </span>
-                    </span>
+                ) : (
-                  ) : (
+                  <Divider style={dividerStyles} />
-                    <Divider style={dividerStyles} />
+                )}
-                  )}
+              </div>
-                </div>
-              }
               <div
                 className={cx(styles.menuItemGroup, {
                   'menu-item-group-collapsed': collapsed,
@@ -227,7 +235,7 @@ const SiderMenu: React.FC<SiderMenuProps> = (props) => {
               </div>
             </>
           ) : (
-            <>{menuItemRender(item, item.key)}</>
+            menuItemRender(item, item.key)
           )}
         </div>
       ))}

src/locales/en-US/menu.ts

@@ -11,7 +11,7 @@ export default {
   'menu.models.modelList': 'Deploy & Manage',
   'menu.models.modelCatalog': 'Catalog',
   'menu.models.catalog': 'Model Catalog',
-  'menu.models.deployment': 'Deployment',
+  'menu.models.deployment': 'Deployments',
   'menu.modelCatalog': 'Catalog',
   'menu.resources': 'Resources',
   'menu.apikeys': 'API Keys',

src/pages/llmodels/components/table-list.tsx

@@ -753,7 +753,7 @@ const Models: React.FC<ModelsProps> = ({
         className="models-page-container"
         ghost
         header={{
-          title: intl.formatMessage({ id: 'models.title' }),
+          title: intl.formatMessage({ id: 'menu.models.deployment' }),
           style: {
             paddingInline: 'var(--layout-content-header-inlinepadding)'
           },