@fox-js/foxui-pc 4.1.1-39 → 4.1.1-40

package/dist/style.css

@@ -19,7 +19,7 @@
 }
 
 .foxFade-enter-active, .foxFadeIn, .foxFade-leave-active, .foxFadeOut {
-  animation-duration: var(--fox-animation-duration, .25s);
+  animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
   animation-fill-mode: both;
   animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
 }
@@ -59,7 +59,7 @@
 }
 
 .foxZoom-enter-active, .foxZoomIn, .foxZoom-leave-active, .foxZoomOut {
-  animation-duration: var(--fox-animation-duration, .25s);
+  animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
   animation-fill-mode: both;
   animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
 }
@@ -97,7 +97,7 @@
 }
 
 .foxEase-enter-active, .foxEaseIn, .foxEase-leave-active, .foxEaseOut {
-  animation-duration: var(--fox-animation-duration, .25s);
+  animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
   animation-fill-mode: both;
   animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
 }
@@ -135,7 +135,7 @@
 }
 
 .foxDrop-enter-active, .foxDropIn, .foxDrop-leave-active, .foxDropOut {
-  animation-duration: var(--fox-animation-duration, .25s);
+  animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
   animation-fill-mode: both;
   animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
 }
@@ -159,7 +159,7 @@
 }
 
 .foxRotate-enter-active, .foxRotateIn, .foxRotate-leave-active, .foxRotateOut {
-  animation-duration: var(--fox-animation-duration, .25s);
+  animation-duration: var(--fox-animation-duration, var(--el-transition-duration));
   animation-fill-mode: both;
   animation-timing-function: var(--fox-animation-timing-fun, cubic-bezier(.55, .085, .68, .53));
 }
@@ -281,9 +281,9 @@
 .fox-header-bar {
   min-height: var(--fox-header-bar-min-height, auto);
   box-sizing: var(--fox-header-bar-box-sizing, content-box);
-  background-color: var(--fox-header-bar-background-color, var(--fox-white, #fff));
-  color: var(--fox-header-bar-color, var(--fox-title-color, #1a1a1a));
-  box-shadow: var(--fox-header-bar-box-shadow, 0px 1px 7px 0px var(--fox-border-color-lighter, #ebeef5));
+  background-color: var(--fox-header-bar-background-color, var(--fox-white, var(--el-color-white)));
+  color: var(--fox-header-bar-color, var(--fox-title-color, var(--el-text-color-primary)));
+  box-shadow: var(--fox-header-bar-box-shadow, 0px 1px 7px 0px var(--fox-border-color-lighter, var(--el-border-color-lighter)));
   border: 0;
   flex-flow: column wrap;
   justify-content: center;
@@ -297,8 +297,8 @@
 }
 
 .fox-header-bar--border {
-  border-top: var(--fox-header-bar-border-top, 0px solid var(--fox-border-color-lighter, #ebeef5));
-  border-bottom: var(--fox-header-bar-border-bottom, 1px solid var(--fox-border-color-lighter, #ebeef5));
+  border-top: var(--fox-header-bar-border-top, 0px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
+  border-bottom: var(--fox-header-bar-border-bottom, 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
 }
 
 .fox-header-bar--fixed {
@@ -313,15 +313,15 @@
 }
 
 .fox-header-bar__title {
-  font-size: var(--fox-header-bar-title-font-size, var(--fox-font-size-medium, 16px));
+  font-size: var(--fox-header-bar-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   text-align: center;
   min-width: 53%;
   display: block;
 }
 
 .fox-header-bar__title .title-icon {
-  height: var(--fox-header-bar-title-icon-size, 18px);
-  width: var(--fox-header-bar-title-icon-size, 18px);
+  height: var(--fox-header-bar-title-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
+  width: var(--fox-header-bar-title-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
   margin-left: 13px;
   display: inline;
 }
@@ -335,7 +335,7 @@
 }
 
 .fox-header-bar__left {
-  font-size: var(--fox-header-bar-left-font-size, var(--fox-font-size-medium, 16px));
+  font-size: var(--fox-header-bar-left-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   cursor: pointer;
   padding: var(--fox-header-bar-left-padding, 0 16px);
   flex-flow: row;
@@ -347,12 +347,12 @@
 }
 
 .fox-header-bar__left .left-icon {
-  height: var(--fox-header-bar-left-icon-size, 18px);
-  width: var(--fox-header-bar-left-icon-size, 18px);
+  height: var(--fox-header-bar-left-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
+  width: var(--fox-header-bar-left-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
 }
 
 .fox-header-bar__right {
-  font-size: var(--fox-header-bar-right-font-size, var(--fox-font-size-medium, 16px));
+  font-size: var(--fox-header-bar-right-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   padding: var(--fox-header-bar-right-padding, 0 16px);
   cursor: pointer;
   align-items: center;
@@ -362,8 +362,8 @@
 }
 
 .fox-header-bar__right .right-icon {
-  height: var(--fox-header-bar-right-icon-size, 18px);
-  width: var(--fox-header-bar-right-icon-size, 18px);
+  height: var(--fox-header-bar-right-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
+  width: var(--fox-header-bar-right-icon-size, var(--fox-font-size-large, var(--el-font-size-large)));
   margin-left: 8px;
 }
 
@@ -404,7 +404,7 @@
   min-height: var(--fox-footer-bar-min-height, 50px);
   padding: var(--fox-footer-bar-padding, 7px 0);
   box-sizing: var(--fox-footer-bar-box-sizing, content-box);
-  background-color: var(--fox-footer-background-color, var(--fox-white, #fff));
+  background-color: var(--fox-footer-background-color, var(--fox-white, var(--el-color-white)));
   border: 0;
   flex-flow: row;
   display: flex;
@@ -412,8 +412,8 @@
 }
 
 .fox-footer-bar--border {
-  border-top: var(--fox-footer-bar-border-top, 1px solid var(--fox-border-color-lighter, #ebeef5));
-  border-bottom: var(--fox-footer-bar-border-bottom, 1px solid var(--fox-border-color-lighter, #ebeef5));
+  border-top: var(--fox-footer-bar-border-top, 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
+  border-bottom: var(--fox-footer-bar-border-bottom, 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter)));
 }
 
 .fox-footer-bar--fixed {
@@ -453,7 +453,7 @@
 
 .fox-content {
   box-sizing: border-box;
-  background-color: var(--fox-content-background-color, var(--fox-white, #fff));
+  background-color: var(--fox-content-background-color, var(--fox-white, var(--el-color-white)));
   display: block;
   overflow: hidden auto;
 }
@@ -581,8 +581,8 @@
 
 .fox-group__header-title {
   white-space: nowrap;
-  color: var(--fox-group-header-color, var(--fox-title-color, #1a1a1a));
-  font-size: var(--fox-group-header-font-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-group-header-color, var(--fox-title-color, var(--el-text-color-primary)));
+  font-size: var(--fox-group-header-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-group-header-font-weight, 400);
   line-height: var(--fox-group-header-line-height, 20px);
   display: inline-block;
@@ -591,10 +591,11 @@
 .fox-group__header-collapse {
   cursor: pointer;
   color: var(--fox-group-header-collapse-color, var(--fox-color-primary, var(--el-color-primary)));
-  flex-flow: row;
-  flex: none;
   justify-content: flex-start;
   align-items: center;
+  gap: var(--fox-group-header-collapse-gutter, 2px);
+  flex-flow: row;
+  flex: none;
   display: flex;
 }
 
@@ -603,8 +604,8 @@
 }
 
 .fox-group__header-collapse-icon {
-  width: var(--fox-group-header-collapse-icon-size, 30px);
-  height: var(--fox-group-header-collapse-icon-size, 30px);
+  width: var(--fox-group-header-collapse-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
+  height: var(--fox-group-header-collapse-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
   transition: transform .3s ease-in-out;
 }
 
@@ -617,7 +618,7 @@
 }
 
 .fox-group__header-collapse-text {
-  font-size: var(--fox-group-header-collapse-font-size, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-group-header-collapse-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-group__header-mark + .fox-group__header-title {
@@ -628,7 +629,7 @@
   width: var(--fox-input-item-width);
   min-width: var(--fox-input-item-min-width, 0);
   max-width: var(--fox-input-item-max-width);
-  padding: var(--fox-input-item-padding, 0);
+  padding: var(--fox-input-item-padding);
   margin: var(--fox-input-item-margin);
   background: var(--fox-input-item-background-color);
   box-sizing: border-box;
@@ -660,7 +661,7 @@
 }
 
 .fox-item__input--border {
-  border-bottom: var(--fox-input-item-border-bottom, 0px solid var(--fox-input-border-bottom, #eaf0fb));
+  border-bottom: var(--fox-input-item-border-bottom, 0px solid var(--fox-input-border-bottom, var(--fox-border-color-light, var(--el-border-color-light))));
 }
 
 .fox-item__main {
@@ -682,10 +683,10 @@
 
 .fox-item__main .label {
   box-sizing: border-box;
-  font-size: var(--fox-input-item-label-font-size, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-input-item-label-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-input-item-label-font-weight, 400);
   line-height: var(--fox-input-item-label-line-height, auto);
-  color: var(--fox-input-item-label-color, var(--fox-black, #000));
+  color: var(--fox-input-item-label-color, var(--fox-black, var(--el-color-black)));
   flex-flow: row;
   align-items: center;
   display: flex;
@@ -745,7 +746,7 @@
 }
 
 .fox-item__tip {
-  font-size: var(--fox-input-item-tip-font-size, var(--fox-font-size-small, 12px));
+  font-size: var(--fox-input-item-tip-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
   line-height: var(--fox-input-item-tip-height, 16px);
   text-align: left;
   padding-left: var(--fox-input-item-label-width, 30%);
@@ -766,12 +767,12 @@
 }
 
 .fox-item__tip--icon > svg {
-  width: var(--fox-input-item-tip-icon-size, 10px);
-  height: var(--fox-input-item-tip-icon-size, 10px);
+  width: var(--fox-input-item-tip-icon-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
+  height: var(--fox-input-item-tip-icon-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
 }
 
 .fox-item__tip--info {
-  color: var(--fox-input-item-tip-info-color, var(--fox-color-primary, var(--el-color-primary)));
+  color: var(--fox-input-item-tip-info-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-item__tip--warn {
@@ -808,10 +809,11 @@
 }
 
 .fox-row-item {
-  padding: var(--fox-input-item-padding, 0);
+  padding: var(--fox-input-item-padding);
   margin: var(--fox-input-item-margin);
   align-items: center;
-  gap: var(--fox-row-item-gap, 12px);
+  column-gap: var(--fox-row-item-column-gap, 12px);
+  row-gap: var(--fox-row-item-row-gap);
   border: none;
   flex-flow: row;
   display: flex;
@@ -845,7 +847,7 @@
   margin: var(--fox-row-item-divide-margin, 0 10px);
   height: var(--fox-row-item-divide-height, 12px);
   width: var(--fox-row-item-divide-width, 1px);
-  background: var(--fox-row-item-divide-color, var(--fox-border-color-light, #e4e7ed));
+  background: var(--fox-row-item-divide-color, var(--fox-border-color-light, var(--el-border-color-light)));
 }
 
 .fox-buttons-item__popover {
@@ -853,19 +855,19 @@
 }
 
 .fox-buttons-item__dropdown-link {
-  --fox-text-mark-icon-height: var(--fox-buttons-item-dropdown-link-icon-size, 16px);
-  --fox-text-mark-icon-width: var(--fox-buttons-item-dropdown-link-icon-size, 16px);
-  --fox-text-font-size: var(--fox-font-size-small);
+  --fox-text-mark-icon-height: var(--fox-buttons-item-dropdown-link-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
+  --fox-text-mark-icon-width: var(--fox-buttons-item-dropdown-link-icon-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
+  --fox-text-font-size: var(--fox-buttons-item-dropdown-link-text-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
   cursor: pointer;
   color: var(--fox-buttons-item-dropdown-link-icon-color);
-  font-size: var(--fox-font-size-small);
+  font-size: var(--fox-buttons-item-dropdown-link-text-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-buttons-item__dropdown-item {
   white-space: nowrap;
   line-height: 22px;
-  font-size: var(--fox-font-size-base, 14px);
-  color: var(--fox-text-color, var(--el-text-color-regular));
+  font-size: var(--fox-font-size-base, var(--el-font-size-base));
+  color: var(--fox-text-color-regular, var(--el-text-color-regular));
   cursor: pointer;
   outline: none;
   align-items: center;
@@ -876,7 +878,7 @@
 }
 
 .fox-buttons-item__dropdown-item:hover {
-  background-color: var(--fox-background-hover-color, var(--el-color-primary-light-9));
+  background-color: var(--fox-buttons-item-dropdown-item-hover-background-color);
 }
 
 .fox-buttons-item__dropdown-item.is-disabled {
@@ -887,11 +889,11 @@
 .fox-hint-text {
   z-index: var(--fox-hint-text-z-index, 3000);
   padding: var(--fox-hint-text-padding, 6px 8px);
-  box-shadow: var(--fox-hint-text-box-shadow, 4px 4px 8px #0000004d);
+  box-shadow: var(--fox-hint-text-box-shadow, var(--fox-box-shadow, var(--el-box-shadow)));
   box-sizing: border-box;
-  font-size: var(--fox-hint-text-font-size, var(--fox-font-size-base, 14px));
-  color: var(--fox-hint-text-color, var(--fox-white, #fff));
-  background-color: var(--fox-hint-text-background-color, #000c);
+  font-size: var(--fox-hint-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  color: var(--fox-hint-text-color, var(--fox-white, var(--el-color-white)));
+  background-color: var(--fox-hint-text-background-color, var(--fox-overlay-text-bg-color, var(--el-overlay-color)));
   opacity: 0;
   border: 0 solid #0000004d;
   border-radius: 3px;
@@ -939,16 +941,16 @@
 .fox-hint-text__arrow {
   width: var(--fox-hint-text-arrow-size, 6px);
   height: var(--fox-hint-text-arrow-size, 6px);
-  background-color: var(--fox-hint-text-background-color, #000c);
+  background-color: var(--fox-hint-text-background-color, var(--fox-overlay-text-bg-color, var(--el-overlay-color)));
   position: absolute;
 }
 
 .fox-hint-text.is-small {
-  font-size: var(--fox-hint-text-font-size-small, var(--fox-font-size-small, 12px));
+  font-size: var(--fox-hint-text-font-size-small, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-hint-text.is-large {
-  font-size: var(--fox-hint-text-font-size-large, var(--fox-font-size-large, 18px));
+  font-size: var(--fox-hint-text-font-size-large, var(--fox-font-size-large, var(--el-font-size-large)));
 }
 
 .fox-hint-text.is-top .fox-hint-text__arrow {
@@ -975,7 +977,7 @@
   opacity: 0;
 }
 
-.fox-input-item, .fox-select-item {
+.fox-input-item__content, .fox-select-item__content {
   width: 100%;
 }
 
@@ -986,8 +988,12 @@
   display: flex;
 }
 
-.fox-date-item {
-  width: 100% !important;
+.fox-date-item.has-append .el-input__wrapper {
+  border-radius: var(--el-input-border-radius), 0px, 0px, var(--el-border-radius-base);
+}
+
+.fox-date-item.readonly input, .fox-date-item.disabled input {
+  padding: 0;
 }
 
 .fox-date-item.is-long input {
@@ -995,12 +1001,8 @@
   padding: 0 28px 0 0;
 }
 
-.fox-date-item.is-readonly input, .fox-date-item.is-disabled input {
-  padding: 0;
-}
-
-.fox-date-item__wrapper.has-append .el-input__wrapper {
-  border-radius: var(--el-input-border-radius), 0px, 0px, var(--el-border-radius-base);
+.fox-date-item__content {
+  width: 100% !important;
 }
 
 .fox-date-item__long {
@@ -1063,17 +1065,25 @@
   position: relative;
 }
 
-.fox-time-item, .fox-time-select-item {
+.fox-time-item__content, .fox-time-select-item__content {
   width: 100% !important;
 }
 
-.fox-money-item {
+.fox-money-item.disabled input:disabled {
+  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
+  background: none;
+}
+
+.fox-money-item__content {
   width: 100%;
 }
 
 .fox-money-item__append {
   width: var(--fox-input-item-append-width, 30px);
-  font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -1084,31 +1094,19 @@
   display: none;
 }
 
-.fox-money-item__disabled {
-  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc)) !important;
-}
-
-.fox-money-item__disabled input:disabled {
-  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc));
-  cursor: not-allowed;
-  opacity: 1;
-  -webkit-text-fill-color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc));
-  background: none;
-}
-
 .fox-money-item__placeholder input {
-  color: var(--fox-input-item-color, var(--fox-black, #000));
+  color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-money-item__placeholder input::-webkit-input-placeholder {
-  color: var(--fox-input-item-color, var(--fox-black, #000));
+  color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-money-item__placeholder input::placeholder {
-  color: var(--fox-input-item-color, var(--fox-black, #000));
+  color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
 }
 
-.fox-input-number-item {
+.fox-input-number-item__content {
   flex: auto;
 }
 
@@ -1145,7 +1143,7 @@
   right: 1px;
 }
 
-.fox-cascader-item, .fox-autocomplete-item {
+.fox-cascader-item__content, .fox-autocomplete-item__content {
   width: 100%;
 }
 
@@ -1268,15 +1266,15 @@
   position: relative;
 }
 
-.fox-table-item {
-  width: 100%;
-}
-
 .fox-table-item__wrap {
   min-width: 0;
   min-height: 0;
 }
 
+.fox-table-item__content {
+  width: 100%;
+}
+
 .fox-table-item__pagination {
   margin-top: 10px;
 }
@@ -1345,29 +1343,29 @@
   }
 }
 
-.fox-radio-item.is-vertical {
+.fox-radio-item__content.is-vertical {
   flex-flow: column;
   justify-content: flex-start;
   align-items: flex-start;
   display: flex;
 }
 
-.fox-radio-item.is-vertical .el-radio + .el-radio {
+.fox-radio-item__content.is-vertical .el-radio + .el-radio {
   margin-top: 10px;
 }
 
-.fox-checkbox-item.is-vertical {
+.fox-checkbox-item__content.is-vertical {
   flex-flow: column;
   justify-content: flex-start;
   align-items: flex-start;
   display: flex;
 }
 
-.fox-checkbox-item.is-vertical .el-checkbox + .el-checkbox {
+.fox-checkbox-item__content.is-vertical .el-checkbox + .el-checkbox {
   margin-top: 10px;
 }
 
-.fox-rate-item, .fox-switch-item, .fox-tree-select-item {
+.fox-rate-item__content, .fox-switch-item__content, .fox-tree-select-item__content {
   width: 100%;
 }
 
@@ -1490,16 +1488,16 @@
   position: relative;
 }
 
-.fox-tree-item {
+.fox-tree-item__content {
   width: 100%;
 }
 
-.fox-link-item {
+.fox-link-item__content {
   width: 100%;
   height: var(--fox-input-item-height, 24px);
   line-height: var(--fox-input-item-height, 24px);
-  font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, 14px));
-  color: var(--fox-input-item-color, var(--fox-black, #000));
+  font-size: var(--fox-input-item-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  color: var(--fox-input-item-color, var(--fox-black, var(--el-color-black)));
   padding: var(--fox-link-item-padding, 0 5px 0 0);
   margin: var(--fox-link-item-margin, 0);
   text-align: var(--fox-input-item-text-align, right);
@@ -1511,13 +1509,9 @@
   display: flex;
 }
 
-.fox-link-item.is-disabled {
-  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, #c8c9cc)) !important;
-}
-
 .fox-link-item__append {
   width: var(--fox-input-item-append-width, 30px);
-  font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-input-item-append-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -1531,13 +1525,13 @@
 }
 
 .fox-link-item__append .action-icon {
-  width: var(--fox-input-item-append-action-icon-size, 14px);
-  height: var(--fox-input-item-append-action-icon-size, 14px);
-  color: var(--fox-input-item-append-action-icon-color, #bbb);
+  width: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  height: var(--fox-input-item-append-action-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  color: var(--fox-input-item-append-action-icon-color, var(--fox-disable-color, var(--el-text-color-disabled)));
 }
 
 .fox-link-item__placeholder {
-  color: var(--fox-input-item-placeholder-color, var(--fox-input-disabled-color, #c8c9cc));
+  color: var(--fox-input-item-placeholder-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
 }
 
 .fox-link-item__main {
@@ -1546,10 +1540,14 @@
 
 .fox-link-item__sub {
   width: 100%;
-  font-size: var(--fox-link-item-sub-font-size, var(--fox-font-size-small, 12px));
+  font-size: var(--fox-link-item-sub-font-size, var(--fox-font-size-small, var(--el-font-size-small)));
   color: var(--fox-link-item-sub-color, var(--fox-text-color--secondary, var(--el-text-color-secondary)));
 }
 
+.fox-link-item.disabled .fox-link-item__content {
+  color: var(--fox-input-item-disabled-color, var(--fox-input-disabled-color, var(--fox-disable-color, var(--el-text-color-disabled))));
+}
+
 .fox-tabs-bar {
   box-sizing: border-box;
   position: relative;
@@ -1559,7 +1557,7 @@
 .fox-tabs-bar__titles {
   -webkit-user-select: none;
   user-select: none;
-  background: var(--fox-tabs-bar-titles-background, var(--fox-help-color, #f5f5f5));
+  background: var(--fox-tabs-bar-titles-background, var(--fox-fill-color-base, var(--el-fill-color)));
   border-radius: var(--fox-tabs-bar-titles-border-radius, 0);
   flex-shrink: 0;
   display: flex;
@@ -1573,9 +1571,9 @@
 }
 
 .fox-tabs-bar__titles-item {
-  color: var(--fox-tabs-bar-item-color, var(--fox-title-color, #1a1a1a));
-  font-weight: var(--fox-tabs-var-item-font-weight, normal);
-  font-size: var(--fox-tabs-bar-item-font-size-default, var(--fox-font-size-base, 14px));
+  color: var(--fox-tabs-bar-item-color, var(--fox-title-color, var(--el-text-color-primary)));
+  font-weight: var(--fox-tabs-bar-item-font-weight, normal);
+  font-size: var(--fox-tabs-bar-item-font-size-default, var(--fox-font-size-base, var(--el-font-size-base)));
   margin: 0 var(--fox-tabs-bar-item-gutter, 10px);
   flex: 1 0 auto;
   justify-content: center;
@@ -1589,8 +1587,8 @@
 }
 
 .fox-tabs-bar__titles-item.active {
-  color: var(--fox-tabs-bar-item-color-active, var(--fox-color-primary, var(--el-color-primary)));
-  font-size: var(--fox-tabs-bar-item-font-size-default-active, var(--fox-font-size-base, 14px));
+  color: var(--fox-tabs-bar-item-color-active, var(--fox-title-color, var(--el-text-color-primary)));
+  font-size: var(--fox-tabs-bar-item-font-size-default-active, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-tabs-bar-item-font-weight-active, bold);
 }
 
@@ -1603,20 +1601,21 @@
 
 .fox-tabs-bar__titles-item.button {
   margin: auto var(--fox-tabs-bar-item-gutter-button, 8px);
+  padding: var(--fox-tabs-bar-item-padding-button);
   width: var(--fox-tabs-bar-item-width-button, 80px);
   height: var(--fox-tabs-bar-item-height-button, 32px);
-  background: var(--fox-tabs-bar-item-background-button, #fff);
-  color: var(--fox-tabs-bar-item-color-button, #666);
-  font-size: var(--fox-tabs-bar-item-font-size-button, 12px);
+  background: var(--fox-tabs-bar-item-background-button, var(--fox-white, var(--el-color-white)));
+  color: var(--fox-tabs-bar-item-color-button, var(--fox-title-color2, var(--el-text-color-secondary)));
+  font-size: var(--fox-tabs-bar-item-font-size-button, var(--fox-font-size-small, var(--el-font-size-small)));
   font-weight: var(--fox-tabs-bar-item-font-weight-button, 400);
   border: var(--fox-tabs-bar-item-border-button, 1px solid transparent);
   border-radius: var(--fox-tabs-bar-item-radius-button, 4px);
 }
 
 .fox-tabs-bar__titles-item.button.active {
-  background: var(--fox-tabs-bar-item-background-active-button, #fff);
+  background: var(--fox-tabs-bar-item-background-active-button, var(--fox-white, var(--el-color-white)));
   color: var(--fox-tabs-bar-item-color-active-button, var(--fox-color-primary, var(--el-color-primary)));
-  font-size: var(--fox-tabs-bar-item-font-size-active-button, 12px);
+  font-size: var(--fox-tabs-bar-item-font-size-active-button, var(--fox-font-size-small, var(--el-font-size-small)));
   font-weight: var(--fox-tabs-bar-item-font-weight-button, 400);
   border: var(--fox-tabs-bar-item-border-active-button, 1px solid transparent);
 }
@@ -1640,9 +1639,9 @@
   margin: auto var(--fox-tabs-bar-item-gutter-button-group, 0px);
   width: var(--fox-tabs-bar-item-width-button-group, 105px);
   height: var(--fox-tabs-bar-item-height-button-group, 32px);
-  background: var(--fox-tabs-bar-item-background-button-group, #fff);
+  background: var(--fox-tabs-bar-item-background-button-group, var(--fox-white, var(--el-color-white)));
   color: var(--fox-tabs-bar-item-color-button-group, var(--fox-color-primary, var(--el-color-primary)));
-  font-size: var(--fox-tabs-bar-item-font-size-button-group, 14px);
+  font-size: var(--fox-tabs-bar-item-font-size-button-group, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-tabs-bar-item-font-weight-button-group, 400);
   border-top: var(--fox-tabs-bar-item-border-width-button-group, 1px) solid var(--fox-tabs-bar-item-background-active-button-group, var(--fox-color-primary, var(--el-color-primary)));
   border-right: var(--fox-tabs-bar-item-border-width-button-group, 1px) solid var(--fox-tabs-bar-item-background-active-button-group, var(--fox-color-primary, var(--el-color-primary)));
@@ -1653,8 +1652,8 @@
 
 .fox-tabs-bar__titles-item.button-group.active {
   background: var(--fox-tabs-bar-item-background-active-button-group, var(--fox-color-primary, var(--el-color-primary)));
-  color: var(--fox-tabs-bar-item-color-active-button-group, #fff);
-  font-size: var(--fox-tabs-bar-item-font-size-active-button-group, 14px);
+  color: var(--fox-tabs-bar-item-color-active-button-group, var(--fox-white, var(--el-color-white)));
+  font-size: var(--fox-tabs-bar-item-font-size-active-button-group, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-tabs-bar-item-font-weight-button-group, 400);
 }
 
@@ -1666,18 +1665,18 @@
   margin: auto var(--fox-tabs-bar-item-gutter-capsule, 0px);
   width: var(--fox-tabs-bar-item-width-capsule, 100px);
   height: var(--fox-tabs-bar-item-height-capsule, 29px);
-  background: var(--fox-tabs-bar-item-background-capsule, #fff0);
-  color: var(--fox-tabs-bar-item-color-capsule, #666);
-  font-size: var(--fox-tabs-bar-item-font-size-capsule, 14px);
+  background: var(--fox-tabs-bar-item-background-capsule, transparent);
+  color: var(--fox-tabs-bar-item-color-capsule, var(--fox-title-color2, var(--el-text-color-secondary)));
+  font-size: var(--fox-tabs-bar-item-font-size-capsule, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-tabs-bar-item-font-weight-capsule, 400);
   border: var(--fox-tabs-bar-item-border-width-capsule, 1px) solid transparent;
   border-radius: var(--fox-tabs-bar-item-radius-capsule, 12px);
 }
 
 .fox-tabs-bar__titles-item.capsule.active {
-  background: var(--fox-tabs-bar-item-background-active-capsule, #fff);
+  background: var(--fox-tabs-bar-item-background-active-capsule, var(--fox-white, var(--el-color-white)));
   color: var(--fox-tabs-bar-item-color-active-capsule, var(--fox-color-primary, var(--el-color-primary)));
-  font-size: var(--fox-tabs-bar-item-font-size-active-capsule, 14px);
+  font-size: var(--fox-tabs-bar-item-font-size-active-capsule, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-tabs-bar-item-font-weight-capsule, 400);
 }
 
@@ -1702,8 +1701,8 @@
   width: 0;
   height: 0;
   bottom: var(--fox-tabs-bar-item-line-bottom, 0px);
-  border-radius: var(--fox-tabs-titles-item-line-border-radius, 0);
-  opacity: var(--fox-tabs-titles-item-line-opacity, 1);
+  border-radius: var(--fox-tabs-bar-item-line-border-radius, 0);
+  opacity: var(--fox-tabs-bar-item-line-opacity, 1);
   transition: width .3s;
   position: absolute;
   left: 50%;
@@ -1713,10 +1712,10 @@
 
 .fox-tabs-bar__titles-item-tip {
   line-height: 1;
-  font-size: var(--fox-tabs-bar-item-tip-font-size, 10px);
-  color: var(--fox-tabs-bar-item-tip-color, var(--fox-white, #fff));
+  font-size: var(--fox-tabs-bar-item-tip-font-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
+  color: var(--fox-tabs-bar-item-tip-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-tabs-bar-item-tip-background, var(--fox-color-primary, var(--el-color-primary)));
-  box-shadow: var(--fox-tabs-bar-item-tip-box-shadow, 0 0 0 1px #fff);
+  box-shadow: var(--fox-tabs-bar-item-tip-box-shadow, 0 0 0 1px var(--fox-white, var(--el-color-white)));
   border-radius: 50%;
   position: absolute;
   top: 0;
@@ -1748,19 +1747,19 @@
 }
 
 .fox-tabs-bar__titles.large .fox-tabs-bar__titles-item {
-  font-size: var(--fox-tabs-bar-item-font-size-large, var(--fox-font-size-large, 18px));
+  font-size: var(--fox-tabs-bar-item-font-size-large, var(--fox-font-size-medium, var(--el-font-size-medium)));
 }
 
 .fox-tabs-bar__titles.large .fox-tabs-bar__titles-item.active {
-  font-size: var(--fox-tabs-bar-item-font-size-large-active, var(--fox-font-size-large, 18px));
+  font-size: var(--fox-tabs-bar-item-font-size-large-active, var(--fox-font-size-medium, var(--el-font-size-medium)));
 }
 
 .fox-tabs-bar__titles.small .fox-tabs-bar__titles-item {
-  font-size: var(--fox-tabs-bar-item-font-size-small, var(--fox-font-size-small, 12px));
+  font-size: var(--fox-tabs-bar-item-font-size-small, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-tabs-bar__titles.small .fox-tabs-bar__titles-item.active {
-  font-size: var(--fox-tabs-bar-item-font-size-small-active, var(--fox-font-size-small, 12px));
+  font-size: var(--fox-tabs-bar-item-font-size-small-active, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-tabs-bar__titles.horizontal {
@@ -1879,14 +1878,14 @@
 
 .fox-tabs-bar__titles.capsule {
   padding: var(--fox-tabs-bar-titles-padding-capsule, 5px 8px);
-  background: var(--fox-tabs-bar-titles-background-capsule, #f6f6f8);
+  background: var(--fox-tabs-bar-titles-background-capsule, var(--fox-fill-color-base, var(--el-fill-color)));
   border-radius: var(--fox-tabs-bar-titles-border-radius-capsule, 16px);
 }
 
 .fox-tabs-bar__navigation {
   height: var(--fox-tabs-bar-titles-height-horizontal, 44px);
   width: var(--fox-tabs-bar-navigation-width, 30px);
-  background: var(--fox-tabs-bar-titles-background, var(--fox-help-color, #f5f5f5));
+  background: var(--fox-tabs-bar-titles-background, var(--fox-fill-color-base, var(--el-fill-color)));
   flex-flow: row;
   justify-content: flex-end;
   align-items: center;
@@ -1897,10 +1896,10 @@
 }
 
 .fox-tabs-bar__popup {
-  background: var(--fox-tabs-bar-popup-background, #fff);
+  background: var(--fox-tabs-bar-popup-background, var(--fox-white, var(--el-color-white)));
   max-height: var(--fox-tabs-bar-popup-max-height, 500px);
   padding: var(--fox-tabs-bar-popup-padding, 12px 0 0 12px);
-  box-shadow: var(--fox-tabs-bar-popup-box-shadow, 0 4px 10px #00000012);
+  box-shadow: var(--fox-tabs-bar-popup-box-shadow, var(--fox-box-shadow, var(--el-box-shadow)));
   z-index: 1;
   opacity: 0;
   flex-flow: wrap;
@@ -1917,8 +1916,8 @@
 
 .fox-tabs-bar__popup-item {
   border-radius: var(--fox-tabs-bar-popup-item-radius, 16px);
-  color: var(--fox-tabs-bar-popup-item-color, #333);
-  background: var(--fox-tabs-bar-popup-item-background, #f8f8f8);
+  color: var(--fox-tabs-bar-popup-item-color, var(--fox-title-color, var(--el-text-color-primary)));
+  background: var(--fox-tabs-bar-popup-item-background, var(--fox-fill-color-base, var(--el-fill-color)));
   padding: var(--fox-tabs-bar-popup-item-padding, 5px 12px 5px 12px);
   margin: var(--fox-tabs-bar-popup-item-margin, 0px 12px 12px 0);
   text-wrap: nowrap;
@@ -1926,7 +1925,7 @@
 
 .fox-tabs-bar__popup-item.active {
   color: var(--fox-tabs-bar-popup-item-color-active, var(--fox-color-primary, var(--el-color-primary)));
-  background: var(--fox-tabs-bar-popup-item-background-active, #ffecec);
+  background: var(--fox-tabs-bar-popup-item-background-active, var(--fox-color-primary-light-9, var(--el-color-primary-light-9)));
 }
 
 .fox-tabs-bar__popup--show {
@@ -2024,8 +2023,8 @@
 
 .fox-steps-bar {
   box-sizing: border-box;
-  color: var(--fox-steps-bar-normal-color, var(--fox-white, #fff));
-  font-size: var(--fox-steps-bar-font-size, var(--fox-font-size-base, 14px));
+  color: var(--fox-steps-bar-normal-color, var(--fox-white, var(--el-color-white)));
+  font-size: var(--fox-steps-bar-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   justify-content: flex-start;
   align-items: flex-start;
   display: flex;
@@ -2208,54 +2207,54 @@
 }
 
 .fox-steps-bar__step.is-active {
-  color: var(--fox-steps-bar-active-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-active-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-steps-bar__step.is-active .fox-steps-bar__main {
-  color: var(--fox-steps-bar-text-active-color, var(--fox-black, #000));
+  color: var(--fox-steps-bar-text-active-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-steps-bar__step.is-active .fox-steps-bar__icon {
-  color: var(--fox-steps-bar-icon-active-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-icon-active-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-steps-bar-icon-bg-active-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-steps-bar__step.is-done {
-  color: var(--fox-steps-bar-done-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-done-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-steps-bar__step.is-done .fox-steps-bar__main {
-  color: var(--fox-steps-bar-text-done-color, var(--fox-black, #000));
+  color: var(--fox-steps-bar-text-done-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-steps-bar__step.is-done .fox-steps-bar__icon {
-  color: var(--fox-steps-bar-icon-done-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-icon-done-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-steps-bar-icon-bg-done-color, var(--fox-color-success, var(--el-color-success)));
 }
 
 .fox-steps-bar__step.is-error {
-  color: var(--fox-steps-bar-error-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-error-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-steps-bar__step.is-error .fox-steps-bar__main {
-  color: var(--fox-steps-bar-text-error-color, var(--fox-black, #000));
+  color: var(--fox-steps-bar-text-error-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-steps-bar__step.is-error .fox-steps-bar__icon {
-  color: var(--fox-steps-bar-icon-error-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-icon-error-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-steps-bar-icon-bg-error-color, var(--fox-color-danger, var(--el-color-danger)));
 }
 
 .fox-steps-bar__step.is-half {
-  color: var(--fox-steps-bar-half-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-half-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-steps-bar__step.is-half .fox-steps-bar__main {
-  color: var(--fox-steps-bar-text-half-color, var(--fox-black, #000));
+  color: var(--fox-steps-bar-text-half-color, var(--fox-black, var(--el-color-black)));
 }
 
 .fox-steps-bar__step.is-half .fox-steps-bar__icon {
-  color: var(--fox-steps-bar-icon-half-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-icon-half-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-steps-bar-icon-bg-half-color, var(--fox-color-warning, var(--el-color-warning)));
 }
 
@@ -2307,12 +2306,12 @@
 }
 
 .fox-steps-bar__icon {
-  color: var(--fox-steps-bar-icon-normal-color, var(--fox-white, #fff));
+  color: var(--fox-steps-bar-icon-normal-color, var(--fox-white, var(--el-color-white)));
   background: var(--fox-steps-bar-icon-bg-normal-color, var(--fox-disable-color, var(--el-text-color-disabled)));
   cursor: pointer;
   border: var(--fox-steps-bar-icon-border, none);
   box-sizing: border-box;
-  font-size: var(--fox-steps-bar-icon-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, 14px)));
+  font-size: var(--fox-steps-bar-icon-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, var(--el-font-size-base))));
   width: var(--fox-steps-bar-icon-size, 28px);
   height: var(--fox-steps-bar-icon-size, 28px);
   border-radius: 50%;
@@ -2336,7 +2335,7 @@
 
 .fox-steps-bar__main {
   color: var(--fox-steps-bar-text-normal-color, var(--fox-disable-color, var(--el-text-color-disabled)));
-  font-size: var(--fox-steps-bar-text-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, 14px)));
+  font-size: var(--fox-steps-bar-text-font-size, var(--fox-steps-bar-font-size, var(--fox-font-size-base, var(--el-font-size-base))));
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -2360,7 +2359,7 @@
 }
 
 .fox-overlay {
-  background: var(--fox-overlay-bg-color, #000000b3);
+  background: var(--fox-overlay-bg-color, var(--el-overlay-color-light));
   width: 100%;
   height: 100%;
   position: fixed;
@@ -2373,11 +2372,11 @@
 }
 
 .fox-theme-dark .fox-popup {
-  background: var(--fox-dark-background2, #1b1b1b);
+  background: var(--fox-dark-background-2, #1b1b1b);
 }
 
 .fox-theme-dark .fox-popup__close-icon {
-  color: var(--fox-dark-color, var(--fox-white, #fff));
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-popup-slide-center-enter-active, .fox-popup-slide-center-leave-active {
@@ -2459,7 +2458,7 @@
 }
 
 .fox-popup {
-  background-color: var(--fox-white, #fff);
+  background-color: var(--fox-white, var(--el-color-white));
   -webkit-overflow-scrolling: touch;
   max-height: 100%;
   position: fixed;
@@ -2479,8 +2478,8 @@
 }
 
 .fox-popup__close-icon > svg {
-  width: var(--fox-popup-close-icon-size, 12px);
-  height: var(--fox-popup-close-icon-size, 12px);
+  width: var(--fox-popup-close-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
+  height: var(--fox-popup-close-icon-size, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-popup__close-icon:active {
@@ -2519,16 +2518,16 @@
 }
 
 .fox-toast-small .fox-toast-inner {
-  font-size: var(--fox-font-size-small, 12px);
+  font-size: var(--fox-font-size-small, var(--el-font-size-small));
 }
 
 .fox-toast-large .fox-toast-inner {
-  font-size: var(--fox-font-size-large, 18px);
+  font-size: var(--fox-font-size-large, var(--el-font-size-large));
 }
 
 .fox-toast-cover {
   pointer-events: auto;
-  background: var(--fox-toast-cover-bg-color, #0000);
+  background: var(--fox-toast-cover-bg-color, transparent);
   justify-content: center;
   align-items: center;
   height: 100%;
@@ -2536,20 +2535,20 @@
 }
 
 .fox-toast-inner {
-  font-size: var(--fox-toast-text-font-size, 14px);
+  font-size: var(--fox-toast-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   text-align: center;
   min-width: 40%;
   max-width: 65%;
   padding: var(--fox-toast-inner-padding, 24px 30px);
   word-break: break-all;
-  background: var(--fox-toast-inner-bg-color, #000c);
+  background: var(--fox-toast-inner-bg-color, var(--fox-overlay-text-bg-color, var(--el-overlay-color)));
   border-radius: var(--fox-toast-inner-border-radius, 12px);
-  color: var(--fox-toast-font-color, var(--fox-white, #fff));
+  color: var(--fox-toast-font-color, var(--fox-white, var(--el-color-white)));
   display: inline-block;
 }
 
 .fox-toast-text {
-  font-size: var(--fox-toast-text-font-size, 14px);
+  font-size: var(--fox-toast-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-toast-text:empty {
@@ -2557,7 +2556,7 @@
 }
 
 .fox-toast-title {
-  font-size: var(--fox-toast-title-font-size, 16px);
+  font-size: var(--fox-toast-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
 }
 
 .fox-toast-title:empty {
@@ -2605,22 +2604,22 @@
 }
 
 .fox-theme-dark .fox-searchbar__search-label, .fox-theme-dark .fox-searchbar .fox-searchbar__input-clear .fox-searchbar__fox-icon-mask-close {
-  color: var(--fox-dark-color, var(--fox-white, #fff));
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-theme-dark .fox-searchbar .fox-searchbar__input-clear .fox-searchbar__fox-icon-mask-close:hover {
   cursor: pointer;
-  color: var(--fox-dark-color, var(--fox-white, #fff));
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-theme-dark .fox-searchbar__right-search-icon, .fox-theme-dark .fox-searchbar__left-search-icon {
-  color: var(--fox-dark-color, var(--fox-white, #fff));
+  color: var(--fox-dark-color, var(--fox-white, var(--el-color-white)));
 }
 
 .fox-searchbar {
   width: var(--fox-searchbar-width, 100%);
   padding: var(--fox-searchbar-padding, 9px 16px);
-  background: var(--fox-searchbar-background, var(--fox-white, #fff));
+  background: var(--fox-searchbar-background, var(--fox-white, var(--el-color-white)));
   box-sizing: border-box;
   color: var(--fox-searchbar-input-bar-color, inherit);
   align-items: center;
@@ -2641,8 +2640,8 @@
   height: var(--fox-searchbar-input-height, 32px);
   padding: var(--fox-searchbar-input-padding, 0 0 0 13px);
   border-radius: var(--fox-searchbar-input-border-radius, 16px);
-  box-shadow: var(--fox-searchbar-input-box-shadow, 0 0 8px 0 #0000000a);
-  background: var(--fox-searchbar-input-background, #f7f7f7);
+  box-shadow: var(--fox-searchbar-input-box-shadow, var(--fox-box-shadow-lighter, var(--el-box-shadow-lighter)));
+  background: var(--fox-searchbar-input-background, var(--fox-fill-color-base, var(--el-fill-color)));
   box-sizing: border-box;
   flex: 1;
   align-items: center;
@@ -2654,16 +2653,21 @@
 }
 
 .fox-searchbar__search-input .fox-searchbar__input-inner {
+  flex: 1;
+  width: 100%;
+}
+
+.fox-searchbar__search-input .fox-searchbar__input-inner-input {
+  padding: var(--fox-searchbar-input-inner-padding, 0 20px 0 10px);
+  font-size: var(--fox-font-size-base, var(--el-font-size-base));
+  box-sizing: border-box;
   background-color: #0000;
   border-color: #0000;
   border-radius: 16px;
   outline: none;
-  flex: 1;
   width: 100%;
-  height: 36px;
+  height: 100%;
   margin: 0;
-  padding: 0 20px 0 0;
-  font-size: 14px;
 }
 
 .fox-searchbar__search-input .fox-searchbar__input-inner-right {
@@ -2680,13 +2684,13 @@
 }
 
 .fox-searchbar__search-input .fox-searchbar__input-clear-icon > svg {
-  width: 16px;
-  height: 16px;
+  width: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  height: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-searchbar__search-input .fox-searchbar__input-left-search-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
+  height: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
   margin-right: 6px;
 }
 
@@ -2695,9 +2699,9 @@
 }
 
 .fox-searchbar__search-icon {
+  font-size: var(--fox-searchbar-icon-size, var(--fox-font-size-base, var(--el-font-size-base)));
   justify-content: center;
   align-items: center;
-  font-size: 14px;
   display: flex;
 }
 
@@ -2706,7 +2710,7 @@
 }
 
 .fox-searchbar__right-search-icon {
-  color: var(--fox-searchbar-right-out-color, var(--fox-black, #000));
+  color: var(--fox-searchbar-right-out-color, var(--fox-black, var(--el-color-black)));
   margin-left: 16px;
 }
 
@@ -2719,8 +2723,8 @@
   width: 100%;
   height: 50px;
   line-height: 50px;
-  font-size: var(--fox-font-size-small, 12px);
-  color: var(--fox-infiniteloading-bottom-color, #c8c8c8);
+  font-size: var(--fox-font-size-small, var(--el-font-size-small));
+  color: var(--fox-infiniteloading-bottom-color, var(--fox-disable-color, var(--el-text-color-disabled)));
   text-align: center;
   display: block;
 }
@@ -2743,8 +2747,8 @@
 }
 
 .fox-infinite-loading__bottom-box__text {
-  color: var(--fox-text-color, var(--el-text-color-regular));
-  font-size: 12px;
+  font-size: var(--fox-font-size-extra-small, var(--el-font-size-extra-small));
+  color: var(--fox-text-color-regular, var(--el-text-color-regular));
 }
 
 .fox-pull-refresh {
@@ -2759,11 +2763,11 @@
 
 .fox-pull-refresh__container-topbox {
   text-align: center;
-  justify-content: center;
-  align-items: center;
   width: 100%;
   height: 50px;
-  font-size: 14px;
+  font-size: var(--fox-font-size-base, var(--el-font-size-base));
+  justify-content: center;
+  align-items: center;
   display: flex;
   position: absolute;
   left: 0;
@@ -2782,8 +2786,8 @@
 }
 
 .fox-pull-refresh__container-topbox-text {
-  font-size: var(--fox-font-size-base, 14px);
-  color: var(--fox-text-color, var(--el-text-color-regular));
+  font-size: var(--fox-font-size-base, var(--el-font-size-base));
+  color: var(--fox-text-color-regular, var(--el-text-color-regular));
 }
 
 .fox-more-button {
@@ -2840,7 +2844,7 @@
 }
 
 .fox-more-button__text {
-  font-size: var(--fox-font-size-base, 14px);
+  font-size: var(--fox-font-size-base, var(--el-font-size-base));
 }
 
 .fox-more-button > * + * {
@@ -2857,24 +2861,24 @@
   width: var(--fox-floating-button-width, 52px);
   height: var(--fox-floating-button-height, 52px);
   opacity: var(--fox-floating-button-opacity, 1);
-  background: var(--fox-floating-button-background, linear-gradient(136.56deg, var(--fox-color-primary, var(--el-color-primary)) 0%, var(--fox-color-primary-end, var(--el-color-primary-light-3)) 100%));
-  box-shadow: var(--fox-floating-button-box-shadow, 0px 3px 12px #31040014);
+  background: var(--fox-floating-button-background, var(--fox-color-primary, var(--el-color-primary)));
+  box-shadow: var(--fox-floating-button-box-shadow, var(--fox-box-shadow-light, var(--el-box-shadow-light)));
   border-radius: var(--fox-floating-button-border-radius, 50%);
-  color: var(--fox-floating-button-color, #fff);
+  color: var(--fox-floating-button-color, var(--fox-white, var(--el-color-white)));
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
 .fox-floating-button__icon {
-  width: var(--fox-floating-button-icon-size, 20px);
-  height: var(--fox-floating-button-icon-size, 20px);
+  width: var(--fox-floating-button-icon-size, var(--fox-font-size-extra-large, var(--el-font-size-extra-large)));
+  height: var(--fox-floating-button-icon-size, var(--fox-font-size-extra-large, var(--el-font-size-extra-large)));
 }
 
 .fox-floating-window {
-  background: var(--fox-floating-window-background, #fff);
+  background: var(--fox-floating-window-background, var(--fox-background-color, var(--el-bg-color)));
   border-radius: var(--fox-floating-window-border-radius, 4px);
-  box-shadow: var(--fox-floating-window-box-shadow, 0px 12px 32px 4px #0000000a, 0px 8px 20px #00000014);
+  box-shadow: var(--fox-floating-window-box-shadow, var(--fox-box-shadow, var(--el-box-shadow)));
   box-sizing: border-box;
   top: var(--fox-floating-window-width, 15dvh);
   left: var(--fox-floating-window-width, 25dvw);
@@ -2888,7 +2892,7 @@
 .fox-floating-window__header {
   border-top-left-radius: var(--fox-floating-window-border-radius, 4px);
   border-top-right-radius: var(--fox-floating-window-border-radius, 4px);
-  background: var(--fox-floating-window-header-background, #f0f1f5);
+  background: var(--fox-floating-window-header-background, var(--fox-fill-color-base, var(--el-fill-color)));
   padding: var(--fox-floating-window-header-padding, 0 25px);
   height: var(--fox-floating-window-header-height, 40px);
   z-index: 20;
@@ -2901,7 +2905,7 @@
 }
 
 .fox-floating-window__title {
-  font-size: var(--fox-floating-window-title-font-size, 18px);
+  font-size: var(--fox-floating-window-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
 }
 
 .fox-floating-window__tools {
@@ -2918,7 +2922,7 @@
 
 .fox-floating-window__collapse {
   cursor: pointer;
-  color: var(--fox-floating-window-collapse-color, #409eff);
+  color: var(--fox-floating-window-collapse-color, var(--fox-color-primary, var(--el-color-primary)));
   flex-flow: row;
   flex: none;
   justify-content: flex-start;
@@ -2942,11 +2946,11 @@
 }
 
 .fox-floating-window__collapse-text {
-  font-size: var(--fox-floating-window-collapse-font-size, 14px);
+  font-size: var(--fox-floating-window-collapse-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-floating-window__close:hover {
-  color: var(--fox-floating-window-close-color, #409eff);
+  color: var(--fox-floating-window-close-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-floating-window__close {
@@ -2955,14 +2959,14 @@
 }
 
 .fox-floating-window__body {
-  font-size: var(--fox-floating-window-content-font-size, 14px);
+  font-size: var(--fox-floating-window-content-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
 }
 
 .fox-floating-window__fixednav {
   box-sizing: border-box;
   z-index: var(--fox-floating-window-fixednav-z-index, 2000);
-  color: var(--fox-floating-window-fixednav-color, #fff);
-  background: var(--fox-floating-window-fixednav-bg, #409eff);
+  color: var(--fox-floating-window-fixednav-color, var(--fox-white, var(--el-color-white)));
+  background: var(--fox-floating-window-fixednav-bg, var(--fox-color-primary, var(--el-color-primary)));
   width: var(--floating-window-fixednav-width, 80px);
   height: var(--floating-window-fixednav-height, 50px);
   align-items: center;
@@ -3083,11 +3087,11 @@
 
 .fox-popover-dialog {
   position: var(--fox-popover-dialog-position, fixed);
-  color: var(--fox-popover-dialog-color, #333);
-  background: var(--fox-popover-dialog-background-color, #fff);
-  border: 1px solid var(--fox-border-color-lighter, #ebeef5);
+  color: var(--fox-popover-dialog-color, var(--fox-title-color, var(--el-text-color-primary)));
+  background: var(--fox-popover-dialog-background-color, var(--fox-white, var(--el-color-white)));
+  border: 1px solid var(--fox-border-color-lighter, var(--el-border-color-lighter));
   border-radius: var(--fox-popover-dialog-border-radius, 4px);
-  box-shadow: var(--fox-box-shadow-light, 0px 0px 12px #0000001f);
+  box-shadow: var(--fox-box-shadow-light, var(--el-box-shadow-light));
   box-sizing: border-box;
   min-width: var(--fox-popover-dialog-min-width, 0px);
   padding: var(--fox-popover-dialog-padding, 12px);
@@ -3099,15 +3103,15 @@
 }
 
 .fox-popover-dialog__title {
-  font-size: var(--fox-popover-dialog-title-font-size, 16px);
+  font-size: var(--fox-popover-dialog-title-font-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   margin-bottom: 12px;
   line-height: 1;
 }
 
 .fox-popover-dialog__arrow {
-  height: var(--fox-popover-dialog-arrow-size, 12px);
-  width: var(--fox-popover-dialog-arrow-size, 12px);
-  background: var(--fox-popover-dialog-background-color, #fff);
+  height: var(--fox-popover-dialog-arrow-size, var(--fox-font-size-small, var(--el-font-size-small)));
+  width: var(--fox-popover-dialog-arrow-size, var(--fox-font-size-small, var(--el-font-size-small)));
+  background: var(--fox-popover-dialog-background-color, var(--fox-white, var(--el-color-white)));
   z-index: -1;
   clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
   position: absolute;
@@ -3118,7 +3122,7 @@
   width: 100%;
   height: 100%;
   z-index: var(--fox-popover-dialog-z-index, 2000);
-  background-color: var(--fox-popover-dialog-overlay-background-color, #0000);
+  background-color: var(--fox-popover-dialog-overlay-background-color, transparent);
   top: 0;
   left: 0;
 }
@@ -3136,13 +3140,13 @@
 }
 
 .fox-popover-dialog.is-dark {
-  color: var(--fox-popover-dialog-dark-color, #fff);
-  background: var(--fox-popover-dialog-dark-background-color, #4b4c4d);
-  border: 1px solid var(--fox-border-color-light, #e4e7ed);
+  color: var(--fox-popover-dialog-dark-color, var(--fox-white, var(--el-color-white)));
+  background: var(--fox-popover-dialog-background-color-dark, var(--fox-title-color, var(--el-text-color-primary)));
+  border: 1px solid var(--fox-border-color-light, var(--el-border-color-light));
 }
 
 .fox-popover-dialog.is-dark .fox-popover-dialog__arrow {
-  background: var(--fox-popover-dialog-dark-background-color, #4b4c4d);
+  background: var(--fox-popover-dialog-background-color-dark, var(--fox-title-color, var(--el-text-color-primary)));
 }
 
 @keyframes popover-show {
@@ -3166,13 +3170,13 @@
 }
 
 .fox-price {
-  font-size: var(--fox-font-size-medium, 16px);
+  font-size: var(--fox-font-size-medium, var(--el-font-size-medium));
   color: var(--fox-color-primary, var(--el-color-primary));
   display: inline;
 }
 
 .fox-price--symbol {
-  font-size: var(--fox-font-size-medium, 16px);
+  font-size: var(--fox-font-size-medium, var(--el-font-size-medium));
   display: inline-block;
 }
 
@@ -3182,42 +3186,42 @@
 }
 
 .fox-price--decimal-large {
-  font-size: var(--fox-price-decimal-big-size, 18px);
+  font-size: var(--fox-price-decimal-big-size, var(--fox-font-size-large, var(--el-font-size-large)));
   display: inline-block;
 }
 
 .fox-price--symbol-large {
-  font-size: var(--fox-price-symbol-big-size, 18px);
+  font-size: var(--fox-price-symbol-big-size, var(--fox-font-size-large, var(--el-font-size-large)));
   display: inline-block;
 }
 
 .fox-price--normal {
-  font-size: var(--fox-price-medium-size, 16px);
+  font-size: var(--fox-price-medium-size, var(--fox-font-size-medium, var(--el-font-size-medium)));
   display: inline-block;
 }
 
 .fox-price--decimal-normal {
-  font-size: var(--fox-price-decimal-medium-size, 14px);
+  font-size: var(--fox-price-decimal-medium-size, var(--fox-font-size-base, var(--el-font-size-base)));
   display: inline-block;
 }
 
 .fox-price--symbol-normal {
-  font-size: var(--fox-price-symbol-medium-size, 14px);
+  font-size: var(--fox-price-symbol-medium-size, var(--fox-font-size-base, var(--el-font-size-base)));
   display: inline-block;
 }
 
 .fox-price--small {
-  font-size: var(--fox-price-small-size, 12px);
+  font-size: var(--fox-price-small-size, var(--fox-font-size-small, var(--el-font-size-small)));
   display: inline-block;
 }
 
 .fox-price--decimal-small {
-  font-size: var(--fox-price-decimal-small-size, 10px);
+  font-size: var(--fox-price-decimal-small-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
   display: inline-block;
 }
 
 .fox-price--symbol-small {
-  font-size: var(--fox-price-symbol-small-size, 10px);
+  font-size: var(--fox-price-symbol-small-size, var(--fox-font-size-extra-small, var(--el-font-size-extra-small)));
   display: inline-block;
 }
 
@@ -3311,9 +3315,9 @@
 .fox-text {
   margin: var(--fox-text-margin, 0);
   padding: var(--fox-text-padding, 0);
-  font-size: var(--fox-text-font-size, var(--fox-font-size-base, 14px));
+  font-size: var(--fox-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   font-weight: var(--fox-text-font-weight, 400);
-  color: var(--fox-text-color, var(--el-text-color));
+  color: var(--fox-text-text-color, var(--fox-black, var(--el-color-black)));
   word-break: break-all;
 }
 
@@ -3326,7 +3330,7 @@
 }
 
 .fox-text.is-highlight > * {
-  color: var(--fox-text-highlight-color, var(--fox-white, #fff)) !important;
+  color: var(--fox-text-highlight-color, var(--fox-white, var(--el-color-white))) !important;
   background: var(--fox-text-highlight-background-color, var(--fox-color-danger, var(--el-color-danger))) !important;
 }
 
@@ -3336,117 +3340,117 @@
 }
 
 .fox-text--primary {
-  color: var(--fox-text-primary-color, var(--el-color-primary));
+  color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-text--primary .fox-text__mark {
-  background-color: var(--fox-text-primary-color, var(--el-color-primary));
+  background-color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-text--success {
-  color: var(--fox-text-color-success, var(--el-color-success));
+  color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
 }
 
 .fox-text--success .fox-text__mark {
-  background-color: var(--fox-text-color-success, var(--el-color-success));
+  background-color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
 }
 
 .fox-text--info {
-  color: var(--fox-text-color-info, var(--el-color-info));
+  color: var(--fox-text-info-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text--info .fox-text__mark {
-  background-color: var(--fox-text-color-info, var(--el-color-info));
+  background-color: var(--fox-text-info-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text--warning {
-  color: var(--fox-text-color-warning, var(--el-color-warning));
+  color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
 }
 
 .fox-text--warning .fox-text__mark {
-  background-color: var(--fox-text-color-warning, var(--el-color-warning));
+  background-color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
 }
 
 .fox-text--danger {
-  color: var(--fox-text-color-danger, var(--el-color-danger));
+  color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
 }
 
 .fox-text--danger .fox-text__mark {
-  background-color: var(--fox-text-color-danger, var(--el-color-danger));
+  background-color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
 }
 
 .fox-text--default {
-  color: var(--fox-text-color, var(--el-text-color));
+  color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text--default .fox-text__mark {
-  background-color: var(--fox-text-color, var(--el-text-color));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text--large {
-  font-size: var(--fox-text-font-size-large, var(--el-font-size-large));
+  font-size: var(--fox-text-font-size-large, var(--fox-font-size-large, var(--el-font-size-large)));
 }
 
 .fox-text--small {
-  font-size: var(--fox-text-font-size-small, var(--el-font-size-extra-small));
+  font-size: var(--fox-text-font-size-small, var(--fox-font-size-small, var(--el-font-size-small)));
 }
 
 .fox-text__mark {
   box-sizing: border-box;
   width: var(--fox-text-mark-size, 4px);
   height: var(--fox-text-mark-size, 4px);
-  background-color: var(--fox-text-color, var(--el-text-color));
-  line-height: var(--fox-text-font-size, var(--fox-font-size-base, 14px));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
+  line-height: var(--fox-text-font-size, var(--fox-font-size-base, var(--el-font-size-base)));
   border-radius: 50%;
   display: inline-block;
 }
 
 .fox-text__mark--primary {
-  background-color: var(--fox-text-primary-color, var(--el-color-primary));
+  background-color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-text__mark--success {
-  background-color: var(--fox-text-color-success, var(--el-color-success));
+  background-color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
 }
 
 .fox-text__mark--warning {
-  background-color: var(--fox-text-color-warning, var(--el-color-warning));
+  background-color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
 }
 
 .fox-text__mark--danger {
-  background-color: var(--fox-text-color-danger, var(--el-color-danger));
+  background-color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
 }
 
 .fox-text__mark--default {
-  background-color: var(--fox-text-color, var(--el-text-color));
+  background-color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text__mark-wrap {
   box-sizing: content-box;
-  color: var(--fox-text-color, var(--el-text-color));
+  color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
 .fox-text__mark-wrap--primary {
-  color: var(--fox-text-primary-color, var(--el-color-primary));
+  color: var(--fox-text-primary-color, var(--fox-color-primary, var(--el-color-primary)));
 }
 
 .fox-text__mark-wrap--success {
-  color: var(--fox-text-color-success, var(--el-color-success));
+  color: var(--fox-text-success-color, var(--fox-color-success, var(--el-color-success)));
 }
 
 .fox-text__mark-wrap--warning {
-  color: var(--fox-text-color-warning, var(--el-color-warning));
+  color: var(--fox-text-warning-color, var(--fox-color-warning, var(--el-color-warning)));
 }
 
 .fox-text__mark-wrap--danger {
-  color: var(--fox-text-color-danger, var(--el-color-danger));
+  color: var(--fox-text-danger-color, var(--fox-color-danger, var(--el-color-danger)));
 }
 
 .fox-text__mark-wrap--default {
-  color: var(--fox-text-color, var(--el-text-color));
+  color: var(--fox-text-default-color, var(--fox-color-info, var(--el-color-info)));
 }
 
 .fox-text__mark-wrap svg {
@@ -3481,7 +3485,7 @@
   margin: var(--fox-text-divide-margin, 0 0);
   height: var(--fox-text-divide-height, 12px);
   width: var(--fox-text-divide-width, 1px);
-  background: var(--fox-text-divide-color, var(--fox-border-color-light, #e4e7ed));
+  background: var(--fox-text-divide-color, var(--fox-border-color-light, var(--el-border-color-light)));
 }
 
 .fox-tour__mask {