bkui-vue 2.0.2-beta.9 → 2.0.2-beta.90

package/lib/shared/index.js

@@ -121,7 +121,7 @@ __webpack_require__.d(__webpack_exports__, {
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *
@@ -215,7 +215,7 @@ function _typeof(o) {
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *
@@ -476,7 +476,7 @@ const external_vue_namespaceObject = x({ ["inject"]: () => __WEBPACK_EXTERNAL_MO
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *
@@ -504,7 +504,7 @@ var formItemKey = Symbol('formItem');
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *
@@ -535,7 +535,7 @@ var useForm = function useForm() {
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *
@@ -760,7 +760,7 @@ function v4(options, buf, offset) {
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *
@@ -1158,7 +1158,7 @@ var getPopContainerId = function getPopContainerId() {
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *
@@ -1208,7 +1208,7 @@ const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTER
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *
@@ -1422,7 +1422,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *
@@ -1725,7 +1725,7 @@ function SelectedType() {
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *

package/lib/shared/z-index-manager.d.ts

@@ -2,7 +2,7 @@
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *

package/lib/sideslider/index.d.ts

@@ -10,6 +10,31 @@ declare const BkSideslider: {
             default: string;
             validator: (value: string) => boolean;
         };
+        resizable: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        minWidth: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        maxWidth: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        triggerWidth: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        immediate: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
         isShow: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -75,8 +100,11 @@ declare const BkSideslider: {
         onShown?: (...args: any[]) => any;
         onClosed?: (...args: any[]) => any;
         "onUpdate:isShow"?: (...args: any[]) => any;
+        "onBefore-resize"?: (...args: any[]) => any;
+        onResizing?: (...args: any[]) => any;
+        "onAfter-resize"?: (...args: any[]) => any;
         "onAnimation-end"?: (...args: any[]) => any;
-    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hidden" | "shown" | "closed" | "update:isShow" | "animation-end")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hidden" | "shown" | "closed" | "update:isShow" | "before-resize" | "resizing" | "after-resize" | "animation-end")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         title: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         } & {
@@ -87,6 +115,31 @@ declare const BkSideslider: {
             default: string;
             validator: (value: string) => boolean;
         };
+        resizable: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        minWidth: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        maxWidth: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        triggerWidth: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        immediate: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
         isShow: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -152,9 +205,13 @@ declare const BkSideslider: {
         onShown?: (...args: any[]) => any;
         onClosed?: (...args: any[]) => any;
         "onUpdate:isShow"?: (...args: any[]) => any;
+        "onBefore-resize"?: (...args: any[]) => any;
+        onResizing?: (...args: any[]) => any;
+        "onAfter-resize"?: (...args: any[]) => any;
         "onAnimation-end"?: (...args: any[]) => any;
     }, {
         title: string;
+        maxWidth: number;
         extCls: string;
         left: string;
         top: string;
@@ -163,6 +220,7 @@ declare const BkSideslider: {
         backgroundColor: string;
         transfer: string | boolean | HTMLElement;
         direction: string;
+        resizable: boolean;
         fullscreen: boolean;
         showMask: boolean;
         closeIcon: boolean;
@@ -170,6 +228,9 @@ declare const BkSideslider: {
         quickClose: boolean;
         animateType: string;
         beforeClose: () => boolean | Promise<boolean>;
+        minWidth: number;
+        triggerWidth: number;
+        immediate: boolean;
     }, true, {}, {}, {
         P: {};
         B: {};
@@ -188,6 +249,31 @@ declare const BkSideslider: {
             default: string;
             validator: (value: string) => boolean;
         };
+        resizable: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        minWidth: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        maxWidth: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        triggerWidth: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        immediate: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
         isShow: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -253,9 +339,13 @@ declare const BkSideslider: {
         onShown?: (...args: any[]) => any;
         onClosed?: (...args: any[]) => any;
         "onUpdate:isShow"?: (...args: any[]) => any;
+        "onBefore-resize"?: (...args: any[]) => any;
+        onResizing?: (...args: any[]) => any;
+        "onAfter-resize"?: (...args: any[]) => any;
         "onAnimation-end"?: (...args: any[]) => any;
     }, () => JSX.Element, {}, {}, {}, {
         title: string;
+        maxWidth: number;
         extCls: string;
         left: string;
         top: string;
@@ -264,6 +354,7 @@ declare const BkSideslider: {
         backgroundColor: string;
         transfer: string | boolean | HTMLElement;
         direction: string;
+        resizable: boolean;
         fullscreen: boolean;
         showMask: boolean;
         closeIcon: boolean;
@@ -271,6 +362,9 @@ declare const BkSideslider: {
         quickClose: boolean;
         animateType: string;
         beforeClose: () => boolean | Promise<boolean>;
+        minWidth: number;
+        triggerWidth: number;
+        immediate: boolean;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -286,6 +380,31 @@ declare const BkSideslider: {
         default: string;
         validator: (value: string) => boolean;
     };
+    resizable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    minWidth: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    maxWidth: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    triggerWidth: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    immediate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     isShow: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -351,9 +470,13 @@ declare const BkSideslider: {
     onShown?: (...args: any[]) => any;
     onClosed?: (...args: any[]) => any;
     "onUpdate:isShow"?: (...args: any[]) => any;
+    "onBefore-resize"?: (...args: any[]) => any;
+    onResizing?: (...args: any[]) => any;
+    "onAfter-resize"?: (...args: any[]) => any;
     "onAnimation-end"?: (...args: any[]) => any;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hidden" | "shown" | "closed" | "update:isShow" | "animation-end")[], "hidden" | "shown" | "closed" | "update:isShow" | "animation-end", {
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hidden" | "shown" | "closed" | "update:isShow" | "before-resize" | "resizing" | "after-resize" | "animation-end")[], "hidden" | "shown" | "closed" | "update:isShow" | "before-resize" | "resizing" | "after-resize" | "animation-end", {
     title: string;
+    maxWidth: number;
     extCls: string;
     left: string;
     top: string;
@@ -362,6 +485,7 @@ declare const BkSideslider: {
     backgroundColor: string;
     transfer: string | boolean | HTMLElement;
     direction: string;
+    resizable: boolean;
     fullscreen: boolean;
     showMask: boolean;
     closeIcon: boolean;
@@ -369,5 +493,8 @@ declare const BkSideslider: {
     quickClose: boolean;
     animateType: string;
     beforeClose: () => boolean | Promise<boolean>;
+    minWidth: number;
+    triggerWidth: number;
+    immediate: boolean;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]>;
 export default BkSideslider;

package/lib/sideslider/index.js

@@ -506,7 +506,7 @@ function _defineProperty(obj, key, value) {
 ;// 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, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["getCurrentInstance"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.getCurrentInstance, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["useAttrs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useAttrs, ["useSlots"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useSlots });
+const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["getCurrentInstance"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.getCurrentInstance, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["useAttrs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useAttrs, ["useSlots"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useSlots, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withModifiers"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withModifiers });
 // EXTERNAL MODULE: ../../node_modules/@babel/runtime/regenerator/index.js
 var regenerator = __webpack_require__(2841);
 var regenerator_default = /*#__PURE__*/__webpack_require__.n(regenerator);
@@ -541,7 +541,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *
@@ -591,9 +591,14 @@ sliderProps.width["default"] = '400';
         }
         return true;
       }
-    }
+    },
+    resizable: shared_namespaceObject.PropTypes.bool.def(false),
+    minWidth: shared_namespaceObject.PropTypes.number.def(400),
+    maxWidth: shared_namespaceObject.PropTypes.number.def(Infinity),
+    triggerWidth: shared_namespaceObject.PropTypes.number.def(5),
+    immediate: shared_namespaceObject.PropTypes.bool.def(false) // 是否实时拖拽（拖拽时立即改变宽度）
   }),
-  emits: ['closed', 'update:isShow', 'shown', 'hidden', 'animation-end'],
+  emits: ['closed', 'update:isShow', 'shown', 'hidden', 'animation-end', 'before-resize', 'resizing', 'after-resize'],
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
     var attrs = (0,external_vue_namespaceObject.useAttrs)();
@@ -601,6 +606,20 @@ sliderProps.width["default"] = '400';
     var instance = (0,external_vue_namespaceObject.getCurrentInstance)();
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
+    // 拖拽相关状态
+    var currentWidth = (0,external_vue_namespaceObject.ref)(props.width);
+    // 代理线
+    var resizeProxyRef = (0,external_vue_namespaceObject.ref)(null);
+    // 遮罩
+    var resizeMaskRef = (0,external_vue_namespaceObject.ref)(null);
+    // modalWrapper
+    var modalWrapperRef = (0,external_vue_namespaceObject.ref)(null);
+    // content
+    var contentRef = (0,external_vue_namespaceObject.ref)(null);
+    // trigger
+    var triggerRef = (0,external_vue_namespaceObject.ref)(null);
+    // state
+    var state = (0,external_vue_namespaceObject.ref)({});
     var handleClose = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee() {
         var shouldClose;
@@ -634,10 +653,115 @@ sliderProps.width["default"] = '400';
     }();
     var handleShown = function handleShown() {
       emit('shown');
+      // 当侧边栏显示后，获取 modalWrapper 的引用
+      if (props.resizable && contentRef.value) {
+        (0,external_vue_namespaceObject.nextTick)(function () {
+          var _contentRef$value;
+          // 从当前实例的 content 元素向上查找 modal-wrapper，避免多个实例冲突
+          var element = (_contentRef$value = contentRef.value) === null || _contentRef$value === void 0 ? void 0 : _contentRef$value.parentElement;
+          while (element) {
+            if (element.classList.contains(resolveClassName('modal-wrapper'))) {
+              modalWrapperRef.value = element;
+              break;
+            }
+            element = element.parentElement;
+          }
+        });
+      }
     };
     var handleHidden = function handleHidden() {
       emit('hidden');
+      // 清理引用
+      if (props.resizable) {
+        modalWrapperRef.value = null;
+      }
     };
+    // 获取实际宽度值（限制在 min 和 max 之间）
+    var getRealValue = function getRealValue(current) {
+      var screenWidth = window.innerWidth;
+      var maxAllowed = Math.min(props.maxWidth, screenWidth - 100); // 至少留100px空间
+      return Math.min(maxAllowed, Math.max(props.minWidth, current));
+    };
+    // 更新 resizeProxy 的样式
+    var updateResizeProxyStyle = function updateResizeProxyStyle(width) {
+      if (!resizeProxyRef.value) return;
+      resizeProxyRef.value.style.visibility = 'visible';
+      if (props.direction === 'left') {
+        resizeProxyRef.value.style.inset = "0 auto 0 ".concat(width, "px");
+      } else {
+        resizeProxyRef.value.style.inset = "0 ".concat(width, "px 0 auto");
+      }
+    };
+    // 更新遮罩的样式
+    var updateResizeMaskStyle = function updateResizeMaskStyle(show) {
+      if (!resizeMaskRef.value) return;
+      resizeMaskRef.value.style.display = show ? 'block' : 'none';
+      resizeMaskRef.value.style.cursor = 'col-resize';
+    };
+    // mousedown 事件处理
+    var handleMousedown = function handleMousedown(event) {
+      var _modalWrapperRef$valu;
+      var mouseEvent = event;
+      if (!props.resizable) return;
+      emit('before-resize', mouseEvent);
+      var rect = (_modalWrapperRef$valu = modalWrapperRef.value) === null || _modalWrapperRef$valu === void 0 ? void 0 : _modalWrapperRef$valu.getBoundingClientRect();
+      if (!rect) return;
+      // 拖拽开始时，将 currentWidth 设置为实际像素宽度作为基准
+      currentWidth.value = rect.width;
+      state.value = Object.freeze({
+        mouse: {
+          clientX: mouseEvent.clientX
+        },
+        sidebar: {
+          width: rect.width
+        }
+      });
+      updateResizeMaskStyle(true);
+      // 非 immediate 模式下显示代理线
+      if (!props.immediate) {
+        updateResizeProxyStyle(rect.width);
+      }
+      var finalWidth = rect.width;
+      var handleMouseMove = function handleMouseMove(event) {
+        var delta;
+        if (props.direction === 'left') {
+          delta = event.clientX - state.value.mouse.clientX;
+        } else {
+          delta = state.value.mouse.clientX - event.clientX;
+        }
+        var newWidth = state.value.sidebar.width + delta;
+        finalWidth = getRealValue(newWidth);
+        // immediate 模式：直接更新宽度
+        if (props.immediate) {
+          currentWidth.value = finalWidth;
+        } else {
+          // 非 immediate 模式：更新代理线位置
+          updateResizeProxyStyle(finalWidth);
+        }
+        emit('resizing', finalWidth);
+      };
+      var handleMouseUp = function handleMouseUp() {
+        if (resizeProxyRef.value) {
+          resizeProxyRef.value.style.visibility = 'hidden';
+        }
+        updateResizeMaskStyle(false);
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        // 只在非 immediate 模式下才需要最后更新宽度
+        if (!props.immediate) {
+          currentWidth.value = finalWidth;
+        }
+        emit('after-resize', finalWidth);
+      };
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    };
+    // 监听 width prop 变化，保持用户设置的原值
+    (0,external_vue_namespaceObject.watch)(function () {
+      return props.width;
+    }, function (newWidth) {
+      currentWidth.value = newWidth;
+    });
     return function () {
       var modelSlot = {
         header: function header() {
@@ -646,7 +770,9 @@ sliderProps.width["default"] = '400';
             "class": "".concat(resolveClassName('sideslider-header'))
           }, [(0,external_vue_namespaceObject.createVNode)("div", {
             "class": "".concat(resolveClassName('sideslider-close')),
-            "onClick": handleClose
+            "onClick": function onClick() {
+              return void handleClose();
+            }
           }, [props.direction === 'left' ? (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleLeft, null, null) : (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleRight, null, null)]), (0,external_vue_namespaceObject.createVNode)("div", {
             "class": "".concat(resolveClassName('sideslider-title'))
           }, [(_slots$header = (_slots$header2 = slots.header) === null || _slots$header2 === void 0 ? void 0 : _slots$header2.call(slots)) !== null && _slots$header !== void 0 ? _slots$header : props.title])])]);
@@ -654,8 +780,17 @@ sliderProps.width["default"] = '400';
         "default": function _default() {
           var _slots$default;
           return (0,external_vue_namespaceObject.createVNode)("div", {
+            "ref": contentRef,
             "class": "".concat(resolveClassName('sideslider-content'))
-          }, [(_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
+          }, [(_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots), props.resizable && (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)("i", {
+            "ref": triggerRef,
+            "style": "width: ".concat(props.triggerWidth, "px;"),
+            "class": "".concat(resolveClassName('sideslider-resize-trigger')),
+            "onMousedown": (0,external_vue_namespaceObject.withModifiers)(handleMousedown, ['left'])
+          }, null), (0,external_vue_namespaceObject.createVNode)("i", {
+            "ref": resizeProxyRef,
+            "class": ["".concat(resolveClassName('sideslider-resize-proxy')), props.direction]
+          }, null)])]);
         }
       };
       if (slots.footer) {
@@ -671,9 +806,9 @@ sliderProps.width["default"] = '400';
       if (instance.vnode.scopeId) {
         inheritAttrs[instance.vnode.scopeId] = '';
       }
-      return (0,external_vue_namespaceObject.createVNode)(modal_namespaceObject["default"], (0,external_vue_namespaceObject.mergeProps)(inheritAttrs, {
-        "width": props.width,
-        "class": _defineProperty(_defineProperty({}, resolveClassName('sideslider'), true), "is-position-".concat(props.direction), props.direction),
+      return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(modal_namespaceObject["default"], (0,external_vue_namespaceObject.mergeProps)(inheritAttrs, {
+        "width": currentWidth.value,
+        "class": _defineProperty(_defineProperty(_defineProperty({}, resolveClassName('sideslider'), true), "is-position-".concat(props.direction), props.direction), "".concat(resolveClassName('sideslider-resizable')), props.resizable),
         "extCls": props.extCls,
         "animateType": props.direction,
         "backgroundColor": props.backgroundColor,
@@ -692,7 +827,10 @@ sliderProps.width["default"] = '400';
         "default": function _default() {
           return [modelSlot];
         }
-      });
+      }), props.resizable && (0,external_vue_namespaceObject.createVNode)("div", {
+        "ref": resizeMaskRef,
+        "class": "".concat(resolveClassName('sideslider-resize-mask'))
+      }, null)]);
     };
   }
 }));
@@ -701,7 +839,7 @@ sliderProps.width["default"] = '400';
  * 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.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
  *

package/lib/sideslider/sideslider.css

@@ -1,12 +1,32 @@
 .bk-sideslider.is-position-right .bk-modal-wrapper {
   right: 0;
 }
+.bk-sideslider.is-position-right.bk-sideslider-resizable .bk-sideslider-resize-trigger {
+  left: 0;
+  cursor: col-resize;
+}
+.bk-sideslider.is-position-right.bk-sideslider-resizable .bk-sideslider-resize-trigger:after {
+  left: 1px;
+}
+.bk-sideslider.is-position-right.bk-sideslider-resizable .bk-sideslider-resize-proxy.right {
+  border-left: 2px solid #3a84ff;
+}
 .bk-sideslider.is-position-left .bk-modal-wrapper {
   left: 0;
 }
 .bk-sideslider.is-position-left .bk-sideslider-header {
   flex-direction: row-reverse;
 }
+.bk-sideslider.is-position-left.bk-sideslider-resizable .bk-sideslider-resize-trigger {
+  right: 0;
+  cursor: col-resize;
+}
+.bk-sideslider.is-position-left.bk-sideslider-resizable .bk-sideslider-resize-trigger:after {
+  right: 1px;
+}
+.bk-sideslider.is-position-left.bk-sideslider-resizable .bk-sideslider-resize-proxy.left {
+  border-left: 2px solid #3a84ff;
+}
 .bk-sideslider .bk-modal-wrapper {
   position: fixed;
   top: 0;
@@ -42,6 +62,9 @@
   font-size: 16px;
   color: #313238;
 }
+.bk-sideslider-content {
+  position: relative;
+}
 .bk-sideslider-footer {
   display: flex;
   align-items: center;
@@ -50,3 +73,42 @@
   padding-left: 24px;
   margin-top: 24px;
 }
+.bk-sideslider-resize-trigger {
+  position: absolute;
+  top: 0;
+  z-index: 3;
+  width: 5px;
+  height: calc(100vh - 52px);
+  background-color: transparent;
+}
+.bk-sideslider-resize-trigger:after {
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 2px;
+  color: #c4c6cc;
+  content: '';
+  background: currentColor;
+  box-shadow: 0 4px 0 0 currentColor, 0 8px 0 0 currentColor, 0 -4px 0 0 currentColor, 0 -8px 0 0 currentColor;
+  transform: translateY(-50%);
+}
+.bk-sideslider-resize-trigger:hover:after {
+  color: #3a84ff;
+}
+.bk-sideslider-resize-proxy {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 9999;
+  pointer-events: none;
+  visibility: hidden;
+}
+.bk-sideslider-resize-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9998;
+  display: none;
+}