@pisell/materials 1.0.1059 → 1.0.1062

package/es/components/pisellFloorMapLayout/components/FloorMapEditPanel.js

@@ -0,0 +1,497 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * FloorMapEditPanel - 选中图元后的编辑面板：画布属性 + 可选数据绑定 + 数据源记录表单
+ */
+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 { FloorMapDataForm } from "./FloorMapDataForm";
+import useEngineContext from "../../../hooks/useEngineContext";
+import { getFloorMapCanvasDisplayName, initFloorMapLayoutLocales } from "../utils/floorMapCanvasDisplay";
+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);
+  }
+  return content;
+}
+export function FloorMapEditPanel(props) {
+  var _engineCtx$engine, _kindConfig$allowedDa, _dataSources$binding$, _dataSources$binding$2, _dataSources$binding$3;
+  var sceneElement = props.sceneElement,
+    itemId = props.itemId,
+    onUpdate = props.onUpdate,
+    onSaveRecord = props.onSaveRecord,
+    onClose = props.onClose,
+    onDelete = props.onDelete,
+    recordFormColumns = props.recordFormColumns,
+    dataSourceRecordForm = props.dataSourceRecordForm,
+    config = props.config,
+    dataSources = props.dataSources,
+    savingRecord = props.savingRecord,
+    _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),
+    form = _Form$useForm2[0];
+  /** 忽略由 setFieldsValue 触发的 onValuesChange，避免误判「未应用」 */
+  var skipFormValuesChangeRef = useRef(false);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    formHasUnappliedChanges = _useState2[0],
+    setFormHasUnappliedChanges = _useState2[1];
+  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';
+  initFloorMapLayoutLocales(engineLocale);
+  var ep = useMemo(function () {
+    return {
+      elementProps: locales.getText("".concat(I18N_EP, ".element-props")),
+      closeAria: locales.getText("".concat(I18N_EP, ".close-aria")),
+      hintApply: locales.getText("".concat(I18N_EP, ".hint-apply")),
+      hintSave: locales.getText("".concat(I18N_EP, ".hint-save")),
+      sectionLayout: locales.getText("".concat(I18N_EP, ".section-layout")),
+      lockOn: locales.getText("".concat(I18N_EP, ".lock-on")),
+      lockOff: locales.getText("".concat(I18N_EP, ".lock-off")),
+      labelX: locales.getText("".concat(I18N_EP, ".label-x")),
+      labelY: locales.getText("".concat(I18N_EP, ".label-y")),
+      labelZ: locales.getText("".concat(I18N_EP, ".label-z")),
+      labelWidth: locales.getText("".concat(I18N_EP, ".label-width")),
+      labelHeight: locales.getText("".concat(I18N_EP, ".label-height")),
+      labelName: locales.getText("".concat(I18N_EP, ".label-name")),
+      labelNameStage: locales.getText("".concat(I18N_EP, ".label-name-stage")),
+      phNameStage: locales.getText("".concat(I18N_EP, ".ph-name-stage")),
+      phName: locales.getText("".concat(I18N_EP, ".ph-name")),
+      labelImageUrl: locales.getText("".concat(I18N_EP, ".label-image-url")),
+      extraImageUrl: locales.getText("".concat(I18N_EP, ".extra-image-url")),
+      phHttps: locales.getText("".concat(I18N_EP, ".ph-https")),
+      labelCanvas: locales.getText("".concat(I18N_EP, ".label-canvas")),
+      apply: locales.getText("".concat(I18N_EP, ".apply")),
+      dataBinding: locales.getText("".concat(I18N_EP, ".data-binding")),
+      dataBindingNote: locales.getText("".concat(I18N_EP, ".data-binding-note")),
+      labelDataSource: locales.getText("".concat(I18N_EP, ".label-data-source")),
+      phDataSource: locales.getText("".concat(I18N_EP, ".ph-data-source")),
+      labelPickRow: locales.getText("".concat(I18N_EP, ".label-pick-row")),
+      phPickRow: locales.getText("".concat(I18N_EP, ".ph-pick-row")),
+      phNoRows: locales.getText("".concat(I18N_EP, ".ph-no-rows")),
+      hintUnbound: locales.getText("".concat(I18N_EP, ".hint-unbound")),
+      recordTitle: locales.getText("".concat(I18N_EP, ".record-title")),
+      popTitle: locales.getText("".concat(I18N_EP, ".pop-title")),
+      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"))
+    };
+  }, [engineLocale]);
+  var canvasOptions = config.canvases.filter(function (c) {
+    return c.enabled;
+  }).sort(function (a, b) {
+    return a.order - b.order;
+  });
+  var kindConfig = getElementKindConfig(config, sceneElement.elementKind);
+  var bindingPolicy = resolveDataBindingPolicy(kindConfig);
+  var allKeys = Object.keys(dataSources);
+  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;
+  var layoutLocked = Boolean(sceneElement.layoutTransformLocked);
+  var initialValues = React.useMemo(function () {
+    var _sceneElement$name, _sceneElement$zIndex, _sceneElement$width, _sceneElement$height, _sceneElement$imageUr;
+    var dw = isImageKind ? 400 : 180;
+    var dh = isImageKind ? 240 : 120;
+    return {
+      x: sceneElement.x,
+      y: sceneElement.y,
+      name: (_sceneElement$name = sceneElement.name) !== null && _sceneElement$name !== void 0 ? _sceneElement$name : '',
+      zIndex: (_sceneElement$zIndex = sceneElement.zIndex) !== null && _sceneElement$zIndex !== void 0 ? _sceneElement$zIndex : 0,
+      width: (_sceneElement$width = sceneElement.width) !== null && _sceneElement$width !== void 0 ? _sceneElement$width : dw,
+      height: (_sceneElement$height = sceneElement.height) !== null && _sceneElement$height !== void 0 ? _sceneElement$height : dh,
+      canvasId: sceneElement.canvasId,
+      imageUrl: (_sceneElement$imageUr = sceneElement.imageUrl) !== null && _sceneElement$imageUr !== void 0 ? _sceneElement$imageUr : ''
+    };
+  }, [sceneElement, isImageKind]);
+  React.useEffect(function () {
+    setFormHasUnappliedChanges(false);
+  }, [itemId]);
+  React.useEffect(function () {
+    skipFormValuesChangeRef.current = true;
+    form.setFieldsValue(initialValues);
+    queueMicrotask(function () {
+      skipFormValuesChangeRef.current = false;
+      setFormHasUnappliedChanges(false);
+    });
+  }, [itemId, initialValues, form]);
+  var handleFinish = useCallback(function (values) {
+    var name = values.name != null ? String(values.name).trim() || undefined : undefined;
+    var patch = {
+      name: name,
+      canvasId: String(values.canvasId)
+    };
+    if (isImageKind) {
+      var _values$imageUrl;
+      var url = String((_values$imageUrl = values.imageUrl) !== null && _values$imageUrl !== void 0 ? _values$imageUrl : '').trim();
+      patch.imageUrl = url || undefined;
+    }
+    if (!layoutLocked) {
+      patch.x = Number(values.x);
+      patch.y = Number(values.y);
+      patch.zIndex = values.zIndex != null ? Number(values.zIndex) : undefined;
+      var w = Number(values.width);
+      var h = Number(values.height);
+      patch.width = Number.isFinite(w) ? Math.max(20, w) : undefined;
+      patch.height = Number.isFinite(h) ? Math.max(20, h) : undefined;
+    }
+    onUpdate(patch);
+    setFormHasUnappliedChanges(false);
+  }, [onUpdate, isImageKind, layoutLocked]);
+  var binding = sceneElement.dataBinding;
+  var record = binding ? (_dataSources$binding$ = (_dataSources$binding$2 = dataSources[binding.dataSourceKey]) === null || _dataSources$binding$2 === void 0 ? void 0 : _dataSources$binding$2.find(function (r) {
+    return r.id === binding.recordId;
+  })) !== null && _dataSources$binding$ !== void 0 ? _dataSources$binding$ : {} : {};
+  var dataRecordBindOptions = useMemo(function () {
+    var _binding$dataSourceKe, _dataSources$key, _config$sceneElements;
+    if (bindingPolicy === 'none') return [];
+    var key = (_binding$dataSourceKe = binding === null || binding === void 0 ? void 0 : binding.dataSourceKey) !== null && _binding$dataSourceKe !== void 0 ? _binding$dataSourceKe : allowedKeys[0];
+    if (!key) return [];
+    var list = (_dataSources$key = dataSources[key]) !== null && _dataSources$key !== void 0 ? _dataSources$key : [];
+    if (!list.length) return [];
+    var usedByOther = new Set(((_config$sceneElements = config.sceneElements) !== null && _config$sceneElements !== void 0 ? _config$sceneElements : []).filter(function (e) {
+      var _e$dataBinding;
+      return e.instanceId !== sceneElement.instanceId && ((_e$dataBinding = e.dataBinding) === null || _e$dataBinding === void 0 ? void 0 : _e$dataBinding.dataSourceKey) === key;
+    }).map(function (e) {
+      return e.dataBinding.recordId;
+    }));
+    return list.filter(function (r) {
+      return !usedByOther.has(r.id) || r.id === (binding === null || binding === void 0 ? void 0 : binding.recordId);
+    }).map(function (r) {
+      return {
+        value: r.id,
+        label: formatDataRecordOptionLabel(r)
+      };
+    });
+  }, [bindingPolicy, binding, allowedKeys, dataSources, config.sceneElements, sceneElement.instanceId]);
+  var hasBoundDataRecord = Boolean(binding && ((_dataSources$binding$3 = dataSources[binding.dataSourceKey]) !== null && _dataSources$binding$3 !== void 0 ? _dataSources$binding$3 : []).some(function (r) {
+    return r.id === binding.recordId;
+  }));
+  var recordFormSlotRaw = binding ? dataSourceRecordForm === null || dataSourceRecordForm === void 0 ? void 0 : dataSourceRecordForm[binding.dataSourceKey] : undefined;
+  var hasCustomRecordForm = recordFormSlotRaw !== undefined && recordFormSlotRaw !== null && recordFormSlotRaw !== false;
+  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 {
+      dataSourceKey: binding.dataSourceKey,
+      recordId: binding.recordId,
+      record: record,
+      dataSources: dataSources,
+      sceneElement: sceneElement,
+      config: config,
+      savingRecord: savingRecord !== null && savingRecord !== void 0 ? savingRecord : false,
+      onSaveRecord: onSaveRecord ? function (newData) {
+        return onSaveRecord(binding.dataSourceKey, binding.recordId, newData);
+      } : undefined
+    };
+  }, [binding, record, dataSources, sceneElement, config, savingRecord, onSaveRecord]);
+  var isStageLike = sceneElement.elementKind === FLOOR_MAP_STAGE_ELEMENT_KIND;
+  var toggleLayoutLock = function toggleLayoutLock() {
+    onUpdate({
+      layoutTransformLocked: !sceneElement.layoutTransformLocked
+    });
+  };
+  var panelScrollRef = useRef(null);
+  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", {
+    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, {
+    type: "text",
+    size: "small",
+    className: "".concat(PREFIX, "-edit-panel-close"),
+    icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
+    "aria-label": ep.closeAria,
+    onClick: onClose
+  })), (formHasUnappliedChanges || layoutDraftDirty) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-hints"),
+    role: "status"
+  }, formHasUnappliedChanges ? /*#__PURE__*/React.createElement("p", {
+    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, {
+    form: form,
+    layout: "vertical",
+    size: "small",
+    onFinish: handleFinish,
+    initialValues: initialValues,
+    onValuesChange: function onValuesChange() {
+      if (skipFormValuesChangeRef.current) return;
+      setFormHasUnappliedChanges(true);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-layout-lock-header")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(PREFIX, "-edit-panel-layout-lock-title")
+  }, ep.sectionLayout), /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    size: "small",
+    className: "".concat(PREFIX, "-edit-panel-layout-lock-btn"),
+    icon: layoutLocked ? /*#__PURE__*/React.createElement(LockOutlined, null) : /*#__PURE__*/React.createElement(UnlockOutlined, null),
+    "aria-pressed": layoutLocked,
+    onClick: toggleLayoutLock,
+    title: layoutLocked ? ep.lockOn : ep.lockOff
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-xy-row")
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    name: "x",
+    label: ep.labelX
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    style: {
+      width: '100%'
+    },
+    min: 0,
+    disabled: layoutLocked
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "y",
+    label: ep.labelY
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    style: {
+      width: '100%'
+    },
+    min: 0,
+    disabled: layoutLocked
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "zIndex",
+    label: ep.labelZ
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    style: {
+      width: '100%'
+    },
+    disabled: layoutLocked
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-size-row")
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    name: "width",
+    label: ep.labelWidth
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    style: {
+      width: '100%'
+    },
+    min: 20,
+    disabled: layoutLocked
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "height",
+    label: ep.labelHeight
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    style: {
+      width: '100%'
+    },
+    min: 20,
+    disabled: layoutLocked
+  }))), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "name",
+    label: isStageLike ? ep.labelNameStage : ep.labelName
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: isStageLike ? ep.phNameStage : ep.phName,
+    allowClear: true
+  })), isImageKind ? /*#__PURE__*/React.createElement(Form.Item, {
+    name: "imageUrl",
+    label: ep.labelImageUrl,
+    extra: ep.extraImageUrl
+  }, /*#__PURE__*/React.createElement(Input, {
+    allowClear: true,
+    placeholder: ep.phHttps
+  })) : null, /*#__PURE__*/React.createElement(Form.Item, {
+    name: "canvasId",
+    label: ep.labelCanvas
+  }, /*#__PURE__*/React.createElement(Select, {
+    options: canvasOptions.map(function (c) {
+      return {
+        value: c.id,
+        label: getFloorMapCanvasDisplayName(c, engineLocale)
+      };
+    }),
+    allowClear: false
+  })), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    htmlType: "submit",
+    size: "small"
+  }, ep.apply))), showDataBindingSection && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-record")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-record-title")
+  }, ep.dataBinding), /*#__PURE__*/React.createElement("p", {
+    className: "".concat(PREFIX, "-edit-panel-record-draft-note")
+  }, ep.dataBindingNote), 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.labelDataSource), /*#__PURE__*/React.createElement(Select, {
+    size: "small",
+    style: {
+      width: '100%'
+    },
+    placeholder: ep.phDataSource,
+    value: binding === null || binding === void 0 ? void 0 : binding.dataSourceKey,
+    options: allowedKeys.map(function (k) {
+      var _dataSourceLabels$k;
+      return {
+        value: k,
+        label: (_dataSourceLabels$k = dataSourceLabels[k]) !== null && _dataSourceLabels$k !== void 0 ? _dataSourceLabels$k : k
+      };
+    }),
+    onChange: function onChange(key) {
+      if (!key && bindingPolicy === 'optional') {
+        onUpdate({
+          dataBinding: undefined
+        });
+        return;
+      }
+      if (!key) return;
+      onUpdate({
+        dataBinding: {
+          dataSourceKey: key,
+          recordId: (binding === null || binding === void 0 ? void 0 : binding.dataSourceKey) === key ? binding.recordId : ''
+        }
+      });
+    },
+    allowClear: bindingPolicy === 'optional'
+  })) : 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",
+    placeholder: dataRecordBindOptions.length ? ep.phPickRow : ep.phNoRows,
+    style: {
+      width: '100%'
+    },
+    value: hasBoundDataRecord ? binding === null || binding === void 0 ? void 0 : binding.recordId : undefined,
+    allowClear: bindingPolicy === 'optional',
+    options: dataRecordBindOptions,
+    onChange: function onChange(newId) {
+      var _binding$dataSourceKe2, _dataSources$key2, _name;
+      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) {
+        onUpdate({
+          dataBinding: undefined
+        });
+        return;
+      }
+      var row = ((_dataSources$key2 = dataSources[key]) !== null && _dataSources$key2 !== void 0 ? _dataSources$key2 : []).find(function (r) {
+        return r.id === newId;
+      });
+      onUpdate({
+        dataBinding: {
+          dataSourceKey: key,
+          recordId: newId
+        },
+        name: row ? String((_name = row.name) !== null && _name !== void 0 ? _name : newId) : undefined
+      });
+    }
+  }), !hasBoundDataRecord && /*#__PURE__*/React.createElement("p", {
+    className: "".concat(PREFIX, "-edit-panel-record-bind-hint")
+  }, 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")
+  }, ep.recordTitle), hasCustomRecordForm && recordFormContext && recordFormSlotRaw != null ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-record-custom")
+  }, resolveDataSourceRecordForm(recordFormSlotRaw, recordFormContext)) : null, !hasCustomRecordForm && onSaveRecord ? /*#__PURE__*/React.createElement(FloorMapDataForm, {
+    dataSourceKey: binding.dataSourceKey,
+    recordId: binding.recordId,
+    record: record,
+    dataSources: dataSources,
+    onSave: onSaveRecord,
+    saving: savingRecord,
+    columns: recordFormColumns === null || recordFormColumns === void 0 ? void 0 : recordFormColumns[binding.dataSourceKey]
+  }) : null), config.canvasUi.canEdit && onDelete ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-footer")
+  }, /*#__PURE__*/React.createElement(Popconfirm, {
+    title: ep.popTitle,
+    description: ep.popDesc,
+    onConfirm: onDelete,
+    okText: ep.btnOkDelete,
+    cancelText: ep.btnCancel,
+    okButtonProps: {
+      danger: true
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "default",
+    danger: true,
+    block: true,
+    size: "small"
+  }, ep.btnDelete))) : null);
+}
+export default FloorMapEditPanel;

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

@@ -0,0 +1,154 @@
+.pisell-floor-map-layout-edit-panel {
+  width: 280px;
+  padding: 12px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  max-height: 80vh;
+  overflow-y: auto;
+  touch-action: pan-y;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 12px;
+    font-weight: 500;
+  }
+
+  &-close {
+    flex-shrink: 0;
+    color: rgba(0, 0, 0, 0.45);
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.88);
+    }
+  }
+
+  &-footer {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+  }
+
+  &-record-custom {
+    margin-top: 8px;
+  }
+
+  &-layout-lock-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  &-layout-lock-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #434343;
+  }
+
+  &-layout-lock-btn {
+    flex-shrink: 0;
+    color: rgba(0, 0, 0, 0.55);
+  }
+
+  /* X、Y、层级 同一行 */
+
+  &-xy-row {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+
+    .ant-form-item {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  &-size-row {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    margin-bottom: 8px;
+
+    .ant-form-item {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  &-record-bind {
+    margin-bottom: 12px;
+  }
+
+  &-record-bind-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #434343;
+    margin-bottom: 6px;
+  }
+
+  &-record-bind-hint {
+    margin: 8px 0 0;
+    font-size: 12px;
+    color: #8c8c8c;
+    line-height: 1.5;
+  }
+
+  &-hints {
+    margin-bottom: 10px;
+  }
+
+  &-hint {
+    margin: 0 0 6px;
+    font-size: 12px;
+    line-height: 1.45;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.warn {
+      color: #ad6800;
+      padding: 6px 8px;
+      background: #fffbe6;
+      border-radius: 6px;
+      border: 1px solid #ffe58f;
+    }
+
+    &.muted {
+      margin-top: 4px;
+      color: #595959;
+    }
+  }
+
+  &-record-draft-note {
+    margin: 0 0 10px;
+    font-size: 11px;
+    color: #8c8c8c;
+    line-height: 1.45;
+  }
+}
+
+/* 父 wrap 根据画布限制高度时，面板填满 wrap 并内部滚动 */
+.pisell-floor-map-layout-edit-panel-wrap-constrained .pisell-floor-map-layout-edit-panel {
+  height: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+
+  &-record {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+  }
+
+  &-record-title {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+}

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

@@ -0,0 +1,34 @@
+/**
+ * FloorMapEditTopBar - 编辑态顶栏
+ * - `mode="compact"`：画布 Tab + 全屏入口（非全屏时；保存等在侧栏）
+ * - `mode="full"`：画布 Tab + 保存 + 全屏退出 + 扩展操作（全屏时）
+ */
+import React from 'react';
+import type { CanvasTabsProps } from './CanvasTabs';
+import type { FloorMapControlsConfig, FloorMapViewConfig } from '../types';
+import './FloorMapEditTopBar.less';
+export declare type FloorMapEditTopBarMode = 'full' | 'compact';
+export interface FloorMapEditTopBarProps {
+    /** full：全屏时的完整顶栏；compact：非全屏时 Tab + 全屏入口 */
+    mode?: FloorMapEditTopBarMode;
+    config: FloorMapViewConfig;
+    canvases: CanvasTabsProps['canvases'];
+    currentCanvasId: CanvasTabsProps['currentCanvasId'];
+    onTabChange: CanvasTabsProps['onTabChange'];
+    canEditTabs?: CanvasTabsProps['canEdit'];
+    onAddCanvas?: CanvasTabsProps['onAddCanvas'];
+    onRemoveCanvas?: CanvasTabsProps['onRemoveCanvas'];
+    onRenameCanvas?: CanvasTabsProps['onRenameCanvas'];
+    onSave?: () => void;
+    saving?: boolean;
+    saveError?: Error | string;
+    layoutDirty?: boolean;
+    toggleFullscreen?: () => void;
+    isFullscreen?: boolean;
+    controls?: FloorMapControlsConfig;
+    /** 顶栏右侧扩展（如「区域定位」等），仅 full 模式 */
+    extraActions?: React.ReactNode;
+    className?: string;
+}
+export declare function FloorMapEditTopBar(props: FloorMapEditTopBarProps): JSX.Element;
+export default FloorMapEditTopBar;