@pisell/materials 1.8.24 → 1.8.25

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -35,7 +35,7 @@ __export(PisellFloorMapLayout_exports, {
 module.exports = __toCommonJS(PisellFloorMapLayout_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
-var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
 var import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
 var import_MapLayer = __toESM(require("./components/MapLayer"));
 var import_ItemLayer = __toESM(require("./components/ItemLayer"));
@@ -97,8 +97,10 @@ function PisellFloorMapLayoutInner(props, ref) {
     floorMapFullscreenMode,
     showDataSourceRecordFormBlock,
     floorMapViewportOverlay,
-    canvasTabsBarTrailing
+    canvasTabsBarTrailing,
+    viewportDockTrailing
   } = p;
+  const { token } = import_antd.theme.useToken();
   const isFloorMapView = Boolean(floorMapConfigProp);
   const contentOffsetRef = (0, import_react.useRef)({ x: 0, y: 0 });
   const mapDropLayerRef = (0, import_react.useRef)(null);
@@ -139,7 +141,10 @@ function PisellFloorMapLayoutInner(props, ref) {
     editPanelParams,
     placeOverlayClass,
     isLayoutDirty,
-    toggleDraftCanvasShowGrid
+    toggleDraftCanvasShowGrid,
+    toggleSelectedLayoutLock,
+    duplicateSelectedElement,
+    deleteSelectedElement
   } = edit;
   const effectiveMapLayer = (0, import_react.useMemo)(() => {
     if (!isFloorMapView || !config || !currentCanvasId) {
@@ -166,36 +171,75 @@ function PisellFloorMapLayoutInner(props, ref) {
   const engineCtx = (0, import_useEngineContext.default)();
   const engineLocale = ((_b = (_a = engineCtx == null ? void 0 : engineCtx.engine) == null ? void 0 : _a.props) == null ? void 0 : _b.locale) || "zh-CN";
   const hasCanvasTabsBarTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
+  const enabledCanvasCount = (0, import_react.useMemo)(
+    () => canvasesForTabs.filter((c) => c.enabled).length,
+    [canvasesForTabs]
+  );
   const showReadModeCanvasTabsBar = (0, import_react.useMemo)(() => {
     if (!isFloorMapView || mode !== "read" || !config) return false;
     if (hasCanvasTabsBarTrailing) return true;
-    return canvasesForTabs.filter((c) => c.enabled).length > 1;
-  }, [isFloorMapView, mode, config, canvasesForTabs, hasCanvasTabsBarTrailing]);
+    return enabledCanvasCount > 1;
+  }, [
+    isFloorMapView,
+    mode,
+    config,
+    hasCanvasTabsBarTrailing,
+    enabledCanvasCount
+  ]);
   const readCanvasTabsAriaLabel = (0, import_react.useMemo)(() => {
     (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
     return import_utils.locales.getText("pisell-floor-map-layout.read-canvas-tabs.aria");
   }, [engineLocale]);
-  const readCanvasTabsFsLabels = (0, import_react.useMemo)(() => {
-    (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
-    return {
-      fsEnterAria: import_utils.locales.getText(
-        "pisell-floor-map-layout.edit-top-bar.fullscreen-enter-aria"
-      ),
-      fsEnterTitle: import_utils.locales.getText(
-        "pisell-floor-map-layout.edit-top-bar.fullscreen-enter-title"
-      ),
-      fsExitAria: import_utils.locales.getText(
-        "pisell-floor-map-layout.edit-top-bar.fullscreen-exit-aria"
-      ),
-      fsExitTitle: import_utils.locales.getText(
-        "pisell-floor-map-layout.edit-top-bar.fullscreen-exit-title"
-      )
-    };
-  }, [engineLocale]);
+  const showEditCompactTopBar = isFloorMapView && mode === "edit" && Boolean(config) && !useFullTopChrome;
   const loadingLabel = (0, import_react.useMemo)(() => {
     (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
     return import_utils.locales.getText("pisell-floor-map-layout.loading");
   }, [engineLocale]);
+  const editQuickBar = (0, import_react.useMemo)(() => {
+    if (!isFloorMapView || mode !== "edit" || !(config == null ? void 0 : config.canvasUi.canEdit) || !selectedId) {
+      return null;
+    }
+    (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
+    const row = items.find((i) => i.id === selectedId);
+    if (!(row == null ? void 0 : row._sceneElement)) return null;
+    return {
+      labels: {
+        lock: import_utils.locales.getText("pisell-floor-map-layout.edit-quick.lock"),
+        unlock: import_utils.locales.getText("pisell-floor-map-layout.edit-quick.unlock"),
+        duplicate: import_utils.locales.getText(
+          "pisell-floor-map-layout.edit-quick.duplicate"
+        ),
+        delete: import_utils.locales.getText("pisell-floor-map-layout.edit-quick.delete"),
+        popTitle: import_utils.locales.getText(
+          "pisell-floor-map-layout.edit-panel.pop-title"
+        ),
+        popDesc: import_utils.locales.getText("pisell-floor-map-layout.edit-panel.pop-desc"),
+        cancel: import_utils.locales.getText(
+          "pisell-floor-map-layout.edit-panel.btn-cancel"
+        ),
+        okDelete: import_utils.locales.getText(
+          "pisell-floor-map-layout.edit-panel.btn-ok-delete"
+        ),
+        ariaToolbar: import_utils.locales.getText(
+          "pisell-floor-map-layout.edit-quick.aria-toolbar"
+        )
+      },
+      isLocked: Boolean(row._sceneElement.layoutTransformLocked),
+      onToggleLock: toggleSelectedLayoutLock,
+      onDuplicate: duplicateSelectedElement,
+      onDelete: deleteSelectedElement
+    };
+  }, [
+    isFloorMapView,
+    mode,
+    config == null ? void 0 : config.canvasUi.canEdit,
+    selectedId,
+    items,
+    engineLocale,
+    toggleSelectedLayoutLock,
+    duplicateSelectedElement,
+    deleteSelectedElement
+  ]);
   const cellSize = cellSizeProp ?? import_layoutMeasurements.DEFAULT_CELL_SIZE;
   const itemGap = (0, import_react.useMemo)(
     () => (0, import_layoutMeasurements.gapToPx)(effectiveMapLayer == null ? void 0 : effectiveMapLayer.gap),
@@ -237,15 +281,14 @@ function PisellFloorMapLayoutInner(props, ref) {
   } = metrics;
   const fsMode = floorMapFullscreenMode ?? "toggle";
   const useFullTopChrome = isFloorMapView && mode === "edit" && (fsMode === "locked" || fsMode === "toggle" && isFullscreen);
-  const editToggleFullscreen = fsMode === "toggle" ? toggleFullscreen : void 0;
-  const readToggleFullscreen = isFloorMapView && mode === "read" && fsMode === "toggle" ? toggleFullscreen : void 0;
+  const dockToggleFullscreen = isFloorMapView && fsMode === "toggle" ? toggleFullscreen : void 0;
   const viewControlsConfig = (0, import_react.useMemo)(() => {
-    if (!isFloorMapView || mode !== "edit") return controls;
+    if (!isFloorMapView) return controls;
     return {
       ...controls,
-      showFullscreen: false
+      showFullscreen: controls.showFullscreen ?? Boolean(dockToggleFullscreen)
     };
-  }, [isFloorMapView, mode, controls]);
+  }, [isFloorMapView, controls, dockToggleFullscreen]);
   const topBarExtraActions = null;
   const [mapPaletteDragActive, setMapPaletteDragActive] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
@@ -373,6 +416,7 @@ function PisellFloorMapLayoutInner(props, ref) {
     [fitBounds, handleSave]
   );
   const showSidebar = isFloorMapView && mode === "edit" && config && dataSources;
+  const editPanelVisible = isFloorMapView && mode === "edit" && Boolean(editPanelParams) && Boolean(config) && Boolean(dataSources);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -385,10 +429,13 @@ function PisellFloorMapLayoutInner(props, ref) {
         display: "flex",
         flexDirection: "column",
         ...isFloorMapView ? { minHeight: 0 } : {},
+        ...isFloorMapView ? {
+          ["--fmap-primary"]: token.colorPrimary
+        } : {},
         ...style
       }
     },
-    isFloorMapView && mode === "edit" && config && !useFullTopChrome && /* @__PURE__ */ import_react.default.createElement(
+    showEditCompactTopBar && !useFullTopChrome && /* @__PURE__ */ import_react.default.createElement(
       import_FloorMapEditTopBar.FloorMapEditTopBar,
       {
         mode: "compact",
@@ -403,8 +450,6 @@ function PisellFloorMapLayoutInner(props, ref) {
         onAddCanvas: handleAddCanvas,
         onRemoveCanvas: handleRemoveCanvas,
         onRenameCanvas: handleRenameCanvas,
-        toggleFullscreen: editToggleFullscreen,
-        isFullscreen: false,
         controls,
         canvasTabsBarTrailing
       }
@@ -428,7 +473,6 @@ function PisellFloorMapLayoutInner(props, ref) {
         saving,
         saveError,
         layoutDirty: isLayoutDirty,
-        toggleFullscreen: editToggleFullscreen,
         isFullscreen,
         controls,
         extraActions: topBarExtraActions,
@@ -455,20 +499,7 @@ function PisellFloorMapLayoutInner(props, ref) {
           className: `${PREFIX}-edit-top-bar-canvas-tabs`
         }
       )),
-      hasCanvasTabsBarTrailing || readToggleFullscreen ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, canvasTabsBarTrailing, readToggleFullscreen ? /* @__PURE__ */ import_react.default.createElement(
-        "button",
-        {
-          type: "button",
-          className: (0, import_classnames.default)(
-            `${PREFIX}-edit-top-bar-btn`,
-            `${PREFIX}-edit-top-bar-btn-ghost`
-          ),
-          onClick: () => readToggleFullscreen(),
-          "aria-label": isFullscreen ? readCanvasTabsFsLabels.fsExitAria : readCanvasTabsFsLabels.fsEnterAria,
-          title: isFullscreen ? readCanvasTabsFsLabels.fsExitTitle : readCanvasTabsFsLabels.fsEnterTitle
-        },
-        isFullscreen ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
-      ) : null) : null
+      hasCanvasTabsBarTrailing ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, canvasTabsBarTrailing) : null
     ),
     loading && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-loading` }, /* @__PURE__ */ import_react.default.createElement("span", null, loadingLabel)),
     saveError && !(isFloorMapView && mode === "edit" && config) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-save-error` }, typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message),
@@ -491,7 +522,7 @@ function PisellFloorMapLayoutInner(props, ref) {
           renderPreviewItem: (item) => effectiveRenderItem(item, 0),
           placementPreviewSize: { width: 180, height: 120 },
           decorationPreviewSize: 48,
-          onSave: onSave && config.canvasUi.canEdit && (!useFullTopChrome && toolbarShowSave !== false || useFullTopChrome && isFullscreen) ? handleSave : void 0,
+          onSave: onSave && config.canvasUi.canEdit && !useFullTopChrome && toolbarShowSave !== false ? handleSave : void 0,
           saving,
           saveError,
           layoutDirty: isLayoutDirty,
@@ -503,7 +534,10 @@ function PisellFloorMapLayoutInner(props, ref) {
         "div",
         {
           ref: mapAreaRef,
-          className: showSidebar ? `${PREFIX}-map-area` : void 0,
+          className: (0, import_classnames.default)(
+            showSidebar && `${PREFIX}-map-area`,
+            editPanelVisible && `${PREFIX}-map-area--edit-panel-inset`
+          ),
           style: {
             flex: 1,
             position: "relative",
@@ -608,7 +642,8 @@ function PisellFloorMapLayoutInner(props, ref) {
                   snapStep: (effectiveMapLayer == null ? void 0 : effectiveMapLayer.snapStep) ?? 0,
                   scale,
                   onInteractionChange: setIsInteractingWithElement,
-                  getMergedItemWrapperStyle
+                  getMergedItemWrapperStyle,
+                  editQuickBar
                 }
               ) : /* @__PURE__ */ import_react.default.createElement(
                 import_ItemLayer.default,
@@ -624,6 +659,7 @@ function PisellFloorMapLayoutInner(props, ref) {
                   contentOffsetX,
                   contentOffsetY,
                   enableHover,
+                  itemHoverOutline: true,
                   onItemClick: handleItemClick,
                   onItemHover,
                   onItemLeave,
@@ -661,9 +697,12 @@ function PisellFloorMapLayoutInner(props, ref) {
                 scale,
                 isFullscreen,
                 fitBounds,
-                toggleFullscreen: editToggleFullscreen,
+                toggleFullscreen: dockToggleFullscreen,
                 mapGridVisible: Boolean(effectiveMapLayer == null ? void 0 : effectiveMapLayer.showGrid),
-                onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : void 0
+                onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : void 0,
+                dockChrome: isFloorMapView,
+                dockExpandedTrailing: viewportDockTrailing,
+                autoCollapseDockMs: 1e4
               }
             ), isFloorMapView && floorMapViewportOverlay != null ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-viewport-overlay` }, typeof floorMapViewportOverlay === "function" ? floorMapViewportOverlay({
               items,

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.less

@@ -70,8 +70,10 @@
     &-active {
       pointer-events: auto;
       z-index: 100;
-      box-shadow: inset 0 0 0 2px #1677ff;
-      background: rgba(22, 119, 255, 0.06);
+      box-shadow: inset 0 0 0 2px var(--fmap-primary, #1677ff);
+      background: color-mix(in srgb,
+      var(--fmap-primary, #1677ff) 6%,
+      transparent);
     }
   }
 
@@ -89,4 +91,14 @@
       pointer-events: auto;
     }
   }
+
+  /** 编辑态：画布区域（含 Transform）为右侧 FloorMapEditPanel 预留宽度 */
+
+  &-map-area {
+    box-sizing: border-box;
+
+    &--edit-panel-inset {
+      padding-right: 336px;
+    }
+  }
 }

package/lib/components/pisellFloorMapLayout/components/CanvasTabs.less

@@ -34,14 +34,14 @@
     }
 
     &-active {
-      color: #1677ff;
+      color: var(--fmap-primary, #1677ff);
       font-weight: 600;
       background: #fff;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
       0 0 0 1px rgba(0, 0, 0, 0.04);
 
       &:hover {
-        color: #1677ff;
+        color: var(--fmap-primary, #1677ff);
         background: #fff;
       }
     }
@@ -55,7 +55,7 @@
       color: rgba(0, 0, 0, 0.45);
 
       .pisell-floor-map-layout-canvas-tabs-tab-active & {
-        color: rgba(22, 119, 255, 0.85);
+        color: color-mix(in srgb, var(--fmap-primary, #1677ff) 85%, transparent);
       }
     }
 
@@ -68,14 +68,14 @@
       line-height: 1.4;
       color: #262626;
       background: #fff;
-      border: 1px solid #1677ff;
+      border: 1px solid var(--fmap-primary, #1677ff);
       border-radius: 6px;
       outline: none;
       box-sizing: border-box;
 
       &:focus {
-        border-color: #1677ff;
-        box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
+        border-color: var(--fmap-primary, #1677ff);
+        box-shadow: 0 0 0 2px color-mix(in srgb, var(--fmap-primary, #1677ff) 20%, transparent);
       }
     }
 
@@ -100,19 +100,19 @@
       -webkit-tap-highlight-color: transparent;
 
       &:hover {
-        color: #1677ff;
-        background: rgba(22, 119, 255, 0.08);
+        color: var(--fmap-primary, #1677ff);
+        background: color-mix(in srgb, var(--fmap-primary, #1677ff) 8%, transparent);
       }
 
       &:active {
-        background: rgba(22, 119, 255, 0.14);
+        background: color-mix(in srgb, var(--fmap-primary, #1677ff) 14%, transparent);
       }
 
       .pisell-floor-map-layout-canvas-tabs-tab-active & {
-        color: rgba(22, 119, 255, 0.85);
+        color: color-mix(in srgb, var(--fmap-primary, #1677ff) 85%, transparent);
 
         &:hover {
-          color: #1677ff;
+          color: var(--fmap-primary, #1677ff);
         }
       }
     }
@@ -161,9 +161,9 @@
     padding: 7px 12px;
     font-size: 13px;
     font-weight: 500;
-    color: #1677ff;
+    color: var(--fmap-primary, #1677ff);
     background: rgba(255, 255, 255, 0.7);
-    border: 1px dashed rgba(22, 119, 255, 0.35);
+    border: 1px dashed color-mix(in srgb, var(--fmap-primary, #1677ff) 35%, transparent);
     border-radius: 8px;
     cursor: pointer;
     transition: color 0.2s,

package/lib/components/pisellFloorMapLayout/components/EditableItemLayer.d.ts

@@ -0,0 +1,46 @@
+/**
+ * EditableItemLayer - 编辑态图元层：拖拽、缩放、选中、吸附
+ */
+import React, { type CSSProperties } from 'react';
+import type { FloorMapItemBase, FloorMapMergedItem, FloorMapRenderOptions } from '../types';
+import { type FloorMapEditQuickActionLabels } from './FloorMapEditQuickActions';
+import './EditableItemLayer.less';
+export interface EditableItemLayerProps<T extends FloorMapItemBase = FloorMapMergedItem> {
+    items: T[];
+    renderItem: (item: T, index: number, options?: FloorMapRenderOptions) => React.ReactNode;
+    rowKey?: string | ((item: T, index: number) => string);
+    cellSize: number;
+    itemUnit?: 'cell' | 'pixel';
+    itemGap?: number;
+    contentWidth: number;
+    contentHeight: number;
+    /** 内容区 X/Y 偏移（画布包围盒向左/上扩展时，图元层整体平移） */
+    contentOffsetX?: number;
+    contentOffsetY?: number;
+    selectedId: string | null;
+    onSelect: (id: string | null) => void;
+    onUpdateItem: (itemId: string, patch: Partial<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>) => void;
+    snapStep?: number;
+    /** 画布当前缩放，用于将屏幕位移转为内容位移 */
+    scale?: number;
+    /** 拖拽/缩放图元时通知父组件，用于禁用画布平移，避免松手时画布跟着动 */
+    onInteractionChange?: (active: boolean) => void;
+    /** 每项外层容器额外样式（与定位样式合并） */
+    getMergedItemWrapperStyle?: (item: T, index: number) => CSSProperties | undefined;
+    className?: string;
+    /** 编辑态选中时图元旁快捷栏（上锁 / 复制 / 删除） */
+    editQuickBar?: {
+        labels: FloorMapEditQuickActionLabels;
+        isLocked: boolean;
+        onToggleLock: () => void;
+        onDuplicate: () => void;
+        onDelete: () => void;
+    } | null;
+}
+export declare function EditableItemLayer<T extends FloorMapItemBase>(props: EditableItemLayerProps<T>): JSX.Element;
+export default EditableItemLayer;

package/lib/components/pisellFloorMapLayout/components/EditableItemLayer.js

@@ -36,6 +36,7 @@ module.exports = __toCommonJS(EditableItemLayer_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
 var import_snap = require("../utils/snap");
+var import_FloorMapEditQuickActions = require("./FloorMapEditQuickActions");
 var import_EditableItemLayer = require("./EditableItemLayer.less");
 function isSceneLayoutTransformLocked(item) {
   var _a;
@@ -43,6 +44,7 @@ function isSceneLayoutTransformLocked(item) {
 }
 var PREFIX = "pisell-floor-map-layout";
 var DRAG_THRESHOLD = 4;
+var SELECTED_ITEM_STACK_Z = 1e6;
 function getItemKey(item, index, rowKey) {
   if (!rowKey) return item.id;
   if (typeof rowKey === "string")
@@ -78,7 +80,8 @@ function EditableItemLayer(props) {
     scale = 1,
     onInteractionChange,
     getMergedItemWrapperStyle,
-    className
+    className,
+    editQuickBar
   } = props;
   const contentRef = (0, import_react.useRef)(null);
   const liveRectRef = (0, import_react.useRef)(null);
@@ -169,9 +172,10 @@ function EditableItemLayer(props) {
     },
     [items, getItemStyle, onInteractionChange]
   );
-  const handleCanvasClick = (0, import_react.useCallback)(
+  const handleCanvasHitClick = (0, import_react.useCallback)(
     (e) => {
-      if (e.target === e.currentTarget) onSelect(null);
+      if (e.target !== e.currentTarget) return;
+      onSelect(null);
     },
     [onSelect]
   );
@@ -271,12 +275,15 @@ function EditableItemLayer(props) {
       const style = getItemStyle(item, index);
       const shapeStyle = getShapeStyle(item.shape);
       const isSelected = selectedId === item.id;
+      const wrapperStyle = getMergedItemWrapperStyle == null ? void 0 : getMergedItemWrapperStyle(item, index);
+      const baseZ = (wrapperStyle == null ? void 0 : wrapperStyle.zIndex) !== void 0 ? wrapperStyle.zIndex : item.zIndex ?? 0;
       return /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
           key,
           className: (0, import_classnames.default)(`${PREFIX}-editable-item`, {
-            [`${PREFIX}-editable-item-selected`]: isSelected
+            [`${PREFIX}-editable-item-selected`]: isSelected,
+            [`${PREFIX}-editable-item-selected-lock`]: isSelected && isSceneLayoutTransformLocked(merged)
           }),
           style: {
             position: "absolute",
@@ -285,9 +292,9 @@ function EditableItemLayer(props) {
             width: style.width,
             height: style.height,
             boxSizing: "border-box",
-            zIndex: item.zIndex ?? 0,
             ...shapeStyle,
-            ...getMergedItemWrapperStyle == null ? void 0 : getMergedItemWrapperStyle(item, index)
+            ...wrapperStyle,
+            zIndex: isSelected ? SELECTED_ITEM_STACK_Z + (item.zIndex ?? 0) : baseZ
           },
           onPointerDown: (e) => handlePointerDown(e, item, index),
           onClick: (e) => handleItemClick(e, item)
@@ -304,7 +311,17 @@ function EditableItemLayer(props) {
             onPointerDown: (e) => handleResizePointerDown(e, item.id, h),
             style: { position: "absolute" }
           }
-        )))
+        ))),
+        isSelected && editQuickBar ? /* @__PURE__ */ import_react.default.createElement(
+          import_FloorMapEditQuickActions.FloorMapEditQuickActions,
+          {
+            labels: editQuickBar.labels,
+            isLocked: editQuickBar.isLocked,
+            onToggleLock: editQuickBar.onToggleLock,
+            onDuplicate: editQuickBar.onDuplicate,
+            onDelete: editQuickBar.onDelete
+          }
+        ) : null
       );
     });
   }, [
@@ -316,8 +333,17 @@ function EditableItemLayer(props) {
     handlePointerDown,
     handleItemClick,
     handleResizePointerDown,
-    getMergedItemWrapperStyle
+    getMergedItemWrapperStyle,
+    editQuickBar
   ]);
+  const canvasHitLayer = /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `${PREFIX}-editable-canvas-hit`,
+      onClick: handleCanvasHitClick,
+      "aria-hidden": true
+    }
+  );
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -331,8 +357,7 @@ function EditableItemLayer(props) {
         height: contentHeight,
         minWidth: contentWidth,
         minHeight: contentHeight
-      },
-      onClick: handleCanvasClick
+      }
     },
     contentOffsetX !== 0 || contentOffsetY !== 0 ? /* @__PURE__ */ import_react.default.createElement(
       "div",
@@ -344,11 +369,11 @@ function EditableItemLayer(props) {
           width: contentWidth,
           height: contentHeight,
           transform: `translate(${contentOffsetX}px, ${contentOffsetY}px)`
-        },
-        onClick: handleCanvasClick
+        }
       },
+      canvasHitLayer,
       itemNodes
-    ) : itemNodes
+    ) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, canvasHitLayer, itemNodes)
   );
 }
 var EditableItemLayer_default = EditableItemLayer;

package/lib/components/pisellFloorMapLayout/components/EditableItemLayer.less

@@ -1,9 +1,21 @@
-/* 根节点不拦截事件，空白区域 mousedown 可透传到下层，让 react-zoom-pan-pinch 正常平移画布 */
+/* 根节点不拦截事件；空白处点击由 .editable-canvas-hit 承接（显式 pointer-events: auto），以免继承 none */
 .pisell-floor-map-layout-editable-item-layer {
   cursor: default;
   pointer-events: none;
 }
 
+/** 铺满内容区、叠在图元之下，用于点击空白取消选中；不参与拖拽图元 */
+.pisell-floor-map-layout-editable-canvas-hit {
+  position: absolute;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: auto;
+}
+
 .pisell-floor-map-layout-editable-item {
   cursor: move;
   outline: none;
@@ -12,14 +24,25 @@
   touch-action: none;
 
   &-selected {
-    box-shadow: 0 0 0 2px #1677ff;
-    z-index: 2;
+    /* 实际层级由 TSX 内联 zIndex（SELECTED_ITEM_STACK_Z + item.zIndex）控制 */
+    outline: 3px solid var(--fmap-primary, #1677ff);
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fmap-primary, #1677ff) 25%, transparent);
+  }
+
+  /** 已锁定：选中描边改为警告色，与未锁定区分 */
+
+  &-selected-lock {
+    outline-color: #d48806;
+    box-shadow: 0 0 0 1px rgba(212, 136, 6, 0.28);
   }
 
   &-inner {
     width: 100%;
     height: 100%;
     pointer-events: none;
+    overflow: hidden;
+    border-radius: inherit;
   }
 }
 
@@ -27,7 +50,7 @@
   width: 10px;
   height: 10px;
   margin: -5px;
-  background: #1677ff;
+  background: var(--fmap-primary, #1677ff);
   border: 1px solid #fff;
   border-radius: 2px;
   cursor: nwse-resize;
@@ -87,3 +110,48 @@
     cursor: ew-resize;
   }
 }
+
+.pisell-floor-map-layout-edit-quick-actions {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  transform: translate(-50%, 10px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  border: 1px solid #e8eaed;
+  /* 高于同图元内缩放点 (3)，并贴近选中项栈顶，避免被内部子 stacking 盖住 */
+  z-index: 100000;
+  pointer-events: auto;
+  touch-action: manipulation;
+
+  &--locked {
+    border-color: rgba(212, 136, 6, 0.45);
+    background: #fffbf0;
+  }
+
+  /* 无边框、更大图标按钮（antd 类名在运行环境可能为 pisell-lowcode-*） */
+
+  .pisell-lowcode-btn,
+  .ant-btn {
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none !important;
+    box-shadow: none !important;
+    line-height: 1;
+
+    .pisell-lowcode-btn-icon,
+    .anticon {
+      font-size: 22px;
+    }
+  }
+}

package/lib/components/pisellFloorMapLayout/components/FloorMapEditQuickActions.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export interface FloorMapEditQuickActionLabels {
+    lock: string;
+    unlock: string;
+    duplicate: string;
+    delete: string;
+    popTitle: string;
+    popDesc: string;
+    cancel: string;
+    okDelete: string;
+    ariaToolbar: string;
+}
+export interface FloorMapEditQuickActionsProps {
+    className?: string;
+    labels: FloorMapEditQuickActionLabels;
+    isLocked: boolean;
+    onToggleLock: () => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+}
+export declare function FloorMapEditQuickActions(props: FloorMapEditQuickActionsProps): JSX.Element;