feat: 样式调整

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'}};">
-              <text class="icon-emoji">{{item.cover || '📻'}}</text>
+            <view class="channel-icon {{item._isDefaultCover ? 'initial-avatar' : ''}}" style="background: {{item.bgColor || '#FFE8CC'}};">
+              <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 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 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="34rpx" color="{{item._isThisPlaying ? '#FF9E6D' : item.bgColor || '#FF9E6D'}}" />
               </view>
-              <t-icon wx:else name="sound" size="36rpx" color="{{item._isThisPlaying ? '#FF9D42' : '#BBB'}}" />
             </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:else name="play" size="32rpx" color="{{item._isThisPlaying ? '#FFF' : '#555'}}" />
+                <t-icon wx:if="{{item._isThisPlaying && isPlaying}}" name="pause" size="36rpx" color="#FFF" />
+                <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'}};">
-                <text class="free-emoji">{{item.cover || '📻'}}</text>
+              <view class="free-icon {{item._isDefaultCover ? 'initial-avatar' : ''}}" style="background: {{item.bgColor || '#FFE8CC'}};">
+                <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);
-  border: 1rpx solid #FFDFA0;
+  background: linear-gradient(135deg, #FFF9F0, #FFF3E0);
+  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%);
-  border: 1rpx solid rgba(255, 157, 66, 0.15);
+  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.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;
-  height: 48rpx;
+  display: flex;
+  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;
-  height: 68rpx;
+  width: 72rpx;
+  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%);
-  box-shadow: 0 8rpx 24rpx rgba(255, 120, 50, 0.4);
+  background: linear-gradient(135deg, #FF9E6D 0%, #FF7832 100%);
+  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;