@pisell/materials 1.8.18 → 1.8.19

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

@@ -0,0 +1,434 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellFloorMapLayout/components/FloorMapEditPanel.tsx
+var FloorMapEditPanel_exports = {};
+__export(FloorMapEditPanel_exports, {
+  FloorMapEditPanel: () => FloorMapEditPanel,
+  default: () => FloorMapEditPanel_default
+});
+module.exports = __toCommonJS(FloorMapEditPanel_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_classnames = __toESM(require("classnames"));
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_types = require("../types");
+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_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(
+      ctx
+    );
+  }
+  return content;
+}
+function FloorMapEditPanel(props) {
+  var _a, _b, _c, _d;
+  const {
+    sceneElement,
+    itemId,
+    onUpdate,
+    onSaveRecord,
+    onClose,
+    onDelete,
+    recordFormColumns,
+    dataSourceRecordForm,
+    config,
+    dataSources,
+    savingRecord,
+    dataSourceLabels = {},
+    layoutDraftDirty,
+    className
+  } = props;
+  const [form] = import_antd.Form.useForm();
+  const skipFormValuesChangeRef = (0, import_react.useRef)(false);
+  const [formHasUnappliedChanges, setFormHasUnappliedChanges] = (0, import_react.useState)(false);
+  const engineCtx = (0, import_useEngineContext.default)();
+  const engineLocale = ((_b = (_a = engineCtx == null ? void 0 : engineCtx.engine) == null ? void 0 : _a.props) == null ? void 0 : _b.locale) || "zh-CN";
+  (0, import_floorMapCanvasDisplay.initFloorMapLayoutLocales)(engineLocale);
+  const ep = (0, import_react.useMemo)(
+    () => ({
+      elementProps: import_utils.locales.getText(`${I18N_EP}.element-props`),
+      closeAria: import_utils.locales.getText(`${I18N_EP}.close-aria`),
+      hintApply: import_utils.locales.getText(`${I18N_EP}.hint-apply`),
+      hintSave: import_utils.locales.getText(`${I18N_EP}.hint-save`),
+      sectionLayout: import_utils.locales.getText(`${I18N_EP}.section-layout`),
+      lockOn: import_utils.locales.getText(`${I18N_EP}.lock-on`),
+      lockOff: import_utils.locales.getText(`${I18N_EP}.lock-off`),
+      labelX: import_utils.locales.getText(`${I18N_EP}.label-x`),
+      labelY: import_utils.locales.getText(`${I18N_EP}.label-y`),
+      labelZ: import_utils.locales.getText(`${I18N_EP}.label-z`),
+      labelWidth: import_utils.locales.getText(`${I18N_EP}.label-width`),
+      labelHeight: import_utils.locales.getText(`${I18N_EP}.label-height`),
+      labelName: import_utils.locales.getText(`${I18N_EP}.label-name`),
+      labelNameStage: import_utils.locales.getText(`${I18N_EP}.label-name-stage`),
+      phNameStage: import_utils.locales.getText(`${I18N_EP}.ph-name-stage`),
+      phName: import_utils.locales.getText(`${I18N_EP}.ph-name`),
+      labelImageUrl: import_utils.locales.getText(`${I18N_EP}.label-image-url`),
+      extraImageUrl: import_utils.locales.getText(`${I18N_EP}.extra-image-url`),
+      phHttps: import_utils.locales.getText(`${I18N_EP}.ph-https`),
+      labelCanvas: import_utils.locales.getText(`${I18N_EP}.label-canvas`),
+      apply: import_utils.locales.getText(`${I18N_EP}.apply`),
+      dataBinding: import_utils.locales.getText(`${I18N_EP}.data-binding`),
+      dataBindingNote: import_utils.locales.getText(`${I18N_EP}.data-binding-note`),
+      labelDataSource: import_utils.locales.getText(`${I18N_EP}.label-data-source`),
+      phDataSource: import_utils.locales.getText(`${I18N_EP}.ph-data-source`),
+      labelPickRow: import_utils.locales.getText(`${I18N_EP}.label-pick-row`),
+      phPickRow: import_utils.locales.getText(`${I18N_EP}.ph-pick-row`),
+      phNoRows: import_utils.locales.getText(`${I18N_EP}.ph-no-rows`),
+      hintUnbound: import_utils.locales.getText(`${I18N_EP}.hint-unbound`),
+      recordTitle: import_utils.locales.getText(`${I18N_EP}.record-title`),
+      popTitle: import_utils.locales.getText(`${I18N_EP}.pop-title`),
+      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`)
+    }),
+    [engineLocale]
+  );
+  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 layoutLocked = Boolean(sceneElement.layoutTransformLocked);
+  const initialValues = import_react.default.useMemo(() => {
+    const dw = isImageKind ? 400 : 180;
+    const dh = isImageKind ? 240 : 120;
+    return {
+      x: sceneElement.x,
+      y: sceneElement.y,
+      name: sceneElement.name ?? "",
+      zIndex: sceneElement.zIndex ?? 0,
+      width: sceneElement.width ?? dw,
+      height: sceneElement.height ?? dh,
+      canvasId: sceneElement.canvasId,
+      imageUrl: sceneElement.imageUrl ?? ""
+    };
+  }, [sceneElement, isImageKind]);
+  import_react.default.useEffect(() => {
+    setFormHasUnappliedChanges(false);
+  }, [itemId]);
+  import_react.default.useEffect(() => {
+    skipFormValuesChangeRef.current = true;
+    form.setFieldsValue(initialValues);
+    queueMicrotask(() => {
+      skipFormValuesChangeRef.current = false;
+      setFormHasUnappliedChanges(false);
+    });
+  }, [itemId, initialValues, form]);
+  const handleFinish = (0, import_react.useCallback)(
+    (values) => {
+      const name = values.name != null ? String(values.name).trim() || void 0 : void 0;
+      const patch = {
+        name,
+        canvasId: String(values.canvasId)
+      };
+      if (isImageKind) {
+        const url = String(values.imageUrl ?? "").trim();
+        patch.imageUrl = url || void 0;
+      }
+      if (!layoutLocked) {
+        patch.x = Number(values.x);
+        patch.y = Number(values.y);
+        patch.zIndex = values.zIndex != null ? Number(values.zIndex) : void 0;
+        const w = Number(values.width);
+        const h = Number(values.height);
+        patch.width = Number.isFinite(w) ? Math.max(20, w) : void 0;
+        patch.height = Number.isFinite(h) ? Math.max(20, h) : void 0;
+      }
+      onUpdate(patch);
+      setFormHasUnappliedChanges(false);
+    },
+    [onUpdate, isImageKind, layoutLocked]
+  );
+  const binding = sceneElement.dataBinding;
+  const record = binding ? ((_d = dataSources[binding.dataSourceKey]) == null ? void 0 : _d.find(
+    (r) => r.id === binding.recordId
+  )) ?? {} : {};
+  const dataRecordBindOptions = (0, import_react.useMemo)(() => {
+    if (bindingPolicy === "none") return [];
+    const key = (binding == null ? void 0 : binding.dataSourceKey) ?? allowedKeys[0];
+    if (!key) return [];
+    const list = dataSources[key] ?? [];
+    if (!list.length) return [];
+    const usedByOther = new Set(
+      (config.sceneElements ?? []).filter(
+        (e) => {
+          var _a2;
+          return e.instanceId !== sceneElement.instanceId && ((_a2 = e.dataBinding) == null ? void 0 : _a2.dataSourceKey) === key;
+        }
+      ).map((e) => e.dataBinding.recordId)
+    );
+    return list.filter((r) => !usedByOther.has(r.id) || r.id === (binding == null ? void 0 : binding.recordId)).map((r) => ({
+      value: r.id,
+      label: formatDataRecordOptionLabel(r)
+    }));
+  }, [
+    bindingPolicy,
+    binding,
+    allowedKeys,
+    dataSources,
+    config.sceneElements,
+    sceneElement.instanceId
+  ]);
+  const hasBoundDataRecord = Boolean(
+    binding && (dataSources[binding.dataSourceKey] ?? []).some(
+      (r) => r.id === binding.recordId
+    )
+  );
+  const recordFormSlotRaw = binding ? dataSourceRecordForm == null ? void 0 : dataSourceRecordForm[binding.dataSourceKey] : void 0;
+  const hasCustomRecordForm = recordFormSlotRaw !== void 0 && recordFormSlotRaw !== null && recordFormSlotRaw !== false;
+  const showDataBindingSection = bindingPolicy !== "none";
+  const showDataSourceRecordBlock = hasBoundDataRecord && Boolean(binding) && (onSaveRecord != null || hasCustomRecordForm);
+  const recordFormContext = (0, import_react.useMemo)(() => {
+    if (!binding) return null;
+    return {
+      dataSourceKey: binding.dataSourceKey,
+      recordId: binding.recordId,
+      record,
+      dataSources,
+      sceneElement,
+      config,
+      savingRecord: savingRecord ?? false,
+      onSaveRecord: onSaveRecord ? (newData) => onSaveRecord(binding.dataSourceKey, binding.recordId, newData) : void 0
+    };
+  }, [
+    binding,
+    record,
+    dataSources,
+    sceneElement,
+    config,
+    savingRecord,
+    onSaveRecord
+  ]);
+  const isStageLike = sceneElement.elementKind === import_types.FLOOR_MAP_STAGE_ELEMENT_KIND;
+  const toggleLayoutLock = () => {
+    onUpdate({
+      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);
+      }
+    },
+    /* @__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: "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
+      }
+    )),
+    /* @__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.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,
+      {
+        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
+      }
+    )),
+    /* @__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 : ""
+          }
+        });
+      },
+      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(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);
+}
+var FloorMapEditPanel_default = FloorMapEditPanel;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloorMapEditPanel
+});

package/lib/components/pisellFloorMapLayout/components/FloorMapEditPanel.less

@@ -0,0 +1,153 @@
+.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;
+
+  &-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/lib/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;