refactor: v2.0 全量重构 — TypeScript + React + Zustand + IndexedDB

技术栈升级： - JavaScript → TypeScript 5.6（全量类型安全） - 原生 DOM → React 18（函数组件 + Hooks） - 全局变量 → Zustand 5（轻量状态管理） - localStorage → IndexedDB / Dexie.js 4（大容量、异步、索引） - marked.js → unified / remark / rehype（插件化渲染管线） - 无打包 → electron-vite 3（HMR 热更新） - 纯 CSS → CSS Variables + CSS Modules 新增功能： - 标签页状态 IndexedDB 持久化（关闭后可恢复） - 最近打开文件列表 - 大文件虚拟化行号（>2000 行） - 搜索高亮二分查找优化 O(log N) - rehype-sanitize HTML 安全过滤文件结构： - 7 个源文件 → 51 个模块化文件 - src/main/ 主进程（6 文件） - src/preload/ 预加载（1 文件） - src/renderer/ 渲染进程（42 文件：组件/hooks/stores/lib/db/types/styles） - src/shared/ 共享类型（2 文件）构建验证： - TypeScript 检查零错误 - electron-vite build 成功 - 产物：main 15kB + preload 2kB + renderer 1.5MB
2026-05-27 20:29:23 +08:00
parent c2cdba546b
commit 5e1c89d280
59 changed files with 4674 additions and 314 deletions
@@ -0,0 +1,124 @@
+import { useEffect, useCallback } from 'react'
+import { useTabStore } from '../stores/tabStore'
+import { useEditorStore } from '../stores/editorStore'
+import { useSearchStore } from '../stores/searchStore'
+import type { ViewMode } from '../types/settings'
+
+export function useKeyboard(handleOpenFile: () => void, handleSave: () => void, handleSaveAs: () => void) {
+  const createTab = useTabStore(s => s.createTab)
+  const closeTab = useTabStore(s => s.closeTab)
+  const activeTabId = useTabStore(s => s.activeTabId)
+  const tabs = useTabStore(s => s.tabs)
+  const switchToTab = useTabStore(s => s.switchToTab)
+  const mruStack = useTabStore(s => s.mruStack)
+  const setViewMode = useEditorStore(s => s.setViewMode)
+  const searchStore = useSearchStore
+
+  const handleKeydown = useCallback((e: KeyboardEvent) => {
+    const isCtrl = e.ctrlKey || e.metaKey
+
+    if (isCtrl && e.key === 'o') {
+      e.preventDefault()
+      handleOpenFile()
+      return
+    }
+    if (isCtrl && e.key === 's' && !e.shiftKey) {
+      e.preventDefault()
+      handleSave()
+      return
+    }
+    if (isCtrl && e.shiftKey && e.key === 'S') {
+      e.preventDefault()
+      handleSaveAs()
+      return
+    }
+    if (isCtrl && e.key === '1') {
+      e.preventDefault()
+      setViewMode('split')
+      return
+    }
+    if (isCtrl && e.key === '2') {
+      e.preventDefault()
+      setViewMode('editor')
+      return
+    }
+    if (isCtrl && e.key === '3') {
+      e.preventDefault()
+      setViewMode('preview')
+      return
+    }
+    if (isCtrl && e.key === 't') {
+      e.preventDefault()
+      createTab(null, '')
+      return
+    }
+    if (isCtrl && e.key === 'w') {
+      e.preventDefault()
+      if (activeTabId) closeTab(activeTabId)
+      return
+    }
+    if (isCtrl && e.key === 'Tab') {
+      e.preventDefault()
+      if (tabs.length > 1) {
+        if (e.shiftKey) {
+          if (mruStack.length > 0) {
+            const targetId = mruStack[0]
+            if (tabs.find(t => t.id === targetId)) {
+              switchToTab(targetId)
+            }
+          }
+        } else {
+          const idx = tabs.findIndex(t => t.id === activeTabId)
+          const next = (idx + 1) % tabs.length
+          switchToTab(tabs[next].id)
+        }
+      }
+      return
+    }
+
+    // Search & Replace
+    const state = searchStore.getState()
+    if (isCtrl && e.key === 'f') {
+      e.preventDefault()
+      state.setVisible(true)
+      state.setShowReplace(false)
+      return
+    }
+    if (isCtrl && e.key === 'h') {
+      e.preventDefault()
+      state.setVisible(true)
+      state.setShowReplace(true)
+      return
+    }
+    if (e.key === 'Escape' && state.isVisible) {
+      e.preventDefault()
+      state.close()
+      return
+    }
+    if (e.altKey && e.key === 'c') {
+      e.preventDefault()
+      state.toggleCaseSensitive()
+      return
+    }
+    if (e.altKey && e.key === 'r') {
+      e.preventDefault()
+      state.toggleRegex()
+      return
+    }
+    if (isCtrl && e.shiftKey && e.key === 'G') {
+      e.preventDefault()
+      state.findPrev()
+      return
+    }
+    if (isCtrl && e.shiftKey && e.key === 'H') {
+      e.preventDefault()
+      // replaceAll 需要外部实现
+      return
+    }
+  }, [handleOpenFile, handleSave, handleSaveAs, createTab, closeTab, activeTabId, tabs, switchToTab, mruStack, setViewMode, searchStore])
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeydown)
+    return () => document.removeEventListener('keydown', handleKeydown)
+  }, [handleKeydown])
+}