pay/pay-admin
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: optimize layout right side structure with fixed header and content

Browse Source
This commit is contained in:
Your Name 2026-03-30 17:16:08 +08:00
parent 42612b21ee
commit 2242e7802b
2 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/common/libs/umi/layoutConfig.tsx
View File

@ -46,12 +46,16 @@ export const LayoutConfig: RuntimeConfig['layout'] = () => {
// 隐藏面包屑导航 // 隐藏面包屑导航
breadcrumb: { props: { style: { display: 'none' } } }, breadcrumb: { props: { style: { display: 'none' } } },
// 自定义Header渲染 - 只显示右侧用户信息，不显示面包屑 // 自定义Header渲染 - 右侧显示用户信息
headerRender: () => { headerRender: (props, defaultDom) => {
return ( 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> </div>
); );
}, },

25
src/global.less
View File

@ -92,6 +92,24 @@ div[class*="page-container-header"],
align-items: center !important; 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样式优化 - 减小高度 // Tabs样式优化 - 减小高度
.ant-pro-page-container-header .tabs-header-only, .ant-pro-page-container-header .tabs-header-only,
div[class*="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 { .ant-pro-page-container-children-content {
padding-top: 0 !important;
padding: 24px !important; padding: 24px !important;
padding-top: 0 !important;
}
// 确保主内容区域正确的padding
.ant-layout-content {
padding-top: 120px !important;
} }
.custom-header .header-left { .custom-header .header-left {