bkui-vue 0.0.1-beta.2 → 0.0.1-beta.22

package/dist/style.css

@@ -1,3 +1,276 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+* {
+  box-sizing: border-box;
+}
+/**
+ * HTML5 display definitions
+ * ==========================================================================
+ *
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+audio,
+canvas,
+progress,
+video {
+  /* 1 */
+  display: inline-block;
+  /* 2 */
+  vertical-align: baseline;
+}
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+[hidden],
+template {
+  display: none;
+}
+/**
+ * Links
+ * ==========================================================================
+ *
+ * Remove the gray background color from active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+a:active,
+a:hover {
+  outline: 0;
+}
+/**
+ * Text-level semantics
+ * ==========================================================================
+ *
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+/**
+ * Embedded content
+ * ==========================================================================
+ *
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+img {
+  border: 0;
+}
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+/**
+ * Grouping content
+ * ==========================================================================
+ *
+ * Address margin not present in IE 8/9 and Safari.
+ */
+figure {
+  margin: 1em 40px;
+}
+/**
+ * Address differences between Firefox and other browsers.
+ */
+hr {
+  height: 0;
+  box-sizing: content-box;
+}
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ *
+ * Forms
+ * ==========================================================================
+ *
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ *
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  /* 3 */
+  margin: 0;
+  /* 2 */
+  font: inherit;
+  /* 1 */
+  color: inherit;
+}
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+button {
+  overflow: visible;
+}
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+button,
+select {
+  text-transform: none;
+}
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type `input` and others.
+ */
+button,
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  /* 3 */
+  cursor: pointer;
+  /* 2 */
+  appearance: button;
+}
+/* Re-set default cursor for disabled elements. */
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+/* Remove inner padding and border in Firefox 4+. */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
+ */
+input {
+  line-height: normal;
+}
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+input[type='checkbox'],
+input[type='radio'] {
+  /* 2 */
+  padding: 0;
+  /* 1 */
+  box-sizing: border-box;
+}
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+::-ms-clear,
+::-ms-reveal {
+  display: none;
+}
+input[type='text']::-ms-clear {
+  display: none;
+}
+input[type='text']::-ms-reveal {
+  display: none;
+}
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+input[type='search'] {
+  /* 2 */
+  box-sizing: content-box;
+  /* 1 */
+  appearance: textfield;
+}
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  appearance: none;
+}
+/**
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  padding: 0.35em 0.625em 0.75em;
+  margin: 0 2px;
+  border: 1px solid #c0c0c0;
+}
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+legend {
+  /* 2 */
+  padding: 0;
+  /* 1 */
+  border: 0;
+}
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+textarea {
+  overflow: auto;
+}
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+optgroup {
+  font-weight: bold;
+}
 .bk-alert {
   position: relative;
   font-size: 12px;
@@ -274,8 +547,17 @@
   margin: 0 6px;
   font-weight: normal;
 }
+.bk-breadcrumb-goback {
+  margin-right: 12px;
+  color: #0082ff;
+  cursor: pointer;
+}
+.bk-breadcrumb-goback svg {
+  font-size: 26px;
+}
 .bk-breadcrumb-item-inner.is-link,
 .bk-breadcrumb-item-inner a {
+  color: #63656e;
   text-decoration: none;
 }
 .bk-breadcrumb-item-inner.is-link:hover,
@@ -284,7 +566,7 @@
   cursor: pointer;
 }
 .bk-breadcrumb-item:last-child {
-  color: #63656e;
+  color: #979ba5;
 }
 .bk-breadcrumb-item:last-child .el-breadcrumb__inner,
 .bk-breadcrumb-item:last-child .el-breadcrumb__inner a,
@@ -327,6 +609,7 @@
 .bk-button.bk-button-primary:active {
   background-color: #2c77f4;
   border-color: #2c77f4;
+  color: white;
 }
 .bk-button.bk-button-primary.is-disabled {
   background-color: #dcdee5;
@@ -367,6 +650,7 @@
 .bk-button.bk-button-warning:active {
   background-color: #eb9000;
   border-color: #eb9000;
+  color: white;
 }
 .bk-button.bk-button-warning.is-disabled {
   background-color: #dcdee5;
@@ -407,6 +691,7 @@
 .bk-button.bk-button-success:active {
   background-color: #1ab943;
   border-color: #1ab943;
+  color: white;
 }
 .bk-button.bk-button-success.is-disabled {
   background-color: #dcdee5;
@@ -447,6 +732,7 @@
 .bk-button.bk-button-danger:active {
   background-color: #db2626;
   border-color: #db2626;
+  color: white;
 }
 .bk-button.bk-button-danger.is-disabled {
   background-color: #dcdee5;
@@ -478,13 +764,18 @@
 .bk-button.bk-button-small {
   min-width: 48px;
   height: 26px;
+  line-height: 26px;
   padding: 0 12px;
 }
 .bk-button.bk-button-large {
   min-width: 74px;
   height: 38px;
+  line-height: 38px;
   padding: 0 20px;
 }
+.bk-button .bk-button-loading:not(:last-child) {
+  margin-right: 12px;
+}
 .bk-button:hover {
   border-color: #979ba5;
 }
@@ -679,6 +970,7 @@
   text-align: left;
 }
 .bk-collapse-wrapper .bk-collapse-item .bk-collapse-header {
+  position: relative;
   height: 42px;
   padding: 0 10px;
   overflow: hidden;
@@ -688,6 +980,13 @@
   text-overflow: ellipsis;
   cursor: pointer;
 }
+.bk-collapse-wrapper .bk-collapse-item .bk-collapse-header .bk-collapse-icon {
+  position: absolute;
+  right: 10px;
+}
+.bk-collapse-wrapper .bk-collapse-item .bk-collapse-header .bk-collapse-icon svg {
+  font-size: 20px;
+}
 .bk-collapse-wrapper .bk-collapse-item .bk-collapse-content {
   display: none;
   padding: 0 10px;
@@ -869,12 +1168,24 @@
   border-radius: 2px;
   transition: all 0.3s;
 }
+.bk-input:hover .show-clear-only-hover {
+  display: block;
+}
+.bk-input.is-simplicity {
+  background-color: transparent;
+  border-color: transparent;
+  border-bottom-color: #c4c6cc;
+}
 .bk-input--suffix-icon {
   padding-right: 10px;
   font-size: 16px;
+  line-height: 1;
   color: #c4c6cc;
   align-self: center;
 }
+.bk-input--suffix-icon.show-clear-only-hover {
+  display: none;
+}
 .bk-input--large {
   height: 38px;
   font-size: 16px;
@@ -888,6 +1199,11 @@
   outline: 0;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
+.bk-input.is-focused:not(.is-readonly).is-simplicity {
+  border-color: transparent;
+  border-bottom-color: #3a84ff;
+  box-shadow: none;
+}
 .bk-input.is-disabled {
   cursor: not-allowed;
   background-color: #fafbfd;
@@ -932,12 +1248,12 @@
 .bk-input--text[type='search']::-webkit-search-results-decoration {
   appearance: none;
 }
-.bk-input--text [type=search]::-ms-clear {
+.bk-input--text [type='search']::-ms-clear {
   display: none;
   width: 0;
   height: 0;
 }
-.bk-input--text [type=search]::-ms-reveal {
+.bk-input--text [type='search']::-ms-reveal {
   display: none;
   width: 0;
   height: 0;
@@ -961,6 +1277,7 @@
   height: 50%;
   overflow: hidden;
   color: #c4c6cc;
+  text-align: center;
 }
 .bk-input--number-control svg {
   font-size: 16px;
@@ -1026,6 +1343,49 @@
 .bk-link.danger.is-disabled {
   color: #fd9c9c;
 }
+.bk-dropdown {
+  display: inline-block;
+}
+.bk-dropdown .bk-dropdown-content {
+  display: none;
+  box-shadow: 0 2px 6px rgba(51, 60, 72, 0.1);
+}
+.bk-dropdown .bk-dropdown-content[data-show] {
+  display: block;
+}
+.bk-dropdown-menu {
+  min-width: 100%;
+  padding: 5px 0;
+  margin: 0;
+  background: #fff;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+.bk-dropdown-menu::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.bk-dropdown-menu::-webkit-scrollbar-thumb {
+  background: #dde4eb;
+  border-radius: 20px;
+  box-shadow: inset 0 0 6px hsla(0, 0%, 80%, 0.3);
+}
+.bk-dropdown-item {
+  display: block;
+  height: 32px;
+  padding: 0 16px;
+  font-size: 12px;
+  line-height: 33px;
+  color: #63656e;
+  white-space: nowrap;
+  list-style: none;
+  cursor: pointer;
+}
+.bk-dropdown-item:hover {
+  color: #3a84ff;
+  background-color: #eaf3ff;
+}
 @keyframes loading-scale-animate {
   0% {
     transform: scale(1);
@@ -1051,6 +1411,7 @@
   position: static;
   display: inline-block;
   font-size: 0;
+  vertical-align: middle;
 }
 .bk-loading-wrapper.bk-nested-loading {
   position: relative;
@@ -1060,8 +1421,33 @@
   top: 50%;
   left: 50%;
   z-index: 4;
+  text-align: center;
   transform: translate(-50%, -50%);
 }
+.bk-loading-wrapper .dot {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: 10px;
+  border-radius: 50%;
+  transform: scale(0.6);
+  animation-duration: 0.8s;
+  animation-iteration-count: infinite;
+  animation-name: loading-scale-animate;
+  animation-direction: normal;
+}
+.bk-loading-wrapper .oval {
+  position: absolute;
+  width: 6px;
+  height: 8px;
+  background-color: #63656e;
+  border-radius: 8px;
+  animation-duration: 1.2s;
+  animation-iteration-count: infinite;
+  animation-name: fade;
+  transform-origin: center 20px;
+  animation-direction: normal;
+}
 .bk-loading-wrapper .bk-loading-mask {
   opacity: 0.5;
 }
@@ -1078,7 +1464,55 @@
   content: '';
 }
 .bk-loading-wrapper .bk-loading-indicator {
-  font-size: 14px;
+  text-align: center;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-4 {
+  background-color: #2dcb56;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-4 {
+  background-color: #ea3636;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-4 {
+  background-color: #ff9c01;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-4 {
+  background-color: #3a84ff;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-4 {
+  background-color: white;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-4 {
+  background-color: #c4c6cc;
 }
 .bk-loading-wrapper .bk-loading-indicator .dot-1 {
   background-color: #ea3636;
@@ -1095,7 +1529,7 @@
 .bk-loading-wrapper .bk-loading-indicator .dot-4 {
   background-color: #3a84ff;
   animation-delay: 0.55s;
-  margin-right: 0;
+  margin-right: 0px;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-1 {
   transform: rotate(-135deg);
@@ -1129,59 +1563,35 @@
   transform: rotate(180deg);
   animation-delay: 1.65s;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot4 {
-  background-color: #2dcb56;
-}
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot4 {
-  background-color: #ea3636;
+.bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot4 {
-  background-color: #ff9c01;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-spin-indicator {
+  height: 16px;
+  width: 16px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot4 {
-  background-color: #3a84ff;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot {
+  width: 3px;
+  height: 3px;
+  margin-right: 3px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot4 {
-  background-color: white;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot.dot-4 {
+  margin-right: 0;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot4 {
-  background-color: #c4c6cc;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .oval {
+  width: 2px;
+  height: 3px;
+  border-radius: 3px;
+  transform-origin: center 8px;
 }
-.bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
-  height: 40px;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-loading-title {
+  font-size: 14px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .bk-spin-indicator {
   height: 22px;
+  width: 22px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .dot {
   width: 6px;
@@ -1202,6 +1612,7 @@
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .bk-spin-indicator {
   height: 52px;
+  width: 52px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .dot {
   width: 20px;
@@ -1227,30 +1638,6 @@
   color: #63656e;
   text-align: center;
 }
-.bk-loading-wrapper .bk-loading-indicator .dot {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  margin-right: 10px;
-  border-radius: 50%;
-  transform: scale(0.6);
-  animation-duration: 0.8s;
-  animation-iteration-count: infinite;
-  animation-name: loading-scale-animate;
-  animation-direction: normal;
-}
-.bk-loading-wrapper .bk-loading-indicator .oval {
-  position: absolute;
-  width: 6px;
-  height: 8px;
-  background-color: #63656e;
-  border-radius: 8px;
-  animation-duration: 1.2s;
-  animation-iteration-count: infinite;
-  animation-name: fade;
-  transform-origin: center 20px;
-  animation-direction: normal;
-}
 .bk-modal-wrapper {
   position: absolute;
   top: 50%;
@@ -1265,39 +1652,48 @@
 .bk-popover .bk-popover-reference {
   display: inline-block;
 }
-.bk-popover .bk-popover-content {
+.bk-popover .fade-in-enter-active,
+.bk-popover .fade-in-linear-leave-active {
+  transition: opacity 200ms linear;
+}
+.bk-popover .fade-in-enter,
+.bk-popover .fade-in-leave,
+.bk-popover .fade-in-leave-active {
+  opacity: 0;
+}
+.bk-popover-content {
   display: none;
-  padding: 4px 8px;
-  font-size: 13px;
-  font-weight: bold;
+  padding: 7px 14px;
+  font-size: 12px;
   color: #fff;
   background: #26323d;
   border-radius: 4px;
   box-sizing: border-box;
 }
-.bk-popover .bk-popover-content[data-theme='dark'] {
+.bk-popover-content[data-theme^='dark'] {
   color: #fff;
   background: #26323d;
 }
-.bk-popover .bk-popover-content[data-theme='light'] {
+.bk-popover-content[data-theme^='light'] {
   color: #26323d;
   background-color: #fff;
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-theme='light'][data-show] {
+.bk-popover-content[data-theme^='light'][data-show] {
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-show] {
+.bk-popover-content[data-show] {
   display: block;
 }
-.bk-popover .bk-popover-content .arrow {
+.bk-popover-content .arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: inherit;
   visibility: hidden;
 }
-.bk-popover .bk-popover-content .arrow::before {
+.bk-popover-content .arrow::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -1306,16 +1702,16 @@
   visibility: visible;
   transform: rotate(45deg);
 }
-.bk-popover .bk-popover-content[data-popper-placement^='top'] > .arrow {
+.bk-popover-content[data-popper-placement^='top'] > .arrow {
   bottom: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='bottom'] > .arrow {
+.bk-popover-content[data-popper-placement^='bottom'] > .arrow {
   top: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='left'] > .arrow {
+.bk-popover-content[data-popper-placement^='left'] > .arrow {
   right: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='right'] > .arrow {
+.bk-popover-content[data-popper-placement^='right'] > .arrow {
   left: -4px;
 }
 @keyframes loading-scale-animate {
@@ -1396,9 +1792,6 @@
   width: 7%;
   text-align: center;
 }
-.bk-progress .process-circle-trail {
-  stroke: #f5f5f5;
-}
 .bk-progress .progress-circle-text {
   position: absolute;
   top: 50%;
@@ -1547,6 +1940,12 @@
   border: 1px solid #63656e;
   transition: all 0.3s;
 }
+.bk-radio-group {
+  display: inline-block;
+  font-size: 0;
+  line-height: 0;
+  letter-spacing: normal;
+}
 .bk-rate {
   position: relative;
 }
@@ -1581,6 +1980,18 @@
 .bk-rate-stars .bk-rate-star:last-child {
   margin-right: 0;
 }
+.bk-select {
+  display: inline-block;
+}
+.bk-select ul {
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+  list-style: none;
+}
+.bk-select .bk-popover-content {
+  padding: 0;
+}
 .bk-select.is-focus .bk-select-trigger .bk-select-input {
   border-color: #3a84ff;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
@@ -1599,6 +2010,7 @@
   cursor: pointer;
 }
 .bk-select .bk-select-trigger .bk-select-input {
+  width: 100%;
   height: 32px;
   padding: 0 28px 0 10px;
   font-size: 12px;
@@ -1618,59 +2030,128 @@
 .bk-select .bk-select-trigger .bk-select-input::placeholder {
   color: #c4c6cc;
 }
-.bk-select .bk-select-trigger .angle-up {
+.bk-select .bk-select-trigger .bk-select-prefix {
   position: absolute;
   top: 6px;
-  right: 4px;
+  left: 4px;
+  font-size: 14px;
+}
+.bk-select .bk-select-trigger .angle-up {
+  transform: rotate(180deg);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 20px;
   height: 20px;
   font-size: 20px;
   color: #979ba5;
-  transform: rotate(180deg);
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  align-items: center;
-  justify-content: center;
-}
-.bk-select .bk-select-trigger .clear-icon {
   position: absolute;
   top: 6px;
   right: 4px;
+}
+.bk-select .bk-select-trigger .clear-icon {
+  transition: all 0.1s;
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 20px;
   height: 20px;
   font-size: 14px;
   color: #c4c6cc;
-  transition: all 0.1s;
+  position: absolute;
+  top: 6px;
+  right: 4px;
+}
+.bk-select .bk-select-trigger .clear-icon:hover {
+  color: #979ba5;
+}
+.bk-select .bk-select-trigger .spinner {
+  position: absolute;
+  top: 6px;
+  right: 4px;
+  display: flex;
   align-items: center;
   justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 16px;
+  color: #3A84FF;
 }
-.bk-select .bk-select-trigger .clear-icon:hover {
+.bk-select .bk-select-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 56px;
+  color: #63656e;
+}
+.bk-select .bk-select-empty .spinner {
+  display: flex;
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
+  font-size: 14px;
+  color: #c4c6cc;
+  align-items: center;
+  justify-content: center;
+}
+.bk-select .bk-select-dropdown {
+  overflow: auto;
+}
+.bk-select .bk-select-dropdown .bk-select-search {
+  position: relative;
+  padding: 0 5px;
+}
+.bk-select .bk-select-dropdown .bk-select-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  font-size: 16px;
   color: #979ba5;
+  transform: translateY(-50%);
+}
+.bk-select .bk-select-dropdown .bk-select-search-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px 0 26px;
+  font-size: 12px;
+  cursor: text;
+  border: none;
+  border-bottom: 1px solid #dcdee5;
+  outline: 0;
+}
+.bk-select .bk-select-extension {
+  display: flex;
+  height: 40px;
+  background-color: #fafbfd;
+  align-items: center;
+}
+.bk-select .bk-select-options {
+  padding: 8px 0;
 }
 .bk-select .bk-select-option {
+  position: relative;
   height: 32px;
-  padding: 0 16px;
-  margin: 0 -8px;
-  font-weight: normal;
+  padding: 0 12px;
   line-height: 32px;
   color: #63656e;
   text-align: left;
-  list-style: none;
   cursor: pointer;
   user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .bk-select .bk-select-option:hover {
   color: #3a84ff;
-  background-color: #eaf3ff;
+  background-color: #f5f7fa;
 }
 .bk-select .bk-select-option.is-selected {
   color: #3a84ff;
-  background-color: #f4f6fa;
 }
 .bk-select .bk-select-option.is-selected.is-multiple::after {
   position: absolute;
-  right: 20px;
+  right: 12px;
   font-size: 12px;
   font-weight: 700;
   content: '\2713';
@@ -1680,6 +2161,40 @@
   cursor: not-allowed;
   background-color: transparent;
 }
+.bk-select .bk-option-group-label {
+  height: 32px;
+  padding: 0 8px;
+  line-height: 32px;
+  color: #979ba5;
+  text-align: left;
+}
+.bk-select .bk-option-group-label.collapsible {
+  cursor: pointer;
+}
+.bk-select .bk-option-group.collapsible .bk-select-option {
+  padding-left: 40px;
+}
+.bk-select .bk-option-group .default-group-label {
+  display: flex;
+  user-select: none;
+  align-items: center;
+}
+.bk-select .bk-option-group .default-group-label-icon {
+  display: flex;
+  width: 12px;
+  height: 12px;
+  margin-right: 8px;
+  font-size: 12px;
+  transition: all 0.1s;
+  align-items: center;
+  justify-content: center;
+}
+.bk-select .bk-option-group .default-group-label-icon.collapse {
+  transform: rotate(-90deg);
+}
+.bk-select .bk-option-group .bk-select-option {
+  padding-left: 24px;
+}
 .bk-modal-wrapper.bk-sideslider-wrapper {
   position: fixed;
   top: 0;
@@ -1773,181 +2288,181 @@
 .bk-switcher {
   position: relative;
   display: inline-block;
-  /* 默认尺寸 */
-  width: 36px;
   height: 20px;
+  /* 默认尺寸 */
+  min-width: 36px;
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
   line-height: 20px;
   text-align: left;
   vertical-align: middle;
+  list-style: none;
+  cursor: pointer;
   background-color: #c4c6cc;
+  border: 1px solid transparent;
   border-radius: 50px;
+  border-radius: 100px;
+  box-sizing: border-box;
   transition: all 0.4s ease;
+  transition: all 0.36s;
+  user-select: none;
   /* 显示文本时固定尺寸 */
 }
-.bk-switcher:focus {
-  box-shadow: 0px 0px 6px #c4c6cc;
-}
 .bk-switcher:after {
   position: absolute;
-  top: 2px;
-  left: 2px;
-  display: block;
-  width: 24px;
-  height: 24px;
+  top: 1px;
+  left: 1px;
+  width: 16px;
+  height: 16px;
   cursor: pointer;
   background: #fff;
-  border-radius: 100px;
-  content: '';
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  background-color: #fff;
+  border-radius: 18px;
+  content: ' ';
   transition: all 0.3s ease;
 }
-.bk-switcher:not(.show-label):after {
-  width: 16px;
-  height: 16px;
-}
-.bk-switcher:not(.show-label).is-checked:after {
-  margin-left: -18px;
-}
-.bk-switcher.is-loading {
-  cursor: defalt;
+.bk-switcher .switcher-text {
+  display: block;
+  margin-right: 6px;
+  margin-left: 28px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #fff;
+  text-align: center;
+  transition: all 0.3s ease;
 }
-.bk-switcher.is-loading input[type=checkbox] {
-  cursor: default;
+.bk-switcher .animating-node {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  pointer-events: none;
+  border-radius: inherit;
+  content: '';
+  opacity: 0.2;
+  box-shadow: 0 0 0 0 #1890ff;
+  animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
+  animation-fill-mode: forwards;
 }
 .bk-switcher .bk-switcher-loading {
   position: absolute;
-  top: 50%;
+  top: 1px;
   left: 1px;
-  z-index: 10;
-  display: flex;
-  width: 18px;
-  height: 18px;
-  transform: translateY(-50%);
+  z-index: 1;
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+  color: #c4c6cc;
+  cursor: pointer;
+  background: transparent;
+  border-radius: 16px;
+  content: ' ';
+  transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
 }
 .bk-switcher .bk-switcher-loading svg {
-  color: #3a84ff;
-}
-.bk-switcher .switcher-label {
-  display: none;
-  width: 30px;
-  height: 28px;
-  margin: 0 0 0 26px;
-  font-size: 12px;
-  font-weight: normal;
-  color: #fff;
-  text-align: center;
-  vertical-align: top;
-  transition: all ease 0.3s;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  animation: loading 1s linear infinite;
 }
-.bk-switcher .switcher-label .on-text {
-  display: none;
+.bk-switcher.is-loading {
+  cursor: defalt;
 }
-.bk-switcher .switcher-label .off-text {
-  display: inline-block;
+.bk-switcher.is-loading input[type=checkbox] {
+  cursor: default;
 }
 .bk-switcher.show-label {
-  width: 60px;
   height: 28px;
+  min-width: 60px;
   line-height: 28px;
 }
-.bk-switcher.show-label .switcher-label {
-  display: inline-block;
+.bk-switcher.show-label::after {
+  width: 24px;
+  height: 24px;
 }
 .bk-switcher.show-label .bk-switcher-loading {
-  width: 26px;
-  height: 26px;
-  align-items: center;
-  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 20px;
 }
-.bk-switcher.show-label .bk-switcher-loading svg {
-  font-size: 24px;
+.bk-switcher.show-label.is-checked .bk-switcher-loading {
+  left: 100%;
+  margin-left: -25px;
 }
 .bk-switcher.is-disabled {
-  cursor: default;
-  /* background-color: #eee !important; */
+  cursor: not-allowed;
   opacity: 0.3;
 }
-.bk-switcher.is-disabled input[type=checkbox] {
+.bk-switcher.is-disabled .bk-switcher-loading {
+  cursor: not-allowed;
+}
+.bk-switcher.is-disabled::after {
   cursor: not-allowed;
 }
 .bk-switcher.is-checked {
   background: #2dcb56;
 }
-.bk-switcher.is-checked:focus {
-  box-shadow: 0px 0px 6px #2dcb56;
+.bk-switcher.is-checked .bk-switcher-loading svg {
+  color: #2dcb56;
 }
-.bk-switcher.is-checked.primary {
+.bk-switcher.is-checked:not(.bk-switcher-outline).bk-switcher.is-checked.primary {
   background: #3a84ff;
 }
-.bk-switcher.is-checked.primary:focus {
-  box-shadow: 0px 0px 6px #3a84ff;
+.bk-switcher.is-checked:not(.bk-switcher-outline).bk-switcher.is-checked.primary .bk-switcher-loading svg {
+  color: #3a84ff;
 }
 .bk-switcher.is-checked:after {
-  top: 2px;
   left: 100%;
-  margin-left: -26px;
-}
-.bk-switcher.is-checked .switcher-label {
-  margin-left: 4px;
-}
-.bk-switcher.is-checked .switcher-label .on-text {
-  display: inline-block;
+  margin-left: -1px;
+  transform: translateX(-100%);
 }
-.bk-switcher.is-checked .switcher-label .off-text {
-  display: none;
+.bk-switcher.is-checked .switcher-text {
+  margin-right: 28px;
+  margin-left: 6px;
 }
-.bk-switcher.is-checked .bk-switcher-loading {
-  right: 1px;
-  left: auto;
+.bk-switcher:not(.show-label).is-checked .bk-switcher-loading {
+  left: 100%;
+  margin-left: -17px;
 }
 .bk-switcher.bk-switcher-outline {
   background: #fff;
   border: 1px solid #c4c6cc;
 }
 .bk-switcher.bk-switcher-outline:after {
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   background-color: #c4c6cc;
   box-shadow: none;
 }
-.bk-switcher.bk-switcher-outline .switcher-label {
-  height: 26px;
-  margin-left: 24px;
+.bk-switcher.bk-switcher-outline .switcher-text {
   color: #c4c6cc;
 }
-.bk-switcher.bk-switcher-outline .bk-switcher-loading {
-  width: 22px;
-  height: 22px;
-  align-items: center;
-  justify-content: center;
-}
 .bk-switcher.bk-switcher-outline.is-checked {
   border: 1px solid #2dcb56;
 }
 .bk-switcher.bk-switcher-outline.is-checked:after {
-  margin-left: -24px;
   background-color: #2dcb56;
 }
-.bk-switcher.bk-switcher-outline.is-checked .switcher-label {
-  margin-left: 4px;
+.bk-switcher.bk-switcher-outline.is-checked .switcher-text {
   color: #2dcb56;
 }
-.bk-switcher.bk-switcher-outline.is-disabled {
-  background-color: #fff;
-  border-color: #eee;
-}
-.bk-switcher.bk-switcher-outline.is-disabled .switcher-label {
-  color: #eee;
+.bk-switcher.bk-switcher-outline .bk-switcher-loading svg {
+  color: #fff;
 }
-.bk-switcher.bk-switcher-outline.is-disabled:after {
-  background-color: #eee;
+.bk-switcher.bk-switcher-outline.bk-switcher.primary.is-checked {
+  border: 1px solid #3a84ff;
 }
-.bk-switcher.bk-switcher-outline.bk-switcher-large:after {
-  width: 18px;
-  height: 18px;
+.bk-switcher.bk-switcher-outline.bk-switcher.primary.is-checked:after {
+  background: #3a84ff;
 }
-.bk-switcher.bk-switcher-outline.bk-switcher-large.is-checked:after {
-  margin-left: -20px;
+.bk-switcher.bk-switcher-outline.bk-switcher.primary.is-checked .switcher-text {
+  color: #3a84ff;
 }
 .bk-switcher.bk-switcher-square {
   border-radius: 2px;
@@ -1955,55 +2470,2621 @@
 .bk-switcher.bk-switcher-square:after {
   border-radius: 2px;
 }
-.bk-switcher.bk-switcher-square .switcher-label {
-  width: 35px;
-}
 .bk-switcher.bk-switcher-large {
-  width: 42px;
   height: 24px;
+  min-width: 42px;
   line-height: 22px;
-  border-radius: 12px;
 }
 .bk-switcher.bk-switcher-large:after {
   width: 20px;
   height: 20px;
 }
-.bk-switcher.bk-switcher-large.is-checked:after {
-  top: 2px;
-  left: 100%;
-  margin-left: -22px;
-}
 .bk-switcher.bk-switcher-large .bk-switcher-loading {
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
+  font-size: 16px;
+}
+.bk-switcher.bk-switcher-large.is-checked .bk-switcher-loading {
+  margin-left: -21px;
 }
 .bk-switcher.bk-switcher-small {
-  width: 26px;
   height: 16px;
+  min-width: 26px;
   line-height: 22px;
 }
 .bk-switcher.bk-switcher-small:after {
   width: 12px;
   height: 12px;
 }
-.bk-switcher.bk-switcher-small.is-checked:after {
-  top: 2px;
-  left: 100%;
-  margin-left: -14px;
-}
 .bk-switcher.bk-switcher-small .bk-switcher-loading {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
+  font-weight: 700;
+  transform: scale(0.66667);
 }
-.bk-switcher input[type=checkbox],
-.bk-switcher input[type=radio] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
+.bk-switcher.bk-switcher-small.is-checked .bk-switcher-loading {
+  margin-left: -13px;
+}
+:not(.show-label).bk-switcher-nomal.bk-switcher-outline::after {
+  width: 16px;
+  height: 16px;
+}
+:not(.show-label).bk-switcher-outline.is-checked.bk-switcher-small::after {
+  width: 12px;
+  height: 12px;
+}
+:not(.show-label).bk-switcher-outline.is-checked.bk-switcher-large::after {
+  width: 20px;
+  height: 20px;
+}
+:not(.show-label).bk-switcher-outline.is-checked::after {
+  width: 16px;
+  height: 16px;
+}
+@keyframes fadeEffect {
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes waveEffect {
+  100% {
+    box-shadow: 0 0 0 #1890ff;
+  }
+}
+@keyframes loading {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.bk-table {
+  overflow: hidden;
   height: 100%;
-  margin: 0;
-  cursor: pointer;
+  border-top: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-table .bk-table-body {
+  overflow: auto;
+}
+.bk-table .bk-table-head,
+.bk-table .bk-table-body {
+  background: white;
+}
+.bk-table .bk-table-head table,
+.bk-table .bk-table-body table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.bk-table .bk-table-head table th,
+.bk-table .bk-table-body table th,
+.bk-table .bk-table-head table td,
+.bk-table .bk-table-body table td {
+  min-width: 80px;
+}
+.bk-table .bk-table-head table th .cell,
+.bk-table .bk-table-body table th .cell,
+.bk-table .bk-table-head table td .cell,
+.bk-table .bk-table-body table td .cell {
+  height: var(--row-height);
+  padding: 0 15px;
+  overflow: hidden;
+  line-height: var(--row-height);
+  color: #575961;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-table .bk-table-head table thead th,
+.bk-table .bk-table-body table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  color: #313238;
+  background-color: #fafbfd;
+}
+.bk-table .bk-table-head table thead th.active,
+.bk-table .bk-table-body table thead th.active,
+.bk-table .bk-table-head table thead th:hover,
+.bk-table .bk-table-body table thead th:hover {
+  background: #f0f1f5;
+}
+.bk-table .bk-table-head table tbody tr:hover td,
+.bk-table .bk-table-body table tbody tr:hover td {
+  background: #f5f7fa;
+}
+.bk-table .bk-table-footer {
+  line-height: 40px;
+}
+.bk-table.bordered-row .cell {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-table.bordered-outer {
+  border-right: 1px solid #dcdee5;
+  border-left: 1px solid #dcdee5;
+}
+.bk-table.bordered-col th .cell,
+.bk-table.bordered-col td .cell {
+  border-right: 1px solid #dcdee5;
+}
+.bk-table.bordered-col th:last-child .cell,
+.bk-table.bordered-col td:last-child .cell {
+  border-right: none;
+}
+.bk-table.bordered-none th .cell,
+.bk-table.bordered-none td .cell {
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
+.bk-table .bk-table-fixed {
+  width: 100%;
+}
+.bk-table colgroup col {
+  background: white;
+}
+.bk-table colgroup col.active {
+  position: relative;
+  background: #f0f1f5;
+}
+.bk-tag {
+  display: inline-block;
+  height: 22px;
+  padding: 0 10px;
+  margin: 2px 0 2px 6px;
+  font-size: 12px;
+  line-height: 22px;
+  color: #63656e;
+  cursor: default;
+  background-color: rgba(151, 155, 165, 0.1);
+  border-color: rgba(217, 220, 230, 0.6);
+  box-sizing: border-box;
+}
+.bk-tag.bk-tag-success {
+  color: #14a568;
+  border-color: rgba(20, 165, 104, 0.3);
+  background-color: rgba(20, 165, 104, 0.1);
+}
+.bk-tag.bk-tag-success.bk-tag-filled {
+  background-color: #14a568;
+}
+.bk-tag.bk-tag-info {
+  color: #3a84ff;
+  border-color: rgba(58, 132, 255, 0.3);
+  background-color: rgba(58, 132, 255, 0.1);
+}
+.bk-tag.bk-tag-info.bk-tag-filled {
+  background-color: #3a84ff;
+}
+.bk-tag.bk-tag-warning {
+  color: #fe9c00;
+  border-color: rgba(254, 165, 0, 0.3);
+  background-color: rgba(254, 156, 0, 0.1);
+}
+.bk-tag.bk-tag-warning.bk-tag-filled {
+  background-color: #fe9c00;
+}
+.bk-tag.bk-tag-danger {
+  color: #ea3636;
+  border-color: rgba(234, 53, 54, 0.3);
+  background-color: rgba(234, 53, 54, 0.1);
+}
+.bk-tag.bk-tag-danger.bk-tag-filled {
+  background-color: #ea3636;
+}
+.bk-tag:hover {
+  opacity: 0.8;
+}
+.bk-tag.bk-tag-filled {
+  color: #fff;
+  background-color: #979ba5;
+}
+.bk-tag.bk-tag-stroke {
+  padding: 0 9px;
+  line-height: 20px;
+  border-style: solid;
+  border-width: 1px;
+}
+.bk-tag.bk-tag-closable {
+  padding: 0 4px 0 10px;
+}
+.bk-tag.bk-tag-checkable {
+  cursor: pointer;
+  background: none;
+}
+.bk-tag.bk-tag-checkable:hover {
+  background: rgba(151, 155, 165, 0.15);
+}
+.bk-tag.bk-tag-check {
+  color: #fff;
+  background: #3a84ff;
+}
+.bk-tag.bk-tag-check:hover {
+  color: #fff;
+  background: #3a84ff;
+  opacity: 1;
+}
+.bk-tag .bk-tag-icon {
+  display: inline-block;
+  margin-right: 4px;
+  font-size: 14px;
+  line-height: 0;
+}
+.bk-tag .bk-tag-close {
+  display: inline-block;
+  margin-left: 4px;
+  font-size: 12px;
+  line-height: 0;
+  vertical-align: 1px;
+  cursor: pointer;
+}
+.bk-form {
+  text-align: left;
+}
+.bk-form .bk-form-item {
+  display: flex;
+  margin-bottom: 24px;
+}
+.bk-form .bk-form-label {
+  width: 150px;
+  padding-right: 24px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 32px;
+  color: #63656e;
+  text-align: right;
+}
+.bk-form .bk-form-content {
+  position: relative;
+  line-height: 32px;
+}
+.bk-form .bk-form-error {
+  position: absolute;
+  left: 0;
+  padding-top: 4px;
+  font-size: 12px;
+  line-height: 1;
+  color: #ea3636;
+  text-align: left;
+}
+.bk-form--vertical .bk-form-item {
+  flex-direction: column;
+}
+.bk-form--vertical .bk-form-label {
+  width: auto;
+  text-align: left;
+}
+.bk-form--vertical .bk-form-content {
+  text-align: left;
+}
+* {
+  box-sizing: border-box;
+}
+@keyframes loadingCircle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.bk-steps {
+  display: flex;
+  width: 100%;
+  font-size: 0;
+}
+.bk-steps .icon-circle-4-1 {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-right: 0;
+  border-bottom: 0;
+  border-left: 0;
+  border-radius: 7px;
+}
+.bk-steps .bk-icon {
+  font-size: 24px;
+  line-height: 24px;
+}
+.bk-steps .bk-icon.icon-loading {
+  display: inline-block;
+  font-size: 14px;
+  animation: loadingCircle 1s infinite linear;
+}
+.bk-steps .bk-step {
+  position: relative;
+  margin-right: 8px;
+  overflow: hidden;
+  text-align: left;
+  white-space: nowrap;
+  flex: 1;
+}
+.bk-steps .bk-step .bk-step-indicator {
+  z-index: 1;
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin-right: 8px;
+  line-height: 24px;
+  color: #979ba5;
+  text-align: center;
+  vertical-align: top;
+  background-color: #fff;
+  border: 1px solid #979ba5;
+  border-radius: 50%;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+}
+.bk-steps .bk-step .bk-step-number {
+  font-family: arial;
+  font-size: 14px;
+}
+.bk-steps .bk-step .bk-step-content {
+  display: inline-block;
+  vertical-align: top;
+}
+.bk-steps .bk-step .bk-step-title {
+  position: relative;
+  display: inline-block;
+  padding-right: 8px;
+  font-size: 14px;
+  line-height: 24px;
+  color: #63656e;
+  word-break: break-all;
+}
+.bk-steps .bk-step .bk-step-title::after {
+  position: absolute;
+  top: 12px;
+  left: 100%;
+  width: 99999px;
+  height: 1px;
+  background-color: transparent;
+  content: '';
+}
+.bk-steps .bk-step .bk-step-description {
+  max-width: 140px;
+  font-size: 12px;
+  color: #979ba5;
+  white-space: normal;
+}
+.bk-steps .bk-step.bk-step-no-content .bk-step-indicator {
+  margin-right: 0;
+}
+.bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after {
+  position: absolute;
+  top: 12px;
+  left: 100%;
+  width: 99999px;
+  height: 1px;
+  background-color: transparent;
+  content: '';
+}
+.bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after {
+  top: 10px;
+  left: 32px;
+}
+.bk-steps .bk-step:last-child {
+  margin-right: 0;
+  flex: none;
+}
+.bk-steps .bk-step:last-child .bk-step-title {
+  padding-right: 0;
+}
+.bk-steps .bk-step:last-child .bk-step-title::after {
+  display: none;
+}
+.bk-steps .bk-step.done .bk-step-title,
+.bk-steps .bk-step.done .bk-step-description {
+  color: #63656e;
+}
+.bk-steps .bk-step.done .bk-steps-icon {
+  font-size: 22px;
+}
+.bk-steps .bk-step.current .bk-step-number,
+.bk-steps .bk-step.current .bk-step-icon,
+.bk-steps .bk-step.current .bk-step-text {
+  border-width: 2px;
+}
+.bk-steps .bk-step.current .bk-step-title,
+.bk-steps .bk-step.current .bk-step-description {
+  color: #63656e;
+}
+.bk-steps .bk-step.current.bk-step-error .bk-step-indicator {
+  background-color: #ea3636;
+  border-color: #ea3636;
+}
+.bk-steps .bk-step.current.bk-step-error .bk-step-title,
+.bk-steps .bk-step.current.bk-step-error .bk-step-description {
+  color: #ea3636;
+}
+.bk-steps-primary .bk-step.done .bk-step-number,
+.bk-steps-primary .bk-step.done .bk-step-icon,
+.bk-steps-primary .bk-step.done .bk-step-text {
+  color: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-steps-primary .bk-step.done .bk-step-title::after,
+.bk-steps-primary .bk-step.done .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #3a84ff 50%, transparent 0%);
+}
+.bk-steps-primary .bk-step.done::after {
+  background-image: linear-gradient(#3a84ff 50%, transparent 0%);
+}
+.bk-steps-primary .bk-step.current .bk-step-number,
+.bk-steps-primary .bk-step.current .bk-step-icon,
+.bk-steps-primary .bk-step.current .bk-step-text {
+  color: #fff;
+  background-color: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-steps-warning .bk-step.done .bk-step-number,
+.bk-steps-warning .bk-step.done .bk-step-icon,
+.bk-steps-warning .bk-step.done .bk-step-text {
+  color: #ff9c01;
+  border-color: #ff9c01;
+}
+.bk-steps-warning .bk-step.done .bk-step-title::after,
+.bk-steps-warning .bk-step.done .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #ff9c01 50%, transparent 0%);
+}
+.bk-steps-warning .bk-step.done::after {
+  background-image: linear-gradient(#ff9c01 50%, transparent 0%);
+}
+.bk-steps-warning .bk-step.current .bk-step-number,
+.bk-steps-warning .bk-step.current .bk-step-icon,
+.bk-steps-warning .bk-step.current .bk-step-text {
+  color: #fff;
+  background-color: #ff9c01;
+  border-color: #ff9c01;
+}
+.bk-steps-success .bk-step.done .bk-step-number,
+.bk-steps-success .bk-step.done .bk-step-icon,
+.bk-steps-success .bk-step.done .bk-step-text {
+  color: #2dcb56;
+  border-color: #2dcb56;
+}
+.bk-steps-success .bk-step.done .bk-step-title::after,
+.bk-steps-success .bk-step.done .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #2dcb56 50%, transparent 0%);
+}
+.bk-steps-success .bk-step.done::after {
+  background-image: linear-gradient(#2dcb56 50%, transparent 0%);
+}
+.bk-steps-success .bk-step.current .bk-step-number,
+.bk-steps-success .bk-step.current .bk-step-icon,
+.bk-steps-success .bk-step.current .bk-step-text {
+  color: #fff;
+  background-color: #2dcb56;
+  border-color: #2dcb56;
+}
+.bk-steps-danger .bk-step.done .bk-step-number,
+.bk-steps-danger .bk-step.done .bk-step-icon,
+.bk-steps-danger .bk-step.done .bk-step-text {
+  color: #ea3636;
+  border-color: #ea3636;
+}
+.bk-steps-danger .bk-step.done .bk-step-title::after,
+.bk-steps-danger .bk-step.done .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #ea3636 50%, transparent 0%);
+}
+.bk-steps-danger .bk-step.done::after {
+  background-image: linear-gradient(#ea3636 50%, transparent 0%);
+}
+.bk-steps-danger .bk-step.current .bk-step-number,
+.bk-steps-danger .bk-step.current .bk-step-icon,
+.bk-steps-danger .bk-step.current .bk-step-text {
+  color: #fff;
+  background-color: #ea3636;
+  border-color: #ea3636;
+}
+.bk-steps-dashed .bk-step .bk-step-title::after,
+.bk-steps-dashed .bk-step .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #c4c6cc 50%, transparent 0%);
+  background-position: bottom;
+  background-repeat: repeat-x;
+  background-size: 6px 1px;
+}
+.bk-steps-solid .bk-step .bk-step-title::after,
+.bk-steps-solid .bk-step .bk-step-indicator::after {
+  background-color: #c4c6cc;
+}
+.bk-steps-vertical {
+  flex-direction: column;
+  height: 100%;
+}
+.bk-steps-vertical .bk-step {
+  margin-right: 0;
+  margin-bottom: 8px;
+}
+.bk-steps-vertical .bk-step .bk-step-title::after,
+.bk-steps-vertical .bk-step .bk-step-indicator::after {
+  display: none;
+}
+.bk-steps-vertical .bk-step::after {
+  position: absolute;
+  top: 32px;
+  left: 12px;
+  width: 1px;
+  height: 100%;
+  background-image: linear-gradient(#c4c6cc 50%, transparent 0%);
+  background-position: right;
+  background-repeat: repeat-y;
+  background-size: 1px 6px;
+  content: '';
+}
+.bk-steps-vertical .bk-step .bk-step-title {
+  display: flex;
+  height: 100%;
+  margin-top: 0;
+  text-align: left;
+  align-items: center;
+}
+.bk-steps-small .bk-step .bk-step-indicator {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+}
+.bk-steps-small .bk-step .bk-step-title {
+  font-size: 12px;
+  line-height: 20px;
+}
+.bk-steps-small .bk-step .bk-step-number {
+  font-size: 12px;
+}
+.bk-steps-small .bk-step .bk-icon {
+  font-size: 20px;
+  line-height: 24px;
+}
+.bk-steps-small .bk-step::after {
+  top: 28px;
+  left: 10px;
+}
+.bk-steps-small .bk-step .bk-step-title::after {
+  top: 10px;
+}
+.bk-steps-small .bk-step.bk-step-no-content .bk-step-indicator::after {
+  top: 8px;
+  left: 28px;
+}
+.bk-message {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  display: flex;
+  min-width: 300px;
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #63656e;
+  background: #f0f8ff;
+  border: 1px solid #e1ecff;
+  border-radius: 2px;
+  transform: translateX(-50%);
+  box-shadow: 0px 2px 4px 0px rgba(16, 37, 74, 0.1);
+  justify-content: space-between;
+}
+.bk-message .bk-message-close {
+  padding-left: 20px;
+  margin-right: 0;
+  font-size: 18px;
+  cursor: pointer;
+}
+.bk-message-icon {
+  display: inline-block;
+  margin-right: 10px;
+  font-size: 18px;
+  color: #3a84ff;
+}
+.bk-message-primary {
+  background: #f0f8ff;
+  border: 1px solid #e1ecff;
+}
+.bk-message-warning {
+  background: #fff4e2;
+  border: 1px solid #ffe8c3;
+}
+.bk-message-warning .bk-message-icon {
+  color: #ff9c01;
+}
+.bk-message-success {
+  background: #f2fff4;
+  border: 1px solid #dcffe2;
+}
+.bk-message-success .bk-message-icon {
+  color: #2dcb56;
+}
+.bk-message-danger {
+  background: #ffeded;
+  border: 1px solid #ffdddd;
+}
+.bk-message-danger .bk-message-icon {
+  color: #ea3636;
+}
+.bk-notify {
+  position: fixed;
+  display: flex;
+  width: 360px;
+  padding: 24px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #63656e;
+  background: #fff;
+  border: 1px solid #f0f1f5;
+  border-radius: 2px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
+}
+.bk-notify .bk-notify-icon {
+  position: absolute;
+  top: 22px;
+  margin-right: 5px;
+  font-size: 18px;
+  color: #3a84ff;
+}
+.bk-notify.bk-notify-warning .bk-notify-icon {
+  color: #ff9c01;
+}
+.bk-notify.bk-notify-success .bk-notify-icon {
+  color: #2dcb56;
+}
+.bk-notify.bk-notify-danger .bk-notify-icon {
+  color: #ea3636;
+}
+.bk-notify .bk-notify-icon.bk-notify-close {
+  top: 8px;
+  right: 12px;
+  margin-right: 0;
+  font-size: 18px;
+  color: #979ba5;
+  cursor: pointer;
+}
+.bk-notify .bk-notify-content-header {
+  display: inline-block;
+  padding-left: 23px;
+  margin-top: 0;
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 700;
+}
+.bk-notify .bk-notify-content-text {
+  display: inline-block;
+  padding-left: 23px;
+}
+.bk-tree .bk-node-row {
+  padding-left: calc(var(--offset-left));
+}
+.bk-tree .bk-node-row.is-checked {
+  background-color: #EBF2FF;
+}
+.bk-tree .bk-tree-node {
+  position: relative;
+  height: var(--lineHeight);
+  padding-left: 0;
+  line-height: var(--lineHeight);
+  cursor: pointer;
+}
+.bk-tree .bk-tree-node:not(.is-root) {
+  margin-left: calc(var(--depth)*var(--indent));
+}
+.bk-tree .bk-tree-node:not(.is-root).level-line::before {
+  position: absolute;
+  top: calc(50% + 1px);
+  left: calc(0px - var(--indent) + 6px);
+  z-index: 1;
+  width: calc(var(--indent) - 6px);
+  height: 0;
+  pointer-events: none;
+  border-bottom: var(--level-line);
+  content: '';
+}
+.bk-tree .bk-tree-node .node-virtual-line {
+  display: inline-block;
+  position: absolute;
+  left: calc(var(--depth) * var(--indent) * -1 + 6px);
+  top: -12px;
+  bottom: 50%;
+  width: 0;
+  border-left: var(--level-line);
+}
+.bk-tree .bk-tree-node .bk-tree-icon {
+  margin: 0 6px 0 4px;
+}
+.bk-tree .bk-tree-node .node-content {
+  display: inline-block;
+}
+.bk-slider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.bk-slider .bk-slider-runway {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  vertical-align: middle;
+  cursor: pointer;
+  background: #dcdee5;
+  border-radius: 2px;
+  opacity: 1;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar {
+  position: absolute;
+  height: 4px;
+  background: #3a84ff;
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar.vertical {
+  width: 4px;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar.horizontal {
+  height: 4px;
+}
+.bk-slider .bk-slider-runway .disable {
+  background: #979ba5;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels {
+  position: relative;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels.vertical {
+  left: 18px;
+  display: flex;
+  width: 10px;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels.horizontal {
+  top: 10px;
+  display: flex;
+  width: 100%;
+  height: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label {
+  position: absolute;
+  display: flex;
+  width: 10px;
+  height: 10px;
+  text-align: center;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical {
+  left: 10px;
+  transform: translateY(50%);
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal {
+  top: 10px;
+  transform: translateX(-50%);
+}
+.bk-slider .bk-slider-interval {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background-color: #fff;
+  border-radius: 100%;
+  transform: translateX(-50%);
+}
+.bk-slider .bk-slider-interval.vertical {
+  left: 2px;
+}
+.bk-slider-input {
+  display: flex;
+  margin: 0 0 0 28px;
+  flex-direction: row;
+  align-items: center;
+}
+.bk-slider-input .input-item {
+  width: 92px;
+}
+.bk-slider-input .input-center {
+  margin: 0 7px;
+}
+.bk-slider-button {
+  position: absolute;
+  z-index: 1001;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  line-height: normal;
+  text-align: center;
+  background-color: transparent;
+  user-select: none;
+  justify-content: center;
+  align-items: center;
+}
+.bk-slider-button:hover {
+  cursor: grab;
+}
+.bk-slider-button.grabbing {
+  cursor: grabbing;
+}
+.bk-slider-button.vertical {
+  left: -10px;
+  transform: translateY(50%);
+}
+.bk-slider-button.horizontal {
+  top: -10px;
+  transform: translateX(-50%);
+}
+.bk-slider-button .slider-button {
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border: 2px solid #3a84ff;
+  border-radius: 50%;
+  transition: 0.2s;
+  user-select: none;
+}
+.bk-slider-button .slider-button-disable {
+  border: 2px solid #979ba5;
+}
+.bk-slider-button .slider-button:hover {
+  box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, 0.3);
+}
+.bk-slider-button .slider-button:focus {
+  box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, 0.9);
+}
+.bk-slider-button .slider-button-label {
+  position: absolute;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+.bk-slider-button .slider-button-label.vertical {
+  left: 28px;
+}
+.bk-slider-button .slider-button-label.horizontal {
+  top: 20px;
+}
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
+.collapse {
+  width: 60px;
+}
+.open {
+  background: #151d2c;
+}
+.bk-menu {
+  display: flex;
+  width: 260px;
+  background-color: #182132;
+  flex-direction: column;
+  transition: width 0.3s ease-out;
+}
+.bk-menu.is-collapse {
+  width: 60px;
+}
+.bk-menu-submenu {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+  align-items: center;
+  transition: width 0.3s ease-out;
+}
+.bk-menu-submenu.is-opened {
+  background: #151d2c;
+}
+.bk-menu-submenu:hover {
+  color: white;
+  cursor: pointer;
+}
+.bk-menu-submenu .submenu-header {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  align-items: center;
+}
+.bk-menu-submenu .submenu-header.is-collapse {
+  color: white;
+  background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+}
+.bk-menu-submenu .submenu-header-icon {
+  display: flex;
+  height: 100%;
+  font-size: 18px;
+  flex: 0 0 60px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-menu-submenu .submenu-header-icon .menu-icon {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  align-items: center;
+  justify-content: center;
+  color: #b0bdd5;
+}
+.bk-menu-submenu .submenu-header-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  flex: 1;
+  color: #acb9d1;
+}
+.bk-menu-submenu .submenu-header-collapse {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  color: #acb9d1;
+  transform: rotate(-90deg);
+  transition: transform 0.3s ease-out;
+}
+.bk-menu-submenu .submenu-header-collapse.is-collapse {
+  transform: rotate(0deg);
+}
+.bk-menu-submenu .submenu-list {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  flex-direction: column;
+  flex: 1;
+  /* stylelint-disable-next-line declaration-no-important */
+  transition-property: all !important;
+}
+.bk-menu-item {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  min-height: 40px;
+  margin: 2px 0;
+  overflow: hidden;
+  font-size: 14px;
+  color: #96a2b9;
+  text-overflow: clip;
+  white-space: nowrap;
+  align-items: center;
+  transition: width 0.3s ease-in-out;
+}
+.bk-menu-item:hover {
+  color: white;
+  cursor: pointer;
+}
+.bk-menu-item.is-active {
+  color: white;
+  background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+}
+.bk-menu-item .item-icon {
+  display: flex;
+  height: 100%;
+  font-size: 18px;
+  flex: 0 0 60px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-menu-item .item-icon .default-icon {
+  display: inline-block;
+  width: 3px;
+  height: 3px;
+  background: #63656e;
+  background-color: white;
+  border-radius: 50%;
+}
+.bk-menu-item .item-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  flex: 1;
+}
+.bk-menu-group {
+  display: flex;
+  flex-direction: column;
+}
+.bk-menu-group .group-name {
+  display: flex;
+  height: 40px;
+  margin: 0 18px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
+  color: #63656e;
+  text-overflow: clip;
+  white-space: nowrap;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.bk-menu-group .group-wrap {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+}
+.bk-menu .collapse-transition {
+  transition: all 0.3s ease-in-out;
+}
+.bk-navigation {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.bk-navigation-title {
+  display: flex;
+  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;
+}
+.bk-navigation-title .title-desc {
+  display: inline-block;
+  margin-left: 16px;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 24px;
+  color: #96a2b9;
+  white-space: nowrap;
+}
+.bk-navigation-header {
+  flex: 0 0 52px;
+  display: flex;
+  align-items: center;
+  padding-right: 24px;
+  overflow: hidden;
+  background: #182132;
+}
+.bk-navigation-header .header-right {
+  display: flex;
+  height: 100%;
+  flex: 1;
+  align-items: center;
+}
+.bk-navigation-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}
+.bk-navigation-wrapper .navigation-nav {
+  position: relative;
+  z-index: 101;
+  display: flex;
+  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;
+  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 {
+  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;
+  width: 6px;
+  height: 5px;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar:hover {
+  transform: none;
+  transition: opacity 340ms ease-out;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer {
+  display: flex;
+  padding-left: 14px;
+  flex: 0 0 56px;
+  align-items: center;
+  justify-content: flex-start;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon {
+  display: flex;
+  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;
+  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 {
+  color: #96a2b9;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left:hover {
+  color: #d3d9e4;
+  cursor: pointer;
+  background: linear-gradient(270deg, #253047 0%, #263247 100%);
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon:hover {
+  color: #3a3c42;
+  cursor: pointer;
+  background: linear-gradient(270deg, #dee0ea 0%, #eaecf2 100%);
+}
+.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;
+}
+.bk-navigation-wrapper .navigation-container .container-header {
+  z-index: 100;
+  display: flex;
+  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;
+  font-size: 16px;
+  line-height: 21px;
+  color: #313238;
+}
+.bk-navigation-wrapper .navigation-container .container-header-sets {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: flex-end;
+}
+.bk-navigation-wrapper .navigation-container .container-content {
+  max-height: calc(100vh - 60px);
+  padding: 20px 24px 0;
+  overflow: auto;
+  background: #f5f7fa;
+  flex: 1;
+}
+.bk-navigation-wrapper .navigation-container .container-footer {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.bk-date-picker {
+  display: inline-block;
+  width: 261px;
+  line-height: normal;
+}
+.bk-date-picker.long {
+  width: 342px;
+}
+.bk-date-picker.medium-width {
+  width: 362px;
+}
+.bk-date-picker.large-width {
+  width: 402px;
+}
+.bk-date-picker-rel {
+  position: relative;
+}
+.bk-date-picker-rel .bk-date-picker-editor {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 10px 0 30px;
+  font-size: 12px;
+  line-height: 32px;
+  color: #63656e;
+  cursor: pointer;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  outline: none;
+}
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border {
+  border-color: transparent transparent #c4c6cc transparent;
+}
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border:focus {
+  border-color: transparent transparent #3a84ff transparent;
+  box-shadow: none;
+}
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border[disabled],
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border.readonly {
+  border-color: transparent transparent #dcdee5 transparent;
+}
+.bk-date-picker-rel .bk-date-picker-editor:focus {
+  border: 1px solid #3a84ff;
+}
+.bk-date-picker-rel .bk-date-picker-editor::placeholder {
+  color: #c4c6cc;
+}
+.bk-date-picker-rel .bk-date-picker-editor[disabled] {
+  color: #c4c6cc;
+  cursor: not-allowed;
+  background-color: #fafbfd;
+  border-color: #c4c6cc;
+}
+.bk-date-picker-rel .bk-date-picker-editor.readonly {
+  background-color: #fafbfd;
+  border-color: #c4c6cc;
+}
+.bk-date-picker-rel .bk-date-picker-editor.medium-font {
+  font-size: 14px;
+}
+.bk-date-picker-rel .bk-date-picker-editor.large-font {
+  font-size: 16px;
+}
+.bk-date-picker-rel .clear-action {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  font-size: 14px;
+  color: #c4c6cc;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+.bk-date-picker-rel .clear-action:hover {
+  color: #979ba5;
+}
+.bk-date-picker-rel .icon-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  color: #c4c6cc;
+  cursor: pointer;
+  background-color: transparent;
+}
+.bk-date-picker-rel .icon-wrapper.disabled {
+  cursor: not-allowed;
+}
+.bk-date-picker-rel .icon-wrapper i.icon-clock {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.bk-date-picker-rel .icon-wrapper .picker-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 18px;
+  height: 18px;
+  transform: translate(-50%, -50%);
+}
+.bk-date-picker-dropdown {
+  position: absolute;
+  z-index: 900;
+  padding: 5px 0 0 0;
+  overflow: auto;
+  background-color: #fff;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.bk-date-picker .bk-select-dropdown {
+  max-height: none;
+  padding: 0;
+  overflow: visible;
+}
+.bk-date-picker-footer-wrapper {
+  clear: both;
+  font-size: 14px;
+  color: #979ba5;
+  background-color: #fafbfd;
+  border-top: 1px solid #dcdee5;
+}
+.bk-date-picker-top-wrapper {
+  margin-top: -5px;
+  clear: both;
+  font-size: 14px;
+  color: #979ba5;
+}
+.bk-picker-panel-body-wrapper.bk-picker-panel-with-sidebar {
+  padding-right: 140px;
+}
+.bk-picker-panel-sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 140px;
+  padding: 12px 0;
+  overflow: auto;
+  font-size: 14px;
+  color: #3a84ff;
+  background-color: #fafbfd;
+  border-left: 1px solid #dcdee5;
+}
+.bk-picker-panel-sidebar .bk-picker-panel-shortcut {
+  /* &:nth-of-type(1) {
+          padding-top: 18px;
+      }
+      &:last-child {
+          padding-bottom: 18px;
+      } */
+  padding: 6px 21px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.bk-picker-panel-sidebar .bk-picker-panel-shortcut:hover {
+  background-color: #e1ecff;
+}
+.bk-picker-panel-body {
+  float: left;
+}
+.bk-picker-confirm {
+  height: 42px;
+  padding: 0 20px;
+  clear: both;
+  font-size: 14px;
+  line-height: 41px;
+  text-align: right;
+  background-color: #fafbfd;
+  border-top: 1px solid #dcdee5;
+}
+.bk-picker-confirm a {
+  color: #979ba5;
+}
+.bk-picker-confirm a.confirm {
+  margin-left: 10px;
+  color: #3a84ff;
+}
+.bk-picker-confirm a[disabled] {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+.bk-picker-confirm .bk-picker-confirm-time {
+  float: left;
+}
+.bk-date-picker-header {
+  height: 46px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 46px;
+  color: #63656e;
+  text-align: center;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-date-picker-header .bk-date-picker-header-label {
+  cursor: pointer;
+}
+.bk-date-picker-header .bk-date-picker-header-label:hover {
+  color: #3a84ff;
+}
+.bk-date-picker-header .up-to-now {
+  margin-left: 3px;
+  font-weight: 400;
+  cursor: pointer;
+}
+.bk-date-picker-header .up-to-now.disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+.bk-date-picker-cells {
+  margin: 9px;
+  font-size: 12px;
+  color: #63656e;
+  white-space: normal;
+}
+.bk-date-picker-cells span {
+  display: inline-block;
+  width: 34px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+}
+.bk-date-picker-cells span em {
+  display: inline-block;
+  width: 34px;
+  height: 32px;
+  font-style: normal;
+  line-height: 32px;
+  cursor: pointer;
+}
+.bk-date-picker-cells .bk-date-picker-cells-header {
+  text-align: center;
+}
+.bk-date-picker-cells .bk-date-picker-cells-header span {
+  width: 28px;
+  height: 26px;
+  margin: 3px;
+  line-height: 26px;
+  color: #63656e;
+  text-align: center;
+  cursor: default;
+}
+.bk-date-picker-cells-cell:hover em {
+  /* background-color: #e1ecff; */
+  background-color: #f0f1f5;
+}
+.bk-date-picker-cells-focused em {
+  color: #3a84ff;
+  box-shadow: 0 0 0 1px #a3c5fd inset;
+}
+.bk-date-picker-cells-cell-prev-month em,
+.bk-date-picker-cells-cell-next-month em {
+  color: #c4c6cc;
+}
+.bk-date-picker-cells-cell-prev-month:hover em,
+.bk-date-picker-cells-cell-next-month:hover em {
+  background: transparent;
+}
+span.bk-date-picker-cells-cell-week-label,
+span.bk-date-picker-cells-cell-week-label:hover,
+span.bk-date-picker-cells-cell-disabled,
+span.bk-date-picker-cells-cell-disabled:hover {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+span.bk-date-picker-cells-cell-week-label em,
+span.bk-date-picker-cells-cell-week-label:hover em,
+span.bk-date-picker-cells-cell-disabled em,
+span.bk-date-picker-cells-cell-disabled:hover em {
+  color: inherit;
+  cursor: not-allowed;
+  background: inherit;
+}
+span.bk-date-picker-cells-cell-disabled,
+span.bk-date-picker-cells-cell-disabled:hover {
+  background-color: #f0f1f5;
+}
+.bk-date-picker-cells-cell-today em {
+  position: relative;
+  color: #3a84ff;
+  box-shadow: 0 0 0 1px #a3c5fd inset;
+}
+.bk-date-picker-cells-cell-range {
+  position: relative;
+}
+.bk-date-picker-cells-cell-range:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  background: #e1ecff;
+  border: 0;
+  border-radius: 0;
+  content: '';
+}
+.bk-date-picker-cells-cell-range em {
+  position: relative;
+  z-index: 1;
+}
+.bk-date-picker-cells-cell-selected em,
+.bk-date-picker-cells-cell-selected:hover em {
+  color: #fff;
+  background-color: #3a84ff;
+  box-shadow: 0 0 0 1px #3a84ff inset;
+}
+span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
+  color: #f7f7f7;
+  background: #c4c6cc;
+}
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:after {
+  background: #fff;
+}
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em,
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:hover {
+  box-shadow: 0 0 0 1px #3a84ff inset;
+}
+.bk-date-picker-cells-year,
+.bk-date-picker-cells-month {
+  margin-top: 7px;
+}
+.bk-date-picker-cells-year span,
+.bk-date-picker-cells-month span {
+  width: 36px;
+  height: 32px;
+  margin: 10px 12px;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 3px;
+}
+.bk-date-picker-cells-year span em,
+.bk-date-picker-cells-month span em {
+  width: 36px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+}
+.bk-picker-panel-icon-btn {
+  display: inline-block;
+  width: 20px;
+  height: 46px;
+  line-height: 44px;
+  color: #979ba5;
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.2s ease-in-out;
+}
+.bk-picker-panel-icon-btn:hover {
+  color: #2d8cf0;
+}
+.bk-picker-panel-icon-btn i {
+  font-size: 20px;
+}
+.bk-date-picker-prev-btn {
+  float: left;
+}
+.bk-date-picker-prev-btn-arrow-double {
+  margin-left: 10px;
+}
+.bk-date-picker-prev-btn-arrow-double i:after {
+  margin-left: -8px;
+}
+.bk-date-picker-next-btn {
+  float: right;
+}
+.bk-date-picker-next-btn-arrow-double {
+  margin-right: 10px;
+}
+.bk-date-picker-next-btn-arrow-double i:after {
+  margin-left: -8px;
+}
+.bk-date-picker-with-range .bk-picker-panel-body {
+  min-width: 532px;
+}
+.bk-date-picker-with-range .bk-picker-panel-content {
+  float: left;
+}
+.bk-date-picker-with-range .bk-picker-cells-show-week-numbers {
+  min-width: 492px;
+}
+.bk-date-picker-transfer {
+  z-index: 1060;
+  max-height: none;
+}
+.bk-fade-down-transition-enter-from,
+.bk-fade-down-transition-leave-to {
   opacity: 0;
+  transform: translateY(-20px);
+}
+.bk-fade-down-transition-enter-to,
+.bk-fade-down-transition-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+.bk-fade-down-transition-enter-active {
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+.bk-fade-down-transition-leave-active {
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+.bk-divider {
+  position: relative;
+  background: #c4c6cc;
+}
+.bk-divider-horizontal {
+  width: 100%;
+  height: 1px;
+  margin: 1em 0;
+}
+.bk-divider-info {
+  position: absolute;
+  top: 50%;
+  padding: 0 1.4em;
+  color: #63656e;
+  background-color: white;
+  transform: translateY(-50%);
+}
+.bk-divider-info-center {
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+.bk-divider-info .bk-divider-horizontal-left {
+  left: 2em;
+}
+.bk-divider-info .bk-divider-horizontal-right {
+  right: 2em;
+}
+.bk-divider-vertical .bk-divider-info {
+  padding: 20px 0;
+}
+.bk-divider-vertical {
+  display: inline-block;
+  width: 1px;
+  height: 100%;
+  min-height: 1em;
+  margin: 0 8px;
+  vertical-align: middle;
+}
+.bk-tab {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+.bk-tab--top {
+  flex-direction: column;
+}
+.bk-tab--right {
+  flex-direction: row-reverse;
+}
+.bk-tab-header {
+  display: flex;
+  color: #63656e;
+}
+.bk-tab-header > div {
+  display: flex;
+  margin-bottom: -1px;
+  flex-wrap: nowrap;
+}
+.bk-tab--card .bk-tab-header > div,
+.bk-tab--border-card .bk-tab-header > div {
+  border-right: 1px solid #dcdee5;
+}
+.bk-tab--top .bk-tab-header-nav {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+.bk-tab--left .bk-tab-header-nav,
+.bk-tab--right .bk-tab-header-nav {
+  overflow-x: visible;
+  overflow-y: auto;
+}
+.bk-tab--card .bk-tab-header-nav,
+.bk-tab--border-card .bk-tab-header-nav {
+  border-left: 1px solid #dcdee5;
+}
+.bk-tab-header-nav::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding: 0 12px;
+}
+.bk-tab--left .bk-tab-header {
+  border-right: 1px solid #dcdee5;
+}
+.bk-tab--right .bk-tab-header {
+  border-left: 1px solid #dcdee5;
+}
+.bk-tab--left .bk-tab-header,
+.bk-tab--right .bk-tab-header {
+  flex-direction: column;
+}
+.bk-tab--left .bk-tab-header > div,
+.bk-tab--right .bk-tab-header > div {
+  flex-direction: column;
+}
+.bk-tab--card .bk-tab-header {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab--border-card .bk-tab-header {
+  background: #FAFBFD;
+  border: solid #dcdee5;
+  border-width: 1px 1px 1px 0;
+}
+.bk-tab--unborder-card .bk-tab-header {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab-header-item {
+  display: flex;
+  white-space: nowrap;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+}
+.bk-tab-header-item:hover {
+  color: #3a84ff;
+}
+.bk-tab-header-item:hover .bk-tab-header-item-close {
+  display: block;
+  margin-left: 10px;
+  color: #ea3636;
+}
+.bk-tab--top .bk-tab-header-item {
+  padding: 0 20px;
+}
+.bk-tab--left .bk-tab-header-item,
+.bk-tab--right .bk-tab-header-item {
+  padding: 0 12px;
+}
+.bk-tab--left .bk-tab-header-item {
+  text-align: right;
+}
+.bk-tab--card .bk-tab-header-item {
+  border-top: 1px solid #dcdee5;
+}
+.bk-tab--card .bk-tab-header-item,
+.bk-tab--border-card .bk-tab-header-item {
+  border-right: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab--card .bk-tab-header-item:last-of-type,
+.bk-tab--border-card .bk-tab-header-item:last-of-type {
+  border-right: none;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.bk-tab-header-item-close {
+  display: none;
+  color: #c4c6cc;
+}
+.bk-tab-header--active {
+  color: #3a84ff;
+}
+.bk-tab--card .bk-tab-header--active,
+.bk-tab--border-card .bk-tab-header--active {
+  border-bottom-color: white;
+}
+.bk-tab--unborder-card .bk-tab-header--active {
+  border-bottom: 2px solid #3a84ff;
+}
+.bk-tab--left .bk-tab-header--active {
+  border-right: 2px solid #3a84ff;
+}
+.bk-tab--right .bk-tab-header--active {
+  border-left: 2px solid #3a84ff;
+}
+.bk-tab-header--disabled {
+  color: #aaa;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.bk-tab-content {
+  flex: 1;
+  padding: 10px;
+}
+.bk-tab--border-card .bk-tab-content {
+  border: solid #dcdee5;
+  border-width: 0 1px 1px;
+}
+.bk-tab-panel {
+  height: 100%;
+}
+* {
+  box-sizing: border-box;
+}
+.bk-process {
+  position: relative;
+  display: flex;
+}
+@keyframes loadingCircle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.bk-process .bk-process-toggle {
+  position: relative;
+  left: 15px;
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  color: #63656e;
+  text-align: center;
+  text-decoration: none;
+  border: 1px solid #c4c6cc;
+  border-radius: 50%;
+}
+.bk-process .bk-process-toggle.active,
+.bk-process .bk-process-toggle:hover {
+  color: #fff;
+  background: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-process .bk-process-icon-done {
+  display: inline-block;
+  font-size: 22px;
+  line-height: 18px;
+}
+.bk-process .bk-icon.icon-loading {
+  display: inline-block;
+  font-size: 14px;
+  animation: loadingCircle 1s infinite linear;
+}
+.bk-process > ul {
+  -ms-display: flex;
+  -moz-display: flex;
+  -webkit-display: flex;
+  display: table;
+  display: flex;
+  width: 100%;
+  padding: 0;
+  margin: auto;
+}
+.bk-process li {
+  position: relative;
+  display: table-cell;
+  height: 24px;
+  font-family: PingFang SC,Microsoft Yahei,Helvetica,Aria;
+  font-size: 12px;
+  line-height: 24px;
+  color: #63656e;
+  text-align: center;
+  background-color: #f0f1f5;
+  flex: 1;
+}
+.bk-process li i {
+  display: none;
+}
+.bk-process li:first-of-type {
+  border-radius: 13px 0 0 13px;
+}
+.bk-process li:last-of-type {
+  border-radius: 0 13px 13px 0;
+}
+.bk-process li:last-of-type::before {
+  display: none;
+}
+.bk-process li:last-of-type::after {
+  display: none;
+}
+.bk-process li::before {
+  position: absolute;
+  top: 0;
+  right: -25px;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  border: 12px solid;
+  border-color: transparent transparent transparent #fff;
+  content: '';
+}
+.bk-process li::after {
+  position: absolute;
+  top: 0;
+  right: -23px;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  border: 12px solid;
+  border-color: transparent transparent transparent #f0f1f5;
+  content: '';
+}
+.bk-process li .bk-process-step {
+  font-size: 12px;
+}
+.bk-process li .bk-process-step dd {
+  margin: 0;
+  line-height: 32px;
+}
+.bk-process li .bk-process-step i {
+  display: none;
+}
+.bk-process li .bk-process-step .success i {
+  display: inline-block;
+  color: #2dcb56;
+}
+.bk-process li .bk-process-step .steps-loading {
+  top: -2px;
+}
+.bk-process li.success {
+  color: #fff;
+  background: #2dcb56;
+}
+.bk-process li.success::after {
+  border-color: transparent transparent transparent #2dcb56;
+}
+.bk-process li.success .icon-done {
+  font-size: 22px;
+  line-height: 18px;
+}
+.bk-process li.current {
+  color: #fff;
+  background: #3a84ff;
+}
+.bk-process li.current::after {
+  border-color: transparent transparent transparent #3a84ff;
+}
+.bk-process li.current > .bk-spin-loading {
+  vertical-align: -3px;
+}
+.bk-virtual-render {
+  position: relative;
+}
+.bk-virtual-render .bk-virtual-content,
+.bk-virtual-render.bk-virtual-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.bk-virtual-render .bk-virtual-section {
+  width: 1px;
+  background: transparent;
+}
+.bk-virtual-render.bk-scroll-x {
+  overflow-x: auto;
+  scrollbar-color: #a0a0a0 transparent;
+  scrollbar-width: thin;
+}
+.bk-virtual-render.bk-scroll-x::-webkit-scrollbar {
+  height: 8px;
+  background-color: transparent;
+}
+.bk-virtual-render.bk-scroll-x::-webkit-scrollbar-thumb {
+  background-color: #a0a0a0;
+  border-radius: 8px;
+}
+.bk-virtual-render.bk-scroll-y {
+  overflow-y: auto;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar {
+  width: 6px;
+  background-color: transparent;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar-thumb {
+  background-color: #dcdee5;
+  border-radius: 6px;
+}
+/* 边框色 */
+/* 按钮、表单边框颜色、禁用时文本颜色 */
+/* 表格头部背景色、禁用底色 */
+/* 大面积背景色 */
+/* 重点表示、强调、链接以及带有明确指示性 */
+/* 正常尺寸图标 */
+.bk-transfer {
+  position: relative;
+  display: flex;
+  font-size: 14px;
+  flex-direction: row;
+  justify-content: center;
+}
+.bk-transfer .transfer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30px;
+  height: 30px;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAKCAYAAABv7tTEAAAAV0lEQVQokZXQQQrAIAxE0W/JvU3O1nXXHqdd1EBbqYwDIgGfMCn70RBSgchhUwTgHQJgwLkAAcJE8IIGlEUodxqQc/eST6IYvpskF+H9rggdn9vzv0ffXGG8Ffrmgf5jAAAAAElFTkSuQmCC') no-repeat center center;
+  transform: translate(-50%, -50%);
+}
+.bk-transfer .source-list,
+.bk-transfer .target-list {
+  height: 400px;
+  min-width: 200px;
+  overflow: hidden;
+  background-color: #fff;
+  border: 1px solid #dde4eb;
+  border-radius: 2px;
+  flex: 1;
+}
+.bk-transfer .source-list .slot-header,
+.bk-transfer .target-list .slot-header {
+  position: relative;
+  height: 43px;
+  padding: 0 20px;
+  line-height: 43px;
+  background-color: #fafbfd;
+  border-bottom: 1px solid #dde4eb;
+}
+.bk-transfer .source-list .slot-header .slot-content,
+.bk-transfer .target-list .slot-header .slot-content {
+  position: relative;
+}
+.bk-transfer .source-list .header,
+.bk-transfer .target-list .header {
+  position: relative;
+  height: 43px;
+  padding: 0 20px;
+  line-height: 43px;
+  background-color: #fafbfd;
+  border-bottom: 1px solid #dde4eb;
+}
+.bk-transfer .source-list .header span,
+.bk-transfer .target-list .header span {
+  position: absolute;
+  right: 10px;
+  font-size: 12px;
+  color: #3a84ff;
+  cursor: pointer;
+}
+.bk-transfer .source-list .header span.disabled,
+.bk-transfer .target-list .header span.disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+.bk-transfer .source-list .empty,
+.bk-transfer .target-list .empty {
+  position: relative;
+  top: 40%;
+  width: 100%;
+  color: #c4c6cc;
+  text-align: center;
+  cursor: default;
+}
+.bk-transfer .source-list .content,
+.bk-transfer .target-list .content {
+  position: relative;
+  max-height: calc(100% - 50px);
+  padding: 0;
+  margin: 6px 0;
+  overflow-y: auto;
+}
+.bk-transfer .source-list .content.is-search,
+.bk-transfer .target-list .content.is-search {
+  max-height: calc(100% - 86px);
+}
+.bk-transfer .source-list .content li.custom-item,
+.bk-transfer .target-list .content li.custom-item,
+.bk-transfer .source-list .content li .item-content,
+.bk-transfer .target-list .content li .item-content {
+  position: relative;
+  display: flex;
+  height: 40px;
+  padding: 0 20px;
+  line-height: 40px;
+  list-style: none;
+  cursor: pointer;
+  align-items: center;
+}
+.bk-transfer .source-list .content li.custom-item:hover,
+.bk-transfer .target-list .content li.custom-item:hover,
+.bk-transfer .source-list .content li .item-content:hover,
+.bk-transfer .target-list .content li .item-content:hover {
+  color: #3a84ff;
+  background-color: #eef6fe;
+}
+.bk-transfer .source-list .content li.custom-item .content-text,
+.bk-transfer .target-list .content li.custom-item .content-text,
+.bk-transfer .source-list .content li .item-content .content-text,
+.bk-transfer .target-list .content li .item-content .content-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.bk-transfer .source-list .content li.custom-item .icon-wrapper,
+.bk-transfer .target-list .content li.custom-item .icon-wrapper,
+.bk-transfer .source-list .content li .item-content .icon-wrapper,
+.bk-transfer .target-list .content li .item-content .icon-wrapper {
+  display: none;
+  flex: 22px 0 0;
+}
+.bk-transfer .source-list .content li.custom-item .icon-wrapper.hover,
+.bk-transfer .target-list .content li.custom-item .icon-wrapper.hover,
+.bk-transfer .source-list .content li .item-content .icon-wrapper.hover,
+.bk-transfer .target-list .content li .item-content .icon-wrapper.hover {
+  display: inline-block;
+}
+.bk-transfer .source-list .content::-webkit-scrollbar,
+.bk-transfer .target-list .content::-webkit-scrollbar {
+  width: 4px;
+}
+.bk-transfer .source-list .content::-webkit-scrollbar-thumb,
+.bk-transfer .target-list .content::-webkit-scrollbar-thumb {
+  height: 5px;
+  background-color: #e6e9ea;
+  border-radius: 2px;
+}
+.bk-transfer .source-list .content .bk-icon,
+.bk-transfer .target-list .content .bk-icon {
+  font-size: 22px;
+}
+.bk-transfer .target-list {
+  margin-left: 33px;
+}
+.bk-transfer .transfer-search-input {
+  height: 36px;
+  line-height: 34px;
+  border: none;
+  border-bottom: 1px solid #f0f1f5;
+  outline: none;
+}
+.bk-transfer .transfer-search-input.is-focused {
+  border-color: #f0f1f5;
+  box-shadow: 0px 0px 3px 0px transparent;
+}
+.bk-pagination {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  letter-spacing: normal;
+  color: #63656e;
+  user-select: none;
+}
+.bk-pagination.is-disabled {
+  cursor: not-allowed;
+}
+.bk-pagination.is-align-left {
+  justify-content: flex-start;
+}
+.bk-pagination.is-align-center {
+  justify-content: center;
+}
+.bk-pagination.is-align-right {
+  justify-content: flex-end;
+}
+.bk-pagination > * {
+  margin: 0 6px;
+}
+.bk-pagination > .is-first {
+  margin-left: 0;
+}
+.bk-pagination > .is-last {
+  margin-right: 0;
+}
+.bk-pagination-total {
+  display: flex;
+  user-select: none;
+}
+.bk-pagination-total-num {
+  padding: 0 2px;
+  color: #3f4046;
+}
+.bk-pagination-list {
+  display: flex;
+}
+.bk-pagination-list-pre,
+.bk-pagination-list-next,
+.bk-pagination-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  min-width: 32px;
+  padding: 0 4px;
+  margin-right: 2px;
+  margin-left: 2px;
+  color: #63656e;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  user-select: none;
+}
+.bk-pagination-list-pre:hover,
+.bk-pagination-list-next:hover,
+.bk-pagination-list-item:hover,
+.bk-pagination-list-pre.is-active,
+.bk-pagination-list-next.is-active,
+.bk-pagination-list-item.is-active {
+  color: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-pagination-list-pre.is-disabled,
+.bk-pagination-list-next.is-disabled,
+.bk-pagination-list-item.is-disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+  background-color: #fafbfd;
+  border-color: #dcdee5;
+}
+.bk-pagination-list-pre-batch,
+.bk-pagination-list-next-batch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  cursor: pointer;
+  user-select: none;
+}
+.bk-pagination-list-pre-batch:hover,
+.bk-pagination-list-next-batch:hover {
+  color: #3a84ff;
+}
+.bk-pagination-list-pre,
+.bk-pagination-list-next {
+  font-size: 14px;
+}
+.bk-pagination-list-item {
+  margin-right: 4px;
+  margin-left: 4px;
+}
+.bk-pagination-limit {
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+.bk-pagination-limit-select {
+  width: 60px;
+  margin: 0 4px;
+}
+.bk-pagination-small-list {
+  display: flex;
+}
+.bk-pagination-small-list .bk-pagination-picker {
+  display: flex;
+  height: 24px;
+  cursor: pointer;
+  background-color: #f0f1f5;
+  border: 1px solid #f0f1f5;
+  border-radius: 2px;
+  align-items: center;
+}
+.bk-pagination-small-list .bk-pagination-picker:hover {
+  background-color: #e1ecff;
+  border-color: #e1ecff;
+}
+.bk-pagination-small-list .bk-pagination-picker.is-focused {
+  background-color: #fff;
+  border-color: #3a84ff;
+  box-shadow: 0px 0px 4px rgba(58, 132, 255, 0.4);
+}
+.bk-pagination-editor {
+  height: 16px;
+  min-width: 14px;
+  padding-right: 4px;
+  padding-left: 8px;
+  line-height: 16px;
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+  border-radius: 2px;
+  outline: none;
+  transition: all 0.15s;
+}
+.bk-pagination-small-list-total {
+  padding-right: 8px;
+  padding-left: 4px;
+}
+.bk-pagination-btn-pre,
+.bk-pagination-btn-next {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  cursor: pointer;
+}
+.bk-pagination-btn-pre:hover,
+.bk-pagination-btn-next:hover {
+  color: #3a84ff;
+}
+.bk-pagination-btn-pre.is-disabled,
+.bk-pagination-btn-next.is-disabled {
+  color: #dcdee5;
+  cursor: not-allowed;
+}
+.bk-pagination-picker-list {
+  max-height: 216px;
+  padding: 7px 0;
+  margin: -7px -14px;
+  overflow: auto;
+}
+.bk-pagination-picker-list .item {
+  height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+  line-height: 32px;
+  color: #63656e;
+  cursor: pointer;
+}
+.bk-pagination-picker-list .item:hover,
+.bk-pagination-picker-list .item.is-actived {
+  color: #3a84ff;
+  background: #f4f6fa;
+}
+* {
+  box-sizing: border-box;
+}
+.bk-timeline {
+  padding: 0;
+  margin: 16px 0 0;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: left;
+  list-style: none;
+}
+.bk-timeline .bk-timeline-dot {
+  position: relative;
+  padding-bottom: 24px;
+  padding-left: 16px;
+  /* spacing 1px */
+  margin-top: 13px;
+  font-size: 0;
+  border-left: 1px solid #d8d8d8;
+}
+.bk-timeline .bk-timeline-dot::before {
+  position: absolute;
+  top: calc((11px + 1px) * -1);
+  left: -6px;
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  background: #fff;
+  border: 2px solid #d8d8d8;
+  border-radius: 50%;
+  content: '';
+  box-sizing: border-box;
+}
+.bk-timeline .bk-timeline-dot:last-child {
+  padding-bottom: 0;
+  /* 保留border使用间距保持一致 */
+  border-left: 1px solid transparent;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-title {
+  display: inline-block;
+  padding-bottom: 10px;
+  margin-top: -3px;
+  font-size: 14px;
+  color: #63656e;
+  cursor: pointer;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-content {
+  max-width: 300px;
+  font-size: 14px;
+  color: #666;
+  word-break: break-all;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-icon {
+  position: absolute;
+  top: calc((15px + 1px) * -1);
+  left: -8px;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: #fff;
+  border: 2px solid #d8d8d8;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner {
+  display: inline-block;
+  transform: scale(1) translate(-0.5px, -4px);
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner > :first-child {
+  font-size: 12px;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-section {
+  position: relative;
+  top: calc((11px + 2px) * -1);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-large {
+  margin-top: calc(15px + 2px);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-large::before {
+  top: calc((15px + 1px) * -1);
+  left: -8px;
+  width: 15px;
+  height: 15px;
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-large > .bk-timeline-section {
+  top: calc((15px + 1px) * -1);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon {
+  margin-top: calc(15px + 2px);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon::before {
+  display: none;
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon > .bk-timeline-section {
+  top: calc((15px + 1px) * -1);
+}
+.bk-timeline .bk-timeline-dot:first-child {
+  margin-top: 0;
+}
+.bk-timeline .bk-timeline-primary {
+  border-left: 1px solid #3a84ff;
+}
+.bk-timeline .bk-timeline-primary::before,
+.bk-timeline .bk-timeline-primary .bk-timeline-icon {
+  color: #3a84ff;
+  border: 2px solid #3a84ff;
+}
+.bk-timeline .bk-timeline-primary.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-primary.bk-timeline-filled .bk-timeline-icon {
+  background: #3a84ff;
+}
+.bk-timeline .bk-timeline-warning {
+  border-left: 1px solid #ff9c01;
+}
+.bk-timeline .bk-timeline-warning::before,
+.bk-timeline .bk-timeline-warning .bk-timeline-icon {
+  color: #ff9c01;
+  border: 2px solid #ff9c01;
+}
+.bk-timeline .bk-timeline-warning.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-warning.bk-timeline-filled .bk-timeline-icon {
+  background: #ff9c01;
+}
+.bk-timeline .bk-timeline-success {
+  border-left: 1px solid #2dcb56;
+}
+.bk-timeline .bk-timeline-success::before,
+.bk-timeline .bk-timeline-success .bk-timeline-icon {
+  color: #2dcb56;
+  border: 2px solid #2dcb56;
+}
+.bk-timeline .bk-timeline-success.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-success.bk-timeline-filled .bk-timeline-icon {
+  background: #2dcb56;
+}
+.bk-timeline .bk-timeline-danger {
+  border-left: 1px solid #ea3636;
+}
+.bk-timeline .bk-timeline-danger::before,
+.bk-timeline .bk-timeline-danger .bk-timeline-icon {
+  color: #ea3636;
+  border: 2px solid #ea3636;
+}
+.bk-timeline .bk-timeline-danger.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-danger.bk-timeline-filled .bk-timeline-icon {
+  background: #ea3636;
+}
+.bk-timeline .bk-timeline-blue::before,
+.bk-timeline .bk-timeline-blue .bk-timeline-icon {
+  color: #3a84ff;
+  border: 2px solid #3a84ff;
+}
+.bk-timeline .bk-timeline-blue.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-blue.bk-timeline-filled .bk-timeline-icon {
+  background: #3a84ff;
+}
+.bk-timeline .bk-timeline-red::before,
+.bk-timeline .bk-timeline-red .bk-timeline-icon {
+  color: #ea3636;
+  border: 2px solid #ea3636;
+}
+.bk-timeline .bk-timeline-red.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-red.bk-timeline-filled .bk-timeline-icon {
+  background: #ea3636;
+}
+.bk-timeline .bk-timeline-green::before,
+.bk-timeline .bk-timeline-green .bk-timeline-icon {
+  color: #2dcb56;
+  border: 2px solid #2dcb56;
+}
+.bk-timeline .bk-timeline-green.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-green.bk-timeline-filled .bk-timeline-icon {
+  background: #2dcb56;
+}
+.bk-timeline .bk-timeline-yellow::before,
+.bk-timeline .bk-timeline-yellow .bk-timeline-icon {
+  color: #ff9c01;
+  border: 2px solid #ff9c01;
+}
+.bk-timeline .bk-timeline-yellow.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-yellow.bk-timeline-filled .bk-timeline-icon {
+  background: #ff9c01;
+}
+.bk-timeline .bk-timeline-gray::before,
+.bk-timeline .bk-timeline-gray .bk-timeline-icon {
+  color: #63656e;
+  border: 2px solid #63656e;
+}
+.bk-timeline .bk-timeline-gray.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-gray.bk-timeline-filled .bk-timeline-icon {
+  background: #63656e;
+}
+.bk-timeline-dashed .bk-step .bk-step-title::after,
+.bk-timeline-dashed .bk-step .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #c4c6cc 50%, transparent 0%);
+  background-position: bottom;
+  background-repeat: repeat-x;
+  background-size: 6px 1px;
+}
+.bk-timeline-solid .bk-step .bk-step-title::after,
+.bk-timeline-solid .bk-step .bk-step-indicator::after {
+  background-color: #c4c6cc;
+}
+.bk-timeline-vertical {
+  height: 100%;
+  flex-direction: column;
+}
+.bk-timeline-vertical .bk-step {
+  margin-right: 0;
+  margin-bottom: 8px;
+}
+.bk-timeline-vertical .bk-step .bk-step-title::after,
+.bk-timeline-vertical .bk-step .bk-step-indicator::after {
+  display: none;
+}
+.bk-timeline-vertical .bk-step::after {
+  position: absolute;
+  top: 32px;
+  left: 12px;
+  width: 1px;
+  height: 100%;
+  background-image: linear-gradient(#c4c6cc 50%, transparent 0%);
+  background-position: right;
+  background-repeat: repeat-y;
+  background-size: 1px 6px;
+  content: '';
+}
+.bk-timeline-vertical .bk-step .bk-step-title {
+  display: flex;
+  height: 100%;
+  margin-top: 0;
+  text-align: left;
+  align-items: center;
+}
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0px 0px 6px 0px;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
+}
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
 }