@import '~antd/es/style/reset.css'; // 全局样式 body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5715; color: #262626; background-color: #f5f5f5; } // 自定义Logo样式 .custom-logo { display: flex; align-items: center; height: 64px; padding: 0 16px; border-bottom: 1px solid #f0f0f0; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); background: #ffffff; } .custom-logo .logo-icon { font-size: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center; } .custom-logo .logo-text { margin-left: 12px; font-size: 16px; font-weight: 600; color: #262626; white-space: nowrap; opacity: 1; transition: opacity 0.2s; } // 折叠状态 .ant-layout-sider-collapsed .custom-logo { padding: 0; justify-content: center; } .ant-layout-sider-collapsed .custom-logo .logo-text { display: none; } // 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; /* UmiJS Header的高度 */ right: 0 !important; left: 220px !important; /* 侧边栏宽度 */ z-index: 999 !important; margin: 0 !important; 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; display: flex !important; align-items: center !important; } // 当侧边栏折叠时,调整tabs header的left值 .ant-layout-sider-collapsed ~ .ant-layout .ant-pro-page-container-header { left: 64px !important; } // 强制PageContainer header样式 .ant-pro-page-container .ant-pro-page-container-header { position: fixed !important; top: 64px !important; right: 0 !important; left: 220px !important; z-index: 999 !important; margin: 0 !important; padding: 6px 24px !important; min-height: 36px !important; max-height: 48px !important; display: flex !important; align-items: center !important; } // Tabs样式优化 - 减小高度 .ant-pro-page-container-header .tabs-header-only, div[class*="page-container-header"] .tabs-header-only { margin: 0 !important; line-height: 1 !important; height: auto !important; display: flex !important; align-items: center !important; } .ant-pro-page-container-header .ant-tabs, div[class*="page-container-header"] .ant-tabs { margin: 0 !important; height: auto !important; } .ant-pro-page-container-header .ant-tabs-nav, div[class*="page-container-header"] .ant-tabs-nav { margin-bottom: 0 !important; height: auto !important; } .ant-pro-page-container-header .ant-tabs-nav-list, div[class*="page-container-header"] .ant-tabs-nav-list { margin-bottom: 0 !important; height: auto !important; display: flex !important; align-items: center !important; } .ant-pro-page-container-header .ant-tabs-tab, div[class*="page-container-header"] .ant-tabs-tab { padding: 4px 10px !important; background: #f5f5f5; border-radius: 4px; margin-right: 4px; transition: all 0.2s; height: 26px !important; line-height: 26px !important; font-size: 13px; display: inline-flex !important; align-items: center !important; } .ant-pro-page-container-header .ant-tabs-tab-active, div[class*="page-container-header"] .ant-tabs-tab-active { background: #ffffff; font-weight: 500; } .ant-pro-page-container-header .ant-tabs-ink-bar, div[class*="page-container-header"] .ant-tabs-ink-bar { display: none !important; } // 内容区域 - 调整padding以适应固定的header .ant-pro-grid-content { padding: 24px; padding-top: 120px; /* 64px UmiJS Header + 48px tabs header + 8px */ } .ant-pro-page-container { padding-top: 0 !important; } .ant-pro-page-container-warp { padding-top: 0 !important; } .ant-pro-page-container-children-content { padding-top: 0 !important; padding: 24px !important; } .custom-header .header-left { flex: 1; } .custom-header .header-right { display: flex; align-items: center; gap: 16px; } .custom-header .header-right > div { display: flex; align-items: center; transition: opacity 0.2s; } .custom-header .header-right > div:hover { opacity: 0.8; } // 内容区域 - 添加顶部padding避免被固定header遮挡 .ant-pro-grid-content { padding: 24px; padding-top: 24px; /* 恢复正常padding */ } .ant-pro-page-container { padding-top: 0 !important; } .ant-pro-page-container-children-content { padding-top: 0 !important; padding: 24px !important; } // 页面容器卡片 .ant-pro-page-container { background: transparent; } .ant-pro-page-container .ant-pro-page-container-warp { background: #ffffff; border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03); padding: 24px; } // 隐藏侧边栏底部的用户信息区域 .ant-pro-sider .ant-pro-sider-actions { display: none !important; } .ant-pro-sider-collapsed .ant-pro-sider-actions { display: none !important; } // 确保顶部Header显示 .ant-pro-header { display: flex !important; }