diff --git a/src/layouts/config/layoutConfig.js b/src/layouts/config/layoutConfig.js
new file mode 100644
index 00000000..d665b6d6
--- /dev/null
+++ b/src/layouts/config/layoutConfig.js
@@ -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
+};