《同福客栈挂机游戏》启动页 v1.3 按钮需求规范 · 活跃设计

文档状态：v1.3 需求稿(草稿,等 P1 拍板) 拍板日期：2026-07-13 17:58 (Asia/Shanghai) 上游契约：启动页UI规范-v1.md (v1.2 · Tavern Ink & Gold) 下游产出：v1.3 实施切片(本文 §6) 范围：仅启动页可见按钮的"v1.3 行为契约",不动代码 关系：本文是施工蓝图的输入,不替代 v1.2 视觉规范

0. 拍板速览(2026-07-13 17:58 · P1 拍板)

| # | 按钮 | 位置 | v1.2 现状 | v1.3 拍板 | 优先级 | |:-:|:--|:--:|:--|:--|:-:| | 1 | 排行榜 | 顶部导航 | 🟡 仅切 active | 接入真实排行榜 | P0 | | 2 | 百科(知识库) | 顶部导航 | 🟡 仅切 active | 接入知识库 | P0 | | 3 | 新闻公告 | 顶部导航 | 🟡 仅切 active | 接版本更新 | P0 | | 4 | 下载 | 顶部导航 | 🟡 仅切 active | 占位 modal | P1 | | 5 | 登录/注册 | 顶部导航 | 🟡 仅切 active | 占位 modal | P1 | | 6 | 烛火音乐 | 顶部右侧 | 🟡 UI 通/无音频 | 不动(等音频资源) | Hold | | 7 | 支持我们(顶) | 顶部右侧 | 🔴 无 onClick | 接微信收款码 | P0 | | 8 | 加入官方 Discord | 底部社区 | 🟡 仅切 active | 换成微信群二维码 | P0 | | 9 | 开源项目 | 底部社区 | 🟡 仅切 active | 整条移除 | — | | 10 | 支持我们(底) | 底部社区 | 🟡 仅切 active | 整条移除(跟顶部重复) | — | | 11 | 用户协议 / 隐私政策 / 游戏许可 | 底部法律 | 🟡 占位 | 不动 | Hold | | 12 | 简体中文(语言) | 底部设置 | 🟡 Stub | 不动 | Hold | | 13 | 画质 - 中 | 底部设置 | ✅ 真实 | 不动 | — | | 14 | 全屏 | 底部设置 | ✅ 真实 | 不动 | — | | 15 | 印 Logo | 顶部左 | 🟡 装饰 | 不动 | — | | 16 | 主存档卡 / 继续经营 / 重新开局 / 读档经营 / 3 存档位 | AuthCard | ✅ 真实 | 不动 | — | | 17 | 游戏设置 | AuthCard | 🟡 v1.2 占位 | 不动(走单独 v1.3 切片) | v1.3 另议 | | 18 | 七侠镇印章 | Hero | ✅ Q5 彩蛋 | 不动 | — |

8 个按钮需要 v1.3 落地(1-3 / 4-5 / 7 / 8)+ 2 个按钮移除(9-10)。

1. 资源清单(2 张图,P1 上传)

落地路径建议: public/assets/external/ 提交规范: 二进制资源走 Git LFS 或独立 CDN,不进 main 分支大文件提交。

1.1 微信群二维码

1.2 微信收款码

2. 顶部导航 5 项拍板

2.1 排行榜 [P0]

2.2 百科(知识库) [P0]

| 维度 | 拍板 | | :-- | :-- | | 入口 | 点击顶部「百科」→ 弹 modal + 左侧索引 / 右侧详情(双栏布局) | | 内容范围 | 顾客 / 员工 / 装备 / 食材 / 客栈建筑 / 江湖势力 / 经营系统 | | 数据源 | ❓ Open:Markdown 文件 / JSON / IndexedDB? | | 形态 | 静态查阅,不接编辑 | | 空态文案 | "江湖典籍正在编纂中" | | 样式 | 沿用 v1.2 modal 视觉 + 行楷标题(Noto Serif SC) | | 依赖 | 知识库内容就位(谁写?写在哪?) |

2.3 新闻公告(版本更新) [P0]

| 维度 | 拍板 | | :-- | :-- | | 入口 | 点击顶部「新闻公告」→ 弹 modal / 抽屉,倒序最新在上 | | 内容 | 版本号 · 发布时间 · 标题 · 变更摘要(新增 / 调整 / 修复) | | 数据源 | ❓ Open:跟 package.json version 联动?独立 changelogs/landing-news.md? | | 维护责任 | P1 手动维护(每次发版后追加一条) | | 空态文案 | "暂无新公告" | | 样式 | 沿用 v1.2 modal 视觉 + 印章红"新"角标(7 天内的新条目) | | 依赖 | 决定内容存储格式 + 谁写 + 写在哪 |

2.4 下载 [P1 · 占位]

| 维度 | 拍板 | | :-- | :-- | | 入口 | 点击顶部「下载」→ 弹 modal | | 占位文案 | "独立客户端正在筹备中 · 暂请收藏本站链接" | | 样式 | 沿用 v1.2 modal 视觉 | | 后续 | v1.4+ 出独立客户端时再实化 |

2.5 登录/注册 [P1 · 占位]

| 维度 | 拍板 | | :-- | :-- | | 入口 | 点击顶部「登录/注册」→ 弹 modal | | 占位文案 | "账号体系筹备中 · 当前所有数据存本机(浏览器 localStorage)" | | 样式 | 沿用 v1.2 modal 视觉 | | 后续 | 接 v1.4+ 真实账号(暂未规划) |

3. 顶部右侧:支持我们(改)

3.1 接微信收款码

| 维度 | 拍板 | | :-- | :-- | | 入口 | 点击顶部右侧 ❤「支持我们」→ 弹 modal | | modal 内容 | 微信收款码图 + 收款人昵称"一只锋仔。"(末 2 字 **锋) | | modal 尺寸 | 中等 modal(QR 居中 320x320px,周围留白) | | 文案 | "推荐使用微信支付" + "您的支持是我们继续开发的动力" | | 关闭 | 弹窗外点击 / Esc / 右上角 × | | 重复定位 | ⚠️ 底部「支持我们」整条移除(避免 2 个入口) |

4. 底部社区入口 3 项 → 变 1 项

4.1 加入官方微信群(替换 Discord) [P0]

4.2 开源项目 - 整条移除

| 维度 | 拍板 | | :-- | :-- | | 决策 | 不在产品定位内,整条移除 | | 实施 | 从 FOOTER_CONTENT.community 数组删 github 条目 | | 资产 | 不需要 |

4.3 支持我们(底部) - 整条移除

| 维度 | 拍板 | | :-- | :-- | | 决策 | 跟顶部「支持我们」重复,整条移除 | | 实施 | 从 FOOTER_CONTENT.community 数组删 donate 条目 | | 理由 | 单一入口避免用户认知混乱 |

5. v1.3 落地原则(三条共识)

启动页单屏(h-screen overflow-hidden),跳路由会破坏视觉仪式感
所有 v1.3 接入 / 占位按钮 → 弹 modal(沿用 v1.2 modal 视觉)

5.2 数据存读:简单优先,避免 schema 污染

排行榜 / 百科 / 新闻公告 不进存档 schema — 启动页是常驻 UI 层
跨设备同步 v1.3 不做 — 单设备 localStorage 即可
历史内容(百科、公告)走静态文件(Markdown / JSON),build 时打包

5.3 资源维护:谁上传谁负责

微信群二维码:P1 7 天滚动续期(配 cron self-reminder 提醒)
微信收款码:P1 变更时更新
排行榜 / 百科 / 新闻公告内容:P1 手动维护(v1.3 不接后端)

6. 实施切片建议(8 件事的执行顺序)

| 序 | 任务 | 预估工时 | 前置 | 阻塞 | |:-:|:--|:-:|:--|:--| | 1 | 资源落地:微信群 + 微信收款 2 张图 → public/assets/external/ | 5min | P1 上传 | — | | 2 | 数据层:src/data/landing/externalContent.ts(排行榜 / 百科 / 新闻公告静态数据入口) | 30min | 1 | — | | 3 | 逻辑层:src/utils/landing/externalContentLogic.ts(排序 / 过滤 / 空态) | 30min | 2 | — | | 4 | UI 层:src/components/landing/modals/(新建 5 个 modal:排行榜/百科/公告/微信群/微信收款) | 2h | 1,2,3 | — | | 5 | UI 层:src/components/landing/modals/(新建 2 个占位 modal:下载/登录) | 30min | — | — | | 6 | 改 HeaderBar:6 项菜单 + 支持我们接 onClick | 30min | 4,5 | — | | 7 | 改 FooterBar:移除 github + donate + Discord→微信群 | 20min | 1,4 | — | | 8 | 改 data/landing/config.ts:删 2 条 + 加 1 条 community | 10min | 7 | — |

总预估:~4.5h(单人,不算 Open Questions 解决时间)

7. Open Questions(待 P1 拍板 · 阻塞实施)

以下 5 个问题不解决,v1.3 实施切片没法起。P1 拍板后填进本表"拍板"列。

| # | 问题 | 候选方案 | 影响范围 | 拍板 | |:-:|:--|:--|:--|:--| | Q1 | 排行榜数据源是什么? | (a) 跨周目单设备榜(读 localStorage playthroughVaultState)
(b) 跨设备榜(需后端,v1.3 不做)
(c) 当前周目榜(临时) | 排行榜 modal 全部逻辑 | ⬜ | | Q2 | 百科内容在哪? | (a) 项目内 Markdown 目录
(b) 独立 JSON 文件
(c) 暂用空态"江湖典籍正在编纂中" | 百科 modal 全部内容 | ⬜ | | Q3 | 新闻公告存哪 + 怎么写? | (a) docs/news/CHANGELOG.md 自动读最新 N 条
(b) 独立 data/landing/news.json 手动维护
(c) 跟 package.json version 联动 | 新闻公告 modal + 维护流程 | ⬜ | | Q4 | 新 modal 视觉沿用 v1.2 还是做简化版? | (a) 完整 v1.2 modal(墨金酒馆)
(b) 简化版(纯黑底 + QR + 文案) | 4-5 个 modal 的视觉工时 | ⬜ | | Q5 | 微信群二维码过期自动提示? | (a) build 时读文件 mtime,过期前 3 天打 warning
(b) 纯 P1 手动 + 自我提醒
(c) 运行时检查 + 自动隐藏 | 维护流程 | ⬜ |

8. Hold 项(明确不动)

| # | 项 | Hold 原因 | |:-:|:--|:--| | H1 | 烛火音乐真实音频 | 等 Q1 音频资源到位(项目音频管线未建) | | H2 | 用户协议 / 隐私政策 / 游戏许可 modal | 法务文案未拍板,v1.4+ | | H3 | 语言选择接真实 i18n | 项目无 i18n 框架,v1.4+ | | H4 | 游戏设置 modal | 跟 v1.3 另议(本文不覆盖) | | H5 | 烛火音乐 + 画质 + 全屏 | 现状已通,不动 |

9. 不做的事(移除清单)

| # | 项 | 移除原因 | |:-:|:--|:--| | R1 | 底部「开源项目」 | 不在产品定位 | | R2 | 底部「支持我们」 | 跟顶部重复 |

10. 版本 & 维护

| 项 | 内容 | | :-- | :-- | | 文档版本 | v1(2026-07-13) | | 关联文档 | 启动页UI规范-v1.md | | 下一步 | P1 拍板 §7 五个 Open Questions → 拆 v1.3 实施切片 | | 维护责任 | P1 拍板 · 实施期归实施工人 · 资源(微信群 QR)归 P1 |