№ · UI 规范 CH.06.22
主页 · 🎨 UI 规范 · mobile-portrait-rulebook

mobile-portrait-rulebook

📅 2026-06-22 · 📦 7.2 KB · 🎨 UI 规范 · 📝 MD 文档 🏷️ Buff🏷️ 规范

# 竖屏重构规则

目标

  • 竖屏首页只保留一屏以内的核心操作与反馈。
  • 取消首页级上下滚动，单手可完成高频动作。
  • 让大堂、日志、动作栏形成固定闭环：看见状态 -> 看见告警 -> 立即操作 -> 结果回流。
  • 竖屏标准基线以 360x780 为准，对齐 Huawei P30 这类常见竖屏尺寸。
  • 所有竖屏适配优先按 360 宽度验收，再向 375、390、412 等更宽机型扩展。

适用范围

  • src/App.tsx
  • src/components/InnCourt.tsx
  • src/components/RandomEventPopup.tsx
  • src/components/LedgerSummaryTab.tsx
  • src/components/FacilitiesTab.tsx
  • src/components/RecipeTab.tsx
  • src/components/AdventureTab.tsx
  • src/components/BackyardTab.tsx
  • src/components/KitchenTab.tsx
  • src/components/BaggageTab.tsx
  • src/components/StaffTabs.tsx
  • src/components/PeerLobby.tsx

竖屏首页结构

  • 顶部 15%: 店名、铜钱、声望、清洁、安防。
  • 中部 40%: 大堂沙盘。
  • 中下部 20%: 江湖消息摘要。
  • 底部 25%: 主动作 + 固定锚点轮盘 + 轻量功能切换。

设备高度不足时，优先压缩日志与底部栏，禁止压缩主动作文字或把主要信息挤成窄列。

窄屏降级

  • 当竖屏宽度低于 360px 时，顶部徽章、日志筛选和底部按钮全部进入 compact 模式。
  • compact 模式只允许缩间距、缩图标、缩边距，不允许再缩主动作主文案。
  • InnCourt 的场景头和桌位卡在 compact 模式下必须进一步压缩高度，优先保住 8 桌完整可见。
  • 353px 这类极窄设备上，轮盘浮窗与底部 dock 仍然可以共存，但轮盘必须固定锚点，允许拖拽后回弹到安全区内，不允许占用主页中心空间。

核心硬规则

  • 首页不允许页面级滚动。
  • 竖屏首屏不能依赖头图或大面积装饰卡。
  • 8 桌必须在首屏完整可见。
  • 日志必须常驻，默认显示 3 到 4 行。
  • 日志默认只显示摘要，点击后展开全文。
  • 底部主操作必须始终可见。
  • 任何长模块只允许在独立页、抽屉或弹层内滚动。
  • 任何固定入口都必须先吃掉 env(safe-area-inset-*)，再谈视觉偏移。

文本规则

  • 主标题不低于 16px。
  • 正文不低于 13px。
  • 次级说明不低于 12px。
  • 11px 只允许用于徽章、角标和极短状态。
  • 不得用更小字号去挤布局。
  • 中文长文本优先换行到第二行，或改成 icon + 短名。
  • 禁止把关键中文文案压成单字竖列或极窄列。
  • 按钮文字优先两到四字短词，必要时加图标。
  • 任何按钮和卡片的最小触达高度为 44px。

大堂沙盘规则

  • InnCourt 是首页核心，不做装饰性大图。
  • 同福开张 合影只允许背景化、水印化，或下沉到二级页面。
  • 清洁 / 安防只做轻量 HUD 或叠层条，不单独占大卡。
  • 8 桌必须用轻网格展示，默认采用 4 x 2。
  • 桌位卡只显示桌号、状态、进度、异常角标。
  • 选中桌位后才展开更多信息。
  • 飞贼、垃圾、待客、催菜等状态优先以桌位高亮和角标呈现。
  • 大堂中央不再放大段说明文。

日志规则

  • 江湖消息 固定在首页中下部。
  • 默认只展示最近 3 到 4 行高优先级消息。
  • 日志分类至少分为 全部 / 警报 / 系统 / 经营。
  • 筛选必须是单击芯片，不得依赖下拉长菜单。
  • 完整日志放入抽屉，不得挤占首屏高度。
  • 新日志进入时只做轻提示，不抢焦点，不盖住主操作。

动作规则

  • 底部动作区只保留 1 个主动作 + 2 个次动作。
  • 主动作必须由当前状态自动决策。
  • 主动作示例:
    • thiefList.length > 0 -> 点穴
    • 否则 cleanliness 过低 -> 洒扫
    • 否则存在空桌 -> 叫客入座
    • 否则有待处理客人 -> 催菜 / 翻台
    • 否则 -> 对账
  • 主动作的高亮、闪烁、置顶只用于当前最紧急事件。
  • 次动作固定为低频但常用入口，如 对账、更多。
  • 更多 应打开固定锚点轮盘浮窗，承接后院、后厨、闯荡、行囊、说明、路线、静音等二级入口。
  • 轮盘默认固定在右下安全区锚点，可拖动重定位，但拖动后必须被 clamp 回屏内，不能离屏或压住底栏。
  • 减少同时出现的大按钮数量，避免手机底部拥挤。
  • 功能切换栏优先图标化，文字只保留极短标签。

模块归属

| 模块 | 手机首页 | 承载方式 | | --- | --- | --- | | 账本总览 (LedgerSummaryTab) | 否 | 全屏页或抽屉 | | 招贤 / 员工 (StaffTabs) | 否 | 全屏页或抽屉 | | 菜谱 (RecipeTab) | 否 | 全屏页或抽屉 | | 后院 (BackyardTab) | 否 | 全屏页或抽屉 | | 后厨 (KitchenTab) | 否 | 全屏页或抽屉 | | 闯荡 (AdventureTab) | 否 | 全屏页或抽屉 | | 设施 (FacilitiesTab) | 否 | 全屏页或抽屉 | | 行囊 (BaggageTab) | 否 | 全屏页或抽屉 | | 联机同盟 (PeerLobby) | 否 | 全屏页或抽屉 | | 随机事件 (RandomEventPopup) | 否 | 底部 sheet 或全屏弹层 |

模块页规则

  • 模块页允许内部滚动，首页不允许。
  • 模块页可以提高信息密度，但必须保持 375px 到 412px 宽度可读。
  • RandomEventPopup 的手机版必须改成 sheet 化布局，选项纵向堆叠。
  • 二级页面返回入口必须稳定可见。
  • 模块页的关闭按钮或返回按钮必须高优先级，触达区足够大。

竖屏接线规则

  • 首页主动作由当前状态自动决策，优先级固定为：飞贼 -> 洒扫 -> 叫客入座 -> 催菜/翻台 -> 对账。
  • 次动作只保留两个入口：对账、更多。
  • 浮窗轮盘优先承接二级功能，固定锚点放在右下角安全区内侧，允许拖拽但必须受安全区 clamp 约束，不允许离屏摆放。
  • InnCourt 竖屏只输出沙盘，不再把大说明卡塞进首页。
  • 任何大段说明、长列表、细粒度管理内容都必须进入 sheet、抽屉或二级页。

禁止事项

  • 首页级多层纵向堆叠。
  • 依赖 text-[10px] 或更小字号作为主要信息。
  • 把按钮、日志、卡片一起塞进单列长页面。
  • 用缩小字体代替删减内容。
  • 用桌面式侧边栏原样搬到手机。
  • 用滚动条解决布局失控。
  • 让卡片内部再嵌套大卡片。
  • 让浮动入口固定在错误的位置，或拖出安全区。

实施顺序

  1. App shell: 顶栏 / 底栏 / 模式切换。
  2. InnCourt: 沙盘 + 桌位网格 + 轻 HUD。
  3. Log: 固定行高 + 筛选芯片。
  4. Action dock: context primary action。
  5. RandomEventPopup: mobile sheet。
  6. 其余模块: drawer / page 化。
  7. 最后做细节收口与多机型验证。

验收标准

  • 375x812、390x844、412x915 竖屏首页无页面滚动。
  • 360x780 作为首要验收基线，其他分辨率以不破坏该基线为前提。
  • 首屏内可同时看到 HUD / 大堂 / 日志 / 底栏。
  • 8 桌完整可见。
  • 主动作在拇指可达区。
  • 日志默认显示 3 到 4 行。
  • 随机事件选项可完整阅读。
  • 无横向滚动，无文本重叠。
  • 首页不出现页面级纵向滚动条。
  • npm run lint 和 npm run build 通过。

约束说明

这份规则是后续竖屏开发的唯一约束来源。若与现有桌面布局冲突，竖屏首页规则优先。