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:
144
src/layouts/config/layoutConfig.js
Normal file
144
src/layouts/config/layoutConfig.js
Normal 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
|
||||
};
|
||||
Reference in New Issue
Block a user