房态日历
这一页干什么
按「房间 × 日期」网格总览所有预订与在住情况，在格子上直接办理日常的入住、退房、开单、换房、清扫等操作——不需要进入别的页面，在日历上就能把当天的活干完。
公共顶栏
本页面顶部导航栏由「顶部导航栏」统一承载，文内只作简短说明：
- 左侧：当前酒店名称；如有多店可切换（切换时提示到期状态）
- 中间：一级菜单（房态日历、房态视图、钟点房、订单、报表、渠道同步、门锁、清扫、小程序、设置）
- 右侧：
- 记账：快捷入口
- 站内信🔔：有未读消息时显示红点
- 用色方案🎨：仅集团管理员可见，点开后可自定义「来源 × 订单状态」的格子颜色（详见 顶部导航栏 `page-nav-header`）
- 操作员姓名：当前登录账号名称
- 退出：退出登录
详细说明见专篇：顶部导航栏 `page-nav-header`
本页区域说明
顶部：房型筛选条
- 点击「全部」或某个房型名称，只显示该类房间；筛选后右侧提示「已加载 N 间 / 共 M 间」
- 当房间数较多时，下面「加载更多」可继续向下展开，不需要一次加载全部
左上：日期选择与切换
- 左上角点击日期区域可打开月份日历弹层，直接跳到任意一天
- 表头每个日期列显示「日 / 周几」；每月1号额外显示月份
- 顶部有 ← →（上一日 / 下一日）按钮，切换时保持当前选中的时间点
- 有钟点房的日期，格子顶部会显示「钟」标记
表格主体：房间行 × 日期列
每个格子代表「某间房 × 某一天」，显示该天是否有订单。格子颜色含义如下（默认颜色，可由集团管理员在 顶部导航栏用色方案 中自定义）：
| 颜色类型 | 含义 |
|---|---|
| 待入住色 | 已有预订订单，当天尚未入住 |
| 已入住色 | 当天有客人在住 |
| 已退房色 | 当天已有客人退房（但还未重新安排） |
| 取消色 | 订单已取消（不占房） |
| 维修房色 | 房间被标记为维修状态 |
| 空房底色（干净） | 房间空闲且状态为「干净」 |
| 空房底色（脏房） | 房间空闲但状态为「脏房」 |
注意：取消分房的格子不显示订单信息，看起来像空格，但该日期仍有记录；如需恢复，点「恢复分房」即可。
左侧：房间号与干净 / 脏房
每间房的左侧显示房间号，房间号旁边有一个状态色块：
- 绿色边 = 房间当前是「干净」
- 红色边 = 房间当前是「脏房」
- 点击房间号区域，状态在「干净」与「脏房」之间切换（无需弹出任何确认框，直接生效）
- 该状态影响：清扫任务是否需要派、房间是否可再次安排客人入住
右键菜单
在格子上右键（移动端为长按）弹出操作菜单，菜单内容因格子状态不同而异。
#### 有订单的格子（右击订单）
菜单包含以下操作，每项均跳转到对应弹窗：
| 菜单项 | 打开 | 说明 |
|---|---|---|
| 查看订单 | 订单详情弹窗 `page-op-order` | 查看完整订单信息、入住时间、客人资料等 |
| 修改订单 | 修改订单弹窗 `page-edit-order` | 修改入住日期、退房日期、房间号、房价等 |
| 办理入住 | 办理入住/退房弹窗 `page-booking-order` | 预订单转实际入住（需当天） |
| 办理退房 | 办理入住/退房弹窗 `page-booking-order` | 将已入住订单结账退房 |
| 取消订单 | 取消订单弹窗 `page-cancel-order` | 取消整张订单（需注明原因） |
| 取消分房 | 同上取消订单弹窗 | 仅取消当前房间与该订单的关联，订单本身仍在 |
| 恢复分房 | 同上修改订单弹窗（部分场景） | 恢复被取消分房的记录 |
| 安排清扫 | 安排清扫弹窗 `page-fangtai-order-cleaner` | 给该房间指派清扫人员 |
| 取消 | 关闭菜单 | — |
⚠️ 维修房订单无法查看详情，只能「取消维修房」。
#### 空房格子（右击空格）
| 菜单项 | 打开 | 说明 |
|---|---|---|
| 新增预定 | 新建订单弹窗 `page-new-order`（普通模式）或 详细模式 `page-new-order2` | 选好日期后直接在此格新建预订 |
| 维修房 | —（本页内处理） | 将该房间标记为维修状态，格子颜色变为维修色 |
| 恢复分房 | — | 当该格存在取消分房记录时出现，恢复分房关联 |
| 取消选择 | — | 取消当前多选状态 |
悬停订单详情浮层
鼠标悬停在任意订单格子上（PC端），延迟约 300ms 后弹出详情浮层，显示：
- 客人姓名（或散客）
- 入住日期 ～ 退房日期
- 房间号（在同订单多间房时显示完整列表）
- 入住时间 / 退房时间
- 房间状态 / 订单状态（带颜色）
- 订单标签
注意：维修房订单无法查看详情。
加载逻辑（懒加载）
本页面使用多段懒加载，以避免一次性加载过多数据导致卡顿：
| 加载维度 | 行为 |
|---|---|
| 首屏 | 进入页面后先加载当天及前后各一段时间的数据 |
| 房间纵向加载 | 当房间数较多时，先渲染屏幕上能看到的部分；向上/下滑动到底部时触发「加载更多」 |
| 日期横向加载 | 左右滑动日期超出已加载范围时，顶部日期条边缘出现加载提示，点击可继续向左/右加载更多日期 |
| 日期切换 | 点击「← →」或选日期时，只更新「当前视野」内的数据，已加载过的区间保留 |
右下角快捷浮窗
右下角固定有三个快捷按钮：
| 按钮 | 打开 | 说明 |
|---|---|---|
| 🔍 查询 | 订单详情弹窗 `page-op-order` | 输入订单号 / 客人姓名快速定位订单 |
| 📋 批量录入 | 批量录入弹窗 `page-batch-order` | 一次录入多张订单（适用于团队、OTA 订单导入） |
| 📷 OTA 截图 | OTA 截图识别弹窗 `page-ocr-preview` | 拍摄携程 / 美团 / 抖音等 OTA 平台订单截图，AI 自动识别房号、日期、姓名等信息并填入新建订单 |
注意点
- 右键菜单的可用项与当前操作员的权限有关；无权限时对应菜单项不显示
- 维修房订单不能查看详情，只能操作「取消维修房」
- 「取消分房」只是将该房间从订单中移除，订单本身仍然存在；房间可再次安排其他客人
- 取消分房后的格子看起来像空房，但实际有隐藏记录；此时右键菜单会显示「恢复分房」
- 钟点房在日历上只显示「钟」标记，钟点房的完整操作请见 今日钟点 `page-hourly-today`
- 房间状态（干净 / 脏房）直接影响清扫系统中的任务生成；脏房不清扫无法再次安排入住
- 如需自定义格子颜色（按来源、按状态），由集团管理员在 顶部导航栏的用色方案 中调整
相关页面与弹窗
| 本页入口 | 目标帮助页 |
|---|---|
| 右键 → 新增预定 | 新建订单（普通） `page-new-order` / 新建订单（详细） `page-new-order2` |
| 右键 → 查看订单 | 订单详情 `page-op-order` |
| 右键 → 修改订单 | 修改订单 `page-edit-order` |
| 右键 → 办理入住 / 退房 | 办理入住/退房 `page-booking-order` |
| 右键 → 取消订单 | 取消订单 `page-cancel-order` |
| 右键 → 安排清扫 | 安排清扫 `page-fangtai-order-cleaner` |
| 右下角 → 批量录入 | 批量录入 `page-batch-order` |
| 右下角 → OTA 截图 | OTA 截图识别 `page-ocr-preview` |
| 右下角 → 查询 | 订单详情 `page-op-order`（或 订单列表 `page-fangtai-order-index`） |
| 顶栏用色方案🎨 | 顶部导航栏 `page-nav-header` |
| 顶栏记账 / 站内信 / 退出 | 顶部导航栏 `page-nav-header` |
| 钟点房操作 | 今日钟点 `page-hourly-today`（或 开钟点 `page-hourly-open`） |
待补充弹窗篇（未完成）
以下目标篇尚未完成，链接暂时标记为 TODO，待各弹窗篇写完后替换为真实链接：
page-new-order（新建订单·普通）page-new-order2（新建订单·详细）page-op-order（订单详情）page-edit-order（修改订单）page-booking-order（办理入住/退房）page-cancel-order（取消订单）page-fangtai-order-cleaner（安排清扫）page-batch-order（批量录入）page-ocr-preview（OTA 截图识别）page-fangtai-order-index（订单列表）page-hourly-today（今日钟点）page-hourly-open（开钟点）page-nav-header（顶部导航栏）