bkui-vue 2.0.2-beta.8 → 2.0.2-beta.80

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

@@ -33,37 +33,29 @@ __webpack_require__.d(__webpack_exports__, {
   "default": () => (/* binding */ src)
 });
 
-;// external "../shared"
-var x = (y) => {
-	var x = {}; __webpack_require__.d(x, y); return x
-} 
-var y = (x) => (() => (x))
-const shared_namespaceObject = x({ ["withInstall"]: () => (__WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall) });
-;// 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({ ["createVNode"]: () => (__WEBPACK_EXTERNAL_MODULE_vue__.createVNode), ["defineComponent"]: () => (__WEBPACK_EXTERNAL_MODULE_vue__.defineComponent), ["onBeforeUnmount"]: () => (__WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount), ["reactive"]: () => (__WEBPACK_EXTERNAL_MODULE_vue__.reactive), ["ref"]: () => (__WEBPACK_EXTERNAL_MODULE_vue__.ref) });
-;// external "../config-provider"
-var config_provider_x = (y) => {
-	var x = {}; __webpack_require__.d(x, y); return x
-} 
-var config_provider_y = (x) => (() => (x))
-const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => (__WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix) });
-;// external "../icon"
-var icon_x = (y) => {
-	var x = {}; __webpack_require__.d(x, y); return x
-} 
-var icon_y = (x) => (() => (x))
-const icon_namespaceObject = icon_x({ ["CollapseLeft"]: () => (__WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.CollapseLeft) });
-;// ../../packages/navigation/src/navigation-title.tsx
+;// CONCATENATED MODULE: external "../shared"
+var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var y = x => () => x
+const shared_namespaceObject = x({ ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
+;// CONCATENATED MODULE: external "vue"
+var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_y = x => () => x
+const external_vue_namespaceObject = external_vue_x({ ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref });
+;// CONCATENATED MODULE: external "../config-provider"
+var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var config_provider_y = x => () => x
+const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
+;// CONCATENATED MODULE: external "../icon"
+var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var icon_y = x => () => x
+const icon_namespaceObject = icon_x({ ["CollapseLeft"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.CollapseLeft });
+;// CONCATENATED MODULE: ../../packages/navigation/src/navigation-title.tsx
 
 /*
  * 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.
  *
@@ -121,13 +113,13 @@ var TitleProps = {
     };
   }
 }));
-;// ../../packages/navigation/src/navigation.tsx
+;// CONCATENATED MODULE: ../../packages/navigation/src/navigation.tsx
 
 /*
  * 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.
  *
@@ -343,12 +335,12 @@ var NavigationProps = {
     }, [(_this$$slots$footer = (_this$$slots7 = this.$slots).footer) === null || _this$$slots$footer === void 0 ? void 0 : _this$$slots$footer.call(_this$$slots7)])])])])]);
   }
 }));
-;// ../../packages/navigation/src/index.ts
+;// CONCATENATED MODULE: ../../packages/navigation/src/index.ts
 /*
  * 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 {