fix(analysis): preserve tab panel state

src/components/olmap/BurstSimulation/AnalysisParameters.tsx

@@ -20,33 +20,60 @@ import { useMap } from "@components/olmap/core/MapComponent";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import { Style, Stroke, Icon } from "ol/style";
-import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
+import {
+  handleMapClickSelectFeatures as mapClickSelectFeatures,
+  queryFeaturesByIds,
+} from "@/utils/mapQueryService";
 import Feature, { FeatureLike } from "ol/Feature";
 import { useNotification } from "@refinedev/core";
 import { api } from "@/lib/api";
 import { config, NETWORK_NAME } from "@/config/config";
+import { useControllableObjectState } from "@components/olmap/core/useControllableState";
 import { along, lineString, length, toMercator } from "@turf/turf";
 import { Point } from "ol/geom";
 import { toLonLat } from "ol/proj";
 
-interface PipePoint {
+export interface PipePoint {
   id: string;
   diameter: number;
   area: number;
-  feature?: any; // 存储管道要素用于高亮
 }
 
-const AnalysisParameters: React.FC = () => {
+export interface BurstAnalysisParametersState {
+  pipePoints: PipePoint[];
+  startTime: Dayjs | null;
+  duration: number;
+  schemeName: string;
+  network: string;
+}
+
+export const createBurstAnalysisParametersState = (): BurstAnalysisParametersState => ({
+  pipePoints: [],
+  startTime: dayjs(new Date()),
+  duration: 3600,
+  schemeName: "FANGAN" + new Date().getTime(),
+  network: NETWORK_NAME,
+});
+
+interface AnalysisParametersProps {
+  state?: BurstAnalysisParametersState;
+  onStateChange?: (state: BurstAnalysisParametersState) => void;
+}
+
+const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
+  state,
+  onStateChange,
+}) => {
   const map = useMap();
   const { open } = useNotification();
 
-  const [pipePoints, setPipePoints] = useState<PipePoint[]>([]);
-  const [startTime, setStartTime] = useState<Dayjs | null>(dayjs(new Date()));
-  const [duration, setDuration] = useState<number>(3600);
-  const [schemeName, setSchemeName] = useState<string>(
-    "FANGAN" + new Date().getTime(),
+  const [parametersState, setParametersState, setParameterField] = useControllableObjectState(
+    state,
+    onStateChange,
+    createBurstAnalysisParametersState(),
   );
-  const [network, setNetwork] = useState<string>(NETWORK_NAME);
+  const { pipePoints, startTime, duration, schemeName, network } =
+    parametersState;
   const [isSelecting, setIsSelecting] = useState<boolean>(false);
 
   const [highlightLayer, setHighlightLayer] =
@@ -54,6 +81,17 @@ const AnalysisParameters: React.FC = () => {
   const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
   const [analyzing, setAnalyzing] = useState<boolean>(false);
 
+  const setPipePoints = useCallback(
+    (next: PipePoint[] | ((previous: PipePoint[]) => PipePoint[])) => {
+      setParametersState((previous) => ({
+        ...previous,
+        pipePoints:
+          typeof next === "function" ? next(previous.pipePoints) : next,
+      }));
+    },
+    [setParametersState],
+  );
+
   // 检查是否所有必要参数都已填写
   const isFormValid =
     pipePoints.length > 0 &&
@@ -190,6 +228,18 @@ const AnalysisParameters: React.FC = () => {
     });
   }, [highlightFeatures, highlightLayer]);
 
+  useEffect(() => {
+    if (highlightFeatures.length > 0 || pipePoints.length === 0) return;
+    queryFeaturesByIds(
+      pipePoints.map((pipe) => pipe.id),
+      "geo_pipes_mat",
+    ).then((features) => {
+      if (features.length > 0) {
+        setHighlightFeatures(features);
+      }
+    });
+  }, [highlightFeatures.length, pipePoints]);
+
   // 同步高亮要素和爆管点信息
   useEffect(() => {
     setPipePoints((prevPipes) => {
@@ -211,12 +261,11 @@ const AnalysisParameters: React.FC = () => {
             id: properties.id,
             diameter: properties.diameter || 0,
             area: 15,
-            feature: feature,
           };
         });
       return [...filtered, ...newPipes];
     });
-  }, [highlightFeatures]);
+  }, [highlightFeatures, setPipePoints]);
 
   // 开始选择管道
   const handleStartSelection = () => {
@@ -237,6 +286,7 @@ const AnalysisParameters: React.FC = () => {
   };
 
   const handleRemovePipe = (id: string) => {
+    setPipePoints((prev) => prev.filter((pipe) => pipe.id !== id));
     // 从高亮features中移除
     setHighlightFeatures((prev) =>
       prev.filter((f) => f.getProperties().id !== id),
@@ -425,7 +475,7 @@ const AnalysisParameters: React.FC = () => {
           <DateTimePicker
             value={startTime}
             onChange={(value) =>
-              value && dayjs.isDayjs(value) && setStartTime(value)
+              value && dayjs.isDayjs(value) && setParameterField("startTime", value)
             }
             format="YYYY-MM-DD HH:mm"
             slotProps={{
@@ -452,7 +502,7 @@ const AnalysisParameters: React.FC = () => {
           size="small"
           type="number"
           value={duration}
-          onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
+          onChange={(e) => setParameterField("duration", parseInt(e.target.value) || 0)}
           placeholder="输入持续时长"
         />
       </Box>
@@ -466,7 +516,7 @@ const AnalysisParameters: React.FC = () => {
           fullWidth
           size="small"
           value={schemeName}
-          onChange={(e) => setSchemeName(e.target.value)}
+          onChange={(e) => setParameterField("schemeName", e.target.value)}
           placeholder="输入方案名称"
         />
       </Box>