From d223286834f6cfa6708fbb1dd596c2c4804775e3 Mon Sep 17 00:00:00 2001
From: zihanjian <zihanjian@bytedance.com>
Date: Fri, 6 Jun 2025 15:20:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=94=BE=E5=A4=A7=E9=95=9C?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=EF=BC=8C=E5=A2=9E=E5=8A=A0=E9=AB=98=E4=BA=AE?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E6=94=AF=E6=8C=81=EF=BC=8C=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=E4=BF=A1=E6=81=AF=E4=BB=A5=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C=E5=92=8C?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E5=8F=8B=E5=A5=BD=E6=80=A7=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx                 |  5 +++--
 src/components/MagnifierTool.tsx | 17 +++++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index bdfb055..1afe10e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1903,14 +1903,14 @@ export default function Home() {
                         <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5 text-blue-500 dark:text-blue-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                         </svg>
-                        <span>使用右上角悬浮调色盘进行上色操作</span>
+                        <span>使用右上角菜单操作</span>
                       </div>
                       <span className="hidden sm:inline text-gray-300 dark:text-gray-500">|</span>
                       <div className="flex items-center gap-1 w-full sm:w-auto">
                         <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5 text-blue-500 dark:text-blue-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                         </svg>
-                        <span>Ctrl/Cmd+滚轮缩放</span>
+                        <span>推荐电脑操作，上色更精准</span>
                       </div>
                     </div>
                   </div>
@@ -2204,6 +2204,7 @@ export default function Home() {
             onClearSelection={() => setMagnifierSelectionArea(null)}
             isFloatingActive={activeFloatingTool === 'magnifier'}
             onActivateFloating={handleActivateMagnifier}
+            highlightColorKey={highlightColorKey}
           />
           
           {/* 放大镜选择覆盖层 */}
diff --git a/src/components/MagnifierTool.tsx b/src/components/MagnifierTool.tsx
index 71242c6..f8ec49d 100644
--- a/src/components/MagnifierTool.tsx
+++ b/src/components/MagnifierTool.tsx
@@ -15,6 +15,7 @@ interface MagnifierToolProps {
   onClearSelection: () => void;
   isFloatingActive: boolean;
   onActivateFloating: () => void;
+  highlightColorKey?: string | null;
 }
 
 interface SelectionArea {
@@ -34,7 +35,8 @@ const MagnifierTool: React.FC<MagnifierToolProps> = ({
   selectionArea,
   onClearSelection,
   isFloatingActive,
-  onActivateFloating
+  onActivateFloating,
+  highlightColorKey
 }) => {
   // 计算初始位置，确保在屏幕中央
   const getInitialPosition = () => ({
@@ -102,6 +104,17 @@ const MagnifierTool: React.FC<MagnifierToolProps> = ({
             magnifiedCellSize
           );
 
+          // 如果有高亮颜色且当前像素不是目标颜色，添加灰度蒙版
+          if (highlightColorKey && pixel.color.toUpperCase() !== highlightColorKey.toUpperCase()) {
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'; // 60% 透明度的黑色蒙版，与预览画布一致
+            ctx.fillRect(
+              canvasCol * magnifiedCellSize,
+              canvasRow * magnifiedCellSize,
+              magnifiedCellSize,
+              magnifiedCellSize
+            );
+          }
+
           // 绘制网格线
           ctx.strokeStyle = '#e0e0e0';
           ctx.lineWidth = 1;
@@ -114,7 +127,7 @@ const MagnifierTool: React.FC<MagnifierToolProps> = ({
         }
       }
     }
-  }, [selectionArea, mappedPixelData, getSelectionDimensions]);
+  }, [selectionArea, mappedPixelData, getSelectionDimensions, highlightColorKey]);
 
   // 处理放大视图点击
   const handleMagnifiedClick = useCallback((event: React.MouseEvent<HTMLCanvasElement>) => {