feat: 添加请求参数验证中间件和设计令牌Hook

feat(validation): 为机房、机柜和设备路由添加Joi验证中间件

feat(hooks): 创建useDesignTokens Hook集中管理主题配置

feat(models): 为耗材模型添加乐观锁version字段和updatedAt索引

feat(3d): 增强3D场景和设备模型视觉效果与交互

refactor: 移除数据备份相关功能并优化代码结构

fix: 修复前端安全日志和密码加密工具

chore: 更新依赖并添加axios和joi库

docs: 更新注释和文档说明

style: 改进代码格式和命名一致性

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import { BrowserRouter as Router, Routes, Route, Link, Navigate, useLocation, us
 import { useAuth } from './context/AuthContext';
 import { ConfigProvider, useConfig } from './context/ConfigContext';
 import { Scene3DProvider } from './context/Scene3DContext';
+import { useDesignTokens } from './hooks/useDesignTokens';
 import { Spin } from 'antd';
 
 const Dashboard = lazy(() => import('./pages/Dashboard'));
@@ -59,55 +60,6 @@ const AuthLoading = () => (
   </div>
 );
 
-const designTokens = {
-  colors: {
-    primary: {
-      main: '#667eea',
-      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      light: '#8b9ff0'
-    },
-    success: { main: '#10b981' },
-    warning: { main: '#f59e0b' },
-    error: { main: '#ef4444' },
-    text: {
-      primary: '#1e293b',
-      secondary: '#64748b',
-      inverse: '#ffffff'
-    },
-    background: {
-      primary: '#ffffff',
-      secondary: '#f8fafc',
-      dark: '#1e293b'
-    },
-    border: {
-      light: '#e2e8f0'
-    },
-    sidebar: {
-      bg: '#ffffff',
-      bgHover: 'rgba(102, 126, 234, 0.08)',
-      bgActive: 'rgba(102, 126, 234, 0.15)',
-      text: '#475569',
-      textHover: '#667eea',
-      textActive: '#667eea',
-      border: '#e2e8f0'
-    }
-  },
-  shadows: {
-    small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
-    large: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
-  },
-  borderRadius: {
-    small: '6px',
-    medium: '10px'
-  },
-  spacing: {
-    sm: '8px',
-    md: '16px',
-    lg: '24px'
-  }
-};
-
 const PrivateRoute = ({ children }) => {
   const { token, initialized, loading } = useAuth();
   const location = useLocation();
@@ -133,9 +85,10 @@ const AppLayout = ({ children }) => {
   const [collapsed, setCollapsed] = useState(false);
   const [activeKey, setActiveKey] = useState('dashboard');
   const { user, logout } = useAuth();
+  const { config } = useConfig();
   const navigate = useNavigate();
   const location = useLocation();
-  const { config } = useConfig();
+  const designTokens = useDesignTokens();
   
   const handleLogout = () => {
     logout();
@@ -155,56 +108,6 @@ const AppLayout = ({ children }) => {
     return 'dashboard';
   };
 
-  // 动态设计令牌
-  const designTokens = {
-    colors: {
-      primary: {
-        main: config.primary_color || '#667eea',
-        gradient: `linear-gradient(135deg, ${config.primary_color || '#667eea'} 0%, ${config.secondary_color || '#764ba2'} 100%)`,
-        light: '#8b9ff0'
-      },
-      success: { main: '#10b981' },
-      warning: { main: '#f59e0b' },
-      error: { main: '#ef4444' },
-      text: {
-        primary: '#1e293b',
-        secondary: '#64748b',
-        inverse: '#ffffff'
-      },
-      background: {
-        primary: '#ffffff',
-        secondary: '#f8fafc',
-        dark: '#1e293b'
-      },
-      border: {
-        light: '#e2e8f0'
-      },
-      sidebar: {
-        bg: '#ffffff',
-        bgHover: 'rgba(102, 126, 234, 0.08)',
-        bgActive: 'rgba(102, 126, 234, 0.15)',
-        text: '#475569',
-        textHover: config.primary_color || '#667eea',
-        textActive: config.primary_color || '#667eea',
-        border: '#e2e8f0'
-      }
-    },
-    shadows: {
-      small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
-      large: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
-    },
-    borderRadius: {
-      small: '6px',
-      medium: '10px'
-    },
-    spacing: {
-      sm: '8px',
-      md: '16px',
-      lg: '24px'
-    }
-  };
-
   const menuItems = [
     {
       key: 'dashboard',
@@ -518,57 +421,7 @@ const AppLayout = ({ children }) => {
 };
 
 const ThemeConfig = () => {
-  const { config } = useConfig();
-  
-  // 动态设计令牌
-  const designTokens = {
-    colors: {
-      primary: {
-        main: config.primary_color || '#667eea',
-        gradient: `linear-gradient(135deg, ${config.primary_color || '#667eea'} 0%, ${config.secondary_color || '#764ba2'} 100%)`,
-        light: '#8b9ff0'
-      },
-      success: { main: '#10b981' },
-      warning: { main: '#f59e0b' },
-      error: { main: '#ef4444' },
-      text: {
-        primary: '#1e293b',
-        secondary: '#64748b',
-        inverse: '#ffffff'
-      },
-      background: {
-        primary: '#ffffff',
-        secondary: '#f8fafc',
-        dark: '#1e293b'
-      },
-      border: {
-        light: '#e2e8f0'
-      },
-      sidebar: {
-        bg: '#ffffff',
-        bgHover: 'rgba(102, 126, 234, 0.08)',
-        bgActive: 'rgba(102, 126, 234, 0.15)',
-        text: '#475569',
-        textHover: config.primary_color || '#667eea',
-        textActive: config.primary_color || '#667eea',
-        border: '#e2e8f0'
-      }
-    },
-    shadows: {
-      small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
-      large: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
-    },
-    borderRadius: {
-      small: '6px',
-      medium: '10px'
-    },
-    spacing: {
-      sm: '8px',
-      md: '16px',
-      lg: '24px'
-    }
-  };
+  const designTokens = useDesignTokens();
 
   return (
     <AntdConfigProvider theme={{ token: designTokens }}>