@pisell/materials 1.8.20 → 1.8.21

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -17,6 +17,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 import React, { useMemo, useRef, useImperativeHandle, useCallback, useState, useEffect } from 'react';
 import classNames from 'classnames';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import MapLayer from "./components/MapLayer";
 import ItemLayer from "./components/ItemLayer";
@@ -42,7 +43,7 @@ import { initFloorMapLayoutLocales } from "./utils/floorMapCanvasDisplay";
 import "./PisellFloorMapLayout.less";
 var PREFIX = 'pisell-floor-map-layout';
 function PisellFloorMapLayoutInner(props, ref) {
-  var _engineCtx$engine, _config$sceneElements, _mapLayer$boundingPad;
+  var _engineCtx$engine, _config$sceneElements;
   var layoutCtx = useFloorMapLayoutContext();
   var p = mergeFloorMapLayoutPropsFromContext(props, layoutCtx);
   var className = p.className,
@@ -81,7 +82,10 @@ function PisellFloorMapLayoutInner(props, ref) {
     onElementRenderError = p.onElementRenderError,
     _p$toolbarShowSave = p.toolbarShowSave,
     toolbarShowSave = _p$toolbarShowSave === void 0 ? true : _p$toolbarShowSave,
-    floorMapFullscreenMode = p.floorMapFullscreenMode;
+    floorMapFullscreenMode = p.floorMapFullscreenMode,
+    showDataSourceRecordFormBlock = p.showDataSourceRecordFormBlock,
+    floorMapViewportOverlay = p.floorMapViewportOverlay,
+    canvasTabsBarTrailing = p.canvasTabsBarTrailing;
   var isFloorMapView = Boolean(floorMapConfigProp);
   var contentOffsetRef = useRef({
     x: 0,
@@ -101,7 +105,8 @@ function PisellFloorMapLayoutInner(props, ref) {
     dataSourceRecordForm: dataSourceRecordForm,
     dataSourceLabels: dataSourceLabels,
     layoutPrefix: PREFIX,
-    contentOffsetRef: contentOffsetRef
+    contentOffsetRef: contentOffsetRef,
+    showDataSourceRecordFormBlock: showDataSourceRecordFormBlock
   });
   var config = edit.config,
     currentCanvasId = edit.currentCanvasId,
@@ -122,30 +127,64 @@ function PisellFloorMapLayoutInner(props, ref) {
     placeSceneElementFromPaletteDrop = edit.placeSceneElementFromPaletteDrop,
     editPanelParams = edit.editPanelParams,
     placeOverlayClass = edit.placeOverlayClass,
-    isLayoutDirty = edit.isLayoutDirty;
+    isLayoutDirty = edit.isLayoutDirty,
+    toggleDraftCanvasShowGrid = edit.toggleDraftCanvasShowGrid;
+  var effectiveMapLayer = useMemo(function () {
+    var _canvas$mapLayer;
+    if (!isFloorMapView || !config || !currentCanvasId) {
+      return mapLayer;
+    }
+    var canvas = config.canvases.find(function (c) {
+      return c.id === currentCanvasId;
+    });
+    return _objectSpread(_objectSpread({}, mapLayer !== null && mapLayer !== void 0 ? mapLayer : {}), (_canvas$mapLayer = canvas === null || canvas === void 0 ? void 0 : canvas.mapLayer) !== null && _canvas$mapLayer !== void 0 ? _canvas$mapLayer : {});
+  }, [isFloorMapView, config, currentCanvasId, mapLayer]);
+
+  /**
+   * 必须与下方 TransformWrapper 的 `key` 完全一致。
+   * 远程/合并配置落地后 boundingPadding 等会变 → Wrapper 重挂载 → 若 autoFit 仍按旧「仅 canvasId」帧认为已 done，首屏会停在初始 transform；切换画布才因 id 变化再次 fit。
+   */
+  var transformWrapperKey = useMemo(function () {
+    var _effectiveMapLayer$bo, _zoom$defaultScale;
+    if (!isFloorMapView) return 'fmap-layout';
+    var bp = (_effectiveMapLayer$bo = effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding) !== null && _effectiveMapLayer$bo !== void 0 ? _effectiveMapLayer$bo : 'd';
+    var z = (_zoom$defaultScale = zoom.defaultScale) !== null && _zoom$defaultScale !== void 0 ? _zoom$defaultScale : 1;
+    return "fmap-".concat(currentCanvasId !== null && currentCanvasId !== void 0 ? currentCanvasId : 'na', "-bp").concat(bp, "-z").concat(z);
+  }, [isFloorMapView, currentCanvasId, effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding, zoom.defaultScale]);
   var canvasesForTabs = useMemo(function () {
     return config ? mergeCanvasesForTabs(config) : [];
   }, [config]);
   var engineCtx = useEngineContext();
   var engineLocale = (engineCtx === null || engineCtx === void 0 || (_engineCtx$engine = engineCtx.engine) === null || _engineCtx$engine === void 0 || (_engineCtx$engine = _engineCtx$engine.props) === null || _engineCtx$engine === void 0 ? void 0 : _engineCtx$engine.locale) || 'zh-CN';
+  var hasCanvasTabsBarTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
   var showReadModeCanvasTabsBar = useMemo(function () {
     if (!isFloorMapView || mode !== 'read' || !config) return false;
+    if (hasCanvasTabsBarTrailing) return true;
     return canvasesForTabs.filter(function (c) {
       return c.enabled;
     }).length > 1;
-  }, [isFloorMapView, mode, config, canvasesForTabs]);
+  }, [isFloorMapView, mode, config, canvasesForTabs, hasCanvasTabsBarTrailing]);
   var readCanvasTabsAriaLabel = useMemo(function () {
     initFloorMapLayoutLocales(engineLocale);
     return locales.getText('pisell-floor-map-layout.read-canvas-tabs.aria');
   }, [engineLocale]);
+  var readCanvasTabsFsLabels = useMemo(function () {
+    initFloorMapLayoutLocales(engineLocale);
+    return {
+      fsEnterAria: locales.getText('pisell-floor-map-layout.edit-top-bar.fullscreen-enter-aria'),
+      fsEnterTitle: locales.getText('pisell-floor-map-layout.edit-top-bar.fullscreen-enter-title'),
+      fsExitAria: locales.getText('pisell-floor-map-layout.edit-top-bar.fullscreen-exit-aria'),
+      fsExitTitle: locales.getText('pisell-floor-map-layout.edit-top-bar.fullscreen-exit-title')
+    };
+  }, [engineLocale]);
   var loadingLabel = useMemo(function () {
     initFloorMapLayoutLocales(engineLocale);
     return locales.getText('pisell-floor-map-layout.loading');
   }, [engineLocale]);
   var cellSize = cellSizeProp !== null && cellSizeProp !== void 0 ? cellSizeProp : DEFAULT_CELL_SIZE;
   var itemGap = useMemo(function () {
-    return gapToPx(mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.gap);
-  }, [mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.gap]);
+    return gapToPx(effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.gap);
+  }, [effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.gap]);
   var effectiveItemUnit = isFloorMapView ? 'pixel' : itemUnit;
   var metrics = useFloorMapTransformMetrics({
     items: items,
@@ -157,8 +196,8 @@ function PisellFloorMapLayoutInner(props, ref) {
     zoom: zoom,
     transformRef: transformRef,
     contentOffsetRef: contentOffsetRef,
-    boundingPadding: mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.boundingPadding,
-    frameResetKey: isFloorMapView ? currentCanvasId !== null && currentCanvasId !== void 0 ? currentCanvasId : '' : undefined
+    boundingPadding: effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding,
+    frameResetKey: isFloorMapView ? transformWrapperKey : undefined
   });
   var containerRef = metrics.containerRef,
     mapAreaRef = metrics.mapAreaRef,
@@ -184,26 +223,14 @@ function PisellFloorMapLayoutInner(props, ref) {
   var useFullTopChrome = isFloorMapView && mode === 'edit' && (fsMode === 'locked' || fsMode === 'toggle' && isFullscreen);
   /** 仅 toggle 时向顶栏/控件传入，避免 locked/disabled 误显全屏按钮 */
   var editToggleFullscreen = fsMode === 'toggle' ? toggleFullscreen : undefined;
+  var readToggleFullscreen = isFloorMapView && mode === 'read' && fsMode === 'toggle' ? toggleFullscreen : undefined;
   var viewControlsConfig = useMemo(function () {
     if (!isFloorMapView || mode !== 'edit') return controls;
     return _objectSpread(_objectSpread({}, controls), {}, {
-      showFullscreen: false,
-      showFitBounds: false
+      showFullscreen: false
     });
   }, [isFloorMapView, mode, controls]);
-  var topBarExtraActions = useMemo(function () {
-    if (!isFloorMapView || mode !== 'edit') return null;
-    if (controls.showFitBounds !== true) return null;
-    return /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), "".concat(PREFIX, "-edit-top-bar-btn-ghost")),
-      onClick: function onClick() {
-        return fitBounds();
-      },
-      "aria-label": "\u533A\u57DF\u5B9A\u4F4D",
-      title: "\u533A\u57DF\u5B9A\u4F4D"
-    }, "\u229E");
-  }, [isFloorMapView, mode, controls.showFitBounds, fitBounds]);
+  var topBarExtraActions = null;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     mapPaletteDragActive = _useState2[0],
@@ -231,7 +258,8 @@ function PisellFloorMapLayoutInner(props, ref) {
       type: 'scene',
       elementKind: payload.elementKind,
       dataSourceKey: payload.dataSourceKey,
-      recordId: payload.recordId
+      recordId: payload.recordId,
+      recordIds: payload.recordIds
     });
   }, [isFloorMapView, mode, placeSceneElementFromPaletteDrop]);
   var applyPaletteTouchDropInScene = useCallback(function (payload, cx, cy) {
@@ -240,7 +268,8 @@ function PisellFloorMapLayoutInner(props, ref) {
       type: 'scene',
       elementKind: payload.elementKind,
       dataSourceKey: payload.dataSourceKey,
-      recordId: payload.recordId
+      recordId: payload.recordId,
+      recordIds: payload.recordIds
     });
   }, [isFloorMapView, mode, placeSceneElementFromPaletteDrop]);
   var paletteTouchDrag = useFloorMapPaletteTouchDrag({
@@ -298,9 +327,12 @@ function PisellFloorMapLayoutInner(props, ref) {
         var _transformRef$current3;
         return (_transformRef$current3 = transformRef.current) === null || _transformRef$current3 === void 0 ? void 0 : _transformRef$current3.resetTransform();
       },
-      fitBounds: fitBounds
+      fitBounds: fitBounds,
+      saveLayout: function saveLayout() {
+        return handleSave();
+      }
     };
-  }, [fitBounds]);
+  }, [fitBounds, handleSave]);
   var showSidebar = isFloorMapView && mode === 'edit' && config && dataSources;
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
@@ -326,7 +358,8 @@ function PisellFloorMapLayoutInner(props, ref) {
     onRenameCanvas: handleRenameCanvas,
     toggleFullscreen: editToggleFullscreen,
     isFullscreen: false,
-    controls: controls
+    controls: controls,
+    canvasTabsBarTrailing: canvasTabsBarTrailing
   }), isFloorMapView && mode === 'edit' && config && useFullTopChrome && /*#__PURE__*/React.createElement(FloorMapEditTopBar, {
     mode: "full",
     config: config,
@@ -347,7 +380,8 @@ function PisellFloorMapLayoutInner(props, ref) {
     toggleFullscreen: editToggleFullscreen,
     isFullscreen: isFullscreen,
     controls: controls,
-    extraActions: topBarExtraActions
+    extraActions: topBarExtraActions,
+    canvasTabsBarTrailing: canvasTabsBarTrailing
   }), showReadModeCanvasTabsBar && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-top-bar ").concat(PREFIX, "-read-canvas-tabs-bar"),
     role: "toolbar",
@@ -363,7 +397,17 @@ function PisellFloorMapLayoutInner(props, ref) {
     },
     canEdit: false,
     className: "".concat(PREFIX, "-edit-top-bar-canvas-tabs")
-  }))), loading && /*#__PURE__*/React.createElement("div", {
+  })), hasCanvasTabsBarTrailing || readToggleFullscreen ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-top-bar-actions")
+  }, canvasTabsBarTrailing, readToggleFullscreen ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), "".concat(PREFIX, "-edit-top-bar-btn-ghost")),
+    onClick: function onClick() {
+      return readToggleFullscreen();
+    },
+    "aria-label": isFullscreen ? readCanvasTabsFsLabels.fsExitAria : readCanvasTabsFsLabels.fsEnterAria,
+    title: isFullscreen ? readCanvasTabsFsLabels.fsExitTitle : readCanvasTabsFsLabels.fsEnterTitle
+  }, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(FullscreenOutlined, null)) : null) : null), loading && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-loading")
   }, /*#__PURE__*/React.createElement("span", null, loadingLabel)), saveError && !(isFloorMapView && mode === 'edit' && config) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-save-error")
@@ -390,7 +434,7 @@ function PisellFloorMapLayoutInner(props, ref) {
       height: 120
     },
     decorationPreviewSize: 48,
-    onSave: !useFullTopChrome && toolbarShowSave !== false && onSave && config.canvasUi.canEdit ? handleSave : undefined,
+    onSave: onSave && config.canvasUi.canEdit && (!useFullTopChrome && toolbarShowSave !== false || useFullTopChrome && isFullscreen) ? handleSave : undefined,
     saving: saving,
     saveError: saveError,
     layoutDirty: isLayoutDirty,
@@ -426,7 +470,7 @@ function PisellFloorMapLayoutInner(props, ref) {
       }
     }
   }, /*#__PURE__*/React.createElement(TransformWrapper, {
-    key: isFloorMapView ? "fmap-".concat(currentCanvasId !== null && currentCanvasId !== void 0 ? currentCanvasId : 'na', "-bp").concat((_mapLayer$boundingPad = mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.boundingPadding) !== null && _mapLayer$boundingPad !== void 0 ? _mapLayer$boundingPad : 'd', "-z").concat(zoomConfig.initialScale) : 'fmap-layout',
+    key: transformWrapperKey,
     centerOnInit: false,
     initialScale: zoomConfig.initialScale,
     initialPositionX: initialPositionX,
@@ -452,7 +496,7 @@ function PisellFloorMapLayoutInner(props, ref) {
       };
     }
   }, function (ctx) {
-    var _mapLayer$snapStep;
+    var _effectiveMapLayer$sn;
     transformRef.current = ctx;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TransformComponent, {
       wrapperStyle: {
@@ -468,12 +512,10 @@ function PisellFloorMapLayoutInner(props, ref) {
         minHeight: contentHeight,
         position: 'relative',
         overflow: 'visible',
-        backgroundColor: '#F2F4F7',
-        backgroundImage: ['linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px)', 'linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px)'].join(', '),
-        backgroundSize: '50px 50px'
+        backgroundColor: '#F2F4F7'
       }
     }, /*#__PURE__*/React.createElement(MapLayer, {
-      config: mapLayer,
+      config: effectiveMapLayer,
       contentWidth: contentWidth,
       contentHeight: contentHeight,
       cellSize: cellSize,
@@ -493,7 +535,7 @@ function PisellFloorMapLayoutInner(props, ref) {
       selectedId: selectedId,
       onSelect: setSelectedId,
       onUpdateItem: handleUpdateItem,
-      snapStep: (_mapLayer$snapStep = mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.snapStep) !== null && _mapLayer$snapStep !== void 0 ? _mapLayer$snapStep : 0,
+      snapStep: (_effectiveMapLayer$sn = effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.snapStep) !== null && _effectiveMapLayer$sn !== void 0 ? _effectiveMapLayer$sn : 0,
       scale: scale,
       onInteractionChange: setIsInteractingWithElement,
       getMergedItemWrapperStyle: getMergedItemWrapperStyle
@@ -537,8 +579,17 @@ function PisellFloorMapLayoutInner(props, ref) {
       scale: scale,
       isFullscreen: isFullscreen,
       fitBounds: fitBounds,
-      toggleFullscreen: editToggleFullscreen
-    }), isFloorMapView && mode === 'edit' && editPanelParams && config && dataSources && /*#__PURE__*/React.createElement("div", {
+      toggleFullscreen: editToggleFullscreen,
+      mapGridVisible: Boolean(effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.showGrid),
+      onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : undefined
+    }), isFloorMapView && floorMapViewportOverlay != null ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-viewport-overlay")
+    }, typeof floorMapViewportOverlay === 'function' ? floorMapViewportOverlay({
+      items: items,
+      dataSources: dataSources,
+      currentCanvasId: currentCanvasId,
+      mode: mode
+    }) : floorMapViewportOverlay) : null, isFloorMapView && mode === 'edit' && editPanelParams && config && dataSources && /*#__PURE__*/React.createElement("div", {
       className: classNames("".concat(PREFIX, "-edit-panel-wrap"), mapAreaSize.height > 0 && "".concat(PREFIX, "-edit-panel-wrap-constrained")),
       style: mapAreaSize.height > 0 ? {
         height: mapAreaSize.height - 32,

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.less

@@ -74,4 +74,19 @@
       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/es/components/pisellFloorMapLayout/components/FloorMapEditPanel.js

@@ -11,21 +11,16 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { locales } from '@pisell/utils';
 import classNames from 'classnames';
 import { CloseOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons';
-import { Input, InputNumber, Select, Button, Form, Popconfirm } from 'antd';
-import { FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types";
-import { getElementKindConfig, resolveDataBindingPolicy } from "../utils/floorMapElementKindUtils";
+import { Input, InputNumber, Select, Button, Form, Popconfirm, message } from 'antd';
+import { FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types";
+import { getElementKindConfig, resolveDataBindingPolicy, isFloorMapImageElementKind, getSwappableElementKindsInSameCategory, patchSceneElementForKindSwitch } from "../utils/floorMapElementKindUtils";
 import { FloorMapDataForm } from "./FloorMapDataForm";
 import useEngineContext from "../../../hooks/useEngineContext";
 import { getFloorMapCanvasDisplayName, initFloorMapLayoutLocales } from "../utils/floorMapCanvasDisplay";
+import { formatDataRecordOptionLabel } from "../utils/floorMapDataRecordLabel";
 import "./FloorMapEditPanel.less";
 var PREFIX = 'pisell-floor-map-layout';
 var I18N_EP = 'pisell-floor-map-layout.edit-panel';
-function formatDataRecordOptionLabel(record) {
-  var name = record.name != null ? String(record.name) : '';
-  var status = record.status != null ? String(record.status) : '';
-  if (name && status) return "".concat(name, "\uFF08").concat(status, "\uFF09");
-  return name || String(record.id);
-}
 function resolveDataSourceRecordForm(content, ctx) {
   if (typeof content === 'function') {
     return content(ctx);
@@ -48,6 +43,7 @@ export function FloorMapEditPanel(props) {
     _props$dataSourceLabe = props.dataSourceLabels,
     dataSourceLabels = _props$dataSourceLabe === void 0 ? {} : _props$dataSourceLabe,
     layoutDraftDirty = props.layoutDraftDirty,
+    showRecordFormProp = props.showDataSourceRecordFormBlock,
     className = props.className;
   var _Form$useForm = Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -97,9 +93,23 @@ export function FloorMapEditPanel(props) {
       popDesc: locales.getText("".concat(I18N_EP, ".pop-desc")),
       btnDelete: locales.getText("".concat(I18N_EP, ".btn-delete")),
       btnCancel: locales.getText("".concat(I18N_EP, ".btn-cancel")),
-      btnOkDelete: locales.getText("".concat(I18N_EP, ".btn-ok-delete"))
+      btnOkDelete: locales.getText("".concat(I18N_EP, ".btn-ok-delete")),
+      labelElementKind: locales.getText("".concat(I18N_EP, ".label-element-kind")),
+      hintKindBindingCleared: locales.getText("".concat(I18N_EP, ".hint-kind-binding-cleared"))
     };
   }, [engineLocale]);
+  var swappableKinds = useMemo(function () {
+    return getSwappableElementKindsInSameCategory(config, sceneElement.elementKind);
+  }, [config, sceneElement.elementKind]);
+  var handleElementKindChange = useCallback(function (nextKind) {
+    if (nextKind === sceneElement.elementKind) return;
+    var hadBinding = Boolean(sceneElement.dataBinding);
+    var patch = patchSceneElementForKindSwitch(config, sceneElement, nextKind);
+    if (hadBinding && patch.dataBinding === undefined) {
+      message.info(ep.hintKindBindingCleared);
+    }
+    onUpdate(patch);
+  }, [config, sceneElement, onUpdate, ep.hintKindBindingCleared]);
   var canvasOptions = config.canvases.filter(function (c) {
     return c.enabled;
   }).sort(function (a, b) {
@@ -111,7 +121,9 @@ export function FloorMapEditPanel(props) {
   var allowedKeys = kindConfig !== null && kindConfig !== void 0 && (_kindConfig$allowedDa = kindConfig.allowedDataSourceKeys) !== null && _kindConfig$allowedDa !== void 0 && _kindConfig$allowedDa.length ? kindConfig.allowedDataSourceKeys.filter(function (k) {
     return allKeys.includes(k);
   }) : allKeys;
-  var isImageKind = sceneElement.elementKind === FLOOR_MAP_IMAGE_ELEMENT_KIND;
+
+  /** 与 RecordBoard Story 图片图元一致：`floorMapImage` */
+  var isImageKind = isFloorMapImageElementKind(sceneElement.elementKind);
   var layoutLocked = Boolean(sceneElement.layoutTransformLocked);
   var initialValues = React.useMemo(function () {
     var _sceneElement$name, _sceneElement$zIndex, _sceneElement$width, _sceneElement$height, _sceneElement$imageUr;
@@ -196,6 +208,7 @@ export function FloorMapEditPanel(props) {
   var showDataBindingSection = bindingPolicy !== 'none';
   /** 仅在实际绑定到某一行时展示「数据源记录」，避免仅选数据源、recordId 为空时误展示空表单 */
   var showDataSourceRecordBlock = hasBoundDataRecord && Boolean(binding) && (onSaveRecord != null || hasCustomRecordForm);
+  var showDataRecordEditorSection = showRecordFormProp !== false && showDataSourceRecordBlock && Boolean(binding);
   var recordFormContext = useMemo(function () {
     if (!binding) return null;
     return {
@@ -217,13 +230,70 @@ export function FloorMapEditPanel(props) {
       layoutTransformLocked: !sceneElement.layoutTransformLocked
     });
   };
+  var panelScrollRef = useRef(null);
+  var getSelectPopupContainer = useCallback(function (node) {
+    var _ref, _node$parentElement;
+    return (_ref = (_node$parentElement = node.parentElement) !== null && _node$parentElement !== void 0 ? _node$parentElement : panelScrollRef.current) !== null && _ref !== void 0 ? _ref : document.body;
+  }, []);
+  var dragScrollRef = useRef({
+    active: false,
+    pointerId: -1,
+    startY: 0,
+    startScrollTop: 0
+  });
+  var isDragScrollSurface = useCallback(function (target) {
+    if (!(target instanceof Element)) return false;
+    return !target.closest('input,textarea,button,select,.ant-select,.ant-input,[contenteditable="true"]');
+  }, []);
+  var handlePanelPointerDown = useCallback(function (e) {
+    if (!isDragScrollSurface(e.target)) return;
+    var el = panelScrollRef.current;
+    if (!el || el.scrollHeight <= el.clientHeight) return;
+    el.setPointerCapture(e.pointerId);
+    dragScrollRef.current = {
+      active: true,
+      pointerId: e.pointerId,
+      startY: e.clientY,
+      startScrollTop: el.scrollTop
+    };
+  }, [isDragScrollSurface]);
+  var handlePanelPointerMove = useCallback(function (e) {
+    var d = dragScrollRef.current;
+    if (!d.active || e.pointerId !== d.pointerId) return;
+    var el = panelScrollRef.current;
+    if (!el) return;
+    el.scrollTop = d.startScrollTop + (d.startY - e.clientY);
+  }, []);
+  var endPanelDragScroll = useCallback(function (e) {
+    var d = dragScrollRef.current;
+    if (!d.active || e.pointerId !== d.pointerId) return;
+    dragScrollRef.current = {
+      active: false,
+      pointerId: -1,
+      startY: 0,
+      startScrollTop: 0
+    };
+    try {
+      var _panelScrollRef$curre;
+      (_panelScrollRef$curre = panelScrollRef.current) === null || _panelScrollRef$curre === void 0 || _panelScrollRef$curre.releasePointerCapture(e.pointerId);
+    } catch (_unused) {
+      /* ignore */
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(PREFIX, "-edit-panel"), className)
+    ref: panelScrollRef,
+    className: classNames("".concat(PREFIX, "-edit-panel"), className),
+    onPointerDown: handlePanelPointerDown,
+    onPointerMove: handlePanelPointerMove,
+    onPointerUp: endPanelDragScroll,
+    onPointerCancel: endPanelDragScroll
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-header")
-  }, /*#__PURE__*/React.createElement("span", null, ep.elementProps), /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(PREFIX, "-edit-panel-header-title")
+  }, ep.elementProps), /*#__PURE__*/React.createElement(Button, {
     type: "text",
-    size: "small",
+    size: "large",
     className: "".concat(PREFIX, "-edit-panel-close"),
     icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
     "aria-label": ep.closeAria,
@@ -235,10 +305,29 @@ export function FloorMapEditPanel(props) {
     className: "".concat(PREFIX, "-edit-panel-hint warn")
   }, ep.hintApply) : null, layoutDraftDirty ? /*#__PURE__*/React.createElement("p", {
     className: "".concat(PREFIX, "-edit-panel-hint muted")
-  }, ep.hintSave) : null), /*#__PURE__*/React.createElement(Form, {
+  }, ep.hintSave) : null), swappableKinds.length > 1 ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-kind-row")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-record-bind-label")
+  }, ep.labelElementKind), /*#__PURE__*/React.createElement(Select, {
+    size: "large",
+    value: sceneElement.elementKind,
+    options: swappableKinds.map(function (k) {
+      return {
+        value: k.value,
+        label: k.label
+      };
+    }),
+    onChange: handleElementKindChange,
+    getPopupContainer: getSelectPopupContainer,
+    style: {
+      width: '100%',
+      marginBottom: 12
+    }
+  })) : null, /*#__PURE__*/React.createElement(Form, {
     form: form,
     layout: "vertical",
-    size: "small",
+    size: "large",
     onFinish: handleFinish,
     initialValues: initialValues,
     onValuesChange: function onValuesChange() {
@@ -251,7 +340,7 @@ export function FloorMapEditPanel(props) {
     className: "".concat(PREFIX, "-edit-panel-layout-lock-title")
   }, ep.sectionLayout), /*#__PURE__*/React.createElement(Button, {
     type: "text",
-    size: "small",
+    size: "large",
     className: "".concat(PREFIX, "-edit-panel-layout-lock-btn"),
     icon: layoutLocked ? /*#__PURE__*/React.createElement(LockOutlined, null) : /*#__PURE__*/React.createElement(UnlockOutlined, null),
     "aria-pressed": layoutLocked,
@@ -328,11 +417,12 @@ export function FloorMapEditPanel(props) {
         label: getFloorMapCanvasDisplayName(c, engineLocale)
       };
     }),
-    allowClear: false
+    allowClear: false,
+    getPopupContainer: getSelectPopupContainer
   })), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     htmlType: "submit",
-    size: "small"
+    size: "large"
   }, ep.apply))), showDataBindingSection && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record")
   }, /*#__PURE__*/React.createElement("div", {
@@ -344,7 +434,7 @@ export function FloorMapEditPanel(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record-bind-label")
   }, ep.labelDataSource), /*#__PURE__*/React.createElement(Select, {
-    size: "small",
+    size: "large",
     style: {
       width: '100%'
     },
@@ -372,13 +462,14 @@ export function FloorMapEditPanel(props) {
         }
       });
     },
-    allowClear: bindingPolicy === 'optional'
+    allowClear: bindingPolicy === 'optional',
+    getPopupContainer: getSelectPopupContainer
   })) : null, allowedKeys.length >= 1 && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record-bind")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record-bind-label")
   }, ep.labelPickRow), /*#__PURE__*/React.createElement(Select, {
-    size: "small",
+    size: "large",
     placeholder: dataRecordBindOptions.length ? ep.phPickRow : ep.phNoRows,
     style: {
       width: '100%'
@@ -386,8 +477,9 @@ export function FloorMapEditPanel(props) {
     value: hasBoundDataRecord ? binding === null || binding === void 0 ? void 0 : binding.recordId : undefined,
     allowClear: bindingPolicy === 'optional',
     options: dataRecordBindOptions,
+    getPopupContainer: getSelectPopupContainer,
     onChange: function onChange(newId) {
-      var _binding$dataSourceKe2, _dataSources$key2, _name;
+      var _binding$dataSourceKe2, _dataSources$key2;
       var key = (_binding$dataSourceKe2 = binding === null || binding === void 0 ? void 0 : binding.dataSourceKey) !== null && _binding$dataSourceKe2 !== void 0 ? _binding$dataSourceKe2 : allowedKeys[0];
       if (!key) return;
       if (!newId) {
@@ -404,12 +496,19 @@ export function FloorMapEditPanel(props) {
           dataSourceKey: key,
           recordId: newId
         },
-        name: row ? String((_name = row.name) !== null && _name !== void 0 ? _name : newId) : undefined
+        name: row ? String(function (_ref2, _name) {
+          var m = row.main_field;
+          if (m != null && String(m).trim() !== '') {
+            var _String$split$0$trim, _String$split$;
+            return (_String$split$0$trim = (_String$split$ = String(m).split(' ## ')[0]) === null || _String$split$ === void 0 ? void 0 : _String$split$.trim()) !== null && _String$split$0$trim !== void 0 ? _String$split$0$trim : newId;
+          }
+          return (_ref2 = (_name = row.name) !== null && _name !== void 0 ? _name : row.code) !== null && _ref2 !== void 0 ? _ref2 : newId;
+        }()) : undefined
       });
     }
   }), !hasBoundDataRecord && /*#__PURE__*/React.createElement("p", {
     className: "".concat(PREFIX, "-edit-panel-record-bind-hint")
-  }, ep.hintUnbound))), showDataSourceRecordBlock && binding && /*#__PURE__*/React.createElement("div", {
+  }, ep.hintUnbound))), showDataRecordEditorSection && binding && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record-title")
@@ -438,7 +537,7 @@ export function FloorMapEditPanel(props) {
     type: "default",
     danger: true,
     block: true,
-    size: "small"
+    size: "large"
   }, ep.btnDelete))) : null);
 }
 export default FloorMapEditPanel;

package/es/components/pisellFloorMapLayout/components/FloorMapEditPanel.less

@@ -7,6 +7,7 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   max-height: 80vh;
   overflow-y: auto;
+  touch-action: pan-y;
 
   &-header {
     display: flex;
@@ -14,7 +15,15 @@
     justify-content: space-between;
     gap: 8px;
     margin-bottom: 12px;
+  }
+
+  /** 与下方分组标题（如「数据绑定」「数据源记录」）统一的标题样式 */
+
+  &-header-title {
+    font-size: 14px;
     font-weight: 500;
+    color: #262626;
+    line-height: 1.4;
   }
 
   &-close {

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

@@ -1,7 +1,7 @@
 /**
  * FloorMapEditTopBar - 编辑态顶栏
- * - `mode="compact"`：画布 Tab + 全屏入口（非全屏时；保存等在侧栏）
- * - `mode="full"`：画布 Tab + 保存 + 全屏退出 + 扩展操作（全屏时）
+ * - `mode="compact"`：画布 Tab + 可选 `canvasTabsBarTrailing` + 全屏入口（非全屏；保存多在侧栏）
+ * - `mode="full"`：画布 Tab + `canvasTabsBarTrailing` + 保存（仅非浏览器全屏时）+ 全屏退出 + 扩展操作
  */
 import React from 'react';
 import type { CanvasTabsProps } from './CanvasTabs';
@@ -28,6 +28,8 @@ export interface FloorMapEditTopBarProps {
     controls?: FloorMapControlsConfig;
     /** 顶栏右侧扩展（如「区域定位」等），仅 full 模式 */
     extraActions?: React.ReactNode;
+    /** 画布 Tab 同排最右侧业务区（在「进入全屏」/「退出全屏」与保存等之前） */
+    canvasTabsBarTrailing?: React.ReactNode;
     className?: string;
 }
 export declare function FloorMapEditTopBar(props: FloorMapEditTopBarProps): JSX.Element;