338 lines
13 KiB
TypeScript
338 lines
13 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
||
|
||
interface ServerProfile {
|
||
id: string;
|
||
physicalNodeId?: string;
|
||
name: string;
|
||
purpose?: 'personal-fifth-domain' | 'enterprise-lighthouse';
|
||
connected: boolean;
|
||
verified: boolean;
|
||
}
|
||
|
||
interface ServerSession {
|
||
authenticated: boolean;
|
||
nodeId: string;
|
||
username?: string;
|
||
}
|
||
|
||
interface ServerRepository {
|
||
name: string;
|
||
fullName: string;
|
||
private: boolean;
|
||
defaultBranch: string;
|
||
}
|
||
|
||
interface Props {
|
||
open: boolean;
|
||
apiBase: string;
|
||
currentRemote?: string | null;
|
||
initialMode?: 'local' | 'server';
|
||
onClose: () => void;
|
||
onApplied: (result: { mode: 'local' | 'server'; repository?: ServerRepository }) => void;
|
||
}
|
||
|
||
type ServerBridge = {
|
||
list: () => Promise<ServerProfile[]>;
|
||
connect: (nodeId: string) => Promise<ServerProfile>;
|
||
session: (nodeId?: string) => Promise<ServerSession>;
|
||
login: (input: { nodeId: string; username: string; password: string }) => Promise<ServerSession>;
|
||
logout: () => Promise<ServerSession>;
|
||
repositories: () => Promise<ServerRepository[]>;
|
||
createRepository: (input: { name: string; description?: string }) => Promise<ServerRepository>;
|
||
gitRemote: (fullName: string) => Promise<string>;
|
||
};
|
||
|
||
function bridge(): ServerBridge | null {
|
||
return (window as any).hololake?.server || null;
|
||
}
|
||
|
||
export function StorageLocationSheet({ open, apiBase, currentRemote, initialMode, onClose, onApplied }: Props) {
|
||
const [mode, setMode] = useState<'local' | 'server'>(currentRemote ? 'server' : 'local');
|
||
const [servers, setServers] = useState<ServerProfile[]>([]);
|
||
const [selectedNode, setSelectedNode] = useState('');
|
||
const [session, setSession] = useState<ServerSession>({ authenticated: false, nodeId: selectedNode });
|
||
const [repositories, setRepositories] = useState<ServerRepository[]>([]);
|
||
const [selectedRepository, setSelectedRepository] = useState('');
|
||
const [username, setUsername] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [creating, setCreating] = useState(false);
|
||
const [newRepository, setNewRepository] = useState('heartbeat-core-knowledge');
|
||
const [busy, setBusy] = useState(false);
|
||
const [message, setMessage] = useState('');
|
||
|
||
const selectedServer = useMemo(
|
||
() => servers.find(server => server.id === selectedNode) || null,
|
||
[servers, selectedNode],
|
||
);
|
||
|
||
async function loadRepositories() {
|
||
const server = bridge();
|
||
if (!server) return;
|
||
const next = await server.repositories();
|
||
setRepositories(next);
|
||
setSelectedRepository(previous => previous || next[0]?.fullName || '');
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
setMode(initialMode || (currentRemote ? 'server' : 'local'));
|
||
setMessage('');
|
||
const server = bridge();
|
||
if (!server) {
|
||
setMessage('服务器托管只在 HoloLake 桌面 App 中提供');
|
||
return;
|
||
}
|
||
server.list()
|
||
.then(async profiles => {
|
||
setServers(profiles);
|
||
const personal = profiles.find(profile => profile.purpose === 'personal-fifth-domain');
|
||
const nodeId = selectedNode || personal?.id || '';
|
||
setSelectedNode(nodeId);
|
||
const currentSession = await server.session(nodeId);
|
||
setSession(currentSession);
|
||
if (currentSession.authenticated) {
|
||
setUsername(currentSession.username || '');
|
||
await loadRepositories();
|
||
}
|
||
})
|
||
.catch(error => setMessage(error instanceof Error ? error.message : String(error)));
|
||
}, [open, currentRemote, initialMode]);
|
||
|
||
async function selectServer(nodeId: string) {
|
||
const server = bridge();
|
||
setSelectedNode(nodeId);
|
||
setRepositories([]);
|
||
setSelectedRepository('');
|
||
setPassword('');
|
||
setMessage('');
|
||
if (!server) return;
|
||
try {
|
||
const nextSession = await server.session(nodeId);
|
||
setSession(nextSession);
|
||
if (nextSession.authenticated) {
|
||
setUsername(nextSession.username || '');
|
||
await loadRepositories();
|
||
} else {
|
||
setUsername('');
|
||
}
|
||
} catch (error) {
|
||
setMessage(error instanceof Error ? error.message : String(error));
|
||
}
|
||
}
|
||
|
||
async function connectServer() {
|
||
const server = bridge();
|
||
if (!server) return;
|
||
setBusy(true);
|
||
setMessage('');
|
||
try {
|
||
const profile = await server.connect(selectedNode);
|
||
setServers(previous => previous.map(item => item.id === profile.id ? profile : item));
|
||
setMessage('服务器连接已验证');
|
||
} catch (error) {
|
||
setMessage(error instanceof Error ? error.message : String(error));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function login() {
|
||
const server = bridge();
|
||
if (!server) return;
|
||
setBusy(true);
|
||
setMessage('');
|
||
try {
|
||
const nextSession = await server.login({ nodeId: selectedNode, username, password });
|
||
setPassword('');
|
||
setSession(nextSession);
|
||
await loadRepositories();
|
||
setMessage(`已登录 ${nextSession.username}`);
|
||
} catch (error) {
|
||
setMessage(error instanceof Error ? error.message : String(error));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function createRepository() {
|
||
const server = bridge();
|
||
if (!server || !newRepository.trim()) return;
|
||
setBusy(true);
|
||
setMessage('');
|
||
try {
|
||
const created = await server.createRepository({
|
||
name: newRepository.trim(),
|
||
description: 'HoloLake 频道知识库',
|
||
});
|
||
setRepositories(previous => [...previous, created].sort((a, b) => a.name.localeCompare(b.name)));
|
||
setSelectedRepository(created.fullName);
|
||
setCreating(false);
|
||
setMessage(`已建立私有仓库 ${created.fullName}`);
|
||
} catch (error) {
|
||
setMessage(error instanceof Error ? error.message : String(error));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function logout() {
|
||
const server = bridge();
|
||
if (!server) return;
|
||
setBusy(true);
|
||
setMessage('');
|
||
try {
|
||
const nextSession = await server.logout();
|
||
setSession(nextSession);
|
||
setRepositories([]);
|
||
setSelectedRepository('');
|
||
setUsername('');
|
||
setMode('local');
|
||
onApplied({ mode: 'local' });
|
||
setMessage('已退出服务器账号，并解除当前知识库的远端连接');
|
||
} catch (error) {
|
||
setMessage(error instanceof Error ? error.message : String(error));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function apply() {
|
||
if (mode === 'local') {
|
||
setBusy(true);
|
||
setMessage('');
|
||
try {
|
||
if (currentRemote) {
|
||
const response = await fetch(`${apiBase}/api/forgejo/remote`, { method: 'DELETE' });
|
||
const data = await response.json();
|
||
if (!data.ok) throw new Error(data.error || '解除服务器托管失败');
|
||
}
|
||
onApplied({ mode: 'local' });
|
||
onClose();
|
||
} catch (error) {
|
||
setMessage(error instanceof Error ? error.message : String(error));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
return;
|
||
}
|
||
const server = bridge();
|
||
const repository = repositories.find(item => item.fullName === selectedRepository);
|
||
if (!server || !repository) {
|
||
setMessage(session.authenticated ? '请选择目标仓库' : '请先登录服务器');
|
||
return;
|
||
}
|
||
setBusy(true);
|
||
setMessage('');
|
||
try {
|
||
const remote = await server.gitRemote(repository.fullName);
|
||
const response = await fetch(`${apiBase}/api/forgejo/remote`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ url: remote }),
|
||
});
|
||
const data = await response.json();
|
||
if (!data.ok) throw new Error(data.error || '连接仓库失败');
|
||
onApplied({ mode: 'server', repository });
|
||
onClose();
|
||
} catch (error) {
|
||
setMessage(error instanceof Error ? error.message : String(error));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
if (!open) return null;
|
||
|
||
return (
|
||
<div className="storage-sheet-backdrop" role="presentation" onMouseDown={event => {
|
||
if (event.target === event.currentTarget) onClose();
|
||
}}>
|
||
<section className="storage-sheet" role="dialog" aria-modal="true" aria-labelledby="storage-sheet-title">
|
||
<header className="storage-sheet-header">
|
||
<h2 id="storage-sheet-title">知识库保存位置</h2>
|
||
<button className="icon-button" onClick={onClose} aria-label="关闭保存位置设置">×</button>
|
||
</header>
|
||
|
||
<div className="storage-mode-list">
|
||
<label className={`storage-mode-row ${mode === 'local' ? 'selected' : ''}`}>
|
||
<input type="radio" checked={mode === 'local'} onChange={() => setMode('local')} />
|
||
<span><strong>仅保存在本机</strong><small>使用本地 Git 保留历史，不上传服务器</small></span>
|
||
</label>
|
||
<label className={`storage-mode-row ${mode === 'server' ? 'selected' : ''}`}>
|
||
<input type="radio" checked={mode === 'server'} onChange={() => setMode('server')} />
|
||
<span><strong>托管到我的服务器</strong><small>本机保留工作副本，提交到已授权的代码频道</small></span>
|
||
</label>
|
||
</div>
|
||
|
||
{mode === 'server' && (
|
||
<div className="storage-server-area">
|
||
<p className="sheet-label">已选择的服务器</p>
|
||
<div className="server-profile-picker">
|
||
<label className="sheet-label" htmlFor="hololake-server-profile">服务器身份</label>
|
||
<select id="hololake-server-profile" value={selectedNode} onChange={event => selectServer(event.target.value)}>
|
||
{servers.map(server => (
|
||
<option key={server.id} value={server.id}>{server.name}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className="server-profile-row">
|
||
<div className="server-profile-mark" aria-hidden="true"><span /></div>
|
||
<div><strong>{selectedServer?.name || '我的第五域服务器'}</strong><small>{selectedNode}{selectedServer?.physicalNodeId && selectedServer.physicalNodeId !== selectedNode ? ` · ${selectedServer.physicalNodeId}` : ''}</small></div>
|
||
<span className="verified-state">{selectedServer?.connected ? '已连接' : '已验证'}</span>
|
||
{!selectedServer?.connected && <button className="text-button" onClick={connectServer} disabled={busy}>连接</button>}
|
||
</div>
|
||
|
||
{!session.authenticated ? (
|
||
<div className="server-login-form">
|
||
<p className="sheet-label">代码频道账号</p>
|
||
<div className="login-fields">
|
||
<input value={username} onChange={event => setUsername(event.target.value)} placeholder="账号" autoComplete="username" />
|
||
<input type="password" value={password} onChange={event => setPassword(event.target.value)} placeholder="密码" autoComplete="current-password" onKeyDown={event => {
|
||
if (event.key === 'Enter') login();
|
||
}} />
|
||
<button className="secondary-button" onClick={login} disabled={busy || !username || !password}>登录</button>
|
||
</div>
|
||
<small>密码只用于换取 HoloLake 代码频道应用令牌，不写入知识库或 Git 地址；登录代码频道不等于取得目标域运行权限。</small>
|
||
</div>
|
||
) : (
|
||
<div className="repository-picker">
|
||
<div className="repository-picker-heading">
|
||
<p className="sheet-label">目标仓库</p>
|
||
<span>已登录 {session.username} <button className="inline-logout" onClick={logout} disabled={busy}>退出账号</button></span>
|
||
</div>
|
||
<div className="repository-picker-row">
|
||
<select value={selectedRepository} onChange={event => setSelectedRepository(event.target.value)}>
|
||
<option value="">选择私有仓库</option>
|
||
{repositories.map(repository => (
|
||
<option key={repository.fullName} value={repository.fullName}>{repository.fullName}</option>
|
||
))}
|
||
</select>
|
||
<button className="text-button" onClick={() => setCreating(!creating)}>新建仓库</button>
|
||
</div>
|
||
{creating && (
|
||
<div className="new-repository-row">
|
||
<input value={newRepository} onChange={event => setNewRepository(event.target.value)} placeholder="仓库名称" />
|
||
<button className="secondary-button" onClick={createRepository} disabled={busy}>建立私有仓库</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<p className="storage-privacy-note">首次上传前会显示文件数量、目标仓库和分支，需要确认后才会推送。</p>
|
||
</div>
|
||
)}
|
||
|
||
{message && <div className="sheet-message" role="status">{message}</div>}
|
||
|
||
<footer className="storage-sheet-footer">
|
||
<span className="storage-boundary-copy">账号与仓库按服务器隔离</span>
|
||
<span />
|
||
<button className="secondary-button" onClick={onClose}>取消</button>
|
||
<button className="primary-button" onClick={apply} disabled={busy || (mode === 'server' && !session.authenticated)}>
|
||
{busy ? '正在处理…' : '连接并继续'}
|
||
</button>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|