暂存

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

.dockerignore

@@ -1,7 +1,10 @@
-**/node_modules/
+node_modules
-**/dist
+.next
+out
+build
 .git
-npm-debug.log
+.env*.local
-.coverage
+README.md
-.coverage.*
+docker-compose.yml
-.env
+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"

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 PORT=3000
-ENV HOSTNAME "0.0.0.0"
+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)/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
-      <ThemedLayout
+      Header={Header}
-        Header={Header}
+      Title={Title}
-        Title={Title}
+      childrenBoxProps={{
-        childrenBoxProps={{
+        sx: { height: "100vh", p: 0 },
-          sx: { height: "100vh", p: 0 },
+      }}
-        }}
+      containerBoxProps={{
-        containerBoxProps={{
+        sx: { height: "100%" },
-          sx: { height: "100%" },
+      }}
-        }}
+    >
-      >
+      <Suspense fallback={<MapSkeleton />}>
-        <Suspense fallback={<MapSkeleton />}>
+        {children}
-          {children}
+      </Suspense>
-        </Suspense>
+    </ThemedLayout>
-      </ThemedLayout>
-    </RefineContext>
   );
 }
 

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>
+      <style>
-      <div className="px-1">
+        {`
-        坐标: {coordinates[0]}, {coordinates[1]}
+          .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,6 +20,7 @@ import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/
 import { useNotification } from "@refinedev/core";
 
 import { config } from "@/config/config";
+import { apiFetch } from "@/lib/apiFetch";
 
 // 添加接口定义隐藏按钮的props
 interface ToolbarProps {
@@ -388,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_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}`,
           );

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";
@@ -32,7 +34,9 @@ export const RefineContext = (
 ) => {
   return (
     <SessionProvider>
-      <App {...props} />
+      <ProjectProvider>
+        <App {...props} />
+      </ProjectProvider>
     </SessionProvider>
   );
 };
@@ -44,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>;
@@ -100,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,
         };

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;
+  id?: string;
-  name: string;
+  name?: string;
-  avatar: 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"
+                <ButtonBase
-                gap="16px"
+                  onClick={handleMenuOpen}
-                alignItems="center"
+                  sx={{
-                justifyContent="center"
+                    borderRadius: "30px",
-              >
+                    padding: "6px 12px",
-                {user?.name && (
+                    marginLeft: "8px",
-                  <Typography
+                    transition: "all 0.3s ease",
-                    sx={{
+                    border: "1px solid transparent",
-                      display: {
+                    "&:hover": {
-                        xs: "none",
+                      backgroundColor:
-                        sm: "inline-block",
+                        mode === "dark"
-                      },
+                          ? "rgba(255, 255, 255, 0.05)"
-                    }}
+                          : "rgba(0, 0, 0, 0.04)",
-                    variant="subtitle2"
+                      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}
+                    {user?.name && (
-                  </Typography>
+                      <Typography
-                )}
+                        sx={{
-                <Avatar src={user?.avatar} alt={user?.name} />
+                          display: {
-              </Stack>
+                            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/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?.({

src/components/olmap/BurstPipeAnalysis/BurstPipeAnalysisPanel.tsx

@@ -22,7 +22,7 @@ import AnalysisParameters from "./AnalysisParameters";
 import SchemeQuery from "./SchemeQuery";
 import LocationResults from "./LocationResults";
 import ValveIsolation from "./ValveIsolation";
-import axios from "axios";
+import { api } from "@/lib/api";
 import { config } from "@config/config";
 import { useNotification } from "@refinedev/core";
 import { LocationResult, SchemeRecord, ValveIsolationResult } from "./types";
@@ -85,7 +85,7 @@ const BurstPipeAnalysisPanel: React.FC<BurstPipeAnalysisPanelProps> = ({
 
   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);

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,

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,
       });
 

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/FlushingAnalysis/AnalysisParameters.tsx

@@ -25,7 +25,7 @@ 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 axios from "axios";
+import { api } from "@/lib/api";
 import { config, NETWORK_NAME } from "@/config/config";
 
 interface ValveItem {
@@ -47,7 +47,7 @@ const AnalysisParameters: React.FC = () => {
   const [drainageFeature, setDrainageFeature] = useState<Feature | null>(null);
 
   const [startTime, setStartTime] = useState<Dayjs | null>(dayjs(new Date()));
-  const [flushFlow, setFlushFlow] = useState<number>(0);
+  const [flushFlow, setFlushFlow] = useState<number>(200);
   const [duration, setDuration] = useState<number>(3600);
 
   const [selectionMode, setSelectionMode] = useState<'none' | 'valve' | 'drainage'>('none');
@@ -242,7 +242,7 @@ const AnalysisParameters: React.FC = () => {
       // but axios usually handles array as valves[]=1&valves[]=2
       // FastAPI default expects repeated query params.
 
-      const response = await axios.get(`${config.BACKEND_URL}/flushing_analysis/`, {
+      const response = await api.get(`${config.BACKEND_URL}/flushing_analysis/`, {
         params,
         // Ensure arrays are sent as repeated keys: valves=1&valves=2
         paramsSerializer: {
@@ -401,7 +401,7 @@ const AnalysisParameters: React.FC = () => {
         <Box className="flex gap-2">
           <Box className="flex-1">
             <Typography variant="subtitle2" className="mb-1 font-medium">
-              冲洗流量
+              冲洗流量 (CMH)
             </Typography>
             <TextField
               fullWidth
@@ -436,7 +436,7 @@ const AnalysisParameters: React.FC = () => {
             !schemeName.trim() ||
             !drainageNode ||
             !startTime ||
-            !flushFlow ||
+            // !flushFlow ||
             !duration
           }
           className="bg-blue-600 hover:bg-blue-700"

src/components/olmap/FlushingAnalysis/SchemeQuery.tsx

@@ -27,7 +27,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";
@@ -221,7 +221,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}`,
       );
 

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;
+  id: string;
-  name: 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;
+  id: string;
-  name: 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;
+  id: string;
-  name: 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:
+  BACKEND_URL: process.env.NEXT_PUBLIC_BACKEND_URL || "http://127.0.0.1:8000",
-    process.env.NEXT_PUBLIC_BACKEND_URL || "http://192.168.1.42: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, api);
-
-export const dataProvider = dataProviderSimpleRest(API_URL);

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)
       );