From fb5aec79d6ebf8a7f92366ad14dd233bc5f3dd8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Mon, 6 Jan 2025 06:48:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A2=9C=E8=89=B2=E7=B3=BB?=
 =?UTF-8?q?=E5=88=97=E9=85=8D=E6=AF=94=E7=9A=84=E8=AE=BE=E7=BD=AE=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Wheels.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/pages/Wheels.tsx b/src/pages/Wheels.tsx
index a2cd2a7..1ae852c 100644
--- a/src/pages/Wheels.tsx
+++ b/src/pages/Wheels.tsx
@@ -2,6 +2,7 @@ import cx from 'clsx';
 import { useAtom } from 'jotai';
 import { useState } from 'react';
 import { ColorPicker } from '../components/ColorPicker';
+import { LabeledPicker } from '../components/LabeledPicker';
 import { VSegmentedControl } from '../components/VSegmentedControl';
 import { ColorWheel } from '../page-components/wheels/ColorWheel';
 import { currentPickedColor } from '../stores/colors';
@@ -10,6 +11,8 @@ import styles from './Wheels.module.css';
 export function Wheels() {
   const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [selectedMode, setSelectedMode] = useState('complementary');
+  const [steps, setSteps] = useState(10);
+  const [tones, setTones] = useState(4);
 
   return (
     <div className={cx('workspace', styles.wheels_workspace)}>
@@ -23,6 +26,26 @@ export function Wheels() {
             <h5>Basic color</h5>
             <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
           </div>
+          <div>
+            <h5>Series Setting</h5>
+            <LabeledPicker
+              title="Expand Tones"
+              min={1}
+              max={5}
+              step={1}
+              value={tones}
+              onChange={setTones}
+            />
+            <LabeledPicker
+              title="Tone Step"
+              min={5}
+              max={50}
+              step={1}
+              unit="%"
+              value={steps}
+              onChange={setSteps}
+            />
+          </div>
           <div className={styles.mode_navigation}>
             <h5>Color selection method</h5>
             <VSegmentedControl