Browse Source

完善布局调整

main
dark 5 months ago
parent
commit
b4944d2db2
  1. 12
      src/components/breadcrumb/index.tsx
  2. 10
      src/layout/RootLayout.tsx
  3. 6
      src/pages/system/roles/index.tsx
  4. 4
      src/pages/system/roles/style.ts
  5. 2
      src/store/system.ts
  6. 4
      src/utils/index.ts

12
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,11 +37,16 @@ export const PageBreadcrumb = memo((props: BreadcrumbProps & {
<Dropdown
overlayClassName={styles.container}
menu={{
items, onClick: (e) => {
items,
onClick: (menu) => {
const info = props.menusFlatten.current?.find(item => item.path === menu.key)
if (info) {
// setOpenKeys([ info.path as string ])
nav({
to: e.key
to: info.path,
})
}
}
}}
trigger={[ 'hover' ]}>
{

10
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,6 +189,7 @@ export default () => {
>
<If condition={childMenuRef.current?.length > 0}>
<Then>
<Flex className={styles.childMenus}>
{
!collapsed && <div className={styles.childMenuTop}>
@ -207,7 +209,7 @@ export default () => {
onClick={(menu) => {
const info = menusFlatten.current?.find(item => item.path === menu.key)
if (info) {
setOpenKeys([ info.path as string ])
// setOpenKeys([ info.path as string ])
navigate({
to: info.path,
})
@ -217,7 +219,7 @@ export default () => {
items={convertToMenu((childMenuRef.current || []), (item => {
return {
...item,
key: item.path,
key: item.path || item.meta.name,
label: item.title,
}
})) as any}
@ -232,11 +234,13 @@ export default () => {
}
</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}/>

6
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>
)
})

4
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 {

2
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 })
}

4
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]) {

Loading…
Cancel
Save