style(layout): 完善 Z-INDEX 层级管理,优化全局侧边栏样式
layoutConfig.js: - 重构 Z_INDEX 常量,分层管理(页面内部 → 系统级) - 添加详细注释说明各层级用途 - 新增 SIDEBAR、DROPDOWN、POPOVER 等层级定义 GlobalSidebar: - 使用统一的 Z_INDEX.SIDEBAR 常量 - 优化背景色和边框样式 - 添加 h="100%" 确保高度填满 MainLayout: - 简化注释 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -36,10 +36,10 @@ export default function MainLayout() {
|
||||
{/* 导航栏 - 在所有页面间共享,memo 后不会在路由切换时重新渲染 */}
|
||||
<MemoizedHomeNavbar />
|
||||
|
||||
{/* 主体区域 - 左侧页面内容 + 右侧全局侧边栏 */}
|
||||
<Flex flex="1" pt="60px" bg="#1A202C" overflow="hidden">
|
||||
{/* 页面内容区域 - flex: 1 占据剩余空间,包含错误边界、懒加载 */}
|
||||
<Box flex="1" minW={0} overflowY="auto" display="flex" flexDirection="column">
|
||||
{/* 主体区域 - 页面内容 + 右侧全局侧边栏(绝对定位覆盖) */}
|
||||
<Box flex="1" bg="#1A202C" position="relative" overflow="hidden">
|
||||
{/* 页面内容区域 - 全宽度,与导航栏对齐 */}
|
||||
<Box h="100%" overflowY="auto" display="flex" flexDirection="column">
|
||||
<Box flex="1">
|
||||
<ErrorBoundary>
|
||||
<Suspense fallback={<PageLoader message="页面加载中..." />}>
|
||||
@@ -51,9 +51,11 @@ export default function MainLayout() {
|
||||
<MemoizedAppFooter />
|
||||
</Box>
|
||||
|
||||
{/* 全局右侧工具栏 - 可收起/展开 */}
|
||||
<GlobalSidebar />
|
||||
</Flex>
|
||||
{/* 全局右侧工具栏 - 绝对定位覆盖在内容上方 */}
|
||||
<Box position="absolute" top={0} right={0} bottom={0}>
|
||||
<GlobalSidebar />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 返回顶部按钮 - 滚动超过阈值时显示 */}
|
||||
{/* <BackToTopButton
|
||||
|
||||
Reference in New Issue
Block a user