生产管理系统前端 1.修复系统导航过长的问题 2.利用旧菜单交互 开发菜单与导航

crop-x/src/stores/useLayoutStore.ts

@@ -0,0 +1,65 @@
+import { create } from 'zustand';
+
+interface LayoutState {
+  // 布局高度相关状态
+  navigatorHeight: number;  // 导航栏高度（原 authProviderHeight）
+  viewHeight: number;      // 页面总高度
+  mainBodyHeight: number;  // 主体内容高度
+
+  // 更新导航栏高度
+  setNavigatorHeight: (height: number) => void;
+
+  // 更新页面总高度
+  setViewHeight: (height: number) => void;
+
+  // 计算并更新主体内容高度
+  calculateMainBodyHeight: () => void;
+
+  // 重置所有高度
+  resetHeights: () => void;
+}
+
+export const useLayoutStore = create<LayoutState>((set, get) => ({
+  // 初始状态
+  navigatorHeight: 72,     // 默认导航栏高度
+  viewHeight: 0,           // 页面总高度
+  mainBodyHeight: 0,       // 主体内容高度
+
+  // 更新导航栏高度
+  setNavigatorHeight: (height: number) => {
+    set({ navigatorHeight: height });
+  },
+
+  // 更新页面总高度
+  setViewHeight: (height: number) => {
+    const state = get();
+    set({ viewHeight: height });
+
+    // 自动计算主体内容高度
+    const newMainBodyHeight = height - state.navigatorHeight;
+    if (newMainBodyHeight >= 0) {
+      set({ mainBodyHeight: newMainBodyHeight });
+    }
+  },
+
+  // 计算并更新主体内容高度
+  calculateMainBodyHeight: () => {
+    const state = get();
+    const newMainBodyHeight = state.viewHeight - state.navigatorHeight;
+    if (newMainBodyHeight >= 0) {
+      set({ mainBodyHeight: newMainBodyHeight });
+    }
+  },
+
+  // 重置所有高度
+  resetHeights: () => {
+    set({
+      navigatorHeight: 72,
+      viewHeight: 0,
+      mainBodyHeight: 0
+    });
+  },
+}));
+
+// 获取当前布局状态的工具函数
+export const getLayoutState = () => useLayoutStore.getState();