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

package/lib/navigation/navigation.variable.css

@@ -98,7 +98,7 @@
   --submenu-bg-color: #151d2c;
   --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
   --menu-color: #96a2b9;
-  --menu-group-color: var(--default-color);
+  --menu-group-color: #6E788B;
   --menu-width: 260px;
   --menu-collapse-width: 60px;
   --menu-active-color: white;
@@ -127,6 +127,7 @@
   --search-select-menu-border-color: var(--disable-color);
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
+  --sub-title-bg-color: #f5f6fa;
 }
 .bk-navigation {
   display: flex;
@@ -136,21 +137,21 @@
 }
 .bk-navigation-title {
   display: flex;
+  flex: 0 0 260px;
+  align-items: center;
+  justify-content: flex-start;
   height: 100%;
   padding: 0 16px;
   overflow: hidden;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  align-items: center;
-  justify-content: flex-start;
-  flex: 0 0 260px;
 }
 .bk-navigation-title .title-icon {
   display: flex;
-  font-size: 28px;
-  color: #768197;
   flex: 0 0 28px;
   align-items: center;
   justify-content: center;
+  font-size: 28px;
+  color: #768197;
 }
 .bk-navigation-title .title-desc {
   display: inline-block;
@@ -163,8 +164,8 @@
   white-space: nowrap;
 }
 .bk-navigation-header {
-  flex: 0 0 52px;
   display: flex;
+  flex: 0 0 52px;
   align-items: center;
   padding-right: 24px;
   overflow: hidden;
@@ -172,47 +173,47 @@
 }
 .bk-navigation-header .header-right {
   display: flex;
-  height: 100%;
   flex: 1;
   align-items: center;
+  height: 100%;
 }
 .bk-navigation-wrapper {
   position: relative;
   display: flex;
-  flex-direction: row;
   flex: 1;
+  flex-direction: row;
   min-height: 0;
 }
 .bk-navigation-wrapper .navigation-nav {
   position: relative;
   z-index: 101;
   display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
   width: 60px;
   min-width: 0;
   min-height: 0;
   overflow: visible;
   transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
-  flex: 0 1 auto;
-  flex-direction: column;
 }
 .bk-navigation-wrapper .navigation-nav:hover {
   cursor: pointer;
 }
 .bk-navigation-wrapper .navigation-nav .nav-slider {
   display: flex;
+  flex: 1;
+  flex-direction: column;
   width: 60px;
   height: 100%;
   background-color: var(--nav-bg-color);
   transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
-  flex: 1;
-  flex-direction: column;
 }
 .bk-navigation-wrapper .navigation-nav .nav-slider-list {
+  flex: 1 1 auto;
   max-height: calc(100vh - 100px);
   padding: 12px 0 4px 0;
   margin: 0;
   overflow: auto;
-  flex: 1 1 auto;
 }
 .bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar {
   display: none;
@@ -220,35 +221,35 @@
   height: 5px;
 }
 .bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar:hover {
-  transform: none;
   transition: opacity 340ms ease-out;
+  transform: none;
 }
 .bk-navigation-wrapper .navigation-nav .nav-slider-footer {
   display: flex;
-  padding-left: 14px;
   flex: 0 0 56px;
   align-items: center;
   justify-content: flex-start;
+  padding-left: 14px;
 }
 .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
   font-size: 14px;
   color: #63656e;
   border-radius: 100%;
-  align-items: center;
-  justify-content: center;
   transform-origin: center center;
 }
 .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon-svg {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 16px;
   height: 16px;
   font-size: 16px;
   transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
-  align-items: center;
-  justify-content: center;
   transform-origin: center center;
 }
 .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left {
@@ -260,31 +261,31 @@
   background: linear-gradient(270deg, #253047 0%, #263247 100%);
 }
 .bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon:hover {
-  color: #3a3c42;
+  color: #B0BDD5;
   cursor: pointer;
-  background: linear-gradient(270deg, #dee0ea 0%, #eaecf2 100%);
+  background: #424A5F;
 }
 .bk-navigation-wrapper .navigation-container {
   position: relative;
   display: flex;
-  max-width: calc(100vw - 60px);
-  min-width: 0;
-  min-height: 0;
   flex: 1 1 1px;
   flex-direction: column;
+  min-width: 0;
+  max-width: calc(100vw - 60px);
+  min-height: 0;
 }
 .bk-navigation-wrapper .navigation-container .container-header {
   display: flex;
+  flex-basis: 60px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
   width: 100%;
   height: 60px;
   padding: 0 24px;
   background: #fff;
   border-bottom: 1px solid #dcdee5;
   box-shadow: 0px 3px 4px 0px rgba(64, 112, 203, 0.06);
-  flex-basis: 60px;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
 }
 .bk-navigation-wrapper .navigation-container .container-header-title {
   height: 21px;
@@ -299,11 +300,11 @@
   justify-content: flex-end;
 }
 .bk-navigation-wrapper .navigation-container .container-content {
+  flex: 1;
   max-height: calc(100vh - 60px);
   padding: 20px 24px 0;
   overflow: auto;
   background: #f5f7fa;
-  flex: 1;
 }
 .bk-navigation-wrapper .navigation-container .container-footer {
   display: flex;

package/lib/notify/index.js

@@ -82,7 +82,7 @@ function _defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const external_vue_namespaceObject = x({ ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["onUnmounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUnmounted, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["render"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.render, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
+const external_vue_namespaceObject = x({ ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["onUnmounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUnmounted, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["render"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.render, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
 ;// CONCATENATED MODULE: external "../shared"
 var shared_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var shared_y = x => () => x
@@ -95,7 +95,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.
  *
@@ -125,6 +125,23 @@ var instances = {
   'bottom-right': []
 };
 var seed = 1;
+// 更新指定位置的所有 Message 实例的位置
+var updateModalPosition = function updateModalPosition(position, spacing) {
+  var initialOffset = 30;
+  var offsetTop = initialOffset;
+  instances[position].forEach(function (vm) {
+    if (vm.el) {
+      // 获取当前实例的实际高度（包括详情展开后的高度）
+      var currentHeight = vm.el.offsetHeight || 0;
+      // 直接更新 DOM 元素的 top 样式，确保位置立即生效
+      vm.el.style.top = "".concat(offsetTop, "px");
+      // 同时更新 props，保持数据一致性
+      vm.props.offsetY = offsetTop;
+      // 然后累加当前实例的高度和间距，用于计算下一个实例的位置
+      offsetTop += currentHeight + spacing;
+    }
+  });
+};
 var Message = function Message(constructor, options) {
   var opts = options;
   var position = opts.position || 'top-right';
@@ -147,17 +164,11 @@ var Message = function Message(constructor, options) {
   opts = _objectSpread(_objectSpread({}, opts), {}, {
     offsetX: horizontalOffset,
     offsetY: verticalOffset,
-    id: id
+    id: id,
+    spacing: spacing
   });
   var container = document.createElement('div');
   var vm = (0,external_vue_namespaceObject.createVNode)(constructor, opts);
-  // const updateModalPosition = () => {
-  //   let offsetTop = 30;
-  //   instances[position].forEach((vm) => {
-  //     offsetTop += (vm.el.offsetHeight || 0) + spacing;
-  //     vm.props.offsetY = offsetTop;
-  //   });
-  // };
   vm.props.onDestroy = function (id) {
     use_message_close(id, position, spacing, userOnClose);
     (0,external_vue_namespaceObject.render)(null, container);
@@ -166,13 +177,19 @@ var Message = function Message(constructor, options) {
     instances[position].forEach(function (item) {
       if (item.props.id !== id) {
         var _item$component;
-        (_item$component = item.component) === null || _item$component === void 0 || (_item$component = _item$component.exposed) === null || _item$component === void 0 || _item$component.setDetailsShow(null, false);
+        // 关闭其他实例的详情时，传入 shouldEmit = false 避免触发无限循环
+        (_item$component = item.component) === null || _item$component === void 0 || (_item$component = _item$component.exposed) === null || _item$component === void 0 || _item$component.setDetailsShow(null, false, false);
       }
     });
-    // setTimeout(() => {
-    //   console.log('updateModalPosition');
-    //   updateModalPosition();
-    // });
+    // 等待 DOM 更新完成后再更新位置
+    // 详情展开/收起时，DOM 高度会变化，需要等待渲染完成
+    // 由于事件已经在详情内容渲染完成后才 emit，这里只需要等待 Vue 响应式更新和浏览器布局完成
+    var currentSpacing = spacing || 10;
+    (0,external_vue_namespaceObject.nextTick)(function () {
+      requestAnimationFrame(function () {
+        updateModalPosition(position, currentSpacing);
+      });
+    });
   };
   (0,external_vue_namespaceObject.render)(vm, container);
   instances[position].push(vm);
@@ -186,21 +203,23 @@ var Message = function Message(constructor, options) {
 };
 function use_message_close(id, position, spacing, userOnClose) {
   userOnClose === null || userOnClose === void 0 || userOnClose();
-  var verticalProperty = position.startsWith('top') ? 'top' : 'bottom';
   var instanceIndex = -1;
   instances[position].forEach(function (item, index) {
     if (item.props.id === id) {
       instanceIndex = index;
     }
   });
-  var vm = instances[position][instanceIndex];
-  var removeHeight = vm.el.offsetHeight;
-  var len = instances[position].length;
-  for (var i = instanceIndex; i < len; i++) {
-    var pos = parseInt(instances[position][i].el.style[verticalProperty], 10) - removeHeight - spacing;
-    instances[position][i].component.props.offsetY = pos;
+  if (instanceIndex === -1) {
+    return;
   }
+  // 移除实例
   instances[position].splice(instanceIndex, 1);
+  // 重新计算所有剩余实例的位置
+  // 使用传入的 spacing，如果没有则从第一个实例获取，或使用默认值 10
+  var currentSpacing = spacing || (instances[position].length > 0 ? instances[position][0].props.spacing : 10) || 10;
+  (0,external_vue_namespaceObject.nextTick)(function () {
+    updateModalPosition(position, currentSpacing);
+  });
 }
 /* harmony default export */ const use_message = (Message);
 ;// CONCATENATED MODULE: external "vue-types"
@@ -222,7 +241,7 @@ const icon_namespaceObject = icon_x({ ["Close"]: () => __WEBPACK_EXTERNAL_MODULE
  * 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.
  *
@@ -366,7 +385,7 @@ var notifyProps = {
  * 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/notify/notify.variable.css

@@ -98,7 +98,7 @@
   --submenu-bg-color: #151d2c;
   --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
   --menu-color: #96a2b9;
-  --menu-group-color: var(--default-color);
+  --menu-group-color: #6E788B;
   --menu-width: 260px;
   --menu-collapse-width: 60px;
   --menu-active-color: white;
@@ -127,6 +127,7 @@
   --search-select-menu-border-color: var(--disable-color);
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
+  --sub-title-bg-color: #f5f6fa;
 }
 .bk-notify {
   position: fixed;

package/lib/overflow-title/components/overflow-title.d.ts

@@ -95,7 +95,9 @@ declare const _default: import("vue").DefineComponent<{
                 alignmentAxis?: number;
             });
         };
-        boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+        boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+            default: string | (() => HTMLElement);
+        };
         zIndex: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {
@@ -265,7 +267,9 @@ declare const _default: import("vue").DefineComponent<{
                 alignmentAxis?: number;
             });
         };
-        boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+        boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+            default: string | (() => HTMLElement);
+        };
         zIndex: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {

package/lib/overflow-title/index.d.ts

@@ -99,7 +99,9 @@ declare const BkOverflowTitle: {
                     alignmentAxis?: number;
                 });
             };
-            boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+            boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+                default: string | (() => HTMLElement);
+            };
             zIndex: import("vue-types").VueTypeValidableDef<number> & {
                 default: number;
             } & {
@@ -269,7 +271,9 @@ declare const BkOverflowTitle: {
                     alignmentAxis?: number;
                 });
             };
-            boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+            boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+                default: string | (() => HTMLElement);
+            };
             zIndex: import("vue-types").VueTypeValidableDef<number> & {
                 default: number;
             } & {
@@ -444,7 +448,9 @@ declare const BkOverflowTitle: {
                     alignmentAxis?: number;
                 });
             };
-            boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+            boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+                default: string | (() => HTMLElement);
+            };
             zIndex: import("vue-types").VueTypeValidableDef<number> & {
                 default: number;
             } & {
@@ -624,7 +630,9 @@ declare const BkOverflowTitle: {
                 alignmentAxis?: number;
             });
         };
-        boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+        boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+            default: string | (() => HTMLElement);
+        };
         zIndex: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {

package/lib/overflow-title/index.js

@@ -68,7 +68,7 @@ const external_vue_types_namespaceObject = external_vue_types_x({ ["string"]: ()
  * 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.
  *
@@ -126,7 +126,7 @@ function placementType() {
  * 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.
  *
@@ -308,7 +308,7 @@ var overflowTitle = {
  * 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/overflow-title/props.d.ts

@@ -117,7 +117,9 @@ declare const _default: {
                 alignmentAxis?: number;
             });
         };
-        boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+        boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+            default: string | (() => HTMLElement);
+        };
         zIndex: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {

package/lib/pagination/index.js

@@ -171,7 +171,7 @@ const select_less_namespaceObject = select_less_x({  });
  * 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.
  *
@@ -202,7 +202,8 @@ function _isSlot(s) {
 }
 /* harmony default export */ const use_limit = (function (t) {
   var _getCurrentInstance = (0,external_vue_namespaceObject.getCurrentInstance)(),
-    proxy = _getCurrentInstance.proxy;
+    proxy = _getCurrentInstance.proxy,
+    slots = _getCurrentInstance.slots;
   var localLimit = (0,external_vue_namespaceObject.ref)(proxy.limit);
   /**
    * @desc 同步props.limit的变化
@@ -236,6 +237,7 @@ function _isSlot(s) {
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
   var render = function render(_ref) {
+    var _slots$limitAppend;
     var _slot;
     var isFirst = _ref.isFirst,
       isLast = _ref.isLast;
@@ -263,7 +265,7 @@ function _isSlot(s) {
       "default": function _default() {
         return [_slot];
       }
-    }), (0,external_vue_namespaceObject.createVNode)("div", null, [t.value.strip])]);
+    }), (0,external_vue_namespaceObject.createVNode)("div", null, [t.value.strip]), (_slots$limitAppend = slots.limitAppend) === null || _slots$limitAppend === void 0 ? void 0 : _slots$limitAppend.call(slots)]);
   };
   return {
     limit: localLimit,
@@ -281,7 +283,7 @@ const icon_namespaceObject = icon_x({ ["AngleLeft"]: () => __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.
  *
@@ -308,7 +310,8 @@ const icon_namespaceObject = icon_x({ ["AngleLeft"]: () => __WEBPACK_EXTERNAL_MO
 var PAGE_ITEMS_NUM = 5;
 /* harmony default export */ const use_list = (function () {
   var _getCurrentInstance = (0,external_vue_namespaceObject.getCurrentInstance)(),
-    proxy = _getCurrentInstance.proxy;
+    proxy = _getCurrentInstance.proxy,
+    slots = _getCurrentInstance.slots;
   var localCurrent = (0,external_vue_namespaceObject.ref)(1);
   var isPagePreDisabled = (0,external_vue_namespaceObject.computed)(function () {
     return localCurrent.value === 1;
@@ -429,6 +432,7 @@ var PAGE_ITEMS_NUM = 5;
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
   var render = function render(_ref) {
+    var _slots$listAppend;
     var isFirst = _ref.isFirst,
       isLast = _ref.isLast;
     return (0,external_vue_namespaceObject.createVNode)("div", {
@@ -467,7 +471,7 @@ var PAGE_ITEMS_NUM = 5;
     }, [proxy.totalPageNum]), (0,external_vue_namespaceObject.createVNode)("div", {
       "class": _defineProperty(_defineProperty({}, "".concat(resolveClassName('pagination-list-pre')), true), 'is-disabled', isPageNextDisabled.value),
       "onClick": handleNextPage
-    }, [proxy.nextText || (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleRight, null, null)])]);
+    }, [proxy.nextText || (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleRight, null, null)]), (_slots$listAppend = slots.listAppend) === null || _slots$listAppend === void 0 ? void 0 : _slots$listAppend.call(slots)]);
   };
   return {
     current: localCurrent,
@@ -489,7 +493,7 @@ const popover_less_namespaceObject = popover_less_x({  });
  * 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.
  *
@@ -517,7 +521,8 @@ const popover_less_namespaceObject = popover_less_x({  });
 
 /* harmony default export */ const use_small_list = (function () {
   var _getCurrentInstance = (0,external_vue_namespaceObject.getCurrentInstance)(),
-    proxy = _getCurrentInstance.proxy;
+    proxy = _getCurrentInstance.proxy,
+    slots = _getCurrentInstance.slots;
   var inputRef = (0,external_vue_namespaceObject.ref)(null);
   var isFocused = (0,external_vue_namespaceObject.ref)(false);
   var localCurrent = (0,external_vue_namespaceObject.ref)(1);
@@ -655,6 +660,7 @@ const popover_less_namespaceObject = popover_less_x({  });
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
   var render = function render() {
+    var _slots$smallListAppen;
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "class": "".concat(resolveClassName('pagination-small-list'))
     }, [(0,external_vue_namespaceObject.createVNode)("div", {
@@ -712,7 +718,7 @@ const popover_less_namespaceObject = popover_less_x({  });
     }), (0,external_vue_namespaceObject.createVNode)("div", {
       "class": _defineProperty(_defineProperty({}, "".concat(resolveClassName('pagination-btn-next')), true), 'is-disabled', isPageNextDisabled.value),
       "onClick": handleNextPage
-    }, [(0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleRight, null, null)])]);
+    }, [(0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleRight, null, null)]), (_slots$smallListAppen = slots.smallListAppend) === null || _slots$smallListAppen === void 0 ? void 0 : _slots$smallListAppen.call(slots)]);
   };
   return {
     current: localCurrent,
@@ -726,7 +732,7 @@ const popover_less_namespaceObject = popover_less_x({  });
  * 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.
  *
@@ -751,10 +757,12 @@ const popover_less_namespaceObject = popover_less_x({  });
 
 /* harmony default export */ const use_total = (function (t) {
   return function (_ref) {
+    var _slots$totalAppend;
     var isFirst = _ref.isFirst,
       isLast = _ref.isLast;
     var _getCurrentInstance = (0,external_vue_namespaceObject.getCurrentInstance)(),
-      props = _getCurrentInstance.props;
+      props = _getCurrentInstance.props,
+      slots = _getCurrentInstance.slots;
     if (!props.showTotalCount) {
       return null;
     }
@@ -766,7 +774,7 @@ const popover_less_namespaceObject = popover_less_x({  });
       disabled: props.disabled
     }), [t.value.total, (0,external_vue_namespaceObject.createVNode)("div", {
       "class": "".concat(resolveClassName('pagination-total-num'))
-    }, [props.count]), t.value.strip]);
+    }, [props.count]), t.value.strip, (_slots$totalAppend = slots.totalAppend) === null || _slots$totalAppend === void 0 ? void 0 : _slots$totalAppend.call(slots)]);
   };
 });
 ;// CONCATENATED MODULE: ../../packages/pagination/src/pagination.tsx
@@ -777,7 +785,7 @@ const popover_less_namespaceObject = popover_less_x({  });
  * 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.
  *
@@ -910,7 +918,7 @@ var paginationProps = {
  * 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/pagination/pagination.css

@@ -36,6 +36,7 @@
 }
 .bk-pagination-list {
   display: flex;
+  align-items: center;
   margin-right: 8px;
 }
 .bk-pagination-list-pre-batch,

package/lib/pagination/pagination.less

@@ -49,6 +49,7 @@
 
 .@{bk-prefix}-pagination-list {
   display: flex;
+  align-items: center;
   margin-right: 8px;
 }
 

package/lib/pagination/pagination.variable.css

@@ -98,7 +98,7 @@
   --submenu-bg-color: #151d2c;
   --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
   --menu-color: #96a2b9;
-  --menu-group-color: var(--default-color);
+  --menu-group-color: #6E788B;
   --menu-width: 260px;
   --menu-collapse-width: 60px;
   --menu-active-color: white;
@@ -127,6 +127,7 @@
   --search-select-menu-border-color: var(--disable-color);
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
+  --sub-title-bg-color: #f5f6fa;
 }
 .bk-pagination {
   display: flex;
@@ -166,6 +167,7 @@
 }
 .bk-pagination-list {
   display: flex;
+  align-items: center;
   margin-right: 8px;
 }
 .bk-pagination-list-pre-batch,