feat: 优化图片灯箱功能

- 改进拖动交互，修复拖动偏移问题
- 优化滚轮缩放功能和响应速度
- 重新设计控制按钮样式，移至底部居中
- 使用 GPU 加速优化性能
- 优化事件处理，使用 useCallback 提升性能

Author: wenhuxian

src/renderer/App.tsx

@@ -732,6 +732,26 @@ const App: React.FC = () => {
     const [isDragging, setIsDragging] = useState(false);
     const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
 
+    // Lightbox control handlers - memoized for performance
+    const handleLightboxShrink = useCallback(() => {
+        setLightboxScale(s => Math.max(0.25, s - 0.25));
+    }, []);
+
+    const handleLightboxReset = useCallback(() => {
+        setLightboxScale(1);
+        setLightboxOffset({ x: 0, y: 0 });
+    }, []);
+
+    const handleLightboxEnlarge = useCallback(() => {
+        setLightboxScale(s => Math.min(4, s + 0.25));
+    }, []);
+
+    const handleLightboxClose = useCallback(() => {
+        setLightboxImage(null);
+        setLightboxOffset({ x: 0, y: 0 });
+        setLightboxScale(1);
+    }, []);
+
     // Calculate actual list width from ratio (Moved up)
 
 
@@ -1099,7 +1119,7 @@ const App: React.FC = () => {
         }
     }, [selectedIssue]);
 
-    // Lightbox keyboard and wheel handlers
+    // Lightbox keyboard handlers
     useEffect(() => {
         if (!lightboxImage) return;
 
@@ -1127,21 +1147,10 @@ const App: React.FC = () => {
             }
         };
 
-        const handleWheel = (e: WheelEvent) => {
-            e.preventDefault();
-            if (e.deltaY < 0) {
-                setLightboxScale(s => Math.min(4, s + 0.1));
-            } else {
-                setLightboxScale(s => Math.max(0.25, s - 0.1));
-            }
-        };
-
         window.addEventListener('keydown', handleKeyDown);
-        window.addEventListener('wheel', handleWheel, { passive: false });
 
         return () => {
             window.removeEventListener('keydown', handleKeyDown);
-            window.removeEventListener('wheel', handleWheel);
         };
     }, [lightboxImage]);
 
@@ -2564,37 +2573,61 @@ const App: React.FC = () => {
             {/* Modals & Overlays */}
             {
                 lightboxImage && (
-                    <div className="image-lightbox-overlay" onClick={() => { setLightboxImage(null); setLightboxOffset({ x: 0, y: 0 }); setLightboxScale(1); }}
+                    <div
+                        className="image-lightbox-overlay"
+                        onClick={handleLightboxClose}
+                        onWheel={(e) => {
+                            e.preventDefault();
+                            const delta = e.deltaY;
+                            if (delta < 0) {
+                                setLightboxScale(s => Math.min(4, s + 0.1));
+                            } else {
+                                setLightboxScale(s => Math.max(0.25, s - 0.1));
+                            }
+                        }}
                         onMouseMove={(e) => {
                             if (isDragging) {
-                                setLightboxOffset(o => ({
-                                    x: o.x + e.movementX,
-                                    y: o.y + e.movementY
-                                }));
+                                setLightboxOffset({
+                                    x: e.clientX - dragStart.x,
+                                    y: e.clientY - dragStart.y
+                                });
                             }
                         }}
                         onMouseUp={() => setIsDragging(false)}
                         onMouseLeave={() => setIsDragging(false)}
                     >
-                        <AuthenticatedImage
-                            src={lightboxImage}
-                            alt="Enlarged"
-                            fetchBlob={(u) => vm.fetchImageBlob(u)}
-                            className="image-lightbox-content"
+                        <div
+                            onClick={(e) => e.stopPropagation()}
+                            onMouseDown={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                setIsDragging(true);
+                                setDragStart({ x: e.clientX - lightboxOffset.x, y: e.clientY - lightboxOffset.y });
+                            }}
                             style={{
-                                transform: `translate(${lightboxOffset.x}px, ${lightboxOffset.y}px) scale(${lightboxScale})`,
                                 cursor: isDragging ? 'grabbing' : 'grab',
                                 userSelect: 'none',
-                                pointerEvents: 'auto'
+                                display: 'inline-block',
+                                transform: `translate(${lightboxOffset.x}px, ${lightboxOffset.y}px) scale(${lightboxScale})`,
+                                transformOrigin: 'center center'
                             }}
-                            onClick={(e) => e.stopPropagation()}
-                            onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); setIsDragging(true); }}
-                        />
+                        >
+                            <AuthenticatedImage
+                                src={lightboxImage}
+                                alt="Enlarged"
+                                fetchBlob={(u) => vm.fetchImageBlob(u)}
+                                className="image-lightbox-content"
+                                style={{
+                                    pointerEvents: 'none',
+                                    display: 'block'
+                                }}
+                            />
+                        </div>
                         <div className="image-lightbox-controls" onClick={e => e.stopPropagation()}>
-                            <button onClick={() => setLightboxScale(s => Math.max(0.25, s - 0.25))}>➖</button>
-                            <button onClick={() => { setLightboxScale(1); setLightboxOffset({ x: 0, y: 0 }); }}>重置</button>
-                            <button onClick={() => setLightboxScale(s => Math.min(4, s + 0.25))}>➕</button>
-                            <button onClick={() => { setLightboxImage(null); setLightboxOffset({ x: 0, y: 0 }); setLightboxScale(1); }}>✕</button>
+                            <button onClick={handleLightboxShrink}>−</button>
+                            <button onClick={handleLightboxReset}>○</button>
+                            <button onClick={handleLightboxEnlarge}>+</button>
+                            <button onClick={handleLightboxClose}>✕</button>
                         </div>
                     </div>
                 )

src/renderer/index.css

@@ -431,6 +431,8 @@ body {
   align-items: center;
   justify-content: center;
   z-index: 10000;
+  will-change: opacity;
+  transform: translateZ(0);
 }
 
 .image-lightbox-content {
@@ -439,6 +441,52 @@ body {
   object-fit: contain;
   box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
   border-radius: 12px;
+  will-change: transform;
+  transform: translateZ(0);
+}
+
+.image-lightbox-controls {
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%) translateZ(0);
+  display: flex;
+  gap: 12px;
+  padding: 12px 20px;
+  background: rgba(0, 0, 0, 0.9);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+  z-index: 10001;
+  will-change: transform;
+}
+
+.image-lightbox-controls button {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: #ffffff !important;
+  padding: 10px 16px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  min-width: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  pointer-events: auto;
+  will-change: background-color, border-color;
+}
+
+.image-lightbox-controls button:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.image-lightbox-controls button:active {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.5);
 }
 
 @keyframes spin {