OrgTJWater/TJWaterServer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented a Zustand-based project_id store, expanded project selection/switching to persist project_id,

Browse Source 
and centralized backend requests via api/apiFetch (including data provider updates) to inject X-Project-ID.
This commit is contained in:
JIANG
2026-02-11 16:29:18 +08:00
parent a2e6c1f416
commit 9d06226cb4
25 changed files with 192 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
package-lock.json generated
View File

@@ -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",

3
package.json
View File

@@ -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"

17
src/app/OlMap/Controls/HistoryDataPanel.tsx
View File

@@ -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),
]);

11
src/app/OlMap/Controls/Timeline.tsx
View File

@@ -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",

5
src/app/OlMap/Controls/Toolbar.tsx
View File

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

6
src/components/header/index.tsx
View File

@@ -22,6 +22,7 @@ import { HamburgerMenu, RefineThemedLayoutHeaderProps } from "@refinedev/mui";
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;
@@ -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>();
@@ -54,6 +58,7 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
};
const handleProjectSelect = (
projectId: string,
workspace: string,
networkName: string,
extent: number[],
@@ -65,6 +70,7 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
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();
};

4
src/components/olmap/BurstPipeAnalysis/AnalysisParameters.tsx
View File

@@ -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

4
src/components/olmap/BurstPipeAnalysis/BurstPipeAnalysisPanel.tsx
View File

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

4
src/components/olmap/BurstPipeAnalysis/SchemeQuery.tsx
View File

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

4
src/components/olmap/BurstPipeAnalysis/ValveIsolation.tsx
View File

@@ -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,

4
src/components/olmap/ContaminantSimulation/AnalysisParameters.tsx
View File

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

4
src/components/olmap/ContaminantSimulation/SchemeQuery.tsx
View File

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

4
src/components/olmap/FlushingAnalysis/AnalysisParameters.tsx
View File

@@ -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: {

4
src/components/olmap/FlushingAnalysis/SchemeQuery.tsx
View File

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

3
src/components/olmap/HealthRiskAnalysis/Timeline.tsx
View File

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

4
src/components/olmap/MonitoringPlaceOptimization/OptimizationParameters.tsx
View File

@@ -12,7 +12,7 @@ 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 = {
@@ -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,
{

4
src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx
View File

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

17
src/components/olmap/SCADADataPanel.tsx
View File

@@ -37,7 +37,8 @@ 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);
@@ -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),
]);
@@ -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(

4
src/components/olmap/SCADADeviceList.tsx
View File

@@ -48,7 +48,7 @@ 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 from "@/config/config";
@@ -622,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}`,
);

34
src/components/project/ProjectSelector.tsx
View File

@@ -19,24 +19,31 @@ import { useState } from "react";
interface ProjectSelectorProps {
open: boolean;
onSelect: (workspace: string, networkName: string, extent: number[]) => void;
onSelect: (
projectId: string,
workspace: string,
networkName: string,
extent: number[],
) => void;
onClose?: () => void;
}
const PROJECTS = [
{
id: "tjwater",
label: "默认",
workspace: "tjwater",
networkName: "tjwater",
extent: [13508802, 3608164, 13555651, 3633686],
},
// {
// label: "苏州河",
// workspace: "szh",
// networkName: "szh",
// extent: [13490131, 3630016, 13525879, 3666969],
// },
{
label: "苏州河",
workspace: "szh",
networkName: "szh",
extent: [13490131, 3630016, 13525879, 3666969],
},
{
id: "test",
label: "测试项目",
workspace: "test",
networkName: "test",
@@ -49,6 +56,7 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
onSelect,
onClose,
}) => {
const [projectId, setProjectId] = useState(PROJECTS[0].id);
const [workspace, setWorkspace] = useState(PROJECTS[0].workspace);
const [networkName, setNetworkName] = useState(PROJECTS[0].networkName);
const [extent, setExtent] = useState<number[]>(
@@ -57,7 +65,8 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
const [customMode, setCustomMode] = useState(false);
const handleConfirm = () => {
onSelect(workspace, networkName, extent);
const resolvedProjectId = projectId.trim() || workspace || networkName;
onSelect(resolvedProjectId, workspace, networkName, extent);
};
return (
@@ -123,9 +132,11 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
const val = e.target.value;
if (val === "custom") {
setCustomMode(true);
setProjectId(workspace);
} else {
const p = PROJECTS.find((p) => p.workspace === val);
if (p) {
setProjectId(p.id);
setWorkspace(p.workspace);
setNetworkName(p.networkName);
setExtent(p.extent);
@@ -150,6 +161,13 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
</FormControl>
) : (
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
<TextField
label="项目 ID"
value={projectId}
onChange={(e) => setProjectId(e.target.value)}
fullWidth
helperText="例如: tjwater"
/>
<TextField
label="Geoserver 工作区"
value={workspace}

22
src/contexts/ProjectContext.tsx
View File

@@ -3,6 +3,8 @@ 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;
@@ -17,6 +19,9 @@ 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",
@@ -28,10 +33,12 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
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,
@@ -39,7 +46,13 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
}
}, []);
const applyConfig = async (ws: string, net: string, extent: number[]) => {
const applyConfig = async (
projectId: string,
ws: string,
net: string,
extent: number[],
) => {
const resolvedProjectId = projectId || net || ws;
setMapWorkspace(ws);
setNetworkName(net);
setMapExtent(extent);
@@ -47,6 +60,7 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
// 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);
@@ -55,7 +69,7 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
setIsConfigured(true);
try {
await fetch(`${config.BACKEND_URL}/openproject/?network=${net}`, {
await apiFetch(`${config.BACKEND_URL}/openproject/?network=${net}`, {
method: "POST",
});
} catch (error) {
@@ -68,7 +82,9 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
return (
<ProjectSelector
open={true}
onSelect={(ws, net, extent) => applyConfig(ws, net, extent)}
onSelect={(projectId, ws, net, extent) =>
applyConfig(projectId, ws, net, extent)
}
/>
);
}

18
src/lib/api.ts Normal file
View File

@@ -0,0 +1,18 @@
import axios from "axios";
import { config } from "@config/config";
import { useProjectStore } from "@/store/projectStore";
export const API_URL = process.env.NEXT_PUBLIC_API_URL || config.BACKEND_URL;
export const api = axios.create({
baseURL: API_URL,
});
api.interceptors.request.use((request) => {
const projectId = useProjectStore.getState().currentProjectId;
if (projectId) {
request.headers = request.headers ?? {};
request.headers["X-Project-ID"] = projectId;
}
return request;
});

10
src/lib/apiFetch.ts Normal file
View File

@@ -0,0 +1,10 @@
import { useProjectStore } from "@/store/projectStore";
export const apiFetch = (input: RequestInfo | URL, init: RequestInit = {}) => {
const projectId = useProjectStore.getState().currentProjectId;
const headers = new Headers(init.headers ?? {});
if (projectId) {
headers.set("X-Project-ID", projectId);
}
return fetch(input, { ...init, headers });
};

5
src/providers/data-provider/index.ts
View File

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

27
src/store/projectStore.ts Normal file
View File

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