diff --git a/src/components/olmap/FlushingAnalysis/AnalysisParameters.tsx b/src/components/olmap/FlushingAnalysis/AnalysisParameters.tsx index 9526e4f..b203a65 100644 --- a/src/components/olmap/FlushingAnalysis/AnalysisParameters.tsx +++ b/src/components/olmap/FlushingAnalysis/AnalysisParameters.tsx @@ -53,6 +53,7 @@ import { VALVE_STATUS_OPTIONS, validateValveSetting, } from "@components/olmap/core/Controls/valveControl"; +import { getValveListClassName } from "./analysisParametersLayout"; export interface ValveItem { id: string; @@ -582,7 +583,10 @@ const AnalysisParameters: React.FC = ({ 💡 点击地图上的阀门进行添加 )} - + {valves.map((valve) => { const settingValidation = valve.status === "ACTIVE" diff --git a/src/components/olmap/FlushingAnalysis/analysisParametersLayout.test.ts b/src/components/olmap/FlushingAnalysis/analysisParametersLayout.test.ts new file mode 100644 index 0000000..e1003bf --- /dev/null +++ b/src/components/olmap/FlushingAnalysis/analysisParametersLayout.test.ts @@ -0,0 +1,13 @@ +import { getValveListClassName } from "./analysisParametersLayout"; + +describe("getValveListClassName", () => { + it("uses compact height when no valves are selected", () => { + expect(getValveListClassName(0)).toBe("min-h-16 overflow-auto"); + }); + + it("restores the fixed scroll region when valves are selected", () => { + expect(getValveListClassName(1)).toBe( + "max-h-50 h-48 overflow-auto", + ); + }); +}); diff --git a/src/components/olmap/FlushingAnalysis/analysisParametersLayout.ts b/src/components/olmap/FlushingAnalysis/analysisParametersLayout.ts new file mode 100644 index 0000000..fc14c78 --- /dev/null +++ b/src/components/olmap/FlushingAnalysis/analysisParametersLayout.ts @@ -0,0 +1,4 @@ +export const getValveListClassName = (valveCount: number): string => + valveCount > 0 + ? "max-h-50 h-48 overflow-auto" + : "min-h-16 overflow-auto";