feat(ui): 统一面板空状态引导

2026-07-30 14:34:43 +08:00
parent 8836549697
commit 04557b9363
21 changed files with 400 additions and 435 deletions
@@ -0,0 +1,112 @@
+"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;