feat: 样式调整

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,48 +33,81 @@
     </view>
   </view>
 
-  <!-- 列表区 -->
-  <view class="list-area">
+  <!-- 频道筛选 -->
+  <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>
 
-    <!-- 加载骨架 -->
-    <view wx:if="{{loading}}" class="skeleton-wrap">
-      <view wx:for="{{[1,2,3]}}" wx:key="*this" class="skeleton-item">
-        <view class="sk-icon"></view>
-        <view class="sk-lines">
-          <view class="sk-line sk-line-short"></view>
-          <view class="sk-line sk-line-long"></view>
-          <view class="sk-line sk-line-mid"></view>
+  <!-- 列表区 -->
+  <scroll-view
+    scroll-y
+    enhanced
+    show-scrollbar="{{false}}"
+    class="list-scroll"
+  >
+    <view class="list-area">
+
+      <!-- 加载骨架 -->
+      <view wx:if="{{loading}}" class="skeleton-wrap">
+        <view wx:for="{{[1,2,3]}}" wx:key="*this" class="skeleton-item">
+          <view class="sk-icon"></view>
+          <view class="sk-lines">
+            <view class="sk-line sk-line-short"></view>
+            <view class="sk-line sk-line-long"></view>
+            <view class="sk-line sk-line-mid"></view>
+          </view>
         </view>
       </view>
-    </view>
 
     <!-- 历史空状态 -->
     <view wx:elif="{{historyList.length === 0 && tab === 'history'}}" class="empty-state">
-      <text class="empty-icon">🎧</text>
-      <text class="empty-title">还没有收听记录</text>
-      <text class="empty-desc">去发现频道，开始你的第一段收听</text>
+      <view class="empty-icon-wrap">
+        <view class="empty-halo"></view>
+        <text class="empty-icon">🎧</text>
+      </view>
+      <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">
-      <text class="empty-icon">🔖</text>
-      <text class="empty-title">还没有收藏内容</text>
-      <text class="empty-desc">听到喜欢的节目，点击 ♡ 收藏它</text>
+      <view class="empty-icon-wrap">
+        <view class="empty-halo favored-halo"></view>
+        <text class="empty-icon">🔖</text>
+      </view>
+      <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 style="height: 200rpx;"></view>
+    </view> <!-- /list-area -->
+    <view class="player-bottom-spacer"></view>
+  </scroll-view>
 
   <global-player />
 </view>