MetonaTeam/MarkLite
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

v0.1.1: 多Agent代码质量审查+优化

Browse Source 
- fix: useCodeMirror onChange闭包过期导致编辑器内容丢失同步(P0)
- feat: 全部组件添加displayName(React DevTools调试支持)
- feat: 全部组件添加ARIA属性(WCAG无障碍支持)
- fix: App异步操作添加try-catch错误边界
- fix: tabStore空catch块添加错误日志
- fix: sidebarStore Set→string[](Zustand可序列化)
- fix: useDragDrop readFile错误处理+空文件修复
- fix: useSettings/useTheme load()添加错误处理
- fix: useTheme toggleDarkMode引用优化
- chore: 版本号升级至0.1.1
This commit is contained in:
thzxx
2026-06-03 21:02:56 +08:00
parent d3c4062c10
commit 3cecb0f9eb
16 changed files with 106 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+1 -1
View File
@@ -1,4 +1,4 @@
# MarkLite v0.1.0 — 架构设计文档
# MarkLite v0.1.1 — 架构设计文档
## 1. 项目概述
README.md
+1 -1
View File
@@ -14,7 +14,7 @@
<img src="https://img.shields.io/badge/TypeScript-5.6-3178C6?style=flat-square&logo=typescript" alt="TypeScript">
<img src="https://img.shields.io/badge/React-18-61DAFB?style=flat-square&logo=react" alt="React">
<img src="https://img.shields.io/badge/License-MIT-green?style=flat-square" alt="License">
<img src="https://img.shields.io/badge/Version-v0.1.0-orange?style=flat-square" alt="Version">
<img src="https://img.shields.io/badge/Version-v0.1.1-orange?style=flat-square" alt="Version">
</p>
<p align="center">
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "marklite",
"version": "0.1.0",
"version": "0.1.1",
"description": "Lightweight Markdown Editor for Windows",
"main": "./dist/main/index.js",
"scripts": {
src/renderer/App.tsx
+20 -4
View File
@@ -21,9 +21,9 @@ import { ModifiedBanner } from './components/ModifiedBanner/ModifiedBanner'
import { DropOverlay } from './components/DropOverlay/DropOverlay'
import { AppIcon, Gitee } from './components/Icons'
const APP_VERSION = 'v0.1.0'
const APP_VERSION = 'v0.1.1'
export default function App() {
export function App() {
const tabs = useTabStore(s => s.tabs)
const activeTabId = useTabStore(s => s.activeTabId)
const getActiveTab = useTabStore(s => s.getActiveTab)
@@ -89,6 +89,7 @@ export default function App() {
// 打开文件
const handleOpenFile = useCallback(async () => {
try {
if (window.electronAPI) {
const result = await window.electronAPI.openFile()
if (result && 'filePath' in result) {
@@ -97,10 +98,14 @@ export default function App() {
setTimeout(() => useTabStore.getState().saveToDB(), 100)
}
}
}, [createTab])
} catch {
showToast('操作失败')
}
}, [createTab, showToast])
// 保存文件
const handleSave = useCallback(async () => {
try {
const tab = getActiveTab()
if (!tab) return
if (window.electronAPI) {
@@ -113,10 +118,14 @@ export default function App() {
showToast('已保存')
}
}
} catch {
showToast('操作失败')
}
}, [getActiveTab, showToast])
// 另存为
const handleSaveAs = useCallback(async () => {
try {
const tab = getActiveTab()
if (!tab) return
if (window.electronAPI) {
@@ -126,6 +135,9 @@ export default function App() {
showToast('已保存')
}
}
} catch {
showToast('操作失败')
}
}, [getActiveTab, showToast])
// 快捷键
@@ -247,7 +259,7 @@ export default function App() {
{/* 关于弹框 */}
{showAbout && (
<div className="about-overlay" onClick={() => setShowAbout(false)}>
<div className="about-overlay" onClick={() => setShowAbout(false)} role="dialog" aria-modal="true" aria-label="关于 MarkLite">
<div className="about-dialog" onClick={e => e.stopPropagation()}>
<div className="about-header">
<AppIcon size={64} />
@@ -289,3 +301,7 @@ export default function App() {
</div>
)
}
App.displayName = 'App'
export default App
src/renderer/components/Editor/Editor.tsx
+3 -1
View File
@@ -87,9 +87,11 @@ export function Editor({ darkMode }: EditorProps) {
}, [viewRef])
return (
<div className="editor-container">
<div className="editor-container" role="region" aria-label="Markdown编辑器">
<EditorToolbar viewRef={viewRef} />
<div ref={containerRef} className="codemirror-wrapper" />
</div>
)
}
Editor.displayName = 'Editor'
src/renderer/components/Editor/useCodeMirror.ts
+7 -1
View File
@@ -17,6 +17,12 @@ export function useCodeMirror({ content, onChange, darkMode }: UseCodeMirrorOpti
const containerRef = useRef<HTMLDivElement>(null)
const viewRef = useRef<EditorView | null>(null)
const isExternalUpdate = useRef(false)
const onChangeRef = useRef(onChange)
// 始终保持 onChangeRef 为最新回调
useEffect(() => {
onChangeRef.current = onChange
}, [onChange])
// 初始化编辑器
useEffect(() => {
@@ -61,7 +67,7 @@ export function useCodeMirror({ content, onChange, darkMode }: UseCodeMirrorOpti
EditorView.lineWrapping,
EditorView.updateListener.of(update => {
if (update.docChanged && !isExternalUpdate.current) {
onChange(update.state.doc.toString())
onChangeRef.current(update.state.doc.toString())
}
})
]
src/renderer/components/Preview/Preview.tsx
+5
View File
@@ -56,8 +56,13 @@ export function Preview() {
ref={previewRef}
id="preview"
className="markdown-body"
role="region"
aria-label="Markdown预览"
aria-live="polite"
onClick={handleClick}
dangerouslySetInnerHTML={{ __html: html }}
/>
)
}
Preview.displayName = 'Preview'
src/renderer/components/Sidebar/Sidebar.tsx
+9 -4
View File
@@ -128,7 +128,7 @@ export function Sidebar() {
</button>
</div>
<div id="sidebar-tree">
<div id="sidebar-tree" role="tree" aria-label="文件树">
{/* 独立文件区 */}
{independentFiles.length > 0 && (
<div className="independent-files-section">
@@ -138,6 +138,7 @@ export function Sidebar() {
key={tab.id}
className={`tree-item independent-file-item ${tab.id === activeTabId ? 'active' : ''}`}
style={{ paddingLeft: '8px' }}
role="treeitem"
onClick={() => switchToTab(tab.id)}
>
<span className="tree-icon">
@@ -179,7 +180,7 @@ export function Sidebar() {
function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, activeFilePath, onFileClick }: {
nodes: FileNode[]
depth: number
expandedDirs: Set<string>
expandedDirs: string[]
toggleDir: (path: string) => void
activeTabId: string | null
activeFilePath: string | null
@@ -192,6 +193,7 @@ function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, activeFi
<div
className={`tree-item ${node.type === 'file' && node.path === activeFilePath ? 'active' : ''}`}
style={{ paddingLeft: (8 + depth * 16) + 'px' }}
role="treeitem"
onClick={() => {
if (node.type === 'dir') {
toggleDir(node.path)
@@ -202,7 +204,7 @@ function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, activeFi
>
{node.type === 'dir' ? (
<>
<span className={`tree-arrow ${expandedDirs.has(node.path) ? 'expanded' : ''}`}>
<span className={`tree-arrow ${expandedDirs.includes(node.path) ? 'expanded' : ''}`}>
<ChevronRight size={10} />
</span>
<span className="tree-icon">
@@ -219,7 +221,7 @@ function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, activeFi
)}
<span className="tree-name">{node.name}</span>
</div>
{node.type === 'dir' && expandedDirs.has(node.path) && node.children && (
{node.type === 'dir' && expandedDirs.includes(node.path) && node.children && (
<FileTree
nodes={node.children}
depth={depth + 1}
@@ -235,3 +237,6 @@ function FileTree({ nodes, depth, expandedDirs, toggleDir, activeTabId, activeFi
</>
)
}
Sidebar.displayName = 'Sidebar'
FileTree.displayName = 'FileTree'
src/renderer/components/StatusBar/StatusBar.tsx
+3 -1
View File
@@ -9,7 +9,7 @@ export function StatusBar() {
const tab = tabs.find(t => t.id === activeTabId) ?? null
return (
<div id="statusbar">
<div id="statusbar" role="status" aria-live="polite">
<div className="status-left">
<span id="status-text">
{tab ? (tab.filePath ? getFileName(tab.filePath) : '未命名') : '就绪'}
@@ -23,3 +23,5 @@ export function StatusBar() {
</div>
)
}
StatusBar.displayName = 'StatusBar'
src/renderer/components/TabBar/TabBar.tsx
+5 -1
View File
@@ -149,11 +149,13 @@ export function TabBar() {
return (
<div id="tab-bar">
<div id="tab-list" ref={tabListRef}>
<div id="tab-list" ref={tabListRef} role="tablist" aria-label="标签页">
{tabs.map(tab => (
<div
key={tab.id}
className={`tab-item ${tab.id === activeTabId ? 'active' : ''} ${tab.isModified ? 'modified' : ''}`}
role="tab"
aria-selected={tab.id === activeTabId}
onClick={() => switchToTab(tab.id)}
onContextMenu={(e) => handleContextMenu(e, tab.id)}
>
@@ -206,3 +208,5 @@ export function TabBar() {
</div>
)
}
TabBar.displayName = 'TabBar'
src/renderer/components/Toolbar/Toolbar.tsx
+3 -1
View File
@@ -13,7 +13,7 @@ interface ToolbarProps {
export function Toolbar({ onOpen, onSave, viewMode, onViewModeChange, darkMode, onToggleDark, onShowAbout }: ToolbarProps) {
return (
<div id="toolbar">
<div id="toolbar" role="toolbar" aria-label="工具栏">
<div className="toolbar-left">
<button className="toolbar-btn" onClick={onOpen} title="打开文件 (Ctrl+O)">
<FolderOpen size={18} />
@@ -44,3 +44,5 @@ export function Toolbar({ onOpen, onSave, viewMode, onViewModeChange, darkMode,
</div>
)
}
Toolbar.displayName = 'Toolbar'
src/renderer/hooks/useDragDrop.ts
+5 -1
View File
@@ -26,10 +26,14 @@ export function useDragDrop(showToast: (msg: string) => void) {
}
if (window.electronAPI) {
try {
const result = await window.electronAPI.readFile(filePath)
if (result.success && result.content) {
if (result.success && result.content !== undefined) {
createTab(filePath, result.content)
}
} catch (err) {
console.error('Failed to read file via electronAPI:', err)
}
} else {
const reader = new FileReader()
reader.onload = (ev) => {
src/renderer/hooks/useSettings.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export function useSettings() {
useEffect(() => {
settingsRepository.load().then(settings => {
setViewMode(settings.viewMode ?? 'editor')
})
}).catch(err => console.error('Failed to load settings:', err))
}, [setViewMode])
// M-10: 使用 useCallback 稳定函数引用
src/renderer/hooks/useTheme.ts
+4 -2
View File
@@ -13,7 +13,7 @@ export function useTheme() {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
setDarkMode(settings.darkMode !== undefined ? settings.darkMode : prefersDark)
isInitialized.current = true
})
}).catch(err => console.error('Failed to load theme settings:', err))
}, [setDarkMode])
// B-05: 首次加载完成后才保存主题设置
@@ -23,5 +23,7 @@ export function useTheme() {
settingsRepository.save({ darkMode })
}, [darkMode])
return { darkMode, toggleDarkMode: useEditorStore(s => s.toggleDarkMode) }
const toggleDarkMode = useEditorStore(s => s.toggleDarkMode)
return { darkMode, toggleDarkMode }
}
src/renderer/stores/sidebarStore.ts
+11 -20
View File
@@ -6,7 +6,7 @@ interface SidebarState {
isVisible: boolean
rootPath: string | null
tree: FileNode[]
expandedDirs: Set<string>
expandedDirs: string[]
sidebarWidth: number
_loaded: boolean
@@ -23,7 +23,7 @@ export const useSidebarStore = create<SidebarState>((set, get) => ({
isVisible: true,
rootPath: null,
tree: [],
expandedDirs: new Set<string>(),
expandedDirs: [],
sidebarWidth: 240,
_loaded: false,
@@ -50,26 +50,17 @@ export const useSidebarStore = create<SidebarState>((set, get) => ({
setRootPath: (path) => set({ rootPath: path }),
setTree: (tree) => set({ tree }),
toggleDir: (path) =>
set(state => {
const newSet = new Set(state.expandedDirs)
if (newSet.has(path)) {
newSet.delete(path)
} else {
newSet.add(path)
}
return { expandedDirs: newSet }
}),
set(state => ({
expandedDirs: state.expandedDirs.includes(path)
? state.expandedDirs.filter(p => p !== path)
: [...state.expandedDirs, path]
})),
expandDirs: (paths) =>
set(state => {
const newSet = new Set(state.expandedDirs)
let changed = false
for (const p of paths) {
if (!newSet.has(p)) {
newSet.add(p)
changed = true
}
}
return changed ? { expandedDirs: newSet } : state
const newDirs = paths.filter(p => !state.expandedDirs.includes(p))
return newDirs.length > 0
? { expandedDirs: [...state.expandedDirs, ...newDirs] }
: state
}),
setSidebarWidth: (width) => {
set({ sidebarWidth: width })
src/renderer/stores/tabStore.ts
+2 -1
View File
@@ -59,7 +59,8 @@ export const useTabStore = create<TabState>((set, get) => ({
} else {
set({ _loaded: true })
}
} catch {
} catch (err) {
console.error('Failed to load tabs from DB:', err)
set({ _loaded: true })
}
},