first commit

components/global-player/index.js

@@ -0,0 +1,98 @@
+/**
+ * 全局底部悬浮播放控制条
+ * 监听 app 事件总线，实时同步播放状态
+ */
+const app = getApp()
+
+Component({
+    data: {
+        activeContent: null,
+        isPlaying: false,
+        progressPercent: 0,
+        show: false,
+        channelIcon: '📻'   // 直接存储 emoji 字符（来自频道 cover 字段）
+    },
+
+    lifetimes: {
+        attached() {
+            // 初始化状态
+            this._syncState()
+
+            // 监听播放状态变化
+            this._onPlayerChange = (state) => {
+                this.setData({
+                    activeContent: state.activeContent,
+                    isPlaying: state.isPlaying,
+                    show: !!state.activeContent
+                })
+                this._computeIcon(state.activeContent)
+            }
+            app.on('playerStateChange', this._onPlayerChange)
+
+            // 监听时间更新
+            this._onTimeUpdate = (data) => {
+                if (data.duration > 0) {
+                    this.setData({
+                        progressPercent: Math.min((data.currentTime / data.duration) * 100, 100)
+                    })
+                }
+            }
+            app.on('timeUpdate', this._onTimeUpdate)
+        },
+
+        detached() {
+            app.off('playerStateChange', this._onPlayerChange)
+            app.off('timeUpdate', this._onTimeUpdate)
+        }
+    },
+
+    pageLifetimes: {
+        show() {
+            this._syncState()
+        }
+    },
+
+    methods: {
+        /**
+         * 同步播放器状态
+         */
+        _syncState() {
+            const gd = app.globalData
+            this.setData({
+                activeContent: gd.activeContent,
+                isPlaying: gd.isPlaying,
+                show: !!gd.activeContent,
+                progressPercent: gd.duration > 0
+                    ? Math.min((gd.currentTime / gd.duration) * 100, 100)
+                    : 0
+            })
+            this._computeIcon(gd.activeContent)
+        },
+
+        /**
+         * 获取频道 emoji（后端直接返回 emoji 字符、存在 cover 字段中）
+         */
+        _computeIcon(content) {
+            if (!content) return
+            const ch = content.channel || {}
+            var icon = ch.cover || ch.icon || content.cover || '📻'
+            this.setData({ channelIcon: icon })
+        },
+
+        /**
+         * 切换播放/暂停
+         */
+        onTogglePlay() {
+            app.togglePlay()
+        },
+
+        /**
+         * 跳转到播放器详情页
+         */
+        goToPlayer() {
+            wx.navigateTo({
+                url: '/pages/player/index'
+            })
+        }
+    }
+})

components/global-player/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/global-player/index.wxml

@@ -0,0 +1,44 @@
+<!-- 全局底部悬浮播放控制条 -->
+<view class="player-bar {{show ? 'show' : ''}}" wx:if="{{activeContent}}" bindtap="goToPlayer">
+
+  <!-- 左侧封面圆盘（播放时旋转） -->
+  <view class="disc-wrap">
+    <view class="disc {{isPlaying ? 'disc-spin' : ''}}">
+      <!-- 外环 -->
+      <view class="disc-ring"></view>
+      <text class="disc-emoji">📻</text>
+    </view>
+    <!-- 播放时的声波小点 -->
+    <view class="disc-pulse" wx:if="{{isPlaying}}"></view>
+  </view>
+
+  <!-- 标题区域 -->
+  <view class="info">
+    <text class="title">{{activeContent.title}}</text>
+    <view class="subtitle-row">
+      <!-- 播放中的活跃波形条 -->
+      <view class="mini-wave" wx:if="{{isPlaying}}">
+        <view class="mw-bar" style="animation-delay:0s"></view>
+        <view class="mw-bar" style="animation-delay:0.2s"></view>
+        <view class="mw-bar" style="animation-delay:0.1s"></view>
+      </view>
+      <text class="subtitle">{{isPlaying ? '正在播放' : '已暂停'}}</text>
+    </view>
+  </view>
+
+  <!-- 播放/暂停按钮 -->
+  <view class="ctrl-btn" catchtap="onTogglePlay">
+    <!-- 暂停：两竖线 -->
+    <view wx:if="{{isPlaying}}" class="pause-icon">
+      <view class="p-bar"></view>
+      <view class="p-bar"></view>
+    </view>
+    <!-- 播放：三角 -->
+    <text wx:else class="play-icon">▶</text>
+  </view>
+
+  <!-- 底部橙色进度线 -->
+  <view class="progress-track">
+    <view class="progress-fill" style="width: {{progressPercent}}%"></view>
+  </view>
+</view>

components/global-player/index.wxss

@@ -0,0 +1,185 @@
+/* 全局底部悬浮播放控制条 */
+
+.player-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 128rpx;
+  /* 暖奶油白 + 轻磨砂，与播放器主题呼应但不突兀 */
+  background: rgba(255, 251, 243, 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);
+  transform: translateY(100%);
+  transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
+}
+.player-bar.show {
+  transform: translateY(0);
+}
+
+/* ── 封面圆盘 ── */
+.disc-wrap {
+  position: relative;
+  width: 84rpx;
+  height: 84rpx;
+  margin-right: 20rpx;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.disc {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #FF9D42, #FFB366);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-shadow: 0 4rpx 16rpx rgba(255, 157, 66, 0.35);
+}
+.disc-spin {
+  animation: disc-rotate 8s linear infinite;
+}
+@keyframes disc-rotate {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+/* 圆盘外环纹路 */
+.disc-ring {
+  position: absolute;
+  inset: 6rpx;
+  border-radius: 50%;
+  border: 2rpx solid rgba(255,255,255,0.35);
+}
+.disc-emoji {
+  font-size: 34rpx;
+  line-height: 1;
+}
+/* 图片模式：填满圆盘内圈 */
+.disc-img {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  object-fit: cover;
+}
+/* 播放时的呼吸光晕 */
+.disc-pulse {
+  position: absolute;
+  inset: -6rpx;
+  border-radius: 50%;
+  border: 3rpx solid rgba(255, 157, 66, 0.35);
+  animation: pulse-ring 1.8s ease-out infinite;
+}
+@keyframes pulse-ring {
+  0%   { transform: scale(0.9); opacity: 0.8; }
+  100% { transform: scale(1.35); opacity: 0; }
+}
+
+/* ── 标题区 ── */
+.info {
+  flex: 1;
+  overflow: hidden;
+  margin-right: 20rpx;
+}
+.title {
+  display: block;
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #2C1A08;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.subtitle-row {
+  display: flex;
+  align-items: center;
+  margin-top: 6rpx;
+  gap: 8rpx;
+}
+.subtitle {
+  font-size: 20rpx;
+  color: rgba(180, 120, 60, 0.7);
+  font-weight: 500;
+}
+
+/* 迷你声波（3 根小柱） */
+.mini-wave {
+  display: flex;
+  align-items: flex-end;
+  gap: 3rpx;
+  height: 22rpx;
+  flex-shrink: 0;
+}
+.mw-bar {
+  width: 4rpx;
+  height: 12rpx;
+  background: #FF9D42;
+  border-radius: 2rpx;
+  animation: mw-dance 0.7s ease-in-out infinite alternate;
+}
+@keyframes mw-dance {
+  0%   { height: 4rpx;  opacity: 0.4; }
+  100% { height: 20rpx; opacity: 1; }
+}
+
+/* ── 播放/暂停按钮 ── */
+.ctrl-btn {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: #FF9D42;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 6rpx 20rpx rgba(255, 157, 66, 0.4);
+  transition: transform 0.15s;
+}
+.ctrl-btn:active {
+  transform: scale(0.9);
+}
+
+/* 播放三角 */
+.play-icon {
+  font-size: 30rpx;
+  color: #FFF;
+  margin-left: 5rpx;
+  line-height: 1;
+}
+
+/* 暂停双竖线 */
+.pause-icon {
+  display: flex;
+  gap: 8rpx;
+  align-items: center;
+}
+.p-bar {
+  width: 6rpx;
+  height: 26rpx;
+  background: #FFF;
+  border-radius: 3rpx;
+}
+
+/* ── 底部进度线 ── */
+.progress-track {
+  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;
+}