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

refactor: use UmiJS built-in header instead of CustomHeader

Browse Source
This commit is contained in:
Your Name 2026-03-30 16:53:18 +08:00
parent 238166ca44
commit 4a388992cc
4 changed files with 52 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/common/components/layout/MyPageContainer.tsx
View File

@ -357,30 +357,34 @@ export function MyPageContainer({
<PageContainer
fixedHeader
header={{
title: (
<Tabs
type="editable-card"
activeKey={activeKey}
onChange={handleTabChange}
onEdit={handleTabEdit}
hideAdd
size="middle"
// 标签size
renderTabBar={renderTabBar}
items={tabs.map((tab) => ({
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: (
// <Tabs
// type="editable-card"
// activeKey={activeKey}
// onChange={handleTabChange}
// onEdit={handleTabEdit}
// hideAdd
// size="middle"
// // 标签size
// renderTabBar={renderTabBar}
// items={tabs.map((tab) => ({
// 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,

2
src/common/components/layout/MyRootContainer.tsx
View File

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

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

@ -44,8 +44,21 @@ export const LayoutConfig: RuntimeConfig['layout'] = () => {
// 确保header显示
header: true,
// 自定义Header渲染
headerRender: false, // 禁用默认header，我们完全自定义
// 自定义Header渲染 - 使用UmiJS自带header并添加用户信息
headerRender: (props, defaultDom) => {
return (
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingRight: 24 }}>
{/* 左侧保留默认内容 */}
<div style={{ flex: 1 }}>
{defaultDom}
</div>
{/* 右侧添加用户信息 */}
<div>
<AvatarProps user={snap.session.user} />
</div>
</div>
);
},
// 新增：自定义Logo渲染
logoRenderer: (collapsed: boolean) => {

44
src/global.less
View File

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