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

package/lib/modal/index.js

@@ -102,7 +102,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.
  *
@@ -129,6 +129,7 @@ const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTER
 var useContentResize = function useContentResize(root, resizeTarget, props) {
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
+  var slots = (0,external_vue_namespaceObject.useSlots)();
   var isContentScroll = (0,external_vue_namespaceObject.ref)(false);
   var contentStyles = (0,external_vue_namespaceObject.ref)({});
   var calcContentScroll = (0,throttle_namespaceObject["default"])(function () {
@@ -147,7 +148,7 @@ var useContentResize = function useContentResize(root, resizeTarget, props) {
     isContentScroll.value = windowInnerHeight < headerHeight + contentHeight + footerHeight + footerMarginTop;
     if (isContentScroll.value || props.fullscreen) {
       contentStyles.value = {
-        height: "".concat(windowInnerHeight - headerHeight - 48, "px"),
+        height: "".concat(windowInnerHeight - headerHeight - (slots.footer ? 48 : 0), "px"),
         overflow: 'auto',
         'scrollbar-gutter': 'stable'
       };
@@ -198,7 +199,7 @@ var useContentResize = function useContentResize(root, resizeTarget, props) {
  * 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.
  *
@@ -271,7 +272,7 @@ const external_vue_types_namespaceObject = external_vue_types_x({ ["func"]: () =
  * 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.
  *
@@ -334,7 +335,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.
  *
@@ -387,6 +388,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
         top: props.top
       };
     });
+    (0,external_vue_namespaceObject.watch)(function () {
+      return [props.zIndex];
+    }, function () {
+      if (/\d+/.test("".concat(props.zIndex))) {
+        zIndex.value = props.zIndex;
+      }
+    });
     (0,external_vue_namespaceObject.watch)(function () {
       return props.isShow;
     }, function () {
@@ -410,8 +418,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       ctx.emit('close');
     };
     var handleClickOutSide = function handleClickOutSide(e) {
-      e.stopImmediatePropagation();
-      e.stopPropagation();
+      var target = e.target;
+      // 判断点击的是否是当前 Dialog 的 mask（而不是子 Dialog 的 mask）
+      if (target !== maskRef.value) {
+        return; // 不是当前 Dialog 的 mask，不处理
+      }
       e.preventDefault();
       if (props.quickClose) {
         ctx.emit('quick-close');
@@ -517,7 +528,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.
  *

package/lib/modal/modal.css

@@ -6,6 +6,16 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.bk-infobox .bk-modal-wrapper .bk-modal-body {
+  min-height: 176px;
+}
+.bk-infobox .bk-modal-wrapper .bk-modal-body .bk-modal-content {
+  color: #63656e;
+  font-size: 14px;
+}
+.bk-infobox.no-content-infobox .bk-modal-content {
+  display: none;
+}
 .bk-infobox-header {
   padding-top: 24px;
 }
@@ -40,10 +50,19 @@
   color: #313238;
 }
 .bk-infobox-content {
-  padding-right: 24px;
   padding-left: 24px;
+  padding-right: 24px;
   margin-top: 16px;
 }
+.bk-infobox-content.set-bg-color {
+  background-color: #f5f6fa;
+  margin-left: 32px;
+  margin-right: 32px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
 .bk-infobox-footer {
   display: flex;
   padding-right: 24px;

package/lib/modal/modal.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-infobox {
   font-size: 12px;
@@ -136,6 +137,16 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.bk-infobox .bk-modal-wrapper .bk-modal-body {
+  min-height: 176px;
+}
+.bk-infobox .bk-modal-wrapper .bk-modal-body .bk-modal-content {
+  color: #63656e;
+  font-size: 14px;
+}
+.bk-infobox.no-content-infobox .bk-modal-content {
+  display: none;
+}
 .bk-infobox-header {
   padding-top: 24px;
 }
@@ -170,10 +181,19 @@
   color: #313238;
 }
 .bk-infobox-content {
-  padding-right: 24px;
   padding-left: 24px;
+  padding-right: 24px;
   margin-top: 16px;
 }
+.bk-infobox-content.set-bg-color {
+  background-color: #f5f6fa;
+  margin-left: 32px;
+  margin-right: 32px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
 .bk-infobox-footer {
   display: flex;
   padding-right: 24px;

package/lib/navigation/index.js

@@ -55,7 +55,7 @@ const icon_namespaceObject = icon_x({ ["CollapseLeft"]: () => __WEBPACK_EXTERNAL
  * 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.
  *
@@ -119,7 +119,7 @@ var TitleProps = {
  * 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.
  *
@@ -340,7 +340,7 @@ var NavigationProps = {
  * 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/navigation/navigation.css

@@ -6,21 +6,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;
@@ -33,8 +33,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;
@@ -42,47 +42,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: #182132;
   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;
@@ -90,35 +90,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 {
@@ -130,31 +130,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;
@@ -169,11 +169,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/navigation/navigation.less

@@ -8,21 +8,21 @@
 
   &-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, .05);
-    align-items: center;
-    justify-content: flex-start;
-    flex: 0 0 260px;
 
     .title-icon {
       display: flex;
-      font-size: 28px;
-      color: #768197;
       flex: 0 0 28px;
       align-items: center;
       justify-content: center;
+      font-size: 28px;
+      color: #768197;
     }
 
     .title-desc {
@@ -38,8 +38,8 @@
   }
 
   &-header {
-    flex: 0 0 52px;
     display: flex;
+    flex: 0 0 52px;
     align-items: center;
     padding-right: 24px;
     overflow: hidden;
@@ -47,30 +47,30 @@
 
     .header-right {
       display: flex;
-      height: 100%;
       flex: 1;
       align-items: center;
+      height: 100%;
     }
   }
 
   &-wrapper {
     position: relative;
     display: flex;
-    flex-direction: row;
     flex: 1;
+    flex-direction: row;
     min-height: 0;
 
     .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(.4, 0, .2, 1) .3s;
-      flex: 0 1 auto;
-      flex-direction: column;
 
       &:hover {
         cursor: pointer;
@@ -78,19 +78,19 @@
 
       .nav-slider {
         display: flex;
+        flex: 1;
+        flex-direction: column;
         width: 60px;
         height: 100%;
         background-color: @nav-bg-color;
         transition: width cubic-bezier(.4, 0, .2, 1) .3s;
-        flex: 1;
-        flex-direction: column;
 
         &-list {
+          flex: 1 1 auto;
           max-height: calc(100vh - 100px);
           padding: 12px 0 4px 0;
           margin: 0;
           overflow: auto;
-          flex: 1 1 auto;
 
           &::-webkit-scrollbar {
             display: none;
@@ -98,38 +98,38 @@
             height: 5px;
 
             &:hover {
-              transform: none;
               transition: opacity 340ms ease-out;
+              transform: none;
             }
           }
         }
 
         &-footer {
           display: flex;
-          padding-left: 14px;
           flex: 0 0 56px;
           align-items: center;
           justify-content: flex-start;
+          padding-left: 14px;
 
           .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;
 
             &-svg {
               display: flex;
+              align-items: center;
+              justify-content: center;
               width: 16px;
               height: 16px;
               font-size: 16px;
               transition: transform cubic-bezier(.4, 0, .2, 1) .3s;
-              align-items: center;
-              justify-content: center;
               transform-origin: center center;
             }
 
@@ -144,9 +144,9 @@
             }
 
             &:hover {
-              color: #3a3c42;
+              color: #B0BDD5;
               cursor: pointer;
-              background: linear-gradient(270deg, rgba(222, 224, 234, 1) 0%, rgba(234, 236, 242, 1) 100%);
+              background: #424A5F;
             }
           }
         }
@@ -156,24 +156,24 @@
     .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; 
 
       .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, .06);
-        flex-basis: 60px;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-end;
 
         &-title {
           height: 21px;
@@ -191,11 +191,11 @@
       }
 
       .container-content {
+        flex: 1;
         max-height: calc(100vh - 60px);
         padding: 20px 24px 0;
         overflow: auto;
         background: #f5f7fa;
-        flex: 1;
       }
 
       .container-footer {