@pisell/materials 6.11.42 → 6.11.44

package/es/components/pisellFloorMapLayout/components/FigmaTableCard.js

@@ -6,12 +6,14 @@ import React from 'react';
 import { Avatar } from 'antd';
 import { UserOutlined, ClockCircleOutlined, TeamOutlined, AuditOutlined, FieldTimeOutlined, EnvironmentOutlined } from '@ant-design/icons';
 import { locales } from '@pisell/utils';
+import { resolveSceneElementDisplayTitle } from "../utils/floorMapElementNameAsTitle";
 var I18N_CARD = 'pisell-floor-map-layout.card-placeholder';
 var I18N_FIGMA = 'pisell-floor-map-layout.figma-card';
 
 /** Figma 设计 token（Pisell 2.0 Component Library） */
 var FIGMA = {
   white: '#FFFFFF',
+  gray100: '#F2F4F7',
   gray200: '#EAECF0',
   gray400: '#98A2B3',
   gray700: '#344054',
@@ -34,6 +36,27 @@ var STATUS_BORDER = {
   availableSoon: FIGMA.availableSoon
 };
 
+/**
+ * 状态 tag 的浅色背景 / 深色文字配对。可用态走中性灰；其它态用对应状态色的浅版底 + 深版字，
+ * 保证小字号下仍有足够对比度（≥ 4.5:1）。
+ */
+var STATUS_TAG_BG = {
+  available: '#F2F4F7',
+  reserved: '#F4ECFB',
+  waiting: '#FEF0E0',
+  dining: '#E6F4FF',
+  billed: '#E8F8EA',
+  availableSoon: '#FEE4E2'
+};
+var STATUS_TAG_FG = {
+  available: '#475467',
+  reserved: '#7B3CCB',
+  waiting: '#C4690D',
+  dining: '#0E6FD0',
+  billed: '#347D3A',
+  availableSoon: '#B42318'
+};
+
 /** 方桌/圆桌卡片展示用数据结构（与 Figma 设计一致，支持桌号/状态/人数/区域等） */
 
 var STATUS_MAP = {
@@ -81,9 +104,20 @@ export function getFigmaTableCardFromMerged(item, dataSources) {
   var displayId = (_binding$recordId = binding === null || binding === void 0 ? void 0 : binding.recordId) !== null && _binding$recordId !== void 0 ? _binding$recordId : item.id;
   var rawStatus = record === null || record === void 0 ? void 0 : record.status;
   var status = rawStatus && STATUS_MAP[rawStatus] || 'available';
+  /**
+   * 命中数据行的标题：默认仍用 `record.name`（保持历史行为）。
+   * 若图元上勾选了「将图元名作为资源标题」，由 resolveSceneElementDisplayTitle 统一覆盖，
+   * 与预约页 RoomCard 路径一致；未勾选 / 未启用 kind 都不会改动。
+   */
+  var recordName = (record === null || record === void 0 ? void 0 : record.name) != null ? String(record.name) : undefined;
+  var resolvedTitle = resolveSceneElementDisplayTitle({
+    sceneElement: el,
+    recordTitle: recordName,
+    fallback: kindLabel
+  });
   return {
     id: displayId,
-    displayName: record === null || record === void 0 ? void 0 : record.name,
+    displayName: resolvedTitle || undefined,
     status: status,
     customerName: record === null || record === void 0 ? void 0 : record.customerName,
     reserveTime: record === null || record === void 0 ? void 0 : record.reserveTime,
@@ -161,72 +195,161 @@ function FigmaCardRow(_ref2) {
   }, children));
 }
 
-/** 人数、区域等通用信息行（与表格列绑定：可坐人数、区域） */
-function TableCardInfoRows(_ref3) {
-  var cardItem = _ref3.cardItem;
+/**
+ * 「资源信息」标题栏：把图元自身的属性（桌名 / 可坐人数 / 区域 / 状态）从卡片正文里抽出来
+ * 单独占一栏置顶，正文专心展示当下的预订 / 用餐 / 结账信息。
+ *
+ * 布局：
+ *   ┌─────────────────────────────────────┐
+ *   │  桌名 (粗体)                  [状态 tag] │
+ *   │  [人数] N · [区域] 区                    │
+ *   └─────────────────────────────────────┘
+ *
+ * - 没有任何资源字段时返回 null，避免空标题栏占位；
+ * - 状态 tag 用浅色底 + 深色字（status 配色对），保持小字号对比度；
+ * - capacity · area 行仅在两者至少有一项时渲染。
+ */
+function ResourceHeaderBar(_ref3) {
+  var _cardItem$displayName, _cardItem$status;
+  var cardItem = _ref3.cardItem,
+    variant = _ref3.variant;
   var hasCapacity = cardItem.capacity != null;
   var hasArea = cardItem.area != null && cardItem.area !== '';
-  if (!hasCapacity && !hasArea) return null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasCapacity && /*#__PURE__*/React.createElement(FigmaCardRow, {
-    icon: /*#__PURE__*/React.createElement(TeamOutlined, null)
-  }, /*#__PURE__*/React.createElement("span", null, locales.getText("".concat(I18N_FIGMA, ".capacity-seats")).replace(/\{n\}/g, String(cardItem.capacity)))), hasArea && /*#__PURE__*/React.createElement(FigmaCardRow, {
-    icon: /*#__PURE__*/React.createElement(EnvironmentOutlined, null)
-  }, /*#__PURE__*/React.createElement("span", null, cardItem.area)));
+  var titleText = (_cardItem$displayName = cardItem.displayName) !== null && _cardItem$displayName !== void 0 ? _cardItem$displayName : cardItem.id;
+  var hasTitle = titleText != null && String(titleText).trim() !== '';
+  var status = (_cardItem$status = cardItem.status) !== null && _cardItem$status !== void 0 ? _cardItem$status : 'available';
+  var statusLabel = locales.getText("".concat(I18N_FIGMA, ".status-").concat(status));
+  if (!hasTitle && !hasCapacity && !hasArea) return null;
+  var metaEntries = [];
+  if (hasCapacity) {
+    metaEntries.push({
+      key: 'capacity',
+      icon: /*#__PURE__*/React.createElement(TeamOutlined, {
+        style: {
+          marginRight: 3
+        }
+      }),
+      text: locales.getText("".concat(I18N_FIGMA, ".capacity-seats")).replace(/\{n\}/g, String(cardItem.capacity))
+    });
+  }
+  if (hasArea) {
+    metaEntries.push({
+      key: 'area',
+      icon: /*#__PURE__*/React.createElement(EnvironmentOutlined, {
+        style: {
+          marginRight: 3
+        }
+      }),
+      text: String(cardItem.area)
+    });
+  }
+  var isRound = variant === 'round';
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 2,
+      padding: isRound ? '4px 8px 6px' : '6px 8px',
+      borderBottom: isRound ? 'none' : "1px dashed ".concat(FIGMA.gray200),
+      flexShrink: 0,
+      fontFamily: FIGMA.fontFamily
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      minHeight: 18
+    }
+  }, hasTitle ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: 600,
+      fontSize: 14,
+      lineHeight: '18px',
+      color: FIGMA.gray900,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      flex: '1 1 auto',
+      minWidth: 0,
+      textAlign: isRound ? 'center' : 'left'
+    },
+    title: String(titleText)
+  }, titleText) : /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: '1 1 auto'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '1px 6px',
+      borderRadius: 999,
+      fontSize: 10,
+      lineHeight: '14px',
+      fontWeight: 600,
+      background: STATUS_TAG_BG[status],
+      color: STATUS_TAG_FG[status],
+      flexShrink: 0,
+      whiteSpace: 'nowrap',
+      letterSpacing: 0.2
+    }
+  }, statusLabel)), metaEntries.length > 0 ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11,
+      lineHeight: '16px',
+      color: FIGMA.gray400,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      display: 'block',
+      textAlign: isRound ? 'center' : 'left'
+    }
+  }, metaEntries.map(function (entry, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: entry.key
+    }, index === 0 ? null : /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '0 4px'
+      }
+    }, "\xB7"), entry.icon, entry.text);
+  })) : null);
 }
 
-/** 方桌卡片内容区（与 renderFigmaStyleTableCard 共用，展示桌号/状态/人数/区域） */
+/**
+ * 方桌内容区（不含资源信息——桌名 / 可坐人数 / 区域已上移到 ResourceHeaderBar）。
+ *
+ * - available：正文留空（视觉上是一个浅灰边框白底），所有"我是哪张桌"已在标题栏交代；
+ * - reserved：客人 + 预订时间；
+ * - dining / waiting / billed / availableSoon：当前用餐人数 + 菜品 + 用餐时长。
+ */
 function TableCardContent(_ref4) {
-  var _cardItem$status, _cardItem$displayName, _cardItem$displayName2;
+  var _cardItem$status2;
   var cardItem = _ref4.cardItem;
-  var status = (_cardItem$status = cardItem.status) !== null && _cardItem$status !== void 0 ? _cardItem$status : 'available';
+  var status = (_cardItem$status2 = cardItem.status) !== null && _cardItem$status2 !== void 0 ? _cardItem$status2 : 'available';
   var borderColor = STATUS_BORDER[status];
   var isAvailable = status === 'available';
   return /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       minHeight: 0,
-      padding: 8,
+      /** 方桌内容区内边距：原 8 减半为 4，留出更多内容显示空间 */
+      padding: 4,
       boxSizing: 'border-box',
       background: FIGMA.white,
       border: isAvailable ? "4px solid ".concat(FIGMA.gray200) : "4px solid ".concat(borderColor),
-      borderRadius: 8,
-      boxShadow: FIGMA.shadowSm,
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: isAvailable ? 'flex-start' : 'center',
-      alignItems: isAvailable ? 'stretch' : 'center',
-      gap: 4
-    }
-  }, isAvailable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      borderBottomLeftRadius: 8,
+      borderBottomRightRadius: 8,
       display: 'flex',
       flexDirection: 'column',
-      alignItems: 'center',
       justifyContent: 'center',
-      minHeight: 0,
+      alignItems: isAvailable ? 'stretch' : 'center',
       gap: 4
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontWeight: 600,
-      fontSize: 18,
-      lineHeight: '24px',
-      color: FIGMA.gray700,
-      letterSpacing: 0
-    }
-  }, (_cardItem$displayName = cardItem.displayName) !== null && _cardItem$displayName !== void 0 ? _cardItem$displayName : cardItem.id), /*#__PURE__*/React.createElement(TableCardInfoRows, {
-    cardItem: cardItem
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontWeight: 600,
-      fontSize: 18,
-      lineHeight: '24px',
-      color: FIGMA.gray900,
-      letterSpacing: 0,
-      textAlign: 'center'
-    }
-  }, (_cardItem$displayName2 = cardItem.displayName) !== null && _cardItem$displayName2 !== void 0 ? _cardItem$displayName2 : cardItem.id), status === 'reserved' && (cardItem.customerName != null && cardItem.customerName !== '' || cardItem.reserveTime != null && cardItem.reserveTime !== '') && /*#__PURE__*/React.createElement(React.Fragment, null, cardItem.customerName != null && cardItem.customerName !== '' && /*#__PURE__*/React.createElement(FigmaCardRow, {
+  }, isAvailable ? null : /*#__PURE__*/React.createElement(React.Fragment, null, status === 'reserved' && (cardItem.customerName != null && cardItem.customerName !== '' || cardItem.reserveTime != null && cardItem.reserveTime !== '') && /*#__PURE__*/React.createElement(React.Fragment, null, cardItem.customerName != null && cardItem.customerName !== '' && /*#__PURE__*/React.createElement(FigmaCardRow, {
     icon: /*#__PURE__*/React.createElement(Avatar, {
       size: 16,
       icon: /*#__PURE__*/React.createElement(UserOutlined, null),
@@ -242,9 +365,7 @@ function TableCardContent(_ref4) {
     icon: /*#__PURE__*/React.createElement(AuditOutlined, null)
   }, /*#__PURE__*/React.createElement("span", null, cardItem.dishes)), cardItem.duration && /*#__PURE__*/React.createElement(FigmaCardRow, {
     icon: /*#__PURE__*/React.createElement(FieldTimeOutlined, null)
-  }, /*#__PURE__*/React.createElement("span", null, cardItem.duration))), /*#__PURE__*/React.createElement(TableCardInfoRows, {
-    cardItem: cardItem
-  })));
+  }, /*#__PURE__*/React.createElement("span", null, cardItem.duration)))));
 }
 
 /** 无数据占位：与蘸料摆台 Story 中占位卡片视觉对齐（虚线框 + #fafafa） */
@@ -291,13 +412,42 @@ function renderTableKindNoDataPlaceholder(cardItem, shape) {
   }, hint) : null);
 }
 
-/** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框） */
+/**
+ * 资源信息栏的"独立 chip"包裹：保持与下方卡片正文相同的状态色边框，但
+ * 视觉上紧贴在卡片顶端，形成 [资源 chip][正文卡片] 的两段式结构。
+ *
+ * 边框策略：与正文 4px 状态色等宽，上面圆角、底部直边、底部 0 边以"贴合"正文。
+ */
+function ResourceHeaderShell(_ref5) {
+  var _cardItem$status3;
+  var cardItem = _ref5.cardItem,
+    variant = _ref5.variant;
+  var status = (_cardItem$status3 = cardItem.status) !== null && _cardItem$status3 !== void 0 ? _cardItem$status3 : 'available';
+  var borderColor = status === 'available' ? FIGMA.gray200 : STATUS_BORDER[status];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: FIGMA.white,
+      border: "4px solid ".concat(borderColor),
+      /** 去掉底部边，与下方 TableCardContent 拼合成一张卡片，再由内部 dashed line 分隔上下两段 */
+      borderBottom: 'none',
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      flexShrink: 0,
+      boxSizing: 'border-box'
+    }
+  }, /*#__PURE__*/React.createElement(ResourceHeaderBar, {
+    cardItem: cardItem,
+    variant: variant
+  }));
+}
+
+/** 渲染 Figma 样式的方桌卡片（上下小条 + 资源信息标题栏 + 白底卡片 + 状态色边框） */
 export function renderFigmaStyleTableCard(cardItem) {
-  var _cardItem$status2;
+  var _cardItem$status4;
   if (cardItem.isNoDataPlaceholder) {
     return renderTableKindNoDataPlaceholder(cardItem, 'rect');
   }
-  var status = (_cardItem$status2 = cardItem.status) !== null && _cardItem$status2 !== void 0 ? _cardItem$status2 : 'available';
+  var status = (_cardItem$status4 = cardItem.status) !== null && _cardItem$status4 !== void 0 ? _cardItem$status4 : 'available';
   var borderColor = STATUS_BORDER[status];
   var isAvailable = status === 'available';
   return /*#__PURE__*/React.createElement("div", {
@@ -316,22 +466,63 @@ export function renderFigmaStyleTableCard(cardItem) {
     count: getBarCountFromItemId(cardItem.id),
     position: "top",
     barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minHeight: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      borderRadius: 8,
+      boxShadow: FIGMA.shadowSm,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(ResourceHeaderShell, {
+    cardItem: cardItem,
+    variant: "rect"
   }), /*#__PURE__*/React.createElement(TableCardContent, {
     cardItem: cardItem
-  }), /*#__PURE__*/React.createElement(CardBars, {
+  })), /*#__PURE__*/React.createElement(CardBars, {
     count: getBarCountFromItemId(cardItem.id),
     position: "bottom",
     barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
   }));
 }
 
-/** 渲染 Figma 样式的圆桌卡片（圆形轮廓，展示桌号/状态/人数/区域） */
+/**
+ * 圆桌专用：独立 pill 形资源信息标题栏，悬挂在圆形之上。
+ *
+ * 圆形不能在顶部"切一刀"放标题栏，所以做成独立 chip：保持圆形主体不被破坏，
+ * 同时把"我是哪张桌、能坐几人、属于哪个区"这些资源属性单独展示在最上方。
+ */
+function RoundResourceHeaderChip(_ref6) {
+  var _cardItem$status5;
+  var cardItem = _ref6.cardItem;
+  var status = (_cardItem$status5 = cardItem.status) !== null && _cardItem$status5 !== void 0 ? _cardItem$status5 : 'available';
+  var borderColor = status === 'available' ? FIGMA.gray200 : STATUS_BORDER[status];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      flexShrink: 0,
+      background: FIGMA.white,
+      border: "2px solid ".concat(borderColor),
+      borderRadius: 999,
+      boxShadow: FIGMA.shadowSm,
+      margin: '0 auto 4px',
+      boxSizing: 'border-box',
+      maxWidth: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(ResourceHeaderBar, {
+    cardItem: cardItem,
+    variant: "round"
+  }));
+}
+
+/** 渲染 Figma 样式的圆桌卡片（顶部资源信息 chip + 圆形主体，圆形主体只展示状态相关内容） */
 export function renderFigmaStyleRoundTableCard(cardItem) {
-  var _cardItem$status3, _cardItem$displayName3, _cardItem$displayName4;
+  var _cardItem$status6;
   if (cardItem.isNoDataPlaceholder) {
     return renderTableKindNoDataPlaceholder(cardItem, 'circle');
   }
-  var status = (_cardItem$status3 = cardItem.status) !== null && _cardItem$status3 !== void 0 ? _cardItem$status3 : 'available';
+  var status = (_cardItem$status6 = cardItem.status) !== null && _cardItem$status6 !== void 0 ? _cardItem$status6 : 'available';
   var borderColor = STATUS_BORDER[status];
   var isAvailable = status === 'available';
   return /*#__PURE__*/React.createElement("div", {
@@ -341,10 +532,21 @@ export function renderFigmaStyleRoundTableCard(cardItem) {
       boxSizing: 'border-box',
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
+      alignItems: 'stretch',
       gap: 0,
       fontFamily: FIGMA.fontFamily,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(RoundResourceHeaderChip, {
+    cardItem: cardItem
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minHeight: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
       overflow: 'hidden',
       borderRadius: '50%',
       border: isAvailable ? "4px solid ".concat(FIGMA.gray200) : "4px solid ".concat(borderColor),
@@ -358,65 +560,28 @@ export function renderFigmaStyleRoundTableCard(cardItem) {
       minHeight: 0,
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: isAvailable ? 'flex-start' : 'center',
+      justifyContent: 'center',
       alignItems: 'center',
       width: '100%',
       overflow: 'hidden',
       gap: 2
     }
-  }, isAvailable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, isAvailable ? null : /*#__PURE__*/React.createElement(React.Fragment, null, status === 'reserved' && cardItem.customerName && /*#__PURE__*/React.createElement("div", {
     style: {
-      fontWeight: 600,
-      fontSize: 16,
-      lineHeight: '22px',
-      color: FIGMA.gray700,
-      textAlign: 'center'
-    }
-  }, (_cardItem$displayName3 = cardItem.displayName) !== null && _cardItem$displayName3 !== void 0 ? _cardItem$displayName3 : cardItem.id), (cardItem.capacity != null || cardItem.area != null && cardItem.area !== '') && /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      gap: 2,
       fontSize: 12,
-      lineHeight: '18px',
       color: FIGMA.gray700
     }
-  }, cardItem.capacity != null && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(TeamOutlined, {
-    style: {
-      marginRight: 4
-    }
-  }), locales.getText("".concat(I18N_FIGMA, ".capacity-seats")).replace(/\{n\}/g, String(cardItem.capacity))), cardItem.area != null && cardItem.area !== '' && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(EnvironmentOutlined, {
-    style: {
-      marginRight: 4
-    }
-  }), cardItem.area))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontWeight: 600,
-      fontSize: 16,
-      lineHeight: '22px',
-      color: FIGMA.gray900,
-      textAlign: 'center'
-    }
-  }, (_cardItem$displayName4 = cardItem.displayName) !== null && _cardItem$displayName4 !== void 0 ? _cardItem$displayName4 : cardItem.id), status === 'reserved' && cardItem.customerName && /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: 12,
-      color: FIGMA.gray700,
-      marginTop: 2
-    }
-  }, cardItem.customerName), (status === 'dining' || status === 'waiting' || status === 'billed') && cardItem.guests != null && /*#__PURE__*/React.createElement("div", {
+  }, cardItem.customerName), status === 'reserved' && cardItem.reserveTime && /*#__PURE__*/React.createElement("div", {
     style: {
       fontSize: 12,
-      color: FIGMA.gray700,
-      marginTop: 2
+      color: FIGMA.gray700
     }
-  }, locales.getText("".concat(I18N_FIGMA, ".guests-count")).replace(/\{n\}/g, String(cardItem.guests))), (cardItem.capacity != null || cardItem.area != null && cardItem.area !== '') && /*#__PURE__*/React.createElement("div", {
+  }, cardItem.reserveTime), (status === 'dining' || status === 'waiting' || status === 'billed' || status === 'availableSoon') && cardItem.guests != null && /*#__PURE__*/React.createElement("div", {
     style: {
       fontSize: 12,
-      color: FIGMA.gray700,
-      marginTop: 2
+      color: FIGMA.gray700
     }
-  }, cardItem.capacity != null && locales.getText("".concat(I18N_FIGMA, ".capacity-seats")).replace(/\{n\}/g, String(cardItem.capacity)), cardItem.capacity != null && cardItem.area && ' · ', cardItem.area))));
+  }, locales.getText("".concat(I18N_FIGMA, ".guests-count")).replace(/\{n\}/g, String(cardItem.guests)))))));
 }
 
 /** 返回用于 renderItemByKind.table 的渲染函数（方桌） */

package/es/components/pisellFloorMapLayout/components/FloorMapEditPanel.js

@@ -11,9 +11,10 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { locales } from '@pisell/utils';
 import classNames from 'classnames';
 import { CloseOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons';
-import { Input, InputNumber, Select, Button, Form, Popconfirm, message } from 'antd';
+import { Input, InputNumber, Select, Button, Form, Popconfirm, message, Checkbox } from 'antd';
 import { FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types";
 import { getElementKindConfig, resolveDataBindingPolicy, isFloorMapImageElementKind, getSwappableElementKindsInSameCategory, patchSceneElementForKindSwitch } from "../utils/floorMapElementKindUtils";
+import { isElementNameAsTitleEnabled, buildNameAsTitleExtensionsPatch } from "../utils/floorMapElementNameAsTitle";
 import { FloorMapDataForm } from "./FloorMapDataForm";
 import useEngineContext from "../../../hooks/useEngineContext";
 import { getFloorMapCanvasDisplayName, initFloorMapLayoutLocales } from "../utils/floorMapCanvasDisplay";
@@ -75,6 +76,8 @@ export function FloorMapEditPanel(props) {
       labelNameStage: locales.getText("".concat(I18N_EP, ".label-name-stage")),
       phNameStage: locales.getText("".concat(I18N_EP, ".ph-name-stage")),
       phName: locales.getText("".concat(I18N_EP, ".ph-name")),
+      labelNameAsTitle: locales.getText("".concat(I18N_EP, ".label-name-as-title")),
+      tipNameAsTitle: locales.getText("".concat(I18N_EP, ".tip-name-as-title")),
       labelImageUrl: locales.getText("".concat(I18N_EP, ".label-image-url")),
       extraImageUrl: locales.getText("".concat(I18N_EP, ".extra-image-url")),
       phHttps: locales.getText("".concat(I18N_EP, ".ph-https")),
@@ -117,6 +120,11 @@ export function FloorMapEditPanel(props) {
   });
   var kindConfig = getElementKindConfig(config, sceneElement.elementKind);
   var bindingPolicy = resolveDataBindingPolicy(kindConfig);
+  /**
+   * 是否在编辑面板渲染「将图元名作为资源标题」勾选项，由 kindConfig 显式声明；
+   * 未声明的 kind（含将来新增）保持现状不出现该项。
+   */
+  var kindAllowsNameAsTitle = Boolean(kindConfig === null || kindConfig === void 0 ? void 0 : kindConfig.nameAsTitleConfigurable);
   var allKeys = Object.keys(dataSources);
   var allowedKeys = kindConfig !== null && kindConfig !== void 0 && (_kindConfig$allowedDa = kindConfig.allowedDataSourceKeys) !== null && _kindConfig$allowedDa !== void 0 && _kindConfig$allowedDa.length ? kindConfig.allowedDataSourceKeys.filter(function (k) {
     return allKeys.includes(k);
@@ -137,7 +145,12 @@ export function FloorMapEditPanel(props) {
       width: (_sceneElement$width = sceneElement.width) !== null && _sceneElement$width !== void 0 ? _sceneElement$width : dw,
       height: (_sceneElement$height = sceneElement.height) !== null && _sceneElement$height !== void 0 ? _sceneElement$height : dh,
       canvasId: sceneElement.canvasId,
-      imageUrl: (_sceneElement$imageUr = sceneElement.imageUrl) !== null && _sceneElement$imageUr !== void 0 ? _sceneElement$imageUr : ''
+      imageUrl: (_sceneElement$imageUr = sceneElement.imageUrl) !== null && _sceneElement$imageUr !== void 0 ? _sceneElement$imageUr : '',
+      /**
+       * 编辑面板「将图元名作为资源标题」勾选项；持久化在 extensions[NAME_AS_TITLE_EXT_KEY]，
+       * UI 仅在 kindConfig.nameAsTitleConfigurable 时渲染。
+       */
+      nameAsTitle: isElementNameAsTitleEnabled(sceneElement)
     };
   }, [sceneElement, isImageKind]);
   React.useEffect(function () {
@@ -171,9 +184,18 @@ export function FloorMapEditPanel(props) {
       patch.width = Number.isFinite(w) ? Math.max(20, w) : undefined;
       patch.height = Number.isFinite(h) ? Math.max(20, h) : undefined;
     }
+    /**
+     * 「图元名作为资源标题」开关：仅在 kindConfig 允许配置时才会出现在表单里；
+     * 没有 name 的场景下即便勾选也无意义，因此用 `name` 是否为空决定写入是 true 还是清掉。
+     * 写入路径走 extensions，避免顶层 schema 出现仅供 UI 偏好的字段。
+     */
+    if (kindAllowsNameAsTitle) {
+      var enabled = Boolean(values.nameAsTitle) && Boolean(name);
+      patch.extensions = buildNameAsTitleExtensionsPatch(sceneElement.extensions, enabled);
+    }
     onUpdate(patch);
     setFormHasUnappliedChanges(false);
-  }, [onUpdate, isImageKind, layoutLocked]);
+  }, [onUpdate, isImageKind, layoutLocked, kindAllowsNameAsTitle, sceneElement.extensions]);
   var binding = sceneElement.dataBinding;
   var record = binding ? (_dataSources$binding$ = (_dataSources$binding$2 = dataSources[binding.dataSourceKey]) === null || _dataSources$binding$2 === void 0 ? void 0 : _dataSources$binding$2.find(function (r) {
     return r.id === binding.recordId;
@@ -407,7 +429,21 @@ export function FloorMapEditPanel(props) {
   }, /*#__PURE__*/React.createElement(Input, {
     placeholder: isStageLike ? ep.phNameStage : ep.phName,
     allowClear: true
-  })), isImageKind ? /*#__PURE__*/React.createElement(Form.Item, {
+  })), kindAllowsNameAsTitle ?
+  /*#__PURE__*/
+  /**
+   * 仅在 kindConfig.nameAsTitleConfigurable 时渲染。
+   * 业务侧通过 {@link resolveSceneElementDisplayTitle} 读取该偏好，
+   * 决定卡片标题是否覆盖业务字段（如 row.main_field / row.code）。
+   */
+  React.createElement(Form.Item, {
+    name: "nameAsTitle",
+    valuePropName: "checked",
+    extra: ep.tipNameAsTitle,
+    style: {
+      marginTop: -4
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, null, ep.labelNameAsTitle)) : null, isImageKind ? /*#__PURE__*/React.createElement(Form.Item, {
     name: "imageUrl",
     label: ep.labelImageUrl,
     extra: ep.extraImageUrl

package/es/components/pisellFloorMapLayout/components/FloorMapEditTopBar.d.ts

@@ -32,6 +32,28 @@ export interface FloorMapEditTopBarProps {
     canvasTabsBarTrailing?: React.ReactNode;
     /** 启用画布仅 1 个时隐藏 Tab 行，仅保留右侧操作区（全屏顶栏保存等） */
     hideCanvasTabs?: boolean;
+    /** 撤销当前编辑步骤（不传则不显示按钮） */
+    onUndo?: () => void;
+    /** 重做最近一次撤销（不传则不显示按钮） */
+    onRedo?: () => void;
+    /** 是否还有可撤销步骤 */
+    canUndo?: boolean;
+    /** 是否还有可重做步骤 */
+    canRedo?: boolean;
+    /**
+     * 退出编辑模式回调（不保存）。
+     * 传入后顶栏右侧会渲染「取消编辑」+「完成」两个按钮，替代原独立「保存」按钮：
+     * - 取消编辑 → `onCancelEdit?.() ?? onExitEdit()`
+     * - 完成 → `onSave?.()` + `onExitEdit()`
+     * 不传则维持旧版「保存」按钮（保存但不退出）。
+     */
+    onExitEdit?: () => void;
+    /**
+     * 「取消编辑」专用回调（可选）。传入时取消按钮优先调它，业务层可以在这里
+     * 完成「丢弃草稿 + 退出编辑」组合，从而保证回到阅读态不会看到未保存的脏数据。
+     * 不传时取消按钮回退到 `onExitEdit`。完成按钮链路不受此 prop 影响。
+     */
+    onCancelEdit?: () => void;
     className?: string;
 }
 export declare function FloorMapEditTopBar(props: FloorMapEditTopBarProps): JSX.Element | null;