diff --git a/src/common/libs/umi/layoutConfig.tsx b/src/common/libs/umi/layoutConfig.tsx index a30a52a..588563c 100644 --- a/src/common/libs/umi/layoutConfig.tsx +++ b/src/common/libs/umi/layoutConfig.tsx @@ -46,12 +46,16 @@ export const LayoutConfig: RuntimeConfig['layout'] = () => { // 隐藏面包屑导航 breadcrumb: { props: { style: { display: 'none' } } }, - // 自定义Header渲染 - 只显示右侧用户信息,不显示面包屑 - headerRender: () => { + // 自定义Header渲染 - 右侧显示用户信息 + headerRender: (props, defaultDom) => { return ( -
+
+ {/* 左侧可以为空或显示其他内容 */} +
{/* 右侧添加用户信息 */} - +
+ +
); }, diff --git a/src/global.less b/src/global.less index eda2900..154e60b 100644 --- a/src/global.less +++ b/src/global.less @@ -92,6 +92,24 @@ div[class*="page-container-header"], align-items: center !important; } +// 确保UmiJS Header固定在顶部 +.ant-pro-header, +.ant-layout-header { + position: fixed !important; + top: 0 !important; + right: 0 !important; + left: 220px !important; + z-index: 1000 !important; + width: auto !important; + background: #ffffff !important; + border-bottom: 1px solid #f0f0f0 !important; +} + +.ant-layout-sider-collapsed ~ .ant-layout .ant-pro-header, +.ant-layout-sider-collapsed + .ant-layout .ant-pro-header { + left: 64px !important; +} + // Tabs样式优化 - 减小高度 .ant-pro-page-container-header .tabs-header-only, div[class*="page-container-header"] .tabs-header-only { @@ -162,8 +180,13 @@ div[class*="page-container-header"] .ant-tabs-ink-bar { } .ant-pro-page-container-children-content { - padding-top: 0 !important; padding: 24px !important; + padding-top: 0 !important; +} + +// 确保主内容区域正确的padding +.ant-layout-content { + padding-top: 120px !important; } .custom-header .header-left {