暂存

Implemented a Zustand-based project_id store, expanded project selection/switching to persist project_id,
and centralized backend requests via api/apiFetch (including data provider updates) to inject X-Project-ID.
2026-02-11 18:58:10 +08:00 · 2026-02-11 16:29:18 +08:00 · 2026-02-11 14:17:16 +08:00 · 2026-02-11 13:53:56 +08:00 · 2026-02-11 12:07:29 +08:00 · 2026-02-11 11:52:06 +08:00
37 changed files with 619 additions and 132 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
--- a/src/app/(main)/layout.tsx
+++ b/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>
  );
 }

--- a/src/app/OlMap/Controls/BaseLayers.tsx
+++ b/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}
--- a/src/app/OlMap/Controls/HistoryDataPanel.tsx
+++ b/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),
      ]);
--- a/src/app/OlMap/Controls/ScaleLine.tsx
+++ b/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>
+    </>
  );
 };

--- a/src/app/OlMap/Controls/Timeline.tsx
+++ b/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",
--- a/src/app/OlMap/Controls/Toolbar.tsx
+++ b/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}`,
          );
--- a/src/app/OlMap/Controls/Zoom.tsx
+++ b/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
--- a/src/app/OlMap/MapComponent.tsx
+++ b/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,
@@ -95,9 +96,15 @@ export const useData = () => {
 };

 const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
-  const MAP_EXTENT = config.MAP_EXTENT as [number, number, number, number];
+  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_WORKSPACE = config.MAP_WORKSPACE;
  const MAP_VIEW_STORAGE_KEY = `${MAP_WORKSPACE}_map_view`; // 持久化 key

  const mapRef = useRef<HTMLDivElement | null>(null);
@@ -460,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: {
@@ -763,7 +770,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
      map.dispose();
      deck.finalize();
    };
-  }, []);
+  }, [MAP_WORKSPACE, MAP_EXTENT]);

  // 当数据变化时，更新 deck.gl 图层
  useEffect(() => {
--- a/src/app/_refine_context.tsx
+++ b/src/app/_refine_context.tsx
@@ -8,13 +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";
@@ -47,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>;
@@ -103,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,
        };
--- a/src/app/api/auth/[...nextauth]/options.ts
+++ b/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;
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -21,12 +21,13 @@ import { useGetIdentity, useLogout } from "@refinedev/core";
 import { HamburgerMenu, RefineThemedLayoutHeaderProps } from "@refinedev/mui";
 import React, { useContext, useState } from "react";
 import { ProjectSelector } from "@components/project/ProjectSelector";
-import { setMapWorkspace, setNetworkName } from "@config/config";
+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> = ({
@@ -37,6 +38,9 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
  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>();

@@ -53,11 +57,20 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
    setShowProjectSelector(true);
  };

-  const handleProjectSelect = (workspace: string, networkName: string) => {
+  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();
  };
--- a/src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx
+++ b/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,7 +283,7 @@ 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
--- a/src/components/olmap/BurstPipeAnalysis/BurstPipeAnalysisPanel.tsx
+++ b/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);
--- a/src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx
+++ b/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;
--- a/src/components/olmap/BurstPipeAnalysis/ValveIsolation.tsx
+++ b/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,
--- a/src/components/olmap/ContaminantSimulation/AnalysisParameters.tsx
+++ b/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";
@@ -189,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,
      });

--- a/src/components/olmap/ContaminantSimulation/SchemeQuery.tsx
+++ b/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;
--- a/src/components/olmap/FlushingAnalysis/AnalysisParameters.tsx
+++ b/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 {
@@ -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: {
--- a/src/components/olmap/FlushingAnalysis/SchemeQuery.tsx
+++ b/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}`,
      );

--- a/src/components/olmap/HealthRiskAnalysis/Timeline.tsx
+++ b/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}`,
      );

--- a/src/components/olmap/MonitoringPlaceOptimization/OptimizationParameters.tsx
+++ b/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,
          },
        }
--- a/src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx
+++ b/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}`,
      );

--- a/src/components/olmap/NetworkPartitionOptimization/ZonePropsPanel.tsx
+++ b/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> = {
--- a/src/components/olmap/SCADADataPanel.tsx
+++ b/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(
--- a/src/components/olmap/SCADADeviceList.tsx
+++ b/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}`,
      );

--- a/src/components/project/ProjectSelector.tsx
+++ b/src/components/project/ProjectSelector.tsx
@@ -15,31 +15,111 @@ import {
  IconButton,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { apiFetch } from "@/lib/apiFetch";
+import { config, NETWORK_NAME } from "@/config/config";

 interface ProjectSelectorProps {
  open: boolean;
-  onSelect: (workspace: string, networkName: string) => void;
+  onSelect: (
+    projectId: string,
+    workspace: string,
+    networkName: string,
+    extent: number[],
+  ) => void;
  onClose?: () => void;
 }

-const PROJECTS = [
-  { label: "TJWater (默认)", workspace: "TJWater", networkName: "tjwater" },
-  { label: "苏州河", workspace: "szh", networkName: "szh" },
-  { label: "测试项目", workspace: "test", networkName: "test" },
-];
+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 [workspace, setWorkspace] = useState(PROJECTS[0].workspace);
-  const [networkName, setNetworkName] = useState(PROJECTS[0].networkName);
+  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 = () => {
-    onSelect(workspace, networkName);
+    if (!projectId.trim()) {
+      setProjectIdError("项目 ID 不能为空");
+      return;
+    }
+    setProjectIdError(null);
+    onSelect(projectId.trim(), workspace, networkName, extent);
  };

  return (
@@ -56,8 +136,8 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
            background: "rgba(255, 255, 255, 0.95)",
            backdropFilter: "blur(10px)",
            position: "relative",
-          }
-        }
+          },
+        },
      }}
      slots={{ transition: Fade }}
      transitionDuration={500}
@@ -76,7 +156,14 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
          <CloseIcon />
        </IconButton>
      )}
-      <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", mb: 2 }}>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          mb: 2,
+        }}
+      >
        <Box sx={{ transform: "scale(1.5)", mb: 2, mt: 1 }}>
          <Title />
        </Box>
@@ -85,33 +172,53 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
        </Typography>
      </Box>

-      <DialogContent sx={{ display: "flex", flexDirection: "column", gap: 3, pt: 1 }}>
+      <DialogContent
+        sx={{ display: "flex", flexDirection: "column", gap: 3, pt: 1 }}
+      >
        {!customMode ? (
          <FormControl fullWidth variant="outlined">
            <InputLabel>项目</InputLabel>
            <Select
-              value={workspace}
+              value={projectId}
              label="项目"
              onChange={(e) => {
                const val = e.target.value;
                if (val === "custom") {
                  setCustomMode(true);
+                  setProjectIdError(null);
                } else {
-                  const p = PROJECTS.find((p) => p.workspace === val);
+                  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.map((p) => (
-                <MenuItem key={p.workspace} value={p.workspace}>
+              {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>
              ))}
@@ -119,15 +226,33 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
                <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"
+              helperText="例如: tjwater"
            />
            <TextField
              label="管网名称"
@@ -155,7 +280,7 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
          sx={{
            textTransform: "none",
            borderRadius: 2,
-            fontWeight: "bold"
+            fontWeight: "bold",
          }}
        >
          进入系统
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -1,11 +1,10 @@
 export const config = {
-  BACKEND_URL:
-    process.env.NEXT_PUBLIC_BACKEND_URL || "http://127.0.0.1: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)",
@@ -37,6 +36,10 @@ 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";
--- a/src/contexts/ProjectContext.tsx
+++ b/src/contexts/ProjectContext.tsx
@@ -1,12 +1,15 @@
 "use client";
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
-import { config, NETWORK_NAME, setMapWorkspace, setNetworkName } from "@/config/config";
+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);
@@ -16,32 +19,78 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
 }) => {
  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(savedWorkspace, savedNetwork);
+      applyConfig(
+        savedProjectId || savedNetwork || savedWorkspace,
+        savedWorkspace,
+        savedNetwork,
+        savedExtent ? savedExtent.split(",").map(Number) : config.MAP_EXTENT,
+      );
    }
  }, []);

-  const applyConfig = (ws: string, net: string) => {
+  const applyConfig = async (
+    projectId: string,
+    ws: string,
+    net: string,
+    extent: number[],
+  ) => {
+    const resolvedProjectId = projectId || net || ws;
    setMapWorkspace(ws);
    setNetworkName(net);
-    setCurrentProject({ workspace: ws, networkName: 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
@@ -49,7 +98,9 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
    return (
      <ProjectSelector
        open={true}
-        onSelect={(ws, net) => applyConfig(ws, net)}
+        onSelect={(projectId, ws, net, extent) =>
+          applyConfig(projectId, ws, net, extent)
+        }
      />
    );
  }
--- a/src/lib/api.ts
+++ b/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;
+});
--- a/src/lib/apiFetch.ts
+++ b/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 });
+};
--- a/src/lib/authToken.ts
+++ b/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;
+};
--- a/src/providers/data-provider/index.ts
+++ b/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);
--- a/src/store/authStore.ts
+++ b/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 }),
+}));
--- a/src/store/projectStore.ts
+++ b/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 });
+  },
+}));
--- a/src/types/next-auth.d.ts
+++ b/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;
+  }
+}
Author	SHA1	Message	Date
JIANG	66f2390078	暂存	2026-02-11 18:58:10 +08:00
JIANG	9d06226cb4	Implemented a Zustand-based project_id store, expanded project selection/switching to persist project_id, and centralized backend requests via api/apiFetch (including data provider updates) to inject X-Project-ID.	2026-02-11 16:29:18 +08:00
JIANG	a2e6c1f416	修复MAP_EXTENT状态更新的BUG	2026-02-11 14:17:16 +08:00
JIANG	2911b87fac	提升extent变量状态；修改部分默认值	2026-02-11 13:53:56 +08:00
JIANG	8b6198a2ac	调整环境变量参数，支持项目切换	2026-02-11 12:07:29 +08:00
JIANG	03e5f1456c	完善比例尺控件，调整控件位置	2026-02-11 11:52:06 +08:00