bkui-vue 0.0.1-beta.14 → 0.0.1-beta.17

package/dist/style.css

@@ -547,8 +547,17 @@ optgroup {
   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,
@@ -557,7 +566,7 @@ optgroup {
   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,
@@ -1153,6 +1162,7 @@ optgroup {
 .bk-input--suffix-icon {
   padding-right: 10px;
   font-size: 16px;
+  line-height: 1;
   color: #c4c6cc;
   align-self: center;
 }
@@ -1589,7 +1599,16 @@ optgroup {
 .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: 7px 14px;
   font-size: 12px;
@@ -1598,29 +1617,29 @@ optgroup {
   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;
   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;
@@ -1629,17 +1648,17 @@ optgroup {
   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 {
-  right: 0;
+.bk-popover-content[data-popper-placement^='left'] > .arrow {
+  right: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='right'] > .arrow {
-  left: -8px;
+.bk-popover-content[data-popper-placement^='right'] > .arrow {
+  left: -4px;
 }
 @keyframes loading-scale-animate {
   0% {
@@ -1719,9 +1738,6 @@ optgroup {
   width: 7%;
   text-align: center;
 }
-.bk-progress .process-circle-trail {
-  stroke: #f5f5f5;
-}
 .bk-progress .progress-circle-text {
   position: absolute;
   top: 50%;
@@ -1963,6 +1979,7 @@ optgroup {
   position: absolute;
   top: 6px;
   left: 4px;
+  font-size: 14px;
 }
 .bk-select .bk-select-trigger .angle-up {
   transform: rotate(180deg);
@@ -1994,6 +2011,38 @@ optgroup {
 .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-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;
@@ -2016,20 +2065,19 @@ optgroup {
   border-bottom: 1px solid #dcdee5;
   outline: 0;
 }
-.bk-select .bk-select-empty {
-  height: 32px;
-  font-size: 12px;
-  line-height: 32px;
-  color: #63656e;
-  text-align: center;
-  user-select: none;
+.bk-select .bk-select-extension {
+  display: flex;
+  height: 40px;
+  background-color: #fafbfd;
+  align-items: center;
 }
 .bk-select .bk-select-options {
-  padding: 6px 0;
+  padding: 8px 0;
 }
 .bk-select .bk-select-option {
+  position: relative;
   height: 32px;
-  padding: 0 10px;
+  padding: 0 20px 0 12px;
   line-height: 32px;
   color: #63656e;
   text-align: left;
@@ -2041,15 +2089,14 @@ optgroup {
 }
 .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';
@@ -2061,11 +2108,37 @@ optgroup {
 }
 .bk-select .bk-option-group-label {
   height: 32px;
-  margin: 0 10px;
+  padding: 0 8px;
   line-height: 32px;
   color: #979ba5;
   text-align: left;
-  border-bottom: 1px solid #dcdee5;
+}
+.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;
@@ -2160,181 +2233,181 @@ optgroup {
 .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;
@@ -2342,97 +2415,150 @@ optgroup {
 .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%;
-  height: 100%;
-  margin: 0;
-  cursor: pointer;
-  opacity: 0;
+.bk-switcher.bk-switcher-small.is-checked .bk-switcher-loading {
+  margin-left: -13px;
 }
-.bk-table .bk-table-body {
-  height: 500px;
+: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: auto;
+  border-top: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
+}
+.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-body table .cell {
-  height: 40px;
+.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: 40px;
+  line-height: var(--row-height);
+  color: #575961;
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-table .bk-table-body table th,
-.bk-table .bk-table-body table td {
-  min-width: 80px;
-  border-bottom: 1px solid #dfe0e5;
-}
+.bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: #fff;
+  color: #313238;
+  background-color: #fafbfd;
 }
-.bk-table .bk-table-body table thead th.active {
+.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.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: #fff;
+  background: white;
 }
 .bk-table colgroup col.active {
   position: relative;
@@ -2596,6 +2722,9 @@ optgroup {
 .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 {
@@ -2871,13 +3000,13 @@ optgroup {
   line-height: var(--lineHeight);
   cursor: pointer;
 }
-.bk-tree .bk-tree-node.is-open::after {
+.bk-tree .bk-tree-node.is-open:not(.is-virtual-render)::after {
   position: absolute;
-  top: calc(var(--lineHeight) / 2);
-  left: 0;
+  top: calc(var(--lineHeight) / 2 + 6px);
+  left: 6px;
   z-index: 1;
   width: 0;
-  height: calc(var(--lines) * var(--lineHeight));
+  height: calc(var(--lines) * var(--lineHeight) - 6px);
   pointer-events: none;
   border-left: var(--level-line);
   content: '';
@@ -2887,15 +3016,24 @@ optgroup {
 }
 .bk-tree .bk-tree-node:not(.is-root)::before {
   position: absolute;
-  top: 50%;
-  left: calc(0px - var(--indent));
+  top: calc(50% + 1px);
+  left: calc(0px - var(--indent) + 6px);
   z-index: 1;
-  width: var(--indent);
+  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;
 }
@@ -4039,9 +4177,8 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
 }
 .bk-process .bk-process-icon-done {
   display: inline-block;
-  height: 20px;
-  font-size: 21px;
-  line-height: 20px;
+  font-size: 22px;
+  line-height: 18px;
 }
 .bk-process .bk-icon.icon-loading {
   display: inline-block;
@@ -4145,6 +4282,281 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
 .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;
+}
+* {
+  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;