From 3d45b1e1f22e6174e8c972aec46dd34160380aac Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 30 Oct 2025 15:18:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=20layoutConfig=20-?=
 =?UTF-8?q?=20=E9=9B=86=E4=B8=AD=E7=AE=A1=E7=90=86=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=B8=B8=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 功能
创建 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>
---
 src/layouts/config/layoutConfig.js | 144 +++++++++++++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 src/layouts/config/layoutConfig.js

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
+};