From 95ff67e99c3d7ad9baac3b16155dfcf385f096c7 Mon Sep 17 00:00:00 2001
From: one <wangan.cs@gmail.com>
Date: Fri, 29 Aug 2025 00:25:58 +0800
Subject: [PATCH] fix(ImageViewer): prevent double menu, improve icons (#9637)

* fix(ImageViewer): prevent double menu, improve icons

* refactor: default icon size, standard error messages
---
 src/renderer/src/components/ImageViewer.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/renderer/src/components/ImageViewer.tsx b/src/renderer/src/components/ImageViewer.tsx
index bdb891a074..1f1cbccb43 100644
--- a/src/renderer/src/components/ImageViewer.tsx
+++ b/src/renderer/src/components/ImageViewer.tsx
@@ -1,7 +1,6 @@
 import {
   CopyOutlined,
   DownloadOutlined,
-  FileImageOutlined,
   RotateLeftOutlined,
   RotateRightOutlined,
   SwapOutlined,
@@ -13,11 +12,14 @@ import { loggerService } from '@logger'
 import { download } from '@renderer/utils/download'
 import { Dropdown, Image as AntImage, ImageProps as AntImageProps, Space } from 'antd'
 import { Base64 } from 'js-base64'
+import { DownloadIcon, ImageIcon } from 'lucide-react'
 import mime from 'mime'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
+import { CopyIcon } from './Icons'
+
 interface ImageViewerProps extends AntImageProps {
   src: string
 }
@@ -33,7 +35,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ src, style, ...props }) => {
       if (src.startsWith('data:')) {
         // 处理 base64 格式的图片
         const match = src.match(/^data:(image\/\w+);base64,(.+)$/)
-        if (!match) throw new Error('无效的 base64 图片格式')
+        if (!match) throw new Error('Invalid base64 image format')
         const mimeType = match[1]
         const byteArray = Base64.toUint8Array(match[2])
         const blob = new Blob([byteArray], { type: mimeType })
@@ -62,17 +64,17 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ src, style, ...props }) => {
 
       window.message.success(t('message.copy.success'))
     } catch (error) {
-      logger.error('复制图片失败:', error as Error)
+      logger.error('Failed to copy image:', error as Error)
       window.message.error(t('message.copy.failed'))
     }
   }
 
-  const getContextMenuItems = (src: string) => {
+  const getContextMenuItems = (src: string, size: number = 14) => {
     return [
       {
         key: 'copy-url',
         label: t('common.copy'),
-        icon: <CopyOutlined />,
+        icon: <CopyIcon size={size} />,
         onClick: () => {
           navigator.clipboard.writeText(src)
           window.message.success(t('message.copy.success'))
@@ -81,13 +83,13 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ src, style, ...props }) => {
       {
         key: 'download',
         label: t('common.download'),
-        icon: <DownloadOutlined />,
+        icon: <DownloadIcon size={size} />,
         onClick: () => download(src)
       },
       {
         key: 'copy-image',
         label: t('preview.copy.image'),
-        icon: <FileImageOutlined />,
+        icon: <ImageIcon size={size} />,
         onClick: () => handleCopyImage(src)
       }
     ]
@@ -98,6 +100,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ src, style, ...props }) => {
       <AntImage
         src={src}
         style={style}
+        onContextMenu={(e) => e.stopPropagation()}
         {...props}
         preview={{
           mask: typeof props.preview === 'object' ? props.preview.mask : false,