From ddfc2fff156be9c9a867f8fc3ff4454db20014b4 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:33:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=91=E9=80=9A=E7=94=A8=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=8D=A1=E7=89=87=E5=A2=9E=E5=8A=A0=E6=8D=A2?=
 =?UTF-8?q?=E6=B0=94ContextMenu=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/components/FlexColorStand.module.css | 15 +++++++++++----
 src/components/FlexColorStand.tsx        |  8 ++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/FlexColorStand.module.css b/src/components/FlexColorStand.module.css
index 04d0511..b41f847 100644
--- a/src/components/FlexColorStand.module.css
+++ b/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;
-      text-transform: uppercase;
-      cursor: pointer;
+      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;
+      }
     }
   }
 }
diff --git a/src/components/FlexColorStand.tsx b/src/components/FlexColorStand.tsx
index 34f6e0f..69ce77e 100644
--- a/src/components/FlexColorStand.tsx
+++ b/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)}>
-        {bgColor}
+      <div className={styles.operate_row}>
+        <div className={styles.color_value} onClick={() => copyToClipboard(colorValue)}>
+          {bgColor}
+        </div>
+        <ContextMenu color={color} />
       </div>
     </div>
   );