---
nav:
  title: 组件
  order: 1
group:
  title: PisellReservation
  order: 1
title: ReservationFloorRoomCard
order: 10
category: plus
---

## 小宽高 / 密度（density）

平面图上的房间卡在画布缩放或图元尺寸较小时，需要压缩信息层级，避免挤成一团。

- **`density`**（默认 `auto`）：由根节点 **布局宽高 × `viewportScale`** 得到视觉短边，再映射到 `comfortable` → `compact` → `mini` → `micro`。档位切换带少量迟滞，避免缩放时来回跳档。
- **`viewportScale`**（默认 `1`）：与平面图画布缩放一致。在 **`PisellFloorMapLayout`** 阅读态/编辑态中，由布局通过 `FloorMapRenderOptions.viewportScale` 传入预约绑定渲染（见 `floorMap/reservationCards.tsx`）。
- **画布缩放抵消**：`--floor-card-vs = min(viewportScale, 1)`。缩小时内层为 **较小布局盒（宽、高为槽位的 vs 倍）+ `transform: scale(1 / vs)`** 把图元在地图坐标系里放大回满槽，再经画布整体 zoom 后，屏上字号/线宽才接近期望；若误用 `scale(vs)` 会反向把内容压小。放大（scale 大于 1）时 min 为 1，不补偿。`density` 仍按完整 **viewportScale** 与布局尺寸计算档位。
- **显式档位**：传入 `comfortable` / `compact` / `mini` / `micro` 时覆盖自动推导，适用于 Story 或强制对照某档 UI。
- **`data-density`**：解析后的档位挂在根节点上，Less 中可用 `[data-density='mini']` 等做样式降级。
- **圆桌多行预览**：`elementLayoutHeightPx` 仍只用于圆桌体内的预览行数算法，**不乘** `viewportScale`（与视觉密度无关）。

支付指示仅区分 **`paid` / `unpaid`**（见 `floorRoomCardPaymentUi`）；超时占用进度条不属于支付态。