oxy-uni-ui 2.1.1 → 2.1.3

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

@@ -19,7 +19,7 @@ $-voice-player-cover-center-shadow: var(--oxy-voice-player-cover-center-shadow,
 $-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-color: var(--oxy-voice-player-title-color, $-color-white) !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;
@@ -32,7 +32,7 @@ $-voice-player-lyric-expanded-height: var(--oxy-voice-player-lyric-expanded-heig
 $-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-color: var(--oxy-voice-player-lyric-active-color, $-color-white) !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;
@@ -49,7 +49,7 @@ $-voice-player-progress-buffered-bg: var(--oxy-voice-player-progress-buffered-bg
 $-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-bg: var(--oxy-voice-player-progress-dot-bg, $-color-white) !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;
 
@@ -60,10 +60,10 @@ $-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-color: var(--oxy-voice-player-control-icon-color, $-color-white) !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-color: var(--oxy-voice-player-control-btn-icon-color, $-color-white) !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;
@@ -71,7 +71,7 @@ $-voice-player-extra-btn-bg: var(--oxy-voice-player-extra-btn-bg, rgba(255, 255,
 $-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-color: var(--oxy-voice-player-extra-btn-icon-color, $-color-white) !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;
 
@@ -84,13 +84,13 @@ $-voice-player-volume-track-bg: var(--oxy-voice-player-volume-track-bg, rgba(255
 $-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-bg: var(--oxy-voice-player-volume-dot-bg, $-color-white) !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-padding: var(--oxy-voice-player-mini-padding, $-spacing-20 $-spacing-24) !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;
@@ -101,7 +101,7 @@ $-voice-player-mini-cover-center-bg: var(--oxy-voice-player-mini-cover-center-bg
 $-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-color: var(--oxy-voice-player-mini-title-color, $-color-white) !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;
@@ -110,17 +110,17 @@ $-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-color: var(--oxy-voice-player-mini-btn-icon-color, $-color-white) !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-bg: var(--oxy-voice-player-mini-progress-dot-bg, $-color-white) !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;
+$-voice-player-simple-padding: var(--oxy-voice-player-simple-padding, $-spacing-16 $-spacing-20) !default;
 $-voice-player-simple-bg: var(--oxy-voice-player-simple-bg, transparent) !default;
 $-voice-player-simple-radius: var(--oxy-voice-player-simple-radius, 12rpx) !default;
 $-voice-player-simple-time-fs: var(--oxy-voice-player-simple-time-fs, 24rpx) !default;
@@ -131,7 +131,7 @@ $-voice-player-simple-progress-bg: var(--oxy-voice-player-simple-progress-bg, rg
 $-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-bg: var(--oxy-voice-player-simple-progress-dot-bg, $-color-white) !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) {
@@ -140,7 +140,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   overflow: hidden;
   position: relative;
   box-shadow: $-voice-player-shadow;
-  transition: all 0.3s ease;
+  transition: all $-transition-duration-slow $-transition-timing-function-base;
   --oxy-slider-handle-radius: 18rpx;
   --oxy-slider-axie-height: 6rpx;
   &::before {
@@ -200,14 +200,14 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     overflow: hidden;
     width: 100%;
     min-height: 200rpx;
-    padding: 40rpx;
+    padding: $-spacing-40;
   }
 
   @include e(cover-section) {
     display: flex;
     justify-content: center;
-    margin-bottom: 40rpx;
-    transition: all 0.4s $-transition-timing-function-base;
+    margin-bottom: $-spacing-40;
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
     opacity: 1;
     transform: translateX(0);
     max-height: 500rpx;
@@ -241,7 +241,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     position: relative;
     overflow: hidden;
     box-shadow: $-voice-player-cover-shadow;
-    transition: all 0.4s $-transition-timing-function-base;
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
     transform-origin: center center;
 
     @include when(rotating) {
@@ -272,7 +272,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     border-radius: $-radius-circle;
     background: $-voice-player-cover-center-bg;
     box-shadow: $-voice-player-cover-center-shadow;
-    z-index: 2;
+    z-index: $-z-index-sticky;
 
     &::before {
       content: '';
@@ -290,8 +290,8 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
 
   @include e(info) {
     text-align: center;
-    margin-bottom: 40rpx;
-    transition: all 0.4s $-transition-timing-function-base;
+    margin-bottom: $-spacing-40;
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
     opacity: 1;
     transform: translateX(0);
     max-height: 200rpx;
@@ -313,7 +313,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     font-size: $-voice-player-title-fs;
     font-weight: $-fw-semibold;
     color: $-voice-player-title-color;
-    margin-bottom: 20rpx;
+    margin-bottom: $-spacing-20;
     text-shadow: $-voice-player-title-shadow;
     letter-spacing: 1rpx;
   }
@@ -322,7 +322,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     display: block;
     font-size: $-voice-player-artist-fs;
     color: $-voice-player-artist-color;
-    margin-bottom: 12rpx;
+    margin-bottom: $-spacing-12;
     text-shadow: $-voice-player-artist-shadow;
   }
 
@@ -334,14 +334,14 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
 
   @include e(lyrics) {
     height: $-voice-player-lyric-height;
-    margin-bottom: 32rpx;
-    transition: all 0.4s $-transition-timing-function-base;
+    margin-bottom: $-spacing-32;
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
     background: transparent;
     overflow: hidden;
 
     @include when(expanded) {
       height: $-voice-player-lyric-expanded-height;
-      margin-bottom: 40rpx;
+      margin-bottom: $-spacing-40;
       background: transparent;
     }
   }
@@ -349,14 +349,14 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(lyrics-container) {
     height: 100%;
     overflow-y: auto;
-    padding: 20rpx 0;
+    padding: $-spacing-20 0;
     background: transparent;
   }
 
   @include e(lyric-line) {
-    padding: 16rpx 32rpx;
+    padding: $-spacing-16 $-spacing-32;
     text-align: center;
-    transition: all 0.3s ease;
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
 
     @include when(active) {
       .oxy-voice-player__lyric-text {
@@ -369,7 +369,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       .oxy-voice-player__lyric-translation {
         font-size: $-voice-player-lyric-translation-fs;
         color: $-voice-player-lyric-translation-active-color;
-        margin-top: 8rpx;
+        margin-top: $-spacing-8;
       }
     }
   }
@@ -379,7 +379,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     font-size: $-voice-player-lyric-fs;
     color: $-voice-player-lyric-color;
     line-height: 1.6;
-    transition: all 0.3s ease;
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
   }
 
   @include e(lyric-translation) {
@@ -387,19 +387,19 @@ $-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: 8rpx;
-    transition: all 0.3s ease;
+    margin-top: $-spacing-8;
+    transition: all $-transition-duration-slow $-transition-timing-function-base;
   }
 
   @include e(progress-section) {
-    margin-bottom: 12rpx;
+    margin-bottom: $-spacing-12;
   }
 
   @include e(time-info) {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20rpx;
+    margin-bottom: $-spacing-20;
   }
 
   @include e(current-time) {
@@ -419,7 +419,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(slider-wrapper) {
     position: relative;
     width: 100%;
-    padding: 32rpx 0;
+    padding: $-spacing-32 0;
     // #ifdef H5
     touch-action: none;
     // #endif
@@ -441,8 +441,8 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     height: 6rpx;
     background: $-voice-player-progress-buffered-bg;
     border-radius: $-voice-player-progress-radius;
-    transition: width 0.3s ease;
-    z-index: 1;
+    transition: width $-transition-duration-slow $-transition-timing-function-base;
+    z-index: $-z-index-sticky;
     transform: translateY(-50%);
   }
 
@@ -453,8 +453,8 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     height: 100%;
     background: $-voice-player-progress-filled-bg;
     border-radius: $-voice-player-progress-radius;
-    transition: width 0.1s linear;
-    z-index: 2;
+    transition: width $-transition-duration-fast linear;
+    z-index: $-z-index-sticky;
     box-shadow: $-voice-player-progress-shadow;
   }
 
@@ -485,7 +485,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     width: 100%;
     height: 100%;
     opacity: 0;
-    z-index: 10;
+    z-index: $-z-index-sticky;
     margin: 0;
   }
 
@@ -494,7 +494,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       display: flex;
       justify-content: center;
       align-items: center;
-      gap: 40rpx;
+      gap: $-spacing-40;
 
     }
 
@@ -502,8 +502,8 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       display: flex;
       justify-content: center;
       align-items: center;
-      gap: 32rpx;
-      margin-top: 32rpx;
+      gap: $-spacing-32;
+      margin-top: $-spacing-32;
     }
   }
 
@@ -583,9 +583,9 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(volume-panel) {
     display: flex;
     align-items: center;
-    gap: 20rpx;
-    margin-top: 24rpx;
-    padding: 0 32rpx;
+    gap: $-spacing-20;
+    margin-top: $-spacing-24;
+    padding: 0 $-spacing-32;
     background: $-voice-player-volume-panel-bg;
     border-radius: $-voice-player-volume-panel-radius;
     box-shadow: $-voice-player-volume-panel-shadow;
@@ -594,7 +594,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(volume-slider-wrapper) {
     flex: 1;
     position: relative;
-    padding: 28rpx 0;
+    padding: $-spacing-24 0;
   }
 
   @include e(volume-track) {
@@ -612,7 +612,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     height: 100%;
     background: $-voice-player-volume-filled-bg;
     border-radius: $-voice-player-volume-track-radius;
-    transition: width 0.2s ease;
+    transition: width $-transition-duration-base $-transition-timing-function-base;
     box-shadow: $-voice-player-volume-shadow;
   }
 
@@ -637,7 +637,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     width: 100%;
     height: 100%;
     opacity: 0;
-    z-index: 10;
+    z-index: $-z-index-sticky;
   }
 
   @include e(volume-text) {
@@ -667,7 +667,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     min-width: $-voice-player-mini-cover-size;
     min-height: $-voice-player-mini-cover-size;
     flex-shrink: 0;
-    margin-right: 16rpx;
+    margin-right: $-spacing-16;
   }
 
   @include e(mini-cover-disc) {
@@ -706,7 +706,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     border-radius: $-radius-circle;
     background: $-voice-player-mini-cover-center-bg;
     box-shadow: $-voice-player-mini-cover-center-shadow;
-    z-index: 2;
+    z-index: $-z-index-sticky;
 
     &::before {
       content: '';
@@ -725,7 +725,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(mini-info) {
     flex: 1;
     min-width: 0;
-    margin-right: 16rpx;
+    margin-right: $-spacing-16;
     overflow: hidden;
   }
 
@@ -734,7 +734,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     font-size: $-voice-player-mini-title-fs;
     font-weight: $-fw-semibold;
     color: $-voice-player-mini-title-color;
-    margin-bottom: 8rpx;
+    margin-bottom: $-spacing-8;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -753,7 +753,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(mini-controls) {
     display: flex;
     align-items: center;
-    gap: 12rpx;
+    gap: $-spacing-12;
   }
 
   @include e(mini-control-btn) {
@@ -803,7 +803,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(mini-progress-bar) {
     height: 100%;
     background: $-voice-player-mini-progress-bar-bg;
-    transition: width 0.1s linear;
+    transition: width $-transition-duration-fast linear;
     box-shadow: $-voice-player-mini-progress-shadow;
     position: relative;
 
@@ -819,7 +819,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       border-radius: $-radius-circle;
       box-shadow: $-voice-player-mini-progress-dot-shadow;
       opacity: 0;
-      transition: opacity 0.2s ease;
+      transition: opacity $-transition-duration-base $-transition-timing-function-base;
     }
   }
 
@@ -833,7 +833,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 12rpx;
+    margin-bottom: $-spacing-12;
   }
 
   @include e(simple-current-time) {
@@ -856,7 +856,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   @include e(simple-slider-wrapper) {
     position: relative;
     width: 100%;
-    padding: 32rpx 0;
+    padding: $-spacing-32 0;
   }
 
   @include e(simple-progress-track) {
@@ -875,8 +875,8 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     height: 100%;
     background: $-voice-player-simple-progress-filled-bg;
     border-radius: $-voice-player-simple-progress-radius;
-    transition: width 0.1s linear;
-    z-index: 2;
+    transition: width $-transition-duration-fast linear;
+    z-index: $-z-index-sticky;
     box-shadow: $-voice-player-simple-progress-shadow;
 
     &::after {
@@ -891,7 +891,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
       border-radius: $-radius-circle;
       box-shadow: $-voice-player-simple-progress-dot-shadow;
       opacity: 0;
-      transition: opacity 0.2s ease;
+      transition: opacity $-transition-duration-base $-transition-timing-function-base;
     }
   }
 
@@ -902,7 +902,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
     width: 100%;
     height: 100%;
     opacity: 0;
-    z-index: 3;
+    z-index: $-z-index-sticky;
   }
 }
 
@@ -922,7 +922,7 @@ $-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progres
   }
 
   .oxy-voice-player__main-controls {
-    gap: 24rpx;
+    gap: $-spacing-24;
 
     .oxy-voice-player__control-btn {
       width: 72rpx;

package/components/oxy-voice-player/oxy-voice-player.vue

@@ -27,7 +27,7 @@
         </view>
 
         <view v-if="showInfo" class="oxy-voice-player__info" :class="{ 'is-hidden': isCoverHidden }">
-          <text class="oxy-voice-player__song-title">{{ currentSong.title || '未知歌曲' }}</text>
+          <text class="oxy-voice-player__song-title">{{ currentSong.title || translate('unknownSong') }}</text>
           <text v-if="currentSong.artist" class="oxy-voice-player__song-artist">{{ currentSong.artist }}</text>
           <text v-if="currentSong.album" class="oxy-voice-player__song-album">{{ currentSong.album }}</text>
         </view>
@@ -136,7 +136,7 @@
         </view>
 
         <view class="oxy-voice-player__mini-info">
-          <text class="oxy-voice-player__mini-title">{{ currentSong.title || '未知歌曲' }}</text>
+          <text class="oxy-voice-player__mini-title">{{ currentSong.title || translate('unknownSong') }}</text>
           <text v-if="currentSong.artist" class="oxy-voice-player__mini-artist">{{ currentSong.artist }}</text>
         </view>
 
@@ -194,7 +194,9 @@ export default {
   name: 'oxy-voice-player',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -214,8 +216,10 @@ import {
   type TouchEvent,
   type TouchPoint
 } from './types'
+import { useTranslate } from '../composables/useTranslate'
 const props = defineProps(voicePlayerProps)
 const emit = defineEmits<VoicePlayerEmits>()
+const { translate } = useTranslate('voicePlayer')
 
 const isPlaying = ref(false)
 const currentTime = ref(0)
@@ -374,6 +378,10 @@ function validateCurrentIndex() {
   }
 }
 
+/**
+ * 获取缓冲时间：优先读取 buffered 属性，兼容不同平台的 TimeRanges 格式
+ * @param context - InnerAudioContext 实例
+ */
 function getBufferedTime(context: InnerAudioContext): number {
   const bufferedValue = (context as InnerAudioContext & { buffered?: unknown }).buffered
   if (typeof bufferedValue === 'number') {
@@ -389,6 +397,10 @@ function getBufferedTime(context: InnerAudioContext): number {
   return 0
 }
 
+/**
+ * 初始化音频上下文：创建 InnerAudioContext，绑定播放/暂停/结束/错误等事件
+ * 同时处理 H5/App 端的缓冲进度获取
+ */
 function initializeAudio() {
   try {
     cleanup()
@@ -401,7 +413,7 @@ function initializeAudio() {
     }
 
     if (!audioContext.value) {
-      throw new Error('无法创建音频上下文')
+      throw new Error(translate('initAudioError'))
     }
 
     audioContext.value.src = currentSong.value.src || props.src
@@ -448,13 +460,14 @@ function initializeAudio() {
     })
 
     audioContext.value.onError((error: { errMsg: string; errCode: number }) => {
-      handleError('音频播放错误', error)
-      emit('error', { message: '音频播放错误', error })
+      const msg = translate('audioError')
+      handleError(msg, error)
+      emit('error', { message: msg, error })
     })
 
     isInitialized.value = true
   } catch (error) {
-    handleError('初始化音频失败', error)
+    handleError(translate('initAudioError'), error)
   }
 }
 const onTimeUpdate = () => {
@@ -485,7 +498,7 @@ function play() {
     try {
       audioContext.value.play()
     } catch (error) {
-      handleError('播放失败', error)
+      handleError(translate('playError'), error)
     }
   }
 }
@@ -495,7 +508,7 @@ function pause() {
     try {
       audioContext.value.pause()
     } catch (error) {
-      handleError('暂停失败', error)
+      handleError(translate('pauseError'), error)
     }
   }
 }
@@ -506,7 +519,7 @@ function stop() {
       audioContext.value.stop()
       currentTime.value = 0
     } catch (error) {
-      handleError('停止失败', error)
+      handleError(translate('stopError'), error)
     }
   }
 }
@@ -523,7 +536,7 @@ function seek(time: number) {
       // #endif
       // currentTime.value = time
     } catch (error) {
-      handleError('跳转失败', error)
+      handleError(translate('seekError'), error)
     }
   }
 }
@@ -556,6 +569,11 @@ function handleNext() {
   switchSong(internalPlaylist.value.length === 0 ? -1 : (internalCurrentIndex.value + 1) % internalPlaylist.value.length, 'next')
 }
 
+/**
+ * 切换歌曲：更新索引，重置进度，重新初始化音频并恢复播放状态
+ * @param index - 目标歌曲在播放列表中的索引
+ * @param eventType - 事件类型（'prev'/'next'）
+ */
 function switchSong(index: number, eventType?: string) {
   if (index < 0 || index >= internalPlaylist.value.length) {
     if (eventType) {
@@ -584,6 +602,9 @@ function switchSong(index: number, eventType?: string) {
   })
 }
 
+/**
+ * 自动切歌逻辑：根据播放模式（列表循环/单曲循环/随机播放）自动播放下一首
+ */
 function handleAutoNext() {
   switch (internalPlayMode.value) {
     case 'single':
@@ -681,6 +702,9 @@ function handleTouchMove(e: TouchEvent) {
   }
 }
 
+/**
+ * 触摸结束：检测水平滑动方向，切换封面/歌词面板显隐
+ */
 function handleTouchEnd(e: TouchEvent) {
   if (!isTouching.value || props.viewMode === 'mini' || props.viewMode === 'hideView') {
     isTouching.value = false
@@ -719,6 +743,10 @@ function handleCoverError() {
   isCoverHidden.value = false
 }
 
+/**
+ * 根据当前播放时间匹配对应歌词行
+ * @param time - 当前播放时间（秒）
+ */
 function updateCurrentLyric(time: number) {
   if (!currentLyrics.value.length) return
 

package/components/oxy-waterfall/oxy-waterfall.vue

@@ -43,7 +43,9 @@ export default {
   name: 'oxy-waterfall',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -86,6 +88,9 @@ watch(
   }
 )
 
+/**
+ * 加载列数据。首次加载时初始化列数组和高度数组，然后逐条渲染数据。
+ */
 function loadColumn() {
   if (!loadedIndex.value || !columns.value.length) {
     clearColumn()
@@ -116,6 +121,10 @@ function pushRender(data: Record<string, any>) {
   })
 }
 
+/**
+ * 找到当前高度最小的列索引，用于瀑布流分配新数据项到最矮列（最短列优先算法）。
+ * @returns 高度最小的列索引
+ */
 function findSmallColIndex() {
   let col = 0
   let size = columnHeights.value[col]
@@ -128,6 +137,10 @@ function findSmallColIndex() {
   return col
 }
 
+/**
+ * 子项高度上报回调。累加对应列高度，若非高度变化导致的重复上报，则继续加载下一条数据。
+ * @param params - 含 colIndex、height、reportHeightTimeChange
+ */
 function reportHeight(params: any) {
   const { colIndex, height, reportHeightTimeChange } = params
   columnHeights.value[colIndex] += height

package/components/oxy-waterfall/types.ts

@@ -66,6 +66,13 @@ export const waterfallProps = {
    */
   triggered: makeBooleanProp(false),
 
+  /**
+   * 加载更多状态，对应 oxy-loadmore 的 loadmoreState
+   * - `'loading'`：加载中
+   * - `'finished'`：全部加载完成
+   * - `'error'`：加载失败
+   * - `''`：不显示加载更多
+   */
   loadmoreState: String as PropType<LoadMoreState | ''>,
 
   /**