diff --git a/package-lock.json b/package-lock.json index 88dac76..39d83b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,7 @@ "js-cookie": "^3.0.5", "next": "^15.2.4", "next-auth": "^4.24.5", - "ol": "^10.6.1", + "ol": "^10.7.0", "postcss": "^8.5.6", "react": "^19.1.0", "react-dom": "^19.1.0", @@ -15391,9 +15391,9 @@ } }, "node_modules/ol": { - "version": "10.6.1", - "resolved": "https://registry.npmjs.org/ol/-/ol-10.6.1.tgz", - "integrity": "sha512-xp174YOwPeLj7c7/8TCIEHQ4d41tgTDDhdv6SqNdySsql5/MaFJEJkjlsYcvOPt7xA6vrum/QG4UdJ0iCGT1cg==", + "version": "10.7.0", + "resolved": "https://registry.npmjs.org/ol/-/ol-10.7.0.tgz", + "integrity": "sha512-122U5gamPqNgLpLOkogFJhgpywvd/5en2kETIDW+Ubfi9lPnZ0G9HWRdG+CX0oP8od2d6u6ky3eewIYYlrVczw==", "license": "BSD-2-Clause", "dependencies": { "@types/rbush": "4.0.0", diff --git a/package.json b/package.json index 18bade5..e36f9e6 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "js-cookie": "^3.0.5", "next": "^15.2.4", "next-auth": "^4.24.5", - "ol": "^10.6.1", + "ol": "^10.7.0", "postcss": "^8.5.6", "react": "^19.1.0", "react-dom": "^19.1.0", diff --git a/src/app/(main)/burst-pipe-analysis/loading.tsx b/src/app/(main)/burst-pipe-analysis/loading.tsx new file mode 100644 index 0000000..2c57921 --- /dev/null +++ b/src/app/(main)/burst-pipe-analysis/loading.tsx @@ -0,0 +1,5 @@ +import { MapSkeleton } from "@components/loading/MapSkeleton"; + +export default function Loading() { + return ; +} diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx index 6a77b3f..0cf2e14 100644 --- a/src/app/(main)/layout.tsx +++ b/src/app/(main)/layout.tsx @@ -1,11 +1,12 @@ import type { Metadata } from "next"; import { cookies } from "next/headers"; -import React from "react"; +import React, { Suspense } from "react"; import { RefineContext } from "../_refine_context"; import authOptions from "@app/api/auth/[...nextauth]/options"; import { Header } from "@components/header"; import { Title } from "@components/title"; +import { MapSkeleton } from "@components/loading/MapSkeleton"; import { ThemedLayout } from "@refinedev/mui"; import { getServerSession } from "next-auth/next"; import { redirect } from "next/navigation"; @@ -43,7 +44,9 @@ export default async function MainLayout({ sx: { height: "100%" }, }} > - {children} + }> + {children} + ); diff --git a/src/app/(main)/monitoring-place-optimization/loading.tsx b/src/app/(main)/monitoring-place-optimization/loading.tsx new file mode 100644 index 0000000..2c57921 --- /dev/null +++ b/src/app/(main)/monitoring-place-optimization/loading.tsx @@ -0,0 +1,5 @@ +import { MapSkeleton } from "@components/loading/MapSkeleton"; + +export default function Loading() { + return ; +} diff --git a/src/app/(main)/network-partition-optimization/loading.tsx b/src/app/(main)/network-partition-optimization/loading.tsx new file mode 100644 index 0000000..2c57921 --- /dev/null +++ b/src/app/(main)/network-partition-optimization/loading.tsx @@ -0,0 +1,5 @@ +import { MapSkeleton } from "@components/loading/MapSkeleton"; + +export default function Loading() { + return ; +} diff --git a/src/app/(main)/network-simulation/loading.tsx b/src/app/(main)/network-simulation/loading.tsx new file mode 100644 index 0000000..2c57921 --- /dev/null +++ b/src/app/(main)/network-simulation/loading.tsx @@ -0,0 +1,5 @@ +import { MapSkeleton } from "@components/loading/MapSkeleton"; + +export default function Loading() { + return ; +} diff --git a/src/app/(main)/scada-data-cleaning/loading.tsx b/src/app/(main)/scada-data-cleaning/loading.tsx new file mode 100644 index 0000000..2c57921 --- /dev/null +++ b/src/app/(main)/scada-data-cleaning/loading.tsx @@ -0,0 +1,5 @@ +import { MapSkeleton } from "@components/loading/MapSkeleton"; + +export default function Loading() { + return ; +} diff --git a/src/components/loading/MapSkeleton.tsx b/src/components/loading/MapSkeleton.tsx new file mode 100644 index 0000000..6cb2bb8 --- /dev/null +++ b/src/components/loading/MapSkeleton.tsx @@ -0,0 +1,174 @@ +import { Box, Skeleton } from "@mui/material"; + +/** + * 地图页面骨架屏组件 + * 提供即时视觉反馈,模拟地图界面布局 + */ +export function MapSkeleton() { + return ( + + {/* 主地图区域骨架 */} + + + {/* 左侧工具栏骨架 */} + + {[1, 2, 3, 4, 5].map((i) => ( + + ))} + + + {/* 右侧控制面板骨架 */} + + + + + + + + + {/* 底部时间轴骨架 */} + + + + + {/* 缩放控制骨架 */} + + + + + + {/* 比例尺骨架 */} + + + + + ); +} + +/** + * 简化版骨架屏 - 用于非地图页面 + */ +export function SimpleSkeleton() { + return ( + + + + + + + + + + + ); +}