完善布局调整

src/components/breadcrumb/index.tsx

@@ -7,9 +7,10 @@ import { useStyle } from './style.ts'
 
 export const PageBreadcrumb = memo((props: BreadcrumbProps & {
   showIcon?: boolean;
+  menusFlatten?: any;
 }) => {
 
-  const { styles }= useStyle()
+  const { styles } = useStyle()
   const nav = useNavigate()
   const { items = [], showIcon = true, ...other } = props
 
@@ -36,13 +37,18 @@ export const PageBreadcrumb = memo((props: BreadcrumbProps & {
               <Dropdown
                       overlayClassName={styles.container}
                       menu={{
-                items, onClick: (e) => {
-                  nav({
-                    to: e.key
-                  })
-                }
-              }}
-                        trigger={[ 'hover' ]}>
+                        items,
+                        onClick: (menu) => {
+                          const info = props.menusFlatten.current?.find(item => item.path === menu.key)
+                          if (info) {
+                            // setOpenKeys([ info.path as string ])
+                            nav({
+                              to: info.path,
+                            })
+                          }
+                        }
+                      }}
+                      trigger={[ 'hover' ]}>
                 {
                   (!route.component || !route.path) ?
                           <a className={'item'}>{renderIcon(route.icon)}<span className={'s-title'}>{route.name}</span>

src/layout/RootLayout.tsx

@@ -18,7 +18,7 @@ import type { MenuDataItem } from '@ant-design/pro-layout/es/typing'
 import { convertToMenu, flattenTree } from '@/utils'
 import { Flex, Menu, Space } from 'antd'
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
-import { If } from 'react-if'
+import { If, Then } from 'react-if'
 
 //根据menuData生成Breadcrumb所需的数据
 const getBreadcrumbData = (menuData: MenuItem[], pathname: string) => {
@@ -26,6 +26,7 @@ const getBreadcrumbData = (menuData: MenuItem[], pathname: string) => {
   const findItem = (menuData: any[], pathname: string) => {
     for (let i = 0; i < menuData.length; i++) {
       if (menuData[i].path === pathname) {
+        menuData[i].label =<span className={'s-title'}>{ menuData[i].name}</span>
         breadcrumbData.push(menuData[i])
         return true
       }
@@ -188,55 +189,58 @@ export default () => {
                   >
 
                     <If condition={childMenuRef.current?.length > 0}>
-                      <Flex className={styles.childMenus}>
-                        {
-                                !collapsed && <div className={styles.childMenuTop}>
-                                  <h2>{currentMenu?.title}</h2>
-                                </div>
-                        }
+                      <Then>
+                        <Flex className={styles.childMenus}>
+                          {
+                                  !collapsed && <div className={styles.childMenuTop}>
+                                    <h2>{currentMenu?.title}</h2>
+                                  </div>
+                          }
 
 
-                        <Menu
-                                mode={'inline'}
-                                inlineCollapsed={collapsed}
-                                selectedKeys={[ location.pathname ]}
-                                openKeys={openMenuKeys}
-                                onOpenChange={(keys) => {
-                                  setOpenKeys(keys)
-                                }}
-                                onClick={(menu) => {
-                                  const info = menusFlatten.current?.find(item => item.path === menu.key)
-                                  if (info) {
-                                    setOpenKeys([ info.path as string ])
-                                    navigate({
-                                      to: info.path,
-                                    })
-                                  }
+                          <Menu
+                                  mode={'inline'}
+                                  inlineCollapsed={collapsed}
+                                  selectedKeys={[ location.pathname ]}
+                                  openKeys={openMenuKeys}
+                                  onOpenChange={(keys) => {
+                                    setOpenKeys(keys)
+                                  }}
+                                  onClick={(menu) => {
+                                    const info = menusFlatten.current?.find(item => item.path === menu.key)
+                                    if (info) {
+                                      // setOpenKeys([ info.path as string ])
+                                      navigate({
+                                        to: info.path,
+                                      })
+                                    }
 
-                                }}
-                                items={convertToMenu((childMenuRef.current || []), (item => {
-                                  return {
-                                    ...item,
-                                    key: item.path,
-                                    label: item.title,
-                                  }
-                                })) as any}
-                                style={!collapsed ? { width: 210 } : {}}
-                        />
-                        <div className={styles.childMenuBottom}
-                             onClick={() => {
-                               setCollapsed(!collapsed)
-                             }}>
-                          {
-                            collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>
-                          }
-                        </div>
-                      </Flex>
+                                  }}
+                                  items={convertToMenu((childMenuRef.current || []), (item => {
+                                    return {
+                                      ...item,
+                                      key: item.path || item.meta.name,
+                                      label: item.title,
+                                    }
+                                  })) as any}
+                                  style={!collapsed ? { width: 210 } : {}}
+                          />
+                          <div className={styles.childMenuBottom}
+                               onClick={() => {
+                                 setCollapsed(!collapsed)
+                               }}>
+                            {
+                              collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>
+                            }
+                          </div>
+                        </Flex>
+                      </Then>
                     </If>
 
                     <Flex flex={1} className={styles.body} aria-description={'main-body'} vertical={true}>
                       <div className={styles.bodyHeader}>
                         <PageBreadcrumb
+                                menusFlatten={menusFlatten}
                                 className={'top-breadcrumb'}
                                 showIcon={false}
                                 items={items}/>

src/pages/system/roles/index.tsx

@@ -3,7 +3,6 @@ import Switch from '@/components/switch'
 import { IMenu } from '@/types/system/menus'
 import {
   ActionType,
-  PageContainer,
   ProColumns,
   ProTable,
   BetaSchemaForm, ProFormColumnsType,
@@ -25,6 +24,7 @@ import { Button, Form, Space, Spin, Table, Tree, Popconfirm } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 import { menuDataAtom } from '@/store/system/menu.ts'
 import { getTreeCheckedStatus } from '@/utils/tree.ts'
+import ListPageLayout from '@/layout/ListPageLayout.tsx'
 
 const MenuTree = (props: any) => {
   const { data: menuList, isLoading: menuLoading } = useAtomValue(menuDataAtom)
@@ -139,7 +139,7 @@ const Roles = memo(() => {
   }, [])
 
   return (
-    <PageContainer breadcrumbRender={false} title={false} className={styles.container}>
+    <ListPageLayout >
       <div className={styles.authHeight}>
         <ProTable
                 rowKey={'id'}
@@ -243,7 +243,7 @@ const Roles = memo(() => {
           return isSuccess
         }}
         columns={columns as ProFormColumnsType[]}/>
-    </PageContainer>
+    </ListPageLayout>
   )
 })
 

src/pages/system/roles/style.ts

@@ -14,8 +14,8 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
         min-width: 500px;
     `
     const authHeight = css`
-        min-height: calc(100vh - 122px);
-        background-color: ${token.colorBgContainer};
+        //min-height: calc(100vh - 122px);
+        //background-color: ${token.colorBgContainer};
     `
 
     return {

src/store/system.ts

@@ -46,6 +46,6 @@ export const getToken = () => {
 }
 
 export const setToken = (token: string) => {
-  console.log('settoken', token)
+  // console.log('settoken', token)
   updateAppData({ token })
 }

src/utils/index.ts

@@ -151,9 +151,13 @@ export const unique = (arr: any[]): any[] => {
 }
 
 export const getValueCount = (obj: any, filterObj: any = {}) => {
+
   // 获取对象中所有值的数量
   let count = 0
   for (const key in obj) {
+    if (['page', 'pageSize', 'pageIndex'].includes(key)){
+      continue
+    }
     if (Object.prototype.hasOwnProperty.call(obj, key) && obj[key]) {
       //如果是数组，则必须长度大于0
       if (!filterObj?.[key]) {