bkui-vue 1.0.3-beta.9 → 2.0.1-beta.2

package/lib/info-box/index.js

@@ -2,9 +2,10 @@ import "../styles/reset.css";
 import "./info-box.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../shared";
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash_isFunction_f90b20d6__ from "lodash/isFunction";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_button_a2ea7c9a__ from "../button";
 import "../button/button.less";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_modal_d1344388__ from "../modal";
 import "../modal/modal.less";
@@ -427,7 +428,11 @@ __webpack_require__.d(__webpack_exports__, {
 ;// CONCATENATED MODULE: external "../shared"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const shared_namespaceObject = x({ ["AlignEnum"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.AlignEnum, ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["ThemeEnum"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.ThemeEnum, ["alignType"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.alignType, ["dialogTypeUnion"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.dialogTypeUnion, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
+const shared_namespaceObject = x({ ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
+;// CONCATENATED MODULE: external "vue"
+var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_y = x => () => x
+const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["createApp"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createApp, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -507,14 +512,10 @@ function _asyncToGenerator(fn) {
 // EXTERNAL MODULE: ../../node_modules/@babel/runtime/regenerator/index.js
 var regenerator = __webpack_require__(2841);
 var regenerator_default = /*#__PURE__*/__webpack_require__.n(regenerator);
-;// CONCATENATED MODULE: external "vue"
-var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createApp"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createApp, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["shallowRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
-;// CONCATENATED MODULE: external "../config-provider"
-var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var config_provider_y = x => () => x
-const config_provider_namespaceObject = config_provider_x({ ["useLocale"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.useLocale, ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
+;// CONCATENATED MODULE: external "lodash/isFunction"
+var isFunction_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var isFunction_y = x => () => x
+const isFunction_namespaceObject = isFunction_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_isFunction_f90b20d6__["default"] });
 ;// CONCATENATED MODULE: external "../button"
 var button_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var button_y = x => () => x
@@ -523,6 +524,10 @@ const button_namespaceObject = button_x({ ["default"]: () => __WEBPACK_EXTERNAL_
 var button_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var button_less_y = x => () => x
 const button_less_namespaceObject = button_less_x({  });
+;// CONCATENATED MODULE: external "../config-provider"
+var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var config_provider_y = x => () => x
+const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
 ;// CONCATENATED MODULE: external "../icon"
 var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var icon_y = x => () => x
@@ -530,76 +535,14 @@ const icon_namespaceObject = icon_x({ ["Close"]: () => __WEBPACK_EXTERNAL_MODULE
 ;// CONCATENATED MODULE: external "../modal"
 var modal_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var modal_y = x => () => x
-const modal_namespaceObject = modal_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_modal_d1344388__["default"], ["propsMixin"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_modal_d1344388__.propsMixin });
+const modal_namespaceObject = modal_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_modal_d1344388__["default"] });
 ;// CONCATENATED MODULE: external "../modal/modal.less"
 var modal_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var modal_less_y = x => () => x
 const modal_less_namespaceObject = modal_less_x({  });
-;// CONCATENATED MODULE: ../../packages/dialog/src/props.ts
-
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/*
- * Tencent is pleased to support the open source community by making
- * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
- *
- * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
- *
- * ---------------------------------------------------
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
- * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
- * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
- * the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
- * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
- * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
+;// CONCATENATED MODULE: ../../packages/info-box/src/render-component.tsx
 
 
-var props = _objectSpread(_objectSpread({}, modal_namespaceObject.propsMixin), {}, {
-  width: shared_namespaceObject.PropTypes.oneOfType([String, Number]).def(''),
-  height: shared_namespaceObject.PropTypes.oneOfType([String, Number]).def(''),
-  // 确认按钮文字
-  // confirmText: PropTypes.string.def('确定'),
-  confirmText: shared_namespaceObject.PropTypes.string,
-  // 取消按钮文字
-  // cancelText: PropTypes.string.def('取消'),
-  cancelText: shared_namespaceObject.PropTypes.string,
-  // 步骤按钮文字
-  // prevText: PropTypes.string.def('上一步'),
-  prevText: shared_namespaceObject.PropTypes.string,
-  // nextText: PropTypes.string.def('下一步'),
-  nextText: shared_namespaceObject.PropTypes.string,
-  // 当前步骤
-  current: shared_namespaceObject.PropTypes.number.def(1),
-  // 总步数
-  totalStep: shared_namespaceObject.PropTypes.number,
-  // 弹框的标题
-  title: shared_namespaceObject.PropTypes.string.def('title'),
-  // 显示 header 的位置
-  headerAlign: (0,shared_namespaceObject.alignType)().def(shared_namespaceObject.AlignEnum.LEFT),
-  // 显示 footer 的位置
-  footerAlign: (0,shared_namespaceObject.alignType)().def(shared_namespaceObject.AlignEnum.RIGHT),
-  // 颜色 按钮类型
-  theme: shared_namespaceObject.PropTypes.theme().def(shared_namespaceObject.ThemeEnum.PRIMARY),
-  // 对话框类型
-  dialogType: (0,shared_namespaceObject.dialogTypeUnion)(),
-  // 按钮loading
-  isLoading: shared_namespaceObject.PropTypes.bool.def(false)
-});
-/* harmony default export */ const src_props = (props);
-;// CONCATENATED MODULE: ../../packages/dialog/src/dialog.tsx
-
 
 
 /*
@@ -635,327 +578,243 @@ var props = _objectSpread(_objectSpread({}, modal_namespaceObject.propsMixin), {
 
 
 
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0,external_vue_namespaceObject.isVNode)(s);
-}
-/* harmony default export */ const src_dialog = ((0,external_vue_namespaceObject.defineComponent)({
-  // eslint-disable-next-line vue/no-reserved-component-names
-  name: 'Dialog',
-  props: src_props,
-  emits: ['closed', 'update:isShow', 'confirm', 'prev', 'next', 'value-change'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var t = (0,config_provider_namespaceObject.useLocale)('dialog');
-    var localConfirmText = (0,external_vue_namespaceObject.computed)(function () {
-      if (props.confirmText === undefined) {
-        return t.value.ok;
-      }
-      return props.confirmText;
-    });
-    var localCancelText = (0,external_vue_namespaceObject.computed)(function () {
-      if (props.cancelText === undefined) {
-        return t.value.cancel;
-      }
-      return props.cancelText;
-    });
-    var localPrevText = (0,external_vue_namespaceObject.computed)(function () {
-      if (props.prevText === undefined) {
-        return t.value.prev;
-      }
-      return props.prevText;
-    });
-    var localNextText = (0,external_vue_namespaceObject.computed)(function () {
-      if (props.nextText === undefined) {
-        return t.value.next;
-      }
-      return props.nextText;
-    });
-    var data = (0,external_vue_namespaceObject.reactive)({
-      positionX: 0,
-      positionY: 0,
-      moveStyle: {
-        top: '50%',
-        left: '50%'
-      }
-    });
-    var isModalShow = (0,external_vue_namespaceObject.ref)(props.isShow);
-    (0,external_vue_namespaceObject.onMounted)(function () {
-      if (props.escClose) {
-        addEventListener('keydown', escCloseHandler);
-      }
-    });
-    (0,external_vue_namespaceObject.onBeforeUnmount)(function () {
-      if (props.escClose) {
-        removeEventListener('keydown', escCloseHandler);
-      }
-    });
-    (0,external_vue_namespaceObject.watch)(function () {
-      return props.isShow;
-    }, function (val) {
-      if (!val) {
-        setTimeout(function () {
-          data.moveStyle = {
-            top: '50%',
-            left: '50%'
-          };
-          data.positionX = 0;
-          data.positionY = 0;
-          isModalShow.value = false;
-        }, 250);
-      } else {
-        isModalShow.value = true;
-      }
-      emit('value-change', val);
-    });
-    // 关闭弹框
-    var handleClose = /*#__PURE__*/function () {
+var genDefaultState = function genDefaultState() {
+  return {
+    isShow: false,
+    width: 400,
+    extCls: undefined,
+    "class": undefined,
+    infoType: undefined,
+    type: undefined,
+    title: undefined,
+    subTitle: undefined,
+    content: undefined,
+    footer: undefined,
+    headerAlign: 'center',
+    contentAlign: 'center',
+    footerAlign: 'center',
+    showMask: true,
+    quickClose: false,
+    escClose: false,
+    closeIcon: true,
+    confirmText: '确定',
+    theme: undefined,
+    confirmButtonTheme: 'primary',
+    cancelText: '',
+    beforeClose: function beforeClose() {
+      return true;
+    },
+    onConfirm: function onConfirm() {},
+    onCancel: function onCancel() {},
+    onClose: function onClose() {}
+  };
+};
+/* harmony default export */ const render_component = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'InfoBox',
+  setup: function setup(_props, _ref) {
+    var expose = _ref.expose;
+    var state = (0,external_vue_namespaceObject.reactive)(genDefaultState());
+    var isShow = (0,external_vue_namespaceObject.ref)(false);
+    var isLoading = (0,external_vue_namespaceObject.ref)(false);
+    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    var handleConfirm = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee() {
-        var shouldClose;
+        var willClose;
         return regenerator_default().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              shouldClose = true;
-              if (!(typeof props.beforeClose === 'function')) {
-                _context.next = 5;
-                break;
-              }
+              isLoading.value = true;
+              _context.prev = 1;
               _context.next = 4;
-              return props.beforeClose();
+              return state.beforeClose('confirm');
             case 4:
-              shouldClose = _context.sent;
-            case 5:
-              if (shouldClose) {
-                emit('update:isShow', false);
-                emit('closed');
-                isModalShow.value = false;
+              willClose = _context.sent;
+              if (willClose) {
+                _context.next = 7;
+                break;
               }
-            case 6:
+              return _context.abrupt("return");
+            case 7:
+              _context.next = 9;
+              return state.onConfirm();
+            case 9:
+              isShow.value = false;
+            case 10:
+              _context.prev = 10;
+              isLoading.value = false;
+              return _context.finish(10);
+            case 13:
             case "end":
               return _context.stop();
           }
-        }, _callee);
+        }, _callee, null, [[1,, 10, 13]]);
       }));
-      return function handleClose() {
+      return function handleConfirm() {
         return _ref2.apply(this, arguments);
       };
     }();
-    var handleConfirm = function handleConfirm() {
-      emit('update:isShow', false);
-      emit('confirm');
-      // isModalShow.value = false; 影响异步关闭
-    };
-    var hasFooter = (0,external_vue_namespaceObject.computed)(function () {
-      return ['process', 'operation', 'confirm'].includes(props.dialogType);
-    });
-    // 按 esc 关闭弹框
-    var escCloseHandler = function escCloseHandler(e) {
-      if (props.isShow && props.closeIcon) {
-        if (e.keyCode === 27) {
-          handleClose();
+    var handleCancel = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee2() {
+        var willClose;
+        return regenerator_default().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return state.beforeClose('cancel');
+            case 2:
+              willClose = _context2.sent;
+              if (willClose) {
+                _context2.next = 5;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 5:
+              _context2.next = 7;
+              return state.onCancel();
+            case 7:
+              isShow.value = false;
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function handleCancel() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    expose({
+      show: function show() {
+        isShow.value = true;
+      },
+      hide: function hide() {
+        isShow.value = false;
+      },
+      update: function update(payload) {
+        Object.assign(state, payload);
+        // 配置项变更 infoType 变更为 type
+        if (payload.infoType) {
+          state.type = payload.infoType;
         }
-      }
-    };
-    // 上一步
-    var handlePrevStep = function handlePrevStep() {
-      emit('prev');
-    };
-    // 下一步
-    var handleNextStep = function handleNextStep() {
-      emit('next');
-    };
-    // 拖拽事件
-    var moveHandler = function moveHandler(e) {
-      if (props.fullscreen) {
-        return false;
-      }
-      if (!props.draggable) {
-        return false;
-      }
-      var odiv = e.target;
-      var parentHeight = e.currentTarget.parentNode.parentNode.offsetHeight;
-      var parentWidth = e.currentTarget.parentNode.parentNode.offsetWidth;
-      var disX;
-      var disY;
-      if (data.positionX !== 0 && data.positionY !== 0) {
-        disX = e.clientX - data.positionX;
-        disY = e.clientY - data.positionY;
-      } else {
-        disX = e.clientX - odiv.offsetLeft;
-        disY = e.clientY - odiv.offsetTop;
-      }
-      document.onmousemove = function (e) {
-        var boxLeft = window.innerWidth - parentWidth;
-        var boxTop = window.innerHeight - parentHeight;
-        var left = e.clientX - disX;
-        var top = e.clientY - disY;
-        if (boxLeft / 2 - left <= 0) {
-          left = boxLeft / 2;
-        } else if (boxLeft / 2 + left <= 0) {
-          left = -boxLeft / 2;
+        // 配置项变更 onClose 变更为 onCancel
+        if (payload.onClose) {
+          state.onCancel = payload.onClose;
+        }
+        // 配置项变更 subTitle 变更为 content
+        if (payload.subTitle) {
+          state.content = payload.subTitle;
         }
-        if (boxTop / 2 - top <= 0) {
-          top = boxTop / 2;
-        } else if (boxTop / 2 + top <= 0) {
-          top = -boxTop / 2;
+        // 配置项变更 theme 变更为 confirmButtonTheme
+        if (payload.theme) {
+          state.confirmButtonTheme = payload.theme;
         }
-        data.positionX = left;
-        data.positionY = top;
-        data.moveStyle.left = "calc(50% + ".concat(left, "px)");
-        data.moveStyle.top = "calc(50% + ".concat(top, "px)");
+        // 配置项变更 extCls 变更为 class
+        if (payload.extCls) {
+          state["class"] = payload.extCls;
+        }
+      }
+    });
+    return function () {
+      var renderIcon = function renderIcon() {
+        if (!state.type) {
+          return null;
+        }
+        var iconMap = {
+          loading: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Spinner, {
+            "class": [resolveClassName('infobox-icon'), 'loading']
+          }, null),
+          warning: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Warn, {
+            "class": [resolveClassName('infobox-icon'), 'warning']
+          }, null),
+          success: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Success, {
+            "class": [resolveClassName('infobox-icon'), 'success']
+          }, null),
+          danger: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Close, {
+            "class": [resolveClassName('infobox-icon'), 'danger']
+          }, null)
+        };
+        return (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": resolveClassName('infobox-type')
+        }, [iconMap[state.type]]);
       };
-      document.onmouseup = function () {
-        document.onmousemove = null;
-        document.onmouseup = null;
+      var renderTitle = function renderTitle() {
+        if ((0,isFunction_namespaceObject["default"])(state.title)) {
+          return state.title();
+        }
+        return state.title;
       };
-    };
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
-      resolveClassName = _usePrefix.resolveClassName;
-    return {
-      data: data,
-      handleClose: handleClose,
-      handleConfirm: handleConfirm,
-      escCloseHandler: escCloseHandler,
-      moveHandler: moveHandler,
-      handlePrevStep: handlePrevStep,
-      handleNextStep: handleNextStep,
-      hasFooter: hasFooter,
-      isModalShow: isModalShow,
-      localConfirmText: localConfirmText,
-      localCancelText: localCancelText,
-      localPrevText: localPrevText,
-      localNextText: localNextText,
-      resolveClassName: resolveClassName
-    };
-  },
-  render: function render() {
-    var _this = this;
-    var renderIcon = function renderIcon() {
-      var iconMap = {
-        loading: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Spinner, {
-          "class": [_this.resolveClassName('info-icon'), 'primary']
-        }, null),
-        warning: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Warn, {
-          "class": [_this.resolveClassName('info-icon'), 'warning']
-        }, null),
-        success: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Success, {
-          "class": [_this.resolveClassName('info-icon'), 'success']
-        }, null),
-        danger: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Close, {
-          "class": [_this.resolveClassName('info-icon'), 'danger']
-        }, null)
+      var renderContent = function renderContent() {
+        if ((0,isFunction_namespaceObject["default"])(state.content)) {
+          return state.content();
+        }
+        return state.content;
       };
-      return iconMap[_this.infoType];
-    };
-    var dialogSlot = {
-      header: function header() {
-        var _this$$slots$tools, _this$$slots$tools2, _this$$slots, _this$$slots$header, _this$$slots$header2, _this$$slots2;
-        return [(0,external_vue_namespaceObject.createVNode)("div", {
-          "class": [_this.resolveClassName('dialog-tool'), _this.fullscreen || !_this.draggable ? '' : 'move', _this.draggable ? 'content-dragging' : ''],
-          "onMousedown": _this.moveHandler
-        }, [(_this$$slots$tools = (_this$$slots$tools2 = (_this$$slots = _this.$slots).tools) === null || _this$$slots$tools2 === void 0 ? void 0 : _this$$slots$tools2.call(_this$$slots)) !== null && _this$$slots$tools !== void 0 ? _this$$slots$tools : '']), (0,external_vue_namespaceObject.createVNode)("div", {
-          "class": _this.resolveClassName('dialog-header')
-        }, [(0,external_vue_namespaceObject.createVNode)("div", {
-          "class": _this.resolveClassName('header-icon')
-        }, [_this.infoType ? renderIcon() : (0,external_vue_namespaceObject.createVNode)("slot", {
-          "name": "info-icon"
-        }, null)]), (0,external_vue_namespaceObject.createVNode)("span", {
-          "class": _this.resolveClassName('dialog-title'),
-          "style": "text-align: ".concat(_this.headerAlign)
-        }, [(_this$$slots$header = (_this$$slots$header2 = (_this$$slots2 = _this.$slots).header) === null || _this$$slots$header2 === void 0 ? void 0 : _this$$slots$header2.call(_this$$slots2)) !== null && _this$$slots$header !== void 0 ? _this$$slots$header : _this.title])])];
-      },
-      "default": function _default() {
-        var _this$$slots$default, _this$$slots$default2, _this$$slots3;
-        return (_this$$slots$default = (_this$$slots$default2 = (_this$$slots3 = _this.$slots)["default"]) === null || _this$$slots$default2 === void 0 ? void 0 : _this$$slots$default2.call(_this$$slots3)) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : 'default';
-      },
-      footer: function footer() {
-        var _this$$slots$footer, _this$$slots$footer2, _this$$slots4, _this$$slots$footer3, _this$$slots$footer4, _this$$slots5, _this$$slots$footer5, _this$$slots$footer6, _this$$slots6;
-        return (0,external_vue_namespaceObject.createVNode)("div", {
-          "class": _this.resolveClassName('dialog-footer'),
-          "style": "text-align: ".concat(_this.footerAlign)
-        }, [_this.dialogType === 'process' ? (_this$$slots$footer = (_this$$slots$footer2 = (_this$$slots4 = _this.$slots).footer) === null || _this$$slots$footer2 === void 0 ? void 0 : _this$$slots$footer2.call(_this$$slots4)) !== null && _this$$slots$footer !== void 0 ? _this$$slots$footer : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [_this.current === 1 ? '' : (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
-          "class": _this.resolveClassName('dialog-perv'),
-          "onClick": _this.handlePrevStep
-        }, {
-          "default": function _default() {
-            return [_this.localPrevText];
-          }
-        }), _this.current === _this.totalStep ? '' : (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
-          "class": _this.resolveClassName('dialog-next'),
-          "onClick": _this.handleNextStep
-        }, {
-          "default": function _default() {
-            return [_this.localNextText];
-          }
-        }), _this.current === _this.totalStep ? (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
-          "onClick": _this.handleConfirm,
-          "theme": _this.theme,
-          "loading": _this.isLoading
-        }, {
-          "default": function _default() {
-            return [_this.localConfirmText];
-          }
-        }) : '', (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
-          "class": _this.resolveClassName('dialog-cancel'),
-          "onClick": _this.handleClose,
-          "disabled": _this.isLoading
-        }, {
-          "default": function _default() {
-            return [_this.localCancelText];
-          }
-        })]) : '', _this.dialogType === 'operation' ? (_this$$slots$footer3 = (_this$$slots$footer4 = (_this$$slots5 = _this.$slots).footer) === null || _this$$slots$footer4 === void 0 ? void 0 : _this$$slots$footer4.call(_this$$slots5)) !== null && _this$$slots$footer3 !== void 0 ? _this$$slots$footer3 : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
-          "onClick": _this.handleConfirm,
-          "theme": _this.theme,
-          "loading": _this.isLoading
-        }, {
-          "default": function _default() {
-            return [_this.localConfirmText];
-          }
-        }), (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
-          "class": _this.resolveClassName('dialog-cancel'),
-          "onClick": _this.handleClose,
-          "disabled": _this.isLoading
+      var renderFooter = function renderFooter() {
+        if ((0,isFunction_namespaceObject["default"])(state.footer)) {
+          return state.footer();
+        }
+        if (state.footer) {
+          return state.footer;
+        }
+        return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [state.confirmText && (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
+          "loading": isLoading.value,
+          "theme": state.confirmButtonTheme,
+          "onClick": handleConfirm
         }, {
           "default": function _default() {
-            return [_this.localCancelText];
+            return [state.confirmText];
           }
-        })]) : '', _this.dialogType === 'confirm' ? (_this$$slots$footer5 = (_this$$slots$footer6 = (_this$$slots6 = _this.$slots).footer) === null || _this$$slots$footer6 === void 0 ? void 0 : _this$$slots$footer6.call(_this$$slots6)) !== null && _this$$slots$footer5 !== void 0 ? _this$$slots$footer5 : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
-          "onClick": _this.handleConfirm,
-          "theme": _this.theme,
-          "loading": _this.isLoading
+        }), state.cancelText && (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
+          "onClick": handleCancel
         }, {
           "default": function _default() {
-            return [_this.localConfirmText];
+            return [state.cancelText];
           }
-        })]) : '']);
-      },
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      close: function close() {
-        return (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Error, {
-          "onClick": _this.handleClose
-        }, null);
-      }
+        })]);
+      };
+      return (0,external_vue_namespaceObject.createVNode)(modal_namespaceObject["default"], {
+        "class": [resolveClassName('infobox'), state["class"]],
+        "isShow": isShow.value,
+        "animateType": "fadein",
+        "transfer": true,
+        "quickClose": false,
+        "width": state.width,
+        "closeIcon": state.closeIcon
+      }, {
+        header: function header() {
+          return (0,external_vue_namespaceObject.createVNode)("div", {
+            "class": resolveClassName('infobox-header')
+          }, [renderIcon(), (0,external_vue_namespaceObject.createVNode)("div", {
+            "class": resolveClassName('infobox-title'),
+            "style": {
+              textAlign: state.headerAlign
+            }
+          }, [renderTitle()])]);
+        },
+        "default": function _default() {
+          return state.content && (0,external_vue_namespaceObject.createVNode)("div", {
+            "class": resolveClassName('infobox-content'),
+            "style": {
+              textAlign: state.contentAlign
+            }
+          }, [renderContent()]);
+        },
+        footer: function footer() {
+          return (0,external_vue_namespaceObject.createVNode)("div", {
+            "class": _defineProperty(_defineProperty({}, resolveClassName('infobox-footer'), true), "is-position-".concat(state.footerAlign), state.footerAlign)
+          }, [renderFooter()]);
+        },
+        close: function close() {
+          return (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Error, {
+            "onClick": handleCancel
+          }, null);
+        }
+      });
     };
-    var className = "".concat(this.resolveClassName('dialog-wrapper '), " ").concat(this.scrollable ? 'scroll-able' : '', " ").concat(this.multiInstance ? 'multi-instance' : '', " ").concat(this.hasFooter ? 'has-footer' : 'no-footer');
-    return (0,external_vue_namespaceObject.createVNode)(modal_namespaceObject["default"], (0,external_vue_namespaceObject.mergeProps)(this.$props, {
-      "class": className,
-      "onClose": this.handleClose,
-      "isShow": this.isModalShow,
-      "left": this.data.moveStyle.left,
-      "top": this.data.moveStyle.top
-    }), _isSlot(dialogSlot) ? dialogSlot : {
-      "default": function _default() {
-        return [dialogSlot];
-      }
-    });
   }
 }));
-;// CONCATENATED MODULE: ../../packages/info-box/src/info-box.tsx
-
-
-
-function info_box_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function info_box_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? info_box_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : info_box_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-
+;// CONCATENATED MODULE: ../../packages/info-box/src/info-box.ts
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -983,165 +842,47 @@ function info_box_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
  */
 
 
-
-var InfoBox = function InfoBox(config) {
-  var container = document.createElement('div');
-  var modalFuncProps = (0,external_vue_namespaceObject.shallowRef)(config);
-  var isShow = (0,external_vue_namespaceObject.ref)(modalFuncProps.value.isShow !== false);
-  var app;
-  var dialog = (0,external_vue_namespaceObject.defineComponent)({
-    name: 'DialogConfirm',
-    setup: function setup(_props, _ref) {
-      var expose = _ref.expose;
-      var beforeHiddenFn = [];
-      var resolveUserCallbackFnBeforeClose = /*#__PURE__*/function () {
-        var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee(userCallbackFn) {
-          return regenerator_default().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                if (!(typeof userCallbackFn === 'function')) {
-                  _context.next = 7;
-                  break;
-                }
-                if (!(userCallbackFn instanceof Promise)) {
-                  _context.next = 6;
-                  break;
-                }
-                _context.next = 4;
-                return userCallbackFn();
-              case 4:
-                _context.next = 7;
-                break;
-              case 6:
-                beforeHiddenFn.push(userCallbackFn);
-              case 7:
-                isShow.value = false;
-              case 8:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        return function resolveUserCallbackFnBeforeClose(_x) {
-          return _ref2.apply(this, arguments);
-        };
-      }();
-      var onClosed = /*#__PURE__*/function () {
-        var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee2() {
-          var _modalFuncProps$value;
-          return regenerator_default().wrap(function _callee2$(_context2) {
-            while (1) switch (_context2.prev = _context2.next) {
-              case 0:
-                resolveUserCallbackFnBeforeClose((_modalFuncProps$value = modalFuncProps.value) === null || _modalFuncProps$value === void 0 ? void 0 : _modalFuncProps$value.onClosed);
-              case 1:
-              case "end":
-                return _context2.stop();
-            }
-          }, _callee2);
-        }));
-        return function onClosed() {
-          return _ref3.apply(this, arguments);
-        };
-      }();
-      var onConfirm = /*#__PURE__*/function () {
-        var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee3() {
-          var _modalFuncProps$value2;
-          return regenerator_default().wrap(function _callee3$(_context3) {
-            while (1) switch (_context3.prev = _context3.next) {
-              case 0:
-                resolveUserCallbackFnBeforeClose((_modalFuncProps$value2 = modalFuncProps.value) === null || _modalFuncProps$value2 === void 0 ? void 0 : _modalFuncProps$value2.onConfirm);
-              case 1:
-              case "end":
-                return _context3.stop();
-            }
-          }, _callee3);
-        }));
-        return function onConfirm() {
-          return _ref4.apply(this, arguments);
-        };
-      }();
-      function update(newValue) {
-        modalFuncProps.value = info_box_objectSpread(info_box_objectSpread({}, modalFuncProps.value), newValue);
-      }
-      expose({
-        update: update
-      });
-      var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
-        resolveClassName = _usePrefix.resolveClassName;
-      var getContent = function getContent() {
-        var children = [];
-        var subTitleBox = [];
-        if (modalFuncProps.value.subTitle) {
-          switch (_typeof(modalFuncProps.value.subTitle)) {
-            case 'string':
-              children.push(modalFuncProps.value.subTitle);
-              break;
-            case 'function':
-              children.push(modalFuncProps.value.subTitle());
-              break;
-            default:
-              children.push(modalFuncProps.value.subTitle);
-              break;
-          }
-        }
-        if (children.length) {
-          subTitleBox.push((0,external_vue_namespaceObject.h)('div', {
-            "class": resolveClassName('info-sub-title'),
-            style: "text-Align:".concat(modalFuncProps.value.contentAlign || 'center')
-          }, children));
-        }
-        return subTitleBox;
-      };
-      var onHidden = function onHidden() {
-        beforeHiddenFn.forEach(function (fn) {
-          return fn();
+var appRef = (0,external_vue_namespaceObject.ref)();
+var getInstance = function getInstance() {
+  if (!appRef.value) {
+    var container = document.createElement('div');
+    var infoboxInstance = (0,external_vue_namespaceObject.createApp)({
+      render: function render() {
+        return (0,external_vue_namespaceObject.h)(render_component, {
+          ref: appRef
         });
-        beforeHiddenFn.length = 0;
-        container.remove();
-      };
-      return function () {
-        return (0,external_vue_namespaceObject.createVNode)(src_dialog, info_box_objectSpread(info_box_objectSpread({
-          "class": resolveClassName('info-wrapper'),
-          headerAlign: 'center',
-          footerAlign: 'center',
-          fullscreen: false
-        }, modalFuncProps.value), {}, {
-          isShow: isShow.value,
-          transfer: false,
-          onClosed: onClosed,
-          onConfirm: onConfirm,
-          onHidden: onHidden
-        }), getContent);
-      };
-    }
-  });
-  var beforeShow = function beforeShow() {
-    if (!app) {
-      document.body.append(container);
-      app = (0,external_vue_namespaceObject.createApp)(dialog).mount(container);
-    }
+      }
+    });
+    document.body.appendChild(container);
+    infoboxInstance.mount(container);
+  }
+  return appRef.value;
+};
+var InfoBox = function InfoBox(config) {
+  var instance = getInstance();
+  var configCache = Object.assign(genDefaultState(), config);
+  var show = function show() {
+    var _instance, _instance2;
+    (_instance = instance) === null || _instance === void 0 || _instance.update(configCache);
+    (_instance2 = instance) === null || _instance2 === void 0 || _instance2.show();
   };
-  if (isShow.value) {
-    beforeShow();
+  // 被调用时默认会弹出，当不需要默认弹出时需要明确传入 isShow: false 作为参数
+  if (config.isShow !== false) {
+    show();
   }
   return {
-    show: function show() {
-      beforeShow();
-      isShow.value = true;
-    },
+    show: show,
     hide: function hide() {
-      isShow.value = false;
+      var _instance3;
+      (_instance3 = instance) === null || _instance3 === void 0 || _instance3.hide();
     },
     update: function update(config) {
-      var _app;
-      beforeShow();
-      (_app = app) === null || _app === void 0 || _app.update(config);
+      var _instance4;
+      Object.assign(configCache, config);
+      (_instance4 = instance) === null || _instance4 === void 0 || _instance4.update(configCache);
     },
     destroy: function destroy() {
-      var _app2;
-      container.remove();
-      (_app2 = app) === null || _app2 === void 0 || _app2.unmount();
-      app = null;
+      instance = null;
     }
   };
 };