refactor(前端): 集中管理设计令牌和工具函数

frontend/src/config/theme.js

@@ -6,28 +6,36 @@
 export const designTokens = {
   colors: {
     primary: {
-      main: '#667eea',
-      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      light: '#8b9ff0',
-      dark: '#4f5db8',
+      main: '#6366f1',
+      gradient: 'linear-gradient(135deg, #6366f1 0%, #764ba2 100%)',
+      light: '#818cf8',
+      dark: '#4f46e5',
+      bg: '#eef2ff',
     },
     success: {
       main: '#10b981',
       gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
       light: '#34d399',
       dark: '#047857',
+      bg: '#ecfdf5',
     },
     warning: {
       main: '#f59e0b',
       gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
       light: '#fbbf24',
       dark: '#b45309',
+      bg: '#fffbeb',
     },
     error: {
       main: '#ef4444',
       gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
       light: '#f87171',
       dark: '#b91c1c',
+      bg: '#fef2f2',
+    },
+    info: {
+      main: '#3b82f6',
+      bg: '#eff6ff',
     },
     text: {
       primary: '#1e293b',
@@ -46,6 +54,18 @@ export const designTokens = {
       medium: '#cbd5e1',
       dark: '#94a3b8',
     },
+    neutral: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a',
+    },
     device: {
       server: '#3b82f6',
       switch: '#22c55e',
@@ -62,18 +82,29 @@ export const designTokens = {
       offline: '#6b7280',
       maintenance: '#3b82f6',
     },
+    sidebar: {
+      bg: '#1e293b',
+      text: '#94a3b8',
+      border: '#334155',
+    },
   },
   shadows: {
     small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    sm: '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)',
+    md: '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), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
     xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
     glow: '0 0 20px rgba(102, 126, 234, 0.3)',
   },
   borderRadius: {
     small: '6px',
+    sm: '6px',
     medium: '10px',
+    md: '10px',
     large: '16px',
+    lg: '16px',
     xl: '24px',
     round: '50%',
   },