@pisell/materials 1.8.38 → 1.8.41

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

@@ -1,5 +1,4 @@
 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");
@@ -15,7 +14,6 @@ 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",
@@ -37,26 +35,6 @@ 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",
@@ -100,11 +78,7 @@ function getFigmaTableCardFromMerged(item, dataSources) {
 	const status = rawStatus && STATUS_MAP[rawStatus] || "available";
 	return {
 		id: displayId,
-		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,
+		displayName: record === null || record === void 0 ? void 0 : record.name,
 		status,
 		customerName: record === null || record === void 0 ? void 0 : record.customerName,
 		reserveTime: record === null || record === void 0 ? void 0 : record.reserveTime,
@@ -161,126 +135,59 @@ function FigmaCardRow({ icon, children }) {
 		fontSize: 14
 	} }, icon), /* @__PURE__ */ react.default.createElement("span", { style: { flexShrink: 0 } }, children));
 }
-/**
-* 「资源信息」标题栏：把图元自身的属性（桌名 / 可坐人数 / 区域 / 状态）从卡片正文里抽出来
-* 单独占一栏置顶，正文专心展示当下的预订 / 用餐 / 结账信息。
-*
-* 布局：
-*   ┌─────────────────────────────────────┐
-*   │  桌名 (粗体)                  [状态 tag] │
-*   │  [人数] N · [区域] 区                    │
-*   └─────────────────────────────────────┘
-*
-* - 没有任何资源字段时返回 null，避免空标题栏占位；
-* - 状态 tag 用浅色底 + 深色字（status 配色对），保持小字号对比度；
-* - capacity · area 行仅在两者至少有一项时渲染。
-*/
-function ResourceHeaderBar({ cardItem, variant }) {
-	var _cardItem$displayName, _cardItem$status;
+/** 人数、区域等通用信息行（与表格列绑定：可坐人数、区域） */
+function TableCardInfoRows({ cardItem }) {
 	const hasCapacity = cardItem.capacity != null;
 	const hasArea = cardItem.area != 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);
+	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)));
 }
-/**
-* 方桌内容区（不含资源信息——桌名 / 可坐人数 / 区域已上移到 ResourceHeaderBar）。
-*
-* - available：正文留空（视觉上是一个浅灰边框白底），所有"我是哪张桌"已在标题栏交代；
-* - reserved：客人 + 预订时间；
-* - dining / waiting / billed / availableSoon：当前用餐人数 + 菜品 + 用餐时长。
-*/
+/** 方桌卡片内容区（与 renderFigmaStyleTableCard 共用，展示桌号/状态/人数/区域） */
 function TableCardContent({ cardItem }) {
-	var _cardItem$status2;
-	const status = (_cardItem$status2 = cardItem.status) !== null && _cardItem$status2 !== void 0 ? _cardItem$status2 : "available";
+	var _cardItem$status, _cardItem$displayName, _cardItem$displayName2;
+	const status = (_cardItem$status = cardItem.status) !== null && _cardItem$status !== void 0 ? _cardItem$status : "available";
 	const borderColor = STATUS_BORDER[status];
 	const isAvailable = status === "available";
 	return /* @__PURE__ */ react.default.createElement("div", { style: {
 		flex: 1,
 		minHeight: 0,
-		padding: 4,
+		padding: 8,
 		boxSizing: "border-box",
 		background: FIGMA.white,
 		border: isAvailable ? `4px solid ${FIGMA.gray200}` : `4px solid ${borderColor}`,
-		borderTopLeftRadius: 0,
-		borderTopRightRadius: 0,
-		borderBottomLeftRadius: 8,
-		borderBottomRightRadius: 8,
+		borderRadius: 8,
+		boxShadow: FIGMA.shadowSm,
 		display: "flex",
 		flexDirection: "column",
-		justifyContent: "center",
+		justifyContent: isAvailable ? "flex-start" : "center",
 		alignItems: isAvailable ? "stretch" : "center",
 		gap: 4
-	} }, 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, {
+	} }, isAvailable ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { style: {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		minHeight: 0,
+		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, {
 		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("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 })));
 }
 /** 无数据占位：与蘸料摆台 Story 中占位卡片视觉对齐（虚线框 + #fafafa） */
 function renderTableKindNoDataPlaceholder(cardItem, shape) {
@@ -319,34 +226,11 @@ function renderTableKindNoDataPlaceholder(cardItem, shape) {
 		textAlign: shape === "circle" ? "center" : void 0
 	} }, hint) : null);
 }
-/**
-* 资源信息栏的"独立 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 样式的方桌卡片（上下小条 + 资源信息标题栏 + 白底卡片 + 状态色边框） */
+/** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框） */
 function renderFigmaStyleTableCard(cardItem) {
-	var _cardItem$status4;
+	var _cardItem$status2;
 	if (cardItem.isNoDataPlaceholder) return renderTableKindNoDataPlaceholder(cardItem, "rect");
-	const status = (_cardItem$status4 = cardItem.status) !== null && _cardItem$status4 !== void 0 ? _cardItem$status4 : "available";
+	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: {
@@ -363,52 +247,17 @@ function renderFigmaStyleTableCard(cardItem) {
 		count: getBarCountFromItemId(cardItem.id),
 		position: "top",
 		barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
-	}), /* @__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, {
+	}), /* @__PURE__ */ react.default.createElement(TableCardContent, { cardItem }), /* @__PURE__ */ react.default.createElement(CardBars, {
 		count: getBarCountFromItemId(cardItem.id),
 		position: "bottom",
 		barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
 	}));
 }
-/**
-* 圆桌专用：独立 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 + 圆形主体，圆形主体只展示状态相关内容） */
+/** 渲染 Figma 样式的圆桌卡片（圆形轮廓，展示桌号/状态/人数/区域） */
 function renderFigmaStyleRoundTableCard(cardItem) {
-	var _cardItem$status6;
+	var _cardItem$status3, _cardItem$displayName3, _cardItem$displayName4;
 	if (cardItem.isNoDataPlaceholder) return renderTableKindNoDataPlaceholder(cardItem, "circle");
-	const status = (_cardItem$status6 = cardItem.status) !== null && _cardItem$status6 !== void 0 ? _cardItem$status6 : "available";
+	const status = (_cardItem$status3 = cardItem.status) !== null && _cardItem$status3 !== void 0 ? _cardItem$status3 : "available";
 	const borderColor = STATUS_BORDER[status];
 	const isAvailable = status === "available";
 	return /* @__PURE__ */ react.default.createElement("div", { style: {
@@ -417,17 +266,10 @@ function renderFigmaStyleRoundTableCard(cardItem) {
 		boxSizing: "border-box",
 		display: "flex",
 		flexDirection: "column",
-		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",
+		gap: 0,
+		fontFamily: FIGMA.fontFamily,
 		overflow: "hidden",
 		borderRadius: "50%",
 		border: isAvailable ? `4px solid ${FIGMA.gray200}` : `4px solid ${borderColor}`,
@@ -439,21 +281,44 @@ function renderFigmaStyleRoundTableCard(cardItem) {
 		minHeight: 0,
 		display: "flex",
 		flexDirection: "column",
-		justifyContent: "center",
+		justifyContent: isAvailable ? "flex-start" : "center",
 		alignItems: "center",
 		width: "100%",
 		overflow: "hidden",
 		gap: 2
-	} }, isAvailable ? null : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, status === "reserved" && cardItem.customerName && /* @__PURE__ */ react.default.createElement("div", { style: {
+	} }, 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,
 		fontSize: 12,
+		lineHeight: "18px",
 		color: FIGMA.gray700
-	} }, cardItem.customerName), status === "reserved" && cardItem.reserveTime && /* @__PURE__ */ react.default.createElement("div", { style: {
+	} }, 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: {
 		fontSize: 12,
-		color: FIGMA.gray700
-	} }, cardItem.reserveTime), (status === "dining" || status === "waiting" || status === "billed" || status === "availableSoon") && cardItem.guests != null && /* @__PURE__ */ react.default.createElement("div", { style: {
+		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
-	} }, _pisell_utils.locales.getText(`${I18N_FIGMA}.guests-count`).replace(/\{n\}/g, String(cardItem.guests)))))));
+		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: {
+		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))));
 }
 /** 返回用于 renderItemByKind.table 的渲染函数（方桌） */
 function getRenderItemByKindTable(dataSources) {

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

@@ -4,7 +4,6 @@ const require_floorMapElementKindUtils = require("../utils/floorMapElementKindUt
 const require_floorMapDataRecordLabel = require("../utils/floorMapDataRecordLabel.js");
 const require_useEngineContext = require("../../../hooks/useEngineContext.js");
 const require_floorMapCanvasDisplay = require("../utils/floorMapCanvasDisplay.js");
-const require_floorMapElementNameAsTitle = require("../utils/floorMapElementNameAsTitle.js");
 const require_FloorMapDataForm = require("./FloorMapDataForm.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
@@ -51,8 +50,6 @@ function FloorMapEditPanel(props) {
 		labelNameStage: _pisell_utils.locales.getText(`${I18N_EP}.label-name-stage`),
 		phNameStage: _pisell_utils.locales.getText(`${I18N_EP}.ph-name-stage`),
 		phName: _pisell_utils.locales.getText(`${I18N_EP}.ph-name`),
-		labelNameAsTitle: _pisell_utils.locales.getText(`${I18N_EP}.label-name-as-title`),
-		tipNameAsTitle: _pisell_utils.locales.getText(`${I18N_EP}.tip-name-as-title`),
 		labelImageUrl: _pisell_utils.locales.getText(`${I18N_EP}.label-image-url`),
 		extraImageUrl: _pisell_utils.locales.getText(`${I18N_EP}.extra-image-url`),
 		phHttps: _pisell_utils.locales.getText(`${I18N_EP}.ph-https`),
@@ -91,11 +88,6 @@ function FloorMapEditPanel(props) {
 	const canvasOptions = config.canvases.filter((c) => c.enabled).sort((a, b) => a.order - b.order);
 	const kindConfig = require_floorMapElementKindUtils.getElementKindConfig(config, sceneElement.elementKind);
 	const bindingPolicy = require_floorMapElementKindUtils.resolveDataBindingPolicy(kindConfig);
-	/**
-	* 是否在编辑面板渲染「将图元名作为资源标题」勾选项，由 kindConfig 显式声明；
-	* 未声明的 kind（含将来新增）保持现状不出现该项。
-	*/
-	const kindAllowsNameAsTitle = Boolean(kindConfig === null || kindConfig === void 0 ? void 0 : kindConfig.nameAsTitleConfigurable);
 	const allKeys = Object.keys(dataSources);
 	const allowedKeys = (kindConfig === null || kindConfig === void 0 || (_kindConfig$allowedDa = kindConfig.allowedDataSourceKeys) === null || _kindConfig$allowedDa === void 0 ? void 0 : _kindConfig$allowedDa.length) ? kindConfig.allowedDataSourceKeys.filter((k) => allKeys.includes(k)) : allKeys;
 	/** 与 RecordBoard Story 图片图元一致：`floorMapImage` */
@@ -113,8 +105,7 @@ 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 : "",
-			nameAsTitle: require_floorMapElementNameAsTitle.isElementNameAsTitleEnabled(sceneElement)
+			imageUrl: (_sceneElement$imageUr = sceneElement.imageUrl) !== null && _sceneElement$imageUr !== void 0 ? _sceneElement$imageUr : ""
 		};
 	}, [sceneElement, isImageKind]);
 	react.default.useEffect(() => {
@@ -133,9 +124,8 @@ function FloorMapEditPanel(props) {
 		form
 	]);
 	const handleFinish = (0, react.useCallback)((values) => {
-		const name = values.name != null ? String(values.name).trim() || void 0 : void 0;
 		const patch = {
-			name,
+			name: values.name != null ? String(values.name).trim() || void 0 : void 0,
 			canvasId: String(values.canvasId)
 		};
 		if (isImageKind) {
@@ -151,23 +141,12 @@ 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;
 		}
-		/**
-		* 「图元名作为资源标题」开关：仅在 kindConfig 允许配置时才会出现在表单里；
-		* 没有 name 的场景下即便勾选也无意义，因此用 `name` 是否为空决定写入是 true 还是清掉。
-		* 写入路径走 extensions，避免顶层 schema 出现仅供 UI 偏好的字段。
-		*/
-		if (kindAllowsNameAsTitle) {
-			const enabled = Boolean(values.nameAsTitle) && Boolean(name);
-			patch.extensions = require_floorMapElementNameAsTitle.buildNameAsTitleExtensionsPatch(sceneElement.extensions, enabled);
-		}
 		onUpdate(patch);
 		setFormHasUnappliedChanges(false);
 	}, [
 		onUpdate,
 		isImageKind,
-		layoutLocked,
-		kindAllowsNameAsTitle,
-		sceneElement.extensions
+		layoutLocked
 	]);
 	const binding = sceneElement.dataBinding;
 	const record = binding ? (_dataSources$binding$ = (_dataSources$binding$2 = dataSources[binding.dataSourceKey]) === null || _dataSources$binding$2 === void 0 ? void 0 : _dataSources$binding$2.find((r) => r.id === binding.recordId)) !== null && _dataSources$binding$ !== void 0 ? _dataSources$binding$ : {} : {};
@@ -367,21 +346,7 @@ function FloorMapEditPanel(props) {
 	}, /* @__PURE__ */ react.default.createElement(antd.Input, {
 		placeholder: isStageLike ? ep.phNameStage : ep.phName,
 		allowClear: true
-	})), kindAllowsNameAsTitle ? /* @__PURE__ */ react.default.createElement(
-		antd.Form.Item,
-		/**
-		* 仅在 kindConfig.nameAsTitleConfigurable 时渲染。
-		* 业务侧通过 {@link resolveSceneElementDisplayTitle} 读取该偏好，
-		* 决定卡片标题是否覆盖业务字段（如 row.main_field / row.code）。
-		*/
-		{
-			name: "nameAsTitle",
-			valuePropName: "checked",
-			extra: ep.tipNameAsTitle,
-			style: { marginTop: -4 }
-		},
-		/* @__PURE__ */ react.default.createElement(antd.Checkbox, null, ep.labelNameAsTitle)
-	) : null, isImageKind ? /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
+	})), isImageKind ? /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
 		name: "imageUrl",
 		label: ep.labelImageUrl,
 		extra: ep.extraImageUrl