lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-15 07:20:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: 将收藏与历史合并

Browse Source
This commit is contained in:
alger
2024-12-15 15:12:45 +08:00
parent 3b1470f28f
commit 3d2f6a2330
5 changed files with 184 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/router/home.ts
View File

@@ -44,24 +44,25 @@ const layoutRouter = [
},
component: () => import('@/views/mv/index.vue'),
},
// {
// path: '/history',
// name: 'history',
// meta: {
// title: '历史',
// icon: 'icon-a-TicketStar',
// keepAlive: true,
// },
// component: () => import('@/views/history/index.vue'),
// },
{
path: '/history',
name: 'history',
component: () => import('@/views/historyAndFavorite/index.vue'),
meta: {
title: '历史',
title: '我的收藏和历史',
icon: 'icon-a-TicketStar',
keepAlive: true,
},
component: () => import('@/views/history/index.vue'),
},
{
path: '/favorite',
name: 'favorite',
component: () => import('@/views/favorite/index.vue'),
meta: {
title: '我的收藏',
icon: 'icon-likefill',
},
},
{
path: '/user',

115
src/views/favorite/index.vue
View File

@@ -1,45 +1,35 @@
<template>
<div v-if="isComponent ? favoriteSongs.length : true" class="favorite-page">
<div class="favorite-header" :class="setAnimationClass('animate__fadeInRight')">
<div class="favorite-header" :class="setAnimationClass('animate__fadeInLeft')">
<h2>我的收藏</h2>
<div class="favorite-count">共 {{ favoriteList.length }} 首</div>
</div>
<div class="favorite-main" :class="setAnimationClass('animate__bounceInRight')">
<n-scrollbar class="favorite-content">
<n-scrollbar ref="scrollbarRef" class="favorite-content" @scroll="handleScroll">
<div v-if="favoriteList.length === 0" class="empty-tip">
<n-empty description="还没有收藏歌曲" />
</div>
<div v-else class="favorite-list">
<div v-if="loading" class="loading-wrapper">
<n-spin size="large" />
</div>
<template v-else>
<song-item
v-for="(song, index) in favoriteSongs"
:key="song.id"
:item="song"
:favorite="!isComponent"
:class="setAnimationClass('animate__bounceInUp')"
:style="getItemAnimationDelay(index)"
@play="handlePlay"
/>
</template>
<song-item
v-for="(song, index) in favoriteSongs"
:key="song.id"
:item="song"
:favorite="!isComponent"
:class="setAnimationClass('animate__bounceInLeft')"
:style="getItemAnimationDelay(index)"
@play="handlePlay"
/>
<div v-if="isComponent" class="favorite-list-more text-center">
<n-button text type="primary" @click="handleMore">查看更多</n-button>
</div>
<div v-if="loading" class="loading-wrapper">
<n-spin size="large" />
</div>
<div v-if="noMore" class="no-more-tip">没有更多了</div>
</div>
</n-scrollbar>
<div v-if="favoriteList.length > 0 && !loading && !isComponent" class="pagination-wrapper">
<n-pagination
v-model:page="currentPage"
:page-size="pageSize"
:item-count="favoriteList.length"
:page-slot="5"
size="small"
@update:page="handlePageChange"
/>
</div>
</div>
</div>
</template>
@@ -58,12 +48,14 @@ const store = useStore();
const favoriteList = computed(() => store.state.favoriteList);
const favoriteSongs = ref<SongResult[]>([]);
const loading = ref(false);
const noMore = ref(false);
const scrollbarRef = ref();
// 分页相关
// 无限滚动相关
const pageSize = 16;
const currentPage = ref(1);
defineProps({
const props = defineProps({
isComponent: {
type: Boolean,
default: false,
@@ -72,7 +64,6 @@ defineProps({
// 获取当前页的收藏歌曲ID
const getCurrentPageIds = () => {
// 反转列表顺序，最新收藏的在前面
const reversedList = [...favoriteList.value];
const startIndex = (currentPage.value - 1) * pageSize;
const endIndex = startIndex + pageSize;
@@ -86,17 +77,29 @@ const getFavoriteSongs = async () => {
return;
}
if (props.isComponent && favoriteSongs.value.length >= 16) {
return;
}
loading.value = true;
try {
const currentIds = getCurrentPageIds();
const res = await getMusicDetail(currentIds);
if (res.data.songs) {
favoriteSongs.value = res.data.songs.map((song: SongResult) => {
return {
...song,
picUrl: song.al?.picUrl || '',
};
});
const newSongs = res.data.songs.map((song: SongResult) => ({
...song,
picUrl: song.al?.picUrl || '',
}));
// 追加新数据而不是替换
if (currentPage.value === 1) {
favoriteSongs.value = newSongs;
} else {
favoriteSongs.value = [...favoriteSongs.value, ...newSongs];
}
// 判断是否还有更多数据
noMore.value = favoriteSongs.value.length >= favoriteList.value.length;
}
} catch (error) {
console.error('获取收藏歌曲失败:', error);
@@ -105,9 +108,15 @@ const getFavoriteSongs = async () => {
}
};
// 处理页码变化
const handlePageChange = () => {
getFavoriteSongs();
// 处理滚动事件
const handleScroll = (e: any) => {
const { scrollTop, scrollHeight, offsetHeight } = e.target;
const threshold = 100; // 距离底部多少像素时加载更多
if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
currentPage.value++;
getFavoriteSongs();
}
};
onMounted(() => {
@@ -119,6 +128,7 @@ watch(
favoriteList,
() => {
currentPage.value = 1;
noMore.value = false;
getFavoriteSongs();
},
{ deep: true, immediate: true },
@@ -129,8 +139,7 @@ const handlePlay = () => {
};
const getItemAnimationDelay = (index: number) => {
const currentPageIndex = index % pageSize;
return setAnimationDelay(currentPageIndex, 30);
return setAnimationDelay(index, 30);
};
const router = useRouter();
@@ -141,13 +150,13 @@ const handleMore = () => {
<style lang="scss" scoped>
.favorite-page {
@apply h-full flex flex-col p-6;
@apply h-full flex flex-col pt-2;
.favorite-header {
@apply flex items-center justify-between mb-6 flex-shrink-0;
@apply flex items-center justify-between flex-shrink-0 px-4;
h2 {
@apply text-2xl font-bold;
@apply text-xl font-bold pb-2;
}
.favorite-count {
@@ -166,7 +175,7 @@ const handleMore = () => {
}
.favorite-list {
@apply space-y-2 pb-4;
@apply space-y-2 pb-4 px-4;
}
}
}
@@ -176,20 +185,8 @@ const handleMore = () => {
@apply flex justify-center items-center py-20;
}
.pagination-wrapper {
@apply flex justify-center py-4 flex-shrink-0;
:deep(.n-pagination) {
@apply bg-gray-800 rounded-full px-4 py-1;
.n-pagination-item {
@apply text-gray-300 hover:text-white;
&--active {
@apply text-green-500;
}
}
}
.no-more-tip {
@apply text-center text-gray-400 py-4 text-sm;
}
.mobile {

107
src/views/history/index.vue
View File

@@ -1,32 +1,41 @@
<template>
<div class="history-page">
<div class="title">播放历史</div>
<n-scrollbar :size="100">
<div class="title" :class="setAnimationClass('animate__fadeInRight')">播放历史</div>
<n-scrollbar ref="scrollbarRef" :size="100" @scroll="handleScroll">
<div class="history-list-content" :class="setAnimationClass('animate__bounceInLeft')">
<div
v-for="(item, index) in musicList"
v-for="(item, index) in displayList"
:key="item.id"
class="history-item"
:class="setAnimationClass('animate__bounceIn')"
:class="setAnimationClass('animate__bounceInRight')"
:style="setAnimationDelay(index, 30)"
>
<song-item class="history-item-content" :item="item" list @play="handlePlay" />
<song-item class="history-item-content" :item="item" @play="handlePlay" />
<div class="history-item-count min-w-[60px]">
{{ item.count }}
</div>
<div class="history-item-delete">
<i class="iconfont icon-close" @click="delMusic(item)"></i>
<i class="iconfont icon-close" @click="handleDelMusic(item)"></i>
</div>
</div>
<div v-if="loading" class="loading-wrapper">
<n-spin size="large" />
</div>
<div v-if="noMore" class="no-more-tip">没有更多了</div>
</div>
</n-scrollbar>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { getMusicDetail } from '@/api/music';
import { useMusicHistory } from '@/hooks/MusicHistoryHook';
import type { SongResult } from '@/type/music';
import { setAnimationClass, setAnimationDelay } from '@/utils';
defineOptions({
@@ -35,9 +44,81 @@ defineOptions({
const store = useStore();
const { delMusic, musicList } = useMusicHistory();
const scrollbarRef = ref();
const loading = ref(false);
const noMore = ref(false);
const displayList = ref<SongResult[]>([]);
// 无限滚动相关配置
const pageSize = 20;
const currentPage = ref(1);
// 获取当前页的音乐详情
const getHistorySongs = async () => {
if (musicList.value.length === 0) {
displayList.value = [];
return;
}
loading.value = true;
try {
const startIndex = (currentPage.value - 1) * pageSize;
const endIndex = startIndex + pageSize;
const currentPageItems = musicList.value.slice(startIndex, endIndex);
const currentIds = currentPageItems.map((item) => item.id);
const res = await getMusicDetail(currentIds);
if (res.data.songs) {
const newSongs = res.data.songs.map((song: SongResult) => {
const historyItem = currentPageItems.find((item) => item.id === song.id);
return {
...song,
picUrl: song.al?.picUrl || '',
count: historyItem?.count || 0,
};
});
if (currentPage.value === 1) {
displayList.value = newSongs;
} else {
displayList.value = [...displayList.value, ...newSongs];
}
noMore.value = displayList.value.length >= musicList.value.length;
}
} catch (error) {
console.error('获取历史记录失败:', error);
} finally {
loading.value = false;
}
};
// 处理滚动事件
const handleScroll = (e: any) => {
const { scrollTop, scrollHeight, offsetHeight } = e.target;
const threshold = 100; // 距离底部多少像素时加载更多
if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
currentPage.value++;
getHistorySongs();
}
};
// 播放全部
const handlePlay = () => {
store.commit('setPlayList', musicList.value);
store.commit('setPlayList', displayList.value);
};
onMounted(() => {
getHistorySongs();
});
// 重写删除方法，需要同时更新 displayList
const handleDelMusic = async (item: SongResult) => {
delMusic(item);
musicList.value = musicList.value.filter((music) => music.id !== item.id);
displayList.value = displayList.value.filter((music) => music.id !== item.id);
};
</script>
@@ -45,11 +126,11 @@ const handlePlay = () => {
.history-page {
@apply h-full w-full pt-2;
.title {
@apply pl-4 text-xl font-bold;
@apply pl-4 text-xl font-bold pb-2 px-4;
}
.history-list-content {
@apply px-4 mt-2 pb-28;
@apply mt-2 pb-28 px-4;
.history-item {
@apply flex items-center justify-between;
&-content {
@@ -64,4 +145,12 @@ const handlePlay = () => {
}
}
}
.loading-wrapper {
@apply flex justify-center items-center py-8;
}
.no-more-tip {
@apply text-center text-gray-400 py-4 text-sm;
}
</style>

13
src/views/historyAndFavorite/index.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="flex gap-4 h-full p-4">
<favorite class="flex-1 bg-[#0d0d0d] border border-[#374151] rounded-2xl overflow-hidden" />
<history class="flex-1 bg-[#0d0d0d] border border-[#374151] rounded-2xl overflow-hidden" />
</div>
</template>
<script setup lang="ts">
import Favorite from '@/views/favorite/index.vue';
import History from '@/views/history/index.vue';
</script>
<style scoped></style>

7
src/views/home/index.vue
View File

@@ -47,10 +47,13 @@ defineOptions({
:deep(.favorite-page) {
@apply p-0 mx-4 h-[300px];
.favorite-header {
@apply mb-0;
@apply mb-0 px-0 !important;
h2 {
@apply text-lg font-bold mb-4;
@apply text-lg font-bold;
}
}
.favorite-list {
@apply px-0 !important;
}
}
</style>