# 房务作废配房视觉区分

## 目标前端

- 端类型：管理后台（Web）
- 目标仓库：`mmg/hl-ui`（`https://git.1814.love:8443/mmg/hl-ui.git`）
- 联调/验收环境：`http://192.168.100.160:9527`
- 其他前端：小程序、H5 无需处理

> 服务：`hl-order-service-v3`（8086）
> 关联 PR：#5097
> 日期：2026-07-21
> 影响范围：房务订单详情中的作废需求及配房快照展示

---

## 关键问题

当前管理后台打开作废住宿需求时，顶部已提示“只读查看”和“已作废”，但“配房行程”仍使用绿色背景以及“已确认/已完成”标签。该视觉语义会让房务误认为这些配房仍然有效。

作废需求中的配房数据是历史快照，仅用于追溯，不能复用当前有效配房的成功态样式。

---

## 前端处理要求

1. 当详情响应表明当前查看的住宿需求已作废时，配房行程内所有快照行统一进入“作废历史”展示态。
2. 行背景使用浅红色警示背景，边框和状态标签使用红色语义；保证文字对比度，不使用高饱和纯红大面积填充。
3. 原绿色“已确认”和“已完成”标签统一替换为红色“已作废”。原确认阶段可作为次要文字展示，例如“作废前：已最终确认”，不得继续作为当前状态标签。
4. 酒店、房型、入住日期、房间数、价格和支付方式继续展示，数据来源保持后端作废快照，不读取当前酒店或房型主数据覆盖快照。
5. 作废详情必须保持全只读：隐藏或禁用配房、改单、删除、确认、最终确认等写操作。
6. 非作废需求继续沿用现有绿色确认/完成样式，不得受影响。

---

## 推荐展示层级

- 需求级：顶部保留红色“已作废”状态和只读原因。
- 配房行级：浅红背景 + 红色“已作废”标签。
- 历史阶段：灰色次要文案“作废前：未确认 / 单日确认 / 最终确认”。
- 操作区：不出现任何可写按钮。

---

## 验收场景

| 场景 | 预期 |
|------|------|
| 作废需求存在两晚已确认配房快照 | 两晚均显示浅红背景和“已作废”，不显示绿色“已完成” |
| 作废前处于单日确认 | 主状态“已作废”，次要信息可显示“作废前：单日确认” |
| 作废前已最终确认 | 主状态“已作废”，次要信息可显示“作废前：最终确认” |
| 作废快照中的房型已被资源侧修改/删除 | 仍展示作废时冻结的房型名称 |
| 打开作废详情 | 只能查看，不存在可触发写接口的按钮 |
| 打开当前有效需求 | 原绿色确认/完成样式不变 |

---

## 接口依据

- 详情：`GET /admin/house/orders/{orderId}?requirementId={voidedRequirementId}`
- 后端已返回作废需求状态、只读原因及作废时配房快照。
- 本通知不要求新增或修改后端接口。

## 不影响范围

- 选单池、我的订单筛选和抢单流程不变。
- 当前有效需求的配房、确认和最终确认流程不变。
- 小程序、H5 无需处理。

## 相关文档

- 后端 PR：[#5097](https://git.1814.love:8443/wx/HL/pulls/5097)
- 改期旧配房人工清理：`changelogs-v2/2026-07/75_5097_改期旧配房人工清理-管理后台.md`