From e32eed405fbf7b494f91de83f5c58a6f126d4119 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 16:10:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=89=B2=E5=8D=A1=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=AD=E7=9A=84=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0ContextMenu=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page-components/cards-detail/ColorCard.module.css | 3 ++-
 src/page-components/cards-detail/ColorCard.tsx        | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/page-components/cards-detail/ColorCard.module.css b/src/page-components/cards-detail/ColorCard.module.css
index 13767cd..cbd1427 100644
--- a/src/page-components/cards-detail/ColorCard.module.css
+++ b/src/page-components/cards-detail/ColorCard.module.css
@@ -8,7 +8,6 @@
     line-height: var(--font-size-xxs);
     border: 1px solid var(--color-border);
     border-radius: var(--border-radius-xs);
-    cursor: pointer;
   }
   .color_block {
     width: 100%;
@@ -19,6 +18,7 @@
     flex-direction: row;
     align-items: center;
     padding: var(--spacing-xs) var(--spacing-s);
+    gap: var(--spacing-s);
   }
   .title {
     display: flex;
@@ -38,5 +38,6 @@
   }
   .color_value {
     text-transform: uppercase;
+    cursor: pointer;
   }
 }
diff --git a/src/page-components/cards-detail/ColorCard.tsx b/src/page-components/cards-detail/ColorCard.tsx
index 3c98183..bf1ef6c 100644
--- a/src/page-components/cards-detail/ColorCard.tsx
+++ b/src/page-components/cards-detail/ColorCard.tsx
@@ -1,6 +1,7 @@
 import { capitalize, isEmpty } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 import { useColorFunction } from '../../ColorFunctionContext';
+import ContextMenu from '../../components/ContextMenu';
 import { useCopyColor } from '../../hooks/useCopyColor';
 import { ColorDescription } from '../../models';
 import styles from './ColorCard.module.css';
@@ -57,7 +58,7 @@ export function ColorCard({ color, copyMode }: ColorCardProps) {
   }, [copytToClipboard, color, copyMode, colorHex]);
 
   return (
-    <div className={styles.card} onClick={handleCopy}>
+    <div className={styles.card}>
       <div
         className={styles.color_block}
         style={{ backgroundColor: `rgb(${color.rgb[0]}, ${color.rgb[1]}, ${color.rgb[2]})` }}
@@ -69,7 +70,10 @@ export function ColorCard({ color, copyMode }: ColorCardProps) {
             <span className={styles.en_name}>{color.pinyin.map(capitalize).join(' ')}</span>
           )}
         </div>
-        <div className={styles.color_value}>#{colorHex}</div>
+        <div className={styles.color_value} onClick={handleCopy}>
+          #{colorHex}
+        </div>
+        <ContextMenu color={colorHex} />
       </div>
     </div>
   );