《同福客栈挂机游戏》横版 UI 布局重构技术文档 · UI 重构

立项时间：2026-06-26
文档状态：技术设计方案（待评审）
适用范围：Web 横版首页（视口宽度 ≥ 1024px）
核心约束：只调尺寸 / 间距 / 对齐 / 密度，不动色板 / 字体 / 材质 / 动效 / 数据 / 业务

1. 重构背景与现状分析

目前 Web 横版界面承载了丰富的游戏经营数据和交互逻辑，但由于信息密度极高、各模块尺寸与对齐不够严整，导致在不同分辨率（如 1280px、1440px、1680px）下容易产生视觉上的“散”和“凌乱”。

根容器：[DesktopWorkspacePanel.tsx](file:///e:/同福客栈挂机游戏/src/components/DesktopWorkspacePanel.tsx) (桌面横版根容器)
顶部状态栏：[AppHeaderBar.tsx](file:///e:/同福客栈挂机游戏/src/components/AppHeaderBar.tsx) (包含 LOGO、掌柜信息、4 状态卡、5 按钮)
剧情追踪条：[StoryTrackingCard.tsx](file:///e:/同福客栈挂机游戏/src/components/StoryTrackingCard.tsx)
左侧导航：[DesktopSidebar.tsx](file:///e:/同福客栈挂机游戏/src/components/DesktopSidebar.tsx) (6 木牌)
中间大堂主面板：[MainHallPanel.tsx](file:///e:/同福客栈挂机游戏/src/components/MainHallPanel.tsx)
- [SystemStatusPanel.tsx](file:///e:/同福客栈挂机游戏/src/components/SystemStatusPanel.tsx) (4 子卡：账号/周目/Buff/客栈)
- [InnCourt.tsx](file:///e:/同福客栈挂机游戏/src/components/InnCourt.tsx) (大堂场景)
右侧控制台：[DesktopConsolePanel.tsx](file:///e:/同福客栈挂机游戏/src/components/DesktopConsolePanel.tsx)
- [ConsoleTabsBar.tsx](file:///e:/同福客栈挂机游戏/src/components/ConsoleTabsBar.tsx) (10 Tab 网格)
- [LedgerSummaryTab.tsx](file:///e:/同福客栈挂机游戏/src/components/LedgerSummaryTab.tsx) (经营总览台账)
  - [MetricGrid.tsx](file:///e:/同福客栈挂机游戏/src/components/ledger/MetricGrid.tsx) (7 指标卡，含 4 核心卡)

顶部 4 状态卡宽度不一：padding 不一致，min-width 不统一，flex 比例不一致，导致视觉扫读不顺畅。
顶部 5 按钮高度不齐：高度在 32px-36px 之间混杂，且未实现 stretch 垂直居中对齐。
全局 max-w 偏大：目前使用 max-w-[1680px]，在 1280px-1440px 视口下两侧挤压严重，建议收紧至 max-w-[1440px]。
左侧 6 木牌尺寸偏小：目前为 56×56，字号 10px 偏小，且中间虚线分隔突兀。
大堂图比例偏方：目前为 16:9 比例，在横版下显得不够舒展，建议调整为 21:9 扁平挂轴比例。
SystemStatusPanel 4 子卡极度拥挤：padding 仅 1-1.5px，字号偏小，内容堆叠。
控制台 10 Tab 布局不平衡：采用 3 列布局导致最后一行出现 1 个孤立 Tab，建议重构为 2 列平衡布局。
经营总览台账 4 核心卡 padding 偏小：目前为 p-3 (12px)，数据字号偏小，缺乏高端台账的舒展感。

色板：保留所有现有色值（5 类宣纸色、6 类朱砂色、木棕/灯火/竹青/靛蓝等）。
字体：保留 Noto Serif SC、ZCOOL KuaiLe、Playfair Display 三套字体。
材质与工具类：保留 tongfu-parchment (宣纸主卡)、tongfu-parchment-light (浅宣纸)、tongfu-crest (朱红小印)、tongfu-seal (朱砂实心印章)、tongfu-button-wooden (木质按钮) 等。
业务与数据：不修改任何业务逻辑、数据流、交互状态及 props 接口。

尺寸与间距：调整 className 上的 width, height, padding, margin, gap。
圆角规范：收编并统一为三档：8px (小卡片/按钮)、10px (系统子卡)、12px (主面板/大卡片)。
网格列数：调整 Grid 列数以实现视觉平衡。
字号阶梯：收编散落的字号，统一为：10px / 11px / 12px / 14px / 16px / 18px / 22px / 26px。

4 状态卡统一：
- 统一设置 min-width: 140px，flex: 1（等宽等弹性）。
- 统一 padding 为 12px 14px。
- 标题行使用 text-[10px] tracking-[0.05em]，数值行使用 text-[22px] font-serif font-black，副行使用 text-[10px] text-[#8d6e63]。
5 按钮组对齐：
- 前 4 个图标按钮固定 36×36px，align-self: center。
- "天降财神"主按钮固定高度 36px，padding 0 14px。
- 按钮组外层容器使用 flex items-center gap-1.5 self-stretch，使其与左侧状态卡等高对齐。

将 DesktopWorkspacePanel.tsx（3 处）及 AppHeaderBar.tsx（1 处）的 max-w-[1680px] 统一收紧为 max-w-[1440px]。
预期效果：在 1280px - 1440px 视口下，单行布局更加舒展，两侧留白更合理。

尺寸调整：按钮尺寸由 h-14 w-14 (56×56px) 放大至 h-16 w-16 (64×64px)。
字号调整：字号由 text-[10px] 提升至 text-[11px]。
间距与分隔：
- 按钮间距由 gap-4 缩减至 gap-3 (12px)，使序列更紧凑。
- 废弃突兀的虚线分隔 border-b-2 border-dashed，改用“金线 + 圆点”小木塞样式的 div 装饰。

大堂图比例重构：
- 高度统一为 h-48 (192px)，比例调整为约 21:9。
- 圆角由 16px 统一收缩至 12px，与主系统卡保持一致。
SystemStatusPanel 4 子卡降噪：
- 子卡圆角统一为 rounded-[10px]，padding 提升至 px-3 py-2。
- 标题字号由 text-[9px] → text-[10px]。
- 数值字号由 text-[11px] → text-[12px]。
- 副标题字号由 text-[8px] → text-[9px]。
- 子卡间距由 gap-1.5 → gap-2。

布局重构：
- 将 grid-cols-3 调整为 grid-cols-2 lg:grid-cols-2（在 lg 视口下也保持 2 列）。
- 10 个 Tab 形成 2-2-2-2-2 的 5 行 2 列完美对称布局，彻底消除最后一行单个 Tab 孤立悬空的问题。
- Tab 按钮最小高度由 min-h-[46px] 提升至 min-h-[52px]，提升点击触达体验。

卡片舒展化：
- 4 核心卡 padding 由 p-3 (12px) 提升至 p-4 (16px)。
- 网格间距由 gap-3 提升至 gap-4 (16px)。
- 数值字号由 text-[14px] 提升至 text-[16px] font-black，增强数据可读性与视觉冲击力。