fix(analysis): preserve tab panel state

src/components/olmap/FlushingAnalysis/SchemeQuery.tsx

@@ -32,6 +32,7 @@ import { config, NETWORK_NAME } from "@config/config";
 import { useNotification } from "@refinedev/core";
 import { useData, useMap } from "@components/olmap/core/MapComponent";
 import { queryFeaturesByIds } from "@/utils/mapQueryService";
+import { useControllableObjectState } from "@components/olmap/core/useControllableState";
 import { GeoJSON } from "ol/format";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
@@ -46,29 +47,58 @@ interface SchemeQueryProps {
   schemes?: SchemeRecord[];
   onSchemesChange?: (schemes: SchemeRecord[]) => void;
   network?: string;
+  state?: FlushingSchemeQueryState;
+  onStateChange?: (state: FlushingSchemeQueryState) => void;
 }
 
 const SCHEME_TYPE = "flushing_analysis";
 
+export interface FlushingSchemeQueryState {
+  queryAll: boolean;
+  queryDate: Dayjs | null;
+  expandedId: number | null;
+  showTimeline: boolean;
+  selectedDate: Date | undefined;
+  timeRange: { start: Date; end: Date } | undefined;
+}
+
+export const createFlushingSchemeQueryState =
+  (): FlushingSchemeQueryState => ({
+    queryAll: true,
+    queryDate: dayjs(new Date()),
+    expandedId: null,
+    showTimeline: false,
+    selectedDate: undefined,
+    timeRange: undefined,
+  });
+
 const SchemeQuery: React.FC<SchemeQueryProps> = ({
   schemes: externalSchemes,
   onSchemesChange,
   network = NETWORK_NAME,
+  state,
+  onStateChange,
 }) => {
-  const [queryAll, setQueryAll] = useState<boolean>(true);
-  const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs(new Date()));
+  const [queryState, setQueryState, setQueryField] = useControllableObjectState(
+    state,
+    onStateChange,
+    createFlushingSchemeQueryState(),
+  );
+  const {
+    queryAll,
+    queryDate,
+    expandedId,
+    showTimeline,
+    selectedDate,
+    timeRange,
+  } = queryState;
   const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
-  const [expandedId, setExpandedId] = useState<number | null>(null);
 
   const [highlightLayer, setHighlightLayer] =
     useState<VectorLayer<VectorSource> | null>(null);
   const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
 
-  // Timeline related state
-  const [showTimeline, setShowTimeline] = useState(false);
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
-  const [timeRange, setTimeRange] = useState<{ start: Date; end: Date } | undefined>();
   const [mapContainer, setMapContainer] = useState<HTMLElement | null>(null);
 
   const { open } = useNotification();
@@ -269,15 +299,19 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
   };
 
   const handleViewResults = (scheme: SchemeRecord) => {
-    setShowTimeline(true);
+    setQueryState((previous) => ({ ...previous, showTimeline: true }));
 
     const schemeDate = scheme.startTime ? new Date(scheme.startTime) : undefined;
 
     if (scheme.startTime && scheme.schemeDetail?.duration) {
       const start = new Date(scheme.startTime);
       const end = new Date(start.getTime() + scheme.schemeDetail.duration * 1000);
-      setSelectedDate(schemeDate);
-      setTimeRange({ start, end });
+      setQueryState((previous) => ({
+        ...previous,
+        showTimeline: true,
+        selectedDate: schemeDate,
+        timeRange: { start, end },
+      }));
     }
 
     setSchemeName?.(scheme.schemeName);
@@ -311,7 +345,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                 control={
                   <Checkbox
                     checked={queryAll}
-                    onChange={(e) => setQueryAll(e.target.checked)}
+                    onChange={(e) => setQueryField("queryAll", e.target.checked)}
                     size="small"
                   />
                 }
@@ -325,7 +359,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                 <DatePicker
                   value={queryDate}
                   onChange={(value) =>
-                    value && dayjs.isDayjs(value) && setQueryDate(value)
+                    value && dayjs.isDayjs(value) && setQueryField("queryDate", value)
                   }
                   format="YYYY-MM-DD"
                   disabled={queryAll}
@@ -443,13 +477,14 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                             expandedId === scheme.id ? "收起详情" : "查看详情"
                           }
                         >
-                          <IconButton
-                            size="small"
-                            onClick={() =>
-                              setExpandedId(
-                                expandedId === scheme.id ? null : scheme.id,
-                              )
-                            }
+                            <IconButton
+                              size="small"
+                              onClick={() =>
+                                setQueryField(
+                                  "expandedId",
+                                  expandedId === scheme.id ? null : scheme.id,
+                                )
+                              }
                             color="primary"
                             className="p-1"
                           >