@pisell/materials 6.11.36 → 6.11.38

package/lib/components/pisellRecordBoard/shellFrame/Calendar/BookingCalendar.less

@@ -0,0 +1,323 @@
+/**
+ * RecordBoard 内嵌 BookingCalendar 的壳层与暗/亮主题 token（自原内联 <style> 迁出，供单处维护）。
+ * 与根节点 `theme-root` + `theme-light` / `theme-dark` 类名配合使用。
+ */
+.pisell-scroll-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.pisell-scroll-hidden::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.pisell-rb-cal-spin-wrap {
+  flex: 1 1 0%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.pisell-rb-cal-spin-wrap .pisell-lowcode-spin-container,
+.pisell-rb-cal-spin-wrap .ant-spin-container {
+  flex: 1 1 0%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.theme-root {
+  --bg-app: #060913;
+  --bg-shell: #080d1b;
+  --bg-header: #10172a;
+  --bg-toolbar: #0d1325;
+  --bg-panel: #0d1325;
+  --bg-panel-soft: #10172a;
+  --bg-panel-alt: #10172a;
+  --bg-elevated: #09101d;
+  --bg-grid-cell: #0a0f1d;
+  --bg-grid-muted: #080d1b;
+  --bg-sticky: #09101d;
+  --bg-input: #0d1325;
+  --border-soft: rgba(255, 255, 255, 0.1);
+  --border-strong: rgba(255, 255, 255, 0.16);
+  --text-main: #ffffff;
+  --text-soft: rgba(255, 255, 255, 0.72);
+  --text-muted: rgba(255, 255, 255, 0.45);
+  --text-faint: rgba(255, 255, 255, 0.15);
+  --shadow-heavy: 0 24px 80px rgba(0, 0, 0, 0.42);
+  --brand-primary: #7f56da;
+  --brand-deep: #6941c6;
+  --brand-light: #b692f6;
+  --brand-surface: rgba(127, 86, 218, 0.12);
+  --success-text: #32d583;
+  --success-surface: rgba(18, 183, 106, 0.1);
+  --success-border: rgba(50, 213, 131, 0.22);
+  --warning-text: #fdb022;
+  --warning-surface: rgba(247, 144, 9, 0.1);
+  --warning-border: rgba(253, 176, 34, 0.22);
+  --danger-text: #f97066;
+  --danger-surface: rgba(240, 68, 56, 0.1);
+  --danger-border: rgba(240, 68, 56, 0.22);
+  --info-text: #53b1fd;
+  --info-surface: rgba(46, 144, 250, 0.1);
+  --info-border: rgba(83, 177, 253, 0.24);
+  --pickup-text: #f670c7;
+  --pickup-surface: rgba(238, 70, 188, 0.1);
+  --pickup-border: rgba(246, 112, 199, 0.24);
+  --disabled-value: rgba(255, 255, 255, 0.15);
+  --side-brand-bg: #2b165c;
+  --side-brand-border: rgba(182, 146, 246, 0.26);
+}
+
+.theme-root.theme-light {
+  --bg-app: #e9eef5;
+  --bg-shell: #f8fafc;
+  --bg-header: #e2e8f4;
+  --bg-toolbar: #f8fafc;
+  --bg-panel: #ffffff;
+  --bg-panel-soft: #ffffff;
+  --bg-panel-alt: #f2f5f9;
+  --bg-elevated: #eef3f8;
+  --bg-grid-cell: #ffffff;
+  --bg-grid-muted: #f8fafc;
+  --bg-sticky: #eef3f8;
+  --bg-input: #f2f5f9;
+  --border-soft: #cbd5e1;
+  --border-strong: #b8c4d3;
+  --text-main: #101828;
+  --text-soft: #344054;
+  --text-muted: #667085;
+  --text-faint: #98a2b3;
+  --shadow-heavy: 0 18px 48px rgba(89, 61, 132, 0.08);
+  --brand-primary: #7f56da;
+  --brand-deep: #6941c6;
+  --brand-light: #b692f6;
+  --brand-surface: #f4ebff;
+  --success-text: #067647;
+  --success-surface: #d1fadf;
+  --success-border: #a6f4c5;
+  --warning-text: #b54708;
+  --warning-surface: #fef0c7;
+  --warning-border: #fedf89;
+  --danger-text: #b42318;
+  --danger-surface: #fee4e2;
+  --danger-border: #f04438;
+  --info-text: #175cd3;
+  --info-surface: #d1e9ff;
+  --info-border: #2e90fa;
+  --pickup-text: #c11574;
+  --pickup-surface: #fcceee;
+  --pickup-border: #ee46bc;
+  --disabled-value: #98a2b3;
+  --side-brand-bg: #6941c6;
+  --side-brand-border: rgba(127, 86, 218, 0.32);
+}
+
+.theme-app {
+  background: var(--bg-app);
+  color: var(--text-main);
+}
+.theme-shell {
+  background: var(--bg-shell);
+  color: var(--text-main);
+  border-color: var(--border-soft);
+  box-shadow: var(--shadow-heavy);
+}
+.theme-header {
+  background: var(--bg-header);
+  border-color: var(--border-soft);
+}
+.theme-toolbar {
+  background: var(--bg-toolbar);
+  border-color: var(--border-soft);
+}
+.theme-panel {
+  background: var(--bg-panel);
+  border-color: var(--border-soft);
+}
+.theme-panel-soft {
+  background: var(--bg-panel-soft);
+  border-color: var(--border-soft);
+}
+.theme-panel-alt {
+  background: var(--bg-panel-alt);
+  border-color: var(--border-soft);
+}
+.theme-elevated {
+  background: var(--bg-elevated);
+}
+.theme-grid-cell {
+  background: var(--bg-grid-cell);
+}
+.theme-grid-muted {
+  background: var(--bg-grid-muted);
+}
+.theme-sticky {
+  background: var(--bg-sticky);
+}
+.theme-input {
+  background: var(--bg-input);
+  border-color: var(--border-strong);
+  color: var(--text-main);
+}
+.theme-text {
+  color: var(--text-main);
+}
+.theme-text-soft {
+  color: var(--text-soft);
+}
+.theme-text-muted {
+  color: var(--text-muted);
+}
+.theme-text-faint {
+  color: var(--text-faint);
+}
+.theme-border {
+  border-color: var(--border-soft);
+}
+.theme-border-strong {
+  border-color: var(--border-strong);
+}
+.theme-brand-surface {
+  background: var(--brand-surface);
+}
+.theme-brand-text {
+  color: var(--brand-deep);
+}
+.theme-success-chip {
+  color: var(--success-text);
+  background: var(--success-surface);
+  border-color: var(--success-border);
+}
+.theme-warning-chip {
+  color: var(--warning-text);
+  background: var(--warning-surface);
+  border-color: var(--warning-border);
+}
+.theme-danger-chip {
+  color: var(--danger-text);
+  background: var(--danger-surface);
+  border-color: var(--danger-border);
+}
+.theme-info-chip {
+  color: var(--info-text);
+  background: var(--info-surface);
+  border-color: var(--info-border);
+}
+.theme-pickup-chip {
+  color: var(--pickup-text);
+  background: var(--pickup-surface);
+  border-color: var(--pickup-border);
+}
+.theme-disabled-value {
+  color: var(--disabled-value);
+}
+.theme-light .soft-shadow {
+  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
+}
+.btn-brand {
+  background: var(--brand-primary);
+  color: #fff;
+  border: 1px solid var(--brand-primary);
+}
+.btn-brand:hover {
+  background: var(--brand-deep);
+  border-color: var(--brand-deep);
+}
+.btn-neutral {
+  background: var(--bg-input);
+  color: var(--text-main);
+  border: 1px solid var(--border-strong);
+}
+.btn-neutral:hover {
+  background: var(--bg-panel-alt);
+}
+.btn-success {
+  background: var(--success-surface);
+  color: var(--success-text);
+  border: 1px solid var(--success-border);
+}
+.btn-warning {
+  background: var(--warning-surface);
+  color: var(--warning-text);
+  border: 1px solid var(--warning-border);
+}
+.btn-danger {
+  background: var(--danger-surface);
+  color: var(--danger-text);
+  border: 1px solid var(--danger-border);
+}
+.btn-info {
+  background: var(--info-surface);
+  color: var(--info-text);
+  border: 1px solid var(--info-border);
+}
+.surface-muted {
+  background: var(--bg-panel-alt);
+  border: 1px solid var(--border-soft);
+}
+.surface-card {
+  background: var(--bg-panel);
+  border: 1px solid var(--border-soft);
+}
+.text-disabled-token {
+  color: var(--disabled-value);
+}
+.btn-pill-active {
+  background: var(--brand-primary);
+  color: #fff;
+  border: 1px solid var(--brand-primary);
+}
+.btn-pill-active:hover {
+  background: var(--brand-deep);
+  border-color: var(--brand-deep);
+}
+.btn-pill-neutral {
+  background: var(--bg-input);
+  color: var(--text-soft);
+  border: 1px solid var(--border-strong);
+}
+.btn-pill-neutral:hover {
+  background: var(--bg-panel-alt);
+  color: var(--text-main);
+}
+.surface-overlay {
+  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
+  border: 1px solid var(--border-soft);
+}
+.panel-dark-adapt {
+  background: var(--bg-panel);
+  border: 1px solid var(--border-soft);
+  color: var(--text-main);
+}
+.panel-soft-adapt {
+  background: var(--bg-panel-alt);
+  border: 1px solid var(--border-soft);
+  color: var(--text-main);
+}
+.input-adapt {
+  background: var(--bg-input);
+  border: 1px solid var(--border-strong);
+  color: var(--text-main);
+}
+.caption-adapt {
+  color: var(--text-muted);
+}
+.ghost-adapt:hover {
+  background: var(--bg-panel-alt);
+}
+.surface-brand-side {
+  background: var(--side-brand-bg);
+  color: #fff;
+  border-color: var(--side-brand-border);
+}
+.surface-brand-side-muted {
+  background: color-mix(in srgb, var(--side-brand-bg) 88%, white 12%);
+  color: #fff;
+  border-color: var(--side-brand-border);
+}
+.badge-brand-dot {
+  background: var(--brand-primary);
+  color: #fff;
+}

package/lib/components/pisellRecordBoard/shellFrame/Calendar/PisellRecordBoardCalendarView.d.ts

@@ -2,6 +2,10 @@
 import type { RecordBoardCalendarProps } from '../../types';
 export declare type PisellRecordBoardCalendarViewProps = RecordBoardCalendarProps;
 /**
- * RecordBoard 日历视图：内嵌 BookingCalendarDemo（Tailwind 样式由包入口 `pisell-materials.tw.css` 注入）。
+ * RecordBoard 日历视图：内嵌 `BookingCalendar`（Tailwind 由包入口 `pisell-materials.tw.css` 注入）。
+ *
+ * **布局分工**：外层 Shell 上 `pisell-record-board-calendar-viewport`（flex:1 / min-height:0 / overflow:hidden）
+ * 只做「占位与裁剪高度」；本组件根节点负责在同一 flex 列里向下传递 **min-height:0**，避免 `BookingCalendar`
+ * 撑破壳层（一层即可，历史上曾双包一层重复 flex+overflow）。
  */
 export declare function PisellRecordBoardCalendarView(props: PisellRecordBoardCalendarViewProps): JSX.Element;

package/lib/components/pisellRecordBoard/shellFrame/Calendar/PisellRecordBoardCalendarView.js

@@ -33,25 +33,26 @@ __export(PisellRecordBoardCalendarView_exports, {
 });
 module.exports = __toCommonJS(PisellRecordBoardCalendarView_exports);
 var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
 var import_calendarPersistGuard = require("./calendarPersistGuard");
-var import_BookingCalendarDemo = __toESM(require("./BookingCalendarDemo"));
+var import_BookingCalendar = __toESM(require("./BookingCalendar"));
 function PisellRecordBoardCalendarView(props) {
   const { persistGuard, className, style, ...rest } = props;
   return /* @__PURE__ */ import_react.default.createElement(import_calendarPersistGuard.CalendarPersistProvider, { value: persistGuard }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       id: "pisell-record-board-calendar-root",
-      className,
+      className: (0, import_classnames.default)(
+        className,
+        "flex min-h-0 flex-1 flex-col overflow-hidden"
+      ),
       style: {
         height: "100%",
         minHeight: 0,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
         ...style
       }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement(import_BookingCalendarDemo.default, { ...rest }))
+    /* @__PURE__ */ import_react.default.createElement(import_BookingCalendar.default, { ...rest })
   ));
 }
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/pisellRecordBoard/shellFrame/Calendar/bookingCalendarViewShared.d.ts

@@ -0,0 +1,23 @@
+/** UI 层：状态徽标文案走 i18n（utils 侧为 {@link statusTagMetaParts}） */
+export declare function statusTagMeta(tag: string | null | undefined): {
+    label: string;
+    className: string;
+} | null;
+/** 锁台卡片副标题：操作人、锁台时间等拼接一行 */
+export declare function getBlockMetaLine(item: any): string;
+export declare function getRemainingToneClass(ratio: any, isLight?: boolean): "theme-text-muted" | "text-zinc-400" | "text-red-600" | "text-red-300" | "text-amber-600" | "text-amber-300";
+/**
+ * @param options.flattenWhenAllGroupsCollapsed
+ *   若为 `true`：全部分组折叠时仅有 group 头、无 court 行，会退化为平铺 court（易与「全部展开」混淆）。
+ *   日/周/月日历统一为默认 `false`，保留分组头行与折叠态（与底部「全部关闭」预期一致）。
+ */
+export declare function buildGroupedCourtRows(courts: any, collapsedGroups?: {}, options?: {}): any;
+/** 日视图 overlay 内单条预约/锁台：窄宽自适应与 Tooltip */
+export declare function BookingCard({ booking, dayKey, onOpenDetail, onDragStart, onJumpNext, overlayWidthPx, }: {
+    booking: any;
+    dayKey: any;
+    onOpenDetail: any;
+    onDragStart: any;
+    onJumpNext: any;
+    overlayWidthPx: any;
+}): any;

package/lib/components/pisellRecordBoard/shellFrame/Calendar/bookingCalendarViewShared.js

@@ -0,0 +1,268 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellRecordBoard/shellFrame/Calendar/bookingCalendarViewShared.tsx
+var bookingCalendarViewShared_exports = {};
+__export(bookingCalendarViewShared_exports, {
+  BookingCard: () => BookingCard,
+  buildGroupedCourtRows: () => buildGroupedCourtRows,
+  getBlockMetaLine: () => getBlockMetaLine,
+  getRemainingToneClass: () => getRemainingToneClass,
+  statusTagMeta: () => statusTagMeta
+});
+module.exports = __toCommonJS(bookingCalendarViewShared_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_calendarI18n = require("./calendarI18n");
+var import_bookingCalendarDateUtils = require("./utils/bookingCalendarDateUtils");
+var import_bookingCalendarConstants = require("./const/bookingCalendarConstants");
+var import_BookingCalendarStyle = require("./utils/BookingCalendarStyle");
+function statusTagMeta(tag) {
+  const p = (0, import_bookingCalendarDateUtils.statusTagMetaParts)(tag);
+  return p ? { label: (0, import_calendarI18n.tCal)(p.labelI18nKey), className: p.className } : null;
+}
+function getBlockMetaLine(item) {
+  if (item.kind !== "block") return "";
+  const bits = [];
+  if (item.blockBy)
+    bits.push(
+      (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.card.blockBy", { name: item.blockBy })
+    );
+  if (item.blockedAt) bits.push((0, import_bookingCalendarDateUtils.formatDateLoose)(item.blockedAt));
+  return bits.join(" · ");
+}
+function getRemainingToneClass(ratio, isLight = false) {
+  if (ratio <= 0.2) return isLight ? "text-red-600" : "text-red-300";
+  if (ratio <= 0.4) return isLight ? "text-amber-600" : "text-amber-300";
+  return isLight ? "theme-text-muted" : "text-zinc-400";
+}
+function buildGroupedCourtRows(courts, collapsedGroups = {}, options = {}) {
+  const { flattenWhenAllGroupsCollapsed = false } = options;
+  const predefined = ["VIP", "Standard"];
+  const rows = [];
+  const consumedIds = /* @__PURE__ */ new Set();
+  predefined.forEach((group) => {
+    const items = courts.filter((court) => court.type === group);
+    if (items.length === 0) return;
+    items.forEach((c) => consumedIds.add(c.id));
+    rows.push({
+      kind: "group",
+      id: `group-${group}`,
+      label: group,
+      count: items.length,
+      collapsed: !!collapsedGroups[group]
+    });
+    if (!collapsedGroups[group]) {
+      items.forEach((court) => rows.push({ kind: "court", ...court, group }));
+    }
+  });
+  const remainder = courts.filter((c) => !consumedIds.has(c.id));
+  const byType = {};
+  remainder.forEach((court) => {
+    const label = court.type && String(court.type).trim() !== "" ? String(court.type) : (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.common.resourceFallback");
+    if (!byType[label]) byType[label] = [];
+    byType[label].push(court);
+  });
+  Object.keys(byType).forEach((label) => {
+    const items = byType[label];
+    if (!items.length) return;
+    const idSafe = String(label).replace(/\s+/g, "-");
+    rows.push({
+      kind: "group",
+      id: `group-${idSafe}`,
+      label,
+      count: items.length,
+      collapsed: !!collapsedGroups[label]
+    });
+    if (!collapsedGroups[label]) {
+      items.forEach(
+        (court) => rows.push({ kind: "court", ...court, group: label })
+      );
+    }
+  });
+  const courtRowsOnly = rows.filter((r) => r.kind === "court");
+  if (flattenWhenAllGroupsCollapsed && courtRowsOnly.length === 0 && courts.length > 0) {
+    return courts.map((c) => ({
+      kind: "court",
+      id: c.id,
+      name: c.name,
+      type: c.type,
+      group: c.type
+    }));
+  }
+  return rows;
+}
+function BookingCard({
+  booking,
+  dayKey,
+  onOpenDetail,
+  onDragStart,
+  onJumpNext,
+  overlayWidthPx
+}) {
+  const suppressDetailClickAfterDragRef = (0, import_react.useRef)(false);
+  const suppressDetailClickTimerRef = (0, import_react.useRef)(
+    null
+  );
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (suppressDetailClickTimerRef.current != null) {
+        window.clearTimeout(suppressDetailClickTimerRef.current);
+      }
+    };
+  }, []);
+  const armSuppressDetailClickAfterDrag = () => {
+    suppressDetailClickAfterDragRef.current = true;
+    if (suppressDetailClickTimerRef.current != null) {
+      window.clearTimeout(suppressDetailClickTimerRef.current);
+    }
+    suppressDetailClickTimerRef.current = window.setTimeout(() => {
+      suppressDetailClickAfterDragRef.current = false;
+      suppressDetailClickTimerRef.current = null;
+    }, 500);
+  };
+  const { item, span, start, continuesNext } = booking;
+  const displayTag = (0, import_bookingCalendarDateUtils.getDisplayStatusTag)(item, dayKey);
+  const lateMinutes = (0, import_bookingCalendarDateUtils.getLateMinutes)(item, dayKey);
+  const stateClass = (0, import_BookingCalendarStyle.getBookingStateClasses)(item, dayKey);
+  const w = overlayWidthPx != null && Number.isFinite(overlayWidthPx) ? overlayWidthPx : Number.POSITIVE_INFINITY;
+  const narrow = w < import_bookingCalendarConstants.DAY_BOOKING_NARROW_PX;
+  const micro = w < import_bookingCalendarConstants.DAY_BOOKING_MICRO_PX;
+  const microMark = Array.from(String(item.name ?? "").trim())[0] || "·";
+  const tooltipTitle = /* @__PURE__ */ import_react.default.createElement("div", { className: "max-w-[260px] space-y-1 text-left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-semibold" }, item.name), item.kind === "block" && item.note && /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs opacity-90" }, item.note), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs tabular-nums opacity-90" }, (0, import_bookingCalendarDateUtils.formatHourLabel)(start), " - ", (0, import_bookingCalendarDateUtils.formatHourLabel)(start + span)), item.kind === "block" && getBlockMetaLine(item) && /* @__PURE__ */ import_react.default.createElement("div", { className: "text-[11px] opacity-80" }, getBlockMetaLine(item)), continuesNext && /* @__PURE__ */ import_react.default.createElement("div", { className: "text-[11px] text-violet-200" }, (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.card.continuesNext")), item.kind !== "block" && displayTag && statusTagMeta(displayTag) && /* @__PURE__ */ import_react.default.createElement("div", { className: "text-[11px] opacity-90" }, statusTagMeta(displayTag).label, lateMinutes && displayTag === "late" ? ` · ${(0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.card.lateMinutesDetail", {
+    n: lateMinutes
+  })}` : ""));
+  const wrapNarrow = (node) => narrow ? /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Tooltip,
+    {
+      title: tooltipTitle,
+      placement: "top",
+      mouseEnterDelay: 0.12,
+      destroyTooltipOnHide: true
+    },
+    node
+  ) : node;
+  if (item.kind === "block") {
+    const blockWide = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate text-sm font-medium" }, item.name), item.note && /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 truncate text-xs text-zinc-200/90" }, item.note), getBlockMetaLine(item) && /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 truncate text-[10px] text-zinc-300/80" }, getBlockMetaLine(item)));
+    const blockCompact = micro ? /* @__PURE__ */ import_react.default.createElement("span", { className: "flex h-full w-full items-center justify-center text-[11px] font-semibold leading-none" }, microMark) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate text-[11px] font-medium leading-tight" }, item.name), getBlockMetaLine(item) && /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-0.5 truncate text-[10px] opacity-80" }, getBlockMetaLine(item)));
+    const blockPad = micro ? "px-0.5 py-0.5 flex items-center justify-center" : narrow ? "px-2 py-2" : "px-3 py-3 text-left";
+    return wrapNarrow(
+      /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          "aria-label": narrow ? `${item.name}, ${(0, import_bookingCalendarDateUtils.formatHourLabel)(start)} - ${(0, import_bookingCalendarDateUtils.formatHourLabel)(
+            start + span
+          )}` : void 0,
+          onClick: (e) => {
+            e.stopPropagation();
+            onOpenDetail(item);
+          },
+          className: `absolute inset-x-0 inset-y-0 rounded-2xl overflow-hidden ${blockPad} ${narrow && !micro ? "text-left" : ""} ${stateClass}`
+        },
+        narrow ? blockCompact : blockWide
+      )
+    );
+  }
+  const bookingWide = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col gap-0.5 overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate text-sm font-medium leading-tight" }, item.name), /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate text-xs opacity-90 tabular-nums" }, (0, import_bookingCalendarDateUtils.formatHourLabel)(start), " - ", (0, import_bookingCalendarDateUtils.formatHourLabel)(start + span)), continuesNext && /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: (e) => {
+        e.stopPropagation();
+        onJumpNext();
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          onJumpNext();
+        }
+      },
+      className: "mt-1 inline-flex max-w-full cursor-pointer truncate rounded-lg bg-white/10 px-2 py-1 text-left text-[10px] leading-tight text-violet-100 hover:bg-white/20 sm:text-[11px]"
+    },
+    (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.card.continuesNext")
+  )), (displayTag || lateMinutes) && /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-auto flex shrink-0 flex-wrap items-center justify-end gap-1 pt-1" }, lateMinutes && displayTag === "late" && /* @__PURE__ */ import_react.default.createElement("span", { className: "rounded-md bg-black/25 px-1.5 py-0.5 text-[10px] font-semibold text-white/90 backdrop-blur-[2px] opacity-80 sm:px-2" }, (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.card.lateMinutesBadge", {
+    n: lateMinutes
+  })), displayTag && statusTagMeta(displayTag) && /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: `rounded-lg px-1.5 py-0.5 text-[10px] font-semibold backdrop-blur-[2px] sm:px-2 ${statusTagMeta(displayTag).className} ${lateMinutes ? "opacity-80" : ""}`
+    },
+    statusTagMeta(displayTag).label
+  )));
+  const bookingCompact = micro ? /* @__PURE__ */ import_react.default.createElement("span", { className: "flex h-full w-full items-center justify-center text-[11px] font-semibold leading-none" }, microMark) : /* @__PURE__ */ import_react.default.createElement("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col justify-center overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate text-[11px] font-medium leading-tight tabular-nums" }, item.name, " · ", (0, import_bookingCalendarDateUtils.formatHourLabel)(start), "–", (0, import_bookingCalendarDateUtils.formatHourLabel)(start + span)));
+  const bookingPad = micro ? "px-0.5 py-0.5" : narrow ? "px-1.5 py-1.5" : "px-2 py-2 sm:px-4 sm:py-3";
+  const bookingFlexMain = micro ? "flex items-center justify-center" : "flex min-h-0 flex-col";
+  const bookingAlign = !narrow ? "text-left" : micro ? "" : "justify-center";
+  return wrapNarrow(
+    /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        draggable: true,
+        "aria-label": narrow ? `${item.name}, ${(0, import_bookingCalendarDateUtils.formatHourLabel)(start)} - ${(0, import_bookingCalendarDateUtils.formatHourLabel)(
+          start + span
+        )}` : void 0,
+        onDragStart: (e) => {
+          e.stopPropagation();
+          onDragStart(item);
+        },
+        onDragEnd: (e) => {
+          e.stopPropagation();
+          armSuppressDetailClickAfterDrag();
+        },
+        onClick: (e) => {
+          if (suppressDetailClickAfterDragRef.current) {
+            suppressDetailClickAfterDragRef.current = false;
+            if (suppressDetailClickTimerRef.current != null) {
+              window.clearTimeout(suppressDetailClickTimerRef.current);
+              suppressDetailClickTimerRef.current = null;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+          e.stopPropagation();
+          onOpenDetail(item);
+        },
+        className: `absolute inset-x-0 inset-y-0 rounded-2xl overflow-hidden ${bookingFlexMain} ${bookingAlign} ${bookingPad} ${stateClass}`
+      },
+      narrow ? bookingCompact : bookingWide
+    )
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BookingCard,
+  buildGroupedCourtRows,
+  getBlockMetaLine,
+  getRemainingToneClass,
+  statusTagMeta
+});

package/lib/components/pisellRecordBoard/shellFrame/Calendar/calendarI18n.d.ts

@@ -0,0 +1,4 @@
+/** 日历视图文案：占位符 `{name}`、`{date}` 等由调用方替换 */
+export declare function tCal(id: string, vars?: Record<string, string | number>): string;
+/** 月/周表头：周一为 0（与 rangeDays / startOfWeek 一致） */
+export declare const CALENDAR_WEEKDAY_IDS: readonly ["pisell2.recordBoard.calendar.weekday.mon", "pisell2.recordBoard.calendar.weekday.tue", "pisell2.recordBoard.calendar.weekday.wed", "pisell2.recordBoard.calendar.weekday.thu", "pisell2.recordBoard.calendar.weekday.fri", "pisell2.recordBoard.calendar.weekday.sat", "pisell2.recordBoard.calendar.weekday.sun"];