feat: 创建 layoutConfig - 集中管理布局配置常量

## 功能
创建 src/layouts/config/layoutConfig.js,集中管理所有布局相关配置

## 配置内容

### 1. Z_INDEX 层级管理
- BACK_TO_TOP: 1000
- NAVBAR: 1100
- MODAL: 1200
- TOAST: 1300
- TOOLTIP: 1400
统一管理 z-index,避免层级冲突

### 2. ANIMATION_CONFIG 动画配置
提供 5 种动画预设:
- default: 标准淡入淡出 + 轻微位移
- fast: 快速动画(0.1s)
- slow: 慢速动画(0.4s)
- none: 无动画
- slideRight: 从右侧滑入

### 3. BACK_TO_TOP_CONFIG 返回顶部配置
- scrollThreshold: 300px
- position: 响应式位置配置
- style: 按钮样式
- hover: 悬停效果
- zIndex: 层级
- transition: 过渡时间

### 4. PAGE_LOADER_CONFIG 加载器配置
- defaultMessage: 默认加载消息
- minDisplayTime: 最小显示时间(避免闪烁)

### 5. LAYOUT_SIZE 布局尺寸
- navbarHeight: 导航栏高度
- footerHeight: 页脚高度
- contentMinHeight: 内容最小高度

### 6. BREAKPOINTS 响应式断点
与 Chakra UI 断点保持一致

## 优势
-  配置集中管理,易于维护
-  避免魔法数字分散在代码中
-  支持主题切换和自定义
-  提供多种预设,开箱即用

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-10-30 15:18:55 +08:00
parent 8bea70a0af
commit 3d45b1e1f2

View File

@@ -0,0 +1,144 @@
// src/layouts/config/layoutConfig.js
/**
* 布局配置文件
* 集中管理所有布局相关的配置常量
*
* 优势:
* - 配置集中,易于维护和调整
* - 避免魔法数字分散在代码中
* - 支持主题切换和自定义
*/
/**
* Z-Index 层级管理
* 统一管理 z-index避免层级冲突
*/
export const Z_INDEX = {
BACK_TO_TOP: 1000, // 返回顶部按钮
NAVBAR: 1100, // 导航栏
MODAL: 1200, // 模态框
TOAST: 1300, // 提示消息
TOOLTIP: 1400, // 工具提示
};
/**
* 页面过渡动画配置
* 控制页面切换时的动画效果
*/
export const ANIMATION_CONFIG = {
// 默认配置:淡入淡出 + 轻微上下移动
default: {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: -20 },
transition: { duration: 0.2 }
},
// 快速配置:更短的动画时间
fast: {
initial: { opacity: 0, y: 10 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: -10 },
transition: { duration: 0.1 }
},
// 慢速配置:更长的动画时间,更柔和
slow: {
initial: { opacity: 0, y: 30 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: -30 },
transition: { duration: 0.4 }
},
// 无动画:用于禁用动画的场景
none: {
initial: { opacity: 1, y: 0 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 1, y: 0 },
transition: { duration: 0 }
},
// 滑动配置:从右侧滑入
slideRight: {
initial: { opacity: 0, x: 100 },
animate: { opacity: 1, x: 0 },
exit: { opacity: 0, x: -100 },
transition: { duration: 0.3 }
}
};
/**
* 返回顶部按钮配置
*/
export const BACK_TO_TOP_CONFIG = {
// 显示按钮的滚动阈值px
scrollThreshold: 300,
// 按钮位置
position: {
bottom: '80px',
right: {
base: '16px', // 移动端:右边距 16px
md: '32px' // 桌面端:右边距 32px
}
},
// 按钮样式
style: {
size: 'lg',
colorScheme: 'blue',
borderRadius: 'full',
boxShadow: 'lg'
},
// 悬停效果
hover: {
transform: 'translateY(-4px)',
boxShadow: 'xl'
},
// z-index
zIndex: Z_INDEX.BACK_TO_TOP,
// 过渡时间
transition: 'all 0.2s'
};
/**
* 页面加载器配置
*/
export const PAGE_LOADER_CONFIG = {
defaultMessage: '页面加载中...',
minDisplayTime: 300, // 最小显示时间ms避免闪烁
};
/**
* 布局尺寸配置
*/
export const LAYOUT_SIZE = {
navbarHeight: '80px',
footerHeight: 'auto',
contentMinHeight: 'calc(100vh - 80px)', // 100vh - navbar高度
};
/**
* 响应式断点
* 与 Chakra UI 断点保持一致
*/
export const BREAKPOINTS = {
base: '0px', // 0-479px
sm: '480px', // 480-767px
md: '768px', // 768-991px
lg: '992px', // 992-1279px
xl: '1280px', // 1280-1535px
'2xl': '1536px' // 1536px+
};
export default {
Z_INDEX,
ANIMATION_CONFIG,
BACK_TO_TOP_CONFIG,
PAGE_LOADER_CONFIG,
LAYOUT_SIZE,
BREAKPOINTS
};