v0.3.4: Bug修复+性能优化+文档大纲功能

🔴 Bug修复 (6): - Sidebar反斜杠正则修复 (Windows路径规范化) - FileWatcher文件删除后自动恢复监听 - SearchReplace replaceAll防过期匹配位置 - openFolderDialog null结果守卫 - 保存异常时空路径保护 - Markdown绝对路径图片拼接修复 🟡 性能优化: - Editor切换标签时内容比较，相同跳过replaceAll 🔵 代码质量: - 创建共享常量模块 src/shared/constants.ts，消除双副本 🎯 新增功能: - 文档大纲 (Table of Contents) — 侧边栏标题导航 🔧 换行符统一: CRLF → LF
2026-06-04 13:24:23 +08:00
parent efa7f61809
commit 899d2b7914
28 changed files with 2657 additions and 2374 deletions
@@ -1,108 +1,139 @@
-import React, { useCallback } from 'react'
-import { useTabStore } from '../../stores/tabStore'
-import { useSidebarStore } from '../../stores/sidebarStore'
-import { getFileName } from '../../lib/fileUtils'
-import { recentFilesRepository } from '../../db/recentFilesRepository'
-import { FolderPlus, File } from '../Icons'
-import { FileTree } from '../FileTree'
-import { useSidebarResize } from '../../hooks/useSidebarResize'
-import { useFolderOperations } from '../../hooks/useFolderOperations'
-import { useAutoExpandDir } from '../../hooks/useAutoExpandDir'
-
-const norm = (p: string) => p.replace(/\\\\/g, '/')
-
-export const Sidebar = React.memo(function Sidebar() {
-  const tabs = useTabStore(s => s.tabs)
-  const activeTabId = useTabStore(s => s.activeTabId)
-  const activeTab = useTabStore(s => s.getActiveTab())
-  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 isVisible = useSidebarStore(s => s.isVisible)
-
-  const activeFilePath = activeTab?.filePath ?? null
-  const { sidebarRef, startResize } = useSidebarResize()
-  const { handleOpenFolder } = useFolderOperations()
-  useAutoExpandDir(activeFilePath)
-
-  const handleFileClick = useCallback(async (path: string) => {
-    const existing = tabs.find(t => t.filePath === path)
-    if (existing) { switchToTab(existing.id); return }
-    if (!window.electronAPI) return
-    const result = await window.electronAPI.readFile(path)
-    if (result.success && result.content) {
-      createTab(path, result.content)
-      recentFilesRepository.add(path)
-    }
-  }, [tabs, switchToTab, createTab])
-
-  const independentFiles = tabs.filter(t => {
-    if (!t.filePath) return false
-    if (!rootPath) return true
-    return !norm(t.filePath).startsWith(norm(rootPath))
-  })
-
-  if (!isVisible) return null
-
-  return (
-    <aside id="sidebar" ref={sidebarRef} aria-label="文件资源管理器">
-      <div id="sidebar-header">
-        <span id="sidebar-title">资源管理器</span>
-        <button
-          className="sidebar-header-btn"
-          onClick={handleOpenFolder}
-          title="打开文件夹"
-          aria-label="打开文件夹"
-        >
-          <FolderPlus size={14} />
-        </button>
-      </div>
-      <nav id="sidebar-tree" role="tree" aria-label="文件树">
-        {independentFiles.length > 0 && (
-          <div className="independent-files-section" role="group" aria-label="已打开的文件">
-            <div className="independent-files-header" id="independent-files-label">已打开的文件</div>
-            {independentFiles.map(tab => (
-              <div key={tab.id}
-                className={`tree-item independent-file-item ${tab.id === activeTabId ? 'active' : ''}`}
-                style={{ paddingLeft: '8px' }}
-                role="treeitem"
-                tabIndex={0}
-                aria-selected={tab.id === activeTabId}
-                aria-label={getFileName(tab.filePath!)}
-                onClick={() => switchToTab(tab.id)}
-                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); switchToTab(tab.id) } }}
-              >
-                <span className="tree-icon"><File size={14} /></span>
-                <span className="tree-name">{getFileName(tab.filePath!)}</span>
-                {tab.isModified && <span className="independent-modified-dot" aria-label="已修改"> •</span>}
-              </div>
-            ))}
-          </div>
-        )}
-        {rootPath && (
-          <>
-            <div className="sidebar-section-header" id="folder-tree-label">文件夹目录树</div>
-            <FileTree
-              nodes={[{ name: rootPath.split(/[/\\\\]/).pop() || rootPath, path: rootPath, type: 'dir' as const, children: tree }]}
-              depth={0} expandedDirs={expandedDirs} toggleDir={toggleDir}
-              activeTabId={activeTabId} activeFilePath={activeFilePath} onFileClick={handleFileClick}
-            />
-          </>
-        )}
-      </nav>
-      <div
-        className="sidebar-resize-handle"
-        onMouseDown={startResize}
-        role="separator"
-        aria-orientation="vertical"
-        aria-label="调整侧边栏宽度"
-        tabIndex={0}
-      />
-    </aside>
-  )
-})
-
-Sidebar.displayName = 'Sidebar'
+import React, { useCallback, useMemo } from 'react'
+import { useTabStore } from '../../stores/tabStore'
+import { useSidebarStore } from '../../stores/sidebarStore'
+import { getFileName } from '../../lib/fileUtils'
+import { recentFilesRepository } from '../../db/recentFilesRepository'
+import { FolderPlus, File } from '../Icons'
+import { FileTree } from '../FileTree'
+import { useSidebarResize } from '../../hooks/useSidebarResize'
+import { useFolderOperations } from '../../hooks/useFolderOperations'
+import { useAutoExpandDir } from '../../hooks/useAutoExpandDir'
+import { OutlinePanel, parseHeadings } from '../OutlinePanel'
+import { getEditorView } from '../../stores/editorStore'
+import { TextSelection } from '@milkdown/prose/state'
+
+const norm = (p: string) => p.replace(/\\/g, '/')
+
+export const Sidebar = React.memo(function Sidebar() {
+  const tabs = useTabStore(s => s.tabs)
+  const activeTabId = useTabStore(s => s.activeTabId)
+  const activeTab = useTabStore(s => s.getActiveTab())
+  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 isVisible = useSidebarStore(s => s.isVisible)
+
+  const activeFilePath = activeTab?.filePath ?? null
+  const { sidebarRef, startResize } = useSidebarResize()
+  const { handleOpenFolder } = useFolderOperations()
+  useAutoExpandDir(activeFilePath)
+
+  // Parse headings from active tab content
+  const headings = useMemo(() => {
+    if (!activeTab?.content) return []
+    return parseHeadings(activeTab.content)
+  }, [activeTab?.content])
+
+  // Navigate to heading position in editor
+  const handleHeadingNavigate = useCallback((pos: number) => {
+    const view = getEditorView()
+    if (!view) return
+    try {
+      const tr = view.state.tr.setSelection(
+        TextSelection.create(view.state.doc, pos, pos)
+      )
+      view.dispatch(tr)
+      view.focus()
+    } catch {
+      // Position may be invalid if content has changed
+    }
+  }, [])
+
+  const handleFileClick = useCallback(async (path: string) => {
+    const existing = tabs.find(t => t.filePath === path)
+    if (existing) { switchToTab(existing.id); return }
+    if (!window.electronAPI) return
+    const result = await window.electronAPI.readFile(path)
+    if (result.success && result.content) {
+      createTab(path, result.content)
+      recentFilesRepository.add(path)
+    }
+  }, [tabs, switchToTab, createTab])
+
+  const independentFiles = tabs.filter(t => {
+    if (!t.filePath) return false
+    if (!rootPath) return true
+    return !norm(t.filePath).startsWith(norm(rootPath))
+  })
+
+  if (!isVisible) return null
+
+  return (
+    <aside id="sidebar" ref={sidebarRef} aria-label="文件资源管理器">
+      <div id="sidebar-header">
+        <span id="sidebar-title">资源管理器</span>
+        <button
+          className="sidebar-header-btn"
+          onClick={handleOpenFolder}
+          title="打开文件夹"
+          aria-label="打开文件夹"
+        >
+          <FolderPlus size={14} />
+        </button>
+      </div>
+      <nav id="sidebar-tree" role="tree" aria-label="文件树">
+        {independentFiles.length > 0 && (
+          <div className="independent-files-section" role="group" aria-label="已打开的文件">
+            <div className="independent-files-header" id="independent-files-label">已打开的文件</div>
+            {independentFiles.map(tab => (
+              <div key={tab.id}
+                className={`tree-item independent-file-item ${tab.id === activeTabId ? 'active' : ''}`}
+                style={{ paddingLeft: '8px' }}
+                role="treeitem"
+                tabIndex={0}
+                aria-selected={tab.id === activeTabId}
+                aria-label={getFileName(tab.filePath!)}
+                onClick={() => switchToTab(tab.id)}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); switchToTab(tab.id) } }}
+              >
+                <span className="tree-icon"><File size={14} /></span>
+                <span className="tree-name">{getFileName(tab.filePath!)}</span>
+                {tab.isModified && <span className="independent-modified-dot" aria-label="已修改"> •</span>}
+              </div>
+            ))}
+          </div>
+        )}
+        {rootPath && (
+          <>
+            <div className="sidebar-section-header" id="folder-tree-label">文件夹目录树</div>
+            <FileTree
+              nodes={[{ name: rootPath.split(/[/\\]/).pop() || rootPath, path: rootPath, type: 'dir' as const, children: tree }]}
+              depth={0} expandedDirs={expandedDirs} toggleDir={toggleDir}
+              activeTabId={activeTabId} activeFilePath={activeFilePath} onFileClick={handleFileClick}
+            />
+          </>
+        )}
+      </nav>
+      <div className="sidebar-outline-section">
+        <OutlinePanel
+          headings={headings}
+          onNavigate={handleHeadingNavigate}
+          activeHeadingIndex={null}
+        />
+      </div>
+      <div
+        className="sidebar-resize-handle"
+        onMouseDown={startResize}
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="调整侧边栏宽度"
+        tabIndex={0}
+      />
+    </aside>
+  )
+})
+
+Sidebar.displayName = 'Sidebar'