hololake-system-architecture/product-source/guanghu-knowledge-base/src/App.tsx

import { useCallback, useEffect, useMemo, useState, type CSSProperties, type PointerEvent as ReactPointerEvent } 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';
import { PlatformNavigation } from './components/PlatformNavigation';
import { StorageLocationSheet } from './components/StorageLocationSheet';
import { HumanSettings, HumanPreferences, loadHumanPreferences } from './components/HumanSettings';
import { DomainSurface } from './components/DomainSurface';
import { cleanDisplayText } from './presentation';

type View = 'editor' | 'history';
type RouteId = 'fifth' | 'main' | 'sub' | 'zero' | 'zero-sense';
type ModuleId = 'knowledge' | 'education';

interface RepositoryStatus {
  branch: string;
  head: string;
  clean: boolean;
  ahead: number;
  behind: number;
  remote: { name: string; url: string } | null;
}

interface ServerSession {
  authenticated: boolean;
  nodeId: string;
  username?: string;
}

interface ServerProfile {
  id: string;
  name: string;
  purpose: 'personal-fifth-domain' | 'enterprise-lighthouse';
  channelTitle?: string;
  channelSubtitle?: string;
}

function findFirstDocument(nodes: DocTreeNode[]): string | null {
  for (const node of nodes) {
    if (node.type === 'document') return node.path;
    const child = findFirstDocument(node.children || []);
    if (child) return child;
  }
  return null;
}

const routeCopy: Record<RouteId, { title: string; body: string }> = {
  fifth: { title: '我的第五域', body: '当前账号的个人第五域频道。模块在这里按需挂载、收起和组合。' },
  main: { title: '光湖主域', body: '公共产品事实、发布与公告入口。当前客户端尚未取得该域的操作权限。' },
  sub: { title: '光湖分域', body: '行业入口与初始化频道目录。教育行业与网文行业从这里进入。' },
  zero: { title: '光湖零域', body: '实验、模块试装、对比与质量验证入口。' },
  'zero-sense': { title: '光湖零感域', body: '治理、部署审批、事故、回滚与审计入口。' },
};

export default function App() {
  const agentApiBase = window.location.protocol === 'file:' ? 'http://127.0.0.1:3890' : '';
  const [tree, setTree] = useState<DocTreeNode[]>([]);
  const [treeLoaded, setTreeLoaded] = useState(false);
  const [currentDoc, setCurrentDoc] = useState<DocContent | null>(null);
  const [currentPath, setCurrentPath] = useState('');
  const [view, setView] = useState<View>('editor');
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [moduleCollapsed, setModuleCollapsed] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [agentPanelOpen, setAgentPanelOpen] = useState(false);
  const [importing, setImporting] = useState(false);
  const [importMessage, setImportMessage] = useState<string | null>(null);
  const [emptyDismissed, setEmptyDismissed] = useState(false);
  const [activeRoute, setActiveRoute] = useState<RouteId>('fifth');
  const [activeModule, setActiveModule] = useState<ModuleId>('knowledge');
  const [storageSheetOpen, setStorageSheetOpen] = useState(false);
  const [storageSheetInitialMode, setStorageSheetInitialMode] = useState<'local' | 'server' | undefined>();
  const [serverSession, setServerSession] = useState<ServerSession>({ authenticated: false, nodeId: '' });
  const [serverProfiles, setServerProfiles] = useState<ServerProfile[]>([]);
  const [repositoryStatus, setRepositoryStatus] = useState<RepositoryStatus | null>(null);
  const [humanSettingsOpen, setHumanSettingsOpen] = useState(false);
  const [humanPreferences, setHumanPreferences] = useState<HumanPreferences>(() => loadHumanPreferences());
  const [agentRevision, setAgentRevision] = useState(0);
  const [treeWidth, setTreeWidth] = useState(() => Number(localStorage.getItem('hololake.layout.tree-width')) || 258);
  const [agentWidth, setAgentWidth] = useState(() => Number(localStorage.getItem('hololake.layout.agent-width')) || 460);

  const storageMode = repositoryStatus?.remote ? 'server' : 'local';
  const storageLabel = storageMode === 'server' ? '服务器已托管' : '仅本机';

  const openDoc = useCallback(async (docPath: string) => {
    setLoading(true);
    setError(null);
    try {
      const doc = await api.getDoc(docPath);
      setCurrentDoc(doc);
      setCurrentPath(docPath);
      setView('editor');
      setActiveRoute('fifth');
      setActiveModule('knowledge');
      setModuleCollapsed(false);
    } catch (err: any) {
      setError(`加载文档失败: ${err.message}`);
    } finally {
      setLoading(false);
    }
  }, []);

  const refreshTree = useCallback(async () => {
    try {
      const nextTree = await api.getTree();
      setTree(nextTree);
      setTreeLoaded(true);
    } catch (err: any) {
      setError(`加载文档树失败: ${err.message}`);
      setTreeLoaded(true);
    }
  }, []);

  const openWikiTarget = useCallback(async (rawTarget: string) => {
    const target = rawTarget.trim().replace(/^\/+/, '');
    const normalized = target.toLocaleLowerCase().replace(/\.md$/u, '');
    const flatten = (nodes: DocTreeNode[]): DocTreeNode[] => nodes.flatMap(node => [node, ...(node.children ? flatten(node.children) : [])]);
    const match = flatten(tree).find(node => {
      if (node.type !== 'document') return false;
      const path = node.path.toLocaleLowerCase().replace(/\.md$/u, '');
      const name = node.name.toLocaleLowerCase().replace(/\.md$/u, '');
      return path === normalized || name === normalized || path.endsWith(`/${normalized}`);
    });
    if (match) {
      await openDoc(match.path);
      return;
    }
    setError(`没有找到知识页面：${target}`);
  }, [openDoc, tree]);

  const refreshRepositoryStatus = useCallback(async () => {
    try {
      const response = await fetch(`${agentApiBase}/api/forgejo/status`);
      const data = await response.json();
      if (data.ok) setRepositoryStatus(data.status);
    } catch {
      setRepositoryStatus(null);
    }
  }, [agentApiBase]);

  const refreshServerSession = useCallback(async () => {
    const server = (window as any).hololake?.server;
    if (!server?.session) return;
    try {
      const profiles = await server.list() as ServerProfile[];
      setServerProfiles(profiles);
      const personal = profiles.find(profile => profile.purpose === 'personal-fifth-domain');
      if (personal) {
        try { await server.connect(personal.id); } catch { /* 会话状态继续按真实结果显示 */ }
      }
      setServerSession(await server.session(personal?.id));
    } catch {
      setServerSession({ authenticated: false, nodeId: '' });
    }
  }, []);

  useEffect(() => {
    refreshTree();
    refreshRepositoryStatus();
    refreshServerSession();
  }, [refreshTree, refreshRepositoryStatus, refreshServerSession]);

  useEffect(() => {
    const resolvedLanguage = humanPreferences.language === 'system'
      ? navigator.language
      : humanPreferences.language;
    document.documentElement.lang = resolvedLanguage;
  }, [humanPreferences.language]);

  useEffect(() => {
    localStorage.setItem('hololake.human-preferences.v1', JSON.stringify(humanPreferences));
  }, [humanPreferences]);

  useEffect(() => {
    if (!treeLoaded || currentPath || loading) return;
    const firstDocument = findFirstDocument(tree);
    if (firstDocument) openDoc(firstDocument);
  }, [tree, treeLoaded, currentPath, loading, openDoc]);

  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);
      setEmptyDismissed(false);
      await refreshTree();
    } catch (err: any) {
      setError(`创建失败: ${err.message}`);
    }
  }, [refreshTree]);

  const deleteDoc = useCallback(async () => {
    if (!currentPath || !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 knowledge = (window as any).hololake?.knowledge;
    if (!knowledge?.importFolder) {
      setError('本地文件夹导入只在 HoloLake 桌面 App 中提供');
      return;
    }
    setImporting(true);
    setError(null);
    setImportMessage(null);
    try {
      const result = await knowledge.importFolder();
      if (result.cancelled) {
        setImportMessage('已取消导入，现有知识库没有变化');
        return;
      }
      if (!result.imported) {
        setImportMessage(`没有找到可导入的文档；已跳过 ${result.skipped || 0} 个文件`);
        return;
      }
      await refreshTree();
      if (result.firstDocument) await openDoc(result.firstDocument);
      setEmptyDismissed(false);
      setImportMessage([
        `已导入 ${result.imported} 篇文档`,
        result.assets ? `${result.assets} 个图片资源` : '',
        result.skipped ? `跳过 ${result.skipped} 个暂不支持的文件` : '',
        result.failed?.length ? `${result.failed.length} 个文件失败` : '',
      ].filter(Boolean).join(' · '));
    } catch (err: any) {
      setError(`导入失败: ${err.message}`);
    } finally {
      setImporting(false);
    }
  }, [openDoc, refreshTree]);

  const activeRouteCopy = routeCopy[activeRoute];
  const currentTitle = cleanDisplayText(currentDoc?.meta.title || '知识库');
  const contentVisible = activeRoute === 'fifth' && activeModule === 'knowledge' && !moduleCollapsed;
  const breadcrumb = useMemo(
    () => currentPath ? currentPath.split('/').map(cleanDisplayText).join(' / ') : '知识库',
    [currentPath],
  );
  const language = humanPreferences.language === 'system'
    ? (navigator.language.toLowerCase().startsWith('zh') ? 'zh-CN' : 'en')
    : humanPreferences.language;
  const fontFamily = humanPreferences.font === 'serif'
    ? 'ui-serif, "Songti SC", Georgia, serif'
    : humanPreferences.font === 'accessible'
      ? 'Arial, "PingFang SC", sans-serif'
      : 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif';
  const personalServer = serverProfiles.find(profile => profile.purpose === 'personal-fifth-domain');
  const channelTitle = personalServer?.channelTitle || '我的第五域';
  const channelSubtitle = personalServer?.channelSubtitle || '当前频道';

  const startResize = useCallback((kind: 'tree' | 'agent', event: ReactPointerEvent<HTMLButtonElement>) => {
    event.preventDefault();
    const startX = event.clientX;
    const startWidth = kind === 'tree' ? treeWidth : agentWidth;
    document.body.classList.add('is-resizing');
    const move = (moveEvent: PointerEvent) => {
      if (kind === 'tree') {
        setTreeWidth(Math.max(210, Math.min(420, startWidth + moveEvent.clientX - startX)));
      } else {
        setAgentWidth(Math.max(360, Math.min(Math.max(360, window.innerWidth * 0.52), startWidth - moveEvent.clientX + startX)));
      }
    };
    const stop = () => {
      document.body.classList.remove('is-resizing');
      window.removeEventListener('pointermove', move);
      window.removeEventListener('pointerup', stop);
    };
    window.addEventListener('pointermove', move);
    window.addEventListener('pointerup', stop, { once: true });
  }, [treeWidth, agentWidth]);

  useEffect(() => { localStorage.setItem('hololake.layout.tree-width', String(Math.round(treeWidth))); }, [treeWidth]);
  useEffect(() => { localStorage.setItem('hololake.layout.agent-width', String(Math.round(agentWidth))); }, [agentWidth]);

  return (
    <div
      className="hololake-shell"
      data-language={language}
      data-appearance={humanPreferences.appearance}
      style={{ '--human-font': fontFamily, '--reading-size': `${humanPreferences.readingSize}px` } as CSSProperties}
    >
      <header className="platform-topbar">
        <div className="topbar-spacer" />
        <div className="topbar-channel">{channelTitle} · {channelSubtitle}</div>
        <div className="topbar-search"><SearchBar onSelect={openDoc} /></div>
        <button className="theme-quick-toggle" type="button" onClick={() => setHumanPreferences(current => ({ ...current, appearance: current.appearance === 'mist-light' ? 'lake-night' : 'mist-light' }))}>
          {humanPreferences.appearance === 'mist-light' ? '雾白' : '湖夜'}
        </button>
        <button className={`fifth-domain-session ${serverSession.authenticated ? 'authenticated' : ''}`} type="button" onClick={() => {
          setStorageSheetInitialMode('server');
          setStorageSheetOpen(true);
        }}>
          <span className="session-status-dot" aria-hidden="true" />
          <span><strong>{serverSession.authenticated ? serverSession.username : (personalServer ? '登录第五域' : '配置我的服务器')}</strong><small>{personalServer?.id || '本机私有配置'}</small></span>
        </button>
      </header>

      <div className="platform-body">
        <PlatformNavigation
          channelTitle={channelTitle}
          channelSubtitle={channelSubtitle}
          activeRoute={activeRoute}
          knowledgeSelected={activeRoute === 'fifth' && activeModule === 'knowledge'}
          onRouteSelect={route => {
            setActiveRoute(route);
            setActiveModule('knowledge');
            setModuleCollapsed(false);
          }}
          onKnowledgeSelect={() => {
            setActiveRoute('fifth');
            setActiveModule('knowledge');
            setModuleCollapsed(false);
          }}
          onEducationSelect={() => {
            setActiveRoute('sub');
            setActiveModule('education');
            setModuleCollapsed(false);
          }}
          onSettingsOpen={() => setHumanSettingsOpen(true)}
          onAccountOpen={() => {
            setStorageSheetInitialMode('server');
            setStorageSheetOpen(true);
          }}
        />

        <section className="platform-workspace">
          {!contentVisible ? (
            moduleCollapsed && activeRoute === 'fifth' ? (
              <div className="route-surface">
                <h1>知识库已收起</h1>
                <p>模块仍安装在永恒湖心频道中，重新打开不会改变本地或服务器数据。</p>
                <button className="primary-button" onClick={() => setModuleCollapsed(false)}>重新打开知识库</button>
              </div>
            ) : (
              <DomainSurface
                activeDomain={(activeRoute === 'fifth' ? 'sub' : activeRoute) as 'main' | 'sub' | 'zero' | 'zero-sense'}
                educationSelected={activeRoute === 'sub' && activeModule === 'education'}
                onOpenSettings={() => setHumanSettingsOpen(true)}
              />
            )
          ) : (
            <>
              <div className="knowledge-tabbar">
                <button className="sidebar-toggle" onClick={() => setSidebarOpen(!sidebarOpen)} aria-label={sidebarOpen ? '收起页面栏' : '展开页面栏'}>
                  <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M9 4v16" /></svg>
                </button>
                <div className="document-tab"><span className="document-tab-icon" />{currentTitle}<button aria-label="关闭当前页面">×</button></div>
                <button className="new-tab-button" onClick={() => createDoc('')} aria-label="新建页面">＋</button>
              </div>

              <div className="knowledge-module-bar">
                <button className="storage-state-button" onClick={() => {
                  setStorageSheetInitialMode(undefined);
                  setStorageSheetOpen(true);
                }}>
                  <svg viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="12" cy="5.5" rx="7.5" ry="3" /><path d="M4.5 5.5v6c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3v-6M4.5 11.5v6c0 1.7 3.4 3 7.5 3s7.5-1.3 7.5-3v-6" /></svg>
                  <span>{storageLabel}</span>
                  <strong>{storageMode === 'local' ? '托管到我的服务器' : repositoryStatus?.remote?.url.split('/').slice(-2).join(' / ').replace(/\.git$/, '')}</strong>
                </button>
                <div className="knowledge-module-actions">
                  {currentDoc && <>
                    <button className={view === 'editor' ? 'selected' : ''} onClick={() => setView('editor')}>编辑</button>
                    <button className={view === 'history' ? 'selected' : ''} onClick={() => setView('history')}>历史</button>
                    <button className="danger-action" onClick={deleteDoc} aria-label="删除当前页面">删除</button>
                  </>}
                  <button onClick={() => setModuleCollapsed(true)}>收起模块</button>
                </div>
              </div>

              <div
                className={`knowledge-workbench ${sidebarOpen ? 'has-tree' : ''} ${agentPanelOpen ? 'has-agent' : ''}`}
                style={{ '--tree-width': `${treeWidth}px`, '--agent-width': `${agentWidth}px` } as CSSProperties}
              >
                {sidebarOpen && (
                  <aside className="knowledge-sidebar">
                    <div className="knowledge-sidebar-heading"><span>当前知识库</span><button onClick={() => createDoc('')} aria-label="新建页面">＋</button></div>
                    <div className="knowledge-sidebar-actions">
                      <button className="import-button" onClick={importFolder} disabled={importing}>
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M5 14v5h14v-5" /></svg>
                        {importing ? '正在导入…' : '导入本地文件夹'}
                      </button>
                    </div>
                    {importMessage && <div className="import-message">{importMessage}<button onClick={() => setImportMessage(null)}>×</button></div>}
                    <DocTree nodes={tree} currentPath={currentPath} onSelect={openDoc} onCreate={createDoc} />
                  </aside>
                )}

                {sidebarOpen && <button type="button" className="workspace-resizer tree-resizer" onPointerDown={event => startResize('tree', event)} aria-label="调整知识树宽度" />}

                <main className="knowledge-content">
                  {error && <div className="kb-error">{error}<button onClick={() => setError(null)}>×</button></div>}
                  {loading && <div className="kb-loading">正在打开页面…</div>}
                  {!currentDoc && treeLoaded && !loading && !emptyDismissed && (
                    <div className="knowledge-empty">
                      <button className="empty-close" onClick={() => setEmptyDismissed(true)} aria-label="关闭导入引导">×</button>
                      <div className="route-orbit" aria-hidden="true"><span /></div>
                      <h2>把已有资料带进知识空间</h2>
                      <p>只有空知识库才显示这个入口。也可以先关闭，稍后再导入。</p>
                      <div className="empty-actions">
                        <button className="primary-button" onClick={importFolder} disabled={importing}>{importing ? '正在导入…' : '选择本地文件夹'}</button>
                        <button className="secondary-button" onClick={() => createDoc('')}>新建空白页面</button>
                      </div>
                      <small>支持 Markdown、TXT、CSV、JSON 与 YAML</small>
                    </div>
                  )}
                  {!currentDoc && emptyDismissed && !loading && (
                    <div className="quiet-empty"><h2>知识库已准备好</h2><p>导入文件夹或新建页面开始使用。</p><button className="secondary-button" onClick={() => setEmptyDismissed(false)}>打开导入入口</button></div>
                  )}
                  {currentDoc && view === 'editor' && <Editor doc={currentDoc} onSave={saveDoc} onWikiSelect={openWikiTarget} />}
                  {currentDoc && view === 'history' && <VersionHistory docPath={currentPath} />}
                  {currentDoc && <div className="document-path">{breadcrumb}</div>}
                </main>

                {agentPanelOpen && <button type="button" className="workspace-resizer agent-resizer" onPointerDown={event => startResize('agent', event)} aria-label="调整 HoloLake 宽度" />}
                {agentPanelOpen && (
                  <aside className="agent-drawer">
                    <div className="agent-drawer-scope"><span>当前作用范围</span><strong>当前页面 · {currentTitle}</strong></div>
                    <AgentChat apiBase={agentApiBase} runtimeRevision={agentRevision} onClose={() => setAgentPanelOpen(false)} />
                  </aside>
                )}
              </div>
            </>
          )}

          {contentVisible && (
            <>
              {!agentPanelOpen && <button className="agent-launcher" onClick={() => {
                if (window.innerWidth < 1500) setSidebarOpen(false);
                setAgentPanelOpen(true);
              }}>
                <span className="launcher-orbit" aria-hidden="true" />
                询问 HoloLake
              </button>}
            </>
          )}
        </section>
      </div>

      <StorageLocationSheet
        open={storageSheetOpen}
        apiBase={agentApiBase}
        currentRemote={repositoryStatus?.remote?.url}
        initialMode={storageSheetInitialMode}
        onClose={() => setStorageSheetOpen(false)}
        onApplied={() => {
          refreshRepositoryStatus();
          refreshServerSession();
        }}
      />
      <HumanSettings
        open={humanSettingsOpen}
        preferences={humanPreferences}
        onClose={() => setHumanSettingsOpen(false)}
        onChange={setHumanPreferences}
        onAgentChanged={() => setAgentRevision(revision => revision + 1)}
        onManageServer={() => {
          setHumanSettingsOpen(false);
          setStorageSheetInitialMode('server');
          setStorageSheetOpen(true);
        }}
      />
    </div>
  );
}