xrk-components 2.0.0-beta.4 → 2.0.0-beta.41

package/lib/index.css

@@ -10,6 +10,7 @@
   --xrk-color-danger-rgb: 255, 11, 11;
   --xrk-color-error-rgb: 255, 11, 11;
   --xrk-color-info-rgb: 144, 147, 153;
+  --xrk-color-primary2-rgb: 44, 130, 234;
   --xrk-font-size-extra-large: 20px;
   --xrk-font-size-large: 18px;
   --xrk-font-size-medium: 16px;
@@ -98,6 +99,15 @@
   --xrk-color-info-dark-1: rgb(132.2, 134.9, 140.3);
   --xrk-color-info-dark-2: rgb(120.4, 122.8, 127.6);
   --xrk-color-info-dark-3: rgb(108.6, 110.7, 114.9);
+  --xrk-color-primary2: #2c82ea;
+  --xrk-color-primary2-light-3: rgb(107.3, 167.5, 240.3);
+  --xrk-color-primary2-light-5: rgb(149.5, 192.5, 244.5);
+  --xrk-color-primary2-light-7: rgb(191.7, 217.5, 248.7);
+  --xrk-color-primary2-light-8: rgb(212.8, 230, 250.8);
+  --xrk-color-primary2-light-9: rgb(233.9, 242.5, 252.9);
+  --xrk-color-primary2-dark-1: rgb(42.2, 119.6, 213.2);
+  --xrk-color-primary2-dark-2: rgb(40.4, 109.2, 192.4);
+  --xrk-color-primary2-dark-3: rgb(38.6, 98.8, 171.6);
   --xrk-bg-color: #ffffff;
   --xrk-bg-color-page: #f2f3f5;
   --xrk-bg-color-overlay: #ffffff;
@@ -1489,6 +1499,39 @@
   border-color: var(--xrk-color-info-light-8);
 }
 
+.xrk-button--primary2 {
+  --xrk-button-text-color: var(--xrk-color-white);
+  --xrk-button-bg-color: var(--xrk-color-primary2);
+  --xrk-button-border-color: var(--xrk-color-primary2);
+  --xrk-button-outline-color: var(--xrk-color-primary2-light-5);
+  --xrk-button-active-color: var(--xrk-color-primary2-dark-2);
+  --xrk-button-hover-text-color: var(--xrk-color-white);
+  --xrk-button-hover-link-text-color: var(--xrk-color-primary2-light-5);
+  --xrk-button-hover-bg-color: var(--xrk-color-primary2-dark-1);
+  --xrk-button-hover-border-color: var(--xrk-color-primary2-dark-1);
+  --xrk-button-active-bg-color: var(--xrk-color-primary2-dark-2);
+  --xrk-button-active-border-color: var(--xrk-color-primary2-dark-2);
+  --xrk-button-disabled-text-color: var(--xrk-color-white);
+  --xrk-button-disabled-bg-color: var(--xrk-color-primary2-light-5);
+  --xrk-button-disabled-border-color: var(--xrk-color-primary2-light-5);
+}
+
+.xrk-button--primary2.is-plain, .xrk-button--primary2.is-text, .xrk-button--primary2.is-link {
+  --xrk-button-text-color: var(--xrk-color-primary2);
+  --xrk-button-bg-color: var(--xrk-color-primary2-light-9);
+  --xrk-button-border-color: var(--xrk-color-primary2-light-5);
+  --xrk-button-hover-text-color: var(--xrk-color-white);
+  --xrk-button-hover-bg-color: var(--xrk-color-primary2);
+  --xrk-button-hover-border-color: var(--xrk-color-primary2);
+  --xrk-button-active-text-color: var(--xrk-color-white);
+}
+
+.xrk-button--primary2.is-plain.is-disabled, .xrk-button--primary2.is-plain.is-disabled:hover, .xrk-button--primary2.is-plain.is-disabled:focus, .xrk-button--primary2.is-plain.is-disabled:active, .xrk-button--primary2.is-text.is-disabled, .xrk-button--primary2.is-text.is-disabled:hover, .xrk-button--primary2.is-text.is-disabled:focus, .xrk-button--primary2.is-text.is-disabled:active, .xrk-button--primary2.is-link.is-disabled, .xrk-button--primary2.is-link.is-disabled:hover, .xrk-button--primary2.is-link.is-disabled:focus, .xrk-button--primary2.is-link.is-disabled:active {
+  color: var(--xrk-color-primary2-light-5);
+  background-color: var(--xrk-color-primary2-light-9);
+  border-color: var(--xrk-color-primary2-light-8);
+}
+
 .xrk-button--large {
   --xrk-button-size: 40px;
   height: var(--xrk-button-size);
@@ -2641,6 +2684,35 @@
   background-color: var(--xrk-color-info-light-9);
 }
 
+.xrk-check-tag.xrk-check-tag--primary2.is-checked {
+  background-color: var(--xrk-color-primary2-light-8);
+  color: var(--xrk-color-primary2);
+}
+
+.xrk-check-tag.xrk-check-tag--primary2.is-checked:hover {
+  background-color: var(--xrk-color-primary2-light-7);
+}
+
+.xrk-check-tag.xrk-check-tag--primary2.is-checked.is-disabled {
+  background-color: var(--xrk-color-primary2-light-8);
+  color: var(--xrk-disabled-text-color);
+  cursor: not-allowed;
+}
+
+.xrk-check-tag.xrk-check-tag--primary2.is-checked.is-disabled:hover {
+  background-color: var(--xrk-color-primary2-light-8);
+}
+
+.xrk-check-tag.xrk-check-tag--primary2.is-disabled {
+  background-color: var(--xrk-color-primary2-light-9);
+  color: var(--xrk-disabled-text-color);
+  cursor: not-allowed;
+}
+
+.xrk-check-tag.xrk-check-tag--primary2.is-disabled:hover {
+  background-color: var(--xrk-color-primary2-light-9);
+}
+
 .xrk-checkbox-button {
   --xrk-checkbox-button-checked-bg-color: var(--xrk-color-primary);
   --xrk-checkbox-button-checked-text-color: var(--xrk-color-white);
@@ -10723,6 +10795,20 @@
   border-color: var(--xrk-link-text-color);
 }
 
+.xrk-link.xrk-link--primary2 {
+  --xrk-link-text-color: var(--xrk-color-primary2);
+  --xrk-link-hover-text-color: var(--xrk-color-primary2-light-3);
+  --xrk-link-disabled-text-color: var(--xrk-color-primary2-light-5);
+}
+
+.xrk-link.xrk-link--primary2:after {
+  border-color: var(--xrk-link-text-color);
+}
+
+.xrk-link.xrk-link--primary2.is-underline:hover:after {
+  border-color: var(--xrk-link-text-color);
+}
+
 :root {
   --xrk-loading-spinner-size: 42px;
   --xrk-loading-fullscreen-spinner-size: 50px;
@@ -13098,6 +13184,11 @@
   color: var(--xrk-result-color);
 }
 
+.xrk-result .icon-primary2 {
+  --xrk-result-color: var(--xrk-color-primary2);
+  color: var(--xrk-result-color);
+}
+
 .xrk-row {
   display: -webkit-box;
   display: -webkit-flex;
@@ -16893,6 +16984,12 @@
   --xrk-tag-hover-color: var(--xrk-color-info);
 }
 
+.xrk-tag.xrk-tag--primary2 {
+  --xrk-tag-bg-color: var(--xrk-color-primary2-light-9);
+  --xrk-tag-border-color: var(--xrk-color-primary2-light-8);
+  --xrk-tag-hover-color: var(--xrk-color-primary2);
+}
+
 .xrk-tag.is-hit {
   border-color: var(--xrk-color-primary);
 }
@@ -16937,6 +17034,10 @@
   --xrk-tag-text-color: var(--xrk-color-info);
 }
 
+.xrk-tag.xrk-tag--primary2 {
+  --xrk-tag-text-color: var(--xrk-color-primary2);
+}
+
 .xrk-tag .xrk-icon {
   border-radius: 50%;
   cursor: pointer;
@@ -16992,6 +17093,12 @@
   --xrk-tag-hover-color: var(--xrk-color-info-light-3);
 }
 
+.xrk-tag--dark.xrk-tag--primary2 {
+  --xrk-tag-bg-color: var(--xrk-color-primary2);
+  --xrk-tag-border-color: var(--xrk-color-primary2);
+  --xrk-tag-hover-color: var(--xrk-color-primary2-light-3);
+}
+
 .xrk-tag--dark.xrk-tag--primary {
   --xrk-tag-text-color: var(--xrk-color-white);
 }
@@ -17016,6 +17123,10 @@
   --xrk-tag-text-color: var(--xrk-color-white);
 }
 
+.xrk-tag--dark.xrk-tag--primary2 {
+  --xrk-tag-text-color: var(--xrk-color-white);
+}
+
 .xrk-tag--plain {
   --xrk-tag-bg-color: var(--xrk-fill-color-blank);
   --xrk-tag-bg-color: var(--xrk-fill-color-blank);
@@ -17059,6 +17170,12 @@
   --xrk-tag-hover-color: var(--xrk-color-info);
 }
 
+.xrk-tag--plain.xrk-tag--primary2 {
+  --xrk-tag-bg-color: var(--xrk-fill-color-blank);
+  --xrk-tag-border-color: var(--xrk-color-primary2-light-5);
+  --xrk-tag-hover-color: var(--xrk-color-primary2);
+}
+
 .xrk-tag.is-closable {
   padding-right: 5px;
 }
@@ -17120,6 +17237,10 @@
   border-color: var(--xrk-color-info);
 }
 
+.xrk-tag.xrk-tag--primary2.is-hit {
+  border-color: var(--xrk-color-primary2);
+}
+
 .xrk-text {
   --xrk-text-font-size: var(--xrk-font-size-base);
   --xrk-text-color: var(--xrk-text-color-regular);
@@ -17186,6 +17307,10 @@
   --xrk-text-color: var(--xrk-color-info);
 }
 
+.xrk-text.xrk-text--primary2 {
+  --xrk-text-color: var(--xrk-color-primary2);
+}
+
 .xrk-text > .xrk-icon {
   vertical-align: -2px;
 }
@@ -19478,9 +19603,62 @@
   padding: var(--xrk-mention-footer-padding);
   border-top: var(--xrk-mention-border);
 }
+.base-button-more[data-v-c71e9bd0] {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 12px;
+     -moz-column-gap: 12px;
+          column-gap: 12px;
+  row-gap: 5px;
+}
+.base-button-more.wrap[data-v-c71e9bd0] {
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+}
+.base-button-more[data-v-c71e9bd0] .xrk-popover.xrk-popper {
+  padding: 5px 0;
+}
+.base-button-more .xrk-button + .xrk-button[data-v-c71e9bd0] {
+  margin-left: 0;
+}
+.btn-group .btn[data-v-c71e9bd0] {
+  cursor: pointer;
+  min-height: 36px;
+  padding: 7px 10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.btn-group .btn.disabled[data-v-c71e9bd0] {
+  opacity: 0.9;
+  cursor: not-allowed;
+}
+.btn-group .btn[data-v-c71e9bd0]:hover {
+  color: #2c82ea;
+  background-color: #f0f0f0;
+}
 .xrk-custom-image-viewer[data-v-35819562] {
-  width: 500px;
-  height: 500px;
+  width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
 }
@@ -19492,9 +19670,6 @@
 .xrk-custom-image-viewer.hide-close[data-v-35819562] .xrk-image-viewer__close {
   display: none;
 }
-.base-radio-group[data-v-9d4003c2] .xrk-loading-spinner .circular {
-  width: 20px;
-}
 .base-radio[data-v-56d41f26].is-checked .xrk-radio__inner {
   background: var(--xrk-color-primary-light-9);
 }
@@ -19504,12 +19679,15 @@
 .base-radio[data-v-56d41f26] .xrk-loading-spinner .circular {
   width: 20px;
 }
-.base-checkbox-group[data-v-1e1f0947] .xrk-loading-spinner .circular {
+.base-radio-group[data-v-9d4003c2] .xrk-loading-spinner .circular {
   width: 20px;
 }
 .base-checkbox[data-v-53a67995] .xrk-loading-spinner .circular {
   width: 20px;
 }
+.base-checkbox-group[data-v-1e1f0947] .xrk-loading-spinner .circular {
+  width: 20px;
+}
 .base-tool-tip {
   max-width: 400px;
 }
@@ -19531,6 +19709,12 @@
 .base-input[data-v-36a4c1cb] .xrk-input__wrapper:has(input[disabled]) {
   pointer-events: none;
 }
+[data-v-13bddb91] .xrk-empty__description {
+  --xrk-empty-description-margin-top: 4px;
+}
+[data-v-13bddb91] .xrk-empty__description p {
+  color: var(--xrk-text-color-disabled);
+}
 @charset "UTF-8";
 .base-input-number.no-controls[data-v-0a3ed835] {
   width: 100%;
@@ -19602,8 +19786,51 @@
 .base-pagination[data-v-1a7c8335] .btn-next .xrk-icon {
   font-size: var(--xrk-font-size-medium);
 }
+.base-form-item[data-v-17eda5db] {
+  margin-bottom: 24px;
+}
 .base-form-item[data-v-17eda5db] .xrk-form-item__label {
-  font-weight: 700;
+  color: var(--xrk-text-color-secondary);
+  padding-right: 16px;
+}
+.base-form-item[data-v-17eda5db] .base-upload {
+  padding: 16px 8px;
+  border-radius: 2px;
+  border: 1px dashed #dfdfdf;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.xrk-search[data-v-a1781a06] > .xrk-form {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  gap: 16px;
+}
+.xrk-search[data-v-a1781a06] > .xrk-form .xrk-form-item {
+  margin-bottom: 0px;
+}
+.xrk-search[data-v-a1781a06] > .xrk-form .xrk-form-item__label {
+  padding-right: 6px !important;
+}
+.xrk-search[data-v-a1781a06] > .xrk-form .xrk-form-item__label-wrap {
+  margin-right: 0 !important;
+}
+.xrk-search[data-v-a1781a06] > .xrk-form .xrk-button + .xrk-button {
+  margin-left: 0;
+}
+.xrk-search .btn-group[data-v-a1781a06] {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  gap: 16px;
 }
 .base_text_title {
   min-height: var(--base-text-title-min-height, 54px);
@@ -19670,12 +19897,44 @@
 }
 .xrk-dialog .xrk-dialog__body {
   overflow: auto;
+  min-height: 24px;
+}
+.xrk-dialog .xrk-dialog__footer {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  padding: 16px 24px;
+  border-top: 1px solid #f0f0f0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .base-upload[data-v-75b461d5] {
   line-height: 1.4;
 }
-.xrk-upload__list[data-v-75b461d5] {
-  margin-top: 6px;
+.base-upload[data-v-75b461d5] .xrk-upload--text {
+  display: none;
+}
+.base-upload[data-v-75b461d5] .xrk-upload__tip {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  color: var(--xrk-text-color-disabled);
+  font-size: var(--xrk-font-size-base);
+}
+.base-upload[data-v-75b461d5] .xrk-upload__tip:empty {
+  display: none;
+}
+.c > *[data-v-75b461d5] {
+  margin-top: 10px;
+}
+.c > *[data-v-75b461d5]:first-child {
+  margin-top: 0;
 }
 .xrk-upload__list.picture[data-v-75b461d5] {
   display: -webkit-box;
@@ -19685,6 +19944,7 @@
   -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
+  gap: 12px;
 }
 .xrk-upload__text--right[data-v-75b461d5] {
   display: inline-block;
@@ -19693,6 +19953,9 @@
   display: none;
 }
 .xrk-upload__item[data-v-75b461d5] {
+  padding: 10px;
+  background: #f3f3f3;
+  border-radius: 2px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -19701,20 +19964,7 @@
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  cursor: pointer;
-  padding: 6px 4px;
-}
-.xrk-upload__item[data-v-75b461d5]:hover {
-  background: var(--xrk-fill-color-light);
-}
-.xrk-upload__item:hover .xrk-upload__item_name[data-v-75b461d5] {
-  color: var(--xrk-color-primary);
-}
-.xrk-upload__item:hover .xrk-upload__item_icon__del[data-v-75b461d5] {
-  opacity: 0.7;
-  pointer-events: inherit;
+  gap: 4px;
 }
 .xrk-upload__item_icon[data-v-75b461d5] {
   -webkit-flex-shrink: 0;
@@ -19722,29 +19972,9 @@
           flex-shrink: 0;
   line-height: 1;
 }
-.xrk-upload__item_icon__del[data-v-75b461d5] {
-  line-height: 1;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  opacity: 0;
-  pointer-events: none;
-}
-.xrk-upload__item_icon__del[data-v-75b461d5]:hover {
-  opacity: 1;
-}
-.xrk-upload__item_name[data-v-75b461d5] {
+.xrk-upload__item[data-v-75b461d5] .xrk-tooltip__trigger {
   font-size: 14px;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  padding: 0 4px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-.xrk-upload__item_name[data-v-75b461d5] .xrk-tooltip__trigger {
+  color: #898989;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
@@ -19752,23 +19982,23 @@
   -webkit-line-clamp: 1;
   white-space: initial;
   word-break: break-all;
+  margin-top: 1px;
 }
 .xrk-upload__item_img[data-v-75b461d5] {
-  width: 140px;
-  height: 140px;
+  width: 88px;
+  height: 88px;
   position: relative;
-  overflow: hidden;
-  border-radius: 4px;
-  border: 1px dashed var(--xrk-border-color);
-  margin: 0 8px 8px 0;
 }
 .xrk-upload__item_img > img[data-v-75b461d5] {
+  border-radius: 2px;
+  border: 1px dashed #dfdfdf;
+  background: #fafafa;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
-.xrk-upload__item_img:hover .xrk-upload__item_img_operate[data-v-75b461d5] {
+.xrk-upload__item_img > img:hover ~ .xrk-upload__item_img_operate[data-v-75b461d5] {
   pointer-events: initial;
   opacity: 1;
   background: rgba(0, 0, 0, 0.5);
@@ -19795,52 +20025,27 @@
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
+  z-index: 1;
+}
+.xrk-upload__item_img_operate[data-v-75b461d5]:hover {
+  pointer-events: initial;
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.5);
 }
 .xrk-upload__item_img_operate > div[data-v-75b461d5] {
   cursor: pointer;
 }
-.xrk-search[data-v-a1781a06] > .xrk-form {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
-  gap: 16px;
-}
-.xrk-search[data-v-a1781a06] > .xrk-form .xrk-form-item {
-  margin-bottom: 0px;
-}
-.xrk-search[data-v-a1781a06] > .xrk-form .xrk-form-item__label {
-  padding-right: 6px !important;
-}
-.xrk-search[data-v-a1781a06] > .xrk-form .xrk-form-item__label-wrap {
-  margin-right: 0 !important;
-}
-.xrk-search[data-v-a1781a06] > .xrk-form .xrk-button + .xrk-button {
-  margin-left: 0;
-}
-.xrk-search .btn-group[data-v-a1781a06] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
-  gap: 16px;
+.xrk-form-grid[data-v-67a1b635] {
+  display: grid;
+  grid-template-columns: repeat(var(--column-count, 1), 1fr);
+  -webkit-column-gap: 24px;
+     -moz-column-gap: 24px;
+          column-gap: 24px;
 }
 .xrk-table[data-v-968a9a5a] tr td .cell {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
   line-height: normal;
+  font-size: var(--xrk-font-size-base);
+  color: var(--xrk-text-color-secondary);
 }
 .xrk-table[data-v-968a9a5a] tr .is-left .cell {
   -webkit-box-pack: start;
@@ -19874,17 +20079,9 @@
   right: 0;
 }
 .base-table[data-v-968a9a5a] th.xrk-table__cell > .cell {
-  color: #333;
-  font-weight: normal;
-}
-.base-table-column[data-v-2a64ae40] .xrk-tooltip__trigger {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  white-space: initial;
-  word-break: break-all;
+  font-size: var(--xrk-font-size-base);
+  color: var(--xrk-color-black);
+  font-weight: var(--xrk-font-weight-primary);
 }
 .table-base-checkbox[data-v-2a64ae40] .xrk-loading-mask {
   background-color: transparent;
@@ -19903,26 +20100,26 @@
   height: 24px;
 }
 .base-layout-flex-content[data-v-4fbb1d70] {
+  width: 100%;
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.base-layout-flex-content.fix[data-v-4fbb1d70] {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  width: 100%;
   height: 100%;
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
 }
-.base-layout-flex-content > .content[data-v-4fbb1d70] {
+.base-layout-flex-content.fix > .content[data-v-4fbb1d70] {
   position: absolute;
+}
+.base-layout-flex-content > .content[data-v-4fbb1d70] {
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
-  padding-top: var(--base-layout-flex-content-padding-top, 0px);
-  padding-right: var(--base-layout-flex-content-padding-right, 0px);
-  padding-bottom: var(--base-layout-flex-content-padding-bottom, 0px);
-  padding-left: var(--base-layout-flex-content-padding-left, 0px);
 }
 .base-layout-header[data-v-cbf300d0] {
   --base-layout-header-height: 64px;
@@ -19931,6 +20128,52 @@
           box-sizing: border-box;
   border-bottom: 1px solid #eaebed;
   background-color: #fff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.base-layout-header .left[data-v-cbf300d0] {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0 16px;
+  gap: 8px;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+.base-layout-header .left .name[data-v-cbf300d0] {
+  font-weight: bold;
+  color: var(--xrk-text-color-primary);
+}
+.base-layout-header .right[data-v-cbf300d0] {
+  height: 100%;
+}
+[data-v-d2a5b0d6] .xrk-breadcrumb__inner,[data-v-d2a5b0d6] .xrk-breadcrumb__separator {
+  color: #909090 !important;
+  font-weight: 400 !important;
+  font-size: var(--xrk-font-size-extra-small);
+}
+[data-v-d2a5b0d6] .xrk-breadcrumb__inner.is-link:hover {
+  color: var(--xrk-color-primary) !important;
+}
+[data-v-d2a5b0d6] .xrk-breadcrumb__item:last-child .xrk-breadcrumb__inner {
+  color: #636363 !important;
 }
 .base-layout-body[data-v-b5383626] {
   width: 100%;
@@ -19946,29 +20189,204 @@
           flex-direction: column;
 }
 .base-layout-body > .content[data-v-b5383626] {
-  --base-layout-flex-content-padding-top: 24px;
-  --base-layout-flex-content-padding-right: 16px;
-  --base-layout-flex-content-padding-bottom: 0;
-  --base-layout-flex-content-padding-left: 16px;
+  border-radius: 4px;
   background-color: var(--base-layout-body-bg, #fff);
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  overflow: auto;
+}
+.base-layout-body .body-top[data-v-b5383626] {
+  min-height: 10px;
 }
 .base-layout-menu[data-v-1bea9a2a] {
   width: 100%;
   height: 100%;
-  overflow: auto;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
-.base-layout-menu[data-v-1bea9a2a] .xrk-collapse-item__content {
+.base-layout-menu .main-menu[data-v-1bea9a2a] {
+  width: 100%;
+  height: 100%;
+}
+.base-layout-menu .main-menu[data-v-1bea9a2a] .xrk-collapse-item__content {
   padding-bottom: 0;
 }
-.base-layout-menu .menu-name-one[data-v-1bea9a2a] {
+.base-layout-menu .main-menu[data-v-1bea9a2a] .xrk-collapse-item__header {
+  color: var(--xrk-text-color-secondary);
+}
+.base-layout-menu .main-menu[data-v-1bea9a2a] .xrk-collapse-item__header.is-active, .base-layout-menu .main-menu[data-v-1bea9a2a] .xrk-collapse-item__header:hover {
+  color: var(--xrk-text-color-primary);
+  font-weight: var(--xrk-font-weight-primary);
+}
+.base-layout-menu .main-menu .menu-name-one[data-v-1bea9a2a] {
   padding-left: 12px;
   font-size: var(--xrk-font-size-base);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 6px;
 }
-.base-layout-menu .sub-menu[data-v-1bea9a2a] {
-  height: var(--xrk-collapse-header-height);
+.base-layout-menu .main-menu .menu-name-one img[data-v-1bea9a2a] {
+  width: 18px;
+  height: 18px;
+  -o-object-fit: contain;
+     object-fit: contain;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a] {
+  min-height: var(--xrk-collapse-header-height);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 10px;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  padding: 4px 12px 4px 18px;
+  color: var(--xrk-text-color-secondary);
+  cursor: pointer;
+  position: relative;
+  word-break: break-all;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a]::before {
+  content: "";
+  width: 3px;
+  height: 3px;
+  border-radius: 100%;
+  background-color: inherit;
+  display: inline;
+  background-color: var(--xrk-text-color-secondary);
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a]::after {
+  content: "";
+  width: 3px;
+  height: 100%;
+  background-color: var(--xrk-color-primary);
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+  opacity: 0;
+  -webkit-transition: all 0.15s;
+  transition: all 0.15s;
+}
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a]:hover, .base-layout-menu .main-menu .sub-menu.active[data-v-1bea9a2a] {
+  color: var(--xrk-color-primary);
+  background-color: var(--xrk-color-primary-light-9);
+  -webkit-transition: all 0.15s;
+  transition: all 0.15s;
+}
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a]:hover::before, .base-layout-menu .main-menu .sub-menu.active[data-v-1bea9a2a]::before {
+  background-color: var(--xrk-color-primary);
+}
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a]:hover::after, .base-layout-menu .main-menu .sub-menu.active[data-v-1bea9a2a]::after {
+  opacity: 1;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+}
+.base-layout-menu .sub-menus[data-v-1bea9a2a] {
+  position: absolute;
+  width: var(--base-layout-menu-sub-width, 150px);
+  height: 100%;
+  overflow: auto;
+  background-color: var(--xrk-fill-color-lighter);
+  top: 0;
+  right: 0;
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+  z-index: 9;
+  opacity: 0;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  padding: 21px 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.base-layout-menu .sub-menus.active[data-v-1bea9a2a] {
+  pointer-events: initial;
+  opacity: 1;
+}
+.base-layout-menu .sub-menus .content[data-v-1bea9a2a] {
+  overflow: auto;
+}
+.base-layout-menu .sub-menus .content .menu + .menu[data-v-1bea9a2a] {
+  margin-top: 48px;
+}
+.base-layout-menu .sub-menus .content .menu .name[data-v-1bea9a2a] {
+  font-size: var(--xrk-font-size-extra-small);
+  color: var(--xrk-text-color-disabled);
+  padding-bottom: var(--xrk-font-size-extra-small);
+  border-bottom: 1px solid #e5e5e5;
+  margin: 0 10px;
+  margin-bottom: var(--xrk-font-size-extra-small);
+  pointer-events: none;
+}
+.base-layout-menu .sub-menus .content .menu .name.no-child[data-v-1bea9a2a] {
+  cursor: pointer;
+  pointer-events: initial;
+}
+.base-layout-menu .sub-menus .content .menu .sub-menu[data-v-1bea9a2a] {
+  padding: 3px 10px;
+  min-height: 32px;
+  position: relative;
+  cursor: pointer;
+  font-size: var(--xrk-font-size-base);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  line-height: 1.8;
+}
+.base-layout-menu .sub-menus .content .menu .sub-menu[data-v-1bea9a2a]::after {
+  content: "";
+  width: 2px;
+  height: 100%;
+  background-color: var(--xrk-color-primary);
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+}
+.base-layout-menu .sub-menus .content .menu .sub-menu[data-v-1bea9a2a]:hover, .base-layout-menu .sub-menus .content .menu .sub-menu.active[data-v-1bea9a2a] {
+  color: var(--xrk-color-primary);
+  background-color: var(--xrk-color-primary-light-9);
+  -webkit-transition: all 0.15s;
+  transition: all 0.15s;
+}
+.base-layout-menu .sub-menus .content .menu .sub-menu[data-v-1bea9a2a]:hover::after, .base-layout-menu .sub-menus .content .menu .sub-menu.active[data-v-1bea9a2a]::after {
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
 }
 .base-layout-main[data-v-3f66cd84] {
   width: var(--base-layout-main-width, 100vw);
@@ -19996,13 +20414,11 @@
       -ms-flex-positive: 1;
           flex-grow: 1;
   width: 100%;
-  background-color: var(--base-layout-main-content, #f3f3f3);
+  background-color: var(--base-layout-main-content, #e3e6eb);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  gap: 10px;
-  padding-right: 10px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
@@ -20012,12 +20428,16 @@
           flex-shrink: 0;
   width: var(--base-layout-menu-width, 140px);
   background-color: #fff;
+  z-index: 3;
 }
 .base-layout-main > .content > .body[data-v-3f66cd84] {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  margin: 0 10px;
+  height: calc(100% - 10px);
+  z-index: 2;
 }
 .custom_xrk-table {
   width: 100%;
@@ -20031,6 +20451,7 @@
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
+  min-height: 200px;
 }
 .custom_xrk-table .xrk-pagination {
   height: 64px;
@@ -20039,9 +20460,6 @@
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
-.xrk-table-content {
-  height: initial !important;
-}
 .fade-enter-active[data-v-5d796c46],
 .fade-leave-active[data-v-5d796c46] {
   -webkit-transition: opacity 0.5s;