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

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>
  );
}