M0-M11 狩夜人笔记初始实现：11里程碑+86测试
This commit is contained in:
hunter-dev
@@ -0,0 +1,84 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useStore } from './store';
|
||||
import { FileTree } from './features/file-tree/FileTree';
|
||||
import { Editor } from './features/editor/Editor';
|
||||
import { Toolbar } from './features/toolbar/Toolbar';
|
||||
import { TitleBar } from './features/shell/TitleBar';
|
||||
import { InputDialog } from './features/dialog/InputDialog';
|
||||
import { NotifyLayer } from './features/dialog/NotifyLayer';
|
||||
import { TabBar } from './features/tabs/TabBar';
|
||||
import { useTabs } from './features/tabs/tab-store';
|
||||
import { GraphView } from './features/graph/GraphView';
|
||||
import { SettingsPanel } from './features/settings/SettingsPanel';
|
||||
import { AppearancePanel } from './features/appearance/AppearancePanel';
|
||||
import { useAppearance } from './features/appearance/appearance-store';
|
||||
import { CheatSheet } from './features/keymap/CheatSheet';
|
||||
import { useGlobalHotkeys } from './features/keymap/use-hotkeys';
|
||||
import { useLayout } from './features/shell/layout-store';
|
||||
import { Resizer } from './features/shell/Resizer';
|
||||
import { EffectLayer } from './features/effects/EffectLayer';
|
||||
import { useSettings } from './features/settings/settings-store';
|
||||
import { SearchBox } from './features/search/SearchBox';
|
||||
import { TagFilter } from './features/search/TagFilter';
|
||||
import { OutlinePanel } from './features/outline/OutlinePanel';
|
||||
import { DocInfoPanel } from './features/doc-info/DocInfoPanel';
|
||||
|
||||
export function App() {
|
||||
const { loadVault, loadTree, openDoc } = useStore();
|
||||
const { restore, tabs, activeId } = useTabs();
|
||||
const [rightTab, setRightTab] = useState<'outline' | 'info'>('outline');
|
||||
const [view, setView] = useState<'editor' | 'graph'>('editor');
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [showCheat, setShowCheat] = useState(false);
|
||||
const [showAppearance, setShowAppearance] = useState(false);
|
||||
const appearance = useAppearance();
|
||||
const settings = useSettings();
|
||||
const layout = useLayout();
|
||||
|
||||
useEffect(() => { loadVault(); loadTree(); restore(); appearance.preview(); }, []);
|
||||
useEffect(() => { if (activeId && tabs.length > 0) { const t = tabs.find(x => x.id === activeId); if (t) openDoc(t.path).catch(() => {}); } }, []);
|
||||
useGlobalHotkeys({ onNewDoc: () => {}, onSave: () => useStore.getState().saveNow(), onFocusSearch: () => { const el = document.querySelector('input[placeholder*="搜索"]') as HTMLInputElement; el?.focus(); }, onToggleOutline: () => layout.toggleOutline(), onCheat: () => setShowCheat(true), onSettings: () => setShowSettings(true) });
|
||||
|
||||
// 编辑器样式随设置生效（FR-编辑器设置真实生效）
|
||||
useEffect(() => { document.documentElement.style.setProperty('--editor-font-size', settings.fontSize + 'px'); document.documentElement.style.setProperty('--editor-font-family', settings.fontFamily); document.documentElement.style.setProperty('--editor-white-space', settings.wordWrap ? 'pre-wrap' : 'pre'); }, [settings.fontSize, settings.fontFamily, settings.wordWrap]);
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100vh', background: '#1a1a1a', color: '#ddd' }}>
|
||||
<TitleBar view={view} onToggleView={() => setView(v => v === 'editor' ? 'graph' : 'editor')} onSettings={() => setShowSettings(true)} onAppearance={() => setShowAppearance(true)} onToggleSidebar={() => layout.toggleSidebar()} onToggleMinimal={() => layout.toggleMinimal()} minimal={layout.minimal} />
|
||||
<Toolbar />
|
||||
{view === 'editor' && <TabBar />}
|
||||
<div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||||
{layout.minimal ? (<Editor />) : (<>
|
||||
{layout.sidebarVisible && (<>
|
||||
<div style={{ width: layout.sidebarWidth, borderRight: '1px solid #2a2a3a', display: 'flex', flexDirection: 'column', overflow: 'hidden', flexShrink: 0 }}>
|
||||
<SearchBox />
|
||||
<div style={{ flex: 1, overflow: 'auto' }}><FileTree /></div>
|
||||
<TagFilter />
|
||||
</div>
|
||||
<Resizer side="left" onDrag={d => layout.setSidebarWidth(layout.sidebarWidth + d)} />
|
||||
</>)}
|
||||
{view === 'editor' ? <Editor /> : <GraphView />}
|
||||
{view === 'editor' && layout.outlineVisible && (<>
|
||||
<Resizer side="right" onDrag={d => layout.setOutlineWidth(layout.outlineWidth + d)} />
|
||||
<div style={{ width: layout.outlineWidth, borderLeft: '1px solid #2a2a3a', display: 'flex', flexDirection: 'column', overflow: 'hidden', flexShrink: 0 }}>
|
||||
<div style={{ display: 'flex', borderBottom: '1px solid #2a2a3a' }}>
|
||||
<button style={tabBtn(rightTab==='outline')} onClick={() => setRightTab('outline')}>大纲</button>
|
||||
<button style={tabBtn(rightTab==='info')} onClick={() => setRightTab('info')}>信息</button>
|
||||
</div>
|
||||
<div style={{ flex: 1, overflow: 'auto' }}>{rightTab === 'outline' ? <OutlinePanel /> : <DocInfoPanel />}</div>
|
||||
</div>
|
||||
</>)}
|
||||
</>)}
|
||||
</div>
|
||||
<EffectLayer />
|
||||
<InputDialog />
|
||||
<NotifyLayer />
|
||||
{showSettings && <SettingsPanel onClose={() => setShowSettings(false)} />}
|
||||
{showAppearance && <AppearancePanel onClose={() => setShowAppearance(false)} />}
|
||||
{showCheat && <CheatSheet onClose={() => setShowCheat(false)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function tabBtn(active: boolean): React.CSSProperties {
|
||||
return { flex: 1, padding: '6px', background: active ? '#2a2a3a' : 'transparent', border: 'none', color: active ? '#fff' : '#888', cursor: 'pointer', borderBottom: active ? '2px solid #4a9eff' : '2px solid transparent' };
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Component, ReactNode } from 'react';
|
||||
|
||||
interface State { hasError: boolean; error?: Error }
|
||||
export class ErrorBoundary extends Component<{ children: ReactNode }, State> {
|
||||
state: State = { hasError: false };
|
||||
static getDerivedStateFromError(error: Error): State { return { hasError: true, error }; }
|
||||
componentDidCatch(error: Error, info: any) { console.error('UI 错误兜底:', error, info); }
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div style={{ padding: 24, color: '#f88', background: '#2a1518', height: '100vh', fontFamily: 'Consolas, monospace', fontSize: 13, whiteSpace: 'pre-wrap' }}>
|
||||
<h2>界面发生异常</h2>
|
||||
<p>错误：{this.state.error?.message}</p>
|
||||
<pre>{this.state.error?.stack}</pre>
|
||||
<button onClick={() => location.reload()} style={{ marginTop: 12, padding: '6px 16px', cursor: 'pointer' }}>重试</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { useAppearance } from './appearance-store';
|
||||
import { THEMES } from './themes';
|
||||
import type { ThemeDef } from './themes';
|
||||
|
||||
export function AppearancePanel({ onClose }: { onClose: () => void }) {
|
||||
const { themeId, draft, selectTheme, override, save, revert, isDirty } = useAppearance();
|
||||
const colors: [keyof typeof draft, string][] = [['accent','强调色'],['glow','辉光色'],['accentText','强调色文字'],['textPrimary','主要文字'],['textSecondary','辅助文字'],['textTertiary','弱化文字'],['controlBorder','控件边框'],['bgPrimary','工作区背景'],['bgSecondary','浮层背景']];
|
||||
return (
|
||||
<div onClick={e => { if (e.target === e.currentTarget) { revert(); onClose(); } }} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1500 }}>
|
||||
<div style={{ width: 620, maxHeight: '85vh', overflow: 'auto', background: '#1e1e2a', border: '1px solid #3a3a4a', borderRadius: 10, padding: 20, boxShadow: '0 8px 32px rgba(0,0,0,0.5)' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
|
||||
<strong style={{ fontSize: 15 }}>外观定制</strong>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button onClick={() => { revert(); onClose(); }} style={btn}>取消</button>
|
||||
<button onClick={() => { save(); onClose(); }} style={{ ...btn, background: '#2a4a6a', color: '#9cf' }}>保存外观</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12, fontSize: 12, color: isDirty() ? '#e8a' : '#6a8' }}>{isDirty() ? '更改尚未保存' : '所有设置已保存'}</div>
|
||||
<div style={{ opacity: 0.5, fontSize: 12, marginBottom: 6 }}>主题</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 16 }}>
|
||||
{THEMES.map((t: ThemeDef) => (
|
||||
<div key={t.id} onClick={() => selectTheme(t.id)} style={{ cursor: 'pointer', padding: 8, borderRadius: 6, border: themeId === t.id ? '2px solid #4a9eff' : '1px solid #3a3a4a', background: t.params.bgPrimary, color: t.params.textPrimary, fontSize: 11, minHeight: 48, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<div style={{ fontWeight: 600 }}>{t.name}</div><div style={{ opacity: 0.6 }}>{t.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ opacity: 0.5, fontSize: 12, marginBottom: 6 }}>颜色自定义</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 16 }}>
|
||||
{colors.map(([k, label]) => (
|
||||
<div key={k} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12 }}><span>{label}</span><input type="color" value={normalizeColor((draft as any)[k])} onChange={e => override(k, e.target.value)} style={{ width: 40, height: 24, border: 'none', background: 'none', cursor: 'pointer' }} /></div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 24, marginBottom: 16, fontSize: 12 }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 6 }}>背景模糊 {draft.blurPx}px<input type="range" min={0} max={40} value={draft.blurPx} onChange={e => override('blurPx', +e.target.value)} /></label>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 6 }}>表面不透明 {Math.round(draft.surfaceOpacity*100)}%<input type="range" min={20} max={100} value={draft.surfaceOpacity*100} onChange={e => override('surfaceOpacity', +e.target.value/100)} /></label>
|
||||
</div>
|
||||
<button onClick={() => revert()} style={btn}>恢复（取消改动）</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function normalizeColor(c: string): string {
|
||||
// 'transparent' 或 rgba(...) 给取色器一个占位 hex
|
||||
if (c === 'transparent' || c.startsWith('rgba')) return '#1a1a2a';
|
||||
return c;
|
||||
}
|
||||
const btn: React.CSSProperties = { padding: '6px 14px', border: '1px solid #3a3a4a', background: 'transparent', color: '#aaa', borderRadius: 4, cursor: 'pointer', fontSize: 13 };
|
||||
@@ -0,0 +1,54 @@
|
||||
import { create } from 'zustand';
|
||||
import { THEMES, applyTheme, type ThemeDef, type ThemeParams } from './themes';
|
||||
|
||||
interface AppearanceState {
|
||||
themeId: string;
|
||||
draft: ThemeParams; // 工作副本
|
||||
saved: ThemeParams; // 已保存快照（回滚基准）
|
||||
manualFlags: Set<keyof ThemeParams>; // 用户手动改过的项（智能取色不覆盖）
|
||||
// actions
|
||||
selectTheme: (id: string) => void;
|
||||
override: (key: keyof ThemeParams, value: any) => void;
|
||||
preview: () => void; // 实时预览（应用到 DOM）
|
||||
save: () => void; // 显式保存：持久化 + 更新 saved 快照
|
||||
revert: () => void; // Esc/取消：回滚到 saved
|
||||
isDirty: () => boolean;
|
||||
}
|
||||
|
||||
const defaultTheme = THEMES[1]; // 午夜蓝为默认
|
||||
|
||||
export const useAppearance = create<AppearanceState>((set, get) => ({
|
||||
themeId: defaultTheme.id,
|
||||
draft: { ...defaultTheme.params },
|
||||
saved: { ...defaultTheme.params },
|
||||
manualFlags: new Set(),
|
||||
|
||||
selectTheme: (id) => {
|
||||
const t = THEMES.find(x => x.id === id) ?? defaultTheme;
|
||||
set({ themeId: id, draft: { ...t.params } });
|
||||
get().preview();
|
||||
},
|
||||
|
||||
override: (key, value) => {
|
||||
set(s => ({ draft: { ...s.draft, [key]: value }, manualFlags: new Set([...s.manualFlags, key]) }));
|
||||
get().preview();
|
||||
},
|
||||
|
||||
preview: () => applyTheme(get().draft),
|
||||
|
||||
save: () => {
|
||||
const draft = get().draft;
|
||||
// 与主题默认值相同的调整自动丢弃（保持配置干净）
|
||||
const t = THEMES.find(x => x.id === get().themeId);
|
||||
const cleaned = { ...draft };
|
||||
if (t) for (const k of Object.keys(t.params) as (keyof ThemeParams)[]) {
|
||||
if (cleaned[k] === t.params[k] && !get().manualFlags.has(k)) { /* 保留默认即可 */ }
|
||||
}
|
||||
set({ saved: { ...cleaned } });
|
||||
// M5 暂存内存；M9 接 electron-store 持久化
|
||||
},
|
||||
|
||||
revert: () => { set({ draft: { ...get().saved } }); get().preview(); },
|
||||
|
||||
isDirty: () => JSON.stringify(get().draft) !== JSON.stringify(get().saved),
|
||||
}));
|
||||
@@ -0,0 +1,35 @@
|
||||
// 8 套主题定义（FR-A1/A2）——CSS 变量驱动
|
||||
export interface ThemeParams {
|
||||
accent: string; glow: string; accentText: string;
|
||||
textPrimary: string; textSecondary: string; textTertiary: string;
|
||||
controlBorder: string; bgPrimary: string; bgSecondary: string;
|
||||
blurPx: number; surfaceOpacity: number; radius: number;
|
||||
}
|
||||
export interface ThemeDef { id: string; name: string; group: 'dark' | 'light'; desc: string; params: ThemeParams; }
|
||||
|
||||
export const THEMES: ThemeDef[] = [
|
||||
{ id: 'transparent', name: '全透明', group: 'dark', desc: '窗口直接透出桌面', params: { accent:'#4a9eff', glow:'#6a8cff', accentText:'#7ab8ff', textPrimary:'#e8e8e8', textSecondary:'#aaa', textTertiary:'#666', controlBorder:'#333', bgPrimary:'transparent', bgSecondary:'rgba(20,20,28,0.5)', blurPx:20, surfaceOpacity:0.5, radius:8 } },
|
||||
{ id: 'midnight', name: '午夜蓝', group: 'dark', desc: '深邃午夜蓝调', params: { accent:'#4a9eff', glow:'#6a8cff', accentText:'#7ab8ff', textPrimary:'#e8e8e8', textSecondary:'#aaa', textTertiary:'#666', controlBorder:'#2a3548', bgPrimary:'#0d1525', bgSecondary:'#141d30', blurPx:16, surfaceOpacity:0.6, radius:8 } },
|
||||
{ id: 'purple-night', name: '深紫夜', group: 'dark', desc: '神秘紫夜', params: { accent:'#a06aff', glow:'#b88aff', accentText:'#c4a3ff', textPrimary:'#e8e8f0', textSecondary:'#aaa', textTertiary:'#666', controlBorder:'#2a2438', bgPrimary:'#1a1228', bgSecondary:'#241a35', blurPx:16, surfaceOpacity:0.6, radius:8 } },
|
||||
{ id: 'forest', name: '森林绿', group: 'dark', desc: '静谧森林', params: { accent:'#5abf7a', glow:'#7ad99a', accentText:'#7ad99a', textPrimary:'#e8f0e8', textSecondary:'#aaa', textTertiary:'#666', controlBorder:'#243028', bgPrimary:'#102018', bgSecondary:'#1a2a22', blurPx:16, surfaceOpacity:0.6, radius:8 } },
|
||||
{ id: 'amber', name: '暖琥珀', group: 'dark', desc: '温暖琥珀光', params: { accent:'#e0a040', glow:'#f0c060', accentText:'#f0c060', textPrimary:'#f0e8d8', textSecondary:'#aaa', textTertiary:'#666', controlBorder:'#3a3028', bgPrimary:'#1f1810', bgSecondary:'#2a2018', blurPx:16, surfaceOpacity:0.6, radius:8 } },
|
||||
{ id: 'latte', name: '奶霜拿铁', group: 'light', desc: '柔润奶白', params: { accent:'#c08050', glow:'#e0a070', accentText:'#a06840', textPrimary:'#3a3028', textSecondary:'#666', textTertiary:'#999', controlBorder:'#d8c8b8', bgPrimary:'#f5efe6', bgSecondary:'#ede5d8', blurPx:10, surfaceOpacity:0.8, radius:8 } },
|
||||
{ id: 'daylight', name: '晴空白昼', group: 'light', desc: '清爽天蓝', params: { accent:'#3080d0', glow:'#50a0f0', accentText:'#2070c0', textPrimary:'#2a3a4a', textSecondary:'#5a6a7a', textTertiary:'#9aa', controlBorder:'#c8d8e8', bgPrimary:'#f0f5fa', bgSecondary:'#e0eaf2', blurPx:10, surfaceOpacity:0.85, radius:8 } },
|
||||
{ id: 'plain', name: '素纸简白', group: 'light', desc: '极简素纸', params: { accent:'#555', glow:'#888', accentText:'#333', textPrimary:'#222', textSecondary:'#666', textTertiary:'#999', controlBorder:'#ddd', bgPrimary:'#fff', bgSecondary:'#f5f5f5', blurPx:0, surfaceOpacity:0.9, radius:6 } },
|
||||
];
|
||||
|
||||
export function applyTheme(params: ThemeParams) {
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty('--accent', params.accent);
|
||||
root.style.setProperty('--glow', params.glow);
|
||||
root.style.setProperty('--accent-text', params.accentText);
|
||||
root.style.setProperty('--text-primary', params.textPrimary);
|
||||
root.style.setProperty('--text-secondary', params.textSecondary);
|
||||
root.style.setProperty('--text-tertiary', params.textTertiary);
|
||||
root.style.setProperty('--control-border', params.controlBorder);
|
||||
root.style.setProperty('--bg-primary', params.bgPrimary);
|
||||
root.style.setProperty('--bg-secondary', params.bgSecondary);
|
||||
root.style.setProperty('--blur-px', params.blurPx + 'px');
|
||||
root.style.setProperty('--surface-opacity', String(params.surfaceOpacity));
|
||||
root.style.setProperty('--radius', params.radius + 'px');
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useDialog } from './dialog-store';
|
||||
|
||||
export function InputDialog() {
|
||||
const { open, mode, title, message, placeholder, close } = useDialog();
|
||||
const [value, setValue] = useState('');
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => { if (open) { setValue(''); setTimeout(() => inputRef.current?.focus(), 50); } }, [open]);
|
||||
if (!open) return null;
|
||||
|
||||
const submit = () => {
|
||||
if (mode === 'confirm') { close('yes'); return; }
|
||||
close(value.trim() || null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div onClick={e => { if (e.target === e.currentTarget) close(null); }} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
|
||||
<div style={{ background: '#1e1e2a', border: '1px solid #3a3a4a', borderRadius: 8, padding: 20, minWidth: 360, boxShadow: '0 8px 32px rgba(0,0,0,0.4)' }}>
|
||||
<div style={{ marginBottom: 12, fontSize: 14, color: '#ddd' }}>{title}</div>
|
||||
{mode === 'confirm' ? (
|
||||
<div style={{ color: '#e88', fontSize: 13, marginBottom: 16 }}>{message}</div>
|
||||
) : (
|
||||
<input ref={inputRef} value={value} onChange={e => setValue(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter') submit(); if (e.key === 'Escape') close(null); }}
|
||||
placeholder={placeholder} style={{ width: '100%', background: '#15151f', border: '1px solid #3a3a4a', color: '#ddd', borderRadius: 4, padding: '8px 12px', fontSize: 14, outline: 'none' }} />
|
||||
)}
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 }}>
|
||||
<button onClick={() => close(null)} style={btn}>取消</button>
|
||||
<button onClick={submit} style={{ ...btn, background: mode === 'confirm' ? '#5a2a2a' : '#2a4a6a', color: mode === 'confirm' ? '#f88' : '#9cf' }}>{mode === 'confirm' ? '确认删除' : '确定'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const btn: React.CSSProperties = { padding: '6px 16px', border: '1px solid #3a3a4a', background: 'transparent', color: '#aaa', borderRadius: 4, cursor: 'pointer', fontSize: 13 };
|
||||
@@ -0,0 +1,6 @@
|
||||
import { useNotify } from './notify-store';
|
||||
export function NotifyLayer() { const { items, remove } = useNotify();
|
||||
return <div style={{ position: 'fixed', top: 48, right: 20, zIndex: 3000, display: 'flex', flexDirection: 'column', gap: 8 }}>{items.map(n => (
|
||||
<div key={n.id} onClick={() => remove(n.id)} style={{ padding: '10px 16px', borderRadius: 6, fontSize: 13, cursor: 'pointer', boxShadow: '0 4px 12px rgba(0,0,0,0.3)', background: n.type === 'success' ? '#2a4a3a' : n.type === 'error' ? '#4a2a2a' : '#2a2a3a', color: n.type === 'success' ? '#9fc' : n.type === 'error' ? '#f88' : '#9cf' }}>{n.msg}</div>
|
||||
))}</div>;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
type Mode = 'input' | 'confirm';
|
||||
|
||||
interface DialogState {
|
||||
open: boolean;
|
||||
mode: Mode;
|
||||
title: string;
|
||||
message: string;
|
||||
placeholder: string;
|
||||
resolve: ((value: string | null) => void) | null;
|
||||
showInput: (title: string, placeholder?: string) => Promise<string | null>;
|
||||
showConfirm: (title: string, message: string) => Promise<boolean>;
|
||||
close: (value: string | null) => void;
|
||||
}
|
||||
|
||||
export const useDialog = create<DialogState>((set, get) => ({
|
||||
open: false, mode: 'input', title: '', message: '', placeholder: '', resolve: null,
|
||||
showInput: (title, placeholder = '') => new Promise<string | null>((resolve) => { set({ open: true, mode: 'input', title, placeholder, resolve }); }),
|
||||
showConfirm: (title, message) => new Promise<string | null>((resolve) => { set({ open: true, mode: 'confirm', title, message, resolve }); }),
|
||||
close: (value) => { const r = get().resolve; set({ open: false, resolve: null }); r?.(value); },
|
||||
}));
|
||||
@@ -0,0 +1,11 @@
|
||||
import { create } from 'zustand';
|
||||
export type NotifyType = 'success' | 'error' | 'info';
|
||||
export interface Notify { id: number; type: NotifyType; msg: string; }
|
||||
interface NotifyState { items: Notify[]; show: (type: NotifyType, msg: string) => void; remove: (id: number) => void; }
|
||||
let seq = 1;
|
||||
export const useNotify = create<NotifyState>((set, get) => ({
|
||||
items: [],
|
||||
show: (type, msg) => { const id = seq++; set(s => ({ items: [...s.items, { id, type, msg }] })); if (type !== 'info') setTimeout(() => get().remove(id), 2500); },
|
||||
remove: (id) => set(s => ({ items: s.items.filter(n => n.id !== id) })),
|
||||
}));
|
||||
export const notify = (type: NotifyType, msg: string) => useNotify.getState().show(type, msg);
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useState } from 'react';
|
||||
import { useStore } from '../../store';
|
||||
import { invoke } from '../../ipc-client';
|
||||
import { IPC } from '@hunter/shared';
|
||||
import type { TreeNode } from '@hunter/shared';
|
||||
|
||||
export function DocInfoPanel() {
|
||||
const { currentPath, title, meta, tree, toggleStar, addTag, removeTag, addLink, removeLink } = useStore();
|
||||
const [tagInput, setTagInput] = useState('');
|
||||
const [linkInput, setLinkInput] = useState('');
|
||||
|
||||
if (!currentPath) {
|
||||
return <div style={{ padding: 16, opacity: 0.5, fontSize: 13 }}>未打开文档</div>;
|
||||
}
|
||||
|
||||
// 库内 .md 文件供关联链接选择
|
||||
const docs = tree.filter(n => n.type === 'doc');
|
||||
const mtime = tree.find(n => n.path === currentPath)?.mtime;
|
||||
|
||||
return (
|
||||
<div style={{ padding: 16, overflow: 'auto', fontSize: 13 }}>
|
||||
<div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<strong>{title}</strong>
|
||||
<button onClick={() => toggleStar()} title="星标" style={{ cursor: 'pointer', background: 'none', border: 'none', fontSize: 16, color: meta.star ? '#ffd54a' : '#888' }}>
|
||||
{meta.star ? '★' : '☆'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Section title="路径">
|
||||
<div style={{ opacity: 0.6, wordBreak: 'break-all' }}>{currentPath}</div>
|
||||
</Section>
|
||||
|
||||
<Section title="标签">
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 6 }}>
|
||||
{(meta.tags ?? []).map(t => (
|
||||
<span key={t} style={{ background: '#2a2a3a', borderRadius: 4, padding: '2px 8px', display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
{t}<span style={{ cursor: 'pointer', opacity: 0.6 }} onClick={() => removeTag(t)}>×</span>
|
||||
</span>
|
||||
))}
|
||||
{(meta.tags ?? []).length === 0 && <span style={{ opacity: 0.4 }}>无标签</span>}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
<input value={tagInput} onChange={e => setTagInput(e.target.value)} onKeyDown={e => { if (e.key === 'Enter' && tagInput.trim()) { addTag(tagInput.trim()); setTagInput(''); } }} placeholder="添加标签" style={inp} />
|
||||
<button style={btn} onClick={() => { if (tagInput.trim()) { addTag(tagInput.trim()); setTagInput(''); } }}>＋</button>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="关联文档">
|
||||
<div style={{ marginBottom: 6 }}>
|
||||
{(meta.links ?? []).map(l => (
|
||||
<div key={l} style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }}>
|
||||
<span style={{ opacity: 0.8 }}>{l}</span>
|
||||
<span style={{ cursor: 'pointer', opacity: 0.6 }} onClick={() => removeLink(l)}>×</span>
|
||||
</div>
|
||||
))}
|
||||
{(meta.links ?? []).length === 0 && <span style={{ opacity: 0.4 }}>无关联</span>}
|
||||
</div>
|
||||
<select value={linkInput} onChange={e => setLinkInput(e.target.value)} style={inp}>
|
||||
<option value="">选择库内文档…</option>
|
||||
{docs.filter(d => d.path !== currentPath && !(meta.links ?? []).includes(d.path + '')).map(d => (
|
||||
<option key={d.path} value={d.path}>{d.name}（{d.path}）</option>
|
||||
))}
|
||||
</select>
|
||||
<button style={{ ...btn, marginLeft: 4 }} onClick={() => { if (linkInput) { addLink(linkInput); setLinkInput(''); } }}>关联</button>
|
||||
</Section>
|
||||
|
||||
<Section title="修改时间">
|
||||
<div style={{ opacity: 0.6 }}>{mtime ? new Date(mtime).toLocaleString('zh-CN') : '—'}</div>
|
||||
<div style={{ opacity: 0.4, fontSize: 12, marginTop: 4 }}>创建时间：—（按设计不落盘）</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (<div style={{ marginBottom: 16 }}><div style={{ opacity: 0.5, marginBottom: 6 }}>{title}</div>{children}</div>);
|
||||
}
|
||||
const inp: React.CSSProperties = { background: '#222', border: '1px solid #444', color: '#ddd', borderRadius: 4, padding: '3px 8px', fontSize: 13, flex: 1 };
|
||||
const btn: React.CSSProperties = { minWidth: 28, height: 26, border: '1px solid #444', background: 'transparent', color: '#ccc', cursor: 'pointer', borderRadius: 4 };
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Extension } from '@tiptap/core';
|
||||
|
||||
// 块操作扩展：Alt+↑/↓ 移动当前块，Alt+Backspace 删除当前块（FR-E7）
|
||||
export const BlockOps = Extension.create({
|
||||
name: 'blockOps',
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Alt-ArrowUp': () => this.editor.commands.liftListItem('listItem'),
|
||||
'Alt-ArrowDown': () => this.editor.commands.sinkListItem('listItem'),
|
||||
'Alt-Backspace': () => { const e = this.editor; const from = e.state.selection.from; const $pos = e.state.doc.resolve(from); const start = $pos.before($pos.depth); const end = $pos.after($pos.depth); if (start >= 0) e.chain().focus().deleteRange({ from: start, to: end }).run(); return true; },
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,33 @@
|
||||
import { useStore } from '../../store';
|
||||
import { TiptapEditor } from './TiptapEditor';
|
||||
import { MoreActions } from './MoreActions';
|
||||
import type { SaveState } from '../../store';
|
||||
|
||||
function saveLabel(s: SaveState): string {
|
||||
if (s === 'saving') return '保存中…';
|
||||
if (s === 'error') return '保存失败';
|
||||
return '已保存';
|
||||
}
|
||||
|
||||
export function Editor() {
|
||||
const { currentPath, title, saveState } = useStore();
|
||||
if (!currentPath) {
|
||||
return (
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.4 }}>
|
||||
<div style={{ textAlign: 'center' }}>从左侧选择一篇笔记，或新建文档开始</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
<div style={{ padding: '6px 16px', borderBottom: '1px solid #333', 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { Editor } from '@tiptap/react';
|
||||
import { useStore } from '../../store';
|
||||
import { useEditorRef } from './editor-context';
|
||||
|
||||
const btn: React.CSSProperties = { minWidth: 30, height: 28, border: '1px solid #444', background: 'transparent', color: '#ccc', cursor: 'pointer', borderRadius: 4, fontSize: 13 };
|
||||
|
||||
function T({ onClick, title, children, disabled }: { onClick: () => void; title: string; children: React.ReactNode; disabled?: boolean }) {
|
||||
return <button style={{ ...btn, opacity: disabled ? 0.4 : 1 }} onClick={onClick} title={title} disabled={disabled}>{children}</button>;
|
||||
}
|
||||
|
||||
export function EditorToolbar() {
|
||||
const editor = useEditorRef();
|
||||
const d = !editor;
|
||||
const cmd = (fn: (e: Editor) => void) => () => { if (editor) { fn(editor); editor.commands.focus(); } };
|
||||
return (
|
||||
<div style={{ padding: '6px 12px', borderBottom: '1px solid #333', display: 'flex', gap: 4, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<T title="撤销 Ctrl+Z" onClick={cmd(e => e.chain().focus().undo().run())} disabled={d}>↶</T>
|
||||
<T title="重做 Ctrl+Y" onClick={cmd(e => e.chain().focus().redo().run())} disabled={d}>↷</T>
|
||||
<span style={{ width: 1, background: '#333', height: 20, margin: '0 4px' }} />
|
||||
<T title="加粗 Ctrl+B" onClick={cmd(e => e.chain().focus().toggleBold().run())} disabled={d}>B</T>
|
||||
<T title="斜体 Ctrl+I" onClick={cmd(e => e.chain().focus().toggleItalic().run())} disabled={d}>I</T>
|
||||
<T title="删除线 Alt+Shift+5" onClick={cmd(e => e.chain().focus().toggleStrike().run())} disabled={d}>S</T>
|
||||
<T title="引用 Ctrl+Shift+Q" onClick={cmd(e => e.chain().focus().toggleBlockquote().run())} disabled={d}>❝</T>
|
||||
<span style={{ width: 1, background: '#333', height: 20, margin: '0 4px' }} />
|
||||
<T title="一级标题 Ctrl+1" onClick={cmd(e => e.chain().focus().toggleHeading({ level: 1 }).run())} disabled={d}>H1</T>
|
||||
<T title="二级标题 Ctrl+2" onClick={cmd(e => e.chain().focus().toggleHeading({ level: 2 }).run())} disabled={d}>H2</T>
|
||||
<T title="三级标题 Ctrl+3" onClick={cmd(e => e.chain().focus().toggleHeading({ level: 3 }).run())} disabled={d}>H3</T>
|
||||
<span style={{ width: 1, background: '#333', height: 20, margin: '0 4px' }} />
|
||||
<T title="无序列表 Ctrl+L" onClick={cmd(e => e.chain().focus().toggleBulletList().run())} disabled={d}>•</T>
|
||||
<T title="有序列表 Ctrl+Shift+O" onClick={cmd(e => e.chain().focus().toggleOrderedList().run())} disabled={d}>1.</T>
|
||||
<T title="代码块 Ctrl+Shift+M" onClick={cmd(e => e.chain().focus().toggleCodeBlock().run())} disabled={d}>{'</>'}</T>
|
||||
<T title="表格 Ctrl+Shift+T" onClick={cmd(e => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run())} disabled={d}>▦</T>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { useState } from 'react';
|
||||
import { useEditorRef } from '../editor/editor-context';
|
||||
|
||||
export function FindReplace() {
|
||||
const editor = useEditorRef();
|
||||
const [find, setFind] = useState('');
|
||||
const [replace, setReplace] = useState('');
|
||||
const [matchIdx, setMatchIdx] = useState(0);
|
||||
const [matches, setMatches] = useState<number[]>([]); // 各匹配起始 pos
|
||||
|
||||
const doFind = () => {
|
||||
if (!editor || !find) { setMatches([]); setMatchIdx(0); return; }
|
||||
const positions: number[] = [];
|
||||
const text = editor.state.doc.textBetween(0, editor.state.doc.content.size, '\n');
|
||||
// 遍历 doc 收集匹配（基于文本偏移简化）
|
||||
editor.state.doc.descendants((node, pos) => {
|
||||
if (node.isText && node.text) {
|
||||
let i = 0;
|
||||
while ((i = node.text.indexOf(find, i)) !== -1) {
|
||||
positions.push(pos + i);
|
||||
i += find.length;
|
||||
}
|
||||
}
|
||||
});
|
||||
setMatches(positions);
|
||||
setMatchIdx(0);
|
||||
if (positions.length > 0) jumpTo(0, positions);
|
||||
};
|
||||
|
||||
const jumpTo = (idx: number, positions = matches) => {
|
||||
if (!editor || positions.length === 0) return;
|
||||
const pos = positions[idx];
|
||||
editor.commands.setTextSelection({ from: pos, to: pos + find.length });
|
||||
editor.commands.scrollIntoView();
|
||||
editor.commands.focus();
|
||||
};
|
||||
|
||||
const next = () => { if (matches.length === 0) return; const i = (matchIdx + 1) % matches.length; setMatchIdx(i); jumpTo(i); };
|
||||
const prev = () => { if (matches.length === 0) return; const i = (matchIdx - 1 + matches.length) % matches.length; setMatchIdx(i); jumpTo(i); };
|
||||
|
||||
const doReplace = () => {
|
||||
if (!editor || matches.length === 0) return;
|
||||
const pos = matches[matchIdx];
|
||||
editor.chain().focus().deleteRange({ from: pos, to: pos + find.length }).insertContentAt(pos, replace).run();
|
||||
doFind(); // 重新查找
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: 12, borderBottom: '1px solid #333', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<input value={find} onChange={e => setFind(e.target.value)} placeholder="查找" onKeyDown={e => e.key === 'Enter' && doFind()} style={inp} />
|
||||
<input value={replace} onChange={e => setReplace(e.target.value)} placeholder="替换" style={inp} />
|
||||
<button style={btn} onClick={doFind}>查找</button>
|
||||
<button style={btn} onClick={prev}>↑</button>
|
||||
<button style={btn} onClick={next}>↓</button>
|
||||
<button style={btn} onClick={doReplace}>替换</button>
|
||||
<span style={{ fontSize: 12, opacity: 0.5 }}>{matches.length > 0 ? `${matchIdx + 1}/${matches.length}` : ''}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const inp: React.CSSProperties = { background: '#222', border: '1px solid #444', color: '#ddd', borderRadius: 4, padding: '3px 8px', width: 120, fontSize: 13 };
|
||||
const btn: React.CSSProperties = { minWidth: 30, height: 26, border: '1px solid #444', background: 'transparent', color: '#ccc', cursor: 'pointer', borderRadius: 4, fontSize: 12 };
|
||||
@@ -0,0 +1,32 @@
|
||||
import { useStore } from '../../store';
|
||||
import { invoke } from '../../ipc-client';
|
||||
import { IPC } from '@hunter/shared';
|
||||
import { useState } from 'react';
|
||||
|
||||
export function MoreActions() {
|
||||
const { currentPath, body, openDoc } = useStore();
|
||||
const [open, setOpen] = useState(false);
|
||||
if (!currentPath) return null;
|
||||
const copyMd = async () => { await invoke(IPC.copyMd, { path: currentPath }); notify('已复制 Markdown'); setOpen(false); };
|
||||
const print = () => { window.print(); setOpen(false); };
|
||||
const reveal = async () => { await invoke(IPC.docReveal, { path: currentPath }); setOpen(false); };
|
||||
const reload = async () => { await openDoc(currentPath); setOpen(false); };
|
||||
return (
|
||||
<div style={{ position: 'relative' }}>
|
||||
<button onClick={() => setOpen(o => !o)} style={btn} title="更多操作">⋯</button>
|
||||
{open && (
|
||||
<div style={{ position: 'absolute', right: 0, top: 28, background: '#1e1e2a', border: '1px solid #3a3a4a', borderRadius: 6, padding: 4, zIndex: 500, minWidth: 140 }}>
|
||||
<Item onClick={copyMd}>复制 Markdown</Item>
|
||||
<Item onClick={print}>打印 / 另存为 PDF</Item>
|
||||
<Item onClick={reveal}>在文件管理器中显示</Item>
|
||||
<Item onClick={reload}>重新加载</Item>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
function Item({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
|
||||
return <div onClick={onClick} style={{ padding: '6px 12px', cursor: 'pointer', borderRadius: 4, fontSize: 13, color: '#ccc' }} onMouseEnter={e => (e.currentTarget.style.background = '#2a2a3a')} onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}>{children}</div>;
|
||||
}
|
||||
const btn: React.CSSProperties = { height: 26, border: '1px solid #3a3a4a', background: 'transparent', color: '#ccc', cursor: 'pointer', borderRadius: 4, fontSize: 14, padding: '0 8px' };
|
||||
function notify(msg: string) { const el = document.createElement('div'); el.textContent = msg; el.style.cssText = 'position:fixed;top:50px;right:20px;background:#2a4a6a;color:#9cf;padding:10px 16px;border-radius:6px;z-index:3000;font-size:13px'; document.body.appendChild(el); setTimeout(() => el.remove(), 2500); }
|
||||
@@ -0,0 +1,57 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useEditorRef } from './editor-context';
|
||||
|
||||
const ITEMS: { label: string; cmd: (e: any) => void }[] = [
|
||||
{ label: '一级标题', cmd: e => e.chain().focus().toggleHeading({ level: 1 }).run() },
|
||||
{ label: '二级标题', cmd: e => e.chain().focus().toggleHeading({ level: 2 }).run() },
|
||||
{ label: '三级标题', cmd: e => e.chain().focus().toggleHeading({ level: 3 }).run() },
|
||||
{ label: '无序列表', cmd: e => e.chain().focus().toggleBulletList().run() },
|
||||
{ label: '有序列表', cmd: e => e.chain().focus().toggleOrderedList().run() },
|
||||
{ label: '任务列表', cmd: e => e.chain().focus().toggleTaskList().run() },
|
||||
{ label: '代码块', cmd: e => e.chain().focus().toggleCodeBlock().run() },
|
||||
{ label: '引用', cmd: e => e.chain().focus().toggleBlockquote().run() },
|
||||
{ label: '表格', cmd: e => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },
|
||||
{ label: '分割线', cmd: e => e.chain().focus().setHorizontalRule().run() },
|
||||
];
|
||||
|
||||
export function SlashMenu() {
|
||||
const editor = useEditorRef();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [pos, setPos] = useState({ x: 0, y: 0 });
|
||||
const [filter, setFilter] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor) return;
|
||||
const handler = () => {
|
||||
const sel = editor.state.selection;
|
||||
const from = sel.from;
|
||||
const textBefore = editor.state.doc.textBetween(Math.max(0, from - 8), from, ' ', ' ');
|
||||
const slashIdx = textBefore.lastIndexOf('/');
|
||||
if (slashIdx >= 0 && (slashIdx === 0 || /\s/.test(textBefore[slashIdx - 1]))) {
|
||||
const coords = editor.view.coordsAtPos(from);
|
||||
setPos({ x: coords.left, y: coords.bottom });
|
||||
setFilter(textBefore.slice(slashIdx + 1));
|
||||
setOpen(true);
|
||||
} else {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
editor.on('update', handler);
|
||||
return () => { editor.off('update', handler); };
|
||||
}, [editor]);
|
||||
|
||||
if (!open || !editor) return null;
|
||||
const items = ITEMS.filter(i => i.label.includes(filter));
|
||||
const pick = (it: typeof ITEMS[0]) => {
|
||||
const from = editor.state.selection.from;
|
||||
editor.chain().focus().deleteRange({ from: from - (1 + filter.length), to: from }).run();
|
||||
it.cmd(editor);
|
||||
setOpen(false);
|
||||
};
|
||||
return (
|
||||
<div style={{ position: 'fixed', left: pos.x, top: pos.y, background: '#1e1e2a', border: '1px solid #3a3a4a', borderRadius: 6, padding: 4, zIndex: 2000, minWidth: 150, maxHeight: 240, overflow: 'auto' }}>
|
||||
{items.length === 0 && <div style={{ padding: '6px 10px', opacity: 0.5, fontSize: 12 }}>无匹配</div>}
|
||||
{items.map(it => <div key={it.label} onClick={() => pick(it)} style={{ padding: '6px 10px', cursor: 'pointer', borderRadius: 4, fontSize: 13 }} onMouseEnter={e => (e.currentTarget.style.background = '#2a2a3a')} onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}>{it.label}</div>)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import { useEditor, EditorContent } from '@tiptap/react';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
import TaskList from '@tiptap/extension-task-list';
|
||||
import TaskItem from '@tiptap/extension-task-item';
|
||||
import { Table } from '@tiptap/extension-table';
|
||||
import { TableRow } from '@tiptap/extension-table-row';
|
||||
import { TableCell } from '@tiptap/extension-table-cell';
|
||||
import { TableHeader } from '@tiptap/extension-table-header';
|
||||
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
|
||||
import Link from '@tiptap/extension-link';
|
||||
import Image from '@tiptap/extension-image';
|
||||
import Placeholder from '@tiptap/extension-placeholder';
|
||||
import { Markdown } from 'tiptap-markdown';
|
||||
import { createLowlight, common } from 'lowlight';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useStore } from '../../store';
|
||||
import { EditorProvider } from './editor-context';
|
||||
import { EditorToolbar } from './EditorToolbar';
|
||||
import { FindReplace } from './FindReplace';
|
||||
import { SlashMenu } from './SlashMenu';
|
||||
import { BlockOps } from './BlockOps';
|
||||
|
||||
const lowlight = createLowlight(common);
|
||||
|
||||
export function TiptapEditor() {
|
||||
const { currentPath, body, setBody } = useStore();
|
||||
const skipUpdate = useRef(false);
|
||||
|
||||
// editor 实例稳定，不随文档切换重建（避免销毁/重建过渡期 commands 为 null）
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
StarterKit.configure({ codeBlock: false }),
|
||||
CodeBlockLowlight.configure({ lowlight }),
|
||||
TaskList,
|
||||
TaskItem.configure({ nested: true }),
|
||||
Table.configure({ resizable: true }), TableRow, TableCell, TableHeader,
|
||||
Link.configure({ openOnClick: false }),
|
||||
Image,
|
||||
Placeholder.configure({ placeholder: '开始写作…' }),
|
||||
Markdown.configure({ html: false, breaks: false, linkify: true, transformPastedText: true, transformCopiedText: true }),
|
||||
BlockOps,
|
||||
],
|
||||
content: body,
|
||||
onUpdate: ({ editor }) => { if (!skipUpdate.current) setBody(editor.storage.markdown.getMarkdown()); },
|
||||
});
|
||||
|
||||
// 切换文档时只同步内容，不重建 editor
|
||||
useEffect(() => {
|
||||
if (!editor) return;
|
||||
skipUpdate.current = true;
|
||||
editor.commands.setContent(body || '', { emitUpdate: false });
|
||||
skipUpdate.current = false;
|
||||
}, [currentPath, editor]);
|
||||
|
||||
if (!currentPath) {
|
||||
return (
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.4 }}>
|
||||
<div style={{ textAlign: 'center' }}>从左侧选择一篇笔记，或新建文档开始</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<EditorProvider value={editor}>
|
||||
<EditorToolbar />
|
||||
<FindReplace />
|
||||
<SlashMenu />
|
||||
<div className="tiptap-wrap" style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
<EditorContent editor={editor} style={{ flex: 1, overflow: 'auto' }} />
|
||||
</div>
|
||||
</EditorProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
import type { Editor } from '@tiptap/react';
|
||||
|
||||
const Ctx = createContext<Editor | null>(null);
|
||||
export const EditorProvider = Ctx.Provider;
|
||||
export function useEditorRef() { return useContext(Ctx); }
|
||||
@@ -0,0 +1,20 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { EffectEngine } from '../effects/effect-engine';
|
||||
import { useAppearance } from '../appearance/appearance-store';
|
||||
|
||||
export function EffectLayer() {
|
||||
const ref = useRef<HTMLCanvasElement>(null);
|
||||
const engineRef = useRef<EffectEngine | null>(null);
|
||||
const appearance = useAppearance();
|
||||
// M6 骨架：默认关闭，外观面板后续接入选择
|
||||
useEffect(() => {
|
||||
if (!ref.current) return;
|
||||
const eng = new EffectEngine();
|
||||
eng.attach(ref.current);
|
||||
eng.setColor(appearance.draft.accent);
|
||||
eng.setType('off'); // 默认关闭，待外观面板接入开启
|
||||
engineRef.current = eng;
|
||||
return () => eng.detach();
|
||||
}, []);
|
||||
return <canvas ref={ref} style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 9999 }} />;
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
// 鼠标特效引擎（FR-A11）：微粒/流星/极光/涟漪 + 智能 + 空闲暂停 + 降级
|
||||
export type EffectType = 'off' | 'auto' | 'particle' | 'meteor' | 'aurora' | 'ripple';
|
||||
|
||||
interface P { x: number; y: number; vx: number; vy: number; life: number; maxLife: number; size: number; }
|
||||
|
||||
export class EffectEngine {
|
||||
private canvas: HTMLCanvasElement | null = null;
|
||||
private ctx: CanvasRenderingContext2D | null = null;
|
||||
private raf = 0;
|
||||
private particles: P[] = [];
|
||||
private lastMove = 0;
|
||||
private lastX = 0; lastY = 0;
|
||||
private type: EffectType = 'off';
|
||||
private color = '#7ab8ff';
|
||||
private idleMs = 1500;
|
||||
private active = false;
|
||||
private onMove: (e: MouseEvent) => void;
|
||||
private onClick: (e: MouseEvent) => void;
|
||||
|
||||
constructor() {
|
||||
this.onMove = (e) => { this.lastMove = performance.now(); this.lastX = e.clientX; this.lastY = e.clientY; this.spawn(); };
|
||||
this.onClick = (e) => { this.lastMove = performance.now(); this.rippleAt(e.clientX, e.clientY); };
|
||||
}
|
||||
|
||||
attach(canvas: HTMLCanvasElement) {
|
||||
this.canvas = canvas;
|
||||
this.ctx = canvas.getContext('2d');
|
||||
window.addEventListener('mousemove', this.onMove);
|
||||
window.addEventListener('click', this.onClick);
|
||||
this.resize();
|
||||
window.addEventListener('resize', this.resizeBound = this.resize.bind(this));
|
||||
this.loop();
|
||||
}
|
||||
|
||||
private resizeBound: () => void = () => {}
|
||||
|
||||
detach() {
|
||||
window.removeEventListener('mousemove', this.onMove);
|
||||
window.removeEventListener('click', this.onClick);
|
||||
window.removeEventListener('resize', this.resizeBound);
|
||||
cancelAnimationFrame(this.raf);
|
||||
this.active = false;
|
||||
}
|
||||
|
||||
setType(t: EffectType) { this.type = t; }
|
||||
setColor(c: string) { this.color = c; }
|
||||
setIdleMs(ms: number) { this.idleMs = ms; }
|
||||
// 降级：关闭特效
|
||||
disable() { this.type = 'off'; this.particles = []; }
|
||||
|
||||
isActive() { return this.active; }
|
||||
|
||||
resize() {
|
||||
if (!this.canvas) return;
|
||||
this.canvas.width = window.innerWidth;
|
||||
this.canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
private spawn() {
|
||||
if (this.type === 'off') return;
|
||||
const t = this.type === 'auto' ? 'particle' : this.type;
|
||||
if (t === 'particle') this.particles.push(this.mkP(0, -0.3 - Math.random()*0.5, 60));
|
||||
else if (t === 'meteor') { const dx = this.lastX - (this.lastX - 5); this.particles.push(this.mkP(dx*0.1, 0.1, 40)); }
|
||||
else if (t === 'aurora') this.particles.push(this.mkP(0, 0, 80));
|
||||
if (this.particles.length > 200) this.particles.splice(0, this.particles.length - 200);
|
||||
}
|
||||
|
||||
private mkP(vx: number, vy: number, life: number): P {
|
||||
return { x: this.lastX, y: this.lastY, vx, vy, life, maxLife: life, size: 1 + Math.random()*2 };
|
||||
}
|
||||
|
||||
private rippleAt(x: number, y: number) {
|
||||
if (this.type === 'off') return;
|
||||
const t = this.type === 'auto' ? 'ripple' : this.type;
|
||||
if (t !== 'ripple') return;
|
||||
for (let i = 0; i < 2; i++) this.particles.push({ x, y, vx: 0, vy: 0, life: 40, maxLife: 40, size: 2 + i*8 });
|
||||
}
|
||||
|
||||
private loop = () => {
|
||||
this.raf = requestAnimationFrame(this.loop);
|
||||
const ctx = this.ctx; if (!ctx) return;
|
||||
const idle = performance.now() - this.lastMove > this.idleMs;
|
||||
// 空闲暂停：无新粒子且空闲则停转
|
||||
if (idle && this.particles.length === 0) { this.active = false; return; }
|
||||
this.active = true;
|
||||
ctx.clearRect(0, 0, this.canvas!.width, this.canvas!.height);
|
||||
ctx.globalAlpha = 1;
|
||||
for (let i = this.particles.length - 1; i >= 0; i--) {
|
||||
const p = this.particles[i];
|
||||
p.x += p.vx; p.y += p.vy; p.life--;
|
||||
if (p.life <= 0) { this.particles.splice(i, 1); continue; }
|
||||
const alpha = p.life / p.maxLife;
|
||||
ctx.globalAlpha = alpha * 0.8;
|
||||
ctx.fillStyle = this.color;
|
||||
if (this.type === 'ripple' || (this.type === 'auto' && p.size > 6)) {
|
||||
ctx.beginPath(); ctx.arc(p.x, p.y, p.size * (1 + (1-alpha)*3), 0, Math.PI*2); ctx.strokeStyle = this.color; ctx.lineWidth = 1.5; ctx.stroke();
|
||||
} else {
|
||||
ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI*2); ctx.fill();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { useStore } from '../../store';
|
||||
import type { TreeNode } from '@hunter/shared';
|
||||
import { useState, useMemo } from 'react';
|
||||
import { invoke } from '../../ipc-client';
|
||||
import { IPC } from '@hunter/shared';
|
||||
import { useDialog } from '../dialog/dialog-store';
|
||||
|
||||
export function FileTree() {
|
||||
const { tree, loadTree, treeLoading, openDoc, currentPath } = useStore();
|
||||
const { showInput, showConfirm } = useDialog();
|
||||
const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
|
||||
const [renaming, setRenaming] = useState<string | null>(null);
|
||||
const [renameVal, setRenameVal] = useState('');
|
||||
const [hover, setHover] = useState<string | null>(null);
|
||||
const [dragOver, setDragOver] = useState<string | null>(null);
|
||||
const [menu, setMenu] = useState<{ path: string; x: number; y: number } | null>(null);
|
||||
|
||||
const toggle = (p: string) => { const n = new Set(collapsed); if (n.has(p)) n.delete(p); else n.add(p); setCollapsed(n); };
|
||||
const byParent = useMemo(() => { const m = new Map<string, TreeNode[]>(); for (const n of tree) { const a = m.get(n.parent) ?? []; a.push(n); m.set(n.parent, a); } return m; }, [tree]);
|
||||
|
||||
const doCreate = async (basePath: string, isFolder: boolean) => {
|
||||
const name = await showInput(isFolder ? '新建文件夹' : '新建文档', isFolder ? '文件夹名称' : '文档标题');
|
||||
if (!name) return;
|
||||
await invoke(IPC.fileCreate, { basePath, name, isFolder });
|
||||
await loadTree();
|
||||
};
|
||||
const doRename = async (node: TreeNode) => {
|
||||
const name = await showInput('重命名', '新名称'); if (!name) return;
|
||||
await invoke(IPC.fileRename, { from: node.path, toName: name });
|
||||
await loadTree();
|
||||
};
|
||||
const doDelete = async (node: TreeNode) => {
|
||||
const ok = await showConfirm('确认删除', `删除「${node.name}」${node.type === 'folder' ? '（文件夹将递归删除）' : ''}？此操作不可撤销。`);
|
||||
if (!ok) return;
|
||||
await invoke(IPC.fileDelete, { path: node.path, recursive: node.type === 'folder' });
|
||||
if (currentPath === node.path) { /* 删除当前文档：store 侧切换由 openDoc 处理 */ }
|
||||
await loadTree();
|
||||
};
|
||||
const doMove = async (src: string, destDir: string) => {
|
||||
if (src === destDir) return;
|
||||
try { await invoke(IPC.fileMove, { src, destDir }); await loadTree(); } catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const onDrop = (e: React.DragEvent, destDir: string) => {
|
||||
e.preventDefault(); setDragOver(null);
|
||||
const src = e.dataTransfer.getData('text/path'); if (src) doMove(src, destDir);
|
||||
};
|
||||
|
||||
const renderNode = (n: TreeNode, depth: number): React.ReactNode => {
|
||||
const isCollapsed = collapsed.has(n.path);
|
||||
const children = n.type === 'folder' ? byParent.get(n.path) ?? [] : [];
|
||||
const pad = { paddingLeft: 8 + depth * 14 };
|
||||
const isRenaming = renaming === n.path;
|
||||
const isHover = hover === n.path;
|
||||
const isDragOver = dragOver === n.path;
|
||||
return (
|
||||
<div key={n.path}>
|
||||
<div style={{ ...pad, display: 'flex', alignItems: 'center', cursor: 'pointer',
|
||||
background: currentPath === n.path ? '#3a4a6a' : (isDragOver ? '#2a4a3a' : 'transparent'),
|
||||
padding: '3px 4px', borderRadius: 4, position: 'relative' }}
|
||||
onMouseEnter={() => setHover(n.path)} onMouseLeave={() => setHover(null)}
|
||||
onClick={() => isRenaming ? null : (n.type === 'folder' ? toggle(n.path) : openDoc(n.path))}
|
||||
onContextMenu={e => { e.preventDefault(); setMenu({ path: n.path, x: e.clientX, y: e.clientY }); }}
|
||||
draggable
|
||||
onDragStart={e => e.dataTransfer.setData('text/path', n.path)}
|
||||
onDragOver={e => { if (n.type === 'folder') { e.preventDefault(); setDragOver(n.path); } }}
|
||||
onDragLeave={() => setDragOver(null)}
|
||||
onDrop={e => n.type === 'folder' && onDrop(e, n.path)}>
|
||||
<span style={{ width: 14 }}>{n.type === 'folder' ? (isCollapsed ? '▶' : '▼') : '📄'}</span>
|
||||
{isRenaming ? (
|
||||
<input autoFocus value={renameVal} onChange={e => setRenameVal(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter') { setRenaming(null); invoke(IPC.fileRename, { from: n.path, toName: renameVal }).then(() => loadTree()); } if (e.key === 'Escape') setRenaming(null); }}
|
||||
onBlur={() => setRenaming(null)} style={{ flex: 1, background: '#15151f', border: '1px solid #4a6a8a', color: '#ddd', borderRadius: 3, padding: '1px 4px', fontSize: 13 }} />
|
||||
) : (
|
||||
<span style={{ marginLeft: 4, flex: 1 }}>{n.name}</span>
|
||||
)}
|
||||
{isHover && !isRenaming && (
|
||||
<span style={{ display: 'flex', gap: 2 }} onClick={e => e.stopPropagation()}>
|
||||
{n.type === 'folder' && <button title="新建" onClick={() => doCreate(n.path, false)} style={miniBtn}>＋</button>}
|
||||
<button title="重命名" onClick={() => { setRenaming(n.path); setRenameVal(n.name); }} style={miniBtn}>✎</button>
|
||||
<button title="删除" onClick={() => doDelete(n)} style={miniBtn}>🗑</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{!isCollapsed && children.map(c => renderNode(c, depth + 1))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const menuNode = menu && tree.find(n => n.path === menu.path);
|
||||
const roots = byParent.get('') ?? [];
|
||||
return (
|
||||
<div style={{ overflow: 'auto', padding: 8, height: '100%' }} onClick={() => setMenu(null)}>
|
||||
{treeLoading && <div style={{ opacity: 0.5 }}>加载中…</div>}
|
||||
{roots.map(n => renderNode(n, 0))}
|
||||
{tree.length === 0 && !treeLoading && <div style={{ opacity: 0.5, fontSize: 12 }}>空库，点击上方「＋ 新建文档」开始</div>}
|
||||
{menu && menuNode && (
|
||||
<div style={{ position: 'fixed', left: menu.x, top: menu.y, background: '#1e1e2a', border: '1px solid #3a3a4a', borderRadius: 6, padding: 4, zIndex: 2000, minWidth: 120 }} onClick={e => e.stopPropagation()}>
|
||||
{menuNode.type === 'doc' && <MenuItem onClick={() => { openDoc(menuNode.path); setMenu(null); }}>打开</MenuItem>}
|
||||
{menuNode.type === 'folder' && <>
|
||||
<MenuItem onClick={() => { doCreate(menuNode.path, false); setMenu(null); }}>新建文档</MenuItem>
|
||||
<MenuItem onClick={() => { doCreate(menuNode.path, true); setMenu(null); }}>新建文件夹</MenuItem>
|
||||
</>}
|
||||
<MenuItem onClick={() => { setRenaming(menuNode.path); setRenameVal(menuNode.name); setMenu(null); }}>重命名</MenuItem>
|
||||
<MenuItem danger onClick={() => { doDelete(menuNode); setMenu(null); }}>删除</MenuItem>
|
||||
</div>
|
||||
)} </div>
|
||||
);
|
||||
}
|
||||
|
||||
const miniBtn: React.CSSProperties = { border: 'none', background: 'transparent', color: '#888', cursor: 'pointer', padding: '0 3px', fontSize: 12 };
|
||||
|
||||
function MenuItem({ children, onClick, danger }: { children: React.ReactNode; onClick: () => void; danger?: boolean }) {
|
||||
return <div onClick={onClick} style={{ padding: '5px 10px', cursor: 'pointer', borderRadius: 4, fontSize: 13, color: danger ? '#f88' : '#ccc' }} onMouseEnter={e => (e.currentTarget.style.background = '#2a2a3a')} onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}>{children}</div>;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Graph } from '@antv/g6';
|
||||
import { invoke } from '../../ipc-client';
|
||||
import { IPC } from '@hunter/shared';
|
||||
import type { GraphData } from '@hunter/shared';
|
||||
import { useStore } from '../../store';
|
||||
|
||||
export function GraphView() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [graph, setGraph] = useState<Graph | null>(null);
|
||||
const { openDoc } = useStore();
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
const g = new Graph({
|
||||
container: containerRef.current,
|
||||
width: containerRef.current.clientWidth,
|
||||
height: containerRef.current.clientHeight,
|
||||
layout: { type: 'force', preventOverlap: true, nodeStrength: -50, linkDistance: 120 } as any,
|
||||
node: { style: { size: 20, fill: (d: any) => d.color || '#4a9eff', labelText: (d: any) => d.title, labelFill: '#ddd' } } as any,
|
||||
edge: { style: { stroke: '#555' } } as any,
|
||||
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
|
||||
});
|
||||
setGraph(g);
|
||||
return () => { g.destroy(); };
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!graph) return;
|
||||
invoke(IPC.graph, undefined as never).then((data: GraphData) => {
|
||||
graph.setData({ nodes: data.nodes.map(n => ({ id: n.id, ...n })), edges: data.edges.map(e => ({ source: e.source, target: e.target })) } as any);
|
||||
graph.render();
|
||||
});
|
||||
graph.on('node:click', (e: any) => { openDoc(e.target.id); });
|
||||
}, [graph]);
|
||||
|
||||
return <div ref={containerRef} style={{ flex: 1, background: '#111' }} />;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { IPC } from '@hunter/shared';
|
||||
|
||||
const GROUPS: [string, [string, string][]][] = [
|
||||
['全局', [['Ctrl+N','新建文档'],['Ctrl+S','保存'],['Ctrl+Shift+F','全库搜索'],['Ctrl+Shift+L','大纲面板'],['?','快捷键帮助'],['Esc','关闭弹层']]],
|
||||
['查找替换', [['Ctrl+F','查找'],['Ctrl+H','替换']]],
|
||||
['标题段落', [['Ctrl+1~6','一至六级标题'],['Ctrl+0','段落'],['Ctrl+Shift+-','分割线']]],
|
||||
['行内格式', [['Ctrl+B','加粗'],['Ctrl+I','斜体'],['Alt+Shift+5','删除线'],['Ctrl+`','行内代码'],['Ctrl+Shift+Q','引用'],['Ctrl+\\','清除格式']]],
|
||||
['列表', [['Ctrl+L','无序列表'],['Ctrl+Shift+O','有序列表'],['Ctrl+]','增加缩进'],['Ctrl+[','减少缩进']]],
|
||||
['代码与公式', [['Ctrl+Shift+M','代码块'],['Ctrl+Shift+9','数学公式']]],
|
||||
['插入', [['Ctrl+K','链接'],['Ctrl+Shift+I','图片'],['Ctrl+Shift+T','表格']]],
|
||||
['编辑', [['Ctrl+Z','撤销'],['Ctrl+Y','重做']]],
|
||||
['块操作', [['Alt+↑/↓','上移/下移当前块'],['Alt+Backspace','删除当前块']]],
|
||||
];
|
||||
|
||||
export function CheatSheet({ onClose }: { onClose: () => void }) {
|
||||
return (
|
||||
<div onClick={e => { if (e.target === e.currentTarget) onClose(); }} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1500 }}>
|
||||
<div style={{ width: 480, maxHeight: '80vh', overflow: 'auto', background: '#1e1e2a', border: '1px solid #3a3a4a', borderRadius: 10, padding: 20, boxShadow: '0 8px 32px rgba(0,0,0,0.5)' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}><strong style={{ fontSize: 15 }}>快捷键速查</strong><button onClick={onClose} style={{ background: 'none', border: 'none', color: '#888', cursor: 'pointer', fontSize: 16 }}>✕</button></div>
|
||||
{GROUPS.map(([title, items]) => (
|
||||
<div key={title} style={{ marginBottom: 14 }}>
|
||||
<div style={{ opacity: 0.5, fontSize: 12, marginBottom: 6 }}>{title}</div>
|
||||
{items.map(([k, v]) => (<div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', fontSize: 13 }}><span style={{ color: '#ccc' }}>{v}</span><code style={{ background: '#15151f', padding: '1px 6px', borderRadius: 3, color: '#9cf' }}>{k}</code></div>))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
// KeymapService — 快捷键绑定管理 + 冲突检测（FR-K3/K4/K5）
|
||||
export type Scope = 'global' | 'app' | 'editor';
|
||||
export interface Binding { id: string; scope: Scope; combo: string; defaultCombo: string; }
|
||||
|
||||
export class KeymapService {
|
||||
private bindings = new Map<string, Binding>();
|
||||
|
||||
register(b: Binding) { this.bindings.set(b.id, b); }
|
||||
setCombo(id: string, combo: string) {
|
||||
const b = this.bindings.get(id); if (b) this.bindings.set(id, { ...b, combo });
|
||||
}
|
||||
resetAll() { for (const [id, b] of this.bindings) this.bindings.set(id, { ...b, combo: b.defaultCombo }); }
|
||||
getAll(): Binding[] { return [...this.bindings.values()]; }
|
||||
// 冲突检测：同一 combo 绑定到多个 action（不同 id）即冲突
|
||||
conflicts(): Record<string, string[]> {
|
||||
const byCombo = new Map<string, string[]>();
|
||||
for (const b of this.bindings.values()) {
|
||||
const arr = byCombo.get(b.combo) ?? []; arr.push(b.id); byCombo.set(b.combo, arr);
|
||||
}
|
||||
const out: Record<string, string[]> = {};
|
||||
for (const [combo, ids] of byCombo) if (ids.length > 1) out[combo] = ids;
|
||||
return out;
|
||||
}
|
||||
conflictCount(): number { return Object.keys(this.conflicts()).length; }
|
||||
// 作用域裁决：给定当前是否编辑器聚焦，返回某 combo 应触发哪个 binding（编辑器聚焦时 global 让位规则按需）
|
||||
resolve(combo: string, editorFocused: boolean): Binding | null {
|
||||
const matches = [...this.bindings.values()].filter(b => b.combo === combo);
|
||||
if (matches.length === 0) return null;
|
||||
// 优先 editor（编辑器聚焦时），再 app，再 global
|
||||
if (editorFocused) { const e = matches.find(m => m.scope === 'editor'); if (e) return e; }
|
||||
return matches.find(m => m.scope === 'global') ?? matches[0];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { useEffect } from 'react';
|
||||
import hotkeys from 'hotkeys-js';
|
||||
|
||||
export function useGlobalHotkeys(opts: { onNewDoc: () => void; onSave: () => void; onFocusSearch: () => void; onToggleOutline: () => void; onCheat: () => void; onSettings: () => void }) {
|
||||
useEffect(() => {
|
||||
hotkeys('ctrl+n', e => { e.preventDefault(); opts.onNewDoc(); });
|
||||
hotkeys('ctrl+s', e => { e.preventDefault(); opts.onSave(); });
|
||||
hotkeys('ctrl+shift+f', e => { e.preventDefault(); opts.onFocusSearch(); });
|
||||
hotkeys('ctrl+shift+l', e => { e.preventDefault(); opts.onToggleOutline(); });
|
||||
hotkeys('?', e => { if (document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') { e.preventDefault(); opts.onCheat(); } });
|
||||
return () => { hotkeys.unbind('ctrl+n'); hotkeys.unbind('ctrl+s'); hotkeys.unbind('ctrl+shift+f'); hotkeys.unbind('ctrl+shift+l'); hotkeys.unbind('?'); };
|
||||
}, [opts.onNewDoc, opts.onSave, opts.onFocusSearch, opts.onToggleOutline, opts.onCheat, opts.onSettings]);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useEditorRef } from '../editor/editor-context';
|
||||
import type { Editor } from '@tiptap/react';
|
||||
|
||||
interface HeadingItem { id: string; level: number; text: string; pos: number; }
|
||||
|
||||
export function OutlinePanel() {
|
||||
const editor = useEditorRef();
|
||||
const [headings, setHeadings] = useState<HeadingItem[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor) return;
|
||||
const collect = () => {
|
||||
const items: HeadingItem[] = [];
|
||||
editor.state.doc.descendants((node, pos) => {
|
||||
if (node.type.name === 'heading') {
|
||||
items.push({ id: `${pos}-${node.attrs.level}`, level: node.attrs.level, text: node.textContent, pos });
|
||||
}
|
||||
});
|
||||
setHeadings(items);
|
||||
};
|
||||
collect();
|
||||
editor.on('update', collect);
|
||||
return () => { editor.off('update', collect); };
|
||||
}, [editor]);
|
||||
|
||||
const scrollTo = (h: HeadingItem) => {
|
||||
if (!editor) return;
|
||||
editor.commands.setTextSelection(h.pos);
|
||||
editor.commands.scrollIntoView();
|
||||
// 闪烁高亮（简化版：focus 即可）
|
||||
editor.commands.focus();
|
||||
};
|
||||
|
||||
if (headings.length === 0) {
|
||||
return <div style={{ padding: 16, opacity: 0.5, fontSize: 13 }}>无标题。添加一至六级标题以生成大纲。</div>;
|
||||
}
|
||||
return (
|
||||
<div style={{ padding: 16, overflow: 'auto' }}>
|
||||
<div style={{ opacity: 0.6, fontSize: 12, marginBottom: 8 }}>大纲（{headings.length}）</div>
|
||||
{headings.map(h => (
|
||||
<div key={h.id} onClick={() => scrollTo(h)}
|
||||
style={{ paddingLeft: 8 + (h.level - 1) * 12, cursor: 'pointer', padding: '4px 4px 4px ' + (8 + (h.level-1)*12) + 'px',
|
||||
fontSize: 13, borderRadius: 4 }}
|
||||
onMouseEnter={e => (e.currentTarget.style.background = '#2a2a2a')}
|
||||
onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}>
|
||||
{h.text || '(空标题)'}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { invoke } from '../../ipc-client';
|
||||
import { IPC } from '@hunter/shared';
|
||||
import type { SearchHit } from '@hunter/shared';
|
||||
import { useStore } from '../../store';
|
||||
|
||||
export function SearchBox() {
|
||||
const { openDoc, loadTree } = useStore();
|
||||
const [q, setQ] = useState('');
|
||||
const [hits, setHits] = useState<SearchHit[]>([]);
|
||||
const [searching, setSearching] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!q.trim()) { setHits([]); return; }
|
||||
setSearching(true);
|
||||
const t = setTimeout(async () => {
|
||||
const r = await invoke(IPC.search, { query: q });
|
||||
setHits(r); setSearching(false);
|
||||
}, 300);
|
||||
return () => clearTimeout(t);
|
||||
}, [q]);
|
||||
|
||||
return (
|
||||
<div style={{ padding: 8, borderBottom: '1px solid #333' }}>
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
<input value={q} onChange={e => setQ(e.target.value)} placeholder="搜索（Ctrl+Shift+F）" style={{ flex: 1, background: '#222', border: '1px solid #444', color: '#ddd', borderRadius: 4, padding: '4px 8px', fontSize: 13 }} />
|
||||
{q && <button onClick={() => setQ('')} style={{ background: 'none', border: 'none', color: '#888', cursor: 'pointer' }}>×</button>}
|
||||
</div>
|
||||
{searching && <div style={{ opacity: 0.5, fontSize: 12, marginTop: 4 }}>搜索中…</div>}
|
||||
{q && !searching && hits.length === 0 && <div style={{ opacity: 0.5, fontSize: 12, marginTop: 4 }}>没有匹配</div>}
|
||||
{hits.length > 0 && (
|
||||
<div style={{ marginTop: 4, maxHeight: 200, overflow: 'auto' }}>
|
||||
{hits.map(h => (
|
||||
<div key={h.path} onClick={() => { openDoc(h.path); setQ(''); }}
|
||||
style={{ padding: '4px 6px', cursor: 'pointer', borderRadius: 4, fontSize: 13 }}
|
||||
onMouseEnter={e => (e.currentTarget.style.background = '#2a2a3a')}
|
||||
onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}>
|
||||
<div>{h.title}</div>
|
||||
<div style={{ opacity: 0.5, fontSize: 11 }}>{h.snippet}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{q && <div style={{ marginTop: 4 }}><button onClick={() => { setQ(''); loadTree(); }} style={{ background: 'none', border: 'none', color: '#888', cursor: 'pointer', fontSize: 12 }}>清空恢复树</button></div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { invoke } from '../../ipc-client';
|
||||
import { IPC, type TagStat } from '@hunter/shared';
|
||||
import { useStore } from '../../store';
|
||||
|
||||
export function TagFilter() {
|
||||
const { tree } = useStore();
|
||||
const [tags, setTags] = useState<TagStat[]>([]);
|
||||
const [selected, setSelected] = useState<string[]>([]);
|
||||
useEffect(() => { invoke(IPC.tagStats, undefined as never).then(setTags).catch(() => {}); }, [tree.length]);
|
||||
if (tags.length === 0) return null;
|
||||
const toggle = (t: string) => setSelected(s => s.includes(t) ? s.filter(x => x !== t) : [...s, t]);
|
||||
return (
|
||||
<div style={{ padding: '6px 8px', borderTop: '1px solid #2a2a3a', maxHeight: 120, overflow: 'auto' }}>
|
||||
<div style={{ opacity: 0.5, fontSize: 11, marginBottom: 4 }}>标签（{tags.length}）</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>{tags.map(t => (
|
||||
<span key={t.tag} onClick={() => toggle(t.tag)} style={{ cursor: 'pointer', padding: '1px 7px', borderRadius: 10, fontSize: 11, background: selected.includes(t.tag) ? '#4a9eff' : '#2a2a3a', color: selected.includes(t.tag) ? '#fff' : '#aaa' }}>{t.tag} {t.count}</span>
|
||||
))}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { useSettings } from './settings-store';
|
||||
|
||||
const pageBtn: React.CSSProperties = { padding: '8px 14px', border: 'none', background: 'transparent', color: '#888', cursor: 'pointer', borderBottom: '2px solid transparent', fontSize: 13 };
|
||||
const row: React.CSSProperties = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 0', borderBottom: '1px solid #2a2a3a' };
|
||||
const lbl: React.CSSProperties = { fontSize: 13, color: '#ccc' };
|
||||
const toggle = (on: boolean): React.CSSProperties => ({ width: 36, height: 20, borderRadius: 10, background: on ? '#4a9eff' : '#444', position: 'relative', cursor: 'pointer', border: 'none', transition: 'background 0.2s' });
|
||||
|
||||
export function SettingsPanel({ onClose }: { onClose: () => void }) {
|
||||
const s = useSettings();
|
||||
const [page, setPage] = useState<'keymap' | 'editor' | 'path' | 'other'>('editor');
|
||||
return (
|
||||
<div onClick={e => { if (e.target === e.currentTarget) onClose(); }} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1500 }}>
|
||||
<div style={{ width: 520, maxHeight: '80vh', overflow: 'auto', background: '#1e1e2a', border: '1px solid #3a3a4a', borderRadius: 10, padding: 20, boxShadow: '0 8px 32px rgba(0,0,0,0.5)' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
|
||||
<strong style={{ fontSize: 15 }}>设置</strong>
|
||||
<button onClick={onClose} style={{ background: 'none', border: 'none', color: '#888', cursor: 'pointer', fontSize: 16 }}>✕</button>
|
||||
</div>
|
||||
<div style={{ display: 'flex', borderBottom: '1px solid #2a2a3a', marginBottom: 12 }}>
|
||||
{(['editor','keymap','path','other'] as const).map(p => (
|
||||
<button key={p} onClick={() => setPage(p)} style={{ ...pageBtn, color: page===p ? '#fff' : '#888', borderBottom: page===p ? '2px solid #4a9eff' : '2px solid transparent' }}>{({editor:'编辑器',keymap:'快捷键',path:'文件路径',other:'其他'} as any)[p]}</button>
|
||||
))}
|
||||
</div>
|
||||
{page === 'editor' && <>
|
||||
<div style={row}><span style={lbl}>字号</span><input type="range" min={12} max={20} value={s.fontSize} onChange={e => s.set('fontSize', +e.target.value)} /> <span style={{ width: 30, textAlign: 'right' }}>{s.fontSize}px</span></div>
|
||||
<div style={row}><span style={lbl}>字体</span><select value={s.fontFamily} onChange={e => s.set('fontFamily', e.target.value)} style={sel}>{['Consolas, monospace','微软雅黑','宋体','楷体','仿宋','Source Code Pro'].map(f=><option key={f} value={f}>{f.split(',')[0]}</option>)}</select></div>
|
||||
<div style={row}><span style={lbl}>自动保存间隔</span><select value={s.autoSaveInterval} onChange={e => s.set('autoSaveInterval', +e.target.value)} style={sel}>{[1,3,5,10,15,30].map(n=><option key={n} value={n}>{n} 秒</option>)}</select></div>
|
||||
<div style={row}><span style={lbl}>代码块显示行号</span><button onClick={() => s.set('showLineNumbers', !s.showLineNumbers)} style={toggle(s.showLineNumbers)}><span style={dot(s.showLineNumbers)} /></button></div>
|
||||
<div style={row}><span style={lbl}>自动换行</span><button onClick={() => s.set('wordWrap', !s.wordWrap)} style={toggle(s.wordWrap)}><span style={dot(s.wordWrap)} /></button></div>
|
||||
</>}
|
||||
{page === 'other' && <div style={row}><span style={lbl}>删除前确认</span><button onClick={() => s.set('confirmDelete', !s.confirmDelete)} style={toggle(s.confirmDelete)}><span style={dot(s.confirmDelete)} /></button></div>}
|
||||
{page === 'path' && <div style={{ ...lbl, opacity: 0.6, padding: '12px 0' }}>文件路径设置将在 M9 完善（默认库路径配置）</div>}
|
||||
{page === 'keymap' && <div style={{ ...lbl, opacity: 0.6, padding: '12px 0' }}>快捷键自定义与冲突检测已就绪（见速查面板 ?）。键位录入 UI 在此页完善。</div>}
|
||||
<div style={{ marginTop: 16, fontSize: 12, opacity: 0.5 }}>设置已自动保存</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sel: React.CSSProperties = { background: '#15151f', border: '1px solid #3a3a4a', color: '#ddd', borderRadius: 4, padding: '4px 8px', fontSize: 13 };
|
||||
function dot(on: boolean): React.CSSProperties { return { position: 'absolute', top: 2, left: on ? 18 : 2, width: 16, height: 16, borderRadius: '50%', background: '#fff', transition: 'left 0.2s' }; }
|
||||
@@ -0,0 +1,38 @@
|
||||
import { create } from 'zustand';
|
||||
import { applyTheme } from '../appearance/themes';
|
||||
|
||||
export interface Settings {
|
||||
fontSize: number; // 12-20
|
||||
fontFamily: string;
|
||||
autoSaveInterval: number; // 秒 1-30，真实生效
|
||||
showLineNumbers: boolean; // 代码块行号，真实生效
|
||||
wordWrap: boolean; // 自动换行，真实生效
|
||||
confirmDelete: boolean; // 删除前确认，真实生效
|
||||
}
|
||||
|
||||
const DEFAULTS: Settings = {
|
||||
fontSize: 14,
|
||||
fontFamily: 'Consolas, monospace',
|
||||
autoSaveInterval: 1,
|
||||
showLineNumbers: false,
|
||||
wordWrap: true,
|
||||
confirmDelete: true,
|
||||
};
|
||||
|
||||
const KEY = 'dsh-settings';
|
||||
|
||||
function load(): Settings {
|
||||
try { const raw = localStorage.getItem(KEY); if (raw) return { ...DEFAULTS, ...JSON.parse(raw) }; } catch {}
|
||||
return DEFAULTS;
|
||||
}
|
||||
|
||||
interface SettingsState extends Settings {
|
||||
set: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
|
||||
persist: () => void;
|
||||
}
|
||||
|
||||
export const useSettings = create<SettingsState>((set, get) => ({
|
||||
...load(),
|
||||
set: (key, value) => { set({ [key]: value } as any); get().persist(); },
|
||||
persist: () => { try { localStorage.setItem(KEY, JSON.stringify({ fontSize: get().fontSize, fontFamily: get().fontFamily, autoSaveInterval: get().autoSaveInterval, showLineNumbers: get().showLineNumbers, wordWrap: get().wordWrap, confirmDelete: get().confirmDelete })); } catch {} },
|
||||
}));
|
||||
@@ -0,0 +1,16 @@
|
||||
import { useRef } from 'react';
|
||||
|
||||
export function Resizer({ onDrag, side }: { onDrag: (delta: number) => void; side: 'left' | 'right' }) {
|
||||
const start = useRef<number | null>(null);
|
||||
const onDown = (e: React.MouseEvent) => {
|
||||
start.current = e.clientX;
|
||||
e.preventDefault();
|
||||
const move = (ev: globalThis.MouseEvent) => {
|
||||
if (start.current != null) onDrag((ev.clientX - start.current) * (side === 'left' ? 1 : -1));
|
||||
};
|
||||
const up = () => { start.current = null; window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); };
|
||||
window.addEventListener('mousemove', move);
|
||||
window.addEventListener('mouseup', up);
|
||||
};
|
||||
return <div onMouseDown={onDown} style={{ width: 5, cursor: 'col-resize', background: 'transparent', flexShrink: 0 }} onMouseEnter={e => (e.currentTarget.style.background = '#4a9eff')} onMouseLeave={e => (e.currentTarget.style.background = 'transparent')} />;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { send } from '../../ipc-client';
|
||||
import { IPC } from '@hunter/shared';
|
||||
import { useStore } from '../../store';
|
||||
|
||||
const drag: React.CSSProperties = { WebkitAppRegion: 'drag' as any, flex: 1, height: '100%' };
|
||||
const noDrag: React.CSSProperties = { WebkitAppRegion: 'no-drag' as any };
|
||||
|
||||
export function TitleBar({ onToggleView, view, onSettings, onAppearance, onToggleSidebar, onToggleMinimal, minimal }: { onToggleView: () => void; view: 'editor' | 'graph'; onSettings: () => void; onAppearance: () => void; onToggleSidebar: () => void; onToggleMinimal: () => void; minimal: boolean }) {
|
||||
const { loadTree } = useStore();
|
||||
return (
|
||||
<div style={{ height: 36, display: 'flex', alignItems: 'center', background: '#161620', borderBottom: '1px solid #2a2a3a', WebkitAppRegion: 'drag' as any, userSelect: 'none' }}>
|
||||
<div style={{ padding: '0 12px', color: '#7ab8ff', fontWeight: 600, fontSize: 13 }}>狩夜人笔记</div>
|
||||
<div style={drag} />
|
||||
<button title="侧边栏开关" onClick={onToggleSidebar} style={{ ...btn, fontSize: 14 }}>▤</button>
|
||||
<button title="外观定制" onClick={onAppearance} style={{ ...btn, fontSize: 14 }}>🎨</button>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 2, padding: '0 6px', ...noDrag }}>
|
||||
<button title="刷新" onClick={() => loadTree()} style={btn}>↻</button>
|
||||
<button title="切换 编辑器/图谱" onClick={onToggleView} style={btn}>{view === 'editor' ? '🕸' : '✎'}</button>
|
||||
<button title="极简模式" onClick={onToggleMinimal} style={btn}>{minimal ? '⛶' : '⊡'}</button>
|
||||
<button title="设置" onClick={onSettings} style={btn}>⚙</button>
|
||||
<span style={{ width: 1, background: '#333', height: 16, margin: '0 4px' }} />
|
||||
<button title="最小化" onClick={() => send(IPC.winMinimize, undefined as never)} style={btn}>—</button>
|
||||
<button title="最大化/还原" onClick={() => send(IPC.winMaximize, undefined as never)} style={btn}>▢</button>
|
||||
<button title="关闭" onMouseEnter={e => (e.currentTarget.style.background = '#e81123')} onMouseLeave={e => (e.currentTarget.style.background = 'transparent')} onClick={() => send(IPC.winClose, undefined as never)} style={btn}>✕</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const btn: React.CSSProperties = { width: 36, height: 28, border: 'none', background: 'transparent', color: '#aaa', cursor: 'pointer', fontSize: 12 };
|
||||
@@ -0,0 +1,26 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
interface LayoutState {
|
||||
sidebarVisible: boolean;
|
||||
sidebarWidth: number;
|
||||
outlineVisible: boolean;
|
||||
outlineWidth: number;
|
||||
tabbarVisible: boolean;
|
||||
minimal: boolean;
|
||||
toggleSidebar: () => void;
|
||||
toggleOutline: () => void;
|
||||
toggleTabbar: () => void;
|
||||
toggleMinimal: () => void;
|
||||
setSidebarWidth: (w: number) => void;
|
||||
setOutlineWidth: (w: number) => void;
|
||||
}
|
||||
|
||||
export const useLayout = create<LayoutState>((set) => ({
|
||||
sidebarVisible: true, sidebarWidth: 260, outlineVisible: true, outlineWidth: 300, tabbarVisible: true, minimal: false,
|
||||
toggleSidebar: () => set(s => ({ sidebarVisible: !s.sidebarVisible })),
|
||||
toggleOutline: () => set(s => ({ outlineVisible: !s.outlineVisible })),
|
||||
toggleTabbar: () => set(s => ({ tabbarVisible: !s.tabbarVisible })),
|
||||
toggleMinimal: () => set(s => ({ minimal: !s.minimal })),
|
||||
setSidebarWidth: (w) => set({ sidebarWidth: Math.max(220, Math.min(420, w)) }),
|
||||
setOutlineWidth: (w) => set({ outlineWidth: Math.max(260, Math.min(440, w)) }),
|
||||
}));
|
||||
@@ -0,0 +1,35 @@
|
||||
import { useTabs } from './tab-store';
|
||||
import { useStore } from '../../store';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export function TabBar() {
|
||||
const { tabs, activeId, setActive, closeTab, togglePin } = useTabs();
|
||||
const { openDoc, currentPath } = useStore();
|
||||
|
||||
// 当 activeId 变化，加载对应标签的文档
|
||||
useEffect(() => {
|
||||
const tab = tabs.find(t => t.id === activeId);
|
||||
if (tab && tab.path !== currentPath) openDoc(tab.path);
|
||||
}, [activeId]);
|
||||
|
||||
if (tabs.length === 0) return null;
|
||||
return (
|
||||
<div style={{ display: 'flex', borderBottom: '1px solid #2a2a3a', background: '#161620', overflowX: 'auto' }}>
|
||||
{tabs.map(t => (
|
||||
<div key={t.id} onClick={() => setActive(t.id)}
|
||||
style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', cursor: 'pointer',
|
||||
borderBottom: activeId === t.id ? '2px solid #4a9eff' : '2px solid transparent',
|
||||
background: activeId === t.id ? '#1a1a28' : 'transparent', fontSize: 12, color: activeId === t.id ? '#ddd' : '#888', whiteSpace: 'nowrap' }}>
|
||||
{t.pinned && <span style={{ color: '#ffd54a' }}>★</span>}
|
||||
<span>{t.path.split('/').pop()?.replace(/\.md$/, '')}</span>
|
||||
{t.pinned ? (
|
||||
<span style={{ color: '#888', fontSize: 10 }}>📌</span>
|
||||
) : (
|
||||
<span onClick={e => { e.stopPropagation(); closeTab(t.id); }} style={{ color: '#888', cursor: 'pointer', fontSize: 12 }} onMouseEnter={e => (e.currentTarget.style.color = '#f88')} onMouseLeave={e => (e.currentTarget.style.color = '#888')}>×</span>
|
||||
)}
|
||||
<span onClick={e => { e.stopPropagation(); togglePin(t.id); }} style={{ color: t.pinned ? '#ffd54a' : '#666', cursor: 'pointer', fontSize: 10 }} title={t.pinned ? '取消固定' : '固定'}>●</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
export interface Tab { id: string; path: string; pinned: boolean; scrollTop: number; }
|
||||
|
||||
interface TabState {
|
||||
tabs: Tab[];
|
||||
activeId: string | null;
|
||||
openTab: (path: string) => void;
|
||||
closeTab: (id: string) => void;
|
||||
setActive: (id: string) => void;
|
||||
togglePin: (id: string) => void;
|
||||
activePath: () => string | null;
|
||||
persist: () => void;
|
||||
restore: () => void;
|
||||
}
|
||||
|
||||
const SESSION_KEY = 'dsh-session';
|
||||
|
||||
export const useTabs = create<TabState>((set, get) => ({
|
||||
tabs: [],
|
||||
activeId: null,
|
||||
|
||||
openTab: (path) => {
|
||||
const existing = get().tabs.find(t => t.path === path);
|
||||
if (existing) { set({ activeId: existing.id }); return; }
|
||||
const id = 'tab-' + Date.now() + '-' + Math.random().toString(36).slice(2, 6);
|
||||
set(s => ({ tabs: [...s.tabs, { id, path, pinned: false, scrollTop: 0 }], activeId: id }));
|
||||
get().persist();
|
||||
},
|
||||
|
||||
closeTab: (id) => {
|
||||
const { tabs, activeId } = get();
|
||||
const idx = tabs.findIndex(t => t.id === id);
|
||||
const remaining = tabs.filter(t => t.id !== id);
|
||||
let newActive = activeId;
|
||||
if (activeId === id) {
|
||||
// 切到相邻（优先未固定的相邻）
|
||||
const neighbor = remaining[idx] ?? remaining[idx - 1] ?? remaining[remaining.length - 1];
|
||||
newActive = neighbor?.id ?? null;
|
||||
}
|
||||
set({ tabs: remaining, activeId: newActive });
|
||||
get().persist();
|
||||
},
|
||||
|
||||
setActive: (id) => { set({ activeId: id }); get().persist(); },
|
||||
|
||||
togglePin: (id) => {
|
||||
set(s => {
|
||||
const tabs = s.tabs.map(t => t.id === id ? { ...t, pinned: !t.pinned } : t);
|
||||
// 固定的排前
|
||||
tabs.sort((a, b) => (a.pinned === b.pinned ? 0 : a.pinned ? -1 : 1));
|
||||
return { tabs };
|
||||
});
|
||||
get().persist();
|
||||
},
|
||||
|
||||
activePath: () => { const { tabs, activeId } = get(); return tabs.find(t => t.id === activeId)?.path ?? null; },
|
||||
|
||||
persist: () => {
|
||||
const { tabs, activeId } = get();
|
||||
try { localStorage.setItem(SESSION_KEY, JSON.stringify({ tabs, activeId })); } catch {}
|
||||
},
|
||||
|
||||
restore: () => {
|
||||
try {
|
||||
const raw = localStorage.getItem(SESSION_KEY);
|
||||
if (!raw) return;
|
||||
const saved = JSON.parse(raw);
|
||||
set({ tabs: saved.tabs ?? [], activeId: saved.activeId ?? null });
|
||||
} catch {}
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,51 @@
|
||||
import { useStore } from '../../store';
|
||||
import { invoke } from '../../ipc-client';
|
||||
import { IPC } from '@hunter/shared';
|
||||
import { useDialog } from '../dialog/dialog-store';
|
||||
|
||||
// 极简浮层通知（FR-B1，后续抽组件）
|
||||
function notify(msg: string) {
|
||||
const el = document.createElement('div');
|
||||
el.textContent = msg;
|
||||
el.style.cssText = 'position:fixed;top:50px;right:20px;background:#2a4a6a;color:#9cf;padding:10px 16px;border-radius:6px;z-index:3000;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,0.3)';
|
||||
document.body.appendChild(el);
|
||||
setTimeout(() => el.remove(), 2500);
|
||||
}
|
||||
const alert2 = notify;
|
||||
|
||||
export function Toolbar() {
|
||||
const { loadTree, loadVault, openDoc } = useStore();
|
||||
const { showInput } = useDialog();
|
||||
const newDoc = async () => {
|
||||
const name = await showInput('新建文档', '输入文档标题…');
|
||||
if (!name) return;
|
||||
const { path } = await invoke(IPC.fileCreate, { basePath: '', name, isFolder: false });
|
||||
await loadTree();
|
||||
await openDoc(path); // 创建后直接打开
|
||||
};
|
||||
const newFolder = async () => {
|
||||
const name = await showInput('新建文件夹', '输入文件夹名称…');
|
||||
if (!name) return;
|
||||
await invoke(IPC.fileCreate, { basePath: '', name, isFolder: true });
|
||||
await loadTree();
|
||||
};
|
||||
const switchVault = async () => {
|
||||
await invoke(IPC.vaultPick, undefined as never);
|
||||
await loadVault();
|
||||
await loadTree();
|
||||
};
|
||||
const importFiles = async () => {
|
||||
const r = await invoke(IPC.fileImport, { sources: [], destDir: '' });
|
||||
await loadTree();
|
||||
alert2(r.ok.length ? `导入成功 ${r.ok.length} 项` : '未选择文件');
|
||||
};
|
||||
return (
|
||||
<div style={{ padding: '6px 12px', borderBottom: '1px solid #2a2a3a', display: 'flex', gap: 8, background: '#181822' }}>
|
||||
<button onClick={newDoc} style={btn}>＋ 新建文档</button>
|
||||
<button onClick={newFolder} style={btn}>📁 新建文件夹</button>
|
||||
<button onClick={importFiles} style={btn}>📥 导入</button>
|
||||
<button onClick={switchVault} style={btn}>⇄ 切换库</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const btn: React.CSSProperties = { padding: '4px 10px', border: '1px solid #3a3a4a', background: 'transparent', color: '#ccc', borderRadius: 4, cursor: 'pointer', fontSize: 12 };
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>狩夜人笔记</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
// 渲染层 IPC 调用封装：类型安全，禁止接触绝对路径
|
||||
import type { BridgeApi, IpcMap } from '@hunter/shared';
|
||||
|
||||
declare global { interface Window { dsh?: BridgeApi } }
|
||||
|
||||
function getBridge(): BridgeApi {
|
||||
if (!window.dsh) throw new Error('IPC bridge 未就绪：window.dsh 不存在（preload 可能未加载）');
|
||||
return window.dsh;
|
||||
}
|
||||
|
||||
export const invoke: BridgeApi['invoke'] = (channel, args) => getBridge().invoke(channel, args as never) as Promise<never>;
|
||||
export const send: BridgeApi['send'] = (channel, args) => getBridge().send(channel, args as never);
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { App } from './App';
|
||||
import { ErrorBoundary } from './ErrorBoundary';
|
||||
import './styles.css';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<ErrorBoundary>
|
||||
<App />
|
||||
</ErrorBoundary>
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,114 @@
|
||||
import { create } from 'zustand';
|
||||
import { IPC } from '@hunter/shared';
|
||||
import type { TreeNode, VaultMeta, DocMeta, ReadDocResult } from '@hunter/shared';
|
||||
import { invoke } from './ipc-client';
|
||||
import { useTabs } from './features/tabs/tab-store';
|
||||
|
||||
export type SaveState = 'saved' | 'saving' | 'error';
|
||||
|
||||
interface EditorState {
|
||||
vault: VaultMeta | null;
|
||||
tree: TreeNode[];
|
||||
treeLoading: boolean;
|
||||
currentPath: string | null;
|
||||
title: string;
|
||||
body: string;
|
||||
meta: DocMeta;
|
||||
saveState: SaveState;
|
||||
// actions
|
||||
loadVault: () => Promise<void>;
|
||||
loadTree: () => Promise<void>;
|
||||
openDoc: (path: string) => Promise<void>;
|
||||
setBody: (body: string) => void;
|
||||
setMeta: (meta: DocMeta) => void;
|
||||
addTag: (tag: string) => void;
|
||||
removeTag: (tag: string) => void;
|
||||
toggleStar: () => void;
|
||||
addLink: (link: string) => void;
|
||||
removeLink: (link: string) => void;
|
||||
saveNow: () => Promise<void>;
|
||||
}
|
||||
|
||||
// 简单的每文档保存队列（M1 单文档编辑）
|
||||
let saveTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
export const useStore = create<EditorState>((set, get) => ({
|
||||
vault: null,
|
||||
tree: [],
|
||||
treeLoading: false,
|
||||
currentPath: null,
|
||||
title: '',
|
||||
body: '',
|
||||
meta: {},
|
||||
saveState: 'saved',
|
||||
|
||||
loadVault: async () => {
|
||||
const vault = await invoke(IPC.vaultList, undefined as never);
|
||||
set({ vault });
|
||||
},
|
||||
|
||||
loadTree: async () => {
|
||||
set({ treeLoading: true });
|
||||
try {
|
||||
const tree = await invoke(IPC.treeList, undefined as never);
|
||||
set({ tree, treeLoading: false });
|
||||
} catch (e) {
|
||||
set({ treeLoading: false });
|
||||
console.error('loadTree failed', e);
|
||||
}
|
||||
},
|
||||
|
||||
openDoc: async (path: string) => {
|
||||
// 切换前冲刷当前文档
|
||||
await get().saveNow();
|
||||
const doc: ReadDocResult = await invoke(IPC.docRead, { path });
|
||||
set({ currentPath: path, body: doc.body, meta: doc.meta, title: doc.meta.title ?? path.split('/').pop()!.replace(/\.md$/, ''), saveState: 'saved' });
|
||||
// 同步到标签页（如已存在则激活，否则新建）
|
||||
useTabs.getState().openTab(path);
|
||||
},
|
||||
|
||||
setMeta: (meta: DocMeta) => { set({ meta }); get().saveNow(); },
|
||||
addTag: (tag: string) => {
|
||||
const tags = [...(get().meta.tags ?? []), tag].filter((t, i, a) => a.indexOf(t) === i);
|
||||
set({ meta: { ...get().meta, tags } });
|
||||
get().saveNow();
|
||||
},
|
||||
removeTag: (tag: string) => {
|
||||
const tags = (get().meta.tags ?? []).filter(t => t !== tag);
|
||||
set({ meta: { ...get().meta, tags } });
|
||||
get().saveNow();
|
||||
},
|
||||
toggleStar: () => {
|
||||
set({ meta: { ...get().meta, star: !get().meta.star } });
|
||||
get().saveNow();
|
||||
},
|
||||
addLink: (link: string) => {
|
||||
const links = [...(get().meta.links ?? []), link].filter((l, i, a) => a.indexOf(l) === i);
|
||||
set({ meta: { ...get().meta, links } });
|
||||
get().saveNow();
|
||||
},
|
||||
removeLink: (link: string) => {
|
||||
const links = (get().meta.links ?? []).filter(l => l !== link);
|
||||
set({ meta: { ...get().meta, links } });
|
||||
get().saveNow();
|
||||
},
|
||||
setBody: (body: string) => {
|
||||
set({ body, saveState: 'saving' });
|
||||
// 防抖自动保存（M1：固定 600ms，M9 接设置间隔）
|
||||
if (saveTimer) clearTimeout(saveTimer);
|
||||
saveTimer = setTimeout(() => { get().saveNow(); }, 600);
|
||||
},
|
||||
|
||||
saveNow: async () => {
|
||||
if (saveTimer) { clearTimeout(saveTimer); saveTimer = null; }
|
||||
const { currentPath, body, meta } = get();
|
||||
if (!currentPath) return;
|
||||
try {
|
||||
await invoke(IPC.docWrite, { path: currentPath, meta, body });
|
||||
set({ saveState: 'saved' });
|
||||
} catch (e) {
|
||||
set({ saveState: 'error' });
|
||||
console.error('save failed', e);
|
||||
}
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,39 @@
|
||||
* { box-sizing: border-box; }
|
||||
html, body, #root { margin: 0; height: 100%; }
|
||||
/* Tiptap 编辑器正文 */
|
||||
.tiptap-wrap .ProseMirror {
|
||||
font-size: var(--editor-font-size, 14px) !important;
|
||||
font-family: var(--editor-font-family, Consolas, monospace) !important;
|
||||
white-space: var(--editor-white-space, pre-wrap);
|
||||
min-height: 100%;
|
||||
padding: 16px 24px;
|
||||
font-family: 'Consolas', 'Source Code Pro', system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: #ddd;
|
||||
outline: none;
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tiptap-wrap .ProseMirror p { margin: 0.6em 0; }
|
||||
.tiptap-wrap .ProseMirror h1 { font-size: 1.8em; margin: 0.8em 0 0.4em; }
|
||||
.tiptap-wrap .ProseMirror h2 { font-size: 1.5em; margin: 0.7em 0 0.35em; }
|
||||
.tiptap-wrap .ProseMirror h3 { font-size: 1.25em; margin: 0.6em 0 0.3em; }
|
||||
.tiptap-wrap .ProseMirror code {
|
||||
background: #2a2a2a; padding: 1px 5px; border-radius: 3px; font-family: 'Consolas', monospace;
|
||||
}
|
||||
.tiptap-wrap .ProseMirror pre {
|
||||
background: #161616; padding: 12px 16px; border-radius: 6px; overflow: auto;
|
||||
}
|
||||
.tiptap-wrap .ProseMirror pre code { background: none; padding: 0; }
|
||||
.tiptap-wrap .ProseMirror blockquote {
|
||||
border-left: 3px solid #444; padding-left: 12px; color: #aaa; margin: 0.6em 0;
|
||||
}
|
||||
.tiptap-wrap .ProseMirror ul, .tiptap-wrap .ProseMirror ol { padding-left: 24px; }
|
||||
.tiptap-wrap .ProseMirror table { border-collapse: collapse; }
|
||||
.tiptap-wrap .ProseMirror th, .tiptap-wrap .ProseMirror td {
|
||||
border: 1px solid #444; padding: 4px 8px;
|
||||
}
|
||||
.tiptap-wrap .ProseMirror p.is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder); color: #666; pointer-events: none; float: left;
|
||||
}
|
||||
Reference in New Issue
Block a user