向通用颜色展示卡片增加换气ContextMenu功能。

src/components/FlexColorStand.module.css

@@ -11,12 +11,19 @@
     .color_block {
       flex: 1 0;
     }
-    .color_value {
+    .operate_row {
       padding: var(--spacing-xxs) var(--spacing-xs);
       font-size: var(--font-size-xs);
-      text-align: right;
+      display: flex;
-      text-transform: uppercase;
+      flex-direction: row;
-      cursor: pointer;
+      justify-content: flex-end;
+      align-items: center;
+      gap: var(--spacing-s);
+      .color_value {
+        text-align: right;
+        text-transform: uppercase;
+        cursor: pointer;
+      }
     }
   }
 }

src/components/FlexColorStand.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useColorFunction } from '../ColorFunctionContext';
 import { useCopyColor } from '../hooks/useCopyColor';
+import ContextMenu from './ContextMenu';
 import styles from './FlexColorStand.module.css';
 
 type FlexColorStandProps = {
@@ -51,8 +52,11 @@ export function FlexColorStand({ color, valueMode = 'hex' }: FlexColorStandProps
   return (
     <div className={styles.color_stand}>
       <div className={styles.color_block} style={{ backgroundColor: bgColor }} />
-      <div className={styles.color_value} onClick={() => copyToClipboard(colorValue)}>
+      <div className={styles.operate_row}>
-        {bgColor}
+        <div className={styles.color_value} onClick={() => copyToClipboard(colorValue)}>
+          {bgColor}
+        </div>
+        <ContextMenu color={color} />
       </div>
     </div>
   );