feat(3d): 添加Scene3DContext优化3D场景状态管理

refactor(3d): 重构LODManager使用ref优化性能 feat(3d): 在RackModel中添加U位刻度标识 refactor(3d): 优化Scene组件相机控制和渲染设置 refactor(3d): 重构DeviceModel使用共享几何体和材质缓存 refactor(3d): 优化Rack3DVisualization使用Scene3DContext style(dashboard): 改进响应式布局和样式 perf(3d): 优化InstancedMesh性能减少内存占用
2026-01-29 13:09:43 +08:00
parent a0ad9ad604
commit 6d61d6e54c
8 changed files with 1000 additions and 375 deletions
@@ -0,0 +1,109 @@
+import React, { createContext, useContext, useState, useMemo, useCallback } from 'react';
+
+// 3D场景状态上下文
+// 将3D场景状态与UI状态分离，避免不必要的重渲染
+
+const Scene3DContext = createContext(null);
+
+export const Scene3DProvider = ({ children }) => {
+  // 3D场景相关状态
+  const [devices, setDevices] = useState([]);
+  const [selectedDevice, setSelectedDevice] = useState(null);
+  const [hoveredDevice, setHoveredDevice] = useState(null);
+  const [deviceSlideEnabled, setDeviceSlideEnabled] = useState(false);
+  const [selectedRack, setSelectedRack] = useState(null);
+  const [racks, setRacks] = useState([]);
+  const [deviceCables, setDeviceCables] = useState([]);
+  const [loadingDevices, setLoadingDevices] = useState(false);
+
+  // 使用 useCallback 稳定回调函数
+  const selectDevice = useCallback((device) => {
+    setSelectedDevice(device);
+  }, []);
+
+  const hoverDevice = useCallback((device) => {
+    setHoveredDevice(device);
+  }, []);
+
+  const toggleDeviceSlide = useCallback(() => {
+    setDeviceSlideEnabled(prev => !prev);
+  }, []);
+
+  const setDeviceSlide = useCallback((enabled) => {
+    setDeviceSlideEnabled(enabled);
+  }, []);
+
+  const updateDevices = useCallback((newDevices) => {
+    setDevices(newDevices);
+  }, []);
+
+  const updateRacks = useCallback((newRacks) => {
+    setRacks(newRacks);
+  }, []);
+
+  const selectRack = useCallback((rack) => {
+    setSelectedRack(rack);
+  }, []);
+
+  const updateDeviceCables = useCallback((cables) => {
+    setDeviceCables(cables);
+  }, []);
+
+  const setLoading = useCallback((loading) => {
+    setLoadingDevices(loading);
+  }, []);
+
+  // 使用 useMemo 缓存 context value，避免不必要的重渲染
+  const value = useMemo(() => ({
+    // 状态
+    devices,
+    selectedDevice,
+    hoveredDevice,
+    deviceSlideEnabled,
+    selectedRack,
+    racks,
+    deviceCables,
+    loadingDevices,
+    // 方法
+    selectDevice,
+    hoverDevice,
+    toggleDeviceSlide,
+    setDeviceSlide,
+    updateDevices,
+    updateRacks,
+    selectRack,
+    updateDeviceCables,
+    setLoading,
+    // 直接设置状态的方法（用于兼容现有代码）
+    setDevices,
+    setSelectedDevice,
+    setHoveredDevice,
+    setDeviceSlideEnabled,
+    setSelectedRack,
+    setRacks,
+    setDeviceCables,
+    setLoadingDevices,
+  }), [
+    devices, selectedDevice, hoveredDevice, deviceSlideEnabled, 
+    selectedRack, racks, deviceCables, loadingDevices,
+    selectDevice, hoverDevice, toggleDeviceSlide, setDeviceSlide,
+    updateDevices, updateRacks, selectRack, updateDeviceCables, setLoading
+  ]);
+
+  return (
+    <Scene3DContext.Provider value={value}>
+      {children}
+    </Scene3DContext.Provider>
+  );
+};
+
+// 自定义 Hook
+export const useScene3D = () => {
+  const context = useContext(Scene3DContext);
+  if (!context) {
+    throw new Error('useScene3D must be used within a Scene3DProvider');
+  }
+  return context;
+};
+
+export default Scene3DContext;