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/es/plus/pisellReservation/docs/floor-room-card-data-ui-map.html DELETED Viewed

@@ -1,841 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>平面图 RoomCard · 数据与 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;1,9..40,400&family=JetBrains+Mono:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      :root {
-        --ink: #1a1f1c;
-        --muted: #5c6560;
-        --line: #c8d0ca;
-        --reserved-bg: #f4f7f5;
-        --occupied-bg: #17503a;
-        --occupied-text: #f2f7f4;
-        --tag-res: #2d6a4f;
-        --tag-occ: rgba(255, 255, 255, 0.2);
-        --note-bg: #fff9e6;
-        --note-border: #e8d48b;
-        --mono: "JetBrains Mono", monospace;
-        --sans: "DM Sans", system-ui, sans-serif;
-      }
-      * {
-        box-sizing: border-box;
-      }
-      body {
-        margin: 0;
-        padding: 32px 24px 48px;
-        font-family: var(--sans);
-        color: var(--ink);
-        background: linear-gradient(165deg, #eef2ef 0%, #e2e8e4 45%, #dce5df 100%);
-        min-height: 100vh;
-      }
-      .page-head {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
-        gap: 24px 28px;
-        align-items: start;
-        margin-bottom: 28px;
-        max-width: 1280px;
-      }
-      @media (max-width: 900px) {
-        .page-head {
-          grid-template-columns: 1fr;
-        }
-      }
-      .page-head__main .lead {
-        margin-bottom: 0;
-      }
-      .state-panel {
-        position: sticky;
-        top: 16px;
-        border: 1px solid var(--line);
-        border-radius: 10px;
-        background: #fff;
-        padding: 14px 16px 16px;
-        box-shadow: 0 4px 18px rgba(26, 31, 28, 0.06);
-        font-size: 0.72rem;
-        line-height: 1.45;
-      }
-      .state-panel h2 {
-        margin: 0 0 12px;
-        font-size: 0.78rem;
-        font-weight: 700;
-        letter-spacing: -0.01em;
-        color: var(--ink);
-      }
-      .state-panel section {
-        margin-bottom: 14px;
-      }
-      .state-panel section:last-child {
-        margin-bottom: 0;
-      }
-      .state-panel h3 {
-        margin: 0 0 6px;
-        font-size: 0.62rem;
-        text-transform: uppercase;
-        letter-spacing: 0.07em;
-        color: var(--muted);
-        font-weight: 700;
-      }
-      .state-panel dl {
-        margin: 0;
-      }
-      .state-panel dt {
-        font-family: var(--mono);
-        font-size: 0.68rem;
-        font-weight: 600;
-        color: #2a332e;
-        margin-top: 8px;
-      }
-      .state-panel dt:first-child {
-        margin-top: 0;
-      }
-      .state-panel dd {
-        margin: 4px 0 0;
-        padding-left: 0;
-        color: var(--muted);
-      }
-      .state-panel .enum {
-        font-family: var(--mono);
-        font-size: 0.65rem;
-        color: #2d4a3e;
-        background: #f0f4f1;
-        padding: 6px 8px;
-        border-radius: 6px;
-        margin-top: 4px;
-        word-break: break-word;
-      }
-      .state-panel .arrow-note {
-        color: var(--muted);
-        font-size: 0.65rem;
-        margin-top: 2px;
-      }
-      /** 标题区 + 右上角状态参考 */
-      .page-top {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
-        gap: 24px 28px;
-        align-items: start;
-        max-width: 1120px;
-        margin-bottom: 28px;
-      }
-      @media (max-width: 900px) {
-        .page-top {
-          grid-template-columns: 1fr;
-        }
-      }
-      .state-ref {
-        border: 1px solid var(--line);
-        border-radius: 10px;
-        padding: 14px 16px;
-        background: #fff;
-        box-shadow: 0 4px 18px rgba(26, 31, 28, 0.06);
-        font-size: 0.72rem;
-        line-height: 1.5;
-      }
-      .state-ref h2 {
-        margin: 0 0 10px;
-        font-size: 0.68rem;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.07em;
-        color: var(--muted);
-      }
-      .state-ref section {
-        margin-bottom: 14px;
-      }
-      .state-ref section:last-child {
-        margin-bottom: 0;
-      }
-      .state-ref h3 {
-        margin: 0 0 6px;
-        font-size: 0.7rem;
-        font-weight: 700;
-        color: var(--ink);
-      }
-      .state-ref p {
-        margin: 0 0 6px;
-        color: var(--muted);
-        font-size: 0.68rem;
-      }
-      .state-ref ul {
-        margin: 0;
-        padding-left: 1.1em;
-        font-family: var(--mono);
-        font-size: 0.65rem;
-        color: #2a332e;
-      }
-      .state-ref li {
-        margin-bottom: 4px;
-      }
-      .state-ref li:last-child {
-        margin-bottom: 0;
-      }
-      .state-ref code {
-        font-family: var(--mono);
-        font-size: 0.92em;
-        background: rgba(45, 106, 79, 0.08);
-        padding: 0 4px;
-        border-radius: 3px;
-      }
-      .state-ref .src-note {
-        font-family: var(--sans);
-        font-size: 0.62rem;
-        color: var(--muted);
-        margin-top: 4px;
-      }
-      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: 720px;
-        line-height: 1.5;
-        margin-bottom: 28px;
-      }
-      .flow {
-        display: grid;
-        gap: 16px;
-        margin-bottom: 36px;
-        max-width: 960px;
-      }
-      .flow-row {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: stretch;
-        gap: 12px;
-      }
-      .box {
-        border: 1px solid var(--line);
-        border-radius: 10px;
-        padding: 12px 14px;
-        background: #fff;
-        flex: 1;
-        min-width: 200px;
-      }
-      .box h3 {
-        margin: 0 0 8px;
-        font-size: 0.72rem;
-        text-transform: uppercase;
-        letter-spacing: 0.08em;
-        color: var(--muted);
-        font-weight: 600;
-      }
-      .box pre {
-        margin: 0;
-        font-family: var(--mono);
-        font-size: 0.68rem;
-        line-height: 1.45;
-        white-space: pre-wrap;
-        word-break: break-all;
-        color: #2a332e;
-      }
-      .arrow {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--muted);
-        font-size: 1.2rem;
-        font-weight: 600;
-        min-width: 32px;
-      }
-      .cards-grid {
-        display: grid;
-        grid-template-columns: 1fr;
-        gap: 40px;
-        max-width: 920px;
-        align-items: start;
-      }
-      .card-wrap {
-        overflow: visible;
-      }
-      .card-wrap h2 {
-        font-size: 0.8rem;
-        color: var(--muted);
-        margin: 0 0 14px;
-        font-weight: 600;
-      }
-      /* 图元 + 说明并排，说明不再被 overflow 裁切 */
-      .card-demo {
-        display: grid;
-        grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
-        gap: 20px 24px;
-        align-items: start;
-      }
-      @media (max-width: 640px) {
-        .card-demo {
-          grid-template-columns: 1fr;
-        }
-      }
-      .notes-column {
-        min-width: 0;
-      }
-      /* 模拟 rc：圆角与阴影只在表面层，不把旁注裁掉 */
-      .rc {
-        border-radius: 12px;
-        overflow: hidden;
-        box-shadow: 0 8px 28px rgba(26, 31, 28, 0.12);
-        font-size: 12px;
-        max-width: 300px;
-      }
-      .rc--reserved {
-        background: var(--reserved-bg);
-        color: var(--ink);
-      }
-      .rc--occupied {
-        background: var(--occupied-bg);
-        color: var(--occupied-text);
-      }
-      .rc-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        padding: 10px 12px;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-      }
-      .rc--occupied .rc-header {
-        border-bottom-color: rgba(255, 255, 255, 0.12);
-      }
-      .rc-room-name {
-        font-weight: 700;
-        font-size: 14px;
-        display: block;
-      }
-      .rc-capacity {
-        font-size: 11px;
-        opacity: 0.65;
-        margin-top: 2px;
-      }
-      .rc-tag {
-        font-size: 10px;
-        padding: 3px 8px;
-        border-radius: 999px;
-        font-weight: 600;
-      }
-      .rc-tag--reserved {
-        background: rgba(45, 106, 79, 0.15);
-        color: var(--tag-res);
-      }
-      .rc-tag--occupied {
-        background: var(--tag-occ);
-        color: #fff;
-      }
-      .rc-body {
-        padding: 10px 12px 12px;
-      }
-      .rc-contact__name {
-        font-weight: 600;
-        font-size: 13px;
-      }
-      .rc-contact__phone {
-        font-size: 11px;
-        opacity: 0.6;
-        margin-left: 6px;
-      }
-      .rc-time-row {
-        margin-top: 8px;
-        font-size: 12px;
-        line-height: 1.5;
-        opacity: 0.92;
-      }
-      .hl-info {
-        color: #1677b6;
-        font-weight: 500;
-      }
-      .rc--occupied .hl-info {
-        color: #9cd3ff;
-      }
-      .hl-over {
-        color: #c9a227;
-        font-weight: 600;
-      }
-      .rc--occupied .hl-over {
-        color: #f5c542;
-      }
-      .hl-danger {
-        color: #d4380d;
-        font-weight: 600;
-      }
-      .rc--occupied .hl-danger {
-        color: #ffb4a8;
-      }
-      .rc-amount {
-        margin-top: 10px;
-        font-weight: 600;
-        font-size: 14px;
-      }
-      .rc--occupied .rc-amount.hl-paid {
-        color: #7dffb0;
-      }
-      .rc-progress {
-        margin-top: 8px;
-      }
-      .rc-progress__bar {
-        height: 4px;
-        background: rgba(0, 0, 0, 0.12);
-        border-radius: 2px;
-        overflow: hidden;
-      }
-      .rc--occupied .rc-progress__bar {
-        background: rgba(255, 255, 255, 0.2);
-      }
-      .rc-progress__fill {
-        height: 100%;
-        width: 62%;
-        background: #fff;
-        border-radius: 2px;
-      }
-      .rc--occupied .rc-progress__fill.warn {
-        background: #f5c542;
-        width: 88%;
-      }
-      .rc-stamp {
-        margin-top: 8px;
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        border: 2px solid #34c759;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 9px;
-        font-weight: 700;
-        color: #34c759;
-        transform: rotate(-14deg);
-        opacity: 0.95;
-      }
-      .rc--occupied .rc-stamp {
-        border-color: rgba(255, 255, 255, 0.5);
-        color: #b8f5ce;
-      }
-      .rc-next {
-        margin-top: 10px;
-        font-size: 11px;
-        line-height: 1.45;
-        opacity: 0.88;
-      }
-      .rc-next__label {
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-        font-size: 10px;
-        opacity: 0.75;
-      }
-      .rc-next__sep {
-        margin: 0 4px;
-        opacity: 0.5;
-      }
-      .rc--occupied .rc-next {
-        color: rgba(255, 255, 255, 0.92);
-      }
-      .note {
-        font-family: var(--mono);
-        font-size: 0.65rem;
-        line-height: 1.45;
-        padding: 8px 10px;
-        background: var(--note-bg);
-        border: 1px solid var(--note-border);
-        border-radius: 8px;
-        color: #4a4428;
-        margin-bottom: 12px;
-      }
-      .note:last-child {
-        margin-bottom: 0;
-      }
-      .note-label {
-        display: block;
-        font-family: var(--sans);
-        font-size: 0.62rem;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
-        color: var(--muted);
-        margin-bottom: 6px;
-      }
-      .note--dark {
-        background: #1e2e28;
-        border-color: #2d4a3e;
-        color: #d8ebe3;
-      }
-      .note--dark .note-label {
-        color: #8fb5a3;
-      }
-      .legend {
-        margin-top: 40px;
-        padding: 16px;
-        background: #fff;
-        border-radius: 10px;
-        border: 1px solid var(--line);
-        max-width: 960px;
-      }
-      .legend h3 {
-        margin: 0 0 10px;
-        font-size: 0.85rem;
-      }
-      .legend table {
-        width: 100%;
-        border-collapse: collapse;
-        font-size: 0.72rem;
-        font-family: var(--mono);
-      }
-      .legend th,
-      .legend td {
-        text-align: left;
-        padding: 6px 8px;
-        border-bottom: 1px solid #eee;
-        vertical-align: top;
-      }
-      .legend th {
-        color: var(--muted);
-        font-weight: 600;
-        width: 28%;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="page-head">
-      <div class="page-head__main">
-        <h1>平面图 RoomCard：数据结构 ≈ UI 区域</h1>
-        <p class="lead">
-          对应代码：<code>mapPisellReservationRowToFloorRoomCardData</code> →
-          <code>FloorRoomCardData</code> → <code>ReservationFloorRoomCard</code>（<code>getFloorRoomCardType</code> 决定
-          <code>cardType</code> 与皮肤 class）。占用态<strong>金额高亮</strong>仍跟 <code>cardType === 'payed'</code>；<strong>印章
-          PaymentStamp</strong>单独跟 <code>booking.order.payment_status</code>（经 <code>rawToBooking</code> 写入
-          <code>order_payment_status</code>，仅 <code>paid</code> 为已付）。下方示意与真实 class（rc-*）一致；<strong>左侧图元、右侧为数据说明</strong>。
-        </p>
-      </div>
-      <aside class="state-panel" aria-label="状态来源与枚举">
-        <h2>右上角 · 状态来源与枚举</h2>
-        <section>
-          <h3>宿主 booking / 资源壳（接口原始）</h3>
-          <dl>
-            <dt>booking.status</dt>
-            <dd>
-              合并为行大类：<code>hostBookingStatusToCardStatus</code>
-              <div class="enum">
-                'occupied' → cardStatus occupied<br />
-                'reserved' → booked<br />
-                'locked' → maintenance<br />
-                空 / 其他 → available
-              </div>
-            </dd>
-            <dt>booking.reserved_status</dt>
-            <dd>
-              仅当 <code>status === 'reserved'</code> 时写入行 <code>hostReservedStatus</code>
-              <div class="enum">'not_arrived' | 'late'</div>
-            </dd>
-            <dt>booking.isTimeout</dt>
-            <dd>
-              仅当 <code>status === 'occupied'</code> 时为 <code>true</code> → 行 <code>hostIsTimeout</code>
-            </dd>
-            <dt>booking.order.payment_status</dt>
-            <dd>
-              <code>rawToBooking</code> 读 <code>order.payment_status</code> → 扁平字段
-              <code>FloorRoomCardBooking.order_payment_status</code>（<code>paid</code> 忽略大小写归一）。<br />
-              <strong>仅印章</strong>判断：<code>=== 'paid'</code> → 已付样式；其余一律未付。<strong>不参与</strong>
-              <code>cardType</code> / 是否占用 / <code>sub_status</code>。
-            </dd>
-            <dt>资源壳 shell（无 bookings 命中时）</dt>
-            <dd>
-              <code>applyHostResourceShellToBaseRow</code>：同上字段 + <code>shell.status</code>（empty / reserved / occupied / locked）直接改
-              <code>cardStatus</code> 与宿主标记
-            </dd>
-          </dl>
-        </section>
-        <section>
-          <h3>合并行 PisellReservationTableRow</h3>
-          <dl>
-            <dt>cardStatus</dt>
-            <dd>
-              <div class="enum">
-                'occupied' | 'booked' | 'maintenance' | 'barBusy' | 'available'
-              </div>
-              <p class="arrow-note">
-                → <code>mapPisellReservationRowToFloorRoomCardData</code>：<br />
-                maintenance → status <strong>locked</strong>；available → <strong>empty</strong>；booked →
-                <strong>reserved</strong>；occupied / barBusy → <strong>occupied</strong>
-              </p>
-            </dd>
-            <dt>hostReservedStatus（预留细分）</dt>
-            <dd>
-              <div class="enum">'not_arrived' | 'late'</div>
-              兜底：行 <code>lateMinutes &gt; 0</code> → sub_status <strong>late</strong>
-            </dd>
-            <dt>占用细分（行级）</dt>
-            <dd>
-              <code>hostIsTimeout === true</code> 或 <code>delayMinutes &gt; 0</code> → <strong>timeout</strong><br />
-              <code>isPaid === false</code> → <strong>payment_required</strong><br />
-              否则 → <strong>payed</strong>
-            </dd>
-          </dl>
-        </section>
-        <section>
-          <h3>FloorRoomCardData（图元 props）</h3>
-          <dl>
-            <dt>status（顶栏标签大类）</dt>
-            <dd>
-              <div class="enum">'empty' | 'reserved' | 'occupied' | 'locked'</div>
-            </dd>
-            <dt>sub_status（getFloorRoomCardType / 皮肤）</dt>
-            <dd>
-              <div class="enum">
-                'not_arrived' | 'late' | 'payed' | 'payment_required' | 'timeout' | ''（空串）
-              </div>
-            </dd>
-            <dt>单条 booking 宿主分钟 / 进度</dt>
-            <dd>
-              原始字段 <code>lateTime</code>、<code>timeoutTime</code>、<code>progressPercent</code>（0–100）经
-              <code>rawToBooking</code> 进入 <code>FloorRoomCardBooking</code>，优先于本地时间推算
-            </dd>
-            <dt>order_payment_status（图元内扁平）</dt>
-            <dd>
-              来自宿主 <code>booking.order.payment_status</code>，供 <code>PaymentStamp</code> 专用；缺省或无
-              <code>paid</code> 时印章为未付
-            </dd>
-            <dt>Next 行（多段 <code>bookings</code>）</dt>
-            <dd>
-              <code>getFloorRoomCardNextNotStartedBooking(data, now)</code>：<code>bookings.length ≥ 2</code>，
-              且 <code>bookings[0]</code> 在当前时刻落在 <strong>[start, end)</strong>（进行中），且
-              <code>bookings[1..]</code> 中存在 <strong>now &lt; start</strong>（未开始）→ 取第一条未开始，渲染
-              <code>NextBooking</code>（标签「Next」· 姓名 · <code>start_time - end_time</code>）。<strong>不依赖</strong>
-              <code>cardType</code> 是否为 <code>late</code> / <code>timeout</code>。标准 <code>CardBody</code>（非
-              compact）末尾展示；约 60s 定时刷新会带动更新。
-            </dd>
-          </dl>
-        </section>
-      </aside>
-    </div>
-    <div class="flow">
-      <div class="flow-row">
-        <div class="box">
-          <h3>输入 · PisellReservationTableRow（合并行）</h3>
-          <pre>id, code, main_field
-cardStatus → 映射 status / 分支
-capacityLabel → capacity 文案
-hostReservedStatus, lateMinutes → reserved.sub_status
-hostIsTimeout, delayMinutes, isPaid → occupied.sub_status
-floorMapSourceBookings[] → rawToBooking → bookings[]</pre>
-        </div>
-        <span class="arrow">→</span>
-        <div class="box">
-          <h3>中间 · FloorRoomCardData</h3>
-          <pre>main_field, capacity
-status: empty | reserved | occupied | locked
-sub_status: not_arrived | late | payed | payment_required | timeout
-bookings: FloorRoomCardBooking[]
-Next 行: bookings[0] 进行中 ∧ 后方有未开始
-  → getFloorRoomCardNextNotStartedBooking(data, now)</pre>
-        </div>
-        <span class="arrow">→</span>
-        <div class="box">
-          <h3>每条 booking（rawToBooking）</h3>
-          <pre>start_date, start_time, end_date, end_time
-number, amount
-holder.name, holder.phone
-lateTime, timeoutTime, progressPercent（宿主分钟/进度）
-order.payment_status → order_payment_status（印章）</pre>
-        </div>
-      </div>
-    </div>
-    <div class="cards-grid">
-      <div class="card-wrap">
-        <h2>预留 · cardType = not_arrived / late（rc--reserved）</h2>
-        <div class="card-demo">
-          <div class="rc rc--reserved">
-            <div class="rc-header">
-              <div>
-                <span class="rc-room-name">test 1</span>
-                <span class="rc-capacity">Cap: 100</span>
-              </div>
-              <span class="rc-tag rc-tag--reserved">已预订</span>
-            </div>
-            <div class="rc-body">
-              <div>
-                <span class="rc-contact__name">肉肉6666</span>
-                <span class="rc-contact__phone">***8745</span>
-              </div>
-              <div class="rc-time-row">
-                🕐 16:53 开始 · 👥 2
-                <span class="hl-info"> · 🕐 还有 8 分钟</span>
-              </div>
-              <div class="rc-time-row" style="margin-top: 4px">
-                <span class="hl-over">⚠ +15m</span>
-              </div>
-            </div>
-          </div>
-          <div class="notes-column">
-            <div class="note">
-              <span class="note-label">① 顶栏 rc-header</span>
-              data.main_field → 房名<br />
-              data.capacity + i18n「Cap」<br />
-              data.status → StatusTag（已预订）
-            </div>
-            <div class="note">
-              <span class="note-label">② 联系人 rc-contact</span>
-              bookings[0].holder.name<br />
-              holder.phone（脱敏后四位）
-            </div>
-            <div class="note">
-              <span class="note-label">③ 时间行 rc-time-row</span>
-              booking.start_time + i18n「开始」<br />
-              booking.number（人数）<br />
-              倒计时：resolveFloorRoomCardReservedCountdownMinutes（优先
-              <code>remainingReserveTime</code> 分钟，否则本地起止推算；仅 not_arrived）
-            </div>
-            <div class="note">
-              <span class="note-label">④ 预留迟到 · rc-highlight--overtime</span>
-              仅 cardType = late 时显示「+10m」<br />
-              优先 booking.lateTime（分钟）→ format 文案<br />
-              否则 getFloorRoomCardLateTime(start_date, start_time)
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="card-wrap">
-        <h2>占用 · cardType = payed / payment_required / timeout（rc--occupied）</h2>
-        <div class="card-demo">
-          <div class="rc rc--occupied">
-            <div class="rc-header">
-              <div>
-                <span class="rc-room-name">test 1</span>
-                <span class="rc-capacity">Cap: 100</span>
-              </div>
-              <span class="rc-tag rc-tag--occupied">使用中</span>
-            </div>
-            <div class="rc-body">
-              <div>
-                <span class="rc-contact__name">肉肉6666</span>
-                <span class="rc-contact__phone">***8745</span>
-              </div>
-              <div class="rc-time-row">🕐 17:03 结束 · 👥 2</div>
-              <div class="rc-time-row" style="margin-top: 4px">
-                <span class="hl-danger">⚠ late 12m</span>
-              </div>
-              <div class="rc-amount hl-paid">$ 10.50</div>
-              <div class="rc-progress">
-                <div class="rc-progress__bar">
-                  <div class="rc-progress__fill warn"></div>
-                </div>
-              </div>
-              <div class="rc-stamp">已付</div>
-              <div class="rc-next">
-                <span class="rc-next__label">Next</span><span class="rc-next__sep">·</span><span>下一位客人</span><span class="rc-next__sep">·</span><span>19:00 - 21:00</span>
-              </div>
-            </div>
-          </div>
-          <div class="notes-column">
-            <div class="note note--dark">
-              <span class="note-label">① 顶栏</span>
-              同预留：main_field、capacity、status → 使用中
-            </div>
-            <div class="note note--dark">
-              <span class="note-label">② 联系人</span>
-              bookings[0].holder.*
-            </div>
-            <div class="note note--dark">
-              <span class="note-label">③ 时间行</span>
-              booking.end_time + i18n「结束」<br />
-              booking.number
-            </div>
-            <div class="note note--dark">
-              <span class="note-label">④ 占用超时 · rc-highlight--danger</span>
-              仅 cardType = timeout 时「late 10m」<br />
-              优先 booking.timeoutTime（分钟）<br />
-              否则 getFloorRoomCardLateTime(start)
-            </div>
-            <div class="note note--dark">
-              <span class="note-label">⑤ 金额 rc-amount</span>
-              booking.amount<br />
-              isPaid（cardType payed）→ 高亮 class
-            </div>
-            <div class="note note--dark">
-              <span class="note-label">⑥ 进度条 ProgressBar</span>
-              宽度 % ← booking.progressPercent（0–100）<br />
-              无则用起止时间 resolveFloorRoomCardProgressPercent<br />
-              isTimeout → rc-progress__fill--warn 黄色
-            </div>
-            <div class="note note--dark">
-              <span class="note-label">⑦ 印章 PaymentStamp</span>
-              仅看 <code>booking.order_payment_status === 'paid'</code>（数据来自宿主
-              <code>booking.order.payment_status</code>，<code>rawToBooking</code> 里 trim + 大小写归一为
-              <code>paid</code>）。<br />
-              已付 / 未付<strong>与 cardType</strong>（payed / payment_required / timeout）<strong>解耦</strong>。
-            </div>
-            <div class="note note--dark">
-              <span class="note-label">⑧ Next 行 rc-next</span>
-              <code>getFloorRoomCardNextNotStartedBooking(data, Date.now())</code> 非空时渲染。<br />
-              条件：<code>bookings[0]</code> 当前在时段内；<code>bookings[1+]</code> 中第一条
-              <code>now &lt; start</code>。<br />
-              文案：<code>holder.name</code>（示例「下一位客人」）+ <code>start_time - end_time</code>。预留 /
-              占用标准体均可能出现；compact 行不展示。
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="legend">
-      <h3>宿主 booking 根字段 → 行 / 图元（摘要）</h3>
-      <table>
-        <tr>
-          <th>status</th>
-          <td>empty | reserved | occupied | locked → cardStatus → FloorRoomCardData.status</td>
-        </tr>
-        <tr>
-          <th>reserved_status</th>
-          <td>not_arrived | late → row.hostReservedStatus → sub_status（与 lateMinutes 兜底）</td>
-        </tr>
-        <tr>
-          <th>isTimeout</th>
-          <td>true → row.hostIsTimeout → occupied sub_status = timeout</td>
-        </tr>
-        <tr>
-          <th>lateTime（分钟）</th>
-          <td>raw → booking.lateTime → 预留 late 时「+10m」类（优先于本地推算）</td>
-        </tr>
-        <tr>
-          <th>timeoutTime（分钟）</th>
-          <td>raw → booking.timeoutTime → 占用 timeout 时「late 10m」类（优先于本地推算）</td>
-        </tr>
-        <tr>
-          <th>progressPercent</th>
-          <td>0–100 → booking.progressPercent → ProgressBar 宽度（优先于起止时间推算）</td>
-        </tr>
-        <tr>
-          <th>order.payment_status</th>
-          <td>
-            <strong>行合并</strong>：参与列表侧 <code>isPaid</code> → 占用行
-            <code>sub_status</code> 为 <code>payed</code> / <code>payment_required</code>（见
-            <code>mapPisellReservationRowToFloorRoomCardData</code>）。<br />
-            <strong>单条 booking</strong>：<code>rawToBooking</code> →
-            <code>FloorRoomCardBooking.order_payment_status</code> → <strong>仅</strong>
-            <code>PaymentStamp</code>：<code>paid</code> 已付，其余未付。
-          </td>
-        </tr>
-        <tr>
-          <th>Next 行</th>
-          <td>
-            多段 <code>bookings</code>：<code>bookings[0]</code> 进行中（<code>now ∈ [start, end)</code>）且其后存在未开始（<code>now
-            &lt; start</code>）→ <code>getFloorRoomCardNextNotStartedBooking</code> →
-            <code>NextBooking</code>（Next · 姓名 · <code>start_time - end_time</code>）。与
-            <code>late</code>/<code>timeout</code> 无关；时段由 <code>start_date/start_time/end_date/end_time</code> 解析。
-          </td>
-        </tr>
-      </table>
-    </div>
-  </body>
-</html>