41 lines
1.8 KiB
TypeScript
41 lines
1.8 KiB
TypeScript
import { useStore } from '../../store';
|
|
import { TiptapEditor } from './TiptapEditor';
|
|
import { MoreActions } from './MoreActions';
|
|
import { BookOpen } from 'lucide-react';
|
|
import type { SaveState } from '../../store';
|
|
|
|
function saveLabel(s: SaveState): string {
|
|
if (s === 'saving') return '保存中…';
|
|
if (s === 'error') return '保存失败';
|
|
return '已保存';
|
|
}
|
|
|
|
export function Editor() {
|
|
const currentPath = useStore(s => s.currentPath);
|
|
const title = useStore(s => s.title);
|
|
const saveState = useStore(s => s.saveState);
|
|
if (!currentPath) {
|
|
// B档-8：空状态引导
|
|
return (
|
|
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<div style={{ textAlign: 'center', color: 'var(--text-tertiary)' }}>
|
|
<div style={{ marginBottom: 14, opacity: 0.55 }}><BookOpen size={42} strokeWidth={1.4} /></div>
|
|
<div style={{ fontSize: 15, color: 'var(--text-secondary)', marginBottom: 6 }}>从左侧选择一篇笔记，或新建文档开始</div>
|
|
<div style={{ fontSize: 12, opacity: 0.7 }}>支持 Markdown · 代码高亮 · 公式 · 知识图谱</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
|
<div style={{ padding: '6px 16px', borderBottom: '1px solid var(--control-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<span>{title} <span style={{ opacity: 0.4, fontSize: 12 }}>{currentPath}</span></span>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
|
<span style={{ fontSize: 12, opacity: saveState === 'error' ? 1 : 0.5, color: saveState === 'error' ? '#f88' : 'inherit' }}>{saveLabel(saveState)}</span>
|
|
<MoreActions />
|
|
</div>
|
|
</div>
|
|
<TiptapEditor />
|
|
</div>
|
|
);
|
|
} |