№ · 活跃设计 CH.07.14
主页 · 📐 活跃设计 · 游戏内 UI 组件索引 v1(左边按钮 → 弹窗)

游戏内 UI 组件索引 v1(左边按钮 → 弹窗)

📅 2026-07-14 · 📦 6.4 KB · 📐 活跃设计 · 📝 MD 文档 🆕 14d 🏷️ Buff🏷️ 设计🏷️ 路线图

文档状态:v1 索引稿 索引日期:2026-07-14 范围:左侧 sidebar 6 个按钮点击后打开的弹窗/modal 的 UI 组件名 + 文件路径 关系:

  • 上游文档:游戏内按钮总览-v1.md — 按钮页面归属总览
  • 不在范围:启动页按钮(→ 启动页v1.3按钮需求-v1.md);button 的视觉/交互细节(本文只索引"哪个组件") 调用链:DesktopSidebar 6 button → App.tsx handler → state bool/view → <Component />

0. 一图速记(主表)

| # | sidebar 玩家文案 | handler(prop 名) | state 字段(App.tsx) | 渲染组件 | 文件 | |:-:|:--|:--|:--|:--|:--| | 1 | 账号 | onOpenAccountHub | setSystemHubView("account") | <SystemHubPanel activeView="account" /> | src/components/SystemHubPanel.tsx | | 2 | 门厅 | onOpenSystemHubHome | setSystemHubView("home") | <SystemHubPanel activeView="home" /> | src/components/SystemHubPanel.tsx | | 3 | 简报 | onOpenBriefing | setShowJianghuBriefing(true) | <JianghuBriefingPanel /> | src/components/JianghuBriefingPanel.tsx | | 4 | 事件目录 | onOpenEventDirectory | setShowEventTableDirectory(true) | <EventTableDirectoryPanel /> | src/components/EventTableDirectoryPanel.tsx | | 5 | 说明 | onOpenManual | setShowManual(true) | <HelpManual /> | src/components/HelpManual.tsx | | 6 | 路线 | onOpenRoadmap | setShowRoadmap(true) | <DevelopmentRoadmap /> | src/components/DevelopmentRoadmap.tsx |

调用源头:src/components/DesktopSidebar.tsx line 33-91(button 6 个,都包了 onClick)

1. 关键发现(避免后续误读)

1.1 「账号」和「门厅」是同一个组件

  • 都用 <SystemHubPanel />,只是 activeView prop 不同。
  • 视觉/数据/代码路径完全相同,只是默认 Tab 不一样:
    • 「账号」→ 打开后立即在 账号 Tab(profileState GlobalProfile)
    • 「门厅」→ 打开后立即在 总览 Tab(账号与周目 + Year1 + Buff/客栈/终局快捷入口)
  • 切换:弹窗内的 6 个 Tab 按钮可互切(总览/账号/周目/Buff/客栈/终局)
  • 额外入口:header 右上「门厅」按钮也走 onOpenSystemHubHome,同样打开 SystemHubPanel(默认 home)

1.2 「事件目录」有两个同名文件,只有 1 个在用

| 文件 | 状态 | 备注 | |:--|:-:|:--| | src/components/EventTableDirectoryPanel.tsx | ✅ 在用 | App.tsx line 143 import,line 7678 渲染,接 tables={GAME_EVENT_TABLES} | | src/components/EventDirectoryPanel.tsx | 🟡 疑似旧版 | line 12 有「事件目录」字串,但没在 App.tsx import |

建议:EventDirectoryPanel.tsx 大概率是历史遗留或并存,后续清理时确认下。

1.3 「简报」=「江湖简报」

  • 组件名 JianghuBriefingPanel = 玩家文案「江湖简报」
  • 简报是中央奏折告示风 modal,min(96vw,44rem) 宽,熟宣纸 + 红木描边(App.tsx line 7644 注释明示)
  • props:report + taskLineFailureSummary + onClose + onMinimize + closeLabel + openingPending
  • 「确认开业」分支:早间简报打开时,closeLabel 会切到「确认开业」,关闭即触发 handleMorningBriefingClose(App.tsx line 7661)

1.4 「说明」是唯一无 modal 包裹的弹窗

  • App.tsx line 7856:{showManual && <HelpManual key="help-manual" onClose={...} />}
  • 其他 5 个都包在 <AnimatePresence> + <motion.div> 里做缩放/淡入动画
  • 推测:HelpManual 自己处理动画(GSAP 或 framer-motion)

1.5 「路线」带「跳转到下一阶段」

  • 组件名 DevelopmentRoadmap,props:isOpen + onClose + onJumpToPhase
  • onJumpToPhase 触发:关闭路线 + 切到 staff Tab(App.tsx line 7838-7842)
  • 不是纯只读页,有"看完路线 → 直达下一阶段"功能

2. state 字段(用于联调/改代码定位)

| state | 类型 | 默认 | 关闭时 | |:--|:--|:--|:--| | showManual | boolean | false | setShowManual(false) | | showRoadmap | boolean | false | setShowRoadmap(false) | | showJianghuBriefing | boolean | false | setShowJianghuBriefing(false) | | showEventTableDirectory | boolean | false | setShowEventTableDirectory(false) | | showSystemHub | boolean | false | closeSystemHub() | | systemHubView | SystemHubView(枚举) | "home" | (随 showSystemHub 关闭) |

集中定义:App.tsx line 905-926,9 个 useState 挨着。 集中关闭:App.tsx line 3401-3406(早间强制收口时一次性 close 一片)。

3. 重复入口汇总(同组件多入口)

| 组件 | 入口数 | 入口 | |:--|:-:|:--| | SystemHubPanel(default home) | 3 | sidebar「门厅」/ header「门厅」/ 弹窗内头像按钮(切到 home) | | SystemHubPanel(default account) | 1 | sidebar「账号」| | JianghuBriefingPanel | 4+ | sidebar「简报」/ 弹窗头部「简报」/ 总览 Tab「江湖简报」/ 早间自动开(App.tsx line 1165/1272-1275) | | EventTableDirectoryPanel | 3 | sidebar「事件目录」/ 弹窗头部「事件目录」/ 总览 Tab「事件目录」 | | HelpManual | 2+ | sidebar「说明」/ header「说明」/ 首次运行引导(FirstRunGuide line 7827) | | DevelopmentRoadmap | 2+ | sidebar「路线」/ header「路线」/ 首次运行引导(FirstRunGuide line 7827) |

4. 关联文档

| 文档 | 关系 | |:--|:--| | 游戏内按钮总览-v1.md | 按钮页面归属总览(本索引的上游) | | 启动页v1.3按钮需求-v1.md | 启动页按钮(不在本索引范围)| | 主厅总览页精简方案-v1.md | 主页布局 5 固定元素(含 AppHeaderBar / DesktopSidebar)| | src/App.tsx line 905-926 | 9 个 state 集中定义 | | src/App.tsx line 7229-7308 | DesktopWorkspacePanel 注入 handler(将 handler 透传到 sidebar)| | src/App.tsx line 7637-7856 | 4 个弹窗的渲染位置 | | src/components/DesktopSidebar.tsx | sidebar 6 按钮源头 | | src/components/SystemHubPanel.tsx | 账号/门厅 共享组件 |

5. 维护

| 项 | 内容 | |:--|:--| | 文档版本 | v1(2026-07-14) | | 触发 | P1 问"左边按钮打开的 UI 名字",出索引稿 | | 下一步 | 清理 EventDirectoryPanel.tsx(疑似旧版);若 P1 同意,可把本文缩成"总览"附录,避免与 v1 文档重复 | | 维护责任 | 任何 sidebar 弹窗的新增/替换都要回写本表 |