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

src/components/RGBAssemble.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useColorFunction } from '../ColorFunctionContext';
+import { ColorRangePicker } from './ColorRangePicker';
+
+type RGBAssembleProps = {
+  color: string | null;
+  onChange: (color: string) => void;
+};
+
+export function RGBAssemble({ color = '000000', onChange }: RGBAssembleProps) {
+  const { colorFn } = useColorFunction();
+  const rgbComponents = useMemo(() => {
+    try {
+      const [r, g, b] = colorFn?.represent_rgb(color) ?? [0, 0, 0];
+      return [r, g, b];
+    } catch (error) {
+      console.error('[Convert RGB]', error);
+    }
+    return [0, 0, 0];
+  }, [color]);
+  const [r, setR] = useState(0);
+  const [g, setG] = useState(0);
+  const [b, setB] = useState(0);
+
+  useEffect(() => {
+    try {
+      const newColor = colorFn?.rgb_to_hex(r, g, b) ?? '000000';
+      onChange(newColor);
+    } catch (error) {
+      console.error('[Convert RGB]', error);
+    }
+  }, [r, g, b]);
+  useEffect(() => {
+    setR(rgbComponents[0]);
+    setG(rgbComponents[1]);
+    setB(rgbComponents[2]);
+  }, []);
+
+  return (
+    <div>
+      <ColorRangePicker
+        title="Red"
+        startColor="rgb(0, 0, 0)"
+        endColor="rgb(255, 0, 0)"
+        max={255}
+        step={1}
+        value={r}
+        onChange={setR}
+      />
+      <ColorRangePicker
+        title="Green"
+        startColor="rgb(0, 0, 0)"
+        endColor="rgb(0, 255, 0)"
+        max={255}
+        step={1}
+        value={g}
+        onChange={setG}
+      />
+      <ColorRangePicker
+        title="Blue"
+        startColor="rgb(0, 0, 0)"
+        endColor="rgb(0, 0, 255)"
+        max={255}
+        step={1}
+        value={b}
+        onChange={setB}
+      />
+    </div>
+  );
+}