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,220 @@
+import React, { useEffect, useCallback, useState, useRef } from 'react'
+import { useTabStore } from '../../stores/tabStore'
+import { useSidebarStore } from '../../stores/sidebarStore'
+import { getFileName } from '../../lib/fileUtils'
+import type { FileNode } from '../../types/file'
+
+export function Sidebar() {
+  const tabs = useTabStore(s => s.tabs)
+  const activeTabId = useTabStore(s => s.activeTabId)
+  const switchToTab = useTabStore(s => s.switchToTab)
+  const createTab = useTabStore(s => s.createTab)
+
+  const rootPath = useSidebarStore(s => s.rootPath)
+  const tree = useSidebarStore(s => s.tree)
+  const expandedDirs = useSidebarStore(s => s.expandedDirs)
+  const toggleDir = useSidebarStore(s => s.toggleDir)
+  const setRootPath = useSidebarStore(s => s.setRootPath)
+  const setTree = useSidebarStore(s => s.setTree)
+  const isVisible = useSidebarStore(s => s.isVisible)
+
+  const [isResizing, setIsResizing] = useState(false)
+  const sidebarRef = useRef<HTMLDivElement>(null)
+
+  // 打开文件夹
+  const handleOpenFolder = useCallback(async () => {
+    if (!window.electronAPI) return
+    const dirPath = await window.electronAPI.openFolderDialog()
+    if (dirPath) {
+      setRootPath(dirPath)
+      const result = await window.electronAPI.readDirTree(dirPath)
+      if (result.success && result.tree) {
+        setTree(result.tree)
+        window.electronAPI.watchDir(dirPath)
+      }
+    }
+  }, [setRootPath, setTree])
+
+  // 刷新目录树
+  const refreshTree = useCallback(async () => {
+    if (!rootPath || !window.electronAPI) return
+    const result = await window.electronAPI.readDirTree(rootPath)
+    if (result.success && result.tree) {
+      setTree(result.tree)
+    }
+  }, [rootPath, setTree])
+
+  // 目录变化监听
+  useEffect(() => {
+    if (!window.electronAPI) return
+    window.electronAPI.onDirChanged(() => {
+      refreshTree()
+    })
+    return () => {
+      window.electronAPI?.removeAllListeners('sidebar:dirChanged')
+    }
+  }, [refreshTree])
+
+  // 侧边栏宽度调节
+  useEffect(() => {
+    if (!isResizing) return
+    const handleMouseMove = (e: MouseEvent) => {
+      if (sidebarRef.current) {
+        const newWidth = Math.max(180, Math.min(500, e.clientX))
+        sidebarRef.current.style.width = newWidth + 'px'
+      }
+    }
+    const handleMouseUp = () => setIsResizing(false)
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isResizing])
+
+  // 独立文件（不在当前文件夹内的已打开文件）
+  const independentFiles = tabs.filter(t => {
+    if (!t.filePath) return false
+    if (!rootPath) return true
+    return !t.filePath.startsWith(rootPath)
+  })
+
+  if (!isVisible) return null
+
+  return (
+    <div id="sidebar" ref={sidebarRef}>
+      <div id="sidebar-header">
+        <span id="sidebar-title">资源管理器</span>
+        <button className="sidebar-header-btn" onClick={handleOpenFolder} title="打开文件夹">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+          </svg>
+        </button>
+      </div>
+
+      <div id="sidebar-tree">
+        {/* 独立文件区 */}
+        {independentFiles.length > 0 && (
+          <div className="independent-files-section">
+            <div className="independent-files-header">已打开的文件</div>
+            {independentFiles.map(tab => (
+              <div
+                key={tab.id}
+                className={`tree-item independent-file-item ${tab.id === activeTabId ? 'active' : ''}`}
+                style={{ paddingLeft: '8px' }}
+                onClick={() => switchToTab(tab.id)}
+              >
+                <span className="tree-icon">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                    <polyline points="14 2 14 8 20 8" />
+                  </svg>
+                </span>
+                <span className="tree-name">{getFileName(tab.filePath!)}</span>
+                {tab.isModified && <span className="independent-modified-dot"> •</span>}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* 文件夹目录树 */}
+        {rootPath && (
+          <>
+            <div className="sidebar-section-header">文件夹目录树</div>
+            <FileTree
+              nodes={tree}
+              depth={0}
+              expandedDirs={expandedDirs}
+              toggleDir={toggleDir}
+              activeTabId={activeTabId}
+              onFileClick={async (path) => {
+                const existing = tabs.find(t => t.filePath === path)
+                if (existing) {
+                  switchToTab(existing.id)
+                } else if (window.electronAPI) {
+                  const result = await window.electronAPI.readFile(path)
+                  if (result.success && result.content) {
+                    createTab(path, result.content)
+                  }
+                }
+              }}
+            />
+          </>
+        )}
+      </div>
+
+      {/* 调节手柄 */}
+      <div
+        className="sidebar-resize-handle"
+        onMouseDown={() => setIsResizing(true)}
+      />
+    </div>
+  )
+}
+
+// 文件树递归组件
+function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, onFileClick }: {
+  nodes: FileNode[]
+  depth: number
+  expandedDirs: Set<string>
+  toggleDir: (path: string) => void
+  activeTabId: string | null
+  onFileClick: (path: string) => void
+}) {
+  return (
+    <>
+      {nodes.map(node => (
+        <React.Fragment key={node.path}>
+          <div
+            className={`tree-item ${node.type === 'file' && activeTabId ? '' : ''}`}
+            style={{ paddingLeft: (8 + depth * 16) + 'px' }}
+            onClick={() => {
+              if (node.type === 'dir') {
+                toggleDir(node.path)
+              } else {
+                onFileClick(node.path)
+              }
+            }}
+          >
+            {node.type === 'dir' ? (
+              <>
+                <span className={`tree-arrow ${expandedDirs.has(node.path) ? 'expanded' : ''}`}>
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <polyline points="9 18 15 12 9 6" />
+                  </svg>
+                </span>
+                <span className="tree-icon">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+                  </svg>
+                </span>
+              </>
+            ) : (
+              <>
+                <span style={{ width: '16px', flexShrink: 0 }} />
+                <span className="tree-icon">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                    <polyline points="14 2 14 8 20 8" />
+                  </svg>
+                </span>
+              </>
+            )}
+            <span className="tree-name">{node.name}</span>
+          </div>
+          {node.type === 'dir' && expandedDirs.has(node.path) && node.children && (
+            <FileTree
+              nodes={node.children}
+              depth={depth + 1}
+              expandedDirs={expandedDirs}
+              toggleDir={toggleDir}
+              activeTabId={activeTabId}
+              onFileClick={onFileClick}
+            />
+          )}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}