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

feat(config): inject frontend runtime config

Browse Source
This commit is contained in:
jiang
2026-07-20 12:06:57 +08:00
parent 0d559f6130
commit 7a3677ee9f
10 changed files with 127 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/api/auth/[...nextauth]/options.ts
+17 -7
View File
@@ -9,16 +9,26 @@ type KeycloakTokenResponse = {
refresh_token?: string;
};
const keycloakIssuer = process.env.KEYCLOAK_ISSUER!;
const keycloakClientId = process.env.KEYCLOAK_CLIENT_ID!;
const keycloakClientSecret = process.env.KEYCLOAK_CLIENT_SECRET!;
const keycloakTokenEndpoint = `${keycloakIssuer.replace(/\/$/, "")}/protocol/openid-connect/token`;
const getKeycloakTokenEndpoint = () => {
const issuer = process.env.KEYCLOAK_ISSUER;
return issuer
? `${issuer.replace(/\/$/, "")}/protocol/openid-connect/token`
: undefined;
};
const refreshAccessToken = async (token: JWT): Promise<JWT> => {
if (!token.refreshToken) {
return { ...token, error: "RefreshAccessTokenError" };
}
const keycloakClientId = process.env.KEYCLOAK_CLIENT_ID;
const keycloakClientSecret = process.env.KEYCLOAK_CLIENT_SECRET;
const keycloakTokenEndpoint = getKeycloakTokenEndpoint();
if (!keycloakClientId || !keycloakClientSecret || !keycloakTokenEndpoint) {
return { ...token, error: "RefreshAccessTokenError" };
}
const body = new URLSearchParams({
grant_type: "refresh_token",
client_id: keycloakClientId,
@@ -50,9 +60,9 @@ const authOptions: NextAuthOptions = {
// Configure one or more authentication providers
providers: [
KeycloakProvider({
clientId: keycloakClientId,
clientSecret: keycloakClientSecret,
issuer: keycloakIssuer,
clientId: process.env.KEYCLOAK_CLIENT_ID ?? "",
clientSecret: process.env.KEYCLOAK_CLIENT_SECRET ?? "",
issuer: process.env.KEYCLOAK_ISSUER ?? "",
profile(profile) {
return {
id: profile.sub,
src/app/layout.tsx
+2
View File
@@ -1,5 +1,6 @@
import type { Metadata } from "next";
import { cookies } from "next/headers";
import Script from "next/script";
import React, { Suspense } from "react";
import { RefineContext } from "./RefineContext";
import { META_DATA } from "@config/config";
@@ -18,6 +19,7 @@ export default async function RootLayout({
return (
<html lang="en">
<body>
<Script src="/runtime-config.js" strategy="beforeInteractive" />
<Suspense>
<RefineContext defaultMode={defaultMode}>{children}</RefineContext>
</Suspense>
src/components/header/index.tsx
+7 -3
View File
@@ -27,6 +27,10 @@ import { GlobalChatbox } from "@components/chat/GlobalChatbox";
import { setMapExtent, setMapWorkspace, setNetworkName } from "@config/config";
import { useProjectStore } from "@/store/projectStore";
const MAP_WORKSPACE_STORAGE_KEY = "MAP_WORKSPACE";
const NETWORK_NAME_STORAGE_KEY = "NETWORK_NAME";
const MAP_EXTENT_STORAGE_KEY = "MAP_EXTENT";
type IUser = {
id?: string;
name?: string;
@@ -70,9 +74,9 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
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.setItem(MAP_WORKSPACE_STORAGE_KEY, workspace);
localStorage.setItem(NETWORK_NAME_STORAGE_KEY, networkName);
localStorage.setItem(MAP_EXTENT_STORAGE_KEY, extent.join(","));
localStorage.removeItem(`${workspace}_map_view`);
setCurrentProjectId(projectId || networkName || workspace);
setShowProjectSelector(false);
src/config/config.ts
+40 -15
View File
@@ -1,13 +1,41 @@
type RuntimeConfig = {
BACKEND_URL?: string;
AGENT_URL?: string;
MAP_URL?: string;
MAP_WORKSPACE?: string;
MAP_EXTENT?: number[] | string;
NETWORK_NAME?: string;
MAPBOX_TOKEN?: string;
TIANDITU_TOKEN?: string;
};
declare global {
interface Window {
__TJWATER_RUNTIME_CONFIG__?: RuntimeConfig;
}
}
const runtimeConfig =
typeof window === "undefined" ? {} : window.__TJWATER_RUNTIME_CONFIG__ ?? {};
const parseMapExtent = (value: RuntimeConfig["MAP_EXTENT"]): number[] => {
if (Array.isArray(value)) {
return value;
}
if (typeof value === "string" && value.trim()) {
return value.split(",").map(Number);
}
return [13508849, 3608036, 13555781, 3633813];
};
export const config = {
BACKEND_URL: process.env.NEXT_PUBLIC_BACKEND_URL || "http://127.0.0.1:8000",
AGENT_URL: process.env.NEXT_PUBLIC_AGENT_URL || "http://127.0.0.1:8788",
AUDIO_SERVICE_URL:
process.env.NEXT_PUBLIC_AUDIO_SERVICE_URL || "http://127.0.0.1:18083",
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_EXTENT: process.env.NEXT_PUBLIC_MAP_EXTENT
? process.env.NEXT_PUBLIC_MAP_EXTENT.split(",").map(Number)
: [13508849, 3608036, 13555781, 3633813],
BACKEND_URL: runtimeConfig.BACKEND_URL || "http://127.0.0.1:8000",
AGENT_URL: runtimeConfig.AGENT_URL || "http://127.0.0.1:8788",
MAP_URL: runtimeConfig.MAP_URL || "http://127.0.0.1:8080/geoserver",
MAP_WORKSPACE: runtimeConfig.MAP_WORKSPACE || "tjwater",
MAP_EXTENT: parseMapExtent(runtimeConfig.MAP_EXTENT),
MAP_DEFAULT_STYLE: {
"stroke-width": 3,
"stroke-color": "rgba(51, 153, 204, 0.9)",
@@ -33,7 +61,7 @@ export const config = {
"scada",
],
};
export let NETWORK_NAME = process.env.NEXT_PUBLIC_NETWORK_NAME || "tjwater";
export let NETWORK_NAME = runtimeConfig.NETWORK_NAME || "tjwater";
export const setNetworkName = (name: string) => {
NETWORK_NAME = name;
@@ -47,11 +75,8 @@ export const setMapExtent = (extent: number[]) => {
config.MAP_EXTENT = extent;
};
export const MAPBOX_TOKEN =
process.env.NEXT_PUBLIC_MAPBOX_TOKEN ||
"pk.eyJ1IjoiemhpZnUiLCJhIjoiY205azNyNGY1MGkyZDJxcTJleDUwaHV1ZCJ9.wOmSdOnDDdre-mB1Lpy6Fg";
export const TIANDITU_TOKEN =
process.env.NEXT_PUBLIC_TIANDITU_TOKEN || "e3e8ad95ee911741fa71ed7bff2717ec";
export const MAPBOX_TOKEN = runtimeConfig.MAPBOX_TOKEN || "";
export const TIANDITU_TOKEN = runtimeConfig.TIANDITU_TOKEN || "";
export const PROJECT_TITLE = process.env.PROJECT_TITLE || "TJWater Project";
export const META_DATA = {
title: PROJECT_TITLE,
src/contexts/ProjectContext.tsx
+11 -11
View File
@@ -13,6 +13,9 @@ interface ProjectContextType {
}
const ProjectContext = createContext<ProjectContextType | undefined>(undefined);
const MAP_WORKSPACE_STORAGE_KEY = "MAP_WORKSPACE";
const NETWORK_NAME_STORAGE_KEY = "NETWORK_NAME";
const MAP_EXTENT_STORAGE_KEY = "MAP_EXTENT";
export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
children,
@@ -38,15 +41,15 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
setMapWorkspace(ws);
setNetworkName(net);
setMapExtent(extent);
localStorage.setItem("NEXT_PUBLIC_MAP_EXTENT", extent.join(","));
localStorage.setItem(MAP_EXTENT_STORAGE_KEY, 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);
localStorage.setItem(MAP_WORKSPACE_STORAGE_KEY, ws);
localStorage.setItem(NETWORK_NAME_STORAGE_KEY, net);
setIsConfigured(true);
@@ -76,10 +79,7 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
// Update workspace if different
if (data?.gs_workspace && data.gs_workspace !== ws) {
setMapWorkspace(data.gs_workspace);
localStorage.setItem(
"NEXT_PUBLIC_MAP_WORKSPACE",
data.gs_workspace,
);
localStorage.setItem(MAP_WORKSPACE_STORAGE_KEY, data.gs_workspace);
setCurrentProject((prev) => ({
...prev,
workspace: data.gs_workspace,
@@ -92,7 +92,7 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
: null;
if (bbox && bbox.length === 4) {
setMapExtent(bbox);
localStorage.setItem("NEXT_PUBLIC_MAP_EXTENT", bbox.join(","));
localStorage.setItem(MAP_EXTENT_STORAGE_KEY, bbox.join(","));
localStorage.removeItem(`${ws}_map_view`);
setCurrentProject((prev) => ({ ...prev, extent: bbox }));
}
@@ -104,9 +104,9 @@ export const ProjectProvider: React.FC<{ children: React.ReactNode }> = ({
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 savedWorkspace = localStorage.getItem(MAP_WORKSPACE_STORAGE_KEY);
const savedNetwork = localStorage.getItem(NETWORK_NAME_STORAGE_KEY);
const savedExtent = localStorage.getItem(MAP_EXTENT_STORAGE_KEY);
const savedProjectId = localStorage.getItem("active_project");
// If we have saved config, use it.