oxy-uni-ui 2.0.0 → 2.1.0

package/components/oxy-textarea/index.scss

@@ -164,7 +164,7 @@
     border: none;
     box-sizing: border-box;
     word-break: break-word;
-    min-height: 48rpx;
+    min-height: 56rpx;
 
     &::-webkit-input-placeholder {
       color: $-input-placeholder-color;
@@ -203,7 +203,7 @@
     font-size: $-textarea-count-fs;
     color: $-textarea-count-color;
     background: $-textarea-bg;
-    line-height: 40rpx;
+    line-height: 48rpx;
     display: inline-flex;
   }
 
@@ -258,7 +258,7 @@
 
   @include when(auto-height) {
     &:not(.is-cell) {
-      padding: 10rpx 0;
+      padding: 16rpx 0;
     }
 
     &::after {

package/components/oxy-tooltip/index.scss

@@ -54,7 +54,7 @@
   }
 
   @include edeep(close-icon) {
-    font-size: 24rpx;
+    font-size: calc(2 * #{$-tooltip-close-size});
     position: absolute;
     right: -16rpx;
     top: -20rpx;

package/components/oxy-tree/index.scss

@@ -31,9 +31,9 @@
     :deep(.oxy-tree__search-input) {
       flex: 1;
       background-color: $-tree-search-input-color;
-      padding: 12rpx 24rpx;
-      border-radius: 8rpx;
-      margin-bottom: 16rpx;
+      padding: 16rpx 24rpx;
+      border-radius: $-tree-search-input-radius;
+      margin-bottom: 20rpx;
       margin-right: 24rpx;
       .oxy-input__icon{
         background: transparent;
@@ -83,7 +83,7 @@
 
   &.is-disabled {
     color: $-tree-node-disabled-color;
-    opacity: $-button-disabled-opacity;
+    opacity: $-tree-disabled-opacity;
 
     :deep(.oxy-tree-node-icon) {
       color: $-tree-node-disabled-color;

package/components/oxy-upload/index.scss

@@ -39,7 +39,7 @@
     font-size: $-upload-evoke-icon-size;
     background-color: $-upload-evoke-bg;
     color: $-upload-evoke-color;
-    margin-bottom: 24rpx;
+    margin-bottom: 28rpx;
 
     @include when(disabled) {
       color: $-upload-evoke-disabled-color;
@@ -47,13 +47,13 @@
   }
 
   @include e(evoke-file) {
-    border-radius: 16rpx;
+    border-radius: $-upload-file-radius;
   }
 
   @include e(evoke-num) {
-    font-size: 28rpx;
-    line-height: 28rpx;
-    margin-top: 16rpx;
+    font-size: $-fs-content;
+    line-height: $-fs-content;
+    margin-top: 20rpx;
   }
 
   @include edeep(evoke-icon) {
@@ -75,7 +75,7 @@
     position: relative;
     width: $-upload-size;
     height: $-upload-size;
-    margin: 0 24rpx 24rpx 0;
+    margin: 0 24rpx 28rpx 0;
   }
 
   @include e(preview-list) {
@@ -106,9 +106,9 @@
     font-size: $-upload-file-fs;
     color: $-upload-file-color;
     box-sizing: border-box;
-    padding: 0 8rpx;
+    padding: 0 12rpx;
     text-align: center;
-    margin-top: 16rpx;
+    margin-top: 20rpx;
     @include lineEllipsis()
   }
 
@@ -117,11 +117,11 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 48rpx;
+    font-size: $-upload-preview-icon-size;
     color: $-color-white;
 
     &::before {
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: $-upload-video-play-bg;
       border-radius: 50%;
     }
   }
@@ -159,7 +159,7 @@
   @include e(progress-txt) {
     font-size: $-upload-progress-fs;
     line-height: $-upload-progress-fs;
-    margin-top: 18rpx;
+    margin-top: 20rpx;
     color: $-color-white;
   }
 
@@ -182,9 +182,9 @@
     .oxy-upload__status-content:not(.oxy-upload__mask) {
       border: 1px solid $-color-border;
       box-sizing: border-box;
-      border-radius: 16rpx;
+      border-radius: $-upload-file-radius;
       .oxy-upload__picture {
-        border-radius: 16rpx;
+        border-radius: $-upload-file-radius;
       }
       .oxy-upload__picture-icon {
         width: 64rpx;
@@ -192,7 +192,7 @@
       }
     }
     .oxy-upload__mask {
-      border-radius: 16rpx;
+      border-radius: $-upload-file-radius;
     }
     :deep(.oxy-tooltip) {
       width: 100%;
@@ -205,12 +205,12 @@
     .oxy-upload____status-content-name {
       display: block;
       width: 100%;
-      font-size: $-upload-file-fs;
+      font-size: $-upload-preview-name-fs;
       color: $-upload-file-color;
       box-sizing: border-box;
-      padding: 0 8rpx;
+      padding: 0 12rpx;
       text-align: center;
-      margin-top: 16rpx;
+      margin-top: 20rpx;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;

package/components/oxy-virtual-scroll/index.scss

@@ -24,7 +24,7 @@
     bottom: 40rpx;
     width: 80rpx;
     height: 80rpx;
-    background: rgba(0, 0, 0, 0.6);
+    background: $-virtual-scroll-back-top-bg;
     border-radius: 50%;
     display: flex;
     align-items: center;

package/components/oxy-voice-player/index.scss

@@ -14,11 +14,16 @@ $-voice-player-cover-rotating-shadow: var(--oxy-voice-player-cover-rotating-shad
 $-voice-player-cover-center-size: var(--oxy-voice-player-cover-center-size, 80rpx) !default;
 $-voice-player-cover-center-dot-size: var(--oxy-voice-player-cover-center-dot-size, 24rpx) !default;
 $-voice-player-cover-center-dot-bg: var(--oxy-voice-player-cover-center-dot-bg, rgba(102, 126, 234, 0.8)) !default;
+$-voice-player-cover-center-bg: var(--oxy-voice-player-cover-center-bg, linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%)) !default;
+$-voice-player-cover-center-shadow: var(--oxy-voice-player-cover-center-shadow, inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2), 0 2rpx 8rpx rgba(0, 0, 0, 0.15)) !default;
+$-voice-player-cover-center-dot-shadow: var(--oxy-voice-player-cover-center-dot-shadow, inset 0 1rpx 3rpx rgba(0, 0, 0, 0.3)) !default;
 
 $-voice-player-title-fs: var(--oxy-voice-player-title-fs, 40rpx) !default;
 $-voice-player-title-color: var(--oxy-voice-player-title-color, #fff) !default;
+$-voice-player-title-shadow: var(--oxy-voice-player-title-shadow, 0 2rpx 8rpx rgba(0, 0, 0, 0.2)) !default;
 $-voice-player-artist-fs: var(--oxy-voice-player-artist-fs, 30rpx) !default;
 $-voice-player-artist-color: var(--oxy-voice-player-artist-color, rgba(255, 255, 255, 0.9)) !default;
+$-voice-player-artist-shadow: var(--oxy-voice-player-artist-shadow, 0 1rpx 4rpx rgba(0, 0, 0, 0.15)) !default;
 $-voice-player-album-fs: var(--oxy-voice-player-album-fs, 26rpx) !default;
 $-voice-player-album-color: var(--oxy-voice-player-album-color, rgba(255, 255, 255, 0.7)) !default;
 
@@ -28,19 +33,23 @@ $-voice-player-lyric-fs: var(--oxy-voice-player-lyric-fs, 32rpx) !default;
 $-voice-player-lyric-color: var(--oxy-voice-player-lyric-color, rgba(255, 255, 255, 0.7)) !default;
 $-voice-player-lyric-active-fs: var(--oxy-voice-player-lyric-active-fs, 36rpx) !default;
 $-voice-player-lyric-active-color: var(--oxy-voice-player-lyric-active-color, #fff) !default;
+$-voice-player-lyric-active-shadow: var(--oxy-voice-player-lyric-active-shadow, 0 2rpx 8rpx rgba(0, 0, 0, 0.3)) !default;
 $-voice-player-lyric-translation-fs: var(--oxy-voice-player-lyric-translation-fs, 26rpx) !default;
 $-voice-player-lyric-translation-color: var(--oxy-voice-player-lyric-translation-color, rgba(255, 255, 255, 0.5)) !default;
 $-voice-player-lyric-translation-active-color: var(--oxy-voice-player-lyric-translation-active-color, rgba(255, 255, 255, 0.9)) !default;
 
 $-voice-player-time-fs: var(--oxy-voice-player-time-fs, 26rpx) !default;
 $-voice-player-time-color: var(--oxy-voice-player-time-color, rgba(255, 255, 255, 0.9)) !default;
+$-voice-player-time-shadow: var(--oxy-voice-player-time-shadow, 0 1rpx 2rpx rgba(0, 0, 0, 0.1)) !default;
 
 $-voice-player-progress-height: var(--oxy-voice-player-progress-height, 4rpx) !default;
+$-voice-player-progress-radius: var(--oxy-voice-player-progress-radius, 2rpx) !default;
 $-voice-player-progress-bg: var(--oxy-voice-player-progress-bg, rgba(255, 255, 255, 0.15)) !default;
 $-voice-player-progress-buffered-bg: var(--oxy-voice-player-progress-buffered-bg, rgba(255, 255, 255, 0.25)) !default;
 $-voice-player-progress-filled-bg: var(--oxy-voice-player-progress-filled-bg, linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%)) !default;
 $-voice-player-progress-shadow: var(--oxy-voice-player-progress-shadow, 0 0 8rpx rgba(255, 255, 255, 0.3)) !default;
 $-voice-player-progress-dot-size: var(--oxy-voice-player-progress-dot-size, 24rpx) !default;
+$-voice-player-progress-dot-bg: var(--oxy-voice-player-progress-dot-bg, #fff) !default;
 $-voice-player-progress-dot-shadow: var(--oxy-voice-player-progress-dot-shadow, 0 2rpx 8rpx rgba(0, 0, 0, 0.2), 0 0 0 4rpx rgba(255, 255, 255, 0.2)) !default;
 $-voice-player-progress-dot-active-shadow: var(--oxy-voice-player-progress-dot-active-shadow, 0 4rpx 16rpx rgba(0, 0, 0, 0.3), 0 0 0 6rpx rgba(255, 255, 255, 0.15)) !default;
 
@@ -51,34 +60,49 @@ $-voice-player-control-btn-active-shadow: var(--oxy-voice-player-control-btn-act
 $-voice-player-control-btn-play-size: var(--oxy-voice-player-control-btn-play-size, 100rpx) !default;
 $-voice-player-control-btn-play-bg: var(--oxy-voice-player-control-btn-play-bg, resultColor(135deg, $-color-theme, 'dark' 'light', #667eea #764ba2, 0% 100%)) !default;
 $-voice-player-control-icon-fs: var(--oxy-voice-player-control-icon-fs, 60rpx) !default;
+$-voice-player-control-icon-color: var(--oxy-voice-player-control-icon-color, #fff) !default;
+$-voice-player-control-icon-shadow: var(--oxy-voice-player-control-icon-shadow, 0 2rpx 4rpx rgba(0, 0, 0, 0.2)) !default;
 $-voice-player-control-btn-icon-fs: var(--oxy-voice-player-control-btn-icon-fs, 80rpx) !default;
+$-voice-player-control-btn-icon-color: var(--oxy-voice-player-control-btn-icon-color, #fff) !default;
+$-voice-player-control-btn-icon-shadow: var(--oxy-voice-player-control-btn-icon-shadow, 0 2rpx 4rpx rgba(0, 0, 0, 0.2)) !default;
 
 $-voice-player-extra-btn-size: var(--oxy-voice-player-extra-btn-size, 72rpx) !default;
 $-voice-player-extra-btn-bg: var(--oxy-voice-player-extra-btn-bg, rgba(255, 255, 255, 0.2)) !default;
 $-voice-player-extra-btn-shadow: var(--oxy-voice-player-extra-btn-shadow, 0 2rpx 8rpx rgba(0, 0, 0, 0.1)) !default;
 $-voice-player-extra-btn-active-shadow: var(--oxy-voice-player-extra-btn-active-shadow, 0 1rpx 4rpx rgba(0, 0, 0, 0.15)) !default;
 $-voice-player-extra-btn-icon-fs: var(--oxy-voice-player-extra-btn-icon-fs, 40rpx) !default;
+$-voice-player-extra-btn-icon-color: var(--oxy-voice-player-extra-btn-icon-color, #fff) !default;
+$-voice-player-extra-btn-icon-shadow: var(--oxy-voice-player-extra-btn-icon-shadow, 0 1rpx 2rpx rgba(0, 0, 0, 0.2)) !default;
 $-voice-player-extra-btn-favorite-color: var(--oxy-voice-player-extra-btn-favorite-color, #ff4757) !default;
 
 $-voice-player-volume-panel-bg: var(--oxy-voice-player-volume-panel-bg, rgba(255, 255, 255, 0.15)) !default;
 $-voice-player-volume-panel-radius: var(--oxy-voice-player-volume-panel-radius, 16rpx) !default;
 $-voice-player-volume-panel-shadow: var(--oxy-voice-player-volume-panel-shadow, 0 4rpx 16rpx rgba(0, 0, 0, 0.1)) !default;
 $-voice-player-volume-track-height: var(--oxy-voice-player-volume-track-height, 3rpx) !default;
+$-voice-player-volume-track-radius: var(--oxy-voice-player-volume-track-radius, 2rpx) !default;
 $-voice-player-volume-track-bg: var(--oxy-voice-player-volume-track-bg, rgba(255, 255, 255, 0.15)) !default;
 $-voice-player-volume-filled-bg: var(--oxy-voice-player-volume-filled-bg, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%)) !default;
 $-voice-player-volume-shadow: var(--oxy-voice-player-volume-shadow, 0 0 6rpx rgba(255, 255, 255, 0.3)) !default;
 $-voice-player-volume-dot-size: var(--oxy-voice-player-volume-dot-size, 20rpx) !default;
+$-voice-player-volume-dot-bg: var(--oxy-voice-player-volume-dot-bg, #fff) !default;
 $-voice-player-volume-dot-shadow: var(--oxy-voice-player-volume-dot-shadow, 0 2rpx 6rpx rgba(0, 0, 0, 0.15), 0 0 0 3rpx rgba(255, 255, 255, 0.2)) !default;
 $-voice-player-volume-text-fs: var(--oxy-voice-player-volume-text-fs, 26rpx) !default;
 $-voice-player-volume-text-color: var(--oxy-voice-player-volume-text-color, rgba(255, 255, 255, 0.9)) !default;
+$-voice-player-volume-text-shadow: var(--oxy-voice-player-volume-text-shadow, 0 1rpx 2rpx rgba(0, 0, 0, 0.1)) !default;
 
 $-voice-player-mini-padding: var(--oxy-voice-player-mini-padding, 20rpx 24rpx) !default;
+$-voice-player-mini-bg: var(--oxy-voice-player-mini-bg, linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%)) !default;
 $-voice-player-mini-shadow: var(--oxy-voice-player-mini-shadow, 0 -4rpx 20rpx rgba(0, 0, 0, 0.1)) !default;
 $-voice-player-mini-cover-size: var(--oxy-voice-player-mini-cover-size, 100rpx) !default;
 $-voice-player-mini-cover-shadow: var(--oxy-voice-player-mini-cover-shadow, 0 4rpx 12rpx rgba(0, 0, 0, 0.25), 0 0 0 4rpx rgba(255, 255, 255, 0.1)) !default;
 $-voice-player-mini-cover-center-size: var(--oxy-voice-player-mini-cover-center-size, 32rpx) !default;
 $-voice-player-mini-cover-center-dot-size: var(--oxy-voice-player-mini-cover-center-dot-size, 12rpx) !default;
+$-voice-player-mini-cover-center-bg: var(--oxy-voice-player-mini-cover-center-bg, linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%)) !default;
+$-voice-player-mini-cover-center-shadow: var(--oxy-voice-player-mini-cover-center-shadow, inset 0 1rpx 4rpx rgba(0, 0, 0, 0.2), 0 1rpx 4rpx rgba(0, 0, 0, 0.15)) !default;
+$-voice-player-mini-cover-center-dot-shadow: var(--oxy-voice-player-mini-cover-center-dot-shadow, inset 0 1rpx 2rpx rgba(0, 0, 0, 0.3)) !default;
 $-voice-player-mini-title-fs: var(--oxy-voice-player-mini-title-fs, 28rpx) !default;
+$-voice-player-mini-title-color: var(--oxy-voice-player-mini-title-color, #fff) !default;
+$-voice-player-mini-title-shadow: var(--oxy-voice-player-mini-title-shadow, 0 1rpx 2rpx rgba(0, 0, 0, 0.1)) !default;
 $-voice-player-mini-artist-fs: var(--oxy-voice-player-mini-artist-fs, 24rpx) !default;
 $-voice-player-mini-artist-color: var(--oxy-voice-player-mini-artist-color, rgba(255, 255, 255, 0.8)) !default;
 $-voice-player-mini-control-btn-size: var(--oxy-voice-player-mini-control-btn-size, 56rpx) !default;
@@ -86,11 +110,14 @@ $-voice-player-mini-control-btn-play-size: var(--oxy-voice-player-mini-control-b
 $-voice-player-mini-control-btn-play-bg: var(--oxy-voice-player-mini-control-btn-play-bg, rgba(255, 255, 255, 0.3)) !default;
 $-voice-player-mini-control-btn-play-shadow: var(--oxy-voice-player-mini-control-btn-play-shadow, 0 4rpx 12rpx rgba(0, 0, 0, 0.2)) !default;
 $-voice-player-mini-btn-icon-fs: var(--oxy-voice-player-mini-btn-icon-fs, 32rpx) !default;
+$-voice-player-mini-btn-icon-color: var(--oxy-voice-player-mini-btn-icon-color, #fff) !default;
+$-voice-player-mini-btn-icon-shadow: var(--oxy-voice-player-mini-btn-icon-shadow, 0 1rpx 2rpx rgba(0, 0, 0, 0.2)) !default;
 $-voice-player-mini-progress-height: var(--oxy-voice-player-mini-progress-height, 3rpx) !default;
 $-voice-player-mini-progress-bg: var(--oxy-voice-player-mini-progress-bg, rgba(255, 255, 255, 0.12)) !default;
 $-voice-player-mini-progress-bar-bg: var(--oxy-voice-player-mini-progress-bar-bg, linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%)) !default;
 $-voice-player-mini-progress-shadow: var(--oxy-voice-player-mini-progress-shadow, 0 0 8rpx rgba(255, 255, 255, 0.4)) !default;
 $-voice-player-mini-progress-dot-size: var(--oxy-voice-player-mini-progress-dot-size, 12rpx) !default;
+$-voice-player-mini-progress-dot-bg: var(--oxy-voice-player-mini-progress-dot-bg, #fff) !default;
 $-voice-player-mini-progress-dot-shadow: var(--oxy-voice-player-mini-progress-dot-shadow, 0 2rpx 6rpx rgba(0, 0, 0, 0.2), 0 0 0 2rpx rgba(255, 255, 255, 0.3)) !default;
 
 $-voice-player-simple-padding: var(--oxy-voice-player-simple-padding, 16rpx 20rpx) !default;
@@ -99,10 +126,12 @@ $-voice-player-simple-radius: var(--oxy-voice-player-simple-radius, 12rpx) !defa
 $-voice-player-simple-time-fs: var(--oxy-voice-player-simple-time-fs, 24rpx) !default;
 $-voice-player-simple-time-color: var(--oxy-voice-player-simple-time-color, inherit) !default;
 $-voice-player-simple-progress-height: var(--oxy-voice-player-simple-progress-height, 4rpx) !default;
+$-voice-player-simple-progress-radius: var(--oxy-voice-player-simple-progress-radius, 2rpx) !default;
 $-voice-player-simple-progress-bg: var(--oxy-voice-player-simple-progress-bg, rgba(0, 0, 0, 0.1)) !default;
 $-voice-player-simple-progress-filled-bg: var(--oxy-voice-player-simple-progress-filled-bg, linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)) !default;
 $-voice-player-simple-progress-shadow: var(--oxy-voice-player-simple-progress-shadow, 0 0 6rpx rgba(0, 0, 0, 0.2)) !default;
 $-voice-player-simple-progress-dot-size: var(--oxy-voice-player-simple-progress-dot-size, 16rpx) !default;
+$-voice-player-simple-progress-dot-bg: var(--oxy-voice-player-simple-progress-dot-bg, #fff) !default;
 $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progress-dot-shadow, 0 2rpx 6rpx rgba(0, 0, 0, 0.2), 0 0 0 3rpx rgba(0, 0, 0, 0.1)) !default;
 
 @include b(voice-player) {
@@ -127,7 +156,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
 
   @include when(theme-dark) {
     background: $-voice-player-bg-dark;
-    color: #fff;
+    color: $-voice-player-title-color;
 
     &::before {
       background: $-voice-player-bg-dark;
@@ -241,8 +270,8 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     width: $-voice-player-cover-center-size;
     height: $-voice-player-cover-center-size;
     border-radius: 50%;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
-    box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2), 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+    background: $-voice-player-cover-center-bg;
+    box-shadow: $-voice-player-cover-center-shadow;
     z-index: 2;
 
     &::before {
@@ -255,7 +284,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       height: $-voice-player-cover-center-dot-size;
       border-radius: 50%;
       background: $-voice-player-cover-center-dot-bg;
-      box-shadow: inset 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
+      box-shadow: $-voice-player-cover-center-dot-shadow;
     }
   }
 
@@ -285,7 +314,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     font-weight: 600;
     color: $-voice-player-title-color;
     margin-bottom: 20rpx;
-    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+    text-shadow: $-voice-player-title-shadow;
     letter-spacing: 1rpx;
   }
 
@@ -294,7 +323,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     font-size: $-voice-player-artist-fs;
     color: $-voice-player-artist-color;
     margin-bottom: 12rpx;
-    text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
+    text-shadow: $-voice-player-artist-shadow;
   }
 
   @include e(song-album) {
@@ -334,7 +363,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
         font-size: $-voice-player-lyric-active-fs;
         font-weight: 600;
         color: $-voice-player-lyric-active-color;
-        text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+        text-shadow: $-voice-player-lyric-active-shadow;
       }
 
       .oxy-voice-player__lyric-translation {
@@ -358,12 +387,12 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     font-size: $-voice-player-lyric-translation-fs;
     color: $-voice-player-lyric-translation-color;
     line-height: 1.5;
-    margin-top: 6rpx;
+    margin-top: 8rpx;
     transition: all 0.3s ease;
   }
 
   @include e(progress-section) {
-    margin-bottom: 10rpx;
+    margin-bottom: 12rpx;
   }
 
   @include e(time-info) {
@@ -377,14 +406,14 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     font-size: $-voice-player-time-fs;
     color: $-voice-player-time-color;
     font-weight: 500;
-    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
+    text-shadow: $-voice-player-time-shadow;
   }
 
   @include e(total-time) {
     font-size: $-voice-player-time-fs;
     color: $-voice-player-time-color;
     font-weight: 500;
-    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
+    text-shadow: $-voice-player-time-shadow;
   }
 
   @include e(slider-wrapper) {
@@ -401,7 +430,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     width: 100%;
     height: $-voice-player-progress-height;
     background: $-voice-player-progress-bg;
-    border-radius: 2rpx;
+    border-radius: $-voice-player-progress-radius;
     overflow: visible;
   }
 
@@ -411,7 +440,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     left: 0;
     height: 6rpx;
     background: $-voice-player-progress-buffered-bg;
-    border-radius: 2rpx;
+    border-radius: $-voice-player-progress-radius;
     transition: width 0.3s ease;
     z-index: 1;
     transform: translateY(-50%);
@@ -423,7 +452,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     left: 0;
     height: 100%;
     background: $-voice-player-progress-filled-bg;
-    border-radius: 2rpx;
+    border-radius: $-voice-player-progress-radius;
     transition: width 0.1s linear;
     z-index: 2;
     box-shadow: $-voice-player-progress-shadow;
@@ -436,7 +465,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     transform: translateY(-50%) scale(0.8);
     width: $-voice-player-progress-dot-size;
     height: $-voice-player-progress-dot-size;
-    background: #fff;
+    background: $-voice-player-progress-dot-bg;
     border-radius: 50%;
     box-shadow: $-voice-player-progress-dot-shadow;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -507,14 +536,14 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   }
   :deep(.oxy-voice-player__control-icon) {
     font-size: $-voice-player-control-icon-fs;
-    color: #fff;
-    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+    color: $-voice-player-control-icon-color;
+    text-shadow: $-voice-player-control-icon-shadow;
   }
 
   :deep(.oxy-voice-player__btn-icon) {
     font-size: $-voice-player-control-btn-icon-fs;
-    color: #fff;
-    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+    color: $-voice-player-control-btn-icon-color;
+    text-shadow: $-voice-player-control-btn-icon-shadow;
   }
 
   @include e(extra-btn) {
@@ -536,7 +565,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
 
     @include m(favorite-btn) {
       .oxy-voice-player__extra-btn-icon {
-        color: #fff;
+        color: $-voice-player-extra-btn-icon-color;
 
         @include when(favorited) {
           color: $-voice-player-extra-btn-favorite-color;
@@ -547,8 +576,8 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
 
   :deep(.oxy-voice-player__extra-btn-icon) {
     font-size: $-voice-player-extra-btn-icon-fs;
-    color: #fff;
-    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
+    color: $-voice-player-extra-btn-icon-color;
+    text-shadow: $-voice-player-extra-btn-icon-shadow;
   }
 
   @include e(volume-panel) {
@@ -573,7 +602,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     width: 100%;
     height: $-voice-player-volume-track-height;
     background: $-voice-player-volume-track-bg;
-    border-radius: 2rpx;
+    border-radius: $-voice-player-volume-track-radius;
   }
 
   @include e(volume-filled) {
@@ -582,7 +611,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     left: 0;
     height: 100%;
     background: $-voice-player-volume-filled-bg;
-    border-radius: 2rpx;
+    border-radius: $-voice-player-volume-track-radius;
     transition: width 0.2s ease;
     box-shadow: $-voice-player-volume-shadow;
   }
@@ -594,7 +623,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     transform: translateY(-50%) scale(0.8);
     width: $-voice-player-volume-dot-size;
     height: $-voice-player-volume-dot-size;
-    background: #fff;
+    background: $-voice-player-volume-dot-bg;
     border-radius: 50%;
     box-shadow: $-voice-player-volume-dot-shadow;
     opacity: 0;
@@ -617,14 +646,14 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     font-weight: 500;
     min-width: 70rpx;
     text-align: right;
-    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
+    text-shadow: $-voice-player-volume-text-shadow;
   }
 
   @include e(mini-player) {
     display: flex;
     align-items: center;
     padding: $-voice-player-mini-padding;
-    background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
+    background: $-voice-player-mini-bg;
     position: relative;
     box-shadow: $-voice-player-mini-shadow;
     min-width: 0;
@@ -675,8 +704,8 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     width: $-voice-player-mini-cover-center-size;
     height: $-voice-player-mini-cover-center-size;
     border-radius: 50%;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
-    box-shadow: inset 0 1rpx 4rpx rgba(0, 0, 0, 0.2), 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
+    background: $-voice-player-mini-cover-center-bg;
+    box-shadow: $-voice-player-mini-cover-center-shadow;
     z-index: 2;
 
     &::before {
@@ -689,7 +718,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       height: $-voice-player-mini-cover-center-dot-size;
       border-radius: 50%;
       background: $-voice-player-cover-center-dot-bg;
-      box-shadow: inset 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
+      box-shadow: $-voice-player-mini-cover-center-dot-shadow;
     }
   }
 
@@ -704,12 +733,12 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     display: block;
     font-size: $-voice-player-mini-title-fs;
     font-weight: 600;
-    color: #fff;
-    margin-bottom: 6rpx;
+    color: $-voice-player-mini-title-color;
+    margin-bottom: 8rpx;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
+    text-shadow: $-voice-player-mini-title-shadow;
   }
 
   @include e(mini-artist) {
@@ -757,8 +786,8 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
 
   :deep(.oxy-voice-player__mini-btn-icon) {
     font-size: $-voice-player-mini-btn-icon-fs;
-    color: #fff;
-    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
+    color: $-voice-player-mini-btn-icon-color;
+    text-shadow: $-voice-player-mini-btn-icon-shadow;
   }
 
   @include e(mini-progress) {
@@ -786,7 +815,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       transform: translateY(-50%);
       width: $-voice-player-mini-progress-dot-size;
       height: $-voice-player-mini-progress-dot-size;
-      background: rgba(255, 255, 255, 1);
+      background: $-voice-player-mini-progress-dot-bg;
       border-radius: 50%;
       box-shadow: $-voice-player-mini-progress-dot-shadow;
       opacity: 0;
@@ -835,7 +864,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     width: 100%;
     height: $-voice-player-simple-progress-height;
     background: $-voice-player-simple-progress-bg;
-    border-radius: 2rpx;
+    border-radius: $-voice-player-simple-progress-radius;
     overflow: visible;
   }
 
@@ -845,7 +874,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     left: 0;
     height: 100%;
     background: $-voice-player-simple-progress-filled-bg;
-    border-radius: 2rpx;
+    border-radius: $-voice-player-simple-progress-radius;
     transition: width 0.1s linear;
     z-index: 2;
     box-shadow: $-voice-player-simple-progress-shadow;
@@ -858,7 +887,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       transform: translateY(-50%);
       width: $-voice-player-simple-progress-dot-size;
       height: $-voice-player-simple-progress-dot-size;
-      background: rgba(255, 255, 255, 1);
+      background: $-voice-player-simple-progress-dot-bg;
       border-radius: 50%;
       box-shadow: $-voice-player-simple-progress-dot-shadow;
       opacity: 0;

package/global.d.ts

@@ -72,6 +72,8 @@ declare module 'vue' {
     OxySwiper: typeof import('./components/oxy-swiper/oxy-swiper.vue')['default']
     OxySwiperNav: typeof import('./components/oxy-swiper-nav/oxy-swiper-nav.vue')['default']
     OxySegmented: typeof import('./components/oxy-segmented/oxy-segmented.vue')['default']
+    OxySplitter: typeof import('./components/oxy-splitter/oxy-splitter.vue')['default']
+    OxySplitterPanel: typeof import('./components/oxy-splitter-panel/oxy-splitter-panel.vue')['default']
     OxyTabbar: typeof import('./components/oxy-tabbar/oxy-tabbar.vue')['default']
     OxyTabbarItem: typeof import('./components/oxy-tabbar-item/oxy-tabbar-item.vue')['default']
     OxyNavbar: typeof import('./components/oxy-navbar/oxy-navbar.vue')['default']

package/package.json

@@ -2,7 +2,7 @@
   "id": "oxy-uni-ui",
   "name": "oxy-uni-ui",
   "displayName": "oxy-uni-ui 基于vue3+Typescript的高颜值组件库",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "description": "一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。",
   "keywords": [