feat: 样式调整

app.json

@@ -12,14 +12,14 @@
     ],
     "window": {
         "navigationBarBackgroundColor": "#FFFFFF",
-        "navigationBarTitleText": "早安电台",
+        "navigationBarTitleText": "全声汇",
         "navigationBarTextStyle": "black",
-        "backgroundColor": "#F6F6F6",
+        "backgroundColor": "#FAFAF8",
-        "backgroundTextStyle": "dark"
+        "backgroundTextStyle": "light"
     },
     "tabBar": {
         "color": "#999999",
-        "selectedColor": "#FF9D42",
+        "selectedColor": "#FF5722",
         "backgroundColor": "#FFFFFF",
         "borderStyle": "white",
         "list": [

app.wxss

@@ -1,23 +1,23 @@
 /* ============================================
-   早安电台 — 全局样式
+   全声汇 — 全局样式
-   品牌主色: #FF9D42  背景: #F6F6F6
+   主色: #FF9E6D（暖橙）  行动色: #FF5722（橙红）
    ============================================ */
 
 /* TDesign 主题变量覆盖 */
 page {
-  /* 品牌色 */
+  /* 品牌色 → 暖橙 */
-  --td-brand-color: #FF9D42;
+  --td-brand-color: #FF9E6D;
-  --td-brand-color-light: rgba(255, 157, 66, 0.1);
+  --td-brand-color-light: rgba(255, 158, 109, 0.1);
-  --td-brand-color-focus: rgba(255, 157, 66, 0.2);
+  --td-brand-color-focus: rgba(255, 158, 109, 0.2);
-  --td-brand-color-active: #E88A35;
+  --td-brand-color-active: #FF5722;
-  --td-brand-color-disabled: rgba(255, 157, 66, 0.4);
+  --td-brand-color-disabled: rgba(255, 158, 109, 0.4);
 
-  /* 成功色（森林绿） */
+  /* 成功色 */
-  --td-success-color: #2D5A27;
+  --td-success-color: #10B981;
-  --td-success-color-light: rgba(45, 90, 39, 0.1);
+  --td-success-color-light: rgba(16, 185, 129, 0.1);
 
   /* 警告色 */
-  --td-warning-color: #E34D59;
+  --td-warning-color: #EF4444;
 
   /* 圆角 */
   --td-radius-default: 16rpx;
@@ -25,26 +25,42 @@ page {
   --td-radius-extra-large: 40rpx;
   --td-radius-round: 999rpx;
 
-  /* 自定义品牌变量 */
+  /* ── 核心品牌变量 ── */
-  --color-primary: #FF9D42;
+  --color-primary: #FF9E6D;
-  --color-primary-light: rgba(255, 157, 66, 0.08);
+  --color-primary-dark: #FF5722;
-  --color-primary-bg: rgba(255, 157, 66, 0.12);
+  --color-primary-light: rgba(255, 158, 109, 0.08);
-  --color-success: #2D5A27;
+  --color-primary-bg: rgba(255, 158, 109, 0.12);
-  --color-warning: #E34D59;
+  --color-accent: #34D399;
-  --color-bg-page: #F6F6F6;
+  --color-success: #10B981;
+  --color-warning: #EF4444;
+
+  /* ── 页面/容器色 ── */
+  --color-bg-page: #FAFAF8;
   --color-bg-card: #FFFFFF;
   --color-bg-container: #FEFEFE;
+
+  /* ── 文字色阶 ── */
   --color-text-primary: #333333;
   --color-text-secondary: #666666;
   --color-text-placeholder: #999999;
   --color-text-disabled: #CCCCCC;
+
+  /* ── 边框/分割 ── */
   --color-border: #EEEEEE;
   --color-border-light: #F5F5F5;
 
+  /* ── 领域色 ── */
+  --domain-tech: #3B82F6;
+  --domain-news: #F97316;
+  --domain-realtime: #EF4444;
+  --domain-psych: #10B981;
+  --domain-money: #F59E0B;
+  --domain-edu: #8B5CF6;
+
   /* 页面背景 */
   background-color: var(--color-bg-page);
-  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
-               'PingFang SC', 'Microsoft YaHei', sans-serif;
+               'Helvetica Neue', sans-serif;
   font-size: 28rpx;
   color: var(--color-text-primary);
   line-height: 1.6;
@@ -176,6 +192,23 @@ page {
   padding-top: env(safe-area-inset-top);
 }
 
+/* 播放栏底部安全占位（全局播放栏高度 128rpx + 底部安全区 + 20rpx 间距） */
+.player-bottom-spacer {
+  height: calc(148rpx + env(safe-area-inset-bottom));
+  flex-shrink: 0;
+}
+
+/* 首字母彩色圆形（频道默认封面） */
+.initial-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-weight: 800;
+  color: #FFF;
+  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
+}
+
 /* ========== 全局隐藏滚动条 ========== */
 page {
   -webkit-overflow-scrolling: touch;
@@ -237,3 +270,20 @@ scroll-view::-webkit-scrollbar {
 .anim-pulse {
   animation: pulse 1.5s ease-in-out infinite;
 }
+
+/* ========== 暗色模式变量覆盖 ========== */
+@media (prefers-color-scheme: dark) {
+  page {
+    --color-primary: #FFB088;
+    --color-primary-dark: #FF5722;
+    --color-primary-light: rgba(255, 176, 136, 0.12);
+    --color-bg-page: #121212;
+    --color-bg-card: #1E1E1E;
+    --color-text-primary: #E0E0E0;
+    --color-text-secondary: #999;
+    --color-text-placeholder: #666;
+    --color-text-disabled: #555;
+    --color-border: rgba(255, 255, 255, 0.08);
+    --color-success: #2ECC71;
+  }
+}

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">
+  <slider
-    <view class="progress-fill" style="width: {{progressPercent}}%"></view>
+    class="bar-slider"
-  </view>
+    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, 255, 255, 0.97);
-  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);
+  border-top: 1rpx solid rgba(0, 0, 0, 0.06);
-  box-shadow: 0 -8rpx 32rpx rgba(200, 120, 40, 0.08);
+  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;
 }
 
-/* ── 底部进度线 ── */
+/* ── 底部进度 slider ── */
-.progress-track {
+.bar-slider {
   position: absolute;
-  bottom: 0;
+  bottom: -4rpx;
-  left: 0;
+  left: -16rpx;
-  right: 0;
+  right: -16rpx;
-  height: 3rpx;
+  margin: 0;
-  background: rgba(255, 157, 66, 0.1);
+  padding: 0;
-}
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(to right, #FF9D42, #FFB366);
-  transition: width 0.5s linear;
-  border-radius: 0 2rpx 2rpx 0;
 }

pages/channel-detail/index.js

@@ -33,14 +33,17 @@ Page({
     onShow() {
         this._loadPrograms()
         this._onPlayerChange = () => this._updatePlayState()
-        this._onSubChange = () => this._loadPrograms()
+        this._onSubChange = () => this._loadChannelDetail()
+        this._onVipChange = () => this._loadChannelDetail()
         app.on('playerStateChange', this._onPlayerChange)
         app.on('subscriptionChange', this._onSubChange)
+        app.on('vipChange', this._onVipChange)
     },
 
     onHide() {
         if (this._onPlayerChange) app.off('playerStateChange', this._onPlayerChange)
         if (this._onSubChange) app.off('subscriptionChange', this._onSubChange)
+        if (this._onVipChange) app.off('vipChange', this._onVipChange)
     },
 
     /**
@@ -78,6 +81,8 @@ Page({
                     isVip: app.globalData.isVip,
                     canPlay
                 })
+                // 详情加载后刷新节目列表（更新 _isLocked 状态）
+                self._loadPrograms()
             }
         }).catch(function (err) {
             console.error('[ChannelDetail] 加载频道详情失败:', err)
@@ -105,7 +110,7 @@ Page({
                     return Object.assign({}, item, {
                         _displayIndex: String(total - idx).padStart(2, '0'),
                         _dateDot: item.createdAt ? item.createdAt.substring(0, 10).replace(/-/g, '.') : '',
-                        durationText: util.formatTime(item.duration || 0),
+                        durationText: item.duration > 0 ? util.formatTime(item.duration) : '',
                         _isThisPlaying: gd.activeContent && gd.activeContent.id === item.id,
                         _isLocked: !canPlay   // 所有集全部锁定，没有试听
                     })
@@ -195,6 +200,11 @@ Page({
     },
 
     goFirstProgram() {
+        // 权限保护：不可播放时引导到订阅/VIP
+        if (!this.data.canPlay) {
+            this.onSubscribe()
+            return
+        }
         var list = this.data.domainContents
         if (list && list.length > 0) {
             var first = list[0]
@@ -222,5 +232,24 @@ Page({
 
     goBack() {
         wx.navigateBack()
+    },
+
+    // ===================== 分享钩子 =====================
+    onShareAppMessage() {
+        const domain = this.data.domain || {}
+        return {
+            title: domain.name ? '听全声汇频道：' + domain.name : '全声汇 - 精选频道',
+            path: '/pages/channel-detail/index?id=' + this._domainId,
+            imageUrl: ''
+        }
+    },
+
+    onShareTimeline() {
+        const domain = this.data.domain || {}
+        return {
+            title: domain.name ? '听全声汇频道：' + domain.name : '全声汇 - 精选频道',
+            query: 'id=' + this._domainId,
+            imageUrl: ''
+        }
     }
 })

pages/channel-detail/index.json

@@ -1,7 +1,8 @@
 {
     "usingComponents": {
         "global-player": "/components/global-player/index",
-        "t-message": "tdesign-miniprogram/message/message"
+        "t-message": "tdesign-miniprogram/message/message",
+        "t-icon": "tdesign-miniprogram/icon/icon"
     },
     "navigationBarTitleText": "频道详情"
 }

pages/channel-detail/index.wxml

@@ -2,20 +2,34 @@
 <view class="detail-page">
 
   <!-- 频道信息头部 -->
-  <view class="hero" style="background: linear-gradient(135deg, {{domain.bgColor || '#FF9D42'}}, {{domain.bgColorEnd || '#FFB366'}});">
+  <view class="hero" style="background: linear-gradient(135deg, {{domain.bgColor || '#FF9E6D'}}, {{domain.bgColorEnd || '#FFB366'}});">
+
     <!-- 频道信息 -->
     <view class="hero-content">
       <text class="hero-icon">{{domain.cover || domain.icon || '📻'}}</text>
       <text class="hero-name">{{domain.name}}</text>
-      <text class="hero-tag">{{domain.tag || domain.description || ''}}</text>
+      <text class="hero-tag">{{domain.tag || ''}}</text>
+      <!-- 频道描述 -->
+      <text wx:if="{{domain.description}}" class="hero-desc">{{domain.description}}</text>
+      <!-- 数据行：订阅人数 + 节目数 -->
+      <view class="hero-stats">
+        <text class="hero-stat">{{domain.subscriberCount || 0}} 人已订阅</text>
+        <text class="hero-stat-dot">·</text>
+        <text class="hero-stat">{{domainContents.length || 0}} 期节目</text>
+      </view>
 
       <!-- ═══ 按钮区 ═══ -->
 
       <!-- 0. 可播放（VIP / 免费 / 已订阅）→ 直接收听 -->
       <block wx:if="{{canPlay}}">
+        <view class="hero-action-row">
           <button class="hero-sub-btn free-btn" bindtap="goFirstProgram">
             <text>▶ 开始收听</text>
           </button>
+          <button class="hero-share-inline-btn tap-active" open-type="share">
+            <t-icon name="share" size="44rpx" color="#FFF" />
+          </button>
+        </view>
         <!-- 副标签 -->
         <text wx:if="{{isVip}}" class="hero-expired">👑 VIP 会员畅享</text>
         <text wx:elif="{{isFree}}" class="hero-expired">🎁 永久免费频道</text>
@@ -31,33 +45,53 @@
       <!-- 1. 免费频道（但不可播放，理论上不会到这里） -->
       <block wx:elif="{{isFree}}">
         <view class="hero-badge free-badge">🎁 永久免费</view>
+        <view class="hero-action-row">
           <button class="hero-sub-btn free-btn" bindtap="onSubscribe">
             <text>▶ 开始收听</text>
           </button>
+          <button class="hero-share-inline-btn tap-active" open-type="share">
+            <t-icon name="share" size="44rpx" color="#FFF" />
+          </button>
+        </view>
       </block>
 
       <!-- 2. VIP专享 -->
       <block wx:elif="{{isVipOnly}}">
         <view class="hero-badge vip-badge">👑 VIP专享</view>
+        <view class="hero-action-row">
           <button class="hero-sub-btn vip-btn" bindtap="onSubscribe">
             <text>开通 VIP 解锁</text>
           </button>
+          <button class="hero-share-inline-btn tap-active" open-type="share">
+            <t-icon name="share" size="44rpx" color="#FFF" />
+          </button>
+        </view>
       </block>
 
       <!-- 3. 订阅已过期 -->
       <block wx:elif="{{isExpired}}">
         <view class="hero-badge expired-badge">⏰ 订阅已到期</view>
+        <view class="hero-action-row">
           <button class="hero-sub-btn renew-btn" bindtap="onSubscribe">
             <text>续费订阅</text>
           </button>
+          <button class="hero-share-inline-btn tap-active" open-type="share">
+            <t-icon name="share" size="44rpx" color="#FFF" />
+          </button>
+        </view>
         <text class="hero-expired">已于 {{expiredAt}} 到期</text>
       </block>
 
       <!-- 4. 未订阅付费频道 -->
       <block wx:else>
+        <view class="hero-action-row">
           <button class="hero-sub-btn" bindtap="onSubscribe">
             <text>订阅频道</text>
           </button>
+          <button class="hero-share-inline-btn tap-active" open-type="share">
+            <t-icon name="share" size="44rpx" color="#FFF" />
+          </button>
+        </view>
       </block>
     </view>
 
@@ -123,8 +157,10 @@
           <text class="item-title {{item._isThisPlaying ? 'text-primary' : ''}}">{{item.title}}</text>
           <view class="item-meta">
             <text>{{item._dateDot}}</text>
+            <block wx:if="{{item.durationText}}">
               <text class="meta-dot">·</text>
               <text>{{item.durationText}}</text>
+            </block>
           </view>
         </view>
 
@@ -141,7 +177,7 @@
     </view>
   </view>
 
-  <view style="height: 200rpx;"></view>
+  <view class="player-bottom-spacer"></view>
   <global-player />
   <t-message id="t-message" />
 </view>

pages/channel-detail/index.wxss

@@ -56,8 +56,58 @@
   font-size: 26rpx;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.8);
-  margin-bottom: 40rpx;
+  margin-bottom: 12rpx;
 }
+.hero-desc {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 1.6;
+  text-align: center;
+  padding: 0 48rpx;
+  margin-bottom: 12rpx;
+}
+.hero-stats {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  margin-bottom: 32rpx;
+}
+.hero-stat {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.55);
+  font-weight: 500;
+}
+.hero-stat-dot {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.35);
+}
+
+/* 按钮区 */
+.hero-action-row {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  z-index: 10;
+}
+.hero-share-inline-btn {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  border: 2rpx solid rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+}
+.hero-share-inline-btn::after { border: none; }
+.hero-share-inline-btn:active { transform: scale(0.92); }
 
 .hero-sub-btn {
   padding: 16rpx 56rpx;
@@ -121,7 +171,7 @@
 /* 按钮变体 */
 .hero-sub-btn.free-btn    { background: #2ECC71; color: #FFF; box-shadow: 0 8rpx 24rpx rgba(46,204,113,0.3); }
 .hero-sub-btn.vip-btn     { background: linear-gradient(135deg, #FBBF24, #D97706); color: #1F2937; box-shadow: 0 8rpx 24rpx rgba(251,191,36,0.35); }
-.hero-sub-btn.renew-btn   { background: linear-gradient(135deg, #FF9D42, #FF7832); color: #FFF; box-shadow: 0 8rpx 24rpx rgba(255,120,50,0.35); }
+.hero-sub-btn.renew-btn   { background: linear-gradient(135deg, #FF9E6D, #FF7832); color: #FFF; box-shadow: 0 8rpx 24rpx rgba(255,120,50,0.35); }
 
 /* 波浪 */
 .hero-wave {

pages/discover/index.js

@@ -87,12 +87,24 @@ Page({
                             lowestPrice = { label: prices[0].label, value: (prices[0].value / 100).toFixed(2) }
                         }
                     }
+                    // 按钮类型：用于 WXML 条件渲染
+                    // VIP 用户优先判断 —— 可播放全部频道
+                    var btnType = 'subscribe'
+                    if (gd.isVip) {
+                        btnType = isVipOnly ? 'vip-listen' : 'listen'
+                    } else if (isVipOnly) {
+                        btnType = 'vip-only'
+                    } else if (isFree || isSubscribed) {
+                        btnType = 'listen'
+                    }
+
                     return Object.assign({}, ch, {
                         _isSubscribed: isSubscribed,
                         _isFree: isFree,
                         _isVipOnly: isVipOnly,
                         _lowestPrice: lowestPrice,
-                        _canPlay: canPlay
+                        _canPlay: canPlay,
+                        _btnType: btnType
                     })
                 })
 

pages/discover/index.wxml

@@ -58,13 +58,18 @@
           </view>
 
           <!-- 行动按钮 -->
-          <!-- 可播放（VIP / 免费 / 已订阅）→ 收听 -->
+          <!-- VIP用户收听VIP专享频道 -->
-          <view wx:if="{{item._canPlay}}" class="sub-btn free" bindtap="onAction" data-id="{{item.id}}">
+          <view wx:if="{{item._btnType === 'vip-listen'}}" class="sub-btn vip-listen" bindtap="onAction" data-id="{{item.id}}">
+            <text>👑 VIP畅听</text>
+          </view>
+
+          <!-- 可收听（免费 / 已订阅）-->
+          <view wx:elif="{{item._btnType === 'listen'}}" class="sub-btn free" bindtap="onAction" data-id="{{item.id}}">
             <text>▶ 收听</text>
           </view>
 
-          <!-- VIP专享（且非VIP用户）-->
+          <!-- VIP专享（非VIP用户）-->
-          <view wx:elif="{{item._isVipOnly}}" class="sub-btn vip" bindtap="onAction" data-id="{{item.id}}">
+          <view wx:elif="{{item._btnType === 'vip-only'}}" class="sub-btn vip" bindtap="onAction" data-id="{{item.id}}">
             <text>👑 VIP专享</text>
           </view>
 
@@ -90,7 +95,7 @@
       </view>
     </view>
 
-    <view style="height: 200rpx;"></view>
+    <view class="player-bottom-spacer"></view>
   </scroll-view>
 
   <!-- 全局播放条 -->

pages/discover/index.wxss

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: #F6F6F6;
+  background: var(--color-bg-page);
   overflow: hidden;
 }
 
@@ -15,7 +15,7 @@
   padding: 16rpx 32rpx;
   white-space: nowrap;
   background: #FFFFFF;
-  border-bottom: 1rpx solid #F5F5F5;
+  border-bottom: 1rpx solid var(--color-border);
 }
 .filter-tag {
   display: inline-block;
@@ -29,7 +29,7 @@
   transition: all 0.2s;
 }
 .filter-tag.active {
-  background: #1A1A1A;
+  background: var(--color-primary-dark);
   color: #FFF;
 }
 
@@ -124,10 +124,16 @@
 }
 /* 付费订阅 */
 .sub-btn.paid {
-  background: linear-gradient(135deg, #FF9D42, #FF7832);
+  background: linear-gradient(135deg, #FF9E6D, #FF7832);
   color: #FFF;
   box-shadow: 0 4rpx 12rpx rgba(255, 157, 66, 0.3);
 }
+/* VIP畅听（VIP用户看到VIP专享频道） */
+.sub-btn.vip-listen {
+  background: linear-gradient(135deg, #FBBF24, #D97706);
+  color: #FFF;
+  box-shadow: 0 4rpx 12rpx rgba(251, 191, 36, 0.3);
+}
 
 /* ========== 骨架屏 ========== */
 @keyframes skele-shimmer {

pages/history/index.js

@@ -7,12 +7,16 @@ const util = require('../../utils/util')
 
 Page({
     data: {
-        tab: 'history',        // 'history' | 'favorite'
+        tab: 'history',
         historyList: [],
         isPlaying: false,
-        loading: true
+        loading: true,
+        channelFilters: [],
+        selectedChannel: '全部'
     },
 
+    _allHistoryList: [],
+
     onShow() {
         const self = this
         const gd = app.globalData
@@ -40,15 +44,18 @@ Page({
     setTab(e) {
         const tab = e.currentTarget.dataset.val
         if (tab === this.data.tab) return
-        this.setData({ tab, historyList: [], loading: true })
+        this.setData({ tab, historyList: [], loading: true, channelFilters: [], selectedChannel: '全部' })
+        this._allHistoryList = []
         this._refresh()
     },
 
     _refresh() {
         if (this.data.tab === 'history') {
             this._loadHistory()
-        } else {
+        } else if (this.data.tab === 'favorite') {
             this._loadFavorites()
+        } else {
+            this._loadLikes()
         }
     },
 
@@ -59,31 +66,32 @@ Page({
         api.getHistoryList({ current: 1, pageSize: 30 }).then(function (res) {
             if (res.code === 200 && res.data) {
                 var list = (res.data.list || []).map(function (item) {
-                    // program 嵌套在 item.program 下
                     var program = item.program || {}
-                    // channel 可能为 null，channel cover 在 program.cover
+                    var channel = program.channel || null
-                    var channel = program.channel || {}
+                    // 历史用 item.duration（记录收听时长），优先级高于 program.duration
+                    var dur = item.duration || program.duration || 0
+                    var bgColors = ['#FFE8CC', '#FFF0E0', '#FFE4D6', '#FFF3DC', '#FFE9F0']
+                    var cid = program.channelId || ''
+                    var colorIdx = cid ? (cid.charCodeAt(cid.length - 1) % bgColors.length) : 0
                     return {
-                        // 播放所需字段
                         id: program.id,
                         title: program.title || '未知节目',
                         channelId: program.channelId || '',
                         content: program.content || '',
                         audioId: program.audioId || '',
-                        // 用历史记录的 duration（program.duration 可能是 0）
+                        duration: dur,
-                        duration: item.duration || program.duration || 0,
+                        _domainName: channel ? (channel.name || '') : '',
-                        // 显示字段
+                        _icon: program.cover || (channel && channel.cover) || '📻',
-                        _domainName: channel.name || '',
+                        _bgColor: bgColors[colorIdx],
-                        _icon: program.cover || channel.cover || '📻',
-                        _bgColor: '#FFE8CC',
                         _friendlyDate: util.getFriendlyDate(item.createdAtStr ? item.createdAtStr.substring(0, 10) : ''),
-                        durationText: util.formatTime(item.duration || 0),
+                        durationText: dur > 0 ? util.formatTime(dur) : '',
-                        // 播放进度
                         _progress: item.progress || 0,
                         _isThisPlaying: gd.activeContent && gd.activeContent.id === program.id
                     }
                 })
                 self.setData({ historyList: list, isPlaying: gd.isPlaying, loading: false })
+                self._allHistoryList = list
+                self._extractChannelFilters(list)
             } else {
                 self.setData({ historyList: [], loading: false })
             }
@@ -100,24 +108,35 @@ Page({
         api.getFavoriteList({ current: 1, pageSize: 30 }).then(function (res) {
             if (res.code === 200 && res.data) {
                 var list = (res.data.list || []).map(function (item) {
-                    var program = item.program || item
+                    // program 嵌套在 item.program 下，channel 可能为 null
-                    var channel = program.channel || {}
+                    var program = item.program || {}
+                    var channel = program.channel || null
+                    var dur = program.duration || 0
+                    // 根据 channelId 末位生成固定暖色，增加视觉区分
+                    var bgColors = ['#FFE8CC', '#FFF0E0', '#FFE4D6', '#FFF3DC', '#FFE9F0']
+                    var cid = program.channelId || ''
+                    var colorIdx = cid ? (cid.charCodeAt(cid.length - 1) % bgColors.length) : 0
                     return {
                         id: program.id,
                         title: program.title || '未知节目',
                         channelId: program.channelId || '',
                         content: program.content || '',
                         audioId: program.audioId || '',
-                        duration: program.duration || 0,
+                        duration: dur,
-                        _domainName: channel.name || '',
+                        // channel 为 null 时不显示频道名
-                        _icon: program.cover || channel.cover || '📻',
+                        _domainName: channel ? (channel.name || '') : '',
-                        _bgColor: '#FFE8CC',
+                        _icon: program.cover || (channel && channel.cover) || '📻',
+                        _bgColor: bgColors[colorIdx],
+                        // 收藏时间用 item.createdAtStr
                         _friendlyDate: util.getFriendlyDate(item.createdAtStr ? item.createdAtStr.substring(0, 10) : ''),
-                        durationText: util.formatTime(program.duration || 0),
+                        // duration 为 0 则不显示时长
+                        durationText: dur > 0 ? util.formatTime(dur) : '',
                         _isThisPlaying: gd.activeContent && gd.activeContent.id === program.id
                     }
                 })
                 self.setData({ historyList: list, isPlaying: gd.isPlaying, loading: false })
+                self._allHistoryList = list
+                self._extractChannelFilters(list)
             } else {
                 self.setData({ historyList: [], loading: false })
             }
@@ -127,6 +146,53 @@ Page({
         })
     },
 
+    _loadLikes() {
+        const self = this
+        const gd = app.globalData
+
+        api.getLikeList({ current: 1, pageSize: 30 }).then(function (res) {
+            if (res.code === 200 && res.data) {
+                var list = (res.data.list || []).map(function (item) {
+                    // RadioLike → program → channel (可能为 null)
+                    var program = item.program || {}
+                    var channel = program.channel || null
+                    // duration 为 0 时不显示时长
+                    var dur = program.duration || 0
+                    // 从 channelId 生成一个固定暖色背景，增加视觉区分
+                    var bgColors = ['#FFE8CC', '#FFF0E0', '#FFE4D6', '#FFF3DC', '#FFE9F0']
+                    var cid = program.channelId || ''
+                    var colorIdx = cid ? (cid.charCodeAt(cid.length - 1) % bgColors.length) : 0
+                    return {
+                        id: program.id,
+                        title: program.title || '未知节目',
+                        channelId: program.channelId || '',
+                        content: program.content || '',
+                        audioId: program.audioId || '',
+                        duration: dur,
+                        // channel 为 null 时频道名不显示
+                        _domainName: channel ? (channel.name || '') : '',
+                        _icon: program.cover || (channel && channel.cover) || '📻',
+                        _bgColor: bgColors[colorIdx],
+                        // 显示"点赞时间"，用 item.createdAtStr（点赞时间）
+                        _friendlyDate: util.getFriendlyDate(item.createdAtStr ? item.createdAtStr.substring(0, 10) : ''),
+                        // duration 为 0 则不显示时长，避免展示 "00:00"
+                        durationText: dur > 0 ? util.formatTime(dur) : '',
+                        _isLiked: true,
+                        _isThisPlaying: gd.activeContent && gd.activeContent.id === program.id
+                    }
+                })
+                self.setData({ historyList: list, isPlaying: gd.isPlaying, loading: false })
+                self._allHistoryList = list
+                self._extractChannelFilters(list)
+            } else {
+                self.setData({ historyList: [], loading: false })
+            }
+        }).catch(function (err) {
+            console.error('[History] 加载点赞失败:', err)
+            self.setData({ loading: false })
+        })
+    },
+
     _updatePlayState() {
         var gd = app.globalData
         var list = this.data.historyList.map(function (item) {
@@ -137,6 +203,32 @@ Page({
         this.setData({ historyList: list, isPlaying: gd.isPlaying })
     },
 
+    _extractChannelFilters(list) {
+        var names = {}
+        list.forEach(function (item) {
+            if (item._domainName) names[item._domainName] = true
+        })
+        var filters = ['全部'].concat(Object.keys(names).sort())
+        this.setData({ channelFilters: filters })
+    },
+
+    onChannelFilter(e) {
+        var name = e.currentTarget.dataset.name
+        this.setData({ selectedChannel: name })
+        this._applyChannelFilter(name)
+    },
+
+    _applyChannelFilter(name) {
+        if (name === '全部') {
+            this.setData({ historyList: this._allHistoryList })
+        } else {
+            var filtered = this._allHistoryList.filter(function (item) {
+                return item._domainName === name
+            })
+            this.setData({ historyList: filtered })
+        }
+    },
+
     onPlay(e) {
         const id = e.currentTarget.dataset.id
         const gd = app.globalData
@@ -175,8 +267,30 @@ Page({
         const id = e.currentTarget.dataset.id
         const tab = this.data.tab
         const self = this
-        const label = tab === 'history' ? '历史' : '收藏'
 
+        // 赞过 tab 点击爱心可取消点赞
+        if (tab === 'like') {
+            wx.showModal({
+                title: '取消点赞',
+                content: '确定取消对这个节目的点赞吗？',
+                success(res) {
+                    if (!res.confirm) return
+                    api.toggleLike(id).then(function (r) {
+                        if (r.code === 200) {
+                            var list = self.data.historyList.filter(function (item) { return item.id !== id })
+                            self.setData({ historyList: list })
+                        } else {
+                            wx.showToast({ title: r.msg || '操作失败', icon: 'none' })
+                        }
+                    }).catch(function () {
+                        wx.showToast({ title: '网络异常', icon: 'none' })
+                    })
+                }
+            })
+            return
+        }
+
+        const label = tab === 'history' ? '历史' : '收藏'
         wx.showModal({
             title: '删除' + label,
             content: '确定删除这条' + label + '吗？',
@@ -188,7 +302,6 @@ Page({
 
                 fn.then(function (r) {
                     if (r.code === 200) {
-                        // 本地即时移除
                         var list = self.data.historyList.filter(function (item) { return item.id !== id })
                         self.setData({ historyList: list })
                     } else {
@@ -204,15 +317,27 @@ Page({
     onClear() {
         const self = this
         const tab = this.data.tab
-        const label = tab === 'history' ? '收听历史' : '全部收藏'
+        var label = ''
+        var fn = null
+
+        if (tab === 'history') {
+            label = '收听历史'
+            fn = api.deleteAllHistory()
+        } else if (tab === 'favorite') {
+            label = '全部收藏'
+            fn = api.removeAllFavorites()
+        } else if (tab === 'like') {
+            label = '全部点赞'
+            fn = api.removeAllLikes()
+        }
+
+        if (!fn) return
+
         wx.showModal({
             title: '清空' + label,
             content: '确定要清空所有' + label + '吗？',
             success(res) {
                 if (!res.confirm) return
-                const fn = tab === 'history'
-                    ? api.deleteAllHistory()
-                    : api.removeAllFavorites()
                 fn.then(function (r) {
                     if (r.code === 200) {
                         self.setData({ historyList: [] })

pages/history/index.wxml

@@ -1,4 +1,5 @@
 <!-- 收听历史 / 收藏 -->
+<page-meta page-style="overflow: hidden;" />
 <view class="history-page">
 
   <!-- Tab 切换 + 清空 -->
@@ -12,7 +13,12 @@
         <text class="tab-text">收藏</text>
         <view class="tab-underline"></view>
       </view>
+      <view class="tab-item {{tab === 'like' ? 'active' : ''}}" bindtap="setTab" data-val="like">
+        <text class="tab-text">赞过</text>
+        <view class="tab-underline tab-underline-like"></view>
       </view>
+    </view>
+    <!-- 清空按钮 -->
     <view class="clear-btn tap-active" bindtap="onClear" wx:if="{{historyList.length > 0}}">
       <view class="icon-trash">
         <view class="trash-handle"></view>
@@ -27,7 +33,26 @@
     </view>
   </view>
 
+  <!-- 频道筛选 -->
+  <scroll-view wx:if="{{channelFilters.length > 1}}" scroll-x enhanced show-scrollbar="{{false}}" class="channel-filter-bar">
+    <view
+      wx:for="{{channelFilters}}"
+      wx:key="*this"
+      class="ch-filter-tag {{selectedChannel === item ? 'active' : ''}}"
+      bindtap="onChannelFilter"
+      data-name="{{item}}"
+    >
+      <text>{{item}}</text>
+    </view>
+  </scroll-view>
+
   <!-- 列表区 -->
+  <scroll-view
+    scroll-y
+    enhanced
+    show-scrollbar="{{false}}"
+    class="list-scroll"
+  >
     <view class="list-area">
 
       <!-- 加载骨架 -->
@@ -44,31 +69,45 @@
 
     <!-- 历史空状态 -->
     <view wx:elif="{{historyList.length === 0 && tab === 'history'}}" class="empty-state">
+      <view class="empty-icon-wrap">
+        <view class="empty-halo"></view>
         <text class="empty-icon">🎧</text>
-      <text class="empty-title">还没有收听记录</text>
+      </view>
-      <text class="empty-desc">去发现频道，开始你的第一段收听</text>
+      <text class="empty-title">拓展专属听觉边界</text>
+      <text class="empty-desc">海量精彩节目频道，好声音都在这里</text>
+      <view class="empty-guide-badge">
+        <text class="guide-dot"></text>
+        <text class="guide-text">去发现页探索</text>
+      </view>
       <view class="empty-actions">
         <view class="btn-primary tap-active" bindtap="goDiscover">
-          <text class="btn-text">去发现频道</text>
+          <text class="btn-text">开始探索</text>
         </view>
         <view class="btn-ghost tap-active" bindtap="goHome">
-          <text class="btn-ghost-text">回到首页</text>
+          <text class="btn-ghost-text">回到主页</text>
         </view>
       </view>
     </view>
 
     <!-- 收藏空状态 -->
     <view wx:elif="{{historyList.length === 0 && tab === 'favorite'}}" class="empty-state">
+      <view class="empty-icon-wrap">
+        <view class="empty-halo favored-halo"></view>
         <text class="empty-icon">🔖</text>
-      <text class="empty-title">还没有收藏内容</text>
+      </view>
-      <text class="empty-desc">听到喜欢的节目，点击 ♡ 收藏它</text>
+      <text class="empty-title">打造个人专属收藏</text>
+      <text class="empty-desc">好声音不怕遗忘，收集你的听觉库</text>
+      <view class="empty-guide-badge warning-badge">
+        <text class="guide-icon">🔖</text>
+        <text class="guide-text">播放页点击书签图标，即可加入</text>
+      </view>
       <view class="empty-actions">
         <view class="btn-primary tap-active" bindtap="goDiscover">
-          <text class="btn-text">订阅感兴趣的频道</text>
+          <text class="btn-text">去发现好声音</text>
         </view>
       </view>
       <!-- 推荐订阅提示 -->
-      <view class="upsell-card">
+      <view class="upsell-card empty-upsell">
         <text class="upsell-icon">👑</text>
         <view class="upsell-body">
           <text class="upsell-title">开通会员</text>
@@ -80,6 +119,25 @@
       </view>
     </view>
 
+    <!-- 赞过空状态 -->
+    <view wx:elif="{{historyList.length === 0 && tab === 'like'}}" class="empty-state">
+      <view class="empty-icon-wrap">
+        <view class="empty-halo liked-halo"></view>
+        <text class="empty-icon">♥️</text>
+      </view>
+      <text class="empty-title">留下与声音共鸣的印记</text>
+      <text class="empty-desc">不吝啬你的赞扬，这是最大的鼓励</text>
+      <view class="empty-guide-badge danger-badge">
+        <text class="guide-icon">♥</text>
+        <text class="guide-text">播放页点击心形按钮，点亮爱心</text>
+      </view>
+      <view class="empty-actions">
+        <view class="btn-primary tap-active" bindtap="goDiscover">
+          <text class="btn-text">去寻找心动</text>
+        </view>
+      </view>
+    </view>
+
     <!-- 条目列表 -->
     <view
       wx:for="{{historyList}}"
@@ -119,9 +177,14 @@
         </view>
       </view>
 
-      <!-- 删除按钮 -->
+      <!-- 删除/取消点赞按钮 -->
       <view class="h-del tap-active" catchtap="onDeleteItem" data-id="{{item.id}}">
-        <view class="icon-trash icon-trash-sm">
+        <!-- 赞过 tab 显示心形图标 -->
+        <view wx:if="{{tab === 'like'}}" class="like-del-btn">
+          <text class="like-heart-icon">♥</text>
+        </view>
+        <!-- 其他 tab 显示垂笾桶 -->
+        <view wx:else class="icon-trash icon-trash-sm">
           <view class="trash-handle"></view>
           <view class="trash-lid-bar"></view>
           <view class="trash-body">
@@ -133,8 +196,9 @@
       </view>
     </view>
 
-  </view>
+    </view> <!-- /list-area -->
-  <view style="height: 200rpx;"></view>
+    <view class="player-bottom-spacer"></view>
+  </scroll-view>
 
   <global-player />
 </view>

pages/history/index.wxss

@@ -1,8 +1,42 @@
 /* 收听历史 / 收藏 */
+::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
 
 .history-page {
-  min-height: 100vh;
+  display: flex;
-  background: #F7F3EE;
+  flex-direction: column;
+  height: 100vh;
+  background: var(--color-bg-page);
+  overflow: hidden;
+}
+
+/* 列表滚动区域 */
+.list-scroll {
+  flex: 1;
+  overflow: hidden;
+}
+
+/* 频道筛选栏 */
+.channel-filter-bar {
+  flex-shrink: 0;
+  white-space: nowrap;
+  padding: 12rpx 32rpx;
+  background: #FFF;
+  border-bottom: 1rpx solid var(--color-border);
+}
+.ch-filter-tag {
+  display: inline-block;
+  padding: 8rpx 24rpx;
+  margin-right: 12rpx;
+  border-radius: 999rpx;
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #999;
+  background: #F5F5F5;
+  transition: all 0.2s;
+}
+.ch-filter-tag.active {
+  color: #FFF;
+  background: var(--color-primary);
 }
 
 /* ── Tab 头部 ── */
@@ -12,7 +46,7 @@
   justify-content: space-between;
   padding: 0 32rpx;
   background: #FFFFFF;
-  border-bottom: 1rpx solid #F0EAE2;
+  border-bottom: 1rpx solid var(--color-border);
 }
 .filter-tabs {
   display: flex;
@@ -34,18 +68,36 @@
   transition: color 0.2s;
 }
 .tab-item.active .tab-text {
-  color: #2C1A08;
+  color: var(--color-primary-dark);
 }
 .tab-underline {
   height: 4rpx;
   width: 0;
-  background: #FF9D42;
+  background: var(--color-primary);
   border-radius: 2rpx;
   transition: width 0.25s;
 }
 .tab-item.active .tab-underline {
   width: 100%;
 }
+/* 赞过 tab 用粉红色下划线 */
+.tab-item.active .tab-underline-like {
+  background: #FF4D6D;
+}
+
+/* 赞过 tab 取消点赞心形按钮 */
+.like-del-btn {
+  width: 52rpx;
+  height: 52rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.like-heart-icon {
+  font-size: 36rpx;
+  color: #FF4D6D;
+  line-height: 1;
+}
 
 /* 清空按钮 */
 .clear-btn {
@@ -79,7 +131,7 @@
   width: 88rpx;
   height: 88rpx;
   border-radius: 20rpx;
-  background: linear-gradient(90deg, #F0EAE2 0%, #E8DFD5 50%, #F0EAE2 100%);
+  background: linear-gradient(90deg, #EEEEEE 0%, #E8E8E8 50%, #EEEEEE 100%);
   background-size: 200% 100%;
   animation: shimmer 1.4s infinite;
   flex-shrink: 0;
@@ -92,7 +144,7 @@
 }
 .sk-line {
   height: 18rpx;
-  background: linear-gradient(90deg, #F0EAE2 0%, #E8DFD5 50%, #F0EAE2 100%);
+  background: linear-gradient(90deg, #EEEEEE 0%, #E8E8E8 50%, #EEEEEE 100%);
   background-size: 200% 100%;
   animation: shimmer 1.4s infinite;
   border-radius: 9rpx;
@@ -105,32 +157,86 @@
   100% { background-position: -200% 0; }
 }
 
-/* ── 空状态 ── */
+/* ── 空状态优化 ── */
 .empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 80rpx 48rpx 48rpx;
+  padding: 100rpx 48rpx 64rpx;
+  animation: fade-up 0.4s ease-out;
+}
+@keyframes fade-up {
+  0% { opacity: 0; transform: translateY(20rpx); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+.empty-icon-wrap {
+  position: relative;
+  width: 200rpx;
+  height: 200rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 40rpx;
+}
+.empty-halo {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255,157,66,0.15) 0%, transparent 60%);
+  animation: pulse-halo 2.5s infinite alternate ease-in-out;
+}
+.favored-halo { background: radial-gradient(circle, rgba(103,194,58,0.15) 0%, transparent 60%); }
+.liked-halo { background: radial-gradient(circle, rgba(255,77,109,0.15) 0%, transparent 60%); }
+
+@keyframes pulse-halo {
+  0% { transform: scale(0.9); opacity: 0.6; }
+  100% { transform: scale(1.3); opacity: 1; }
 }
 .empty-icon {
-  font-size: 96rpx;
+  font-size: 100rpx;
-  margin-bottom: 32rpx;
+  position: relative;
-  filter: drop-shadow(0 8rpx 16rpx rgba(255,157,66,0.2));
+  z-index: 2;
+  filter: drop-shadow(0 12rpx 20rpx rgba(0,0,0,0.08));
 }
+
 .empty-title {
-  font-size: 36rpx;
+  font-size: 38rpx;
-  font-weight: 700;
+  font-weight: 800;
-  color: #2C1A08;
+  color: var(--color-text-primary);
   margin-bottom: 16rpx;
   font-family: 'PingFang SC', sans-serif;
+  letter-spacing: 1rpx;
 }
 .empty-desc {
   font-size: 26rpx;
-  color: #B0A090;
+  color: var(--color-text-secondary);
   text-align: center;
-  line-height: 1.6;
+  margin-bottom: 32rpx;
-  margin-bottom: 48rpx;
 }
+
+.empty-guide-badge {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 12rpx 32rpx;
+  background: rgba(255,157,66,0.1);
+  border-radius: 40rpx;
+  margin-bottom: 64rpx;
+}
+.guide-dot { width: 10rpx; height: 10rpx; border-radius: 50%; background: #FF9E6D; }
+.guide-icon { font-size: 24rpx; margin-top: -2rpx; color: rgba(0,0,0,0.4); }
+.guide-text {
+  font-size: 24rpx;
+  color: var(--color-primary);
+  font-weight: 500;
+}
+.warning-badge { background: rgba(5,150,105,0.08); }
+.warning-badge .guide-text { color: #059669; }
+.danger-badge { background: rgba(255,77,109,0.08); }
+.danger-badge .guide-text { color: #E11D48; }
+
 .empty-actions {
   display: flex;
   flex-direction: column;
@@ -138,8 +244,13 @@
   width: 100%;
   max-width: 480rpx;
 }
+.empty-upsell {
+  margin-top: 48rpx;
+  box-sizing: border-box;
+}
+
 .btn-primary {
-  background: linear-gradient(135deg, #FF9D42, #E07020);
+  background: linear-gradient(135deg, var(--color-primary), #FF5722);
   border-radius: 48rpx;
   padding: 28rpx 0;
   display: flex;
@@ -154,7 +265,7 @@
   letter-spacing: 1rpx;
 }
 .btn-ghost {
-  border: 2rpx solid #E8DFD5;
+  border: 2rpx solid var(--color-border);
   border-radius: 48rpx;
   padding: 26rpx 0;
   display: flex;
@@ -165,7 +276,7 @@
 .btn-ghost-text {
   font-size: 28rpx;
   font-weight: 600;
-  color: #8C7B6A;
+  color: var(--color-text-secondary);
 }
 
 /* VIP upsell 卡片 */
@@ -192,14 +303,14 @@
 .upsell-title {
   font-size: 28rpx;
   font-weight: 700;
-  color: #C07000;
+  color: #B45309;
 }
 .upsell-desc {
   font-size: 22rpx;
-  color: #C09040;
+  color: #D97706;
 }
 .upsell-btn {
-  background: #FF9D42;
+  background: #FF9E6D;
   border-radius: 28rpx;
   padding: 12rpx 28rpx;
 }
@@ -217,10 +328,10 @@
   margin-bottom: 16rpx;
   background: #FFFFFF;
   border-radius: 20rpx;
-  box-shadow: 0 2rpx 12rpx rgba(44,26,8,0.04);
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 }
 .history-item:active {
-  box-shadow: 0 4rpx 20rpx rgba(44,26,8,0.08);
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
   transform: scale(0.99);
 }
 
@@ -244,7 +355,7 @@
   display: block;
   font-size: 20rpx;
   font-weight: 700;
-  color: #FF9D42;
+  color: #FF9E6D;
   letter-spacing: 1rpx;
   margin-bottom: 6rpx;
   text-transform: uppercase;
@@ -253,13 +364,13 @@
   display: block;
   font-size: 28rpx;
   font-weight: 700;
-  color: #2C1A08;
+  color: var(--color-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-family: 'PingFang SC', sans-serif;
 }
-.h-title.text-primary { color: #FF9D42; }
+.h-title.text-primary { color: #FF9E6D; }
 .h-meta-row {
   display: flex;
   align-items: center;
@@ -269,21 +380,21 @@
 .h-meta {
   display: inline;
   font-size: 22rpx;
-  color: #C8BAAA;
+  color: var(--color-text-placeholder);
   font-weight: 500;
 }
 /* 播放进度条 */
 .h-progress-wrap {
   width: 100%;
   height: 4rpx;
-  background: #F0EAE2;
+  background: var(--color-border);
   border-radius: 2rpx;
   margin-top: 12rpx;
   overflow: hidden;
 }
 .h-progress-bar {
   height: 100%;
-  background: linear-gradient(90deg, #FF9D42, #E07020);
+  background: linear-gradient(90deg, var(--color-primary), #FF5722);
   border-radius: 2rpx;
   max-width: 100%;
 }
@@ -305,7 +416,7 @@
 .bar {
   width: 6rpx;
   border-radius: 4rpx;
-  background: #FF9D42;
+  background: #FF9E6D;
   animation: bounce 0.6s ease-in-out infinite;
 }
 .bar-1 { height: 24rpx; animation-delay: 0s; }
@@ -320,7 +431,7 @@
   width: 56rpx;
   height: 56rpx;
   border-radius: 50%;
-  background: #FFF4E8;
+  background: #FFF7ED;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -328,7 +439,7 @@
 }
 .play-mini-icon {
   font-size: 22rpx;
-  color: #FF9D42;
+  color: #FF9E6D;
   padding-left: 4rpx;
 }
 
@@ -393,10 +504,10 @@
 .icon-trash-sm .trash-handle,
 .icon-trash-sm .trash-lid-bar,
 .icon-trash-sm .trash-stripe {
-  border-color: #D0C8C0;
+  border-color: #CCCCCC;
-  background: #D0C8C0;
+  background: #CCCCCC;
 }
 .icon-trash-sm .trash-body {
-  border-color: #D0C8C0;
+  border-color: #CCCCCC;
   background: transparent;
 }

pages/index/index.js

@@ -148,10 +148,13 @@ Page({
 
                 const list = res.data.list || []
                 const freeChannels = list.map(function (ch) {
+                    var cover = ch.cover || '📻'
                     return {
                         id: ch.id,
                         name: ch.name || '未命名',
-                        cover: ch.cover || '📻',
+                        cover: cover,
+                        _isDefaultCover: cover === '📻',
+                        _initial: (ch.name || '频').substring(0, 1),
                         bgColor: self._genColor(ch.id),
                         isFree: ch.isFree,
                         isVipOnly: ch.isVipOnly
@@ -172,8 +175,8 @@ Page({
     _mapChannel(channel, gd) {
         const programs = channel.programs || []
         const latest = programs.length > 0 ? programs[0] : null
-        // cover 直接是 emoji 字符串
         const cover = channel.cover || '📻'
+        const isDefaultCover = cover === '📻'
         const todayContent = latest ? Object.assign({}, latest, {
             durationText: util.formatTime(latest.duration || 0)
         }) : null
@@ -188,6 +191,8 @@ Page({
             isFree: channel.isFree,
             isVipOnly: channel.isVipOnly,
             cover: cover,
+            _isDefaultCover: isDefaultCover,
+            _initial: (channel.name || '频').substring(0, 1),
             bgColor: this._genColor(channel.id),
             _todayContent: todayContent,
             _isThisPlaying: isThisPlaying
@@ -292,4 +297,62 @@ Page({
 
     // ===================== 工具方法 =====================
     // _computeGreeting 已提至模块级，可在 data 初始化时直接调用
+
+    // ===================== 左滑操作 =====================
+
+    onSwipeStart(e) {
+        this._touchStartX = e.touches[0].clientX
+        this._touchStartY = e.touches[0].clientY
+        this._swiping = false
+    },
+
+    onSwipeMove(e) {
+        var dx = e.touches[0].clientX - this._touchStartX
+        var dy = e.touches[0].clientY - this._touchStartY
+        // 水平滑动距离大于垂直才算滑动
+        if (Math.abs(dx) < Math.abs(dy)) return
+        this._swiping = true
+        var idx = e.currentTarget.dataset.idx
+        var x = Math.max(-180, Math.min(0, dx))
+        var key = 'subscribedData[' + idx + ']._swipeX'
+        this.setData({ [key]: x })
+    },
+
+    onSwipeEnd(e) {
+        if (!this._swiping) return
+        var idx = e.currentTarget.dataset.idx
+        var cur = this.data.subscribedData[idx]._swipeX || 0
+        var key = 'subscribedData[' + idx + ']._swipeX'
+        // 超过 90rpx 则展开操作区，否则回弹
+        this.setData({ [key]: cur < -90 ? -180 : 0 })
+    },
+
+    onUnsubscribe(e) {
+        var id = e.currentTarget.dataset.id
+        var name = e.currentTarget.dataset.name || ''
+        wx.showModal({
+            title: '取消订阅',
+            content: '确定取消订阅「' + name + '」频道吗？',
+            success: function (res) {
+                if (res.confirm) {
+                    app.unsubscribeFromDomain(id)
+                }
+            }
+        })
+    },
+
+    // ===================== 分享钩子 =====================
+    onShareAppMessage() {
+        return {
+            title: '全声汇 - 听见世界的声音',
+            path: '/pages/index/index'
+        }
+    },
+
+    onShareTimeline() {
+        return {
+            title: '全声汇 - 听见世界的声音',
+            query: ''
+        }
+    }
 })

pages/index/index.wxml

@@ -5,7 +5,7 @@
 <view class="index-page">
 
   <!-- 状态栏占位 -->
-  <view style="height: {{statusBarHeight}}px; flex-shrink: 0; background: #FCFCFC;"></view>
+  <view style="height: {{statusBarHeight}}px; flex-shrink: 0; background: #FAFAF8;"></view>
 
   <!-- ===== 自定义导航栏 ===== -->
   <view class="custom-nav">
@@ -14,12 +14,12 @@
 
   <!-- ===== 顶部问候栏（吸顶） ===== -->
   <view class="meta-bar">
-    <!-- 时段文案（根据时间变化） -->
+    <!-- 行1: 问候语 -->
     <text class="greeting-sub">{{greetingSub}}</text>
-    <!-- 信息行 -->
+    <!-- 行2: 位置 · 日期 · 天气（紧凑） -->
     <view class="info-row">
       <view class="info-item" wx:if="{{locationName}}">
-        <t-icon name="location" size="26rpx" color="#FF9D42" />
+        <t-icon name="location" size="26rpx" color="#FF9E6D" />
         <text class="info-text loc-name-text">{{locationName}}</text>
       </view>
       <text class="info-dot" wx:if="{{locationName}}">·</text>
@@ -27,7 +27,7 @@
       <block wx:if="{{weather}}">
         <text class="info-dot">·</text>
         <text class="weather-icon-sm">{{weather.icon}}</text>
-        <text class="info-text">{{weather.desc}} {{weather.temp}}°C</text>
+        <text class="info-text">{{weather.temp}}°C</text>
       </block>
     </view>
   </view>
@@ -96,15 +96,29 @@
         <view
           wx:for="{{subscribedData}}"
           wx:key="id"
-          class="channel-card card"
+          class="swipe-container"
+        >
+          <!-- 滑动露出的取消订阅按钮 -->
+          <view class="swipe-action" bindtap="onUnsubscribe" data-id="{{item.id}}" data-name="{{item.name}}">
+            <text class="swipe-action-text">取消订阅</text>
+          </view>
+          <!-- 可滑动的卡片主体 -->
+          <view
+            class="channel-card card swipe-card"
+            style="transform: translateX({{item._swipeX || 0}}rpx);"
+            data-idx="{{index}}"
+            bindtouchstart="onSwipeStart"
+            bindtouchmove="onSwipeMove"
+            bindtouchend="onSwipeEnd"
           >
           <!-- 左侧色条 -->
           <view class="card-accent" style="background: {{item.bgColor}};"></view>
 
           <!-- 频道头部 -->
           <view class="card-header" bindtap="goChannel" data-id="{{item.id}}">
-            <view class="channel-icon" style="background: {{item.bgColor || '#FFE8CC'}};">
+            <view class="channel-icon {{item._isDefaultCover ? 'initial-avatar' : ''}}" style="background: {{item.bgColor || '#FFE8CC'}};">
-              <text class="icon-emoji">{{item.cover || '📻'}}</text>
+              <text wx:if="{{item._isDefaultCover}}" class="icon-initial">{{item._initial}}</text>
+              <text wx:else class="icon-emoji">{{item.cover}}</text>
             </view>
             <view class="channel-info">
               <text class="channel-name">{{item.name}}</text>
@@ -124,36 +138,41 @@
             bindtap="onPlayContent"
             data-content-id="{{item._todayContent.id}}"
           >
-            <!-- 左：音波动画 or 音乐图标 -->
+            <!-- 左侧装饰色条 -->
+            <view class="play-row-accent" style="background: {{item.bgColor || '#FF9E6D'}};"></view>
+            <!-- 左：音波动画 or 音乐图标（带圆形背景） -->
             <view class="play-left">
+              <view class="play-left-circle" style="background: {{item.bgColor || '#FF9E6D'}}20;">
                 <view wx:if="{{item._isThisPlaying && isPlaying}}" class="sound-wave">
                   <view class="wave-bar wave-1"></view>
                   <view class="wave-bar wave-2"></view>
                   <view class="wave-bar wave-3"></view>
                   <view class="wave-bar wave-4"></view>
                 </view>
-              <t-icon wx:else name="sound" size="36rpx" color="{{item._isThisPlaying ? '#FF9D42' : '#BBB'}}" />
+                <t-icon wx:else name="sound" size="34rpx" color="{{item._isThisPlaying ? '#FF9E6D' : item.bgColor || '#FF9E6D'}}" />
               </view>
-            <!-- 中：标题 + 时长 -->
+            </view>
+            <!-- 中：标题 -->
             <view class="play-info">
               <text class="play-title {{item._isThisPlaying ? 'text-primary' : ''}}">{{item._todayContent.title}}</text>
-              <text class="play-duration">{{item._todayContent.durationText}}</text>
             </view>
             <!-- 右：播放按钮 -->
             <view class="play-btn-wrap">
               <view class="play-btn-ring {{item._isThisPlaying ? 'active' : ''}}"></view>
               <view class="play-btn {{item._isThisPlaying ? 'active' : ''}}">
-                <t-icon wx:if="{{item._isThisPlaying && isPlaying}}" name="pause" size="32rpx" color="#FFF" />
+                <t-icon wx:if="{{item._isThisPlaying && isPlaying}}" name="pause" size="36rpx" color="#FFF" />
-                <t-icon wx:else name="play" size="32rpx" color="{{item._isThisPlaying ? '#FFF' : '#555'}}" />
+                <t-icon wx:else name="play" size="36rpx" color="{{item._isThisPlaying ? '#FFF' : '#888'}}" />
               </view>
             </view>
           </view>
 
           <!-- 该频道暂无节目 -->
           <view wx:else class="no-content">
+            <t-icon name="sound" size="32rpx" color="#DDD" />
             <text class="no-content-text">暂无节目，敬请期待</text>
           </view>
-        </view>
+          </view> <!-- /swipe-card -->
+        </view> <!-- /swipe-container -->
       </block>
 
       <!-- ─── Section 2: 免费频道 ─── -->
@@ -197,8 +216,9 @@
               bindtap="goChannel"
               data-id="{{item.id}}"
             >
-              <view class="free-icon" style="background: {{item.bgColor || '#FFE8CC'}};">
+              <view class="free-icon {{item._isDefaultCover ? 'initial-avatar' : ''}}" style="background: {{item.bgColor || '#FFE8CC'}};">
-                <text class="free-emoji">{{item.cover || '📻'}}</text>
+                <text wx:if="{{item._isDefaultCover}}" class="free-initial">{{item._initial}}</text>
+                <text wx:else class="free-emoji">{{item.cover}}</text>
               </view>
               <text class="free-name">{{item.name}}</text>
               <!-- VIP 用户显示频道类型，普通用户只显免费帘记 -->
@@ -216,7 +236,7 @@
       </view>
 
       <!-- 底部占位 -->
-      <view style="height: 200rpx;"></view>
+      <view class="player-bottom-spacer"></view>
 
     </view>
   </scroll-view>

pages/index/index.wxss

@@ -23,7 +23,7 @@
   align-items: center;
   justify-content: center;
   height: 80rpx;
-  background: #FFFAF5;
+  background: #FFFFFF;
   flex-shrink: 0;
   position: relative;
 }
@@ -31,16 +31,16 @@
   font-size: 34rpx;
   font-weight: 600;
   font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
-  color: #2C1A08;
+  color: #333333;
   letter-spacing: 4rpx;
 }
 
 /* ========== 顶部问候栏（吸顶） ========== */
 .meta-bar {
   flex-shrink: 0;
-  background: linear-gradient(180deg, #FFFAF5 0%, #FFFFFF 100%);
+  background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-page) 100%);
   padding: 28rpx 36rpx 22rpx;
-  border-bottom: 1rpx solid #F0ECE8;
+  border-bottom: 1rpx solid var(--color-border);
   z-index: 10;
 }
 
@@ -71,7 +71,7 @@
   display: block;
   font-size: 30rpx;
   font-weight: 600;
-  color: #5C3D1E;
+  color: var(--color-text-primary);
   letter-spacing: 1rpx;
   margin-bottom: 12rpx;
   font-family: 'PingFang SC', -apple-system, sans-serif;
@@ -88,22 +88,22 @@
   display: flex;
   align-items: center;
   gap: 6rpx;
-  background: rgba(255, 157, 66, 0.08);
+  background: var(--color-primary-light);
   padding: 6rpx 16rpx;
   border-radius: 999rpx;
 }
 .loc-name-text {
   font-weight: 600;
-  color: #8B6914;
+  color: var(--color-primary);
 }
 .info-text {
   font-size: 22rpx;
-  color: #999;
+  color: var(--color-text-placeholder);
   font-weight: 500;
 }
 .info-dot {
   font-size: 22rpx;
-  color: #D5D0CA;
+  color: var(--color-text-disabled);
   margin: 0 2rpx;
 }
 .weather-icon-sm { font-size: 22rpx; }
@@ -123,8 +123,8 @@
   display: flex;
   align-items: center;
   gap: 20rpx;
-  background: linear-gradient(135deg, #FFF8EE, #FFF3DC);
+  background: linear-gradient(135deg, #FFF9F0, #FFF3E0);
-  border: 1rpx solid #FFDFA0;
+  border: 1rpx solid rgba(245, 158, 11, 0.3);
   border-radius: 24rpx;
   padding: 24rpx 28rpx;
   margin-bottom: 32rpx;
@@ -139,20 +139,51 @@
 .vip-home-title {
   font-size: 28rpx;
   font-weight: 700;
-  color: #B07000;
+  color: #B45309;
   font-family: 'PingFang SC', sans-serif;
 }
 .vip-home-desc {
   font-size: 22rpx;
-  color: #C09040;
+  color: #D97706;
 }
 .vip-home-tag {
   font-size: 22rpx;
   font-weight: 600;
-  color: #FF9D42;
+  color: var(--color-primary);
 }
 
 
+/* ========== 左滑取消订阅 ========== */
+.swipe-container {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  margin-bottom: 24rpx;
+}
+.swipe-action {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 180rpx;
+  background: #FF4D4F;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+}
+.swipe-action-text {
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #FFF;
+}
+.swipe-card {
+  position: relative;
+  z-index: 2;
+  transition: transform 0.25s ease;
+  margin-bottom: 0;
+}
+
 /* ========== Section Header ========== */
 .section-header {
   display: flex;
@@ -177,12 +208,12 @@
   flex-shrink: 0;
 }
 .dot-free {
-  background: #00C853;
+  background: var(--color-success);
 }
 .section-title {
   font-size: 32rpx;
   font-weight: 800;
-  color: #1A1A1A;
+  color: var(--color-text-primary);
   letter-spacing: 1rpx;
 }
 .section-subtitle {
@@ -328,6 +359,7 @@
   overflow: hidden;
 }
 .icon-emoji { font-size: 36rpx; }
+.icon-initial { font-size: 36rpx; color: #FFF; font-weight: 800; }
 
 .channel-info { flex: 1; min-width: 0; }
 .channel-name {
@@ -351,22 +383,49 @@
 .play-row {
   display: flex;
   align-items: center;
-  padding: 20rpx 18rpx 20rpx 16rpx;
+  padding: 22rpx 18rpx 22rpx 24rpx;
   border-radius: 24rpx;
-  background: #F7F7F7;
+  background: #FFFFFF;
+  border: 1rpx solid #F0F0F0;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
   transition: all 0.3s ease;
   gap: 16rpx;
+  position: relative;
+  overflow: hidden;
 }
-.play-row:active { background: #EEEEEE; }
+.play-row:active { background: #FAFAFA; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); }
 .play-row.playing {
-  background: linear-gradient(135deg, rgba(255, 157, 66, 0.08) 0%, rgba(255, 120, 50, 0.15) 100%);
+  background: linear-gradient(135deg, rgba(255, 157, 66, 0.06) 0%, rgba(255, 120, 50, 0.12) 100%);
-  border: 1rpx solid rgba(255, 157, 66, 0.15);
+  border: 1rpx solid rgba(255, 157, 66, 0.2);
+  box-shadow: 0 4rpx 20rpx rgba(255, 157, 66, 0.1);
+}
+
+/* 播放行左侧装饰色条 */
+.play-row-accent {
+  position: absolute;
+  left: 0;
+  top: 12rpx;
+  bottom: 12rpx;
+  width: 6rpx;
+  border-radius: 0 6rpx 6rpx 0;
+  opacity: 0.6;
+}
+.play-row.playing .play-row-accent {
+  opacity: 1;
 }
 
 /* 左侧：音波 or 图标 */
 .play-left {
-  width: 48rpx;
+  display: flex;
-  height: 48rpx;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+/* 扬声器图标圆形底板 */
+.play-left-circle {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -397,7 +456,7 @@
 }
 
 /* 中间信息 */
-.play-info { flex: 1; padding-right: 12rpx; overflow: hidden; }
+.play-info { flex: 1; padding: 0 12rpx 0 4rpx; overflow: hidden; }
 .play-title {
   display: block;
   font-size: 27rpx;
@@ -438,26 +497,33 @@
 }
 /* 按钮主体 */
 .play-btn {
-  width: 68rpx;
+  width: 72rpx;
-  height: 68rpx;
+  height: 72rpx;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #ECECEC;
+  background: #EEEEEE;
   flex-shrink: 0;
   transition: all 0.25s ease;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.1);
 }
 .play-btn:active { transform: scale(0.88); }
 .play-btn.active {
-  background: linear-gradient(135deg, #FF9D42 0%, #FF7832 100%);
+  background: linear-gradient(135deg, #FF9E6D 0%, #FF7832 100%);
-  box-shadow: 0 8rpx 24rpx rgba(255, 120, 50, 0.4);
+  box-shadow: 0 8rpx 28rpx rgba(255, 120, 50, 0.45);
 }
-/* t-icon 已替代旧 .play-icon / .pause-bars */
 
 /* 暂无节目 */
-.no-content { padding: 16rpx 12rpx; }
+.no-content {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 20rpx 18rpx;
+  background: #FAFAFA;
+  border-radius: 20rpx;
+  border: 1rpx dashed #ECECEC;
+}
 .no-content-text { font-size: 23rpx; color: #CCCCCC; }
 
 /* ========== 免费频道横向区 ========== */
@@ -511,6 +577,7 @@
 }
 .free-cover { width: 100%; height: 100%; }
 .free-emoji { font-size: 48rpx; }
+.free-initial { font-size: 40rpx; color: #FFF; font-weight: 800; }
 .free-name {
   font-size: 22rpx;
   font-weight: 700;

pages/player/index.js

@@ -14,6 +14,7 @@ Page({
         isPlaying: false,
         isVip: false,
         isLiked: false,
+        isFavorited: false,
         currentTime: 0,
         duration: 0,
         currentTimeText: '00:00',
@@ -27,7 +28,21 @@ Page({
         commentList: [],
         commentText: '',
         commentLoading: false,
-        submitting: false
+        submitting: false,
+        // 分享面板
+        // 分享面板
+        showSharePanel: false,
+        // 倍速 ActionSheet
+        showSpeedSheet: false,
+        speedItems: [
+            { label: '0.75x' },
+            { label: '1.0x' },
+            { label: '1.25x' },
+            { label: '1.5x' },
+            { label: '2.0x' }
+        ],
+        // 频道节目列表（用于上/下期切换）
+        _channelPrograms: []
     },
 
     _isSeeking: false,
@@ -102,10 +117,13 @@ Page({
             durationText: util.formatTime(gd.duration || content.duration),
             displayDate: dateStr,
             playbackRate: gd.playbackRate,
-            statusBarHeight: gd.statusBarHeight || 0
+            statusBarHeight: gd.statusBarHeight || 0,
+            isLiked: !!content.hasLiked,
+            isFavorited: content.HasFavorite === 1 || content.hasFavorite === 1
         })
 
         this._updateDomain()
+        this._loadChannelPrograms()
     },
 
     /**
@@ -136,7 +154,7 @@ Page({
     },
 
     /**
-     * 查询当前节目点赞状态
+     * 查询当前节目点赞和收藏状态（刷新最新值）
      */
     _loadLikeStatus() {
         const content = this.data.activeContent
@@ -144,11 +162,74 @@ Page({
         var self = this
         api.getProgramDetail(content.id).then(function (res) {
             if (res.code === 200 && res.data) {
-                self.setData({ isLiked: !!res.data.isLiked })
+                self.setData({
+                    isLiked: res.data.hasLiked === 1,
+                    isFavorited: res.data.HasFavorite === 1 || res.data.hasFavorite === 1
+                })
             }
         }).catch(function () { })
     },
 
+    /**
+     * 加载当前频道的节目列表（用于上/下期切换）
+     */
+    _loadChannelPrograms() {
+        const content = this.data.activeContent
+        if (!content) return
+        var channelId = content.channelId || (content.channel && content.channel.id)
+        if (!channelId) return
+        var self = this
+        api.getProgramList({ channelId: channelId, current: 1, pageSize: 100 })
+            .then(function (res) {
+                if (res.code === 200 && res.data) {
+                    var list = res.data.list || res.data || []
+                    self.setData({ _channelPrograms: list })
+                }
+            }).catch(function () { })
+    },
+
+    /**
+     * 上一期
+     */
+    onPrev() {
+        var programs = this.data._channelPrograms
+        var content = this.data.activeContent
+        if (!content || programs.length === 0) {
+            wx.showToast({ title: '没有更多了', icon: 'none' })
+            return
+        }
+        var idx = -1
+        for (var i = 0; i < programs.length; i++) {
+            if (programs[i].id === content.id) { idx = i; break }
+        }
+        if (idx <= 0) {
+            wx.showToast({ title: '已是第一期', icon: 'none' })
+            return
+        }
+        app.playContent(programs[idx - 1])
+    },
+
+    /**
+     * 下一期
+     */
+    onNext() {
+        var programs = this.data._channelPrograms
+        var content = this.data.activeContent
+        if (!content || programs.length === 0) {
+            wx.showToast({ title: '没有更多了', icon: 'none' })
+            return
+        }
+        var idx = -1
+        for (var i = 0; i < programs.length; i++) {
+            if (programs[i].id === content.id) { idx = i; break }
+        }
+        if (idx < 0 || idx >= programs.length - 1) {
+            wx.showToast({ title: '已是最新一期', icon: 'none' })
+            return
+        }
+        app.playContent(programs[idx + 1])
+    },
+
     /**
      * 播放/暂停
      */
@@ -270,7 +351,6 @@ Page({
         this.setData({ isLiked: !wasLiked })
         api.toggleLike(content.id).then(function (res) {
             if (res.code !== 200) {
-                // 回滚
                 self.setData({ isLiked: wasLiked })
                 wx.showToast({ title: res.msg || '操作失败', icon: 'none' })
             } else {
@@ -282,6 +362,29 @@ Page({
         })
     },
 
+    onFavorite() {
+        const content = this.data.activeContent
+        if (!content) return
+        const self = this
+        const wasFavorited = this.data.isFavorited
+        // 乐观更新
+        this.setData({ isFavorited: !wasFavorited })
+        const fn = wasFavorited
+            ? api.removeFavorite(content.id)
+            : api.addFavorite(content.id)
+        fn.then(function (res) {
+            if (res.code !== 200) {
+                self.setData({ isFavorited: wasFavorited })
+                wx.showToast({ title: res.msg || '操作失败', icon: 'none' })
+            } else {
+                wx.showToast({ title: wasFavorited ? '已取消收藏' : '已收藏 🔖', icon: 'none' })
+            }
+        }).catch(function () {
+            self.setData({ isFavorited: wasFavorited })
+            wx.showToast({ title: '网络异常', icon: 'none' })
+        })
+    },
+
     // ===== 评论弹层 =====
 
     onOpenComments() {
@@ -358,11 +461,62 @@ Page({
         })
     },
 
+    onShareTap() {
+        this.setData({ showSharePanel: true })
+    },
+
+    onCloseShare() {
+        this.setData({ showSharePanel: false })
+    },
+
+    /**
+     * 朋友圈分享按钮点击 → 引导用户使用右上角胶囊菜单
+     * 微信小程序限制：无法编程式触发朋友圈分享，只能从胶囊菜单触发
+     */
+    onShareMomentTip() {
+        this.setData({ showSharePanel: false })
+        wx.showModal({
+            title: '分享到朋友圈',
+            content: '请点击右上角「···」菜单，选择「分享」即可发布到朋友圈',
+            showCancel: false,
+            confirmText: '我知道了'
+        })
+    },
+
     onShare() {
-        wx.showToast({ title: '分享功能开发中', icon: 'none' })
+        this.onShareTap()
     },
 
     goBack() {
         wx.navigateBack()
+    },
+
+    // ===== 小程序分享生命周期钩子 =====
+
+    /**
+     * 转发给朋友（胶囊菜单内「转发」，或 button open-type=share 触发）
+     */
+    onShareAppMessage() {
+        const content = this.data.activeContent || {}
+        const domain = this.data.domain || {}
+        this.setData({ showSharePanel: false })
+        return {
+            title: (domain.name ? '【' + domain.name + '】' : '') + (content.title || '全声汇'),
+            path: '/pages/index/index',
+            imageUrl: ''
+        }
+    },
+
+    /**
+     * 分享到朋友圈（定义此函数后，胶囊菜单中「分享」自动出现）
+     */
+    onShareTimeline() {
+        const content = this.data.activeContent || {}
+        const domain = this.data.domain || {}
+        return {
+            title: (domain.name ? '【' + domain.name + '】' : '') + (content.title || '全声汇'),
+            query: '',
+            imageUrl: ''
+        }
     }
 })

pages/player/index.wxml

@@ -1,16 +1,16 @@
 <!-- 播放器详情页 -->
-<page-meta page-style="overflow:hidden; background:#1A1208;" />
+<page-meta page-style="overflow:hidden; background:#FAFAF8;" />
 <view class="player-page">
 
   <!-- 状态栏占位 -->
   <view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>
 
-  <!-- 环境光背景 -->
+  <!-- 环境光背景 - 顶部轻柔光晕 -->
   <view class="bg-glow"
-    style="background: radial-gradient(ellipse at 50% -10%, {{domain.bgColor || '#FF9D42'}}44 0%, transparent 65%);">
+    style="background: radial-gradient(ellipse at 50% -10%, {{domain.bgColor || '#FF9E6D'}}26 0%, transparent 60%);">
   </view>
 
-  <!-- 顶部：返回 + 标题 + 评论 -->
+  <!-- 顶部：返回 + 标题 -->
   <view class="top-bar">
     <view class="top-btn tap-active" bindtap="goBack">
       <text class="top-back">‹</text>
@@ -19,9 +19,7 @@
       <text class="top-label">正在播放</text>
       <text class="top-title">{{activeContent.title || '加载中...'}}</text>
     </view>
-    <view class="top-btn tap-active" bindtap="onOpenComments">
+    <view class="top-btn" style="visibility: hidden;"></view>
-      <text class="top-comment-icon">💬</text>
-    </view>
   </view>
 
   <!-- 中央 Banner：封面 ↔ 文案 -->
@@ -42,27 +40,37 @@
       <!-- 频道名 -->
       <text class="cover-channel">{{domain.name}}</text>
 
-      <text class="banner-hint">点击查看文案</text>
+      <text class="banner-hint">📖 阅读模式</text>
     </view>
 
-    <!-- 文案视图 -->
+    <!-- 文案视图（阅读模式） -->
     <view class="banner-transcript {{showTranscript ? '' : 'banner-hidden'}}">
       <scroll-view scroll-y enhanced show-scrollbar="{{false}}" class="transcript-scroll">
         <text class="transcript-content" wx:if="{{activeContent.content}}">{{activeContent.content}}</text>
         <view wx:else class="transcript-empty">
-          <text class="transcript-empty-icon">📄</text>
+          <text class="transcript-empty-icon">📝</text>
-          <text class="transcript-empty-text">暂无文案</text>
+          <text class="transcript-empty-text">暂无文案内容</text>
+          <text class="transcript-empty-sub">主播未上传此期文稿</text>
         </view>
       </scroll-view>
-      <text class="banner-hint">点击返回封面</text>
+      <view class="transcript-close-hint">
+        <text class="transcript-close-text">点击任意区域返回播放</text>
+      </view>
     </view>
   </view>
 
-  <!-- 日期 + like 同行 -->
+  <!-- 日期 + 收藏 + like 同行 -->
   <view class="date-like-row">
     <text class="date-text">{{displayDate}}</text>
-    <view class="like-btn-inline tap-active" bindtap="onLike">
+    <view class="action-btns">
-      <text class="like-icon {{isLiked ? 'liked' : ''}}">{{isLiked ? '♥' : '♡'}}</text>
+      <!-- 收藏按鈕 -->
+      <view class="action-btn tap-active" bindtap="onFavorite">
+        <text class="action-icon {{isFavorited ? 'favorited' : ''}}">{{isFavorited ? '🔖' : '📄'}}</text>
+      </view>
+      <!-- 点赞按钮 -->
+      <view class="action-btn tap-active" bindtap="onLike">
+        <text class="like-icon {{isLiked ? 'liked' : ''}}">{{isLiked ? '❤️' : '♡'}}</text>
+      </view>
     </view>
   </view>
 
@@ -73,10 +81,10 @@
       min="0"
       max="{{duration}}"
       value="{{currentTime}}"
-      activeColor="#FF9D42"
+      activeColor="#FF9E6D"
       backgroundColor="rgba(255,255,255,0.12)"
       block-size="14"
-      block-color="#FF9D42"
+      block-color="#FF9E6D"
       bindchange="onSliderChange"
       bindchanging="onSliderChanging"
     />
@@ -86,8 +94,13 @@
     </view>
   </view>
 
-  <!-- 控制区：← 15s | 播放/暂停 | 15s → -->
+  <!-- 控制区：|◁ ← 15s | 播放/暂停 | 15s → ▷| -->
   <view class="controls-row">
+    <!-- 上一期 -->
+    <view class="prev-next-btn tap-active" bindtap="onPrev">
+      <text class="pn-icon">⏮</text>
+    </view>
+
     <view class="skip-btn tap-active" bindtap="onBackward">
       <text class="skip-arrow">↺</text>
       <text class="skip-sec">15</text>
@@ -105,64 +118,58 @@
       <text class="skip-arrow">↻</text>
       <text class="skip-sec">15</text>
     </view>
-  </view>
 
-  <!-- 评论弹层 -->
+    <!-- 下一期 -->
-  <view class="comment-mask" wx:if="{{showComments}}" bindtap="onCloseComments"></view>
+    <view class="prev-next-btn tap-active" bindtap="onNext">
-  <view class="comment-sheet {{showComments ? 'sheet-up' : ''}}">
+      <text class="pn-icon">⏭</text>
-    <view class="sheet-handle"></view>
-    <view class="sheet-header">
-      <text class="sheet-title">评论 ({{commentList.length}})</text>
-      <view class="sheet-close tap-active" bindtap="onCloseComments">
-        <text class="sheet-close-icon">✕</text>
     </view>
   </view>
 
-    <!-- 输入区 -->
+  <!-- 倍速按钮行 -->
-    <view class="comment-input-row">
+  <view class="speed-row">
-      <input
+    <view class="speed-btn tap-active" bindtap="onSpeed">
-        class="comment-input"
+      <text class="speed-label">{{playbackRate === 1 ? '倍速' : playbackRate + 'x'}}</text>
-        placeholder="说点什么..."
+    </view>
-        placeholder-style="color:rgba(255,200,120,0.3);"
+  </view>
-        value="{{commentText}}"
+
-        bindinput="onCommentInput"
+  <!-- 倍速选择 ActionSheet -->
-        confirm-type="send"
+  <t-action-sheet
-        bindconfirm="onSubmitComment"
+    visible="{{showSpeedSheet}}"
-        maxlength="200"
+    items="{{speedItems}}"
+    bind:selected="onSpeedSelect"
+    bind:cancel="onSpeedCancel"
+    cancel-text="取消"
   />
-      <view class="send-btn tap-active {{submitting ? 'sending' : ''}}" bindtap="onSubmitComment">
-        <text class="send-text">发送</text>
-      </view>
-    </view>
 
-    <!-- 评论列表 -->
+  <!-- 分享面板遮罩 -->
-    <scroll-view scroll-y class="comment-list-scroll" enhanced show-scrollbar="{{false}}">
+  <view class="share-mask" wx:if="{{showSharePanel}}" bindtap="onCloseShare"></view>
-      <view wx:if="{{commentLoading}}" class="comment-loading">
+
-        <text class="comment-loading-text">加载中...</text>
+  <!-- 分享面板 -->
+  <view class="share-sheet {{showSharePanel ? 'sheet-up' : ''}}">
+    <view class="share-sheet-handle"></view>
+    <view class="share-sheet-title">分享到</view>
+    <view class="share-options">
+
+      <!-- 发给朋友（open-type=share 触发 onShareAppMessage） -->
+      <button class="share-option-btn" open-type="share">
+        <view class="share-option">
+          <view class="share-opt-icon share-opt-friend">
+            <text class="share-opt-emoji">💬</text>
           </view>
-      <view wx:elif="{{commentList.length === 0}}" class="comment-empty">
+          <text class="share-opt-label">小程序好友</text>
-        <text class="comment-empty-icon">💬</text>
-        <text class="comment-empty-text">还没有评论，来说第一句话</text>
         </view>
-      <view
+      </button>
-        wx:for="{{commentList}}"
+
-        wx:key="id"
+      <!-- 分享到朋友圈 -->
-        class="comment-item"
+      <view class="share-option tap-active" bindtap="onShareMomentTip">
-      >
+        <view class="share-opt-icon share-opt-moment">
-        <view class="comment-avatar">
+          <text class="share-opt-emoji">🌐</text>
-          <text class="comment-avatar-text">{{item.userName ? item.userName[0] : '?'}}</text>
         </view>
-        <view class="comment-body">
+        <text class="share-opt-label">朋友圈</text>
-          <text class="comment-author">{{item.userName || '匿名'}}</text>
+      </view>
-          <text class="comment-text">{{item.content}}</text>
+
-          <text class="comment-time">{{item.createdAtStr || item.createdAt}}</text>
+    </view>
-        </view>
+    <view class="share-cancel tap-active" bindtap="onCloseShare">取消</view>
-        <view wx:if="{{item._isOwn}}" class="comment-del tap-active" bindtap="onDeleteComment" data-id="{{item.id}}">
-          <text class="comment-del-icon">🗑</text>
-        </view>
-      </view>
-      <view style="height: 40rpx;"></view>
-    </scroll-view>
   </view>
 
 </view>

pages/player/index.wxss

@@ -1,29 +1,36 @@
-/* 播放器 — 暖棕沉浸主题 */
+/* 播放器 — 深空沉浸主题 · 重设计 */
 ::-webkit-scrollbar { display: none !important; }
 
 .player-page {
   height: 100vh;
-  background: #1A1208;
+  background: #FAFAF8;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
+  animation: player-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
-/* 环境光 */
+@keyframes player-slide-up {
+  0% { transform: translateY(40%); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+/* 环境光 — 日间柔和光晕 */
 .bg-glow {
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 60vh;
   pointer-events: none;
   z-index: 0;
+  opacity: 1;
 }
 
 /* ── 顶部栏 ── */
 .top-bar {
   display: flex;
   align-items: center;
-  padding: 16rpx 32rpx 12rpx;
+  padding: 12rpx 24rpx 8rpx;
   position: relative;
   z-index: 10;
 }
@@ -34,21 +41,15 @@
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: rgba(255,255,255,0.06);
   flex-shrink: 0;
 }
 .top-back {
-  font-size: 48rpx;
+  font-size: 52rpx;
-  color: rgba(255,240,210,0.9);
+  color: #333333;
   font-weight: 300;
   line-height: 1;
   margin-top: -4rpx;
 }
-.top-share {
-  font-size: 32rpx;
-  color: rgba(255,220,160,0.6);
-  font-weight: 600;
-}
 .top-title-wrap {
   flex: 1;
   text-align: center;
@@ -58,15 +59,16 @@
 .top-label {
   display: block;
   font-size: 18rpx;
-  color: rgba(255,200,120,0.45);
+  color: #999999;
-  letter-spacing: 2rpx;
+  letter-spacing: 4rpx;
-  margin-bottom: 6rpx;
+  text-transform: uppercase;
+  margin-bottom: 4rpx;
 }
 .top-title {
   display: block;
   font-size: 26rpx;
-  font-weight: 700;
+  font-weight: 600;
-  color: rgba(255,240,210,0.95);
+  color: #333333;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -81,6 +83,7 @@
   position: relative;
   z-index: 10;
   padding: 0 40rpx;
+  min-height: 0;
 }
 
 .banner-cover,
@@ -91,140 +94,196 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  transition: opacity 0.35s ease, transform 0.35s ease;
+  transition: opacity 0.4s ease, transform 0.4s ease;
   opacity: 1;
   transform: scale(1);
 }
 .banner-hidden {
   opacity: 0;
-  transform: scale(0.96);
+  transform: scale(0.92);
   pointer-events: none;
 }
 
 /* ── 涟漪声波 ── */
 .ripple-wrap {
   position: absolute;
-  width: 300rpx;
+  width: 360rpx;
-  height: 300rpx;
+  height: 360rpx;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .ripple-ring {
   position: absolute;
-  width: 220rpx;
+  width: 240rpx;
-  height: 220rpx;
+  height: 240rpx;
   border-radius: 50%;
-  border: 2rpx solid rgba(255, 157, 66, 0.5);
+  border: 2rpx solid rgba(255, 158, 109, 0.25);
-  animation: ripple-out 2.1s ease-out infinite;
+  animation: ripple-out 2.4s ease-out infinite;
 }
 @keyframes ripple-out {
-  0%   { transform: scale(0.6); opacity: 0.8; }
+  0%   { transform: scale(0.5); opacity: 0.7; }
-  100% { transform: scale(2.4); opacity: 0; }
+  100% { transform: scale(2.6); opacity: 0; }
 }
 
-/* ── 大 Emoji（无卡片背景） ── */
+/* ── 大 Emoji ── */
 .cover-emoji {
-  font-size: 180rpx;
+  font-size: 200rpx;
   position: relative;
   z-index: 2;
-  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-  transform: scale(0.9);
+  transform: scale(0.85);
-  filter: drop-shadow(0 20rpx 40rpx rgba(0,0,0,0.5));
+  filter: drop-shadow(0 16rpx 32rpx rgba(255, 158, 109, 0.3));
 }
 .cover-emoji.emoji-active {
-  transform: scale(1.05);
+  transform: scale(1.08);
 }
 .cover-channel {
-  font-size: 22rpx;
+  font-size: 24rpx;
-  font-weight: 600;
+  font-weight: 700;
-  color: rgba(255,200,120,0.45);
+  color: #999999;
-  letter-spacing: 2rpx;
+  letter-spacing: 6rpx;
-  margin-top: 24rpx;
+  text-transform: uppercase;
+  margin-top: 32rpx;
   position: relative;
   z-index: 2;
 }
 
-/* 提示文字 */
+/* 提示文字 — 胶囊按钮风格 */
 .banner-hint {
-  display: block;
+  display: inline-block;
-  margin-top: 20rpx;
+  margin-top: 28rpx;
-  font-size: 20rpx;
+  font-size: 22rpx;
-  color: rgba(255,200,120,0.3);
+  color: #999999;
-  letter-spacing: 1rpx;
+  letter-spacing: 2rpx;
   position: relative;
   z-index: 2;
+  background: rgba(0, 0, 0, 0.03);
+  border: 1rpx solid rgba(0, 0, 0, 0.05);
+  border-radius: 999rpx;
+  padding: 10rpx 28rpx;
 }
 
-/* ── 文案视图 ── */
+/* ── 文案视图（阅读模式） ── */
 .banner-transcript {
-  padding: 24rpx 48rpx 16rpx;
+  padding: 16rpx 40rpx 16rpx;
   flex-direction: column;
 }
+
 .transcript-scroll {
   flex: 1;
   width: 100%;
-  max-height: 480rpx;
+  max-height: 55vh;
-  background: rgba(255,200,120,0.05);
+  background: rgba(255, 255, 255, 0.85);
-  border-radius: 32rpx;
+  border-radius: 24rpx;
-  border: 1rpx solid rgba(255,200,120,0.12);
+  border: 1rpx solid rgba(0, 0, 0, 0.04);
-  padding: 32rpx;
+  padding: 36rpx 32rpx;
   box-sizing: border-box;
+  backdrop-filter: blur(24px);
+  box-shadow: 0 16rpx 48rpx rgba(255, 158, 109, 0.12);
 }
 .transcript-content {
-  font-size: 28rpx;
+  font-size: 30rpx;
-  line-height: 1.95;
+  line-height: 2.1;
-  color: rgba(255,240,210,0.8);
+  color: #666666;
   white-space: pre-wrap;
+  letter-spacing: 1rpx;
 }
 .transcript-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 40rpx 0;
+  padding: 56rpx 0;
 }
-.transcript-empty-icon { font-size: 60rpx; }
+.transcript-empty-icon { font-size: 72rpx; }
 .transcript-empty-text {
-  font-size: 24rpx;
+  font-size: 28rpx;
-  color: rgba(255,200,120,0.4);
+  color: #999999;
-  margin-top: 12rpx;
+  margin-top: 20rpx;
+  font-weight: 600;
+}
+.transcript-empty-sub {
+  font-size: 22rpx;
+  color: #CCCCCC;
+  margin-top: 8rpx;
+}
+.transcript-close-hint {
+  display: flex;
+  justify-content: center;
+  margin-top: 20rpx;
+}
+.transcript-close-text {
+  font-size: 20rpx;
+  color: #999999;
+  letter-spacing: 2rpx;
 }
 
-/* 日期 + like 同行 */
+/* ── 日期 + 操作行 ── */
 .date-like-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 48rpx;
+  padding: 0 52rpx;
-  margin-bottom: 4rpx;
+  margin-bottom: 8rpx;
   position: relative;
   z-index: 10;
 }
 .date-text {
   font-size: 22rpx;
-  color: rgba(255,200,120,0.4);
+  color: #999999;
-  letter-spacing: 1rpx;
+  letter-spacing: 2rpx;
+  font-weight: 500;
 }
-.like-btn-inline {
+.action-btns {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+.action-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 4rpx 0;
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.04);
+  transition: all 0.2s;
+}
+.action-btn:active {
+  background: rgba(0, 0, 0, 0.08);
+  transform: scale(1.1);
+}
+.action-icon {
+  font-size: 34rpx;
+  color: #666666;
+  transition: color 0.2s;
+}
+.action-icon.favorited {
+  color: #FF9E6D;
 }
 .like-icon {
-  font-size: 40rpx;
+  font-size: 36rpx;
-  color: rgba(255,200,120,0.55);
+  color: #666666;
+  transition: all 0.25s;
+}
+.like-icon.liked {
+  color: #EF4444;
+  filter: drop-shadow(0 0 8rpx rgba(239, 68, 68, 0.6));
+  animation: like-pop 0.35s ease;
+}
+@keyframes like-pop {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.3); }
+  100% { transform: scale(1); }
 }
 
-/* ── 进度条 + like 浮动 ── */
+/* ── 进度条 ── */
 .progress-section {
   padding: 0 48rpx;
-  margin-bottom: 16rpx;
+  margin-bottom: 12rpx;
   position: relative;
   z-index: 10;
 }
-/* like 按钮已内联至 time-row，旧绝对定位样式已移除 */
-
 .progress-slider { margin: 0; }
 .time-row {
   display: flex;
@@ -234,20 +293,10 @@
 }
 .time-text {
   font-size: 22rpx;
-  color: rgba(255,200,120,0.4);
+  color: #999999;
-  font-family: 'Menlo', 'SF Mono', monospace;
+  font-family: 'SF Mono', 'Menlo', monospace;
-  font-weight: 600;
+  font-weight: 500;
-}
+  letter-spacing: 1rpx;
-/* like 按鈕内联在时间行中间 */
-.like-btn-inline {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4rpx 16rpx;
-}
-.like-icon {
-  font-size: 40rpx;
-  color: rgba(255,200,120,0.55);
 }
 
 /* ── 控制区 ── */
@@ -255,215 +304,211 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 64rpx;
+  gap: 24rpx;
-  padding: 16rpx 48rpx 64rpx;
+  padding: 8rpx 48rpx 16rpx;
   position: relative;
   z-index: 10;
 }
+
+/* 上/下期按钮 */
+.prev-next-btn {
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.2s;
+}
+.prev-next-btn:active {
+  background: rgba(0, 0, 0, 0.04);
+}
+.pn-icon {
+  font-size: 36rpx;
+  color: #666666;
+}
+.prev-next-btn:active .pn-icon {
+  color: #333333;
+}
+
+/* 快退/快进 */
 .skip-btn {
-  width: 96rpx;
+  width: 88rpx;
-  height: 96rpx;
+  height: 88rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative;
+  border-radius: 50%;
+  transition: background 0.2s;
+}
+.skip-btn:active {
+  background: rgba(0, 0, 0, 0.04);
 }
 .skip-arrow {
-  font-size: 76rpx;
+  font-size: 64rpx;
-  color: rgba(255,220,160,0.8);
+  color: #666666;
+  font-weight: 300;
   line-height: 1;
 }
 .skip-sec {
-  position: absolute;
+  font-size: 18rpx;
-  font-size: 19rpx;
   font-weight: 800;
-  color: rgba(255,220,160,0.8);
+  color: #999999;
+  position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -46%);
+  transform: translate(-50%, -50%);
-  letter-spacing: -1rpx;
+  margin-top: 2rpx;
 }
+
+/* 播放/暂停主按钮 */
 .play-btn {
-  width: 136rpx;
+  width: 120rpx;
-  height: 136rpx;
+  height: 120rpx;
   border-radius: 50%;
-  background: #FF9D42;
+  background: linear-gradient(135deg, #FF8C42 0%, #FF6B2C 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow:
+  box-shadow: 0 16rpx 32rpx rgba(255, 107, 44, 0.25);
-    0 16rpx 48rpx rgba(255, 157, 66, 0.5),
-    0 0 0 12rpx rgba(255, 157, 66, 0.15);
   transition: transform 0.15s, box-shadow 0.15s;
 }
 .play-btn:active {
   transform: scale(0.92);
-  box-shadow:
+  box-shadow: 0 4rpx 16rpx rgba(255, 107, 44, 0.5);
-    0 8rpx 24rpx rgba(255, 157, 66, 0.4),
-    0 0 0 8rpx rgba(255, 157, 66, 0.1);
-}
-.play-tri {
-  font-size: 52rpx;
-  color: #FFF8EE;
-  margin-left: 8rpx;
-  line-height: 1;
 }
 .pause-group {
   display: flex;
-  gap: 12rpx;
+  gap: 10rpx;
   align-items: center;
 }
 .pause-bar {
-  width: 10rpx;
+  width: 8rpx;
-  height: 44rpx;
+  height: 36rpx;
-  background: #FFF8EE;
+  background: #FFF;
-  border-radius: 5rpx;
+  border-radius: 4rpx;
+}
+.play-tri {
+  font-size: 40rpx;
+  color: #FFF;
+  padding-left: 6rpx;
 }
 
-/* ── like 状态 ── */
+/* ── 倍速按钮行 ── */
-.like-icon.liked {
+.speed-row {
-  color: #FF4D6D;
+  display: flex;
+  justify-content: center;
+  padding: 0 48rpx 40rpx;
+  position: relative;
+  z-index: 10;
 }
-.top-comment-icon {
+.speed-btn {
-  font-size: 38rpx;
+  background: rgba(0, 0, 0, 0.04);
-  line-height: 1;
+  border: 1rpx solid rgba(0, 0, 0, 0.06);
+  border-radius: 999rpx;
+  padding: 12rpx 36rpx;
+  transition: all 0.2s;
+}
+.speed-btn:active {
+  background: rgba(0, 0, 0, 0.08);
+}
+.speed-label {
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #666666;
+  letter-spacing: 1rpx;
 }
 
-/* ── 评论弹层 ── */
+/* ── 分享面板 ── */
-.comment-mask {
+.share-mask {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 200;
+  z-index: 100;
+  animation: fadeIn 0.25s ease;
 }
-.comment-sheet {
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.share-sheet {
   position: fixed;
-  bottom: -100%;
+  bottom: 0;
   left: 0;
   right: 0;
-  height: 70vh;
+  background: rgba(255, 255, 255, 0.95);
-  background: #231808;
+  backdrop-filter: blur(20px);
   border-radius: 40rpx 40rpx 0 0;
-  z-index: 201;
+  padding: 24rpx 48rpx calc(48rpx + env(safe-area-inset-bottom));
-  display: flex;
+  transform: translateY(100%);
-  flex-direction: column;
+  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-  padding: 0 0 env(safe-area-inset-bottom);
+  z-index: 200;
-  transition: bottom 0.3s cubic-bezier(0.32,0.72,0,1);
+  box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.05);
 }
-.comment-sheet.sheet-up {
+.share-sheet.sheet-up {
-  bottom: 0;
+  transform: translateY(0);
 }
-.sheet-handle {
+.share-sheet-handle {
-  width: 72rpx;
+  width: 64rpx;
-  height: 6rpx;
+  height: 8rpx;
-  background: rgba(255,200,120,0.2);
+  background: #CCCCCC;
-  border-radius: 3rpx;
+  border-radius: 4rpx;
-  margin: 20rpx auto 0;
+  margin: 0 auto 28rpx;
 }
-.sheet-header {
+.share-sheet-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24rpx 40rpx;
-  border-bottom: 1rpx solid rgba(255,200,120,0.08);
-}
-.sheet-title {
   font-size: 30rpx;
   font-weight: 700;
-  color: rgba(255,240,210,0.9);
+  color: #333333;
+  text-align: center;
+  margin-bottom: 40rpx;
 }
-.sheet-close-icon {
+.share-options {
-  font-size: 32rpx;
-  color: rgba(255,200,120,0.4);
-}
-.comment-input-row {
   display: flex;
-  align-items: center;
+  justify-content: center;
-  gap: 16rpx;
+  gap: 64rpx;
-  padding: 20rpx 32rpx;
+  margin-bottom: 40rpx;
-  border-bottom: 1rpx solid rgba(255,200,120,0.08);
 }
-.comment-input {
+.share-option-btn {
-  flex: 1;
+  background: transparent !important;
-  background: rgba(255,200,120,0.07);
+  border: none !important;
-  border-radius: 40rpx;
+  padding: 0 !important;
-  padding: 16rpx 28rpx;
+  margin: 0 !important;
-  font-size: 28rpx;
+  line-height: normal !important;
-  color: rgba(255,240,210,0.9);
-  min-height: 0;
 }
-.send-btn {
+.share-option-btn::after { border: none !important; }
-  background: #FF9D42;
+.share-option {
-  border-radius: 32rpx;
-  padding: 14rpx 28rpx;
-}
-.send-btn.sending { opacity: 0.5; }
-.send-text {
-  font-size: 26rpx;
-  font-weight: 700;
-  color: #FFF;
-}
-.comment-list-scroll {
-  flex: 1;
-  padding: 8rpx 0;
-}
-.comment-loading, .comment-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 80rpx 0;
   gap: 16rpx;
 }
-.comment-loading-text, .comment-empty-text {
+.share-opt-icon {
-  font-size: 26rpx;
+  width: 100rpx;
-  color: rgba(255,200,120,0.3);
+  height: 100rpx;
-}
+  border-radius: 28rpx;
-.comment-empty-icon { font-size: 60rpx; }
-.comment-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 20rpx;
-  padding: 24rpx 32rpx;
-  border-bottom: 1rpx solid rgba(255,200,120,0.05);
-}
-.comment-avatar {
-  width: 64rpx;
-  height: 64rpx;
-  border-radius: 50%;
-  background: rgba(255,157,66,0.25);
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
 }
-.comment-avatar-text {
+.share-opt-emoji { font-size: 44rpx; }
-  font-size: 28rpx;
+.share-opt-friend { background: rgba(7, 193, 96, 0.15); }
-  color: #FF9D42;
+.share-opt-moment { background: rgba(255, 157, 66, 0.15); }
-  font-weight: 700;
+.share-opt-label {
-}
-.comment-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 6rpx;
-}
-.comment-author {
-  font-size: 24rpx;
-  font-weight: 600;
-  color: rgba(255,200,120,0.6);
-}
-.comment-text {
-  font-size: 28rpx;
-  color: rgba(255,240,210,0.85);
-  line-height: 1.6;
-}
-.comment-time {
   font-size: 22rpx;
-  color: rgba(255,200,120,0.3);
+  color: #666666;
 }
-.comment-del {
+.share-cancel {
-  padding: 8rpx;
+  text-align: center;
+  font-size: 28rpx;
+  color: #999999;
+  padding: 20rpx 0;
+  border-top: 1rpx solid #EEEEEE;
+}
+
+/* ── 分享图标（顶部栏） ── */
+.top-share-icon {
+  font-size: 36rpx;
+  color: #333333;
 }
-.comment-del-icon { font-size: 32rpx; }

pages/profile/index.js

@@ -11,6 +11,7 @@ Page({
         userInfo: null,
         menuItems: [
             { id: 'vip', label: '会员中心', icon: '👑', desc: '未开通', highlight: true },
+            { id: 'notification', label: '通知设置', icon: '🔔', desc: '', highlight: false },
             { id: 'help', label: '帮助与反馈', icon: '❓', desc: '', highlight: false },
             { id: 'about', label: '关于我们', icon: '📄', desc: 'v1.0.0', highlight: false }
         ]
@@ -49,6 +50,17 @@ Page({
         const id = e.currentTarget.dataset.id
         if (id === 'vip') {
             wx.navigateTo({ url: '/pages/vip/index' })
+        } else if (id === 'notification') {
+            wx.openSetting({
+                success(res) {
+                    if (res.authSetting['scope.subscribeMessage'] !== undefined) {
+                        wx.showToast({ title: '设置已更新', icon: 'none' })
+                    }
+                },
+                fail() {
+                    wx.showToast({ title: '请在系统设置中允许通知', icon: 'none' })
+                }
+            })
         } else if (id === 'help') {
             wx.showToast({ title: '帮助中心开发中', icon: 'none' })
         } else if (id === 'about') {

pages/profile/index.wxss

@@ -1,15 +1,8 @@
-/* 个人中心 - 全新极简温暖主题 */
+/* 个人中心 — 使用全局变量体系 */
-:root {
-  --primary-color: #F38600;
-  --bg-color: #F7F8FA;
-  --card-bg: #FFFFFF;
-  --text-main: #2C2C2C;
-  --text-sub: #8E8E93;
-}
 
 .profile-page {
   min-height: 100vh;
-  background-color: #F9F9F9;
+  background-color: var(--color-bg-page);
   position: relative;
   overflow-x: hidden;
 }
@@ -29,11 +22,11 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(135deg, #FFF0E0 0%, #FFDFB8 100%);
+  background: linear-gradient(135deg, rgba(255, 122, 47, 0.08) 0%, rgba(255, 122, 47, 0.18) 100%);
   border-bottom-left-radius: 64rpx;
   border-bottom-right-radius: 64rpx;
   z-index: -1;
-  box-shadow: 0 4rpx 24rpx rgba(243, 134, 0, 0.08);
+  box-shadow: 0 4rpx 24rpx rgba(255, 122, 47, 0.08);
 }
 
 .user-info-box {
@@ -47,8 +40,8 @@
   height: 140rpx;
   border-radius: 50%;
   border: 6rpx solid rgba(255, 255, 255, 0.6);
-  background: #FFF;
+  background: var(--color-bg-card);
-  box-shadow: 0 12rpx 32rpx rgba(243, 134, 0, 0.15);
+  box-shadow: 0 12rpx 32rpx rgba(255, 122, 47, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -82,14 +75,14 @@
 .user-name {
   font-size: 40rpx;
   font-weight: 800;
-  color: #333333;
+  color: var(--color-text-primary);
   letter-spacing: 2rpx;
 }
 
 .vip-badge {
   display: flex;
   align-items: center;
-  background: linear-gradient(90deg, #333333 0%, #1A1A1A 100%);
+  background: linear-gradient(90deg, var(--color-primary-dark) 0%, #1A1A1A 100%);
   padding: 4rpx 16rpx;
   border-radius: 999rpx;
   margin-left: 16rpx;
@@ -108,7 +101,7 @@
 
 .user-id {
   font-size: 24rpx;
-  color: #8C6F50;
+  color: var(--color-text-secondary);
   font-weight: 500;
 }
 
@@ -125,10 +118,10 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: linear-gradient(135deg, #FFEFD5 0%, #FFE4B5 100%);
+  background: linear-gradient(135deg, rgba(255, 122, 47, 0.1) 0%, rgba(255, 122, 47, 0.18) 100%);
   padding: 32rpx 40rpx;
   border-radius: 32rpx;
-  box-shadow: 0 8rpx 24rpx rgba(217, 119, 6, 0.08);
+  box-shadow: 0 8rpx 24rpx rgba(255, 122, 47, 0.08);
   margin-bottom: 32rpx;
   border: 1rpx solid rgba(255, 255, 255, 0.5);
 }
@@ -151,18 +144,18 @@
 .promo-title {
   font-size: 30rpx;
   font-weight: 800;
-  color: #8B4513;
+  color: var(--color-text-primary);
   margin-bottom: 6rpx;
 }
 
 .promo-desc {
   font-size: 22rpx;
-  color: #AA7A55;
+  color: var(--color-text-secondary);
   font-weight: 500;
 }
 
 .promo-btn {
-  background: #333333;
+  background: var(--color-primary-dark);
   color: #FDF1C2;
   font-size: 24rpx;
   font-weight: 700;
@@ -173,7 +166,7 @@
 
 /* 列表菜单 */
 .menu-list-card {
-  background: #FFFFFF;
+  background: var(--color-bg-card);
   border-radius: 32rpx;
   box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.02);
   padding: 16rpx 0;
@@ -226,7 +219,7 @@
 .menu-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333333;
+  color: var(--color-text-primary);
 }
 
 .menu-right {
@@ -236,7 +229,7 @@
 
 .menu-status {
   font-size: 24rpx;
-  color: #999999;
+  color: var(--color-text-placeholder);
   margin-right: 12rpx;
 }
 
@@ -247,7 +240,7 @@
 
 .menu-arrow {
   font-size: 32rpx;
-  color: #CCCCCC;
+  color: var(--color-text-disabled);
 }
 
 .bottom-spacer {

pages/splash/index.wxml

@@ -1,5 +1,5 @@
 <!-- 启动页 —— 沉浸式暖棕主题 -->
-<page-meta page-style="overflow:hidden; background:#1A1208;" />
+<page-meta page-style="overflow:hidden; background:#FAFAF8;" />
 <view class="splash-page">
 
   <!-- 环境光 -->
@@ -39,7 +39,7 @@
 
   <!-- 底部版权 -->
   <view class="splash-footer">
-    <text class="footer-text">每天三分钟，精准获取所需</text>
+    <text class="footer-text">每天五分钟，精准获取所需</text>
   </view>
 
 </view>

pages/splash/index.wxss

@@ -1,9 +1,9 @@
-/* 启动页 — 暖棕沉浸主题，与播放器保持一致 */
+/* 启动页 — 深空蓝沉浸主题 */
 
 .splash-page {
   width: 100%;
   height: 100vh;
-  background: #1A1208;
+  background: #FAFAF8;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -20,7 +20,7 @@
   transform: translateX(-50%);
   width: 120vw;
   height: 60vh;
-  background: radial-gradient(ellipse at center, rgba(255,157,66,0.22) 0%, transparent 70%);
+  background: radial-gradient(ellipse at center, rgba(255,158,109,0.2) 0%, transparent 60%);
   pointer-events: none;
 }
 
@@ -49,7 +49,7 @@
 }
 .logo-icon {
   font-size: 120rpx;
-  filter: drop-shadow(0 16rpx 40rpx rgba(255,120,0,0.4));
+  filter: drop-shadow(0 16rpx 40rpx rgba(255,158,109,0.35));
   position: relative;
   z-index: 2;
 }
@@ -59,7 +59,7 @@
   position: absolute;
   inset: -20rpx;
   border-radius: 50%;
-  border: 3rpx solid rgba(255, 157, 66, 0.45);
+  border: 3rpx solid rgba(255, 158, 109, 0.35);
   animation: pulse-expand 2s ease-out infinite;
 }
 .pulse-ring-2 {
@@ -74,14 +74,14 @@
 .app-title {
   font-size: 64rpx;
   font-weight: 800;
-  color: rgba(255, 240, 210, 0.95);
+  color: #333333;
   letter-spacing: -2rpx;
   margin-bottom: 8rpx;
 }
 .app-sub {
   font-size: 22rpx;
   font-weight: 400;
-  color: rgba(255, 200, 120, 0.45);
+  color: #999999;
   letter-spacing: 6rpx;
   margin-bottom: 28rpx;
   text-transform: uppercase;
@@ -89,7 +89,7 @@
 .app-slogan {
   font-size: 26rpx;
   font-weight: 400;
-  color: rgba(255, 200, 120, 0.55);
+  color: #666666;
   letter-spacing: 3rpx;
 }
 
@@ -117,7 +117,7 @@
   width: 12rpx;
   height: 12rpx;
   border-radius: 50%;
-  background: rgba(255, 157, 66, 0.7);
+  background: rgba(255, 158, 109, 0.8);
   animation: dot-bounce 1.2s ease-in-out infinite alternate;
 }
 @keyframes dot-bounce {
@@ -128,12 +128,12 @@
 /* 成功状态 */
 .status-check {
   font-size: 32rpx;
-  color: #FF9D42;
+  color: #FF9E6D;
   font-weight: 700;
 }
 .status-ok {
   font-size: 26rpx;
-  color: rgba(255, 200, 120, 0.7);
+  color: #999999;
   font-weight: 500;
 }
 
@@ -147,6 +147,6 @@
 }
 .footer-text {
   font-size: 20rpx;
-  color: rgba(255, 200, 120, 0.2);
+  color: #CCCCCC;
   letter-spacing: 2rpx;
 }

pages/subscribe/index.wxml

@@ -23,7 +23,7 @@
       <view class="plan-top">
         <text class="plan-name">包月</text>
         <view class="plan-badge" wx:if="{{selectedPlan === 'monthly'}}">
-          <t-icon name="check-circle-filled" size="36rpx" color="#FF9D42" />
+          <t-icon name="check-circle-filled" size="36rpx" color="#FF9E6D" />
         </view>
       </view>
       <text class="plan-price">¥{{monthlyPrice}}</text>
@@ -41,7 +41,7 @@
         <text class="plan-name">包季</text>
         <t-tag wx:if="{{quarterlyPrice > 0 && monthlyPrice > 0}}" size="small" variant="filled" theme="success">省{{_quarterlySaving}}元</t-tag>
         <view class="plan-badge" wx:if="{{selectedPlan === 'quarterly'}}">
-          <t-icon name="check-circle-filled" size="36rpx" color="#FF9D42" />
+          <t-icon name="check-circle-filled" size="36rpx" color="#FF9E6D" />
         </view>
       </view>
       <text class="plan-price">¥{{quarterlyPrice}}</text>
@@ -60,7 +60,7 @@
         <text class="plan-name">包年</text>
         <t-tag wx:if="{{annualPrice > 0 && monthlyPrice > 0}}" size="small" variant="filled" theme="success">省{{_annualSaving}}元</t-tag>
         <view class="plan-badge" wx:if="{{selectedPlan === 'annual'}}">
-          <t-icon name="check-circle-filled" size="36rpx" color="#FF9D42" />
+          <t-icon name="check-circle-filled" size="36rpx" color="#FF9E6D" />
         </view>
       </view>
       <text class="plan-price">¥{{annualPrice}}</text>
@@ -71,15 +71,15 @@
   <!-- 权益说明 -->
   <view class="benefits">
     <view class="benefit-item">
-      <t-icon name="check" size="28rpx" color="#FF9D42" />
+      <t-icon name="check" size="28rpx" color="#FF9E6D" />
       <text>订阅后可无限收听该频道所有节目</text>
     </view>
     <view class="benefit-item">
-      <t-icon name="check" size="28rpx" color="#FF9D42" />
+      <t-icon name="check" size="28rpx" color="#FF9E6D" />
       <text>后台播放，边听边做其他事</text>
     </view>
     <view class="benefit-item">
-      <t-icon name="check" size="28rpx" color="#FF9D42" />
+      <t-icon name="check" size="28rpx" color="#FF9E6D" />
       <text>新节目第一时间推送通知</text>
     </view>
   </view>

pages/subscribe/index.wxss

@@ -9,7 +9,7 @@
 
 /* 顶部频道卡片 */
 .channel-card {
-  background: linear-gradient(135deg, #FF9D42, #FF7832);
+  background: linear-gradient(135deg, #FF9E6D, #FF7832);
   padding: 60rpx 40rpx 48rpx;
   display: flex;
   flex-direction: column;
@@ -54,21 +54,21 @@
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
 }
 .plan-card.selected {
-  border-color: #FF9D42;
+  border-color: #FF9E6D;
   background: #FFFAF5;
 }
 .plan-card.popular {
   border-color: #FFD580;
 }
 .plan-card.popular.selected {
-  border-color: #FF9D42;
+  border-color: #FF9E6D;
 }
 /* 最受欢迎标签 */
 .plan-hot-tag {
   position: absolute;
   top: -20rpx;
   left: 36rpx;
-  background: linear-gradient(135deg, #FF9D42, #FF7832);
+  background: linear-gradient(135deg, #FF9E6D, #FF7832);
   color: #FFF;
   font-size: 20rpx;
   font-weight: 700;
@@ -136,7 +136,7 @@
 .pay-label { font-size: 22rpx; color: #999; display: block; }
 .pay-price { font-size: 44rpx; font-weight: 800; color: #FF7832; line-height: 1; }
 .pay-btn {
-  background: linear-gradient(135deg, #FF9D42, #FF7832);
+  background: linear-gradient(135deg, #FF9E6D, #FF7832);
   color: #FFF;
   font-size: 30rpx;
   font-weight: 700;

pages/vip/index.js

@@ -77,20 +77,19 @@ Page({
             if (res.code === 200 && res.data) {
                 var cfg = res.data
                 // 后端单位：分 → 元
-                var price = cfg.discountedPrice > 0 ? (cfg.discountedPrice / 100).toFixed(2) : (cfg.price / 100).toFixed(2)
+                var originalPriceYuan = (cfg.price / 100).toFixed(2)
-                var originalPrice = cfg.price > 0 ? (cfg.price / 100).toFixed(2) : ''
                 var hasDiscount = cfg.discountedPrice > 0 && cfg.discountedPrice < cfg.price
+                var payPrice = hasDiscount ? (cfg.discountedPrice / 100).toFixed(2) : originalPriceYuan
                 self.setData({
-                    currentPrice: price,
+                    currentPrice: payPrice,
-                    vipPrice: price,
+                    vipPrice: payPrice,
-                    vipOriginalPrice: hasDiscount ? originalPrice : '',
+                    vipOriginalPrice: hasDiscount ? originalPriceYuan : '',
                     vipRemark: cfg.remark || ''
                 })
             }
         }).catch(function (err) {
             console.error('[VIP] 获取配置失败:', err)
-            // 容错：使用默认价格
+            self.setData({ currentPrice: '--', vipPrice: '--', vipOriginalPrice: '' })
-            self.setData({ currentPrice: '19.90', vipPrice: '19.90', vipOriginalPrice: '29.90' })
         })
     },
 
@@ -103,7 +102,7 @@ Page({
     /** 选择套餐 */
     selectPlan(e) {
         const plan = e.currentTarget.dataset.plan
-        let price = '19.9'
+        let price = this.data.vipPrice || '--'
         if (this.data.mode === 'channel') {
             const map = {
                 monthly: this.data.monthlyPrice,

pages/vip/index.wxml

@@ -82,17 +82,31 @@
           </view>
           <view class="benefits-grid">
             <view class="benefit-item">
-              <text class="benefit-check">✅</text>
+              <text class="benefit-check">🔓</text>
               <view class="benefit-info">
-                <text class="benefit-name">全频道特权</text>
+                <text class="benefit-name">全频道解锁</text>
                 <text class="benefit-desc">所有频道自由听</text>
               </view>
             </view>
             <view class="benefit-item">
               <text class="benefit-check">🎧</text>
               <view class="benefit-info">
-                <text class="benefit-name">纯净免广告</text>
+                <text class="benefit-name">免广告收听</text>
-                <text class="benefit-desc">收听无任何打扰</text>
+                <text class="benefit-desc">纯净无打扰体验</text>
+              </view>
+            </view>
+            <view class="benefit-item">
+              <text class="benefit-check">⭐</text>
+              <view class="benefit-info">
+                <text class="benefit-name">优先推送</text>
+                <text class="benefit-desc">新内容第一时间送达</text>
+              </view>
+            </view>
+            <view class="benefit-item">
+              <text class="benefit-check">💬</text>
+              <view class="benefit-info">
+                <text class="benefit-name">互动评论</text>
+                <text class="benefit-desc">与创作者直接交流</text>
               </view>
             </view>
           </view>
@@ -110,7 +124,7 @@
           <view wx:if="{{vipOriginalPrice}}" class="plan-badge">限时特惠</view>
           <view class="plan-info">
             <text class="plan-name">永久会员</text>
-            <text class="plan-desc">{{vipRemark || '一次购买，永久畅听全部频道'}}</text>
+            <text class="plan-desc">一次购买，永久畅听全部频道</text>
           </view>
           <view class="plan-price">
             <text class="price-amount"><text class="price-symbol">¥</text>{{vipPrice || currentPrice}}</text>
@@ -118,6 +132,11 @@
           </view>
         </view>
       </view>
+
+      <!-- VIP 提示（来自后端 remark） -->
+      <view wx:if="{{vipRemark}}" class="subscribe-disclaimer">
+        <text class="disclaimer-text">{{vipRemark}}</text>
+      </view>
     </block>
 
     <!-- ────── MODE: 频道订阅 ────── -->
@@ -211,6 +230,11 @@
           </view>
         </view>
       </view>
+
+      <!-- 订阅免责提示 -->
+      <view class="subscribe-disclaimer">
+        <text class="disclaimer-text">声音产品属于虚拟数字内容，订阅成功后不支持退款及转让。感谢你对原创声音的支持，愿这段旅程让你觉得物超所值。</text>
+      </view>
     </block>
 
   </scroll-view>
@@ -231,7 +255,7 @@
       block
       size="large"
       bind:tap="onPay"
-      style="--td-button-primary-bg-color: #FF9D42; --td-button-primary-active-bg-color: #E88A35;"
+      style="--td-button-primary-bg-color: #FF9E6D; --td-button-primary-active-bg-color: #E88A35;"
     >
       {{mode === 'channel' ? '立即订阅并支付' : '立即开通并支付'}}
     </t-button>

pages/vip/index.wxss

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: #FCFCFC;
+  background: var(--color-bg-page);
   overflow: hidden;
 }
 
@@ -312,7 +312,7 @@
   border-radius: 0 20rpx 0 20rpx;
 }
 .plan-badge-hot {
-  background: linear-gradient(135deg, #FF9D42, #FF7832);
+  background: linear-gradient(135deg, #FF9E6D, #FF7832);
   color: #FFF;
 }
 .plan-badge-save {
@@ -398,3 +398,18 @@
   border-radius: 4rpx;
   margin-left: 8rpx;
 }
+
+/* 订阅免责提示 */
+.subscribe-disclaimer {
+  margin: 32rpx 32rpx 24rpx;
+  padding: 24rpx 28rpx;
+  background: #F9F9F9;
+  border-radius: 16rpx;
+  border: 1rpx solid #F0F0F0;
+}
+.disclaimer-text {
+  font-size: 22rpx;
+  color: #B0B0B0;
+  line-height: 1.7;
+  letter-spacing: 0.5rpx;
+}

project.config.json

@@ -47,7 +47,7 @@
     "disableSWC": true
   },
   "compileType": "miniprogram",
-  "libVersion": "3.3.4",
+  "libVersion": "3.14.3",
   "appid": "wx52dfc635739a9c19",
   "projectname": "morning-radio-mp",
   "condition": {},

utils/api.js

@@ -231,6 +231,19 @@ function unlockChannel(channelId, type) {
     return post('/radio/subscription/unlock', { channelId, type })
 }
 
+/** 获取点赞列表 */
+function getLikeList(params) {
+    return post('/like/list', {
+        current: (params && params.current) || 1,
+        pageSize: (params && params.pageSize) || 30
+    })
+}
+
+/** 清空全部点赞 */
+function removeAllLikes() {
+    return get('/like/removeAll')
+}
+
 module.exports = {
     miniLogin,
     getLocation,
@@ -256,6 +269,8 @@ module.exports = {
     removeAllFavorites,
     getFavoriteList,
     toggleLike,
+    getLikeList,
+    removeAllLikes,
     addComment,
     deleteComment,
     getCommentList,

utils/audioManager.js

@@ -11,6 +11,7 @@ let bgAudioManager = null
 let appInstance = null
 let _switching = false   // 切换音频时的锁，防止 onStop 事件干扰
 let _ended = false       // 标记音频是否已自然播放完毕
+let _stopped = false     // 标记音频是否被系统停止（浮窗关闭等）
 
 /**
  * 初始化音频管理器
@@ -36,6 +37,7 @@ function init(app) {
         // 如果正在切换音频，不处理 onStop（新的 src 设置会触发旧的 onStop）
         if (_switching) return
 
+        _stopped = true   // 标记：音频被系统停止，下次播放需重新设置 src
         reportHistory()
         updatePlayState(false)
         appInstance.globalData.currentTime = 0
@@ -142,7 +144,8 @@ function playContent(content) {
 
     // 标记正在切换，防止旧音频的 onStop 干扰
     _switching = true
-    _ended = false  // 重置结束标记
+    _ended = false
+    _stopped = false  // 重置停止标记
 
     appInstance.globalData.activeContent = content
     appInstance.globalData.currentTime = 0
@@ -170,12 +173,13 @@ function togglePlay() {
     if (appInstance.globalData.isPlaying) {
         bgAudioManager.pause()
     } else {
-        // 音频已自然播放完毕，或 src 被系统回收 → 从头重新播放
+        // 音频已结束 / 被系统停止(浮窗关闭) / src 被回收 → 重新播放
         var srcEmpty = false
         try { srcEmpty = !bgAudioManager.src } catch (e) { srcEmpty = true }
 
-        if (_ended || srcEmpty) {
+        if (_ended || _stopped || srcEmpty) {
             _ended = false
+            _stopped = false
             playContent(appInstance.globalData.activeContent)
         } else {
             bgAudioManager.play()