@nokecy/qc-ui 1.0.82 → 1.0.84

package/dist/esm/ag-grid-plus/storage/SchemeSyncManager.js

@@ -73,7 +73,7 @@ export var SchemeSyncManager = /*#__PURE__*/function () {
             schemes = _ref2[1];
           serializedColumnSchemes[gridId] = schemes.map(function (scheme) {
             return _objectSpread(_objectSpread({}, scheme), {}, {
-              columnState: JSON.stringify(scheme.columnState)
+              columnState: JSON.stringify(scheme.columnConfig)
             });
           });
         });
@@ -593,15 +593,15 @@ export var SchemeSyncManager = /*#__PURE__*/function () {
                 if (types.has('current')) dirtyCurrentGrids.add(gridId);
               });
 
-              // 添加列方案数据（将 columnState 序列化为 JSON 字符串）
+              // 添加列方案数据（将 columnConfig 序列化为 JSON 字符串并映射到 columnState 字段）
               if (dirtyColumnGrids.size > 0) {
                 requestData.columnSchemes = {};
                 dirtyColumnGrids.forEach(function (gridId) {
                   var schemes = _this4.allData.columnSchemes[gridId] || [];
-                  // 将每个方案的 columnState 从数组转换为 JSON 字符串
+                  // 将每个方案的 columnConfig 从数组转换为 JSON 字符串,并映射到 columnState 字段
                   requestData.columnSchemes[gridId] = schemes.map(function (scheme) {
                     return _objectSpread(_objectSpread({}, scheme), {}, {
-                      columnState: JSON.stringify(scheme.columnState)
+                      columnState: JSON.stringify(scheme.columnConfig)
                     });
                   });
                 });
@@ -771,7 +771,8 @@ export var SchemeSyncManager = /*#__PURE__*/function () {
 
     /**
      * 反序列化从后端接收的方案数据
-     * 将 columnState 和 itemsOrder 从 JSON 字符串转换为数组
+     * 将 columnState(后端字段) 映射为 columnConfig 并从 JSON 字符串转换为数组
+     * 将 itemsOrder 从 JSON 字符串转换为数组
      */
   }, {
     key: "deserializeSchemesData",
@@ -787,10 +788,12 @@ export var SchemeSyncManager = /*#__PURE__*/function () {
           gridId = _ref6[0],
           schemes = _ref6[1];
         result.columnSchemes[gridId] = schemes.map(function (scheme) {
-          // 如果 columnState 是字符串，则解析为数组
-          var columnState = typeof scheme.columnState === 'string' ? JSON.parse(scheme.columnState) : scheme.columnState;
+          // 后端返回的数据中,columnState 字段存储的是 columnConfig 的 JSON 字符串
+          // 需要将其解析为数组并映射到 columnConfig 字段
+          var schemeWithState = scheme; // 类型断言处理后端数据
+          var columnConfig = typeof schemeWithState.columnState === 'string' ? JSON.parse(schemeWithState.columnState) : schemeWithState.columnState;
           return _objectSpread(_objectSpread({}, scheme), {}, {
-            columnState: columnState
+            columnConfig: columnConfig
           });
         });
       });

package/dist/esm/ag-grid-plus/types.d.ts

@@ -146,6 +146,8 @@ export interface ExtendedColDef extends ColDef {
     formatWithCommas?: boolean;
     /** 自定义单元格渲染器 (用于跳过计算) */
     customCellRenderer?: (params: any) => any;
+    /** 列分组的子列 (支持列分组功能) */
+    children?: ExtendedColDef[];
 }
 /**
  * 扩展的列状态 (包含 AG-Grid 列状态 + 自定义属性)

package/dist/esm/array-table/index.js

@@ -11,7 +11,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { Fragment, useEffect, useRef, useState, useCallback } from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 import { AgGridReact } from "ag-grid-react";
 import { useField, observer, RecursionField } from "@formily/react";
 import { useFieldSchema } from "@formily/react";
@@ -25,47 +25,7 @@ import PreviewArrayTable from "./preview";
 import { Space } from "antd";
 import Setting from "../ag-grid-plus/setting";
 import { useGridPlusColumnState } from "../ag-grid-plus/hooks/useGridPlusColumnState";
-
-/**
- * ArrayTable 内置的列状态管理 Hook
- * 使用 localStorage 进行持久化存储
- */
-var useArrayTableColumnState = function useArrayTableColumnState(gridKey) {
-  var STORAGE_KEY = 'array-table-column-state';
-
-  // 从 localStorage 读取所有列状态
-  var getColumnStateFromStorage = useCallback(function () {
-    try {
-      var stored = localStorage.getItem(STORAGE_KEY);
-      return stored ? JSON.parse(stored) : {};
-    } catch (error) {
-      console.error('Failed to read column state from localStorage:', error);
-      return {};
-    }
-  }, []);
-
-  // 保存列状态到 localStorage
-  var saveColumnStateToStorage = useCallback(function (key, state) {
-    try {
-      var allStates = getColumnStateFromStorage();
-      allStates[key] = state;
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(allStates));
-    } catch (error) {
-      console.error('Failed to save column state to localStorage:', error);
-    }
-  }, [getColumnStateFromStorage]);
-
-  // 获取指定 gridKey 的列状态
-  var getColumnState = useCallback(function (key) {
-    if (!key) return undefined;
-    var allStates = getColumnStateFromStorage();
-    return allStates[key];
-  }, [getColumnStateFromStorage]);
-  return {
-    getColumnState: getColumnState,
-    saveColumnState: saveColumnStateToStorage
-  };
-};
+import { useColumnSchemes } from "../ag-grid-plus/schemes/hooks/useColumnSchemes";
 
 //@ts-ignore
 var ArrayTable = observer(function (props) {
@@ -97,10 +57,14 @@ var ArrayTable = observer(function (props) {
   // 尝试从 Context 获取列状态管理（如果被 Provider 包裹）
   var contextColumnState = useGridPlusColumnState();
 
-  // 使用内置的列状态管理作为后备方案
-  var _useArrayTableColumnS = useArrayTableColumnState(props.gridKey),
-    getColumnState = _useArrayTableColumnS.getColumnState,
-    saveColumnState = _useArrayTableColumnS.saveColumnState;
+  // ArrayTable 内部集成列方案管理（统一使用 AgGridPlus 的方案系统）
+  var internalSchemeManager = useColumnSchemes({
+    gridId: props.gridKey || 'array-table-default',
+    enableAutoSave: false // 手动控制保存时机
+  });
+
+  // 使用 Context 的 schemeManager 或内部的 schemeManager
+  var schemeManager = (contextColumnState === null || contextColumnState === void 0 ? void 0 : contextColumnState.schemeManager) || internalSchemeManager;
 
   // 使用自定义 hooks
   var _useCellFocus = useCellFocus(),
@@ -110,45 +74,36 @@ var ArrayTable = observer(function (props) {
   var _useRowDrag = useRowDrag(field),
     handleRowDragMove = _useRowDrag.handleRowDragMove;
 
-  // 恢复列状态（优先使用 Context，否则使用内置的 localStorage）
+  // 恢复列状态（从方案系统）
   useEffect(function () {
-    var _contextColumnState$c;
-    if (!props.gridKey || !gridApiState) {
+    if (!props.gridKey || !gridApiState || !schemeManager) {
       return;
     }
-    var stateToApply = null;
-    var hasRealProvider = (contextColumnState === null || contextColumnState === void 0 ? void 0 : contextColumnState.columnState) !== undefined;
 
-    // 优先使用 Context 中的列状态（但只有在有真正的 Provider 时）
-    if (hasRealProvider && contextColumnState !== null && contextColumnState !== void 0 && (_contextColumnState$c = contextColumnState.columnState) !== null && _contextColumnState$c !== void 0 && _contextColumnState$c[props.gridKey]) {
-      stateToApply = contextColumnState.columnState[props.gridKey];
-    }
-    // 后备方案：使用内置的 localStorage 列状态
-    else {
-      stateToApply = getColumnState(props.gridKey);
-    }
-    if (stateToApply && Array.isArray(stateToApply)) {
-      // 转换为 AG-Grid 需要的格式
-      var formattedState = stateToApply.map(function (col) {
+    // 使用方案系统恢复列状态
+    // schemeManager 会自动加载默认方案或最后使用的方案
+    var currentScheme = schemeManager.currentScheme;
+    if (currentScheme && currentScheme.columnConfig) {
+      // 从 columnConfig (FlatColumnItem[]) 提取列状态
+      var columnState = currentScheme.columnConfig.filter(function (item) {
+        return item.type === 'column' && item.field;
+      }).map(function (item) {
         return {
-          colId: col.colId || col.field,
-          width: col.width,
-          hide: col.hide,
-          pinned: col.pinned === 'notPinned' ? null : col.pinned,
-          sort: col.sort,
-          sortIndex: col.sortIndex,
-          aggFunc: col.aggFunc,
-          flex: col.flex
+          colId: item.field,
+          width: item.width,
+          hide: item.hide,
+          pinned: item.pinned === 'notPinned' ? null : item.pinned,
+          flex: item.flex
         };
       });
       setTimeout(function () {
         gridApiState.applyColumnState({
-          state: formattedState,
+          state: columnState,
           applyOrder: true
         });
       }, 100);
     }
-  }, [props.gridKey, gridApiState, contextColumnState === null || contextColumnState === void 0 ? void 0 : contextColumnState.columnState, getColumnState]);
+  }, [props.gridKey, gridApiState, schemeManager === null || schemeManager === void 0 ? void 0 : schemeManager.currentScheme]);
 
   //@ts-ignore
   if (columns.length > 0) {
@@ -156,22 +111,9 @@ var ArrayTable = observer(function (props) {
     columns[0].rowDrag = props.onRowDrag ? true : false;
   }
 
-  // 保存列状态（优先使用 Context，否则使用内置的 localStorage）
-  var onColumnStateChanged = function onColumnStateChanged(columnState) {
-    if (!props.gridKey) return;
+  // 不再需要 onColumnStateChanged 回调
+  // 保存逻辑统一由 ColumnSetting 通过 schemeManager 处理
 
-    // 判断是否有真正的 Provider：检查 columnState 是否不是 undefined（默认值）
-    var hasRealProvider = (contextColumnState === null || contextColumnState === void 0 ? void 0 : contextColumnState.columnState) !== undefined;
-
-    // 优先使用 Context 的保存方法（但只有在有真正的 Provider 时）
-    if (hasRealProvider && contextColumnState !== null && contextColumnState !== void 0 && contextColumnState.onSaveColumnState) {
-      contextColumnState.onSaveColumnState(props.gridKey, columnState);
-    }
-    // 后备方案：使用内置的 localStorage 保存
-    else {
-      saveColumnState(props.gridKey, columnState);
-    }
-  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     style: {
@@ -219,7 +161,7 @@ var ArrayTable = observer(function (props) {
     gridApi: apiRef.current,
     gridApiState: gridApiState,
     type: 'formArrayTable',
-    onSaveColumnState: onColumnStateChanged
+    schemeManager: schemeManager
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
@@ -231,37 +173,7 @@ var ArrayTable = observer(function (props) {
       apiRef.current = params.api;
       setGridApiState(params.api);
 
-      // 立即尝试恢复列状态
-      if (props.gridKey) {
-        var _contextColumnState$c2;
-        var hasRealProvider = (contextColumnState === null || contextColumnState === void 0 ? void 0 : contextColumnState.columnState) !== undefined;
-        var stateToApply = null;
-        if (hasRealProvider && contextColumnState !== null && contextColumnState !== void 0 && (_contextColumnState$c2 = contextColumnState.columnState) !== null && _contextColumnState$c2 !== void 0 && _contextColumnState$c2[props.gridKey]) {
-          stateToApply = contextColumnState.columnState[props.gridKey];
-        } else {
-          stateToApply = getColumnState(props.gridKey);
-        }
-        if (stateToApply && Array.isArray(stateToApply)) {
-          var formattedState = stateToApply.map(function (col) {
-            return {
-              colId: col.colId || col.field,
-              width: col.width,
-              hide: col.hide,
-              pinned: col.pinned === 'notPinned' ? null : col.pinned,
-              sort: col.sort,
-              sortIndex: col.sortIndex,
-              aggFunc: col.aggFunc,
-              flex: col.flex
-            };
-          });
-          setTimeout(function () {
-            params.api.applyColumnState({
-              state: formattedState,
-              applyOrder: true
-            });
-          }, 50);
-        }
-      }
+      // 恢复列状态将由 useEffect 处理（使用方案系统）
     },
     suppressColumnVirtualisation: true,
     gridOptions: {

package/dist/esm/draggableModal/index.d.ts

@@ -2,7 +2,7 @@ import { ModalProps } from 'antd/lib/modal';
 import React from 'react';
 import "./style.less";
 /**
- * 可拖拽Modal
+ * 可拖拽Modal - 支持拖拽、全屏切换和缩放
  * @param props
  * @returns
  */

package/dist/esm/draggableModal/index.js

@@ -1,20 +1,22 @@
+var _excluded = ["wrapClassName", "width"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { ShrinkOutlined, ArrowsAltOutlined } from '@ant-design/icons';
+import { ShrinkOutlined, ArrowsAltOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import { Modal } from 'antd';
 import React, { useRef, useState } from 'react';
 import Draggable from 'react-draggable';
 import "./style.less";
-
 /**
- * 可拖拽Modal
- * @param props 
- * @returns 
+ * 可拖拽Modal - 支持拖拽、全屏切换和缩放
+ * @param props
+ * @returns
  */
 var DraggableModal = function DraggableModal(props) {
   var _useState = useState(true),
@@ -35,6 +37,39 @@ var DraggableModal = function DraggableModal(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     fullScreen = _useState6[0],
     setFullScreen = _useState6[1];
+  var _useState7 = useState('normal'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    zoom = _useState8[0],
+    setZoom = _useState8[1];
+
+  // 调整大小相关状态
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isResizing = _useState10[0],
+    setIsResizing = _useState10[1];
+  var _useState11 = useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    resizeDirection = _useState12[0],
+    setResizeDirection = _useState12[1];
+  var _useState13 = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    modalSize = _useState14[0],
+    setModalSize = _useState14[1];
+  var _useState15 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState16 = _slicedToArray(_useState15, 2),
+    modalPosition = _useState16[0],
+    setModalPosition = _useState16[1];
+
+  // 解构 props,分离出 wrapClassName
+  var propsWrapClassName = props.wrapClassName,
+    width = props.width,
+    restProps = _objectWithoutProperties(props, _excluded);
   var _onStart = function onStart(_event, uiData) {
     var _draggleRef$current;
     var _window$document$docu = window.document.documentElement,
@@ -54,50 +89,242 @@ var DraggableModal = function DraggableModal(props) {
   var toggleFullScreen = function toggleFullScreen() {
     setFullScreen(!fullScreen);
   };
-  var titleRender = function titleRender() {
-    var title = props.title;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, title, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: "ant-modal-close",
-      style: {
-        right: 42
-      },
-      onClick: toggleFullScreen
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "ant-modal-close-x"
-    }, fullScreen ? /*#__PURE__*/React.createElement(ShrinkOutlined, null) : /*#__PURE__*/React.createElement(ArrowsAltOutlined, null))));
+  var handleZoomIn = function handleZoomIn() {
+    if (zoom === 'small') {
+      setZoom('normal');
+    } else if (zoom === 'normal') {
+      setZoom('large');
+    }
+  };
+  var handleZoomOut = function handleZoomOut() {
+    if (zoom === 'large') {
+      setZoom('normal');
+    } else if (zoom === 'normal') {
+      setZoom('small');
+    }
   };
+
+  // 拖动调整大小的处理函数
+  var handleResizeMouseDown = function handleResizeMouseDown(e, direction) {
+    var _draggleRef$current2;
+    e.preventDefault();
+    e.stopPropagation();
+    if (fullScreen) return;
+
+    // 查找.ant-modal,它在draggleRef的父级
+    var modal = (_draggleRef$current2 = draggleRef.current) === null || _draggleRef$current2 === void 0 ? void 0 : _draggleRef$current2.closest('.ant-modal');
+    if (!modal) {
+      return;
+    }
+    var rect = modal.getBoundingClientRect();
+    setModalSize({
+      width: rect.width,
+      height: rect.height
+    });
+    setModalPosition({
+      x: rect.left,
+      y: rect.top
+    });
+    setResizeDirection(direction);
+    setIsResizing(true);
+    var startX = e.clientX;
+    var startY = e.clientY;
+    var startWidth = rect.width;
+    var startHeight = rect.height;
+    var startLeft = rect.left;
+    var startTop = rect.top;
+    var handleMouseMove = function handleMouseMove(moveEvent) {
+      var deltaX = moveEvent.clientX - startX;
+      var deltaY = moveEvent.clientY - startY;
+      var newWidth = startWidth;
+      var newHeight = startHeight;
+      var newLeft = startLeft;
+      var newTop = startTop;
+
+      // 根据方向计算新尺寸
+      if (direction.includes('e')) {
+        newWidth = Math.max(400, startWidth + deltaX);
+      }
+      if (direction.includes('w')) {
+        newWidth = Math.max(400, startWidth - deltaX);
+        newLeft = startLeft + (startWidth - newWidth);
+      }
+      if (direction.includes('s')) {
+        newHeight = Math.max(300, startHeight + deltaY);
+      }
+      if (direction.includes('n')) {
+        newHeight = Math.max(300, startHeight - deltaY);
+        newTop = startTop + (startHeight - newHeight);
+      }
+
+      // 限制最大尺寸
+      var maxWidth = window.innerWidth * 0.95;
+      var maxHeight = window.innerHeight * 0.95;
+      newWidth = Math.min(newWidth, maxWidth);
+      newHeight = Math.min(newHeight, maxHeight);
+
+      // 直接更新DOM以实现实时效果
+      modal.style.width = "".concat(newWidth, "px");
+      modal.style.height = "".concat(newHeight, "px");
+
+      // 同时更新 modal-content 的高度
+      var modalContent = modal.querySelector('.ant-modal-content');
+      if (modalContent) {
+        modalContent.style.height = "".concat(newHeight, "px");
+        modalContent.style.display = 'flex';
+        modalContent.style.flexDirection = 'column';
+      }
+
+      // 仍然更新state以保持React状态同步
+      setModalSize({
+        width: newWidth,
+        height: newHeight
+      });
+      setModalPosition({
+        x: newLeft,
+        y: newTop
+      });
+    };
+    var handleMouseUp = function handleMouseUp() {
+      setIsResizing(false);
+      setResizeDirection('');
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  // 合并类名
+  var zoomClass = !fullScreen && zoom !== 'normal' ? "modal-wrap-zoom-".concat(zoom) : '';
+  var fullScreenClass = fullScreen ? 'modal-wrap-fullscreen' : '';
+  var resizingClass = isResizing ? 'modal-wrap-resizing' : '';
+  var mergedWrapClassName = [propsWrapClassName, fullScreenClass, zoomClass, resizingClass].filter(Boolean).join(' ');
   return /*#__PURE__*/React.createElement(Modal, _extends({
     maskClosable: false,
-    wrapClassName: "".concat(fullScreen ? 'modal-wrap-fullscreen' : '')
-  }, props, {
+    width: width
+  }, restProps, {
+    wrapClassName: mergedWrapClassName,
     title: /*#__PURE__*/React.createElement("div", {
       style: {
         width: '100%',
-        cursor: 'move'
+        cursor: fullScreen ? 'default' : 'move'
       },
       onMouseOver: function onMouseOver() {
-        if (disabled) {
+        if (!fullScreen && disabled) {
           setDisabled(false);
         }
       },
       onMouseOut: function onMouseOut() {
-        setDisabled(true);
+        if (!fullScreen) {
+          setDisabled(true);
+        }
       },
       onFocus: function onFocus() {},
       onBlur: function onBlur() {}
-    }, titleRender()),
+    }, props.title, !fullScreen && zoom !== 'large' && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "ant-modal-close",
+      style: {
+        right: 106
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        handleZoomIn();
+      },
+      title: "\u653E\u5927"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ant-modal-close-x"
+    }, /*#__PURE__*/React.createElement(ZoomInOutlined, null))), !fullScreen && zoom !== 'small' && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "ant-modal-close",
+      style: {
+        right: 74
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        handleZoomOut();
+      },
+      title: "\u7F29\u5C0F"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ant-modal-close-x"
+    }, /*#__PURE__*/React.createElement(ZoomOutOutlined, null))), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "ant-modal-close",
+      style: {
+        right: 42
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        toggleFullScreen();
+      },
+      title: fullScreen ? '退出全屏' : '全屏'
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ant-modal-close-x"
+    }, fullScreen ? /*#__PURE__*/React.createElement(ShrinkOutlined, null) : /*#__PURE__*/React.createElement(ArrowsAltOutlined, null)))),
     modalRender: function modalRender(modal) {
       return /*#__PURE__*/React.createElement(Draggable, {
-        disabled: disabled,
+        disabled: disabled || fullScreen,
         bounds: bounds,
         nodeRef: draggleRef,
         onStart: function onStart(event, uiData) {
           return _onStart(event, uiData);
-        }
+        },
+        cancel: ".resize-handle"
       }, /*#__PURE__*/React.createElement("div", {
-        ref: draggleRef
-      }, modal));
+        ref: draggleRef,
+        style: isResizing && modalSize.width > 0 ? {
+          position: 'relative',
+          height: '100%',
+          width: "".concat(modalSize.width, "px"),
+          '--modal-width': "".concat(modalSize.width, "px"),
+          '--modal-height': "".concat(modalSize.height, "px")
+        } : {
+          position: 'relative',
+          height: '100%',
+          width: '100%'
+        }
+      }, modal, !fullScreen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-e",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'e');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-s",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 's');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-w",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'w');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-n",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'n');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-se",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'se');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-sw",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'sw');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-ne",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'ne');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-nw",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'nw');
+        }
+      }))));
     }
   }));
 };