---

## title: PisellReservation 目录与文件索引（按文件夹）

order: 9
category: plus

本文按**文件夹**列出 `packages/private-materials/src/plus/pisellReservation/` 下各文件职责，便于对照源码与拆分边界。

路径均相对于上述 `pisellReservation/` 根目录。

---

## 根目录

| 文件                              | 作用                                         |
|---------------------------------|--------------------------------------------|
| `PisellReservation.tsx`         | 预约主组件：引擎上下文、数据合并、`RecordBoard`、工具栏与弹窗组装    |
| `PisellReservation.less`        | 预约页与顶栏、新建弹窗等样式                             |
| `PisellReservation.stories.tsx` | Storybook                                  |
| `index.tsx`                     | 本模块对外导出                                    |
| `types.ts`                      | Props、表格行等类型定义                             |
| `reservationConstants.ts`       | i18n key、防抖常量、新建路由 proCode、页面级 locales 合并等 |
| `README.md`                     | 模块说明                                       |
| `dependency-inventory.md`       | 依赖/能力分类（开发笔记）                              |

---

## `hooks/`

| 文件                                         | 作用                                                          |
|--------------------------------------------|-------------------------------------------------------------|
| `usePisellReservationBookingData.ts`       | 内置模式预约列表请求、筛参、`patchSearchParams`                           |
| `usePisellReservationResourceTableData.ts` | 内置模式资源台（桌位）数据                                               |
| `useReservationScheduleDebounced.ts`       | 日程 UI 值与防抖提交值、定时 flush/queue                                |
| `useReservationSalesHostData.ts`           | 宿主 `sales.getResourceBookingList` / `getTimelineHighlights` |
| `useNewReservationRoutesFromEngine.ts`     | 从引擎路由筛「新建预约」可选页面                                            |
| `useReservationLoadingShownDebounced.ts`   | 列表 loading 延迟展示，减轻闪烁                                        |
| `useFloorMapBookingInteraction.ts`         | 平面图点击 → 宿主结账或内置详情弹窗、`floorMapItemClickBefore`               |

---

## `data/`

| 文件                                    | 作用                                            |
|---------------------------------------|-----------------------------------------------|
| `reservationDataUtils.ts`             | 是否走内置列表、筛参合并、营业日 booking 窗口、`initialBodyView` |
| `reservationTablesMerge.ts`           | 资源行与预约行合并为 `tables`、宿主列表结果规范化                 |
| `reservationDensity.ts`               | 时间轴密度桶、与宿主 highlights 格点对齐                    |
| `filterBookingsAtTimeCursor.ts`       | 按时间游标过滤预约                                     |
| `bookingToReservationTables.ts`       | booking → 表格行结构                               |
| `formResourceToReservationTables.ts`  | 表单资源 → 表格行                                    |
| `salesEmbeddedResourceToTableRows.ts` | Sales 嵌入资源 → 表格行                              |

---

## `floorMap/`

| 文件                                 | 作用                                              |
|------------------------------------|-------------------------------------------------|
| `useReservationFloorPlan.ts`       | 店铺平面图远程加载/订阅与 `baseFloorConfig`                 |
| `useReservationFloorMapMerged.tsx` | 合并 props 的平面图、远程持久化包装等                          |
| `floorPlanApi.ts`                  | 平面图 HTTP 封装、默认 plan id / code                   |
| `floorMapBoundRecordIds.ts`        | 场景元素绑定 → `form_record_ids`                      |
| `reservationCards.tsx`             | 平面图卡片渲染、`findReservationRow`、`renderItemByKind` |
| `floorMapHostCheckout.ts`          | 点击解析宿主结账用 raw 记录                                |
| `ReservationFloorMapHud.tsx`       | 平面图视口 HUD 覆盖层                                   |
| `ReservationFloorMapHud.less`      | HUD 样式                                          |
| `ReservationCards.less`            | 平面图卡片样式                                         |
| `reservationMock.ts`               | 平面图/预约 mock                                     |

---

## `components/`

| 文件                                   | 作用                                               |
|--------------------------------------|--------------------------------------------------|
| `PisellReservationSubcomponents.tsx` | bodyView 同步、顶栏日程带与表格/平面图切换、网格右上角、平面图 Tab 尾区、默认标题 |

### `components/bookingDetailModal/`

| 文件                                   | 作用                    |
|--------------------------------------|-----------------------|
| `ReservationBookingDetailModal.tsx`  | 预约详情弹窗 UI             |
| `ReservationBookingDetailModal.less` | 弹窗样式                  |
| `bookingDetailFromRaw.ts`            | 原始 booking → 展示模型     |
| `bookingProductToProductCard.ts`     | 行内商品 → ProductCard 数据 |
| `index.ts`                           | 子模块导出                 |

---

## `floorRoomCard/`

| 文件                              | 作用             |
|---------------------------------|----------------|
| `ReservationFloorRoomCard.tsx`  | 平面图「房间」卡片壳组件   |
| `ReservationFloorRoomCard.less` | 房间卡片样式         |
| `FloorRoomCardFromData.tsx`     | 由数据驱动组装房间卡片    |
| `mapRowToFloorRoomCardData.ts`  | 表格行 → 卡片数据     |
| `buildCardBodyViewModel.ts`     | 卡片 body 视图模型   |
| `mapFloorRoomCardViewProps.ts`  | 映射为视图 Props    |
| `floorRoomCardModel.ts`         | 卡片领域模型         |
| `floorRoomCardHeaderFormat.ts`  | 头部文案/格式        |
| `floorRoomCardPaymentUi.ts`     | 支付态展示          |
| `floorRoomCardUtils.ts`         | 卡片通用工具         |
| `floorRoomCardDom.ts`           | DOM / data 属性等 |
| `index.ts`                      | 导出             |

### `floorRoomCard/views/`

| 文件                       | 作用     |
|--------------------------|--------|
| `RoomCardShellView.tsx`  | 卡片外壳布局 |
| `RoomCardHeaderView.tsx` | 卡片头    |
| `RoomCardBodyView.tsx`   | 卡片主体   |
| `RoomCardIcons.tsx`      | 图标区    |

---

## `grid/`

| 文件                                   | 作用         |
|--------------------------------------|------------|
| `reservationResourceGridColumns.tsx` | 资源/预约网格列定义 |

---

## `serve/`

| 文件                    | 作用         |
|-----------------------|------------|
| `formResourcePage.ts` | 资源分页接口请求封装 |

---

## `locales/`

| 文件              | 作用         |
|-----------------|------------|
| `locales.ts`    | 主文案（多语言对象） |
| `locales-ja.ts` | 日语补充       |
| `locales-pt.ts` | 葡语补充       |

---

## `api/`

| 文件                       | 作用        |
|--------------------------|-----------|
| `api.md`                 | 接口说明      |
| `api-floor-map.md`       | 平面图接口说明   |
| `api-bookings-demo.json` | 预约列表示例    |
| `create-floor-map.json`  | 创建平面图请求示例 |

---

## `docs/`

| 文件                                        | 作用           |
|-------------------------------------------|--------------|
| `PisellReservation.md`                    | 组件使用/说明文档    |
| `pisell-reservation-deep-dive.md`         | 架构与数据流深入     |
| `pisell-reservation-feature-inventory.md` | 功能清单         |
| `pisell-reservation-multi-datasource.md`  | 多数据源专题       |
| `pisell-reservation-name-audit.md`        | 命名审计         |
| `booking-detail-modal-data-ui-map.html`   | 详情弹窗数据-UI 对照 |
| `floor-room-card-data-ui-map.html`        | 房间卡片数据-UI 对照 |
| `pisell-reservation-files-by-folder.md`   | 本文：按文件夹的文件索引 |

---

## 相关说明

- 更偏**数据流与目录职责**的叙述见 [pisell-reservation-deep-dive.md](./pisell-reservation-deep-dive.md)
  与 [pisell-reservation-multi-datasource.md](./pisell-reservation-multi-datasource.md)。
- 依赖分层标注见仓库内 `dependency-inventory.md`（与本文同级的根目录文件）。