完成HSL颜色合成选择器组件。

src/components/HslAsssemble.tsx

@@ -0,0 +1,73 @@
+import { floor } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
+import { useColorFunction } from '../ColorFunctionContext';
+import { ColorRangePicker } from './ColorRangePicker';
+
+type HslAssembleProps = {
+  color: string;
+  onChange: (color: string) => void;
+};
+
+export function HslAssemble({ color, onChange }: HslAssembleProps) {
+  const { colorFn } = useColorFunction();
+  const colorComponent = useMemo(() => {
+    try {
+      const [h, s, l] = colorFn?.represent_hsl(color) ?? [0, 0, 0];
+      return [h, s, l];
+    } catch (error) {
+      console.error('[Convert HSL]', error);
+    }
+    return [0, 0, 0];
+  }, [color]);
+  const [h, setH] = useState(0);
+  const [s, setS] = useState(0);
+  const [l, setL] = useState(0);
+
+  useEffect(() => {
+    try {
+      const newColor = colorFn?.hsl_to_hex(h, s / 100, l / 100) ?? '000000';
+      onChange(newColor);
+    } catch (error) {
+      console.error('[Convert RGB]', error);
+    }
+  }, [h, s, l]);
+  useEffect(() => {
+    setH(colorComponent[0]);
+    setS(colorComponent[1] * 100);
+    setL(colorComponent[2] * 100);
+  }, []);
+
+  return (
+    <div>
+      <ColorRangePicker
+        title="Hue"
+        value={h}
+        onChange={setH}
+        gradient={`linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%))`}
+        max={360}
+        step={0.1}
+        valueProcess={(v) => floor(v, 2)}
+      />
+      <ColorRangePicker
+        title="Saturation"
+        value={s}
+        unit="%"
+        onChange={setS}
+        gradient={`linear-gradient(to right, hsl(${h}, 0%, 50%), hsl(${h}, 100%, 50%))`}
+        max={100}
+        step={0.01}
+        valueProcess={(v) => floor(v, 2)}
+      />
+      <ColorRangePicker
+        title="Lightness"
+        value={l}
+        unit="%"
+        onChange={setL}
+        gradient={`linear-gradient(to right, hsl(${h}, ${s}%, 0%), hsl(${h}, ${s}%, 50%), hsl(${h}, ${s}%, 100%))`}
+        max={100}
+        step={0.01}
+        valueProcess={(v) => floor(v, 2)}
+      />
+    </div>
+  );
+}