diff --git a/src/common/components/layout/CustomHeader.tsx b/src/common/components/layout/CustomHeader.tsx index 5af5c2f..f3106ae 100644 --- a/src/common/components/layout/CustomHeader.tsx +++ b/src/common/components/layout/CustomHeader.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Layout, Dropdown } from 'antd'; import type { MenuProps } from 'antd'; +import { history } from '@umijs/max'; import AvatarProps from './AvatarProps'; import { useMyState } from '@/common'; @@ -13,6 +14,12 @@ interface CustomHeaderProps { export const CustomHeader: React.FC = ({ collapsed, toggle }) => { const { snap } = useMyState(); + const { pathname } = history.useLocation(); + + // 在登录页面不显示header + if (pathname === '/login') { + return null; + } const menuItems: MenuProps['items'] = [ { diff --git a/src/common/components/layout/MyRootContainer.tsx b/src/common/components/layout/MyRootContainer.tsx index 0dffb75..177e595 100644 --- a/src/common/components/layout/MyRootContainer.tsx +++ b/src/common/components/layout/MyRootContainer.tsx @@ -1,6 +1,7 @@ import { ConfigProvider } from 'antd'; import { ReactNode } from 'react'; import { MyLoading } from './MyLoading'; +import { CustomHeader } from './CustomHeader'; export function MyRootContainer({ children }: { children: ReactNode }) { return ( @@ -16,6 +17,7 @@ export function MyRootContainer({ children }: { children: ReactNode }) { }} > + {children} ); diff --git a/src/common/libs/umi/layoutConfig.tsx b/src/common/libs/umi/layoutConfig.tsx index 16872e7..4697240 100644 --- a/src/common/libs/umi/layoutConfig.tsx +++ b/src/common/libs/umi/layoutConfig.tsx @@ -44,11 +44,8 @@ export const LayoutConfig: RuntimeConfig['layout'] = () => { // 确保header显示 header: true, - // 自定义Header渲染 - 尝试不同的方式 - // headerRender: () => , - - // 使用headerContentRender来渲染header内容 - headerContentRender: () => , + // 自定义Header渲染 + headerRender: false, // 禁用默认header,我们完全自定义 // 新增:自定义Logo渲染 logoRenderer: (collapsed: boolean) => { diff --git a/src/global.less b/src/global.less index 22bb80a..c44702b 100644 --- a/src/global.less +++ b/src/global.less @@ -53,13 +53,26 @@ body { // 自定义Header样式 .custom-header { + position: fixed !important; + top: 0 !important; + right: 0 !important; + left: 220px !important; /* 侧边栏宽度 */ + z-index: 1000 !important; display: flex !important; justify-content: space-between; align-items: center; + height: 64px !important; padding: 0 24px !important; background: #ffffff !important; border-bottom: 1px solid #f0f0f0; line-height: 64px; + box-shadow: 0 2px 8px rgba(0,0,0,0.06); +} + +// 当侧边栏折叠时,调整header的left值 +.ant-layout-sider-collapsed ~ .ant-layout .custom-header, +.ant-layout-sider-collapsed + .ant-layout .custom-header { + left: 64px !important; } .custom-header .header-left { @@ -82,9 +95,14 @@ body { opacity: 0.8; } -// 内容区域 +// 内容区域 - 添加顶部padding避免被固定header遮挡 .ant-pro-grid-content { padding: 24px; + padding-top: 88px; /* 64px header + 24px extra */ +} + +.ant-pro-page-container { + padding-top: 88px; } // 页面容器卡片