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 (
-        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', paddingRight: 24, height: '100%' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', paddingRight: 24, paddingLeft: 24 }}>
+          {/* 左侧可以为空或显示其他内容 */}
+          <div style={{ flex: 1 }}></div>
           {/* 右侧添加用户信息 */}
-          <AvatarProps user={snap.session.user} />
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <AvatarProps user={snap.session.user} />
+          </div>
         </div>
       );
     },

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 {