@pisell/materials 1.8.20 → 1.8.21

package/lib/components/pisellFloorMapLayout/components/FloorMapEditPanel.js

@@ -43,15 +43,10 @@ var import_floorMapElementKindUtils = require("../utils/floorMapElementKindUtils
 var import_FloorMapDataForm = require("./FloorMapDataForm");
 var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
 var import_floorMapCanvasDisplay = require("../utils/floorMapCanvasDisplay");
+var import_floorMapDataRecordLabel = require("../utils/floorMapDataRecordLabel");
 var import_FloorMapEditPanel = require("./FloorMapEditPanel.less");
 var PREFIX = "pisell-floor-map-layout";
 var I18N_EP = "pisell-floor-map-layout.edit-panel";
-function formatDataRecordOptionLabel(record) {
-  const name = record.name != null ? String(record.name) : "";
-  const status = record.status != null ? String(record.status) : "";
-  if (name && status) return `${name}（${status}）`;
-  return name || String(record.id);
-}
 function resolveDataSourceRecordForm(content, ctx) {
   if (typeof content === "function") {
     return content(
@@ -76,6 +71,7 @@ function FloorMapEditPanel(props) {
     savingRecord,
     dataSourceLabels = {},
     layoutDraftDirty,
+    showDataSourceRecordFormBlock: showRecordFormProp,
     className
   } = props;
   const [form] = import_antd.Form.useForm();
@@ -120,16 +116,40 @@ function FloorMapEditPanel(props) {
       popDesc: import_utils.locales.getText(`${I18N_EP}.pop-desc`),
       btnDelete: import_utils.locales.getText(`${I18N_EP}.btn-delete`),
       btnCancel: import_utils.locales.getText(`${I18N_EP}.btn-cancel`),
-      btnOkDelete: import_utils.locales.getText(`${I18N_EP}.btn-ok-delete`)
+      btnOkDelete: import_utils.locales.getText(`${I18N_EP}.btn-ok-delete`),
+      labelElementKind: import_utils.locales.getText(`${I18N_EP}.label-element-kind`),
+      hintKindBindingCleared: import_utils.locales.getText(
+        `${I18N_EP}.hint-kind-binding-cleared`
+      )
     }),
     [engineLocale]
   );
+  const swappableKinds = (0, import_react.useMemo)(
+    () => (0, import_floorMapElementKindUtils.getSwappableElementKindsInSameCategory)(config, sceneElement.elementKind),
+    [config, sceneElement.elementKind]
+  );
+  const handleElementKindChange = (0, import_react.useCallback)(
+    (nextKind) => {
+      if (nextKind === sceneElement.elementKind) return;
+      const hadBinding = Boolean(sceneElement.dataBinding);
+      const patch = (0, import_floorMapElementKindUtils.patchSceneElementForKindSwitch)(
+        config,
+        sceneElement,
+        nextKind
+      );
+      if (hadBinding && patch.dataBinding === void 0) {
+        import_antd.message.info(ep.hintKindBindingCleared);
+      }
+      onUpdate(patch);
+    },
+    [config, sceneElement, onUpdate, ep.hintKindBindingCleared]
+  );
   const canvasOptions = config.canvases.filter((c) => c.enabled).sort((a, b) => a.order - b.order);
   const kindConfig = (0, import_floorMapElementKindUtils.getElementKindConfig)(config, sceneElement.elementKind);
   const bindingPolicy = (0, import_floorMapElementKindUtils.resolveDataBindingPolicy)(kindConfig);
   const allKeys = Object.keys(dataSources);
   const allowedKeys = ((_c = kindConfig == null ? void 0 : kindConfig.allowedDataSourceKeys) == null ? void 0 : _c.length) ? kindConfig.allowedDataSourceKeys.filter((k) => allKeys.includes(k)) : allKeys;
-  const isImageKind = sceneElement.elementKind === import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND;
+  const isImageKind = (0, import_floorMapElementKindUtils.isFloorMapImageElementKind)(sceneElement.elementKind);
   const layoutLocked = Boolean(sceneElement.layoutTransformLocked);
   const initialValues = import_react.default.useMemo(() => {
     const dw = isImageKind ? 400 : 180;
@@ -201,7 +221,7 @@ function FloorMapEditPanel(props) {
     );
     return list.filter((r) => !usedByOther.has(r.id) || r.id === (binding == null ? void 0 : binding.recordId)).map((r) => ({
       value: r.id,
-      label: formatDataRecordOptionLabel(r)
+      label: (0, import_floorMapDataRecordLabel.formatDataRecordOptionLabel)(r)
     }));
   }, [
     bindingPolicy,
@@ -220,6 +240,7 @@ function FloorMapEditPanel(props) {
   const hasCustomRecordForm = recordFormSlotRaw !== void 0 && recordFormSlotRaw !== null && recordFormSlotRaw !== false;
   const showDataBindingSection = bindingPolicy !== "none";
   const showDataSourceRecordBlock = hasBoundDataRecord && Boolean(binding) && (onSaveRecord != null || hasCustomRecordForm);
+  const showDataRecordEditorSection = showRecordFormProp !== false && showDataSourceRecordBlock && Boolean(binding);
   const recordFormContext = (0, import_react.useMemo)(() => {
     if (!binding) return null;
     return {
@@ -247,185 +268,286 @@ function FloorMapEditPanel(props) {
       layoutTransformLocked: !sceneElement.layoutTransformLocked
     });
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-edit-panel`, className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-header` }, /* @__PURE__ */ import_react.default.createElement("span", null, ep.elementProps), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Button,
-    {
-      type: "text",
-      size: "small",
-      className: `${PREFIX}-edit-panel-close`,
-      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null),
-      "aria-label": ep.closeAria,
-      onClick: onClose
-    }
-  )), (formHasUnappliedChanges || layoutDraftDirty) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-hints`, role: "status" }, formHasUnappliedChanges ? /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-hint warn` }, ep.hintApply) : null, layoutDraftDirty ? /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-hint muted` }, ep.hintSave) : null), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Form,
-    {
-      form,
-      layout: "vertical",
-      size: "small",
-      onFinish: handleFinish,
-      initialValues,
-      onValuesChange: () => {
-        if (skipFormValuesChangeRef.current) return;
-        setFormHasUnappliedChanges(true);
+  const panelScrollRef = (0, import_react.useRef)(null);
+  const getSelectPopupContainer = (0, import_react.useCallback)((node) => {
+    return node.parentElement ?? panelScrollRef.current ?? document.body;
+  }, []);
+  const dragScrollRef = (0, import_react.useRef)({
+    active: false,
+    pointerId: -1,
+    startY: 0,
+    startScrollTop: 0
+  });
+  const isDragScrollSurface = (0, import_react.useCallback)((target) => {
+    if (!(target instanceof Element)) return false;
+    return !target.closest(
+      'input,textarea,button,select,.ant-select,.ant-input,[contenteditable="true"]'
+    );
+  }, []);
+  const handlePanelPointerDown = (0, import_react.useCallback)(
+    (e) => {
+      if (!isDragScrollSurface(e.target)) return;
+      const 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]
+  );
+  const handlePanelPointerMove = (0, import_react.useCallback)(
+    (e) => {
+      const d = dragScrollRef.current;
+      if (!d.active || e.pointerId !== d.pointerId) return;
+      const el = panelScrollRef.current;
+      if (!el) return;
+      el.scrollTop = d.startScrollTop + (d.startY - e.clientY);
+    },
+    []
+  );
+  const endPanelDragScroll = (0, import_react.useCallback)(
+    (e) => {
+      var _a2;
+      const d = dragScrollRef.current;
+      if (!d.active || e.pointerId !== d.pointerId) return;
+      dragScrollRef.current = {
+        active: false,
+        pointerId: -1,
+        startY: 0,
+        startScrollTop: 0
+      };
+      try {
+        (_a2 = panelScrollRef.current) == null ? void 0 : _a2.releasePointerCapture(e.pointerId);
+      } catch {
       }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-layout-lock-header` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-edit-panel-layout-lock-title` }, ep.sectionLayout), /* @__PURE__ */ import_react.default.createElement(
+    []
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: panelScrollRef,
+      className: (0, import_classnames.default)(`${PREFIX}-edit-panel`, className),
+      onPointerDown: handlePanelPointerDown,
+      onPointerMove: handlePanelPointerMove,
+      onPointerUp: endPanelDragScroll,
+      onPointerCancel: endPanelDragScroll
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-header` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-edit-panel-header-title` }, ep.elementProps), /* @__PURE__ */ import_react.default.createElement(
       import_antd.Button,
       {
         type: "text",
-        size: "small",
-        className: `${PREFIX}-edit-panel-layout-lock-btn`,
-        icon: layoutLocked ? /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.UnlockOutlined, null),
-        "aria-pressed": layoutLocked,
-        onClick: toggleLayoutLock,
-        title: layoutLocked ? ep.lockOn : ep.lockOff
+        size: "large",
+        className: `${PREFIX}-edit-panel-close`,
+        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null),
+        "aria-label": ep.closeAria,
+        onClick: onClose
       }
     )),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-xy-row` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "x", label: ep.labelX }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.InputNumber,
-      {
-        style: { width: "100%" },
-        min: 0,
-        disabled: layoutLocked
-      }
-    )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "y", label: ep.labelY }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.InputNumber,
-      {
-        style: { width: "100%" },
-        min: 0,
-        disabled: layoutLocked
-      }
-    )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "zIndex", label: ep.labelZ }, /* @__PURE__ */ import_react.default.createElement(import_antd.InputNumber, { style: { width: "100%" }, disabled: layoutLocked }))),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-size-row` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "width", label: ep.labelWidth }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.InputNumber,
-      {
-        style: { width: "100%" },
-        min: 20,
-        disabled: layoutLocked
-      }
-    )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "height", label: ep.labelHeight }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.InputNumber,
+    (formHasUnappliedChanges || layoutDraftDirty) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-hints`, role: "status" }, formHasUnappliedChanges ? /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-hint warn` }, ep.hintApply) : null, layoutDraftDirty ? /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-hint muted` }, ep.hintSave) : null),
+    swappableKinds.length > 1 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-kind-row` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelElementKind), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Select,
       {
-        style: { width: "100%" },
-        min: 20,
-        disabled: layoutLocked
+        size: "large",
+        value: sceneElement.elementKind,
+        options: swappableKinds.map((k) => ({
+          value: k.value,
+          label: k.label
+        })),
+        onChange: handleElementKindChange,
+        getPopupContainer: getSelectPopupContainer,
+        style: { width: "100%", marginBottom: 12 }
       }
-    ))),
+    )) : null,
     /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Form.Item,
+      import_antd.Form,
       {
-        name: "name",
-        label: isStageLike ? ep.labelNameStage : ep.labelName
+        form,
+        layout: "vertical",
+        size: "large",
+        onFinish: handleFinish,
+        initialValues,
+        onValuesChange: () => {
+          if (skipFormValuesChangeRef.current) return;
+          setFormHasUnappliedChanges(true);
+        }
       },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-layout-lock-header` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-edit-panel-layout-lock-title` }, ep.sectionLayout), /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          type: "text",
+          size: "large",
+          className: `${PREFIX}-edit-panel-layout-lock-btn`,
+          icon: layoutLocked ? /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.UnlockOutlined, null),
+          "aria-pressed": layoutLocked,
+          onClick: toggleLayoutLock,
+          title: layoutLocked ? ep.lockOn : ep.lockOff
+        }
+      )),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-xy-row` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "x", label: ep.labelX }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.InputNumber,
+        {
+          style: { width: "100%" },
+          min: 0,
+          disabled: layoutLocked
+        }
+      )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "y", label: ep.labelY }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.InputNumber,
+        {
+          style: { width: "100%" },
+          min: 0,
+          disabled: layoutLocked
+        }
+      )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "zIndex", label: ep.labelZ }, /* @__PURE__ */ import_react.default.createElement(import_antd.InputNumber, { style: { width: "100%" }, disabled: layoutLocked }))),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-size-row` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "width", label: ep.labelWidth }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.InputNumber,
+        {
+          style: { width: "100%" },
+          min: 20,
+          disabled: layoutLocked
+        }
+      )), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "height", label: ep.labelHeight }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.InputNumber,
+        {
+          style: { width: "100%" },
+          min: 20,
+          disabled: layoutLocked
+        }
+      ))),
       /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Input,
+        import_antd.Form.Item,
+        {
+          name: "name",
+          label: isStageLike ? ep.labelNameStage : ep.labelName
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_antd.Input,
+          {
+            placeholder: isStageLike ? ep.phNameStage : ep.phName,
+            allowClear: true
+          }
+        )
+      ),
+      isImageKind ? /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Form.Item,
         {
-          placeholder: isStageLike ? ep.phNameStage : ep.phName,
-          allowClear: true
+          name: "imageUrl",
+          label: ep.labelImageUrl,
+          extra: ep.extraImageUrl
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { allowClear: true, placeholder: ep.phHttps })
+      ) : null,
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "canvasId", label: ep.labelCanvas }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Select,
+        {
+          options: canvasOptions.map((c) => ({
+            value: c.id,
+            label: (0, import_floorMapCanvasDisplay.getFloorMapCanvasDisplayName)(c, engineLocale)
+          })),
+          allowClear: false,
+          getPopupContainer: getSelectPopupContainer
         }
-      )
+      )),
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "primary", htmlType: "submit", size: "large" }, ep.apply))
     ),
-    isImageKind ? /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Form.Item,
-      {
-        name: "imageUrl",
-        label: ep.labelImageUrl,
-        extra: ep.extraImageUrl
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { allowClear: true, placeholder: ep.phHttps })
-    ) : null,
-    /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "canvasId", label: ep.labelCanvas }, /* @__PURE__ */ import_react.default.createElement(
+    showDataBindingSection && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-title` }, ep.dataBinding), /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-record-draft-note` }, ep.dataBindingNote), allowedKeys.length >= 1 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelDataSource), /* @__PURE__ */ import_react.default.createElement(
       import_antd.Select,
       {
-        options: canvasOptions.map((c) => ({
-          value: c.id,
-          label: (0, import_floorMapCanvasDisplay.getFloorMapCanvasDisplayName)(c, engineLocale)
+        size: "large",
+        style: { width: "100%" },
+        placeholder: ep.phDataSource,
+        value: binding == null ? void 0 : binding.dataSourceKey,
+        options: allowedKeys.map((k) => ({
+          value: k,
+          label: dataSourceLabels[k] ?? k
         })),
-        allowClear: false
+        onChange: (key) => {
+          if (!key && bindingPolicy === "optional") {
+            onUpdate({ dataBinding: void 0 });
+            return;
+          }
+          if (!key) return;
+          onUpdate({
+            dataBinding: {
+              dataSourceKey: key,
+              recordId: (binding == null ? void 0 : binding.dataSourceKey) === key ? binding.recordId : ""
+            }
+          });
+        },
+        allowClear: bindingPolicy === "optional",
+        getPopupContainer: getSelectPopupContainer
       }
-    )),
-    /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "primary", htmlType: "submit", size: "small" }, ep.apply))
-  ), showDataBindingSection && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-title` }, ep.dataBinding), /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-record-draft-note` }, ep.dataBindingNote), allowedKeys.length >= 1 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelDataSource), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Select,
-    {
-      size: "small",
-      style: { width: "100%" },
-      placeholder: ep.phDataSource,
-      value: binding == null ? void 0 : binding.dataSourceKey,
-      options: allowedKeys.map((k) => ({
-        value: k,
-        label: dataSourceLabels[k] ?? k
-      })),
-      onChange: (key) => {
-        if (!key && bindingPolicy === "optional") {
-          onUpdate({ dataBinding: void 0 });
-          return;
-        }
-        if (!key) return;
-        onUpdate({
-          dataBinding: {
-            dataSourceKey: key,
-            recordId: (binding == null ? void 0 : binding.dataSourceKey) === key ? binding.recordId : ""
+    )) : null, allowedKeys.length >= 1 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelPickRow), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Select,
+      {
+        size: "large",
+        placeholder: dataRecordBindOptions.length ? ep.phPickRow : ep.phNoRows,
+        style: { width: "100%" },
+        value: hasBoundDataRecord ? binding == null ? void 0 : binding.recordId : void 0,
+        allowClear: bindingPolicy === "optional",
+        options: dataRecordBindOptions,
+        getPopupContainer: getSelectPopupContainer,
+        onChange: (newId) => {
+          const key = (binding == null ? void 0 : binding.dataSourceKey) ?? allowedKeys[0];
+          if (!key) return;
+          if (!newId) {
+            onUpdate({ dataBinding: void 0 });
+            return;
           }
-        });
-      },
-      allowClear: bindingPolicy === "optional"
-    }
-  )) : null, allowedKeys.length >= 1 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelPickRow), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Select,
-    {
-      size: "small",
-      placeholder: dataRecordBindOptions.length ? ep.phPickRow : ep.phNoRows,
-      style: { width: "100%" },
-      value: hasBoundDataRecord ? binding == null ? void 0 : binding.recordId : void 0,
-      allowClear: bindingPolicy === "optional",
-      options: dataRecordBindOptions,
-      onChange: (newId) => {
-        const key = (binding == null ? void 0 : binding.dataSourceKey) ?? allowedKeys[0];
-        if (!key) return;
-        if (!newId) {
-          onUpdate({ dataBinding: void 0 });
-          return;
+          const row = (dataSources[key] ?? []).find(
+            (r) => r.id === newId
+          );
+          onUpdate({
+            dataBinding: {
+              dataSourceKey: key,
+              recordId: newId
+            },
+            name: row ? String(
+              (() => {
+                var _a2;
+                const m = row.main_field;
+                if (m != null && String(m).trim() !== "") {
+                  return ((_a2 = String(m).split(" ## ")[0]) == null ? void 0 : _a2.trim()) ?? newId;
+                }
+                return row.name ?? row.code ?? newId;
+              })()
+            ) : void 0
+          });
         }
-        const row = (dataSources[key] ?? []).find(
-          (r) => r.id === newId
-        );
-        onUpdate({
-          dataBinding: {
-            dataSourceKey: key,
-            recordId: newId
-          },
-          name: row ? String(row.name ?? newId) : void 0
-        });
       }
-    }
-  ), !hasBoundDataRecord && /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-record-bind-hint` }, ep.hintUnbound))), showDataSourceRecordBlock && binding && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-title` }, ep.recordTitle), hasCustomRecordForm && recordFormContext && recordFormSlotRaw != null ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-custom` }, resolveDataSourceRecordForm(
-    recordFormSlotRaw,
-    recordFormContext
-  )) : null, !hasCustomRecordForm && onSaveRecord ? /* @__PURE__ */ import_react.default.createElement(
-    import_FloorMapDataForm.FloorMapDataForm,
-    {
-      dataSourceKey: binding.dataSourceKey,
-      recordId: binding.recordId,
-      record,
-      dataSources,
-      onSave: onSaveRecord,
-      saving: savingRecord,
-      columns: recordFormColumns == null ? void 0 : recordFormColumns[binding.dataSourceKey]
-    }
-  ) : null), config.canvasUi.canEdit && onDelete ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-footer` }, /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Popconfirm,
-    {
-      title: ep.popTitle,
-      description: ep.popDesc,
-      onConfirm: onDelete,
-      okText: ep.btnOkDelete,
-      cancelText: ep.btnCancel,
-      okButtonProps: { danger: true }
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "default", danger: true, block: true, size: "small" }, ep.btnDelete)
-  )) : null);
+    ), !hasBoundDataRecord && /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-record-bind-hint` }, ep.hintUnbound))),
+    showDataRecordEditorSection && binding && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-title` }, ep.recordTitle), hasCustomRecordForm && recordFormContext && recordFormSlotRaw != null ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-custom` }, resolveDataSourceRecordForm(
+      recordFormSlotRaw,
+      recordFormContext
+    )) : null, !hasCustomRecordForm && onSaveRecord ? /* @__PURE__ */ import_react.default.createElement(
+      import_FloorMapDataForm.FloorMapDataForm,
+      {
+        dataSourceKey: binding.dataSourceKey,
+        recordId: binding.recordId,
+        record,
+        dataSources,
+        onSave: onSaveRecord,
+        saving: savingRecord,
+        columns: recordFormColumns == null ? void 0 : recordFormColumns[binding.dataSourceKey]
+      }
+    ) : null),
+    config.canvasUi.canEdit && onDelete ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-footer` }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Popconfirm,
+      {
+        title: ep.popTitle,
+        description: ep.popDesc,
+        onConfirm: onDelete,
+        okText: ep.btnOkDelete,
+        cancelText: ep.btnCancel,
+        okButtonProps: { danger: true }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "default", danger: true, block: true, size: "large" }, ep.btnDelete)
+    )) : null
+  );
 }
 var FloorMapEditPanel_default = FloorMapEditPanel;
 // Annotate the CommonJS export names for ESM import in node:

package/lib/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/lib/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;

package/lib/components/pisellFloorMapLayout/components/FloorMapEditTopBar.js

@@ -63,6 +63,7 @@ function FloorMapEditTopBar(props) {
     isFullscreen = false,
     controls = {},
     extraActions,
+    canvasTabsBarTrailing,
     className
   } = props;
   const engineCtx = (0, import_useEngineContext.default)();
@@ -80,11 +81,13 @@ function FloorMapEditTopBar(props) {
       saving: import_utils.locales.getText(`${I18N_TB}.saving`)
     };
   }, [engineLocale]);
-  const showSave = Boolean(onSave && config.canvasUi.canEdit);
-  const showFullscreenEnter = mode === "compact" && Boolean(toggleFullscreen);
+  const showSave = Boolean(onSave && config.canvasUi.canEdit) && !isFullscreen;
+  const showFullscreenEnter = Boolean(toggleFullscreen);
   const showFullscreenExit = mode === "full" && isFullscreen && Boolean(toggleFullscreen);
-  const hasFullActions = showSave || showFullscreenExit || Boolean(saveError) || extraActions != null && extraActions !== false;
+  const hasTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
+  const hasFullActions = showSave || showFullscreenExit || Boolean(saveError) || extraActions != null && extraActions !== false || hasTrailing;
   if (mode === "compact") {
+    const showCompactActions = hasTrailing || showFullscreenEnter;
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
@@ -105,7 +108,7 @@ function FloorMapEditTopBar(props) {
           className: `${PREFIX}-edit-top-bar-canvas-tabs`
         }
       )),
-      showFullscreenEnter ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, /* @__PURE__ */ import_react.default.createElement(
+      showCompactActions ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, canvasTabsBarTrailing, showFullscreenEnter ? /* @__PURE__ */ import_react.default.createElement(
         "button",
         {
           type: "button",
@@ -118,7 +121,7 @@ function FloorMapEditTopBar(props) {
           title: topBarLabels.fsEnterTitle
         },
         /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
-      )) : null
+      ) : null) : null
     );
   }
   return /* @__PURE__ */ import_react.default.createElement(
@@ -148,7 +151,7 @@ function FloorMapEditTopBar(props) {
         title: typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message
       },
       typeof saveError === "string" ? saveError : saveError == null ? void 0 : saveError.message
-    ) : null, extraActions, showFullscreenExit ? /* @__PURE__ */ import_react.default.createElement(
+    ) : null, canvasTabsBarTrailing, extraActions, showFullscreenExit ? /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
         type: "button",