fix(flushing): 对齐选择项空状态
Generic Container CI/CD / test-build-publish (push) Successful in 1m1s
Frontend CI/CD v2 / build-test-publish-and-deploy (push) Successful in 1m1s

This commit is contained in:
2026-08-17 19:36:33 +08:00
parent 5053ddcd1f
commit f34d81c933
3 changed files with 10 additions and 1 deletions
@@ -551,6 +551,7 @@ const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
{!drainageNode && ( {!drainageNode && (
<PanelEmptyState <PanelEmptyState
variant="compact" variant="compact"
horizontalAlign="start"
icon={<WaterDropOutlined />} icon={<WaterDropOutlined />}
title="尚未选择排水节点" title="尚未选择排水节点"
description="点击“选择节点”,然后在地图上指定排水点。" description="点击“选择节点”,然后在地图上指定排水点。"
@@ -651,6 +652,7 @@ const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
{valves.length === 0 && ( {valves.length === 0 && (
<PanelEmptyState <PanelEmptyState
variant="compact" variant="compact"
horizontalAlign="start"
icon={<AdjustOutlined />} icon={<AdjustOutlined />}
title="未选择参与阀门" title="未选择参与阀门"
description="无需调整阀门时可跳过,也可点击“选择阀门”添加。" description="无需调整阀门时可跳过,也可点击“选择阀门”添加。"
@@ -36,11 +36,15 @@ describe("PanelEmptyState", () => {
render( render(
<PanelEmptyState <PanelEmptyState
variant="compact" variant="compact"
horizontalAlign="start"
title="尚未选择阀门" title="尚未选择阀门"
description="点击“选择阀门”,然后在地图上添加。" description="点击“选择阀门”,然后在地图上添加。"
/>, />,
); );
expect(screen.getByText("尚未选择阀门")).toBeInTheDocument(); expect(screen.getByText("尚未选择阀门")).toBeInTheDocument();
expect(screen.getByRole("status")).toHaveStyle({
justifyContent: "flex-start",
});
}); });
}); });
@@ -10,6 +10,7 @@ export interface PanelEmptyStateProps {
title: string; title: string;
description?: string; description?: string;
variant?: "panel" | "compact"; variant?: "panel" | "compact";
horizontalAlign?: "center" | "start";
} }
const PanelEmptyState = ({ const PanelEmptyState = ({
@@ -17,6 +18,7 @@ const PanelEmptyState = ({
title, title,
description, description,
variant = "panel", variant = "panel",
horizontalAlign = "center",
}: PanelEmptyStateProps) => { }: PanelEmptyStateProps) => {
const compact = variant === "compact"; const compact = variant === "compact";
@@ -32,7 +34,8 @@ const PanelEmptyState = ({
display: "flex", display: "flex",
flexDirection: compact ? "row" : { xs: "column", sm: "row" }, flexDirection: compact ? "row" : { xs: "column", sm: "row" },
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent:
horizontalAlign === "start" ? "flex-start" : "center",
gap: compact ? 1.5 : { xs: 1.75, sm: 2.5 }, gap: compact ? 1.5 : { xs: 1.75, sm: 2.5 },
px: compact ? 1.5 : { xs: 2, sm: 4 }, px: compact ? 1.5 : { xs: 2, sm: 4 },
py: compact ? 1.25 : { xs: 4, sm: 5 }, py: compact ? 1.25 : { xs: 4, sm: 5 },