fix: add fixed CustomHeader in root container with top:0 positioning
This commit is contained in:
parent
5de714572a
commit
b5ab96874b
@ -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<CustomHeaderProps> = ({ collapsed, toggle }) => {
|
||||
const { snap } = useMyState();
|
||||
const { pathname } = history.useLocation();
|
||||
|
||||
// 在登录页面不显示header
|
||||
if (pathname === '/login') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const menuItems: MenuProps['items'] = [
|
||||
{
|
||||
|
||||
@ -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 }) {
|
||||
}}
|
||||
>
|
||||
<MyLoading />
|
||||
<CustomHeader />
|
||||
{children}
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
@ -44,11 +44,8 @@ export const LayoutConfig: RuntimeConfig['layout'] = () => {
|
||||
// 确保header显示
|
||||
header: true,
|
||||
|
||||
// 自定义Header渲染 - 尝试不同的方式
|
||||
// headerRender: () => <CustomHeader />,
|
||||
|
||||
// 使用headerContentRender来渲染header内容
|
||||
headerContentRender: () => <CustomHeader />,
|
||||
// 自定义Header渲染
|
||||
headerRender: false, // 禁用默认header,我们完全自定义
|
||||
|
||||
// 新增:自定义Logo渲染
|
||||
logoRenderer: (collapsed: boolean) => {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
// 页面容器卡片
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user