@pisell/materials 6.11.17 → 6.11.18

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

@@ -0,0 +1,482 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellFloorMapLayout/components/FigmaTableCard.tsx
+var FigmaTableCard_exports = {};
+__export(FigmaTableCard_exports, {
+  getFigmaTableCardFromMerged: () => getFigmaTableCardFromMerged,
+  getRenderItemByKindRoundTable: () => getRenderItemByKindRoundTable,
+  getRenderItemByKindTable: () => getRenderItemByKindTable,
+  renderFigmaStyleRoundTableCard: () => renderFigmaStyleRoundTableCard,
+  renderFigmaStyleTableCard: () => renderFigmaStyleTableCard
+});
+module.exports = __toCommonJS(FigmaTableCard_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var FIGMA = {
+  white: "#FFFFFF",
+  gray200: "#EAECF0",
+  gray400: "#98A2B3",
+  gray700: "#344054",
+  gray900: "#101828",
+  shadowSm: "0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1)",
+  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  barFillAvailable: "#EAECF0",
+  reserved: "#9254de",
+  waiting: "#fa8c16",
+  dining: "#1890ff",
+  billed: "#52c41a",
+  availableSoon: "#f5222d"
+};
+var STATUS_BORDER = {
+  available: FIGMA.gray200,
+  reserved: FIGMA.reserved,
+  waiting: FIGMA.waiting,
+  dining: FIGMA.dining,
+  billed: FIGMA.billed,
+  availableSoon: FIGMA.availableSoon
+};
+var STATUS_MAP = {
+  available: "available",
+  reserved: "reserved",
+  waiting: "waiting",
+  dining: "dining",
+  billed: "billed",
+  availableSoon: "availableSoon",
+  空闲: "available",
+  已预订: "reserved",
+  等待: "waiting",
+  用餐中: "dining",
+  已结账: "billed",
+  即将可用: "availableSoon"
+};
+function getFigmaTableCardFromMerged(item, dataSources) {
+  const el = item._sceneElement;
+  const binding = el == null ? void 0 : el.dataBinding;
+  const titleFromElement = (el == null ? void 0 : el.name) != null && String(el.name).trim() ? String(el.name).trim() : "";
+  const kindLabel = item.elementKind === "roundTable" ? "圆桌" : "餐桌";
+  const hasDataSource = Boolean(
+    (binding == null ? void 0 : binding.dataSourceKey) && String(binding.dataSourceKey).trim() !== ""
+  );
+  const rid = (binding == null ? void 0 : binding.recordId) != null ? String(binding.recordId).trim() : "";
+  const boundToData = Boolean(hasDataSource && rid !== "");
+  const list = (binding == null ? void 0 : binding.dataSourceKey) ? dataSources[binding.dataSourceKey] : void 0;
+  const record = boundToData && list ? list.find((r) => r.id === rid) : void 0;
+  const hasLiveRow = Boolean(record);
+  if (!hasLiveRow) {
+    const borderColor = "#bfbfbf";
+    const hint = !hasDataSource || !rid ? hasDataSource ? "已选择数据源，请在侧栏选择数据行" : "未绑定数据行：请在侧栏选择数据源与记录" : rid.startsWith("new_") ? `新${kindLabel}占位，可在侧栏绑定具体记录` : "未找到对应记录：请检查绑定或数据列表";
+    return {
+      id: item.id,
+      isNoDataPlaceholder: true,
+      placeholderBorderColor: borderColor,
+      placeholderHint: hint,
+      placeholderTitle: titleFromElement || kindLabel
+    };
+  }
+  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";
+  return {
+    id: displayId,
+    displayName: record == null ? void 0 : record.name,
+    status,
+    customerName: record == null ? void 0 : record.customerName,
+    reserveTime: record == null ? void 0 : record.reserveTime,
+    guests: record == null ? void 0 : record.guests,
+    capacity: record == null ? void 0 : record.capacity,
+    dishes: record == null ? void 0 : record.dishes,
+    duration: record == null ? void 0 : record.duration,
+    area: record == null ? void 0 : record.area
+  };
+}
+function getBarCountFromItemId(id) {
+  const upper = id.toUpperCase();
+  if (upper.startsWith("XL-") || id.endsWith("-XL")) return 4;
+  if (upper.startsWith("L-") || upper.startsWith("X-") || id.endsWith("-L") || id.endsWith("-X"))
+    return 3;
+  if (upper.startsWith("M-") || id.endsWith("-M")) return 2;
+  return 1;
+}
+var CARD_BAR_WIDTH = 80;
+var CARD_BAR_HEIGHT = 12;
+function CardBars({
+  count,
+  position,
+  barColor
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        gap: 30,
+        justifyContent: "center",
+        flexShrink: 0,
+        padding: position === "top" ? "0 0 4px 0" : "4px 0 0 0"
+      }
+    },
+    Array.from({ length: count }, (_, i) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: i,
+        style: {
+          width: CARD_BAR_WIDTH,
+          height: CARD_BAR_HEIGHT,
+          borderRadius: 6,
+          background: barColor
+        }
+      }
+    ))
+  );
+}
+function FigmaCardRow({
+  icon,
+  children
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        fontFamily: FIGMA.fontFamily,
+        fontSize: 14,
+        lineHeight: "20px",
+        fontWeight: 400,
+        color: FIGMA.gray700,
+        flexShrink: 0,
+        minHeight: "20px"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("span", { style: { flexShrink: 0, color: FIGMA.gray400, fontSize: 14 } }, icon),
+    /* @__PURE__ */ import_react.default.createElement("span", { style: { flexShrink: 0 } }, children)
+  );
+}
+function TableCardInfoRows({ cardItem }) {
+  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, "可坐 ", 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 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,
+        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
+      }
+    },
+    isAvailable ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: 0,
+          gap: 4
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            fontWeight: 600,
+            fontSize: 18,
+            lineHeight: "24px",
+            color: FIGMA.gray700,
+            letterSpacing: 0
+          }
+        },
+        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",
+      {
+        style: {
+          fontWeight: 600,
+          fontSize: 18,
+          lineHeight: "24px",
+          color: FIGMA.gray900,
+          letterSpacing: 0,
+          textAlign: "center"
+        }
+      },
+      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(
+      FigmaCardRow,
+      {
+        icon: /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Avatar,
+          {
+            size: 16,
+            icon: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null),
+            style: { backgroundColor: FIGMA.gray200 }
+          }
+        )
+      },
+      /* @__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, 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 }))
+  );
+}
+function renderTableKindNoDataPlaceholder(cardItem, shape) {
+  const borderColor = cardItem.placeholderBorderColor ?? "#bfbfbf";
+  const title = cardItem.placeholderTitle ?? "餐桌";
+  const hint = cardItem.placeholderHint ?? "";
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        padding: "8px 10px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        minHeight: 0,
+        fontSize: 11,
+        lineHeight: 1.35,
+        background: "#fafafa",
+        borderRadius: shape === "circle" ? "50%" : 8,
+        border: `2px dashed ${borderColor}`,
+        boxShadow: "none",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          fontWeight: 600,
+          color: "#595959",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          textAlign: shape === "circle" ? "center" : void 0
+        }
+      },
+      title
+    ),
+    hint ? /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          color: "#8c8c8c",
+          marginTop: 6,
+          flexShrink: 0,
+          fontSize: 10,
+          textAlign: shape === "circle" ? "center" : void 0
+        }
+      },
+      hint
+    ) : null
+  );
+}
+function renderFigmaStyleTableCard(cardItem) {
+  if (cardItem.isNoDataPlaceholder) {
+    return renderTableKindNoDataPlaceholder(cardItem, "rect");
+  }
+  const status = cardItem.status ?? "available";
+  const borderColor = STATUS_BORDER[status];
+  const isAvailable = status === "available";
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        gap: 0,
+        fontFamily: FIGMA.fontFamily,
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      CardBars,
+      {
+        count: getBarCountFromItemId(cardItem.id),
+        position: "top",
+        barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(TableCardContent, { cardItem }),
+    /* @__PURE__ */ import_react.default.createElement(
+      CardBars,
+      {
+        count: getBarCountFromItemId(cardItem.id),
+        position: "bottom",
+        barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
+      }
+    )
+  );
+}
+function renderFigmaStyleRoundTableCard(cardItem) {
+  if (cardItem.isNoDataPlaceholder) {
+    return renderTableKindNoDataPlaceholder(cardItem, "circle");
+  }
+  const status = cardItem.status ?? "available";
+  const borderColor = STATUS_BORDER[status];
+  const isAvailable = status === "available";
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        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}`,
+        background: FIGMA.white,
+        boxShadow: FIGMA.shadowSm,
+        padding: 8
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: isAvailable ? "flex-start" : "center",
+          alignItems: "center",
+          width: "100%",
+          overflow: "hidden",
+          gap: 2
+        }
+      },
+      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(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2,
+            fontSize: 12,
+            lineHeight: "18px",
+            color: FIGMA.gray700
+          }
+        },
+        cardItem.capacity != null && /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(import_icons.TeamOutlined, { style: { marginRight: 4 } }), "可坐 ", 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 }
+        },
+        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 && `可坐 ${cardItem.capacity} 人`, cardItem.capacity != null && cardItem.area && " · ", cardItem.area))
+    )
+  );
+}
+function getRenderItemByKindTable(dataSources) {
+  return (item) => {
+    const cardItem = getFigmaTableCardFromMerged(
+      item,
+      dataSources
+    );
+    return renderFigmaStyleTableCard(cardItem);
+  };
+}
+function getRenderItemByKindRoundTable(dataSources) {
+  return (item) => {
+    const cardItem = getFigmaTableCardFromMerged(
+      item,
+      dataSources
+    );
+    return renderFigmaStyleRoundTableCard(cardItem);
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getFigmaTableCardFromMerged,
+  getRenderItemByKindRoundTable,
+  getRenderItemByKindTable,
+  renderFigmaStyleRoundTableCard,
+  renderFigmaStyleTableCard
+});

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

@@ -0,0 +1,21 @@
+/**
+ * FloorMapDataForm - 数据源落位的数据表单，调用 onDataSourceRecordSave
+ * 支持通过 columns 配置列标签与控件类型（string/number/select），与表格列一致
+ */
+import React from 'react';
+import type { FloorMapDataSources, DataSourceFormColumn } from '../types';
+import './FloorMapDataForm.less';
+export interface FloorMapDataFormProps {
+    dataSourceKey: string;
+    recordId: string;
+    record: Record<string, unknown>;
+    dataSources: FloorMapDataSources;
+    onSave: (dataSourceKey: string, id: string, newData: Record<string, unknown>) => void;
+    saving?: boolean;
+    /** 列配置：标签、类型（string/number/select）、选项（select 时）；不传则自动列举 record 除 id 外字段 */
+    columns?: DataSourceFormColumn[];
+    className?: string;
+}
+/** 简单通用表单：可编辑记录中的字段；支持 columns 配置标签与控件类型 */
+export declare function FloorMapDataForm(props: FloorMapDataFormProps): React.JSX.Element;
+export default FloorMapDataForm;

package/lib/components/pisellFloorMapLayout/components/FloorMapDataForm.js

@@ -0,0 +1,117 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellFloorMapLayout/components/FloorMapDataForm.tsx
+var FloorMapDataForm_exports = {};
+__export(FloorMapDataForm_exports, {
+  FloorMapDataForm: () => FloorMapDataForm,
+  default: () => FloorMapDataForm_default
+});
+module.exports = __toCommonJS(FloorMapDataForm_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_antd = require("antd");
+var import_FloorMapDataForm = require("./FloorMapDataForm.less");
+var PREFIX = "pisell-floor-map-layout";
+function renderFormControl(col, value) {
+  var _a;
+  const type = col.type ?? "string";
+  if (type === "number") {
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.InputNumber, { style: { width: "100%" }, min: 0 });
+  }
+  if (type === "select" && ((_a = col.options) == null ? void 0 : _a.length)) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Select,
+      {
+        allowClear: false,
+        options: col.options.map((o) => ({ label: o.label, value: o.value })),
+        style: { width: "100%" }
+      }
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Input, null);
+}
+function FloorMapDataForm(props) {
+  const {
+    dataSourceKey,
+    recordId,
+    record,
+    dataSources,
+    onSave,
+    saving,
+    columns,
+    className
+  } = props;
+  const [form] = import_antd.Form.useForm();
+  const [changed, setChanged] = (0, import_react.useState)(false);
+  const initialValues = import_react.default.useMemo(() => ({ ...record }), [record]);
+  const handleFinish = (0, import_react.useCallback)(
+    (values) => {
+      onSave(dataSourceKey, recordId, values);
+      setChanged(false);
+    },
+    [dataSourceKey, recordId, onSave]
+  );
+  const handleValuesChange = (0, import_react.useCallback)(() => setChanged(true), []);
+  (0, import_react.useEffect)(() => {
+    form.setFieldsValue(record);
+  }, [recordId, record, form]);
+  const fieldsToRender = columns ? columns.filter((col) => col.key !== "id") : Object.entries(record).filter(([k]) => k !== "id").map(([key]) => ({ key, label: key, type: "string" }));
+  if (fieldsToRender.length === 0) {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-data-form`, className) }, /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-data-form-empty` }, "无额外字段可编辑"));
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-data-form`, className) }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form,
+    {
+      form,
+      key: recordId,
+      layout: "vertical",
+      size: "small",
+      initialValues,
+      onFinish: handleFinish,
+      onValuesChange: handleValuesChange
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "id", label: "ID", hidden: true }, /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { disabled: true })),
+    fieldsToRender.map((col) => /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { key: col.key, name: col.key, label: col.label }, renderFormControl(col, record[col.key]))),
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        type: "primary",
+        htmlType: "submit",
+        loading: saving,
+        disabled: !changed
+      },
+      "保存记录"
+    ))
+  ));
+}
+var FloorMapDataForm_default = FloorMapDataForm;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloorMapDataForm
+});

package/lib/components/pisellFloorMapLayout/components/FloorMapDataForm.less

@@ -0,0 +1,7 @@
+.pisell-floor-map-layout-data-form {
+  &-empty {
+    font-size: 12px;
+    color: #999;
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,14 @@
+/**
+ * FloorMapEditPanel - 选中图元后的编辑面板：画布属性 + 可选数据绑定 + 数据源记录表单
+ */
+import React from 'react';
+import type { FloorMapEditPanelParams, FloorMapViewConfig, FloorMapDataSources } from '../types';
+import './FloorMapEditPanel.less';
+export interface FloorMapEditPanelProps extends FloorMapEditPanelParams {
+    config: FloorMapViewConfig;
+    dataSources: FloorMapDataSources;
+    savingRecord?: boolean;
+    className?: string;
+}
+export declare function FloorMapEditPanel(props: FloorMapEditPanelProps): React.JSX.Element;
+export default FloorMapEditPanel;