fix(analysis): preserve tab panel state

src/components/olmap/BurstSimulation/ValveIsolation.tsx

@@ -51,6 +51,7 @@ import {
 } from "@turf/turf";
 import { Point } from "ol/geom";
 import { toLonLat } from "ol/proj";
+import { useControllableObjectState } from "@components/olmap/core/useControllableState";
 
 interface ValveIsolationProps {
   initialPipeIds?: string[];
@@ -60,8 +61,24 @@ interface ValveIsolationProps {
   result?: ValveIsolationResult | null;
   onLoadingChange?: (loading: boolean) => void;
   onResultChange?: (result: ValveIsolationResult | null) => void;
+  state?: ValveIsolationState;
+  onStateChange?: (state: ValveIsolationState) => void;
 }
 
+export interface ValveIsolationState {
+  selectedPipeId: string | null;
+  activeStep: number;
+  expandedResult: boolean;
+  disabledValves: string[];
+}
+
+export const createValveIsolationState = (): ValveIsolationState => ({
+  selectedPipeId: null,
+  activeStep: 0,
+  expandedResult: true,
+  disabledValves: [],
+});
+
 const ValveIsolation: React.FC<ValveIsolationProps> = ({
   initialPipeIds = [],
   shouldFetch = false,
@@ -70,6 +87,8 @@ const ValveIsolation: React.FC<ValveIsolationProps> = ({
   result: externalResult,
   onLoadingChange,
   onResultChange,
+  state,
+  onStateChange,
 }) => {
   const [internalLoading, setInternalLoading] = useState(false);
   const [internalResult, setInternalResult] =
@@ -82,12 +101,41 @@ const ValveIsolation: React.FC<ValveIsolationProps> = ({
   const setLoading = onLoadingChange || setInternalLoading;
   const setResult = onResultChange || setInternalResult;
 
-  const [selectedPipeId, setSelectedPipeId] = useState<string | null>(null);
+  const [flowState, setFlowState, setFlowField] = useControllableObjectState(
+    state,
+    onStateChange,
+    createValveIsolationState(),
+  );
+  const { selectedPipeId, activeStep, expandedResult, disabledValves } =
+    flowState;
   const [highlightFeature, setHighlightFeature] = useState<Feature | null>(null);
   const [isSelecting, setIsSelecting] = useState(false);
-  const [activeStep, setActiveStep] = useState(0);
-  const [expandedResult, setExpandedResult] = useState(true);
-  const [disabledValves, setDisabledValves] = useState<string[]>([]);
+
+  const setSelectedPipeId = useCallback(
+    (value: string | null) => setFlowField("selectedPipeId", value),
+    [setFlowField],
+  );
+
+  const setActiveStep = useCallback(
+    (value: number) => setFlowField("activeStep", value),
+    [setFlowField],
+  );
+
+  const setExpandedResult = useCallback(
+    (value: boolean) => setFlowField("expandedResult", value),
+    [setFlowField],
+  );
+
+  const setDisabledValves = useCallback(
+    (next: string[] | ((previous: string[]) => string[])) => {
+      setFlowState((previous) => ({
+        ...previous,
+        disabledValves:
+          typeof next === "function" ? next(previous.disabledValves) : next,
+      }));
+    },
+    [setFlowState],
+  );
 
   const { open } = useNotification();
   const map = useMap();
@@ -119,7 +167,7 @@ const ValveIsolation: React.FC<ValveIsolationProps> = ({
         }
       }
     },
-    [isSelecting, map, open, setResult],
+    [isSelecting, map, open, setResult, setSelectedPipeId],
   );
 
   useEffect(() => {
@@ -135,6 +183,13 @@ const ValveIsolation: React.FC<ValveIsolationProps> = ({
     };
   }, [map, isSelecting, handleMapClick]);
 
+  useEffect(() => {
+    if (!selectedPipeId || highlightFeature) return;
+    queryFeaturesByIds([selectedPipeId], "geo_pipes_mat").then((features) => {
+      setHighlightFeature(features[0] ?? null);
+    });
+  }, [highlightFeature, selectedPipeId]);
+
   const clearSelectedPipe = () => {
     setSelectedPipeId(null);
     setHighlightFeature(null);
@@ -297,7 +352,7 @@ const ValveIsolation: React.FC<ValveIsolationProps> = ({
         setLoading(false);
       }
     },
-    [open, setLoading, setResult],
+    [open, setActiveStep, setDisabledValves, setLoading, setResult],
   );
 
   // 监听外部传入的分析请求
@@ -319,7 +374,7 @@ const ValveIsolation: React.FC<ValveIsolationProps> = ({
         onFetchComplete();
       }
     }
-  }, [shouldFetch, initialPipeIds, fetchAnalysis, onFetchComplete]);
+  }, [shouldFetch, initialPipeIds, fetchAnalysis, onFetchComplete, setSelectedPipeId]);
 
   // 初始化高亮图层
   useEffect(() => {