pro/src/layout/RootLayout.tsx

import PageBreadcrumb from '@/components/breadcrumb'
import ErrorPage from '@/components/error/error.tsx'
import SelectLang from '@/components/select-lang'
import { useTranslation } from '@/i18n.ts'
import { MenuItem } from '@/types'
import { ProConfigProvider, ProLayout, } from '@ant-design/pro-components'
import { CatchBoundary, Link, Outlet, useRouteContext } from '@tanstack/react-router'
import { ConfigProvider, Dropdown } from 'antd'
import { useState } from 'react'
import Icon from '../components/icon'
import defaultProps from './_defaultProps'


//根据menuData生成Breadcrumb所需的数据
const getBreadcrumbData = (menuData: MenuItem[], pathname: string) => {
  const breadcrumbData: any[] = []
  const findItem = (menuData: any[], pathname: string) => {
    for (let i = 0; i < menuData.length; i++) {
      if (menuData[i].path === pathname) {
        breadcrumbData.push(menuData[i])
        return true
      }
      if (menuData[i].children) {
        if (findItem(menuData[i].children, pathname)) {
          breadcrumbData.push(menuData[i])
          return true
        }
      }
    }
    return false
  }
  findItem(menuData, pathname)
  return breadcrumbData.reverse()
}

export default () => {

  const { t } = useTranslation()
  const { menuData } = useRouteContext({
    from: undefined,
    strict: false,
    select: (state) => state
  })

  const items = getBreadcrumbData(menuData, location.pathname)

  const [ pathname, setPathname ] = useState(location.pathname)

  return (
    <div
      id="crazy-pro-layout"
      style={{
        height: '100vh',
        // overflow: 'auto',
      }}
    >
      <CatchBoundary
        getResetKey={() => 'reset-page'}
        errorComponent={ErrorPage}
      >
        <ProConfigProvider hashed={false}>
          <ConfigProvider
            getTargetContainer={() => {
              return document.getElementById('crazy-pro-layout') || document.body
            }}
          >
            <ProLayout
              headerContentRender={() => <PageBreadcrumb
                className={'top-breadcrumb'}
                showIcon={false}
                items={items}/>}
              title="Crazy Pro"
              {...defaultProps}
              route={{
                path: '/',
                routes: menuData
              }}
              location={{
                pathname,
              }}
              token={{
                header: {
                  colorBgMenuItemSelected: 'rgba(0,0,0,0.04)',
                },
              }}
              menu={{
                collapsedShowGroupTitle: true,
              }}
              avatarProps={{
                src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
                size: 'small',
                title: '管理员',
                render: (_, dom) => {
                  return (
                    <Dropdown
                      menu={{
                        items: [
                          {
                            key: 'logout',
                            icon: <Icon type={'Logout'}/>,
                            label: t('app.header.logout'),
                          },
                        ],
                      }}
                    >
                      {dom}
                    </Dropdown>
                  )
                },
              }}
              actionsRender={(props) => {
                if (props.isMobile) return []
                if (typeof window === 'undefined') return []
                return [
                  <SelectLang/>
                ]
              }}
              menuRender={(_, defaultDom) => (
                <>
                  {defaultDom}
                </>
              )}
              menuItemRender={(item, dom) => {
                return <div onClick={() => {
                  setPathname(item.path || '/welcome')
                }}
                >
                  <Link to={item.path} target={item.type === 3 ? '_blank' : '_self'}>
                    {dom}
                  </Link>
                </div>
              }}
              {...{
                'layout': 'mix',
                'navTheme': 'light',
                'contentWidth': 'Fluid',
                'fixSiderbar': true,
                'colorPrimary': '#1677FF',
                'siderMenuType': 'group',
                // layout: 'side',
              }}
            >
              <Outlet/>
            </ProLayout>
          </ConfigProvider>
        </ProConfigProvider>
      </CatchBoundary>
    </div>
  )
}