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<CustomHeaderProps> = ({ collapsed, toggle }) => {
   const { snap } = useMyState();
+  const { pathname } = history.useLocation();
+
+  // 在登录页面不显示header
+  if (pathname === '/login') {
+    return null;
+  }
 
   const menuItems: MenuProps['items'] = [
     {

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 }) {
       }}
     >
       <MyLoading />
+      <CustomHeader />
       {children}
     </ConfigProvider>
   );

src/common/libs/umi/layoutConfig.tsx

@@ -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) => {

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;
 }
 
 // 页面容器卡片