refactor: 移除自定义状态栏 — 使用 MetonaEditor 自带底栏
- editor 自带底栏(wordCount: true)已显示字符数/词数/行数/阅读时间 - 删除自定义 StatusBar 组件、editorStore 的 stats/cursor 状态与事件绑定 - 保留 zenMode 同步(Toolbar 专注按钮消费);自动保存状态由 Toolbar 按钮显示
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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 状态同步 → editorStore(Toolbar 消费)
|
||||||
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: 状态栏 — 展示文档统计 / 光标位置 / 自动保存状态。
|
|
||||||
* 数据来自 editorStore(Editor 组件绑定 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-based,column 为 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', () => {
|
||||||
|
|||||||
@@ -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 }),
|
||||||
}))
|
}))
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user