refactor(layout): 统一页面边距管理,移除 Container 限制

- layoutConfig.js: 新增 LAYOUT_PADDING 常量 { base: 4, md: 6, lg: '80px' }
- MainLayout.js: 在 Outlet 容器上统一应用 px={LAYOUT_PADDING.x}
- HomeNavbar.js: 边距从 lg:8 改为 lg:'80px',与内容区对齐
- AppFooter.js: 移除 Container,边距改为 lg:'80px'

页面组件清理(移除冗余的 px/Container):
- Company, Community, Center, Profile, Settings
- ValueForum, DataBrowser, LimitAnalyse, StockOverview, Concept

特殊处理:
- CompanyHeader: 使用负边距实现全宽背景
- Concept Hero: 使用负边距实现全宽背景

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-24 18:29:19 +08:00
parent cac4f06c03
commit f5dbdfa84c
18 changed files with 59 additions and 80 deletions

View File

@@ -4,7 +4,6 @@ import { logger } from '../../utils/logger';
import defaultEventImage from '../../assets/img/default-event.jpg';
import {
Box,
Container,
Heading,
Text,
Input,
@@ -1538,12 +1537,14 @@ const ConceptCenter = () => {
{/* 导航栏已由 MainLayout 提供 */}
{/* Hero Section - 精简版 */}
{/* Hero Section - 使用负 margin 抵消 Layout 的 padding 实现全宽背景 */}
<Box
position="relative"
bgGradient="linear(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)"
color="white"
overflow="hidden"
zIndex={1}
mx={{ base: -4, md: -6, lg: '-80px' }}
>
{/* 科幻网格背景 */}
<Box
@@ -1579,7 +1580,7 @@ const ConceptCenter = () => {
filter="blur(50px)"
/>
<Container maxW="container.xl" position="relative" py={{ base: 8, md: 12 }}>
<Box px={{ base: 4, md: 6, lg: '80px' }} position="relative" py={{ base: 8, md: 12 }}>
<VStack spacing={6}>
{/* 标题区域 */}
<VStack spacing={3} textAlign="center">
@@ -1743,11 +1744,11 @@ const ConceptCenter = () => {
</VStack>
</Box>
</VStack>
</Container>
</Box>
</Box>
{/* 主内容区域 - 深色主题 */}
<Container maxW="container.xl" py={10} position="relative" zIndex={1}>
{/* 主内容区域 - padding 由 MainLayout 统一设置 */}
<Box py={10} position="relative" zIndex={1}>
<Box mb={6}>
<DateSelector />
</Box>
@@ -2102,7 +2103,7 @@ const ConceptCenter = () => {
</Box>
</Box>
</Flex>
</Container>
</Box>
{/* 股票详情Modal - 复用通用组件 */}
<ConceptStocksModal