@pisell/materials 1.8.41 → 1.8.43

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.less

@@ -1,3 +1,8 @@
+/* 伪全屏宿主：锁定 body 滚动，避免双滚动条与触摸滑动穿透 */
+body.pisell-floor-map-layout-fullscreen-host {
+  overflow: hidden !important;
+}
+
 .pisell-floor-map-layout {
   position: relative;
   width: 100%;
@@ -5,6 +10,23 @@
   overflow: hidden;
   background: #fafafa;
 
+  /**
+   * 伪全屏：撑满视口，替代浏览器 Fullscreen API；与资源墙大屏（pisell-resource-wall-fixed-viewport）
+   * 一致体验。z-index 故意高于常见弹层但低于 antd Modal 默认 1000，必要时可在宿主侧覆盖。
+   */
+  &--pseudo-fullscreen {
+    position: fixed !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    z-index: 2000;
+    background: #fff;
+  }
+
   &-loading,
   &-save-error {
     position: absolute;
@@ -49,6 +71,41 @@
     z-index: 10;
   }
 
+  &-edit-panel-wrap--phone-drawer {
+    /** 覆盖桌面端 &-edit-panel-wrap 的 absolute 居中，避免抽屉内排版错位 */
+    position: relative;
+    top: auto;
+    right: auto;
+    transform: none;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  /**
+   * 手机编辑态：左侧图元栏悬浮，不占 flex，画布始终铺满下层。
+   */
+  &-edit-layout--phone-toolbar {
+    position: relative;
+    flex: 1 1 0;
+    display: block;
+    min-height: 0;
+    /** 保证左侧悬浮抽屉的 absolute 参照高度为整块地图区（否则仅有绝对子项时高度链可能塌缩） */
+    height: 100%;
+    overflow: hidden;
+
+    > .pisell-floor-map-layout-map-area--phone-fill {
+      position: absolute;
+      inset: 0;
+      flex: none !important;
+      width: auto !important;
+      height: auto !important;
+    }
+  }
+
   &-place-overlay {
     position: absolute;
     left: 0;
@@ -108,3 +165,8 @@
     }
   }
 }
+
+/** 右侧属性 antd Drawer 根（portal body），顶栏安全区 */
+.pisell-floor-map-layout-edit-panel-phone-drawer-root {
+  padding-top: env(safe-area-inset-top, 0px);
+}

package/lib/components/pisellFloorMapLayout/appearance/floorMapAppearance.d.ts

@@ -0,0 +1,4 @@
+//#region src/components/pisellFloorMapLayout/appearance/floorMapAppearance.d.ts
+type FloorMapAppearanceMode = 'light' | 'dark';
+//#endregion
+export { FloorMapAppearanceMode };

package/lib/components/pisellFloorMapLayout/appearance/floorMapAppearance.js

@@ -0,0 +1,22 @@
+const require_objectSpread2 = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
+//#region src/components/pisellFloorMapLayout/appearance/floorMapAppearance.ts
+const FLOOR_MAP_APPEARANCE_TOKENS = {
+	light: {
+		mode: "light",
+		fallbackCanvasBackgroundColor: "#F2F4F7"
+	},
+	dark: {
+		mode: "dark",
+		fallbackCanvasBackgroundColor: "#31353d"
+	}
+};
+/**
+* 按外观模式返回 floorMap 画布背景 token。
+* 当前仅承载通用画布背景兜底色，不包含业务壳层颜色；
+* 渲染层应先尊重显式 `mapLayer.backgroundColor`，再回退到这里的 token。
+*/
+function getFloorMapAppearanceTokens(mode) {
+	return require_objectSpread2._objectSpread2({}, FLOOR_MAP_APPEARANCE_TOKENS[mode]);
+}
+//#endregion
+exports.getFloorMapAppearanceTokens = getFloorMapAppearanceTokens;

package/lib/components/pisellFloorMapLayout/components/CanvasTabs.js

@@ -141,12 +141,27 @@ function CanvasTabs(props) {
 		onCancel: () => setRenameModal(null),
 		okText: _pisell_utils.locales.getText(I18N_RENAME_MODAL_OK),
 		cancelText: _pisell_utils.locales.getText(I18N_RENAME_MODAL_CANCEL),
-		destroyOnClose: true
-	}, renameModal ? /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-translation-modal" }, languageList.map((d) => {
+		destroyOnClose: true,
+		wrapClassName: `${PREFIX}-canvas-tabs-rename-modal-wrap`,
+		styles: {
+			header: {
+				margin: 0,
+				padding: "10px 14px 6px"
+			},
+			body: { padding: "8px 14px 10px" },
+			footer: {
+				margin: 0,
+				padding: "8px 14px 10px"
+			}
+		}
+	}, renameModal ? /* @__PURE__ */ react.default.createElement(antd.Form, {
+		layout: "vertical",
+		className: `${PREFIX}-canvas-tabs-rename-form`,
+		requiredMark: false
+	}, languageList.map((d) => {
 		var _renameModal$value;
 		return /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
 			label: d.text,
-			labelCol: { span: 24 },
 			key: d.code
 		}, /* @__PURE__ */ react.default.createElement(antd.Input, {
 			value: (_renameModal$value = renameModal.value[d.code]) !== null && _renameModal$value !== void 0 ? _renameModal$value : "",

package/lib/components/pisellFloorMapLayout/components/CanvasTabs.less

@@ -13,6 +13,7 @@
   border-bottom: none;
 
   &-tab {
+    flex-shrink: 0;
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -158,6 +159,7 @@
   }
 
   &-add {
+    flex-shrink: 0;
     padding: 7px 12px;
     font-size: 13px;
     font-weight: 500;
@@ -187,3 +189,24 @@
     color: #8c8c8c;
   }
 }
+
+/**
+ * 画布重命名弹窗：Modal 使用 wrapClassName 便于覆盖 portaled 节点；
+ * 与 `Modal.styles` 互补（宿主若映射 ant 类名可在此追加 pisell-lowcode-*）。
+ */
+.pisell-floor-map-layout-canvas-tabs-rename-modal-wrap {
+  /** 仅收紧项间距与 label 与控件间距，不改 Input 尺寸（不使用 Form size="small"） */
+  .pisell-floor-map-layout-canvas-tabs-rename-form {
+    .ant-form-item {
+      margin-bottom: 8px;
+    }
+
+    .ant-form-item:last-child {
+      margin-bottom: 0;
+    }
+
+    .ant-form-item-label {
+      padding-bottom: 0;
+    }
+  }
+}

package/lib/components/pisellFloorMapLayout/components/EditableItemLayer.js

@@ -241,7 +241,7 @@ function EditableItemLayer(props) {
 				}, shapeStyle), wrapperStyle), {}, { zIndex: isSelected ? SELECTED_ITEM_STACK_Z + ((_item$zIndex2 = item.zIndex) !== null && _item$zIndex2 !== void 0 ? _item$zIndex2 : 0) : baseZ }),
 				onPointerDown: (e) => handlePointerDown(e, item, index),
 				onClick: (e) => handleItemClick(e, item)
-			}, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-editable-item-inner` }, renderItem(item, index)), isSelected && !isSceneLayoutTransformLocked(merged) && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, [
+			}, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-editable-item-inner` }, renderItem(item, index, { viewportScale: scale })), isSelected && !isSceneLayoutTransformLocked(merged) && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, [
 				"nw",
 				"n",
 				"ne",
@@ -273,7 +273,8 @@ function EditableItemLayer(props) {
 		handleItemClick,
 		handleResizePointerDown,
 		getMergedItemWrapperStyle,
-		editQuickBar
+		editQuickBar,
+		scale
 	]);
 	return /* @__PURE__ */ react.default.createElement("div", {
 		ref: contentRef,

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

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

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

@@ -1,4 +1,5 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_floorMapElementNameAsTitle = require("../utils/floorMapElementNameAsTitle.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _pisell_utils = require("@pisell/utils");
@@ -14,6 +15,7 @@ const I18N_FIGMA = "pisell-floor-map-layout.figma-card";
 /** Figma 设计 token（Pisell 2.0 Component Library） */
 const FIGMA = {
 	white: "#FFFFFF",
+	gray100: "#F2F4F7",
 	gray200: "#EAECF0",
 	gray400: "#98A2B3",
 	gray700: "#344054",
@@ -35,6 +37,26 @@ const STATUS_BORDER = {
 	billed: FIGMA.billed,
 	availableSoon: FIGMA.availableSoon
 };
+/**
+* 状态 tag 的浅色背景 / 深色文字配对。可用态走中性灰；其它态用对应状态色的浅版底 + 深版字，
+* 保证小字号下仍有足够对比度（≥ 4.5:1）。
+*/
+const STATUS_TAG_BG = {
+	available: "#F2F4F7",
+	reserved: "#F4ECFB",
+	waiting: "#FEF0E0",
+	dining: "#E6F4FF",
+	billed: "#E8F8EA",
+	availableSoon: "#FEE4E2"
+};
+const STATUS_TAG_FG = {
+	available: "#475467",
+	reserved: "#7B3CCB",
+	waiting: "#C4690D",
+	dining: "#0E6FD0",
+	billed: "#347D3A",
+	availableSoon: "#B42318"
+};
 const STATUS_MAP = {
 	available: "available",
 	reserved: "reserved",
@@ -78,7 +100,11 @@ function getFigmaTableCardFromMerged(item, dataSources) {
 	const status = rawStatus && STATUS_MAP[rawStatus] || "available";
 	return {
 		id: displayId,
-		displayName: record === null || record === void 0 ? void 0 : record.name,
+		displayName: require_floorMapElementNameAsTitle.resolveSceneElementDisplayTitle({
+			sceneElement: el,
+			recordTitle: (record === null || record === void 0 ? void 0 : record.name) != null ? String(record.name) : void 0,
+			fallback: kindLabel
+		}) || void 0,
 		status,
 		customerName: record === null || record === void 0 ? void 0 : record.customerName,
 		reserveTime: record === null || record === void 0 ? void 0 : record.reserveTime,
@@ -135,59 +161,126 @@ function FigmaCardRow({ icon, children }) {
 		fontSize: 14
 	} }, icon), /* @__PURE__ */ react.default.createElement("span", { style: { flexShrink: 0 } }, children));
 }
-/** 人数、区域等通用信息行（与表格列绑定：可坐人数、区域） */
-function TableCardInfoRows({ cardItem }) {
+/**
+* 「资源信息」标题栏：把图元自身的属性（桌名 / 可坐人数 / 区域 / 状态）从卡片正文里抽出来
+* 单独占一栏置顶，正文专心展示当下的预订 / 用餐 / 结账信息。
+*
+* 布局：
+*   ┌─────────────────────────────────────┐
+*   │  桌名 (粗体)                  [状态 tag] │
+*   │  [人数] N · [区域] 区                    │
+*   └─────────────────────────────────────┘
+*
+* - 没有任何资源字段时返回 null，避免空标题栏占位；
+* - 状态 tag 用浅色底 + 深色字（status 配色对），保持小字号对比度；
+* - capacity · area 行仅在两者至少有一项时渲染。
+*/
+function ResourceHeaderBar({ cardItem, variant }) {
+	var _cardItem$displayName, _cardItem$status;
 	const hasCapacity = cardItem.capacity != null;
 	const hasArea = cardItem.area != null && cardItem.area !== "";
-	if (!hasCapacity && !hasArea) return null;
-	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, hasCapacity && /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.TeamOutlined, null) }, /* @__PURE__ */ react.default.createElement("span", null, _pisell_utils.locales.getText(`${I18N_FIGMA}.capacity-seats`).replace(/\{n\}/g, String(cardItem.capacity)))), hasArea && /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.EnvironmentOutlined, null) }, /* @__PURE__ */ react.default.createElement("span", null, cardItem.area)));
+	const titleText = (_cardItem$displayName = cardItem.displayName) !== null && _cardItem$displayName !== void 0 ? _cardItem$displayName : cardItem.id;
+	const hasTitle = titleText != null && String(titleText).trim() !== "";
+	const status = (_cardItem$status = cardItem.status) !== null && _cardItem$status !== void 0 ? _cardItem$status : "available";
+	const statusLabel = _pisell_utils.locales.getText(`${I18N_FIGMA}.status-${status}`);
+	if (!hasTitle && !hasCapacity && !hasArea) return null;
+	const metaEntries = [];
+	if (hasCapacity) metaEntries.push({
+		key: "capacity",
+		icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.TeamOutlined, { style: { marginRight: 3 } }),
+		text: _pisell_utils.locales.getText(`${I18N_FIGMA}.capacity-seats`).replace(/\{n\}/g, String(cardItem.capacity))
+	});
+	if (hasArea) metaEntries.push({
+		key: "area",
+		icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.EnvironmentOutlined, { style: { marginRight: 3 } }),
+		text: String(cardItem.area)
+	});
+	const isRound = variant === "round";
+	return /* @__PURE__ */ react.default.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		padding: isRound ? "4px 8px 6px" : "6px 8px",
+		borderBottom: isRound ? "none" : `1px dashed ${FIGMA.gray200}`,
+		flexShrink: 0,
+		fontFamily: FIGMA.fontFamily
+	} }, /* @__PURE__ */ react.default.createElement("div", { style: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		minHeight: 18
+	} }, hasTitle ? /* @__PURE__ */ 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__ */ react.default.createElement("span", { style: { flex: "1 1 auto" } }), /* @__PURE__ */ react.default.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: .2
+	} }, statusLabel)), metaEntries.length > 0 ? /* @__PURE__ */ react.default.createElement("span", { style: {
+		fontSize: 11,
+		lineHeight: "16px",
+		color: FIGMA.gray400,
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		display: "block",
+		textAlign: isRound ? "center" : "left"
+	} }, metaEntries.map((entry, index) => /* @__PURE__ */ react.default.createElement(react.default.Fragment, { key: entry.key }, index === 0 ? null : /* @__PURE__ */ react.default.createElement("span", { style: { margin: "0 4px" } }, "·"), entry.icon, entry.text))) : null);
 }
-/** 方桌卡片内容区（与 renderFigmaStyleTableCard 共用，展示桌号/状态/人数/区域） */
+/**
+* 方桌内容区（不含资源信息——桌名 / 可坐人数 / 区域已上移到 ResourceHeaderBar）。
+*
+* - available：正文留空（视觉上是一个浅灰边框白底），所有"我是哪张桌"已在标题栏交代；
+* - reserved：客人 + 预订时间；
+* - dining / waiting / billed / availableSoon：当前用餐人数 + 菜品 + 用餐时长。
+*/
 function TableCardContent({ cardItem }) {
-	var _cardItem$status, _cardItem$displayName, _cardItem$displayName2;
-	const status = (_cardItem$status = cardItem.status) !== null && _cardItem$status !== void 0 ? _cardItem$status : "available";
+	var _cardItem$status2;
+	const status = (_cardItem$status2 = cardItem.status) !== null && _cardItem$status2 !== void 0 ? _cardItem$status2 : "available";
 	const borderColor = STATUS_BORDER[status];
 	const isAvailable = status === "available";
 	return /* @__PURE__ */ react.default.createElement("div", { style: {
 		flex: 1,
 		minHeight: 0,
-		padding: 8,
+		padding: 4,
 		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
-	} }, isAvailable ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.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.default.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.default.createElement(TableCardInfoRows, { cardItem }))) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.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.default.createElement(react.default.Fragment, null, cardItem.customerName != null && cardItem.customerName !== "" && /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(antd.Avatar, {
+	} }, isAvailable ? null : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, status === "reserved" && (cardItem.customerName != null && cardItem.customerName !== "" || cardItem.reserveTime != null && cardItem.reserveTime !== "") && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, cardItem.customerName != null && cardItem.customerName !== "" && /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(antd.Avatar, {
 		size: 16,
 		icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.UserOutlined, null),
 		style: { backgroundColor: FIGMA.gray200 }
-	}) }, /* @__PURE__ */ react.default.createElement("span", null, cardItem.customerName)), cardItem.reserveTime != null && cardItem.reserveTime !== "" && /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.ClockCircleOutlined, null) }, /* @__PURE__ */ react.default.createElement("span", null, cardItem.reserveTime))), (status === "dining" || status === "waiting" || status === "billed" || status === "availableSoon") && cardItem.guests != null && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.TeamOutlined, null) }, /* @__PURE__ */ react.default.createElement("span", null, _pisell_utils.locales.getText(`${I18N_FIGMA}.guests-count`).replace(/\{n\}/g, String(cardItem.guests)))), cardItem.dishes && /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.AuditOutlined, null) }, /* @__PURE__ */ react.default.createElement("span", null, cardItem.dishes)), cardItem.duration && /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.FieldTimeOutlined, null) }, /* @__PURE__ */ react.default.createElement("span", null, cardItem.duration))), /* @__PURE__ */ react.default.createElement(TableCardInfoRows, { cardItem })));
+	}) }, /* @__PURE__ */ react.default.createElement("span", null, cardItem.customerName)), cardItem.reserveTime != null && cardItem.reserveTime !== "" && /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.ClockCircleOutlined, null) }, /* @__PURE__ */ react.default.createElement("span", null, cardItem.reserveTime))), (status === "dining" || status === "waiting" || status === "billed" || status === "availableSoon") && cardItem.guests != null && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.TeamOutlined, null) }, /* @__PURE__ */ react.default.createElement("span", null, _pisell_utils.locales.getText(`${I18N_FIGMA}.guests-count`).replace(/\{n\}/g, String(cardItem.guests)))), cardItem.dishes && /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.AuditOutlined, null) }, /* @__PURE__ */ react.default.createElement("span", null, cardItem.dishes)), cardItem.duration && /* @__PURE__ */ react.default.createElement(FigmaCardRow, { icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.FieldTimeOutlined, null) }, /* @__PURE__ */ react.default.createElement("span", null, cardItem.duration)))));
 }
 /** 无数据占位：与蘸料摆台 Story 中占位卡片视觉对齐（虚线框 + #fafafa） */
 function renderTableKindNoDataPlaceholder(cardItem, shape) {
@@ -226,11 +319,34 @@ function renderTableKindNoDataPlaceholder(cardItem, shape) {
 		textAlign: shape === "circle" ? "center" : void 0
 	} }, hint) : null);
 }
-/** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框） */
+/**
+* 资源信息栏的"独立 chip"包裹：保持与下方卡片正文相同的状态色边框，但
+* 视觉上紧贴在卡片顶端，形成 [资源 chip][正文卡片] 的两段式结构。
+*
+* 边框策略：与正文 4px 状态色等宽，上面圆角、底部直边、底部 0 边以"贴合"正文。
+*/
+function ResourceHeaderShell({ cardItem, variant }) {
+	var _cardItem$status3;
+	const status = (_cardItem$status3 = cardItem.status) !== null && _cardItem$status3 !== void 0 ? _cardItem$status3 : "available";
+	const borderColor = status === "available" ? FIGMA.gray200 : STATUS_BORDER[status];
+	return /* @__PURE__ */ react.default.createElement("div", { style: {
+		background: FIGMA.white,
+		border: `4px solid ${borderColor}`,
+		borderBottom: "none",
+		borderTopLeftRadius: 8,
+		borderTopRightRadius: 8,
+		flexShrink: 0,
+		boxSizing: "border-box"
+	} }, /* @__PURE__ */ react.default.createElement(ResourceHeaderBar, {
+		cardItem,
+		variant
+	}));
+}
+/** 渲染 Figma 样式的方桌卡片（上下小条 + 资源信息标题栏 + 白底卡片 + 状态色边框） */
 function renderFigmaStyleTableCard(cardItem) {
-	var _cardItem$status2;
+	var _cardItem$status4;
 	if (cardItem.isNoDataPlaceholder) return renderTableKindNoDataPlaceholder(cardItem, "rect");
-	const status = (_cardItem$status2 = cardItem.status) !== null && _cardItem$status2 !== void 0 ? _cardItem$status2 : "available";
+	const status = (_cardItem$status4 = cardItem.status) !== null && _cardItem$status4 !== void 0 ? _cardItem$status4 : "available";
 	const borderColor = STATUS_BORDER[status];
 	const isAvailable = status === "available";
 	return /* @__PURE__ */ react.default.createElement("div", { style: {
@@ -247,17 +363,52 @@ function renderFigmaStyleTableCard(cardItem) {
 		count: getBarCountFromItemId(cardItem.id),
 		position: "top",
 		barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
-	}), /* @__PURE__ */ react.default.createElement(TableCardContent, { cardItem }), /* @__PURE__ */ react.default.createElement(CardBars, {
+	}), /* @__PURE__ */ react.default.createElement("div", { style: {
+		flex: 1,
+		minHeight: 0,
+		display: "flex",
+		flexDirection: "column",
+		borderRadius: 8,
+		boxShadow: FIGMA.shadowSm,
+		overflow: "hidden"
+	} }, /* @__PURE__ */ react.default.createElement(ResourceHeaderShell, {
+		cardItem,
+		variant: "rect"
+	}), /* @__PURE__ */ react.default.createElement(TableCardContent, { cardItem })), /* @__PURE__ */ react.default.createElement(CardBars, {
 		count: getBarCountFromItemId(cardItem.id),
 		position: "bottom",
 		barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
 	}));
 }
-/** 渲染 Figma 样式的圆桌卡片（圆形轮廓，展示桌号/状态/人数/区域） */
+/**
+* 圆桌专用：独立 pill 形资源信息标题栏，悬挂在圆形之上。
+*
+* 圆形不能在顶部"切一刀"放标题栏，所以做成独立 chip：保持圆形主体不被破坏，
+* 同时把"我是哪张桌、能坐几人、属于哪个区"这些资源属性单独展示在最上方。
+*/
+function RoundResourceHeaderChip({ cardItem }) {
+	var _cardItem$status5;
+	const status = (_cardItem$status5 = cardItem.status) !== null && _cardItem$status5 !== void 0 ? _cardItem$status5 : "available";
+	const borderColor = status === "available" ? FIGMA.gray200 : STATUS_BORDER[status];
+	return /* @__PURE__ */ 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__ */ react.default.createElement(ResourceHeaderBar, {
+		cardItem,
+		variant: "round"
+	}));
+}
+/** 渲染 Figma 样式的圆桌卡片（顶部资源信息 chip + 圆形主体，圆形主体只展示状态相关内容） */
 function renderFigmaStyleRoundTableCard(cardItem) {
-	var _cardItem$status3, _cardItem$displayName3, _cardItem$displayName4;
+	var _cardItem$status6;
 	if (cardItem.isNoDataPlaceholder) return renderTableKindNoDataPlaceholder(cardItem, "circle");
-	const status = (_cardItem$status3 = cardItem.status) !== null && _cardItem$status3 !== void 0 ? _cardItem$status3 : "available";
+	const status = (_cardItem$status6 = cardItem.status) !== null && _cardItem$status6 !== void 0 ? _cardItem$status6 : "available";
 	const borderColor = STATUS_BORDER[status];
 	const isAvailable = status === "available";
 	return /* @__PURE__ */ react.default.createElement("div", { style: {
@@ -266,10 +417,17 @@ 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.default.createElement(RoundResourceHeaderChip, { cardItem }), /* @__PURE__ */ react.default.createElement("div", { style: {
+		flex: 1,
+		minHeight: 0,
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
 		overflow: "hidden",
 		borderRadius: "50%",
 		border: isAvailable ? `4px solid ${FIGMA.gray200}` : `4px solid ${borderColor}`,
@@ -281,44 +439,21 @@ 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.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.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.default.createElement("div", { style: {
-		display: "flex",
-		flexDirection: "column",
-		alignItems: "center",
-		gap: 2,
+	} }, isAvailable ? null : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, status === "reserved" && cardItem.customerName && /* @__PURE__ */ react.default.createElement("div", { style: {
 		fontSize: 12,
-		lineHeight: "18px",
 		color: FIGMA.gray700
-	} }, cardItem.capacity != null && /* @__PURE__ */ react.default.createElement("span", null, /* @__PURE__ */ react.default.createElement(_ant_design_icons.TeamOutlined, { style: { marginRight: 4 } }), _pisell_utils.locales.getText(`${I18N_FIGMA}.capacity-seats`).replace(/\{n\}/g, String(cardItem.capacity))), cardItem.area != null && cardItem.area !== "" && /* @__PURE__ */ react.default.createElement("span", null, /* @__PURE__ */ react.default.createElement(_ant_design_icons.EnvironmentOutlined, { style: { marginRight: 4 } }), cardItem.area))) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.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.default.createElement("div", { style: {
+	} }, cardItem.customerName), status === "reserved" && cardItem.reserveTime && /* @__PURE__ */ react.default.createElement("div", { style: {
 		fontSize: 12,
-		color: FIGMA.gray700,
-		marginTop: 2
-	} }, cardItem.customerName), (status === "dining" || status === "waiting" || status === "billed") && cardItem.guests != null && /* @__PURE__ */ react.default.createElement("div", { style: {
-		fontSize: 12,
-		color: FIGMA.gray700,
-		marginTop: 2
-	} }, _pisell_utils.locales.getText(`${I18N_FIGMA}.guests-count`).replace(/\{n\}/g, String(cardItem.guests))), (cardItem.capacity != null || cardItem.area != null && cardItem.area !== "") && /* @__PURE__ */ react.default.createElement("div", { style: {
+		color: FIGMA.gray700
+	} }, cardItem.reserveTime), (status === "dining" || status === "waiting" || status === "billed" || status === "availableSoon") && cardItem.guests != null && /* @__PURE__ */ react.default.createElement("div", { style: {
 		fontSize: 12,
-		color: FIGMA.gray700,
-		marginTop: 2
-	} }, cardItem.capacity != null && _pisell_utils.locales.getText(`${I18N_FIGMA}.capacity-seats`).replace(/\{n\}/g, String(cardItem.capacity)), cardItem.capacity != null && cardItem.area && " · ", cardItem.area))));
+		color: FIGMA.gray700
+	} }, _pisell_utils.locales.getText(`${I18N_FIGMA}.guests-count`).replace(/\{n\}/g, String(cardItem.guests)))))));
 }
 /** 返回用于 renderItemByKind.table 的渲染函数（方桌） */
 function getRenderItemByKindTable(dataSources) {

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

@@ -0,0 +1,11 @@
+import { FloorMapBuiltinShapeRenderProps } from "../utils/floorMapBuiltinShapes.js";
+import React from "react";
+
+//#region src/components/pisellFloorMapLayout/components/FloorMapBuiltinShapeElement.d.ts
+interface FloorMapBuiltinShapeElementProps extends FloorMapBuiltinShapeRenderProps {
+  builtinShapeKey?: string;
+  name?: string;
+}
+declare function FloorMapBuiltinShapeElement(props: FloorMapBuiltinShapeElementProps): React.JSX.Element;
+//#endregion
+export { FloorMapBuiltinShapeElement };