feat: 样式调整

components/global-player/index.js

@@ -9,8 +9,10 @@ Component({
         activeContent: null,
         isPlaying: false,
         progressPercent: 0,
+        currentTime: 0,
+        duration: 0,
         show: false,
-        channelIcon: '📻'   // 直接存储 emoji 字符（来自频道 cover 字段）
+        channelIcon: '📻'
     },
 
     lifetimes: {
@@ -31,8 +33,11 @@ Component({
 
             // 监听时间更新
             this._onTimeUpdate = (data) => {
+                if (this._isSeeking) return
                 if (data.duration > 0) {
                     this.setData({
+                        currentTime: Math.floor(data.currentTime),
+                        duration: Math.floor(data.duration),
                         progressPercent: Math.min((data.currentTime / data.duration) * 100, 100)
                     })
                 }
@@ -62,6 +67,8 @@ Component({
                 activeContent: gd.activeContent,
                 isPlaying: gd.isPlaying,
                 show: !!gd.activeContent,
+                currentTime: Math.floor(gd.currentTime || 0),
+                duration: Math.floor(gd.duration || 0),
                 progressPercent: gd.duration > 0
                     ? Math.min((gd.currentTime / gd.duration) * 100, 100)
                     : 0
@@ -91,8 +98,25 @@ Component({
          */
         goToPlayer() {
             wx.navigateTo({
-                url: '/pages/player/index'
+                url: '/pages/player/index',
+                routeType: 'none'
             })
+        },
+
+        /**
+         * 进度条拖动中
+         */
+        onProgressChanging(e) {
+            this._isSeeking = true
+            this.setData({ currentTime: e.detail.value })
+        },
+
+        /**
+         * 进度条拖动结束
+         */
+        onProgressChange(e) {
+            this._isSeeking = false
+            app.seekTo(e.detail.value)
         }
     }
 })

components/global-player/index.wxml

@@ -37,8 +37,18 @@
     <text wx:else class="play-icon">▶</text>
   </view>
 
-  <!-- 底部橙色进度线 -->
-  <view class="progress-track">
-    <view class="progress-fill" style="width: {{progressPercent}}%"></view>
-  </view>
+  <!-- 底部进度条（可拖动） -->
+  <slider
+    class="bar-slider"
+    min="0"
+    max="{{duration}}"
+    value="{{currentTime}}"
+    activeColor="#FF9E6D"
+    backgroundColor="rgba(255, 122, 47, 0.08)"
+    block-size="10"
+    block-color="#FF9E6D"
+    bindchange="onProgressChange"
+    bindchanging="onProgressChanging"
+    catchtap
+  />
 </view>

components/global-player/index.wxss

@@ -6,16 +6,15 @@
   left: 0;
   right: 0;
   height: 128rpx;
-  /* 暖奶油白 + 轻磨砂，与播放器主题呼应但不突兀 */
-  background: rgba(255, 251, 243, 0.97);
+  background: rgba(255, 255, 255, 0.97);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   display: flex;
   align-items: center;
   padding: 0 28rpx;
   z-index: 999;
-  border-top: 1rpx solid rgba(255, 157, 66, 0.12);
-  box-shadow: 0 -8rpx 32rpx rgba(200, 120, 40, 0.08);
+  border-top: 1rpx solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.05);
   transform: translateY(100%);
   transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
 }
@@ -38,12 +37,12 @@
   width: 80rpx;
   height: 80rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #FF9D42, #FFB366);
+  background: linear-gradient(135deg, #FF9E6D, #FF9E6D);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  box-shadow: 0 4rpx 16rpx rgba(255, 157, 66, 0.35);
+  box-shadow: 0 4rpx 16rpx rgba(255, 158, 109, 0.35);
 }
 .disc-spin {
   animation: disc-rotate 8s linear infinite;
@@ -75,7 +74,7 @@
   position: absolute;
   inset: -6rpx;
   border-radius: 50%;
-  border: 3rpx solid rgba(255, 157, 66, 0.35);
+  border: 3rpx solid rgba(255, 158, 109, 0.35);
   animation: pulse-ring 1.8s ease-out infinite;
 }
 @keyframes pulse-ring {
@@ -93,7 +92,7 @@
   display: block;
   font-size: 26rpx;
   font-weight: 700;
-  color: #2C1A08;
+  color: var(--color-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -106,7 +105,7 @@
 }
 .subtitle {
   font-size: 20rpx;
-  color: rgba(180, 120, 60, 0.7);
+  color: var(--color-text-secondary);
   font-weight: 500;
 }
 
@@ -121,7 +120,7 @@
 .mw-bar {
   width: 4rpx;
   height: 12rpx;
-  background: #FF9D42;
+  background: var(--color-primary);
   border-radius: 2rpx;
   animation: mw-dance 0.7s ease-in-out infinite alternate;
 }
@@ -135,12 +134,12 @@
   width: 72rpx;
   height: 72rpx;
   border-radius: 50%;
-  background: #FF9D42;
+  background: var(--color-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  box-shadow: 0 6rpx 20rpx rgba(255, 157, 66, 0.4);
+  box-shadow: 0 6rpx 20rpx rgba(255, 158, 109, 0.35);
   transition: transform 0.15s;
 }
 .ctrl-btn:active {
@@ -168,18 +167,12 @@
   border-radius: 3rpx;
 }
 
-/* ── 底部进度线 ── */
-.progress-track {
+/* ── 底部进度 slider ── */
+.bar-slider {
   position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 3rpx;
-  background: rgba(255, 157, 66, 0.1);
-}
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(to right, #FF9D42, #FFB366);
-  transition: width 0.5s linear;
-  border-radius: 0 2rpx 2rpx 0;
+  bottom: -4rpx;
+  left: -16rpx;
+  right: -16rpx;
+  margin: 0;
+  padding: 0;
 }