修改菜单布局

src/components/breadcrumb/index.tsx

@@ -3,11 +3,13 @@ import { Link, useNavigate } from '@tanstack/react-router'
 import { DownOutlined } from '@ant-design/icons'
 import { getIcon } from '@/components/icon'
 import { memo, useCallback } from 'react'
+import { useStyle } from './style.ts'
 
 export const PageBreadcrumb = memo((props: BreadcrumbProps & {
   showIcon?: boolean;
 }) => {
 
+  const { styles }= useStyle()
   const nav = useNavigate()
   const { items = [], showIcon = true, ...other } = props
 
@@ -27,11 +29,13 @@ export const PageBreadcrumb = memo((props: BreadcrumbProps & {
         return {
           ...item,
           key: item.path || item.name,
-          label: item.name,
+          label: <span className={'s-title'}>{item.name}</span>,
         }
       })
       return (
-        <Dropdown menu={{
+              <Dropdown
+                      overlayClassName={styles.container}
+                      menu={{
                 items, onClick: (e) => {
                   nav({
                     to: e.key
@@ -41,11 +45,12 @@ export const PageBreadcrumb = memo((props: BreadcrumbProps & {
                         trigger={[ 'hover' ]}>
                 {
                   (!route.component || !route.path) ?
-              <a className={'item'}>{renderIcon(route.icon)}<span>{route.name}</span>
+                          <a className={'item'}>{renderIcon(route.icon)}<span className={'s-title'}>{route.name}</span>
                             <DownOutlined/></a>
                           : <Link to={`/${route.path}`}
                                   preload={false}
-                      className={'item'}>{renderIcon(route.icon)}<span>{route.name}</span>
+                                  className={'item'}>{renderIcon(route.icon)}<span
+                                  className={'s-title'}>{route.name}</span>
                             <DownOutlined/>
                           </Link>
                 }
@@ -56,11 +61,11 @@ export const PageBreadcrumb = memo((props: BreadcrumbProps & {
     }
 
     return isLast || !route.path ? (
-      <span className={'item'}>{renderIcon(route.icon)}<span>{route.name}</span></span>
+            <span className={'item'}>{renderIcon(route.icon)}<span className={'s-title'}>{route.name}</span></span>
     ) : (
             <Link to={`/${route.path}`}
                   preload={false}
-            className={'item'}>{renderIcon(route.icon)}<span>{route.name}</span></Link>
+                  className={'item'}>{renderIcon(route.icon)}<span className={'s-title'}>{route.name}</span></Link>
     )
   }
 

src/components/breadcrumb/style.ts

@@ -0,0 +1,15 @@
+import { createStyles } from '@/theme'
+
+export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => {
+  const prefix = `${prefixCls}-${token?.proPrefix}-header-breadcrumb`
+
+  const container = css`
+    .ant-dropdown-menu-title-content {
+      padding-inline-start: 10px;
+    }
+  `
+
+  return {
+    container: cx(prefix, props?.className, container)
+  }
+}) as any

src/global.d.ts

@@ -38,8 +38,8 @@ export type IApiResult<T = any> = {
 }
 
 export type TreeItem<T> = {
-  [key: keyof T]: T[keyof T];
   children?: TreeItem<T>[];
+  [key: keyof T]: T[keyof T];
 }
 
 export type FlattenData<T> = TreeItem<T> & {
@@ -47,6 +47,8 @@ export type FlattenData<T> = TreeItem<T> & {
   title?: string,
   label?: string,
   level?: number,
+
+  [key: keyof T]: T[keyof T];
 }
 
 export type FiledNames = {

src/layout/RootLayout.tsx

@@ -9,12 +9,13 @@ import { ProConfigProvider, ProLayout, } from '@ant-design/pro-components'
 import { zhCNIntl, enUSIntl } from '@ant-design/pro-provider/es/intl'
 import { CatchBoundary, Link, Outlet } from '@tanstack/react-router'
 import { ConfigProvider } from '@/components/config-provider'
-import { useState } from 'react'
-import defaultProps from './_defaultProps'
+import { useEffect, useRef, useState } from 'react'
 import { useAtomValue } from 'jotai'
 import { useStyle } from '@/layout/style.ts'
 import zh from 'antd/locale/zh_CN'
 import en from 'antd/locale/en_US'
+import type { MenuDataItem } from '@ant-design/pro-layout/es/typing'
+import { flattenTree } from '@/utils'
 
 //根据menuData生成Breadcrumb所需的数据
 const getBreadcrumbData = (menuData: MenuItem[], pathname: string) => {
@@ -46,6 +47,29 @@ export default () => {
   const items = getBreadcrumbData(menuData, location.pathname)
   const [ pathname, setPathname ] = useState(location.pathname)
 
+  const menusFlatten = useRef<MenuItem[]>()
+  if (!menusFlatten.current) {
+    menusFlatten.current = flattenTree<MenuItem>(menuData, { key: 'id', title: 'name' })
+  }
+  const [ rootMenuKeys, setRootMenuKeys ] = useState<string[]>(() => {
+    const item = menusFlatten.current?.find(item => item.path === location.pathname)
+    return item ? item.parentName : []
+  })
+
+  const childMenuRef = useRef<MenuItem[]>([])
+
+  childMenuRef.current = menuData.find(item => {
+    return item.key === rootMenuKeys?.[0]
+  })?.children || []
+
+  useEffect(() => {
+    const item = menusFlatten.current?.find(item => item.path === location.pathname)
+    if (item && item.key !== rootMenuKeys?.[0]) {
+      setRootMenuKeys(item.parentName)
+    }
+  }, [ location.pathname ])
+
+
   return (
           <div
                   className={styles.container}
@@ -67,29 +91,61 @@ export default () => {
                         }}
                 >
                   <ProLayout
+                          token={{
+                            header: {
+                              colorBgMenuItemSelected: 'rgba(0,0,0,0.04)',
+                            },
+                          }}
+                          fixedHeader={true}
                           headerContentRender={() => <PageBreadcrumb
                                   className={'top-breadcrumb'}
                                   showIcon={false}
                                   items={items}/>}
                           title="Crazy Pro"
-              {...defaultProps}
-              route={{
-                path: '/',
-                routes: menuData
+                          layout={'mix'}
+                          fixSiderbar={true}
+                          siderWidth={100}
+                          collapsedButtonRender={false}
+                          // collapsed={false}
+                          postMenuData={() => {
+                            return menuData.map(item => ({
+                              ...item,
+                              children: [],
+                            })) as any
                           }}
-              location={{
+                          route={
+                            {
+                              path: '/',
+                              routes: menuData.map(item => ({
+                                ...item,
+                                // path: item.path ?? `/${item.key}`,
+                                children: [],
+                                // routes: undefined
+                              }))
+                            }
+                          }
+                          location={
+                            {
                               pathname,
-              }}
-              token={{
-                header: {
-                  colorBgMenuItemSelected: 'rgba(0,0,0,0.04)',
-                },
-              }}
+                            }
+                          }
+
                           menu={{
                             collapsedShowGroupTitle: true,
-                loading: isLoading,
-              }}
 
+                          }}
+                          menuItemRender={(item: MenuDataItem) => {
+                            return <span style={{ userSelect: 'none' }} onClick={() => {
+                              setRootMenuKeys([ (item as any).key || 'dashboard' ])
+                              setPathname(item.path || '/dashboard')
+                            }}
+                            >
+                  <Link to={item.path} className={'menu-link'} target={item.type === 'url' ? '_blank' : '_self'}>
+                    <span>{item.icon}</span>
+                    <span>{item.name}</span>
+                  </Link>
+                </span>
+                          }}
                           avatarProps={{
                             // src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
                             render: () => {
@@ -106,13 +162,40 @@ export default () => {
                             ]
                           }}
                           menuProps={{
+                            className: styles.mySiderMenu,
+                            selectedKeys: rootMenuKeys,
+                          }}
+                          // navTheme={'light'}
+                          contentStyle={{ paddingBlock: 0, paddingInline: 0 }}
+                  >
+                    <ProLayout
+                            className={styles.mySider}
+                            headerRender={false}
+                            hasSiderMenu={false}
+                            postMenuData={() => {
+                              return (childMenuRef.current || []) as any
+                            }}
+                            route={{
+                              path: '/',
+                              routes: menuData
+                            }}
+                            location={{
+                              pathname,
+                            }}
+                            token={{
+                              header: {
+                                colorBgMenuItemSelected: 'rgba(0,0,0,0.04)',
+                              },
+                            }}
+                            menuProps={{
                               className: styles.sideMenu,
                             }}
-              menuRender={(_, defaultDom) => (
-                <span style={{ userSelect: 'none' }}>
-                  {defaultDom}
-                </span>
-              )}
+                            menu={{
+                              hideMenuWhenCollapsed: false,
+                              // collapsedShowGroupTitle: true,
+                              loading: isLoading,
+                            }}
+                            menuRender={childMenuRef.current?.length ? undefined : false}
                             menuItemRender={(item, dom) => {
                               return <span style={{ userSelect: 'none' }} onClick={() => {
                                 setPathname(item.path || '/dashboard')
@@ -127,14 +210,15 @@ export default () => {
                               'layout': 'mix',
                               'navTheme': 'light',
                               'contentWidth': 'Fluid',
-                'fixSiderbar': true,
+                              'fixSiderbar': false,
                               // 'colorPrimary': '#1677FF',
-                'siderMenuType': 'group',
+                              // 'siderMenuType': 'group',
                               // layout: 'side',
                             }}
                     >
                       <Outlet/>
                     </ProLayout>
+                  </ProLayout>
                 </ConfigProvider>
               </ProConfigProvider>
             </CatchBoundary>

src/layout/style.ts

@@ -13,7 +13,7 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
       }
 
       .ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item{
-        padding-inline-start: 0;
+        //padding-inline-start: 0;
       }
       
     `,
@@ -25,10 +25,50 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
 
   const sideMenu = css`
     .ant-pro-base-menu-inline-group .ant-menu-item-group-title .anticon {
-      margin-inline-end: 0;
+      //margin-inline-end: 0;
     }
     
   `
+
+  const mySider = css`
+    .ant-layout-sider-children{
+      //background-color: #001529; 
+      padding-block-start: 10px!important;
+    }
+    .ant-menu-inline-collapsed >.ant-menu-item{
+      padding-inline: calc(50% - 19px - 4px);
+    }
+  `
+  const mySiderMenu = css`
+    
+    padding-top: 10px;
+    
+    .ant-menu-item{
+      padding-inline: unset;
+      padding-left: unset!important;
+      flex-direction: column;
+      height: 64px;
+      line-height: 64px;
+    }
+    .ant-menu-item-selected{
+      background-color: rgb(210, 229, 255);
+      color: rgb(37, 59, 125);
+    }
+    .ant-menu-item >.ant-menu-title-content{
+      text-overflow: unset!important;
+      overflow: unset!important;
+      flex: auto!important;
+      align-content: center;
+      
+      .menu-link{
+        display: flex; 
+        flex-direction: column;
+        line-height: normal;
+        align-items: center;
+      }
+    }
+  `
+
   const box = css`
     flex: 1;
     background: ${token.colorBgContainer};
@@ -44,6 +84,8 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
     authHeight,
     pageContext,
     sideMenu,
+    mySider,
+    mySiderMenu,
   }
 
 })

src/routes.tsx

@@ -228,7 +228,26 @@ const generateDynamicRoutes = (menuData: MenuItem[], parentRoute: AnyRoute) => {
     return createRoute({
       ...options,
       // @ts-ignore fix import
-      component: lazyRouteComponent(() => (modules[`./pages/${component}/index.tsx`] || modules[`./pages/${component}/index.jsx`])?.()),
+      component: lazyRouteComponent(() => {
+
+        //处理最后可能包含index || index.tsx || index.jsx
+        if (component.endsWith('.tsx')) {
+          component = component.replace(/\.tsx$/, '')
+        }
+        if (component.endsWith('.jsx')) {
+          component = component.replace(/\.jsx$/, '')
+        }
+        if (component.endsWith('/index')) {
+          component = component.replace(/\/index$/, '')
+        }
+
+        const module = modules[`./pages/${component}/index.tsx`] || modules[`./pages/${component}/index.jsx`]
+        if (!module) {
+          return NotFound
+        }
+
+        return module()
+      }),
       notFoundComponent: NotFound,
     })
   }

src/store/system/user.ts

@@ -63,7 +63,7 @@ export const userMenuDataAtom = atomWithQuery<IApiResult<IPageResult<System.IMen
         return await systemServ.user.menus()
     },
     select: (data) => {
-        return formatMenuData(data.data.rows as any ?? [])
+        return formatMenuData(data.data.rows as any ?? [], [])
     },
     retry: false,
 }))

src/types/system/menus.d.ts

@@ -15,6 +15,7 @@ export interface IMenu {
     sort: number,
     code: string,
     name: string,
+    parentName: string[],
     title: string,
     component: string,
     icon: string | any,

src/utils/index.ts

@@ -1,5 +1,5 @@
 import { IMenu } from '@/types/system/menus'
-import { FiledNames, FlattenData, MenuItem, TreeItem } from '@/global'
+import { FiledNames, FlattenData, MenuItem } from '@/global'
 import { getIcon } from '@/components/icon'
 import { TreeDataNode } from 'antd'
 
@@ -7,7 +7,7 @@ import { TreeDataNode } from 'antd'
 export const isDev = import.meta.env.MODE === 'development'
 
 // 格式化菜单数据, 把children转换成routes
-export const formatMenuData = (data: IMenu[]) => {
+export const formatMenuData = (data: IMenu[], parentName: string[]) => {
   const result: MenuItem[] = []
   for (const item of data) {
     if (item.icon && typeof item.icon === 'string') {
@@ -17,7 +17,8 @@ export const formatMenuData = (data: IMenu[]) => {
       result.push({
         ...item,
         key: item.name,
-        name: item.title
+        name: item.title,
+        parentName,
       })
     } else {
       const { children, name, ...other } = item
@@ -25,8 +26,8 @@ export const formatMenuData = (data: IMenu[]) => {
         ...other,
         key: name,
         name: other.title,
-        children: formatMenuData(children),
-        routes: formatMenuData(children),
+        children: formatMenuData(children, [ ...parentName, name ]),
+        routes: formatMenuData(children, [ ...parentName, name ]),
       })
 
     }
@@ -65,14 +66,15 @@ const defaultTreeFieldNames: FiledNames = {
   children: 'children'
 }
 
-export function flattenTree<T>(tree: TreeItem<T>[], fieldNames?: FiledNames) {
-  const result: FlattenData<T>[] = []
+export function flattenTree<T>(tree: T[], fieldNames?: FiledNames) {
+  const result: T[] = []
 
-  if (!fieldNames) {
-    fieldNames = defaultTreeFieldNames
+  fieldNames = {
+    ...defaultTreeFieldNames,
+    ...fieldNames
   }
 
-  function flattenRecursive(item: TreeItem<T>, level: number, fieldNames: FiledNames) {
+  function flattenRecursive(item: T, level: number, fieldNames: FiledNames) {
 
     const data: FlattenData<T> = {
       ...item,
@@ -85,7 +87,7 @@ export function flattenTree<T>(tree: TreeItem<T>[], fieldNames?: FiledNames) {
       children.forEach((child) => flattenRecursive(child, level + 1, fieldNames))
       data.children = children
     }
-    result.push(data)
+    result.push(data as T)
   }
 
   tree.forEach((item) => flattenRecursive(item, 0, fieldNames))