更新色卡组件中的样式，增加ContextMenu功能。

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;
   }
 }

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>
   );