1- import { memo , useCallback , useEffect , useState , useMemo } from " react" ;
2- import { Empty , Menu , Spin , type MenuProps } from " antd" ;
3- import { useLocation , useNavigate } from " react-router" ;
4- import { useTranslation } from " react-i18next" ;
5- import { Icon } from " @iconify-icon/react" ;
6- import { useMenuStore , usePreferencesStore } from " @/stores/store" ;
7- import { getIcon , getOpenKeys , searchRoute } from " @/utils/utils" ;
8- import type { RouteItem } from " @/types/route" ;
9- import { useShallow } from " zustand/shallow" ;
10- import { useTabStore } from " @/stores/tabStore" ;
11-
12- type MenuItem = Required < MenuProps > [ " items" ] [ number ] ;
1+ import { memo , useCallback , useEffect , useState , useMemo } from ' react' ;
2+ import { Empty , Menu , Spin , type MenuProps } from ' antd' ;
3+ import { useLocation , useNavigate } from ' react-router' ;
4+ import { useTranslation } from ' react-i18next' ;
5+ import { Icon } from ' @iconify-icon/react' ;
6+ import { useMenuStore , usePreferencesStore } from ' @/stores/store' ;
7+ import { getIcon , getOpenKeys , searchRoute } from ' @/utils/utils' ;
8+ import type { RouteItem } from ' @/types/route' ;
9+ import { useShallow } from ' zustand/shallow' ;
10+ import { useTabStore } from ' @/stores/tabStore' ;
11+
12+ type MenuItem = Required < MenuProps > [ ' items' ] [ number ] ;
1313
1414/**
1515 * 菜单组件
@@ -27,17 +27,15 @@ const MenuComponent = () => {
2727 accordion : state . preferences . navigation . accordion ,
2828 dynamicTitle : state . preferences . app . dynamicTitle ,
2929 collapsed : state . preferences . sidebar . collapsed ,
30- } ) )
30+ } ) ) ,
3131 ) ;
3232 const mode = usePreferencesStore ( ( state ) => {
3333 let mode = state . preferences . theme . mode ;
34- if ( mode === "auto" ) {
35- mode = window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches
36- ? "dark"
37- : "light" ;
34+ if ( mode === 'auto' ) {
35+ mode = window . matchMedia ( '(prefers-color-scheme: dark)' ) . matches ? 'dark' : 'light' ;
3836 }
3937 if ( state . preferences . theme . semiDarkSidebar ) {
40- mode = " dark" ;
38+ mode = ' dark' ;
4139 }
4240 return mode ;
4341 } ) ;
@@ -51,7 +49,7 @@ const MenuComponent = () => {
5149 key ?: React . Key | null ,
5250 icon ?: React . ReactNode ,
5351 children ?: MenuItem [ ] ,
54- type ?: " group"
52+ type ?: ' group' ,
5553 ) : MenuItem => {
5654 return {
5755 key,
@@ -62,37 +60,21 @@ const MenuComponent = () => {
6260 } as MenuItem ;
6361 } ;
6462
65- const deepLoopFloat = useCallback (
66- ( menuList : RouteItem [ ] , newArr : MenuItem [ ] = [ ] ) => {
67- for ( const item of menuList ) {
68- if (
69- item ?. meta ?. menuType === 2 ||
70- item ?. meta ?. menuType === 3 ||
71- item ?. hidden
72- ) {
73- continue ;
74- }
75- if ( ! item ?. children ?. length ) {
76- newArr . push (
77- getItem ( item . meta ?. title , item . path , getIcon ( item . meta ?. icon ) )
78- ) ;
79- continue ;
80- }
81- newArr . push (
82- getItem (
83- item . meta ?. title ,
84- item . path ,
85- getIcon ( item . meta ?. icon ) ,
86- deepLoopFloat ( item . children )
87- )
88- ) ;
63+ const deepLoopFloat = useCallback ( ( menuList : RouteItem [ ] , newArr : MenuItem [ ] = [ ] ) => {
64+ for ( const item of menuList ) {
65+ if ( item ?. meta ?. menuType === 2 || item ?. meta ?. menuType === 3 || item ?. hidden ) {
66+ continue ;
8967 }
90- return newArr ;
91- } ,
92- [ ]
93- ) ;
68+ if ( ! item ?. children ?. length ) {
69+ newArr . push ( getItem ( item . meta ?. title , item . path , getIcon ( item . meta ?. icon ) ) ) ;
70+ continue ;
71+ }
72+ newArr . push ( getItem ( item . meta ?. title , item . path , getIcon ( item . meta ?. icon ) , deepLoopFloat ( item . children ) ) ) ;
73+ }
74+ return newArr ;
75+ } , [ ] ) ;
9476
95- const clickMenu : MenuProps [ " onClick" ] = ( { key } : { key : string } ) => {
77+ const clickMenu : MenuProps [ ' onClick' ] = ( { key } : { key : string } ) => {
9678 // 使用 replace 模式，替换当前历史记录，防止用户通过浏览器后退按钮回到之前的菜单
9779 navigate ( key , { replace : true } ) ;
9880 } ;
@@ -170,15 +152,17 @@ const MenuComponent = () => {
170152 >
171153 { menuList . length > 0 ? (
172154 < Menu
173- style = { {
155+ style = { {
174156 borderRight : 0 ,
175157 height : '100%' ,
176- overflowY : 'auto'
158+ overflowY : 'auto' ,
159+ overflowX : 'hidden' ,
177160 } }
178161 mode = "inline"
179162 theme = { mode }
163+ inlineCollapsed = { collapsed }
180164 selectedKeys = { currentSelectedKeys }
181- openKeys = { collapsed ? [ ] : mergedOpenKeys }
165+ { ... ( collapsed ? { } : { openKeys : mergedOpenKeys } ) }
182166 items = { menuList }
183167 onClick = { clickMenu }
184168 onOpenChange = { onOpenChange }
0 commit comments