Separate domain access from code-channel login

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

@@ -0,0 +1,60 @@
+import { Cloud, Laptop, ShieldCheck, X } from 'lucide-react';
+import { projectDomainConnectionSteps, type DomainAccessProjection } from '../domain-connection';
+
+interface Props {
+  access: DomainAccessProjection;
+  open: boolean;
+  onClose: () => void;
+  onEnterRuntime: () => void;
+  onOpenCodeChannel: () => void;
+}
+
+export function DomainConnectionSheet({ access, open, onClose, onEnterRuntime, onOpenCodeChannel }: Props) {
+  if (!open) return null;
+  const steps = projectDomainConnectionSteps(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>DOM-FIFTH-0001</small>
+            <h2 id="domain-connection-title">接入第五域 · 光湖本源域</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-node-modes" aria-label="支持的节点类型">
+          <article><Laptop aria-hidden="true" /><span><strong>本地终端节点</strong><small>使用当前联网电脑承载本地工作；正式节点登记尚未开放。</small></span></article>
+          <article><Cloud aria-hidden="true" /><span><strong>云常驻节点</strong><small>服务器可持续在线；代码频道登录不等于取得域运行权限。</small></span></article>
+        </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">代码频道账号只用于仓库与同步，是节点身份的辅助证明之一，不能单独签发第五域权限。</p>
+
+        <footer className="storage-sheet-footer">
+          <button className="secondary-button" onClick={onOpenCodeChannel}>代码频道与同步设置</button>
+          <span />
+          <button className="secondary-button" onClick={onClose}>返回门厅</button>
+          <button className="primary-button" onClick={onEnterRuntime} disabled={!access.runtimeReady}>
+            {access.runtimeReady ? '进入第五域运行体' : '等待可信域接入'}
+          </button>
+        </footer>
+      </section>
+    </div>
+  );
+}
+