@pisell/materials 1.0.1059 → 1.0.1062

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.stories.js

@@ -1,7 +1,22 @@
-import { useRef } from 'react';
-import { Button, Space, Tabs, Avatar } from 'antd';
+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; }
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Space, Tabs, Avatar, Form, Input } from 'antd';
 import { UserOutlined, ClockCircleOutlined, TeamOutlined, AuditOutlined, FieldTimeOutlined } from '@ant-design/icons';
+import { FLOOR_MAP_IMAGE_ELEMENT_KIND } from "./types";
 import { PisellFloorMapLayout } from "./PisellFloorMapLayout";
+import { FloorMapLayoutProvider } from "./context/FloorMapLayoutContext";
+import { getRenderItemByKindTable, getRenderItemByKindRoundTable } from "./components/FigmaTableCard";
 // Figma 设计 token（Pisell 2.0 Component Library，node 13998:648 / 14004:1168 变量）
 var FIGMA = {
   white: '#FFFFFF',
@@ -133,8 +148,9 @@ var defaultItems = [{
   y: 3
 }];
 
-/** 简单格子渲染：仅显示 id */
+/** 简单格子渲染：仅显示 id；尊重 item.shape（如 circle 则圆形容器） */
 function renderSimpleItem(item) {
+  var isCircle = item.shape === 'circle';
   return /*#__PURE__*/React.createElement("div", {
     style: {
       width: '100%',
@@ -144,7 +160,7 @@ function renderSimpleItem(item) {
       justifyContent: 'center',
       background: '#fff',
       border: '4px solid #d9d9d9',
-      borderRadius: 4,
+      borderRadius: isCircle ? '50%' : 4,
       fontSize: 12
     }
   }, item.id);
@@ -154,6 +170,27 @@ function renderSimpleItem(item) {
  * 默认 - 纯色底 + 简单格子（格子单位，默认 item 间距 8px）
  */
 export var Default = {
+  parameters: {
+    layout: 'fullscreen'
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        boxSizing: 'border-box',
+        height: '100vh',
+        minHeight: '100vh',
+        padding: 16,
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        minWidth: 0
+      }
+    }, /*#__PURE__*/React.createElement(Story, null)));
+  }],
   args: {
     items: defaultItems,
     renderItem: function renderItem(item) {
@@ -174,7 +211,12 @@ export var Default = {
     pan: {
       enabled: false
     },
-    enableHover: true
+    enableHover: true,
+    style: {
+      height: '100%',
+      width: '100%',
+      minHeight: 0
+    }
   }
 };
 
@@ -502,6 +544,313 @@ export var WithRefControls = {
   }
 };
 
+/**
+ * Floor Map 视图 - 编辑态（多画布 Tab + 占位工具栏/编辑面板）
+ * 传入 floorMapConfig + dataSources + mode='edit'，由组件内部合并 items
+ */
+var mockFloorMapConfig = {
+  canvasUi: {
+    canCreate: true,
+    canEdit: true
+  },
+  canvases: [{
+    id: 'f1',
+    name: '1楼',
+    order: 0,
+    enabled: true
+  }, {
+    id: 'f2',
+    name: '2楼',
+    order: 1,
+    enabled: true
+  }],
+  elementKindCategories: [{
+    id: 'c1',
+    label: '餐桌',
+    order: 0
+  }, {
+    id: 'c2',
+    label: '装饰',
+    order: 1
+  }],
+  elementKinds: [{
+    value: 'table',
+    label: '方桌',
+    categoryId: 'c1',
+    dataBindingPolicy: 'optional',
+    allowedDataSourceKeys: ['sales']
+  }, {
+    value: 'roundTable',
+    label: '圆桌',
+    categoryId: 'c1',
+    dataBindingPolicy: 'optional',
+    allowedDataSourceKeys: ['sales'],
+    defaultShape: 'circle'
+  }, {
+    value: 'deco',
+    label: '装饰',
+    categoryId: 'c2',
+    dataBindingPolicy: 'none'
+  }, {
+    value: 'stage',
+    label: '舞台/区域',
+    categoryId: 'c2',
+    dataBindingPolicy: 'none'
+  }, {
+    value: FLOOR_MAP_IMAGE_ELEMENT_KIND,
+    label: '图片（底图）',
+    categoryId: 'c2',
+    dataBindingPolicy: 'none'
+  }],
+  sceneElements: [{
+    instanceId: 'elm_bg_demo',
+    canvasId: 'f1',
+    x: 40,
+    y: 40,
+    width: 520,
+    height: 280,
+    zIndex: -8,
+    elementKind: FLOOR_MAP_IMAGE_ELEMENT_KIND,
+    name: '底图示例',
+    imageUrl: ''
+  }, {
+    instanceId: 'elm_s1',
+    canvasId: 'f1',
+    x: 50,
+    y: 50,
+    elementKind: 'table',
+    width: 180,
+    height: 120,
+    zIndex: 0,
+    dataBinding: {
+      dataSourceKey: 'sales',
+      recordId: 's1'
+    }
+  }, {
+    instanceId: 'elm_s2',
+    canvasId: 'f1',
+    x: 150,
+    y: 50,
+    elementKind: 'table',
+    width: 180,
+    height: 120,
+    zIndex: 0,
+    dataBinding: {
+      dataSourceKey: 'sales',
+      recordId: 's2'
+    }
+  }, {
+    instanceId: 'elm_r1',
+    canvasId: 'f1',
+    x: 250,
+    y: 50,
+    elementKind: 'roundTable',
+    width: 100,
+    height: 100,
+    zIndex: 0,
+    dataBinding: {
+      dataSourceKey: 'sales',
+      recordId: 'r1'
+    }
+  }, {
+    instanceId: 'elm_d1',
+    canvasId: 'f1',
+    x: 200,
+    y: 120,
+    width: 60,
+    height: 60,
+    shape: 'circle',
+    elementKind: 'deco',
+    zIndex: 0
+  }]
+};
+var mockDataSources = {
+  sales: [{
+    id: 's1',
+    name: '桌台 A'
+  }, {
+    id: 's2',
+    name: '桌台 B'
+  }, {
+    id: 'r1',
+    name: '圆桌1'
+  }]
+};
+export var FloorMapViewEdit = {
+  parameters: {
+    docs: {
+      description: {
+        story: '平面图编辑态：**非全屏**时顶栏为画布 **Tab + 全屏**，保存多在侧栏；**全屏**后顶栏含 Tab、保存、退出全屏等。左侧图元可**拖到画布**生成图元。左下角为缩放。'
+      }
+    }
+  },
+  args: {
+    items: [],
+    renderItem: function renderItem(item) {
+      return renderSimpleItem(item);
+    },
+    renderItemByKind: {
+      table: getRenderItemByKindTable(mockDataSources),
+      roundTable: getRenderItemByKindRoundTable(mockDataSources)
+    },
+    floorMapConfig: mockFloorMapConfig,
+    dataSources: mockDataSources,
+    mode: 'edit',
+    mapLayer: {
+      backgroundType: 'color',
+      backgroundColor: '#f5f5f5',
+      padding: 16
+    },
+    zoom: {
+      defaultScale: 1
+    },
+    pan: {
+      enabled: true
+    },
+    controls: {
+      showZoom: true,
+      showFullscreen: true,
+      showFitBounds: true
+    },
+    style: {
+      height: 560
+    }
+  }
+};
+
+/** Story：`dataSourceRecordForm` 自定义「数据源记录」表单 */
+function SalesRecordInlineForm(props) {
+  var ctx = props.ctx;
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  useEffect(function () {
+    form.setFieldsValue(ctx.record);
+  }, [ctx.recordId, ctx.record, form]);
+  return /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    layout: "vertical",
+    size: "small",
+    onFinish: function onFinish(values) {
+      var _ctx$onSaveRecord;
+      return (_ctx$onSaveRecord = ctx.onSaveRecord) === null || _ctx$onSaveRecord === void 0 ? void 0 : _ctx$onSaveRecord.call(ctx, values);
+    }
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    name: "name",
+    label: "\u540D\u79F0"
+  }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit",
+    size: "small",
+    loading: ctx.savingRecord,
+    block: true
+  }, "\u4FDD\u5B58\uFF08\u81EA\u5B9A\u4E49\u8868\u5355\uFF09"));
+}
+
+/**
+ * 平面图编辑态 + 自定义数据源记录表单（`dataSourceRecordForm.sales`）
+ */
+export var FloorMapViewEditCustomRecordForm = {
+  parameters: {
+    docs: {
+      description: {
+        story: '选中落位后，侧栏「数据源记录」由 `dataSourceRecordForm` 渲染自定义 Form；`ctx.onSaveRecord` 与内置 FloorMapDataForm 相同，写回 `onDataSourceRecordSave`。本 Story 用本地 state 更新 `dataSources`，卡片文案会同步。'
+      }
+    }
+  },
+  render: function FloorMapViewEditCustomRecordFormRender() {
+    var _useState = useState(function () {
+        return _objectSpread({}, mockDataSources);
+      }),
+      _useState2 = _slicedToArray(_useState, 2),
+      dataSources = _useState2[0],
+      setDataSources = _useState2[1];
+    var handleRecordSave = useCallback(function (dataSourceKey, id, newData) {
+      setDataSources(function (prev) {
+        var _prev$dataSourceKey;
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, dataSourceKey, ((_prev$dataSourceKey = prev[dataSourceKey]) !== null && _prev$dataSourceKey !== void 0 ? _prev$dataSourceKey : []).map(function (row) {
+          return row.id === id ? _objectSpread(_objectSpread({}, row), newData) : row;
+        })));
+      });
+    }, []);
+    return /*#__PURE__*/React.createElement(PisellFloorMapLayout, {
+      items: [],
+      renderItem: function renderItem(item) {
+        return renderSimpleItem(item);
+      },
+      renderItemByKind: {
+        table: getRenderItemByKindTable(dataSources),
+        roundTable: getRenderItemByKindRoundTable(dataSources)
+      },
+      floorMapConfig: mockFloorMapConfig,
+      dataSources: dataSources,
+      mode: "edit",
+      onDataSourceRecordSave: handleRecordSave,
+      dataSourceRecordForm: {
+        sales: function sales(ctx) {
+          return /*#__PURE__*/React.createElement(SalesRecordInlineForm, {
+            ctx: ctx
+          });
+        }
+      },
+      mapLayer: {
+        backgroundType: 'color',
+        backgroundColor: '#f5f5f5',
+        padding: 16
+      },
+      zoom: {
+        defaultScale: 1
+      },
+      pan: {
+        enabled: true
+      },
+      style: {
+        height: 560
+      }
+    });
+  }
+};
+
+/**
+ * Floor Map 视图 - 阅读态（方桌同样用 Figma 样式）
+ */
+export var FloorMapViewRead = {
+  parameters: {
+    docs: {
+      description: {
+        story: '平面图视图阅读态：无 Tab/工具栏，方桌采用 Figma 设计稿样式。'
+      }
+    }
+  },
+  args: {
+    items: [],
+    renderItem: function renderItem(item) {
+      return renderSimpleItem(item);
+    },
+    renderItemByKind: {
+      table: getRenderItemByKindTable(mockDataSources),
+      roundTable: getRenderItemByKindRoundTable(mockDataSources)
+    },
+    floorMapConfig: mockFloorMapConfig,
+    dataSources: mockDataSources,
+    mode: 'read',
+    mapLayer: {
+      backgroundType: 'color',
+      backgroundColor: '#f5f5f5',
+      padding: 16
+    },
+    zoom: {
+      defaultScale: 1
+    },
+    pan: {
+      enabled: true
+    },
+    style: {
+      height: 400
+    }
+  }
+};
+
 /**
  * 自定义控制按钮显隐
  */
@@ -526,6 +875,59 @@ export var ControlsHidden = {
   }
 };
 
+/**
+ * `FloorMapLayoutProvider` 注入 `floorMapConfig` / `dataSources`；Layout 仅传展示向 props
+ */
+export var FloorMapWithLayoutProvider = {
+  parameters: {
+    docs: {
+      description: {
+        story: '演示 `FloorMapLayoutProvider`：`floorMapConfig` 与 `dataSources` 由 Context 提供，`PisellFloorMapLayout` 只写 `renderItemByKind`、`mapLayer`、`mode` 等。'
+      }
+    }
+  },
+  render: function FloorMapWithLayoutProviderRender() {
+    var providerValue = useMemo(function () {
+      return {
+        floorMapConfig: mockFloorMapConfig,
+        dataSources: mockDataSources
+      };
+    }, []);
+    return /*#__PURE__*/React.createElement(FloorMapLayoutProvider, {
+      value: providerValue
+    }, /*#__PURE__*/React.createElement(PisellFloorMapLayout, {
+      items: [],
+      renderItem: function renderItem(item) {
+        return renderSimpleItem(item);
+      },
+      renderItemByKind: {
+        table: getRenderItemByKindTable(mockDataSources),
+        roundTable: getRenderItemByKindRoundTable(mockDataSources)
+      },
+      mode: "edit",
+      mapLayer: {
+        backgroundType: 'color',
+        backgroundColor: '#f5f5f5',
+        padding: 16
+      },
+      zoom: {
+        defaultScale: 1
+      },
+      pan: {
+        enabled: true
+      },
+      controls: {
+        showZoom: true,
+        showFullscreen: true,
+        showFitBounds: true
+      },
+      style: {
+        height: 560
+      }
+    }));
+  }
+};
+
 // ---------- Figma 设计稿还原（node 14004:1168）----------
 
 /** 桌台状态：对应 Figma 中的边框颜色与图例 */
@@ -914,12 +1316,12 @@ function FigmaCardRow(_ref) {
   }, children));
 }
 
-/** 根据 item id 前缀得到小条数量：S=1, M=2, L=3, X=3, XL=4 */
+/** 根据 item id 前缀得到小条数量：S=1, M=2, L=3, X=3, XL=4；编辑态落位 id 可能为 dataSourceKey_id，按后半或默认 1 */
 function getBarCountFromItemId(id) {
   var upper = id.toUpperCase();
-  if (upper.startsWith('XL-')) return 4;
-  if (upper.startsWith('L-') || upper.startsWith('X-')) return 3;
-  if (upper.startsWith('M-')) return 2;
+  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; // S- 及其他
 }
 var CARD_BAR_WIDTH = 80;
@@ -953,9 +1355,13 @@ function CardBars(_ref2) {
     });
   }));
 }
-function renderFigmaTableCard(item) {
-  var _item$status, _item$customerName, _item$reserveTime;
-  var status = (_item$status = item.status) !== null && _item$status !== void 0 ? _item$status : 'available';
+
+/** 方桌卡片展示用数据结构（与 Figma 设计一致，供编辑态/阅读态复用） */
+
+/** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框），供 FigmaDesign 与编辑态方桌复用 */
+function renderFigmaStyleTableCard(cardItem) {
+  var _cardItem$status, _cardItem$displayName, _cardItem$customerNam, _cardItem$reserveTime;
+  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", {
@@ -972,7 +1378,7 @@ function renderFigmaTableCard(item) {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(CardBars, {
-    count: getBarCountFromItemId(item.id),
+    count: getBarCountFromItemId(cardItem.id),
     position: "top",
     barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
   }), /*#__PURE__*/React.createElement("div", {
@@ -991,10 +1397,7 @@ function renderFigmaTableCard(item) {
       alignItems: isAvailable ? 'stretch' : 'center',
       gap: 4
     }
-  }, isAvailable ?
-  /*#__PURE__*/
-  /* 空闲：仅 ID 居中 */
-  React.createElement("div", {
+  }, isAvailable ? /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       display: 'flex',
@@ -1007,10 +1410,7 @@ function renderFigmaTableCard(item) {
       color: FIGMA.gray400,
       letterSpacing: 0
     }
-  }, item.id) :
-  /*#__PURE__*/
-  /* 有内容：ID + 状态行整体居中 */
-  React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, (_cardItem$displayName = cardItem.displayName) !== null && _cardItem$displayName !== void 0 ? _cardItem$displayName : cardItem.id) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       fontWeight: 600,
       fontSize: 18,
@@ -1019,7 +1419,7 @@ function renderFigmaTableCard(item) {
       letterSpacing: 0,
       textAlign: 'center'
     }
-  }, item.id), status === 'reserved' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FigmaCardRow, {
+  }, cardItem.id), status === 'reserved' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FigmaCardRow, {
     icon: /*#__PURE__*/React.createElement(Avatar, {
       size: 16,
       icon: /*#__PURE__*/React.createElement(UserOutlined, null),
@@ -1027,27 +1427,58 @@ function renderFigmaTableCard(item) {
         backgroundColor: FIGMA.gray200
       }
     })
-  }, /*#__PURE__*/React.createElement("span", null, (_item$customerName = item.customerName) !== null && _item$customerName !== void 0 ? _item$customerName : '')), /*#__PURE__*/React.createElement(FigmaCardRow, {
+  }, /*#__PURE__*/React.createElement("span", null, (_cardItem$customerNam = cardItem.customerName) !== null && _cardItem$customerNam !== void 0 ? _cardItem$customerNam : '')), /*#__PURE__*/React.createElement(FigmaCardRow, {
     icon: /*#__PURE__*/React.createElement(ClockCircleOutlined, null)
-  }, /*#__PURE__*/React.createElement("span", null, (_item$reserveTime = item.reserveTime) !== null && _item$reserveTime !== void 0 ? _item$reserveTime : ''))), (status === 'dining' || status === 'waiting' || status === 'billed' || status === 'availableSoon') && item.guests != null && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FigmaCardRow, {
+  }, /*#__PURE__*/React.createElement("span", null, (_cardItem$reserveTime = cardItem.reserveTime) !== null && _cardItem$reserveTime !== void 0 ? _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, item.guests)), item.dishes && /*#__PURE__*/React.createElement(FigmaCardRow, {
+  }, /*#__PURE__*/React.createElement("span", null, cardItem.guests)), cardItem.dishes && /*#__PURE__*/React.createElement(FigmaCardRow, {
     icon: /*#__PURE__*/React.createElement(AuditOutlined, null)
-  }, /*#__PURE__*/React.createElement("span", null, item.dishes)), item.duration && /*#__PURE__*/React.createElement(FigmaCardRow, {
+  }, /*#__PURE__*/React.createElement("span", null, cardItem.dishes)), cardItem.duration && /*#__PURE__*/React.createElement(FigmaCardRow, {
     icon: /*#__PURE__*/React.createElement(FieldTimeOutlined, null)
-  }, /*#__PURE__*/React.createElement("span", null, item.duration))))), /*#__PURE__*/React.createElement(CardBars, {
-    count: getBarCountFromItemId(item.id),
+  }, /*#__PURE__*/React.createElement("span", null, cardItem.duration))))), /*#__PURE__*/React.createElement(CardBars, {
+    count: getBarCountFromItemId(cardItem.id),
     position: "bottom",
     barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
   }));
 }
+function renderFigmaTableCard(item) {
+  return renderFigmaStyleTableCard({
+    id: item.id,
+    status: item.status,
+    customerName: item.customerName,
+    reserveTime: item.reserveTime,
+    guests: item.guests,
+    dishes: item.dishes,
+    duration: item.duration
+  });
+}
+
+/** 从编辑态 merged item + dataSources 得到方桌卡片数据（用于 renderItemByKind.table） */
+function getTableCardItemFromMerged(item, dataSources) {
+  var _item$_sceneElement, _dataSources$binding$, _binding$recordId, _ref3;
+  var binding = (_item$_sceneElement = item._sceneElement) === null || _item$_sceneElement === void 0 ? void 0 : _item$_sceneElement.dataBinding;
+  var record = binding ? (_dataSources$binding$ = dataSources[binding.dataSourceKey]) === null || _dataSources$binding$ === void 0 ? void 0 : _dataSources$binding$.find(function (r) {
+    return r.id === binding.recordId;
+  }) : undefined;
+  var displayId = (_binding$recordId = binding === null || binding === void 0 ? void 0 : binding.recordId) !== null && _binding$recordId !== void 0 ? _binding$recordId : item.id;
+  return {
+    id: displayId,
+    displayName: record === null || record === void 0 ? void 0 : record.name,
+    status: (_ref3 = record === null || record === void 0 ? void 0 : record.status) !== null && _ref3 !== void 0 ? _ref3 : 'available',
+    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,
+    dishes: record === null || record === void 0 ? void 0 : record.dishes,
+    duration: record === null || record === void 0 ? void 0 : record.duration
+  };
+}
 
 /** 图例单项：圆点 + 文案 */
-function LegendItem(_ref3) {
-  var color = _ref3.color,
-    label = _ref3.label,
-    _ref3$fill = _ref3.fill,
-    fill = _ref3$fill === void 0 ? false : _ref3$fill;
+function LegendItem(_ref4) {
+  var color = _ref4.color,
+    label = _ref4.label,
+    _ref4$fill = _ref4.fill,
+    fill = _ref4$fill === void 0 ? false : _ref4$fill;
   return /*#__PURE__*/React.createElement("span", {
     style: {
       display: 'inline-flex',
@@ -1072,11 +1503,11 @@ function LegendItem(_ref3) {
 }
 
 /** 图例单项（Figma 14131:6266）：16px 圆点，Available 白底+灰边，其余实心填色；文案 14px Medium、黑色 */
-function LegendItem14131(_ref4) {
-  var color = _ref4.color,
-    label = _ref4.label,
-    _ref4$fill = _ref4.fill,
-    fill = _ref4$fill === void 0 ? false : _ref4$fill;
+function LegendItem14131(_ref5) {
+  var color = _ref5.color,
+    label = _ref5.label,
+    _ref5$fill = _ref5.fill,
+    fill = _ref5$fill === void 0 ? false : _ref5$fill;
   return /*#__PURE__*/React.createElement("span", {
     style: {
       display: 'inline-flex',

package/es/components/pisellFloorMapLayout/components/CanvasTabs.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { FloorMapCanvas, FloorMapCanvasNameI18n } from '../types';
+import './CanvasTabs.less';
+export interface CanvasTabsProps {
+    /** 画布列表 */
+    canvases: FloorMapCanvas[];
+    /** 当前画布 id */
+    currentCanvasId: string | null;
+    /** 切换画布 */
+    onTabChange: (canvasId: string) => void;
+    /** 是否允许添加/删除/重命名画布（编辑态） */
+    canEdit?: boolean;
+    /** 添加画布 */
+    onAddCanvas?: () => void;
+    /** 删除画布（至少保留一个画布时可调用） */
+    onRemoveCanvas?: (canvasId: string) => void;
+    /** 重命名画布（对象写入 `name`，并清除 `nameKey`） */
+    onRenameCanvas?: (canvasId: string, name: string | FloorMapCanvasNameI18n) => void;
+    className?: string;
+}
+export declare function CanvasTabs(props: CanvasTabsProps): JSX.Element;
+export default CanvasTabs;