@pisell/materials 1.0.1055 → 1.0.1057

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

@@ -0,0 +1,1234 @@
+import { useRef } from 'react';
+import { Button, Space, Tabs, Avatar } from 'antd';
+import { UserOutlined, ClockCircleOutlined, TeamOutlined, AuditOutlined, FieldTimeOutlined } from '@ant-design/icons';
+import { PisellFloorMapLayout } from "./PisellFloorMapLayout";
+// 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 */
+function renderSimpleItem(item) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: '#fff',
+      border: '4px solid #d9d9d9',
+      borderRadius: 4,
+      fontSize: 12
+    }
+  }, item.id);
+}
+
+/**
+ * 默认 - 纯色底 + 简单格子（格子单位，默认 item 间距 8px）
+ */
+export var Default = {
+  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
+  }
+};
+
+/**
+ * 显示网格线（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
+    }
+  }
+};
+
+/**
+ * 不同形状 - 矩形、圆形、三角形；含不同格子宽高（如 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
+      }
+    })));
+  }
+};
+
+/**
+ * 自定义控制按钮显隐
+ */
+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
+    }
+  }
+};
+
+// ---------- 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 */
+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;
+  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
+      }
+    });
+  }));
+}
+function renderFigmaTableCard(item) {
+  var _item$status, _item$customerName, _item$reserveTime;
+  var status = (_item$status = item.status) !== null && _item$status !== void 0 ? _item$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(item.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__*/
+  /* 空闲：仅 ID 居中 */
+  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
+    }
+  }, item.id) :
+  /*#__PURE__*/
+  /* 有内容：ID + 状态行整体居中 */
+  React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600,
+      fontSize: 18,
+      lineHeight: '24px',
+      color: FIGMA.gray900,
+      letterSpacing: 0,
+      textAlign: 'center'
+    }
+  }, item.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, (_item$customerName = item.customerName) !== null && _item$customerName !== void 0 ? _item$customerName : '')), /*#__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, {
+    icon: /*#__PURE__*/React.createElement(TeamOutlined, null)
+  }, /*#__PURE__*/React.createElement("span", null, item.guests)), item.dishes && /*#__PURE__*/React.createElement(FigmaCardRow, {
+    icon: /*#__PURE__*/React.createElement(AuditOutlined, null)
+  }, /*#__PURE__*/React.createElement("span", null, item.dishes)), item.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),
+    position: "bottom",
+    barColor: isAvailable ? FIGMA.barFillAvailable : borderColor
+  }));
+}
+
+/** 图例单项：圆点 + 文案 */
+function LegendItem(_ref3) {
+  var color = _ref3.color,
+    label = _ref3.label,
+    _ref3$fill = _ref3.fill,
+    fill = _ref3$fill === void 0 ? false : _ref3$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(_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: '#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
+      },
+      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        ")));
+  }
+};