fix(flushing): 对齐选择项空状态
This commit is contained in:
@@ -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 },
|
||||||
|
|||||||
Reference in New Issue
Block a user