暂存

and centralized backend requests via api/apiFetch (including data provider updates) to inject X-Project-ID.

.dockerignore

@@ -1,7 +1,10 @@
-**/node_modules/
-**/dist
+node_modules
+.next
+out
+build
 .git
-npm-debug.log
-.coverage
-.coverage.*
-.env
+.env*.local
+README.md
+docker-compose.yml
+Dockerfile
+.dockerignore

.env

@@ -0,0 +1,15 @@
+KEYCLOAK_CLIENT_ID="tjwater"
+KEYCLOAK_CLIENT_SECRET="83h0n413hau9bldzWdEaq6xRfASv24s5"
+KEYCLOAK_ISSUER="https://keycloak.waternetwork.cn/realms/tjwater"
+NEXTAUTH_SECRET="eyJhbGciOiJIUzUxMiIsInR5cCIgOiAiS"
+NEXTAUTH_URL="https://demo.waternetwork.cn/"
+
+# 为前端暴露的变量添加 NEXT_PUBLIC_ 前缀
+NEXT_PUBLIC_BACKEND_URL="https://server.waternetwork.cn"
+NEXT_PUBLIC_MAP_URL="https://geoserver.waternetwork.cn/geoserver"
+NEXT_PUBLIC_MAP_WORKSPACE="szh"
+NEXT_PUBLIC_MAP_EXTENT="13490131, 3630016, 13525879, 3666968.25"
+# NEXT_PUBLIC_MAP_AVAILABLE_LAYERS="junctions, pipes, reservoirs, scada"
+NEXT_PUBLIC_NETWORK_NAME="szh"
+NEXT_PUBLIC_MAPBOX_TOKEN="pk.eyJ1IjoiemhpZnUiLCJhIjoiY205azNyNGY1MGkyZDJxcTJleDUwaHV1ZCJ9.wOmSdOnDDdre-mB1Lpy6Fg"
+NEXT_PUBLIC_TIANDITU_TOKEN="e3e8ad95ee911741fa71ed7bff2717ec"

.github/copilot-instructions.md

@@ -2,7 +2,7 @@
 
 ## Project Overview
 
-A Next.js 15 + TypeScript water network management system built with Refine framework, featuring real-time hydraulic simulation, SCADA data management, and GIS visualization using OpenLayers and Deck.gl.
+A Next.js 16 + TypeScript water network management system built with Refine framework, featuring real-time hydraulic simulation, SCADA data management, and GIS visualization using OpenLayers and Deck.gl.
 
 ## Build, Test, and Lint Commands
 
@@ -24,6 +24,7 @@ npm run lint             # Run ESLint
 ```
 
 **Run single test file:**
+
 ```bash
 npm test -- path/to/test-file.test.ts
 ```
@@ -31,13 +32,15 @@ npm test -- path/to/test-file.test.ts
 ## Architecture
 
 ### Framework Stack
-- **Next.js 15** with App Router (not Pages Router)
+
+- **Next.js 16** with App Router (not Pages Router)
 - **Refine** framework for admin/CRUD operations
 - **NextAuth.js** with Keycloak for SSO authentication
 - **Material-UI (MUI) v6** for UI components
 - **OpenLayers** + **Deck.gl** for map visualization
 
 ### Route Structure
+
 - `src/app/layout.tsx` - Root layout with RefineContext
 - `src/app/(main)/` - Protected routes with shared layout
   - `/network-simulation` - Real-time network simulation
@@ -50,6 +53,7 @@ npm test -- path/to/test-file.test.ts
 - `src/app/login/` - Public authentication pages
 
 ### Key Directories
+
 - `src/app/_refine_context.tsx` - Refine configuration with resources, auth provider, and data provider
 - `src/providers/data-provider/` - REST API data provider (currently mock, update API_URL for production)
 - `src/contexts/color-mode/` - Theme switching (light/dark mode persisted in cookies)
@@ -58,6 +62,7 @@ npm test -- path/to/test-file.test.ts
 - `src/config/config.ts` - Environment-based configuration with fallback defaults
 
 ### Path Aliases (TypeScript)
+
 ```typescript
 @app/*      -> src/app/*
 @assets/*   -> src/assets/*
@@ -72,7 +77,9 @@ npm test -- path/to/test-file.test.ts
 ```
 
 ### Map Architecture
+
 The map system uses a hybrid approach:
+
 - **OpenLayers** as the base map engine (vector tiles from GeoServer)
 - **Deck.gl** overlays for advanced visualizations (trips, contours, text labels)
 - **DeckLayer** custom class bridges OL and Deck.gl (`@utils/layers`)
@@ -80,6 +87,7 @@ The map system uses a hybrid approach:
 - Layers: junctions, pipes, valves, reservoirs, pumps, tanks, scada
 
 ### Client vs Server Components
+
 - Most interactive components use `"use client"` directive (~35 files)
 - Map components are always client-side (OpenLayers requires browser APIs)
 - Layout and page files without interactivity can be server components
@@ -87,12 +95,14 @@ The map system uses a hybrid approach:
 ## Key Conventions
 
 ### Authentication Flow
+
 - Keycloak SSO via NextAuth.js (`src/app/api/auth/[...nextauth]/`)
 - Session managed with `SessionProvider` wrapper
 - Auth check redirects to `/login` if unauthenticated
 - Use `useSession()` hook for current user data
 
 ### Environment Variables
+
 - All frontend-accessible variables must have `NEXT_PUBLIC_` prefix
 - Backend URL: `NEXT_PUBLIC_BACKEND_URL` (defaults to http://192.168.1.42:8000)
 - GeoServer URL: `NEXT_PUBLIC_MAP_URL` (defaults to http://127.0.0.1:8080/geoserver)
@@ -100,29 +110,35 @@ The map system uses a hybrid approach:
 - Keycloak config in `.env.local` (not committed)
 
 ### Refine Resources
+
 Resources defined in `_refine_context.tsx` use Chinese labels and route to pages in `(main)/`:
+
 - Each resource has: name (Chinese), list (route path), meta (icon + label)
 - Icons from `react-icons` library
 - No CRUD operations defined (list-only pages)
 
 ### Map Styling
+
 - Default styles in `config.MAP_DEFAULT_STYLE` (stroke, circle, colors)
 - Circle radius uses zoom-based interpolation (1px at z12, 8px at z24)
 - WebGL rendering for vector tiles
 - Style legends generated dynamically in map controls
 
 ### TypeScript Configuration
+
 - Strict mode enabled
 - Path aliases match jest.config.js mappings
 - Target ES5 for broader compatibility
 - Incremental builds enabled
 
 ### Next.js Configuration
+
 - **Standalone output** for Docker deployment
 - SVG files handled by `@svgr/webpack` (imported as React components)
 - No custom server or middleware
 
 ### Testing Setup
+
 - Jest with React Testing Library
 - jsdom environment for component testing
 - Path aliases configured to match tsconfig.json
@@ -131,23 +147,27 @@ Resources defined in `_refine_context.tsx` use Chinese labels and route to pages
 ## Common Patterns
 
 ### Adding a New Route
+
 1. Create directory in `src/app/(main)/your-route/`
 2. Add `page.tsx` and optional `loading.tsx`
 3. Register resource in `src/app/_refine_context.tsx` resources array
 4. Import icon from `react-icons`
 
 ### Working with Maps
+
 - Use `MapComponent` from `src/app/OlMap/MapComponent.tsx`
 - Access map context via `useMapData()` hook
 - Vector tile layers auto-load from GeoServer workspace
 - Custom overlays use Deck.gl layers (TextLayer, TripsLayer, ContourLayer)
 
 ### API Calls
+
 - Update `dataProvider` in `src/providers/data-provider/index.ts` for real backend
 - Currently points to `https://api.fake-rest.refine.dev`
 - Use Refine hooks (`useList`, `useOne`, etc.) for data fetching
 
 ### Theme Management
+
 - Theme stored in cookies (not localStorage)
 - Toggle via `ColorModeContext` from `@contexts/color-mode`
 - Supports light/dark modes only

Dockerfile

@@ -1,4 +1,4 @@
-FROM refinedev/node:18 AS base
+FROM refinedev/node:22 AS base
 
 FROM base AS deps
 
@@ -15,6 +15,16 @@ RUN \
 
 FROM base AS builder
 
+# 只定义 ARG 接收来自构建命令或 docker-compose.yaml 的参数
+# Next.js 在 build 时会自动读取同名的 ARG 作为环境变量
+ARG NEXT_PUBLIC_BACKEND_URL
+ARG NEXT_PUBLIC_MAP_URL
+ARG NEXT_PUBLIC_MAP_WORKSPACE
+ARG NEXT_PUBLIC_MAP_EXTENT
+ARG NEXT_PUBLIC_NETWORK_NAME
+ARG NEXT_PUBLIC_MAPBOX_TOKEN
+ARG NEXT_PUBLIC_TIANDITU_TOKEN
+
 COPY --from=deps /app/refine/node_modules ./node_modules
 
 COPY . .
@@ -23,7 +33,7 @@ RUN npm run build
 
 FROM base AS runner
 
-ENV NODE_ENV production
+ENV NODE_ENV=production
 
 COPY --from=builder /app/refine/public ./public
 
@@ -37,7 +47,7 @@ USER refine
 
 EXPOSE 3000
 
-ENV PORT 3000
-ENV HOSTNAME "0.0.0.0"
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
 
 CMD ["node", "server.js"]

package-lock.json

@@ -41,7 +41,8 @@
         "react-draggable": "^4.5.0",
         "react-icons": "^5.5.0",
         "react-window": "^1.8.10",
-        "tailwindcss": "^4.1.13"
+        "tailwindcss": "^4.1.13",
+        "zustand": "^5.0.11"
       },
       "devDependencies": {
         "@svgr/webpack": "^8.1.0",
@@ -22904,6 +22905,35 @@
       "integrity": "sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg==",
       "license": "MIT AND BSD-3-Clause"
     },
+    "node_modules/zustand": {
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.11.tgz",
+      "integrity": "sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/zwitch": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",

package.json

@@ -49,7 +49,8 @@
     "react-draggable": "^4.5.0",
     "react-icons": "^5.5.0",
     "react-window": "^1.8.10",
-    "tailwindcss": "^4.1.13"
+    "tailwindcss": "^4.1.13",
+    "zustand": "^5.0.11"
   },
   "overrides": {
     "fast-xml-parser": "5.3.4"

src/app/(main)/hydraulic-simulation/pipe-burst-analysis/page.tsx

@@ -8,7 +8,7 @@ export default function Home() {
   return (
     <div className="relative w-full h-full overflow-hidden">
       <MapComponent>
-        <MapToolbar queryType="scheme" />
+        <MapToolbar queryType="scheme" schemeType="burst_analysis" />
         <BurstPipeAnalysisPanel />
       </MapComponent>
     </div>

src/app/(main)/hydraulic-simulation/pipe-flushing/loading.tsx

@@ -0,0 +1,5 @@
+import { MapSkeleton } from "@components/loading/MapSkeleton";
+
+export default function Loading() {
+  return <MapSkeleton />;
+}

src/app/(main)/hydraulic-simulation/pipe-flushing/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import MapComponent from "@app/OlMap/MapComponent";
+import MapToolbar from "@app/OlMap/Controls/Toolbar";
+import FlushingAnalysisPanel from "@/components/olmap/FlushingAnalysis/FlushingAnalysisPanel";
+
+export default function Home() {
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      <MapComponent>
+        <MapToolbar queryType="scheme" schemeType="flushing_analysis" />
+        <FlushingAnalysisPanel />
+      </MapComponent>
+    </div>
+  );
+}

src/app/(main)/hydraulic-simulation/water-quality-simulation/loading.tsx

@@ -0,0 +1,5 @@
+import { MapSkeleton } from "@components/loading/MapSkeleton";
+
+export default function Loading() {
+  return <MapSkeleton />;
+}

src/app/(main)/hydraulic-simulation/water-quality-simulation/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import MapComponent from "@app/OlMap/MapComponent";
+import MapToolbar from "@app/OlMap/Controls/Toolbar";
+import WaterQualityPanel from "@/components/olmap/ContaminantSimulation/WaterQualityPanel";
+
+export default function Home() {
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      <MapComponent>
+        <MapToolbar queryType="scheme" schemeType="contaminant_analysis" />
+        <WaterQualityPanel />
+      </MapComponent>
+    </div>
+  );
+}

src/app/(main)/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import React, { Suspense } from "react";
-import { RefineContext } from "../_refine_context";
 
 import authOptions from "@app/api/auth/[...nextauth]/options";
 import { Header } from "@components/header";
@@ -33,22 +32,20 @@ export default async function MainLayout({
   }
 
   return (
-    <RefineContext defaultMode={defaultMode}>
-      <ThemedLayout
-        Header={Header}
-        Title={Title}
-        childrenBoxProps={{
-          sx: { height: "100vh", p: 0 },
-        }}
-        containerBoxProps={{
-          sx: { height: "100%" },
-        }}
-      >
-        <Suspense fallback={<MapSkeleton />}>
-          {children}
-        </Suspense>
-      </ThemedLayout>
-    </RefineContext>
+    <ThemedLayout
+      Header={Header}
+      Title={Title}
+      childrenBoxProps={{
+        sx: { height: "100vh", p: 0 },
+      }}
+      containerBoxProps={{
+        sx: { height: "100%" },
+      }}
+    >
+      <Suspense fallback={<MapSkeleton />}>
+        {children}
+      </Suspense>
+    </ThemedLayout>
   );
 }
 

src/app/OlMap/Controls/BaseLayers.tsx

@@ -179,7 +179,7 @@ const BaseLayers: React.FC = () => {
   };
 
   return (
-    <div className="absolute right-17 bottom-8 z-1300">
+    <div className="absolute right-17 bottom-11 z-1300">
       <div
         className="w-20 h-20 bg-white rounded-xl drop-shadow-xl shadow-black"
         onMouseEnter={handleEnter}

src/app/OlMap/Controls/HistoryDataPanel.tsx

@@ -34,6 +34,7 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { zhCN as pickerZhCN } from "@mui/x-date-pickers/locales";
 import config from "@/config/config";
+import { apiFetch } from "@/lib/apiFetch";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -103,10 +104,10 @@ const fetchFromBackend = async (
     if (type === "none") {
       // 查询清洗值和监测值
       const [cleanedRes, rawRes] = await Promise.all([
-        fetch(cleanedDataUrl)
+        apiFetch(cleanedDataUrl)
           .then((r) => (r.ok ? r.json() : null))
           .catch(() => null),
-        fetch(rawDataUrl)
+        apiFetch(rawDataUrl)
           .then((r) => (r.ok ? r.json() : null))
           .catch(() => null),
       ]);
@@ -126,13 +127,13 @@ const fetchFromBackend = async (
     } else if (type === "scheme") {
       // 查询策略模拟值、清洗值和监测值
       const [cleanedRes, rawRes, schemeSimRes] = await Promise.all([
-        fetch(cleanedDataUrl)
+        apiFetch(cleanedDataUrl)
           .then((r) => (r.ok ? r.json() : null))
           .catch(() => null),
-        fetch(rawDataUrl)
+        apiFetch(rawDataUrl)
           .then((r) => (r.ok ? r.json() : null))
           .catch(() => null),
-        fetch(schemeSimulationDataUrl)
+        apiFetch(schemeSimulationDataUrl)
           .then((r) => (r.ok ? r.json() : null))
           .catch(() => null),
       ]);
@@ -178,13 +179,13 @@ const fetchFromBackend = async (
     } else {
       // realtime: 查询模拟值、清洗值和监测值
       const [cleanedRes, rawRes, simulationRes] = await Promise.all([
-        fetch(cleanedDataUrl)
+        apiFetch(cleanedDataUrl)
           .then((r) => (r.ok ? r.json() : null))
           .catch(() => null),
-        fetch(rawDataUrl)
+        apiFetch(rawDataUrl)
           .then((r) => (r.ok ? r.json() : null))
           .catch(() => null),
-        fetch(simulationDataUrl)
+        apiFetch(simulationDataUrl)
           .then((r) => (r.ok ? r.json() : null))
           .catch(() => null),
       ]);

src/app/OlMap/Controls/ScaleLine.tsx

@@ -1,10 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useMap } from "../MapComponent";
+import { ScaleLine } from "ol/control";
 
 const Scale: React.FC = () => {
   const map = useMap();
   const [zoomLevel, setZoomLevel] = useState(0);
   const [coordinates, setCoordinates] = useState<[number, number]>([0, 0]);
+  const scaleLineRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!map) return;
@@ -28,19 +30,58 @@ const Scale: React.FC = () => {
     // Initialize values
     updateZoomLevel();
 
+    // ScaleLine control
+    const scaleControl = new ScaleLine({
+      target: scaleLineRef.current || undefined,
+      units: "metric",
+      bar: false,
+      steps: 4,
+      text: true,
+      minWidth: 64,
+    });
+    map.addControl(scaleControl);
+
     return () => {
       map.un("moveend", updateZoomLevel);
       map.un("pointermove", updateCoordinates);
+      map.removeControl(scaleControl);
     };
   }, [map]);
 
   return (
-    <div className="absolute bottom-0 right-0 flex col-auto px-2 bg-white bg-opacity-70 text-black rounded-tl shadow-md text-sm z-1300">
-      <div className="px-1">缩放: {zoomLevel.toFixed(1)}</div>
-      <div className="px-1">
-        坐标: {coordinates[0]}, {coordinates[1]}
+    <>
+      <style>
+        {`
+          .custom-scale-line .ol-scale-line {
+            position: static;
+            background: transparent;
+            padding: 0;
+          }
+          .custom-scale-line .ol-scale-line-inner {
+            border: 1px solid #475569;
+            border-top: none;
+            color: #334155;
+            font-size: 0.75rem;
+            font-weight: 600;
+            transition: all 0.3s;
+          }
+        `}
+      </style>
+      <div className="absolute bottom-0 right-0 flex items-center gap-2 px-3 py-1.5 bg-white/90 hover:bg-white rounded-tl-xl shadow-lg backdrop-blur-sm text-xs font-medium text-slate-700 z-1300 transition-all duration-300 pointer-events-auto">
+        <div
+          ref={scaleLineRef}
+          className="custom-scale-line flex items-center justify-center min-w-[60px]"
+        />
+        <div className="h-3 w-px bg-slate-300 mx-1" />
+        <div className="min-w-[60px] text-center">
+          缩放: {zoomLevel.toFixed(1)}
+        </div>
+        <div className="h-3 w-px bg-slate-300 mx-1" />
+        <div className="tabular-nums min-w-[140px] text-center">
+          坐标: {coordinates[0]}, {coordinates[1]}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/app/OlMap/Controls/Timeline.tsx

@@ -28,6 +28,7 @@ import { TbRewindBackward15, TbRewindForward15 } from "react-icons/tb";
 import { FiSkipBack, FiSkipForward } from "react-icons/fi";
 import { useData } from "../MapComponent";
 import { config, NETWORK_NAME } from "@/config/config";
+import { apiFetch } from "@/lib/apiFetch";
 import { useMap } from "../MapComponent";
 
 interface TimelineProps {
@@ -117,11 +118,11 @@ const Timeline: React.FC<TimelineProps> = ({
         nodeRecords = nodeCacheRef.current.get(nodeCacheKey)!;
       } else {
         disableDateSelection && schemeName
-          ? (nodePromise = fetch(
+          ? (nodePromise = apiFetch(
               // `${config.BACKEND_URL}/queryallschemerecordsbytimeproperty/?querytime=${query_time}&type=node&property=${junctionProperties}&schemename=${schemeName}`
               `${config.BACKEND_URL}/api/v1/scheme/query/by-scheme-time-property?scheme_type=${schemeType}&scheme_name=${schemeName}&query_time=${query_time}&type=node&property=${junctionProperties}`,
             ))
-          : (nodePromise = fetch(
+          : (nodePromise = apiFetch(
               // `${config.BACKEND_URL}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=node&property=${junctionProperties}`
               `${config.BACKEND_URL}/api/v1/realtime/query/by-time-property?query_time=${query_time}&type=node&property=${junctionProperties}`,
             ));
@@ -138,11 +139,11 @@ const Timeline: React.FC<TimelineProps> = ({
         linkRecords = linkCacheRef.current.get(linkCacheKey)!;
       } else {
         disableDateSelection && schemeName
-          ? (linkPromise = fetch(
+          ? (linkPromise = apiFetch(
               // `${config.BACKEND_URL}/queryallschemerecordsbytimeproperty/?querytime=${query_time}&type=link&property=${pipeProperties}&schemename=${schemeName}`
               `${config.BACKEND_URL}/api/v1/scheme/query/by-scheme-time-property?scheme_type=${schemeType}&scheme_name=${schemeName}&query_time=${query_time}&type=link&property=${pipeProperties}`,
             ))
-          : (linkPromise = fetch(
+          : (linkPromise = apiFetch(
               // `${config.BACKEND_URL}/queryallrecordsbytimeproperty/?querytime=${query_time}&type=link&property=${pipeProperties}`
               `${config.BACKEND_URL}/api/v1/realtime/query/by-time-property?query_time=${query_time}&type=link&property=${pipeProperties}`,
             ));
@@ -513,7 +514,7 @@ const Timeline: React.FC<TimelineProps> = ({
         duration: calculatedInterval,
       };
 
-      const response = await fetch(
+      const response = await apiFetch(
         `${config.BACKEND_URL}/api/v1/runsimulationmanuallybydate/`,
         {
           method: "POST",

src/app/OlMap/Controls/Toolbar.tsx

@@ -20,16 +20,19 @@ import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/
 import { useNotification } from "@refinedev/core";
 
 import { config } from "@/config/config";
+import { apiFetch } from "@/lib/apiFetch";
 
 // 添加接口定义隐藏按钮的props
 interface ToolbarProps {
   hiddenButtons?: string[]; // 可选的隐藏按钮列表，例如 ['info', 'draw', 'style']
   queryType?: string; // 可选的查询类型参数
+  schemeType?: string; // 可选的方案类型参数
   HistoryPanel?: React.FC<any>; // 可选的自定义历史数据面板
 }
 const Toolbar: React.FC<ToolbarProps> = ({
   hiddenButtons,
   queryType,
+  schemeType,
   HistoryPanel,
 }) => {
   const map = useMap();
@@ -386,12 +389,12 @@ const Toolbar: React.FC<ToolbarProps> = ({
         const querytime = dateObj.toISOString(); // 例如 "2025-09-16T16:30:00.000Z"
         let response;
         if (queryType === "scheme") {
-          response = await fetch(
+          response = await apiFetch(
             // `${config.BACKEND_URL}/queryschemesimulationrecordsbyidtime/?scheme_name=${schemeName}&id=${id}&querytime=${querytime}&type=${type}`
-            `${config.BACKEND_URL}/api/v1/scheme/query/by-id-time?scheme_name=${schemeName}&id=${id}&type=${type}&query_time=${querytime}`,
+            `${config.BACKEND_URL}/api/v1/scheme/query/by-id-time?scheme_type=${schemeType}&scheme_name=${schemeName}&id=${id}&type=${type}&query_time=${querytime}`,
           );
         } else {
-          response = await fetch(
+          response = await apiFetch(
             // `${config.BACKEND_URL}/querysimulationrecordsbyidtime/?id=${id}&querytime=${querytime}&type=${type}`
             `${config.BACKEND_URL}/api/v1/realtime/query/by-id-time?id=${id}&type=${type}&query_time=${querytime}`,
           );
@@ -400,7 +403,13 @@ const Toolbar: React.FC<ToolbarProps> = ({
           throw new Error("API request failed");
         }
         const data = await response.json();
-        setComputedProperties(data.results[0] || {});
+        if (!data.result || data.result.length === 0) {
+          setComputedProperties({});
+        } else {
+          setComputedProperties(data.result[0] || {});
+          console.log("查询到的计算属性：", data.result[0]);
+          console.log(computedProperties);
+        }
       } catch (error) {
         console.error("Error querying computed properties:", error);
         setComputedProperties({});
@@ -408,7 +417,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
     };
     // 仅当 currentTime 有效时查询
     if (currentTime !== -1 && queryType) queryComputedProperties();
-  }, [highlightFeatures, currentTime, selectedDate]);
+  }, [highlightFeatures, currentTime, selectedDate, queryType, schemeName, schemeType]);
 
   // 从要素属性中提取属性面板需要的数据
   const getFeatureProperties = useCallback(() => {

src/app/OlMap/Controls/Zoom.tsx

@@ -30,7 +30,7 @@ const Zoom: React.FC = () => {
   };
 
   return (
-    <div className="absolute right-4 bottom-8 z-1300">
+    <div className="absolute right-4 bottom-11 z-1300">
       <div className="w-8 h-26 flex flex-col gap-2 items-center">
         <div className="w-8 h-8 bg-gray-50 flex items-center justify-center rounded-xl drop-shadow-xl shadow-black">
           <button

src/app/OlMap/MapComponent.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { config } from "@/config/config";
+import { useProject } from "@/contexts/ProjectContext";
 import React, {
   createContext,
   useContext,
@@ -75,10 +76,6 @@ interface DataContextType {
 const MapContext = createContext<OlMap | undefined>(undefined);
 const DataContext = createContext<DataContextType | undefined>(undefined);
 
-const MAP_EXTENT = config.MAP_EXTENT as [number, number, number, number];
-const MAP_URL = config.MAP_URL;
-const MAP_WORKSPACE = config.MAP_WORKSPACE;
-const MAP_VIEW_STORAGE_KEY = `${MAP_WORKSPACE}_map_view`; // 持久化 key
 // 添加防抖函数
 function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
   let timeout: ReturnType<typeof setTimeout> | null = null;
@@ -99,6 +96,17 @@ export const useData = () => {
 };
 
 const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
+  const project = useProject();
+  const MAP_WORKSPACE = project?.workspace || config.MAP_WORKSPACE;
+  const MAP_EXTENT = (project?.extent || config.MAP_EXTENT) as [
+    number,
+    number,
+    number,
+    number,
+  ];
+  const MAP_URL = config.MAP_URL;
+  const MAP_VIEW_STORAGE_KEY = `${MAP_WORKSPACE}_map_view`; // 持久化 key
+
   const mapRef = useRef<HTMLDivElement | null>(null);
   const deckLayerRef = useRef<DeckLayer | null>(null);
 
@@ -459,7 +467,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const scadaLayer = new VectorLayer({
     source: scadaSource,
     style: scadaStyle,
-    // extent: extent, // 设置图层范围
+    extent: MAP_EXTENT, // 设置图层范围
     maxZoom: 24,
     minZoom: 11,
     properties: {
@@ -762,7 +770,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       map.dispose();
       deck.finalize();
     };
-  }, []);
+  }, [MAP_WORKSPACE, MAP_EXTENT]);
 
   // 当数据变化时，更新 deck.gl 图层
   useEffect(() => {

src/app/_refine_context.tsx

@@ -8,12 +8,14 @@ import {
 } from "@refinedev/mui";
 import { SessionProvider, signIn, signOut, useSession } from "next-auth/react";
 import { usePathname } from "next/navigation";
-import React from "react";
+import React, { useEffect } from "react";
 
 import routerProvider from "@refinedev/nextjs-router";
 
 import { ColorModeContextProvider } from "@contexts/color-mode";
 import { dataProvider } from "@providers/data-provider";
+import { ProjectProvider } from "@/contexts/ProjectContext";
+import { useAuthStore } from "@/store/authStore";
 
 import { LiaNetworkWiredSolid } from "react-icons/lia";
 import { TbDatabaseEdit } from "react-icons/tb";
@@ -21,6 +23,7 @@ import { LuReplace } from "react-icons/lu";
 import { AiOutlineSecurityScan } from "react-icons/ai";
 import { TbLocationPin } from "react-icons/tb";
 import { AiOutlinePartition } from "react-icons/ai";
+import { MdWater, MdOutlineWaterDrop, MdCleaningServices } from "react-icons/md";
 
 type RefineContextProps = {
   defaultMode?: string;
@@ -31,7 +34,9 @@ export const RefineContext = (
 ) => {
   return (
     <SessionProvider>
-      <App {...props} />
+      <ProjectProvider>
+        <App {...props} />
+      </ProjectProvider>
     </SessionProvider>
   );
 };
@@ -43,6 +48,11 @@ type AppProps = {
 const App = (props: React.PropsWithChildren<AppProps>) => {
   const { data, status } = useSession();
   const to = usePathname();
+  const setAccessToken = useAuthStore((state) => state.setAccessToken);
+
+  useEffect(() => {
+    setAccessToken(typeof data?.accessToken === "string" ? data.accessToken : null);
+  }, [data?.accessToken, setAccessToken]);
 
   if (status === "loading") {
     return <span>loading...</span>;
@@ -99,6 +109,7 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
       if (data?.user) {
         const { user } = data;
         return {
+          id: user.id,
           name: user.name,
           avatar: user.image,
         };
@@ -154,11 +165,37 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
                   },
                 },
                 {
-                  name: "风险分析定位",
-                  list: "/risk-analysis-location",
+                  name: "Hydraulic Simulation",
                   meta: {
+                    icon: <MdWater className="w-6 h-6" />,
+                    label: "事件模拟",
+                  },
+                },
+                {
+                  name: "爆管分析定位",
+                  list: "/hydraulic-simulation/pipe-burst-analysis",
+                  meta: {
+                    parent: "Hydraulic Simulation",
                     icon: <TbLocationPin className="w-6 h-6" />,
-                    label: "风险分析定位",
+                    label: "爆管分析定位",
+                  },
+                },
+                {
+                  name: "水质模拟",
+                  list: "/hydraulic-simulation/water-quality-simulation",
+                  meta: {
+                    parent: "Hydraulic Simulation",
+                    icon: <MdOutlineWaterDrop className="w-6 h-6" />,
+                    label: "水质模拟",
+                  },
+                },
+                {
+                  name: "管道冲洗",
+                  list: "/hydraulic-simulation/pipe-flushing",
+                  meta: {
+                    parent: "Hydraulic Simulation",
+                    icon: <MdCleaningServices className="w-6 h-6" />,
+                    label: "管道冲洗",
                   },
                 },
                 {

src/app/api/auth/[...nextauth]/options.ts

@@ -1,7 +1,8 @@
+import { NextAuthOptions } from "next-auth";
 import KeycloakProvider from "next-auth/providers/keycloak";
 import Avatar from "@assets/avatar/avatar-small.jpeg";
 
-const authOptions = {
+const authOptions: NextAuthOptions = {
   // Configure one or more authentication providers
   providers: [
     KeycloakProvider({
@@ -19,6 +20,26 @@ const authOptions = {
     }),
   ],
   secret: process.env.NEXTAUTH_SECRET,
+  callbacks: {
+    jwt: async ({ token, profile, account }) => {
+      if (profile?.sub) {
+        token.sub = profile.sub;
+      }
+      if (account?.access_token) {
+        token.accessToken = account.access_token;
+      }
+      return token;
+    },
+    session: async ({ session, token }) => {
+      if (session.user && token.sub) {
+        session.user.id = token.sub;
+      }
+      if (token.accessToken) {
+        session.accessToken = token.accessToken;
+      }
+      return session;
+    },
+  },
 };
 
 export default authOptions;

src/components/header/index.tsx

@@ -3,29 +3,78 @@
 import { ColorModeContext } from "@contexts/color-mode";
 import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
 import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
+import Logout from "@mui/icons-material/Logout";
+import SwapHoriz from "@mui/icons-material/SwapHoriz";
 import AppBar from "@mui/material/AppBar";
 import Avatar from "@mui/material/Avatar";
+import ButtonBase from "@mui/material/ButtonBase";
+import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
 import Stack from "@mui/material/Stack";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
-import { useGetIdentity } from "@refinedev/core";
+import { useGetIdentity, useLogout } from "@refinedev/core";
 import { HamburgerMenu, RefineThemedLayoutHeaderProps } from "@refinedev/mui";
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
+import { ProjectSelector } from "@components/project/ProjectSelector";
+import { setMapExtent, setMapWorkspace, setNetworkName } from "@config/config";
+import { useProjectStore } from "@/store/projectStore";
 
 type IUser = {
-  id: number;
-  name: string;
-  avatar: string;
+  id?: string;
+  name?: string;
+  avatar?: string;
 };
 
 export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
   sticky = true,
 }) => {
   const { mode, setMode } = useContext(ColorModeContext);
+  const { mutate: logout } = useLogout();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [showProjectSelector, setShowProjectSelector] = useState(false);
+  const open = Boolean(anchorEl);
+  const setCurrentProjectId = useProjectStore(
+    (state) => state.setCurrentProjectId,
+  );
 
   const { data: user } = useGetIdentity<IUser>();
 
+  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleSwitchProjectClick = () => {
+    handleMenuClose();
+    setShowProjectSelector(true);
+  };
+
+  const handleProjectSelect = (
+    projectId: string,
+    workspace: string,
+    networkName: string,
+    extent: number[],
+  ) => {
+    setMapWorkspace(workspace);
+    setNetworkName(networkName);
+    setMapExtent(extent);
+    localStorage.setItem("NEXT_PUBLIC_MAP_WORKSPACE", workspace);
+    localStorage.setItem("NEXT_PUBLIC_NETWORK_NAME", networkName);
+    localStorage.setItem("NEXT_PUBLIC_MAP_EXTENT", extent.join(","));
+    localStorage.removeItem(`${workspace}_map_view`);
+    setCurrentProjectId(projectId || networkName || workspace);
+    setShowProjectSelector(false);
+    window.location.reload();
+  };
+
   return (
     <AppBar position={sticky ? "sticky" : "relative"}>
       <Toolbar>
@@ -52,27 +101,118 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
             </IconButton>
 
             {(user?.avatar || user?.name) && (
-              <Stack
-                direction="row"
-                gap="16px"
-                alignItems="center"
-                justifyContent="center"
-              >
-                {user?.name && (
-                  <Typography
-                    sx={{
-                      display: {
-                        xs: "none",
-                        sm: "inline-block",
-                      },
-                    }}
-                    variant="subtitle2"
+              <>
+                <ButtonBase
+                  onClick={handleMenuOpen}
+                  sx={{
+                    borderRadius: "30px",
+                    padding: "6px 12px",
+                    marginLeft: "8px",
+                    transition: "all 0.3s ease",
+                    border: "1px solid transparent",
+                    "&:hover": {
+                      backgroundColor:
+                        mode === "dark"
+                          ? "rgba(255, 255, 255, 0.05)"
+                          : "rgba(0, 0, 0, 0.04)",
+                      transform: "translateY(-1px)",
+                      border: `1px solid ${mode === "dark"
+                          ? "rgba(255, 255, 255, 0.2)"
+                          : "rgba(0, 0, 0, 0.1)"
+                        }`,
+                      boxShadow:
+                        mode === "dark"
+                          ? "0 4px 12px rgba(0,0,0,0.3)"
+                          : "0 4px 12px rgba(0,0,0,0.08)",
+                    },
+                    "&:active": {
+                      transform: "translateY(0px)",
+                      boxShadow: "none",
+                    },
+                  }}
+                >
+                  <Stack
+                    direction="row"
+                    gap="12px"
+                    alignItems="center"
+                    justifyContent="center"
                   >
-                    {user?.name}
-                  </Typography>
-                )}
-                <Avatar src={user?.avatar} alt={user?.name} />
-              </Stack>
+                    {user?.name && (
+                      <Typography
+                        sx={{
+                          display: {
+                            xs: "none",
+                            sm: "inline-block",
+                          },
+                          fontWeight: 500,
+                        }}
+                        variant="subtitle2"
+                      >
+                        {user?.name}
+                      </Typography>
+                    )}
+                    <Avatar
+                      src={user?.avatar}
+                      alt={user?.name}
+                      sx={{
+                        width: 32,
+                        height: 32,
+                        border: `2px solid ${mode === "dark"
+                            ? "rgba(255,255,255,0.2)"
+                            : "rgba(0,0,0,0.1)"
+                          }`,
+                        transition: "transform 0.3s ease",
+                        ".MuiButtonBase-root:hover &": {
+                          transform: "rotate(5deg) scale(1.05)",
+                          borderColor: "primary.main",
+                        },
+                      }}
+                    />
+                  </Stack>
+                </ButtonBase>
+                <Menu
+                  anchorEl={anchorEl}
+                  open={open}
+                  onClose={handleMenuClose}
+                  transformOrigin={{ horizontal: "right", vertical: "top" }}
+                  anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+                  PaperProps={{
+                    sx: {
+                      borderRadius: 2,
+                      minWidth: 180,
+                      marginTop: "8px",
+                      background:
+                        mode === "dark"
+                          ? "rgba(30, 30, 30, 0.95)"
+                          : "rgba(255, 255, 255, 0.95)",
+                      backdropFilter: "blur(10px)",
+                      boxShadow:
+                        mode === "dark"
+                          ? "0px 4px 20px rgba(0, 0, 0, 0.5)"
+                          : "0px 4px 20px rgba(0, 0, 0, 0.1)",
+                    },
+                  }}
+                >
+                  <MenuItem onClick={handleSwitchProjectClick}>
+                    <ListItemIcon>
+                      <SwapHoriz fontSize="small" />
+                    </ListItemIcon>
+                    <ListItemText>切换项目</ListItemText>
+                  </MenuItem>
+                  <Divider />
+                  <MenuItem onClick={() => logout()}>
+                    <ListItemIcon>
+                      <Logout fontSize="small" />
+                    </ListItemIcon>
+                    <ListItemText>登出</ListItemText>
+                  </MenuItem>
+                </Menu>
+                <ProjectSelector
+                  open={showProjectSelector}
+                  onSelect={handleProjectSelect}
+                  onClose={() => setShowProjectSelector(false)}
+                />
+              </>
             )}
           </Stack>
         </Stack>

src/components/loading/MapSkeleton.tsx

@@ -1,4 +1,4 @@
-import { Box, Skeleton } from "@mui/material";
+import { Box, Skeleton, CircularProgress } from "@mui/material";
 
 /**
  * 地图页面骨架屏组件
@@ -26,7 +26,24 @@ export function MapSkeleton() {
         }}
       />
 
-      {/* 左侧工具栏骨架 */}
+      {/* 中央加载指示器 */}
+      <Box
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: 10,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 2,
+        }}
+      >
+        <CircularProgress size={48} thickness={4} color="primary" />
+      </Box>
+
+      {/* 左侧工具栏骨架 (垂直) */}
       <Box
         sx={{
           position: "absolute",
@@ -34,100 +51,100 @@ export function MapSkeleton() {
           left: 20,
           display: "flex",
           flexDirection: "column",
-          gap: 1,
+          gap: 1.5,
+          zIndex: 5,
         }}
       >
-        {[1, 2, 3, 4, 5].map((i) => (
+        {[1, 2, 3, 4].map((i) => (
           <Skeleton
             key={i}
-            variant="rectangular"
-            width={48}
-            height={48}
+            variant="circular"
+            width={40}
+            height={40}
             animation="wave"
-            sx={{ borderRadius: 1 }}
+            sx={{ boxShadow: 1 }}
           />
         ))}
       </Box>
 
-      {/* 右侧控制面板骨架 */}
+      {/* 右侧控制面板骨架 (抽屉式) */}
       <Box
         sx={{
           position: "absolute",
-          top: 20,
-          right: 20,
-          width: 320,
+          top: 0,
+          right: 0,
+          width: { xs: "100%", sm: 360 },
+          height: "100%",
           bgcolor: "background.paper",
-          borderRadius: 2,
-          p: 2,
-          boxShadow: 3,
+          borderLeft: 1,
+          borderColor: "divider",
+          p: 3,
+          zIndex: 5,
+          display: { xs: "none", md: "flex" },
+          flexDirection: "column",
+          boxShadow: -2,
         }}
       >
-        <Skeleton width="60%" height={32} animation="wave" sx={{ mb: 2 }} />
-        <Skeleton width="100%" height={24} animation="wave" sx={{ mb: 1 }} />
-        <Skeleton width="80%" height={24} animation="wave" sx={{ mb: 1 }} />
-        <Skeleton width="90%" height={24} animation="wave" sx={{ mb: 2 }} />
-        <Skeleton
-          variant="rectangular"
-          width="100%"
-          height={200}
-          animation="wave"
-          sx={{ borderRadius: 1 }}
-        />
+        <Skeleton variant="text" width="60%" height={40} sx={{ mb: 3 }} />
+        
+        {/* 面板内容区块 */}
+        <Box sx={{ flex: 1, overflow: "hidden" }}>
+          <Skeleton variant="rectangular" width="100%" height={100} sx={{ mb: 2, borderRadius: 1 }} />
+          <Skeleton variant="text" width="40%" height={24} sx={{ mb: 1 }} />
+          <Skeleton variant="rectangular" width="100%" height={180} sx={{ mb: 2, borderRadius: 1 }} />
+          
+          <Box sx={{ mt: 2 }}>
+            {[1, 2, 3].map((i) => (
+              <Box key={i} sx={{ display: "flex", gap: 2, mb: 2 }}>
+                <Skeleton variant="circular" width={36} height={36} />
+                <Box sx={{ flex: 1 }}>
+                  <Skeleton variant="text" width="80%" />
+                  <Skeleton variant="text" width="50%" />
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        </Box>
       </Box>
 
-      {/* 底部时间轴骨架 */}
+      {/* 底部时间轴/控制条骨架 */}
       <Box
         sx={{
           position: "absolute",
-          bottom: 20,
+          bottom: 30,
           left: "50%",
           transform: "translateX(-50%)",
-          width: "60%",
+          width: { xs: "90%", md: "60%" },
+          height: 64,
           bgcolor: "background.paper",
-          borderRadius: 2,
-          p: 2,
+          borderRadius: 4,
           boxShadow: 3,
+          p: 2,
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          zIndex: 5,
         }}
       >
-        <Skeleton width="100%" height={40} animation="wave" />
+        <Skeleton variant="circular" width={32} height={32} />
+        <Skeleton variant="rectangular" width="100%" height={8} sx={{ borderRadius: 4 }} />
+        <Skeleton variant="text" width={40} />
       </Box>
 
-      {/* 缩放控制骨架 */}
+      {/* 缩放控制骨架 (右下) */}
       <Box
         sx={{
           position: "absolute",
-          bottom: 100,
-          right: 20,
+          bottom: 110,
+          right: { xs: 20, md: 380 }, // Adjust if drawer is open
           display: "flex",
           flexDirection: "column",
           gap: 1,
+          zIndex: 4,
         }}
       >
-        <Skeleton
-          variant="rectangular"
-          width={40}
-          height={40}
-          animation="wave"
-          sx={{ borderRadius: 1 }}
-        />
-        <Skeleton
-          variant="rectangular"
-          width={40}
-          height={40}
-          animation="wave"
-          sx={{ borderRadius: 1 }}
-        />
-      </Box>
-
-      {/* 比例尺骨架 */}
-      <Box
-        sx={{
-          position: "absolute",
-          bottom: 20,
-          left: 20,
-        }}
-      >
-        <Skeleton width={120} height={24} animation="wave" />
+        <Skeleton variant="rectangular" width={36} height={36} sx={{ borderRadius: 1 }} />
+        <Skeleton variant="rectangular" width={36} height={36} sx={{ borderRadius: 1 }} />
       </Box>
     </Box>
   );

src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx

@@ -23,7 +23,7 @@ import { Style, Stroke, Icon } from "ol/style";
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
 import Feature, { FeatureLike } from "ol/Feature";
 import { useNotification } from "@refinedev/core";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config, NETWORK_NAME } from "@/config/config";
 import { along, lineString, length, toMercator } from "@turf/turf";
 import { Point } from "ol/geom";
@@ -283,8 +283,11 @@ const AnalysisParameters: React.FC = () => {
     };
 
     try {
-      await axios.get(`${config.BACKEND_URL}/api/v1/burst_analysis/`, {
+      await api.get(`${config.BACKEND_URL}/api/v1/burst_analysis/`, {
         params,
+        paramsSerializer: {
+          indexes: null, // 移除数组索引，即由 burst_ID[] 变为 burst_ID
+        },
       });
       // 更新弹窗为成功状态
       open?.({
@@ -381,7 +384,7 @@ const AnalysisParameters: React.FC = () => {
               key={pipe.id}
               className="flex items-center gap-2 p-2 bg-gray-50 rounded"
             >
-              <Typography className="flex-shrink-0 text-sm">
+              <Typography className="flex-shrink-0 text-sm pl-1">
                 {pipe.id}
               </Typography>
               <Typography className="flex-shrink-0 text-sm text-gray-600">

src/components/olmap/BurstPipeAnalysis/BurstPipeAnalysisPanel.tsx

@@ -22,13 +22,9 @@ import AnalysisParameters from "./AnalysisParameters";
 import SchemeQuery from "./SchemeQuery";
 import LocationResults from "./LocationResults";
 import ValveIsolation from "./ValveIsolation";
-import ContaminantAnalysisParameters from "../ContaminantSimulation/AnalysisParameters";
-import ContaminantSchemeQuery from "../ContaminantSimulation/SchemeQuery";
-import ContaminantResultsPanel from "../ContaminantSimulation/ResultsPanel";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config } from "@config/config";
 import { useNotification } from "@refinedev/core";
-import { useData } from "@app/OlMap/MapComponent";
 import { LocationResult, SchemeRecord, ValveIsolationResult } from "./types";
 
 interface TabPanelProps {
@@ -56,17 +52,12 @@ interface BurstPipeAnalysisPanelProps {
   onToggle?: () => void;
 }
 
-type PanelMode = "burst" | "contaminant";
-
 const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
   open: controlledOpen,
   onToggle,
 }) => {
   const [internalOpen, setInternalOpen] = useState(true);
   const [currentTab, setCurrentTab] = useState(0);
-  const [panelMode, setPanelMode] = useState<PanelMode>("burst");
-
-  const data = useData();
 
   // 持久化方案查询结果
   const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
@@ -92,19 +83,9 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
     setCurrentTab(newValue);
   };
 
-  const handleModeChange = (_event: React.SyntheticEvent, newMode: PanelMode) => {
-    setPanelMode(newMode);
-    // 切换模式时，如果当前标签索引超出新模式的标签数量，重置为第一个标签
-    // 爆管分析有4个标签(0-3)，水质模拟有3个标签(0-2)
-    const maxTabIndex = newMode === "burst" ? 3 : 2;
-    if (currentTab > maxTabIndex) {
-      setCurrentTab(0);
-    }
-  };
-
   const handleLocateScheme = async (scheme: SchemeRecord) => {
     try {
-      const response = await axios.get(
+      const response = await api.get(
         `${config.BACKEND_URL}/api/v1/burst-locate-result/${scheme.schemeName}`,
       );
       setLocationResults(response.data);
@@ -120,8 +101,7 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
   };
 
   const drawerWidth = 520;
-  const isBurstMode = panelMode === "burst";
-  const panelTitle = isBurstMode ? "爆管分析" : "水质模拟";
+  const panelTitle = "爆管分析";
 
   return (
     <>
@@ -197,32 +177,6 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
             </Tooltip>
           </Box>
 
-          {/* Tabs 导航 */}
-          <Box className="border-b border-gray-200 bg-white">
-            <Tabs
-              value={panelMode}
-              onChange={handleModeChange}
-              variant="fullWidth"
-              sx={{
-                minHeight: 46,
-                "& .MuiTab-root": {
-                  minHeight: 46,
-                  textTransform: "none",
-                  fontSize: "0.8rem",
-                  fontWeight: 600,
-                },
-                "& .Mui-selected": {
-                  color: "#257DD4",
-                },
-                "& .MuiTabs-indicator": {
-                  backgroundColor: "#257DD4",
-                },
-              }}
-            >
-              <Tab value="burst" label="爆管分析" />
-              <Tab value="contaminant" label="水质模拟" />
-            </Tabs>
-          </Box>
           <Box className="border-b border-gray-200 bg-white">
             <Tabs
               value={currentTab}
@@ -258,59 +212,43 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
               <Tab
                 icon={<MyLocationIcon fontSize="small" />}
                 iconPosition="start"
-                label={isBurstMode ? "定位结果" : "模拟结果"}
+                label="定位结果"
+              />
+              <Tab
+                icon={<HandymanIcon fontSize="small" />}
+                iconPosition="start"
+                label="关阀分析"
               />
-              {isBurstMode && (
-                <Tab
-                  icon={<HandymanIcon fontSize="small" />}
-                  iconPosition="start"
-                  label="关阀分析"
-                />
-              )}
             </Tabs>
           </Box>
 
           {/* Tab 内容 */}
           <TabPanel value={currentTab} index={0}>
-            {isBurstMode ? (
-              <AnalysisParameters />
-            ) : (
-              <ContaminantAnalysisParameters />
-            )}
+            <AnalysisParameters />
           </TabPanel>
 
           <TabPanel value={currentTab} index={1}>
-            {isBurstMode ? (
-              <SchemeQuery
-                schemes={schemes}
-                onSchemesChange={setSchemes}
-                onLocate={handleLocateScheme}
-              />
-            ) : (
-              <ContaminantSchemeQuery onViewResults={() => setCurrentTab(2)} />
-            )}
+            <SchemeQuery
+              schemes={schemes}
+              onSchemesChange={setSchemes}
+              onLocate={handleLocateScheme}
+            />
           </TabPanel>
 
           <TabPanel value={currentTab} index={2}>
-            {isBurstMode ? (
-              <LocationResults
-                results={locationResults}
-              />
-            ) : (
-              <ContaminantResultsPanel schemeName={data?.schemeName} />
-            )}
+            <LocationResults
+              results={locationResults}
+            />
           </TabPanel>
 
-          {isBurstMode && (
-            <TabPanel value={currentTab} index={3}>
-              <ValveIsolation
-                loading={valveAnalysisLoading}
-                result={valveAnalysisResult}
-                onLoadingChange={setValveAnalysisLoading}
-                onResultChange={setValveAnalysisResult}
-              />
-            </TabPanel>
-          )}
+          <TabPanel value={currentTab} index={3}>
+            <ValveIsolation
+              loading={valveAnalysisLoading}
+              result={valveAnalysisResult}
+              onLoadingChange={setValveAnalysisLoading}
+              onResultChange={setValveAnalysisResult}
+            />
+          </TabPanel>
         </Box>
       </Drawer>
     </>

src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx

@@ -26,7 +26,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import "dayjs/locale/zh-cn"; // 引入中文包
 import dayjs, { Dayjs } from "dayjs";
-import axios from "axios";
+import { api } from "@/lib/api";
 import moment from "moment";
 import { config, NETWORK_NAME } from "@config/config";
 import { useNotification } from "@refinedev/core";
@@ -109,7 +109,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
 
     setLoading(true);
     try {
-      const response = await axios.get(
+      const response = await api.get(
         `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`,
       );
       let filteredResults = response.data;

src/components/olmap/BurstPipeAnalysis/ValveIsolation.tsx

@@ -27,7 +27,7 @@ import {
   CheckBox as CheckBoxIcon,
   CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon,
 } from "@mui/icons-material";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config, NETWORK_NAME } from "@config/config";
 import { ValveIsolationResult } from "./types";
 import { useNotification } from "@refinedev/core";
@@ -270,7 +270,7 @@ const ValveIsolation: React.FC<ValveIsolationProps> = ({
         if (disabled.length > 0) {
           params.disabled_valves = disabled;
         }
-        const response = await axios.get(
+        const response = await api.get(
           `${config.BACKEND_URL}/api/v1/valve_isolation_analysis/`,
           {
             params,
@@ -908,7 +908,7 @@ const ValveIsolation: React.FC<ValveIsolationProps> = ({
                   {selectedPipeId ? (
                     <Box className="flex items-center gap-2 p-2 bg-green-50 rounded border border-green-200">
                       <CheckCircleIcon className="text-green-600" fontSize="small" />
-                      <Typography className="flex-1 text-sm font-medium text-gray-700">
+                      <Typography className="flex-1 text-sm font-medium pl-1 text-gray-700">
                         {selectedPipeId}
                       </Typography>
                       <Typography className="text-xs text-gray-500">

src/components/olmap/ContaminantSimulation/AnalysisParameters.tsx

@@ -17,7 +17,7 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import "dayjs/locale/zh-cn";
 import dayjs, { Dayjs } from "dayjs";
 import { useNotification } from "@refinedev/core";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config, NETWORK_NAME } from "@/config/config";
 import { useMap } from "@app/OlMap/MapComponent";
 import VectorLayer from "ol/layer/Vector";
@@ -175,6 +175,10 @@ const AnalysisParameters: React.FC = () => {
       ? startTime.format("YYYY-MM-DDTHH:mm:00Z")
       : "";
     try {
+      if (!pattern) {
+        setPattern("CONSTANT");
+        console.log("默认设置 pattern 为 CONSTANT");
+      }
       const params = {
         network,
         start_time: start_time,
@@ -185,7 +189,7 @@ const AnalysisParameters: React.FC = () => {
         scheme_name: schemeName,
       };
 
-      await axios.get(`${config.BACKEND_URL}/api/v1/contaminant_simulation/`, {
+      await api.get(`${config.BACKEND_URL}/api/v1/contaminant_simulation/`, {
         params,
       });
 
@@ -276,7 +280,7 @@ const AnalysisParameters: React.FC = () => {
         <Stack spacing={2}>
           {sourceNode ? (
             <Box className="flex items-center gap-2 p-2 bg-gray-50 rounded">
-              <Typography className="flex-shrink-0 text-sm">
+              <Typography className="flex-shrink-0 pl-1 text-sm">
                 {sourceNode}
               </Typography>
               <Typography className="flex-shrink-0 text-sm text-gray-600">
@@ -373,7 +377,7 @@ const AnalysisParameters: React.FC = () => {
           size="small"
           value={pattern}
           onChange={(e) => setPattern(e.target.value)}
-          placeholder="可选，输入 pattern 名称"
+          placeholder="可选，输入 pattern 名称，默认为 CONSTANT"
         />
       </Box>
 

src/components/olmap/ContaminantSimulation/SchemeQuery.tsx

@@ -25,7 +25,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import "dayjs/locale/zh-cn";
 import dayjs, { Dayjs } from "dayjs";
-import axios from "axios";
+import { api } from "@/lib/api";
 import moment from "moment";
 import { useNotification } from "@refinedev/core";
 import { config, NETWORK_NAME } from "@config/config";
@@ -180,7 +180,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
     if (!queryAll && !queryDate) return;
     setLoading(true);
     try {
-      const response = await axios.get(
+      const response = await api.get(
         `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`,
       );
       let filteredResults = response.data;

src/components/olmap/ContaminantSimulation/WaterQualityPanel.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  Box,
+  Drawer,
+  Tabs,
+  Tab,
+  Typography,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
+import {
+  ChevronRight,
+  ChevronLeft,
+  Analytics as AnalyticsIcon,
+  Search as SearchIcon,
+  MyLocation as MyLocationIcon,
+} from "@mui/icons-material";
+import ContaminantAnalysisParameters from "./AnalysisParameters";
+import ContaminantSchemeQuery from "./SchemeQuery";
+import ContaminantResultsPanel from "./ResultsPanel";
+import { useData } from "@app/OlMap/MapComponent";
+
+interface WaterQualityPanelProps {
+  open?: boolean;
+  onToggle?: () => void;
+}
+
+const WaterQualityPanel: React.FC<WaterQualityPanelProps> = ({
+  open: controlledOpen,
+  onToggle,
+}) => {
+  const [internalOpen, setInternalOpen] = useState(true);
+  const [currentTab, setCurrentTab] = useState(0);
+
+  const data = useData();
+
+  // 使用受控或非受控状态
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const handleToggle = () => {
+    if (onToggle) {
+      onToggle();
+    } else {
+      setInternalOpen(!internalOpen);
+    }
+  };
+
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setCurrentTab(newValue);
+  };
+
+  const drawerWidth = 520;
+  const panelTitle = "水质模拟";
+
+  return (
+    <>
+      {/* 收起时的触发按钮 */}
+      {!isOpen && (
+        <Box
+          className="absolute top-4 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
+          onClick={handleToggle}
+          sx={{ zIndex: 1300 }}
+        >
+          <Box className="flex flex-col items-center py-3 px-3 gap-1">
+            <AnalyticsIcon className="text-[#257DD4] w-5 h-5" />
+            <Typography
+              variant="caption"
+              className="text-gray-700 font-semibold my-1 text-xs"
+              style={{ writingMode: "vertical-rl" }}
+            >
+              {panelTitle}
+            </Typography>
+            <ChevronLeft className="text-gray-600 w-4 h-4" />
+          </Box>
+        </Box>
+      )}
+
+      {/* 主面板 */}
+      <Drawer
+        anchor="right"
+        open={isOpen}
+        variant="persistent"
+        hideBackdrop
+        sx={{
+          // 关键：容器自身不占用布局宽度
+          width: 0,
+          flexShrink: 0,
+          "& .MuiDrawer-paper": {
+            width: drawerWidth,
+            boxSizing: "border-box",
+            position: "absolute",
+            top: 16,
+            right: 16,
+            height: "calc(100vh - 32px)",
+            maxHeight: "850px",
+            borderRadius: "12px",
+            boxShadow:
+              "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+            backdropFilter: "blur(8px)",
+            opacity: 0.95,
+            transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
+            border: "none",
+            "&:hover": {
+              opacity: 1,
+            },
+          },
+        }}
+      >
+        <Box className="flex flex-col h-full bg-white rounded-xl overflow-hidden">
+          {/* 头部 */}
+          <Box className="flex items-center justify-between px-5 py-4 bg-[#257DD4] text-white">
+            <Box className="flex items-center gap-2">
+              <AnalyticsIcon className="w-5 h-5" />
+              <Typography variant="h6" className="text-lg font-semibold">
+                {panelTitle}
+              </Typography>
+            </Box>
+            <Tooltip title="收起">
+              <IconButton
+                size="small"
+                onClick={handleToggle}
+                sx={{ color: "primary.contrastText" }}
+              >
+                <ChevronRight fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </Box>
+
+          <Box className="border-b border-gray-200 bg-white">
+            <Tabs
+              value={currentTab}
+              onChange={handleTabChange}
+              variant="fullWidth"
+              sx={{
+                minHeight: 48,
+                "& .MuiTab-root": {
+                  minHeight: 48,
+                  textTransform: "none",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  transition: "all 0.2s",
+                },
+                "& .Mui-selected": {
+                  color: "#257DD4",
+                },
+                "& .MuiTabs-indicator": {
+                  backgroundColor: "#257DD4",
+                },
+              }}
+            >
+              <Tab
+                icon={<AnalyticsIcon fontSize="small" />}
+                iconPosition="start"
+                label="分析要件"
+              />
+              <Tab
+                icon={<SearchIcon fontSize="small" />}
+                iconPosition="start"
+                label="方案查询"
+              />
+              {/* <Tab
+                icon={<MyLocationIcon fontSize="small" />}
+                iconPosition="start"
+                label="模拟结果"
+              /> */}
+            </Tabs>
+          </Box>
+
+          {/* Tab 内容 */}
+          <TabPanel value={currentTab} index={0}>
+            <ContaminantAnalysisParameters />
+          </TabPanel>
+
+          <TabPanel value={currentTab} index={1}>
+            <ContaminantSchemeQuery onViewResults={() => setCurrentTab(2)} />
+          </TabPanel>
+
+          <TabPanel value={currentTab} index={2}>
+            <ContaminantResultsPanel schemeName={data?.schemeName} />
+          </TabPanel>
+        </Box>
+      </Drawer>
+    </>
+  );
+};
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      className="flex-1 overflow-hidden flex flex-col"
+    >
+      {value === index && (
+        <Box className="flex-1 overflow-auto p-4">{children}</Box>
+      )}
+    </div>
+  );
+};
+
+export default WaterQualityPanel;

src/components/olmap/FlushingAnalysis/AnalysisParameters.tsx

@@ -0,0 +1,451 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import {
+  Box,
+  TextField,
+  Button,
+  Typography,
+  IconButton,
+  Stack,
+  Alert,
+  Divider,
+} from "@mui/material";
+import { Close as CloseIcon } from "@mui/icons-material";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { zhCN as pickerZhCN } from "@mui/x-date-pickers/locales";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import "dayjs/locale/zh-cn";
+import dayjs, { Dayjs } from "dayjs";
+import { useMap } from "@app/OlMap/MapComponent";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import { Style, Stroke, Fill, Circle as CircleStyle } from "ol/style";
+import { handleMapClickSelectFeatures as mapClickSelectFeatures } 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";
+
+interface ValveItem {
+  id: string;
+  k: number;
+  feature?: any;
+}
+
+const AnalysisParameters: React.FC = () => {
+  const map = useMap();
+  const { open } = useNotification();
+
+  // State
+  const [schemeName, setSchemeName] = useState<string>(
+    "Flushing_" + new Date().getTime(),
+  );
+  const [valves, setValves] = useState<ValveItem[]>([]);
+  const [drainageNode, setDrainageNode] = useState<string | null>(null);
+  const [drainageFeature, setDrainageFeature] = useState<Feature | null>(null);
+
+  const [startTime, setStartTime] = useState<Dayjs | null>(dayjs(new Date()));
+  const [flushFlow, setFlushFlow] = useState<number>(200);
+  const [duration, setDuration] = useState<number>(3600);
+
+  const [selectionMode, setSelectionMode] = useState<'none' | 'valve' | 'drainage'>('none');
+  const [analyzing, setAnalyzing] = useState<boolean>(false);
+
+  const [highlightLayer, setHighlightLayer] = useState<VectorLayer<VectorSource> | null>(null);
+
+  // Initialize highlight layer
+  useEffect(() => {
+    if (!map) return;
+
+    const highlightStyle = function (feature: FeatureLike) {
+      const styles = [];
+      const type = feature.get("type"); // We will set this property when adding to source
+
+      if (type === "valve") {
+        styles.push(
+          new Style({
+            image: new CircleStyle({
+              radius: 8,
+              fill: new Fill({ color: "rgba(255, 165, 0, 0.8)" }), // Orange for valves
+              stroke: new Stroke({ color: "white", width: 2 }),
+            }),
+          })
+        );
+      } else if (type === "drainage") {
+        styles.push(
+          new Style({
+            image: new CircleStyle({
+              radius: 8,
+              fill: new Fill({ color: "rgba(0, 0, 255, 0.8)" }), // Blue for drainage
+              stroke: new Stroke({ color: "white", width: 2 }),
+            }),
+          })
+        );
+      }
+      return styles;
+    };
+
+    const layer = new VectorLayer({
+      source: new VectorSource(),
+      style: highlightStyle,
+      zIndex: 1000,
+      properties: {
+        name: "FlushingHighlight",
+      },
+    });
+
+    map.addLayer(layer);
+    setHighlightLayer(layer);
+
+    return () => {
+      map.removeLayer(layer);
+      map.un("click", handleMapClickSelectFeatures);
+    };
+  }, [map]);
+
+  // Update highlight layer features
+  useEffect(() => {
+    if (!highlightLayer) return;
+    const source = highlightLayer.getSource();
+    if (!source) return;
+
+    source.clear();
+
+    // Add valves
+    valves.forEach((v) => {
+      if (v.feature) {
+        const f = v.feature.clone(); // Clone to avoid modifying original
+        f.set("type", "valve");
+        // Ensure geometry is present (it should be for features from map)
+        if (f.getGeometry()) {
+          source.addFeature(f);
+        }
+      }
+    });
+
+    // Add drainage node
+    if (drainageFeature) {
+      const f = drainageFeature.clone();
+      f.set("type", "drainage");
+      source.addFeature(f);
+    }
+
+  }, [highlightLayer, valves, drainageFeature]);
+
+  // Map click handler
+  const handleMapClickSelectFeatures = useCallback(
+    async (event: { coordinate: number[] }) => {
+      if (!map || selectionMode === 'none') return;
+
+      const feature = await mapClickSelectFeatures(event, map);
+      if (!feature) return;
+
+      const layer = feature.getId()?.toString().split(".")[0];
+      const featureId = feature.getProperties().id;
+
+      if (selectionMode === 'valve') {
+        if (layer !== 'geo_valves') {
+          open?.({
+            type: "error",
+            message: "请选择阀门要素",
+          });
+          return;
+        }
+
+        setValves((prev) => {
+          if (prev.some((v) => v.id === featureId)) {
+            open?.({
+              type: "error",
+              message: "该阀门已添加",
+            });
+            return prev;
+          }
+          return [...prev, { id: featureId, k: 1.0, feature }]; // Default k=1.0? User can change.
+        });
+
+      } else if (selectionMode === 'drainage') {
+        if (layer !== 'geo_junctions') {
+          open?.({
+            type: "error",
+            message: "请选择节点要素作为排水点",
+          });
+          return;
+        }
+        setDrainageNode(featureId);
+        setDrainageFeature(feature);
+        setSelectionMode('none'); // Auto exit selection after picking one
+        map.un("click", handleMapClickSelectFeatures);
+      }
+    },
+    [map, selectionMode, open]
+  );
+
+  // Bind click event based on selection mode
+  useEffect(() => {
+    if (!map || selectionMode === "none") return;
+
+    map.on("click", handleMapClickSelectFeatures);
+
+    return () => {
+      map.un("click", handleMapClickSelectFeatures);
+    };
+  }, [map, selectionMode, handleMapClickSelectFeatures]);
+
+  // Toggle selection
+  const toggleSelection = (mode: 'valve' | 'drainage') => {
+    // If clicking same mode, turn off
+    if (selectionMode === mode) {
+      setSelectionMode('none');
+    } else {
+      setSelectionMode(mode);
+    }
+  };
+
+  const handleRemoveValve = (id: string) => {
+    setValves((prev) => prev.filter((v) => v.id !== id));
+  };
+
+  const handleValveKChange = (id: string, k: string) => {
+    const numK = parseFloat(k);
+    setValves(prev => prev.map(v => v.id === id ? { ...v, k: isNaN(numK) ? 0 : numK } : v));
+  };
+
+  const handleAnalyze = async () => {
+    if (!startTime || !drainageNode || !schemeName.trim()) {
+      open?.({
+        type: "error",
+        message: "请填写完整参数",
+        description: "方案名称、开始时间和排水点为必填项",
+      });
+      return;
+    }
+
+    setAnalyzing(true);
+
+    try {
+      const formattedTime = startTime.format("YYYY-MM-DDTHH:mm:00");
+
+      const params = {
+        scheme_name: schemeName,
+        network: NETWORK_NAME,
+        start_time: formattedTime,
+        valves: valves.map(v => v.id),
+        valves_k: valves.map(v => v.k),
+        drainage_node_ID: drainageNode,
+        flush_flow: flushFlow,
+        duration: duration
+      };
+
+      // Use params serializer to handle array params correctly if needed, 
+      // but axios usually handles array as valves[]=1&valves[]=2
+      // FastAPI default expects repeated query params.
+
+      const response = await api.get(`${config.BACKEND_URL}/flushing_analysis/`, {
+        params,
+        // Ensure arrays are sent as repeated keys: valves=1&valves=2
+        paramsSerializer: {
+          indexes: null // Result: valves=1&valves=2
+        }
+      });
+      if (response.status !== 200) {
+        throw new Error(`分析请求失败，状态码: ${response.status}`);
+      }
+      open?.({
+        type: "success",
+        message: "方案分析成功",
+        description: "管道冲洗模拟完成，请在方案查询中查看结果。",
+      });
+    } catch (error) {
+      console.error("提交分析失败", error);
+      open?.({
+        type: "error",
+        message: "提交分析失败",
+        description: error instanceof Error ? error.message : "未知错误",
+      });
+    } finally {
+      setAnalyzing(false);
+    }
+  };
+
+  return (
+    <Box className="flex flex-col h-full gap-4 pb-4">
+      {/* 1. Valve Selection */}
+      <Box>
+        <Box className="flex items-center justify-between mb-2">
+          <Typography variant="subtitle2" className="font-medium">
+            参与阀门
+          </Typography>
+          <Button
+            variant={selectionMode === 'valve' ? "contained" : "outlined"}
+            color={selectionMode === 'valve' ? "error" : "primary"}
+            size="small"
+            onClick={() => toggleSelection('valve')}
+          >
+            {selectionMode === 'valve' ? "停止选择" : "选择阀门"}
+          </Button>
+        </Box>
+        {selectionMode === 'valve' && (
+          <Box className="mb-2 p-2 bg-blue-50 text-xs text-blue-700 rounded">
+            💡 点击地图上的阀门进行添加
+          </Box>
+        )}
+        <Stack spacing={1} className="max-h-50 h-48 overflow-auto">
+          {valves.map((valve) => (
+            <Box key={valve.id} className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+              <Typography className="text-sm flex-1 pl-1">{valve.id}</Typography>
+              <TextField
+                label="开度"
+                size="small"
+                type="number"
+                value={valve.k}
+                onChange={(e) => handleValveKChange(valve.id, e.target.value)}
+                className="w-20"
+                slotProps={{ htmlInput: { step: 0.1, min: 0, max: 1 } }}
+              />
+              <IconButton size="small" onClick={() => handleRemoveValve(valve.id)}>
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          ))}
+          {valves.length === 0 && (
+            <Typography variant="caption" className="text-gray-400 text-center py-20">
+              暂无选中阀门
+            </Typography>
+          )}
+        </Stack>
+      </Box>
+
+      <Divider />
+
+      {/* 2. Drainage Node Selection */}
+      <Box>
+        <Box className="flex items-center justify-between mb-2">
+          <Typography variant="subtitle2" className="font-medium">
+            排水节点
+          </Typography>
+          <Button
+            variant={selectionMode === 'drainage' ? "contained" : "outlined"}
+            color={selectionMode === 'drainage' ? "error" : "primary"}
+            size="small"
+            onClick={() => toggleSelection('drainage')}
+          >
+            {selectionMode === 'drainage' ? "停止选择" : "选择节点"}
+          </Button>
+        </Box>
+        {selectionMode === 'drainage' && (
+          <Box className="mb-2 p-2 bg-blue-50 text-xs text-blue-700 rounded">
+            💡 点击地图上的节点作为排水点
+          </Box>
+        )}
+        <Stack spacing={1} className="h-12 overflow-auto">
+          {drainageNode && (
+            <Box className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+              <Typography className="text-sm flex-1 pl-1">{drainageNode}</Typography>
+              <IconButton
+                size="small"
+                onClick={() => {
+                  setDrainageNode(null);
+                  setDrainageFeature(null);
+                }}
+              >
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          )}
+          {!drainageNode && (
+            <Typography variant="caption" className="text-gray-400 text-center py-2">
+              暂无选中排水节点
+            </Typography>
+          )}
+        </Stack>
+      </Box>
+
+      <Divider />
+
+      {/* 3. Parameters */}
+      <Box className="flex flex-col gap-3">
+        <Box>
+          <Typography variant="subtitle2" className="mb-1 font-medium">
+            开始时间
+          </Typography>
+          <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
+            <DateTimePicker
+              value={startTime}
+              onChange={(newValue) => setStartTime(newValue)}
+              format="YYYY-MM-DD HH:mm"
+              slotProps={{ textField: { size: "small", fullWidth: true } }}
+              localeText={
+                pickerZhCN.components.MuiLocalizationProvider.defaultProps
+                  .localeText
+              }
+            />
+          </LocalizationProvider>
+        </Box>
+
+        {/* Scheme Name */}
+        <Box>
+          <Typography variant="subtitle2" className="mb-1 font-medium">
+            方案名称
+          </Typography>
+          <TextField
+            fullWidth
+            size="small"
+            value={schemeName}
+            onChange={(e) => setSchemeName(e.target.value)}
+            placeholder="请输入方案名称"
+          />
+        </Box>
+
+        <Box className="flex gap-2">
+          <Box className="flex-1">
+            <Typography variant="subtitle2" className="mb-1 font-medium">
+              冲洗流量 (CMH)
+            </Typography>
+            <TextField
+              fullWidth
+              size="small"
+              type="number"
+              value={flushFlow}
+              onChange={(e) => setFlushFlow(parseFloat(e.target.value) || 0)}
+            />
+          </Box>
+          <Box className="flex-1">
+            <Typography variant="subtitle2" className="mb-1 font-medium">
+              持续时长 (秒)
+            </Typography>
+            <TextField
+              fullWidth
+              size="small"
+              type="number"
+              value={duration}
+              onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
+            />
+          </Box>
+        </Box>
+      </Box>
+
+      <Box className="mt-2">
+        <Button
+          fullWidth
+          variant="contained"
+          onClick={handleAnalyze}
+          disabled={
+            analyzing ||
+            !schemeName.trim() ||
+            !drainageNode ||
+            !startTime ||
+            // !flushFlow ||
+            !duration
+          }
+          className="bg-blue-600 hover:bg-blue-700"
+        >
+          {analyzing ? "分析中..." : "开始分析"}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default AnalysisParameters;

src/components/olmap/FlushingAnalysis/FlushingAnalysisPanel.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  Box,
+  Drawer,
+  Tabs,
+  Tab,
+  Typography,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
+import {
+  ChevronRight,
+  ChevronLeft,
+  Analytics as AnalyticsIcon,
+  Search as SearchIcon,
+} from "@mui/icons-material";
+import { MdCleaningServices } from "react-icons/md";
+import AnalysisParameters from "./AnalysisParameters";
+import SchemeQuery from "./SchemeQuery";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      className="flex-1 overflow-hidden flex flex-col"
+    >
+      {value === index && (
+        <Box className="flex-1 overflow-auto p-4">{children}</Box>
+      )}
+    </div>
+  );
+};
+
+interface FlushingAnalysisPanelProps {
+  open?: boolean;
+  onToggle?: () => void;
+}
+
+const FlushingAnalysisPanel: React.FC<FlushingAnalysisPanelProps> = ({
+  open: controlledOpen,
+  onToggle,
+}) => {
+  const [internalOpen, setInternalOpen] = useState(true);
+  const [currentTab, setCurrentTab] = useState(0);
+
+  // Using controlled or uncontrolled state
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const handleToggle = () => {
+    if (onToggle) {
+      onToggle();
+    } else {
+      setInternalOpen(!internalOpen);
+    }
+  };
+
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setCurrentTab(newValue);
+  };
+
+  const drawerWidth = 450; // Slightly narrower than burst analysis as we have fewer tabs
+  const panelTitle = "管道冲洗分析";
+
+  return (
+    <>
+      {/* Toggle Button when closed */}
+      {!isOpen && (
+        <Box
+          className="absolute top-4 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
+          onClick={handleToggle}
+          sx={{ zIndex: 1300 }}
+        >
+          <Box className="flex flex-col items-center py-3 px-3 gap-1">
+            <MdCleaningServices className="text-[#257DD4] w-5 h-5" />
+            <Typography
+              variant="caption"
+              className="text-gray-700 font-semibold my-1 text-xs"
+              style={{ writingMode: "vertical-rl" }}
+            >
+              {panelTitle}
+            </Typography>
+            <ChevronLeft className="text-gray-600 w-4 h-4" />
+          </Box>
+        </Box>
+      )}
+
+      {/* Main Panel */}
+      <Drawer
+        anchor="right"
+        open={isOpen}
+        variant="persistent"
+        hideBackdrop
+        sx={{
+          width: 0,
+          flexShrink: 0,
+          "& .MuiDrawer-paper": {
+            width: drawerWidth,
+            boxSizing: "border-box",
+            position: "absolute",
+            top: 16,
+            right: 16,
+            height: "calc(100vh - 32px)",
+            maxHeight: "850px",
+            borderRadius: "12px",
+            boxShadow:
+              "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+            backdropFilter: "blur(8px)",
+            opacity: 0.95,
+            transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
+            border: "none",
+            "&:hover": {
+              opacity: 1,
+            },
+          },
+        }}
+      >
+        <Box className="flex flex-col h-full bg-white rounded-xl overflow-hidden">
+          {/* Header */}
+          <Box className="flex items-center justify-between px-5 py-4 bg-[#257DD4] text-white">
+            <Box className="flex items-center gap-2">
+              <MdCleaningServices className="w-5 h-5" />
+              <Typography variant="h6" className="text-lg font-semibold">
+                {panelTitle}
+              </Typography>
+            </Box>
+            <Tooltip title="收起">
+              <IconButton
+                size="small"
+                onClick={handleToggle}
+                sx={{ color: "primary.contrastText" }}
+              >
+                <ChevronRight fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </Box>
+
+          <Box className="border-b border-gray-200 bg-white">
+            <Tabs
+              value={currentTab}
+              onChange={handleTabChange}
+              variant="fullWidth"
+              sx={{
+                minHeight: 48,
+                "& .MuiTab-root": {
+                  minHeight: 48,
+                  textTransform: "none",
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  transition: "all 0.2s",
+                },
+                "& .Mui-selected": {
+                  color: "#257DD4",
+                },
+                "& .MuiTabs-indicator": {
+                  backgroundColor: "#257DD4",
+                },
+              }}
+            >
+              <Tab
+                icon={<AnalyticsIcon fontSize="small" />}
+                iconPosition="start"
+                label="分析参数"
+              />
+              <Tab
+                icon={<SearchIcon fontSize="small" />}
+                iconPosition="start"
+                label="方案查询"
+              />
+            </Tabs>
+          </Box>
+
+          {/* Tab Content */}
+          <TabPanel value={currentTab} index={0}>
+            <AnalysisParameters />
+          </TabPanel>
+
+          <TabPanel value={currentTab} index={1}>
+            <SchemeQuery />
+          </TabPanel>
+        </Box>
+      </Drawer>
+    </>
+  );
+};
+
+export default FlushingAnalysisPanel;

src/components/olmap/FlushingAnalysis/SchemeQuery.tsx

@@ -0,0 +1,584 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+
+import {
+  Box,
+  Button,
+  Typography,
+  Checkbox,
+  FormControlLabel,
+  IconButton,
+  Card,
+  CardContent,
+  Chip,
+  Tooltip,
+  Collapse,
+  Link,
+} from "@mui/material";
+import {
+  Info as InfoIcon,
+  Search as SearchIcon,
+  LocationOn as LocationIcon,
+} from "@mui/icons-material";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import "dayjs/locale/zh-cn";
+import dayjs, { Dayjs } from "dayjs";
+import { api } from "@/lib/api";
+import moment from "moment";
+import { config, NETWORK_NAME } from "@config/config";
+import { useNotification } from "@refinedev/core";
+import { useData, useMap } from "@app/OlMap/MapComponent";
+import { queryFeaturesByIds } from "@/utils/mapQueryService";
+import { GeoJSON } from "ol/format";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import { Style, Icon, Circle, Fill, Stroke } from "ol/style";
+import Feature, { FeatureLike } from "ol/Feature";
+import { bbox, featureCollection } from "@turf/turf";
+import Timeline from "@app/OlMap/Controls/Timeline";
+import { SchemeRecord, SchemaItem } from "./types";
+
+interface SchemeQueryProps {
+  schemes?: SchemeRecord[];
+  onSchemesChange?: (schemes: SchemeRecord[]) => void;
+  network?: string;
+}
+
+const SCHEME_TYPE = "flushing_analysis";
+
+const SchemeQuery: React.FC<SchemeQueryProps> = ({
+  schemes: externalSchemes,
+  onSchemesChange,
+  network = NETWORK_NAME,
+}) => {
+  const [queryAll, setQueryAll] = useState<boolean>(true);
+  const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs(new Date()));
+  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();
+  const map = useMap();
+  const data = useData();
+  const { schemeName, setSchemeName } = data || {};
+
+  const schemes = externalSchemes !== undefined ? externalSchemes : internalSchemes;
+  const setSchemes = onSchemesChange || setInternalSchemes;
+
+  useEffect(() => {
+    if (!map) return;
+    const target = map.getTargetElement();
+    if (target) {
+      setMapContainer(target);
+    }
+  }, [map]);
+
+  // Initialize highlight layer
+  useEffect(() => {
+    if (!map) return;
+
+    const themeColor = "rgba(0, 0, 255"; // Blue for drainage
+    const valveColor = "rgba(255, 165, 0"; // Orange for valves
+
+    const sourceStyle = function (feature: FeatureLike) {
+      const type = (feature as any).get("type");
+      if (type === "valve") {
+        return [
+          new Style({
+            image: new Circle({
+              radius: 8,
+              fill: new Fill({ color: `${valveColor}, 0.8)` }),
+              stroke: new Stroke({ color: "white", width: 2 }),
+            }),
+          })
+        ];
+      } else {
+        // Default drainage
+        return [
+          new Style({
+            image: new Circle({
+              radius: 12,
+              fill: new Fill({ color: `${themeColor}, 0.2)` }),
+            }),
+          }),
+          new Style({
+            image: new Circle({
+              radius: 8,
+              stroke: new Stroke({ color: `${themeColor}, 0.5)`, width: 2 }),
+              fill: new Fill({ color: `${themeColor}, 0.3)` }),
+            }),
+          }),
+          new Style({
+            image: new Circle({
+              radius: 4,
+              fill: new Fill({ color: `${themeColor}, 1)` }),
+              stroke: new Stroke({ color: "white", width: 1 }),
+            })
+          }),
+        ];
+      }
+    };
+
+    const layer = new VectorLayer({
+      source: new VectorSource(),
+      style: sourceStyle,
+      zIndex: 1000,
+      properties: {
+        name: "FlushingQueryResultHighlight",
+      },
+    });
+
+    map.addLayer(layer);
+    setHighlightLayer(layer);
+
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map]);
+
+  // Update highlight features
+  useEffect(() => {
+    if (!highlightLayer) return;
+    const source = highlightLayer.getSource();
+    if (!source) return;
+
+    source.clear();
+    highlightFeatures.forEach((feature) => {
+      if (feature instanceof Feature) {
+        source.addFeature(feature);
+      }
+    });
+  }, [highlightFeatures, highlightLayer]);
+
+  const handleLocateDrainageNode = (nodeId: string) => {
+    if (!nodeId) return;
+    queryFeaturesByIds([nodeId], "geo_junctions_mat").then((features) => {
+      if (features.length > 0) {
+        // Add type property to distinguish styling
+        features.forEach(f => f.set("type", "drainage"));
+        setHighlightFeatures(features);
+        zoomToFeatures(features);
+      } else {
+        open?.({
+          type: "error",
+          message: "未找到该节点要素",
+        });
+      }
+    });
+  };
+
+  const handleLocateValves = (valveIds: string[]) => {
+    if (!valveIds || valveIds.length === 0) return;
+    queryFeaturesByIds(valveIds, "geo_valves").then((features) => {
+      if (features.length > 0) {
+        features.forEach(f => f.set("type", "valve"));
+        setHighlightFeatures(features);
+        zoomToFeatures(features);
+      } else {
+        open?.({
+          type: "error",
+          message: "未找到阀门要素",
+        });
+      }
+    });
+  };
+
+  const zoomToFeatures = (features: Feature[]) => {
+    const geojsonFormat = new GeoJSON();
+    const geojsonFeatures = features.map((feature) =>
+      geojsonFormat.writeFeatureObject(feature),
+    );
+    const extent = bbox(featureCollection(geojsonFeatures as any));
+    if (extent) {
+      map?.getView().fit(extent, {
+        maxZoom: 18,
+        duration: 1000,
+        padding: [50, 50, 50, 50],
+      });
+    }
+  };
+
+  const formatTime = (timeStr: string) => {
+    return moment(timeStr).format("MM-DD HH:mm");
+  };
+
+  const handleQuery = async () => {
+    if (!queryAll && !queryDate) return;
+
+    setLoading(true);
+    try {
+      const response = await api.get(
+        `${config.BACKEND_URL}/api/v1/getallschemes/?network=${network}`,
+      );
+
+      let filteredResults = response.data;
+
+      // Filter by type
+      filteredResults = filteredResults.filter((item: SchemaItem) => item.scheme_type === SCHEME_TYPE);
+
+      if (!queryAll && queryDate) {
+        const formattedDate = queryDate.format("YYYY-MM-DD");
+        filteredResults = filteredResults.filter((item: SchemaItem) => {
+          const itemDate = moment(item.create_time).format("YYYY-MM-DD");
+          return itemDate === formattedDate;
+        });
+      }
+
+      setSchemes(
+        filteredResults.map((item: SchemaItem) => ({
+          id: item.scheme_id,
+          schemeName: item.scheme_name,
+          type: item.scheme_type,
+          user: item.username,
+          create_time: item.create_time,
+          startTime: item.scheme_start_time,
+          schemeDetail: item.scheme_detail,
+        })),
+      );
+
+      if (filteredResults.length === 0) {
+        open?.({
+          type: "error",
+          message: "未找到相关方案",
+          description: "请尝试更改查询条件",
+        });
+      }
+    } catch (error) {
+      console.error("查询请求失败:", error);
+      open?.({
+        type: "error",
+        message: "查询失败",
+        description: "获取方案列表失败，请稍后重试",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleViewResults = (scheme: SchemeRecord) => {
+    setShowTimeline(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 });
+    }
+
+    setSchemeName?.(scheme.schemeName);
+
+    // Locate drainage node by default if available
+    if (scheme.schemeDetail?.drainage_node_ID) {
+      handleLocateDrainageNode(scheme.schemeDetail.drainage_node_ID);
+    }
+  };
+
+  return (
+    <>
+      {showTimeline &&
+        mapContainer &&
+        ReactDOM.createPortal(
+          <Timeline
+            schemeDate={selectedDate}
+            timeRange={timeRange}
+            disableDateSelection={!!timeRange}
+            schemeName={schemeName}
+            schemeType={SCHEME_TYPE}
+          />,
+          mapContainer,
+        )}
+      <Box className="flex flex-col h-full">
+        {/* Query Controls */}
+        <Box className="mb-2 p-2 bg-gray-50 rounded">
+          <Box className="flex items-center gap-2 justify-between">
+            <Box className="flex items-center gap-2">
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={queryAll}
+                    onChange={(e) => setQueryAll(e.target.checked)}
+                    size="small"
+                  />
+                }
+                label={<Typography variant="body2">查询全部</Typography>}
+                className="m-0"
+              />
+              <LocalizationProvider
+                dateAdapter={AdapterDayjs}
+                adapterLocale="zh-cn"
+              >
+                <DatePicker
+                  value={queryDate}
+                  onChange={(value) =>
+                    value && dayjs.isDayjs(value) && setQueryDate(value)
+                  }
+                  format="YYYY-MM-DD"
+                  disabled={queryAll}
+                  slotProps={{
+                    textField: {
+                      size: "small",
+                      sx: { width: 160 },
+                    },
+                  }}
+                />
+              </LocalizationProvider>
+            </Box>
+            <Button
+              variant="contained"
+              onClick={handleQuery}
+              disabled={loading}
+              size="small"
+              startIcon={<SearchIcon />}
+              className="bg-blue-600 hover:bg-blue-700"
+            >
+              查询
+            </Button>
+          </Box>
+        </Box>
+
+        {/* Results List */}
+        <Box className="flex-1 overflow-auto">
+          {schemes.length === 0 ? (
+            <Box className="flex flex-col items-center justify-center h-full text-gray-400">
+              <Typography variant="body2">暂无方案数据</Typography>
+            </Box>
+          ) : (
+            <Box className="space-y-2 p-1">
+              <Typography variant="caption" className="text-gray-500 px-1">
+                共 {schemes.length} 条记录
+              </Typography>
+              {schemes.map((scheme) => (
+                <Card
+                  key={scheme.id}
+                  variant="outlined"
+                  className="hover:shadow-md transition-shadow"
+                >
+                  <CardContent className="p-3 pb-2 last:pb-3">
+                    <Box className="flex items-start justify-between mb-2">
+                      <Box className="flex-1 min-w-0">
+                        <Box className="flex items-center gap-2 mb-1">
+                          <Typography
+                            variant="body2"
+                            className="font-medium truncate"
+                            title={scheme.schemeName}
+                          >
+                            {scheme.schemeName}
+                          </Typography>
+                          <Chip
+                            label="冲洗模拟"
+                            size="small"
+                            className="h-5"
+                            color="primary"
+                            variant="outlined"
+                          />
+                        </Box>
+                        <Typography
+                          variant="caption"
+                          className="text-gray-500 block"
+                        >
+                          用户: {scheme.user} · 时间: {formatTime(scheme.create_time)}
+                        </Typography>
+                      </Box>
+                      <Box className="flex gap-1 ml-2">
+                        <Tooltip title="定位排水口">
+                          <IconButton
+                            size="small"
+                            onClick={() =>
+                              scheme.schemeDetail?.drainage_node_ID &&
+                              handleLocateDrainageNode(scheme.schemeDetail.drainage_node_ID)
+                            }
+                            color="primary"
+                            className="p-1"
+                          >
+                            <LocationIcon fontSize="small" />
+                          </IconButton>
+                        </Tooltip>
+                        <Tooltip
+                          title={
+                            expandedId === scheme.id ? "收起详情" : "查看详情"
+                          }
+                        >
+                          <IconButton
+                            size="small"
+                            onClick={() =>
+                              setExpandedId(
+                                expandedId === scheme.id ? null : scheme.id,
+                              )
+                            }
+                            color="primary"
+                            className="p-1"
+                          >
+                            <InfoIcon fontSize="small" />
+                          </IconButton>
+                        </Tooltip>
+                      </Box>
+                    </Box>
+
+                    <Collapse in={expandedId === scheme.id}>
+                      <Box className="mt-2 pt-3 border-t border-gray-200">
+                        <Box className="grid grid-cols-2 gap-x-4 gap-y-3 mb-3">
+                          <Box className="space-y-2">
+                            <Box className="space-y-1.5 pl-2">
+                              {/* 排水节点 */}
+                              <Box className="flex items-start gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px] mt-0.5">
+                                  排水节点:
+                                </Typography>
+                                <Box className="flex-1">
+                                  {scheme.schemeDetail?.drainage_node_ID ? (
+                                    <Link
+                                      component="button"
+                                      variant="caption"
+                                      className="font-medium text-blue-600 hover:text-blue-800 underline cursor-pointer"
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        handleLocateDrainageNode(scheme.schemeDetail!.drainage_node_ID);
+                                      }}
+                                    >
+                                      {scheme.schemeDetail.drainage_node_ID}
+                                    </Link>
+                                  ) : (
+                                    <Typography variant="caption" className="font-medium text-gray-900">
+                                      N/A
+                                    </Typography>
+                                  )}
+                                </Box>
+                              </Box>
+
+                              {/* 冲洗流量 */}
+                              <Box className="flex items-center gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px]">
+                                  冲洗流量:
+                                </Typography>
+                                <Typography variant="caption" className="font-medium text-gray-900">
+                                  {scheme.schemeDetail?.flushing_flow ?? "-"} m³/h
+                                </Typography>
+                              </Box>
+
+                              {/* 持续时长 */}
+                              <Box className="flex items-center gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px]">
+                                  持续时长:
+                                </Typography>
+                                <Typography variant="caption" className="font-medium text-gray-900">
+                                  {scheme.schemeDetail?.duration ?? "-"} 秒
+                                </Typography>
+                              </Box>
+                            </Box>
+                          </Box>
+
+                          <Box className="space-y-2">
+                            <Box className="space-y-1.5 pl-2">
+                              {/* 用户 */}
+                              <Box className="flex items-center gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px]">
+                                  用户:
+                                </Typography>
+                                <Typography variant="caption" className="font-medium text-gray-900">
+                                  {scheme.user}
+                                </Typography>
+                              </Box>
+
+                              {/* 创建时间 */}
+                              <Box className="flex items-center gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px]">
+                                  创建时间:
+                                </Typography>
+                                <Typography variant="caption" className="font-medium text-gray-900">
+                                  {formatTime(scheme.create_time)}
+                                </Typography>
+                              </Box>
+
+                              {/* 开始时间 */}
+                              <Box className="flex items-center gap-2">
+                                <Typography variant="caption" className="text-gray-600 min-w-[70px]">
+                                  模拟开始:
+                                </Typography>
+                                <Typography variant="caption" className="font-medium text-gray-900">
+                                  {formatTime(scheme.startTime)}
+                                </Typography>
+                              </Box>
+                            </Box>
+                          </Box>
+
+                          {/* 阀门列表 */}
+                          <Box className="col-span-2 pl-2">
+                            <Typography variant="caption" className="text-gray-600 block mb-1">
+                              参与阀门及开度:
+                            </Typography>
+                            <Box className="flex flex-wrap gap-2">
+                              {scheme.schemeDetail?.valve_opening && Object.entries(scheme.schemeDetail.valve_opening).length > 0 ? (
+                                Object.entries(scheme.schemeDetail.valve_opening).map(([id, k]) => (
+                                  <Tooltip key={id} title="点击定位阀门">
+                                    <Chip
+                                      label={`${id}: ${k}`}
+                                      size="small"
+                                      variant="outlined"
+                                      onClick={() => handleLocateValves([id])}
+                                      className="text-xs h-6 bg-gray-50 cursor-pointer hover:bg-orange-50 hover:border-orange-200"
+                                    />
+                                  </Tooltip>
+                                ))
+                              ) : (
+                                <Typography variant="caption" className="text-gray-400">无</Typography>
+                              )}
+                            </Box>
+                          </Box>
+                        </Box>
+
+                        <Box className="pt-2 border-t border-gray-100 flex gap-2">
+                          <Button
+                            variant="outlined"
+                            fullWidth
+                            size="small"
+                            className="border-blue-600 text-blue-600 hover:bg-blue-50"
+                            onClick={() =>
+                              scheme.schemeDetail?.drainage_node_ID &&
+                              handleLocateDrainageNode(scheme.schemeDetail.drainage_node_ID)
+                            }
+                            startIcon={<LocationIcon className="w-4 h-4" />}
+                            sx={{ textTransform: "none", fontWeight: 500 }}
+                          >
+                            定位排水口
+                          </Button>
+                          <Button
+                            variant="contained"
+                            fullWidth
+                            size="small"
+                            className="bg-blue-600 hover:bg-blue-700"
+                            onClick={() => handleViewResults(scheme)}
+                            sx={{ textTransform: "none", fontWeight: 500 }}
+                          >
+                            查看模拟结果
+                          </Button>
+                        </Box>
+                      </Box>
+                    </Collapse>
+                  </CardContent>
+                </Card>
+              ))}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default SchemeQuery;

src/components/olmap/FlushingAnalysis/types.ts

@@ -0,0 +1,27 @@
+export interface SchemeDetail {
+  valve_opening: Record<string, number>;
+  drainage_node_ID: string;
+  flushing_flow: number;
+  duration: number;
+}
+
+export interface SchemeRecord {
+  id: number;
+  schemeName: string;
+  type: string;
+  user: string;
+  create_time: string;
+  startTime: string;
+  // 详情信息
+  schemeDetail?: SchemeDetail;
+}
+
+export interface SchemaItem {
+  scheme_id: number;
+  scheme_name: string;
+  scheme_type: string;
+  username: string;
+  create_time: string;
+  scheme_start_time: string;
+  scheme_detail?: SchemeDetail;
+}

src/components/olmap/HealthRiskAnalysis/Timeline.tsx

@@ -29,6 +29,7 @@ import { TbArrowBackUp, TbArrowForwardUp } from "react-icons/tb";
 import { FiSkipBack, FiSkipForward } from "react-icons/fi";
 import { useData } from "../../../app/OlMap/MapComponent";
 import { config, NETWORK_NAME } from "@/config/config";
+import { apiFetch } from "@/lib/apiFetch";
 import { useMap } from "../../../app/OlMap/MapComponent";
 import { useHealthRisk } from "./HealthRiskContext";
 import {
@@ -422,7 +423,7 @@ const Timeline: React.FC<TimelineProps> = ({
       undoableTimeout: 3,
     });
     try {
-      const response = await fetch(
+      const response = await apiFetch(
         `${config.BACKEND_URL}/api/v1/composite/pipeline-health-prediction?query_time=${query_time}&network_name=${NETWORK_NAME}`,
       );
 

src/components/olmap/MonitoringPlaceOptimization/OptimizationParameters.tsx

@@ -12,12 +12,12 @@ import {
 import { PlayArrow as PlayArrowIcon } from "@mui/icons-material";
 import { useNotification } from "@refinedev/core";
 import { useGetIdentity } from "@refinedev/core";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config, NETWORK_NAME } from "@/config/config";
 
 type IUser = {
-  id: number;
-  name: string;
+  id: string;
+  name?: string;
 };
 
 const OptimizationParameters: React.FC = () => {
@@ -83,7 +83,7 @@ const OptimizationParameters: React.FC = () => {
 
     setAnalyzing(true);
 
-    if (!user || !user.name) {
+    if (!user || !user.id) {
       open?.({
         type: "error",
         message: "用户信息无效",
@@ -93,7 +93,7 @@ const OptimizationParameters: React.FC = () => {
 
     try {
       // 发送优化请求
-      const response = await axios.post(
+      const response = await api.post(
         `${config.BACKEND_URL}/api/v1/sensorplacementscheme/create`,
         null,
         {
@@ -104,6 +104,7 @@ const OptimizationParameters: React.FC = () => {
             method: method,
             sensor_count: sensorCount,
             min_diameter: minDiameter,
+            user_id: user.id,
             user_name: user.name,
           },
         }

src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx

@@ -24,7 +24,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import "dayjs/locale/zh-cn"; // 引入中文包
 import dayjs, { Dayjs } from "dayjs";
-import axios from "axios";
+import { api } from "@/lib/api";
 import moment from "moment";
 import { config, NETWORK_NAME } from "@config/config";
 import { useNotification } from "@refinedev/core";
@@ -148,7 +148,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
 
     setLoading(true);
     try {
-      const response = await axios.get(
+      const response = await api.get(
         `${config.BACKEND_URL}/api/v1/getallsensorplacements/?network=${network}`,
       );
 

src/components/olmap/NetworkPartitionOptimization/ZonePropsPanel.tsx

@@ -7,6 +7,7 @@ import { Stroke } from "ol/style";
 import GeoJson from "ol/format/GeoJSON";
 import config from "@config/config";
 import { useMap } from "@app/OlMap/MapComponent";
+import { useProject } from "@/contexts/ProjectContext";
 
 interface PropertyItem {
   key: string;
@@ -26,6 +27,8 @@ const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({
   onClose,
 }) => {
   const map = useMap();
+  const project = useProject();
+  const workspace = project?.workspace;
 
   const [props, setProps] = React.useState<
     PropertyItem[] | Record<string, any>
@@ -103,9 +106,10 @@ const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({
     if (!map) {
       return;
     }
+    const workspaceValue = workspace || config.MAP_WORKSPACE;
     const networkZoneLayer = new VectorLayer({
       source: new VectorSource({
-        url: `${config.MAP_URL}/${config.MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${config.MAP_WORKSPACE}:network_zone&outputFormat=application/json`,
+        url: `${config.MAP_URL}/${workspaceValue}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${workspaceValue}:network_zone&outputFormat=application/json`,
         format: new GeoJson(),
       }),
       style: new Style({
@@ -155,7 +159,7 @@ const ZonePropsPanel: React.FC<ZonePropsPanelProps> = ({
       map.removeLayer(highlightLayer);
       map.un("click", clickListener);
     };
-  }, [map, handleMapClickSelectFeatures]);
+  }, [map, handleMapClickSelectFeatures, workspace]);
   // 获取中文标签
   const getChineseLabel = (key: string): string => {
     const labelMap: Record<string, string> = {

src/components/olmap/SCADADataPanel.tsx

@@ -37,14 +37,15 @@ import { zhCN as pickerZhCN } from "@mui/x-date-pickers/locales";
 import config from "@/config/config";
 import { useGetIdentity } from "@refinedev/core";
 import { useNotification } from "@refinedev/core";
-import axios from "axios";
+import { api } from "@/lib/api";
+import { apiFetch } from "@/lib/apiFetch";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
 type IUser = {
-  id: number;
-  name: string;
+  id: string;
+  name?: string;
 };
 
 export interface TimeSeriesPoint {
@@ -96,10 +97,10 @@ const fetchFromBackend = async (
   try {
     // 优先查询清洗数据和模拟数据
     const [cleaningRes, simulationRes] = await Promise.all([
-      fetch(cleaningDataUrl)
+      apiFetch(cleaningDataUrl)
         .then((r) => (r.ok ? r.json() : null))
         .catch(() => null),
-      fetch(simulationDataUrl)
+      apiFetch(simulationDataUrl)
         .then((r) => (r.ok ? r.json() : null))
         .catch(() => null),
     ]);
@@ -118,7 +119,7 @@ const fetchFromBackend = async (
       );
     } else {
       // 如果清洗数据没有数据，查询原始数据，返回模拟和原始数据
-      const rawRes = await fetch(rawDataUrl)
+      const rawRes = await apiFetch(rawDataUrl)
         .then((r) => (r.ok ? r.json() : null))
         .catch(() => null);
       const rawData = transformBackendData(rawRes, deviceIds);
@@ -338,13 +339,13 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
       const simulationDataUrl = `${config.BACKEND_URL}/api/v1/composite/scada-simulation?device_ids=${device_ids}&start_time=${start_time}&end_time=${end_time}`;
       try {
         const [cleanRes, rawRes, simRes] = await Promise.all([
-          fetch(cleaningDataUrl)
+          apiFetch(cleaningDataUrl)
             .then((r) => (r.ok ? r.json() : null))
             .catch(() => null),
-          fetch(rawDataUrl)
+          apiFetch(rawDataUrl)
             .then((r) => (r.ok ? r.json() : null))
             .catch(() => null),
-          fetch(simulationDataUrl)
+          apiFetch(simulationDataUrl)
             .then((r) => (r.ok ? r.json() : null))
             .catch(() => null),
         ]);
@@ -458,7 +459,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
       return;
     }
 
-    if (!user || !user.name) {
+    if (!user || !user.id) {
       open?.({
         type: "error",
         message: "用户信息无效，请重新登录",
@@ -474,7 +475,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
       const endTime = dayjs(rangeTo).toISOString();
 
       // 调用后端清洗接口
-      const response = await axios.post(
+      const response = await api.post(
         `${
           config.BACKEND_URL
         }/api/v1/composite/clean-scada?device_ids=${deviceIds.join(

src/components/olmap/SCADADeviceList.tsx

@@ -48,11 +48,12 @@ import {
 } from "@mui/icons-material";
 import { FixedSizeList } from "react-window";
 import { useNotification } from "@refinedev/core";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { useGetIdentity } from "@refinedev/core";
-import config, { NETWORK_NAME } from "@/config/config";
+import config from "@/config/config";
 
 import { useMap } from "@app/OlMap/MapComponent";
+import { useProject } from "@/contexts/ProjectContext";
 import { GeoJSON } from "ol/format";
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
 import VectorLayer from "ol/layer/Vector";
@@ -103,8 +104,8 @@ interface SCADADeviceListProps {
 }
 
 type IUser = {
-  id: number;
-  name: string;
+  id: string;
+  name?: string;
 };
 
 const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
@@ -180,12 +181,17 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
     }
   }, [pendingSelection, onSelectionChange]);
 
+  // Get workspace from context
+  const project = useProject();
+  const workspace = project?.workspace;
+
   // 初始化 SCADA 设备列表
   useEffect(() => {
     const fetchScadaDevices = async () => {
       setLoading(true);
       try {
-        const url = `${config.MAP_URL}/${config.MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${config.MAP_WORKSPACE}:geo_scada&outputFormat=application/json`;
+        const activeWorkspace = workspace || config.MAP_WORKSPACE;
+        const url = `${config.MAP_URL}/${activeWorkspace}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${activeWorkspace}:geo_scada&outputFormat=application/json`;
         const response = await fetch(url);
         if (!response.ok) throw new Error("Failed to fetch SCADA devices");
         const json = await response.json();
@@ -211,7 +217,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
       }
     };
     fetchScadaDevices();
-  }, []);
+  }, [workspace]);
 
   const effectiveDevices = devices.length > 0 ? devices : internalDevices;
 
@@ -595,7 +601,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
       return;
     }
 
-    if (!user || !user.name) {
+    if (!user || !user.id) {
       open?.({
         type: "error",
         message: "用户信息无效，请重新登录",
@@ -616,7 +622,7 @@ const SCADADeviceList: React.FC<SCADADeviceListProps> = ({
       const endTime = dayjs(cleanEndTime).toISOString();
 
       // 调用后端清洗接口
-      const response = await axios.post(
+      const response = await api.post(
         `${config.BACKEND_URL}/api/v1/composite/clean-scada?device_ids=all&start_time=${startTime}&end_time=${endTime}`,
       );
 

src/components/project/ProjectSelector.tsx

@@ -0,0 +1,291 @@
+import { Title } from "@components/title";
+import {
+  Dialog,
+  DialogContent,
+  DialogActions,
+  Button,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  TextField,
+  Box,
+  Typography,
+  Fade,
+  IconButton,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { useEffect, useState } from "react";
+import { apiFetch } from "@/lib/apiFetch";
+import { config, NETWORK_NAME } from "@/config/config";
+
+interface ProjectSelectorProps {
+  open: boolean;
+  onSelect: (
+    projectId: string,
+    workspace: string,
+    networkName: string,
+    extent: number[],
+  ) => void;
+  onClose?: () => void;
+}
+
+type ProjectOption = {
+  id: string;
+  label: string;
+  workspace: string;
+  networkName: string;
+  extent: number[];
+  description?: string | null;
+  status?: string | null;
+  projectRole?: string | null;
+};
+
+export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
+  open,
+  onSelect,
+  onClose,
+}) => {
+  const [projects, setProjects] = useState<ProjectOption[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [projectId, setProjectId] = useState("");
+  const [projectIdError, setProjectIdError] = useState<string | null>(null);
+  const [workspace, setWorkspace] = useState(config.MAP_WORKSPACE);
+  const [networkName, setNetworkName] = useState(NETWORK_NAME || "tjwater");
+  const [extent, setExtent] = useState<number[]>(config.MAP_EXTENT);
+  const [customMode, setCustomMode] = useState(false);
+
+  useEffect(() => {
+    const fetchProjects = async () => {
+      setIsLoading(true);
+      setLoadError(null);
+      try {
+        const response = await apiFetch(
+          `${config.BACKEND_URL}/api/v1/meta/projects`,
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        const data = await response.json();
+        const mapped: ProjectOption[] = Array.isArray(data)
+          ? data.map((item) => {
+              const bbox = Array.isArray(item.map_extent?.bbox)
+                ? item.map_extent.bbox.map((value: number) => Number(value))
+                : null;
+              return {
+                id: item.project_id,
+                label: item.name || item.code || item.project_id,
+                workspace: item.gs_workspace || config.MAP_WORKSPACE,
+                networkName: item.code || NETWORK_NAME || config.MAP_WORKSPACE,
+                extent:
+                  bbox && bbox.length === 4 ? bbox : config.MAP_EXTENT,
+                description: item.description,
+                status: item.status,
+                projectRole: item.project_role,
+              };
+            })
+          : [];
+        setProjects(mapped);
+        const savedProjectId = localStorage.getItem("active_project");
+        const initial =
+          (savedProjectId &&
+            mapped.find((project) => project.id === savedProjectId)) ||
+          mapped[0];
+        if (initial) {
+          setProjectId(initial.id);
+          setWorkspace(initial.workspace);
+          setNetworkName(initial.networkName);
+          setExtent(initial.extent);
+          setCustomMode(false);
+        } else {
+          setCustomMode(true);
+        }
+      } catch (error) {
+        console.error("Failed to load projects:", error);
+        setLoadError("项目列表加载失败，请使用自定义配置");
+        setCustomMode(true);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchProjects();
+  }, []);
+
+  const handleConfirm = () => {
+    if (!projectId.trim()) {
+      setProjectIdError("项目 ID 不能为空");
+      return;
+    }
+    setProjectIdError(null);
+    onSelect(projectId.trim(), workspace, networkName, extent);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      disableEscapeKeyDown={!onClose}
+      onClose={onClose ? onClose : undefined}
+      slotProps={{
+        paper: {
+          sx: {
+            borderRadius: 2,
+            padding: 2,
+            minWidth: 400,
+            background: "rgba(255, 255, 255, 0.95)",
+            backdropFilter: "blur(10px)",
+            position: "relative",
+          },
+        },
+      }}
+      slots={{ transition: Fade }}
+      transitionDuration={500}
+    >
+      {onClose && (
+        <IconButton
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      )}
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          mb: 2,
+        }}
+      >
+        <Box sx={{ transform: "scale(1.5)", mb: 2, mt: 1 }}>
+          <Title />
+        </Box>
+        <Typography variant="subtitle1" color="text.secondary">
+          请选择项目环境
+        </Typography>
+      </Box>
+
+      <DialogContent
+        sx={{ display: "flex", flexDirection: "column", gap: 3, pt: 1 }}
+      >
+        {!customMode ? (
+          <FormControl fullWidth variant="outlined">
+            <InputLabel>项目</InputLabel>
+            <Select
+              value={projectId}
+              label="项目"
+              onChange={(e) => {
+                const val = e.target.value;
+                if (val === "custom") {
+                  setCustomMode(true);
+                  setProjectIdError(null);
+                } else {
+                  const p = projects.find((p) => p.id === val);
+                  if (p) {
+                    setProjectId(p.id);
+                    setWorkspace(p.workspace);
+                    setNetworkName(p.networkName);
+                    setExtent(p.extent);
+                    setProjectIdError(null);
+                  }
+                }
+              }}
+            >
+              {projects.length === 0 && (
+                <MenuItem value="" disabled>
+                  <Typography variant="body2" color="text.secondary">
+                    {isLoading ? "正在加载项目..." : "暂无可用项目"}
+                  </Typography>
+                </MenuItem>
+              )}
+              {projects.map((p) => (
+                <MenuItem key={p.id} value={p.id}>
+                  <Box sx={{ display: "flex", flexDirection: "column" }}>
+                    <Typography variant="body1">{p.label}</Typography>
+                    <Typography variant="caption" color="text.secondary">
+                      工作区: {p.workspace} | 管网: {p.networkName}
+                    </Typography>
+                    {(p.status || p.projectRole) && (
+                      <Typography variant="caption" color="text.secondary">
+                        {p.status ? `状态: ${p.status}` : ""}
+                        {p.status && p.projectRole ? " | " : ""}
+                        {p.projectRole ? `角色: ${p.projectRole}` : ""}
+                      </Typography>
+                    )}
+                  </Box>
+                </MenuItem>
+              ))}
+              <MenuItem value="custom">
+                <Typography variant="body1">自定义配置...</Typography>
+              </MenuItem>
+            </Select>
+            {loadError && (
+              <Typography variant="caption" color="error">
+                {loadError}
+              </Typography>
+            )}
+          </FormControl>
+        ) : (
+          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+            <TextField
+              label="项目 ID"
+              value={projectId}
+              onChange={(e) => {
+                setProjectId(e.target.value);
+                setProjectIdError(null);
+              }}
+              fullWidth
+              helperText={
+                projectIdError || "例如: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+              }
+              error={Boolean(projectIdError)}
+            />
+            <TextField
+              label="Geoserver 工作区"
+              value={workspace}
+              onChange={(e) => setWorkspace(e.target.value)}
+              fullWidth
+              helperText="例如: tjwater"
+            />
+            <TextField
+              label="管网名称"
+              value={networkName}
+              onChange={(e) => setNetworkName(e.target.value)}
+              fullWidth
+              helperText="例如: tjwater"
+            />
+            <Button
+              onClick={() => setCustomMode(false)}
+              size="small"
+              sx={{ alignSelf: "flex-start" }}
+            >
+              返回列表
+            </Button>
+          </Box>
+        )}
+      </DialogContent>
+      <DialogActions sx={{ px: 3, pb: 2 }}>
+        <Button
+          onClick={handleConfirm}
+          variant="contained"
+          fullWidth
+          size="large"
+          sx={{
+            textTransform: "none",
+            borderRadius: 2,
+            fontWeight: "bold",
+          }}
+        >
+          进入系统
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/config/config.ts

@@ -1,11 +1,10 @@
 export const config = {
-  BACKEND_URL:
-    process.env.NEXT_PUBLIC_BACKEND_URL || "http://192.168.1.42:8000",
+  BACKEND_URL: process.env.NEXT_PUBLIC_BACKEND_URL || "http://127.0.0.1:8000",
   MAP_URL: process.env.NEXT_PUBLIC_MAP_URL || "http://127.0.0.1:8080/geoserver",
-  MAP_WORKSPACE: process.env.NEXT_PUBLIC_MAP_WORKSPACE || "TJWater",
+  MAP_WORKSPACE: process.env.NEXT_PUBLIC_MAP_WORKSPACE || "tjwater",
   MAP_EXTENT: process.env.NEXT_PUBLIC_MAP_EXTENT
     ? process.env.NEXT_PUBLIC_MAP_EXTENT.split(",").map(Number)
-    : [13508849, 3608035.75, 13555781, 3633812.75],
+    : [13508849, 3608036, 13555781, 3633813],
   MAP_DEFAULT_STYLE: {
     "stroke-width": 3,
     "stroke-color": "rgba(51, 153, 204, 0.9)",
@@ -27,7 +26,20 @@ export const config = {
       )
     : ["junctions", "pipes", "valves", "reservoirs", "pumps", "tanks", "scada"],
 };
-export const NETWORK_NAME = process.env.NEXT_PUBLIC_NETWORK_NAME || "tjwater";
+export let NETWORK_NAME = process.env.NEXT_PUBLIC_NETWORK_NAME || "tjwater";
+
+export const setNetworkName = (name: string) => {
+  NETWORK_NAME = name;
+};
+
+export const setMapWorkspace = (workspace: string) => {
+  config.MAP_WORKSPACE = workspace;
+};
+
+export const setMapExtent = (extent: number[]) => {
+  config.MAP_EXTENT = extent;
+};
+
 export const MAPBOX_TOKEN =
   process.env.NEXT_PUBLIC_MAPBOX_TOKEN ||
   "pk.eyJ1IjoiemhpZnUiLCJhIjoiY205azNyNGY1MGkyZDJxcTJleDUwaHV1ZCJ9.wOmSdOnDDdre-mB1Lpy6Fg";

src/contexts/ProjectContext.tsx

@@ -0,0 +1,115 @@
+"use client";
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { config, NETWORK_NAME, setMapWorkspace, setNetworkName, setMapExtent } from "@/config/config";
+import { ProjectSelector } from "@/components/project/ProjectSelector";
+import { apiFetch } from "@/lib/apiFetch";
+import { useProjectStore } from "@/store/projectStore";
+
+interface ProjectContextType {
+  workspace: string;
+  networkName: string;
+  extent: number[];
+}
+
+const ProjectContext = createContext<ProjectContextType | undefined>(undefined);
+
+export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { status } = useSession();
+  const [isConfigured, setIsConfigured] = useState(false);
+  const setCurrentProjectId = useProjectStore(
+    (state) => state.setCurrentProjectId,
+  );
+  const [currentProject, setCurrentProject] = useState({
+    workspace: config.MAP_WORKSPACE,
+    networkName: NETWORK_NAME || "tjwater",
+    extent: config.MAP_EXTENT,
+  });
+
+  useEffect(() => {
+    // Check localStorage
+    const savedWorkspace = localStorage.getItem("NEXT_PUBLIC_MAP_WORKSPACE");
+    const savedNetwork = localStorage.getItem("NEXT_PUBLIC_NETWORK_NAME");
+    const savedExtent = localStorage.getItem("NEXT_PUBLIC_MAP_EXTENT");
+    const savedProjectId = localStorage.getItem("active_project");
+
+    // If we have saved config, use it.
+    if (savedWorkspace && savedNetwork) {
+      applyConfig(
+        savedProjectId || savedNetwork || savedWorkspace,
+        savedWorkspace,
+        savedNetwork,
+        savedExtent ? savedExtent.split(",").map(Number) : config.MAP_EXTENT,
+      );
+    }
+  }, []);
+
+  const applyConfig = async (
+    projectId: string,
+    ws: string,
+    net: string,
+    extent: number[],
+  ) => {
+    const resolvedProjectId = projectId || net || ws;
+    setMapWorkspace(ws);
+    setNetworkName(net);
+    setMapExtent(extent);
+    localStorage.setItem("NEXT_PUBLIC_MAP_EXTENT", extent.join(","));
+    // Reset extent cache
+    localStorage.removeItem(`${ws}_map_view`);
+    setCurrentProject({ workspace: ws, networkName: net, extent: extent });
+    setCurrentProjectId(resolvedProjectId);
+
+    // Save to localStorage
+    localStorage.setItem("NEXT_PUBLIC_MAP_WORKSPACE", ws);
+    localStorage.setItem("NEXT_PUBLIC_NETWORK_NAME", net);
+
+    setIsConfigured(true);
+
+    try {
+      const response = await apiFetch(
+        `${config.BACKEND_URL}/openproject/?network=${net}`,
+        {
+          method: "POST",
+        },
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const data = await response.json();
+      const bbox = Array.isArray(data?.map_extent?.bbox)
+        ? data.map_extent.bbox.map((value: number) => Number(value))
+        : null;
+      if (bbox && bbox.length === 4) {
+        setMapExtent(bbox);
+        localStorage.setItem("NEXT_PUBLIC_MAP_EXTENT", bbox.join(","));
+        localStorage.removeItem(`${ws}_map_view`);
+        setCurrentProject((prev) => ({ ...prev, extent: bbox }));
+      }
+    } catch (error) {
+      console.error("Failed to open project:", error);
+    }
+  };
+
+  // Only show selector if authenticated and not configured
+  if (status === "authenticated" && !isConfigured) {
+    return (
+      <ProjectSelector
+        open={true}
+        onSelect={(projectId, ws, net, extent) =>
+          applyConfig(projectId, ws, net, extent)
+        }
+      />
+    );
+  }
+
+  return (
+    <ProjectContext.Provider value={currentProject}>
+      {children}
+    </ProjectContext.Provider>
+  );
+};
+
+export const useProject = () => useContext(ProjectContext);

src/lib/api.ts

@@ -0,0 +1,34 @@
+import axios from "axios";
+import { config } from "@config/config";
+import { useProjectStore } from "@/store/projectStore";
+import { getAccessToken } from "@/lib/authToken";
+
+export const API_URL = process.env.NEXT_PUBLIC_API_URL || config.BACKEND_URL;
+
+export const api = axios.create({
+  baseURL: API_URL,
+});
+
+const isMetaProjectsRequest = (request: {
+  baseURL?: string;
+  url?: string;
+}) => {
+  const url = `${request.baseURL ?? ""}${request.url ?? ""}`;
+  return url.includes("/api/v1/meta/projects");
+};
+
+api.interceptors.request.use(async (request) => {
+  const accessToken = await getAccessToken();
+  if (accessToken) {
+    request.headers = request.headers ?? {};
+    request.headers.Authorization = `Bearer ${accessToken}`;
+  }
+
+  const projectId = useProjectStore.getState().currentProjectId;
+  if (projectId && !isMetaProjectsRequest(request)) {
+    request.headers = request.headers ?? {};
+    request.headers["X-Project-Id"] = projectId;
+  }
+
+  return request;
+});

src/lib/apiFetch.ts

@@ -0,0 +1,28 @@
+import { useProjectStore } from "@/store/projectStore";
+import { getAccessToken } from "@/lib/authToken";
+
+const resolveUrl = (input: RequestInfo | URL) => {
+  if (typeof input === "string") return input;
+  if (input instanceof URL) return input.toString();
+  if (input instanceof Request) return input.url;
+  return "";
+};
+
+const isMetaProjectsRequest = (input: RequestInfo | URL) =>
+  resolveUrl(input).includes("/api/v1/meta/projects");
+
+export const apiFetch = async (
+  input: RequestInfo | URL,
+  init: RequestInit = {},
+) => {
+  const projectId = useProjectStore.getState().currentProjectId;
+  const headers = new Headers(init.headers ?? {});
+  const accessToken = await getAccessToken();
+  if (accessToken) {
+    headers.set("Authorization", `Bearer ${accessToken}`);
+  }
+  if (projectId && !isMetaProjectsRequest(input)) {
+    headers.set("X-Project-Id", projectId);
+  }
+  return fetch(input, { ...init, headers });
+};

src/lib/authToken.ts

@@ -0,0 +1,51 @@
+import { getSession } from "next-auth/react";
+import { useAuthStore } from "@/store/authStore";
+
+const decodeJwtPayload = (token: string) => {
+  const parts = token.split(".");
+  if (parts.length < 2) {
+    console.warn("Invalid JWT format.");
+    return null;
+  }
+  const base64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
+  const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
+  try {
+    const json =
+      typeof window !== "undefined"
+        ? window.atob(padded)
+        : Buffer.from(padded, "base64").toString("utf-8");
+    return JSON.parse(json);
+  } catch (error) {
+    console.warn("Failed to decode JWT payload.", error);
+    return null;
+  }
+};
+
+const isTokenExpired = (token: string) => {
+  const payload = decodeJwtPayload(token);
+  if (!payload) {
+    return true;
+  }
+  if (typeof payload.exp !== "number") {
+    return false;
+  }
+  const now = Date.now();
+  return now >= payload.exp * 1000 - 30_000;
+};
+
+export const getAccessToken = async () => {
+  const { accessToken, setAccessToken } = useAuthStore.getState();
+  if (accessToken && !isTokenExpired(accessToken)) {
+    return accessToken;
+  }
+  if (accessToken) {
+    setAccessToken(null);
+  }
+  const session = await getSession();
+  const token = typeof session?.accessToken === "string" ? session.accessToken : null;
+  if (token && !isTokenExpired(token)) {
+    setAccessToken(token);
+    return token;
+  }
+  return null;
+};

src/providers/data-provider/index.ts

@@ -1,7 +1,6 @@
 "use client";
 
 import dataProviderSimpleRest from "@refinedev/simple-rest";
+import { api, API_URL } from "@/lib/api";
 
-const API_URL = "https://api.fake-rest.refine.dev";
-
-export const dataProvider = dataProviderSimpleRest(API_URL);
+export const dataProvider = dataProviderSimpleRest(API_URL, api);

src/store/authStore.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface AuthState {
+  accessToken: string | null;
+  setAccessToken: (token: string | null) => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  accessToken: null,
+  setAccessToken: (token) => set({ accessToken: token }),
+}));

src/store/projectStore.ts

@@ -0,0 +1,27 @@
+import { create } from "zustand";
+
+interface ProjectState {
+  currentProjectId: string | null;
+  setCurrentProjectId: (id: string | null) => void;
+}
+
+const getInitialProjectId = () => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return localStorage.getItem("active_project");
+};
+
+export const useProjectStore = create<ProjectState>((set) => ({
+  currentProjectId: getInitialProjectId(),
+  setCurrentProjectId: (id) => {
+    if (typeof window !== "undefined") {
+      if (id) {
+        localStorage.setItem("active_project", id);
+      } else {
+        localStorage.removeItem("active_project");
+      }
+    }
+    set({ currentProjectId: id });
+  },
+}));

src/types/next-auth.d.ts

@@ -0,0 +1,25 @@
+import "next-auth";
+import "next-auth/jwt";
+
+declare module "next-auth" {
+  interface Session {
+    accessToken?: string;
+    user?: {
+      id?: string;
+      name?: string | null;
+      email?: string | null;
+      image?: string | null;
+    };
+  }
+
+  interface User {
+    id?: string;
+  }
+}
+
+declare module "next-auth/jwt" {
+  interface JWT {
+    sub?: string;
+    accessToken?: string;
+  }
+}

src/utils/mapQueryService.ts

@@ -40,15 +40,15 @@ interface MapClickEvent {
 // ========== 常量配置 ==========
 
 /**
- * GeoServer 服务配置
+ * GeoServer 服务配置获取函数
  */
-const GEOSERVER_CONFIG = {
+const getGeoserverConfig = () => ({
   url: config.MAP_URL,
   workspace: config.MAP_WORKSPACE,
   layers: ["geo_pipes_mat", "geo_junctions_mat", "geo_valves"],
   wfsVersion: "1.0.0",
   outputFormat: "application/json",
-} as const;
+});
 
 /**
  * 地图交互配置
@@ -176,7 +176,7 @@ const convertRenderFeatureToFeature = (
  * @returns WFS 查询 URL
  */
 const buildWfsUrl = (layer: string, orFilter: string): string => {
-  const { url, workspace, wfsVersion, outputFormat } = GEOSERVER_CONFIG;
+  const { url, workspace, wfsVersion, outputFormat } = getGeoserverConfig();
   const params = new URLSearchParams({
     service: "WFS",
     version: wfsVersion,
@@ -233,7 +233,7 @@ const queryFeaturesByIds = async (
   try {
     if (!layer) {
       // 查询所有配置的图层
-      const promises = GEOSERVER_CONFIG.layers.map((layerName) =>
+      const promises = getGeoserverConfig().layers.map((layerName) =>
         fetchFeaturesFromLayer(layerName, orFilter)
       );