feat(主题): 实现动态主题颜色配置功能

frontend/src/context/ConfigContext.jsx

@@ -3,9 +3,21 @@ import axios from 'axios';
 
 const ConfigContext = createContext();
 
+const applyThemeColors = (primaryColor, secondaryColor) => {
+  const root = document.documentElement;
+  if (primaryColor) {
+    root.style.setProperty('--primary-color', primaryColor);
+    root.style.setProperty('--primary-light', `${primaryColor}20`);
+    root.style.setProperty('--primary-gradient', `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor || '#764ba2'} 100%)`);
+  }
+  if (secondaryColor) {
+    root.style.setProperty('--secondary-color', secondaryColor);
+    root.style.setProperty('--secondary-light', `${secondaryColor}20`);
+  }
+};
+
 export const ConfigProvider = ({ children }) => {
   const [config, setConfig] = useState({
-    // 默认配置
     site_name: '机柜管理系统',
     primary_color: '#667eea',
     secondary_color: '#764ba2',
@@ -21,14 +33,12 @@ export const ConfigProvider = ({ children }) => {
   });
   const [loading, setLoading] = useState(true);
 
-  // 加载系统配置
   const loadConfig = async () => {
     try {
       const response = await axios.get('/api/system-settings');
       const settings = response.data;
       const configValues = {};
 
-      // 将配置转换为扁平结构
       Object.entries(settings).forEach(([key, value]) => {
         configValues[key] = value.value;
       });
@@ -37,6 +47,10 @@ export const ConfigProvider = ({ children }) => {
         ...prev,
         ...configValues,
       }));
+
+      if (configValues.primary_color || configValues.secondary_color) {
+        applyThemeColors(configValues.primary_color, configValues.secondary_color);
+      }
     } catch (error) {
       console.error('加载系统配置失败:', error);
     } finally {
@@ -44,12 +58,16 @@ export const ConfigProvider = ({ children }) => {
     }
   };
 
-  // 初始化加载配置
   useEffect(() => {
     loadConfig();
   }, []);
 
-  // 更新配置
+  useEffect(() => {
+    if (config.primary_color || config.secondary_color) {
+      applyThemeColors(config.primary_color, config.secondary_color);
+    }
+  }, [config.primary_color, config.secondary_color]);
+
   const updateConfig = newConfig => {
     setConfig(prev => ({
       ...prev,
@@ -57,7 +75,6 @@ export const ConfigProvider = ({ children }) => {
     }));
   };
 
-  // 重新加载配置
   const reloadConfig = async () => {
     await loadConfig();
   };
@@ -69,7 +86,6 @@ export const ConfigProvider = ({ children }) => {
   );
 };
 
-// 自定义钩子，方便组件使用配置
 export const useConfig = () => {
   const context = useContext(ConfigContext);
   if (!context) {