update

src/modules/layout/index.tsx

@@ -1,7 +1,7 @@
 import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
 import { Tooltip } from '@mui/material';
-import { Outlet } from 'react-router-dom';
-import { LayoutMenu } from './Menu';
+import { Outlet, useNavigate } from 'react-router-dom';
+import { LayoutMenu, useQuickMenu } from './Menu';
 import { useLayoutStore, usePlatformStore } from './store';
 import { useShallow } from 'zustand/react/shallow';
 import { useEffect, useLayoutEffect, useState } from 'react';
@@ -46,6 +46,8 @@ export const LayoutMain = (props: LayoutMainProps) => {
     }),
   );
   const { isMac, mount, isElectron } = platformStore;
+  const navigate = useNavigate();
+  const quickMenu = useQuickMenu();
 
   useLayoutEffect(() => {
     platformStore.init();
@@ -88,7 +90,26 @@ export const LayoutMain = (props: LayoutMainProps) => {
           <MenuOutlined />
         </IconButton>
         <div className='flex grow justify-between pl-4 items-center'>
-          {props.title}
+          <div className='flex items-center gap-2'>
+            <div className='text-xl font-bold'>{props.title}</div>
+            <div className='ml-4 flex items-center gap-2 text-sm '>
+              {quickMenu.map((item, index) => {
+                const isActive = location.pathname.includes(item.link);
+                return (
+                  <div
+                    key={index}
+                    className={clsx('flex items-center gap-2 px-1', isActive && 'border border-white')}
+                    onClick={() => {
+                      navigate(item.link);
+                    }}>
+                    <Tooltip title={item.title}>
+                      <div className='cursor-pointer'>{item.icon}</div>
+                    </Tooltip>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
           <div className='mr-4 flex gap-4 items-center no-drag'>
             <div className='group relative'>
               <IconButton>