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

feat(validation): 为机房、机柜和设备路由添加Joi验证中间件 feat(hooks): 创建useDesignTokens Hook集中管理主题配置 feat(models): 为耗材模型添加乐观锁version字段和updatedAt索引 feat(3d): 增强3D场景和设备模型视觉效果与交互 refactor: 移除数据备份相关功能并优化代码结构 fix: 修复前端安全日志和密码加密工具 chore: 更新依赖并添加axios和joi库 docs: 更新注释和文档说明 style: 改进代码格式和命名一致性
2026-01-29 16:53:29 +08:00
parent 6d61d6e54c
commit 9e6a3da888
23 changed files with 1518 additions and 1858 deletions
@@ -0,0 +1,90 @@
+import { useMemo } from 'react';
+import { useConfig } from '../context/ConfigContext';
+
+/**
+ * 使用设计令牌 Hook
+ * 集中管理主题配置，避免在多个组件中重复定义
+ * @returns {Object} 设计令牌对象
+ */
+export const useDesignTokens = () => {
+  const { config } = useConfig();
+
+  const designTokens = useMemo(() => {
+    const primaryColor = config?.primary_color || '#667eea';
+    const secondaryColor = config?.secondary_color || '#764ba2';
+
+    return {
+      colors: {
+        primary: {
+          main: primaryColor,
+          gradient: `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 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(${hexToRgb(primaryColor)}, 0.08)`,
+          bgActive: `rgba(${hexToRgb(primaryColor)}, 0.15)`,
+          text: '#475569',
+          textHover: primaryColor,
+          textActive: primaryColor,
+          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'
+      }
+    };
+  }, [config?.primary_color, config?.secondary_color]);
+
+  return designTokens;
+};
+
+/**
+ * 将十六进制颜色转换为RGB字符串
+ * @param {string} hex - 十六进制颜色值
+ * @returns {string} RGB字符串 (如: "102, 126, 234")
+ */
+function hexToRgb(hex) {
+  // 移除 # 号
+  const cleanHex = hex.replace('#', '');
+  
+  // 处理简写格式 (如: #fff)
+  const fullHex = cleanHex.length === 3 
+    ? cleanHex.split('').map(c => c + c).join('')
+    : cleanHex;
+  
+  const r = parseInt(fullHex.substring(0, 2), 16);
+  const g = parseInt(fullHex.substring(2, 4), 16);
+  const b = parseInt(fullHex.substring(4, 6), 16);
+  
+  return `${r}, ${g}, ${b}`;
+}
+
+export default useDesignTokens;