style: login

src/layouts/Logo.tsx

@@ -2,10 +2,14 @@
 // This file is generated by Umi automatically
 // DO NOT CHANGE IT MANUALLY!
 import GpustackLogo from '@/assets/images/gpustack-logo.png';
+import SmallLogo from '@/assets/images/small-logo-200x200.png';
 import React from 'react';
 
 const LogoIcon: React.FC = () => {
   return <img src={GpustackLogo} alt="logo" style={{ height: 16 }} />;
 };
+const SLogoIcon: React.FC = () => {
+  return <img src={SmallLogo} alt="logo" style={{ height: 24 }} />;
+};
 
-export default LogoIcon;
+export { LogoIcon, SLogoIcon };

src/layouts/index.tsx

@@ -4,6 +4,7 @@ import { userAtom } from '@/atoms/user';
 import { logout } from '@/pages/login/apis';
 import { useAccessMarkedRoutes } from '@@/plugin-access';
 import { useModel } from '@@/plugin-model';
+
 import { ProLayout } from '@ant-design/pro-components';
 import {
   Link,
@@ -17,13 +18,12 @@ import {
   type IRoute
 } from '@umijs/max';
 import { useAtom } from 'jotai';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import Exception from './Exception';
 import './Layout.css';
-import Logo from './Logo';
+import { LogoIcon, SLogoIcon } from './Logo';
 import { getRightRenderContent } from './rightRender';
 import { patchRoutes } from './runtime';
-
 const loginPath = '/login';
 
 // 过滤出需要显示的路由, 这里的filterFn 指 不希望显示的层级
@@ -84,6 +84,7 @@ export default (props: any) => {
   const navigate = useNavigate();
   const intl = useIntl();
   const { clientRoutes, pluginManager } = useAppData();
+  const [collapsed, setCollapsed] = useState(false);
 
   const initialInfo = (useModel && useModel('@@initialState')) || {
     initialState: undefined,
@@ -94,7 +95,6 @@ export default (props: any) => {
 
   const userConfig = {
     title: '',
-    layout: 'mix',
     locale: true
   };
 
@@ -145,12 +145,18 @@ export default (props: any) => {
         location={location}
         title={userConfig.title}
         navTheme="light"
+        layout="side"
+        disableMobile={true}
         siderWidth={220}
         onMenuHeaderClick={(e) => {
           e.stopPropagation();
           e.preventDefault();
           navigate('/');
         }}
+        collapsed={collapsed}
+        onCollapse={(collapsed) => {
+          setCollapsed(collapsed);
+        }}
         onPageChange={(route) => {
           const { location } = history;
 
@@ -178,9 +184,8 @@ export default (props: any) => {
         }}
         formatMessage={formatMessage}
         menu={{ locale: true }}
-        logo={Logo}
+        logo={collapsed ? SLogoIcon : LogoIcon}
         menuItemRender={(menuItemProps, defaultDom) => {
-          console.log('meurender=========', { defaultDom });
           if (menuItemProps.isUrl || menuItemProps.children) {
             return defaultDom;
           }

src/layouts/render-links.tsx

@@ -0,0 +1,66 @@
+import {
+  AppstoreOutlined,
+  MailOutlined,
+  SettingOutlined
+} from '@ant-design/icons';
+import { Menu, type MenuProps } from 'antd';
+import React from 'react';
+
+type MenuItem = Required<MenuProps>['items'][number];
+const items: MenuItem[] = [
+  {
+    key: 'sub1',
+    icon: <MailOutlined />,
+    label: 'Navigation One',
+    children: [
+      {
+        key: '1-1',
+        label: 'Item 1',
+        type: 'group',
+        children: [
+          { key: '1', label: 'Option 1' },
+          { key: '2', label: 'Option 2' }
+        ]
+      },
+      {
+        key: '1-2',
+        label: 'Item 2',
+        type: 'group',
+        children: [
+          { key: '3', label: 'Option 3' },
+          { key: '4', label: 'Option 4' }
+        ]
+      }
+    ]
+  },
+  {
+    key: 'sub2',
+    icon: <AppstoreOutlined />,
+    label: 'Navigation Two',
+    children: [
+      { key: '5', label: 'Option 5' },
+      { key: '6', label: 'Option 6' },
+      {
+        key: 'sub3',
+        label: 'Submenu'
+      }
+    ]
+  },
+  {
+    key: 'sub4',
+    label: 'Navigation Three',
+    icon: <SettingOutlined />,
+    children: [
+      { key: '9', label: 'Option 9' },
+      { key: '10', label: 'Option 10' },
+      { key: '11', label: 'Option 11' },
+      { key: '12', label: 'Option 12' }
+    ]
+  }
+];
+
+const RenderLinks: React.FC = () => {
+  return <Menu mode="vertical" items={items} />;
+};
+
+export default React.memo(RenderLinks);

src/layouts/rightRender.tsx

@@ -62,6 +62,7 @@ export function getRightRenderContent(opts: {
       <SelectLang
         style={{ padding: '10px 18px', marginBottom: '20px' }}
         reload={false}
+        mode="vertical"
         icon={
           <span style={{ fontSize: '12px' }}>
             <GlobalOutlined />
@@ -113,18 +114,6 @@ export function getRightRenderContent(opts: {
           history.push('/profile');
         }
       },
-      // {
-      //   key: 'theme',
-      //   label: (
-      //     <>
-      //       <SunOutlined />
-      //       外观
-      //     </>
-      //   ),
-      //   onClick: () => {
-      //     console.log('theme');
-      //   }
-      // },
       {
         key: 'logout',
         label: (
@@ -158,7 +147,9 @@ export function getRightRenderContent(opts: {
     };
   } else {
     // 需要 antd 4.20.0 以上版本
-    dropdownProps = { overlay: <Menu {...langMenu} mode="vertical" /> };
+    dropdownProps = {
+      overlay: <Menu {...langMenu} mode="vertical" />
+    };
   }
 
   return (