feat: add lighthouse and fifth-domain entry flow

product-source/guanghu-knowledge-base/src/App.tsx

@@ -11,6 +11,7 @@ import { HumanSettings, HumanPreferences, loadHumanPreferences } from './compone
 import { DomainSurface } from './components/DomainSurface';
 import { ModuleLibrarySheet } from './components/ModuleLibrarySheet';
 import { cleanDisplayText } from './presentation';
+import { WorldEntry } from './components/WorldEntry';
 
 type View = 'editor' | 'history';
 type RouteId = 'fifth' | 'main' | 'sub' | 'zero' | 'zero-sense';
@@ -88,6 +89,7 @@ export default function App() {
   const [moduleBusy, setModuleBusy] = useState(false);
   const [moduleMessage, setModuleMessage] = useState('');
   const [lastChannelReceipt, setLastChannelReceipt] = useState('');
+  const [worldEntered, setWorldEntered] = useState(false);
 
   const storageMode = repositoryStatus?.remote ? 'server' : 'local';
   const storageLabel = storageMode === 'server' ? '服务器已托管' : '仅本机';
@@ -353,7 +355,21 @@ export default function App() {
   useEffect(() => { localStorage.setItem('hololake.layout.agent-width', String(Math.round(agentWidth))); }, [agentWidth]);
 
   return (
-    <div
+    <>
+      {!worldEntered && (
+        <WorldEntry
+          onEnterFifth={() => {
+            setActiveRoute('fifth');
+            setActiveModule('knowledge');
+            setWorldEntered(true);
+          }}
+          onOpenConnection={() => {
+            setStorageSheetInitialMode('server');
+            setStorageSheetOpen(true);
+          }}
+        />
+      )}
+      <div
       className="hololake-shell"
       data-language={language}
       data-appearance={humanPreferences.appearance}
@@ -556,6 +572,7 @@ export default function App() {
         onChange={(moduleId, installed, mounted) => void changeModuleState(moduleId, installed, mounted)}
         onUndo={() => void undoModuleChange()}
       />
-    </div>
+      </div>
+    </>
   );
 }

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

product-source/guanghu-knowledge-base/src/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import './styles/app.css';
 import './styles/workspace-0.7.1.css';
+import './styles/world-entry.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

product-source/guanghu-knowledge-base/src/styles/world-entry.css

@@ -0,0 +1,415 @@
+.world-entry {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  min-width: 860px;
+  min-height: 620px;
+  overflow: hidden;
+  color: #edf4ff;
+  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
+  background: #06142b;
+}
+
+.entry-backdrop,
+.entry-vignette {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.public-lighthouse .entry-backdrop {
+  background: url('/gh-aios-public-lighthouse.png') center / cover no-repeat;
+}
+
+.fifth-vestibule .entry-backdrop {
+  background: url('/fifth-domain-lighthouse.png') center / cover no-repeat;
+}
+
+.public-lighthouse .entry-vignette {
+  background:
+    linear-gradient(180deg, rgba(1, 10, 27, .16) 0%, rgba(2, 13, 31, 0) 48%, rgba(1, 10, 24, .72) 100%),
+    radial-gradient(circle at 50% 32%, rgba(85, 131, 205, .08), rgba(0, 6, 19, .18) 64%, rgba(0, 5, 16, .42) 100%);
+}
+
+.fifth-vestibule .entry-vignette {
+  background: linear-gradient(90deg, rgba(1, 5, 20, .28), rgba(1, 6, 25, .05) 65%, rgba(2, 4, 17, .2));
+}
+
+.entry-brand {
+  display: grid;
+  justify-items: center;
+  gap: 9px;
+  text-align: center;
+}
+
+.entry-brand span {
+  font-size: clamp(24px, 2.7vw, 40px);
+  font-weight: 500;
+  letter-spacing: -.03em;
+}
+
+.entry-brand strong {
+  color: #dbe9ff;
+  font-family: "Helvetica Neue", Inter, sans-serif;
+  font-size: clamp(58px, 7.3vw, 108px);
+  font-weight: 400;
+  line-height: .94;
+  letter-spacing: .05em;
+  text-shadow: 0 5px 24px rgba(73, 133, 220, .18);
+}
+
+.entry-brand small {
+  color: rgba(232, 240, 255, .82);
+  font-size: clamp(14px, 1.35vw, 21px);
+  font-weight: 400;
+  letter-spacing: .25em;
+}
+
+.public-entry-copy {
+  position: relative;
+  z-index: 1;
+  width: min(720px, 62vw);
+  margin: clamp(72px, 10vh, 120px) auto 0;
+  display: grid;
+  justify-items: center;
+  text-align: center;
+}
+
+.public-divider {
+  width: 190px;
+  height: 1px;
+  margin: 30px 0 30px;
+  background: linear-gradient(90deg, transparent, rgba(202, 222, 250, .36), transparent);
+}
+
+.public-entry-copy h1 {
+  margin: 0;
+  font-size: clamp(42px, 5vw, 68px);
+  font-weight: 500;
+  letter-spacing: .11em;
+}
+
+.public-entry-copy > p {
+  margin: 15px 0 34px;
+  color: rgba(228, 237, 252, .72);
+  font-size: clamp(16px, 1.65vw, 24px);
+  letter-spacing: .22em;
+}
+
+.public-entry-actions {
+  width: min(570px, 100%);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.public-entry-actions button,
+.fifth-actions button {
+  min-height: 66px;
+  border: 1px solid rgba(172, 203, 245, .62);
+  border-radius: 12px;
+  background: rgba(13, 35, 72, .38);
+  color: #edf4ff;
+  font: inherit;
+  font-size: 19px;
+  font-weight: 500;
+  letter-spacing: .08em;
+  backdrop-filter: blur(14px);
+  transition: border-color .18s ease, background .18s ease, transform .18s ease;
+}
+
+.public-entry-actions button:hover,
+.fifth-actions button:hover,
+.public-domain-strip button:hover {
+  transform: translateY(-2px);
+  border-color: rgba(224, 237, 255, .92);
+}
+
+.public-entry-actions .public-primary {
+  border-color: rgba(231, 243, 255, .84);
+  background: linear-gradient(135deg, rgba(222, 237, 255, .92), rgba(131, 181, 243, .82));
+  color: #09214a;
+  box-shadow: 0 12px 35px rgba(65, 128, 216, .18);
+}
+
+.public-domain-strip {
+  position: absolute;
+  z-index: 1;
+  left: 8.5vw;
+  right: 8.5vw;
+  bottom: clamp(116px, 15vh, 168px);
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  border-bottom: 1px solid rgba(179, 207, 239, .22);
+}
+
+.public-domain-strip button {
+  position: relative;
+  min-width: 0;
+  min-height: 86px;
+  padding: 8px 16px 26px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: rgba(230, 239, 252, .84);
+  font: inherit;
+  text-align: center;
+  transition: color .18s ease, border-color .18s ease, transform .18s ease;
+}
+
+.public-domain-strip button + button::before {
+  content: '/';
+  position: absolute;
+  left: -4px;
+  top: 22px;
+  color: rgba(158, 197, 244, .72);
+  font-size: 28px;
+  font-weight: 300;
+}
+
+.public-domain-strip span,
+.public-domain-strip strong,
+.public-domain-strip small {
+  display: block;
+}
+
+.public-domain-strip span {
+  margin-bottom: 8px;
+  color: rgba(154, 192, 239, .82);
+  font-size: 18px;
+}
+
+.public-domain-strip strong {
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.public-domain-strip small {
+  margin-top: 8px;
+  color: rgba(208, 222, 242, .64);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.public-domain-strip button.selected,
+.public-domain-strip button:focus-visible {
+  border-bottom-color: #b8d6ff;
+  color: #fff;
+  outline: none;
+}
+
+.public-entry-footer {
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  bottom: 65px;
+  color: rgba(202, 219, 241, .6);
+  font-size: 14px;
+  letter-spacing: .16em;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
+.public-lighthouse.is-directory .public-entry-copy {
+  margin-top: clamp(45px, 6vh, 75px);
+}
+
+.public-lighthouse.is-directory .entry-brand strong {
+  font-size: clamp(46px, 5vw, 74px);
+}
+
+.public-lighthouse.is-directory .public-divider {
+  margin: 20px 0;
+}
+
+.public-lighthouse.is-directory .public-domain-strip {
+  bottom: clamp(92px, 12vh, 130px);
+}
+
+.public-lighthouse.is-directory .public-domain-strip button {
+  min-height: 118px;
+}
+
+.fifth-brand {
+  position: absolute;
+  z-index: 1;
+  top: 62px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.fifth-brand span { font-size: 27px; }
+.fifth-brand strong {
+  color: #ffe9b7;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: clamp(60px, 6.5vw, 92px);
+  text-shadow: 0 0 24px rgba(255, 201, 116, .16);
+}
+.fifth-brand small { color: rgba(255, 237, 204, .82); font-size: 14px; }
+
+.fifth-domain-rail {
+  position: absolute;
+  z-index: 1;
+  left: 4vw;
+  top: 15vh;
+  bottom: 23vh;
+  width: 238px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.fifth-domain-rail::before {
+  content: '';
+  position: absolute;
+  left: 28px;
+  top: 24px;
+  bottom: 32px;
+  width: 1px;
+  background: linear-gradient(#9d83ce, #c6a063 78%, #ffe2a0);
+  box-shadow: 0 0 18px rgba(208, 168, 106, .22);
+}
+
+.fifth-domain-rail button {
+  position: relative;
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr);
+  align-items: center;
+  gap: 14px;
+  min-height: 60px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: rgba(235, 231, 247, .86);
+  font: inherit;
+  text-align: left;
+}
+
+.fifth-domain-rail button span {
+  position: relative;
+  z-index: 1;
+  width: 54px;
+  height: 54px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(197, 166, 227, .8);
+  border-radius: 50%;
+  background: rgba(11, 11, 41, .74);
+  font-size: 19px;
+}
+
+.fifth-domain-rail button strong {
+  max-width: 130px;
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.fifth-domain-rail button:focus-visible {
+  outline: 1px solid #ffe1a1;
+  outline-offset: 5px;
+}
+
+.fifth-domain-rail button.selected span {
+  border-color: #ffe1a1;
+  color: #ffe5ad;
+  font-size: 27px;
+  box-shadow: 0 0 0 11px rgba(255, 207, 126, .1), 0 0 30px rgba(255, 206, 124, .35);
+}
+
+.fifth-domain-rail button.selected strong {
+  color: #ffe1a1;
+  font-size: 20px;
+}
+
+.fifth-focus-panel {
+  position: absolute;
+  z-index: 1;
+  top: 27vh;
+  left: max(320px, 24vw);
+  width: min(820px, 56vw);
+  padding: 32px 42px 36px;
+  border: 1px solid rgba(174, 174, 217, .42);
+  border-radius: 18px;
+  background: rgba(6, 12, 43, .68);
+  box-shadow: 0 22px 80px rgba(1, 3, 18, .28);
+  backdrop-filter: blur(20px);
+}
+
+.fifth-focus-panel > small {
+  color: #f3d49b;
+  font-size: 15px;
+  letter-spacing: .08em;
+}
+
+.fifth-focus-panel h1 {
+  margin: 7px 0 13px;
+  color: #ffe1a8;
+  font-size: clamp(35px, 3.4vw, 52px);
+  font-weight: 600;
+  letter-spacing: .02em;
+}
+
+.fifth-focus-panel dl { margin: 0; }
+.fifth-focus-panel dl > div {
+  display: grid;
+  grid-template-columns: 150px minmax(0, 1fr);
+  gap: 18px;
+  align-items: center;
+  min-height: 63px;
+  border-top: 1px solid rgba(181, 181, 220, .22);
+}
+
+.fifth-focus-panel dt {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: rgba(234, 230, 246, .72);
+}
+.fifth-focus-panel dt svg { width: 22px; height: 22px; stroke-width: 1.6; }
+.fifth-focus-panel dd { margin: 0; color: rgba(244, 243, 251, .88); }
+
+.fifth-actions {
+  position: absolute;
+  top: calc(100% + 24px);
+  left: 50%;
+  width: min(650px, 86%);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  transform: translateX(-50%);
+}
+
+.fifth-actions button {
+  min-height: 62px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-size: 16px;
+}
+.fifth-actions button svg { width: 22px; height: 22px; stroke-width: 1.6; }
+.fifth-actions .fifth-primary {
+  grid-column: 1 / -1;
+  width: min(510px, 82%);
+  min-height: 82px;
+  justify-self: center;
+  border-color: rgba(255, 238, 189, .92);
+  background: linear-gradient(135deg, rgba(240, 191, 111, .9), rgba(176, 129, 72, .8));
+  color: #fff9ec;
+  font-size: 19px;
+  box-shadow: 0 0 0 3px rgba(255, 216, 144, .16), 0 0 26px rgba(255, 196, 103, .34);
+}
+
+@media (max-height: 760px) {
+  .public-entry-copy { margin-top: 38px; }
+  .public-divider { margin: 17px 0; }
+  .public-entry-copy > p { margin-bottom: 22px; }
+  .public-domain-strip { bottom: 82px; }
+  .public-entry-footer { bottom: 28px; }
+  .fifth-brand { top: 24px; }
+  .fifth-focus-panel { top: 25vh; }
+  .fifth-actions { top: calc(100% + 14px); }
+}