《同福客栈挂机游戏》启动页 UI/UX 设计规范 (Landing Page Spec v1.2) · 活跃设计

文档状态：v1.2（Tavern Ink & Gold 模板重构版） 适用范围：Web 横版启动页（Landing Page），视口宽度 ≥ 360px 设计日期：2026-07-06（v1.2 重构）· 2026-07-03（v1 初稿） 设计语言：Tavern Ink & Gold（墨金酒馆风）— 详见 §1.1 核心骨架：「Header / Hero / Center Card / Footer」四段式（保留自 v1 WoC 借鉴） 视觉气质：夜行客栈的烟火气 + 金漆大字的庄重 + 墨色木器的沉稳 本文不动代码，仅作设计契约与施工蓝图。

0. 设计初衷与一句话定位

「继续你的同福客栈」 —— 把"上线"这件事做成"再回同福客栈看一眼"的归位仪式。墨色打底、金漆点睛、夜色灯笼里透出"江湖还在等你"。

v1.2 在 v1「宣纸·朱砂·红木」暖琥珀路线的基础上，整体改用「Tavern Ink & Gold」墨金酒馆路线——参考用户在 pic/启动页/ 下交付的整套素材（详见 §1 资产清单），色板、字体、圆角、深度机制全面更新。

骨架沿用 World of Claudecraft 的"Header / Hero / Center Card / Footer"四段式，但完全剥离 WoC 的西式 / 魔兽美术，全部用中式古风视觉语言（参考项目 docs/art/tongfu-art-style-guide-v1.md 美术风格指南 v1）。

1. 设计语言与资产清单

1.1 核心设计语言：Tavern Ink & Gold（墨金酒馆）

用户在 pic/启动页/tavern_ink_gold/DESIGN.md 交付的完整 Token YAML，本规范全面继承。设计哲学：Sophisticated, Atmospheric, Authoritative — 让用户感觉是"活在呼吸世界里的掌柜"。

视觉风格：Tactile Retro-Oriental（触感复古东方）

Atmospheric Depth：墨晕 + 柔光营造场所感
Wabi-Sabi Textures：旧羊皮纸 / 旧木 / 旧丝的岁月感
Calligraphic Precision：传统毛笔笔触 + 现代结构化布局
Golden Accents：金色金属光泽点出"价值 / 稀有 / 可交互"vs 暗沉墨色背景

五种色彩角色

| 角色 | 色值 | 用途 | |:-----|:-----|:-----| | Primary · Tavern Gold | #f2ca50 | 激活态 / 关键 CTA / 标题 | | Background · Ink Carbon | #17130f | 不是真黑，是"高饱和深棕灰"——像干墨在旧木上 | | Accent · Stamp Red | (seconday container) | 仅用于"印章"特效 / 通知 / 状态 | | Text · Antique Bone | #eae1da | 米白 / 偏黄，避免深背景上刺眼 | | Outline · Ghost Border | #99907c | 1px 风化金或木棕细线 |

完整 Token 见 §9。

1.2 资产清单（用户在 `pic/启动页/` 交付）

| 资产 | 路径 | 用途 | 状态 | |:-----|:-----|:-----|:----:| | 🖼 启动页主参考（master mockup） | pic/启动页/image.png/screen.png | 1600×875 完整页面布局参考 | ✅ 到位（v1.2 视觉契约） | | 📐 Tavern Ink & Gold Token YAML | pic/启动页/tavern_ink_gold/DESIGN.md | 完整设计系统（色 / 字体 / 形状 / 深度） | ✅ 到位（§9 直接继承） | | 🔖 品牌 Logo 完整版 | pic/启动页/logo_2/screen.png | 「同福客栈经营模拟」金字 + 红"印" 印章（带金框） | ✅ 到位（§3.1 顶部 Logo 用） | | 🔖 品牌 Logo 窄版 | pic/启动页/logo_1/screen.png | 「同福客栈」+ 红"七侠镇"印章（窄横排） | ✅ 到位（备用） | | 🌙 背景图 · 石桥夜巷 | pic/启动页/a_cinematic_high_detail_background_of_a_traditional_chinese_ancient_town_at_1/screen.png | 1376×768 静态背景 | ✅ 到位（§7 主背景备选 A） | | 🌙 背景图 · 多层木楼夜店 | pic/启动页/a_cinematic_high_detail_background_of_a_traditional_chinese_ancient_town_at_2/screen.png | 1376×768 静态背景（带"同福客栈"招牌） | ✅ 到位（§7 主背景备选 B） | | 💾 存档卡组件 | pic/启动页/_1/screen.png + code.html | "七侠镇新掌柜" 存档卡 SVG 模板 | ✅ 到位（§5.2 主存档卡用） | | 📝 登录表单（备用） | pic/启动页/_2/screen.png + code.html | "掌柜登录" 表单（客官名讳 + 密电） | ✅ 到位（v1.3 登录/注册 modal 备用） | | 🎬 视频背景（v1.1 旧版） | generated/seedance/tongfu-tavern-standard-timeline-20260706-151530.mp4 | 8s 主厅广角横移 | ⚠️ 降级为 v1.3 可选（v1.2 用静态图优先） |

1.3 v1 → v1.2 关键变化速览

| 维度 | v1 | v1.2（Tavern Ink & Gold） | |:-----|:---|:-----------------------------| | 主色 | 暖琥珀 #FAF6F0 | 墨金 #17130f + #f2ca50 | | 中央 Logo | 朱砂墨印 96px | 金漆大字 + 红印章 | | 文字字体 | Noto Serif SC（统一） | Noto Serif SC（标题） + Source Serif 4（正文） + Source Sans 3（UI） | | 圆角 | 12-24px | 0 - 0.5rem（仿手工木器） | | 深度 | box-shadow 投影 | tonal stacking + 1px 金线 + "light up" 内发光 | | Hover | scale(1.02) + shadow | inner glow 增强 + 1px 金线变粗 | | AuthCard | 表单（掌柜名 + 剧本） | 存档槽管理器（主槽 + 3 动作 + 3 空槽） | | 菜单 | 鸣锣开业 / 邸报 / 风云榜 / 秘籍 / 客栈掌故 | 开始游戏 / 排行榜 / 百科 / 新闻公告 / 下载 / 登录/注册 | | Tagline | 踏入七侠镇，开张您的江湖 | 从一家小客栈开始，书写属于你的江湖传奇 | | 背景 | 视频循环 | 静态 cinematic 夜景 + 强 vignette + ink wash blur |

2. 整体页面栅格架构（迭代于初版）

2.1 三层 → 四层结构（v1 关键迭代）

初版是三层（Header / Center Card / Footer）。v1 引入第四层 —— Hero 区，原因是：

WoC 的"仪式感"几乎全部来自中央大 Logo + 副标题 + 描述段，缺了这一层，"启动页"就退化为"登录页"。
用户初版只把 Logo 放到 Header 左侧，没有中央仪式。这会让首屏看起来"缺一口气"。

┌──────────────────────────────────────────────────────────────┐
│  HEADER BAR · 顶部导航栏                                     │  z-50, h-[64px]
│  [Logo·小印]  [Nav Menu 5项]  [Music] [Donate]              │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│                HERO · 中央仪式区                              │  z-10, 自适应高度
│                                                              │
│              ┌──────────────────────────┐                   │
│              │   「同福客栈」大篆刻     │                   │   <-- 朱砂墨印 + 烫金
│              │                          │                   │
│              │  七侠镇 · 江湖一梦        │                   │   <-- 烫金副标题
│              │                          │                   │
│              │  「此间客栈，三教九流…  │                   │   <-- 话本描述段
│              │     皆是半生快意。」     │                   │
│              └──────────────────────────┘                   │
│                                                              │
├──────────────────────────────────────────────────────────────┤
│                  AUTH CARD · 投宿登记卡片                     │  z-20, w-[420px]
│                  ┌──────────────────────┐                   │
│                  │ [步 入 江 湖]        │                   │   <-- 朱砂大标题
│                  │ ─────────────────    │                   │
│                  │ [飞鸽传书登录]       │                   │
│                  │ OR 用掌柜大名登门    │                   │
│                  │ [掌柜大名]  Input    │                   │
│                  │ [密语暗号]  Input    │                   │
│                  │ [官府验明正身] 滑块  │                   │
│                  │ ─────────────────    │                   │
│                  │ [投宿登记（开张）]   │                   │   <-- 朱红主按钮
│                  │ 以过客身份踏入 →     │                   │
│                  └──────────────────────┘                   │
│                                                              │
├──────────────────────────────────────────────────────────────┤
│  FOOTER BAR · 底部信息栏                                     │  z-50, h-[48px]
│  [GitHub][Discord][Donate]  [V1.15.1 · 版权]  [语言][画质][烛火] │
└──────────────────────────────────────────────────────────────┘

2.2 顶层容器（Tailwind）

<div class="relative h-screen w-screen overflow-hidden bg-[#F5F2EB] flex flex-col">
  <!-- 背景层（v1.1 简化：仅视频作底，无装饰层） -->
  <VideoBackdrop />   <!-- z-(-10)：主厅广角视频循环 -->

  <!-- 内容层 -->
  <HeaderBar className="z-50" />
  <main class="relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 gap-8">
    <HeroSection />
    <AuthCard />
  </main>
  <FooterBar className="z-50" />
</div>

关键决策：

整体 h-screen overflow-hidden，保证无滚动条。
垂直用 flex-col，内容用 justify-center，让 Hero + Auth 居中。
Header / Footer 用 absolute 钉死（不再用 flex 的两端贴齐）—— 这样 Hero 区可以"穿透"到底部，营造中堂客栈的纵深。

3. 顶部导航栏（HeaderBar）详细规范（v1.2 Tavern Ink & Gold）

参考 pic/启动页/image.png/screen.png 主参考图（顶部约 60px 高度）。墨色 + 金色描边 + 透明 backdrop。

3.1 容器

<header class="absolute top-0 left-0 right-0 z-50 px-16 py-4 flex items-center justify-between"
  style="background: linear-gradient(180deg, rgba(17, 14, 10, 0.85) 0%, rgba(17, 14, 10, 0) 100%);
         backdrop-filter: blur(8px);">

背景：从顶部 85% 透明度向下淡出到 0（让背景视频 / 图透出）
内边距：水平 64px（桌面端 §11），垂直 16px
高度：约 60px

3.2 三段结构

3.2.1 左侧：品牌 Logo + 标识

| 元素 | 视觉 | 来源 | |:-----|:-----|:-----| | 小图标 | 36×36px 圆形「印」章（红 #fb9f66 底色 + 白字"印"） | 用户自定 | | 主标 | 同福客栈经营模拟（手写楷体，16-18px，金 #f2ca50，字距 0.05em） | 用户素材 logo_2 | | 副标 | TONGFU TAVERN SIMULATOR（大写英文，10-11px，灰 #8b7355） | 用户素材 logo_2 | | 点击行为 | 回到当前页（启动页本身） | — |

3.2.2 中间：6 项菜单（v1.2 重写）

「 开始游戏 」「 排行榜 」「 百科 」「 新闻公告 」「 下载 」「 登录/注册 」

UX 规范（v1.2 Tavern Ink & Gold）：

| 状态 | 视觉 | | :--- | :--- | | 默认 | 文字 #eae1da（Antique Bone），字号 14px，字距 0.1em，Source Sans 3 | | Hover | 文字 → #f2ca50（Tavern Gold），1px 金线下划线淡入（宽度 60%，高度 1px，240ms cubic-bezier(0.16, 1, 0.3, 1)） | | Active（当前页，如「开始游戏」） | 金底矩形（background: #f2ca50; color: #3c2f00;）+ 圆角 0.25rem | | Disabled | 文字 → #4d4635，无横线 |

Active 视觉参考（来自主参考图）：开始游戏菜单被金色高亮矩形包裹，文字深金。其他菜单为默认骨白色。

3.2.3 右侧：2 个动作按钮（v1.2 简化）

[🎵 烛火音乐] [❤ 支持我们]

🎵 烛火音乐：
- 36×36px 圆角方块（border-radius: 0.5rem）
- 背景 rgba(255,255,255,0.05) + 1px 金色 ghost border
- Off 状态：图标 #99907c（outline），无动效
- On 状态：图标 #f2ca50（金），1.5s 内发光循环（box-shadow: 0 0 12px #f2ca50 inset）
❤ 支持我们：
- 实心金色按钮，金底深字
- 圆角 0.5rem（仿木钉帽）
- 文字「支持我们」+ ♡ 图标
- Hover：内发光增强 + 1px 金色外描边

3.3 与 v1 的差异

| 维度 | v1（v1.1 简版） | v1.2 Tavern Ink & Gold | |:-----|:----------------|:-----------------------------| | 菜单项 | 鸣锣开业 / 邸报 / 风云榜 / 秘籍 / 客栈掌故 | 开始游戏 / 排行榜 / 百科 / 新闻公告 / 下载 / 登录/注册 | | 主色调 | 朱砂红 #A62B2B | 酒馆金 #f2ca50 | | Active 视觉 | 红色细横线 | 金底矩形（v1.2 关键变化） | | Logo | 朱砂墨印 32px | 金字品牌标 + 圆形「印」章 | | 右侧按钮 | 4 个 | 2 个（音乐 + 支持） |

4. 中央仪式区（Hero Section）v1.2 Tavern Ink & Gold

参考 pic/启动页/image.png/screen.png 主参考图（中央约占 50% 高度）。金漆大字 Logo + 红印章 + 双行描述 + 细分隔金线。

4.1 容器

<section class="relative z-10 flex flex-col items-center text-center max-w-[1200px] px-16 mb-8">

位置：垂直居中（在 Header 与 AuthCard 之间，约占视口 30-40% 高度）
内边距：水平 64px（桌面端 §11）
最大宽度：1200px（与 §11 容器最大宽度一致）

4.2 四层信息栈（v1.2 重构）

4.2.1 主标题：金字「同福客栈」+ 红「七侠镇」印章

文字：「同福客栈」4 个字（金漆大字）
字体：ZhiMangXing（毛笔楷体，graphic asset 形式）叠加 金渐变（linear-gradient(180deg, #f2ca50 0%, #d4af37 60%, #735c00 100%)）
字号：clamp(56px, 8vw, 120px)（响应式大字号）
字距：0.05em（display-xl token，§9.2）
字重：700
位置：水平居中
印章：在「客栈」右上方加一个红「七侠镇」印章（36×54px 竖向，红 #753401 底色 + 白字"七侠镇"，书法体）
来源：用户素材 pic/启动页/logo_1/screen.png（窄版 Logo，4 字 + 印章）
不点击：v1.2 主标是装饰大字（不是按钮），Q5 问候语触发改到下方副标的红印章（§4.4）

4.2.2 副标题：「经营模拟」

位置：主标正下方
文字：「— 经营模拟 —」（左右各一条 1px 金线 + 文字）
字体：Noto Serif SC 700
字号：32px（headline-lg）/ 移动端 24px（headline-lg-mobile）
颜色：#f2ca50（Tavern Gold）
装饰线：左右两条 1px 金线（宽度 24px / 12px，高度 1px，颜色 #d4af37）

4.2.3 描述段（v1.2 双行 tagline）

位置：副标正下方
第一行（主标）：「从一家小客栈开始，书写属于你的江湖传奇」
- 字号 18px（body-md），字距 0.1em
- 颜色 #eae1da（Antique Bone 骨白）
- 行高 1.6
- 字体 Source Serif 4（衬线）
第二行（副标）：「体验真实的古代客栈经营，结识各路江湖豪杰，成就一代传奇掌柜」
- 字号 14px（caption），颜色 #d0c5af（on-surface-variant）
- 字体 Source Serif 4
行间距：主标与副标之间 8px
总宽度：max-w-[640px]，居中

4.2.4 分隔金线

位置：描述段下方 16px
样式：1px 高度，宽度 120px，颜色 #d4af37，水平居中
作用：传统匾额视觉收口

4.3 与 AuthCard 的视觉关系

Hero 区占垂直空间约 30%（不含 Header / Footer）
AuthCard 距 Hero 底部 32px
整体形成「仪式层 → 存档层」的视觉漏斗：先被氛围感染，再选档开张

4.4 掌柜问候语（v1 拍板纳入 · v1.2 触发源改到副标印章）

启动页不只是入口，也是"踏入江湖"的角色扮演仪式。点击副标「七侠镇」印章触发随机角色的古风短句问候（v1.2 改触发源）。

4.4.1 触发

触发源：单击 Hero 副标「七侠镇」印章（36×54px 竖向印章，§4.2.1 描述）
触发反馈：印章先做一次"挑亮"一闪（240ms，scale 1 → 1.05 → 1 + 1px 金色 outer glow），再弹出问候语
重复触发：上一次弹窗关闭后 800ms 内不重复触发（防误触）

4.4.2 弹窗位置与样式（v1.2 暗色风格）

位置：在 Hero 区副标印章的正下方 24px，水平居中
尺寸：宽 max-w-[320px]，高度自适应（2-4 行内容）
样式（v1.2 Tavern Ink & Gold）：
- 背景 surface-container-high #2e2925 opacity 95%
- 描边 1px solid #99907c（Ghost Border）
- 圆角 0.5rem（lg，sharp 木器感）
- 投影：v1.2 不用 box-shadow，用 1px 内描边金线 + 内发光
内容结构（自上而下）：
1. 角色名（14px + 金色 #f2ca50 + Source Serif 4 加粗）
2. 分隔线 1px dashed #99907c
3. 问候正文（15px + #eae1da + 行高 1.7 + Source Serif 4）
4. 落款（11px + #99907c，右对齐）

4.4.3 角色与文案池（v1 起步 6 角色 · v1.2 沿用）

| 角色 | 风格 | 文案示例 | |:-----|:-----|:---------| | 白展堂（盗圣/跑堂） | 嘴贫、有江湖气 | "嘿，掌柜的，今儿风平浪静，宜开张。" | | 佟湘玉（掌柜） | 抠门又仗义、陕西腔 | "额跟你说，进了额这店，就得守额的规矩。" | | 郭芙蓉（杂役） | 火急火燎、女侠梦 | "本女侠今日不当值，休想使唤额！" | | 吕秀才（账房） | 文绉绉、嘴碎 | "君子和而不同，江湖儿女，亦当如是。" | | 李大嘴（厨子） | 憨直、爱吃 | "掌柜的！今儿有红烧狮子头，要不要来一盘？" | | 祝无双（杂役 / 知书达理） | 温婉、妥帖 | "公子这边请，位置已为您留好。" |

数据层：src/data/landing/greetings.ts（角色 + 文案） 逻辑层：src/utils/landing/greetingLogic.ts（pickRandomGreeting() 随机抽取）

4.4.4 动效

进入：fade-in（opacity 0→1）+ translateY(-8px→0) + scale(0.95→1)，320ms cubic-bezier(0.16, 1, 0.3, 1)
退出：fade-out + translateY(0→-4px) + scale(1→0.98)，200ms ease-in
触发源：印章触发时"挑亮"内发光动画（240ms），紧接着弹窗进入动画（无延迟，因果感）
持久：弹窗期间印章不再动，关闭后恢复

4.4.5 关闭

5 秒自动关闭（最后 1 秒微缩）
点击弹窗外部立即关闭
按 Esc 关闭
再次点击印章 = toggle 关闭

4.4.6 A11y

弹窗 role="status" + aria-live="polite"
键盘可达：Tab 到印章时按 Enter / Space 等同单击
prefers-reduced-motion: reduce → 纯 fade-in，不做印章内发光

4.4.7 与"烛火音乐"开关的关系

烛火音乐开启时，弹窗进入伴随竹笛短音（v1.2 不做，等用户视频素材）
烛火音乐关闭时，无音效

5. 中央"存档槽管理器"卡片（AuthCard）v1.2 Tavern Ink & Gold

v1.2 重大重构：AuthCard 从"投宿登记表单"变成"存档槽管理器"。参考 pic/启动页/image.png/screen.png 主参考图中央卡片 + pic/启动页/_1/screen.png 存档卡模板。

核心变化：

不是表单，是多存档槽的"再回同福客栈"归位仪式

默认视图是"主存档卡 + 3 个动作按钮 + 3 个空存档位"

没有用户名 / 密码（项目无注册，参考 Q4 拍板）

5.1 容器

<article class="relative z-20 w-full max-w-[720px] mx-auto">
  <div class="
    rounded-xl                              <!-- 0.75rem（xl token，sharp 木器） -->
    px-8 py-7
    relative overflow-hidden
  "
  style="
    background: rgba(35, 31, 27, 0.92);     <!-- surface-container 92% -->
    border: 1px solid #4d4635;              <!-- outline-variant -->
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);  <!-- tonal stacking 顶光 -->
  ">
    <!-- 卡片内容 -->
  </div>
</article>

宽度：max-w-[720px]（v1 是 420px，v1.2 拓宽 1.7x 以容纳存档卡 + 3 动作按钮）
背景：surface-container #231f1b opacity 92%（v1.2 关键变化：从宣纸 #FAF6F0 → 暗墨 #231f1b）
圆角：0.75rem（xl token，v1.2 关键变化：从 24px → 0.75rem）
描边：1px solid #4d4635（outline-variant Ghost Border）
深度：inset top 1px 高光（tonal stacking）+ 无外阴影（v1.2 关键变化：从 box-shadow → tonal stacking）

5.2 卡片内部 4 大区块（自上而下）

5.2.1 标题区

主标题：「继续你的同福客栈」
- 字号 28px（headline-lg-mobile 在桌面）
- 字重 600
- 颜色 #eae1da（on-surface 骨白）
- 字距 0.05em（display-xl token）
- 居中
- 字体 Noto Serif SC
副标题：「选择存档或开始新的经营之旅」
- 字号 12px（label-sm）
- 颜色 #d0c5af（on-surface-variant）
- 居中
- 字体 Source Sans 3

5.2.2 主存档卡（v1.2 核心 · 来自 `_1/screen.png` 模板）

结构：左 1/3 缩略图 + 中 1/2 数据 + 右 1/6 动作按钮。不是 form input。

| 区域 | 内容 | 样式 | |:-----|:-----|:-----| | 左侧缩略图 | 静态场景缩略图（用 cinematic 背景图裁剪，1:1 比例，120×120px） | background: cover; border: 1px solid #4d4635; | | 中部数据 | 主标「七侠镇新掌柜」+ 副行「第六个月 · 第210天」+ 状态行「银两: 12,580文 · 声望: 名声初显」+ 时间行「最后存档: 2024-01-15 14:30」 | 主标 18px Noto Serif SC 600 + 副行 13px + 状态行 12px Source Sans 3 + 时间行 11px | | 右侧按钮 | 「继续经营」（v1.2 用金实色 primary 按钮） | 见 §5.2.2.1 |

5.2.2.1 「继续经营」按钮（v1.2 金实色 primary）

背景：linear-gradient(180deg, #f2ca50 0%, #d4af37 100%)（金到金棕）
文字：「继续经营」，颜色 #3c2f00（on-primary 深金）
字号：14px（label-sm）
字重：600
字距：0.1em
圆角：0.25rem（DEFAULT，sharp）
描边：1px solid #735c00（inverse-primary 暗金）
尺寸：约 100×40px
Hover：内发光增强 box-shadow: inset 0 0 12px rgba(255,255,255,0.4) + 1px 外描边变金 #f2ca50
Active：按下时内发光 + scale(0.98)
入场动效：加载时 fade-in + 1px 金线从左到右扫过（"金漆流过" 800ms）

5.2.3 动作按钮行（3 个 · 1 金实色 + 2 金描边）

横向 3 等分按钮，gap 12px。

| 按钮 | 文字 | 样式 | 行为 | |:-----|:-----|:-----|:-----| | 重新开局 | 「重新开局」+ 副「开启全新的客栈经营之旅」 | 金实色 primary（同 §5.2.2.1）| 弹新建存档向导 modal（v1.3 详细 / v1.2 简化版直接进入 noSave 流程）| | 读档经营 | 「读档经营」+ 副「加载已有的存档继续经营」 | 金描边 outline（背景透明 + 1px #d4af37 边 + 金字）| 滚动到下方 3 个空存档位 / 展开存档列表（v1.2 显示 3 槽，v1.3 加载更多）| | 游戏设置 | 「游戏设置」+ 副「调整游戏音效和画面设置」 | 金描边 outline（同上）| 打开设置 modal（语言 / 画质 / 烛火音乐 / 全屏）|

按钮高度：约 80px（主标 14px + 副 11px 双行）
按钮圆角：0.25rem
主标字号：14px，字重 600
副标字号：11px，颜色 #99907c（outline）

5.2.3.1 金描边 outline 按钮规范

背景：transparent
描边：1px solid #d4af37
文字：「读档经营」/ 「游戏设置」，颜色 #f2ca50（tavern gold）
Hover：背景 rgba(242, 202, 80, 0.08)（极淡金）+ 描边变 #f2ca50 + 1px 内发光
Active：scale(0.98) + 内发光

5.2.4 3 个空存档位

位置：动作按钮行下方 16px 样式：3 等分横向卡片，高度 80px 当前状态（参考主参考图）：3 个空存档位 placeholder，文字「空存档位」+ 副「尚未开始经营」

| 元素 | 视觉 | |:-----|:-----| | 卡片背景 | rgba(35, 31, 27, 0.6)（更暗的 surface-container） | | 描边 | 1px dashed #4d4635（dashed 比 solid 更显"占位"） | | 主标文字 | 「空存档位」，14px，颜色 #99907c（outline 中灰），居中 | | 副标文字 | 「尚未开始经营」，11px，颜色 #4d4635（outline-variant） | | 点击行为 | 触发"新建存档"（同 §5.2.3「重新开局」）| | Hover | 描边变 1px solid #d4af37 + 文字 #f2ca50 + 1px 内发光淡金 |

未来扩展（v1.3）：3 个存档槽可分别填入已存在的存档（缩略图 + 数据 + 继续经营），与主存档卡并列显示。

5.3 与 v1 相比的关键升级点

| 升级 | 原因 | |:-----|:-----| | 从表单 → 存档槽管理器 | 项目无注册，访客态天然是 default（Q4 拍板）；v1 的"投宿登记表单"是过设计 | | 从单卡片 → 主存档卡 + 3 空槽 | 真实反映"多存档槽"游戏机制；老玩家一键回槽，新玩家选空槽开张 | | 从暖宣纸 → 暗墨背景 | Tavern Ink & Gold 调性；与背景夜景融合 | | 从圆角 24px → 0.75rem (sharp) | Tavern Ink & Gold「仿手工木器」调性 | | 从 box-shadow → tonal stacking | v1.2 depth 机制核心：内描边 + inset 顶光 + 无外阴影 | | 从朱砂实色按钮 → 金实色按钮 | 金色承担"价值 / 稀有"语义，朱砂降到次要（印章）| | 从 1 个主按钮 → 3 个动作按钮 | 玩家可"重新开局 / 读档 / 设置"分流，避免单一 CTA 阻塞 UX |

5.4 状态机（与 §8 对齐）

| AuthCard 视觉状态 | 触发条件 | 卡片内容 | |:------------------|:---------|:---------| | 正常 (Idle) | 默认 | 主存档卡 + 3 动作按钮 + 3 空槽 | | 加载中 (Loading) | 点击「继续经营」/ 「重新开局」 | 主存档卡变半透明 + 中央 spinner（金色「⏳ 提灯中…」）| | 维护中 (Maintenance) | 后台维护 | 整个 AuthCard 替换为告示牌：「今日歇业 · 明日辰时再开」（见 §5.5） | | 存档损坏 (Corrupted) | 存档读取失败 | 主存档卡替换为「此档损坏 · 改换他档」金描边错误卡 | | 设置 Modal | 点击「游戏设置」 | 弹出设置 Modal（z-50 在 AuthCard 之上）| | 新建向导 (v1.3) | 点击「重新开局」 | 弹出新建存档 modal（v1.2 简化为「直接进 noSave 流程」）|

5.5 维护告示牌样式

背景：rgba(74, 30, 18, 0.95)（深朱砂 + 95% 不透明）
描边：2px solid #5d1414
文字：「今日歇业」+ 副「明日辰时再开」+ 副「掌柜有事外出，请客官稍候。」
居中

6. 底部信息栏（FooterBar）详细规范

6.1 容器

<footer class="absolute bottom-0 left-0 right-0 z-50 px-16 py-3 flex items-center justify-between text-xs text-stone-500"
  style="background: linear-gradient(0deg, rgba(17, 14, 10, 0.85) 0%, rgba(17, 14, 10, 0) 100%);
         backdrop-filter: blur(8px);">

背景：从底部 85% 透明度向上淡出到 0
内边距：水平 64px（桌面端 §11），垂直 12px
高度：约 50px

6.2 三段结构（v1.2 重构 · 来自主参考图）

6.2.1 左侧：3 个社区入口（带 icon + 文字）

[🎮 加入官方 Discord]  [📂 开源项目]  [❤ 支持我们]

视觉：icon + 文字横排，icon 16×16px（金 #f2ca50），文字 11px Source Sans 3，颜色 #99907c
间距：每个入口 24px 间距
Hover：文字 → #f2ca50，icon 金色增亮 + 1px 内发光

6.2.2 中间：法律链接

用户协议 | 隐私政策 | 游戏许可

字号 11px，颜色 #99907c，居中
链接：「用户协议」/「隐私政策」/「游戏许可」用 | 分隔，hover 变金 #f2ca50
字体 Source Sans 3

6.2.3 右侧：3 个设置（v1.2 来自主参考图）

v1.2 视觉规范：

控件背景：rgba(255,255,255,0.05)（极淡金）
控件描边：1px solid #4d4635（outline-variant Ghost Border）
控件圆角：0.25rem（DEFAULT，sharp）
文字：「简体中文」/「画质：高」颜色 #eae1da（on-surface），11px Source Sans 3
Hover：描边变 #d4af37，1px 内发光淡金

6.2.4 与烛火音乐的关系

「烛火音乐」开关从 §3 Header 右上角统一管理（v1.2 集中到 Header）
Footer 不再单独显示烛火音乐 toggle

6.3 与 v1 的差异

| 维度 | v1 | v1.2 | |:-----|:---|:---------| | 左侧 | 圆形 IconButton + 文字 | icon + 文字横排（v1.2 去圆形，更简洁）| | 中间 | 版权 + 「唯有同福惹人留」 | 法律链接 3 段（v1.2 更正式）| | 右侧 | 语言 / 画质 / 烛火 3 个 | 语言 / 画质 / 全屏（v1.2 烛火归 Header，全屏独占一格）|

7. 背景与氛围（v1.2 Tavern Ink & Gold · 静态主图优先）

v1.2 重大决策（2026-07-06）：v1.1 的"8s 视频循环"被降级为 v1.3 可选层。v1.2 用静态 cinematic 夜景作主背景（来自 pic/启动页/a_cinematic_..._at_2/screen.png，多层木楼夜店，已带"同福客栈"招牌），叠加强 vignette + ink wash blur形成 Tavern Ink & Gold 调性。

7.1 主背景图（v1.2 必选）

| 项 | 值 | |:---|:---| | 首选源 | pic/启动页/a_cinematic_high_detail_background_of_a_traditional_chinese_ancient_town_at_2/screen.png（多层木楼夜店，自带"同福客栈"招牌） | | 备选源 | pic/启动页/a_cinematic_high_detail_background_of_a_traditional_chinese_ancient_town_at_1/screen.png（石桥夜巷） | | 部署路径 | public/images/landing-bg.png（施工时拷贝 + 优化到 ≤ 500KB） | | 画幅 | 16:9（横屏 1920×1080） | | 画风 | 3D 写实电影级渲染（与项目美术风格指南 v1 一致） | | 场景 | 古代七侠镇客栈夜景：木楼 + 红灯笼 + 暖黄灯光 + 薄雾 | | 光影 | 夜色暖琥珀 + 灯笼点光源 + 室内烛火透窗 | | 关键元素 | 木楼、瓦顶、红灯笼、对联、桥、水、石板路、薄雾 | | 氛围 | 夜行客栈的烟火气 + 江湖静谧感 |

v1.2 选 2 号图（多层木楼）的关键原因：图片已带"同福客栈"招牌 + 对联 "财源广进达三江"，无需牌匾字层后期合成（v1.1 的 §4.5 整体简化掉）。v1.2 没有 PlazaInscription 组件。

7.2 视觉层（v1.2 重构：5 层 tonal stacking）

Tavern Ink & Gold 调性：背景"暗"，UI"亮"——靠重 vignette + ink wash blur把背景压暗，让 UI 浮出来。

| z-index | 层 | 视觉 | 动效 | | :---: | :--- | :--- | :--- | | 0 | 主底色 | #17130f（Ink Carbon） | 静态 | | 5 | 主背景图 | landing-bg.png（§7.1），object-cover 填满 | 静态（v1.2 不用视频） | | 8 | Ink Wash Blur（v1.2 新增） | filter: blur(1.5px) saturate(0.85) | 静态 | | 12 | 重 Vignette（v1.2 新增） | 四角 radial-gradient(ellipse at center, transparent 30%, rgba(17,14,10,0.7) 100%) | 静态 | | 16 | 顶部 / 底部渐变 | 顶部 / 底部各 80px 高度，背景 linear-gradient(rgba(17,14,10,0.85) → transparent)，让 Header / Footer 浮在背景上 | 静态 |

v1.2 关键变化：

不再使用烛火粒子 / 暖琥珀暗角（v1.1 已删除）

引入 Ink Wash Blur + 重 Vignette 形成"墨色酒馆"基调

顶部 / 底部渐变替代 v1 的 bg-black/30 backdrop-blur-sm 半透明 Header / Footer

7.3 HTML 落地（v1.2）

<!-- 1. 主底色（背景图加载失败兜底） -->
<div class="fixed inset-0 -z-50 bg-[#17130f]" aria-hidden="true"></div>

<!-- 2. 主背景图 -->
<img
  src="/images/landing-bg.png"
  alt=""
  class="fixed inset-0 -z-40 h-full w-full object-cover"
  style="filter: blur(1.5px) saturate(0.85);"
  aria-hidden="true"
/>

<!-- 3. 重 Vignette（v1.2 关键视觉） -->
<div
  class="fixed inset-0 -z-30 pointer-events-none"
  style="background: radial-gradient(ellipse at center, transparent 30%, rgba(17, 14, 10, 0.7) 100%);"
  aria-hidden="true"
></div>

<!-- 4. 顶部渐变（Header 浮起来） -->
<div
  class="fixed inset-x-0 top-0 -z-20 h-20 pointer-events-none"
  style="background: linear-gradient(180deg, rgba(17, 14, 10, 0.85) 0%, transparent 100%);"
  aria-hidden="true"
></div>

<!-- 5. 底部渐变（Footer 浮起来） -->
<div
  class="fixed inset-x-0 bottom-0 -z-20 h-16 pointer-events-none"
  style="background: linear-gradient(0deg, rgba(17, 14, 10, 0.85) 0%, transparent 100%);"
  aria-hidden="true"
></div>

7.4 性能与降级

| 场景 | 行为 | |:-----|:-----| | 桌面端（≥ 1024px） | 主背景图 + Ink Wash + Vignette 正常加载 | | 平板（640-1024px） | 同上（主背景图自适应） | | 移动端（< 640px） | 主背景图正常加载，Ink Wash 增强（blur(2.5px)）| | prefers-reduced-motion: reduce | 无影响（v1.2 背景完全静态）| | 网络慢 / 图片加载超时（> 2s） | 主底色 #17130f 兜底，图片就绪后淡入（400ms）|

性能预算：

主背景图体积 ≤ 500 KB（PNG 1920×1080，参考主参考图 ~216KB 实际大小）
首屏 LCP ≤ 1500ms（主底色 + 渐变兜底）
总图片资源 ≤ 1MB（v1.2 不用视频，省一大块）

7.5 v1.3 未来扩展（视频背景）

v1.2 不用视频，视频资源降级为 v1.3 可选。如果后续 PM 决定加回视频循环：

视频源：generated/seedance/tongfu-tavern-standard-timeline-20260706-151530.mp4（8s 主厅广角横移）

部署路径：public/videos/landing-bg.mp4

体积：H.264 720p / 1.2 Mbps / ≤ 2MB

位置：在主背景图之上（z-35），形成"图作底 + 视频作前景灯笼微动"双层

性能预算：总资源 ≤ 3MB

v1.2 不实现，留 TODO。

8. 状态分支（v1.2 重构 · 存档槽状态机）

v1.2 重大重构：状态机从"v1 简化的 2 核心态"升级为"3 存档槽 × 2 状态 + 4 临时态"——多存档槽是 v1.2 新增的真实游戏机制。

核心原则：项目无注册系统、数据存本机只有读档操作，所有状态都是"本机存档状态"的派生。

8.1 核心状态：3 存档槽 × 2 状态

v1.2 启动页展示 3 个存档槽（slot1 / slot2 / slot3），每个槽独立有 2 状态。

| 槽状态 | 触发条件 | 视觉 | |:-------|:---------|:-----| | 空存档位 (Empty) | 本机该槽位无存档 | 「空存档位」+「尚未开始经营」（§5.2.4） | | 已存档 (HasSave) | 本机该槽位有存档 | 主存档卡 UI（§5.2.2，缩略图 + 数据 + 继续经营） |

8.1.1 派生核心态

| 派生态 | 触发条件 | AuthCard 主存档区行为 | |:-------|:---------|:----------------------| | 全部空 (AllEmpty) | 3 槽都空 | 主存档区显示「尚无存档 · 选一空槽开张」引导 + 3 槽全部空 | | 首槽有 (PrimaryHas) | slot1 有存档 | 主存档区显示 slot1 数据 + slot2/slot3 空槽 | | 首槽空但次槽有 (SecondaryHas) | slot1 空但 slot2/3 有 | 主存档区显示"最常用"槽位（slot2 优先） + 引导用户把主存档移到 slot1 | | 全部有 (AllFilled) | 3 槽全有 | 主存档区显示 slot1（最近玩） + 3 槽全有 |

设计意图：老玩家一键回最近档（slot1 优先），新玩家选空槽开张，避免"一档到底"的简单设计。

8.2 临时状态（4 个）

| 状态 | 触发 | 视觉 | |:-----|:-----|:-----| | 加载中 (Loading) | 提交「继续经营」/「重新开局」后 | 主存档区变半透明 + 中央 spinner（金色「⏳ 提灯中…」+ 1px 金线扫过）| | 维护中 (Maintenance) | 后台维护 | 整个 AuthCard 替换为告示牌（§5.5） | | 存档损坏 (Corrupted) | 存档读取失败 | 主存档区替换为「此档损坏 · 改换他档」金描边错误卡 | | 存档写入中 (Saving) | 自动存档触发 | 右上角 Toast「💾 存档中…」+ 主存档区不锁 |

8.3 状态机类型与默认值（v1.2 同步到代码）

// 数据层：src/data/landing/config.ts
export type SaveSlotId = 'slot1' | 'slot2' | 'slot3';

export type SaveSlotState =
  | { id: SaveSlotId; status: 'empty' }
  | { id: SaveSlotId; status: 'hasSave'; data: SaveSlotData; lastPlayedAt: number };

export type LandingCoreState = {
  slots: Record<SaveSlotId, SaveSlotState>;
  activeSlotId: SaveSlotId;  // 启动时默认 slot1
};

// 逻辑层：src/utils/landing/stateMachine.ts
export type LandingTempState = 'idle' | 'loading' | 'maintenance' | 'corrupted' | 'saving';

export type LandingState = {
  core: LandingCoreState;
  temp: LandingTempState;
};

8.4 状态机流转图（v1.2）

[idle] --click "继续经营"--> [loading] --read OK--> [主游戏]
                       \--read fail--> [corrupted] --选别槽--> [idle]
[idle] --click "重新开局"--> [loading] --new save OK--> [主游戏]
[idle] --slot 写入--> [saving] --write OK--> [idle]
[idle] --任何 slot 数据加载失败--> [corrupted]

注意：v1.2 状态机写完后会提交一次存档（防丢档），玩家拔网线也不会丢档。

9. 设计 Token 总表（v1.2 Tavern Ink & Gold）

v1.2 重大重构：从 v1 暖琥珀"宣纸·朱砂·红木"调色板，整体切换为 Tavern Ink & Gold "墨金酒馆"调色板。完整 Token YAML 见 pic/启动页/tavern_ink_gold/DESIGN.md。

v1.2 严格遵循 Tavern Ink & Gold，不引入 token 体系外的新色 / 新字体 / 新形状。

9.1 色板（v1.2 完整）

9.1.1 Surface 层（5 阶 surface-container）

仿 Material 3 的 surface 体系，深度靠色阶递进而非投影。

| 角色 | 色值 | 用途 | |:-----|:-----|:-----| | surface | #17130f | 主背景（背景图加载失败兜底） | | surface-container-lowest | #110e0a | 最底层（极少用） | | surface-container-low | #1f1b17 | 卡片底色（§5.1 AuthCard） | | surface-container | #231f1b | 主卡片底色（§5.1）、空存档位（§5.2.4）| | surface-container-high | #2e2925 | 弹窗底色（Q5 问候语）| | surface-container-highest | #39342f | 最高层容器（v1.3 备用）|

9.1.2 Primary 金（酒馆金）

| 角色 | 色值 | 用途 | |:-----|:-----|:-----| | primary | #f2ca50 | Tavern Gold · 主标题 / Active 菜单 / 金实色按钮 / 金描边 | | on-primary | #3c2f00 | 金实色按钮上的深字 | | primary-container | #d4af37 | 金描述文字 / 金描边 / 金渐变底部 | | on-primary-container | #554300 | 金容器内深字 | | inverse-primary | #735c00 | 暗金（用于 inverse 场景）| | primary-fixed | #ffe088 | 高亮金（极少用）| | primary-fixed-dim | #e9c349 | 暗金中亮（极少用）| | surface-tint | #e9c349 | 表面色调 |

9.1.3 Secondary 朱砂红（v1.2 仅用于印章）

| 角色 | 色值 | 用途 | |:-----|:-----|:-----| | secondary | #ffb68c | 暖橙（极少用）| | on-secondary | #532200 | — | | secondary-container | #753401 | 深朱砂（印章底色）| | on-secondary-container | #fb9f66 | 印章上的文字 |

9.1.4 On-surface 文字

| 角色 | 色值 | 用途 | |:-----|:-----|:-----| | on-surface | #eae1da | Antique Bone · 主文字色 | | on-surface-variant | #d0c5af | 次级文字（副标 / 描述）|

9.1.5 Outline 描边

| 角色 | 色值 | 用途 | |:-----|:-----|:-----| | outline | #99907c | Ghost Border · 主描边 | | outline-variant | #4d4635 | 次级描边（空槽位 dashed）|

9.1.6 其它

| 角色 | 色值 | 用途 | |:-----|:-----|:-----| | tertiary | #cecece | 中性灰（极少用）| | error | #ffb4ab | 错误色（存档损坏）| | background | #17130f | 等同 surface | | surface-variant | #39342f | 变体表面（v1.3 备用）|

9.1.7 v1.2 调色板与 v1 的对应关系

| v1 角色 | v1 色值 | v1.2 角色 | v1.2 色值 | |:---------|:--------|:--------------|:--------------| | 宣纸主底 | #F5F2EB | surface | #17130f | | 宣纸卡片 | #FAF6F0 | surface-container | #231f1b | | 浅宣纸 | #EDE5D5 | surface-container-high | #2e2925 | | 红木薄框 | #D3C2B0 | outline | #99907c | | 朱砂红 | #A62B2B | primary (CTA) + secondary-container (印章) | #f2ca50 + #753401 | | 烫金 | #C9A961 | primary-container | #d4af37 | | 墨色 | #2C2621 | on-surface | #eae1da（反转：v1 墨色做主色，v1.2 墨色做底，骨白做主色）|

9.2 字体（v1.2 引入 3 个角色）

v1.2 字体策略：分层明确。Noto Serif SC 仍是主字体，但 body 和 UI 分两个新的无衬线字体。

| 角色 | 字体 | 用途 | 来源 | |:-----|:-----|:-----|:-----| | Headline / Display | Noto Serif SC（中文）/ ZhiMangXing（logo 艺术字） | Hero 主标 / AuthCard 主标 / 重要 sub-headers | 项目已有 | | Body | Source Serif 4 | 描述段 / 问候语 / 长文 | Tavern Ink & Gold 引入 | | UI / Label | Source Sans 3 | 菜单 / 按钮 / 设置 / 副标 / 数据 | Tavern Ink & Gold 引入 | | Brand Logo | ZhiMangXing（graphic asset） | 「同福客栈」4 字 Logo | 美术素材 logo_1/2 |

9.2.1 v1.2 字号体系（来自 Tavern Ink & Gold）

| Token | 字号 | 字重 | 行高 | 字距 | 用途 | |:------|:-----|:-----|:-----|:-----|:-----| | display-xl | 48px | 700 | 1.2 | 0.05em | Logo / 极端强调（v1.2 不直接用，logo 用 ZhiMangXing 艺术字）| | headline-lg | 32px | 600 | 1.3 | 0.05em | Hero 副标「经营模拟」/ 大按钮文字 | | headline-lg-mobile | 24px | 600 | 1.3 | 0.05em | 移动端 headline | | body-md | 16px | 400 | 1.6 | 0 | 描述段主标 | | body-sm | 14px | 400 | 1.6 | 0 | 描述段副标 / 存档数据 | | label-sm | 12px | 600 | 1.2 | 0.1em | UI 标签 / 菜单 / 按钮 / 副标 | | label-xs | 11px | 600 | 1.2 | 0.1em | Footer 文字 / 元信息 |

9.2.2 颜色 + 字体 token 落地（代码侧）

// 数据层：src/data/landing/config.ts
export const LANDING_TOKENS = {
  colors: {
    surface: '#17130f',
    surfaceContainer: '#231f1b',
    primary: '#f2ca50',
    onPrimary: '#3c2f00',
    onSurface: '#eae1da',
    onSurfaceVariant: '#d0c5af',
    outline: '#99907c',
    outlineVariant: '#4d4635',
    secondaryContainer: '#753401',  // 印章
  },
  fonts: {
    serif: '"Noto Serif SC", "Songti SC", serif',       // headline
    body: '"Source Serif 4", "Noto Serif SC", serif',  // body
    ui: '"Source Sans 3", "Noto Sans SC", sans-serif', // UI / label
    brand: '"ZhiMangXing", "Noto Serif SC", serif',    // brand logo
  },
  type: {
    displayXl: '48px',
    headlineLg: '32px',
    headlineLgMobile: '24px',
    bodyMd: '16px',
    bodySm: '14px',
    labelSm: '12px',
    labelXs: '11px',
  },
} as const;

9.3 圆角（v1.2 sharp 仿木器）

v1.2 关键变化：从 v1 的"12-24px 软圆角" → 0 - 0.5rem sharp 圆角（仿手工木器、避免现代 App 感）。

| 用途 | 圆角 | 来源 | |:-----|:-----|:-----| | 主按钮 | 0.25rem (DEFAULT) | Tavern Ink & Gold 仿木钉帽 | | 输入框 | 0.125rem (sm) | — | | AuthCard 主卡 | 0.75rem (xl) | 略柔以容纳存档卡内容 | | 空存档位 | 0.25rem (DEFAULT) | 仿存档纸条 | | 弹窗 | 0.5rem (lg) | 比主卡小 | | 圆形（钱币 / 印章）| 9999px (full) | 例外：印章/钱币/Logo 圆形 |

v1.2 严禁使用 12px+ 软圆角（v1 的"启动页例外 24px"已废止）。

9.4 间距体系（v1.2 引入）

Tavern Ink & Gold 4px 基准 + 大外边距。

| Token | 值 | 用途 | |:------|:---|:-----| | unit | 4px | 基础单位 | | gutter | 24px | 卡片内 / 列间距 | | margin-mobile | 16px | 移动端外边距 | | margin-desktop | 64px | 桌面端外边距（Header/Footer 水平 padding）| | container-max | 1200px | 主内容最大宽度（AuthCard 主区 720px，Hero 副标 640px 等）|

9.5 深度体系（v1.2 tonal stacking · 关键变化）

v1.2 关键变化：从 v1 的 box-shadow 投影 → tonal stacking（色阶递进 + 内描边 + inset 高光）。

| 深度等级 | 实现方式 | 用途 | |:---------|:---------|:-----| | Level 0（背景）| 静态主背景图（§7.2）| 沉浸氛围 | | Level 1（面板）| surface-container-low/container + 1px outline 描边 + inset top 1px 高光（box-shadow: inset 0 1px 0 rgba(255,255,255,0.04)）| AuthCard / Footer 区 | | Level 2（激活元素）| 1px 内描边金 #d4af37 + 内发光 box-shadow: inset 0 0 12px rgba(242,202,80,0.3) | Active 菜单 / 主按钮 hover | | Level 3（弹窗）| surface-container-high + 1px outline + 0 投影 | Q5 问候语弹窗 |

v1.2 严禁外 box-shadow 投影（除非弹窗级需要浮起感）。用色阶 + 内描边 + inset 高光。

10. 动效规范（v1.2 Tavern Ink & Gold · "light up" 取代 "lift up"）

v1.2 关键变化：从 v1 的"scale + shadow（lift up）"切换为 v1.2 的"内发光 + 1px 金线扫过（light up）"。模拟烛火点亮房间的视觉——元素"亮起来"而不是"浮起来"。

10.1 进入动画（页面加载）

10.2 Hover 动画（v1.2 关键：light up 取代 lift up）

| 元素 | 动画 | 时长 | 备注 | | :--- | :--- | :--- | :--- | | 菜单文字（默认态）| 文字 → #f2ca50（金）+ 1px 金线 width 0 → 60% 淡入 | 240ms | 无 scale | | 菜单文字（Active）| 已经是金底矩形，hover 不变 | — | — | | 金实色按钮 | 内发光增强（box-shadow: inset 0 0 12px rgba(255,255,255,0.4)）+ 1px 外描边变金 #f2ca50 | 240ms | 不再 scale 1.02 | | 金描边 outline 按钮 | 背景 rgba(242,202,80,0.08) + 描边变 #f2ca50 + 1px 内发光淡金 | 240ms | 无 scale | | 空存档位 | 描边 1px dashed → 1px solid #d4af37 + 文字 → #f2ca50 + 1px 内发光淡金 | 240ms | 无 scale | | 存档卡本身 | 1px 外描边变金 #d4af37 + 1px 内发光 | 240ms | 无 scale | | Hero 七侠镇印章 | scale 1 → 1.05 + 1px 金色 outer glow 8px → 16px | 240ms | 例外：印章可以 scale（视觉锚点）|

v1.2 关键变化：主按钮 / 存档卡 / 菜单文字一律不用 transform: scale()。只通过"内发光 + 描边变色"实现 hover 反馈。唯一例外是 Hero 七侠镇印章（作为视觉锚点允许微缩放）。

10.3 持久动画（v1.2 极简）

v1.2 大幅削减持久动效。v1 的 4 处持久动效（Logo 晃动 / 边缘呼吸 / 烛火 / 粒子）大部分删除。

| 元素 | 动画 | 周期 | 备注 | | :--- | :--- | :--- | :--- | | 🎵 烛火音乐图标（on 时）| 1px 金色 outer glow 呼吸（0 → 8px → 0）| 1.5s | 唯一保留的"金发光"动效 | | Hero 七侠镇印章 | rotate ±1deg 微晃 | 8s | 视觉锚点例外 | | 空存档位 hover 状态 | 1px 内发光淡金 | 240ms（hover 期间）| 触发型，非持久 |

v1.2 删除的动效：

~~AuthCard 烛光边缘呼吸~~（v1 用了 box-shadow 投影，v1.2 改用 tonal stacking 不需要）

~~烛火粒子~~（v1 就有 8 个，v1.2 完全删除）

~~背景烛火~~（v1.2 用静态背景图，背景不动）

10.4 切换状态动画

| 触发 | 动画 | 时长 | | :--- | :--- | :--- | | 全部空 → 首次开档（点「重新开局」）| AuthCard 内容 fade + 1px 金线扫过 | 300ms | | 选槽 → 加载中 | 主存档区变半透明（opacity 0.5）+ 中央 spinner 金色「⏳ 提灯中…」| 立即 | | 加载中 → 主游戏 | 整页 fade-out + 600ms 后跳转 | 600ms | | 加载中 → 损坏 | 主存档区 fade-out + 错误卡 fade-in | 400ms | | 设置 Modal 打开 | Modal opacity 0→1 + scale 0.95→1（v1.2 例外：modal 用 lift）| 240ms | | 关闭 Modal | opacity 1→0 + scale 1→0.95 | 200ms | | 维护态切换 | 整 AuthCard 替换为告示牌（fade + slide up 8px）| 400ms |

v1.2 例外：Modal / Toast 仍允许 scale 动画（因为它们是"浮在主 UI 之上"的弹层，与主 UI 层级不同）。

10.5 性能预算

总动画元素：≤ 12 个（v1 是 20 个，v1.2 削减）
总背景滤镜：仅 1 个（filter: blur(1.5px) saturate(0.85) 应用在主背景图上）
总 box-shadow：≤ 4 个（hover 内发光 + Active 外描边等）
首屏 LCP：≤ 1500ms（主底色 + 渐变兜底，背景图 800ms 内 fade in）
进入动画总时长：≤ 2200ms（最后元素 1.9s 延迟 + 1.0s 动画 = 2.9s 边界，但前 1.5s 用户已可交互）

v1.2 严禁：v1 那种 8 个烛火粒子 + 4 处持久呼吸 + 1 处视频滤镜的"叠加动效"做法——v1.2 走"少而精"路线。

11. 响应式与降级（v1.2 Tavern Ink & Gold）

11.1 视口断点（v1.2 沿用 Tavern Ink & Gold 体系）

| 断点 | 宽度 | 布局 | AuthCard 宽度 | Hero Logo 字号 | 外边距 | | :--- | :--- | :--- | :--- | :--- | :--- | | Mobile | < 640px | 简化布局 | calc(100vw - 32px) | 56px | 16px | | Tablet | 640-1024px | 标准布局 | 600px | 80px | 32px | | Desktop | ≥ 1024px | 完整布局 | 720px | 100px | 64px | | Wide | ≥ 1680px | 完整布局（更大气）| 800px | 120px | 64px |

关键规则：

外边距：移动端 16px，桌面端 64px（Tavern Ink & Gold margin-mobile / margin-desktop）
容器最大宽度：1200px（主内容）、720px（AuthCard 桌面）、800px（Wide）
Header 菜单：移动端汉堡菜单（v1.2 简化为：只显示 Logo + 开始游戏 + 烛火音乐）

11.2 移动端特殊处理

| 元素 | 移动端行为 | |:-----|:-----------| | Header 菜单 6 项 | 折叠为汉堡菜单（v1.2 简化：移动端只显示「开始游戏」+ 烛火音乐 + 头像/菜单）| | Footer 设置 3 项 | 折叠为 1 个"设置"按钮，点击展开底部 Sheet | | 3 个动作按钮 | 移动端纵向堆叠（桌面端横向 3 等分）| | 3 个空存档位 | 移动端横向滑动（overflow-x: auto），桌面端 3 等分 | | 主存档卡缩略图 | 移动端 80×80px，桌面端 120×120px | | 描述段第二行 | 移动端隐藏（节省高度）|

11.3 降级规则

prefers-reduced-motion: reduce：关闭所有动效（保留颜色变化、字体变化），背景图正常显示。
网络慢 / 图片未加载（> 2s）：主底色 #17130f 兜底，背景图就绪后 400ms 淡入。
JS 失败：AuthCard 仍是可用 <form>，提交走原生 form action（v1.2 验证：保留 <noscript> 兜底）。
窗口极小（< 360px）：所有 padding 减半，菜单文本字号降一档（v1.2 极端 fallback）。

所有交互元素必须有 aria-label（中文 + 英文双标）。
焦点环：2px #f2ca50（金）描边 + 4px 偏移（v1.2 关键变化：从朱砂红 → 金；金色在深底上更突出）
颜色对比度：
- 正文 on-surface #eae1da vs surface #17130f = 15.4:1 ✅ AAA
- 金实色按钮 on-primary #3c2f00 vs primary #f2ca50 = 8.6:1 ✅ AAA
- 副标 on-surface-variant #d0c5af vs surface #17130f = 12.1:1 ✅ AAA
表单错误必须用 aria-describedby 关联到错误信息元素。
弹窗（Q5 问候语）role="status" + aria-live="polite"。
v1.2 不使用 outline: none —— 所有可聚焦元素必须有可见焦点环。

13. 迭代总览（v0 → v1.2 全谱）

| 版本 | 关键决策 | 调色板 | 背景 | 中心元素 | |:-----|:---------|:-------|:-----|:---------| | v0 初版 | 3 层结构（Header / Card / Footer）+ 4 项菜单 | 暖琥珀 · 宣纸 | 一句话提及"水墨风" | 表单卡片 | | v1 宣纸朱砂 | 4 层结构（+ Hero）+ WoC 借鉴 | 暖琥珀 · 宣纸 · 朱砂 | 多层视差（水墨远景 + 烛火粒子 + 暖琥珀暗角 + 薄雾）| 朱砂墨印 96px + 表单 | | v1.1 视频版 | 删除所有装饰层，引入 8s 视频 | 同 v1 | 视频循环（主厅广角横移）| 同 v1 | | v1.2 Tavern Ink & Gold | 整体调色板重置 + 静态主图 + 存档槽管理器 | 墨金 · 5 阶 surface + 金 primary + 朱砂副 | 静态 cinematic 夜景 + Ink Wash + 重 Vignette | 金漆大字 Logo + 红印章 + 3 存档槽 |

13.1 v1 → v1.2 关键变化速查（详见 §1.3）

主色：暖琥珀 → 墨金
圆角：12-24px → 0-0.5rem sharp
深度：box-shadow → tonal stacking + 内描边 + inset 高光
Hover：scale + shadow → 内发光 + 描边变色
字体：Noto Serif SC 统一 → Noto Serif SC（headline）+ Source Serif 4（body）+ Source Sans 3（UI）
AuthCard：表单 → 存档槽管理器
中央 Logo：朱砂墨印 → 金漆大字
背景：视频循环 → 静态主图
状态机：2 核心态 → 3 存档槽 × 2 状态 + 4 临时态

14. 拍板决策（2026-07-06）

v1 文档定稿前，5 个开放问题已与用户逐一拍板，记录如下，作为后续施工的契约。

| # | 问题 | 拍板 | 决策说明 | |:-:|:-----|:----:|:---------| | Q1 | 鸣锣开业音效 | ❌ v1 不做 | 等用户视频素材（鸣锣音效 / 盖印音效）做好之后再补，素材未到前 AuthCard 提交改用柔和的"唰——"笔锋动效顶替。 | | Q2 | 七侠镇远景图 | ✅ v1.1 已简化 | 2026-07-06 用户交付首条视频 tongfu-tavern-standard-timeline-20260706-151530.mp4（同福客栈主厅广角，8s 极慢横移）。最终方案：视频作底 + UI 居上，不再加任何装饰层（烛火粒子 / 暖琥珀暗角 / 前景薄雾全部删除）。视频本身已提供完整氛围。 | | Q3 | 深夜模式 | ❌ v1 不做 | 项目无注册系统、无云存档，单机本机存档情况下深夜模式的"个性化"价值低；v1 维持单一时辰氛围（黄昏·挑灯），把 v2 标的资源留给更关键的"掌柜问候语"系统。 | | Q4 | 访客模式先玩再注册 | ❌ 不适用 | 项目本来就没有注册流程（数据存本机，只有读档操作），访客模式天然是默认状态。状态机重写：取消"未登录 / 访客"二分，改为「首次开档 (No Save) / 读档继续 (Has Save)」二态（详见 §8.1）。 | | Q5 | 掌柜问候语 | ✅ v1 纳入 | 点击中央 Logo（朱砂墨印）触发角色扮演式问候语弹窗。详见新增 §4.4「掌柜问候语（v1 新增）」。 |

14.1 拍板后的 v1 范围变更摘要

新增进 v1：

掌柜问候语系统（角色随机 + 古风短句 + 弹窗动效 + A11y）→ §4.4
v1.1（2026-07-06）：视频主背景系统（8s 主厅广角循环 + 交叉淡化 + 暗角 + 牌匾字层后期合成）→ §7

移出 v1 / 推迟：

鸣锣 / 盖印音效（等用户视频素材）→ §10 动效表里相应行打"待补"标
深夜模式（v2 候选）

重写：

§7 背景与氛围（v1.2）：4 层视差 → 简化为「视频作底 + UI 居上」两层结构（装饰层全部删除）
§8.1 状态机（v1.2）：3 核心态 → 2 核心态（首次开档 / 读档继续）+ 2 临时态（加载中 / 维护中）
§8.3 已登录态卡片 → 改名为「读档态卡片」（详见 §8.3 重写）

2026-07-06 v1.2 追加决策：用户交付 pic/启动页/ 整套 Tavern Ink & Gold 素材（详见 §1.2 + §1.3），整体设计语言从"宣纸朱砂"切换到"墨金酒馆"。本次重构为 v1.2，非 v2。

色板：暖琥珀 → 墨金

字体：Noto Serif SC 统一 → 三层字体体系（headline / body / UI）

圆角：12-24px → 0-0.5rem sharp

深度：box-shadow → tonal stacking + 内描边 + inset 高光

AuthCard：表单 → 存档槽管理器

背景：视频 → 静态主图

14.2 等待用户交付的资产清单

| 资产 | 用途 | 阻塞项 | 占位方案 | |:-----|:-----|:-------|:---------| | 鸣锣开业音效 | Q1 提交成功反馈 | 用户视频素材（音效） | 金漆流过动效（v1.2 改用 1px 金线扫过代替笔锋） | | 盖印音效 | Q5 掌柜问候语触发反馈 | 同上 | 七侠镇印章「挑亮」内发光 | | 竹笛短音 | Q5 烛火音乐开启时伴随 | 同上 | 静默 |

14.3 已到位的资产清单（v1.2 增量）

| 资产 | 路径 | 用途 | 状态 | |:-----|:-----|:-----|:----:| | 🖼 启动页主参考 | pic/启动页/image.png/screen.png | 1600×875 完整页面布局参考（v1.2 视觉契约） | ✅ 到位 | | 📐 Tavern Ink & Gold Token YAML | pic/启动页/tavern_ink_gold/DESIGN.md | 完整设计系统（色 / 字体 / 形状 / 深度） | ✅ 到位 | | 🔖 品牌 Logo 完整版 | pic/启动页/logo_2/screen.png | 「同福客栈经营模拟」金字 + 红"印" 印章 | ✅ 到位 | | 🔖 品牌 Logo 窄版 | pic/启动页/logo_1/screen.png | 「同福客栈」+ 红"七侠镇"印章 | ✅ 到位 | | 🌙 背景图 · 多层木楼夜店 | pic/启动页/a_cinematic_..._at_2/screen.png | v1.2 首选主背景（自带"同福客栈"招牌） | ✅ 到位 | | 🌙 背景图 · 石桥夜巷 | pic/启动页/a_cinematic_..._at_1/screen.png | v1.2 备选主背景 | ✅ 到位 | | 💾 存档卡组件 | pic/启动页/_1/screen.png + code.html | "七侠镇新掌柜" 存档卡 SVG 模板 | ✅ 到位 | | 📝 登录表单 | pic/启动页/_2/screen.png + code.html | v1.3 备用（当前不用） | ✅ 到位 | | 🎬 主背景视频（v1.1 旧版） | generated/seedance/tongfu-tavern-standard-timeline-20260706-151530.mp4 | v1.2 降级为 v1.3 可选 | ⚠️ 降级 | | 📝 项目美术风格指南 | docs/art/tongfu-art-style-guide-v1.md | v1.2 视频 / 背景与项目美术对齐 | ✅ 已存在 | | 📝 UI 美术规范白皮书 | docs/art/tongfu-ui-art-spec-v1.md | token / 配色 / 字体 / 圆角 / 层级依据 | ✅ 已存在 | | 📝 视频源 prompt | docs/art/seedance-tongfu-tavern-standard-timeline-v1.md | v1.1 视频生成凭证（v1.2 留作 v1.3 备） | ✅ 已存在 | | 🖼 项目主横幅 | public/banners/tongfu-main-banner.png | v1.2 备用（视频未到位 / 移动端降级） | ✅ 已存在 |

15. 验收 Checklist（v1.2 全面重写）

15.1 视觉验收（v1.2 Tavern Ink & Gold）

[ ] 整体页面无滚动条，h-screen overflow-hidden 生效。
[ ] 背景层：主底色 #17130f + 主背景图（§7.1 首选 2 号图）+ filter: blur(1.5px) saturate(0.85) + 重 Vignette + 顶 / 底渐变
[ ] Hero 区：「同福客栈」金漆大字 + 「七侠镇」红印章 + 「— 经营模拟 —」副标 + 双行 tagline + 1px 金分隔线
[ ] AuthCard：圆角 0.75rem，背景 surface-container #231f1b opacity 92%，描边 1px solid #4d4635，inset top 1px 高光
[ ] 主存档卡：左缩略图 + 中数据 + 右「继续经营」金实色按钮
[ ] 3 个动作按钮：1 金实色（重新开局）+ 2 金描边（读档经营 / 游戏设置）
[ ] 3 个空存档位：dashed 描边 + 「空存档位」+「尚未开始经营」
[ ] 主按钮：「继续经营」金实色 #f2ca50 渐变 + 1px 金 #735c00 描边 + hover 内发光（不用 scale）
[ ] Hero 七侠镇印章：红 #753401 底色 + 白字"七侠镇" + 36×54px 竖向
[ ] Header：金字品牌标 + 6 项菜单（开始游戏 Active 是金底矩形）+ 🎵 + 金「支持我们」按钮
[ ] Footer：3 社区入口 + 3 法律链接 + 语言/画质/全屏 3 设置
[ ] 背景图带"同福客栈"招牌（v1.2 选 2 号图的关键原因）

15.2 UX 验收

[ ] 6 项菜单 hover 文字 → #f2ca50（金）+ 1px 金线 width 0 → 60%（240ms）
[ ] 「开始游戏」Active 状态：金底矩形 #f2ca50 + 深字 #3c2f00
[ ] 金实色按钮 hover：内发光 box-shadow: inset 0 0 12px rgba(255,255,255,0.4) + 1px 外描边变金（不用 scale 1.02）
[ ] 金描边按钮 hover：背景 rgba(242,202,80,0.08) + 描边变 #f2ca50
[ ] 提交成功后主按钮变绿 #3F6B3F（保留 v1）+ 600ms 后跳转
[ ] 点击 Hero 七侠镇印章触发 Q5 掌柜问候语弹窗（v1.2 改触发源）
[ ] 弹窗 5 秒自动关闭 / Esc 关闭 / 点外部关闭
[ ] 维护态切换：整 AuthCard 替换为告示牌（fade + slide up 8px）
[ ] 不再有：v1 那种 5 项菜单红色横线、Hero 盖印动画、表单输入框焦茶底线

15.3 性能验收

[ ] 主背景图体积 ≤ 500 KB（PNG 1920×1080，参考主参考图 ~216KB）
[ ] 总图片资源 ≤ 1MB（v1.2 不用视频，省一大块）
[ ] 移动端 Ink Wash 增强（blur(2.5px)）生效
[ ] prefers-reduced-motion: reduce 下关闭所有动效
[ ] 首屏 LCP ≤ 1500ms（主底色 + 渐变兜底，背景图 800ms 内 fade in）
[ ] 背景图加载超时（> 2s）主底色兜底 + 图片就绪 400ms 淡入

15.4 工程验收（v1.2 适配）

[ ] 不引入 token 体系外的新色 / 新字体 / 新形状
[ ] 严格遵循 AGENTS.md 的三层架构（数据 / 逻辑 / UI 分离）
[ ] 不引入 Source Serif 4 / Source Sans 3 字体文件——v1.2 通过 Google Fonts CDN 引入（或本地化 v1.3）
[ ] 启动页组件放 src/components/landing/（新目录），状态机放 src/utils/landing/
[ ] 静态资源（背景图 / 海报 / logo）放 public/images/landing-*.png
[ ] token 放 src/data/landing/config.ts（数据层）
[ ] 状态机放 src/utils/landing/stateMachine.ts（逻辑层）
[ ] 视频逻辑放 src/utils/landing/videoLogic.ts（v1.2 简化版：仅静态图，逻辑层可保留以备 v1.3）
[ ] 问候语数据放 src/data/landing/greetings.ts + 逻辑放 src/utils/landing/greetingLogic.ts
[ ] lint + build 通过，无新增 tsc 错误

15.5 v1.2 必须重构的代码项（施工时对照）

由于本规范从 v1.1（暖琥珀 + 视频）重构到 v1.2（墨金 + 静态图），已落地的 v1.1 代码需要对应调整：

| 文件 | v1.1 当前 | v1.2 改 | |:-----|:----------|:------------| | VideoBackdrop.tsx | 视频背景 + <video autoplay loop> | 改为静态图 <img> + filter + 多个叠加 div（vignette / 顶底渐变）| | LandingPage.tsx | Hero 中央是朱砂墨印 96px | 改为金漆大字 + 七侠镇印章（v1.2 §4.2.1）| | AuthCard.tsx | 表单（掌柜大名 + 剧本 + 主按钮）| 改为存档槽管理器（主存档卡 + 3 动作按钮 + 3 空槽，v1.2 §5.2）| | HeaderBar.tsx | 5 项菜单「鸣锣开业 / 邸报...」| 改为 6 项菜单（开始游戏 / 排行榜 / 百科 / 新闻公告 / 下载 / 登录/注册）| | FooterBar.tsx | 3 社区 IconButton + 版权 + 3 设置 | 改为 3 社区 + 3 法律链接 + 3 设置（语言/画质/全屏）| | config.ts | 暖琥珀色板 + 视频路径 | 改为 Tavern Ink & Gold 5 阶 surface + 金 primary + 朱砂副（v1.2 §9.1）| | PlazaInscription.tsx | HTML 叠"同福客栈"4 字 | 删除（v1.2 主背景图自带招牌，不需要叠字）| | stateMachine.ts | 2 核心态（noSave / hasSave）| 改为 3 存档槽 × 2 状态（v1.2 §8.1）| | AppHeaderBar.tsx | 已有项目内 UI 不变 | 不动（仅供视觉参考）|

16. 关联文档

下一步（2026-07-06 v1.2 Tavern Ink & Gold 重构版）：

v1.1 → v1.2 重构已就位。本规范作为后续施工的视觉契约。已落地的 v1.1 代码需要按 §15.5 表对应调整。

建议施工顺序（v1.2）：

资产预处理：背景图部署到 public/images/landing-bg.png（≤ 500KB）；Logo 资源复制到 public/images/landing-logo-*.png；public/videos/landing-bg.mp4 暂不部署（v1.3 用）

重构数据层 src/data/landing/config.ts → Tavern Ink & Gold Token（§9.1 + §9.2 + §9.3 + §9.4 + §9.5）

重构状态机 src/utils/landing/stateMachine.ts → 3 存档槽 × 2 状态（§8.1）

重构背景层 src/components/landing/VideoBackdrop.tsx → BackgroundLayers.tsx（静态图 + Ink Wash + Vignette + 顶底渐变，§7.3）

删除 src/components/landing/PlazaInscription.tsx（v1.2 不需要）

重构 HeaderBar（§3.2：6 项菜单 + 🎵 + 金「支持我们」）

重构 HeroSection（§4.2：金漆大字 + 七侠镇印章 + 双行 tagline + 分隔金线）

重构 AuthCard（§5.2：主存档卡 + 3 动作按钮 + 3 空存档位，完全替换表单）

重构 FooterBar（§6.2：3 社区 + 3 法律链接 + 3 设置）

动效层：进入动画（§10.1）+ Hover（§10.2 light up 取代 lift up）+ 持久动效精简

Q5 掌柜问候语：触发源改到 Hero 七侠镇印章（§4.4）

响应式：移动端汉堡菜单（§11.2）

§15 验收 Checklist 逐项过

Q1（鸣锣 / 盖印 / 竹笛音效）仍在等用户视频素材，按 §14.2 占位方案施工即可。