From ba8991d1b58d9108876e5a9efdaf71db595c9bbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Mon, 31 Mar 2025 22:25:43 +0800
Subject: [PATCH] =?UTF-8?q?Harmony=E5=8A=9F=E8=83=BD=E4=B8=AD=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=90=91Scheme=E9=80=89=E6=8B=A9=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../harmonies/HarmonyPreview.module.css       | 24 +++++++++++++++----
 .../harmonies/HarmonyPreview.tsx              |  8 +++++--
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/page-components/harmonies/HarmonyPreview.module.css b/src/page-components/harmonies/HarmonyPreview.module.css
index 394df47..d6311e7 100644
--- a/src/page-components/harmonies/HarmonyPreview.module.css
+++ b/src/page-components/harmonies/HarmonyPreview.module.css
@@ -1,6 +1,7 @@
 @layer pages {
   .preview {
     width: 100%;
+    height: 100%;
     padding: 0 var(--spacing-m);
     display: flex;
     flex-direction: column;
@@ -9,6 +10,7 @@
       font-size: var(--font-size-m);
     }
     .color_blocks {
+      flex: 1;
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
@@ -16,6 +18,7 @@
       flex-wrap: nowrap;
       gap: var(--spacing-s);
       .color_block {
+        max-height: 23em;
         display: flex;
         flex-direction: column;
         align-items: stretch;
@@ -42,14 +45,25 @@
           padding-inline: var(--spacing-s);
           font-size: var(--font-size-s);
         }
-        .color_code {
+        .color_code_row {
           height: 1.5em;
           padding-inline: var(--spacing-s);
           font-size: var(--font-size-s);
-          text-transform: uppercase;
-          text-align: right;
-          > span {
-            cursor: pointer;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-end;
+          align-items: center;
+          gap: var(--spacing-xs);
+          overflow: visible;
+          .color_code {
+            height: 1.5em;
+            padding-inline: var(--spacing-s);
+            font-size: var(--font-size-s);
+            text-transform: uppercase;
+            text-align: right;
+            > span {
+              cursor: pointer;
+            }
           }
         }
       }
diff --git a/src/page-components/harmonies/HarmonyPreview.tsx b/src/page-components/harmonies/HarmonyPreview.tsx
index dc77602..e5dcd9d 100644
--- a/src/page-components/harmonies/HarmonyPreview.tsx
+++ b/src/page-components/harmonies/HarmonyPreview.tsx
@@ -1,6 +1,7 @@
 import cx from 'clsx';
 import { constant, flatten, isEqual, take, times } from 'lodash-es';
 import { useMemo } from 'react';
+import ContextMenu from '../../components/ContextMenu';
 import { useCopyColor } from '../../hooks/useCopyColor';
 import { HarmonyColor } from '../../models';
 import styles from './HarmonyPreview.module.css';
@@ -33,8 +34,11 @@ export function HarmonyPreview({ colors = [] }: HarmonyPreviewProps) {
             style={{ flexGrow: ratio }}>
             <div className={styles.color_ratio}>{ratio > 0 && `Ratio: ${ratio}`}</div>
             <div className={styles.color_square} style={{ backgroundColor: `#${color}` }}></div>
-            <div className={styles.color_code}>
-              {ratio > 0 && <span onClick={() => copyColor(color)}>#{color}</span>}
+            <div className={styles.color_code_row}>
+              <div className={styles.color_code}>
+                {ratio > 0 && <span onClick={() => copyColor(color)}>#{color}</span>}
+              </div>
+              <ContextMenu color={color} />
             </div>
           </div>
         ))}