113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { Box, Typography } from "@mui/material";
|
|
import { SearchOffOutlined } from "@mui/icons-material";
|
|
import { alpha } from "@mui/material/styles";
|
|
|
|
export interface PanelEmptyStateProps {
|
|
icon?: ReactNode;
|
|
title: string;
|
|
description?: string;
|
|
variant?: "panel" | "compact";
|
|
}
|
|
|
|
const PanelEmptyState = ({
|
|
icon,
|
|
title,
|
|
description,
|
|
variant = "panel",
|
|
}: PanelEmptyStateProps) => {
|
|
const compact = variant === "compact";
|
|
|
|
return (
|
|
<Box
|
|
role="status"
|
|
aria-live="polite"
|
|
lang="zh-CN"
|
|
sx={(theme) => ({
|
|
width: "100%",
|
|
height: compact ? "auto" : "100%",
|
|
minHeight: compact ? 48 : 220,
|
|
display: "flex",
|
|
flexDirection: compact ? "row" : { xs: "column", sm: "row" },
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: compact ? 1.5 : { xs: 1.75, sm: 2.5 },
|
|
px: compact ? 1.5 : { xs: 2, sm: 4 },
|
|
py: compact ? 1.25 : { xs: 4, sm: 5 },
|
|
color: "text.secondary",
|
|
textAlign: compact ? "left" : { xs: "center", sm: "left" },
|
|
boxSizing: "border-box",
|
|
"& .MuiTypography-root": {
|
|
textWrap: "pretty",
|
|
},
|
|
"& .MuiSvgIcon-root": {
|
|
fontSize: compact ? 22 : 32,
|
|
},
|
|
"& > [aria-hidden='true']": {
|
|
flex: "0 0 auto",
|
|
width: compact ? 36 : 56,
|
|
height: compact ? 36 : 56,
|
|
borderRadius: compact ? 2 : 3,
|
|
display: "grid",
|
|
placeItems: "center",
|
|
color: "primary.main",
|
|
backgroundColor: alpha(theme.palette.primary.main, 0.08),
|
|
boxShadow: `inset 0 0 0 1px ${alpha(
|
|
theme.palette.primary.main,
|
|
0.12,
|
|
)}`,
|
|
},
|
|
})}
|
|
>
|
|
{icon ? <Box aria-hidden="true">{icon}</Box> : null}
|
|
<Box sx={{ minWidth: 0, maxWidth: compact ? "none" : 380 }}>
|
|
<Typography
|
|
variant={compact ? "body2" : "subtitle1"}
|
|
sx={{
|
|
color: "text.primary",
|
|
fontWeight: 600,
|
|
lineHeight: compact ? 1.5 : 1.55,
|
|
}}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
{description ? (
|
|
<Typography
|
|
variant={compact ? "caption" : "body2"}
|
|
sx={{
|
|
display: "block",
|
|
mt: compact ? 0.25 : 0.75,
|
|
color: "text.secondary",
|
|
lineHeight: compact ? 1.6 : 1.7,
|
|
}}
|
|
>
|
|
{description}
|
|
</Typography>
|
|
) : null}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export interface SchemeQueryEmptyStateProps {
|
|
hasQueried: boolean;
|
|
}
|
|
|
|
export const SchemeQueryEmptyState = ({
|
|
hasQueried,
|
|
}: SchemeQueryEmptyStateProps) => (
|
|
<PanelEmptyState
|
|
icon={<SearchOffOutlined />}
|
|
title={hasQueried ? "未找到符合条件的方案" : "尚未查询历史方案"}
|
|
description={
|
|
hasQueried
|
|
? "请调整查询条件后重新查询，或先创建一个新方案。"
|
|
: "设置查询条件后点击“查询”，这里将显示可查看的历史方案。"
|
|
}
|
|
/>
|
|
);
|
|
|
|
export default PanelEmptyState;
|