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:
@@ -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 />
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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%
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user