v0.2.0: 全面代码质量优化

- ESLint flat config + Prettier + EditorConfig
- Markdown处理器LRU缓存
- Zustand选择器优化减少重渲染
- CodeMirror Compartment主题热切换
- Preview防抖(150ms) + IndexedDB去抖(500ms)
- 组件拆分: App.tsx 310→104行, Sidebar.tsx 244→90行
- 统一错误处理 errorHandler.ts
- ConfirmDialog替代原生confirm
- LoadingSpinner加载状态
- Toast多条堆叠+类型区分
- 可访问性增强(ARIA属性、键盘导航)
- Vitest测试框架(78个测试用例)
- Git hooks(husky + lint-staged)
- 项目文档(README.md, CONTRIBUTING.md)

src/renderer/components/Toolbar/Toolbar.tsx

@@ -11,38 +11,50 @@ interface ToolbarProps {
   onShowAbout: () => void
 }
 
-export function Toolbar({ onOpen, onSave, viewMode, onViewModeChange, darkMode, onToggleDark, onShowAbout }: ToolbarProps) {
+export const Toolbar = React.memo(function Toolbar({ onOpen, onSave, viewMode, onViewModeChange, darkMode, onToggleDark, onShowAbout }: ToolbarProps) {
   return (
     <div id="toolbar" role="toolbar" aria-label="工具栏">
-      <div className="toolbar-left">
-        <button className="toolbar-btn" onClick={onOpen} title="打开文件 (Ctrl+O)">
+      <div className="toolbar-left" role="group" aria-label="文件操作">
+        <button className="toolbar-btn" onClick={onOpen} title="打开文件 (Ctrl+O)" aria-label="打开文件">
           <FolderOpen size={18} />
           <span>打开</span>
         </button>
-        <button className="toolbar-btn" onClick={onSave} title="保存文件 (Ctrl+S)">
+        <button className="toolbar-btn" onClick={onSave} title="保存文件 (Ctrl+S)" aria-label="保存文件">
           <Save size={18} />
           <span>保存</span>
         </button>
-        <div className="toolbar-divider" />
-        <button className={`toolbar-btn ${viewMode === 'editor' ? 'active' : ''}`} onClick={() => onViewModeChange('editor')} title="编辑 (Ctrl+1)">
+        <div className="toolbar-divider" role="separator" />
+        <button
+          className={`toolbar-btn ${viewMode === 'editor' ? 'active' : ''}`}
+          onClick={() => onViewModeChange('editor')}
+          title="编辑 (Ctrl+1)"
+          aria-label="编辑模式"
+          aria-pressed={viewMode === 'editor'}
+        >
           <EditMode size={18} />
           <span>编辑</span>
         </button>
-        <button className={`toolbar-btn ${viewMode === 'preview' ? 'active' : ''}`} onClick={() => onViewModeChange('preview')} title="预览 (Ctrl+2)">
+        <button
+          className={`toolbar-btn ${viewMode === 'preview' ? 'active' : ''}`}
+          onClick={() => onViewModeChange('preview')}
+          title="预览 (Ctrl+2)"
+          aria-label="预览模式"
+          aria-pressed={viewMode === 'preview'}
+        >
           <PreviewMode size={18} />
           <span>预览</span>
         </button>
       </div>
-      <div className="toolbar-right">
-        <button className="toolbar-btn" onClick={onToggleDark} title="切换暗色主题">
+      <div className="toolbar-right" role="group" aria-label="设置">
+        <button className="toolbar-btn" onClick={onToggleDark} title="切换暗色主题" aria-label={darkMode ? '切换到亮色主题' : '切换到暗色主题'}>
           {darkMode ? <Sun size={18} /> : <Moon size={18} />}
         </button>
-        <button className="toolbar-btn" onClick={onShowAbout} title="关于">
+        <button className="toolbar-btn" onClick={onShowAbout} title="关于" aria-label="关于 MarkLite">
           <Info size={18} />
         </button>
       </div>
     </div>
   )
-}
+})
 
-Toolbar.displayName = 'Toolbar'
+Toolbar.displayName = 'Toolbar'