@pisell/materials 6.11.42 → 6.11.44

package/lib/components/pisellFloorMapLayout/components/FigmaTableCard.d.ts

@@ -29,9 +29,9 @@ export interface FigmaTableCardItem {
 }
 /** 从 merged item + dataSources 得到卡片数据 */
 export declare function getFigmaTableCardFromMerged(item: FloorMapMergedItem, dataSources: FloorMapDataSources): FigmaTableCardItem;
-/** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框） */
+/** 渲染 Figma 样式的方桌卡片（上下小条 + 资源信息标题栏 + 白底卡片 + 状态色边框） */
 export declare function renderFigmaStyleTableCard(cardItem: FigmaTableCardItem): JSX.Element;
-/** 渲染 Figma 样式的圆桌卡片（圆形轮廓，展示桌号/状态/人数/区域） */
+/** 渲染 Figma 样式的圆桌卡片（顶部资源信息 chip + 圆形主体，圆形主体只展示状态相关内容） */
 export declare function renderFigmaStyleRoundTableCard(cardItem: FigmaTableCardItem): JSX.Element;
 /** 返回用于 renderItemByKind.table 的渲染函数（方桌） */
 export declare function getRenderItemByKindTable(dataSources: FloorMapDataSources): (item: unknown) => JSX.Element;

package/lib/components/pisellFloorMapLayout/components/FigmaTableCard.js

@@ -40,10 +40,12 @@ var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_icons = require("@ant-design/icons");
 var import_utils = require("@pisell/utils");
+var import_floorMapElementNameAsTitle = require("../utils/floorMapElementNameAsTitle");
 var I18N_CARD = "pisell-floor-map-layout.card-placeholder";
 var I18N_FIGMA = "pisell-floor-map-layout.figma-card";
 var FIGMA = {
   white: "#FFFFFF",
+  gray100: "#F2F4F7",
   gray200: "#EAECF0",
   gray400: "#98A2B3",
   gray700: "#344054",
@@ -65,6 +67,22 @@ var STATUS_BORDER = {
   billed: FIGMA.billed,
   availableSoon: FIGMA.availableSoon
 };
+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"
+};
 var STATUS_MAP = {
   available: "available",
   reserved: "reserved",
@@ -108,9 +126,15 @@ function getFigmaTableCardFromMerged(item, dataSources) {
   const displayId = (binding == null ? void 0 : binding.recordId) ?? item.id;
   const rawStatus = record == null ? void 0 : record.status;
   const status = rawStatus && STATUS_MAP[rawStatus] || "available";
+  const recordName = (record == null ? void 0 : record.name) != null ? String(record.name) : void 0;
+  const resolvedTitle = (0, import_floorMapElementNameAsTitle.resolveSceneElementDisplayTitle)({
+    sceneElement: el,
+    recordTitle: recordName,
+    fallback: kindLabel
+  });
   return {
     id: displayId,
-    displayName: record == null ? void 0 : record.name,
+    displayName: resolvedTitle || void 0,
     status,
     customerName: record == null ? void 0 : record.customerName,
     reserveTime: record == null ? void 0 : record.reserveTime,
@@ -186,76 +210,142 @@ function FigmaCardRow({
     /* @__PURE__ */ import_react.default.createElement("span", { style: { flexShrink: 0 } }, children)
   );
 }
-function TableCardInfoRows({ cardItem }) {
+function ResourceHeaderBar({
+  cardItem,
+  variant
+}) {
   const hasCapacity = cardItem.capacity != null;
   const hasArea = cardItem.area != null && cardItem.area !== "";
-  if (!hasCapacity && !hasArea) return null;
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, hasCapacity && /* @__PURE__ */ import_react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.TeamOutlined, null) }, /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText(`${I18N_FIGMA}.capacity-seats`).replace(/\{n\}/g, String(cardItem.capacity)))), hasArea && /* @__PURE__ */ import_react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.EnvironmentOutlined, null) }, /* @__PURE__ */ import_react.default.createElement("span", null, cardItem.area)));
-}
-function TableCardContent({ cardItem }) {
+  const titleText = cardItem.displayName ?? cardItem.id;
+  const hasTitle = titleText != null && String(titleText).trim() !== "";
   const status = cardItem.status ?? "available";
-  const borderColor = STATUS_BORDER[status];
-  const isAvailable = status === "available";
+  const statusLabel = import_utils.locales.getText(`${I18N_FIGMA}.status-${status}`);
+  if (!hasTitle && !hasCapacity && !hasArea) return null;
+  const metaEntries = [];
+  if (hasCapacity) {
+    metaEntries.push({
+      key: "capacity",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.TeamOutlined, { style: { marginRight: 3 } }),
+      text: import_utils.locales.getText(`${I18N_FIGMA}.capacity-seats`).replace(/\{n\}/g, String(cardItem.capacity))
+    });
+  }
+  if (hasArea) {
+    metaEntries.push({
+      key: "area",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.EnvironmentOutlined, { style: { marginRight: 3 } }),
+      text: String(cardItem.area)
+    });
+  }
+  const isRound = variant === "round";
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       style: {
-        flex: 1,
-        minHeight: 0,
-        padding: 8,
-        boxSizing: "border-box",
-        background: FIGMA.white,
-        border: isAvailable ? `4px solid ${FIGMA.gray200}` : `4px solid ${borderColor}`,
-        borderRadius: 8,
-        boxShadow: FIGMA.shadowSm,
         display: "flex",
         flexDirection: "column",
-        justifyContent: isAvailable ? "flex-start" : "center",
-        alignItems: isAvailable ? "stretch" : "center",
-        gap: 4
+        gap: 2,
+        padding: isRound ? "4px 8px 6px" : "6px 8px",
+        borderBottom: isRound ? "none" : `1px dashed ${FIGMA.gray200}`,
+        flexShrink: 0,
+        fontFamily: FIGMA.fontFamily
       }
     },
-    isAvailable ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
         style: {
-          flex: 1,
           display: "flex",
-          flexDirection: "column",
           alignItems: "center",
-          justifyContent: "center",
-          minHeight: 0,
-          gap: 4
+          gap: 8,
+          minHeight: 18
         }
       },
+      hasTitle ? /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("span", { style: { flex: "1 1 auto" } }),
       /* @__PURE__ */ import_react.default.createElement(
-        "div",
+        "span",
         {
           style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "1px 6px",
+            borderRadius: 999,
+            fontSize: 10,
+            lineHeight: "14px",
             fontWeight: 600,
-            fontSize: 18,
-            lineHeight: "24px",
-            color: FIGMA.gray700,
-            letterSpacing: 0
+            background: STATUS_TAG_BG[status],
+            color: STATUS_TAG_FG[status],
+            flexShrink: 0,
+            whiteSpace: "nowrap",
+            letterSpacing: 0.2
           }
         },
-        cardItem.displayName ?? cardItem.id
-      ),
-      /* @__PURE__ */ import_react.default.createElement(TableCardInfoRows, { cardItem })
-    )) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-      "div",
+        statusLabel
+      )
+    ),
+    metaEntries.length > 0 ? /* @__PURE__ */ import_react.default.createElement(
+      "span",
       {
         style: {
-          fontWeight: 600,
-          fontSize: 18,
-          lineHeight: "24px",
-          color: FIGMA.gray900,
-          letterSpacing: 0,
-          textAlign: "center"
+          fontSize: 11,
+          lineHeight: "16px",
+          color: FIGMA.gray400,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          display: "block",
+          textAlign: isRound ? "center" : "left"
         }
       },
-      cardItem.displayName ?? cardItem.id
-    ), status === "reserved" && (cardItem.customerName != null && cardItem.customerName !== "" || cardItem.reserveTime != null && cardItem.reserveTime !== "") && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, cardItem.customerName != null && cardItem.customerName !== "" && /* @__PURE__ */ import_react.default.createElement(
+      metaEntries.map((entry, index) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: entry.key }, index === 0 ? null : /* @__PURE__ */ import_react.default.createElement("span", { style: { margin: "0 4px" } }, "·"), entry.icon, entry.text))
+    ) : null
+  );
+}
+function TableCardContent({ cardItem }) {
+  const status = cardItem.status ?? "available";
+  const borderColor = STATUS_BORDER[status];
+  const isAvailable = status === "available";
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        /** 方桌内容区内边距：原 8 减半为 4，留出更多内容显示空间 */
+        padding: 4,
+        boxSizing: "border-box",
+        background: FIGMA.white,
+        border: isAvailable ? `4px solid ${FIGMA.gray200}` : `4px solid ${borderColor}`,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomLeftRadius: 8,
+        borderBottomRightRadius: 8,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: isAvailable ? "stretch" : "center",
+        gap: 4
+      }
+    },
+    isAvailable ? null : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, status === "reserved" && (cardItem.customerName != null && cardItem.customerName !== "" || cardItem.reserveTime != null && cardItem.reserveTime !== "") && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, cardItem.customerName != null && cardItem.customerName !== "" && /* @__PURE__ */ import_react.default.createElement(
       FigmaCardRow,
       {
         icon: /* @__PURE__ */ import_react.default.createElement(
@@ -268,7 +358,7 @@ function TableCardContent({ cardItem }) {
         )
       },
       /* @__PURE__ */ import_react.default.createElement("span", null, cardItem.customerName)
-    ), cardItem.reserveTime != null && cardItem.reserveTime !== "" && /* @__PURE__ */ import_react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ClockCircleOutlined, null) }, /* @__PURE__ */ import_react.default.createElement("span", null, cardItem.reserveTime))), (status === "dining" || status === "waiting" || status === "billed" || status === "availableSoon") && cardItem.guests != null && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.TeamOutlined, null) }, /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText(`${I18N_FIGMA}.guests-count`).replace(/\{n\}/g, String(cardItem.guests)))), cardItem.dishes && /* @__PURE__ */ import_react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.AuditOutlined, null) }, /* @__PURE__ */ import_react.default.createElement("span", null, cardItem.dishes)), cardItem.duration && /* @__PURE__ */ import_react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.FieldTimeOutlined, null) }, /* @__PURE__ */ import_react.default.createElement("span", null, cardItem.duration))), /* @__PURE__ */ import_react.default.createElement(TableCardInfoRows, { cardItem }))
+    ), cardItem.reserveTime != null && cardItem.reserveTime !== "" && /* @__PURE__ */ import_react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ClockCircleOutlined, null) }, /* @__PURE__ */ import_react.default.createElement("span", null, cardItem.reserveTime))), (status === "dining" || status === "waiting" || status === "billed" || status === "availableSoon") && cardItem.guests != null && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.TeamOutlined, null) }, /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText(`${I18N_FIGMA}.guests-count`).replace(/\{n\}/g, String(cardItem.guests)))), cardItem.dishes && /* @__PURE__ */ import_react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.AuditOutlined, null) }, /* @__PURE__ */ import_react.default.createElement("span", null, cardItem.dishes)), cardItem.duration && /* @__PURE__ */ import_react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.FieldTimeOutlined, null) }, /* @__PURE__ */ import_react.default.createElement("span", null, cardItem.duration))))
   );
 }
 function renderTableKindNoDataPlaceholder(cardItem, shape) {
@@ -325,6 +415,29 @@ function renderTableKindNoDataPlaceholder(cardItem, shape) {
     ) : null
   );
 }
+function ResourceHeaderShell({
+  cardItem,
+  variant
+}) {
+  const status = cardItem.status ?? "available";
+  const borderColor = status === "available" ? FIGMA.gray200 : STATUS_BORDER[status];
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        background: FIGMA.white,
+        border: `4px solid ${borderColor}`,
+        /** 去掉底部边，与下方 TableCardContent 拼合成一张卡片，再由内部 dashed line 分隔上下两段 */
+        borderBottom: "none",
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        flexShrink: 0,
+        boxSizing: "border-box"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(ResourceHeaderBar, { cardItem, variant })
+  );
+}
 function renderFigmaStyleTableCard(cardItem) {
   if (cardItem.isNoDataPlaceholder) {
     return renderTableKindNoDataPlaceholder(cardItem, "rect");
@@ -355,7 +468,22 @@ function renderFigmaStyleTableCard(cardItem) {
         barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
       }
     ),
-    /* @__PURE__ */ import_react.default.createElement(TableCardContent, { cardItem }),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "column",
+          borderRadius: 8,
+          boxShadow: FIGMA.shadowSm,
+          overflow: "hidden"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(ResourceHeaderShell, { cardItem, variant: "rect" }),
+      /* @__PURE__ */ import_react.default.createElement(TableCardContent, { cardItem })
+    ),
     /* @__PURE__ */ import_react.default.createElement(
       CardBars,
       {
@@ -366,6 +494,28 @@ function renderFigmaStyleTableCard(cardItem) {
     )
   );
 }
+function RoundResourceHeaderChip({
+  cardItem
+}) {
+  const status = cardItem.status ?? "available";
+  const borderColor = status === "available" ? FIGMA.gray200 : STATUS_BORDER[status];
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        flexShrink: 0,
+        background: FIGMA.white,
+        border: `2px solid ${borderColor}`,
+        borderRadius: 999,
+        boxShadow: FIGMA.shadowSm,
+        margin: "0 auto 4px",
+        boxSizing: "border-box",
+        maxWidth: "100%"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(ResourceHeaderBar, { cardItem, variant: "round" })
+  );
+}
 function renderFigmaStyleRoundTableCard(cardItem) {
   if (cardItem.isNoDataPlaceholder) {
     return renderTableKindNoDataPlaceholder(cardItem, "circle");
@@ -382,18 +532,13 @@ function renderFigmaStyleRoundTableCard(cardItem) {
         boxSizing: "border-box",
         display: "flex",
         flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
+        alignItems: "stretch",
         gap: 0,
         fontFamily: FIGMA.fontFamily,
-        overflow: "hidden",
-        borderRadius: "50%",
-        border: isAvailable ? `4px solid ${FIGMA.gray200}` : `4px solid ${borderColor}`,
-        background: FIGMA.white,
-        boxShadow: FIGMA.shadowSm,
-        padding: 8
+        overflow: "hidden"
       }
     },
+    /* @__PURE__ */ import_react.default.createElement(RoundResourceHeaderChip, { cardItem }),
     /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
@@ -402,59 +547,33 @@ function renderFigmaStyleRoundTableCard(cardItem) {
           minHeight: 0,
           display: "flex",
           flexDirection: "column",
-          justifyContent: isAvailable ? "flex-start" : "center",
+          justifyContent: "center",
           alignItems: "center",
-          width: "100%",
           overflow: "hidden",
-          gap: 2
+          borderRadius: "50%",
+          border: isAvailable ? `4px solid ${FIGMA.gray200}` : `4px solid ${borderColor}`,
+          background: FIGMA.white,
+          boxShadow: FIGMA.shadowSm,
+          padding: 8
         }
       },
-      isAvailable ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          style: {
-            fontWeight: 600,
-            fontSize: 16,
-            lineHeight: "22px",
-            color: FIGMA.gray700,
-            textAlign: "center"
-          }
-        },
-        cardItem.displayName ?? cardItem.id
-      ), (cardItem.capacity != null || cardItem.area != null && cardItem.area !== "") && /* @__PURE__ */ import_react.default.createElement(
+      /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
           style: {
+            flex: 1,
+            minHeight: 0,
             display: "flex",
             flexDirection: "column",
+            justifyContent: "center",
             alignItems: "center",
-            gap: 2,
-            fontSize: 12,
-            lineHeight: "18px",
-            color: FIGMA.gray700
+            width: "100%",
+            overflow: "hidden",
+            gap: 2
           }
         },
-        cardItem.capacity != null && /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(import_icons.TeamOutlined, { style: { marginRight: 4 } }), import_utils.locales.getText(`${I18N_FIGMA}.capacity-seats`).replace(/\{n\}/g, String(cardItem.capacity))),
-        cardItem.area != null && cardItem.area !== "" && /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(import_icons.EnvironmentOutlined, { style: { marginRight: 4 } }), cardItem.area)
-      )) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          style: {
-            fontWeight: 600,
-            fontSize: 16,
-            lineHeight: "22px",
-            color: FIGMA.gray900,
-            textAlign: "center"
-          }
-        },
-        cardItem.displayName ?? cardItem.id
-      ), status === "reserved" && cardItem.customerName && /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 12, color: FIGMA.gray700, marginTop: 2 } }, cardItem.customerName), (status === "dining" || status === "waiting" || status === "billed") && cardItem.guests != null && /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          style: { fontSize: 12, color: FIGMA.gray700, marginTop: 2 }
-        },
-        import_utils.locales.getText(`${I18N_FIGMA}.guests-count`).replace(/\{n\}/g, String(cardItem.guests))
-      ), (cardItem.capacity != null || cardItem.area != null && cardItem.area !== "") && /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 12, color: FIGMA.gray700, marginTop: 2 } }, cardItem.capacity != null && import_utils.locales.getText(`${I18N_FIGMA}.capacity-seats`).replace(/\{n\}/g, String(cardItem.capacity)), cardItem.capacity != null && cardItem.area && " · ", cardItem.area))
+        isAvailable ? null : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, status === "reserved" && cardItem.customerName && /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 12, color: FIGMA.gray700 } }, cardItem.customerName), status === "reserved" && cardItem.reserveTime && /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 12, color: FIGMA.gray700 } }, cardItem.reserveTime), (status === "dining" || status === "waiting" || status === "billed" || status === "availableSoon") && cardItem.guests != null && /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 12, color: FIGMA.gray700 } }, import_utils.locales.getText(`${I18N_FIGMA}.guests-count`).replace(/\{n\}/g, String(cardItem.guests))))
+      )
     )
   );
 }

package/lib/components/pisellFloorMapLayout/components/FloorMapEditPanel.js

@@ -40,6 +40,7 @@ var import_icons = require("@ant-design/icons");
 var import_antd = require("antd");
 var import_types = require("../types");
 var import_floorMapElementKindUtils = require("../utils/floorMapElementKindUtils");
+var import_floorMapElementNameAsTitle = require("../utils/floorMapElementNameAsTitle");
 var import_FloorMapDataForm = require("./FloorMapDataForm");
 var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
 var import_floorMapCanvasDisplay = require("../utils/floorMapCanvasDisplay");
@@ -98,6 +99,8 @@ function FloorMapEditPanel(props) {
       labelNameStage: import_utils.locales.getText(`${I18N_EP}.label-name-stage`),
       phNameStage: import_utils.locales.getText(`${I18N_EP}.ph-name-stage`),
       phName: import_utils.locales.getText(`${I18N_EP}.ph-name`),
+      labelNameAsTitle: import_utils.locales.getText(`${I18N_EP}.label-name-as-title`),
+      tipNameAsTitle: import_utils.locales.getText(`${I18N_EP}.tip-name-as-title`),
       labelImageUrl: import_utils.locales.getText(`${I18N_EP}.label-image-url`),
       extraImageUrl: import_utils.locales.getText(`${I18N_EP}.extra-image-url`),
       phHttps: import_utils.locales.getText(`${I18N_EP}.ph-https`),
@@ -147,6 +150,7 @@ function FloorMapEditPanel(props) {
   const canvasOptions = config.canvases.filter((c) => c.enabled).sort((a, b) => a.order - b.order);
   const kindConfig = (0, import_floorMapElementKindUtils.getElementKindConfig)(config, sceneElement.elementKind);
   const bindingPolicy = (0, import_floorMapElementKindUtils.resolveDataBindingPolicy)(kindConfig);
+  const kindAllowsNameAsTitle = Boolean(kindConfig == null ? void 0 : kindConfig.nameAsTitleConfigurable);
   const allKeys = Object.keys(dataSources);
   const allowedKeys = ((_c = kindConfig == null ? void 0 : kindConfig.allowedDataSourceKeys) == null ? void 0 : _c.length) ? kindConfig.allowedDataSourceKeys.filter((k) => allKeys.includes(k)) : allKeys;
   const isImageKind = (0, import_floorMapElementKindUtils.isFloorMapImageElementKind)(sceneElement.elementKind);
@@ -162,7 +166,12 @@ function FloorMapEditPanel(props) {
       width: sceneElement.width ?? dw,
       height: sceneElement.height ?? dh,
       canvasId: sceneElement.canvasId,
-      imageUrl: sceneElement.imageUrl ?? ""
+      imageUrl: sceneElement.imageUrl ?? "",
+      /**
+       * 编辑面板「将图元名作为资源标题」勾选项；持久化在 extensions[NAME_AS_TITLE_EXT_KEY]，
+       * UI 仅在 kindConfig.nameAsTitleConfigurable 时渲染。
+       */
+      nameAsTitle: (0, import_floorMapElementNameAsTitle.isElementNameAsTitleEnabled)(sceneElement)
     };
   }, [sceneElement, isImageKind]);
   import_react.default.useEffect(() => {
@@ -196,10 +205,23 @@ function FloorMapEditPanel(props) {
         patch.width = Number.isFinite(w) ? Math.max(20, w) : void 0;
         patch.height = Number.isFinite(h) ? Math.max(20, h) : void 0;
       }
+      if (kindAllowsNameAsTitle) {
+        const enabled = Boolean(values.nameAsTitle) && Boolean(name);
+        patch.extensions = (0, import_floorMapElementNameAsTitle.buildNameAsTitleExtensionsPatch)(
+          sceneElement.extensions,
+          enabled
+        );
+      }
       onUpdate(patch);
       setFormHasUnappliedChanges(false);
     },
-    [onUpdate, isImageKind, layoutLocked]
+    [
+      onUpdate,
+      isImageKind,
+      layoutLocked,
+      kindAllowsNameAsTitle,
+      sceneElement.extensions
+    ]
   );
   const binding = sceneElement.dataBinding;
   const record = binding ? ((_d = dataSources[binding.dataSourceKey]) == null ? void 0 : _d.find(
@@ -418,6 +440,23 @@ function FloorMapEditPanel(props) {
           }
         )
       ),
+      kindAllowsNameAsTitle ? (
+        /**
+         * 仅在 kindConfig.nameAsTitleConfigurable 时渲染。
+         * 业务侧通过 {@link resolveSceneElementDisplayTitle} 读取该偏好，
+         * 决定卡片标题是否覆盖业务字段（如 row.main_field / row.code）。
+         */
+        /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Form.Item,
+          {
+            name: "nameAsTitle",
+            valuePropName: "checked",
+            extra: ep.tipNameAsTitle,
+            style: { marginTop: -4 }
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_antd.Checkbox, null, ep.labelNameAsTitle)
+        )
+      ) : null,
       isImageKind ? /* @__PURE__ */ import_react.default.createElement(
         import_antd.Form.Item,
         {

package/lib/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;