@pisell/private-materials 3.4.96 → 3.4.98

package/lib/plus/saasDevice/deviceProfile/components/ProfileSetting/index.js

@@ -0,0 +1,232 @@
+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/plus/saasDevice/deviceProfile/components/ProfileSetting/index.tsx
+var ProfileSetting_exports = {};
+__export(ProfileSetting_exports, {
+  default: () => ProfileSetting_default
+});
+module.exports = __toCommonJS(ProfileSetting_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_UnsavedConfirmModal = require("../UnsavedConfirmModal");
+var import_utils2 = require("./utils");
+var import_BasicForm = __toESM(require("./BasicForm"));
+var import_index = require("./index.less");
+var import_useEngineContext = __toESM(require("../../../../../hooks/useEngineContext"));
+var import_hooks = require("../../hooks");
+var import_serve = require("../../serve");
+var getText = import_utils.locales.getText;
+var LowCodePage = (props) => {
+  var _a;
+  const { id, ...others } = props;
+  const context = (0, import_useEngineContext.default)();
+  const { RenderLowCodeByKey, getRenderLowCodeByKey } = ((_a = context.appHelper) == null ? void 0 : _a.utils) || {};
+  const Com = getRenderLowCodeByKey ? getRenderLowCodeByKey == null ? void 0 : getRenderLowCodeByKey() : RenderLowCodeByKey;
+  if (!Com) return /* @__PURE__ */ import_react.default.createElement("div", null, "RenderLowCodeByKey is not found");
+  return /* @__PURE__ */ import_react.default.createElement(Com, { ...others, id, key: id });
+};
+var BASIC_KEY = "basic";
+var ProfileSetting = (props) => {
+  var _a, _b, _c, _d;
+  const context = (0, import_useEngineContext.default)();
+  const app = ((_c = (_b = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.getApp) == null ? void 0 : _c.call(_b)) || {};
+  const { record, deviceModel, deviceType, scene = "profile", onBack } = props;
+  const translation = (0, import_hooks.useTranslation)();
+  const [model, setModel] = (0, import_react.useState)(deviceModel);
+  const [typeItem, setTypeItem] = (0, import_react.useState)();
+  const [bootstrapping, setBootstrapping] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    if (!record) return;
+    (async () => {
+      try {
+        if (deviceType) setTypeItem(deviceType);
+        if (deviceModel) setModel(deviceModel);
+      } catch (error) {
+        app.logger.addLog({
+          type: "error",
+          title: "加载配置模板上下文失败",
+          metadata: error
+        });
+      } finally {
+        setBootstrapping(false);
+      }
+    })();
+  }, []);
+  const profileStructure = (_d = model == null ? void 0 : model.data) == null ? void 0 : _d.profile_structure;
+  const extraTabs = (0, import_react.useMemo)(
+    () => (profileStructure == null ? void 0 : profileStructure.required) ? [...profileStructure.tabs ?? []].sort(
+      (a, b) => ((a == null ? void 0 : a.sort) ?? 0) - ((b == null ? void 0 : b.sort) ?? 0)
+    ) : [],
+    [profileStructure]
+  );
+  const menuItems = (0, import_react.useMemo)(
+    () => [
+      {
+        key: BASIC_KEY,
+        label: getText("pisell2.saas.device-profile.setting.menu.basic")
+      },
+      ...(extraTabs == null ? void 0 : extraTabs.map((t, i) => ({
+        key: `tab-${i}`,
+        label: translation(t.title) || `Tab ${i + 1}`
+      }))) || []
+    ],
+    [extraTabs]
+  );
+  const [activeKey, setActiveKey] = (0, import_react.useState)(BASIC_KEY);
+  const formRef = (0, import_react.useRef)(null);
+  const [dirty, setDirty] = (0, import_react.useState)(false);
+  const [saving, setSaving] = (0, import_react.useState)(false);
+  const [displayName, setDisplayName] = (0, import_react.useState)(
+    record == null ? void 0 : record.name
+  );
+  if (!record) {
+    return null;
+  }
+  const title = translation(displayName) || record.code;
+  const subtitle = getText("pisell2.saas.device-profile.setting.subtitle");
+  const switchKey = (next) => {
+    if (next === activeKey) return;
+    if (dirty && activeKey === BASIC_KEY) {
+      (0, import_UnsavedConfirmModal.unsavedChangesConfirm)(() => {
+        setDirty(false);
+        setActiveKey(next);
+      });
+      return;
+    }
+    setActiveKey(next);
+  };
+  const handleBack = () => {
+    if (dirty) {
+      (0, import_UnsavedConfirmModal.unsavedChangesConfirm)(() => {
+        setDirty(false);
+        onBack();
+      });
+      return;
+    }
+    onBack();
+  };
+  const handleSave = async () => {
+    if (!formRef.current) return;
+    try {
+      const values = await formRef.current.getValues();
+      setSaving(true);
+      await (0, import_serve.updateDeviceProfile)(record.id, (0, import_utils2.toUpdatePayload)(values));
+      setDisplayName(values.name);
+      import_antd.message.success(
+        getText("pisell2.saas.device-profile.message.updateSuccess")
+      );
+      setDirty(false);
+    } catch (error) {
+      if (error && error.errorFields) {
+        return;
+      }
+      app.logger.addLog({
+        type: "error",
+        title: "更新配置模板失败",
+        metadata: error
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+  const activeTab = activeKey === BASIC_KEY ? null : extraTabs[Number(activeKey.replace("tab-", ""))];
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__header-left" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      type: "text",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowLeftOutlined, null),
+      onClick: handleBack
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__title" }, title), subtitle ? /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__subtitle" }, subtitle) : null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__alert-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Alert,
+    {
+      type: "warning",
+      showIcon: true,
+      message: getText("pisell2.saas.device-profile.setting.saveWarning")
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__main" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__menu-card" }, /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellMenu,
+    {
+      mode: "inline",
+      theme: "light",
+      dataSource: menuItems,
+      selectedKeys: [activeKey],
+      onSelect: ({ key }) => switchKey(String(key))
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "saas-device-profile-setting__content-card",
+      style: { padding: activeKey === BASIC_KEY ? "24px" : 0 }
+    },
+    bootstrapping ? /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__loading-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, null)) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: { display: activeKey === BASIC_KEY ? "block" : "none" }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__section-title" }, getText(
+        "pisell2.saas.device-profile.setting.section.basicInfo"
+      )), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__subtitle" }, getText(
+        "pisell2.saas.device-profile.setting.section.basicInfoDesc"
+      ))),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_BasicForm.default,
+        {
+          ref: formRef,
+          mode: "edit",
+          deviceType: typeItem,
+          deviceModels: model ? [model] : [],
+          initialValue: record,
+          onDirty: () => setDirty(true)
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-setting__save-actions" }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          type: "primary",
+          size: "large",
+          loading: saving,
+          onClick: handleSave
+        },
+        getText("pisell2.saas.device-profile.common.save")
+      ))
+    ), activeKey !== BASIC_KEY && activeTab ? /* @__PURE__ */ import_react.default.createElement(
+      LowCodePage,
+      {
+        id: activeTab == null ? void 0 : activeTab.page_id,
+        scene,
+        sceneRequestId: record == null ? void 0 : record.id
+      }
+    ) : null)
+  )));
+};
+var ProfileSetting_default = ProfileSetting;

package/lib/plus/saasDevice/deviceProfile/components/ProfileSetting/index.less

@@ -0,0 +1,94 @@
+.saas-device-profile-setting {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f5f6f8;
+
+  &__btn-link {
+    padding: 0;
+  }
+
+  &__drawer-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__header {
+    padding: 16px 24px;
+    background: #fff;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  &__header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  &__subtitle {
+    color: #8c8c8c;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  &__alert-wrap {
+    padding: 12px 16px 0;
+  }
+
+  &__main {
+    flex: 1;
+    display: flex;
+    gap: 16px;
+    padding: 16px;
+    overflow: hidden;
+  }
+
+  &__menu-card {
+    width: 240px;
+    background: #fff;
+    border-radius: 12px;
+    padding: 12px;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+    overflow: auto;
+
+    .ant-menu {
+      border-inline-end: none;
+      background: transparent;
+    }
+  }
+
+  &__content-card {
+    flex: 1;
+    background: #fff;
+    border-radius: 12px;
+    overflow: auto;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+  }
+
+  &__loading-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 240px;
+  }
+
+  &__section {
+    margin-bottom: 16px;
+  }
+
+  &__section-title {
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  &__save-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 24px;
+  }
+}

package/lib/plus/saasDevice/deviceProfile/components/ProfileSetting/utils.d.ts

@@ -0,0 +1 @@
+export declare const toUpdatePayload: (basic: any) => any;

package/lib/plus/saasDevice/deviceProfile/components/ProfileSetting/utils.js

@@ -0,0 +1,44 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/saasDevice/deviceProfile/components/ProfileSetting/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  toUpdatePayload: () => toUpdatePayload
+});
+module.exports = __toCommonJS(utils_exports);
+var EMPTY_I18N = {
+  original: "",
+  "zh-CN": "",
+  "zh-HK": "",
+  en: "",
+  pt: "",
+  ja: ""
+};
+var toUpdatePayload = (basic) => ({
+  icon: (basic == null ? void 0 : basic.icon) ?? "",
+  name: basic == null ? void 0 : basic.name,
+  description: (basic == null ? void 0 : basic.description) ?? { ...EMPTY_I18N },
+  status: basic == null ? void 0 : basic.status,
+  sort: (basic == null ? void 0 : basic.sort) ?? 0,
+  data: {}
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  toUpdatePayload
+});

package/lib/plus/saasDevice/deviceProfile/components/SiderMenuPanel/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { MenuProps } from "antd";
+import './index.less';
+export interface SiderMenuPanelProps {
+    title?: React.ReactNode;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    onSearch?: (value: string) => void;
+    items: MenuProps["items"];
+    selectedKey: string;
+    onSelect: (key: string) => void;
+    emptyText?: React.ReactNode;
+}
+declare const SiderMenuPanel: React.FC<SiderMenuPanelProps>;
+export default SiderMenuPanel;

package/lib/plus/saasDevice/deviceProfile/components/SiderMenuPanel/index.js

@@ -0,0 +1,85 @@
+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/plus/saasDevice/deviceProfile/components/SiderMenuPanel/index.tsx
+var SiderMenuPanel_exports = {};
+__export(SiderMenuPanel_exports, {
+  default: () => SiderMenuPanel_default
+});
+module.exports = __toCommonJS(SiderMenuPanel_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_icons = require("@ant-design/icons");
+var import_index = require("./index.less");
+var hasAnyLeaf = (items) => {
+  if (!items || !items.length) return false;
+  return items.some((it) => {
+    if (!it) return false;
+    if (it.type === "group") {
+      return hasAnyLeaf(it.children);
+    }
+    return true;
+  });
+};
+var SiderMenuPanel = ({
+  title,
+  searchable,
+  searchPlaceholder,
+  onSearch,
+  items,
+  selectedKey,
+  onSelect,
+  emptyText
+}) => {
+  const isEmpty = (0, import_react.useMemo)(() => !hasAnyLeaf(items), [items]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-panel" }, title && /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-title" }, title), searchable && /* @__PURE__ */ import_react.default.createElement(
+    import_materials.Input,
+    {
+      allowClear: true,
+      prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, { className: "saas-device-profile-search-icon" }),
+      placeholder: searchPlaceholder ?? "Search...",
+      onChange: (e) => onSearch == null ? void 0 : onSearch(e.target.value)
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-menu-scroll" }, isEmpty ? /* @__PURE__ */ import_react.default.createElement(
+    import_materials.Empty,
+    {
+      image: import_materials.Empty.PRESENTED_IMAGE_SIMPLE,
+      description: emptyText ?? null
+    }
+  ) : /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellMenu,
+    {
+      mode: "inline",
+      theme: "light",
+      dataSource: items,
+      selectedKeys: [selectedKey],
+      onSelect: ({ key }) => onSelect(String(key))
+    }
+  )));
+};
+var SiderMenuPanel_default = SiderMenuPanel;

package/lib/plus/saasDevice/deviceProfile/components/SiderMenuPanel/index.less

@@ -0,0 +1,28 @@
+.saas-device-profile-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.saas-device-profile-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1f2937;
+  padding-left: 4px;
+}
+
+.saas-device-profile-menu-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+
+  :global(.ant-menu) {
+    border-inline-end: none;
+    background: transparent;
+  }
+}
+
+.saas-device-profile-search-icon {
+  color: #9ca3af;
+}

package/lib/plus/saasDevice/deviceProfile/components/TwoColumnPageLayout/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './index.less';
+export interface TwoColumnPageLayoutProps {
+    title: React.ReactNode;
+    subTitle?: React.ReactNode;
+    sider: React.ReactNode;
+    children: React.ReactNode;
+    siderWidth?: number;
+}
+declare const TwoColumnPageLayout: React.FC<TwoColumnPageLayoutProps>;
+export default TwoColumnPageLayout;

package/lib/plus/saasDevice/deviceProfile/components/TwoColumnPageLayout/index.js

@@ -0,0 +1,73 @@
+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/plus/saasDevice/deviceProfile/components/TwoColumnPageLayout/index.tsx
+var TwoColumnPageLayout_exports = {};
+__export(TwoColumnPageLayout_exports, {
+  default: () => TwoColumnPageLayout_default
+});
+module.exports = __toCommonJS(TwoColumnPageLayout_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_index = require("./index.less");
+var { Layout, Sider, Content } = import_materials.PisellLayouts;
+var TwoColumnPageLayout = ({
+  title,
+  subTitle,
+  sider,
+  children,
+  siderWidth = 240
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-profile-two-column-page-root" }, /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PageHeader,
+    {
+      title,
+      subTitle,
+      showTitle: true,
+      showSubTitle: Boolean(subTitle),
+      showDivider: false
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    Layout,
+    {
+      className: "saas-device-profile-two-column-page-root-layout",
+      hasSider: true
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      Sider,
+      {
+        width: siderWidth,
+        theme: "light",
+        className: "saas-device-profile-two-column-page-root-sider"
+      },
+      sider
+    ),
+    /* @__PURE__ */ import_react.default.createElement(Content, { className: "saas-device-profile-two-column-page-root-content" }, children)
+  ));
+};
+var TwoColumnPageLayout_default = TwoColumnPageLayout;

package/lib/plus/saasDevice/deviceProfile/components/TwoColumnPageLayout/index.less

@@ -0,0 +1,40 @@
+.saas-device-profile-two-column-page-root {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  background: #f5f6f8;
+  overflow: hidden;
+
+  &-layout {
+    flex: 1;
+    min-height: 0;
+    margin-top: 16px;
+    background: transparent;
+    gap: 16px;
+  }
+
+  &-sider {
+    background: #fff;
+    border-radius: 12px;
+    padding: 16px;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+    height: 100%;
+    overflow: hidden;
+
+    :global(.ant-layout-sider-children) {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+  }
+
+  &-content {
+    background: #fff;
+    border-radius: 12px;
+    padding: 16px;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+    height: 100%;
+    overflow: auto;
+  }
+}

package/lib/plus/saasDevice/deviceProfile/components/UnsavedConfirmModal/index.d.ts

@@ -0,0 +1,2 @@
+import './index.less';
+export declare const unsavedChangesConfirm: (callback: () => void) => void;

package/lib/plus/saasDevice/deviceProfile/components/UnsavedConfirmModal/index.js

@@ -0,0 +1,46 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/saasDevice/deviceProfile/components/UnsavedConfirmModal/index.tsx
+var UnsavedConfirmModal_exports = {};
+__export(UnsavedConfirmModal_exports, {
+  unsavedChangesConfirm: () => unsavedChangesConfirm
+});
+module.exports = __toCommonJS(UnsavedConfirmModal_exports);
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_index = require("./index.less");
+var unsavedChangesConfirm = (callback) => {
+  import_antd.Modal.confirm({
+    title: import_utils.locales.getText("pisell2.saas.unsaved-changes"),
+    content: import_utils.locales.getText("pisell2.saas.unsaved-changes-content"),
+    okText: import_utils.locales.getText("pisell2.saas.leave"),
+    cancelText: import_utils.locales.getText("pisell2.saas.stay"),
+    okButtonProps: {
+      className: "unsaved-changes-modal-ok-btn"
+    },
+    wrapClassName: "unsaved-changes-modal",
+    onOk() {
+      callback();
+    }
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  unsavedChangesConfirm
+});