fix(analysis): preserve tab panel state

src/components/olmap/BurstSimulation/SchemeQuery.tsx

@@ -30,6 +30,7 @@ import { api } from "@/lib/api";
 import moment from "moment";
 import { config, NETWORK_NAME } from "@config/config";
 import { useNotification } from "@refinedev/core";
+import { useControllableObjectState } from "@components/olmap/core/useControllableState";
 
 import { queryFeaturesByIds } from "@/utils/mapQueryService";
 import { useData, useMap } from "@components/olmap/core/MapComponent";
@@ -56,31 +57,57 @@ interface SchemeQueryProps {
   onSchemesChange?: (schemes: SchemeRecord[]) => void;
   onLocate?: (scheme: SchemeRecord) => void;
   network?: string;
+  state?: BurstSchemeQueryState;
+  onStateChange?: (state: BurstSchemeQueryState) => void;
 }
 
 const SCHEME_TYPE = "burst_analysis";
 
+export interface BurstSchemeQueryState {
+  queryAll: boolean;
+  queryDate: Dayjs | null;
+  showTimeline: boolean;
+  selectedDate: Date | undefined;
+  timeRange: { start: Date; end: Date } | undefined;
+  expandedId: number | null;
+}
+
+export const createBurstSchemeQueryState = (): BurstSchemeQueryState => ({
+  queryAll: true,
+  queryDate: dayjs(new Date()),
+  showTimeline: false,
+  selectedDate: undefined,
+  timeRange: undefined,
+  expandedId: null,
+});
+
 const SchemeQuery: React.FC<SchemeQueryProps> = ({
   schemes: externalSchemes,
   onSchemesChange,
   onLocate,
   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,
+    createBurstSchemeQueryState(),
+  );
+  const {
+    queryAll,
+    queryDate,
+    showTimeline,
+    selectedDate,
+    timeRange,
+    expandedId,
+  } = queryState;
   const [highlightLayer, setHighlightLayer] =
     useState<VectorLayer<VectorSource> | null>(null);
   const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
 
-  // 时间轴相关状态
-  const [showTimeline, setShowTimeline] = useState(false);
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
-  const [timeRange, setTimeRange] = useState<
-    { start: Date; end: Date } | undefined
-  >();
   const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
-  const [expandedId, setExpandedId] = useState<number | null>(null);
   const [mapContainer, setMapContainer] = useState<HTMLElement | null>(null); // 地图容器元素
 
   const { open } = useNotification();
@@ -181,7 +208,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
     const scheme = filteredSchemes.find((s) => s.id === id);
     if (!scheme) return;
 
-    setShowTimeline(true);
+    setQueryState((previous) => ({ ...previous, showTimeline: true }));
     // 计算时间范围
     const schemeDate = scheme.startTime
       ? new Date(scheme.startTime)
@@ -191,8 +218,12 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
       const end = new Date(
         start.getTime() + scheme.schemeDetail.modify_total_duration * 1000,
       );
-      setSelectedDate(schemeDate);
-      setTimeRange({ start, end });
+      setQueryState((previous) => ({
+        ...previous,
+        showTimeline: true,
+        selectedDate: schemeDate,
+        timeRange: { start, end },
+      }));
     }
     setSchemeName?.(scheme.schemeName);
     handleLocatePipes(scheme.schemeDetail?.burst_ID || []);
@@ -324,7 +355,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"
                   />
                 }
@@ -338,7 +369,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}
@@ -450,13 +481,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"
                           >