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

升级openlayers；新增骨架图，提供即时视觉反馈

Browse Source
This commit is contained in:
JIANG
2025-11-10 09:49:55 +08:00
parent 6f014cbdd3
commit 5b4fcaa446
9 changed files with 209 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/components/loading/MapSkeleton.tsx Normal file
View File

@@ -0,0 +1,174 @@
import { Box, Skeleton } from "@mui/material";
/**
* 地图页面骨架屏组件
* 提供即时视觉反馈,模拟地图界面布局
*/
export function MapSkeleton() {
return (
<Box
sx={{
width: "100%",
height: "100%",
position: "relative",
bgcolor: "background.default",
overflow: "hidden",
}}
>
{/* 主地图区域骨架 */}
<Skeleton
variant="rectangular"
animation="wave"
sx={{
width: "100%",
height: "100%",
bgcolor: "action.hover",
}}
/>
{/* 左侧工具栏骨架 */}
<Box
sx={{
position: "absolute",
top: 20,
left: 20,
display: "flex",
flexDirection: "column",
gap: 1,
}}
>
{[1, 2, 3, 4, 5].map((i) => (
<Skeleton
key={i}
variant="rectangular"
width={48}
height={48}
animation="wave"
sx={{ borderRadius: 1 }}
/>
))}
</Box>
{/* 右侧控制面板骨架 */}
<Box
sx={{
position: "absolute",
top: 20,
right: 20,
width: 320,
bgcolor: "background.paper",
borderRadius: 2,
p: 2,
boxShadow: 3,
}}
>
<Skeleton width="60%" height={32} animation="wave" sx={{ mb: 2 }} />
<Skeleton width="100%" height={24} animation="wave" sx={{ mb: 1 }} />
<Skeleton width="80%" height={24} animation="wave" sx={{ mb: 1 }} />
<Skeleton width="90%" height={24} animation="wave" sx={{ mb: 2 }} />
<Skeleton
variant="rectangular"
width="100%"
height={200}
animation="wave"
sx={{ borderRadius: 1 }}
/>
</Box>
{/* 底部时间轴骨架 */}
<Box
sx={{
position: "absolute",
bottom: 20,
left: "50%",
transform: "translateX(-50%)",
width: "60%",
bgcolor: "background.paper",
borderRadius: 2,
p: 2,
boxShadow: 3,
}}
>
<Skeleton width="100%" height={40} animation="wave" />
</Box>
{/* 缩放控制骨架 */}
<Box
sx={{
position: "absolute",
bottom: 100,
right: 20,
display: "flex",
flexDirection: "column",
gap: 1,
}}
>
<Skeleton
variant="rectangular"
width={40}
height={40}
animation="wave"
sx={{ borderRadius: 1 }}
/>
<Skeleton
variant="rectangular"
width={40}
height={40}
animation="wave"
sx={{ borderRadius: 1 }}
/>
</Box>
{/* 比例尺骨架 */}
<Box
sx={{
position: "absolute",
bottom: 20,
left: 20,
}}
>
<Skeleton width={120} height={24} animation="wave" />
</Box>
</Box>
);
}
/**
* 简化版骨架屏 - 用于非地图页面
*/
export function SimpleSkeleton() {
return (
<Box
sx={{
width: "100%",
height: "100%",
p: 3,
bgcolor: "background.default",
}}
>
<Skeleton width="40%" height={40} animation="wave" sx={{ mb: 3 }} />
<Skeleton width="100%" height={60} animation="wave" sx={{ mb: 2 }} />
<Skeleton width="100%" height={300} animation="wave" sx={{ mb: 2 }} />
<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
<Skeleton
variant="rectangular"
width="30%"
height={150}
animation="wave"
/>
<Skeleton
variant="rectangular"
width="30%"
height={150}
animation="wave"
/>
<Skeleton
variant="rectangular"
width="30%"
height={150}
animation="wave"
/>
</Box>
</Box>
);
}