71 lines
4.3 KiB
TypeScript
71 lines
4.3 KiB
TypeScript
import { Cloud, Laptop, ShieldCheck, X } from 'lucide-react';
|
||
import { projectDomainConnectionSteps, projectDomainTrustSource, type DomainAccessProjection } from '../domain-connection';
|
||
import { canEnterSelectedDomainRuntime, projectDomainRuntimeBoundary, type DomainEntryTarget, type DomainNodeType } from '../domain-entry-state';
|
||
import { publicDomainDirectory, type DomainRouteId } from '../public-domain-directory';
|
||
|
||
interface Props {
|
||
access: DomainAccessProjection;
|
||
target: DomainEntryTarget | null;
|
||
open: boolean;
|
||
onClose: () => void;
|
||
onSelectTarget: (routeId: DomainRouteId) => void;
|
||
onSelectNodeType: (nodeType: DomainNodeType) => void;
|
||
onEnterRuntime: () => void;
|
||
onOpenCodeChannel: () => void;
|
||
}
|
||
|
||
export function DomainConnectionSheet({ access, target, open, onClose, onSelectTarget, onSelectNodeType, onEnterRuntime, onOpenCodeChannel }: Props) {
|
||
if (!open) return null;
|
||
const steps = projectDomainConnectionSteps(access);
|
||
const canEnter = canEnterSelectedDomainRuntime(target, access);
|
||
|
||
return (
|
||
<div className="storage-sheet-backdrop" role="presentation" onMouseDown={event => {
|
||
if (event.target === event.currentTarget) onClose();
|
||
}}>
|
||
<section className="storage-sheet domain-connection-sheet" role="dialog" aria-modal="true" aria-labelledby="domain-connection-title">
|
||
<header className="storage-sheet-header">
|
||
<div>
|
||
<small>{target?.domain.stableDomainId ?? 'SELECT-DOMAIN'}</small>
|
||
<h2 id="domain-connection-title">{target ? `接入${target.domain.displayName}` : '选择要接入的域'}</h2>
|
||
</div>
|
||
<button className="icon-button" onClick={onClose} aria-label="关闭域接入状态"><X aria-hidden="true" /></button>
|
||
</header>
|
||
|
||
<p className="domain-connection-lead">进入域不是切换页面。系统必须验证账户、登记节点、目标域授权、会话能力和在线回执。</p>
|
||
<div className="domain-target-picker" aria-label="选择目标域">
|
||
{publicDomainDirectory.map(domain => <button key={domain.routeId} type="button" data-selected={target?.domain.routeId === domain.routeId} onClick={() => onSelectTarget(domain.routeId)}><span>{domain.directoryNumber}</span>{domain.displayName}</button>)}
|
||
</div>
|
||
{!target ? <p className="domain-connection-boundary">{projectDomainRuntimeBoundary(target, access)}</p> : <>
|
||
<p className="domain-connection-boundary">{projectDomainTrustSource(access)}</p>
|
||
|
||
<div className="domain-node-modes" aria-label="支持的节点类型">
|
||
<button type="button" data-selected={target.nodeType === 'local-terminal'} onClick={() => onSelectNodeType('local-terminal')}><Laptop aria-hidden="true" /><span><strong>本地终端节点</strong><small>使用当前联网电脑承载本地工作；仍须完成节点登记。</small></span></button>
|
||
<button type="button" data-selected={target.nodeType === 'cloud-resident'} onClick={() => onSelectNodeType('cloud-resident')}><Cloud aria-hidden="true" /><span><strong>云常驻节点</strong><small>服务器可持续在线；代码频道登录不等于取得域权限。</small></span></button>
|
||
</div>
|
||
|
||
<ol className="domain-connection-steps">
|
||
{steps.map((step, index) => (
|
||
<li key={step.id} data-state={step.state}>
|
||
<span>{step.state === 'verified' ? <ShieldCheck aria-hidden="true" /> : index + 1}</span>
|
||
<div><strong>{step.label}</strong><small>{step.detail}</small></div>
|
||
<em>{step.state === 'verified' ? '已验证' : step.state === 'checking' ? '核对中' : '待完成'}</em>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
|
||
<p className="domain-connection-boundary">{projectDomainRuntimeBoundary(target, access)} 代码频道账号只用于仓库与同步，不能单独签发域权限。</p>
|
||
</>}
|
||
|
||
<footer className="storage-sheet-footer">
|
||
<button className="secondary-button" onClick={onOpenCodeChannel} disabled={!target}>代码频道与同步设置</button>
|
||
<span />
|
||
<button className="secondary-button" onClick={onClose}>返回门厅</button>
|
||
<button className="primary-button" onClick={onEnterRuntime} disabled={!canEnter}>
|
||
{canEnter ? '进入第五域运行体' : target ? '等待可信域接入' : '请先选择域'}
|
||
</button>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|