refactor(frontend): 重构状态管理使用Zustand替代Context API

feat(auth): 添加账户锁定功能及自动解锁机制 feat(user): 在用户模型中添加lockedUntil字段 feat(api): 实现账户锁定逻辑和剩余尝试次数提示 perf(3d): 优化3D场景状态管理性能 perf(floorplan): 优化平面图状态管理性能 chore(deps): 添加zustand依赖 chore(config): 更新安全配置锁定时间为3分钟 docs: 更新部分组件注释 style: 调整登录页面样式
2026-05-08 11:17:29 +08:00
parent 03e320af9e
commit 2826a00192
33 changed files with 2026 additions and 1442 deletions
@@ -0,0 +1,88 @@
+/**
+ * 系统配置状态管理 Store
+ * 支持精准订阅配置项，避免无关重渲染
+ */
+
+import { create } from 'zustand';
+import axios from 'axios';
+
+const defaultConfig = {
+  site_name: '机柜管理系统',
+  primary_color: '#667eea',
+  secondary_color: '#764ba2',
+  sidebar_collapsed: false,
+  compact_mode: false,
+  animation_enabled: true,
+  language: 'zh-CN',
+  timezone: 'Asia/Shanghai',
+  date_format: 'YYYY-MM-DD',
+  session_timeout: 30,
+  max_login_attempts: 5,
+  maintenance_mode: false,
+};
+
+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 useConfigStore = create((set, get) => ({
+  config: defaultConfig,
+  loading: true,
+
+  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;
+      });
+
+      set((state) => ({
+        config: { ...state.config, ...configValues },
+      }));
+
+      if (configValues.primary_color || configValues.secondary_color) {
+        applyThemeColors(configValues.primary_color, configValues.secondary_color);
+      }
+    } catch {
+      // 加载失败使用默认配置
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  updateConfig: (newConfig) => {
+    set((state) => ({
+      config: { ...state.config, ...newConfig },
+    }));
+
+    if (newConfig.primary_color || newConfig.secondary_color) {
+      const { config } = get();
+      applyThemeColors(config.primary_color, config.secondary_color);
+    }
+  },
+
+  reloadConfig: async () => {
+    await get().loadConfig();
+  },
+}));
+
+export const useConfig = () => useConfigStore((state) => state.config);
+export const useConfigLoading = () => useConfigStore((state) => state.loading);
+export const useSiteName = () => useConfigStore((state) => state.config.site_name);
+export const usePrimaryColor = () => useConfigStore((state) => state.config.primary_color);
+export const useSecondaryColor = () => useConfigStore((state) => state.config.secondary_color);