《同福客栈》掌柜府第 (InnkeeperHall) UI 设计与交互规范 · 完成设计

本篇文档整理了游戏启动与多周目入口界面——掌柜府第 (InnkeeperHall) 的 UI 设计、组件拆分、交互逻辑与状态流转规范。

一、界面定位与视觉风格

1.1 界面定位

掌柜府第是玩家进入游戏后的首屏/主菜单界面。在无中心服务器的 LocalStorage 本地存储架构下，它承担了“账号切换”、“存档管理（多周目）”、“继续/重开/换档”等核心入口功能。

1.2 视觉风格

背景色调：采用古风渐变径向背景（深褐、红褐到暗黑的渐变），色值如 bg-[radial-gradient(circle_at_top,rgba(67,42,28,0.42)_0%,rgba(24,15,10,0.9)_45%,rgba(11,7,5,0.98)_100%)]。
文字颜色：主文字采用米黄色 #f5e6d3，辅助文字采用淡褐色 #d7ccc8 或 #bcaaa4，高亮/主按钮文字采用白色或深褐色 #5d4037。
边框与卡片：深红褐色木质包边（如 #8d6e63、#6d4c41），卡片背景采用半透明深褐 bg-[#2f201c]/85 或 bg-[#3e2723]/70。

二、页面布局与组件拆分

掌柜府第界面（InnKeeperHall）整体采用双栏栅格化布局（在宽屏下为左右分栏，窄屏下自动流式堆叠）：

2.1 左侧栏：掌柜府第（账号/账本管理）

标题：掌柜府第（小字，#d7ccc8）
当前账号：大字显示当前活跃的掌柜名称（如“新掌柜”或玩家自定义名称）。
传承点数：显示全局跨周目货币“传承点”（legacyPoints）。
活跃槽位提示：显示最近一次活跃的存档槽位（如“Slot 1”）。
账本列表：
- 渲染当前设备上已创建的所有本地账本（账号）。
- 当前活跃账本高亮显示（border-[#d7ccc8] bg-[#5d4037]）。
- 非活跃账本显示为暗色按钮，点击可切换账号。
新建账本按钮：虚线框按钮（border-dashed border-[#8d6e63]），点击可创建新账本。

2.2 右侧栏：周目与存档管理

主标题：继续你的同福客栈
副标题/提示：每次刷新先回掌柜府第，再决定继续、重开或换档。
核心操作区（三列/两列按钮组）：
1. 继续上次的周目：
  - 若存在最近活跃槽位，则为高亮米白底色按钮（bg-[#fffaf2] text-[#5d4037]），下方展示该槽位的游戏时间（如“第 X 天 · 傍晚”）。
  - 若无活跃槽位，则置灰禁用。
2. 重开新周目：
  - 高亮米白底色按钮，下方提示“手动选择空槽，不做自动分配”。
3. 换档：
  - 高亮米白底色按钮，下方提示“切到已有非空 slot”。
存档槽位预览区：
- 横向平铺展示所有存档槽位（如 Slot 1, Slot 2, Slot 3）。
- 每个槽位卡片展示：
  - 槽位编号（如 Slot 1）。
  - 槽位状态：若为空则显示“空槽”；若非空则显示“游戏时间 · 周目数”（如“第 12 天 · 周目 2”）。

三、交互逻辑与弹窗流转

掌柜府第通过 WelcomeGate 统一管理状态，并包含两个核心模态弹窗：

3.1 确认继续/进档弹窗 (`ResumeConfirmModal`)

触发时机：玩家点击“继续上次的周目”或在换档列表中选择了一个非空槽位。
展示内容：
- 标题：“掌柜的，要继续吗？”
- 存档简要数据：展示该槽位的游戏时间、铜钱数量、声望值。
操作按钮：
- 确认进入：高亮深褐底色按钮，点击正式载入该存档并进入游戏。
- 重开新周目：提供快捷重开入口。
- 换档：提供快捷换档入口。
- 关闭：关闭弹窗。

3.2 槽位选择弹窗 (`SlotPickerModal`)

触发时机：玩家点击“重开新周目”或“换档”。
模式区分 (SlotPickerMode)：
- 重开模式 (restart)：
  - 标题：“选择新周目的存档位置”
  - 规则：只允许选择“空槽”（allowOccupied: false），非空槽位按钮置灰禁用。
- 换档模式 (switch-slot)：
  - 标题：“选择要载入的存档”
  - 规则：允许选择任意槽位（allowOccupied: true），点击非空槽位会触发确认弹窗。
操作按钮：
- 槽位按钮：点击对应的 Slot 按钮进行选择。
- 关闭：关闭弹窗。

四、状态机与数据结构

4.1 核心数据结构 (TypeScript)

// 欢迎界面操作意图
export type WelcomeActionKind =
  | 'continue'
  | 'restart'
  | 'switch-slot'
  | 'switch-account'
  | 'create-account';

export interface WelcomeActionIntent {
  kind: WelcomeActionKind;
  slotId?: number | null;
  profileId?: string | null;
}

// 槽位选择器配置
export interface SlotPickerMode {
  kind: 'restart' | 'switch-slot';
  title: string;
  note: string;
  allowOccupied: boolean;
}

4.2 交互状态流转图

[ 掌柜府第主界面 ]
   │
   ├──► 点击 [继续上次的周目] ──► 触发 ResumeConfirmModal (确认继续) ──► 确认 ──► 进入游戏大堂
   │
   ├──► 点击 [重开新周目] ─────► 触发 SlotPickerModal (仅限空槽) ───► 选择空槽 ──► 初始化新周目 ──► 进入游戏大堂
   │
   ├──► 点击 [换档] ──────────► 触发 SlotPickerModal (所有槽位) ───► 选择槽位 ──► 触发 ResumeConfirmModal ──► 进入游戏大堂
   │
   ├──► 点击 [切换账本] ────────► 切换当前活跃 Profile ──► 重新加载对应的 slots 列表
   │
   └──► 点击 [新建账本] ────────► 触发新建账号流程

一、 界面定位与视觉风格