@pisell/materials 6.11.17 → 6.11.19

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

@@ -0,0 +1,436 @@
+/**
+ * Figma 样式餐桌/圆桌卡片：上下小条 + 白底卡片 + 状态色边框
+ * 供 Floor Map Story 与 Sales Grid 平面图复用
+ */
+import React from 'react';
+import { Avatar } from 'antd';
+import { UserOutlined, ClockCircleOutlined, TeamOutlined, AuditOutlined, FieldTimeOutlined, EnvironmentOutlined } from '@ant-design/icons';
+import { locales } from '@pisell/utils';
+var I18N_CARD = 'pisell-floor-map-layout.card-placeholder';
+var I18N_FIGMA = 'pisell-floor-map-layout.figma-card';
+
+/** Figma 设计 token（Pisell 2.0 Component Library） */
+var FIGMA = {
+  white: '#FFFFFF',
+  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
+};
+
+/** 方桌/圆桌卡片展示用数据结构（与 Figma 设计一致，支持桌号/状态/人数/区域等） */
+
+var STATUS_MAP = {
+  available: 'available',
+  reserved: 'reserved',
+  waiting: 'waiting',
+  dining: 'dining',
+  billed: 'billed',
+  availableSoon: 'availableSoon',
+  空闲: 'available',
+  已预订: 'reserved',
+  等待: 'waiting',
+  用餐中: 'dining',
+  已结账: 'billed',
+  即将可用: 'availableSoon'
+};
+
+/** 从 merged item + dataSources 得到卡片数据 */
+export function getFigmaTableCardFromMerged(item, dataSources) {
+  var _binding$recordId;
+  var el = item._sceneElement;
+  var binding = el === null || el === void 0 ? void 0 : el.dataBinding;
+  var titleFromElement = (el === null || el === void 0 ? void 0 : el.name) != null && String(el.name).trim() ? String(el.name).trim() : '';
+  var kindLabel = locales.getText(item.elementKind === 'roundTable' ? "".concat(I18N_FIGMA, ".kind-round-table") : "".concat(I18N_FIGMA, ".kind-square-table"));
+  var hasDataSource = Boolean((binding === null || binding === void 0 ? void 0 : binding.dataSourceKey) && String(binding.dataSourceKey).trim() !== '');
+  var rid = (binding === null || binding === void 0 ? void 0 : binding.recordId) != null ? String(binding.recordId).trim() : '';
+  var boundToData = Boolean(hasDataSource && rid !== '');
+  var list = binding !== null && binding !== void 0 && binding.dataSourceKey ? dataSources[binding.dataSourceKey] : undefined;
+  var record = boundToData && list ? list.find(function (r) {
+    return r.id === rid;
+  }) : undefined;
+  var hasLiveRow = Boolean(record);
+  if (!hasLiveRow) {
+    /** 记录缺失或与「未选数据源」占位同一视觉（虚线 #bfbfbf），便于识别为待处理态 */
+    var borderColor = '#bfbfbf';
+    var hint = !hasDataSource || !rid ? hasDataSource ? locales.getText("".concat(I18N_CARD, ".hint-select-row")) : locales.getText("".concat(I18N_CARD, ".hint-bind-datasource")) : rid.startsWith('new_') ? locales.getText("".concat(I18N_CARD, ".hint-new-slot")).replace(/\{kind\}/g, kindLabel) : locales.getText("".concat(I18N_CARD, ".hint-row-not-found"));
+    return {
+      id: item.id,
+      isNoDataPlaceholder: true,
+      placeholderBorderColor: borderColor,
+      placeholderHint: hint,
+      placeholderTitle: titleFromElement || kindLabel
+    };
+  }
+  var displayId = (_binding$recordId = binding === null || binding === void 0 ? void 0 : binding.recordId) !== null && _binding$recordId !== void 0 ? _binding$recordId : item.id;
+  var rawStatus = record === null || record === void 0 ? void 0 : record.status;
+  var status = rawStatus && STATUS_MAP[rawStatus] || 'available';
+  return {
+    id: displayId,
+    displayName: record === null || record === void 0 ? void 0 : record.name,
+    status: status,
+    customerName: record === null || record === void 0 ? void 0 : record.customerName,
+    reserveTime: record === null || record === void 0 ? void 0 : record.reserveTime,
+    guests: record === null || record === void 0 ? void 0 : record.guests,
+    capacity: record === null || record === void 0 ? void 0 : record.capacity,
+    dishes: record === null || record === void 0 ? void 0 : record.dishes,
+    duration: record === null || record === void 0 ? void 0 : record.duration,
+    area: record === null || record === void 0 ? void 0 : record.area
+  };
+}
+
+/** 根据 item id 得到小条数量：S=1, M=2, L=3, X=3, XL=4 */
+function getBarCountFromItemId(id) {
+  var 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(_ref) {
+  var count = _ref.count,
+    position = _ref.position,
+    barColor = _ref.barColor;
+  return /*#__PURE__*/React.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
+  }, function (_, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      style: {
+        width: CARD_BAR_WIDTH,
+        height: CARD_BAR_HEIGHT,
+        borderRadius: 6,
+        background: barColor
+      }
+    });
+  }));
+}
+function FigmaCardRow(_ref2) {
+  var icon = _ref2.icon,
+    children = _ref2.children;
+  return /*#__PURE__*/React.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__*/React.createElement("span", {
+    style: {
+      flexShrink: 0,
+      color: FIGMA.gray400,
+      fontSize: 14
+    }
+  }, icon), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flexShrink: 0
+    }
+  }, children));
+}
+
+/** 人数、区域等通用信息行（与表格列绑定：可坐人数、区域） */
+function TableCardInfoRows(_ref3) {
+  var cardItem = _ref3.cardItem;
+  var hasCapacity = cardItem.capacity != null;
+  var hasArea = cardItem.area != null && cardItem.area !== '';
+  if (!hasCapacity && !hasArea) return null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasCapacity && /*#__PURE__*/React.createElement(FigmaCardRow, {
+    icon: /*#__PURE__*/React.createElement(TeamOutlined, null)
+  }, /*#__PURE__*/React.createElement("span", null, locales.getText("".concat(I18N_FIGMA, ".capacity-seats")).replace(/\{n\}/g, String(cardItem.capacity)))), hasArea && /*#__PURE__*/React.createElement(FigmaCardRow, {
+    icon: /*#__PURE__*/React.createElement(EnvironmentOutlined, null)
+  }, /*#__PURE__*/React.createElement("span", null, cardItem.area)));
+}
+
+/** 方桌卡片内容区（与 renderFigmaStyleTableCard 共用，展示桌号/状态/人数/区域） */
+function TableCardContent(_ref4) {
+  var _cardItem$status, _cardItem$displayName, _cardItem$displayName2;
+  var cardItem = _ref4.cardItem;
+  var status = (_cardItem$status = cardItem.status) !== null && _cardItem$status !== void 0 ? _cardItem$status : 'available';
+  var borderColor = STATUS_BORDER[status];
+  var isAvailable = status === 'available';
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minHeight: 0,
+      padding: 8,
+      boxSizing: 'border-box',
+      background: FIGMA.white,
+      border: isAvailable ? "4px solid ".concat(FIGMA.gray200) : "4px solid ".concat(borderColor),
+      borderRadius: 8,
+      boxShadow: FIGMA.shadowSm,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: isAvailable ? 'flex-start' : 'center',
+      alignItems: isAvailable ? 'stretch' : 'center',
+      gap: 4
+    }
+  }, isAvailable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: 0,
+      gap: 4
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600,
+      fontSize: 18,
+      lineHeight: '24px',
+      color: FIGMA.gray700,
+      letterSpacing: 0
+    }
+  }, (_cardItem$displayName = cardItem.displayName) !== null && _cardItem$displayName !== void 0 ? _cardItem$displayName : cardItem.id), /*#__PURE__*/React.createElement(TableCardInfoRows, {
+    cardItem: cardItem
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600,
+      fontSize: 18,
+      lineHeight: '24px',
+      color: FIGMA.gray900,
+      letterSpacing: 0,
+      textAlign: 'center'
+    }
+  }, (_cardItem$displayName2 = cardItem.displayName) !== null && _cardItem$displayName2 !== void 0 ? _cardItem$displayName2 : cardItem.id), status === 'reserved' && (cardItem.customerName != null && cardItem.customerName !== '' || cardItem.reserveTime != null && cardItem.reserveTime !== '') && /*#__PURE__*/React.createElement(React.Fragment, null, cardItem.customerName != null && cardItem.customerName !== '' && /*#__PURE__*/React.createElement(FigmaCardRow, {
+    icon: /*#__PURE__*/React.createElement(Avatar, {
+      size: 16,
+      icon: /*#__PURE__*/React.createElement(UserOutlined, null),
+      style: {
+        backgroundColor: FIGMA.gray200
+      }
+    })
+  }, /*#__PURE__*/React.createElement("span", null, cardItem.customerName)), cardItem.reserveTime != null && cardItem.reserveTime !== '' && /*#__PURE__*/React.createElement(FigmaCardRow, {
+    icon: /*#__PURE__*/React.createElement(ClockCircleOutlined, null)
+  }, /*#__PURE__*/React.createElement("span", null, cardItem.reserveTime))), (status === 'dining' || status === 'waiting' || status === 'billed' || status === 'availableSoon') && cardItem.guests != null && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FigmaCardRow, {
+    icon: /*#__PURE__*/React.createElement(TeamOutlined, null)
+  }, /*#__PURE__*/React.createElement("span", null, locales.getText("".concat(I18N_FIGMA, ".guests-count")).replace(/\{n\}/g, String(cardItem.guests)))), cardItem.dishes && /*#__PURE__*/React.createElement(FigmaCardRow, {
+    icon: /*#__PURE__*/React.createElement(AuditOutlined, null)
+  }, /*#__PURE__*/React.createElement("span", null, cardItem.dishes)), cardItem.duration && /*#__PURE__*/React.createElement(FigmaCardRow, {
+    icon: /*#__PURE__*/React.createElement(FieldTimeOutlined, null)
+  }, /*#__PURE__*/React.createElement("span", null, cardItem.duration))), /*#__PURE__*/React.createElement(TableCardInfoRows, {
+    cardItem: cardItem
+  })));
+}
+
+/** 无数据占位：与蘸料摆台 Story 中占位卡片视觉对齐（虚线框 + #fafafa） */
+function renderTableKindNoDataPlaceholder(cardItem, shape) {
+  var _cardItem$placeholder, _cardItem$placeholder2, _cardItem$placeholder3;
+  var borderColor = (_cardItem$placeholder = cardItem.placeholderBorderColor) !== null && _cardItem$placeholder !== void 0 ? _cardItem$placeholder : '#bfbfbf';
+  var title = (_cardItem$placeholder2 = cardItem.placeholderTitle) !== null && _cardItem$placeholder2 !== void 0 ? _cardItem$placeholder2 : locales.getText("".concat(I18N_FIGMA, ".default-table"));
+  var hint = (_cardItem$placeholder3 = cardItem.placeholderHint) !== null && _cardItem$placeholder3 !== void 0 ? _cardItem$placeholder3 : '';
+  return /*#__PURE__*/React.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 ".concat(borderColor),
+      boxShadow: 'none',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600,
+      color: '#595959',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      textAlign: shape === 'circle' ? 'center' : undefined
+    }
+  }, title), hint ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: '#8c8c8c',
+      marginTop: 6,
+      flexShrink: 0,
+      fontSize: 10,
+      textAlign: shape === 'circle' ? 'center' : undefined
+    }
+  }, hint) : null);
+}
+
+/** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框） */
+export function renderFigmaStyleTableCard(cardItem) {
+  var _cardItem$status2;
+  if (cardItem.isNoDataPlaceholder) {
+    return renderTableKindNoDataPlaceholder(cardItem, 'rect');
+  }
+  var status = (_cardItem$status2 = cardItem.status) !== null && _cardItem$status2 !== void 0 ? _cardItem$status2 : 'available';
+  var borderColor = STATUS_BORDER[status];
+  var isAvailable = status === 'available';
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      gap: 0,
+      fontFamily: FIGMA.fontFamily,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(CardBars, {
+    count: getBarCountFromItemId(cardItem.id),
+    position: "top",
+    barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
+  }), /*#__PURE__*/React.createElement(TableCardContent, {
+    cardItem: cardItem
+  }), /*#__PURE__*/React.createElement(CardBars, {
+    count: getBarCountFromItemId(cardItem.id),
+    position: "bottom",
+    barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
+  }));
+}
+
+/** 渲染 Figma 样式的圆桌卡片（圆形轮廓，展示桌号/状态/人数/区域） */
+export function renderFigmaStyleRoundTableCard(cardItem) {
+  var _cardItem$status3, _cardItem$displayName3, _cardItem$displayName4;
+  if (cardItem.isNoDataPlaceholder) {
+    return renderTableKindNoDataPlaceholder(cardItem, 'circle');
+  }
+  var status = (_cardItem$status3 = cardItem.status) !== null && _cardItem$status3 !== void 0 ? _cardItem$status3 : 'available';
+  var borderColor = STATUS_BORDER[status];
+  var isAvailable = status === 'available';
+  return /*#__PURE__*/React.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 ".concat(FIGMA.gray200) : "4px solid ".concat(borderColor),
+      background: FIGMA.white,
+      boxShadow: FIGMA.shadowSm,
+      padding: 8
+    }
+  }, /*#__PURE__*/React.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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600,
+      fontSize: 16,
+      lineHeight: '22px',
+      color: FIGMA.gray700,
+      textAlign: 'center'
+    }
+  }, (_cardItem$displayName3 = cardItem.displayName) !== null && _cardItem$displayName3 !== void 0 ? _cardItem$displayName3 : cardItem.id), (cardItem.capacity != null || cardItem.area != null && cardItem.area !== '') && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 2,
+      fontSize: 12,
+      lineHeight: '18px',
+      color: FIGMA.gray700
+    }
+  }, cardItem.capacity != null && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(TeamOutlined, {
+    style: {
+      marginRight: 4
+    }
+  }), locales.getText("".concat(I18N_FIGMA, ".capacity-seats")).replace(/\{n\}/g, String(cardItem.capacity))), cardItem.area != null && cardItem.area !== '' && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(EnvironmentOutlined, {
+    style: {
+      marginRight: 4
+    }
+  }), cardItem.area))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600,
+      fontSize: 16,
+      lineHeight: '22px',
+      color: FIGMA.gray900,
+      textAlign: 'center'
+    }
+  }, (_cardItem$displayName4 = cardItem.displayName) !== null && _cardItem$displayName4 !== void 0 ? _cardItem$displayName4 : cardItem.id), status === 'reserved' && cardItem.customerName && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: FIGMA.gray700,
+      marginTop: 2
+    }
+  }, cardItem.customerName), (status === 'dining' || status === 'waiting' || status === 'billed') && cardItem.guests != null && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: FIGMA.gray700,
+      marginTop: 2
+    }
+  }, locales.getText("".concat(I18N_FIGMA, ".guests-count")).replace(/\{n\}/g, String(cardItem.guests))), (cardItem.capacity != null || cardItem.area != null && cardItem.area !== '') && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: FIGMA.gray700,
+      marginTop: 2
+    }
+  }, cardItem.capacity != null && locales.getText("".concat(I18N_FIGMA, ".capacity-seats")).replace(/\{n\}/g, String(cardItem.capacity)), cardItem.capacity != null && cardItem.area && ' · ', cardItem.area))));
+}
+
+/** 返回用于 renderItemByKind.table 的渲染函数（方桌） */
+export function getRenderItemByKindTable(dataSources) {
+  return function (item) {
+    var cardItem = getFigmaTableCardFromMerged(item, dataSources);
+    return renderFigmaStyleTableCard(cardItem);
+  };
+}
+
+/** 返回用于 renderItemByKind.roundTable 的渲染函数（圆桌） */
+export function getRenderItemByKindRoundTable(dataSources) {
+  return function (item) {
+    var cardItem = getFigmaTableCardFromMerged(item, dataSources);
+    return renderFigmaStyleRoundTableCard(cardItem);
+  };
+}

package/es/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/es/components/pisellFloorMapLayout/components/FloorMapDataForm.js

@@ -0,0 +1,133 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * FloorMapDataForm - 数据源落位的数据表单，调用 onDataSourceRecordSave
+ * 支持通过 columns 配置列标签与控件类型（string/number/select），与表格列一致
+ */
+import React, { useState, useCallback, useEffect } from 'react';
+import classNames from 'classnames';
+import { Form, Input, InputNumber, Select, Button } from 'antd';
+import { locales } from '@pisell/utils';
+import "./FloorMapDataForm.less";
+var PREFIX = 'pisell-floor-map-layout';
+var I18N_DF = 'pisell-floor-map-layout.data-form';
+function renderFormControl(col, value) {
+  var _col$type, _col$options;
+  var type = (_col$type = col.type) !== null && _col$type !== void 0 ? _col$type : 'string';
+  if (type === 'number') {
+    return /*#__PURE__*/React.createElement(InputNumber, {
+      style: {
+        width: '100%'
+      },
+      min: 0
+    });
+  }
+  if (type === 'select' && (_col$options = col.options) !== null && _col$options !== void 0 && _col$options.length) {
+    return /*#__PURE__*/React.createElement(Select, {
+      allowClear: false,
+      options: col.options.map(function (o) {
+        return {
+          label: o.label,
+          value: o.value
+        };
+      }),
+      style: {
+        width: '100%'
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement(Input, null);
+}
+
+/** 简单通用表单：可编辑记录中的字段；支持 columns 配置标签与控件类型 */
+export function FloorMapDataForm(props) {
+  var dataSourceKey = props.dataSourceKey,
+    recordId = props.recordId,
+    record = props.record,
+    dataSources = props.dataSources,
+    onSave = props.onSave,
+    saving = props.saving,
+    columns = props.columns,
+    className = props.className;
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    changed = _useState2[0],
+    setChanged = _useState2[1];
+  var initialValues = React.useMemo(function () {
+    return _objectSpread({}, record);
+  }, [record]);
+  var handleFinish = useCallback(function (values) {
+    onSave(dataSourceKey, recordId, values);
+    setChanged(false);
+  }, [dataSourceKey, recordId, onSave]);
+  var handleValuesChange = useCallback(function () {
+    return setChanged(true);
+  }, []);
+  useEffect(function () {
+    form.setFieldsValue(record);
+  }, [recordId, record, form]);
+  var fieldsToRender = columns ? columns.filter(function (col) {
+    return col.key !== 'id';
+  }) : Object.entries(record).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      k = _ref2[0];
+    return k !== 'id';
+  }).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 1),
+      key = _ref4[0];
+    return {
+      key: key,
+      label: key,
+      type: 'string'
+    };
+  });
+  if (fieldsToRender.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "-data-form"), className)
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "".concat(PREFIX, "-data-form-empty")
+    }, locales.getText("".concat(I18N_DF, ".empty"))));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(PREFIX, "-data-form"), className)
+  }, /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    key: recordId,
+    layout: "vertical",
+    size: "small",
+    initialValues: initialValues,
+    onFinish: handleFinish,
+    onValuesChange: handleValuesChange
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    name: "id",
+    label: "ID",
+    hidden: true
+  }, /*#__PURE__*/React.createElement(Input, {
+    disabled: true
+  })), fieldsToRender.map(function (col) {
+    return /*#__PURE__*/React.createElement(Form.Item, {
+      key: col.key,
+      name: col.key,
+      label: col.label
+    }, renderFormControl(col, record[col.key]));
+  }), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit",
+    loading: saving,
+    disabled: !changed
+  }, locales.getText("".concat(I18N_DF, ".save-record"))))));
+}
+export default FloorMapDataForm;

package/es/components/pisellFloorMapLayout/components/FloorMapDataForm.less

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

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