HakkoAI Web · 核心组件 Kit — v5 导航体系检查点
本页直接渲染 js/shell.js 的真实产物(非手抄副本):改 shell 一处,本页自动跟随。
v5 体系(用户评审 2026-06-11):① 顶部 header = 官网菜单(Home/Use Cases/Companion/Resources▾,清单取自 official-site state.ts)+ 官方渐变 logo 标 + 右侧 语言/资产/Get App/头像(Pro 右下);
② 左侧栏 = Create CTA + Explore/Live/Hakko+/Shop + CHATS 会话历史(取代旧顶部 Chats tab)+ Settings/法务;
③ 弹窗登录(emochi/PolyBuzz 式 + Google one-tap + 扣费门控)。
① App Header — 登录态(真实 HKShell.header())
左起:汉堡(≤980 显示)· 渐变线框 logo 标 + HakkoAI 字标 · 官网菜单 Home/Use Cases/Companion/Resources▾ · 语言 EN · 💎⚡ 资产 pill · ⬇ Get App · 头像(右下 Pro)。无 ‹www 钮——官网菜单本身就是回官网的路。
① App Header — 未登录态(资产/头像 → 粉色 Log in,点击=弹窗登录)
② 左侧栏 — Create CTA + app 导航 + CHATS 历史(真实 mount 产物)
Create 粉渐变胶囊置顶(访客点击触发扣费门控弹窗)· Explore / Live / Hakko+ / Shop · CHATS=会话历史(头像/预览/未读,点行直进 chat;访客态显示登录引导)· 底部 Settings + Discord/Privacy/Terms。chat 页可整栏收起(HKShell.toggleSidebar());≤980 变抽屉(HKShell.drawer())。
← 真实 .hkw-sb(236px)
active = Explore · chatId 高亮演示见 chat 页
右侧此区域在真实页面 = .hkw-main 内容
③ 下拉组件 — Profile hover 下拉(Daily Rewards 迁移自 Shop)· Get App 下拉 · Resources 下拉(均克隆自真实 header)
④ 弹窗登录 + Google one-tap + 扣费门控(真实 overlay)
无登录可浏览;任何扣 credit 行为(开聊/生成/送礼/签到)→ 弹登录窗(顶部门控提示,不整页跳转);右上 Google one-tap 自动登录卡。成功后就地继续被拦截的动作。
⑤ 全站统一 footer(复刻 official-site 5 列 + SNS + 语言)