向通用颜色展示卡片增加换气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);
+      display: flex;
+      flex-direction: row;
+      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,9 +52,12 @@ export function FlexColorStand({ color, valueMode = 'hex' }: FlexColorStandProps
   return (
     <div className={styles.color_stand}>
       <div className={styles.color_block} style={{ backgroundColor: bgColor }} />
+      <div className={styles.operate_row}>
         <div className={styles.color_value} onClick={() => copyToClipboard(colorValue)}>
           {bgColor}
         </div>
+        <ContextMenu color={color} />
+      </div>
     </div>
   );
 }