@pnt-team/pnt-component-frontend 0.0.38 → 0.0.40

package/lib/cjs/components/PntGeneralLayout/index.d.ts

@@ -0,0 +1,82 @@
+import React, { FunctionComponent, ReactNode, Ref } from 'react';
+import './index.scss';
+interface PntGeneralLayoutProps {
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 头部标题内容
+     * @description 传入后将渲染 Layout Header 区域
+     */
+    headerTitle?: ReactNode;
+    /**
+     * 是否显示返回按钮
+     * @default false
+     */
+    showBackButton?: boolean;
+    /**
+     * 返回按钮点击回调
+     */
+    onBackButtonClick?: (() => void) | undefined;
+    /**
+     * 子头部内容
+     * @description 位于 Header 下方，常用于放置面包屑、Tab 等
+     */
+    subHeaderContent?: ReactNode;
+    /**
+     * 头部右侧操作区
+     * @description 常用于放置按钮组
+     */
+    operation?: ReactNode;
+    /**
+     * 内容区 ref
+     */
+    bodyRef?: Ref<HTMLDivElement>;
+    /**
+     * 页面主体内容
+     */
+    children?: ReactNode;
+    /**
+     * 内容区自定义样式
+     */
+    bodyStyle?: React.CSSProperties;
+    /**
+     * 底部内容
+     * @description 传入后将渲染 Layout Footer 区域，常用于放置操作按钮
+     */
+    footer?: ReactNode;
+}
+/**
+ * 通用页面布局组件（L4 布局组件）
+ * @description 提供标准的「头部 + 子头部 + 内容区 + 底部」页面布局结构，
+ * 基于 TDesign Layout 封装，适用于后台管理系统的详情页、表单页等场景。
+ *
+ * @example
+ * ```tsx
+ * // 基础用法：仅内容区
+ * <PntGeneralLayout>
+ *   <div>页面内容</div>
+ * </PntGeneralLayout>
+ *
+ * // 带标题和操作按钮
+ * <PntGeneralLayout
+ *   headerTitle="页面标题"
+ *   operation={<><Button>保存</Button><Button>取消</Button></>}
+ * >
+ *   <Form />
+ * </PntGeneralLayout>
+ *
+ * // 带返回按钮和底部
+ * <PntGeneralLayout
+ *   headerTitle="详情页"
+ *   showBackButton
+ *   onBackButtonClick={() => history.back()}
+ *   footer={<><Button>提交</Button><Button>重置</Button></>}
+ * >
+ *   <Detail />
+ * </PntGeneralLayout>
+ * ```
+ */
+declare const PntGeneralLayout: FunctionComponent<PntGeneralLayoutProps>;
+export default PntGeneralLayout;

package/lib/cjs/components/PntGeneralLayout/index.js

@@ -0,0 +1,74 @@
+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/components/PntGeneralLayout/index.tsx
+var PntGeneralLayout_exports = {};
+__export(PntGeneralLayout_exports, {
+  default: () => PntGeneralLayout_default
+});
+module.exports = __toCommonJS(PntGeneralLayout_exports);
+var import_tdesign_icons_react = require("tdesign-icons-react");
+var import_tdesign_react = require("tdesign-react");
+var import_index = require("./index.scss");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PntGeneralLayout = (prop) => {
+  const {
+    className,
+    headerTitle,
+    showBackButton = false,
+    onBackButtonClick,
+    subHeaderContent,
+    operation,
+    bodyRef,
+    children,
+    bodyStyle,
+    footer
+  } = prop;
+  const { Header, Footer } = import_tdesign_react.Layout;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tdesign_react.Layout, { className: `pnt-general-layout${className ? " " + className : ""}`, children: [
+    headerTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Header, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "header-title", children: [
+        showBackButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tdesign_icons_react.ArrowLeftIcon,
+          {
+            className: "goback-icon",
+            size: "24px",
+            onClick: onBackButtonClick
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "title", children: headerTitle })
+      ] }),
+      operation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "header-operation", children: operation })
+    ] }),
+    subHeaderContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "general-layout-sub-header", children: subHeaderContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "general-layout-body",
+        ref: bodyRef,
+        style: {
+          height: `calc(100%${headerTitle && " - 72px"}${footer && " - 72px"})`,
+          ...bodyStyle
+        },
+        children
+      }
+    ),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Footer, { children: footer })
+  ] });
+};
+var PntGeneralLayout_default = PntGeneralLayout;

package/lib/cjs/components/PntGeneralLayout/index.scss

@@ -0,0 +1,90 @@
+.pnt-general-layout {
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+
+  .t-layout__header {
+    height: auto;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #f0f3f6;
+
+    .header-title {
+      display: inline-block;
+      vertical-align: top;
+      padding: 24px;
+
+      .goback-icon {
+        margin-right: 12px;
+        vertical-align: top;
+        color: #3f8cff;
+        cursor: pointer;
+      }
+
+      .title {
+        display: inline-block;
+        vertical-align: top;
+        font-weight: 600;
+        font-size: 20px;
+        height: 24px;
+        line-height: 24px;
+      }
+    }
+
+    .header-operation {
+      height: 72px;
+      line-height: 72px;
+      padding-right: 24px;
+
+      .t-button + .t-button {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  .general-layout-sub-header {
+    border-bottom: 1px solid #f0f3f6;
+  }
+
+  .general-layout-body {
+    height: 100%;
+    padding: 24px;
+    overflow-y: auto;
+    background: #fafafa;
+
+    > div.tea-card,
+    > div.t-card,
+    > div.t-loading__parent > div.t-card,
+    > div[class*='-wrapper'],
+    > div[class*='-block'] {
+      box-shadow: none;
+      margin-bottom: 24px;
+      border-radius: 4px;
+    }
+
+    > div:last-child,
+    > div:last-child.t-card,
+    > div:last-child.tea-card,
+    > div.t-loading__parent > div:last-child.t-card,
+    > div:last-child[class*='-wrapper'],
+    > div:last-child[class*='-block'] {
+      margin-bottom: 0;
+    }
+  }
+
+  .t-layout__footer {
+    padding: 18px 24px;
+    background: #fff;
+    border-top: 1px solid #f0f3f6;
+
+    .t-button {
+      font-size: 14px;
+      min-width: 92px;
+      height: 36px;
+      font-weight: 600;
+
+      & + .t-button {
+        margin-left: 12px;
+      }
+    }
+  }
+}

package/lib/cjs/components/PntImagePreview/index.js

@@ -33,10 +33,10 @@ __export(PntImagePreview_exports, {
 });
 module.exports = __toCommonJS(PntImagePreview_exports);
 var import_uploadImg = __toESM(require("../../assets/images/uploadImg.png"));
-var import_react = __toESM(require("react"));
 var import_tdesign_icons_react = require("tdesign-icons-react");
 var import_tdesign_react = require("tdesign-react");
 var import_index = require("./index.scss");
+var import_jsx_runtime = require("react/jsx-runtime");
 var PntImagePreview = ({
   iconUrl,
   loading,
@@ -45,15 +45,18 @@ var PntImagePreview = ({
   onRemove
 }) => {
   const src = (iconUrl == null ? void 0 : iconUrl.length) ? iconUrl : defaultImg || import_uploadImg.default;
-  const LoadingContent = (isImageLoading) => /* @__PURE__ */ import_react.default.createElement(
+  const LoadingContent = (isImageLoading) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: isImageLoading ? "pnt-image-preview-progress" : "pnt-image-preview-upload-progress",
-      style: params == null ? void 0 : params.style
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "pnt-image-preview-loading" }, /* @__PURE__ */ import_react.default.createElement(import_tdesign_icons_react.LoadingIcon, { size: "18px", name: "loading" }), /* @__PURE__ */ import_react.default.createElement("p", null, "上传中"))
+      style: params == null ? void 0 : params.style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-image-preview-loading", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tdesign_icons_react.LoadingIcon, { size: "18px", name: "loading" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "上传中" })
+      ] })
+    }
   );
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: "pnt-image-preview-wrapper",
@@ -61,31 +64,35 @@ var PntImagePreview = ({
         if ((iconUrl == null ? void 0 : iconUrl.length) || loading) {
           e.stopPropagation();
         }
-      }
-    },
-    loading ? LoadingContent(false) : /* @__PURE__ */ import_react.default.createElement(
-      import_tdesign_react.ImageViewer,
-      {
-        images: [src],
-        closeOnOverlay: true,
-        trigger: ({ open }) => {
-          const mask = /* @__PURE__ */ import_react.default.createElement("div", { className: "pnt-image-preview-mask" }, /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(import_tdesign_icons_react.BrowseIcon, { onClick: open, size: "16px", name: "browse" })), /* @__PURE__ */ import_react.default.createElement("span", { className: "pnt-image-preview-divider" }), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(import_tdesign_icons_react.DeleteIcon, { onClick: onRemove, size: "16px", name: "delete" })));
-          return /* @__PURE__ */ import_react.default.createElement(
-            import_tdesign_react.Image,
-            {
-              alt: "",
-              src,
-              loading: LoadingContent(true),
-              overlayContent: iconUrl ? mask : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null),
-              overlayTrigger: "hover",
-              fit: "contain",
-              className: "pnt-image-preview",
-              style: params == null ? void 0 : params.style
-            }
-          );
+      },
+      children: loading ? LoadingContent(false) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tdesign_react.ImageViewer,
+        {
+          images: [src],
+          closeOnOverlay: true,
+          trigger: ({ open }) => {
+            const mask = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pnt-image-preview-mask", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tdesign_icons_react.BrowseIcon, { onClick: open, size: "16px", name: "browse" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pnt-image-preview-divider" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tdesign_icons_react.DeleteIcon, { onClick: onRemove, size: "16px", name: "delete" }) })
+            ] });
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_tdesign_react.Image,
+              {
+                alt: "",
+                src,
+                loading: LoadingContent(true),
+                overlayContent: iconUrl ? mask : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}),
+                overlayTrigger: "hover",
+                fit: "contain",
+                className: "pnt-image-preview",
+                style: params == null ? void 0 : params.style
+              }
+            );
+          }
         }
-      }
-    )
+      )
+    }
   );
 };
 var PntImagePreview_default = PntImagePreview;

package/lib/cjs/components/PntSecureBox/index.js

@@ -1,8 +1,6 @@
-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)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/PntSecureBox/index.tsx
@@ -34,8 +24,8 @@ __export(PntSecureBox_exports, {
 module.exports = __toCommonJS(PntSecureBox_exports);
 var import_useHighSecurity = require("../../hooks/useHighSecurity");
 var import_utils = require("../../utils");
-var import_react = __toESM(require("react"));
 var import_index = require("./index.scss");
+var import_jsx_runtime = require("react/jsx-runtime");
 var PntSecureBox = (prop) => {
   const {
     dataKey,
@@ -48,27 +38,30 @@ var PntSecureBox = (prop) => {
     fetcher
   } = prop;
   const { securityData, requestSecurityData } = (0, import_useHighSecurity.useHighSecurity)(fetcher);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pnt-secure-box" }, /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderDom(
-    (0, import_utils.isSecurityData)(dataValue) ? securityData[dataKey] || "******" : dataValue
-  ), (0, import_utils.isSecurityData)(dataValue) && !securityData.hasOwnProperty(dataKey) && /* @__PURE__ */ import_react.default.createElement(
-    "span",
-    {
-      className: "view-icon",
-      onClick: () => {
-        requestSecurityData({
-          env,
-          gameId,
-          pageId,
-          param: [
-            {
-              key: dataKey,
-              value: dataValue
-            }
-          ]
-        });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pnt-secure-box", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    renderDom(
+      (0, import_utils.isSecurityData)(dataValue) ? securityData[dataKey] || "******" : dataValue
+    ),
+    (0, import_utils.isSecurityData)(dataValue) && !securityData.hasOwnProperty(dataKey) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: "view-icon",
+        onClick: () => {
+          requestSecurityData({
+            env,
+            gameId,
+            pageId,
+            param: [
+              {
+                key: dataKey,
+                value: dataValue
+              }
+            ]
+          });
+        },
+        children: viewText || "View"
       }
-    },
-    viewText || "View"
-  )));
+    )
+  ] }) });
 };
 var PntSecureBox_default = PntSecureBox;

package/lib/cjs/global.css

@@ -0,0 +1,2 @@
+/* TDesign 组件库全局样式（dumi 文档站自动加载） */
+@import 'tdesign-react/dist/tdesign.min.css';

package/lib/cjs/hooks/useHighSecurity.d.ts

@@ -21,26 +21,8 @@ export type HighSecurityFetcher = (params: HighSecurityRequestParams) => Promise
     }>;
 }>;
 /**
- * 高敏数据解锁 Hook（L3 业务 Hook）
- *
- * 管理高敏数据的解锁状态。零业务侵入：请求函数通过 fetcher 注入，
- * 不再依赖内部 api/configs，避免将敏感配置打包进发布产物。
- *
- * @param fetcher 自定义高敏数据请求函数，需返回 { ret, data } 结构且 ret === 0 视为成功
- * @returns securityData 已解锁的高敏数据映射；requestSecurityData 请求解锁指定数据
- *
- * @example
- * ```tsx
- * import http from '@/utils/request';
- * import { useHighSecurity } from '@pnt-team/pnt-component-frontend';
- *
- * const Demo = () => {
- *   const { securityData, requestSecurityData } = useHighSecurity((params) =>
- *     http.post('/api/v3/business/game_info/high-security-decrypt', params).then(r => r.data)
- *   );
- *   // ...
- * };
- * ```
+ * 高敏数据解锁 Hook（PntSecureBox 内部依赖）
+ * @internal 不对外导出,归 PntSecureBox 组件内部使用
  */
 export declare const useHighSecurity: (fetcher: HighSecurityFetcher) => {
     securityData: Record<string, string>;

package/lib/cjs/index.d.ts

@@ -1,10 +1,3 @@
-export { default as PntCopyData } from './components/PntCopyData';
 export { default as PntImagePreview } from './components/PntImagePreview';
 export { default as PntSecureBox } from './components/PntSecureBox';
-export { default as useBtnPermission } from './hooks/useBtnPermission';
-export { useHighSecurity } from './hooks/useHighSecurity';
-export { default as useOsPlatformList } from './hooks/useOsPlatformList';
-export { default as usePagination } from './hooks/usePagination';
-export type { BtnPermissionMap, UseBtnPermissionOptions } from './hooks/useBtnPermission';
-export type { OsPlatformData, OsPlatformFetcher } from './hooks/useOsPlatformList';
-export type { PaginationData, PaginationRequestParams, OnPaginationRequest } from './hooks/usePagination';
+export { default as PntGeneralLayout } from './components/PntGeneralLayout';

package/lib/cjs/index.js

@@ -29,29 +29,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  PntCopyData: () => import_PntCopyData.default,
+  PntGeneralLayout: () => import_PntGeneralLayout.default,
   PntImagePreview: () => import_PntImagePreview.default,
-  PntSecureBox: () => import_PntSecureBox.default,
-  useBtnPermission: () => import_useBtnPermission.default,
-  useHighSecurity: () => import_useHighSecurity.useHighSecurity,
-  useOsPlatformList: () => import_useOsPlatformList.default,
-  usePagination: () => import_usePagination.default
+  PntSecureBox: () => import_PntSecureBox.default
 });
 module.exports = __toCommonJS(src_exports);
-var import_PntCopyData = __toESM(require("./components/PntCopyData"));
 var import_PntImagePreview = __toESM(require("./components/PntImagePreview"));
 var import_PntSecureBox = __toESM(require("./components/PntSecureBox"));
-var import_useBtnPermission = __toESM(require("./hooks/useBtnPermission"));
-var import_useHighSecurity = require("./hooks/useHighSecurity");
-var import_useOsPlatformList = __toESM(require("./hooks/useOsPlatformList"));
-var import_usePagination = __toESM(require("./hooks/usePagination"));
+var import_PntGeneralLayout = __toESM(require("./components/PntGeneralLayout"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PntCopyData,
+  PntGeneralLayout,
   PntImagePreview,
-  PntSecureBox,
-  useBtnPermission,
-  useHighSecurity,
-  useOsPlatformList,
-  usePagination
+  PntSecureBox
 });

package/lib/esm/components/PntGeneralLayout/index.d.ts

@@ -0,0 +1,82 @@
+import React, { FunctionComponent, ReactNode, Ref } from 'react';
+import './index.scss';
+interface PntGeneralLayoutProps {
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 头部标题内容
+     * @description 传入后将渲染 Layout Header 区域
+     */
+    headerTitle?: ReactNode;
+    /**
+     * 是否显示返回按钮
+     * @default false
+     */
+    showBackButton?: boolean;
+    /**
+     * 返回按钮点击回调
+     */
+    onBackButtonClick?: (() => void) | undefined;
+    /**
+     * 子头部内容
+     * @description 位于 Header 下方，常用于放置面包屑、Tab 等
+     */
+    subHeaderContent?: ReactNode;
+    /**
+     * 头部右侧操作区
+     * @description 常用于放置按钮组
+     */
+    operation?: ReactNode;
+    /**
+     * 内容区 ref
+     */
+    bodyRef?: Ref<HTMLDivElement>;
+    /**
+     * 页面主体内容
+     */
+    children?: ReactNode;
+    /**
+     * 内容区自定义样式
+     */
+    bodyStyle?: React.CSSProperties;
+    /**
+     * 底部内容
+     * @description 传入后将渲染 Layout Footer 区域，常用于放置操作按钮
+     */
+    footer?: ReactNode;
+}
+/**
+ * 通用页面布局组件（L4 布局组件）
+ * @description 提供标准的「头部 + 子头部 + 内容区 + 底部」页面布局结构，
+ * 基于 TDesign Layout 封装，适用于后台管理系统的详情页、表单页等场景。
+ *
+ * @example
+ * ```tsx
+ * // 基础用法：仅内容区
+ * <PntGeneralLayout>
+ *   <div>页面内容</div>
+ * </PntGeneralLayout>
+ *
+ * // 带标题和操作按钮
+ * <PntGeneralLayout
+ *   headerTitle="页面标题"
+ *   operation={<><Button>保存</Button><Button>取消</Button></>}
+ * >
+ *   <Form />
+ * </PntGeneralLayout>
+ *
+ * // 带返回按钮和底部
+ * <PntGeneralLayout
+ *   headerTitle="详情页"
+ *   showBackButton
+ *   onBackButtonClick={() => history.back()}
+ *   footer={<><Button>提交</Button><Button>重置</Button></>}
+ * >
+ *   <Detail />
+ * </PntGeneralLayout>
+ * ```
+ */
+declare const PntGeneralLayout: FunctionComponent<PntGeneralLayoutProps>;
+export default PntGeneralLayout;

package/lib/esm/components/PntGeneralLayout/index.js

@@ -0,0 +1,54 @@
+// src/components/PntGeneralLayout/index.tsx
+import { ArrowLeftIcon } from "tdesign-icons-react";
+import { Layout } from "tdesign-react";
+import "./index.scss";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PntGeneralLayout = (prop) => {
+  const {
+    className,
+    headerTitle,
+    showBackButton = false,
+    onBackButtonClick,
+    subHeaderContent,
+    operation,
+    bodyRef,
+    children,
+    bodyStyle,
+    footer
+  } = prop;
+  const { Header, Footer } = Layout;
+  return /* @__PURE__ */ jsxs(Layout, { className: `pnt-general-layout${className ? " " + className : ""}`, children: [
+    headerTitle && /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsxs("span", { className: "header-title", children: [
+        showBackButton && /* @__PURE__ */ jsx(
+          ArrowLeftIcon,
+          {
+            className: "goback-icon",
+            size: "24px",
+            onClick: onBackButtonClick
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "title", children: headerTitle })
+      ] }),
+      operation && /* @__PURE__ */ jsx("span", { className: "header-operation", children: operation })
+    ] }),
+    subHeaderContent && /* @__PURE__ */ jsx("div", { className: "general-layout-sub-header", children: subHeaderContent }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "general-layout-body",
+        ref: bodyRef,
+        style: {
+          height: `calc(100%${headerTitle && " - 72px"}${footer && " - 72px"})`,
+          ...bodyStyle
+        },
+        children
+      }
+    ),
+    footer && /* @__PURE__ */ jsx(Footer, { children: footer })
+  ] });
+};
+var PntGeneralLayout_default = PntGeneralLayout;
+export {
+  PntGeneralLayout_default as default
+};