@oceanbase/design 0.1.0

package/lib/Dialog/locale/zh-CN.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    helpDocument: string;
+    openHelpCenter: string;
+};
+export default _default;

package/lib/Dialog/locale/zh-CN.js

@@ -0,0 +1,30 @@
+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/Dialog/locale/zh-CN.ts
+var zh_CN_exports = {};
+__export(zh_CN_exports, {
+  default: () => zh_CN_default
+});
+module.exports = __toCommonJS(zh_CN_exports);
+var zh_CN_default = {
+  helpDocument: "帮助文档",
+  openHelpCenter: "文档中心打开"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Dialog/locale/zh-TW.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    helpDocument: string;
+    openHelpCenter: string;
+};
+export default _default;

package/lib/Dialog/locale/zh-TW.js

@@ -0,0 +1,30 @@
+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/Dialog/locale/zh-TW.ts
+var zh_TW_exports = {};
+__export(zh_TW_exports, {
+  default: () => zh_TW_default
+});
+module.exports = __toCommonJS(zh_TW_exports);
+var zh_TW_default = {
+  helpDocument: "幫助文檔",
+  openHelpCenter: "文檔中心打開"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/DocDialog/index.d.ts

@@ -0,0 +1,24 @@
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+interface IDialogConfig {
+    height?: number;
+    width?: number;
+    top?: number;
+    left?: number;
+    min?: [number, number];
+    max?: [number, number];
+}
+export interface IDocDialogProps extends LocaleWrapperProps {
+    className?: string;
+    title?: string;
+    fallbackUrl: string;
+    docUrls?: Record<string, string>;
+    embedConfig?: IDialogConfig;
+    normalConfig?: IDialogConfig;
+    normalModeWidth?: string;
+    defautTop?: number;
+    visible: boolean;
+    setRootWidth: (newWidth: string) => void;
+    setVisible: (payload: boolean) => void;
+}
+declare const _default: any;
+export default _default;

package/lib/DocDialog/index.js

@@ -0,0 +1,137 @@
+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/DocDialog/index.tsx
+var DocDialog_exports = {};
+__export(DocDialog_exports, {
+  default: () => DocDialog_default
+});
+module.exports = __toCommonJS(DocDialog_exports);
+var import_react = __toESM(require("react"));
+var import_Dialog = __toESM(require("../Dialog"));
+var import_lodash = require("lodash");
+var import_react_router_dom = require("react-router-dom");
+var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var DEFAULT_EMBDED_WIDTH = 0.4;
+var MAX_EMBED_WIDTH = 0.5;
+var MIN_EMBED_WIDTH = 0.3;
+var DEFAULT_MOBILE_CLIENT_WIDTH = 1280;
+var DEFAULT_TOP_HEIGHT = 0;
+var DocDialogComp = (props) => {
+  const {
+    fallbackUrl,
+    docUrls,
+    visible,
+    setRootWidth,
+    setVisible,
+    title,
+    defautTop = DEFAULT_TOP_HEIGHT,
+    className,
+    normalModeWidth = DEFAULT_MOBILE_CLIENT_WIDTH,
+    embedConfig = {},
+    normalConfig = {}
+  } = props;
+  const [clientHeight, setClientHeight] = (0, import_react.useState)(document.body.clientHeight);
+  const [clientWidth, setClientWidth] = (0, import_react.useState)(document.body.clientWidth);
+  const location = (0, import_react_router_dom.useLocation)();
+  const currentLink = (0, import_react.useMemo)(() => {
+    const { pathname } = location;
+    const link = Object.entries(docUrls).find((set) => pathname.indexOf(set[0]) > -1);
+    return (link == null ? void 0 : link[1]) ?? fallbackUrl;
+  }, [location, docUrls, fallbackUrl]);
+  const handleResize = (0, import_lodash.debounce)(() => {
+    setClientWidth(document.body.clientWidth);
+    setClientHeight(document.body.clientHeight);
+  }, 300);
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  const DialogProps = (0, import_react.useMemo)(() => {
+    const maxDialogHeight = clientHeight - defautTop;
+    let result = {
+      className,
+      visible,
+      title,
+      onClose: () => setVisible(false),
+      clientWidth,
+      clientHeight,
+      draggable: true,
+      extLink: { link: currentLink }
+    };
+    if (clientWidth >= normalModeWidth) {
+      result = {
+        ...result,
+        setRootWidth,
+        max: [MAX_EMBED_WIDTH * clientWidth, maxDialogHeight],
+        min: [MIN_EMBED_WIDTH * clientWidth, maxDialogHeight],
+        width: DEFAULT_EMBDED_WIDTH * clientWidth,
+        height: maxDialogHeight,
+        top: defautTop,
+        left: (1 - DEFAULT_EMBDED_WIDTH) * clientWidth,
+        ...embedConfig,
+        isEmbed: true
+      };
+    } else {
+      result = {
+        ...result,
+        max: [clientWidth, maxDialogHeight],
+        width: DEFAULT_EMBDED_WIDTH * clientWidth,
+        height: maxDialogHeight,
+        enableMaximization: false,
+        top: clientHeight - defautTop,
+        ...normalConfig,
+        isEmbed: false
+      };
+    }
+    return result;
+  }, [
+    defautTop,
+    className,
+    embedConfig,
+    normalConfig,
+    normalModeWidth,
+    currentLink,
+    title,
+    clientWidth,
+    clientHeight,
+    visible,
+    setRootWidth,
+    setVisible
+  ]);
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Dialog.default, { ...DialogProps }, /* @__PURE__ */ import_react.default.createElement("iframe", { src: currentLink })));
+};
+var DocDialog_default = (0, import_LocaleWrapper.default)({
+  componentName: "DocDialog",
+  defaultLocale: import_zh_CN.default
+})(DocDialogComp);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/DocDialog/locale/en-US.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/lib/DocDialog/locale/en-US.js

@@ -0,0 +1,27 @@
+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/DocDialog/locale/en-US.ts
+var en_US_exports = {};
+__export(en_US_exports, {
+  default: () => en_US_default
+});
+module.exports = __toCommonJS(en_US_exports);
+var en_US_default = {};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/DocDialog/locale/zh-CN.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/lib/DocDialog/locale/zh-CN.js

@@ -0,0 +1,27 @@
+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/DocDialog/locale/zh-CN.ts
+var zh_CN_exports = {};
+__export(zh_CN_exports, {
+  default: () => zh_CN_default
+});
+module.exports = __toCommonJS(zh_CN_exports);
+var zh_CN_default = {};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/DocDialog/locale/zh-TW.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/lib/DocDialog/locale/zh-TW.js

@@ -0,0 +1,27 @@
+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/DocDialog/locale/zh-TW.ts
+var zh_TW_exports = {};
+__export(zh_TW_exports, {
+  default: () => zh_TW_default
+});
+module.exports = __toCommonJS(zh_TW_exports);
+var zh_TW_default = {};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Form/FormItem.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
+import type { TooltipProps } from '../Tooltip';
+export declare type WrapperTooltipProps = Omit<TooltipProps, 'mouseFollow'> & {
+    icon?: React.ReactElement;
+};
+export declare type LabelTooltipType = WrapperTooltipProps | React.ReactNode;
+declare const FormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    useStatus: () => {
+        status?: "" | "success" | "error" | "warning" | "validating";
+        errors: ReactNode[];
+        warnings: ReactNode[];
+    };
+};
+export default FormItem;

package/lib/Form/FormItem.js

@@ -0,0 +1,59 @@
+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/Form/FormItem.tsx
+var FormItem_exports = {};
+__export(FormItem_exports, {
+  default: () => FormItem_default
+});
+module.exports = __toCommonJS(FormItem_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_Tooltip = require("../Tooltip");
+var AntFormItem = import_antd.Form.Item;
+var Item = ({ children, tooltip, ...restProps }) => {
+  const typeList = (0, import_Tooltip.getTooltipTypeList)();
+  if (typeof tooltip === "object" && !import_react.default.isValidElement(tooltip)) {
+    const { icon, type, overlayInnerStyle, ...restTooltipProps } = tooltip;
+    const typeItem = typeList.find((item) => item.type === type);
+    tooltip = {
+      color: typeItem == null ? void 0 : typeItem.backgroundColor,
+      overlayInnerStyle: {
+        color: typeItem == null ? void 0 : typeItem.color,
+        ...overlayInnerStyle
+      },
+      ...restTooltipProps
+    };
+  }
+  return /* @__PURE__ */ import_react.default.createElement(AntFormItem, { tooltip, ...restProps }, children);
+};
+var FormItem = Item;
+FormItem.useStatus = AntFormItem.useStatus;
+var FormItem_default = FormItem;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Form/index.d.ts

@@ -0,0 +1,2 @@
+import { Form } from 'antd';
+export default Form;

package/lib/Form/index.js

@@ -0,0 +1,40 @@
+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/Form/index.tsx
+var Form_exports = {};
+__export(Form_exports, {
+  default: () => Form_default
+});
+module.exports = __toCommonJS(Form_exports);
+var import_antd = require("antd");
+var import_FormItem = __toESM(require("./FormItem"));
+import_antd.Form.Item = import_FormItem.default;
+var Form_default = import_antd.Form;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/FullscreenBox/index.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import './index.less';
+export declare type FullscreenModeType = 'viewport' | 'browser';
+export interface FullscreenBoxRef {
+    changeFullscreen: () => void;
+}
+export interface FullscreenBoxProps extends LocaleWrapperProps {
+    /**
+     * @description 组件类名
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @description 自定义组件样式
+     * @ignore
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description 全屏模式，viewport（视口内全屏）, browser（浏览器全屏）
+     * @default "viewport"
+     */
+    defaultMode?: FullscreenModeType;
+    /**
+     * @description 自定义 Header 头部
+     */
+    header?: false | ReactNode | {
+        title: ReactNode;
+        extra?: ReactNode;
+    };
+    /**
+     * @description 全屏状态切换时触发
+     */
+    onChange?: (fullscreen: boolean) => void;
+    /**
+     * @description 手动添加children申明
+     */
+    children?: any;
+}
+declare const _default: any;
+export default _default;

package/lib/FullscreenBox/index.js

@@ -0,0 +1,128 @@
+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/FullscreenBox/index.tsx
+var FullscreenBox_exports = {};
+__export(FullscreenBox_exports, {
+  default: () => FullscreenBox_default
+});
+module.exports = __toCommonJS(FullscreenBox_exports);
+var import_react = __toESM(require("react"));
+var import_icons = require("@ant-design/icons");
+var import_screenfull = __toESM(require("screenfull"));
+var import_classnames = __toESM(require("classnames"));
+var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
+var import_util = require("../_util");
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_index = require("./index.less");
+var prefix = (0, import_util.getPrefix)("fullscreen-box");
+var FullscreenBox = import_react.default.forwardRef(({ style, header, className, defaultMode, children, onChange }, ref) => {
+  const [innerFullscreen, setInnerFullscreen] = (0, import_react.useState)(false);
+  const containerRef = (0, import_react.useRef)();
+  const fullscreenMode = defaultMode || "viewport";
+  (0, import_react.useEffect)(() => {
+    import_screenfull.default.on("change", handleFullscreenChange);
+    return () => {
+      import_screenfull.default.off("change", handleFullscreenChange);
+    };
+  }, []);
+  const handleFullscreenChange = () => {
+    const { isFullscreen } = import_screenfull.default;
+    setInnerFullscreen(() => {
+      return isFullscreen;
+    });
+    emitChange(isFullscreen);
+  };
+  const toggleFullscreen = () => {
+    changeFullscreen(!innerFullscreen);
+  };
+  const changeFullscreen = (fullscreen) => {
+    if (!containerRef.current) {
+      return Promise.reject(new Error("Container element is not ready."));
+    }
+    let p;
+    if (fullscreenMode === "browser") {
+      const sf = import_screenfull.default;
+      if (fullscreen) {
+        p = sf.request(containerRef.current);
+      } else {
+        p = sf.exit();
+      }
+      return p.then(() => sf.isFullscreen);
+    }
+    setInnerFullscreen(fullscreen);
+    emitChange(fullscreen);
+    return Promise.resolve(fullscreen);
+  };
+  const emitChange = (fullscreen) => {
+    if (onChange) {
+      onChange(fullscreen);
+    }
+  };
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    changeFullscreen: (fullscreen) => {
+      changeFullscreen(fullscreen);
+    }
+  }));
+  const icon = innerFullscreen ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, { className: `${prefix}-header-icon`, onClick: toggleFullscreen }) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, { className: `${prefix}-header-icon`, onClick: toggleFullscreen });
+  if (innerFullscreen) {
+    document.body.classList.add(`${prefix}-body-overflow-hidden`);
+  } else {
+    document.body.classList.remove(`${prefix}-body-overflow-hidden`);
+  }
+  const isComplexHeader = header && (header.title || header.extra);
+  const isStringHeader = typeof header === "string";
+  let headerContent;
+  if (header === false) {
+    headerContent = null;
+  } else if (import_react.default.isValidElement(header)) {
+    headerContent = header;
+  } else {
+    const title = isStringHeader ? header : isComplexHeader && header.title;
+    const extra = isComplexHeader && header.extra;
+    headerContent = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-header`, "data-testid": "header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-header-left` }, icon, title && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-header-title ` }, title)), isComplexHeader && extra && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-header-extra` }, extra));
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style,
+      className: (0, import_classnames.default)(prefix, className, {
+        [`${prefix}-fullscreen`]: innerFullscreen
+      })
+    },
+    headerContent,
+    children
+  );
+});
+var FullscreenBox_default = (0, import_LocaleWrapper.default)({
+  componentName: "FullscreenBox",
+  defaultLocale: import_zh_CN.default
+})(FullscreenBox);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/FullscreenBox/index.less

@@ -0,0 +1,49 @@
+@prefix: ob-fullscreen;
+.@{prefix}-box {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.88);
+  font-size: 14px;
+  line-height: 1.5714285714285714;
+  list-style: none;
+
+  &.@{prefix}-box-fullscreen {
+    position: fixed;
+    z-index: 900;
+    background: #fff;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+  .@{prefix}-box-header {
+    display: flex;
+    height: 64px;
+    .@{prefix}-box-header-left {
+      flex: 1;
+      padding-block: 20px;
+      padding-inline: 24px;
+    }
+    .@{prefix}-box-header-icon {
+      cursor: pointer;
+    }
+    .@{prefix}-box-header-title {
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      margin-inline-start: 24px;
+    }
+    .@{prefix}-box-header-extra {
+      flex: 2;
+      line-height: 64px;
+      text-align: end;
+      padding-inline-end: 24px;
+    }
+  }
+}
+
+/* 避免滚动穿透 */
+.@{prefix}-body-overflow-hidden {
+  overflow: hidden;
+}