refactor: 移除自定义状态栏 — 使用 MetonaEditor 自带底栏

- editor 自带底栏(wordCount: true)已显示字符数/词数/行数/阅读时间
- 删除自定义 StatusBar 组件、editorStore 的 stats/cursor 状态与事件绑定
- 保留 zenMode 同步(Toolbar 专注按钮消费);自动保存状态由 Toolbar 按钮显示
This commit is contained in:
thzxx
2026-08-09 22:04:06 +08:00
parent cb243c5c95
commit cf920ab2e6
7 changed files with 4 additions and 152 deletions
-2
View File
@@ -14,7 +14,6 @@ import { useIpcListeners } from './hooks/useIpcListeners'
import { MeToast } from './lib/toast' import { MeToast } from './lib/toast'
import { closeDatabase } from './db/schema' import { closeDatabase } from './db/schema'
import { Toolbar } from './components/Toolbar/Toolbar' import { Toolbar } from './components/Toolbar/Toolbar'
import { StatusBar } from './components/StatusBar'
import { TabBar } from './components/TabBar/TabBar' import { TabBar } from './components/TabBar/TabBar'
import { Editor } from './components/Editor/Editor' import { Editor } from './components/Editor/Editor'
import { Sidebar } from './components/Sidebar/Sidebar' import { Sidebar } from './components/Sidebar/Sidebar'
@@ -126,7 +125,6 @@ export function App() {
)} )}
</div> </div>
</div> </div>
<StatusBar />
<DropOverlay /> <DropOverlay />
{showAbout && <AboutDialog onClose={handleCloseAbout} />} {showAbout && <AboutDialog onClose={handleCloseAbout} />}
</div> </div>
+2 -30
View File
@@ -56,8 +56,6 @@ export const Editor = React.memo(function Editor({ themeMode, onAppSave }: Edito
const updateTabScroll = useTabStore(s => s.updateTabScroll) const updateTabScroll = useTabStore(s => s.updateTabScroll)
const viewMode = useEditorStore(s => s.viewMode) const viewMode = useEditorStore(s => s.viewMode)
const setViewMode = useEditorStore(s => s.setViewMode) const setViewMode = useEditorStore(s => s.setViewMode)
const setStats = useEditorStore(s => s.setStats)
const setCursor = useEditorStore(s => s.setCursor)
const setZenMode = useEditorStore(s => s.setZenMode) const setZenMode = useEditorStore(s => s.setZenMode)
const containerRef = useRef<HTMLDivElement>(null) const containerRef = useRef<HTMLDivElement>(null)
@@ -197,38 +195,12 @@ export const Editor = React.memo(function Editor({ themeMode, onAppSave }: Edito
// 首次渲染后延迟触发一次 // 首次渲染后延迟触发一次
setTimeout(renderMermaid, 300) setTimeout(renderMermaid, 300)
// v0.6.0: 实时状态同步 — getStats + 光标/zen 事件 → editorStore状态栏消费) // v0.6.0: Zen 状态同步 → editorStoreToolbar 消费)
const syncStats = () => { // 文档统计由编辑器自带底栏展示(wordCount: true),无需应用层同步
try {
const s = editor.getStats()
setStats({
characters: s.characters,
words: s.words,
chineseChars: s.chineseChars,
englishWords: s.englishWords,
lines: s.lines,
readingTime: s.readingTime,
})
} catch {
/* 容错 */
}
}
const syncCursor = (pos?: { line: number; column: number }) => {
try {
setCursor(pos ?? editor.getCursorPosition())
} catch {
/* 容错 */
}
}
const syncZen = (zen: boolean) => { const syncZen = (zen: boolean) => {
setZenMode(Boolean(zen)) setZenMode(Boolean(zen))
} }
editor.on('change', syncStats)
editor.on('input', syncStats)
editor.on('cursorMove', syncCursor)
editor.on('zenChange', syncZen) editor.on('zenChange', syncZen)
syncStats()
syncCursor()
return () => { return () => {
editor.destroy() editor.destroy()
@@ -1,38 +0,0 @@
import React from 'react'
import { useEditorStore } from '../../stores/editorStore'
import { useAutoSaveStore } from '../../stores/autoSaveStore'
/**
* v0.6.0: 状态栏 — 展示文档统计 / 光标位置 / 自动保存状态。
* 数据来自 editorStoreEditor 组件绑定 MetonaEditor 事件实时写入)。
*/
export const StatusBar = React.memo(function StatusBar() {
const stats = useEditorStore(s => s.stats)
const cursor = useEditorStore(s => s.cursor)
const zenMode = useEditorStore(s => s.zenMode)
const isAutoSaving = useAutoSaveStore(s => s.isAutoSaving)
const autoSaveEnabled = useAutoSaveStore(s => s.autoSaveEnabled)
return (
<footer id="statusbar" role="status" aria-label="状态栏">
{zenMode && <span className="statusbar-item statusbar-zen">🧘 Zen</span>}
{stats && (
<span className="statusbar-item" title="字数 / 词数 / 行数 / 阅读时间">
{stats.words} · {stats.lines} · {stats.readingTime}
</span>
)}
<span className="statusbar-spacer" />
{cursor && (
// getCursorPosition: line 为 1-basedcolumn 为 0-based
<span className="statusbar-item">
{cursor.line}, {cursor.column + 1}
</span>
)}
<span className={`statusbar-item statusbar-autosave${isAutoSaving ? ' saving' : ''}`}>
{isAutoSaving ? '保存中...' : autoSaveEnabled ? '自动保存' : '手动保存'}
</span>
</footer>
)
})
StatusBar.displayName = 'StatusBar'
@@ -1 +0,0 @@
export { StatusBar } from './StatusBar'
@@ -103,30 +103,7 @@ describe('editorStore', () => {
describe('editor live state (v0.6.0)', () => { describe('editor live state (v0.6.0)', () => {
beforeEach(() => { beforeEach(() => {
useEditorStore.setState({ stats: null, cursor: null, zenMode: false }) useEditorStore.setState({ zenMode: false })
})
it('should set stats', () => {
useEditorStore.getState().setStats({
characters: 10,
words: 2,
chineseChars: 5,
englishWords: 1,
lines: 3,
readingTime: 1,
})
expect(useEditorStore.getState().stats?.words).toBe(2)
expect(useEditorStore.getState().stats?.lines).toBe(3)
})
it('should clear stats', () => {
useEditorStore.getState().setStats(null)
expect(useEditorStore.getState().stats).toBeNull()
})
it('should set cursor position', () => {
useEditorStore.getState().setCursor({ line: 5, column: 12 })
expect(useEditorStore.getState().cursor).toEqual({ line: 5, column: 12 })
}) })
it('should set zen mode', () => { it('should set zen mode', () => {
+1 -25
View File
@@ -16,21 +16,6 @@ export function getMetonaEditor(): MarkdownEditor | null {
const THEME_CYCLE: ThemeMode[] = ['light', 'dark', 'warm'] const THEME_CYCLE: ThemeMode[] = ['light', 'dark', 'warm']
/** v0.6.0: 编辑器实时状态(由 Editor 组件绑定事件写入,状态栏消费) */
export interface EditorLiveStats {
characters: number
words: number
chineseChars: number
englishWords: number
lines: number
readingTime: number
}
export interface EditorCursor {
line: number
column: number
}
interface EditorState { interface EditorState {
viewMode: ViewMode viewMode: ViewMode
themeMode: ThemeMode themeMode: ThemeMode
@@ -38,9 +23,7 @@ interface EditorState {
externallyModified: { filePath: string } | null externallyModified: { filePath: string } | null
// UX-02: 全局加载状态 // UX-02: 全局加载状态
loadingStates: Record<string, boolean> loadingStates: Record<string, boolean>
// v0.6.0: 编辑器实时状态 // v0.6.0: Zen 模式状态(Toolbar 消费)
stats: EditorLiveStats | null
cursor: EditorCursor | null
zenMode: boolean zenMode: boolean
setViewMode: (mode: ViewMode) => void setViewMode: (mode: ViewMode) => void
@@ -50,9 +33,6 @@ interface EditorState {
// UX-02: 加载状态管理 // UX-02: 加载状态管理
setLoading: (key: string, loading: boolean) => void setLoading: (key: string, loading: boolean) => void
isLoading: (key: string) => boolean isLoading: (key: string) => boolean
// v0.6.0: 编辑器状态同步
setStats: (stats: EditorLiveStats | null) => void
setCursor: (cursor: EditorCursor | null) => void
setZenMode: (zen: boolean) => void setZenMode: (zen: boolean) => void
} }
@@ -61,8 +41,6 @@ export const useEditorStore = create<EditorState>((set, get) => ({
themeMode: 'light', themeMode: 'light',
externallyModified: null, externallyModified: null,
loadingStates: {}, loadingStates: {},
stats: null,
cursor: null,
zenMode: false, zenMode: false,
setViewMode: (mode: ViewMode) => set({ viewMode: mode }), setViewMode: (mode: ViewMode) => set({ viewMode: mode }),
@@ -80,7 +58,5 @@ export const useEditorStore = create<EditorState>((set, get) => ({
loadingStates: { ...state.loadingStates, [key]: loading }, loadingStates: { ...state.loadingStates, [key]: loading },
})), })),
isLoading: (key: string) => get().loadingStates[key] ?? false, isLoading: (key: string) => get().loadingStates[key] ?? false,
setStats: (stats: EditorLiveStats | null) => set({ stats }),
setCursor: (cursor: EditorCursor | null) => set({ cursor }),
setZenMode: (zenMode: boolean) => set({ zenMode }), setZenMode: (zenMode: boolean) => set({ zenMode }),
})) }))
-32
View File
@@ -87,38 +87,6 @@ body {
min-height: 0; min-height: 0;
} }
/* v0.6.0: StatusBar */
#statusbar {
height: var(--statusbar-height);
background: var(--bg);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 16px;
padding: 0 12px;
font-size: 12px;
color: var(--text-tertiary);
flex-shrink: 0;
user-select: none;
}
.statusbar-item {
white-space: nowrap;
}
.statusbar-spacer {
flex: 1;
}
.statusbar-zen {
color: var(--primary);
font-weight: 500;
}
.statusbar-autosave.saving {
color: var(--primary);
}
#main-content { #main-content {
flex: 1; flex: 1;
display: flex; display: flex;