fix(layout): prevent map page overflow

.gitignore

@@ -19,6 +19,7 @@
 # misc
 .DS_Store
 *.pem
+/public/runtime-config.js
 
 # debug
 npm-debug.log*

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

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

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 />}>

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"