49 lines
2.6 KiB
TypeScript
49 lines
2.6 KiB
TypeScript
type HoloLakeHomeProps = {
|
||
onEnterKnowledgeBase: () => void
|
||
}
|
||
|
||
const modules = [
|
||
['知识湖', '把代码仓库、文档与路径转译成可阅读、可追溯的知识页面。', '进入知识库'],
|
||
['页面组件', '提示块、批注、关系卡、路径包、折叠块与高亮代码已接入笔记编辑器。', '在笔记中输入 /'],
|
||
['协作空间', '人类与人格体在同一上下文中对话、确认、留存回执。', '筹备中'],
|
||
['授权中心', '任何真实操作先形成可读计划，再由人类一次确认。', '筹备中'],
|
||
]
|
||
|
||
export function HoloLakeHome({ onEnterKnowledgeBase }: HoloLakeHomeProps) {
|
||
return (
|
||
<main className="hololake-home" aria-label="HoloLake Era 世界入口">
|
||
<section className="hololake-home__hero">
|
||
<div className="hololake-home__halo" aria-hidden="true" />
|
||
<p className="hololake-home__eyebrow">ICE-GL∞ · 冰朔零点原核频道</p>
|
||
<h1>HoloLake <em>Era</em></h1>
|
||
<p className="hololake-home__lead">语言人格驱动操作系统</p>
|
||
<p className="hololake-home__copy">让人的意图、知识路径与可确认的真实执行，在同一个世界里汇合。</p>
|
||
<div className="hololake-home__actions">
|
||
<button className="hololake-home__primary" onClick={onEnterKnowledgeBase}>进入知识湖 <span>→</span></button>
|
||
<span className="hololake-home__status"><i /> 世界已连接 · 本地知识库就绪</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="hololake-home__signal-grid" aria-label="系统状态">
|
||
<article><span>世界根节点</span><strong>SYS-GLW-0001</strong><small>已解析</small></article>
|
||
<article><span>当前载体</span><strong>Tolaria 基座</strong><small>过渡运行环境</small></article>
|
||
<article><span>执行安全</span><strong>人类确认在环</strong><small>未授权不执行</small></article>
|
||
</section>
|
||
|
||
<section className="hololake-home__modules">
|
||
<div className="hololake-home__section-head"><span>01 / 系统入口</span><p>从可见知识，到可确认行动。</p></div>
|
||
<div className="hololake-home__module-grid">
|
||
{modules.map(([title, description, action], index) => (
|
||
<article className="hololake-module" key={title}>
|
||
<span className="hololake-module__number">0{index + 1}</span>
|
||
<h2>{title}</h2>
|
||
<p>{description}</p>
|
||
{index === 0 ? <button onClick={onEnterKnowledgeBase}>{action} <span>↗</span></button> : <span className="hololake-module__soon">{action}</span>}
|
||
</article>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</main>
|
||
)
|
||
}
|