npm - @pisell/private-materials - Versions diffs - 6.11.181 → 6.11.182 - Mend

@pisell/private-materials 6.11.181 → 6.11.182

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/lib/plus/pisellReservation/docs/booking-detail-modal-data-ui-map.html DELETED Viewed

@@ -1,357 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>预约详情弹窗 · 数据来源与 UI 对应</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      :root {
-        --ink: #1a1f1c;
-        --muted: #5c6560;
-        --line: #c8d0ca;
-        --warn-bg: #fff8f0;
-        --warn-border: #f0c9a8;
-        --mono: "JetBrains Mono", monospace;
-        --sans: "DM Sans", system-ui, sans-serif;
-      }
-      * {
-        box-sizing: border-box;
-      }
-      body {
-        margin: 0;
-        padding: 32px 24px 56px;
-        font-family: var(--sans);
-        color: var(--ink);
-        background: linear-gradient(165deg, #eef2ef 0%, #e2e8e4 45%, #dce5df 100%);
-        min-height: 100vh;
-      }
-      h1 {
-        font-size: 1.35rem;
-        font-weight: 700;
-        letter-spacing: -0.02em;
-        margin: 0 0 8px;
-      }
-      .lead {
-        color: var(--muted);
-        font-size: 0.9rem;
-        max-width: 820px;
-        line-height: 1.55;
-        margin-bottom: 28px;
-      }
-      .panel {
-        border: 1px solid var(--line);
-        border-radius: 10px;
-        background: #fff;
-        padding: 16px 18px 18px;
-        margin-bottom: 20px;
-        max-width: 1100px;
-        box-shadow: 0 4px 18px rgba(26, 31, 28, 0.06);
-      }
-      .panel h2 {
-        margin: 0 0 12px;
-        font-size: 0.72rem;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.08em;
-        color: var(--muted);
-      }
-      .panel p {
-        margin: 0 0 10px;
-        font-size: 0.82rem;
-        line-height: 1.5;
-        color: var(--muted);
-      }
-      .panel p:last-child {
-        margin-bottom: 0;
-      }
-      pre.flow {
-        margin: 0;
-        padding: 12px 14px;
-        background: #f4f7f5;
-        border-radius: 8px;
-        font-family: var(--mono);
-        font-size: 0.68rem;
-        line-height: 1.5;
-        color: #2a332e;
-        overflow-x: auto;
-        white-space: pre;
-      }
-      .warn {
-        margin-top: 12px;
-        padding: 10px 12px;
-        background: var(--warn-bg);
-        border: 1px solid var(--warn-border);
-        border-radius: 8px;
-        font-size: 0.75rem;
-        line-height: 1.5;
-        color: #7a4a1c;
-      }
-      .warn strong {
-        font-family: var(--mono);
-        font-size: 0.92em;
-      }
-      table.map {
-        width: 100%;
-        border-collapse: collapse;
-        font-size: 0.72rem;
-        margin-top: 8px;
-      }
-      table.map th,
-      table.map td {
-        border: 1px solid var(--line);
-        padding: 8px 10px;
-        text-align: left;
-        vertical-align: top;
-      }
-      table.map th {
-        background: #f0f4f1;
-        font-weight: 700;
-        color: #2a332e;
-        width: 26%;
-      }
-      table.map td {
-        font-family: var(--mono);
-        font-size: 0.68rem;
-        color: #2d4a3e;
-        word-break: break-word;
-      }
-      table.map td.note {
-        font-family: var(--sans);
-        color: var(--muted);
-        font-size: 0.7rem;
-      }
-      code {
-        font-family: var(--mono);
-        font-size: 0.92em;
-        background: rgba(45, 106, 79, 0.1);
-        padding: 0 4px;
-        border-radius: 3px;
-      }
-      .src {
-        font-size: 0.68rem;
-        color: var(--muted);
-        margin-top: 8px;
-      }
-      ul.files {
-        margin: 8px 0 0;
-        padding-left: 1.2em;
-        font-size: 0.75rem;
-        color: var(--muted);
-        line-height: 1.55;
-      }
-      ul.files code {
-        background: transparent;
-        padding: 0;
-        color: #2d4a3e;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>预约详情弹窗 · 数据来源与 UI 对应</h1>
-    <p class="lead">
-      与平面图
-      <a href="./floor-room-card-data-ui-map.html">RoomCard 数据说明</a>
-      同属「宿主行 → UI」对照文档。弹窗正文为<strong>单条</strong>
-      <code>floorMapSourceBookings</code> 项（点击哪条打开哪条，不做
-      <code>booking_id</code> 聚合）。Modal 使用 <code>footer=null</code>，无底部「应付」条。正文三块（粉头、操作格、商品）包在
-      <code>pisell-res-booking-detail-modal__booking-card</code> 内，样式见
-      <code>ReservationBookingDetailModal.less</code>。
-    </p>
-    <div class="panel">
-      <h2>数据从哪来</h2>
-      <p>
-        <code>PisellReservation</code> 在平面图「详情弹窗」模式下，将当前点击解析得到的<strong>单条</strong>记录写入
-        <code>bookingDetailRaw</code>，并传入 <code>ReservationBookingDetailModal</code> 的
-        <code>raw</code>；当前桌位合并行（与图元一致）传入 <code>tableRow</code>。
-      </p>
-      <pre class="flow">平面图点击
-  → resolveFloorMapHostCheckoutRecord（可选命中子卡片 data 属性）
-  → setBookingDetailRaw(rec)   // rec 为 floorMapSourceBookings[] 中一条
-  → &lt;ReservationBookingDetailModal raw={bookingDetailRaw} tableRow={…} /&gt;</pre>
-      <div class="warn">
-        <strong>禁止</strong>使用 <code>order.products</code> 作为商品列表。商品区<strong>仅</strong>读取与
-        <code>order</code> 同级的顶层 <code>raw.products[]</code>（与接口示例一致）。
-      </div>
-      <p class="src">
-        示例 JSON：<code>packages/private-materials/src/plus/pisellReservation/api/api-bookings-demo.json</code>（数组元素即一条
-        booking；约第 227 行起为顶层 <code>products</code>）。
-      </p>
-    </div>
-    <div class="panel">
-      <h2>Modal 标题栏</h2>
-      <p>
-        固定文案 <code>pisell-reservation.booking-detail.modal-title</code>（中/英/繁：<strong>详情</strong> / Details / 詳情；ja/pt 同步）。预约号、资源摘要、预约状态等均在下方组合卡片的粉头
-        <code>order-strip</code> 中展示。
-      </p>
-    </div>
-    <div class="panel">
-      <h2>组合卡片 · 粉头信息条（order-strip）</h2>
-      <p>
-        视图模型：<code>bookingDetailOrderStripFromRaw(raw)</code>。<strong>左上联系人</strong>：与平面图 RoomCard 同源
-        <code>resolveFloorRoomCardHolder(raw)</code>（<code>holder</code> → <code>contacts_info</code> → 有效
-        <code>customer_id</code> 时 <code>customer_name</code>+<code>phone</code>）。展示对齐 RoomCard
-        <code>ContactInfo</code>：<strong>有姓名则显示姓名，有手机则并排显示脱敏尾号</strong>（<code>maskPisellReservationPhoneTail</code>）；若仅有手机无姓名，整行显示脱敏手机（与
-        <code>guestDisplayLine(holder, true)</code> 一致）。若解析不到任何联系人，则回退 <code>strip.eyebrow</code>。
-      </p>
-      <table class="map">
-        <thead>
-          <tr>
-            <th>UI</th>
-            <th>数据路径</th>
-            <th class="note">备注</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>左上联系人</td>
-            <td>
-              <code>resolveFloorRoomCardHolder(raw)</code> → <code>guestHeadline</code>（姓名优先，否则脱敏手机）；有姓名且
-              <code>contactPhone</code> 时并排脱敏手机；无联系人时 <code>strip.eyebrow</code>
-            </td>
-            <td class="note">与 RoomCard <code>ContactInfo</code> / <code>guestDisplayLine</code> 一致</td>
-          </tr>
-          <tr>
-            <td>右上（同一行）</td>
-            <td>
-              容器 <code>pisell-res-booking-detail-modal__order-strip-top-right</code>：<strong>flex 横向</strong>，右对齐。依次为支付胶囊（<code>order.payment_status</code> /
-              <code>raw.payment_status</code>）与预约状态徽章（<code>raw.status</code> →
-              <code>booking-detail.status-enum.*</code>，来自 <code>bookingDetailFromRaw</code>）。
-            </td>
-            <td class="note">原 Modal 标题内状态已迁入粉头</td>
-          </tr>
-          <tr>
-            <td>大号字（预约 ID）</td>
-            <td><code>raw.booking_id</code> → <code>raw.id</code> → <code>order.shop_full_order_number</code> → <code>order.order_number</code></td>
-            <td class="note"><code>strip.stripBookingId</code></td>
-          </tr>
-          <tr>
-            <td>时段一行</td>
-            <td>优先 <code>start_at</code>/<code>end_at</code>；否则 <code>start_date</code>+<code>start_time</code> 与 <code>end_date</code>+<code>end_time</code></td>
-            <td class="note"><code>buildStripScheduleLine</code>，失败回退 <code>buildTimeRange</code></td>
-          </tr>
-          <tr>
-            <td>左下「n 件 + 订单合计」</td>
-            <td>
-              件数 <strong>n</strong>：优先 <code>raw.products</code> 有效行数（与下方 ProductCard 列表条数一致）；若无数组再回退
-              <code>order.summary.product_quantity</code>。合计金额仍用
-              <code>order.summary.total_amount</code> + <code>order.currency_symbol</code>
-            </td>
-            <td class="note">模板键 <code>strip-items-total</code></td>
-          </tr>
-          <tr>
-            <td>右下 Due</td>
-            <td>
-              <code>bookingDetailOrderStripFromRaw</code>：<code>dueWithSymbol</code> = <code>expect_amount</code> 或
-              <code>total_amount</code> 经 <code>moneyWithSymbol(order.currency_symbol, …)</code>。UI 上
-              <code>strip-due-label</code>（如「Due:」）与金额在
-              <code>pisell-res-booking-detail-modal__order-strip-due</code> 内<strong>同一行</strong>（flex-row + baseline）。
-            </td>
-            <td class="note">与左下「n 件 + 合计」同一行 flex 底对齐</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="panel">
-      <h2>组合卡片 · 操作按钮（仅 UI）</h2>
-      <p>
-        <strong>布局</strong>：<code>…__action-grid</code> 为 <strong>2 行 × 每行 3 个</strong>（<code>grid-template-columns: repeat(3,1fr)</code>）。每格
-        <code>…__action-cell</code> 为 <strong>横向 flex</strong>：<strong>图标在左</strong>（<code>@ant-design/icons</code>），<strong>文案在右</strong>（locales
-        <code>booking-detail.action-edit</code> 等六键）。
-      </p>
-      <p>
-        <strong>交互</strong>：点击仅 <code>preventDefault</code> + <code>stopPropagation</code>，不接宿主业务。
-      </p>
-    </div>
-    <div class="panel">
-      <h2>组合卡片 · 商品列表（ProductCard）</h2>
-      <p>
-        遍历 <code>Array.isArray(raw.products) ? raw.products : []</code>，经
-        <code>bookingProductLineToProductCardData</code> 映射为 <code>@pisell/materials</code> 的
-        <code>ProductCard</code> <code>dataSource</code>。
-      </p>
-      <table class="map">
-        <thead>
-          <tr>
-            <th>UI / 组件字段</th>
-            <th>行对象字段（顶层 products[]）</th>
-            <th class="note">备注</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>name</code></td>
-            <td><code>product_title</code>（多语言对象，按 auto/zh-CN/en… 回退）</td>
-            <td class="note">—</td>
-          </tr>
-          <tr>
-            <td><code>product_option_string</code></td>
-            <td><code>product_sku.subtitle</code>（多语言对象）</td>
-            <td class="note">—</td>
-          </tr>
-          <tr>
-            <td><code>num</code></td>
-            <td><code>product_quantity</code></td>
-            <td class="note">—</td>
-          </tr>
-          <tr>
-            <td><code>price</code> / <code>total</code></td>
-            <td><code>selling_price</code>、<code>payment_price</code></td>
-            <td class="note">数值解析为 number</td>
-          </tr>
-          <tr>
-            <td><code>_id</code>（列表 key）</td>
-            <td><code>order_detail_id</code> → <code>booking_uid</code> → <code>product_id</code>+index</td>
-            <td class="note">稳定即可</td>
-          </tr>
-          <tr>
-            <td><code>id</code></td>
-            <td><code>product_id</code></td>
-            <td class="note">—</td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="warn" style="margin-top: 12px">
-        <strong>货币符号</strong>：<code>ProductCard</code> 内部金额区读的是 <code>dataSource.symbol</code>；根上的
-        <code>symbol</code> prop <strong>不会</strong>自动写入 <code>dataSource</code>。弹窗内写法为 JSX
-        <code>dataSource=&#123;&#123; ...ds, symbol: currencySymbol &#125;&#125;</code>（<code>currencySymbol</code> =
-        <code>orderCurrencySymbol(raw.order)</code>，空则 <code>$</code>）。
-      </div>
-      <p class="src">
-        只读：<code>bookingProductLineToProductCardData</code> 已设 <code>isShowAction: false</code>、<code>isShowNote: false</code>；弹窗再传
-        <code>isShowImage</code>、<code>isShowHolder</code>、<code>isShowDelete</code>、<code>isShowPackageNote</code>、<code>isShowEditProduct</code> 均为
-        <code>false</code>。默认最多展示 3 条，超出显示 <code>see-all</code> 按钮展开；粉头件数/合计文案键为
-        <code>strip-items-total</code>。
-      </p>
-    </div>
-    <div class="panel">
-      <h2>tableRow（可选）</h2>
-      <p>
-        类型 <code>PisellReservationTableRow</code>。当前弹窗内组合卡片<strong>未</strong>单独展示桌位行列；若后续扩展，可与
-        <code>bookingDetailFromRaw</code> 中 <code>roomTitleLabel</code> / <code>roomCapacityLabel</code> 同源（<code>code</code>、<code>main_field</code>、<code>capacityLabel</code>）。
-      </p>
-    </div>
-    <div class="panel">
-      <h2>相关源码</h2>
-      <ul class="files">
-        <li><code>PisellReservation.tsx</code> — <code>bookingDetailRaw</code>、弹窗挂载</li>
-        <li><code>components/bookingDetailModal/ReservationBookingDetailModal.tsx</code>、<code>ReservationBookingDetailModal.less</code></li>
-        <li><code>components/bookingDetailModal/bookingDetailFromRaw.ts</code></li>
-        <li><code>components/bookingDetailModal/bookingProductToProductCard.ts</code></li>
-        <li><code>floorMap/floorMapHostCheckout.ts</code> — <code>resolveFloorMapHostCheckoutRecord</code></li>
-      </ul>
-    </div>
-  </body>
-</html>