From 5332f8f0c58e8b2a4fa9c42152e3d0381c70d124 Mon Sep 17 00:00:00 2001
From: Huarch <huarch97@outlook.com>
Date: Mon, 20 Jul 2026 13:12:19 +0800
Subject: [PATCH] fix(layout): prevent map page overflow

---
 .gitignore                                 |  1 +
 package.json                               |  3 +-
 scripts/generate-runtime-config.mjs        | 39 ++++++++++++++++++++++
 src/app/(main)/layout.tsx                  |  9 +++--
 src/components/olmap/core/MapComponent.tsx | 12 +++----
 5 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 scripts/generate-runtime-config.mjs

diff --git a/.gitignore b/.gitignore
index 5bb1e16..8dd8a9c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,6 +19,7 @@
 # misc
 .DS_Store
 *.pem
+/public/runtime-config.js
 
 # debug
 npm-debug.log*
diff --git a/package.json b/package.json
index eeff8bf..1f2ba00 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "node": ">=20"
   },
   "scripts": {
-    "dev": "cross-env NODE_OPTIONS=--max_old_space_size=4096 next dev",
+    "dev": "npm run runtime:config && cross-env NODE_OPTIONS=--max_old_space_size=4096 next dev",
+    "runtime:config": "node scripts/generate-runtime-config.mjs",
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",
diff --git a/scripts/generate-runtime-config.mjs b/scripts/generate-runtime-config.mjs
new file mode 100644
index 0000000..3e74911
--- /dev/null
+++ b/scripts/generate-runtime-config.mjs
@@ -0,0 +1,39 @@
+import nextEnv from "@next/env";
+import fs from "node:fs";
+import path from "node:path";
+
+const projectDir = process.cwd();
+const { loadEnvConfig } = nextEnv;
+
+loadEnvConfig(projectDir, process.env.NODE_ENV !== "production");
+
+const parseExtent = (value) => {
+  if (!value) {
+    return [13508849, 3608036, 13555781, 3633813];
+  }
+
+  const extent = value.split(",").map(Number);
+  return extent.length === 4 && extent.every(Number.isFinite)
+    ? extent
+    : [13508849, 3608036, 13555781, 3633813];
+};
+
+const config = {
+  BACKEND_URL: process.env.BACKEND_URL || "http://127.0.0.1:8000",
+  AGENT_URL: process.env.AGENT_URL || "http://127.0.0.1:8788",
+  MAP_URL: process.env.MAP_URL || "http://127.0.0.1:8080/geoserver",
+  MAP_WORKSPACE: process.env.MAP_WORKSPACE || "tjwater",
+  MAP_EXTENT: parseExtent(process.env.MAP_EXTENT),
+  NETWORK_NAME: process.env.NETWORK_NAME || "tjwater",
+  MAPBOX_TOKEN: process.env.MAPBOX_TOKEN || "",
+  TIANDITU_TOKEN: process.env.TIANDITU_TOKEN || "",
+};
+
+const outputPath = path.join(projectDir, "public", "runtime-config.js");
+
+fs.writeFileSync(
+  outputPath,
+  `window.__TJWATER_RUNTIME_CONFIG__ = ${JSON.stringify(config)};\n`,
+);
+
+console.log(`Generated ${path.relative(projectDir, outputPath)}`);
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index 07f97ed..ed82d39 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -38,10 +38,15 @@ export default async function MainLayout({
       Title={Title}
       Sider={AppSider}
       childrenBoxProps={{
-        sx: { height: "100vh", p: 0 },
+        sx: {
+          flex: 1,
+          minHeight: 0,
+          overflow: "auto",
+          p: 0,
+        },
       }}
       containerBoxProps={{
-        sx: { height: "100%" },
+        sx: { height: "100vh", overflow: "hidden" },
       }}
     >
       <Suspense fallback={<MapSkeleton />}>
diff --git a/src/components/olmap/core/MapComponent.tsx b/src/components/olmap/core/MapComponent.tsx
index 0440c54..9be03b9 100644
--- a/src/components/olmap/core/MapComponent.tsx
+++ b/src/components/olmap/core/MapComponent.tsx
@@ -1138,12 +1138,12 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
         }}
       >
         <MapContext.Provider value={map}>
-          <div className="relative w-full h-full">
-            <div className="flex w-full h-full">
+          <div className="relative h-full w-full overflow-hidden">
+            <div className="flex h-full min-h-0 w-full min-w-0 overflow-hidden">
               <div
-                className={`relative h-full ${isCompareMode ? "w-1/2" : "w-full"}`}
+                className={`relative h-full min-w-0 overflow-hidden ${isCompareMode ? "w-1/2" : "w-full"}`}
               >
-                <div ref={mapRef} className="w-full h-full"></div>
+                <div ref={mapRef} className="h-full w-full"></div>
                 <canvas
                   ref={canvasRef}
                   className="pointer-events-none absolute inset-0"
@@ -1155,8 +1155,8 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
                 )}
               </div>
               {isCompareMode && (
-                <div className="relative h-full w-1/2 border-l border-white/40">
-                  <div ref={compareMapRef} className="w-full h-full"></div>
+                <div className="relative h-full min-w-0 w-1/2 overflow-hidden border-l border-white/40">
+                  <div ref={compareMapRef} className="h-full w-full"></div>
                   <canvas
                     ref={compareCanvasRef}
                     className="pointer-events-none absolute inset-0"