✨ feat: 收藏列表添加升序降序排列

src/i18n/lang/en-US/favorite.ts

@@ -11,5 +11,7 @@ export default {
   downloadSuccess: 'Download completed',
   downloadFailed: 'Download failed',
   downloading: 'Downloading, please wait...',
-  selectSongsFirst: 'Please select songs to download first'
+  selectSongsFirst: 'Please select songs to download first',
+  descending: 'Descending',
+  ascending: 'Ascending'
 };

src/i18n/lang/zh-CN/favorite.ts

@@ -7,5 +7,7 @@ export default {
   downloadSuccess: '下载完成',
   downloadFailed: '下载失败',
   downloading: '正在下载中，请稍候...',
-  selectSongsFirst: '请先选择要下载的歌曲'
+  selectSongsFirst: '请先选择要下载的歌曲',
+  descending: '降',
+  ascending: '升'
 };

src/renderer/views/favorite/index.vue

@@ -6,6 +6,26 @@
           <div class="favorite-count">{{ t('favorite.count', { count: favoriteList.length }) }}</div>
         </div>
         <div v-if="!isComponent && isElectron" class="favorite-header-right">
+          <div class="sort-controls" v-if="!isSelecting">
+            <div class="sort-buttons">
+              <div 
+                class="sort-button" 
+                :class="{ active: isDescending }"
+                @click="toggleSort(true)"
+              >
+                <i class="iconfont ri-sort-desc"></i>
+                {{ t('favorite.descending') }}
+              </div>
+              <div 
+                class="sort-button" 
+                :class="{ active: !isDescending }"
+                @click="toggleSort(false)"
+              >
+                <i class="iconfont ri-sort-asc"></i>
+                {{ t('favorite.ascending') }}
+              </div>
+            </div>
+          </div>
           <n-button
             v-if="!isSelecting"
             secondary
@@ -217,6 +237,19 @@ const handleBatchDownload = async () => {
     }
   };
 
+  // 排序相关
+  const isDescending = ref(true); // 默认倒序显示
+
+  // 切换排序方式
+  const toggleSort = (descending: boolean) => {
+    if (isDescending.value === descending) return;
+    isDescending.value = descending;
+    currentPage.value = 1;
+    favoriteSongs.value = [];
+    noMore.value = false;
+    getFavoriteSongs();
+  };
+
   // 无限滚动相关
   const pageSize = 100;
   const currentPage = ref(1);
@@ -230,10 +263,17 @@ const props = defineProps({
 
   // 获取当前页的收藏歌曲ID
   const getCurrentPageIds = () => {
+    let ids = [...favoriteList.value]; // 复制一份以免修改原数组
+    
+    // 根据排序方式调整顺序
+    if (isDescending.value) {
+      ids = ids.reverse(); // 倒序，最新收藏的在前面
+    }
+    
     const startIndex = (currentPage.value - 1) * pageSize;
     const endIndex = startIndex + pageSize;
     // 返回原始ID，不进行类型转换
-  return favoriteList.value.slice(startIndex, endIndex);
+    return ids.slice(startIndex, endIndex);
   };
 
   // 获取收藏歌曲详情
@@ -451,8 +491,40 @@ const handleSelectAll = (checked: boolean) => {
       }
 
       &-right {
+        @apply flex items-center gap-3;
+
+        .sort-controls {
           @apply flex items-center;
           
+          .sort-buttons {
+            @apply flex items-center bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden;
+            @apply border border-gray-200 dark:border-gray-700;
+            
+            .sort-button {
+              @apply flex items-center py-1 px-3 text-sm cursor-pointer;
+              @apply text-gray-600 dark:text-gray-400;
+              @apply transition-all duration-300;
+              
+              &:first-child {
+                @apply border-r border-gray-200 dark:border-gray-700;
+              }
+              
+              .iconfont {
+                @apply mr-1 text-base;
+              }
+              
+              &.active {
+                @apply bg-green-400 text-primary dark:text-gray-200;
+                @apply font-medium;
+              }
+              
+              &:hover:not(.active) {
+                @apply bg-gray-200 dark:bg-gray-700;
+              }
+            }
+          }
+        }
+
         .select-btn {
           @apply rounded-full px-4 h-8;
           @apply transition-all duration-300 ease-in-out;