@pisell/materials 6.11.17 → 6.11.19

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

@@ -0,0 +1,1667 @@
+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',
+  gray50: '#F9FAFB',
+  gray100: '#F2F4F7',
+  gray200: '#EAECF0',
+  gray300: '#D0D5DD',
+  gray400: '#98A2B3',
+  gray500: '#667085',
+  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',
+  // 状态色（与图例、卡片边框及小条一致）
+  available: '#EAECF0',
+  reserved: '#9254de',
+  waiting: '#fa8c16',
+  dining: '#1890ff',
+  billed: '#52c41a',
+  availableSoon: '#f5222d',
+  /** 选中 Tab 背景（node 13998:648） */
+  tabActiveBg: '#1890ff',
+  /** 矩形外小条：Available 用灰，有状态用对应边框色 */
+  barFillAvailable: '#EAECF0',
+  /** 图例圆点色（Figma 14131:6266 设计 token） */
+  legendReserved: '#D6BBFB',
+  legendWaiting: '#FEC84B',
+  legendDining: '#84CAFF',
+  legendBilled: '#75E0A7',
+  legendAvailableSoon: '#FDA29B'
+};
+
+/**
+ * PisellFloorMapLayout 楼层图布局
+ *
+ * 空间布局视图：在二维平面按坐标渲染资源（桌台/房间/工位等），
+ * 支持缩放、平移、复位、区域定位，仅负责展示与交互。
+ */
+var meta = {
+  title: 'Data Display/PisellFloorMapLayout',
+  component: PisellFloorMapLayout,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: '在二维平面按坐标渲染资源，状态由外部通过 item 与 renderItem 传入。支持 itemUnit：cell（格子数）或 pixel（像素）；格子模式下可用 mapLayer.gap 控制 item 间距。支持底层背景/网格、缩放/平移、内置视图控制按钮。'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    itemUnit: {
+      control: 'select',
+      options: ['cell', 'pixel'],
+      description: 'item 坐标与尺寸单位：cell 格子数，pixel 像素'
+    },
+    layoutMode: {
+      control: 'select',
+      options: ['free', 'grid'],
+      description: '布局模式'
+    },
+    enableHover: {
+      control: 'boolean',
+      description: '是否开启 hover'
+    }
+  }
+};
+export default meta;
+/** 示例：基础格子项数据（5x4 网格） */
+var defaultItems = [{
+  id: 'S-1',
+  x: 0,
+  y: 0
+}, {
+  id: 'S-2',
+  x: 1,
+  y: 0
+}, {
+  id: 'S-3',
+  x: 2,
+  y: 0
+}, {
+  id: 'S-4',
+  x: 3,
+  y: 0
+}, {
+  id: 'M-1',
+  x: 0,
+  y: 1
+}, {
+  id: 'M-2',
+  x: 1,
+  y: 1
+}, {
+  id: 'M-3',
+  x: 2,
+  y: 1
+}, {
+  id: 'M-4',
+  x: 3,
+  y: 1
+}, {
+  id: 'L-1',
+  x: 0,
+  y: 2
+}, {
+  id: 'L-2',
+  x: 1,
+  y: 2
+}, {
+  id: 'L-3',
+  x: 2,
+  y: 2
+}, {
+  id: 'X-1',
+  x: 0,
+  y: 3
+}, {
+  id: 'X-2',
+  x: 1,
+  y: 3
+}, {
+  id: 'X-3',
+  x: 2,
+  y: 3
+}, {
+  id: 'X-4',
+  x: 3,
+  y: 3
+}];
+
+/** 简单格子渲染：仅显示 id；尊重 item.shape（如 circle 则圆形容器） */
+function renderSimpleItem(item) {
+  var isCircle = item.shape === 'circle';
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: '#fff',
+      border: '4px solid #d9d9d9',
+      borderRadius: isCircle ? '50%' : 4,
+      fontSize: 12
+    }
+  }, item.id);
+}
+
+/**
+ * 默认 - 纯色底 + 简单格子（格子单位，默认 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) {
+      return renderSimpleItem(item);
+    },
+    itemUnit: 'cell',
+    mapLayer: {
+      backgroundType: 'color',
+      backgroundColor: '#f5f5f5',
+      padding: 16,
+      gap: 8
+    },
+    zoom: {
+      defaultScale: 1,
+      min: 0.5,
+      max: 2
+    },
+    pan: {
+      enabled: false
+    },
+    enableHover: true,
+    style: {
+      height: '100%',
+      width: '100%',
+      minHeight: 0
+    }
+  }
+};
+
+/**
+ * 显示网格线（item 间距由 mapLayer.gap 控制）
+ */
+export var WithGrid = {
+  args: {
+    items: defaultItems,
+    renderItem: function renderItem(item) {
+      return renderSimpleItem(item);
+    },
+    itemUnit: 'cell',
+    mapLayer: {
+      backgroundType: 'color',
+      backgroundColor: '#fafafa',
+      showGrid: true,
+      padding: 16,
+      gap: 8
+    },
+    zoom: {
+      defaultScale: 1
+    },
+    pan: {
+      enabled: true
+    }
+  }
+};
+
+/**
+ * 开启平移 - 可拖拽画布
+ */
+export var WithPan = {
+  args: {
+    items: defaultItems,
+    renderItem: function renderItem(item) {
+      return renderSimpleItem(item);
+    },
+    itemUnit: 'cell',
+    mapLayer: {
+      backgroundType: 'color',
+      backgroundColor: '#f0f5ff',
+      showGrid: true,
+      padding: 16,
+      gap: 8
+    },
+    zoom: {
+      defaultScale: 1
+    },
+    pan: {
+      enabled: true
+    },
+    controls: {
+      showZoom: true,
+      showReset: true,
+      showFitBounds: true,
+      showFullscreen: true
+    }
+  }
+};
+
+/**
+ * 不同形状 - 矩形、圆形、三角形；含不同格子宽高（如 rect2 为 2x1）
+ */
+var shapeItems = [{
+  id: 'rect',
+  x: 0,
+  y: 0,
+  shape: 'rect'
+}, {
+  id: 'circle',
+  x: 2,
+  y: 0,
+  shape: 'circle'
+}, {
+  id: 'triangle',
+  x: 4,
+  y: 0,
+  shape: 'triangle'
+}, {
+  id: 'rect2',
+  x: 0,
+  y: 2,
+  width: 2,
+  height: 1
+}];
+export var WithShapes = {
+  args: {
+    items: shapeItems,
+    renderItem: function renderItem(item) {
+      return renderSimpleItem(item);
+    },
+    itemUnit: 'cell',
+    mapLayer: {
+      backgroundType: 'color',
+      backgroundColor: '#f5f5f5',
+      showGrid: true,
+      padding: 16,
+      gap: 8
+    },
+    zoom: {
+      defaultScale: 1
+    },
+    pan: {
+      enabled: true
+    }
+  }
+};
+
+/**
+ * 格子单位下不同宽高 - 每个 item 可设置 width/height（格子数）
+ */
+var variableSizeItems = [{
+  id: '1x1',
+  x: 0,
+  y: 0
+}, {
+  id: '2x1',
+  x: 1,
+  y: 0,
+  width: 2,
+  height: 1
+}, {
+  id: '1x2',
+  x: 3,
+  y: 0,
+  width: 1,
+  height: 2
+}, {
+  id: '2x2',
+  x: 0,
+  y: 2,
+  width: 2,
+  height: 2
+}, {
+  id: '3x1',
+  x: 2,
+  y: 2,
+  width: 3,
+  height: 1
+}];
+export var WithVariableSizes = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'itemUnit 为 cell 时，每条数据可设置 width/height（格子数），实现不同大小的格子。'
+      }
+    }
+  },
+  args: {
+    items: variableSizeItems,
+    renderItem: function renderItem(item) {
+      return renderSimpleItem(item);
+    },
+    itemUnit: 'cell',
+    cellSize: 72,
+    mapLayer: {
+      backgroundType: 'color',
+      backgroundColor: '#f5f5f5',
+      showGrid: true,
+      padding: 16,
+      gap: 8
+    },
+    zoom: {
+      defaultScale: 1
+    },
+    pan: {
+      enabled: true
+    }
+  }
+};
+
+/**
+ * 像素单位 - x、y、width、height 均为像素，可任意位置与尺寸
+ */
+var pixelItems = [{
+  id: 'A',
+  x: 20,
+  y: 20,
+  width: 100,
+  height: 80
+}, {
+  id: 'B',
+  x: 140,
+  y: 20,
+  width: 200,
+  height: 80
+}, {
+  id: 'C',
+  x: 20,
+  y: 120,
+  width: 80,
+  height: 100
+}, {
+  id: 'D',
+  x: 120,
+  y: 120,
+  width: 150,
+  height: 120
+}, {
+  id: 'E',
+  x: 290,
+  y: 120
+} // 不写 width/height 时使用 cellSize 作为默认尺寸
+];
+export var PixelUnits = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'itemUnit 为 pixel 时，item 的 x、y、width、height 均为像素；不写 width/height 时以 cellSize 为默认宽高。'
+      }
+    }
+  },
+  args: {
+    items: pixelItems,
+    renderItem: function renderItem(item) {
+      return renderSimpleItem(item);
+    },
+    itemUnit: 'pixel',
+    cellSize: 64,
+    mapLayer: {
+      backgroundType: 'color',
+      backgroundColor: '#f5f5f5',
+      padding: 16
+    },
+    zoom: {
+      defaultScale: 1
+    },
+    pan: {
+      enabled: true
+    }
+  }
+};
+
+/**
+ * 点击与 Hover 事件
+ */
+export var WithEvents = {
+  args: {
+    items: defaultItems.slice(0, 6),
+    renderItem: function renderItem(item) {
+      return renderSimpleItem(item);
+    },
+    itemUnit: 'cell',
+    mapLayer: {
+      backgroundType: 'color',
+      backgroundColor: '#f5f5f5',
+      padding: 16,
+      gap: 8
+    },
+    enableHover: true,
+    onItemClick: function onItemClick(item) {
+      console.log('click', item.id);
+      alert("\u70B9\u51FB\u4E86 ".concat(item.id));
+    },
+    onItemHover: function onItemHover(item) {
+      return console.log('hover', item.id);
+    },
+    onItemLeave: function onItemLeave(item) {
+      return console.log('leave', item.id);
+    }
+  }
+};
+
+/**
+ * Ref 调用 - 外部按钮控制缩放/复位/区域定位
+ */
+export var WithRefControls = {
+  render: function WithRefControlsRender() {
+    var ref = useRef(null);
+    return /*#__PURE__*/React.createElement(Space, {
+      direction: "vertical",
+      style: {
+        width: '100%'
+      },
+      size: "middle"
+    }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        var _ref$current;
+        return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.zoomIn();
+      }
+    }, "\u653E\u5927"), /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        var _ref$current2;
+        return (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.zoomOut();
+      }
+    }, "\u7F29\u5C0F"), /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        var _ref$current3;
+        return (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.reset();
+      }
+    }, "\u590D\u4F4D"), /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        var _ref$current4;
+        return (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.fitBounds();
+      }
+    }, "\u533A\u57DF\u5B9A\u4F4D")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: 400
+      }
+    }, /*#__PURE__*/React.createElement(PisellFloorMapLayout, {
+      ref: ref,
+      items: defaultItems,
+      renderItem: function renderItem(item) {
+        return renderSimpleItem(item);
+      },
+      itemUnit: "cell",
+      mapLayer: {
+        backgroundType: 'color',
+        backgroundColor: '#fafafa',
+        showGrid: true,
+        padding: 16,
+        gap: 8
+      },
+      zoom: {
+        defaultScale: 1
+      },
+      pan: {
+        enabled: true
+      },
+      style: {
+        height: 400
+      }
+    })));
+  }
+};
+
+/**
+ * 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
+    }
+  }
+};
+
+/**
+ * 自定义控制按钮显隐
+ */
+export var ControlsHidden = {
+  args: {
+    items: defaultItems.slice(0, 4),
+    renderItem: function renderItem(item) {
+      return renderSimpleItem(item);
+    },
+    itemUnit: 'cell',
+    mapLayer: {
+      backgroundType: 'color',
+      backgroundColor: '#f5f5f5',
+      padding: 16,
+      gap: 8
+    },
+    controls: {
+      showZoom: false,
+      showReset: true,
+      showFitBounds: false
+    }
+  }
+};
+
+/**
+ * `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 中的边框颜色与图例 */
+
+/** Figma 桌台项：在 FloorMapItemBase 上扩展状态与展示字段 */
+
+var STATUS_BORDER = {
+  available: FIGMA.gray200,
+  reserved: FIGMA.reserved,
+  waiting: FIGMA.waiting,
+  dining: FIGMA.dining,
+  billed: FIGMA.billed,
+  availableSoon: FIGMA.availableSoon
+};
+
+/** 5 列 x 4 行（最后一行 4 格），与 Figma 设计稿一致 */
+var figmaTableItems = [{
+  id: 'S-1',
+  x: 0,
+  y: 0,
+  status: 'reserved',
+  customerName: 'Carolino',
+  reserveTime: '13:00'
+}, {
+  id: 'S-2',
+  x: 1,
+  y: 0,
+  status: 'available'
+}, {
+  id: 'S-3',
+  x: 2,
+  y: 0,
+  status: 'availableSoon',
+  guests: 7,
+  dishes: '5/5 Dishes',
+  duration: '35m30s'
+}, {
+  id: 'S-4',
+  x: 3,
+  y: 0,
+  status: 'available'
+}, {
+  id: 'S-5',
+  x: 4,
+  y: 0,
+  status: 'available'
+}, {
+  id: 'M-1',
+  x: 0,
+  y: 1,
+  status: 'available'
+}, {
+  id: 'M-2',
+  x: 1,
+  y: 1,
+  status: 'available'
+}, {
+  id: 'M-3',
+  x: 2,
+  y: 1,
+  status: 'waiting',
+  guests: 2,
+  dishes: '3/5 Dishes',
+  duration: '15m30s'
+}, {
+  id: 'M-4',
+  x: 3,
+  y: 1,
+  status: 'available'
+}, {
+  id: 'M-7',
+  x: 4,
+  y: 1,
+  status: 'dining',
+  guests: 5,
+  dishes: '5/5 Dishes',
+  duration: '5m30s'
+}, {
+  id: 'L-1',
+  x: 0,
+  y: 2,
+  status: 'dining',
+  guests: 5,
+  dishes: '5/5 Dishes',
+  duration: '5m30s'
+}, {
+  id: 'L-2',
+  x: 1,
+  y: 2,
+  status: 'billed',
+  guests: 5,
+  dishes: '5/5 Dishes',
+  duration: '25m30s'
+}, {
+  id: 'L-3',
+  x: 2,
+  y: 2,
+  status: 'available'
+}, {
+  id: 'X-1',
+  x: 3,
+  y: 2,
+  status: 'available'
+}, {
+  id: 'L-4',
+  x: 4,
+  y: 2,
+  status: 'available'
+}, {
+  id: 'X-2',
+  x: 0,
+  y: 3,
+  status: 'dining',
+  guests: 5,
+  dishes: '5/5 Dishes',
+  duration: '5m30s'
+}, {
+  id: 'X-3',
+  x: 1,
+  y: 3,
+  status: 'available'
+}, {
+  id: 'X-4',
+  x: 2,
+  y: 3,
+  status: 'waiting',
+  guests: 2,
+  dishes: '3/5 Dishes',
+  duration: '15m30s'
+}, {
+  id: 'X-5',
+  x: 3,
+  y: 3,
+  status: 'available'
+}];
+
+/** Figma node 13998:648 像素布局：小格 160×160，中格 240×160，大格 250×160，XL 超大格 460×160，间距 50px */
+var GAP = 50;
+var SMALL_W = 160;
+var MED_W = 240;
+var LARGE_W = 350;
+var XL_W = 460;
+var H = 160;
+var figma13998PixelItems = [
+// Row 0: S-1, S-2, M-1, L-0（大格带内容，Figma 14000:335）
+{
+  id: 'S-1',
+  x: 0,
+  y: 0,
+  width: SMALL_W,
+  height: H,
+  status: 'reserved',
+  customerName: 'Carolino',
+  reserveTime: '13:00'
+}, {
+  id: 'S-2',
+  x: SMALL_W + GAP,
+  y: 0,
+  width: SMALL_W,
+  height: H,
+  status: 'available'
+}, {
+  id: 'M-1',
+  x: (SMALL_W + GAP) * 2,
+  y: 0,
+  width: MED_W,
+  height: H,
+  status: 'available'
+}, {
+  id: 'L-0',
+  x: (SMALL_W + GAP) * 2 + MED_W + GAP,
+  y: 0,
+  width: LARGE_W,
+  height: H,
+  status: 'dining',
+  guests: 4,
+  dishes: '5/5 Dishes',
+  duration: '18m20s'
+}, {
+  id: 'M-0',
+  x: (SMALL_W + GAP) * 2 + MED_W + GAP + LARGE_W + GAP,
+  y: 0,
+  width: MED_W,
+  height: H,
+  status: 'available'
+},
+// Row 1: S-3, M-4, S-5, S-6, XL-0（第二个改成 m，最后添加 xl）
+{
+  id: 'S-3',
+  x: 0,
+  y: H + GAP,
+  width: SMALL_W,
+  height: H,
+  status: 'availableSoon',
+  guests: 7,
+  dishes: '5/5 Dishes',
+  duration: '35m30s'
+}, {
+  id: 'M-4',
+  x: SMALL_W + GAP,
+  y: H + GAP,
+  width: MED_W,
+  height: H,
+  status: 'available'
+}, {
+  id: 'S-5',
+  x: SMALL_W + GAP + MED_W + GAP,
+  y: H + GAP,
+  width: SMALL_W,
+  height: H,
+  status: 'dining',
+  guests: 2,
+  dishes: '3/5 Dishes',
+  duration: '15m30s'
+}, {
+  id: 'S-6',
+  x: SMALL_W + GAP + MED_W + GAP + SMALL_W + GAP,
+  y: H + GAP,
+  width: SMALL_W,
+  height: H,
+  status: 'reserved',
+  customerName: 'Alex',
+  reserveTime: '14:00'
+}, {
+  id: 'XL-0',
+  x: (SMALL_W + GAP) * 2 + MED_W + GAP + SMALL_W + GAP,
+  y: H + GAP,
+  width: XL_W,
+  height: H,
+  status: 'available'
+},
+// Row 2: L-1(MED), L-2(LARGE), L-5(LARGE), S-7, S-10（S-7 紧接 L-5 右边界 + GAP，避免与 L-5 重叠）
+{
+  id: 'L-1',
+  x: 0,
+  y: (H + GAP) * 2,
+  width: MED_W,
+  height: H,
+  status: 'available'
+}, {
+  id: 'L-2',
+  x: MED_W + GAP,
+  y: (H + GAP) * 2,
+  width: LARGE_W,
+  height: H,
+  status: 'billed',
+  guests: 5,
+  dishes: '5/5 Dishes',
+  duration: '25m30s'
+}, {
+  id: 'L-5',
+  x: MED_W + GAP + LARGE_W + GAP,
+  y: (H + GAP) * 2,
+  width: LARGE_W,
+  height: H,
+  status: 'available'
+}, {
+  id: 'S-7',
+  x: MED_W + GAP + LARGE_W + GAP + LARGE_W + GAP,
+  y: (H + GAP) * 2,
+  width: SMALL_W,
+  height: H,
+  status: 'reserved',
+  customerName: 'Carolino',
+  reserveTime: '13:00'
+}, {
+  id: 'S-10',
+  x: MED_W + GAP + LARGE_W + GAP + LARGE_W + GAP + SMALL_W + GAP,
+  y: (H + GAP) * 2,
+  width: SMALL_W,
+  height: H,
+  status: 'available'
+},
+// Row 3: M-3, L-3, S-8, M-5（第四格 = S-8 右边界 + GAP，避免重叠）
+{
+  id: 'M-3',
+  x: 0,
+  y: (H + GAP) * 3,
+  width: MED_W,
+  height: H,
+  status: 'waiting',
+  guests: 2,
+  dishes: '3/5 Dishes',
+  duration: '15m30s'
+}, {
+  id: 'L-3',
+  x: MED_W + GAP,
+  y: (H + GAP) * 3,
+  width: LARGE_W,
+  height: H,
+  status: 'available'
+}, {
+  id: 'S-8',
+  x: MED_W + GAP + LARGE_W + GAP,
+  y: (H + GAP) * 3,
+  width: SMALL_W,
+  height: H,
+  status: 'dining',
+  guests: 6,
+  dishes: '4/5 Dishes',
+  duration: '24m30s'
+}, {
+  id: 'M-5',
+  x: MED_W + GAP + LARGE_W + GAP + SMALL_W + GAP,
+  y: (H + GAP) * 3,
+  width: MED_W,
+  height: H,
+  status: 'available'
+},
+// Row 4: X-1, S-9, X-2, L-4
+{
+  id: 'X-1',
+  x: 0,
+  y: (H + GAP) * 4,
+  width: LARGE_W,
+  height: H,
+  status: 'available'
+}, {
+  id: 'S-9',
+  x: LARGE_W + GAP,
+  y: (H + GAP) * 4,
+  width: SMALL_W,
+  height: H,
+  status: 'available'
+}, {
+  id: 'X-2',
+  x: LARGE_W + GAP + SMALL_W + GAP,
+  y: (H + GAP) * 4,
+  width: LARGE_W,
+  height: H,
+  status: 'waiting',
+  guests: 2,
+  dishes: '3/5 Dishes',
+  duration: '15m30s'
+}, {
+  id: 'L-4',
+  x: LARGE_W + GAP + SMALL_W + GAP + LARGE_W + GAP,
+  y: (H + GAP) * 4,
+  width: LARGE_W,
+  height: H,
+  status: 'billed',
+  guests: 5,
+  dishes: '5/5 Dishes',
+  duration: '25m30s'
+},
+// Row 5: XL-1 超大格
+{
+  id: 'XL-1',
+  x: 0,
+  y: (H + GAP) * 5,
+  width: XL_W,
+  height: H,
+  status: 'dining',
+  guests: 12,
+  dishes: '8/8 Dishes',
+  duration: '45m00s'
+}];
+
+/** 卡片内一行：左侧图标 + 文案（Figma Text sm/Regular 14/400/20） */
+function FigmaCardRow(_ref) {
+  var icon = _ref.icon,
+    children = _ref.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));
+}
+
+/** 根据 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-') || 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;
+var CARD_BAR_HEIGHT = 12;
+
+/** 矩形外小条：S 上下各 1 条，M 各 2 条，L 各 3 条，XL 各 4 条；单条 80×12px */
+function CardBars(_ref2) {
+  var count = _ref2.count,
+    position = _ref2.position,
+    barColor = _ref2.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
+      }
+    });
+  }));
+}
+
+/** 方桌卡片展示用数据结构（与 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", {
+    className: "figma-table-card",
+    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("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("div", {
+    style: {
+      flex: 1,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: 0,
+      fontWeight: 600,
+      fontSize: 18,
+      lineHeight: '24px',
+      color: FIGMA.gray400,
+      letterSpacing: 0
+    }
+  }, (_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,
+      lineHeight: '24px',
+      color: FIGMA.gray900,
+      letterSpacing: 0,
+      textAlign: 'center'
+    }
+  }, 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),
+      style: {
+        backgroundColor: FIGMA.gray200
+      }
+    })
+  }, /*#__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, (_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, 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(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(_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',
+      alignItems: 'center',
+      gap: 6,
+      fontFamily: FIGMA.fontFamily,
+      fontSize: 14,
+      fontWeight: 500,
+      lineHeight: '20px',
+      color: FIGMA.gray700
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 8,
+      height: 8,
+      borderRadius: '50%',
+      background: fill ? color : FIGMA.white,
+      border: "4px solid ".concat(color),
+      flexShrink: 0
+    }
+  }), label);
+}
+
+/** 图例单项（Figma 14131:6266）：16px 圆点，Available 白底+灰边，其余实心填色；文案 14px Medium、黑色 */
+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',
+      alignItems: 'center',
+      gap: 6,
+      fontFamily: FIGMA.fontFamily,
+      fontSize: 14,
+      fontWeight: 500,
+      lineHeight: '20px',
+      color: '#000000'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 16,
+      height: 16,
+      borderRadius: '50%',
+      background: fill ? color : FIGMA.white,
+      border: fill ? 'none' : "1px solid ".concat(FIGMA.gray200),
+      flexShrink: 0
+    }
+  }), label);
+}
+
+/**
+ * Figma 设计稿效果 - 餐厅桌台状态图（顶部 Tab + 图例参考 node 14131:6266，内容区不变）
+ */
+export var FigmaDesign = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Figma node 14131:6266 还原：顶部 Tabs 灰底容器、选中白底+阴影、16px Semibold；图例 16px 圆点（Available 白底灰边/其余实心）、14px Medium 黑字、gap 12px 40px。内容区未改。'
+      }
+    }
+  },
+  render: function FigmaDesignRender() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 20,
+        background: FIGMA.gray50,
+        padding: 24,
+        borderRadius: 12,
+        fontFamily: FIGMA.fontFamily
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "figma-story-header-14131",
+      style: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexWrap: 'nowrap',
+        gap: 24
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "figma-story-tabs-wrap-14131",
+      style: {
+        flexShrink: 0,
+        background: FIGMA.gray50,
+        border: "1px solid ".concat(FIGMA.gray200),
+        padding: 6,
+        borderRadius: 8,
+        display: 'inline-flex',
+        gap: 8
+      }
+    }, /*#__PURE__*/React.createElement(Tabs, {
+      defaultActiveKey: "main",
+      size: "middle",
+      style: {
+        marginBottom: 0
+      },
+      items: [{
+        key: 'main',
+        label: 'Main Area'
+      }, {
+        key: 'secondary',
+        label: 'Secondary Area'
+      }, {
+        key: 'vip',
+        label: 'VIP Area'
+      }],
+      className: "figma-story-tabs figma-story-tabs-14131"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "figma-story-legend-14131",
+      style: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '12px 40px',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        minWidth: 0
+      }
+    }, /*#__PURE__*/React.createElement(LegendItem14131, {
+      color: FIGMA.gray200,
+      label: "Available (4)",
+      fill: false
+    }), /*#__PURE__*/React.createElement(LegendItem14131, {
+      color: FIGMA.legendReserved,
+      label: "Reserved (2)",
+      fill: true
+    }), /*#__PURE__*/React.createElement(LegendItem14131, {
+      color: FIGMA.legendWaiting,
+      label: "Waiting (3)",
+      fill: true
+    }), /*#__PURE__*/React.createElement(LegendItem14131, {
+      color: FIGMA.legendDining,
+      label: "Dining (1)",
+      fill: true
+    }), /*#__PURE__*/React.createElement(LegendItem14131, {
+      color: FIGMA.legendBilled,
+      label: "Billed (2)",
+      fill: true
+    }), /*#__PURE__*/React.createElement(LegendItem14131, {
+      color: FIGMA.legendAvailableSoon,
+      label: "Available Soon (1)",
+      fill: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "figma-story-map-wrap",
+      style: {
+        height: 520,
+        background: FIGMA.white,
+        border: "4px solid ".concat(FIGMA.gray200),
+        borderRadius: 8,
+        overflow: 'hidden',
+        boxShadow: FIGMA.shadowSm
+      }
+    }, /*#__PURE__*/React.createElement(PisellFloorMapLayout, {
+      className: "figma-story-map",
+      items: figma13998PixelItems,
+      renderItem: function renderItem(item) {
+        return renderFigmaTableCard(item);
+      },
+      itemUnit: "pixel",
+      cellSize: 64,
+      mapLayer: {
+        showGrid: false,
+        padding: 20
+      },
+      zoom: {
+        defaultScale: 0.8,
+        min: 0.5,
+        max: 2
+      },
+      pan: {
+        enabled: true
+      },
+      controls: {
+        showZoom: true,
+        showFullscreen: true
+      },
+      style: {
+        height: '100%'
+      }
+    })), /*#__PURE__*/React.createElement("style", null, "\n          .figma-story-tabs-wrap-14131 .ant-tabs-nav {\n            margin: 0;\n          }\n          .figma-story-tabs-wrap-14131 .ant-tabs-nav-list {\n            gap: 8px;\n          }\n          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-tab {\n            font-family: ".concat(FIGMA.fontFamily, ";\n            padding: 10px 14px;\n            margin: 0;\n            font-size: 16px;\n            font-weight: 600;\n            line-height: 24px;\n            color: ").concat(FIGMA.gray500, ";\n            border-radius: 6px;\n          }\n          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-tab.ant-tabs-tab-active {\n            background: ").concat(FIGMA.white, ";\n            box-shadow: ").concat(FIGMA.shadowSm, ";\n          }\n          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n            color: ").concat(FIGMA.gray700, ";\n          }\n          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-ink-bar {\n            display: none;\n          }\n          .figma-story-tabs.figma-story-tabs-14131 .ant-tabs-nav::before {\n            display: none;\n          }\n          .figma-story-map-wrap [class*=\"react-transform-wrapper\"],\n          .figma-story-map-wrap [class*=\"react-transform-element\"] {\n            overflow: visible !important;\n          }\n          .figma-story-map-wrap .pisell-floor-map-layout {\n            overflow: visible !important;\n          }\n          .figma-table-card,\n          .figma-table-card * {\n            visibility: visible !important;\n          }\n          .figma-table-card {\n            color: ").concat(FIGMA.gray900, ";\n          }\n          .figma-table-card .ant-avatar {\n            flex-shrink: 0;\n          }\n        ")));
+  }
+};