@pisell/materials 1.8.54 → 1.8.56

package/es/components/pisellFloorMapLayout/components/FloorMapToolbar.less

@@ -4,8 +4,8 @@
     position: relative;
     /**
      * 中等宽度抽屉：248px → 124px。
-     * 配合 cellW/cellH（见 FloorMapToolbar.tsx）按 0.5 倍渲染，preview-cell（最大 92px）
-     * + 标准 padding（12 8）正好落在 124px 内，兼顾画布展示空间与图元预览可视性。
+     * 配合 cellW/cellH（见 FloorMapToolbar.tsx）侧栏预览为历史一半（最大约 46px），
+     * + 标准 padding（12 8）落在 124px 内，兼顾画布展示空间与图元预览可视性。
      */
     width: 124px;
     flex-shrink: 0;
@@ -96,7 +96,7 @@
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    /** 124px 抽屉下，左右各留 8px 给 preview-card 的标准 padding 兜住 92px cell */
+    /** 124px 抽屉下，左右各留 8px 给 preview-card 的标准 padding 兜住约 46px cell */
     padding: 12px 8px;
     /**
      * 写死 124px 防止展开动画过程中跟随父容器 0→124px 同步缩放，避免文案被挤成竖排。
@@ -115,13 +115,22 @@
     }
   }
 
+  /**
+   * 编辑侧栏分类标题：在 toolbar-body 纵向滚动时吸顶，便于长列表切换「资源 / 装饰」等分组。
+   * 后一个分类标题滚到顶部时会顶开前一个（同一滚动容器内的标准 sticky 叠放）。
+   */
   &-section-title {
+    position: sticky;
+    top: 0;
+    z-index: 2;
     margin: 0 0 8px 0;
-    padding: 0 4px;
+    padding: 4px 4px 6px;
     font-size: 13px;
     font-weight: 600;
     color: #262626;
     line-height: 20px;
+    background: #fff;
+    box-shadow: 0 1px 0 #f0f0f0;
   }
 
   &-preview-list {
@@ -136,6 +145,145 @@
     gap: 6px;
   }
 
+  &-view-all {
+    display: block;
+    width: 100%;
+    margin-top: 2px;
+    padding: 6px 8px;
+    font-size: 12px;
+    line-height: 18px;
+    color: var(--fmap-primary, #1677ff);
+    text-align: center;
+    background: transparent;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: border-color 0.2s, background 0.2s;
+
+    &:hover {
+      background: #f0f7ff;
+      border-color: #91caff;
+    }
+  }
+
+  &-view-all-modal-hint {
+    margin: 0 0 4px;
+    font-size: 12px;
+    line-height: 18px;
+    color: #8c8c8c;
+  }
+
+  &-view-all-modal-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
+    gap: 4px;
+    max-height: min(60vh, 420px);
+    overflow-y: auto;
+    padding: 0;
+  }
+
+  &-view-all-modal-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 6px;
+    text-align: center;
+    background: #fafafa;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
+
+    &:hover {
+      border-color: #91caff;
+      background: #f0f7ff;
+    }
+
+    &--selected {
+      border-color: var(--fmap-primary, #1677ff);
+      background: color-mix(in srgb, var(--fmap-primary, #1677ff) 10%, #fff);
+      box-shadow: 0 0 0 1px var(--fmap-primary, #1677ff);
+    }
+  }
+
+  /** 名称下方居中：数量步进器（触控友好尺寸） */
+  &-view-all-modal-card-stepper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 3px 4px;
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+  }
+
+  &-view-all-modal-card-stepper-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    font-size: 12px;
+    line-height: 1;
+    color: #595959;
+    background: #fafafa;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: border-color 0.15s, color 0.15s, background 0.15s;
+
+    .anticon {
+      font-size: 12px;
+    }
+
+    &:hover:not(:disabled) {
+      color: var(--fmap-primary, #1677ff);
+      border-color: #91caff;
+      background: #f0f7ff;
+    }
+
+    &:disabled {
+      color: #bfbfbf;
+      background: #f5f5f5;
+      border-color: #f0f0f0;
+      cursor: not-allowed;
+    }
+  }
+
+  &-view-all-modal-card-stepper-qty {
+    min-width: 18px;
+    padding: 0 4px;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 26px;
+    color: #262626;
+    text-align: center;
+    user-select: none;
+  }
+
+  &-view-all-modal-card-preview {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 28px;
+    pointer-events: none;
+
+    .pisell-floor-map-layout-toolbar-preview-cell {
+      flex-shrink: 0;
+    }
+  }
+
+  &-view-all-modal-card-label {
+    width: 100%;
+    margin: 0;
+    font-size: 11px;
+    line-height: 16px;
+    color: #262626;
+    text-align: center;
+  }
+
   &-preview-group-label {
     padding: 0 4px;
     font-size: 12px;
@@ -153,7 +301,7 @@
   &-preview-card {
     display: block;
     width: 100%;
-    /** 标准 padding 适配 124px 抽屉 + 92px cell 的尺寸预算 */
+    /** 标准 padding 适配 124px 抽屉 + 约 46px cell 的尺寸预算 */
     padding: 8px;
     text-align: center;
     background: #fafafa;
@@ -199,13 +347,12 @@
   }
 
   &-preview-content {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    flex-shrink: 0;
     pointer-events: none;
-  }
-
-  &-preview-cell {
-    .pisell-floor-map-layout-toolbar-preview-content {
-      overflow: hidden;
-    }
+    overflow: hidden;
   }
 
   &-preview-fallback {
@@ -329,6 +476,27 @@
     line-height: 1.45;
   }
 
+  &-resource-picker-btn {
+    display: block;
+    width: 100%;
+    margin-top: 4px;
+    padding: 8px 10px;
+    font-size: 13px;
+    line-height: 18px;
+    text-align: center;
+    color: var(--fmap-primary, #1677ff);
+    background: #fff;
+    border: 1px solid #91caff;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+
+    &:hover {
+      background: #f0f7ff;
+      border-color: var(--fmap-primary, #1677ff);
+    }
+  }
+
   &-record-hint {
     font-size: 11px;
     color: #8c8c8c;
@@ -419,3 +587,34 @@
     line-height: 1;
   }
 }
+
+/**
+ * 「查看全部」弹窗：padding 统一 6px，块间距 / grid gap 统一 4px（覆盖 antd 默认 24px 内边距）。
+ */
+.pisell-floor-map-layout-toolbar-view-all-modal {
+  .pisell-lowcode-modal-content {
+    padding: 0;
+  }
+
+  .pisell-lowcode-modal-header {
+    padding: 6px 6px 0;
+    margin-bottom: 0;
+  }
+
+  .pisell-lowcode-modal-body {
+    padding: 4px 6px 6px;
+  }
+
+  .pisell-lowcode-modal-footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 4px;
+    padding: 4px 6px 6px;
+    margin-top: 0;
+
+    > .pisell-lowcode-btn + .pisell-lowcode-btn {
+      margin-inline-start: 0;
+    }
+  }
+}

package/es/components/pisellFloorMapLayout/components/FloorMapToolbarViewAllModal.js

@@ -0,0 +1,81 @@
+import { toPropertyKey } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/toPropertyKey.js";
+import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import { _objectWithoutProperties } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
+import { FLOOR_MAP_LAYOUT_CLASS_PREFIX } from "../floorMapLayoutConstants.js";
+import { expandPaletteEntriesByQuantity } from "../utils/floorMapToolbarPalette.js";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { locales } from "@pisell/utils";
+import { Modal } from "antd";
+import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
+import classNames from "classnames";
+//#region src/components/pisellFloorMapLayout/components/FloorMapToolbarViewAllModal.tsx
+/**
+* 侧栏 palette「查看全部」：任意分类下图元超过展示上限时，弹窗内按数量多选并一键落点。
+*/
+const I18N_TB = "pisell-floor-map-layout.toolbar";
+/** 单种图元在弹窗内可添加的最大数量 */
+const PALETTE_VIEW_ALL_MODAL_MAX_QTY = 99;
+function FloorMapToolbarViewAllModal(props) {
+	const { open, categoryLabel, entries, onClose, onConfirm, renderEntryPreview } = props;
+	const [quantities, setQuantities] = useState({});
+	useEffect(() => {
+		if (!open) setQuantities({});
+	}, [open]);
+	const totalQty = useMemo(() => Object.values(quantities).reduce((sum, n) => sum + (Number.isFinite(n) && n > 0 ? n : 0), 0), [quantities]);
+	const setQty = useCallback((key, next) => {
+		const clamped = Math.max(0, Math.min(PALETTE_VIEW_ALL_MODAL_MAX_QTY, next));
+		setQuantities((prev) => {
+			if (clamped === 0) {
+				const { [key]: _removed } = prev;
+				return _objectWithoutProperties(prev, [key].map(toPropertyKey));
+			}
+			return _objectSpread2(_objectSpread2({}, prev), {}, { [key]: clamped });
+		});
+	}, []);
+	const title = useMemo(() => locales.getText(`${I18N_TB}.view-all-modal-title`).replace(/\{category\}/g, categoryLabel), [categoryLabel]);
+	return /* @__PURE__ */ React.createElement(Modal, {
+		open,
+		title,
+		onCancel: onClose,
+		destroyOnClose: true,
+		width: 520,
+		zIndex: 1100,
+		className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal`,
+		okText: locales.getText(`${I18N_TB}.view-all-modal-add`),
+		cancelText: locales.getText(`${I18N_TB}.view-all-modal-cancel`),
+		okButtonProps: { disabled: totalQty === 0 },
+		onOk: () => {
+			if (totalQty === 0) return;
+			onConfirm(expandPaletteEntriesByQuantity(entries, quantities));
+			onClose();
+		}
+	}, /* @__PURE__ */ React.createElement("p", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-hint` }, locales.getText(`${I18N_TB}.view-all-modal-hint`)), /* @__PURE__ */ React.createElement("div", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-grid` }, entries.map((entry) => {
+		var _quantities$entry$key;
+		const qty = (_quantities$entry$key = quantities[entry.key]) !== null && _quantities$entry$key !== void 0 ? _quantities$entry$key : 0;
+		const selected = qty > 0;
+		return /* @__PURE__ */ React.createElement("div", {
+			key: entry.key,
+			className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card`, { [`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card--selected`]: selected })
+		}, /* @__PURE__ */ React.createElement("div", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-preview` }, renderEntryPreview(entry)), /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-label` }, entry.label), /* @__PURE__ */ React.createElement("div", {
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-stepper`,
+			onClick: (e) => e.stopPropagation()
+		}, /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-stepper-btn`,
+			disabled: qty <= 0,
+			"aria-label": locales.getText(`${I18N_TB}.view-all-modal-qty-decrease`),
+			onClick: () => setQty(entry.key, qty - 1)
+		}, /* @__PURE__ */ React.createElement(MinusOutlined, null)), /* @__PURE__ */ React.createElement("span", {
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-stepper-qty`,
+			"aria-live": "polite"
+		}, qty), /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-view-all-modal-card-stepper-btn`,
+			disabled: qty >= PALETTE_VIEW_ALL_MODAL_MAX_QTY,
+			"aria-label": locales.getText(`${I18N_TB}.view-all-modal-qty-increase`),
+			onClick: () => setQty(entry.key, qty + 1)
+		}, /* @__PURE__ */ React.createElement(PlusOutlined, null))));
+	})));
+}
+//#endregion
+export { FloorMapToolbarViewAllModal as default };

package/es/components/pisellFloorMapLayout/components/FloorMapZoneElement.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+//#region src/components/pisellFloorMapLayout/components/FloorMapZoneElement.d.ts
+interface FloorMapZoneElementProps {
+  name?: string;
+}
+declare function FloorMapZoneElement(props: FloorMapZoneElementProps): React.JSX.Element;
+//#endregion
+export { FloorMapZoneElement };

package/es/components/pisellFloorMapLayout/components/FloorMapZoneElement.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { locales } from "@pisell/utils";
+import "./FloorMapZoneElement.less";
+//#region src/components/pisellFloorMapLayout/components/FloorMapZoneElement.tsx
+/**
+* 分区（zone）图元展示：虚线容器 + 左上角标题标签，避免与空白占位资源混淆。
+*/
+const PREFIX = "pisell-floor-map-zone";
+const I18N_BADGE = "pisell-floor-map-layout.zone.title-badge";
+const I18N_UNNAMED = "pisell-floor-map-layout.zone.unnamed";
+function FloorMapZoneElement(props) {
+	const raw = props.name != null ? String(props.name).trim() : "";
+	const hasName = raw.length > 0;
+	const displayName = hasName ? raw : locales.getText(I18N_UNNAMED);
+	return /* @__PURE__ */ React.createElement("div", { className: PREFIX }, /* @__PURE__ */ React.createElement("div", {
+		className: `${PREFIX}__body`,
+		"aria-hidden": true
+	}), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__title` }, /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}__title-badge` }, locales.getText(I18N_BADGE)), /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}__title-text${hasName ? "" : ` ${PREFIX}__title-text--placeholder`}` }, displayName)));
+}
+//#endregion
+export { FloorMapZoneElement };

package/es/components/pisellFloorMapLayout/components/FloorMapZoneElement.less

@@ -0,0 +1,74 @@
+/**
+ * 分区容器图元：标题为左上角标签条，与居中灰底「空白占位」资源区分。
+ */
+.pisell-floor-map-zone {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.pisell-floor-map-zone__body {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 2px dashed #91caff;
+  border-radius: 8px;
+  background: color-mix(
+    in srgb,
+    var(--fmap-primary, #1677ff) 8%,
+    #fff
+  );
+}
+
+.pisell-floor-map-zone__title {
+  position: absolute;
+  top: 0;
+  left: 10px;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: calc(100% - 20px);
+  padding: 3px 10px 3px 8px;
+  transform: translateY(-50%);
+  background: #fff;
+  border: 1px solid #91caff;
+  border-radius: 6px;
+  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.12);
+  line-height: 1.3;
+  pointer-events: none;
+}
+
+.pisell-floor-map-zone__title-badge {
+  flex-shrink: 0;
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--fmap-primary, #1677ff);
+  background: color-mix(
+    in srgb,
+    var(--fmap-primary, #1677ff) 14%,
+    #fff
+  );
+}
+
+.pisell-floor-map-zone__title-text {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: #101828;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pisell-floor-map-zone__title-text--placeholder {
+  font-weight: 500;
+  color: #667085;
+}

package/es/components/pisellFloorMapLayout/components/ItemLayer.less

@@ -33,7 +33,9 @@
  * 仅在 item 内包含该类卡片时放开 overflow，避免影响其它图元定位/裁剪。
  */
 .pisell-floor-map-layout-item:has(.pisell-res-floor-room-card[data-tooltip-time='on']),
-.pisell-floor-map-layout-item:has(.pisell-res-floor-room-card[data-reserved-halo='on']) {
+.pisell-floor-map-layout-item:has(.pisell-res-floor-room-card[data-reserved-halo='on']),
+.pisell-floor-map-layout-item:has(.pisell-topology-device-card),
+.pisell-floor-map-layout-item:has(.pisell-floor-map-zone) {
   overflow: visible;
   z-index: 1;
 }

package/es/components/pisellFloorMapLayout/components/NodePortMarkers.js

@@ -0,0 +1,70 @@
+import { getPortMarkerDisplayPoint } from "../utils/edgeRouting.js";
+import React from "react";
+import classNames from "classnames";
+import "./NodePortMarkers.less";
+//#region src/components/pisellFloorMapLayout/components/NodePortMarkers.tsx
+/**
+* NodePortMarkers - 选中图元时显示四向锚点，用于拉线
+*/
+/** 端口圆点的视觉直径（px），与 NodePortMarkers.less 中 base width/height 保持一致 */
+const MARKER_VISUAL_SIZE = 10;
+const PREFIX = "pisell-floor-map-layout";
+const MARKER_ANCHORS = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+function NodePortMarkers(props) {
+	const { rect, contentOffsetX = 0, contentOffsetY = 0, previewOnly = false, onAnchorPointerDown, highlightAnchors = [], className, viewportScale = 1 } = props;
+	const safeScale = Math.max(viewportScale, .01);
+	const markerSize = MARKER_VISUAL_SIZE / safeScale;
+	const markerHalf = markerSize / 2;
+	const markerOutset = 16 / safeScale;
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classNames(`${PREFIX}-port-markers`, className),
+		style: {
+			position: "absolute",
+			left: contentOffsetX + rect.left,
+			top: contentOffsetY + rect.top,
+			width: rect.width,
+			height: rect.height,
+			pointerEvents: "none",
+			zIndex: 5
+		}
+	}, MARKER_ANCHORS.map((anchor) => {
+		const pt = getPortMarkerDisplayPoint({
+			left: 0,
+			top: 0,
+			width: rect.width,
+			height: rect.height
+		}, anchor, markerOutset);
+		const highlighted = highlightAnchors.includes(anchor);
+		const Tag = previewOnly ? "span" : "button";
+		return /* @__PURE__ */ React.createElement(Tag, {
+			key: anchor,
+			type: previewOnly ? void 0 : "button",
+			className: classNames(`${PREFIX}-port-marker`, {
+				[`${PREFIX}-port-marker--highlight`]: highlighted,
+				[`${PREFIX}-port-marker--preview`]: previewOnly
+			}),
+			style: {
+				left: pt.x,
+				top: pt.y,
+				width: markerSize,
+				height: markerSize,
+				marginLeft: -markerHalf,
+				marginTop: -markerHalf,
+				pointerEvents: previewOnly ? "none" : "auto"
+			},
+			"aria-label": anchor,
+			onPointerDown: previewOnly || !onAnchorPointerDown ? void 0 : (ev) => {
+				ev.stopPropagation();
+				ev.preventDefault();
+				onAnchorPointerDown(anchor, ev);
+			}
+		});
+	}));
+}
+//#endregion
+export { NodePortMarkers };

package/es/components/pisellFloorMapLayout/components/NodePortMarkers.less

@@ -0,0 +1,33 @@
+.pisell-floor-map-layout-port-markers {
+  overflow: visible;
+  /** 高于边中点缩放手柄 (z-index: 3)，避免拖拽连线时误触缩放 */
+  z-index: 5;
+}
+
+.pisell-floor-map-layout-port-markers--draw-target {
+  z-index: 6;
+}
+
+.pisell-floor-map-layout-port-marker {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  margin: -5px 0 0 -5px;
+  padding: 0;
+  border: 2px solid #1570ef;
+  border-radius: 50%;
+  background: #fff;
+  cursor: crosshair;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
+  z-index: 1;
+}
+
+.pisell-floor-map-layout-port-marker--highlight {
+  background: #1570ef;
+  transform: scale(1.15);
+}
+
+.pisell-floor-map-layout-port-marker--preview {
+  cursor: default;
+  box-shadow: 0 0 0 2px rgba(21, 112, 239, 0.25);
+}

package/es/components/pisellFloorMapLayout/components/ViewControls.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { locales } from "@pisell/utils";
-import { BorderInnerOutlined, ExpandOutlined, FullscreenExitOutlined, FullscreenOutlined, LeftOutlined, LockOutlined, MinusOutlined, PlusOutlined, ReloadOutlined, RightOutlined, UnlockOutlined } from "@ant-design/icons";
+import { BorderInnerOutlined, ExpandOutlined, FullscreenExitOutlined, FullscreenOutlined, LeftOutlined, LockOutlined, MinusOutlined, NodeIndexOutlined, PlusOutlined, ReloadOutlined, RightOutlined, UnlockOutlined } from "@ant-design/icons";
 import classNames from "classnames";
 import "./ViewControls.less";
 //#region src/components/pisellFloorMapLayout/components/ViewControls.tsx
@@ -13,12 +13,13 @@ const PREFIX = "pisell-floor-map-layout";
 const I18N_VC = "pisell-floor-map-layout.view-controls";
 function ViewControls(props) {
 	var _config$horizontalAli;
-	const { api, config = {}, scale = 1, isFullscreen = false, fitBoundsActive = false, className, mapGridVisible = false, onToggleMapGrid, viewportLocked = false, onToggleViewportLock, dockChrome = false, dockExpandedToolButtons, dockExpandedTrailing, autoCollapseDockMs = 1e4 } = props;
+	const { api, config = {}, scale = 1, isFullscreen = false, fitBoundsActive = false, className, mapGridVisible = false, onToggleMapGrid, edgesLayerVisible = true, onToggleEdgesLayer, viewportLocked = false, onToggleViewportLock, dockChrome = false, dockExpandedToolButtons, dockExpandedTrailing, autoCollapseDockMs = 1e4 } = props;
 	const showZoom = config.showZoom !== false;
 	const showReset = config.showReset === true;
 	const showFitBounds = config.showFitBounds === true;
 	const showFullscreen = config.showFullscreen === true;
 	const showGridToggle = config.showGridToggle === true && typeof onToggleMapGrid === "function";
+	const showEdgesToggle = config.showEdgesToggle === true && typeof onToggleEdgesLayer === "function";
 	const showViewportLock = config.showViewportLock === true && typeof onToggleViewportLock === "function";
 	/**
 	* `horizontalAlign` 仅作用于非 dockChrome 的普通横条（决定贴左下还是右下）。
@@ -26,7 +27,7 @@ function ViewControls(props) {
 	*/
 	const horizontalAlign = (_config$horizontalAli = config.horizontalAlign) !== null && _config$horizontalAli !== void 0 ? _config$horizontalAli : "start";
 	const scalePercent = Math.round(scale * 100);
-	const showTools = showReset || showFitBounds || showFullscreen || showGridToggle || showViewportLock;
+	const showTools = showReset || showFitBounds || showFullscreen || showGridToggle || showEdgesToggle || showViewportLock;
 	const hasDockToolButtons = dockExpandedToolButtons != null && dockExpandedToolButtons !== false;
 	const hasTrailingSlot = dockExpandedTrailing != null && dockExpandedTrailing !== false;
 	const dockHasExpandable = dockChrome && (showTools || hasDockToolButtons || hasTrailingSlot);
@@ -110,7 +111,14 @@ function ViewControls(props) {
 			onClick: () => onToggleMapGrid(),
 			"aria-pressed": mapGridVisible,
 			"aria-label": locales.getText(mapGridVisible ? `${I18N_VC}.grid-hide-aria` : `${I18N_VC}.grid-show-aria`)
-		}, /* @__PURE__ */ React.createElement(BorderInnerOutlined, null)) : null, showViewportLock && !omitLock ? /* @__PURE__ */ React.createElement("button", {
+		}, /* @__PURE__ */ React.createElement(BorderInnerOutlined, null)) : null, showEdgesToggle ? /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			className: classNames(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: edgesLayerVisible }),
+			onClick: () => onToggleEdgesLayer(),
+			"aria-pressed": edgesLayerVisible,
+			"aria-label": locales.getText(edgesLayerVisible ? `${I18N_VC}.edges-hide-aria` : `${I18N_VC}.edges-show-aria`),
+			title: locales.getText(edgesLayerVisible ? `${I18N_VC}.edges-hide-aria` : `${I18N_VC}.edges-show-aria`)
+		}, /* @__PURE__ */ React.createElement(NodeIndexOutlined, null)) : null, showViewportLock && !omitLock ? /* @__PURE__ */ React.createElement("button", {
 			type: "button",
 			className: classNames(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: viewportLocked }),
 			onClick: () => onToggleViewportLock(),
@@ -129,7 +137,7 @@ function ViewControls(props) {
 	* dockChrome 展开条内的「工具区」按钮：锁 / 全览 已常驻在 `dock-collapsed-extras` 屏右缘，
 	* 展开条内不再重复渲染，避免冗余。
 	*/
-	const dockExpandedBarHasToolButtons = showReset || showGridToggle || showFullscreen && Boolean(api.toggleFullscreen);
+	const dockExpandedBarHasToolButtons = showReset || showGridToggle || showEdgesToggle || showFullscreen && Boolean(api.toggleFullscreen);
 	/**
 	* dockChrome 合并入口：同一个 toggle 按钮承担展开/收起，常驻在 slide 内最左端。
 	* - 折叠态：箭头朝左，点一下展开（slide 由 toggle 宽撑成 max-width）；

package/es/components/pisellFloorMapLayout/components/ViewControlsWithZoom.js

@@ -28,6 +28,8 @@ function ViewControlsWithZoom(props) {
 		fitBoundsActive: props.fitBoundsActive,
 		mapGridVisible: props.mapGridVisible,
 		onToggleMapGrid: props.onToggleMapGrid,
+		edgesLayerVisible: props.edgesLayerVisible,
+		onToggleEdgesLayer: props.onToggleEdgesLayer,
 		viewportLocked: props.viewportLocked,
 		onToggleViewportLock: props.onToggleViewportLock,
 		dockChrome: props.dockChrome,

package/es/components/pisellFloorMapLayout/context/mergeFloorMapLayoutContext.js

@@ -4,7 +4,7 @@ import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/
 * 将 `FloorMapLayoutContext` 与 Layout props 合并：各字段 props ?? ctx，props 显式值优先。
 */
 function mergeFloorMapLayoutPropsFromContext(props, ctx) {
-	var _props$floorMapConfig, _props$dataSources, _props$onSave, _props$onDataSourceRe, _props$dataSourceLabe, _props$dataSourceForm, _props$dataSourceReco, _props$loading, _props$saveError, _props$onElementRende, _props$toolbarShowSav, _props$floorMapFullsc, _props$appearanceMode, _props$showDataSource, _props$viewportDockTo, _props$viewportDockTr;
+	var _props$floorMapConfig, _props$dataSources, _props$onSave, _props$onDataSourceRe, _props$dataSourceLabe, _props$dataSourceForm, _props$dataSourceReco, _props$loading, _props$saveError, _props$onElementRende, _props$toolbarShowSav, _props$paletteSidebar, _props$floorMapFullsc, _props$appearanceMode, _props$showDataSource, _props$viewportDockTo, _props$viewportDockTr;
 	if (ctx == null) return props;
 	return _objectSpread2(_objectSpread2({}, props), {}, {
 		floorMapConfig: (_props$floorMapConfig = props.floorMapConfig) !== null && _props$floorMapConfig !== void 0 ? _props$floorMapConfig : ctx.floorMapConfig,
@@ -18,6 +18,7 @@ function mergeFloorMapLayoutPropsFromContext(props, ctx) {
 		saveError: (_props$saveError = props.saveError) !== null && _props$saveError !== void 0 ? _props$saveError : ctx.saveError,
 		onElementRenderError: (_props$onElementRende = props.onElementRenderError) !== null && _props$onElementRende !== void 0 ? _props$onElementRende : ctx.onElementRenderError,
 		toolbarShowSave: (_props$toolbarShowSav = props.toolbarShowSave) !== null && _props$toolbarShowSav !== void 0 ? _props$toolbarShowSav : ctx.toolbarShowSave,
+		paletteSidebarVisibleLimit: (_props$paletteSidebar = props.paletteSidebarVisibleLimit) !== null && _props$paletteSidebar !== void 0 ? _props$paletteSidebar : ctx.paletteSidebarVisibleLimit,
 		floorMapFullscreenMode: (_props$floorMapFullsc = props.floorMapFullscreenMode) !== null && _props$floorMapFullsc !== void 0 ? _props$floorMapFullsc : ctx.floorMapFullscreenMode,
 		appearanceMode: (_props$appearanceMode = props.appearanceMode) !== null && _props$appearanceMode !== void 0 ? _props$appearanceMode : ctx.appearanceMode,
 		showDataSourceRecordFormBlock: (_props$showDataSource = props.showDataSourceRecordFormBlock) !== null && _props$showDataSource !== void 0 ? _props$showDataSource : ctx.showDataSourceRecordFormBlock,

package/es/components/pisellFloorMapLayout/floorMapLayoutConstants.js

@@ -13,7 +13,7 @@ const FLOOR_MAP_PHONE_EDIT_DRAWER_Z_INDEX = 2002;
 const FLOOR_MAP_CONFIRM_OVERLAY_Z_INDEX = 2100;
 /**
 * 「全览」伪画布 Tab id。
-* 仅在阅读态、启用画布 > 1 时插入到画布 Tab 列表最前，用来承载「同时查看所有画布」的入口。
+* 仅在阅读态、启用画布 > 1 时插入到画布 Tab 列表末尾，用来承载「同时查看所有画布」的入口。
 * 不会写入 `config.canvases`，也不参与视口持久化、items 计算等真实画布逻辑。
 */
 const FLOOR_MAP_OVERVIEW_TAB_ID = "__pisell_floor_map_overview__";