style: flatten menu items

config/routes.ts

@@ -9,13 +9,14 @@ export default [
     selectedIcon: 'icon-dashboard-filled',
     defaultIcon: 'icon-dashboard',
     access: 'canSeeAdmin',
-    component: './dashboard'
+    component: './dashboard',
+    routes: []
   },
   {
     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: [
@@ -28,7 +29,9 @@ export default [
         title: 'Chat',
         path: '/playground/chat',
         key: 'chat',
-        icon: 'Comment',
+        icon: 'icon-chat',
+        selectedIcon: 'icon-chat-filled',
+        defaultIcon: 'icon-chat',
         component: './playground/index'
       },
       {
@@ -36,7 +39,9 @@ export default [
         title: 'Text2Images',
         path: keepAliveRoutes.text2images,
         key: 'text2images',
-        icon: 'Comment',
+        icon: 'icon-image1',
+        selectedIcon: 'icon-image-filled',
+        defaultIcon: 'icon-image1',
         component: './playground/images'
       },
       {
@@ -44,7 +49,9 @@ export default [
         title: 'Speech',
         path: keepAliveRoutes.speech,
         key: 'speech',
-        icon: 'Comment',
+        icon: 'icon-audio1',
+        selectedIcon: 'icon-audio-filled',
+        defaultIcon: 'icon-audio1',
         component: './playground/speech'
       },
       {
@@ -52,7 +59,9 @@ export default [
         title: 'embedding',
         path: '/playground/embedding',
         key: 'embedding',
-        icon: 'Comment',
+        icon: 'icon-embedding',
+        selectedIcon: 'icon-embedding-filled',
+        defaultIcon: 'icon-embedding',
         component: './playground/embedding'
       },
       {
@@ -60,60 +69,124 @@ export default [
         title: 'Rerank',
         path: '/playground/rerank',
         key: 'rerank',
-        icon: 'Comment',
+        icon: 'icon-reranker',
+        selectedIcon: 'icon-reranker-filled',
+        defaultIcon: 'icon-reranker',
         component: './playground/rerank'
       }
     ]
   },
-  {
-    name: 'modelCatalog',
-    path: '/models/catalog',
-    key: 'modelsCatalog',
-    icon: 'icon-layers',
-    selectedIcon: 'icon-layers-filled',
-    defaultIcon: 'icon-layers',
-    access: 'canSeeAdmin',
-    component: './llmodels/catalog'
-  },
   {
     name: 'models',
-    path: '/models/list',
+    path: '/models',
     key: 'models',
-    icon: 'icon-model',
+    routes: [
-    selectedIcon: 'icon-model-filled',
+      {
-    defaultIcon: 'icon-model',
+        path: '/models',
-    access: 'canSeeAdmin',
+        redirect: '/models/deployment'
-    component: './llmodels/index'
+      },
+      {
+        name: 'modelCatalog',
+        path: '/models/catalog',
+        key: 'modelsCatalog',
+        icon: 'icon-layers',
+        selectedIcon: 'icon-layers-filled',
+        defaultIcon: 'icon-layers',
+        access: 'canSeeAdmin',
+        component: './llmodels/catalog'
+      },
+      {
+        name: 'deployment',
+        path: '/models/deployment',
+        key: 'modelDeployments',
+        icon: 'icon-model',
+        selectedIcon: 'icon-model-filled',
+        defaultIcon: 'icon-model',
+        access: 'canSeeAdmin',
+        component: './llmodels/index'
+      }
+    ]
   },
   {
     name: 'resources',
     path: '/resources',
     key: 'resources',
-    icon: 'icon-resources',
-    selectedIcon: 'icon-resources-filled',
-    defaultIcon: 'icon-resources',
     access: 'canSeeAdmin',
-    component: './resources'
+    routes: [
+      {
+        path: '/resources',
+        redirect: '/resources/workers'
+      },
+      {
+        name: 'workers',
+        path: '/resources/workers',
+        key: 'workers',
+        icon: 'icon-resources',
+        selectedIcon: 'icon-resources-filled',
+        defaultIcon: 'icon-resources',
+        component: './resources/components/workers'
+      },
+      {
+        name: 'gpus',
+        path: '/resources/gpus',
+        key: 'gpus',
+        icon: 'icon-gpu1',
+        selectedIcon: 'icon-gpu-filled',
+        defaultIcon: 'icon-gpu1',
+        component: './resources/components/gpus'
+      },
+      {
+        name: 'modelfiles',
+        path: '/resources/modelfiles',
+        key: 'modelfiles',
+        icon: 'icon-files',
+        selectedIcon: 'icon-files-filled',
+        defaultIcon: 'icon-files',
+        component: './resources/components/model-files'
+      }
+    ]
+  },
+  // {
+  //   name: 'users',
+  //   path: '/users',
+  //   key: 'users',
+  //   icon: 'icon-users',
+  //   selectedIcon: 'icon-users-filled',
+  //   defaultIcon: 'icon-users',
+  //   access: 'canSeeAdmin',
+  //   component: './users'
+  // },
+  {
+    name: 'accessControl',
+    path: '/access-control',
+    key: 'accessControl',
+    routes: [
+      {
+        path: '/access-control',
+        redirect: '/access-control/users'
+      },
+      {
+        name: 'users',
+        path: '/access-control/users',
+        key: 'users',
+        icon: 'icon-users',
+        selectedIcon: 'icon-users-filled',
+        defaultIcon: 'icon-users',
+        access: 'canSeeAdmin',
+        component: './users'
+      }
+    ]
   },
   {
     name: 'apikeys',
     path: '/api-keys',
     key: 'apikeys',
+    hideInMenu: true,
     selectedIcon: 'icon-key-filled',
     icon: 'icon-key',
     defaultIcon: 'icon-key',
     component: './api-keys'
   },
-  {
-    name: 'users',
-    path: '/users',
-    key: 'users',
-    icon: 'icon-users',
-    selectedIcon: 'icon-users-filled',
-    defaultIcon: 'icon-users',
-    access: 'canSeeAdmin',
-    component: './users'
-  },
   {
     name: 'profile',
     path: '/profile',

src/app.tsx

@@ -23,7 +23,7 @@ const checkDefaultPage = async (userInfo: any) => {
   if (isFirstLogin === null && isOnline()) {
     writeState(IS_FIRST_LOGIN, true);
     if (userInfo && userInfo?.is_admin) {
-      history.push('/models/list');
+      history.push('/models/deployment');
     }
   }
 };

src/atoms/settings.ts

@@ -7,13 +7,15 @@ type UserSettings = {
   mode: 'light' | 'realDark' | 'auto';
   colorPrimary: string;
   isDarkTheme: boolean;
+  collapsed: boolean;
 };
 
 const defaultSettings: UserSettings = {
   theme: 'light',
   mode: 'auto',
   isDarkTheme: false,
-  colorPrimary: colorPrimary
+  colorPrimary: colorPrimary,
+  collapsed: false
 };
 
 export const getStorageUserSettings = () => {

src/components/icon-font/index.tsx

@@ -1,8 +1,8 @@
 import { createFromIconfontCN } from '@ant-design/icons';
-import './iconfont/iconfont.js';
+// import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: ''
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_35np53id3ax.js'
 });
 
 export default IconFont;

src/config/theme/dark.ts

@@ -32,7 +32,7 @@ export default {
       iconSize: 16,
       iconMarginInlineEnd: 12,
       itemBorderRadius: 4,
-      itemHeight: 36,
+      itemHeight: 32,
       itemSelectedColor: '#007BFF',
       darkItemSelectedBg: '#141414',
       darkItemHoverBg: 'rgba(255, 255, 255, 0.03)',

src/config/theme/light.ts

@@ -33,7 +33,7 @@ export default {
       iconMarginInlineEnd: 12,
       itemBorderRadius: 4,
       itemSelectedColor: '#007BFF',
-      itemHeight: 36,
+      itemHeight: 32,
       groupTitleColor: 'rgba(0,0,0,1)',
       itemHoverColor: 'rgba(0,0,0,1)',
       itemColor: 'rgba(0,0,0,1)',

src/global.less

@@ -252,7 +252,8 @@ body {
     }
 
     .ant-pro-sider .ant-layout-sider-children {
-      background-color: var(--color-fill-sider);
+      // background-color: var(--color-fill-sider);
+      border-right: 1px solid var(--ant-color-split);
     }
   }
 
@@ -292,6 +293,10 @@ body {
     }
   }
 
+  .ant-pro-sider-actions-list-collapsed {
+    margin-block-end: 0;
+  }
+
   .ant-pro-page-container-children-container {
     padding-block: var(--layout-content-blockpadding);
     padding-inline: var(--layout-content-inlinepadding);
@@ -334,6 +339,10 @@ body {
         // color: var(--ant-color-primary) !important;
         font-weight: 400;
       }
+
+      .ant-menu-item-group-title.hide-submenu + .ant-menu-item-group-list {
+        display: none;
+      }
     }
   }
 }

src/layouts/index.tsx

@@ -28,7 +28,7 @@ import {
   useNavigate,
   type IRoute
 } from '@umijs/max';
-import { Button, ConfigProvider, Modal, theme } from 'antd';
+import { Button, ConfigProvider, Modal, Tooltip, theme } from 'antd';
 import 'driver.js/dist/driver.css';
 import { useAtom } from 'jotai';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -39,6 +39,7 @@ import { LogoIcon, SLogoIcon } from './Logo';
 import ErrorBoundary from './error-boundary';
 import { getRightRenderContent } from './rightRender';
 import { patchRoutes } from './runtime';
+import SiderMenu from './sider-menu';
 
 const loginPath = '/login';
 
@@ -102,7 +103,8 @@ export default (props: any) => {
     defer: false
   });
   const [modal, contextHolder] = Modal.useModal();
-  const { themeData, setTheme, userSettings, isDarkTheme } = useUserSettings();
+  const { themeData, setTheme, setUserSettings, userSettings, isDarkTheme } =
+    useUserSettings();
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const { initialize: initializeMenu } = useOverlayScroller();
   const [userInfo] = useAtom(userAtom);
@@ -113,8 +115,9 @@ export default (props: any) => {
   const navigate = useNavigate();
   const intl = useIntl();
   const { clientRoutes, pluginManager } = useAppData();
-  const [collapsed, setCollapsed] = useState(false);
+  // const [collapsed, setCollapsed] = useState(userSettings.collapsed || false);
   const [collapseValue, setCollapseValue] = useState(false);
+  const [collapseKeys, setCollapseKeys] = useState<Set<string>>(new Set());
 
   const initialInfo = (useModel && useModel('@@initialState')) || {
     initialState: undefined,
@@ -187,7 +190,11 @@ export default (props: any) => {
 
   const handleToggleCollapse = (e: any) => {
     e.stopPropagation();
-    setCollapsed(!collapsed);
+    // setCollapsed(!collapsed);
+    setUserSettings({
+      ...userSettings,
+      collapsed: !userSettings.collapsed
+    });
   };
 
   const newRoutes = filterRoutes(
@@ -203,6 +210,8 @@ export default (props: any) => {
   const role = initialState?.currentUser?.is_admin ? 'admin' : 'user';
   const [route] = useAccessMarkedRoutes(mapRoutes(newRoutes, role));
 
+  console.log('route============', route);
+
   patchRoutes({
     routes: route.children,
     initialState: initialInfo.initialState
@@ -213,6 +222,24 @@ export default (props: any) => {
     [location.pathname]
   );
 
+  const allRouteKeys = useMemo(() => {
+    const keys = new Set<string>();
+    const childrenRoutes = route?.children || [];
+    const traverseRoutes = (routes) => {
+      routes.forEach((r) => {
+        if (r.path) {
+          keys.add(r.path);
+        }
+        if (r.children) {
+          traverseRoutes(r.children);
+        }
+      });
+    };
+    traverseRoutes(childrenRoutes);
+
+    return keys;
+  }, [route?.children]);
+
   const showUpgrade = useMemo(() => {
     return (
       initialState?.currentUser?.is_admin &&
@@ -256,13 +283,17 @@ export default (props: any) => {
     return () => clearTimeout(timeout);
   }, [initializeMenu, matchedRoute, location]);
 
+  const collapsed = useMemo(() => {
+    return userSettings.collapsed || false;
+  }, [userSettings.collapsed]);
+
   const renderMenuHeader = (logo, title) => {
     return (
       <>
         {logo}
         <div className="collapse-wrap" onClick={handleToggleCollapse}>
           <Button
-            style={{ marginRight: collapsed ? 0 : -14 }}
+            style={{ marginRight: collapsed ? 0 : -14, border: 'none' }}
             size="small"
             type={collapsed ? 'default' : 'text'}
           >
@@ -284,7 +315,29 @@ export default (props: any) => {
     );
   };
 
+  const handleToggleGroup = (menuItemProps, e) => {
+    e.stopPropagation();
+
+    if (collapseKeys.has(menuItemProps.key)) {
+      collapseKeys.delete(menuItemProps.key);
+    } else {
+      collapseKeys.add(menuItemProps.key);
+    }
+    setCollapseKeys(new Set(collapseKeys));
+  };
+
+  const onMenuItemClick = (menuItem) => {
+    navigate(menuItem.path);
+  };
+
+  const menuContentRender = (menuProps, defaultDom) => {
+    return (
+      <SiderMenu {...menuProps} onMenuItemClick={onMenuItemClick}></SiderMenu>
+    );
+  };
+
   const actionRender = (layoutProps) => {
+    console.log('actionRender', layoutProps);
     const dom = getRightRenderContent({
       runtimeConfig,
       loading,
@@ -300,38 +353,36 @@ export default (props: any) => {
     return dom;
   };
 
-  const itemRender = (route, _, routes) => {
-    const { breadcrumbName, title, path } = route;
-    const label = title || breadcrumbName;
-    const last = routes[routes.length - 1];
-    if (last) {
-      if (last.path === path || last.linkPath === path) {
-        return <span>{label}</span>;
-      }
-    }
-    return <Link to={path}>{label}</Link>;
-  };
-
   const menuItemRender = (menuItemProps, defaultDom) => {
+    console.log('defaultdom==========', menuItemProps, defaultDom);
     if (menuItemProps.isUrl || menuItemProps.children) {
       return defaultDom;
     }
     if (menuItemProps.path && location.pathname !== menuItemProps.path) {
       return (
-        <Link
+        <Tooltip
-          to={menuItemProps.path.replace('/*', '')}
+          title={collapsed ? menuItemProps.name : false}
-          target={menuItemProps.target}
+          placement="right"
         >
-          {defaultDom}
+          <Link
-        </Link>
+            to={menuItemProps.path.replace('/*', '')}
+            target={menuItemProps.target}
+          >
+            {defaultDom}
+          </Link>
+        </Tooltip>
       );
     }
-    return <>{defaultDom}</>;
+    return (
+      <Tooltip title={collapsed ? menuItemProps.name : false} placement="right">
+        {defaultDom}
+      </Tooltip>
+    );
   };
 
   const menuDataRender = (menuData) => {
     const currentItem = menuData.find((s) => location.pathname === s.path);
-    return menuData.map((item) => {
+    const result = menuData.map((item) => {
       const newItem = { ...item };
 
       const selected =
@@ -347,18 +398,17 @@ export default (props: any) => {
       }
       if (newItem.children) {
         newItem.children = menuDataRender(newItem.children);
-
-        if (selected) {
-          newItem.icon = <IconFont type={newItem.selectedIcon} />;
-        }
       }
       return newItem;
     });
+
+    return result;
   };
 
   const onPageChange = (route) => {
     const { location } = history;
     const { pathname } = location;
+    console.log('onPageChange', pathname, route);
 
     initRouteCacheValue(pathname);
     dropRouteCache(pathname);
@@ -387,7 +437,11 @@ export default (props: any) => {
   };
 
   const onCollapse = (value) => {
-    setCollapsed(value);
+    // setCollapsed(value);
+    setUserSettings({
+      ...userSettings,
+      collapsed: value
+    });
   };
 
   useEffect(() => {
@@ -467,15 +521,17 @@ export default (props: any) => {
         onCollapse={onCollapse}
         onMenuHeaderClick={onMenuHeaderClick}
         menuHeaderRender={renderMenuHeader}
-        collapsed={collapsed}
+        collapsed={userSettings.collapsed}
         onPageChange={onPageChange}
         formatMessage={formatMessage}
         menu={{
-          locale: true
+          locale: true,
+          type: 'group'
         }}
+        splitMenus={true}
         logo={collapsed ? SLogoIcon : LogoIcon}
+        menuContentRender={menuContentRender}
         menuItemRender={menuItemRender}
-        itemRender={itemRender}
         menuDataRender={menuDataRender}
         disableContentMargin
         fixSiderbar

src/layouts/rightRender.tsx

@@ -20,23 +20,14 @@ import { Avatar, Menu, Spin } from 'antd';
 import _ from 'lodash';
 import React from 'react';
 
-const themeConfig = [
+const getMenuStyle = (
-  {
+  collapsed: boolean,
-    key: 'realDark',
+  siderWidth: number,
-    label: 'common.appearance.dark',
+  extraStyle: React.CSSProperties = {}
-    icon: <MoonOutlined />
+) => ({
-  },
+  width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
-  {
+  ...extraStyle
-    key: 'light',
+});
-    label: 'common.appearance.light',
-    icon: <SunOutlined />
-  }
-  // {
-  //   key: 'auto',
-  //   label: 'common.appearance.system',
-  //   icon: <IconFont type="icon-theme-auto" />
-  // }
-];
 
 export const getRightRenderContent = (opts: {
   runtimeConfig: any;
@@ -300,6 +291,20 @@ export const getRightRenderContent = (opts: {
           </span>
         ),
         children: [
+          {
+            key: 'apikeys',
+            label: (
+              <span className="flex flex-center">
+                <IconFont type="icon-key" />
+                <span className="m-l-8" style={{ marginLeft: 8 }}>
+                  {intl?.formatMessage?.({ id: 'menu.apikeys' })}
+                </span>
+              </span>
+            ),
+            onClick: () => {
+              history.push('/api-keys');
+            }
+          },
           {
             key: 'settings',
             label: (
@@ -333,23 +338,17 @@ export const getRightRenderContent = (opts: {
     ]
   };
 
-  const getMenuStyle = (
-    collapsed: boolean,
-    siderWidth: number,
-    extraStyle: React.CSSProperties = {}
-  ) => ({
-    width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
-    ...extraStyle
-  });
-
   return (
-    <div>
+    <>
       <Menu {...helpMenu} style={getMenuStyle(collapsed, siderWidth)} />
-      <Menu {...langMenu} style={getMenuStyle(collapsed, siderWidth)} />
+      {/* <Menu {...langMenu} style={getMenuStyle(collapsed, siderWidth)} /> */}
       <Menu
         {...userMenu}
-        style={getMenuStyle(collapsed, siderWidth, { marginTop: 20 })}
+        style={getMenuStyle(collapsed, siderWidth, {
+          marginTop: 8,
+          marginBottom: 0
+        })}
       />
-    </div>
+    </>
   );
 };

src/layouts/sider-menu.tsx

@@ -0,0 +1,240 @@
+import IconFont from '@/components/icon-font';
+import { CaretDownOutlined } from '@ant-design/icons';
+import { useLocation } from '@umijs/max';
+import { Divider, Tooltip } from 'antd';
+import { createStyles } from 'antd-style';
+import React, { useMemo, useState } from 'react';
+
+interface MenuItem {
+  icon?: string;
+  selectedIcon?: string;
+  defaultIcon?: string;
+  children?: MenuItem[];
+
+  [key: string]: any;
+}
+
+interface SiderMenuProps {
+  menuData: MenuItem[];
+  collapsed?: boolean;
+  onMenuItemClick: (item: MenuItem) => void;
+}
+
+const useStyles = createStyles(({ css, token }) => {
+  console.log('useStyles', token);
+
+  // @ts-ignore
+  const { Menu } = token;
+
+  return {
+    siderMenu: css`
+      &.sider-menu-collapsed {
+        .menu-item {
+          justify-content: center;
+          padding: 0;
+        }
+      }
+    `,
+    groupTitle: css`
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      padding: var(--ant-padding-xs) var(--ant-padding);
+      line-height: var(--ant-menu-group-title-line-height);
+      font-size: 12px;
+      padding-bottom: 4px;
+      color: var(--ant-color-text-secondary);
+      overflow: hidden;
+      height: 30px;
+      transtion: all var(--ant-motion-duration-slow);
+      &:hover {
+        .group-title-text {
+          color: var(--ant-color-text);
+        }
+      }
+      .anticon {
+        transform: scale(0.8);
+      }
+      .group-title-text {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 12px;
+        color: var(--ant-color-text-secondary);
+        font-weight: 400;
+      }
+
+      &.menu-item-group-title-collapsed {
+        height: 1px;
+        padding-block: 0;
+        padding-inline: 0;
+      }
+    `,
+    menuItemContent: css`
+      margin: 4px;
+      border-radius: 4px;
+      overflow: hidden;
+    `,
+    menuItemWrapper: css`
+      display: flex;
+      gap: 12px;
+      cursor: pointer;
+      position: relative;
+      padding-inline: calc(var(--ant-font-size) * 2) var(--ant-padding);
+      padding-left: 16px;
+      overflow: hidden;
+      height: ${Menu.itemHeight}px;
+      line-height: ${Menu.itemHeight}px;
+      color: var(--ant-color-text-secondary);
+      &:hover {
+        background-color: ${Menu.itemHoverBg};
+        color: ${Menu.itemHoverColor};
+      }
+      &.menu-item-selected {
+        background-color: ${Menu.itemSelectedBg};
+        color: ${Menu.itemSelectedColor};
+      }
+      &:active {
+        background-color: ${Menu.itemActiveBg};
+        color: ${Menu.itemActiveColor};
+      }
+      .anticon {
+        font-size: 16px;
+      }
+      .icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+      }
+    `,
+    menuItemGroup: css`
+      &.menu-item-group-hidden {
+        display: none;
+      }
+    `
+  };
+});
+
+const SiderMenu: React.FC<SiderMenuProps> = (props) => {
+  const { menuData, collapsed, onMenuItemClick } = props;
+  const { styles, cx } = useStyles();
+  const location = useLocation();
+  const [collapseKeys, setCollapseKeys] = useState<Set<string>>(new Set());
+  console.log('SiderMenu', props);
+
+  const dividerStyles = useMemo(() => {
+    if (collapsed) {
+      return {
+        margin: '6px 0'
+      };
+    }
+    return {
+      margin: '6px 16px',
+      width: 'unset',
+      minWidth: 'unset',
+      maxWidth: 'unset'
+    };
+  }, [collapsed]);
+
+  const handleToggleGroup = (e: any, menuGroup: any) => {
+    e.stopPropagation();
+
+    console.log('handleToggleGroup', menuGroup.key);
+
+    if (collapseKeys.has(menuGroup.key)) {
+      collapseKeys.delete(menuGroup.key);
+    } else {
+      collapseKeys.add(menuGroup.key);
+    }
+    setCollapseKeys(new Set(collapseKeys));
+  };
+
+  const menuItemRender = (menuItem: MenuItem, key: string) => {
+    return (
+      <div
+        className={cx(styles.menuItemContent, 'menu-item-content')}
+        key={key}
+      >
+        <div
+          onClick={() => onMenuItemClick(menuItem)}
+          className={cx(styles.menuItemWrapper, 'menu-item', {
+            'menu-item-selected': location.pathname === menuItem.path
+          })}
+        >
+          {collapsed ? (
+            <Tooltip title={menuItem.name} placement="right">
+              <span className="icon-wrapper">
+                <IconFont
+                  type={
+                    location.pathname === menuItem.path
+                      ? menuItem.selectedIcon || ''
+                      : menuItem.defaultIcon || ''
+                  }
+                ></IconFont>
+              </span>
+            </Tooltip>
+          ) : (
+            <>
+              {menuItem.icon}
+              <span>{menuItem.name}</span>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className={cx(styles.siderMenu, 'sider-menu', {
+        'sider-menu-collapsed': collapsed
+      })}
+    >
+      {menuData.map((item: MenuItem, index: number) => (
+        <div key={item.key}>
+          {item.children && item.children.length > 0 ? (
+            <>
+              {
+                <div
+                  className={cx(styles.groupTitle, {
+                    'menu-item-group-title-collapsed': collapsed
+                  })}
+                  onClick={(e) => handleToggleGroup(e, item)}
+                >
+                  {!collapsed ? (
+                    <span className="group-title-text">
+                      <span>{item.name}</span>
+                      <CaretDownOutlined
+                        rotate={collapseKeys.has(item.key) ? -90 : 0}
+                      ></CaretDownOutlined>
+                    </span>
+                  ) : (
+                    <Divider style={dividerStyles} />
+                  )}
+                </div>
+              }
+              <div
+                className={cx(styles.menuItemGroup, {
+                  'menu-item-group-collapsed': collapsed,
+                  'menu-item-group-hidden':
+                    !collapsed && collapseKeys.has(item.key)
+                })}
+              >
+                {item.children?.map((child: MenuItem) =>
+                  menuItemRender(child, child.key)
+                )}
+              </div>
+            </>
+          ) : (
+            <>{menuItemRender(item, item.key)}</>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SiderMenu;

src/locales/en-US/menu.ts

@@ -11,10 +11,17 @@ export default {
   'menu.models.modelList': 'Deploy & Manage',
   'menu.models.modelCatalog': 'Catalog',
   'menu.models.catalog': 'Model Catalog',
+  'menu.models.deployment': 'Deployment',
   'menu.modelCatalog': 'Catalog',
   'menu.resources': 'Resources',
   'menu.apikeys': 'API Keys',
   'menu.users': 'Users',
+  'menu.resources.workers': 'Workers',
+  'menu.resources.gpus': 'GPUs',
+  'menu.resources.modelfiles': 'Model Files',
+  'menu.accessControl': 'Access Control',
+  'menu.accessControl.apikeys': 'API Keys',
+  'menu.accessControl.users': 'Users',
   'menu.profile': 'Profile',
   'menu.login': 'Login',
   'menu.usage': 'Usage',

src/locales/ja-JP/menu.ts

@@ -11,6 +11,7 @@ export default {
   'menu.models.modelList': 'デプロイと管理',
   'menu.models.modelCatalog': 'カタログ',
   'menu.models.catalog': 'モデルカタログ',
+  'menu.models.deployment': 'Deployment',
   'menu.modelCatalog': 'カタログ',
   'menu.resources': 'リソース',
   'menu.apikeys': 'APIキー',
@@ -18,5 +19,21 @@ export default {
   'menu.profile': 'プロフィール',
   'menu.login': 'ログイン',
   'menu.usage': '使用状況',
-  'menu.404': '404'
+  'menu.404': '404',
+  'menu.resources.workers': 'Workers',
+  'menu.resources.gpus': 'GPUs',
+  'menu.resources.modelfiles': 'Model Files',
+  'menu.accessControl': 'Access Control',
+  'menu.accessControl.apikeys': 'API Keys',
+  'menu.accessControl.users': 'Users'
 };
+
+// ========== To-Do: Translate Keys (Remove After Translation) ==========
+// 1.   'menu.models.deployment': 'Deployment',
+// 2. 'menu.resources.workers': 'Workers',
+// 3. 'menu.resources.gpus': 'GPUs',
+// 4. 'menu.resources.modelfiles': 'Model Files',
+// 5. 'menu.accessControl': 'Access Control',
+// 6. 'menu.accessControl.apikeys': 'API Keys',
+// 7. 'menu.accessControl.users': 'Users',
+// ========== End of To-Do List ==========

src/locales/ru-RU/menu.ts

@@ -11,6 +11,7 @@ export default {
   'menu.models.modelList': 'Развертывание и управление',
   'menu.models.modelCatalog': 'Каталог',
   'menu.models.catalog': 'Каталог моделей',
+  'menu.models.deployment': 'Deployment',
   'menu.modelCatalog': 'Каталог',
   'menu.resources': 'Ресурсы',
   'menu.apikeys': 'API-ключи',
@@ -18,5 +19,21 @@ export default {
   'menu.profile': 'Профиль',
   'menu.login': 'Авторизация',
   'menu.usage': 'Использование',
-  'menu.404': '404'
+  'menu.404': '404',
+  'menu.resources.workers': 'Workers',
+  'menu.resources.gpus': 'GPUs',
+  'menu.resources.modelfiles': 'Model Files',
+  'menu.accessControl': 'Access Control',
+  'menu.accessControl.apikeys': 'API Keys',
+  'menu.accessControl.users': 'Users'
 };
+
+// ========== To-Do: Translate Keys (Remove After Translation) ==========
+// 1.   'menu.models.deployment': 'Deployment',
+// 2. 'menu.resources.workers': 'Workers',
+// 3. 'menu.resources.gpus': 'GPUs',
+// 4. 'menu.resources.modelfiles': 'Model Files',
+// 5. 'menu.accessControl': 'Access Control',
+// 6. 'menu.accessControl.apikeys': 'API Keys',
+// 7. 'menu.accessControl.users': 'Users',
+// ========== End of To-Do List ==========

src/locales/zh-CN/menu.ts

@@ -2,7 +2,7 @@ export default {
   'menu.dashboard': '概览',
   'menu.playground': '试验场',
   'menu.playground.rerank': '重排',
-  'menu.playground.embedding': '文本嵌入',
+  'menu.playground.embedding': '嵌入',
   'menu.playground.chat': '对话',
   'menu.playground.speech': '语音',
   'menu.playground.text2images': '图像',
@@ -10,6 +10,7 @@ export default {
   'menu.models': '模型',
   'menu.models.modelList': '部署与管理',
   'menu.models.modelCatalog': '模型库',
+  'menu.models.deployment': '部署',
   'menu.modelCatalog': '模型库',
   'menu.models.catalog': '模型库',
   'menu.resources': '资源',
@@ -18,5 +19,11 @@ export default {
   'menu.profile': '个人信息',
   'menu.login': '登录',
   'menu.usage': '使用量',
-  'menu.404': '404'
+  'menu.404': '404',
+  'menu.resources.workers': 'Workers',
+  'menu.resources.gpus': 'GPUs',
+  'menu.resources.modelfiles': '模型文件',
+  'menu.accessControl': '访问控制',
+  'menu.accessControl.apikeys': 'API 密钥',
+  'menu.accessControl.users': '用户'
 };

src/pages/api-keys/index.tsx

@@ -100,7 +100,8 @@ const APIKeys: React.FC = () => {
           title: intl.formatMessage({ id: 'apikeys.title' }),
           style: {
             paddingInline: 'var(--layout-content-header-inlinepadding)'
-          }
+          },
+          breadcrumb: {}
         }}
         extra={[]}
       >

src/pages/llmodels/catalog.tsx

@@ -172,7 +172,7 @@ const Catalog: React.FC = () => {
         });
         message.success(intl.formatMessage({ id: 'common.message.success' }));
         setModelsExpandKeys([modelData.id]);
-        navigate('/models/list');
+        navigate('/models/deployment');
       } catch (error) {}
     },
     [openDeployModal]

src/pages/login/utils.ts

@@ -12,7 +12,7 @@ export const checkDefaultPage = async (userInfo: any, replace: boolean) => {
   if (isFirstLogin === null && isOnline()) {
     writeState(IS_FIRST_LOGIN, true);
     const pathname =
-      userInfo && userInfo?.is_admin ? '/models/list' : '/playground';
+      userInfo && userInfo?.is_admin ? '/models/deployment' : '/playground';
     history.push(pathname);
     return;
   }

src/pages/playground/config/samples.ts

@@ -37,7 +37,7 @@ export const rerankerSamples: Record<
   }
 > = {
   'zh-CN': {
-    query: '如何提高睡眠质量?',
+    query: '如何提高睡眠质量？',
     documents: [
       '保持规律的作息时间，晚上避免使用电子产品。',
       '参加更多社交活动有助于提高情绪。',

src/pages/profile/components/appearance.tsx

@@ -1,7 +1,9 @@
 import useUserSettings from '@/hooks/use-user-settings';
+import langConfigMap from '@/locales/lang-config-map';
 import { MoonOutlined, SunOutlined } from '@ant-design/icons';
-import { useIntl } from '@umijs/max';
+import { getAllLocales, setLocale, useIntl } from '@umijs/max';
 import { Select } from 'antd';
+import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -10,21 +12,19 @@ const Wrapper = styled.div`
   flex-direction: column;
   gap: 16px;
   padding: 16px 0;
-  .theme {
+`;
+
+const SettingsItem = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 300px;
+  .label {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    font-size: 14px;
-    max-width: 300px;
-  }
-  .theme-label {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
     font-weight: var(--font-weight-500);
   }
-  .tips {
-    color: var(--ant-color-text-secondary);
-  }
 `;
 
 const Appearance: React.FC = () => {
@@ -33,6 +33,7 @@ const Appearance: React.FC = () => {
   console.log('userSettings', userSettings);
 
   const intl = useIntl();
+  const allLocals = getAllLocales();
 
   const ThemeOptions = [
     {
@@ -56,10 +57,17 @@ const Appearance: React.FC = () => {
     setTheme(value);
   };
 
+  console.log('allLocals', allLocals);
+
+  const languageOptions = allLocals.map((locale) => ({
+    value: locale,
+    label: _.get(langConfigMap, [locale, 'label'])
+  }));
+
   return (
     <Wrapper>
-      <div className="theme">
+      <SettingsItem>
-        <span className="theme-label">
+        <span className="label">
           <span>{intl.formatMessage({ id: 'common.appearance.theme' })}</span>
         </span>
         <Select
@@ -68,7 +76,20 @@ const Appearance: React.FC = () => {
           onChange={handleOnChange}
           style={{ width: 200 }}
         ></Select>
-      </div>
+      </SettingsItem>
+      <SettingsItem>
+        <span className="label">
+          <span>{intl.formatMessage({ id: 'common.settings.language' })}</span>
+        </span>
+        <Select
+          value={intl.locale}
+          options={languageOptions}
+          onChange={(value) => {
+            setLocale(value, false);
+          }}
+          style={{ width: 200 }}
+        ></Select>
+      </SettingsItem>
     </Wrapper>
   );
 };

src/pages/resources/components/gpus.tsx

@@ -4,6 +4,7 @@ import ProgressBar from '@/components/progress-bar';
 import InfoColumn from '@/components/simple-table/info-column';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { convertFileSize } from '@/utils';
+import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { ConfigProvider, Empty, Table } from 'antd';
 import _ from 'lodash';
@@ -69,128 +70,143 @@ const GPUList: React.FC = () => {
 
   return (
     <>
-      <FilterBar
+      <PageContainer
-        buttonText={intl.formatMessage({ id: 'resources.button.create' })}
+        ghost
-        handleSearch={handleSearch}
+        header={{
-        handleInputChange={handleNameChange}
+          title: 'GPUs',
-        showDeleteButton={false}
+          style: {
-        showPrimaryButton={false}
+            paddingInline: 'var(--layout-content-header-inlinepadding)'
-        width={{ input: 300 }}
+          },
-      ></FilterBar>
+          breadcrumb: {}
-      <ConfigProvider renderEmpty={renderEmpty}>
+        }}
-        <Table
+        extra={[]}
-          tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
+      >
-          dataSource={dataSource.dataList}
+        <FilterBar
-          loading={dataSource.loading}
+          marginBottom={22}
-          rowKey="id"
+          buttonText={intl.formatMessage({ id: 'resources.button.create' })}
-          onChange={handleTableChange}
+          handleSearch={handleSearch}
-          pagination={{
+          handleInputChange={handleNameChange}
-            showSizeChanger: true,
+          showDeleteButton={false}
-            pageSize: queryParams.perPage,
+          showPrimaryButton={false}
-            current: queryParams.page,
+          width={{ input: 300 }}
-            total: dataSource.total,
+        ></FilterBar>
-            hideOnSinglePage: queryParams.perPage === 10,
+        <ConfigProvider renderEmpty={renderEmpty}>
-            onChange: handlePageChange
+          <Table
-          }}
+            tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
-        >
+            dataSource={dataSource.dataList}
-          <Column
+            loading={dataSource.loading}
-            title={intl.formatMessage({ id: 'common.table.name' })}
+            rowKey="id"
-            dataIndex="name"
+            onChange={handleTableChange}
-            key="name"
+            pagination={{
-            width={240}
+              showSizeChanger: true,
-            render={(text, record) => {
+              pageSize: queryParams.perPage,
-              return (
+              current: queryParams.page,
-                <AutoTooltip ghost maxWidth={240}>
+              total: dataSource.total,
-                  {text}
+              hideOnSinglePage: queryParams.perPage === 10,
-                </AutoTooltip>
+              onChange: handlePageChange
-              );
             }}
-          />
+          >
-          <Column
+            <Column
-            title={intl.formatMessage({ id: 'resources.table.index' })}
+              title={intl.formatMessage({ id: 'common.table.name' })}
-            dataIndex="index"
+              dataIndex="name"
-            key="index"
+              key="name"
-            render={(text, record: GPUDeviceItem) => {
+              width={240}
-              return <span>{record.index}</span>;
+              render={(text, record) => {
-            }}
+                return (
-          />
+                  <AutoTooltip ghost maxWidth={240}>
-          <Column
-            title={intl.formatMessage({ id: 'resources.table.workername' })}
-            dataIndex="worker_name"
-            key="worker_name"
-            width={200}
-            render={(text, record: GPUDeviceItem) => {
-              return (
-                <span style={{ display: 'flex', width: '100%' }}>
-                  <AutoTooltip ghost maxWidth={340}>
                     {text}
                   </AutoTooltip>
-                </span>
+                );
-              );
+              }}
-            }}
+            />
-          />
+            <Column
-          <Column
+              title={intl.formatMessage({ id: 'resources.table.index' })}
-            title={intl.formatMessage({ id: 'resources.table.vender' })}
+              dataIndex="index"
-            dataIndex="vendor"
+              key="index"
-            key="vendor"
+              render={(text, record: GPUDeviceItem) => {
-          />
+                return <span>{record.index}</span>;
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'resources.table.workername' })}
+              dataIndex="worker_name"
+              key="worker_name"
+              width={200}
+              render={(text, record: GPUDeviceItem) => {
+                return (
+                  <span style={{ display: 'flex', width: '100%' }}>
+                    <AutoTooltip ghost maxWidth={340}>
+                      {text}
+                    </AutoTooltip>
+                  </span>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'resources.table.vender' })}
+              dataIndex="vendor"
+              key="vendor"
+            />
 
-          <Column
+            <Column
-            title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
+              title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
-            dataIndex="temperature"
+              dataIndex="temperature"
-            key="Temperature"
+              key="Temperature"
-            render={(text, record: GPUDeviceItem) => {
+              render={(text, record: GPUDeviceItem) => {
-              return <span>{text ? _.round(text, 1) : '-'}</span>;
+                return <span>{text ? _.round(text, 1) : '-'}</span>;
-            }}
+              }}
-          />
+            />
-          <Column
+            <Column
-            title={intl.formatMessage({ id: 'resources.table.gpuutilization' })}
+              title={intl.formatMessage({
-            dataIndex="gpuUtil"
+                id: 'resources.table.gpuutilization'
-            key="gpuUtil"
+              })}
-            render={(text, record: GPUDeviceItem) => {
+              dataIndex="gpuUtil"
-              return (
+              key="gpuUtil"
-                <>
+              render={(text, record: GPUDeviceItem) => {
-                  {record.core ? (
+                return (
-                    <ProgressBar
+                  <>
-                      percent={_.round(record.core?.utilization_rate, 2)}
+                    {record.core ? (
-                    ></ProgressBar>
+                      <ProgressBar
-                  ) : (
+                        percent={_.round(record.core?.utilization_rate, 2)}
-                    '-'
+                      ></ProgressBar>
-                  )}
+                    ) : (
-                </>
+                      '-'
-              );
+                    )}
-            }}
+                  </>
-          />
+                );
+              }}
+            />
 
-          <Column
+            <Column
-            title={intl.formatMessage({
+              title={intl.formatMessage({
-              id: 'resources.table.vramutilization'
+                id: 'resources.table.vramutilization'
-            })}
+              })}
-            dataIndex="VRAM"
+              dataIndex="VRAM"
-            key="VRAM"
+              key="VRAM"
-            render={(text, record: GPUDeviceItem) => {
+              render={(text, record: GPUDeviceItem) => {
-              return (
+                return (
-                <ProgressBar
+                  <ProgressBar
-                  percent={
+                    percent={
-                    record.memory?.used
+                      record.memory?.used
-                      ? _.round(record.memory?.utilization_rate, 0)
+                        ? _.round(record.memory?.utilization_rate, 0)
-                      : _.round(
+                        : _.round(
-                          record.memory?.allocated / record.memory?.total,
+                            record.memory?.allocated / record.memory?.total,
-                          0
+                            0
-                        ) * 100
+                          ) * 100
-                  }
+                    }
-                  label={
+                    label={
-                    <InfoColumn
+                      <InfoColumn
-                      fieldList={fieldList}
+                        fieldList={fieldList}
-                      data={record.memory}
+                        data={record.memory}
-                    ></InfoColumn>
+                      ></InfoColumn>
-                  }
+                    }
-                ></ProgressBar>
+                  ></ProgressBar>
-              );
+                );
-            }}
+              }}
-          />
+            />
-        </Table>
+          </Table>
-      </ConfigProvider>
+        </ConfigProvider>
+      </PageContainer>
     </>
   );
 };

src/pages/resources/components/model-files.tsx

@@ -26,6 +26,7 @@ import {
   CopyOutlined,
   InfoCircleOutlined
 } from '@ant-design/icons';
+import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { ConfigProvider, Empty, Table, Tag, Typography, message } from 'antd';
 import dayjs from 'dayjs';
@@ -541,7 +542,7 @@ const ModelFiles = () => {
       });
       message.success(intl.formatMessage({ id: 'common.message.success' }));
       setModelsExpandKeys([modelData.id]);
-      navigate('/models/list');
+      navigate('/models/deployment');
     } catch (error) {
       // console.log('error', error);
     }
@@ -648,66 +649,81 @@ const ModelFiles = () => {
 
   return (
     <>
-      <FilterBar
+      <PageContainer
-        actionType="dropdown"
+        ghost
-        selectHolder="resources.filter.worker"
+        header={{
-        inputHolder="resources.filter.path"
+          title: intl.formatMessage({ id: 'resources.modelfiles.modelfile' }),
-        buttonText={intl.formatMessage({ id: 'resources.modelfiles.download' })}
+          style: {
-        handleSelectChange={handleWorkerChange}
+            paddingInline: 'var(--layout-content-header-inlinepadding)'
-        handleDeleteByBatch={handleDeleteByBatch}
+          },
-        handleClickPrimary={handleClickDropdown}
+          breadcrumb: {}
-        handleSearch={handleSearch}
+        }}
-        selectOptions={workersList}
+        extra={[]}
-        handleInputChange={handleNameChange}
+      >
-        rowSelection={rowSelection}
+        <FilterBar
-        actionItems={onLineSourceOptions}
+          marginBottom={22}
-        showSelect={true}
+          actionType="dropdown"
-      ></FilterBar>
+          selectHolder="resources.filter.worker"
-      <ConfigProvider renderEmpty={renderEmpty}>
+          inputHolder="resources.filter.path"
-        <Table
+          buttonText={intl.formatMessage({
-          rowKey="id"
+            id: 'resources.modelfiles.download'
-          tableLayout="fixed"
+          })}
-          style={{ width: '100%' }}
+          handleSelectChange={handleWorkerChange}
-          onChange={handleTableChange}
+          handleDeleteByBatch={handleDeleteByBatch}
-          dataSource={dataSource.dataList}
+          handleClickPrimary={handleClickDropdown}
-          loading={dataSource.loading}
+          handleSearch={handleSearch}
+          selectOptions={workersList}
+          handleInputChange={handleNameChange}
           rowSelection={rowSelection}
-          columns={columns}
+          actionItems={onLineSourceOptions}
-          pagination={{
+          showSelect={true}
-            showSizeChanger: true,
+        ></FilterBar>
-            pageSize: queryParams.perPage,
+        <ConfigProvider renderEmpty={renderEmpty}>
-            current: queryParams.page,
+          <Table
-            total: dataSource.total,
+            rowKey="id"
-            hideOnSinglePage: queryParams.perPage === 10,
+            tableLayout="fixed"
-            onChange: handlePageChange
+            style={{ width: '100%' }}
-          }}
+            onChange={handleTableChange}
-        ></Table>
+            dataSource={dataSource.dataList}
-      </ConfigProvider>
+            loading={dataSource.loading}
-      <DeleteModal ref={modalRef}></DeleteModal>
+            rowSelection={rowSelection}
-      <DownloadModal
+            columns={columns}
-        onCancel={handleDownloadCancel}
+            pagination={{
-        onOk={handleDownload}
+              showSizeChanger: true,
-        title={intl.formatMessage({ id: 'resources.modelfiles.download' })}
+              pageSize: queryParams.perPage,
-        open={downloadModalStatus.show}
+              current: queryParams.page,
-        source={downloadModalStatus.source}
+              total: dataSource.total,
-        width={downloadModalStatus.width}
+              hideOnSinglePage: queryParams.perPage === 10,
-        hasLinuxWorker={downloadModalStatus.hasLinuxWorker}
+              onChange: handlePageChange
-        workersList={readyWorkers}
+            }}
-      ></DownloadModal>
+          ></Table>
-      <DeployModal
+        </ConfigProvider>
-        deploymentType="modelFiles"
+        <DeleteModal ref={modalRef}></DeleteModal>
-        title={intl.formatMessage({ id: 'models.button.deploy' })}
+        <DownloadModal
-        onCancel={handleDeployModalCancel}
+          onCancel={handleDownloadCancel}
-        onOk={handleCreateModel}
+          onOk={handleDownload}
-        open={openDeployModal.show}
+          title={intl.formatMessage({ id: 'resources.modelfiles.download' })}
-        action={PageAction.CREATE}
+          open={downloadModalStatus.show}
-        source={openDeployModal.source}
+          source={downloadModalStatus.source}
-        width={openDeployModal.width}
+          width={downloadModalStatus.width}
-        gpuOptions={openDeployModal.gpuOptions}
+          hasLinuxWorker={downloadModalStatus.hasLinuxWorker}
-        modelFileOptions={openDeployModal.modelFileOptions || []}
+          workersList={readyWorkers}
-        initialValues={openDeployModal.initialValues}
+        ></DownloadModal>
-        isGGUF={openDeployModal.isGGUF}
+        <DeployModal
-      ></DeployModal>
+          deploymentType="modelFiles"
+          title={intl.formatMessage({ id: 'models.button.deploy' })}
+          onCancel={handleDeployModalCancel}
+          onOk={handleCreateModel}
+          open={openDeployModal.show}
+          action={PageAction.CREATE}
+          source={openDeployModal.source}
+          width={openDeployModal.width}
+          gpuOptions={openDeployModal.gpuOptions}
+          modelFileOptions={openDeployModal.modelFileOptions || []}
+          initialValues={openDeployModal.initialValues}
+          isGGUF={openDeployModal.isGGUF}
+        ></DeployModal>
+      </PageContainer>
     </>
   );
 };

src/pages/resources/components/workers.tsx

@@ -13,6 +13,7 @@ import {
   EditOutlined,
   InfoCircleOutlined
 } from '@ant-design/icons';
+import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { ConfigProvider, Empty, Table, Tooltip, message } from 'antd';
 import _ from 'lodash';
@@ -202,263 +203,279 @@ const Workers: React.FC = () => {
 
   return (
     <>
-      <FilterBar
+      <PageContainer
-        buttonText={intl.formatMessage({ id: 'resources.button.create' })}
+        ghost
-        handleDeleteByBatch={handleDeleteBatch}
+        header={{
-        handleSearch={handleSearch}
+          title: 'Workers',
-        handleClickPrimary={handleAddWorker}
+          style: {
-        handleInputChange={handleNameChange}
+            paddingInline: 'var(--layout-content-header-inlinepadding)'
-        rowSelection={rowSelection}
+          },
-        width={{ input: 300 }}
+          breadcrumb: {}
-      ></FilterBar>
+        }}
-      <ConfigProvider renderEmpty={renderEmpty}>
+        extra={[]}
-        <Table
+      >
-          tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
+        <FilterBar
-          style={{ width: '100%' }}
+          marginBottom={22}
-          dataSource={dataSource.dataList}
+          buttonText={intl.formatMessage({ id: 'resources.button.create' })}
-          loading={dataSource.loading}
+          handleDeleteByBatch={handleDeleteBatch}
-          rowKey="id"
+          handleSearch={handleSearch}
-          onChange={handleTableChange}
+          handleClickPrimary={handleAddWorker}
+          handleInputChange={handleNameChange}
           rowSelection={rowSelection}
-          pagination={{
+          width={{ input: 300 }}
-            showSizeChanger: true,
+        ></FilterBar>
-            pageSize: queryParams.perPage,
+        <ConfigProvider renderEmpty={renderEmpty}>
-            current: queryParams.page,
+          <Table
-            total: dataSource.total,
+            tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
-            hideOnSinglePage: queryParams.perPage === 10,
+            style={{ width: '100%' }}
-            onChange: handlePageChange
+            dataSource={dataSource.dataList}
-          }}
+            loading={dataSource.loading}
-        >
+            rowKey="id"
-          <Column
+            onChange={handleTableChange}
-            title={intl.formatMessage({ id: 'common.table.name' })}
+            rowSelection={rowSelection}
-            dataIndex="name"
+            pagination={{
-            key="name"
+              showSizeChanger: true,
-            width={100}
+              pageSize: queryParams.perPage,
-            render={(text, record: ListItem) => {
+              current: queryParams.page,
-              return (
+              total: dataSource.total,
-                <AutoTooltip ghost maxWidth={240}>
+              hideOnSinglePage: queryParams.perPage === 10,
-                  <span>{record.name}</span>
+              onChange: handlePageChange
-                </AutoTooltip>
-              );
             }}
-          />
+          >
-          <Column
+            <Column
-            title={intl.formatMessage({ id: 'resources.table.labels' })}
+              title={intl.formatMessage({ id: 'common.table.name' })}
-            dataIndex="labels"
+              dataIndex="name"
-            key="labels"
+              key="name"
-            width={200}
+              width={100}
-            render={(text, record: ListItem) => {
+              render={(text, record: ListItem) => {
-              return (
+                return (
-                <div
+                  <AutoTooltip ghost maxWidth={240}>
-                  style={{
+                    <span>{record.name}</span>
-                    display: 'flex',
+                  </AutoTooltip>
-                    flexWrap: 'wrap',
+                );
-                    gap: 6
+              }}
-                  }}
+            />
-                >
+            <Column
-                  {_.map(record.labels, (value: any, key: string) => {
+              title={intl.formatMessage({ id: 'resources.table.labels' })}
-                    return (
+              dataIndex="labels"
-                      <AutoTooltip
+              key="labels"
-                        key={key}
+              width={200}
-                        className="m-r-0"
+              render={(text, record: ListItem) => {
-                        maxWidth={155}
+                return (
-                        style={{
+                  <div
-                          paddingInline: 8,
+                    style={{
-                          borderRadius: 12
+                      display: 'flex',
-                        }}
+                      flexWrap: 'wrap',
-                      >
+                      gap: 6
-                        <span>{key}</span>
+                    }}
-                        <span>:{value}</span>
+                  >
-                      </AutoTooltip>
+                    {_.map(record.labels, (value: any, key: string) => {
-                    );
-                  })}
-                </div>
-              );
-            }}
-          />
-          <Column
-            title={intl.formatMessage({ id: 'common.table.status' })}
-            dataIndex="state"
-            key="state"
-            render={(text, record: ListItem) => {
-              return (
-                <StatusTag
-                  maxTooltipWidth={400}
-                  statusValue={{
-                    status: status[record.state] as any,
-                    text: WorkerStatusMapValue[record.state],
-                    message: record.state_message
-                  }}
-                ></StatusTag>
-              );
-            }}
-          />
-          <Column title="IP" dataIndex="ip" key="address" />
-          <Column
-            title="CPU"
-            dataIndex="CPU"
-            key="CPU"
-            render={(text, record: ListItem) => {
-              return (
-                <ProgressBar
-                  percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
-                ></ProgressBar>
-              );
-            }}
-          />
-          <Column
-            title={intl.formatMessage({ id: 'resources.table.memory' })}
-            dataIndex="memory"
-            key="Memory"
-            render={(text, record: ListItem) => {
-              return (
-                <ProgressBar
-                  percent={formateUtilazation(
-                    record?.status?.memory?.used,
-                    record?.status?.memory?.total
-                  )}
-                  label={
-                    <InfoColumn
-                      fieldList={fieldList}
-                      data={record.status.memory}
-                    ></InfoColumn>
-                  }
-                ></ProgressBar>
-              );
-            }}
-          />
-          <Column
-            title="GPU"
-            dataIndex="GPU"
-            key="GPU"
-            render={(text, record: ListItem) => {
-              return (
-                <span className="flex-column flex-gap-2">
-                  {_.map(
-                    _.sortBy(record?.status?.gpu_devices || [], ['index']),
-                    (item: GPUDeviceItem, index: string) => {
                       return (
-                        <span className="flex-center" key={index}>
+                        <AutoTooltip
-                          <span
+                          key={key}
-                            className="m-r-5"
+                          className="m-r-0"
-                            style={{ display: 'flex', width: 25 }}
+                          maxWidth={155}
-                          >
+                          style={{
-                            [{item.index}]
+                            paddingInline: 8,
-                          </span>
+                            borderRadius: 12
-                          {item.core ? (
+                          }}
-                            <ProgressBar
+                        >
-                              key={index}
+                          <span>{key}</span>
-                              percent={_.round(item.core?.utilization_rate, 0)}
+                          <span>:{value}</span>
-                            ></ProgressBar>
+                        </AutoTooltip>
-                          ) : (
-                            '-'
-                          )}
-                        </span>
                       );
+                    })}
+                  </div>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'common.table.status' })}
+              dataIndex="state"
+              key="state"
+              render={(text, record: ListItem) => {
+                return (
+                  <StatusTag
+                    maxTooltipWidth={400}
+                    statusValue={{
+                      status: status[record.state] as any,
+                      text: WorkerStatusMapValue[record.state],
+                      message: record.state_message
+                    }}
+                  ></StatusTag>
+                );
+              }}
+            />
+            <Column title="IP" dataIndex="ip" key="address" />
+            <Column
+              title="CPU"
+              dataIndex="CPU"
+              key="CPU"
+              render={(text, record: ListItem) => {
+                return (
+                  <ProgressBar
+                    percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
+                  ></ProgressBar>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'resources.table.memory' })}
+              dataIndex="memory"
+              key="Memory"
+              render={(text, record: ListItem) => {
+                return (
+                  <ProgressBar
+                    percent={formateUtilazation(
+                      record?.status?.memory?.used,
+                      record?.status?.memory?.total
+                    )}
+                    label={
+                      <InfoColumn
+                        fieldList={fieldList}
+                        data={record.status.memory}
+                      ></InfoColumn>
                     }
-                  )}
+                  ></ProgressBar>
-                </span>
+                );
-              );
+              }}
-            }}
+            />
-          />
+            <Column
-
+              title="GPU"
-          <Column
+              dataIndex="GPU"
-            title={intl.formatMessage({ id: 'resources.table.vram' })}
+              key="GPU"
-            dataIndex="VRAM"
+              render={(text, record: ListItem) => {
-            key="VRAM"
+                return (
-            render={(text, record: ListItem) => {
+                  <span className="flex-column flex-gap-2">
-              return (
+                    {_.map(
-                <span className="flex-column flex-gap-2">
+                      _.sortBy(record?.status?.gpu_devices || [], ['index']),
-                  {_.map(
+                      (item: GPUDeviceItem, index: string) => {
-                    _.sortBy(record?.status?.gpu_devices || [], ['index']),
+                        return (
-                    (item: GPUDeviceItem, index: string) => {
+                          <span className="flex-center" key={index}>
-                      return (
-                        <span key={index}>
-                          <span className="flex-center">
                             <span
                               className="m-r-5"
                               style={{ display: 'flex', width: 25 }}
                             >
                               [{item.index}]
                             </span>
-                            <ProgressBar
+                            {item.core ? (
-                              key={index}
+                              <ProgressBar
-                              percent={
+                                key={index}
-                                item.memory?.used
+                                percent={_.round(
-                                  ? _.round(item.memory?.utilization_rate, 0)
+                                  item.core?.utilization_rate,
-                                  : _.round(
+                                  0
-                                      (item.memory?.allocated /
+                                )}
-                                        item.memory?.total) *
+                              ></ProgressBar>
-                                        100,
+                            ) : (
-                                      0
+                              '-'
-                                    )
-                              }
-                              label={
-                                <InfoColumn
-                                  fieldList={fieldList}
-                                  data={item.memory}
-                                ></InfoColumn>
-                              }
-                            ></ProgressBar>
-                            {item.memory.is_unified_memory && (
-                              <Tooltip
-                                title={intl.formatMessage({
-                                  id: 'resources.table.unified'
-                                })}
-                              >
-                                <InfoCircleOutlined
-                                  className="m-l-5"
-                                  style={{ color: 'var(--ant-blue-5)' }}
-                                />
-                              </Tooltip>
                             )}
                           </span>
-                        </span>
+                        );
-                      );
+                      }
-                    }
+                    )}
-                  )}
+                  </span>
-                </span>
+                );
-              );
+              }}
-            }}
+            />
-          />
+
-          <Column
+            <Column
-            title={intl.formatMessage({ id: 'resources.table.disk' })}
+              title={intl.formatMessage({ id: 'resources.table.vram' })}
-            dataIndex="storage"
+              dataIndex="VRAM"
-            key="storage"
+              key="VRAM"
-            render={(text, record: ListItem) => {
+              render={(text, record: ListItem) => {
-              return (
+                return (
-                <ProgressBar
+                  <span className="flex-column flex-gap-2">
-                  percent={calcStorage(record.status?.filesystem)}
+                    {_.map(
-                  label={renderStorageTooltip(record.status.filesystem)}
+                      _.sortBy(record?.status?.gpu_devices || [], ['index']),
-                ></ProgressBar>
+                      (item: GPUDeviceItem, index: string) => {
-              );
+                        return (
-            }}
+                          <span key={index}>
-          />
+                            <span className="flex-center">
-          <Column
+                              <span
-            title={intl.formatMessage({ id: 'common.table.operation' })}
+                                className="m-r-5"
-            key="operation"
+                                style={{ display: 'flex', width: 25 }}
-            render={(text, record: ListItem) => {
+                              >
-              return (
+                                [{item.index}]
-                <DropdownButtons
+                              </span>
-                  items={ActionList}
+                              <ProgressBar
-                  onSelect={(val) => handleSelect(val, record)}
+                                key={index}
-                ></DropdownButtons>
+                                percent={
-              );
+                                  item.memory?.used
-            }}
+                                    ? _.round(item.memory?.utilization_rate, 0)
-          />
+                                    : _.round(
-        </Table>
+                                        (item.memory?.allocated /
-      </ConfigProvider>
+                                          item.memory?.total) *
-      <DeleteModal ref={modalRef}></DeleteModal>
+                                          100,
-      <AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
+                                        0
-      <UpdateLabels
+                                      )
-        open={updateLabelsData.open}
+                                }
-        onOk={handleUpdateLabelsOk}
+                                label={
-        onCancel={handleCancelUpdateLabels}
+                                  <InfoColumn
-        data={{
+                                    fieldList={fieldList}
-          name: updateLabelsData.data.name,
+                                    data={item.memory}
-          labels: updateLabelsData.data.labels
+                                  ></InfoColumn>
-        }}
+                                }
-      ></UpdateLabels>
+                              ></ProgressBar>
+                              {item.memory.is_unified_memory && (
+                                <Tooltip
+                                  title={intl.formatMessage({
+                                    id: 'resources.table.unified'
+                                  })}
+                                >
+                                  <InfoCircleOutlined
+                                    className="m-l-5"
+                                    style={{ color: 'var(--ant-blue-5)' }}
+                                  />
+                                </Tooltip>
+                              )}
+                            </span>
+                          </span>
+                        );
+                      }
+                    )}
+                  </span>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'resources.table.disk' })}
+              dataIndex="storage"
+              key="storage"
+              render={(text, record: ListItem) => {
+                return (
+                  <ProgressBar
+                    percent={calcStorage(record.status?.filesystem)}
+                    label={renderStorageTooltip(record.status.filesystem)}
+                  ></ProgressBar>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'common.table.operation' })}
+              key="operation"
+              render={(text, record: ListItem) => {
+                return (
+                  <DropdownButtons
+                    items={ActionList}
+                    onSelect={(val) => handleSelect(val, record)}
+                  ></DropdownButtons>
+                );
+              }}
+            />
+          </Table>
+        </ConfigProvider>
+        <DeleteModal ref={modalRef}></DeleteModal>
+        <AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
+        <UpdateLabels
+          open={updateLabelsData.open}
+          onOk={handleUpdateLabelsOk}
+          onCancel={handleCancelUpdateLabels}
+          data={{
+            name: updateLabelsData.data.name,
+            labels: updateLabelsData.data.labels
+          }}
+        ></UpdateLabels>
+      </PageContainer>
     </>
   );
 };

src/pages/users/index.tsx

@@ -158,7 +158,8 @@ const Users: React.FC = () => {
           title: intl.formatMessage({ id: 'users.title' }),
           style: {
             paddingInline: 'var(--layout-content-header-inlinepadding)'
-          }
+          },
+          breadcrumb: {}
         }}
         extra={[]}
       >