243 lines
8.5 KiB
TypeScript
243 lines
8.5 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
||
import { api, DocTreeNode, DocContent } from './api';
|
||
import { DocTree } from './components/DocTree';
|
||
import { Editor } from './components/Editor';
|
||
import { SearchBar } from './components/SearchBar';
|
||
import { VersionHistory } from './components/VersionHistory';
|
||
import AgentChat from './components/AgentChat';
|
||
|
||
type View = 'editor' | 'history';
|
||
|
||
export default function App() {
|
||
const agentApiBase = window.location.protocol === 'file:' ? 'http://127.0.0.1:3890' : '';
|
||
const [tree, setTree] = useState<DocTreeNode[]>([]);
|
||
const [currentDoc, setCurrentDoc] = useState<DocContent | null>(null);
|
||
const [currentPath, setCurrentPath] = useState<string>('');
|
||
const [view, setView] = useState<View>('editor');
|
||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [agentPanelOpen, setAgentPanelOpen] = useState(true);
|
||
const [importing, setImporting] = useState(false);
|
||
const [importMessage, setImportMessage] = useState<string | null>(null);
|
||
|
||
const refreshTree = useCallback(async () => {
|
||
try {
|
||
const t = await api.getTree();
|
||
setTree(t);
|
||
} catch (err: any) {
|
||
setError(`加载文档树失败: ${err.message}`);
|
||
}
|
||
}, []);
|
||
|
||
const openDoc = useCallback(async (docPath: string) => {
|
||
setLoading(true);
|
||
setError(null);
|
||
try {
|
||
const doc = await api.getDoc(docPath);
|
||
setCurrentDoc(doc);
|
||
setCurrentPath(docPath);
|
||
setView('editor');
|
||
} catch (err: any) {
|
||
setError(`加载文档失败: ${err.message}`);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const saveDoc = useCallback(async (title: string, body: string) => {
|
||
if (!currentPath) return;
|
||
setLoading(true);
|
||
try {
|
||
const doc = await api.updateDoc(currentPath, title, body);
|
||
setCurrentDoc(doc);
|
||
await refreshTree();
|
||
} catch (err: any) {
|
||
setError(`保存失败: ${err.message}`);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [currentPath, refreshTree]);
|
||
|
||
const createDoc = useCallback(async (parentPath: string) => {
|
||
const name = prompt('文档文件名（不含 .md）：');
|
||
if (!name) return;
|
||
const title = prompt('文档标题：') || name;
|
||
const docPath = parentPath ? `${parentPath}/${name}.md` : `${name}.md`;
|
||
try {
|
||
const doc = await api.createDoc(docPath, title, `# ${title}\n\n在这里开始写作...\n`);
|
||
setCurrentDoc(doc);
|
||
setCurrentPath(docPath);
|
||
await refreshTree();
|
||
} catch (err: any) {
|
||
setError(`创建失败: ${err.message}`);
|
||
}
|
||
}, [refreshTree]);
|
||
|
||
const deleteDoc = useCallback(async () => {
|
||
if (!currentPath) return;
|
||
if (!confirm(`确认删除 ${currentPath}？`)) return;
|
||
try {
|
||
await api.deleteDoc(currentPath);
|
||
setCurrentDoc(null);
|
||
setCurrentPath('');
|
||
await refreshTree();
|
||
} catch (err: any) {
|
||
setError(`删除失败: ${err.message}`);
|
||
}
|
||
}, [currentPath, refreshTree]);
|
||
|
||
const importFolder = useCallback(async () => {
|
||
const bridge = (window as any).hololake?.knowledge;
|
||
if (!bridge?.importFolder) {
|
||
setError('本地文件夹导入只在 HoloLake 桌面 App 中提供');
|
||
return;
|
||
}
|
||
setImporting(true);
|
||
setError(null);
|
||
setImportMessage(null);
|
||
try {
|
||
const result = await bridge.importFolder();
|
||
if (result.cancelled) return;
|
||
if (!result.imported) {
|
||
setImportMessage(`没有找到可导入的文档；已跳过 ${result.skipped || 0} 个文件`);
|
||
return;
|
||
}
|
||
await refreshTree();
|
||
if (result.firstDocument) await openDoc(result.firstDocument);
|
||
const details = [
|
||
`已导入 ${result.imported} 篇文档`,
|
||
result.assets ? `${result.assets} 个图片资源` : '',
|
||
result.skipped ? `跳过 ${result.skipped} 个暂不支持的文件` : '',
|
||
result.failed?.length ? `${result.failed.length} 个文件失败` : '',
|
||
].filter(Boolean).join(' · ');
|
||
setImportMessage(details);
|
||
} catch (err: any) {
|
||
setError(`导入失败: ${err.message}`);
|
||
} finally {
|
||
setImporting(false);
|
||
}
|
||
}, [openDoc, refreshTree]);
|
||
|
||
useEffect(() => {
|
||
refreshTree();
|
||
}, [refreshTree]);
|
||
|
||
return (
|
||
<div className="kb-app">
|
||
{/* 顶栏 */}
|
||
<header className="kb-header">
|
||
<div className="kb-header-left">
|
||
<button
|
||
className="kb-btn-icon"
|
||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||
title={sidebarOpen ? '收起侧栏' : '展开侧栏'}
|
||
>
|
||
{sidebarOpen ? '◀' : '▶'}
|
||
</button>
|
||
<div className="kb-brand-mark" aria-hidden="true" />
|
||
<div>
|
||
<h1 className="kb-title">HoloLake</h1>
|
||
<div className="kb-subtitle">知识空间</div>
|
||
</div>
|
||
</div>
|
||
<div className="kb-header-center">
|
||
<SearchBar onSelect={openDoc} />
|
||
</div>
|
||
<div className="kb-header-right">
|
||
{currentDoc && (
|
||
<>
|
||
<button
|
||
className={`kb-btn-tab ${view === 'editor' ? 'active' : ''}`}
|
||
onClick={() => setView('editor')}
|
||
>
|
||
编辑
|
||
</button>
|
||
<button
|
||
className={`kb-btn-tab ${view === 'history' ? 'active' : ''}`}
|
||
onClick={() => setView('history')}
|
||
>
|
||
历史
|
||
</button>
|
||
<button className="kb-btn-icon kb-btn-danger" onClick={deleteDoc} title="删除">
|
||
🗑
|
||
</button>
|
||
</>
|
||
)}
|
||
<button
|
||
className={`kb-btn-tab kb-btn-agent ${agentPanelOpen ? 'active' : ''}`}
|
||
onClick={() => setAgentPanelOpen(!agentPanelOpen)}
|
||
title={agentPanelOpen ? '收起 Agent' : '展开 Agent'}
|
||
>
|
||
HoloLake 助手
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
{/* 主体 */}
|
||
<div className="kb-body">
|
||
{/* 侧栏 */}
|
||
{sidebarOpen && (
|
||
<aside className="kb-sidebar">
|
||
<div className="kb-workspace-label">当前空间</div>
|
||
<div className="kb-sidebar-actions">
|
||
<button className="kb-btn-import" onClick={importFolder} disabled={importing}>
|
||
<span className="kb-btn-import-icon">↥</span>
|
||
{importing ? '正在导入…' : '导入本地文件夹'}
|
||
</button>
|
||
<button className="kb-btn-new" onClick={() => createDoc('')}>
|
||
<span>＋</span> 新建页面
|
||
</button>
|
||
</div>
|
||
{importMessage && <div className="kb-import-message">{importMessage}</div>}
|
||
<div className="kb-tree-heading">页面</div>
|
||
<DocTree
|
||
nodes={tree}
|
||
currentPath={currentPath}
|
||
onSelect={openDoc}
|
||
onCreate={createDoc}
|
||
/>
|
||
</aside>
|
||
)}
|
||
|
||
{/* 内容区 */}
|
||
<main className="kb-content">
|
||
{error && (
|
||
<div className="kb-error">
|
||
{error}
|
||
<button onClick={() => setError(null)}>✕</button>
|
||
</div>
|
||
)}
|
||
{loading && <div className="kb-loading">加载中...</div>}
|
||
{!currentDoc && !loading && (
|
||
<div className="kb-empty">
|
||
<div className="kb-empty-card">
|
||
<div className="kb-empty-orbit"><span /></div>
|
||
<p className="kb-empty-eyebrow">HOLOLAKE KNOWLEDGE</p>
|
||
<h2>把已有资料带进知识空间</h2>
|
||
<p>选择一个本地文件夹。HoloLake 会把可读文档整理成页面，并为这次导入保留 Git 版本记录。</p>
|
||
<button className="kb-empty-primary" onClick={importFolder} disabled={importing}>
|
||
{importing ? '正在导入…' : '选择本地文件夹'}
|
||
</button>
|
||
<div className="kb-empty-support">支持 Markdown、TXT、CSV、JSON 与 YAML</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{currentDoc && view === 'editor' && (
|
||
<Editor doc={currentDoc} onSave={saveDoc} />
|
||
)}
|
||
{currentDoc && view === 'history' && (
|
||
<VersionHistory docPath={currentPath} />
|
||
)}
|
||
</main>
|
||
|
||
{/* Agent 面板 */}
|
||
{agentPanelOpen && (
|
||
<aside className="kb-agent-panel">
|
||
<AgentChat apiBase={agentApiBase} onDocSelect={openDoc} />
|
||
</aside>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|