@pisell/materials 1.8.23 → 1.8.25

package/lib/components/pisellFloorMapLayout/components/FloorMapEditTopBar.less

@@ -1,4 +1,4 @@
-/* 编辑态单行顶栏：画布 Tab + 保存 / 全屏 */
+/* 编辑态单行顶栏：画布 Tab + 保存 / 扩展操作 */
 .pisell-floor-map-layout-edit-top-bar {
   display: flex;
   flex-direction: row;
@@ -9,6 +9,16 @@
   border-bottom: 1px solid #f0f0f0;
   z-index: 3;
 
+  /** 单画布：无 Tab 区时操作区靠右，去掉左侧竖线 */
+
+  &--tabs-hidden {
+    justify-content: flex-end;
+
+    .pisell-floor-map-layout-edit-top-bar-actions {
+      border-left: none;
+    }
+  }
+
   &-tabs {
     flex: 1;
     min-width: 0;
@@ -100,8 +110,8 @@
     transition: border-color 0.2s, background 0.2s;
 
     &:hover:not(:disabled) {
-      border-color: #1677ff;
-      color: #1677ff;
+      border-color: var(--fmap-primary, #1677ff);
+      color: var(--fmap-primary, #1677ff);
     }
 
     &:disabled {
@@ -111,12 +121,16 @@
 
     &.primary {
       color: #fff;
-      background: #1677ff;
-      border-color: #1677ff;
+      background: var(--fmap-primary, #1677ff);
+      border-color: var(--fmap-primary, #1677ff);
 
       &:hover:not(:disabled) {
-        background: #4096ff;
-        border-color: #4096ff;
+        background: color-mix(in srgb,
+        var(--fmap-primary, #1677ff) 88%,
+        #fff);
+        border-color: color-mix(in srgb,
+        var(--fmap-primary, #1677ff) 88%,
+        #fff);
         color: #fff;
       }
     }
@@ -129,12 +143,13 @@
   }
 
   /**
-   * 只读顶栏（`edit-top-bar` + `read-canvas-tabs-bar` 并列）与编辑态 compact：
-   * 与左侧 Tab 同一浅灰底，去掉右侧白底与竖线分割。
+   * 只读顶栏（`edit-top-bar` + `read-canvas-tabs-bar` 并列）、编辑态 compact、
+   * 以及全屏/locked 时的 full 顶栏：与左侧 Tab 同一浅灰底，去掉右侧大块白底与竖线分割。
    */
 
   &.pisell-floor-map-layout-read-canvas-tabs-bar,
-  &--compact {
+  &--compact,
+  &--full-chrome {
     background: rgba(0, 0, 0, 0.04);
 
     .pisell-floor-map-layout-edit-top-bar-actions {

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface FloorMapImageElementProps {
+    imageUrl?: string;
+    name?: string;
+}
+export declare function FloorMapImageElement(props: FloorMapImageElementProps): JSX.Element;

package/lib/components/pisellFloorMapLayout/components/FloorMapImageElement.js

@@ -33,7 +33,9 @@ __export(FloorMapImageElement_exports, {
 });
 module.exports = __toCommonJS(FloorMapImageElement_exports);
 var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
 var PREFIX = "pisell-floor-map-layout";
+var I18N_IMG = "pisell-floor-map-layout.image-element";
 function FloorMapImageElement(props) {
   const { imageUrl, name } = props;
   const [broken, setBroken] = (0, import_react.useState)(false);
@@ -41,7 +43,7 @@ function FloorMapImageElement(props) {
   (0, import_react.useEffect)(() => {
     setBroken(false);
   }, [trimmed]);
-  const label = name != null && String(name).trim() ? String(name).trim() : "图片图元";
+  const label = name != null && String(name).trim() ? String(name).trim() : import_utils.locales.getText(`${I18N_IMG}.default-name`);
   if (!trimmed || broken) {
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
@@ -67,7 +69,7 @@ function FloorMapImageElement(props) {
         }
       },
       /* @__PURE__ */ import_react.default.createElement("span", { style: { fontWeight: 600, color: "#595959", marginBottom: 4 } }, label),
-      /* @__PURE__ */ import_react.default.createElement("span", null, !trimmed ? "在侧栏填写图片地址；可调层级置于桌位下方作底图" : "图片加载失败，请检查地址")
+      /* @__PURE__ */ import_react.default.createElement("span", null, !trimmed ? import_utils.locales.getText(`${I18N_IMG}.hint-no-url`) : import_utils.locales.getText(`${I18N_IMG}.hint-load-fail`))
     );
   }
   return /* @__PURE__ */ import_react.default.createElement(

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

@@ -0,0 +1,35 @@
+/**
+ * FloorMapToolbar - 编辑态左侧侧边栏：按分类添加图元、绑定数据源与行；保存可选（默认用顶栏）
+ */
+import React from 'react';
+import type { FloorMapViewConfig, FloorMapDataSources, FloorMapMergedItem, FloorMapSceneElement, FloorMapPlaceMode } from '../types';
+import { type FloorMapPaletteDragPayload } from '../utils/floorMapDropUtils';
+import './FloorMapToolbar.less';
+export type { FloorMapPlaceMode as PlaceMode };
+export interface FloorMapToolbarProps {
+    config: FloorMapViewConfig;
+    dataSources: FloorMapDataSources;
+    dataSourceLabels?: Record<string, string>;
+    canCreate: boolean;
+    placeMode: FloorMapPlaceMode;
+    onPlaceModeChange: (mode: FloorMapPlaceMode) => void;
+    renderPreviewItem?: (item: FloorMapMergedItem) => React.ReactNode;
+    placementPreviewSize?: {
+        width: number;
+        height: number;
+    };
+    decorationPreviewSize?: number;
+    sceneElements?: FloorMapSceneElement[];
+    onSave?: () => void;
+    saving?: boolean;
+    saveError?: Error | string;
+    /** 布局草稿已相对持久化配置变更，提示用户点击本栏「保存」 */
+    layoutDirty?: boolean;
+    className?: string;
+    /** 触摸/笔：Pointer 拖拽落点（mouse 仍用 HTML5 DnD） */
+    onPaletteCardPointerDown?: (payload: FloorMapPaletteDragPayload, e: React.PointerEvent<HTMLButtonElement>) => void;
+    /** 触摸拖放结束后吞掉按钮 click，避免误触切换落点模式 */
+    consumeToolbarClickIfTouchDrag?: () => boolean;
+}
+export declare function FloorMapToolbar(props: FloorMapToolbarProps): JSX.Element;
+export default FloorMapToolbar;

package/lib/components/pisellFloorMapLayout/components/FloorMapToolbar.js

@@ -40,8 +40,11 @@ var import_types = require("../types");
 var import_floorMapElementKindUtils = require("../utils/floorMapElementKindUtils");
 var import_floorMapDropUtils = require("../utils/floorMapDropUtils");
 var import_floorMapDataRecordLabel = require("../utils/floorMapDataRecordLabel");
+var import_utils = require("@pisell/utils");
 var import_FloorMapToolbar = require("./FloorMapToolbar.less");
 var PREFIX = "pisell-floor-map-layout";
+var I18N_TB = "pisell-floor-map-layout.toolbar";
+var I18N_EP_DS = "pisell-floor-map-layout.edit-panel.ph-data-source";
 var DEFAULT_PLACEMENT_SIZE = { width: 180, height: 120 };
 var DEFAULT_DECORATION_SIZE = 48;
 function getUnplacedRecordsForKey(dataSourceKey, dataSources, elements) {
@@ -110,7 +113,13 @@ function FloorMapToolbar(props) {
   const categories = (0, import_react.useMemo)(() => {
     const raw = config.elementKindCategories ?? [];
     const sorted = [...raw].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-    return sorted.length ? sorted : [{ id: "_uncat", label: "图元", order: 0 }];
+    return sorted.length ? sorted : [
+      {
+        id: "_uncat",
+        label: import_utils.locales.getText(`${I18N_TB}.category-fallback`),
+        order: 0
+      }
+    ];
   }, [config.elementKindCategories]);
   const kindsByCategory = (0, import_react.useMemo)(() => {
     var _a;
@@ -205,7 +214,7 @@ function FloorMapToolbar(props) {
           );
           e.dataTransfer.effectAllowed = "copy";
         },
-        title: `点击后画布落点，或拖拽到画布生成「${k.label}」`
+        title: import_utils.locales.getText(`${I18N_TB}.palette-card-title`).replace(/\{name\}/g, k.label)
       },
       /* @__PURE__ */ import_react.default.createElement(
         "div",
@@ -233,10 +242,10 @@ function FloorMapToolbar(props) {
         ) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-toolbar-preview-fallback` }, k.label)
       ),
       /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-toolbar-preview-card-label` }, k.label)
-    ), isActive && policy !== "none" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, allowedKeys.length >= 1 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-label` }, "数据绑定（可选）"), /* @__PURE__ */ import_react.default.createElement(
+    ), isActive && policy !== "none" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, allowedKeys.length >= 1 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-label` }, import_utils.locales.getText(`${I18N_TB}.data-binding-optional`)), /* @__PURE__ */ import_react.default.createElement(
       import_antd.Select,
       {
-        placeholder: "选择数据源",
+        placeholder: import_utils.locales.getText(I18N_EP_DS),
         allowClear: true,
         value: placeMode.type === "scene" ? placeMode.dataSourceKey : void 0,
         options: allowedKeys.map((key) => ({
@@ -254,7 +263,7 @@ function FloorMapToolbar(props) {
       const mode = (placeMode == null ? void 0 : placeMode.type) === "scene" ? placeMode : null;
       const key = mode == null ? void 0 : mode.dataSourceKey;
       if (!key) {
-        return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "选择数据源后可选绑定数据行，或直接落点占位。");
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, import_utils.locales.getText(`${I18N_TB}.hint-after-select-ds`));
       }
       const unplaced = getUnplacedRecordsForKey(
         key,
@@ -262,14 +271,16 @@ function FloorMapToolbar(props) {
         sceneElements
       );
       if (unplaced.length === 0) {
-        return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "当前数据源无未绑定记录，或列表为空；可直接在画布落点占位。");
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, import_utils.locales.getText(`${I18N_TB}.hint-no-unplaced-rows`));
       }
       const recordValue = (mode == null ? void 0 : mode.recordIds) && mode.recordIds.length > 0 ? mode.recordIds : (mode == null ? void 0 : mode.recordId) ? [mode.recordId] : void 0;
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
         import_antd.Select,
         {
           mode: "multiple",
-          placeholder: "选择要展示的记录（可选，可多选）",
+          placeholder: import_utils.locales.getText(
+            `${I18N_TB}.ph-select-records`
+          ),
           allowClear: true,
           maxTagCount: "responsive",
           value: recordValue,
@@ -283,15 +294,15 @@ function FloorMapToolbar(props) {
           size: "large",
           style: { width: "100%", marginTop: 4 }
         }
-      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "可选多条，在画布点击一次将按阶梯偏移落多条；留空则先占位，稍后在侧栏绑定。"));
-    })()), allowedKeys.length === 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-hint` }, "无可用数据源"), /* @__PURE__ */ import_react.default.createElement(
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, import_utils.locales.getText(`${I18N_TB}.hint-multi-drop`)));
+    })()), allowedKeys.length === 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-hint` }, import_utils.locales.getText(`${I18N_TB}.no-data-sources`)), /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
         type: "button",
         className: `${PREFIX}-toolbar-btn cancel-inline`,
         onClick: cancelPlaceMode
       },
-      "取消新建"
+      import_utils.locales.getText(`${I18N_TB}.cancel-place`)
     )), isActive && policy === "none" && /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
@@ -299,7 +310,7 @@ function FloorMapToolbar(props) {
         className: `${PREFIX}-toolbar-btn cancel-inline`,
         onClick: cancelPlaceMode
       },
-      "取消新建"
+      import_utils.locales.getText(`${I18N_TB}.cancel-place`)
     ));
   };
   return /* @__PURE__ */ import_react.default.createElement(
@@ -316,7 +327,7 @@ function FloorMapToolbar(props) {
       if (!kinds.length) return null;
       return /* @__PURE__ */ import_react.default.createElement("section", { key: cat.id, className: `${PREFIX}-toolbar-section` }, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${PREFIX}-toolbar-section-title` }, cat.label), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-preview-list` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-preview-group` }, kinds.map((k) => renderKindCard(k)))));
     }))),
-    onSave && config.canvasUi.canEdit && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-footer` }, layoutDirty ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-toolbar-dirty-hint`, role: "status" }, "布局已修改，请点击「保存」持久化。") : null, saveError && /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-toolbar-error` }, typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message), /* @__PURE__ */ import_react.default.createElement(
+    onSave && config.canvasUi.canEdit && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-footer` }, layoutDirty ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-toolbar-dirty-hint`, role: "status" }, import_utils.locales.getText(`${I18N_TB}.layout-dirty-hint`)) : null, saveError && /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-toolbar-error` }, typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message), /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
         type: "button",
@@ -326,7 +337,7 @@ function FloorMapToolbar(props) {
         disabled: saving,
         onClick: onSave
       },
-      saving ? "保存中..." : "保存"
+      saving ? import_utils.locales.getText(`${I18N_TB}.saving`) : import_utils.locales.getText(`${I18N_TB}.save`)
     ))
   );
 }

package/lib/components/pisellFloorMapLayout/components/FloorMapToolbar.less

@@ -78,9 +78,11 @@
     }
 
     &.pisell-floor-map-layout-toolbar-preview-card-active {
-      background: #e6f4ff;
-      border-color: #1677ff;
-      box-shadow: 0 0 0 1px #1677ff;
+      background: color-mix(in srgb,
+      var(--fmap-primary, #1677ff) 12%,
+      #fff);
+      border-color: var(--fmap-primary, #1677ff);
+      box-shadow: 0 0 0 1px var(--fmap-primary, #1677ff);
     }
 
     &.pisell-floor-map-layout-toolbar-preview-card-deco {
@@ -141,9 +143,11 @@
     cursor: pointer;
 
     &:hover {
-      color: #1677ff;
-      border-color: #1677ff;
-      background: #e6f4ff;
+      color: var(--fmap-primary, #1677ff);
+      border-color: var(--fmap-primary, #1677ff);
+      background: color-mix(in srgb,
+      var(--fmap-primary, #1677ff) 12%,
+      #fff);
     }
 
     &.cancel {
@@ -161,12 +165,16 @@
 
     &.primary {
       color: #fff;
-      background: #1677ff;
-      border-color: #1677ff;
+      background: var(--fmap-primary, #1677ff);
+      border-color: var(--fmap-primary, #1677ff);
 
       &:hover:not(:disabled) {
-        background: #4096ff;
-        border-color: #4096ff;
+        background: color-mix(in srgb,
+        var(--fmap-primary, #1677ff) 88%,
+        #fff);
+        border-color: color-mix(in srgb,
+        var(--fmap-primary, #1677ff) 88%,
+        #fff);
       }
 
       &:disabled {

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

@@ -0,0 +1,53 @@
+/**
+ * ItemLayer - 楼层图展示层
+ * 按 items 的 (x, y) 与 cellSize 定位，用 renderItem 渲染每项内容
+ */
+import React from 'react';
+import type { FloorMapItemBase, FloorMapItemUnit } from '../types';
+import type { CSSProperties } from 'react';
+import './ItemLayer.less';
+export interface ItemLayerProps<T extends FloorMapItemBase> {
+    /** 资源列表 */
+    items: T[];
+    /** 每项渲染函数 */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** 每项 key */
+    rowKey?: string | ((item: T, index: number) => string);
+    /** 每格像素尺寸（cell 单位时用；pixel 单位时作为缺省宽高） */
+    cellSize: number;
+    /** item 坐标与尺寸单位：cell 格子数，pixel 像素 */
+    itemUnit?: FloorMapItemUnit;
+    /** item 之间的间距（像素），仅 cell 单位时生效 */
+    itemGap?: number;
+    /** 内容区总宽度（像素），由 items 推导或外部传入 */
+    contentWidth: number;
+    /** 内容区总高度（像素） */
+    contentHeight: number;
+    /** 内容区 X 偏移（画布包围盒向左/上扩展时，图元层整体平移） */
+    contentOffsetX?: number;
+    /** 内容区 Y 偏移 */
+    contentOffsetY?: number;
+    /** 是否启用 hover 事件 */
+    enableHover?: boolean;
+    /**
+     * 是否在 hover 时显示外沿描边（选中感高亮）。默认 true。
+     * 平面图只读态可由布局关闭，仅去掉描边，不影响 onItemHover。
+     */
+    itemHoverOutline?: boolean;
+    /** 点击回调 */
+    onItemClick?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** hover 进入 */
+    onItemHover?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** hover 离开 */
+    onItemLeave?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** 每项外层容器额外样式（与定位样式合并） */
+    getMergedItemWrapperStyle?: (item: T, index: number) => CSSProperties | undefined;
+    /**
+     * 与编辑态一致：在含 `data-pisell-floor-room-scroll-surface` 的区域内按下时置 true，
+     * 用于禁用 Transform 画布平移，避免图元内纵向滑动拖动画布。
+     */
+    onInteractionChange?: (active: boolean) => void;
+    className?: string;
+}
+export declare function ItemLayer<T extends FloorMapItemBase>(props: ItemLayerProps<T>): JSX.Element;
+export default ItemLayer;

package/lib/components/pisellFloorMapLayout/components/ItemLayer.js

@@ -37,6 +37,7 @@ var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
 var import_ItemLayer = require("./ItemLayer.less");
 var PREFIX = "pisell-floor-map-layout";
+var ROOM_SCROLL_SURFACE_SELECTOR = "[data-pisell-floor-room-scroll-surface]";
 function getItemKey(item, index, rowKey) {
   if (!rowKey) return item.id;
   if (typeof rowKey === "string")
@@ -69,12 +70,53 @@ function ItemLayer(props) {
     contentOffsetX = 0,
     contentOffsetY = 0,
     enableHover = true,
+    itemHoverOutline = true,
     onItemClick,
     onItemHover,
     onItemLeave,
     getMergedItemWrapperStyle,
+    onInteractionChange,
     className
   } = props;
+  const notifyRoomScrollSurfaceActive = (0, import_react.useCallback)(() => {
+    if (!onInteractionChange) return;
+    onInteractionChange(true);
+    const finish = () => {
+      onInteractionChange(false);
+    };
+    window.addEventListener("pointerup", finish, { once: true });
+    window.addEventListener("pointercancel", finish, { once: true });
+    window.addEventListener("touchend", finish, { once: true, passive: true });
+    window.addEventListener("touchcancel", finish, {
+      once: true,
+      passive: true
+    });
+  }, [onInteractionChange]);
+  const handleItemPointerDownCapture = (0, import_react.useCallback)(
+    (e) => {
+      var _a;
+      if (!onInteractionChange || e.button !== 0) return;
+      const el = e.target;
+      if (!((_a = el == null ? void 0 : el.closest) == null ? void 0 : _a.call(el, ROOM_SCROLL_SURFACE_SELECTOR))) return;
+      notifyRoomScrollSurfaceActive();
+    },
+    [onInteractionChange, notifyRoomScrollSurfaceActive]
+  );
+  const handleItemTouchStartCapture = (0, import_react.useCallback)(
+    (e) => {
+      var _a;
+      if (!onInteractionChange) return;
+      const el = e.target;
+      if (!((_a = el == null ? void 0 : el.closest) == null ? void 0 : _a.call(el, ROOM_SCROLL_SURFACE_SELECTOR))) return;
+      notifyRoomScrollSurfaceActive();
+    },
+    [onInteractionChange, notifyRoomScrollSurfaceActive]
+  );
+  (0, import_react.useEffect)(() => {
+    return () => {
+      onInteractionChange == null ? void 0 : onInteractionChange(false);
+    };
+  }, [onInteractionChange]);
   const itemNodes = (0, import_react.useMemo)(() => {
     const isPixel = itemUnit === "pixel";
     const g = itemGap;
@@ -104,7 +146,8 @@ function ItemLayer(props) {
         {
           key,
           className: (0, import_classnames.default)(`${PREFIX}-item`, {
-            [`${PREFIX}-item-hoverable`]: enableHover
+            [`${PREFIX}-item-hoverable`]: enableHover,
+            [`${PREFIX}-item-hover-outline`]: enableHover && itemHoverOutline
           }),
           style: {
             position: "absolute",
@@ -119,7 +162,9 @@ function ItemLayer(props) {
           },
           onClick: (e) => onItemClick == null ? void 0 : onItemClick(item, index, e),
           onMouseEnter: (e) => onItemHover == null ? void 0 : onItemHover(item, index, e),
-          onMouseLeave: (e) => onItemLeave == null ? void 0 : onItemLeave(item, index, e)
+          onMouseLeave: (e) => onItemLeave == null ? void 0 : onItemLeave(item, index, e),
+          onPointerDownCapture: handleItemPointerDownCapture,
+          onTouchStartCapture: handleItemTouchStartCapture
         },
         renderItem(item, index)
       );
@@ -132,10 +177,13 @@ function ItemLayer(props) {
     itemUnit,
     itemGap,
     enableHover,
+    itemHoverOutline,
     onItemClick,
     onItemHover,
     onItemLeave,
-    getMergedItemWrapperStyle
+    getMergedItemWrapperStyle,
+    handleItemPointerDownCapture,
+    handleItemTouchStartCapture
   ]);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",

package/lib/components/pisellFloorMapLayout/components/ItemLayer.less

@@ -11,9 +11,12 @@
   cursor: pointer;
   z-index: 0;
 
-  &-hoverable:hover {
-    outline: 2px solid rgba(24, 144, 255, 0.5);
-    outline-offset: -2px;
+  /** hover 描边与编辑态选中一致（见 EditableItemLayer：`pisell-floor-map-layout-editable-item-selected`） */
+
+  &-hoverable&-hover-outline:hover {
+    outline: 3px solid var(--fmap-primary, #1677ff);
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.25);
     z-index: 1;
   }
 }

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

@@ -0,0 +1,27 @@
+/**
+ * MapLayer - 楼层图底层
+ * 负责背景（无/纯色/图片/SVG）、网格线、padding、gap
+ */
+import React from 'react';
+import type { FloorMapLayerConfig } from '../types';
+import './MapLayer.less';
+export interface MapLayerProps {
+    /** 底层配置 */
+    config?: FloorMapLayerConfig;
+    /** 内容区域宽度（逻辑单位或像素，用于网格线计算） */
+    contentWidth?: number;
+    /** 内容区域高度 */
+    contentHeight?: number;
+    /** 每格像素尺寸（用于网格线间距） */
+    cellSize?: number;
+    /** 为 true 时不应用纯色背景，让画布底层网格透出 */
+    preferCanvasGrid?: boolean;
+    /** 为 true 时容器设置 pointer-events: none，空白处点击可透传到下层，供 react-zoom-pan-pinch 画布平移 */
+    pointerEventsNone?: boolean;
+    /** 子节点（展示层会叠在上方） */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+}
+export declare function MapLayer(props: MapLayerProps): JSX.Element;
+export default MapLayer;

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

@@ -0,0 +1,46 @@
+/**
+ * ViewControls - 内置视图控制：默认仅缩放；可选复位、区域定位、全屏等
+ * 平面图（dockChrome）：Dock 折叠入口 + 展开条（含业务插槽、空闲自动收起）
+ * 非平面图：单条横栏，缩放与工具始终同排（无 Menu 折叠）
+ */
+import React from 'react';
+import type { FloorMapControlsConfig } from '../types';
+import './ViewControls.less';
+/** 从 react-zoom-pan-pinch 拿到的控制 API（由主组件传入） */
+export interface ViewControlsApi {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetTransform: () => void;
+    /** 区域定位，可能由主组件基于 items 计算后封装 */
+    fitBounds?: () => void;
+    /** 切换全屏（requestFullscreen / exitFullscreen） */
+    toggleFullscreen?: () => void;
+}
+export interface ViewControlsProps {
+    /** 控制 API */
+    api: ViewControlsApi;
+    /** 显隐配置 */
+    config?: FloorMapControlsConfig;
+    /** 当前缩放比例（1 = 100%），用于 Stepper 展示 */
+    scale?: number;
+    /** 当前是否处于全屏 */
+    isFullscreen?: boolean;
+    className?: string;
+    /** 与 config.showGridToggle 联用：当前画布是否显示网格 */
+    mapGridVisible?: boolean;
+    /** 切换当前画布 draft 的 mapLayer.showGrid */
+    onToggleMapGrid?: () => void;
+    /**
+     * 平面图 Dock：圆角浅底样式，默认折叠为单入口；展开后含缩放、工具、全屏与 dockExpandedTrailing
+     */
+    dockChrome?: boolean;
+    /** Dock 展开区最右侧业务插槽（如「编辑画布」） */
+    dockExpandedTrailing?: React.ReactNode;
+    /**
+     * Dock 展开后无操作自动收起（毫秒）；0 表示不自动收起
+     * @default 10000
+     */
+    autoCollapseDockMs?: number;
+}
+export declare function ViewControls(props: ViewControlsProps): JSX.Element | null;
+export default ViewControls;