refactor(layout): 统一布局边距配置,改用百分比

- layoutConfig.js: LAYOUT_PADDING.x 改为 { base: 4, md: 6, lg: '12%' }
- HomeNavbar.js: 导入 LAYOUT_PADDING,替换硬编码边距
- AppFooter.js: 导入 LAYOUT_PADDING,替换硬编码边距

现在导航栏、内容区、页脚统一使用 LAYOUT_PADDING.x 配置,
修改边距只需调整 layoutConfig.js 一处即可全局生效。

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-25 12:59:31 +08:00
parent ccbef35cf3
commit 54c8ec3660
3 changed files with 7 additions and 3 deletions

View File

@@ -54,6 +54,9 @@ import ProfileCompletenessAlert from './components/ProfileCompletenessAlert';
import { useProfileCompleteness } from '../../hooks/useProfileCompleteness'; import { useProfileCompleteness } from '../../hooks/useProfileCompleteness';
import NavbarActions from './components/NavbarActions'; import NavbarActions from './components/NavbarActions';
// 布局配置
import { LAYOUT_PADDING } from '../../layouts/config/layoutConfig';
// Phase 4: MoreNavMenu 和 NavItems 组件已提取到 Navigation 目录 // Phase 4: MoreNavMenu 和 NavItems 组件已提取到 Navigation 目录
export default function HomeNavbar() { export default function HomeNavbar() {
@@ -150,7 +153,7 @@ export default function HomeNavbar() {
borderColor={navbarBorder} borderColor={navbarBorder}
py={{ base: 2, md: 3 }} py={{ base: 2, md: 3 }}
> >
<Box px={{ base: 4, md: 6, lg: '80px' }}> <Box px={LAYOUT_PADDING.x}>
<Flex justify="space-between" align="center"> <Flex justify="space-between" align="center">
{/* Logo - 价小前投研 */} {/* Logo - 价小前投研 */}
<BrandLogo /> <BrandLogo />

View File

@@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { Box, 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'; import RiskDisclaimer from '../components/RiskDisclaimer';
import { LAYOUT_PADDING } from './config/layoutConfig';
/** /**
* 应用通用页脚组件 * 应用通用页脚组件
@@ -8,7 +9,7 @@ import RiskDisclaimer from '../components/RiskDisclaimer';
*/ */
const AppFooter = () => { const AppFooter = () => {
return ( return (
<Box bg={useColorModeValue('gray.100', 'gray.800')} py={2} px={{ base: 4, md: 6, lg: '80px' }}> <Box bg={useColorModeValue('gray.100', 'gray.800')} py={2} px={LAYOUT_PADDING.x}>
<VStack spacing={1}> <VStack spacing={1}>
<RiskDisclaimer /> <RiskDisclaimer />
<Text color="gray.500" fontSize="sm"> <Text color="gray.500" fontSize="sm">

View File

@@ -176,7 +176,7 @@ export const LAYOUT_SIZE = {
* 右侧预留空间给 GlobalSidebar收起宽度 72px * 右侧预留空间给 GlobalSidebar收起宽度 72px
*/ */
export const LAYOUT_PADDING = { export const LAYOUT_PADDING = {
x: { base: 4, md: 6, lg: '80px' }, // 移动端 16px中屏 24px大屏 80px容纳工具栏 x: { base: 4, md: 6, lg: '12%' }, // 移动端 16px中屏 24px大屏左右各 15%
}; };
/** /**