@pisell/materials 6.11.17 → 6.11.19

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.less

@@ -0,0 +1,92 @@
+.pisell-floor-map-layout {
+  position: relative;
+  width: 100%;
+  height: 400px;
+  overflow: hidden;
+  background: #fafafa;
+
+  &-loading,
+  &-save-error {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    padding: 8px 12px;
+    font-size: 14px;
+  }
+
+  &-loading {
+    top: 0;
+    background: rgba(255, 255, 255, 0.9);
+    color: #666;
+  }
+
+  &-save-error {
+    top: 0;
+    background: #fff2f0;
+    color: #cf1322;
+  }
+
+  &-edit-placeholder-toolbar {
+    position: absolute;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 8px 16px;
+    font-size: 12px;
+    color: #999;
+    background: #fff;
+    border: 1px dashed #d9d9d9;
+    border-radius: 4px;
+    z-index: 5;
+  }
+
+  &-edit-panel-wrap {
+    position: absolute;
+    top: 50%;
+    right: 16px;
+    transform: translateY(-50%);
+    z-index: 10;
+  }
+
+  &-place-overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    cursor: crosshair;
+    z-index: 1;
+  }
+
+  /* 编辑态拖入图源：平时穿透事件，激活时盖住画布以接收 drop */
+
+  &-map-drop-layer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    z-index: 0;
+    box-sizing: border-box;
+
+    &-active {
+      pointer-events: auto;
+      z-index: 100;
+      box-shadow: inset 0 0 0 2px #1677ff;
+      background: rgba(22, 119, 255, 0.06);
+    }
+  }
+
+  /** 视口内悬浮层：不随 Transform 缩放平移，与 ViewControls 同级 */
+
+  &-viewport-overlay {
+    position: absolute;
+    left: 12px;
+    top: 12px;
+    z-index: 19;
+    pointer-events: none;
+    max-width: min(280px, 46vw);
+
+    > * {
+      pointer-events: auto;
+    }
+  }
+}

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.stories.d.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellFloorMapLayout } from './PisellFloorMapLayout';
+/**
+ * PisellFloorMapLayout 楼层图布局
+ *
+ * 空间布局视图：在二维平面按坐标渲染资源（桌台/房间/工位等），
+ * 支持缩放、平移、复位、区域定位，仅负责展示与交互。
+ */
+declare const meta: Meta<typeof PisellFloorMapLayout>;
+export default meta;
+declare type Story = StoryObj<typeof PisellFloorMapLayout>;
+/**
+ * 默认 - 纯色底 + 简单格子（格子单位，默认 item 间距 8px）
+ */
+export declare const Default: Story;
+/**
+ * 显示网格线（item 间距由 mapLayer.gap 控制）
+ */
+export declare const WithGrid: Story;
+/**
+ * 开启平移 - 可拖拽画布
+ */
+export declare const WithPan: Story;
+export declare const WithShapes: Story;
+export declare const WithVariableSizes: Story;
+export declare const PixelUnits: Story;
+/**
+ * 点击与 Hover 事件
+ */
+export declare const WithEvents: Story;
+/**
+ * Ref 调用 - 外部按钮控制缩放/复位/区域定位
+ */
+export declare const WithRefControls: Story;
+export declare const FloorMapViewEdit: Story;
+/**
+ * 平面图编辑态 + 自定义数据源记录表单（`dataSourceRecordForm.sales`）
+ */
+export declare const FloorMapViewEditCustomRecordForm: Story;
+/**
+ * Floor Map 视图 - 阅读态（方桌同样用 Figma 样式）
+ */
+export declare const FloorMapViewRead: Story;
+/**
+ * 自定义控制按钮显隐
+ */
+export declare const ControlsHidden: Story;
+/**
+ * `FloorMapLayoutProvider` 注入 `floorMapConfig` / `dataSources`；Layout 仅传展示向 props
+ */
+export declare const FloorMapWithLayoutProvider: Story;
+/**
+ * Figma 设计稿效果 - 餐厅桌台状态图（顶部 Tab + 图例参考 node 14131:6266，内容区不变）
+ */
+export declare const FigmaDesign: Story;