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