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>

src/components/Navbars/HomeNavbar.js

@@ -152,7 +152,7 @@ export default function HomeNavbar() {
                 borderColor={navbarBorder}
                 py={{ base: 2, md: 3 }}
             >
-                <Container maxW="container.xl" px={{ base: 3, md: 4 }} style={{ paddingRight: 'max(16px, env(safe-area-inset-right))' }}>
+                <Box px={{ base: 4, md: 6, lg: '80px' }}>
                     <Flex justify="space-between" align="center">
                         {/* Logo - 价小前投研 */}
                         <BrandLogo />
@@ -177,7 +177,7 @@ export default function HomeNavbar() {
                             followingEvents={followingEvents}
                         />
                     </Flex>
-                </Container>
+                </Box>
 
                 {/* 移动端抽屉菜单 (Phase 5 优化) */}
                 <MobileDrawer

src/layouts/AppFooter.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Container, VStack, HStack, Text, Link, useColorModeValue } from '@chakra-ui/react';
+import { Box, VStack, HStack, Text, Link, useColorModeValue } from '@chakra-ui/react';
 import RiskDisclaimer from '../components/RiskDisclaimer';
 
 /**
@@ -8,8 +8,7 @@ import RiskDisclaimer from '../components/RiskDisclaimer';
  */
 const AppFooter = () => {
   return (
-    <Box bg={useColorModeValue('gray.100', 'gray.800')} py={2}>
+    <Box bg={useColorModeValue('gray.100', 'gray.800')} py={2} px={{ base: 4, md: 6, lg: '80px' }}>
-      <Container maxW="container.xl">
         <VStack spacing={1}>
           <RiskDisclaimer />
           <Text color="gray.500" fontSize="sm">
@@ -32,7 +31,6 @@ const AppFooter = () => {
             </Link>
           </HStack>
         </VStack>
-      </Container>
     </Box>
   );
 };

src/layouts/MainLayout.js

@@ -9,7 +9,7 @@ import BackToTopButton from "./components/BackToTopButton";
 import ErrorBoundary from "../components/ErrorBoundary";
 import PageLoader from "../components/Loading/PageLoader";
 import GlobalSidebar from "../components/GlobalSidebar";
-import { BACK_TO_TOP_CONFIG, LAYOUT_SIZE } from "./config/layoutConfig";
+import { BACK_TO_TOP_CONFIG, LAYOUT_SIZE, LAYOUT_PADDING } from "./config/layoutConfig";
 
 // ✅ P0 性能优化：缓存静态组件，避免路由切换时不必要的重新渲染
 // HomeNavbar (1623行) 和 AppFooter 不依赖路由参数，使用 memo 可大幅减少渲染次数
@@ -40,7 +40,7 @@ export default function MainLayout() {
             <Box flex="1" bg="#1A202C" position="relative" overflow="hidden">
                 {/* 页面内容区域 - 全宽度，与导航栏对齐 */}
                 <Box h="100%" overflowY="auto" display="flex" flexDirection="column">
-                    <Box flex="1" pt={LAYOUT_SIZE.navbarHeight}>
+                    <Box flex="1" pt={LAYOUT_SIZE.navbarHeight} px={LAYOUT_PADDING.x}>
                         <ErrorBoundary>
                             <Suspense fallback={<PageLoader message="页面加载中..." />}>
                                 <Outlet />

src/layouts/config/layoutConfig.js

@@ -170,6 +170,15 @@ export const LAYOUT_SIZE = {
     contentMinHeight: 'calc(100vh - 60px)',  // 100vh - navbar高度
 };
 
+/**
+ * 布局内边距配置
+ * 统一控制页面内容的水平内边距
+ * 右侧预留空间给 GlobalSidebar（收起宽度 72px）
+ */
+export const LAYOUT_PADDING = {
+    x: { base: 4, md: 6, lg: '80px' },  // 移动端 16px，中屏 24px，大屏 80px（容纳工具栏）
+};
+
 /**
  * 响应式断点
  * 与 Chakra UI 断点保持一致
@@ -189,5 +198,6 @@ export default {
     BACK_TO_TOP_CONFIG,
     PAGE_LOADER_CONFIG,
     LAYOUT_SIZE,
+    LAYOUT_PADDING,
     BREAKPOINTS
 };

src/views/Center/index.tsx

@@ -23,7 +23,8 @@ const Center: React.FC = () => {
 
   return (
     <Box bg={THEME.bg.primary} minH="100vh" overflowX="hidden">
-      <Box px={{ base: 3, md: 4 }} py={{ base: 4, md: 6 }} maxW="container.xl" mx="auto">
+      {/* padding 由 MainLayout 统一设置 */}
+      <Box py={{ base: 4, md: 6 }}>
         {/* 市场概览仪表盘 */}
         <Box mb={4}>
           <MarketDashboard />

src/views/Community/index.js

@@ -8,8 +8,6 @@ import {
 } from '@/store/slices/communityDataSlice';
 import {
   Box,
-  Container,
-  useBreakpointValue,
   Skeleton,
 } from '@chakra-ui/react';
 
@@ -45,23 +43,6 @@ const Community = () => {
   // Ref：用于首次滚动到内容区域
   const containerRef = useRef(null);
 
-  // 响应式容器宽度
-  const containerMaxW = useBreakpointValue({
-    base: '100%',        // 移动端：全宽
-    sm: '100%',          // 小屏：全宽
-    md: '100%',          // 中屏：全宽
-    lg: '1200px',        // 大屏：1200px
-    xl: '1400px',        // 超大屏：1400px
-  });
-
-  // 响应式内边距
-  const containerPx = useBreakpointValue({
-    base: 2,             // 移动端：最小内边距
-    sm: 3,
-    md: 4,
-    lg: 6,
-  });
-
   // ⚡ 通知权限引导
   const { browserPermission, requestBrowserPermission, registerEventUpdateCallback } = useNotification();
 
@@ -165,8 +146,8 @@ const Community = () => {
 
   return (
     <Box minH="100vh" bg={bgColor}>
-      {/* 主内容区域 */}
+      {/* 主内容区域 - padding 由 MainLayout 统一设置 */}
-      <Container ref={containerRef} maxW={containerMaxW} px={containerPx} pt={{ base: 3, md: 6 }} pb={{ base: 4, md: 8 }}>
+      <Box ref={containerRef} pt={{ base: 3, md: 6 }} pb={{ base: 4, md: 8 }}>
         {/* ⚡ 顶部说明面板（懒加载）：产品介绍 + 沪深指数 + 热门概念词云 */}
         <Suspense fallback={
           <Box mb={6} p={4} borderRadius="xl" bg="rgba(255,255,255,0.02)">
@@ -200,7 +181,7 @@ const Community = () => {
           events={hotEvents}
           onEventClick={communityEvents.trackNewsArticleClicked}
         />
-      </Container>
+      </Box>
     </Box>
   );
 };

src/views/Company/components/CompanyHeader/index.tsx

@@ -7,6 +7,7 @@ import { Box, Flex, HStack, VStack, Text } from '@chakra-ui/react';
 import { AutoComplete, Input, Spin } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import { useStockSearch } from '@hooks/useStockSearch';
+import { LAYOUT_PADDING } from '@/layouts/config/layoutConfig';
 import { THEME } from '../../config';
 import { FUI_COLORS, FUI_GLOW } from '../../theme/fui';
 import type { CompanyHeaderProps, StockSearchResult } from '../../types';
@@ -115,17 +116,17 @@ SearchBox.displayName = 'SearchBox';
 const CompanyHeader: React.FC<CompanyHeaderProps> = memo(({ onStockChange }) => (
   <Box
     position="relative"
-    bg={FUI_COLORS.bg.primary}
+    border="1px solid"
-    borderBottom="1px solid"
+    borderRadius="8px"
-    borderColor={FUI_COLORS.line.default}
+    sx={{
-    px={6}
+      bg: FUI_COLORS.bg.primary,
-    py={4}
+      borderColor: FUI_COLORS.line.default,
+      padding: '20px 20px',
+    }}
   >
     <Flex
       position="relative"
       zIndex={1}
-      maxW="container.xl"
-      mx="auto"
       justify="space-between"
       align="center"
     >

src/views/Company/index.tsx

@@ -332,7 +332,8 @@ const CompanyIndex: React.FC = () => {
       position="relative"
       bg={THEME.bg}
       minH="calc(100vh - 60px)"
-      overflow="hidden"
+      overflowX="visible"
+      overflowY="hidden"
     >
       {/* ========================================
           全局环境光效果
@@ -371,12 +372,10 @@ const CompanyIndex: React.FC = () => {
 
       {/*
         内容容器
-        - maxW="container.xl": 最大宽度限制，保持内容可读性
-        - mx="auto": 水平居中
-        - px={4}: 左右内边距 16px
         - py={6}: 上下内边距 24px
+        - 水平 padding 由 MainLayout 统一设置
       */}
-      <Box maxW="container.xl" mx="auto" px={4} py={6}>
+      <Box py={6}>
           {/* ========================================
               股票行情卡片
               ========================================

src/views/Concept/index.js

@@ -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>
 
-            {/* 主内容区域 - 深色主题 */}
+            {/* 主内容区域 - padding 由 MainLayout 统一设置 */}
-            <Container maxW="container.xl" py={10} position="relative" zIndex={1}>
+            <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

src/views/DataBrowser/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import {
   Box,
-  Container,
   Flex,
   Text,
   Input,
@@ -480,7 +479,8 @@ const DataBrowser: React.FC = () => {
         pointerEvents="none"
       />
 
-      <Container maxW="container.xl" position="relative" zIndex={1}>
+      {/* padding 由 MainLayout 统一设置 */}
+      <Box position="relative" zIndex={1}>
         {/* 标题区域 */}
         <MotionBox
           initial={{ opacity: 0, y: -20 }}
@@ -866,7 +866,7 @@ const DataBrowser: React.FC = () => {
             </Card>
           </MotionBox>
         </Flex>
-      </Container>
+      </Box>
 
       {/* 指标数据详情模态框 */}
       {selectedMetric && (

src/views/LimitAnalyse/index.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import {
     Box,
-    Container,
     VStack,
     HStack,
     Heading,
@@ -263,8 +262,7 @@ export default function LimitAnalyse() {
             {/* 导航栏已由 MainLayout 提供 */}
 
             {/* 顶部Header */}
-            <Box bgGradient="linear(to-br, blue.500, purple.600)" color="white" py={8}>
+            <Box bgGradient="linear(to-br, blue.500, purple.600)" color="white" py={8} px={6} borderRadius="xl">
-                <Container maxW="container.xl">
                     <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={6} alignItems="stretch">
                         {/* 左侧：标题置顶，注释与图例贴底 */}
                         <Flex direction="column" minH="420px" justify="space-between">
@@ -366,11 +364,10 @@ export default function LimitAnalyse() {
                             </CardBody>
                         </Card>
                     </SimpleGrid>
-                </Container>
             </Box>
 
-            {/* 主内容区 */}
+            {/* 主内容区 - padding 由 MainLayout 统一设置 */}
-            <Container maxW="container.xl" py={8}>
+            <Box py={8}>
                 {/* 搜索框 */}
                 <AdvancedSearch onSearch={handleSearch} loading={loading} />
 
@@ -402,7 +399,7 @@ export default function LimitAnalyse() {
 
                 {/* 高位股统计 */}
                 <HighPositionStocks dateStr={dateStr} />
-            </Container>
+            </Box>
 
             {/* 弹窗 */}
             <SearchResultsModal

src/views/Profile/ProfilePage.js

@@ -182,7 +182,7 @@ export default function ProfilePage() {
     };
 
     return (
-        <Container maxW="container.xl" py={8}>
+        <Box py={8}>
             <VStack spacing={8} align="stretch">
                 {/* 页面标题 */}
                 <HStack justify="space-between">
@@ -627,6 +627,6 @@ export default function ProfilePage() {
                     </VStack>
                 </SimpleGrid>
             </VStack>
-        </Container>
+        </Box>
     );
 }

src/views/Profile/index.js

@@ -135,7 +135,6 @@ const ProfilePage = () => {
 
   return (
     <Box bg={forumColors.background.main} minH="100vh" py="8">
-      <Container maxW="container.xl">
         {/* 用户信息头部 */}
         <Card
           bg={forumColors.background.card}
@@ -375,7 +374,6 @@ const ProfilePage = () => {
             </Tabs>
           </CardBody>
         </Card>
-      </Container>
     </Box>
   );
 };

src/views/Settings/SettingsPage.js

@@ -2,7 +2,6 @@
 import React, { useState } from 'react';
 import {
     Box,
-    Container,
     VStack,
     HStack,
     Text,
@@ -219,7 +218,7 @@ export default function SettingsPage() {
     };
 
     return (
-        <Container maxW="container.xl" py={8}>
+        <Box py={8}>
             <VStack spacing={8} align="stretch">
                 {/* 页面标题 */}
                 <Heading size="lg" color={headingColor}>账户设置</Heading>
@@ -543,6 +542,6 @@ export default function SettingsPage() {
                 </ModalContent>
             </Modal>
 
-        </Container>
+        </Box>
     );
 }

src/views/StockOverview/index.js

@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
 import { getApiBase } from '@utils/apiConfig';
 import {
   Box,
-  Container,
   Heading,
   Text,
   Input,
@@ -633,6 +632,7 @@ const StockOverview = () => {
         pt={{ base: 20, md: 24 }}
         pb={{ base: 16, md: 20 }}
         borderBottom={`1px solid rgba(139, 92, 246, 0.3)`}
+        borderRadius="xl"
         zIndex={1}
       >
         {/* 背景装饰 */}
@@ -648,7 +648,7 @@ const StockOverview = () => {
           filter="blur(60px)"
         />
         
-        <Container maxW="container.xl" position="relative">
+        <Box px={6} position="relative">
           <VStack spacing={8} align="center">
             <VStack spacing={4} textAlign="center" maxW="3xl">
               <HStack spacing={3}>
@@ -855,11 +855,11 @@ const StockOverview = () => {
               </Stat>
             </SimpleGrid>
           </VStack>
-        </Container>
+        </Box>
       </Box>
 
       {/* 主内容区 */}
-      <Container maxW="container.xl" py={10} position="relative" zIndex={1}>
+      <Box py={10} px={6} position="relative" zIndex={1}>
         {/* 日期选择器 */}
         <Box mb={6}>
           <Flex align="center" gap={4} flexWrap="wrap">
@@ -1195,7 +1195,7 @@ const StockOverview = () => {
             )}
           </Card>
         </Box>
-        </Container>
+        </Box>
 
         {/* 个股列表弹窗 */}
         <ConceptStocksModal

src/views/ValueForum/PostDetail.js

@@ -6,7 +6,6 @@
 import React, { useState, useEffect } from 'react';
 import {
   Box,
-  Container,
   Heading,
   Text,
   HStack,
@@ -157,7 +156,6 @@ const PostDetail = () => {
 
   return (
     <Box minH="100vh" bg={forumColors.background.main} pt="80px" pb="20">
-      <Container maxW="container.xl">
         {/* 返回按钮 */}
         <Button
           leftIcon={<ArrowLeft size={18} />}
@@ -374,7 +372,6 @@ const PostDetail = () => {
             </MotionBox>
           </Box>
         </SimpleGrid>
-      </Container>
 
       {/* 图片预览弹窗 */}
       <ImagePreviewModal

src/views/ValueForum/PredictionTopicDetail.js

@@ -6,7 +6,6 @@
 import React, { useState, useEffect } from 'react';
 import {
   Box,
-  Container,
   Heading,
   Text,
   Button,
@@ -224,7 +223,6 @@ const PredictionTopicDetail = () => {
 
   return (
     <Box minH="100vh" bg={forumColors.background.main} pt={LAYOUT_SIZE.navbarHeight} pb={{ base: "6", md: "20" }}>
-      <Container maxW="container.xl" px={{ base: "3", sm: "4", md: "6" }}>
         {/* 头部：返回按钮 */}
         <Button
           variant="ghost"
@@ -627,7 +625,6 @@ const PredictionTopicDetail = () => {
             </MotionBox>
           </Box>
         </SimpleGrid>
-      </Container>
 
       {/* 交易模态框 */}
       <TradeModal

src/views/ValueForum/index.js

@@ -6,7 +6,6 @@
 import React, { useState, useEffect } from 'react';
 import {
   Box,
-  Container,
   Heading,
   Text,
   Button,
@@ -154,7 +153,8 @@ const ValueForum = () => {
       pt="80px"
       pb="20"
     >
-      <Container maxW="container.xl">
+      {/* padding 由 MainLayout 统一设置 */}
+      <Box>
         {/* 顶部横幅 */}
         <MotionBox
           initial={{ opacity: 0, y: -20 }}
@@ -469,7 +469,7 @@ const ValueForum = () => {
             </TabPanel>
           </TabPanels>
         </Tabs>
-      </Container>
+      </Box>
 
       {/* 发帖模态框 */}
       <CreatePostModal