《同福客栈》掌柜府第 (InnkeeperHall) 迭代优化方案

基于当前 InnKeeperHall.tsx 的实现，对比《游戏启动与多周目系统 UI/UX 设计文档》的规划，我们发现当前版本在视觉包装、全局系统整合、数据安全保障、以及开局仪式感上仍有较大的提升空间。

以下是针对“掌柜府第”的迭代优化方案：

一、 视觉与布局优化 (Visual & Layout)

1.1 强化古风国潮视觉包装

• 背景与特效：
  • 在 InnKeeperHall 的背景中加入微弱的水墨微晕或晨光微熹动效（CSS Animation）。
  • 卡片边框引入木质纹理或宣纸质感，替代单纯的单色 border。
• 槽位卡片状态显性化：
  • 经营中槽位：卡片边缘增加淡绿色微晕，突出“继续经营”按钮。
  • 空闲槽位：采用虚线包边，底色调暗，点击时触发“天命挑选”过渡动画。
  • 待结算槽位（若有）：卡片边缘增加金黄色波纹流光，突出“金算盘结算”按钮。

1.2 响应式与指尖安全区设计

• 移动端适配：
  • 在竖屏模式下，将高频交互按钮（“继续经营”、“重开新周目”、“换档”）下移至屏幕中下段（拇指热区），避免单手握持时触控困难。
  • 底部引入固定导航栏（Bottom Tab Navigation），包含：[📜 江湖绘卷]、[🏮 传承商店]、[⚙️ 数据备份]。

二、 功能性迭代优化 (Feature Enhancements)

2.1 引入“数据行囊”（本地数据导入/导出）

由于游戏采用纯客户端 LocalStorage 存储，极易因浏览器清理缓存导致存档丢失。

• 优化方案：
  • 在界面右上角（横版）或右上方（竖版）增加一个**“皮革行囊”**图标按钮。
  • 点击后弹窗展示：
    • 【打包行囊（导出）】：一键将全局 Profile 和 3 个存档槽位序列化为 Base64 密文并复制到剪贴板，提示玩家妥善保存。
    • 【解开行囊（导入）】：提供文本框供玩家粘贴 Base64 密文，校验签名后载入数据并刷新页面。

2.2 整合“江湖绘卷”（成就）与“传承商店”

当前版本的掌柜府第仅展示了“传承点”，缺乏消费和查看成就的入口。

• 优化方案：
  • 横版：右侧区域划分为双标签页（Tabs），使用木质书签挂件样式，支持在“江湖绘卷”与“传承商店”之间切换。
  • 竖版：点击底部 Tab 时，从屏幕下方拉起一个古风抽屉式半屏弹窗（Half-Screen Modal），允许玩家在不离开当前界面的情况下浏览和购买。
  • 传承商店：允许消耗传承点购买“下局初始资金+500文”、“小贝开局携带糖葫芦”等特权。
  • 江湖绘卷：以画卷形式展示已解锁的全局成就（彩色工笔画）和未解锁成就（黑白剪影）。

2.3 仪式感极强的“天命传承”开张流程

当前点击“重开新周目”后直接进入游戏，缺乏代入感。

• 优化方案：
  • 点击空闲槽位开启新周目时，进入“开张准备”四步曲：
    1. 取字号：自定义客栈牌匾字号。
    2. 带随身行囊：勾选并消耗传承点购买本局初始特权。
    3. 挑战词条：可选“重税时代”等负面词条以换取通关后的传承点加成。
    4. 按手印开张：展示“开张契约”宣纸，玩家点击按压印章，触发墨迹晕开效果并转场。

三、 交互与动效优化 (UX & Motion)

3.1 声音与动效反馈

• 翻书声：切换账号或切换右侧标签页时，播放清脆的纸张摩擦声。
• 金币坠落：点击结算或购买传承特权时，播放金币碰撞音效。
• 印章盖章声：开张按手印时播放沉闷的木质盖章声。

3.2 骨架屏与平滑过渡

• 在切换账号或加载存档列表时，使用古风宣纸质感的骨架屏（Skeleton Screen）平滑过渡，避免界面闪烁。