lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-05-17 18:47:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 调整历史/收藏/列表/用户页面

Browse Source
This commit is contained in:
alger
2026-02-04 20:16:36 +08:00
parent 83a6e9381c
commit 423167b9b3
6 changed files with 756 additions and 819 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/favorite/index.vue
+108 -227
View File
@@ -1,79 +1,110 @@
<template>
<div v-if="isComponent ? favoriteSongs.length : true" class="favorite-page">
<div class="favorite-header" :class="setAnimationClass('animate__fadeInLeft')">
<div class="favorite-header-left">
<h2>{{ t('favorite.title') }}</h2>
<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 v-if="isComponent ? favoriteSongs.length : true" class="favorite-page h-full flex flex-col">
<!-- Header Section -->
<div
class="flex items-center justify-between px-6 py-4 flex-shrink-0"
:class="setAnimationClass('animate__fadeInLeft')"
>
<div class="flex items-center gap-4">
<div>
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
{{ t('favorite.title') }}
</h2>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
{{ t('favorite.count', { count: favoriteList.length }) }}
</p>
</div>
<n-button
v-if="!isSelecting"
secondary
type="primary"
size="small"
class="select-btn"
@click="startSelect"
</div>
<div v-if="!isComponent && isElectron" class="flex items-center gap-3">
<template v-if="!isSelecting">
<!-- Sort Controls -->
<div class="flex items-center bg-gray-100 dark:bg-neutral-800 rounded-full p-1 h-9">
<button
v-for="isDesc in [true, false]"
:key="String(isDesc)"
class="px-3 h-full rounded-full text-xs font-medium transition-all duration-300 flex items-center gap-1"
:class="
isDescending === isDesc
? 'bg-white dark:bg-neutral-700 text-gray-900 dark:text-white shadow-sm'
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
"
@click="toggleSort(isDesc)"
>
<i class="text-sm" :class="isDesc ? 'ri-sort-desc' : 'ri-sort-asc'"></i>
{{ isDesc ? t('favorite.descending') : t('favorite.ascending') }}
</button>
</div>
<button
class="h-9 px-4 rounded-full bg-primary/10 hover:bg-primary text-primary hover:text-white text-xs font-medium transition-all duration-300 flex items-center gap-1.5"
@click="startSelect"
>
<i class="ri-checkbox-multiple-line text-sm"></i>
{{ t('favorite.batchDownload') }}
</button>
</template>
<!-- Selection Controls -->
<div
v-else
class="flex items-center gap-3 bg-white dark:bg-neutral-800 shadow-sm rounded-full px-4 py-1.5 border border-gray-100 dark:border-neutral-700 h-9"
>
<template #icon>
<i class="iconfont ri-checkbox-multiple-line"></i>
</template>
{{ t('favorite.batchDownload') }}
</n-button>
<div v-else class="select-controls">
<n-checkbox
class="select-all-checkbox"
:checked="isAllSelected"
:indeterminate="isIndeterminate"
size="small"
@update:checked="handleSelectAll"
>
{{ t('common.selectAll') }}
<span class="text-xs">{{ t('common.selectAll') }}</span>
</n-checkbox>
<n-button-group class="operation-btns">
<n-button
type="primary"
size="small"
:loading="isDownloading"
<div class="h-3 w-px bg-gray-200 dark:bg-neutral-700 mx-1"></div>
<div class="flex items-center gap-2">
<button
class="h-6 px-3 rounded-full bg-primary text-white text-xs font-medium hover:bg-primary-dark transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
:disabled="selectedSongs.length === 0"
class="download-btn"
@click="handleBatchDownload"
>
<template #icon>
<i class="iconfont ri-download-line"></i>
</template>
<i class="ri-download-line"></i>
{{ t('favorite.download', { count: selectedSongs.length }) }}
</n-button>
<n-button size="small" class="cancel-btn" @click="cancelSelect">
</button>
<button
class="h-6 px-3 rounded-full bg-gray-100 dark:bg-neutral-700 text-gray-600 dark:text-gray-300 text-xs font-medium hover:bg-gray-200 dark:hover:bg-neutral-600 transition-colors"
@click="cancelSelect"
>
{{ t('common.cancel') }}
</n-button>
</n-button-group>
</button>
</div>
</div>
</div>
</div>
<div class="favorite-main" :class="setAnimationClass('animate__bounceInRight')">
<n-scrollbar ref="scrollbarRef" class="favorite-content" @scroll="handleScroll">
<div v-if="favoriteList.length === 0" class="empty-tip">
<n-empty :description="t('favorite.emptyTip')" />
<!-- Main Content -->
<div class="flex-grow min-h-0 px-2" :class="setAnimationClass('animate__bounceInRight')">
<n-scrollbar ref="scrollbarRef" class="h-full pr-4" @scroll="handleScroll">
<div
v-if="favoriteList.length === 0"
class="h-full flex flex-col items-center justify-center text-gray-400"
>
<div
class="w-24 h-24 rounded-full bg-gray-100 dark:bg-neutral-800 flex items-center justify-center mb-4"
>
<i class="ri-heart-line text-4xl text-gray-300 dark:text-gray-600"></i>
</div>
<p>{{ t('favorite.emptyTip') }}</p>
</div>
<div v-else class="favorite-list" :class="{ 'max-w-[400px]': isComponent }">
<div v-else class="space-y-1 pb-24" :class="{ 'max-w-[400px]': isComponent }">
<song-item
v-for="(song, index) in favoriteSongs"
:key="song.id"
:item="song"
:favorite="false"
class="favorite-list-item"
:class="setAnimationClass('animate__bounceInLeft')"
class="rounded-xl hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
:class="[
setAnimationClass('animate__bounceInLeft'),
{ '!bg-primary/10': selectedSongs.includes(song.id as number) }
]"
:style="getItemAnimationDelay(index)"
:selectable="isSelecting"
:selected="selectedSongs.includes(song.id as number)"
@@ -81,18 +112,33 @@
@select="handleSelect"
/>
<div v-if="isComponent" class="favorite-list-more text-center">
<n-button text type="primary" @click="handleMore">{{ t('common.viewMore') }}</n-button>
<div v-if="isComponent" class="pt-4 text-center">
<n-button text type="primary" @click="handleMore">
{{ t('common.viewMore') }} <i class="ri-arrow-right-s-line ml-1"></i>
</n-button>
</div>
<div v-if="loading" class="loading-wrapper">
<n-spin size="large" />
<!-- Loading Skeletons -->
<div v-if="loading" class="space-y-2 pt-2">
<div
v-for="i in 5"
:key="i"
class="flex items-center gap-4 rounded-xl p-2 animate-pulse"
>
<div class="h-12 w-12 rounded-xl bg-gray-200 dark:bg-neutral-800"></div>
<div class="flex-1 space-y-2">
<div class="h-4 w-1/3 rounded bg-gray-200 dark:bg-neutral-800"></div>
<div class="h-3 w-1/4 rounded bg-gray-200 dark:bg-neutral-800"></div>
</div>
</div>
</div>
<div v-if="noMore" class="no-more-tip">{{ t('common.noMore') }}</div>
<div v-if="noMore" class="text-center py-8 text-sm text-gray-400 dark:text-gray-500">
{{ t('common.noMore') }}
</div>
</div>
<play-bottom />
</n-scrollbar>
<play-bottom />
</div>
</div>
</template>
@@ -102,7 +148,6 @@ import { computed, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { processBilibiliVideos } from '@/api/bilibili';
import { getMusicDetail } from '@/api/music';
import PlayBottom from '@/components/common/PlayBottom.vue';
import SongItem from '@/components/common/SongItem.vue';
@@ -117,12 +162,11 @@ const favoriteList = computed(() => playerStore.favoriteList);
const favoriteSongs = ref<SongResult[]>([]);
const loading = ref(false);
const noMore = ref(false);
const scrollbarRef = ref();
// 多选相关
const isSelecting = ref(false);
const selectedSongs = ref<number[]>([]);
const { isDownloading, batchDownloadMusic } = useDownload();
const { batchDownloadMusic } = useDownload();
// 开始多选
const startSelect = () => {
@@ -215,8 +259,6 @@ const getFavoriteSongs = async () => {
// 分离网易云音乐ID和B站视频ID
const musicIds = currentIds.filter((id) => typeof id === 'number') as number[];
// B站ID可能是字符串格式（包含"--"）或特定数字ID，如113911642789603
const bilibiliIds = currentIds.filter((id) => typeof id === 'string');
// 处理网易云音乐数据
let neteaseSongs: SongResult[] = [];
@@ -231,12 +273,8 @@ const getFavoriteSongs = async () => {
}
}
// 处理B站视频数据 - 使用公用方法
const bilibiliSongs = await processBilibiliVideos(bilibiliIds);
console.log('获取数据统计:', {
neteaseSongs: neteaseSongs.length,
bilibiliSongs: bilibiliSongs.length
neteaseSongs: neteaseSongs.length
});
// 合并数据，保持原有顺序
@@ -244,12 +282,6 @@ const getFavoriteSongs = async () => {
.map((id) => {
const strId = String(id);
// 查找B站视频
if (typeof id === 'string') {
const found = bilibiliSongs.find((song) => String(song.id) === strId);
if (found) return found;
}
// 查找网易云音乐
const found = neteaseSongs.find((song) => String(song.id) === strId);
return found;
@@ -343,156 +375,5 @@ const handleSelectAll = (checked: boolean) => {
</script>
<style lang="scss" scoped>
.favorite-page {
@apply h-full flex flex-col pt-2;
@apply bg-light dark:bg-black;
.favorite-header {
@apply flex items-center justify-between flex-shrink-0 px-4 pb-2;
&-left {
@apply flex items-center gap-4;
h2 {
@apply text-xl font-bold;
@apply text-gray-900 dark:text-white;
}
.favorite-count {
@apply text-gray-500 dark:text-gray-400 text-sm;
}
}
&-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-500 text-white dark:text-gray-100;
@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;
@apply hover:bg-primary hover:text-white;
@apply dark:border-gray-600;
.iconfont {
@apply mr-1 text-lg;
}
}
.select-controls {
@apply flex items-center gap-3;
@apply bg-gray-50 dark:bg-gray-800;
@apply rounded-full px-3 py-1;
@apply border border-gray-200 dark:border-gray-700;
@apply transition-all duration-300;
.select-all-checkbox {
@apply text-sm text-gray-900 dark:text-gray-200;
}
.operation-btns {
@apply flex items-center gap-2 ml-2;
.download-btn {
@apply rounded-full px-4 h-7;
@apply bg-primary text-white;
@apply hover:bg-primary-dark;
@apply disabled:opacity-50 disabled:cursor-not-allowed;
.iconfont {
@apply mr-1 text-lg;
}
}
.cancel-btn {
@apply rounded-full px-4 h-7;
@apply text-gray-600 dark:text-gray-300;
@apply hover:bg-gray-100 dark:hover:bg-gray-700;
@apply border-gray-300 dark:border-gray-600;
}
}
}
}
}
.favorite-main {
@apply flex flex-col flex-grow min-h-0;
.favorite-content {
@apply flex-grow min-h-0;
.empty-tip {
@apply h-full flex items-center justify-center;
@apply text-gray-500 dark:text-gray-400;
}
.favorite-list {
@apply space-y-2 pb-4 px-4;
&-item {
@apply bg-light-100 dark:bg-dark-100 hover:bg-light-200 dark:hover:bg-dark-200 transition-all;
}
&-more {
@apply mt-4;
.n-button {
@apply text-green-500 hover:text-green-600;
}
}
}
}
}
}
.loading-wrapper {
@apply flex justify-center items-center py-20;
}
.no-more-tip {
@apply text-center py-4 text-sm;
@apply text-gray-500 dark:text-gray-400;
}
.mobile {
.favorite-page {
@apply p-4 m-0;
.favorite-header {
@apply mb-4;
h2 {
@apply text-xl;
}
}
}
}
/* Scoped styles kept minimal as we use Tailwind classes */
</style>