增加色轮色调和变化步长的设置功能。

src/page-components/wheels/ColorColumn.tsx

@@ -27,19 +27,21 @@ type ColorWheelProps = {
   actived: boolean;
   rotate: number;
   rootColor: string;
+  tones: number;
+  step: number;
 };
 
-export function ColorColumn({ actived, rotate, rootColor }: ColorWheelProps) {
+export function ColorColumn({ actived, rotate, rootColor, tones, step }: ColorWheelProps) {
   const { colorFn } = useColorFunction();
   const colorSeries = useMemo(() => {
     try {
-      const colors = colorFn?.series(rootColor, 4, 0.16);
+      const colors = colorFn?.series(rootColor, tones, step / 100);
       return (colors ?? Array.from({ length: 9 }, () => rootColor)).reverse();
     } catch (e) {
       console.error('[Generate Color Series]', e);
     }
     return Array.from({ length: 9 }, () => rootColor);
-  }, [rootColor]);
+  }, [rootColor, tones, step]);
 
   return (
     <div

src/page-components/wheels/ColorWheel.tsx

@@ -16,6 +16,8 @@ type ColorWheelProps = {
     | 'tetradic'
     | 'flip_tetradic'
     | 'square';
+  tones?: number;
+  step?: number;
 };
 
 const wheelRotates = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330];
@@ -33,6 +35,8 @@ const highlightSeries = {
 export function ColorWheel({
   originColor = '000000',
   highlightMode = 'complementary',
+  tones = 4,
+  step = 10,
 }: ColorWheelProps) {
   const { colorFn } = useColorFunction();
   const wheelColors = useMemo(() => {
@@ -58,6 +62,8 @@ export function ColorWheel({
               rootColor={color}
               rotate={rotate}
               actived={includes(highlightSeries[highlightMode], rotate)}
+              tones={tones}
+              step={step}
             />
           ))}
         </div>