From 71978c1357f011a534f8ce9206367ac4dda9a357 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 31 Dec 2024 11:15:57 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=9C=E8=89=B2=E9=80=89=E6=8B=A9=E6=9D=86?=
 =?UTF-8?q?=E7=9A=84=E8=83=8C=E6=99=AF=E5=AE=9A=E4=B9=89=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E5=AE=9A=E4=B9=89=E6=B8=90=E5=8F=98=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorRangePicker.tsx | 8 +++-----
 src/components/RGBAssemble.tsx      | 9 +++------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/ColorRangePicker.tsx b/src/components/ColorRangePicker.tsx
index 4960c0a..60a0cbb 100644
--- a/src/components/ColorRangePicker.tsx
+++ b/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>
   );
diff --git a/src/components/RGBAssemble.tsx b/src/components/RGBAssemble.tsx
index 6181558..cdd5af2 100644
--- a/src/components/RGBAssemble.tsx
+++ b/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}