194 lines
5.2 KiB
JavaScript
194 lines
5.2 KiB
JavaScript
// src/layouts/config/layoutConfig.js
|
||
/**
|
||
* 布局配置文件
|
||
* 集中管理所有布局相关的配置常量
|
||
*
|
||
* 优势：
|
||
* - 配置集中，易于维护和调整
|
||
* - 避免魔法数字分散在代码中
|
||
* - 支持主题切换和自定义
|
||
*/
|
||
|
||
/**
|
||
* Z-Index 层级管理
|
||
* 统一管理 z-index，避免层级冲突
|
||
*
|
||
* 层级规则（从低到高）：
|
||
* - 0-99: 页面内部元素（背景、卡片内部层级）
|
||
* - 100-499: 页面级浮动元素（侧边栏、面板）
|
||
* - 500-999: 全局固定元素（工具栏、返回顶部）
|
||
* - 1000-1499: 导航相关（导航栏、状态栏）
|
||
* - 1500-1999: 弹出层（下拉菜单、Popover）
|
||
* - 2000-2999: 模态框（普通 Modal）
|
||
* - 3000-8999: 特殊模态框（图表全屏、预览）
|
||
* - 9000-9999: 全局提示（Toast、通知）
|
||
* - 10000+: 系统级覆盖（第三方组件、客服系统）
|
||
*/
|
||
export const Z_INDEX = {
|
||
// === 页面内部元素 (0-99) ===
|
||
BACKGROUND: 0, // 背景层
|
||
CARD_CONTENT: 1, // 卡片内容
|
||
CARD_OVERLAY: 2, // 卡片覆盖层
|
||
|
||
// === 页面级浮动元素 (100-499) ===
|
||
SIDEBAR: 100, // 全局侧边栏
|
||
STICKY_HEADER: 200, // 粘性表头
|
||
|
||
// === 全局固定元素 (500-999) ===
|
||
BACK_TO_TOP: 900, // 返回顶部按钮
|
||
AUTH_MODAL_BG: 999, // 认证模态框背景
|
||
|
||
// === 导航相关 (1000-1499) ===
|
||
NAVBAR: 1000, // 顶部导航栏
|
||
CONNECTION_STATUS: 1050, // 连接状态栏
|
||
PROFILE_ALERT: 1100, // 个人资料提示
|
||
|
||
// === 弹出层 (1500-1999) ===
|
||
DROPDOWN: 1500, // 下拉菜单
|
||
POPOVER: 1600, // Popover 弹出
|
||
TOOLTIP: 1700, // 工具提示
|
||
CITATION: 1800, // 引用标记
|
||
|
||
// === 模态框 (2000-2999) ===
|
||
MODAL: 2000, // 普通模态框
|
||
MODAL_OVERLAY: 2001, // 模态框遮罩
|
||
STOCK_CHART_MODAL: 2500, // 股票图表模态框
|
||
|
||
// === 特殊模态框 (3000-8999) ===
|
||
FULLSCREEN: 3000, // 全屏模式
|
||
IMAGE_PREVIEW: 5000, // 图片预览
|
||
|
||
// === 全局提示 (9000-9999) ===
|
||
NOTIFICATION: 9000, // 通知容器
|
||
TOAST: 9500, // Toast 提示
|
||
SEARCH_DROPDOWN: 9800, // 搜索下拉框
|
||
PERFORMANCE_PANEL: 9900, // 性能面板（开发用）
|
||
|
||
// === 系统级覆盖 (10000+) ===
|
||
KLINE_FULLSCREEN: 10000, // K线图全屏
|
||
THIRD_PARTY: 99999, // 第三方组件
|
||
BYTEDESK: 999999, // Bytedesk 客服系统
|
||
};
|
||
|
||
/**
|
||
* 页面过渡动画配置
|
||
* 控制页面切换时的动画效果
|
||
*/
|
||
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: '60px', // 导航栏统一高度
|
||
footerHeight: 'auto',
|
||
contentMinHeight: 'calc(100vh - 60px)', // 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
|
||
};
|