feat: add lighthouse and fifth-domain entry flow

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

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { BookOpen, Crosshair, DoorOpen, Landmark, Link2, LogIn, ShieldCheck } from 'lucide-react';
+
+type DomainId = 'main' | 'sub' | 'zero' | 'zero-sense' | 'fifth';
+
+interface Props {
+  onEnterFifth: () => void;
+  onOpenConnection: () => void;
+}
+
+const domains: Array<{ id: DomainId; number: string; name: string; summary: string }> = [
+  { id: 'main', number: '01', name: '光湖主域', summary: '公共产品事实、发布与公告入口' },
+  { id: 'sub', number: '02', name: '光湖分域', summary: '行业入口与初始化频道目录' },
+  { id: 'zero', number: '03', name: '光湖零域', summary: '实验、模块试装与质量验证入口' },
+  { id: 'zero-sense', number: '04', name: '光湖零感域', summary: '治理、审批、回滚与审计入口' },
+  { id: 'fifth', number: '05', name: '第五域 · 光湖本源域', summary: '零点原核的工程本体 · 语言架构层' },
+];
+
+export function WorldEntry({ onEnterFifth, onOpenConnection }: Props) {
+  const [stage, setStage] = useState<'lighthouse' | 'directory' | 'fifth'>('lighthouse');
+  const [selectedDomain, setSelectedDomain] = useState<DomainId | null>(null);
+
+  const selectDomain = (id: DomainId) => {
+    setSelectedDomain(id);
+    if (id === 'fifth') setStage('fifth');
+  };
+
+  if (stage === 'fifth') {
+    return (
+      <main className="world-entry fifth-vestibule">
+        <div className="entry-backdrop" aria-hidden="true" />
+        <div className="entry-vignette" aria-hidden="true" />
+
+        <header className="entry-brand fifth-brand">
+          <span>HoloLake</span>
+          <strong>GH-AIOS</strong>
+          <small>光湖语言系统 · 通用人工智能操作平台</small>
+        </header>
+
+        <nav className="fifth-domain-rail" aria-label="五域公开导航">
+          {domains.map(domain => (
+            <button
+              key={domain.id}
+              type="button"
+              className={domain.id === 'fifth' ? 'selected' : ''}
+              onClick={() => domain.id === 'fifth' ? undefined : (setStage('directory'), setSelectedDomain(domain.id))}
+            >
+              <span>{domain.number}</span>
+              <strong>{domain.name}</strong>
+            </button>
+          ))}
+        </nav>
+
+        <section className="fifth-focus-panel" aria-labelledby="fifth-title">
+          <small>当前聚焦域</small>
+          <h1 id="fifth-title">第五域 · 光湖本源域</h1>
+          <dl>
+            <div><dt><ShieldCheck aria-hidden="true" /><span>稳定编号</span></dt><dd>DOM-FIFTH-0001</dd></div>
+            <div><dt><Crosshair aria-hidden="true" /><span>定位</span></dt><dd>零点原核的工程本体 · 语言架构层</dd></div>
+            <div><dt><Link2 aria-hidden="true" /><span>接入方式</span></dt><dd>本地终端节点 / 云端常驻节点</dd></div>
+            <div><dt><DoorOpen aria-hidden="true" /><span>状态</span></dt><dd>公开门厅可查看 · 进入后装载独立域运行体</dd></div>
+          </dl>
+          <div className="fifth-actions">
+            <button className="fifth-primary" type="button" onClick={onEnterFifth}><LogIn aria-hidden="true" />进入第五域</button>
+            <button type="button" onClick={() => setStage('directory')}><BookOpen aria-hidden="true" />查看公开介绍</button>
+            <button type="button" onClick={() => setStage('lighthouse')}><Landmark aria-hidden="true" />返回灯塔</button>
+          </div>
+        </section>
+      </main>
+    );
+  }
+
+  return (
+    <main className={`world-entry public-lighthouse ${stage === 'directory' ? 'is-directory' : ''}`}>
+      <div className="entry-backdrop" aria-hidden="true" />
+      <div className="entry-vignette" aria-hidden="true" />
+
+      <section className="public-entry-copy" aria-labelledby="public-entry-title">
+        <header className="entry-brand">
+          <span>HoloLake</span>
+          <strong>GH-AIOS</strong>
+          <small>光湖语言系统 · 通用人工智能操作平台</small>
+        </header>
+        <div className="public-divider" aria-hidden="true" />
+        <h1 id="public-entry-title">{stage === 'directory' ? '五域公开门厅' : '公共灯塔'}</h1>
+        <p>{stage === 'directory' ? '先在门口了解每个域；进入时再由对应节点完成接入。' : '从这里进入光湖世界'}</p>
+        <div className="public-entry-actions">
+          <button className="public-primary" type="button" onClick={() => setStage(stage === 'directory' ? 'lighthouse' : 'directory')}>
+            {stage === 'directory' ? '返回公共灯塔' : '查看五域'}
+          </button>
+          <button type="button" onClick={onOpenConnection}>登录或接入节点</button>
+        </div>
+      </section>
+
+      <nav className="public-domain-strip" aria-label="五域公开门厅">
+        {domains.map(domain => (
+          <button
+            key={domain.id}
+            type="button"
+            className={selectedDomain === domain.id ? 'selected' : ''}
+            onClick={() => selectDomain(domain.id)}
+          >
+            <span>{domain.number}</span>
+            <strong>{domain.name}</strong>
+            {stage === 'directory' && <small>{domain.summary}</small>}
+          </button>
+        ))}
+      </nav>
+
+      <footer className="public-entry-footer">支持本地终端节点与云端常驻节点</footer>
+    </main>
+  );
+}