From 4a388992cc98efd2ef13bcb96f3165a9e48c6573 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 30 Mar 2026 16:53:18 +0800 Subject: [PATCH] refactor: use UmiJS built-in header instead of CustomHeader --- .../components/layout/MyPageContainer.tsx | 50 ++++++++++--------- .../components/layout/MyRootContainer.tsx | 2 - src/common/libs/umi/layoutConfig.tsx | 17 ++++++- src/global.less | 44 ++++------------ 4 files changed, 52 insertions(+), 61 deletions(-) diff --git a/src/common/components/layout/MyPageContainer.tsx b/src/common/components/layout/MyPageContainer.tsx index d14142b..ce50678 100644 --- a/src/common/components/layout/MyPageContainer.tsx +++ b/src/common/components/layout/MyPageContainer.tsx @@ -357,30 +357,34 @@ export function MyPageContainer({ ({ - key: tab.key, - label: tab.label, - closable: tab.closable, - }))} - style={{ - marginTop: 6, - marginBottom: 0, - }} - className="tabs-header-only" - /> - ), - style: { backgroundColor: '#FFF' }, + title: false, + style: { backgroundColor: '#F00' }, }} + // header={{ + // title: ( + // ({ + // key: tab.key, + // label: tab.label, + // closable: tab.closable, + // }))} + // style={{ + // marginTop: 6, + // marginBottom: 0, + // }} + // className="tabs-header-only" + // /> + // ), + // style: { backgroundColor: '#F00', padding: '64px 15px 0 15px' }, + // }} token={{ paddingBlockPageContainerContent: 0, paddingInlinePageContainerContent: 0, diff --git a/src/common/components/layout/MyRootContainer.tsx b/src/common/components/layout/MyRootContainer.tsx index 177e595..0dffb75 100644 --- a/src/common/components/layout/MyRootContainer.tsx +++ b/src/common/components/layout/MyRootContainer.tsx @@ -1,7 +1,6 @@ import { ConfigProvider } from 'antd'; import { ReactNode } from 'react'; import { MyLoading } from './MyLoading'; -import { CustomHeader } from './CustomHeader'; export function MyRootContainer({ children }: { children: ReactNode }) { return ( @@ -17,7 +16,6 @@ export function MyRootContainer({ children }: { children: ReactNode }) { }} > - {children} ); diff --git a/src/common/libs/umi/layoutConfig.tsx b/src/common/libs/umi/layoutConfig.tsx index 4697240..35db203 100644 --- a/src/common/libs/umi/layoutConfig.tsx +++ b/src/common/libs/umi/layoutConfig.tsx @@ -44,8 +44,21 @@ export const LayoutConfig: RuntimeConfig['layout'] = () => { // 确保header显示 header: true, - // 自定义Header渲染 - headerRender: false, // 禁用默认header，我们完全自定义 + // 自定义Header渲染 - 使用UmiJS自带header并添加用户信息 + headerRender: (props, defaultDom) => { + return ( +
+ {/* 左侧保留默认内容 */} +
+ {defaultDom} +
+ {/* 右侧添加用户信息 */} +
+ +
+
+ ); + }, // 新增：自定义Logo渲染 logoRenderer: (collapsed: boolean) => { diff --git a/src/global.less b/src/global.less index 41f46b7..15e934c 100644 --- a/src/global.less +++ b/src/global.less @@ -51,47 +51,23 @@ body { display: none; } -// 自定义Header样式 -.custom-header { - position: fixed !important; - top: 0 !important; - right: 0 !important; - left: 220px !important; /* 侧边栏宽度 */ - z-index: 1001 !important; /* 提高z-index确保在最上层 */ - 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; -} - -// PageContainer Header样式 - 固定悬浮在CustomHeader下方 +// PageContainer Header样式 - 固定悬浮在UmiJS Header下方 div[class*="page-container-header"], .ant-pro-page-container > div[class*="page-container-header"], .ant-pro-page-container-header { position: fixed !important; - top: 64px !important; /* CustomHeader的高度 */ + top: 64px !important; /* UmiJS Header的高度 */ right: 0 !important; left: 220px !important; /* 侧边栏宽度 */ - z-index: 1000 !important; /* 低于CustomHeader */ + z-index: 999 !important; margin: 0 !important; - padding: 6px 24px !important; /* 减小padding */ + padding: 6px 24px !important; background: #ffffff !important; border-bottom: 1px solid #f0f0f0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important; height: auto !important; - min-height: 36px !important; /* 减小最小高度 */ - max-height: 48px !important; /* 减小最大高度 */ + min-height: 36px !important; + max-height: 48px !important; display: flex !important; align-items: center !important; } @@ -107,7 +83,7 @@ div[class*="page-container-header"], top: 64px !important; right: 0 !important; left: 220px !important; - z-index: 1000 !important; + z-index: 999 !important; margin: 0 !important; padding: 6px 24px !important; min-height: 36px !important; @@ -148,12 +124,12 @@ div[class*="page-container-header"] .ant-tabs-nav-list { .ant-pro-page-container-header .ant-tabs-tab, div[class*="page-container-header"] .ant-tabs-tab { - padding: 4px 10px !important; /* 减小padding */ + padding: 4px 10px !important; background: #f5f5f5; border-radius: 4px; margin-right: 4px; transition: all 0.2s; - height: 26px !important; /* 进一步减小标签高度 */ + height: 26px !important; line-height: 26px !important; font-size: 13px; display: inline-flex !important; @@ -174,7 +150,7 @@ div[class*="page-container-header"] .ant-tabs-ink-bar { // 内容区域 - 调整padding以适应固定的header .ant-pro-grid-content { padding: 24px; - padding-top: 120px; /* 64px CustomHeader + 48px tabs header + 8px */ + padding-top: 120px; /* 64px UmiJS Header + 48px tabs header + 8px */ } .ant-pro-page-container {