Merge pull request #173 from xunchahaha:dev

Dev

electron/main.ts

@@ -370,6 +370,66 @@ function createVideoPlayerWindow(videoPath: string, videoWidth?: number, videoHe
   return win
 }
 
+/**
+ * 创建独立的图片查看窗口
+ */
+function createImageViewerWindow(imagePath: string) {
+  const isDev = !!process.env.VITE_DEV_SERVER_URL
+  const iconPath = isDev
+    ? join(__dirname, '../public/icon.ico')
+    : join(process.resourcesPath, 'icon.ico')
+
+  const win = new BrowserWindow({
+    width: 900,
+    height: 700,
+    minWidth: 400,
+    minHeight: 300,
+    icon: iconPath,
+    webPreferences: {
+      preload: join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false,
+      webSecurity: false // 允许加载本地文件
+    },
+    titleBarStyle: 'hidden',
+    titleBarOverlay: {
+      color: '#00000000',
+      symbolColor: '#ffffff',
+      height: 40
+    },
+    show: false,
+    backgroundColor: '#000000',
+    autoHideMenuBar: true
+  })
+
+  win.once('ready-to-show', () => {
+    win.show()
+  })
+
+  const imageParam = `imagePath=${encodeURIComponent(imagePath)}`
+
+  if (process.env.VITE_DEV_SERVER_URL) {
+    win.loadURL(`${process.env.VITE_DEV_SERVER_URL}#/image-viewer-window?${imageParam}`)
+
+    win.webContents.on('before-input-event', (event, input) => {
+      if (input.key === 'F12' || (input.control && input.shift && input.key === 'I')) {
+        if (win.webContents.isDevToolsOpened()) {
+          win.webContents.closeDevTools()
+        } else {
+          win.webContents.openDevTools()
+        }
+        event.preventDefault()
+      }
+    })
+  } else {
+    win.loadFile(join(__dirname, '../dist/index.html'), {
+      hash: `/image-viewer-window?${imageParam}`
+    })
+  }
+
+  return win
+}
+
 /**
  * 创建独立的聊天记录窗口
  */
@@ -941,6 +1001,11 @@ function registerIpcHandlers() {
     return true
   })
 
+  // 打开图片查看窗口
+  ipcMain.handle('window:openImageViewerWindow', (_, imagePath: string) => {
+    createImageViewerWindow(imagePath)
+  })
+
   // 完成引导，关闭引导窗口并显示主窗口
   ipcMain.handle('window:completeOnboarding', async () => {
     try {

electron/preload.ts

@@ -64,6 +64,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
       ipcRenderer.invoke('window:openVideoPlayerWindow', videoPath, videoWidth, videoHeight),
     resizeToFitVideo: (videoWidth: number, videoHeight: number) =>
       ipcRenderer.invoke('window:resizeToFitVideo', videoWidth, videoHeight),
+    openImageViewerWindow: (imagePath: string) =>
+      ipcRenderer.invoke('window:openImageViewerWindow', imagePath),
     openChatHistoryWindow: (sessionId: string, messageId: number) =>
       ipcRenderer.invoke('window:openChatHistoryWindow', sessionId, messageId)
   },

electron/services/imageDecryptService.ts

@@ -415,10 +415,16 @@ export class ImageDecryptService {
           if (imageDatName) this.cacheDatPath(accountDir, imageDatName, hardlinkPath)
           return hardlinkPath
         }
-        // hardlink 找到的是缩略图，但要求高清图，直接返回 null，不再搜索
+        // hardlink 找到的是缩略图，但要求高清图
-        if (!allowThumbnail && isThumb) {
+        // 尝试在同一目录下查找高清图变体（快速查找，不遍历）
-          return null
+        const hdPath = this.findHdVariantInSameDir(hardlinkPath)
+        if (hdPath) {
+          this.cacheDatPath(accountDir, imageMd5, hdPath)
+          if (imageDatName) this.cacheDatPath(accountDir, imageDatName, hdPath)
+          return hdPath
         }
+        // 没找到高清图，返回 null（不进行全局搜索）
+        return null
       }
       this.logInfo('[ImageDecrypt] hardlink miss (md5)', { imageMd5 })
       if (imageDatName && this.looksLikeMd5(imageDatName) && imageDatName !== imageMd5) {
@@ -431,9 +437,13 @@ export class ImageDecryptService {
             this.cacheDatPath(accountDir, imageDatName, fallbackPath)
             return fallbackPath
           }
-          if (!allowThumbnail && isThumb) {
+          // 找到缩略图但要求高清图，尝试同目录查找高清图变体
-            return null
+          const hdPath = this.findHdVariantInSameDir(fallbackPath)
+          if (hdPath) {
+            this.cacheDatPath(accountDir, imageDatName, hdPath)
+            return hdPath
           }
+          return null
         }
         this.logInfo('[ImageDecrypt] hardlink miss (datName)', { imageDatName })
       }
@@ -449,10 +459,13 @@ export class ImageDecryptService {
           this.cacheDatPath(accountDir, imageDatName, hardlinkPath)
           return hardlinkPath
         }
-        // hardlink 找到的是缩略图，但要求高清图，直接返回 null
+        // hardlink 找到的是缩略图，但要求高清图
-        if (!allowThumbnail && isThumb) {
+        const hdPath = this.findHdVariantInSameDir(hardlinkPath)
-          return null
+        if (hdPath) {
+          this.cacheDatPath(accountDir, imageDatName, hdPath)
+          return hdPath
         }
+        return null
       }
       this.logInfo('[ImageDecrypt] hardlink miss (datName)', { imageDatName })
     }
@@ -467,6 +480,9 @@ export class ImageDecryptService {
       const cached = this.resolvedCache.get(imageDatName)
       if (cached && existsSync(cached)) {
         if (allowThumbnail || !this.isThumbnailPath(cached)) return cached
+        // 缓存的是缩略图，尝试找高清图
+        const hdPath = this.findHdVariantInSameDir(cached)
+        if (hdPath) return hdPath
       }
     }
 
@@ -761,6 +777,17 @@ export class ImageDecryptService {
 
     const root = join(accountDir, 'msg', 'attach')
     if (!existsSync(root)) return null
+
+    // 优化1：快速概率性查找
+    // 包含：1. 基于文件名的前缀猜测 (旧版)
+    //       2. 基于日期的最近月份扫描 (新版无索引时)
+    const fastHit = await this.fastProbabilisticSearch(root, datName)
+    if (fastHit) {
+      this.resolvedCache.set(key, fastHit)
+      return fastHit
+    }
+
+    // 优化2：兜底扫描 (异步非阻塞)
     const found = await this.walkForDatInWorker(root, datName.toLowerCase(), 8, allowThumbnail, thumbOnly)
     if (found) {
       this.resolvedCache.set(key, found)
@@ -769,6 +796,134 @@ export class ImageDecryptService {
     return null
   }
 
+  /**
+   * 基于文件名的哈希特征猜测可能的路径
+   * 包含：1. 微信旧版结构 filename.substr(0, 2)/...
+   *       2. 微信新版结构 msg/attach/{hash}/{YYYY-MM}/Img/filename
+   */
+  private async fastProbabilisticSearch(root: string, datName: string): Promise<string | null> {
+    const { promises: fs } = require('fs')
+    const { join } = require('path')
+
+    try {
+      // --- 策略 A: 旧版路径猜测 (msg/attach/xx/yy/...) ---
+      const lowerName = datName.toLowerCase()
+      let baseName = lowerName
+      if (baseName.endsWith('.dat')) {
+        baseName = baseName.slice(0, -4)
+        if (baseName.endsWith('_t') || baseName.endsWith('.t') || baseName.endsWith('_hd')) {
+          baseName = baseName.slice(0, -3)
+        } else if (baseName.endsWith('_thumb')) {
+          baseName = baseName.slice(0, -6)
+        }
+      }
+
+      const candidates: string[] = []
+      if (/^[a-f0-9]{32}$/.test(baseName)) {
+        const dir1 = baseName.substring(0, 2)
+        const dir2 = baseName.substring(2, 4)
+        candidates.push(
+          join(root, dir1, dir2, datName),
+          join(root, dir1, dir2, 'Img', datName),
+          join(root, dir1, dir2, 'mg', datName),
+          join(root, dir1, dir2, 'Image', datName)
+        )
+      }
+
+      for (const path of candidates) {
+        try {
+          await fs.access(path)
+          return path
+        } catch { }
+      }
+
+      // --- 策略 B: 新版 Session 哈希路径猜测 ---
+      try {
+        const entries = await fs.readdir(root, { withFileTypes: true })
+        const sessionDirs = entries
+          .filter((e: any) => e.isDirectory() && e.name.length === 32 && /^[a-f0-9]+$/i.test(e.name))
+          .map((e: any) => e.name)
+
+        if (sessionDirs.length === 0) return null
+
+        const now = new Date()
+        const months: string[] = []
+        for (let i = 0; i < 2; i++) {
+          const d = new Date(now.getFullYear(), now.getMonth() - i, 1)
+          const mStr = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+          months.push(mStr)
+        }
+
+        const targetNames = [datName]
+        if (baseName !== lowerName) {
+          targetNames.push(`${baseName}.dat`)
+          targetNames.push(`${baseName}_t.dat`)
+          targetNames.push(`${baseName}_thumb.dat`)
+        }
+
+        const batchSize = 20
+        for (let i = 0; i < sessionDirs.length; i += batchSize) {
+          const batch = sessionDirs.slice(i, i + batchSize)
+          const tasks = batch.map(async (sessDir: string) => {
+            for (const month of months) {
+              const subDirs = ['Img', 'Image']
+              for (const sub of subDirs) {
+                const dirPath = join(root, sessDir, month, sub)
+                try { await fs.access(dirPath) } catch { continue }
+                for (const name of targetNames) {
+                  const p = join(dirPath, name)
+                  try { await fs.access(p); return p } catch { }
+                }
+              }
+            }
+            return null
+          })
+          const results = await Promise.all(tasks)
+          const hit = results.find(r => r !== null)
+          if (hit) return hit
+        }
+      } catch { }
+
+    } catch { }
+    return null
+  }
+
+  /**
+   * 在同一目录下查找高清图变体
+   * 缩略图: xxx_t.dat -> 高清图: xxx_h.dat 或 xxx.dat
+   */
+  private findHdVariantInSameDir(thumbPath: string): string | null {
+    try {
+      const dir = dirname(thumbPath)
+      const fileName = basename(thumbPath).toLowerCase()
+
+      // 提取基础名称（去掉 _t.dat 或 .t.dat）
+      let baseName = fileName
+      if (baseName.endsWith('_t.dat')) {
+        baseName = baseName.slice(0, -6)
+      } else if (baseName.endsWith('.t.dat')) {
+        baseName = baseName.slice(0, -6)
+      } else {
+        return null
+      }
+
+      // 尝试查找高清图变体
+      const variants = [
+        `${baseName}_h.dat`,
+        `${baseName}.h.dat`,
+        `${baseName}.dat`
+      ]
+
+      for (const variant of variants) {
+        const variantPath = join(dir, variant)
+        if (existsSync(variantPath)) {
+          return variantPath
+        }
+      }
+    } catch { }
+    return null
+  }
+
   private async searchDatFileInDir(
     dirPath: string,
     datName: string,

src/App.tsx

@@ -17,6 +17,7 @@ import GroupAnalyticsPage from './pages/GroupAnalyticsPage'
 import SettingsPage from './pages/SettingsPage'
 import ExportPage from './pages/ExportPage'
 import VideoWindow from './pages/VideoWindow'
+import ImageWindow from './pages/ImageWindow'
 import SnsPage from './pages/SnsPage'
 import ContactsPage from './pages/ContactsPage'
 import ChatHistoryPage from './pages/ChatHistoryPage'
@@ -318,6 +319,12 @@ function App() {
     return <VideoWindow />
   }
 
+  // 独立图片查看窗口
+  const isImageViewerWindow = location.pathname === '/image-viewer-window'
+  if (isImageViewerWindow) {
+    return <ImageWindow />
+  }
+
   // 独立聊天记录窗口
   if (isChatHistoryWindow) {
     return <ChatHistoryPage />

src/pages/ChatPage.tsx

@@ -4,7 +4,6 @@ import { createPortal } from 'react-dom'
 import { useChatStore } from '../stores/chatStore'
 import type { ChatSession, Message } from '../types/models'
 import { getEmojiPath } from 'wechat-emojis'
-import { ImagePreview } from '../components/ImagePreview'
 import { VoiceTranscribeDialog } from '../components/VoiceTranscribeDialog'
 import { AnimatedStreamingText } from '../components/AnimatedStreamingText'
 import JumpToDateDialog from '../components/JumpToDateDialog'
@@ -1630,7 +1629,6 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
   const [voiceTranscriptLoading, setVoiceTranscriptLoading] = useState(false)
   const [voiceTranscriptError, setVoiceTranscriptError] = useState(false)
   const voiceTranscriptRequestedRef = useRef(false)
-  const [showImagePreview, setShowImagePreview] = useState(false)
   const [autoTranscribeVoice, setAutoTranscribeVoice] = useState(true)
   const [voiceCurrentTime, setVoiceCurrentTime] = useState(0)
   const [voiceDuration, setVoiceDuration] = useState(0)
@@ -1996,11 +1994,11 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
   }, [isImage, imageHasUpdate, imageInView, imageCacheKey, triggerForceHd])
 
   useEffect(() => {
-    if (!isImage || !showImagePreview || !imageHasUpdate) return
+    if (!isImage || !imageHasUpdate) return
     if (imageAutoHdTriggered.current === imageCacheKey) return
     imageAutoHdTriggered.current = imageCacheKey
     triggerForceHd()
-  }, [isImage, showImagePreview, imageHasUpdate, imageCacheKey, triggerForceHd])
+  }, [isImage, imageHasUpdate, imageCacheKey, triggerForceHd])
 
   // 更激进：进入视野/打开预览时，无论 hasUpdate 与否都尝试强制高清
   useEffect(() => {
@@ -2008,11 +2006,6 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
     triggerForceHd()
   }, [isImage, imageInView, triggerForceHd])
 
-  useEffect(() => {
-    if (!isImage || !showImagePreview) return
-    triggerForceHd()
-  }, [isImage, showImagePreview, triggerForceHd])
-
 
   useEffect(() => {
     if (!isVoice) return
@@ -2363,15 +2356,12 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
                     if (imageHasUpdate) {
                       void requestImageDecrypt(true, true)
                     }
-                    setShowImagePreview(true)
+                    void window.electronAPI.window.openImageViewerWindow(imageLocalPath)
                   }}
                   onLoad={() => setImageError(false)}
                   onError={() => setImageError(true)}
                 />
               </div>
-              {showImagePreview && (
-                <ImagePreview src={imageLocalPath} onClose={() => setShowImagePreview(false)} />
-              )}
             </>
           )}
         </div>

src/pages/ImageWindow.scss

@@ -0,0 +1,99 @@
+.image-window-container {
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--bg-primary);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    user-select: none;
+
+    .title-bar {
+        height: 40px;
+        min-height: 40px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: var(--bg-secondary);
+        border-bottom: 1px solid var(--border-color);
+        padding-right: 140px; // 为原生窗口控件留出空间
+
+        .window-drag-area {
+            flex: 1;
+            height: 100%;
+            -webkit-app-region: drag;
+        }
+
+        .title-bar-controls {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            -webkit-app-region: no-drag;
+            margin-right: 16px;
+
+            button {
+                background: transparent;
+                border: none;
+                color: var(--text-secondary);
+                cursor: pointer;
+                padding: 6px;
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.2s;
+
+                &:hover {
+                    background: var(--bg-tertiary);
+                    color: var(--text-primary);
+                }
+            }
+
+            .scale-text {
+                min-width: 50px;
+                text-align: center;
+                color: var(--text-secondary);
+                font-size: 12px;
+                font-variant-numeric: tabular-nums;
+            }
+
+            .divider {
+                width: 1px;
+                height: 14px;
+                background: var(--border-color);
+                margin: 0 4px;
+            }
+        }
+    }
+
+    .image-viewport {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        cursor: grab;
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        img {
+            max-width: none;
+            max-height: none;
+            object-fit: contain;
+            will-change: transform;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+            pointer-events: auto;
+        }
+    }
+}
+
+.image-window-empty {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    background-color: var(--bg-primary);
+}

src/pages/ImageWindow.tsx

@@ -0,0 +1,162 @@
+
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { ZoomIn, ZoomOut, RotateCw, RotateCcw } from 'lucide-react'
+import './ImageWindow.scss'
+
+export default function ImageWindow() {
+    const [searchParams] = useSearchParams()
+    const imagePath = searchParams.get('imagePath')
+    const [scale, setScale] = useState(1)
+    const [rotation, setRotation] = useState(0)
+    const [position, setPosition] = useState({ x: 0, y: 0 })
+    const [initialScale, setInitialScale] = useState(1)
+    const viewportRef = useRef<HTMLDivElement>(null)
+    
+    // 使用 ref 存储拖动状态，避免闭包问题
+    const dragStateRef = useRef({
+        isDragging: false,
+        startX: 0,
+        startY: 0,
+        startPosX: 0,
+        startPosY: 0
+    })
+
+    const handleZoomIn = () => setScale(prev => Math.min(prev + 0.25, 10))
+    const handleZoomOut = () => setScale(prev => Math.max(prev - 0.25, 0.1))
+    const handleRotate = () => setRotation(prev => (prev + 90) % 360)
+    const handleRotateCcw = () => setRotation(prev => (prev - 90 + 360) % 360)
+    
+    // 重置视图
+    const handleReset = useCallback(() => {
+        setScale(1)
+        setRotation(0)
+        setPosition({ x: 0, y: 0 })
+    }, [])
+
+    // 图片加载完成后计算初始缩放
+    const handleImageLoad = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
+        const img = e.currentTarget
+        const naturalWidth = img.naturalWidth
+        const naturalHeight = img.naturalHeight
+        
+        if (viewportRef.current) {
+            const viewportWidth = viewportRef.current.clientWidth * 0.9
+            const viewportHeight = viewportRef.current.clientHeight * 0.9
+            const scaleX = viewportWidth / naturalWidth
+            const scaleY = viewportHeight / naturalHeight
+            const fitScale = Math.min(scaleX, scaleY, 1)
+            setInitialScale(fitScale)
+            setScale(1)
+        }
+    }, [])
+
+    // 使用原生事件监听器处理拖动
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!dragStateRef.current.isDragging) return
+            
+            const dx = e.clientX - dragStateRef.current.startX
+            const dy = e.clientY - dragStateRef.current.startY
+            
+            setPosition({
+                x: dragStateRef.current.startPosX + dx,
+                y: dragStateRef.current.startPosY + dy
+            })
+        }
+
+        const handleMouseUp = () => {
+            dragStateRef.current.isDragging = false
+            document.body.style.cursor = ''
+        }
+
+        document.addEventListener('mousemove', handleMouseMove)
+        document.addEventListener('mouseup', handleMouseUp)
+
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove)
+            document.removeEventListener('mouseup', handleMouseUp)
+        }
+    }, [])
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        if (e.button !== 0) return
+        e.preventDefault()
+        
+        dragStateRef.current = {
+            isDragging: true,
+            startX: e.clientX,
+            startY: e.clientY,
+            startPosX: position.x,
+            startPosY: position.y
+        }
+        document.body.style.cursor = 'grabbing'
+    }
+
+    const handleWheel = useCallback((e: React.WheelEvent) => {
+        const delta = -Math.sign(e.deltaY) * 0.15
+        setScale(prev => Math.min(Math.max(prev + delta, 0.1), 10))
+    }, [])
+
+    // 双击重置
+    const handleDoubleClick = useCallback(() => {
+        handleReset()
+    }, [handleReset])
+
+    // 快捷键支持
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') window.electronAPI.window.close()
+            if (e.key === '=' || e.key === '+') handleZoomIn()
+            if (e.key === '-') handleZoomOut()
+            if (e.key === 'r' || e.key === 'R') handleRotate()
+            if (e.key === '0') handleReset()
+        }
+        window.addEventListener('keydown', handleKeyDown)
+        return () => window.removeEventListener('keydown', handleKeyDown)
+    }, [handleReset])
+
+    if (!imagePath) {
+        return (
+            <div className="image-window-empty">
+                <span>无效的图片路径</span>
+            </div>
+        )
+    }
+
+    const displayScale = initialScale * scale
+
+    return (
+        <div className="image-window-container">
+            <div className="title-bar">
+                <div className="window-drag-area"></div>
+                <div className="title-bar-controls">
+                    <button onClick={handleZoomOut} title="缩小 (-)"><ZoomOut size={16} /></button>
+                    <span className="scale-text">{Math.round(displayScale * 100)}%</span>
+                    <button onClick={handleZoomIn} title="放大 (+)"><ZoomIn size={16} /></button>
+                    <div className="divider"></div>
+                    <button onClick={handleRotateCcw} title="逆时针旋转"><RotateCcw size={16} /></button>
+                    <button onClick={handleRotate} title="顺时针旋转 (R)"><RotateCw size={16} /></button>
+                </div>
+            </div>
+
+            <div 
+                className="image-viewport" 
+                ref={viewportRef}
+                onWheel={handleWheel}
+                onDoubleClick={handleDoubleClick}
+                onMouseDown={handleMouseDown}
+            >
+                <img
+                    src={imagePath}
+                    alt="Preview"
+                    style={{
+                        transform: `translate(${position.x}px, ${position.y}px) scale(${displayScale}) rotate(${rotation}deg)`
+                    }}
+                    onLoad={handleImageLoad}
+                    draggable={false}
+                />
+            </div>
+        </div>
+    )
+}

src/types/electron.d.ts

@@ -11,6 +11,7 @@ export interface ElectronAPI {
     setTitleBarOverlay: (options: { symbolColor: string }) => void
     openVideoPlayerWindow: (videoPath: string, videoWidth?: number, videoHeight?: number) => Promise<void>
     resizeToFitVideo: (videoWidth: number, videoHeight: number) => Promise<void>
+    openImageViewerWindow: (imagePath: string) => Promise<void>
     openChatHistoryWindow: (sessionId: string, messageId: number) => Promise<boolean>
   }
   config: {