颜色选择杆的背景定义改为直接定义渐变。

src/components/ColorRangePicker.tsx

@@ -7,8 +7,7 @@ type ColorRangePickerProps = {
   title: string;
   value?: number;
   onChange: (value: number) => void;
-  startColor: string;
-  endColor: string;
+  gradient: string;
   min?: number;
   max: number;
   step?: number;
@@ -19,8 +18,7 @@ export function ColorRangePicker({
   title,
   value = 0,
   onChange,
-  startColor,
-  endColor,
+  gradient,
   min = 0,
   max = 100,
   step = 1,
@@ -53,7 +51,7 @@ export function ColorRangePicker({
         min={min}
         max={max}
         step={step}
-        style={{ background: `linear-gradient(to right, ${startColor} 0%, ${endColor} 100%)` }}
+        style={{ background: gradient }}
       />
     </div>
   );

src/components/RGBAssemble.tsx

@@ -40,8 +40,7 @@ export function RGBAssemble({ color = '000000', onChange }: RGBAssembleProps) {
     <div>
       <ColorRangePicker
         title="Red"
-        startColor="rgb(0, 0, 0)"
-        endColor="rgb(255, 0, 0)"
+        gradient="linear-gradient(to right, #000000, #ff0000)"
         max={255}
         step={1}
         value={r}
@@ -49,8 +48,7 @@ export function RGBAssemble({ color = '000000', onChange }: RGBAssembleProps) {
       />
       <ColorRangePicker
         title="Green"
-        startColor="rgb(0, 0, 0)"
-        endColor="rgb(0, 255, 0)"
+        gradient="linear-gradient(to right, #000000, #00ff00)"
         max={255}
         step={1}
         value={g}
@@ -58,8 +56,7 @@ export function RGBAssemble({ color = '000000', onChange }: RGBAssembleProps) {
       />
       <ColorRangePicker
         title="Blue"
-        startColor="rgb(0, 0, 0)"
-        endColor="rgb(0, 0, 255)"
+        gradient="linear-gradient(to right, #000000, #0000ff)"
         max={255}
         step={1}
         value={b}