From 6fbe9c70d74ef43d1dffd285b08c48c6448174a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 7 Jan 2025 11:19:27 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=89=B2=E8=BD=AE=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=86=85=E5=AE=B9=E9=A1=BA=E5=BA=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page-components/wheels/ColorColumn.tsx |  4 ++-
 src/pages/Wheels.tsx                       | 32 +++++++++++-----------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/page-components/wheels/ColorColumn.tsx b/src/page-components/wheels/ColorColumn.tsx
index aa415f6..52aa6a6 100644
--- a/src/page-components/wheels/ColorColumn.tsx
+++ b/src/page-components/wheels/ColorColumn.tsx
@@ -15,7 +15,9 @@ function ColorBlock({ dimmed, color, isRoot = false }: ColorBlockProps) {
   const copyColor = useCopyColor();
 
   return (
-    <div className={styles.color_block} onClick={() => copyColor(color)}>
+    <div
+      className={styles.color_block}
+      onClick={() => copyColor(color.startsWith('#') ? color : `#${color}`)}>
       <div className={styles.bg} style={{ backgroundColor: `#${color}` }} />
       <div className={cx(styles.dim_overlay, dimmed && styles.show_overlay)} />
       <div className={cx(isRoot && styles.active)} />
diff --git a/src/pages/Wheels.tsx b/src/pages/Wheels.tsx
index 84043d4..68394d5 100644
--- a/src/pages/Wheels.tsx
+++ b/src/pages/Wheels.tsx
@@ -28,6 +28,22 @@ export function Wheels() {
               <h5>Basic color</h5>
               <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
             </div>
+            <div className={styles.mode_navigation}>
+              <h5>Color selection method</h5>
+              <VSegmentedControl
+                onChange={setSelectedMode}
+                options={[
+                  { label: 'Complementary', value: 'complementary' },
+                  { label: 'Analogous', value: 'analogous' },
+                  { label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
+                  { label: 'Triadic', value: 'triadic' },
+                  { label: 'Split Complementary', value: 'split_complementary' },
+                  { label: 'Tetradic', value: 'tetradic' },
+                  { label: 'Flip Tetradic', value: 'flip_tetradic' },
+                  { label: 'Square', value: 'square' },
+                ]}
+              />
+            </div>
             <div>
               <h5>Series Setting</h5>
               <LabeledPicker
@@ -48,22 +64,6 @@ export function Wheels() {
                 onChange={setSteps}
               />
             </div>
-            <div className={styles.mode_navigation}>
-              <h5>Color selection method</h5>
-              <VSegmentedControl
-                onChange={setSelectedMode}
-                options={[
-                  { label: 'Complementary', value: 'complementary' },
-                  { label: 'Analogous', value: 'analogous' },
-                  { label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
-                  { label: 'Triadic', value: 'triadic' },
-                  { label: 'Split Complementary', value: 'split_complementary' },
-                  { label: 'Tetradic', value: 'tetradic' },
-                  { label: 'Flip Tetradic', value: 'flip_tetradic' },
-                  { label: 'Square', value: 'square' },
-                ]}
-              />
-            </div>
           </aside>
           <div className={styles.wheel_side}>
             <ColorWheel