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

refactor: 更新 eslint 和 prettier 配置 格式化代码

Browse Source
This commit is contained in:
alger
2025-07-23 23:54:35 +08:00
parent d1f5c8af84
commit c08c2cbf19
134 changed files with 3887 additions and 3301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/artist/detail.vue
+88 -56
View File
@@ -34,7 +34,7 @@
</template>
{{ t('comp.musicList.playAll') }}
</n-tooltip>
<n-tooltip placement="bottom" trigger="hover">
<template #trigger>
<div class="action-button hover-green" @click="addToPlaylist">
@@ -44,20 +44,27 @@
{{ t('comp.musicList.addToPlaylist') }}
</n-tooltip>
</div>
<div class="toolbar-right">
<!-- 布局切换按钮 -->
<div class="layout-toggle" v-if="!isMobile">
<n-tooltip placement="bottom" trigger="hover">
<template #trigger>
<div class="toggle-button hover-green" @click="toggleLayout">
<i class="icon iconfont" :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"></i>
<i
class="icon iconfont"
:class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"
></i>
</div>
</template>
{{ isCompactLayout ? t('comp.musicList.switchToNormal') : t('comp.musicList.switchToCompact') }}
{{
isCompactLayout
? t('comp.musicList.switchToNormal')
: t('comp.musicList.switchToCompact')
}}
</n-tooltip>
</div>
<!-- 搜索框 -->
<div class="search-container" :class="{ 'search-expanded': isSearchVisible }">
<template v-if="isSearchVisible">
@@ -73,7 +80,10 @@
<i class="icon iconfont ri-search-line text-sm"></i>
</template>
<template #suffix>
<i class="icon iconfont ri-close-line text-sm cursor-pointer" @click="closeSearch"></i>
<i
class="icon iconfont ri-close-line text-sm cursor-pointer"
@click="closeSearch"
></i>
</template>
</n-input>
</template>
@@ -90,13 +100,13 @@
</div>
</div>
</div>
<div class="songs-list">
<div class="song-list-content">
<div v-if="filteredSongs.length === 0 && searchKeyword" class="no-result">
{{ t('comp.musicList.noSearchResults') }}
</div>
<!-- 替换原来的 v-for 循环为虚拟列表 -->
<n-virtual-list
ref="songListRef"
@@ -122,9 +132,13 @@
</div>
</template>
</n-virtual-list>
<div v-if="songLoading" class="loading-more">{{ t('common.loading') }}</div>
<div v-else-if="songPage.hasMore" ref="songsLoadMoreRef" class="load-more-trigger"></div>
<div
v-else-if="songPage.hasMore"
ref="songsLoadMoreRef"
class="load-more-trigger"
></div>
</div>
</div>
</n-tab-pane>
@@ -146,7 +160,11 @@
}"
/>
<div v-if="albumLoading" class="loading-more">{{ t('common.loading') }}</div>
<div v-else-if="albumPage.hasMore" ref="albumsLoadMoreRef" class="load-more-trigger"></div>
<div
v-else-if="albumPage.hasMore"
ref="albumsLoadMoreRef"
class="load-more-trigger"
></div>
</div>
</div>
</n-tab-pane>
@@ -164,11 +182,20 @@
<script setup lang="ts">
import { useDateFormat } from '@vueuse/core';
import { computed, onMounted, onUnmounted, ref, watch, nextTick, onActivated, onDeactivated } from 'vue';
import { useMessage } from 'naive-ui';
import PinyinMatch from 'pinyin-match';
import {
computed,
nextTick,
onActivated,
onDeactivated,
onMounted,
onUnmounted,
ref,
watch
} from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import PinyinMatch from 'pinyin-match';
import { useMessage } from 'naive-ui';
import { getArtistAlbums, getArtistDetail, getArtistTopSongs } from '@/api/artist';
import { getMusicDetail } from '@/api/music';
@@ -232,7 +259,9 @@ const getCacheKey = (id: string | number) => `artist_${id}`;
// 搜索和布局相关
const searchKeyword = ref('');
const isSearchVisible = ref(false);
const isCompactLayout = ref(isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact');
const isCompactLayout = ref(
isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact'
);
// 加载歌手信息
const loadArtistInfo = async () => {
@@ -261,7 +290,7 @@ const loadArtistInfo = async () => {
// 重置分页并加载初始数据
resetPagination();
await Promise.all([loadSongs(), loadAlbums()]);
// 保存到缓存
artistDataCache.set(cacheKey, {
artistInfo: artistInfo.value,
@@ -439,46 +468,48 @@ const toggleLayout = () => {
// 播放全部
const handlePlayAll = () => {
if (filteredSongs.value.length === 0) return;
playerStore.setPlayList(filteredSongs.value.map(song => ({
...song,
picUrl: song.al.picUrl
})));
playerStore.setPlayList(
filteredSongs.value.map((song) => ({
...song,
picUrl: song.al.picUrl
}))
);
// 开始播放第一首
playerStore.setPlay(filteredSongs.value[0]);
message.success(t('comp.musicList.playAll'));
};
// 添加到播放列表
const addToPlaylist = () => {
if (filteredSongs.value.length === 0) return;
// 获取当前播放列表
const currentList = playerStore.playList;
// 添加歌曲到播放列表(避免重复添加)
const newSongs = filteredSongs.value.filter(song =>
!currentList.some(item => item.id === song.id)
const newSongs = filteredSongs.value.filter(
(song) => !currentList.some((item) => item.id === song.id)
);
if (newSongs.length === 0) {
message.info(t('comp.musicList.songsAlreadyInPlaylist'));
return;
}
// 合并到当前播放列表末尾
const newList = [
...currentList,
...newSongs.map(song => ({
...currentList,
...newSongs.map((song) => ({
...song,
picUrl: song.al.picUrl
}))
];
playerStore.setPlayList(newList);
message.success(t('comp.musicList.addToPlaylistSuccess', { count: newSongs.length }));
};
@@ -486,27 +517,27 @@ const handlePlay = (song?: any) => {
// 如果传入了特定歌曲（点击单曲播放），则将其作为播放列表的第一首
if (song) {
const songList = [...filteredSongs.value];
const index = songList.findIndex(item => item.id === song.id);
const index = songList.findIndex((item) => item.id === song.id);
if (index !== -1) {
// 将点击的歌曲移到第一位
const clickedSong = songList.splice(index, 1)[0];
songList.unshift(clickedSong);
}
playerStore.setPlayList(
songList.map(item => ({
songList.map((item) => ({
...item,
picUrl: item.al?.picUrl || item.picUrl
}))
);
// 设置当前播放歌曲
playerStore.setPlay(song);
} else {
// 默认行为：播放整个过滤后的列表
playerStore.setPlayList(
filteredSongs.value.map(item => ({
filteredSongs.value.map((item) => ({
...item,
picUrl: item.al?.picUrl || item.picUrl
}))
@@ -519,7 +550,7 @@ const setupObservers = () => {
// 清理之前的观察器
if (songsObserver) songsObserver.disconnect();
if (albumsObserver) albumsObserver.disconnect();
// 创建观察器(如果不存在)
if (!songsObserver) {
songsObserver = new IntersectionObserver(
@@ -531,7 +562,7 @@ const setupObservers = () => {
{ threshold: 0.1 }
);
}
if (!albumsObserver) {
albumsObserver = new IntersectionObserver(
(entries) => {
@@ -542,7 +573,7 @@ const setupObservers = () => {
{ threshold: 0.1 }
);
}
// 观察当前标签页的元素
nextTick(() => {
if (activeTab.value === 'songs' && songsLoadMoreRef.value) {
@@ -574,7 +605,7 @@ onActivated(() => {
// 确保当前路由是艺术家详情页
if (route.name === 'artistDetail') {
const currentId = route.params.id as string;
// 首次加载或ID变化时加载数据
if (!previousId.value || previousId.value !== currentId) {
console.log('ID已变化，加载新数据');
@@ -582,7 +613,7 @@ onActivated(() => {
activeTab.value = 'songs';
loadArtistInfo();
}
// 重新设置观察器
setupObservers();
}
@@ -716,16 +747,17 @@ const handleVirtualScroll = (e: any) => {
@apply text-sm leading-relaxed whitespace-pre-wrap;
}
}
// 添加歌曲工具栏样式
.songs-toolbar {
@apply flex items-center justify-between mb-4;
.toolbar-left, .toolbar-right {
.toolbar-left,
.toolbar-right {
@apply flex items-center gap-2;
}
}
// 搜索框样式
.search-container {
@apply max-w-md transition-all duration-300 ease-in-out;
@@ -736,7 +768,7 @@ const handleVirtualScroll = (e: any) => {
.search-button {
@apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400 hover:text-green-500;
.icon {
@apply text-lg;
}
@@ -746,28 +778,28 @@ const handleVirtualScroll = (e: any) => {
@apply bg-light-200 dark:bg-dark-200;
}
}
// 操作按钮样式
.layout-toggle .toggle-button,
.action-button {
@apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400;
.icon {
@apply text-lg;
}
&.hover-green:hover {
.icon {
@apply text-green-500;
}
}
}
// 搜索无结果样式
.no-result {
@apply text-center py-8 text-gray-500 dark:text-gray-400;
}
// 虚拟列表样式
.song-virtual-list {
:deep(.n-virtual-list__scroll) {
@@ -780,14 +812,14 @@ const handleVirtualScroll = (e: any) => {
}
}
}
.double-item {
@apply mb-2 bg-light-100 bg-opacity-30 dark:bg-dark-100 dark:bg-opacity-20 rounded-3xl;
}
}
.mobile {
.songs-toolbar{
.songs-toolbar {
@apply mb-0;
}
}
src/renderer/views/bilibili/BilibiliPlayer.vue
+1 -1
View File
@@ -425,7 +425,7 @@ const playCurrentAudio = async () => {
// 播放当前选中的分P
console.log('播放当前选中的分P:', currentAudio.name, '音频URL:', currentAudio.playMusicUrl);
playerStore.setPlay(currentAudio);
playerStore.setPlay(currentAudio);
// 播放后通知用户已开始播放
message.success('已开始播放');
src/renderer/views/download/DownloadPage.vue
+277 -194
View File
@@ -8,16 +8,16 @@
{{ t('download.settings') }}
</n-button>
<div class="segment-control">
<div
class="segment-item"
:class="{ 'active': tabName === 'downloading' }"
<div
class="segment-item"
:class="{ active: tabName === 'downloading' }"
@click="tabName = 'downloading'"
>
{{ t('download.tabs.downloading') }}
</div>
<div
class="segment-item"
:class="{ 'active': tabName === 'downloaded' }"
<div
class="segment-item"
:class="{ active: tabName === 'downloaded' }"
@click="tabName = 'downloaded'"
>
{{ t('download.tabs.downloaded') }}
@@ -25,7 +25,7 @@
</div>
</div>
</div>
<div class="page-content">
<!-- 下载列表 -->
<div v-show="tabName === 'downloading'" class="tab-content">
@@ -42,20 +42,15 @@
<div class="progress-title">
{{ t('download.progress.total', { progress: totalProgress.toFixed(1) }) }}
</div>
<div class="progress-info">
{{ downloadList.length }} {{ t('download.items') }}
</div>
<div class="progress-info">{{ downloadList.length }} {{ t('download.items') }}</div>
</div>
<div class="progress-bar-wrapper">
<div class="progress-bar">
<div
class="progress-fill"
:style="{ width: `${totalProgress}%` }"
></div>
<div class="progress-fill" :style="{ width: `${totalProgress}%` }"></div>
</div>
</div>
</div>
<div class="download-items">
<div v-for="item in downloadList" :key="item.path" class="download-item">
<div class="item-left flex items-center gap-3">
@@ -63,17 +58,23 @@
<img :src="getImgUrl(item.songInfo?.picUrl, '200y200')" alt="Cover" />
</div>
<div class="item-info flex items-center gap-4 w-full">
<div class="item-name min-w-[160px] max-w-[160px] truncate" :title="item.filename">
<div
class="item-name min-w-[160px] max-w-[160px] truncate"
:title="item.filename"
>
{{ item.filename }}
</div>
<div class="item-artist min-w-[120px] max-w-[120px] truncate">
{{ item.songInfo?.ar?.map((a) => a.name).join(', ') || t('download.artist.unknown') }}
{{
item.songInfo?.ar?.map((a) => a.name).join(', ') ||
t('download.artist.unknown')
}}
</div>
<div class="item-progress flex-1 min-w-0">
<div class="progress-bar">
<div
class="progress-fill"
:class="[`status-${item.status}`]"
<div
class="progress-fill"
:class="[`status-${item.status}`]"
:style="{ width: `${item.progress}%` }"
></div>
</div>
@@ -119,17 +120,22 @@
<span>{{ t('download.clearAll') }}</span>
</button>
</div>
<div class="downloaded-items">
<div v-for="item in downList" :key="item.path" class="downloaded-item">
<div class="item-cover">
<img :src="getImgUrl(item.picUrl, '200y200')" alt="Cover" />
</div>
<div class="item-info flex items-center gap-4 w-full">
<div class="item-name min-w-[160px] max-w-[160px] truncate" :title="item.displayName || item.filename">
<div
class="item-name min-w-[160px] max-w-[160px] truncate"
:title="item.displayName || item.filename"
>
{{ item.displayName || item.filename }}
</div>
<div class="item-artist min-w-[120px] max-w-[120px] flex items-center gap-1 truncate">
<div
class="item-artist min-w-[120px] max-w-[120px] flex items-center gap-1 truncate"
>
<i class="iconfont ri-user-line"></i>
<span>{{ item.ar?.map((a) => a.name).join(', ') }}</span>
</div>
@@ -137,7 +143,10 @@
<i class="iconfont ri-file-line"></i>
<span>{{ formatSize(item.size) }}</span>
</div>
<div class="item-path min-w-[220px] max-w-[220px] flex items-center gap-1" :title="item.path">
<div
class="item-path min-w-[220px] max-w-[220px] flex items-center gap-1"
:title="item.path"
>
<i class="iconfont ri-folder-path-line"></i>
<span>{{ shortenPath(item.path) }}</span>
<button class="copy-button" @click="copyPath(item.path)">
@@ -172,7 +181,11 @@
<span>{{ t('download.delete.title') }}</span>
</div>
<div class="modal-body">
{{ t('download.delete.message', { filename: itemToDelete?.displayName || itemToDelete?.filename }) }}
{{
t('download.delete.message', {
filename: itemToDelete?.displayName || itemToDelete?.filename
})
}}
</div>
<div class="modal-footer">
<button class="modal-btn cancel" @click="showDeleteConfirm = false">
@@ -223,14 +236,16 @@
<div class="setting-title">{{ t('download.settingsPanel.path') }}</div>
<div class="setting-desc">{{ t('download.settingsPanel.pathDesc') }}</div>
<div class="flex flex-col gap-2 mt-2">
<n-input
v-model:value="downloadSettings.path"
<n-input
v-model:value="downloadSettings.path"
:placeholder="t('download.settingsPanel.pathPlaceholder')"
readonly
class="flex-1"
/>
<div class="flex items-center gap-2">
<n-button class="flex-1" @click="selectDownloadPath">{{ t('download.settingsPanel.select') }}</n-button>
<n-button class="flex-1" @click="selectDownloadPath">{{
t('download.settingsPanel.select')
}}</n-button>
<n-button class="flex-1" @click="openDownloadPath">
{{ t('download.settingsPanel.open') }}
<i class="iconfont ri-folder-open-line"></i>
@@ -243,24 +258,28 @@
<div class="setting-item">
<div class="setting-title">{{ t('download.settingsPanel.fileFormat') }}</div>
<div class="setting-desc">{{ t('download.settingsPanel.fileFormatDesc') }}</div>
<!-- 预设模板 -->
<div class="flex gap-2 my-2">
<n-button
size="small"
:type="downloadSettings.nameFormat === '{songName} - {artistName}' ? 'primary' : 'default'"
<n-button
size="small"
:type="
downloadSettings.nameFormat === '{songName} - {artistName}' ? 'primary' : 'default'
"
@click="downloadSettings.nameFormat = '{songName} - {artistName}'"
>
{{ t('download.settingsPanel.presets.songArtist') }}
</n-button>
<n-button
<n-button
size="small"
:type="downloadSettings.nameFormat === '{artistName} - {songName}' ? 'primary' : 'default'"
:type="
downloadSettings.nameFormat === '{artistName} - {songName}' ? 'primary' : 'default'
"
@click="downloadSettings.nameFormat = '{artistName} - {songName}'"
>
{{ t('download.settingsPanel.presets.artistSong') }}
</n-button>
<n-button
<n-button
size="small"
:type="downloadSettings.nameFormat === '{songName}' ? 'primary' : 'default'"
@click="downloadSettings.nameFormat = '{songName}'"
@@ -268,33 +287,35 @@
{{ t('download.settingsPanel.presets.songOnly') }}
</n-button>
</div>
<!-- 分隔符设置 -->
<div class="my-3">
<div class="text-sm text-gray-500 mb-2">{{ t('download.settingsPanel.separator') || '分隔符' }}</div>
<div class="text-sm text-gray-500 mb-2">
{{ t('download.settingsPanel.separator') || '分隔符' }}
</div>
<div class="flex items-center gap-2">
<n-button
size="small"
<n-button
size="small"
:type="downloadSettings.separator === ' - ' ? 'primary' : 'default'"
@click="downloadSettings.separator = ' - '"
>
{{ t('download.settingsPanel.separators.dash') || '空格-空格' }}
</n-button>
<n-button
size="small"
<n-button
size="small"
:type="downloadSettings.separator === '_' ? 'primary' : 'default'"
@click="downloadSettings.separator = '_'"
>
{{ t('download.settingsPanel.separators.underscore') || '下划线' }}
</n-button>
<n-button
size="small"
<n-button
size="small"
:type="downloadSettings.separator === ' ' ? 'primary' : 'default'"
@click="downloadSettings.separator = ' '"
>
{{ t('download.settingsPanel.separators.space') || '空格' }}
</n-button>
<n-input
<n-input
v-model:value="downloadSettings.separator"
size="small"
style="width: 100px"
@@ -302,35 +323,71 @@
/>
</div>
</div>
<!-- 组件排序 -->
<div class="my-3">
<div class="text-sm text-gray-500 mb-2">{{ t('download.settingsPanel.dragToArrange') }}</div>
<div class="text-sm text-gray-500 mb-2">
{{ t('download.settingsPanel.dragToArrange') }}
</div>
<div class="format-components">
<div v-for="(component, index) in formatComponents" :key="component.id" class="format-item">
<div
v-for="(component, index) in formatComponents"
:key="component.id"
class="format-item"
>
<div class="flex items-center justify-between w-full">
<span>{{ t(`download.settingsPanel.components.${component.type}`) }}</span>
<div class="flex items-center">
<n-button quaternary circle size="small" @click="handleMoveUp(index)" :disabled="index === 0">
<n-button
quaternary
circle
size="small"
@click="handleMoveUp(index)"
:disabled="index === 0"
>
<template #icon><i class="iconfont ri-arrow-up-s-line"></i></template>
</n-button>
<n-button quaternary circle size="small" @click="handleMoveDown(index)" :disabled="index === formatComponents.length - 1">
<n-button
quaternary
circle
size="small"
@click="handleMoveDown(index)"
:disabled="index === formatComponents.length - 1"
>
<template #icon><i class="iconfont ri-arrow-down-s-line"></i></template>
</n-button>
<n-button quaternary circle size="small" @click="removeFormatComponent(index)" :disabled="formatComponents.length <= 1">
<n-button
quaternary
circle
size="small"
@click="removeFormatComponent(index)"
:disabled="formatComponents.length <= 1"
>
<template #icon><i class="iconfont ri-close-line"></i></template>
</n-button>
</div>
</div>
</div>
<div class="mt-2 flex gap-2">
<n-button size="small" @click="addFormatComponent('songName')" :disabled="formatComponents.some(c => c.type === 'songName')">
<n-button
size="small"
@click="addFormatComponent('songName')"
:disabled="formatComponents.some((c) => c.type === 'songName')"
>
+{{ t('download.settingsPanel.components.songName') }}
</n-button>
<n-button size="small" @click="addFormatComponent('artistName')" :disabled="formatComponents.some(c => c.type === 'artistName')">
<n-button
size="small"
@click="addFormatComponent('artistName')"
:disabled="formatComponents.some((c) => c.type === 'artistName')"
>
+{{ t('download.settingsPanel.components.artistName') }}
</n-button>
<n-button size="small" @click="addFormatComponent('albumName')" :disabled="formatComponents.some(c => c.type === 'albumName')">
<n-button
size="small"
@click="addFormatComponent('albumName')"
:disabled="formatComponents.some((c) => c.type === 'albumName')"
>
+{{ t('download.settingsPanel.components.albumName') }}
</n-button>
</div>
@@ -339,16 +396,18 @@
<!-- 自定义格式 -->
<div class="my-3">
<div class="text-sm text-gray-500 mb-2">{{ t('download.settingsPanel.customFormat') }}</div>
<n-input
v-model:value="downloadSettings.nameFormat"
<div class="text-sm text-gray-500 mb-2">
{{ t('download.settingsPanel.customFormat') }}
</div>
<n-input
v-model:value="downloadSettings.nameFormat"
placeholder="{artistName} - {songName} - {albumName}"
/>
</div>
<div class="mt-2 text-xs text-amber-500">
<i class="iconfont ri-information-line"></i>
{{ t('download.settingsPanel.formatVariables') }}:<br>
{{ t('download.settingsPanel.formatVariables') }}:<br />
{songName}, {artistName}, {albumName}
</div>
@@ -358,8 +417,6 @@
<div class="preview-content">{{ formatNamePreview }}</div>
</div>
</div>
</div>
</n-drawer-content>
</n-drawer>
@@ -372,8 +429,8 @@ import { useI18n } from 'vue-i18n';
import { getMusicDetail } from '@/api/music';
import { usePlayerStore } from '@/store/modules/player';
import { getImgUrl } from '@/utils';
import type { SongResult } from '@/type/music';
import { getImgUrl } from '@/utils';
const { t } = useI18n();
const playerStore = usePlayerStore();
@@ -446,11 +503,12 @@ const formatSize = (bytes: number) => {
// 复制文件路径
const copyPath = (path: string) => {
navigator.clipboard.writeText(path)
navigator.clipboard
.writeText(path)
.then(() => {
message.success(t('download.path.copied'));
})
.catch(err => {
.catch((err) => {
console.error('复制失败:', err);
message.error(t('download.path.copyFailed'));
});
@@ -459,20 +517,20 @@ const copyPath = (path: string) => {
// 格式化路径
const shortenPath = (path: string) => {
if (!path) return '';
// 获取文件名和目录
const parts = path.split(/[/\\]/);
const fileName = parts.pop() || '';
// 如果路径很短，直接返回
if (path.length < 30) return path;
// 保留开头的部分目录和结尾的文件名
if (parts.length <= 2) return path;
const start = parts.slice(0, 1).join('/');
const end = parts.slice(-1).join('/');
return `${start}/.../${end}/${fileName}`;
};
@@ -493,7 +551,7 @@ const handlePlayMusic = async (item: DownloadedItem) => {
try {
// 先检查文件是否存在
const fileExists = await window.electron.ipcRenderer.invoke('check-file-exists', item.path);
if (!fileExists) {
message.error(t('download.delete.fileNotFound', { name: item.displayName || item.filename }));
return;
@@ -503,20 +561,21 @@ const handlePlayMusic = async (item: DownloadedItem) => {
const song: SongResult = {
id: item.id,
name: item.displayName || item.filename,
ar: item.ar?.map(a => ({
id: 0,
name: a.name,
picId: 0,
img1v1Id: 0,
briefDesc: '',
picUrl: '',
img1v1Url: '',
albumSize: 0,
alias: [],
trans: '',
musicSize: 0,
topicPerson: 0
})) || [],
ar:
item.ar?.map((a) => ({
id: 0,
name: a.name,
picId: 0,
img1v1Id: 0,
briefDesc: '',
picUrl: '',
img1v1Url: '',
albumSize: 0,
alias: [],
trans: '',
musicSize: 0,
topicPerson: 0
})) || [],
al: {
name: item.filename,
id: 0,
@@ -537,7 +596,7 @@ const handlePlayMusic = async (item: DownloadedItem) => {
await playerStore.setPlay(song);
playerStore.setPlayMusic(true);
playerStore.setIsPlay(true);
message.success(t('download.playStarted', { name: item.displayName || item.filename }));
} catch (error) {
console.error('播放音乐失败:', error);
@@ -561,13 +620,10 @@ const confirmDelete = async () => {
if (!item) return;
try {
const success = await window.electron.ipcRenderer.invoke(
'delete-downloaded-music',
item.path
);
const success = await window.electron.ipcRenderer.invoke('delete-downloaded-music', item.path);
if (success) {
const newList = downloadedList.value.filter(i => i.id !== item.id);
const newList = downloadedList.value.filter((i) => i.id !== item.id);
downloadedList.value = newList;
localStorage.setItem('downloadedList', JSON.stringify(newList));
message.success(t('download.delete.success'));
@@ -607,15 +663,15 @@ const isLoadingDownloaded = ref(false);
// 格式化歌曲名称，应用用户设置的格式
const formatSongName = (songInfo) => {
if (!songInfo) return '';
// 获取格式设置
const nameFormat = downloadSettings.value.nameFormat || '{songName} - {artistName}';
// 准备替换变量
const artistName = songInfo.ar?.map((a) => a.name).join('/') || '未知艺术家';
const songName = songInfo.name || songInfo.filename || '未知歌曲';
const albumName = songInfo.al?.name || '未知专辑';
// 应用自定义格式
return nameFormat
.replace(/\{songName\}/g, songName)
@@ -626,25 +682,25 @@ const formatSongName = (songInfo) => {
// 获取已下载音乐列表
const refreshDownloadedList = async () => {
if (isLoadingDownloaded.value) return; // 防止重复加载
try {
isLoadingDownloaded.value = true;
const list = await window.electron.ipcRenderer.invoke('get-downloaded-music');
if (!Array.isArray(list) || list.length === 0) {
downloadedList.value = [];
localStorage.setItem('downloadedList', '[]');
return;
}
const songIds = list.filter(item => item.id).map(item => item.id);
const songIds = list.filter((item) => item.id).map((item) => item.id);
if (songIds.length === 0) {
// 处理显示格式化文件名
const updatedList = list.map(item => ({
const updatedList = list.map((item) => ({
...item,
displayName: formatSongName(item) || item.filename
}));
downloadedList.value = updatedList;
localStorage.setItem('downloadedList', JSON.stringify(updatedList));
return;
@@ -657,7 +713,7 @@ const refreshDownloadedList = async () => {
return acc;
}, {});
const updatedList = list.map(item => {
const updatedList = list.map((item) => {
const songDetail = songDetails[item.id];
const updatedItem = {
...item,
@@ -665,7 +721,7 @@ const refreshDownloadedList = async () => {
ar: songDetail?.ar || item.ar || [{ name: t('download.localMusic') }],
name: songDetail?.name || item.name || item.filename
};
// 添加格式化的显示名称
updatedItem.displayName = formatSongName(updatedItem) || updatedItem.filename;
return updatedItem;
@@ -676,11 +732,11 @@ const refreshDownloadedList = async () => {
} catch (error) {
console.error('Failed to get music details:', error);
// 处理显示格式化文件名
const updatedList = list.map(item => ({
const updatedList = list.map((item) => ({
...item,
displayName: formatSongName(item) || item.filename
}));
downloadedList.value = updatedList;
localStorage.setItem('downloadedList', JSON.stringify(updatedList));
}
@@ -750,21 +806,21 @@ onMounted(() => {
// 下载成功处理
if (data.success) {
// 从下载列表中移除
downloadList.value = downloadList.value.filter(item => item.filename !== data.filename);
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
// 延迟刷新已下载列表，避免文件系统未完全写入
setTimeout(() => refreshDownloadedList(), 500);
// 只在下载页面显示一次下载成功通知
message.success(t('download.message.downloadComplete', { filename: data.filename }));
// 避免通知过多占用内存，设置一个超时来清理已处理的标记
setTimeout(() => {
processedDownloads.delete(data.filename);
}, 10000); // 10秒后清除
} else {
// 下载失败处理
const existingItem = downloadList.value.find(item => item.filename === data.filename);
const existingItem = downloadList.value.find((item) => item.filename === data.filename);
if (existingItem) {
Object.assign(existingItem, {
status: 'error',
@@ -772,12 +828,14 @@ onMounted(() => {
progress: 0
});
setTimeout(() => {
downloadList.value = downloadList.value.filter(item => item.filename !== data.filename);
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
processedDownloads.delete(data.filename);
}, 3000);
}
message.error(t('download.message.downloadFailed', { filename: data.filename, error: data.error }));
message.error(
t('download.message.downloadFailed', { filename: data.filename, error: data.error })
);
}
});
@@ -809,7 +867,7 @@ const downloadSettings = ref({
// 格式组件（用于拖拽排序）
const formatComponents = ref([
{ id: 1, type: 'songName' },
{ id: 2, type: 'artistName' },
{ id: 2, type: 'artistName' }
]);
// 处理组件排序
@@ -829,7 +887,7 @@ const handleMoveDown = (index: number) => {
// 添加新的格式组件
const addFormatComponent = (type: string) => {
if (!formatComponents.value.some(item => item.type === type)) {
if (!formatComponents.value.some((item) => item.type === type)) {
formatComponents.value.push({
id: Date.now(),
type
@@ -843,31 +901,38 @@ const removeFormatComponent = (index: number) => {
};
// 监听组件变化更新格式
watch(formatComponents, (newComponents) => {
let format = '';
newComponents.forEach((component, index) => {
format += `{${component.type}}`;
if (index < newComponents.length - 1) {
format += downloadSettings.value.separator;
}
});
downloadSettings.value.nameFormat = format;
}, { deep: true });
// 监听分隔符变化更新格式
watch(() => downloadSettings.value.separator, (newSeparator) => {
if (formatComponents.value.length > 1) {
// 重新构建格式字符串
watch(
formatComponents,
(newComponents) => {
let format = '';
formatComponents.value.forEach((component, index) => {
newComponents.forEach((component, index) => {
format += `{${component.type}}`;
if (index < formatComponents.value.length - 1) {
format += newSeparator;
if (index < newComponents.length - 1) {
format += downloadSettings.value.separator;
}
});
downloadSettings.value.nameFormat = format;
},
{ deep: true }
);
// 监听分隔符变化更新格式
watch(
() => downloadSettings.value.separator,
(newSeparator) => {
if (formatComponents.value.length > 1) {
// 重新构建格式字符串
let format = '';
formatComponents.value.forEach((component, index) => {
format += `{${component.type}}`;
if (index < formatComponents.value.length - 1) {
format += newSeparator;
}
});
downloadSettings.value.nameFormat = format;
}
}
});
);
// 格式名称预览
const formatNamePreview = computed(() => {
@@ -898,15 +963,27 @@ const openDownloadPath = () => {
// 保存下载设置
const saveDownloadSettings = () => {
// 保存到配置
window.electron.ipcRenderer.send('set-store-value', 'set.downloadPath', downloadSettings.value.path);
window.electron.ipcRenderer.send('set-store-value', 'set.downloadNameFormat', downloadSettings.value.nameFormat);
window.electron.ipcRenderer.send('set-store-value', 'set.downloadSeparator', downloadSettings.value.separator);
window.electron.ipcRenderer.send(
'set-store-value',
'set.downloadPath',
downloadSettings.value.path
);
window.electron.ipcRenderer.send(
'set-store-value',
'set.downloadNameFormat',
downloadSettings.value.nameFormat
);
window.electron.ipcRenderer.send(
'set-store-value',
'set.downloadSeparator',
downloadSettings.value.separator
);
// 如果是在已下载页面，刷新列表以更新显示
if (tabName.value === 'downloaded') {
refreshDownloadedList();
}
message.success(t('download.settingsPanel.saveSuccess'));
showSettingsDrawer.value = false;
};
@@ -915,11 +992,17 @@ const saveDownloadSettings = () => {
const initDownloadSettings = async () => {
// 获取当前配置
const path = await window.electron.ipcRenderer.invoke('get-store-value', 'set.downloadPath');
const nameFormat = await window.electron.ipcRenderer.invoke('get-store-value', 'set.downloadNameFormat');
const separator = await window.electron.ipcRenderer.invoke('get-store-value', 'set.downloadSeparator');
const nameFormat = await window.electron.ipcRenderer.invoke(
'get-store-value',
'set.downloadNameFormat'
);
const separator = await window.electron.ipcRenderer.invoke(
'get-store-value',
'set.downloadSeparator'
);
downloadSettings.value = {
path: path || await window.electron.ipcRenderer.invoke('get-downloads-path'),
path: path || (await window.electron.ipcRenderer.invoke('get-downloads-path')),
nameFormat: nameFormat || '{songName} - {artistName}',
separator: separator || ' - '
};
@@ -933,7 +1016,7 @@ const updateFormatComponents = () => {
// 提取格式中的变量
const format = downloadSettings.value.nameFormat;
const matches = Array.from(format.matchAll(/\{(\w+)\}/g));
if (matches.length === 0) {
formatComponents.value = [
{ id: 1, type: 'songName' },
@@ -941,7 +1024,7 @@ const updateFormatComponents = () => {
];
return;
}
formatComponents.value = matches.map((match, index) => ({
id: index + 1,
type: match[1]
@@ -952,18 +1035,21 @@ const updateFormatComponents = () => {
watch(() => downloadSettings.value.nameFormat, updateFormatComponents);
// 监听命名格式变化，更新已下载文件的显示名称
watch(() => downloadSettings.value.nameFormat, () => {
if (downloadedList.value.length > 0) {
// 更新所有已下载项的显示名称
downloadedList.value = downloadedList.value.map(item => ({
...item,
displayName: formatSongName(item) || item.filename
}));
// 保存到本地存储
localStorage.setItem('downloadedList', JSON.stringify(downloadedList.value));
watch(
() => downloadSettings.value.nameFormat,
() => {
if (downloadedList.value.length > 0) {
// 更新所有已下载项的显示名称
downloadedList.value = downloadedList.value.map((item) => ({
...item,
displayName: formatSongName(item) || item.filename
}));
// 保存到本地存储
localStorage.setItem('downloadedList', JSON.stringify(downloadedList.value));
}
}
});
);
// 初始化
onMounted(() => {
@@ -1005,7 +1091,7 @@ onMounted(() => {
@apply text-gray-500 dark:text-gray-400;
@apply transition-all duration-200;
@apply hover:bg-light-300 dark:hover:bg-dark-300;
&.active {
@apply bg-white dark:bg-dark-200;
@apply text-gray-900 dark:text-gray-100;
@@ -1091,11 +1177,11 @@ onMounted(() => {
&.status-downloading {
@apply bg-primary;
}
&.status-completed {
@apply bg-green-500;
}
&.status-error {
@apply bg-red-500;
}
@@ -1112,63 +1198,63 @@ onMounted(() => {
@apply border border-gray-200/60 dark:border-gray-700/50;
@apply shadow-sm;
@apply transition-all duration-300;
&:hover {
@apply shadow-md;
@apply transform -translate-y-0.5;
}
.item-left {
@apply flex gap-3;
}
.item-cover {
@apply w-12 h-12 rounded-md overflow-hidden;
@apply flex-shrink-0;
@apply bg-gray-100 dark:bg-dark-300;
@apply shadow-sm;
img {
@apply w-full h-full object-cover;
}
}
.item-info {
@apply flex-1 min-w-0 flex items-center justify-between;
}
.item-name {
@apply text-sm font-medium truncate;
}
.item-artist {
@apply text-xs text-gray-500 dark:text-gray-400;
}
.item-progress {
@apply mb-2;
}
.item-details {
@apply flex justify-between items-center;
}
.item-size {
@apply text-xs text-gray-500 dark:text-gray-400;
}
.item-status-badge {
@apply text-xs px-2 py-0.5 rounded-full;
@apply bg-gray-100 dark:bg-dark-300;
&.status-downloading {
@apply bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400;
}
&.status-completed {
@apply bg-green-50 text-green-600 dark:bg-green-900/20 dark:text-green-400;
}
&.status-error {
@apply bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-400;
}
@@ -1189,7 +1275,7 @@ onMounted(() => {
@apply flex items-center gap-2;
@apply text-xs font-medium;
@apply text-gray-700 dark:text-gray-300;
i {
@apply text-gray-400 dark:text-gray-500;
}
@@ -1216,92 +1302,92 @@ onMounted(() => {
@apply shadow-sm;
@apply flex gap-3;
@apply transition-all duration-300;
&:hover {
@apply shadow-md;
@apply transform -translate-y-0.5;
}
.item-cover {
@apply w-14 h-14 rounded-md overflow-hidden;
@apply flex-shrink-0;
@apply bg-gray-100 dark:bg-dark-300;
@apply shadow-sm;
img {
@apply w-full h-full object-cover;
}
}
.item-info {
@apply flex-1 flex justify-between items-center;
@apply min-w-0;
}
.item-primary {
@apply flex-1 min-w-0 flex items-center justify-between;
}
.item-name {
@apply text-sm font-medium truncate;
}
.item-artist,
.item-size {
@apply flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400;
i {
@apply text-gray-400 dark:text-gray-500;
}
}
.item-path {
@apply flex items-center gap-1 text-xs;
@apply text-gray-500 dark:text-gray-400;
@apply bg-gray-50 dark:bg-dark-300;
@apply rounded-md py-1 px-2;
@apply truncate;
i {
@apply text-gray-400 dark:text-gray-500 flex-shrink-0;
}
span {
@apply truncate flex-1;
}
.copy-button {
@apply ml-1 opacity-0;
@apply text-gray-400 hover:text-primary;
@apply transition-all duration-200;
}
&:hover .copy-button {
@apply opacity-100;
}
}
.item-actions {
@apply flex gap-1;
@apply ml-2;
}
.action-btn {
@apply flex items-center gap-1;
@apply px-2 py-1 rounded-md;
@apply text-xs;
@apply transition-colors duration-200;
&.play {
@apply text-primary dark:text-white;
@apply hover:bg-gray-100 dark:hover:bg-dark-300 hover:text-green-500;
}
&.open {
@apply text-gray-600 dark:text-gray-300;
@apply hover:bg-gray-100 dark:hover:bg-dark-300;
}
&.delete {
@apply text-red-500;
@apply hover:bg-red-500/10;
@@ -1331,7 +1417,7 @@ onMounted(() => {
@apply border-b border-gray-100 dark:border-gray-800;
@apply text-gray-900 dark:text-gray-100;
@apply font-medium;
i {
@apply text-amber-500 dark:text-amber-400;
}
@@ -1352,13 +1438,13 @@ onMounted(() => {
@apply px-3 py-1.5 rounded-md;
@apply text-sm font-medium;
@apply transition-colors duration-200;
&.cancel {
@apply bg-gray-100 dark:bg-dark-300;
@apply text-gray-700 dark:text-gray-300;
@apply hover:bg-gray-200 dark:hover:bg-dark-300;
}
&.confirm {
@apply bg-amber-500 dark:bg-amber-600;
@apply text-white;
@@ -1424,7 +1510,4 @@ onMounted(() => {
.format-preview {
@apply text-sm;
}
</style>
</style>
src/renderer/views/favorite/index.vue
+392 -400
View File
@@ -8,19 +8,11 @@
<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)"
>
<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)"
>
<div class="sort-button" :class="{ active: !isDescending }" @click="toggleSort(false)">
<i class="iconfont ri-sort-asc"></i>
{{ t('favorite.ascending') }}
</div>
@@ -104,450 +96,450 @@
</template>
<script setup lang="ts">
import { computed, ref, watch, onMounted } from 'vue';
import { computed, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { getMusicDetail } from '@/api/music';
import { getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';
import { getMusicDetail } from '@/api/music';
import SongItem from '@/components/common/SongItem.vue';
import { useDownload } from '@/hooks/useDownload';
import { usePlayerStore } from '@/store';
import type { SongResult } from '@/type/music';
import { isElectron, setAnimationClass, setAnimationDelay } from '@/utils';
const { t } = useI18n();
const playerStore = usePlayerStore();
const favoriteList = computed(() => playerStore.favoriteList);
const favoriteSongs = ref<SongResult[]>([]);
const loading = ref(false);
const noMore = ref(false);
const scrollbarRef = ref();
const { t } = useI18n();
const playerStore = usePlayerStore();
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 startSelect = () => {
isSelecting.value = true;
selectedSongs.value = [];
};
// 开始多选
const startSelect = () => {
isSelecting.value = true;
selectedSongs.value = [];
};
// 取消多选
const cancelSelect = () => {
isSelecting.value = false;
selectedSongs.value = [];
};
// 取消多选
const cancelSelect = () => {
isSelecting.value = false;
selectedSongs.value = [];
};
// 处理选择
const handleSelect = (songId: number, selected: boolean) => {
if (selected) {
selectedSongs.value.push(songId);
} else {
selectedSongs.value = selectedSongs.value.filter((id) => id !== songId);
}
};
// 处理选择
const handleSelect = (songId: number, selected: boolean) => {
if (selected) {
selectedSongs.value.push(songId);
} else {
selectedSongs.value = selectedSongs.value.filter((id) => id !== songId);
}
};
// 批量下载
// 批量下载
const handleBatchDownload = async () => {
// 获取选中歌曲的信息
const selectedSongsList = selectedSongs.value
.map((songId) => favoriteSongs.value.find((s) => s.id === songId))
.filter((song) => song) as SongResult[];
// 使用hook中的批量下载功能
await batchDownloadMusic(selectedSongsList);
// 下载完成后取消选择
cancelSelect();
};
// 排序相关
const isDescending = ref(true); // 默认倒序显示
// 排序相关
const isDescending = ref(true); // 默认倒序显示
// 切换排序方式
const toggleSort = (descending: boolean) => {
if (isDescending.value === descending) return;
isDescending.value = descending;
currentPage.value = 1;
// 切换排序方式
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);
const props = defineProps({
isComponent: {
type: Boolean,
default: false
}
});
// 获取当前页的收藏歌曲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 ids.slice(startIndex, endIndex);
};
// 获取收藏歌曲详情
const getFavoriteSongs = async () => {
if (favoriteList.value.length === 0) {
favoriteSongs.value = [];
noMore.value = false;
getFavoriteSongs();
};
return;
}
// 无限滚动相关
const pageSize = 100;
const currentPage = ref(1);
if (props.isComponent && favoriteSongs.value.length >= 16) {
return;
}
const props = defineProps({
isComponent: {
type: Boolean,
default: false
}
});
loading.value = true;
try {
const currentIds = getCurrentPageIds();
// 获取当前页的收藏歌曲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 ids.slice(startIndex, endIndex);
};
// 分离网易云音乐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');
// 获取收藏歌曲详情
const getFavoriteSongs = async () => {
if (favoriteList.value.length === 0) {
favoriteSongs.value = [];
return;
}
if (props.isComponent && favoriteSongs.value.length >= 16) {
return;
}
loading.value = true;
try {
const currentIds = getCurrentPageIds();
// 分离网易云音乐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[] = [];
if (musicIds.length > 0) {
const res = await getMusicDetail(musicIds);
if (res.data.songs) {
neteaseSongs = res.data.songs.map((song: SongResult) => ({
...song,
picUrl: song.al?.picUrl || '',
source: 'netease'
}));
}
// 处理网易云音乐数据
let neteaseSongs: SongResult[] = [];
if (musicIds.length > 0) {
const res = await getMusicDetail(musicIds);
if (res.data.songs) {
neteaseSongs = res.data.songs.map((song: SongResult) => ({
...song,
picUrl: song.al?.picUrl || '',
source: 'netease'
}));
}
// 处理B站视频数据
const bilibiliSongs: SongResult[] = [];
for (const biliId of bilibiliIds) {
const strBiliId = String(biliId);
console.log(`处理B站ID: ${strBiliId}`);
if (strBiliId.includes('--')) {
// 从ID中提取B站视频信息 (bvid--pid--cid格式)
try {
const [bvid, pid, cid] = strBiliId.split('--');
if (!bvid || !pid || !cid) {
console.warn(`B站ID格式错误: ${strBiliId}, 正确格式应为 bvid--pid--cid`);
continue;
}
const res = await getBilibiliVideoDetail(bvid);
const videoDetail = res.data;
// 找到对应的分P
const page = videoDetail.pages.find(p => p.cid === Number(cid));
if (!page) {
console.warn(`未找到对应的分P: cid=${cid}`);
continue;
}
const songData = {
id: strBiliId,
name: `${page.part || ''} - ${videoDetail.title}`,
picUrl: getBilibiliProxyUrl(videoDetail.pic),
ar: [
{
name: videoDetail.owner.name,
id: videoDetail.owner.mid
}
],
al: {
name: videoDetail.title,
picUrl: getBilibiliProxyUrl(videoDetail.pic)
},
source: 'bilibili',
bilibiliData: {
bvid,
cid: Number(cid)
}
// 处理B站视频数据
const bilibiliSongs: SongResult[] = [];
for (const biliId of bilibiliIds) {
const strBiliId = String(biliId);
console.log(`处理B站ID: ${strBiliId}`);
if (strBiliId.includes('--')) {
// 从ID中提取B站视频信息 (bvid--pid--cid格式)
try {
const [bvid, pid, cid] = strBiliId.split('--');
if (!bvid || !pid || !cid) {
console.warn(`B站ID格式错误: ${strBiliId}, 正确格式应为 bvid--pid--cid`);
continue;
}
const res = await getBilibiliVideoDetail(bvid);
const videoDetail = res.data;
// 找到对应的分P
const page = videoDetail.pages.find((p) => p.cid === Number(cid));
if (!page) {
console.warn(`未找到对应的分P: cid=${cid}`);
continue;
}
const songData = {
id: strBiliId,
name: `${page.part || ''} - ${videoDetail.title}`,
picUrl: getBilibiliProxyUrl(videoDetail.pic),
ar: [
{
name: videoDetail.owner.name,
id: videoDetail.owner.mid
}
} as SongResult;
bilibiliSongs.push(songData);
} catch (error) {
console.error(`获取B站视频详情失败 (${strBiliId}):`, error);
],
al: {
name: videoDetail.title,
picUrl: getBilibiliProxyUrl(videoDetail.pic)
},
source: 'bilibili',
bilibiliData: {
bvid,
cid: Number(cid)
}
} as SongResult;
bilibiliSongs.push(songData);
} catch (error) {
console.error(`获取B站视频详情失败 (${strBiliId}):`, error);
}
}
}
console.log('获取数据统计:', {
neteaseSongs: neteaseSongs.length,
bilibiliSongs: bilibiliSongs.length
});
// 合并数据，保持原有顺序
const newSongs = currentIds
.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;
})
.filter((song): song is SongResult => !!song);
console.log(`最终歌曲列表: ${newSongs.length}首`);
// 追加新数据而不是替换
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);
} 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++;
getFavoriteSongs();
}
};
const hasLoaded = ref(false);
onMounted(async () => {
if (!hasLoaded.value) {
await playerStore.initializeFavoriteList();
await getFavoriteSongs();
hasLoaded.value = true;
}
});
// 监听收藏列表变化，变化时重置并重新加载
watch(
favoriteList,
async () => {
hasLoaded.value = false;
currentPage.value = 1;
noMore.value = false;
await getFavoriteSongs();
hasLoaded.value = true;
},
{ deep: true }
);
const handlePlay = () => {
playerStore.setPlayList(favoriteSongs.value);
};
const getItemAnimationDelay = (index: number) => {
return setAnimationDelay(index, 30);
};
const router = useRouter();
const handleMore = () => {
router.push('/history');
};
// 全选相关
const isAllSelected = computed(() => {
return (
favoriteSongs.value.length > 0 && selectedSongs.value.length === favoriteSongs.value.length
);
});
const isIndeterminate = computed(() => {
return selectedSongs.value.length > 0 && selectedSongs.value.length < favoriteSongs.value.length;
});
// 处理全选/取消全选
const handleSelectAll = (checked: boolean) => {
if (checked) {
selectedSongs.value = favoriteSongs.value.map((song) => song.id as number);
} else {
selectedSongs.value = [];
}
};
</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;
}
}
}
}
console.log('获取数据统计:', {
neteaseSongs: neteaseSongs.length,
bilibiliSongs: bilibiliSongs.length
});
// 合并数据，保持原有顺序
const newSongs = currentIds
.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;
})
.filter((song): song is SongResult => !!song);
console.log(`最终歌曲列表: ${newSongs.length}首`);
// 追加新数据而不是替换
if (currentPage.value === 1) {
favoriteSongs.value = newSongs;
} else {
favoriteSongs.value = [...favoriteSongs.value, ...newSongs];
.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;
}
}
// 判断是否还有更多数据
noMore.value = favoriteSongs.value.length >= favoriteList.value.length;
} catch (error) {
console.error('获取收藏歌曲失败:', error);
} finally {
loading.value = false;
.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;
}
}
}
}
};
}
// 处理滚动事件
const handleScroll = (e: any) => {
const { scrollTop, scrollHeight, offsetHeight } = e.target;
const threshold = 100; // 距离底部多少像素时加载更多
.favorite-main {
@apply flex flex-col flex-grow min-h-0;
if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
currentPage.value++;
getFavoriteSongs();
.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;
}
}
}
}
};
}
}
const hasLoaded = ref(false);
.loading-wrapper {
@apply flex justify-center items-center py-20;
}
onMounted(async () => {
if (!hasLoaded.value) {
await playerStore.initializeFavoriteList();
await getFavoriteSongs();
hasLoaded.value = true;
}
});
.no-more-tip {
@apply text-center py-4 text-sm;
@apply text-gray-500 dark:text-gray-400;
}
// 监听收藏列表变化，变化时重置并重新加载
watch(
favoriteList,
async () => {
hasLoaded.value = false;
currentPage.value = 1;
noMore.value = false;
await getFavoriteSongs();
hasLoaded.value = true;
},
{ deep: true }
);
const handlePlay = () => {
playerStore.setPlayList(favoriteSongs.value);
};
const getItemAnimationDelay = (index: number) => {
return setAnimationDelay(index, 30);
};
const router = useRouter();
const handleMore = () => {
router.push('/history');
};
// 全选相关
const isAllSelected = computed(() => {
return (
favoriteSongs.value.length > 0 && selectedSongs.value.length === favoriteSongs.value.length
);
});
const isIndeterminate = computed(() => {
return selectedSongs.value.length > 0 && selectedSongs.value.length < favoriteSongs.value.length;
});
// 处理全选/取消全选
const handleSelectAll = (checked: boolean) => {
if (checked) {
selectedSongs.value = favoriteSongs.value.map((song) => song.id as number);
} else {
selectedSongs.value = [];
}
};
</script>
<style lang="scss" scoped>
.mobile {
.favorite-page {
@apply h-full flex flex-col pt-2;
@apply bg-light dark:bg-black;
@apply p-4 m-0;
.favorite-header {
@apply flex items-center justify-between flex-shrink-0 px-4 pb-2;
@apply mb-4;
&-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;
}
}
}
h2 {
@apply text-xl;
}
}
}
.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;
}
}
}
}
</style>
}
</style>
src/renderer/views/history/index.vue
+1 -1
View File
@@ -32,7 +32,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';
src/renderer/views/list/index.vue
+3 -3
View File
@@ -97,11 +97,11 @@ const router = useRouter();
const openPlaylist = (item: any) => {
recommendItem.value = item;
listLoading.value = true;
getListDetail(item.id).then(res => {
getListDetail(item.id).then((res) => {
listDetail.value = res.data;
listLoading.value = false;
navigateToMusicList(router, {
id: item.id,
type: 'playlist',
src/renderer/views/lyric/index.vue
+35 -35
View File
@@ -37,8 +37,8 @@
<i v-if="lyricSetting.theme === 'light'" class="ri-sun-line"></i>
<i v-else class="ri-moon-line"></i>
</div>
<div
class="control-button theme-color-button"
<div
class="control-button theme-color-button"
:class="{ active: showThemeColorPanel }"
@click="toggleThemeColorPanel"
>
@@ -58,7 +58,7 @@
</div>
<!-- 主题色选择面板 -->
<ThemeColorPanel
<theme-color-panel
:visible="showThemeColorPanel"
:current-color="currentHighlightColor"
:theme="lyricSetting.theme"
@@ -106,8 +106,8 @@
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { SongResult } from '@/type/music';
import ThemeColorPanel from '@/components/lyric/ThemeColorPanel.vue';
import { SongResult } from '@/type/music';
import {
getCurrentLyricThemeColor,
loadLyricThemeColor,
@@ -156,18 +156,18 @@ const loadLyricSettings = () => {
const stored = localStorage.getItem('lyricData');
if (stored) {
const parsed = JSON.parse(stored);
// 验证 highlightColor 字段
let validatedHighlightColor = parsed.highlightColor;
if (validatedHighlightColor && !validateColor(validatedHighlightColor)) {
console.warn('Invalid stored highlight color, removing it');
validatedHighlightColor = undefined;
}
// 确保所有必需字段存在并有效
return {
isTop: parsed.isTop ?? false,
theme: (parsed.theme === 'light' || parsed.theme === 'dark') ? parsed.theme : 'dark',
theme: parsed.theme === 'light' || parsed.theme === 'dark' ? parsed.theme : 'dark',
isLock: parsed.isLock ?? false,
highlightColor: validatedHighlightColor
};
@@ -175,7 +175,7 @@ const loadLyricSettings = () => {
} catch (error) {
console.error('Failed to load lyric settings:', error);
}
// 返回默认设置
return {
isTop: false,
@@ -226,7 +226,7 @@ const handleMouseLeave = () => {
if (!lyricSetting.value.isLock) return;
isHovering.value = false;
windowData.electron.ipcRenderer.send('set-ignore-mouse', false);
// 强制重置背景色
const lyricWindow = document.querySelector('.lyric-window') as HTMLElement;
if (lyricWindow) {
@@ -418,7 +418,7 @@ const getLyricStyle = (index: number) => {
if (index !== currentIndex.value) return {};
const progress = currentProgress.value * 100;
// 使用更清晰的渐变实现
return {
background: `linear-gradient(to right, var(--highlight-color) ${progress}%, var(--text-color) ${progress}%)`,
@@ -594,14 +594,14 @@ const handleColorChange = (color: string) => {
console.error('Invalid color received:', color);
return;
}
try {
currentHighlightColor.value = color;
updateThemeColorWithTransition(color);
// 更新 lyricSetting 中的 highlightColor
lyricSetting.value.highlightColor = color;
// 同时保存到专用的主题色存储
saveLyricThemeColor(color);
} catch (error) {
@@ -621,12 +621,12 @@ const handleThemeColorPanelClose = () => {
const resetThemeColor = () => {
// 重置到默认颜色
const defaultColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
// 更新所有相关状态
currentHighlightColor.value = defaultColor;
lyricSetting.value.highlightColor = undefined;
updateThemeColorWithTransition(defaultColor);
// 清除专用存储
try {
const settings = loadLyricSettings();
@@ -648,7 +648,7 @@ const validateAndFixColorSettings = () => {
lyricSetting.value.highlightColor = undefined;
updateCSSVariable('--lyric-highlight-color', defaultColor);
}
// 检查 lyricSetting 中的颜色是否有效
if (lyricSetting.value.highlightColor && !validateColor(lyricSetting.value.highlightColor)) {
console.warn('Stored highlight color is invalid, removing it');
@@ -680,10 +680,10 @@ const updateThemeColorWithTransition = (newColor: string) => {
if (lyricWindow) {
lyricWindow.classList.add('color-transitioning');
}
// 更新CSS变量
updateCSSVariable('--lyric-highlight-color', newColor);
// 移除过渡类
setTimeout(() => {
if (lyricWindow) {
@@ -695,7 +695,7 @@ const updateThemeColorWithTransition = (newColor: string) => {
const initializeThemeColor = () => {
// 优先从 lyricSetting 中读取颜色
let savedColor = lyricSetting.value.highlightColor;
// 如果 lyricSetting 中没有，则从专用存储中读取
if (!savedColor) {
savedColor = loadLyricThemeColor();
@@ -704,7 +704,7 @@ const initializeThemeColor = () => {
lyricSetting.value.highlightColor = savedColor;
}
}
if (savedColor) {
const optimizedColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
currentHighlightColor.value = optimizedColor;
@@ -844,10 +844,10 @@ onMounted(() => {
}
};
}
// 初始化主题色
initializeThemeColor();
// 验证和修复颜色设置
validateAndFixColorSettings();
});
@@ -887,12 +887,12 @@ body,
transition: background-color 0.3s ease;
cursor: default;
border-radius: 14px;
&.color-transitioning {
.lyric-text-inner {
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.control-button {
i {
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
@@ -1011,11 +1011,11 @@ body,
color: var(--highlight-color);
}
}
&.theme-color-button {
&.active {
background: var(--control-bg);
i {
color: var(--highlight-color);
}
@@ -1062,12 +1062,12 @@ body,
&.lyric-line-current {
transform: scale(1.05);
opacity: 1;
// 当前播放歌词的特殊样式
.lyric-text {
// 移除阴影，避免干扰渐变效果
text-shadow: none;
.lyric-text-inner {
// 为渐变文字添加轻微的外发光
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
@@ -1094,13 +1094,13 @@ body,
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
// 为非当前播放的歌词添加阴影效果
text-shadow:
text-shadow:
0 0 2px rgba(0, 0, 0, 0.8),
0 1px 1px rgba(0, 0, 0, 0.6),
0 0 4px rgba(255, 255, 255, 0.2);
.lyric-text-inner {
transition: background 0.3s ease;
}
@@ -1112,9 +1112,9 @@ body,
word-break: break-all;
transition: font-size 0.2s ease;
line-height: 1.4;
// 为翻译文本也添加阴影效果，但稍微轻一些
text-shadow:
text-shadow:
0 0 2px rgba(0, 0, 0, 0.7),
0 1px 1px rgba(0, 0, 0, 0.5),
0 0 4px rgba(255, 255, 255, 0.2),
@@ -1127,9 +1127,9 @@ body,
color: var(--text-secondary);
font-size: 16px;
padding: 20px;
// 为空歌词提示也添加阴影效果
text-shadow:
text-shadow:
0 0 2px rgba(0, 0, 0, 0.7),
0 1px 1px rgba(0, 0, 0, 0.5),
0 0 4px rgba(255, 255, 255, 0.2);
src/renderer/views/music/MusicListPage.vue
+70 -60
View File
@@ -21,7 +21,11 @@
<n-tooltip v-if="canCollect" placement="bottom" trigger="hover">
<template #trigger>
<div class="action-button" :class="isCollected ? 'collected' : 'hover-green'" @click="toggleCollect">
<div
class="action-button"
:class="isCollected ? 'collected' : 'hover-green'"
@click="toggleCollect"
>
<i class="icon iconfont" :class="isCollected ? 'ri-heart-fill' : 'ri-heart-line'"></i>
</div>
</template>
@@ -45,7 +49,7 @@
<i class="icon iconfont ri-checkbox-multiple-line"></i>
</div>
</template>
{{ t('favorite.batchDownload')}}
{{ t('favorite.batchDownload') }}
</n-tooltip>
<div v-else class="flex items-center gap-2">
<n-checkbox
@@ -59,10 +63,15 @@
<template #trigger>
<div
class="action-button hover-green"
:class="{ 'opacity-50 pointer-events-none': selectedSongs.length === 0 || isDownloading }"
:class="{
'opacity-50 pointer-events-none': selectedSongs.length === 0 || isDownloading
}"
@click="selectedSongs.length && !isDownloading && handleBatchDownload()"
>
<i class="icon iconfont ri-download-line" :class="{ 'animate-spin': isDownloading }"></i>
<i
class="icon iconfont ri-download-line"
:class="{ 'animate-spin': isDownloading }"
></i>
</div>
</template>
{{ t('favorite.download', { count: selectedSongs.length }) }}
@@ -83,10 +92,17 @@
<n-tooltip placement="bottom" trigger="hover">
<template #trigger>
<div class="toggle-button hover-green" @click="toggleLayout">
<i class="icon iconfont" :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"></i>
<i
class="icon iconfont"
:class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"
></i>
</div>
</template>
{{ isCompactLayout ? t('comp.musicList.switchToNormal') : t('comp.musicList.switchToCompact') }}
{{
isCompactLayout
? t('comp.musicList.switchToNormal')
: t('comp.musicList.switchToCompact')
}}
</n-tooltip>
</div>
@@ -104,7 +120,10 @@
<i class="icon iconfont ri-search-line text-sm"></i>
</template>
<template #suffix>
<i class="icon iconfont ri-close-line text-sm cursor-pointer" @click="closeSearch"></i>
<i
class="icon iconfont ri-close-line text-sm cursor-pointer"
@click="closeSearch"
></i>
</template>
</n-input>
</template>
@@ -160,7 +179,7 @@
<n-virtual-list
ref="songListRef"
class="song-virtual-list"
style="max-height: calc(100vh - 130px);"
style="max-height: calc(100vh - 130px)"
:items="filteredSongs"
:item-size="isCompactLayout ? 50 : 70"
item-resizable
@@ -170,7 +189,7 @@
<template #default="{ item, index }">
<div>
<div class="double-item">
<song-item
<song-item
:index="index"
:compact="isCompactLayout"
:item="formatSong(item)"
@@ -201,20 +220,20 @@ defineOptions({
name: 'MusicList'
});
import { useMessage } from 'naive-ui';
import PinyinMatch from 'pinyin-match';
import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { updatePlaylistTracks, subscribePlaylist } from '@/api/music';
import { useMessage } from 'naive-ui';
import { subscribePlaylist, updatePlaylistTracks } from '@/api/music';
import { getMusicDetail, getMusicListByType } from '@/api/music';
import SongItem from '@/components/common/SongItem.vue';
import PlayBottom from '@/components/common/PlayBottom.vue';
import SongItem from '@/components/common/SongItem.vue';
import { useDownload } from '@/hooks/useDownload';
import { useMusicStore, usePlayerStore } from '@/store';
import { SongResult } from '@/type/music';
import { getImgUrl, isElectron, isMobile, setAnimationClass } from '@/utils';
import { useDownload } from '@/hooks/useDownload';
const { t } = useI18n();
const route = useRoute();
@@ -245,7 +264,9 @@ const isFullPlaylistLoaded = ref(false); // 标记完整播放列表是否已加
// 添加搜索相关的状态和方法
const isSearchVisible = ref(false);
const isCompactLayout = ref(isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact'); // 默认使用紧凑布局
const isCompactLayout = ref(
isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact'
); // 默认使用紧凑布局
const showSearch = () => {
isSearchVisible.value = true;
@@ -288,7 +309,7 @@ onMounted(() => {
// 从 pinia 或路由参数获取数据
// 从路由参数获取
// 从路由参数获取
const routeId = route.params.id as string;
const routeType = route.query.type as string;
@@ -299,14 +320,12 @@ const initData = () => {
songList.value = musicStore.currentMusicList || [];
listInfo.value = musicStore.currentListInfo || null;
canRemove.value = musicStore.canRemoveSong || false;
// 初始化歌曲列表
initSongList(songList.value);
return;
}
if (routeId) {
// 这里根据 type 和 id 加载数据
// 例如: 获取歌单、专辑等
@@ -321,7 +340,7 @@ const initData = () => {
const loadDataByType = async (type: string, id: string) => {
try {
const result = await getMusicListByType(type, id);
if (type === 'album') {
const { songs, album } = result.data;
name.value = album.name;
@@ -342,13 +361,13 @@ const loadDataByType = async (type: string, id: string) => {
const { playlist } = result.data;
name.value = playlist.name;
listInfo.value = playlist;
// 初始化歌曲列表
if (playlist.tracks) {
songList.value = playlist.tracks;
}
}
// 初始化歌曲列表
initSongList(songList.value);
} catch (error) {
@@ -376,12 +395,12 @@ const getCoverImgUrl = computed(() => {
});
const getDisplaySongs = computed(() => {
if(routeType === 'dailyRecommend') {
if (routeType === 'dailyRecommend') {
return displayedSongs.value.filter((song) => !playerStore.dislikeList.includes(song.id));
}else {
} else {
return displayedSongs.value;
}
})
});
// 过滤歌曲列表
const filteredSongs = computed(() => {
@@ -663,17 +682,17 @@ const handleRemoveSong = async (songId: number) => {
if (res.status === 200) {
message.success(t('user.message.deleteSuccess'));
// 从显示列表和完整播放列表中移除歌曲
displayedSongs.value = displayedSongs.value.filter(song => song.id !== songId);
completePlaylist.value = completePlaylist.value.filter(song => song.id !== songId);
displayedSongs.value = displayedSongs.value.filter((song) => song.id !== songId);
completePlaylist.value = completePlaylist.value.filter((song) => song.id !== songId);
// 如果正在播放该列表，也需要更新播放列表
const currentPlaylist = playerStore.playList;
if (currentPlaylist.length > 0 && currentPlaylist[0].id === displayedSongs.value[0]?.id) {
playerStore.setPlayList(displayedSongs.value.map(formatSong));
}
// 从Pinia状态中也移除
if (musicStore.currentMusicList) {
musicStore.removeSongFromList(songId);
@@ -810,7 +829,7 @@ const checkCollectionStatus = () => {
// 切换收藏状态
const toggleCollect = async () => {
if (!listInfo.value?.id) return;
try {
loadingList.value = true;
const tVal = isCollected.value ? 2 : 1; // 1:收藏, 2:取消收藏
@@ -818,13 +837,13 @@ const toggleCollect = async () => {
t: tVal,
id: listInfo.value.id
});
// 假设API返回格式是 { data: { code: number, msg?: string } }
const res = response.data;
if (res.code === 200) {
isCollected.value = !isCollected.value;
const msgKey = isCollected.value
const msgKey = isCollected.value
? 'comp.musicList.collectSuccess'
: 'comp.musicList.cancelCollectSuccess';
message.success(t(msgKey));
@@ -844,14 +863,14 @@ const toggleCollect = async () => {
// 播放全部
const handlePlayAll = () => {
if (displayedSongs.value.length === 0) return;
// 如果有搜索关键词，只播放过滤后的歌曲
if (searchKeyword.value) {
playerStore.setPlayList(filteredSongs.value.map(formatSong));
playerStore.setPlay(formatSong(filteredSongs.value[0]));
return;
}
// 否则播放全部歌曲
// 使用setPlayList设置播放列表
playerStore.setPlayList(displayedSongs.value.map(formatSong));
@@ -862,29 +881,25 @@ const handlePlayAll = () => {
// 添加到播放列表末尾
const addToPlaylist = () => {
if (displayedSongs.value.length === 0) return;
// 获取当前播放列表
const currentList = playerStore.playList;
// 如果有搜索关键词，只添加过滤后的歌曲
const songsToAdd = searchKeyword.value
? filteredSongs.value
: displayedSongs.value;
const songsToAdd = searchKeyword.value ? filteredSongs.value : displayedSongs.value;
// 添加歌曲到播放列表(避免重复添加)
const newSongs = songsToAdd.filter(song =>
!currentList.some(item => item.id === song.id)
);
const newSongs = songsToAdd.filter((song) => !currentList.some((item) => item.id === song.id));
if (newSongs.length === 0) {
message.info(t('comp.musicList.songsAlreadyInPlaylist'));
return;
}
// 合并到当前播放列表末尾
const newList = [...currentList, ...newSongs.map(formatSong)];
playerStore.setPlayList(newList);
message.success(t('comp.musicList.addToPlaylistSuccess', { count: newSongs.length }));
};
@@ -910,15 +925,11 @@ const handleSelect = (songId: number, selected: boolean) => {
};
const isAllSelected = computed(() => {
return (
filteredSongs.value.length > 0 &&
selectedSongs.value.length === filteredSongs.value.length
filteredSongs.value.length > 0 && selectedSongs.value.length === filteredSongs.value.length
);
});
const isIndeterminate = computed(() => {
return (
selectedSongs.value.length > 0 &&
selectedSongs.value.length < filteredSongs.value.length
);
return selectedSongs.value.length > 0 && selectedSongs.value.length < filteredSongs.value.length;
});
const handleSelectAll = (checked: boolean) => {
if (checked) {
@@ -1004,7 +1015,7 @@ const handleBatchDownload = async () => {
.search-button {
@apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400 hover:text-green-500;
.icon {
@apply text-lg;
}
@@ -1013,7 +1024,6 @@ const handleBatchDownload = async () => {
:deep(.n-input) {
@apply bg-light-200 dark:bg-dark-200;
}
}
.no-result {
@@ -1079,7 +1089,7 @@ const handleBatchDownload = async () => {
.layout-toggle {
.toggle-button {
@apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors;
.icon {
@apply text-lg text-gray-500 dark:text-gray-400 transition-colors;
}
@@ -1089,7 +1099,7 @@ const handleBatchDownload = async () => {
.layout-toggle .toggle-button,
.action-button {
@apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400;
.icon {
@apply text-lg;
}
@@ -1099,11 +1109,11 @@ const handleBatchDownload = async () => {
@apply text-red-500;
}
}
&.hover-green:hover {
.icon {
@apply text-green-500;
}
}
}
</style>
</style>
src/renderer/views/playlist/ImportPlaylist.vue
+72 -67
View File
@@ -213,10 +213,11 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useMessage } from 'naive-ui';
import { importPlaylist, getImportTaskStatus } from '@/api/playlist';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { getImportTaskStatus, importPlaylist } from '@/api/playlist';
import { setAnimationClass } from '@/utils';
const { t } = useI18n();
@@ -240,7 +241,7 @@ const removeLinkRow = (index: number) => {
// 验证链接是否有效
const isLinkInputValid = computed(() => {
return linkInputs.value.some(item => item.value.trim() !== '');
return linkInputs.value.some((item) => item.value.trim() !== '');
});
// 元数据相关函数
@@ -254,7 +255,7 @@ const removeMetadataRow = (index: number) => {
// 验证元数据是否有效
const isLocalMetadataValid = computed(() => {
return localMetadata.value.some(item => item.name.trim() !== '');
return localMetadata.value.some((item) => item.name.trim() !== '');
});
// 导入状态
@@ -275,26 +276,26 @@ const handleImportByLink = async () => {
try {
importing.value = true;
// 处理链接格式
const links = linkInputs.value
.filter(link => link.value.trim())
.map(link => link.value.trim());
.filter((link) => link.value.trim())
.map((link) => link.value.trim());
const encodedLinks = JSON.stringify(links);
const params: any = {
link: encodedLinks
};
if (importToStarPlaylist.value) {
params.importStarPlaylist = true;
} else if (playlistName.value) {
params.playlistName = playlistName.value;
}
const res = await importPlaylist(params);
if (res.data.code === 200) {
message.success(t('comp.playlist.import.importSuccess'));
taskId.value = res.data.data.taskId;
@@ -319,21 +320,21 @@ const handleImportByText = async () => {
try {
importing.value = true;
const encodedText = encodeURIComponent(textInput.value);
const params: any = {
text: encodedText
};
if (importToStarPlaylist.value) {
params.importStarPlaylist = true;
} else if (playlistName.value) {
params.playlistName = playlistName.value;
}
const res = await importPlaylist(params);
if (res.data.code === 200) {
message.success(t('comp.playlist.import.importSuccess'));
taskId.value = res.data.data.taskId;
@@ -358,24 +359,24 @@ const handleImportByLocal = async () => {
try {
importing.value = true;
// 过滤掉空的行
const filteredData = localMetadata.value.filter(item => item.name.trim() !== '');
const filteredData = localMetadata.value.filter((item) => item.name.trim() !== '');
const encodedLocal = JSON.stringify(filteredData);
const params: any = {
local: encodedLocal
};
if (importToStarPlaylist.value) {
params.importStarPlaylist = true;
} else if (playlistName.value) {
params.playlistName = playlistName.value;
}
const res = await importPlaylist(params);
if (res.data.code === 200) {
message.success(t('comp.playlist.import.importSuccess'));
taskId.value = res.data.data.taskId;
@@ -397,10 +398,10 @@ const startStatusCheck = () => {
if (statusCheckInterval.value) {
clearInterval(statusCheckInterval.value);
}
// 立即检查一次
checkTaskStatus();
// 设置定时检查
statusCheckInterval.value = window.setInterval(() => {
checkTaskStatus();
@@ -410,25 +411,25 @@ const startStatusCheck = () => {
// 检查任务状态
const checkTaskStatus = async () => {
if (!taskId.value) return;
try {
checkingStatus.value = true;
const res = await getImportTaskStatus(taskId.value);
if (res.data.code === 200) {
// 新的API返回格式处理
if (res.data.data.tasks && res.data.data.tasks.length > 0) {
const taskData = res.data.data.tasks[0];
// 将API返回的status映射到组件内部使用的taskStatus
const statusMap: Record<string, string> = {
'PENDING': 'pending',
'PROCESSING': 'processing',
'COMPLETE': 'success',
'FAILED': 'failed'
PENDING: 'pending',
PROCESSING: 'processing',
COMPLETE: 'success',
FAILED: 'failed'
};
taskStatus.value = statusMap[taskData.status] || 'pending';
if (taskStatus.value === 'success') {
successCount.value = taskData.succCount || 0;
// 成功后停止检查
@@ -497,12 +498,12 @@ onUnmounted(() => {
.import-header {
@apply flex justify-between items-center mb-6;
.import-header-left {
h2 {
@apply text-2xl font-bold text-gray-900 dark:text-white mb-2;
}
.import-desc {
@apply text-sm text-gray-500 dark:text-gray-400;
}
@@ -515,62 +516,65 @@ onUnmounted(() => {
.import-card {
@apply rounded-lg;
.tab-content {
@apply mt-4 space-y-4;
}
.link-tips, .text-tips, .local-tips {
.link-tips,
.text-tips,
.local-tips {
@apply text-sm text-gray-500 dark:text-gray-400;
ul {
@apply list-disc pl-5 mt-2;
}
}
.text-format, .local-format {
.text-format,
.local-format {
@apply mt-2 font-medium;
}
.code-example {
@apply mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-sm overflow-auto;
}
.link-inputs {
@apply space-y-3;
.link-row {
@apply flex items-center space-x-2;
.link-input {
@apply flex-1;
}
}
.link-actions {
@apply mt-3 flex justify-end;
}
}
.metadata-inputs {
@apply space-y-3;
.metadata-row {
@apply flex items-center space-x-2;
.metadata-input {
@apply flex-1;
}
}
.metadata-actions {
@apply mt-3 flex justify-end;
}
}
.action-buttons {
@apply flex items-center space-x-4 mt-6;
.playlist-name-input {
@apply max-w-xs;
}
@@ -579,49 +583,50 @@ onUnmounted(() => {
.import-status-card {
@apply rounded-lg;
.status-header {
@apply flex justify-between items-center mb-4;
h3 {
@apply text-lg font-medium text-gray-900 dark:text-white;
}
}
.status-content {
@apply space-y-3;
}
.status-item {
@apply flex items-center;
.status-label {
@apply text-gray-500 dark:text-gray-400 w-24;
}
.status-value {
@apply font-medium;
}
.status-pending, .status-processing {
.status-pending,
.status-processing {
@apply text-blue-500;
}
.status-success {
@apply text-green-500;
}
.status-failed {
@apply text-red-500;
}
.success-count {
@apply text-green-500;
}
.fail-reason {
@apply text-red-500;
}
}
}
</style>
</style>
src/renderer/views/search/index.vue
+4 -4
View File
@@ -431,10 +431,10 @@ const handlePlayBilibili = (item: IBilibiliSearchResult) => {
const handlePlayAll = () => {
if (!searchDetail.value?.songs?.length) return;
// 设置播放列表为搜索结果中的所有歌曲
playerStore.setPlayList(searchDetail.value.songs);
// 开始播放第一首歌
if (searchDetail.value.songs[0]) {
playerStore.setPlay(searchDetail.value.songs[0]);
@@ -493,7 +493,7 @@ const handlePlayAll = () => {
.title {
@apply text-xl font-bold my-2 mx-4 flex items-center;
@apply text-gray-900 dark:text-white;
&-play-all {
@apply ml-auto;
}
@@ -502,7 +502,7 @@ const handlePlayAll = () => {
.play-all-btn {
@apply flex items-center gap-1 px-3 py-1 rounded-full cursor-pointer transition-all;
@apply text-sm font-normal text-gray-900 dark:text-white hover:bg-light-300 dark:hover:bg-dark-300 hover:text-green-500;
i {
@apply text-xl;
}
src/renderer/views/set/index.vue
+60 -41
View File
@@ -32,11 +32,15 @@
<template #unchecked><i class="ri-settings-line"></i></template>
</n-switch>
<span class="text-sm text-gray-500">
{{ setData.autoTheme ? t('settings.basic.autoTheme') : t('settings.basic.manualTheme') }}
{{
setData.autoTheme
? t('settings.basic.autoTheme')
: t('settings.basic.manualTheme')
}}
</span>
</div>
<n-switch
v-model:value="isDarkTheme"
<n-switch
v-model:value="isDarkTheme"
:disabled="setData.autoTheme"
:class="{ 'opacity-50': setData.autoTheme }"
>
@@ -118,19 +122,22 @@
</div>
</div>
<div class="flex items-center gap-2">
<span class="text-sm text-gray-400" v-if="!isMobile">{{ setData.animationSpeed }}x</span>
<span class="text-sm text-gray-400" v-if="!isMobile"
>{{ setData.animationSpeed }}x</span
>
<div class="w-40 flex justify-end">
<template v-if="!isMobile"><n-slider
v-model:value="setData.animationSpeed"
:min="0.1"
:max="3"
:step="0.1"
:marks="{
0.1: t('settings.basic.animationSpeed.slow'),
1: t('settings.basic.animationSpeed.normal'),
3: t('settings.basic.animationSpeed.fast')
}"
:disabled="setData.noAnimate"
<template v-if="!isMobile"
><n-slider
v-model:value="setData.animationSpeed"
:min="0.1"
:max="3"
:step="0.1"
:marks="{
0.1: t('settings.basic.animationSpeed.slow'),
1: t('settings.basic.animationSpeed.normal'),
3: t('settings.basic.animationSpeed.fast')
}"
:disabled="setData.noAnimate"
/></template>
<template v-else>
<n-input-number
@@ -179,13 +186,28 @@
/>
</div>
<!-- 网易云 QQ 音乐 酷我 酷狗 会员购买链接 -->
<div class="p-2 bg-light-100 dark:bg-dark-100 rounded-lg mt-2">
<div>大家还是需要支持正版，本软件只做开源探讨</div>
<div class="p-2 bg-light-100 dark:bg-dark-100 rounded-lg mt-2">
<div>大家还是需要支持正版，本软件只做开源探讨</div>
<div class="mt-2">各大音乐会员购买链接</div>
<div class="flex gap-5 flex-wrap">
<a class="text-green-400 hover:text-green-500" href="https://music.163.com/store/vip" target="_blank">网易云音乐会员</a>
<a class="text-green-400 hover:text-green-500" href="https://y.qq.com/portal/vipportal/" target="_blank">QQ音乐会员</a>
<a class="text-green-400 hover:text-green-500" href="https://vip.kugou.com/" target="_blank">酷狗音乐会员</a>
<a
class="text-green-400 hover:text-green-500"
href="https://music.163.com/store/vip"
target="_blank"
>网易云音乐会员</a
>
<a
class="text-green-400 hover:text-green-500"
href="https://y.qq.com/portal/vipportal/"
target="_blank"
>QQ音乐会员</a
>
<a
class="text-green-400 hover:text-green-500"
href="https://vip.kugou.com/"
target="_blank"
>酷狗音乐会员</a
>
</div>
</div>
</div>
@@ -202,7 +224,9 @@
</div>
<div v-if="setData.enableMusicUnblock" class="mt-2">
<div class="text-sm">
<span class="text-gray-500">{{ t('settings.playback.selectedMusicSources') }}</span>
<span class="text-gray-500">{{
t('settings.playback.selectedMusicSources')
}}</span>
<span v-if="musicSources.length > 0" class="text-gray-400">
{{ musicSources.join(', ') }}
</span>
@@ -213,8 +237,8 @@
</div>
</div>
</div>
<n-button
size="small"
<n-button
size="small"
:disabled="!setData.enableMusicUnblock"
@click="showMusicSourcesModal = true"
>
@@ -225,7 +249,9 @@
<div class="set-item" v-if="platform === 'darwin'">
<div>
<div class="set-item-title">{{ t('settings.playback.showStatusBar') }}</div>
<div class="set-item-content">{{ t('settings.playback.showStatusBarContent') }}</div>
<div class="set-item-content">
{{ t('settings.playback.showStatusBarContent') }}
</div>
</div>
<n-switch v-model:value="setData.showTopAction">
<template #checked>{{ t('common.on') }}</template>
@@ -325,7 +351,9 @@
<div class="set-item">
<div>
<div class="set-item-title">{{ t('settings.application.remoteControl') }}</div>
<div class="set-item-content">{{ t('settings.application.remoteControlDesc') }}</div>
<div class="set-item-content">
{{ t('settings.application.remoteControlDesc') }}
</div>
</div>
<n-button size="small" @click="showRemoteControlModal = true">{{
t('common.configure')
@@ -483,30 +511,21 @@
<shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
<!-- 代理设置弹窗 -->
<proxy-settings
v-model:show="showProxyModal"
<proxy-settings
v-model:show="showProxyModal"
:config="proxyForm"
@confirm="handleProxyConfirm"
/>
<!-- 音源设置弹窗 -->
<music-source-settings
v-model:show="showMusicSourcesModal"
v-model:sources="musicSources"
/>
<music-source-settings v-model:show="showMusicSourcesModal" v-model:sources="musicSources" />
<!-- 远程控制设置弹窗 -->
<remote-control-setting v-model:visible="showRemoteControlModal" />
</template>
<!-- 清除缓存弹窗 -->
<clear-cache-settings
v-model:show="showClearCacheModal"
@confirm="clearCache"
/>
<clear-cache-settings v-model:show="showClearCacheModal" @confirm="clearCache" />
</div>
</template>
@@ -521,17 +540,17 @@ import Coffee from '@/components/Coffee.vue';
import DonationList from '@/components/common/DonationList.vue';
import PlayBottom from '@/components/common/PlayBottom.vue';
import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
import ProxySettings from '@/components/settings/ProxySettings.vue';
import ClearCacheSettings from '@/components/settings/ClearCacheSettings.vue';
import MusicSourceSettings from '@/components/settings/MusicSourceSettings.vue';
import ProxySettings from '@/components/settings/ProxySettings.vue';
import RemoteControlSetting from '@/components/settings/ServerSetting.vue';
import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
import { useSettingsStore } from '@/store/modules/settings';
import { useUserStore } from '@/store/modules/user';
import { type Platform } from '@/types/music';
import { isElectron, isMobile } from '@/utils';
import { openDirectory, selectDirectory } from '@/utils/fileOperation';
import { checkUpdate, UpdateResult } from '@/utils/update';
import { type Platform } from '@/types/music';
import config from '../../../../package.json';
src/renderer/views/toplist/index.vue
+5 -5
View File
@@ -40,7 +40,7 @@
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { getToplist, getListDetail } from '@/api/list';
import { getListDetail, getToplist } from '@/api/list';
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
import type { IListDetail } from '@/type/listDetail';
import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
@@ -63,11 +63,11 @@ const router = useRouter();
const openToplist = (item: any) => {
listLoading.value = true;
getListDetail(item.id).then(res => {
getListDetail(item.id).then((res) => {
listDetail.value = res.data;
listLoading.value = false;
navigateToMusicList(router, {
id: item.id,
type: 'playlist',
@@ -175,4 +175,4 @@ onMounted(() => {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
</style>
</style>
src/renderer/views/user/detail.vue
+22 -15
View File
@@ -103,7 +103,13 @@
:class="setAnimationClass('animate__bounceInUp')"
:style="setAnimationDelay(index, 25)"
>
<song-item class="song-item" :index="index" :item="item" compact @play="handlePlay" />
<song-item
class="song-item"
:index="index"
:item="item"
compact
@play="handlePlay"
/>
</div>
</div>
</n-tab-pane>
@@ -128,8 +134,8 @@ import { useRoute, useRouter } from 'vue-router';
import { getListDetail } from '@/api/list';
import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
import SongItem from '@/components/common/SongItem.vue';
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
import SongItem from '@/components/common/SongItem.vue';
import { usePlayerStore } from '@/store/modules/player';
import type { Playlist } from '@/type/listDetail';
import type { IUserDetail } from '@/type/user';
@@ -190,7 +196,7 @@ const loadUserData = async () => {
// 2. 单独处理听歌记录请求，这个请求可能会无权限
try {
const recordRes = await getUserRecord(userId.value);
if (recordRes.data && recordRes.data.allData) {
recordList.value = recordRes.data.allData.map((item: any) => ({
...item,
@@ -233,11 +239,11 @@ watch(
// 替换显示歌单的方法
const openPlaylist = (item: any) => {
listLoading.value = true;
getListDetail(item.id).then(res => {
getListDetail(item.id).then((res) => {
currentList.value = res.data.playlist;
listLoading.value = false;
navigateToMusicList(router, {
id: item.id,
type: 'playlist',
@@ -260,12 +266,12 @@ const handlePlay = () => {
// 显示关注列表
const showFollowList = () => {
if (!userDetail.value) return;
router.push({
path: `/user/follows`,
query: {
query: {
uid: userId.value.toString(),
name: userDetail.value.profile.nickname
name: userDetail.value.profile.nickname
}
});
};
@@ -273,12 +279,12 @@ const showFollowList = () => {
// 显示粉丝列表
const showFollowerList = () => {
if (!userDetail.value) return;
router.push({
path: `/user/followers`,
query: {
query: {
uid: userId.value.toString(),
name: userDetail.value.profile.nickname
name: userDetail.value.profile.nickname
}
});
};
@@ -340,8 +346,9 @@ const isArtist = (profile: any) => {
.label {
@apply text-lg font-bold;
}
&:nth-child(1), &:nth-child(2) {
&:nth-child(1),
&:nth-child(2) {
@apply cursor-pointer transition-all duration-200;
@apply hover:bg-black hover:bg-opacity-20 rounded-lg px-2;
}
@@ -426,7 +433,7 @@ const isArtist = (profile: any) => {
.no-permission {
@apply flex flex-col items-center justify-center text-gray-500 dark:text-gray-400;
@apply p-4 rounded-lg;
i {
@apply text-3xl mb-2;
}
src/renderer/views/user/followers.vue
+17 -18
View File
@@ -7,7 +7,7 @@
<div class="page-title" v-else>
{{ t('user.follower.myFollowersTitle') }}
</div>
<n-spin v-if="followerListLoading && followerList.length === 0" size="large" />
<n-scrollbar v-else class="scrollbar-container">
<div v-if="followerList.length === 0" class="empty-follower">
@@ -69,7 +69,7 @@
import { useMessage } from 'naive-ui';
import { computed, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { getUserFollowers } from '@/api/user';
import { useUserStore } from '@/store/modules/user';
@@ -101,13 +101,13 @@ const user = computed(() => userStore.user);
const checkTargetUser = () => {
const uid = route.query.uid;
const name = route.query.name;
if (uid && typeof uid === 'string') {
targetUserId.value = parseInt(uid);
targetUserName.value = typeof name === 'string' ? name : '';
return true;
}
// 如果没有指定用户ID，则显示当前登录用户的粉丝列表
return checkLoginStatus();
};
@@ -133,17 +133,13 @@ const checkLoginStatus = () => {
// 加载粉丝列表
const loadFollowerList = async () => {
// 确定要加载哪个用户的粉丝列表
const userId = targetUserId.value || (user.value?.userId);
const userId = targetUserId.value || user.value?.userId;
if (!userId) return;
try {
followerListLoading.value = true;
const { data } = await getUserFollowers(
userId,
followerLimit.value,
followerOffset.value
);
const { data } = await getUserFollowers(userId, followerLimit.value, followerOffset.value);
if (!data || !data.followeds) {
hasMoreFollowers.value = false;
@@ -191,14 +187,17 @@ onMounted(() => {
});
// 监听路由变化重新加载数据
watch(() => route.query, (newQuery) => {
if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
followerList.value = []; // 清空列表
followerOffset.value = 0; // 重置偏移量
checkTargetUser();
loadFollowerList();
watch(
() => route.query,
(newQuery) => {
if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
followerList.value = []; // 清空列表
followerOffset.value = 0; // 重置偏移量
checkTargetUser();
loadFollowerList();
}
}
});
);
</script>
<style lang="scss" scoped>
src/renderer/views/user/follows.vue
+16 -13
View File
@@ -7,7 +7,7 @@
<div class="page-title" v-else>
{{ t('user.follow.myFollowsTitle') }}
</div>
<n-spin v-if="followListLoading && followList.length === 0" size="large" />
<n-scrollbar v-else class="scrollbar-container">
<div v-if="followList.length === 0" class="empty-follow">
@@ -69,7 +69,7 @@
import { useMessage } from 'naive-ui';
import { computed, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { getUserFollows } from '@/api/user';
import { useUserStore } from '@/store/modules/user';
@@ -101,13 +101,13 @@ const user = computed(() => userStore.user);
const checkTargetUser = () => {
const uid = route.query.uid;
const name = route.query.name;
if (uid && typeof uid === 'string') {
targetUserId.value = parseInt(uid);
targetUserName.value = typeof name === 'string' ? name : '';
return true;
}
// 如果没有指定用户ID，则显示当前登录用户的关注列表
return checkLoginStatus();
};
@@ -133,8 +133,8 @@ const checkLoginStatus = () => {
// 加载关注列表
const loadFollowList = async () => {
// 确定要加载哪个用户的关注列表
const userId = targetUserId.value || (user.value?.userId);
const userId = targetUserId.value || user.value?.userId;
if (!userId) return;
try {
@@ -187,14 +187,17 @@ onMounted(() => {
});
// 监听路由变化重新加载数据
watch(() => route.query, (newQuery) => {
if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
followList.value = []; // 清空列表
followOffset.value = 0; // 重置偏移量
checkTargetUser();
loadFollowList();
watch(
() => route.query,
(newQuery) => {
if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
followList.value = []; // 清空列表
followOffset.value = 0; // 重置偏移量
checkTargetUser();
loadFollowList();
}
}
});
);
</script>
<style lang="scss" scoped>
src/renderer/views/user/index.vue
+18 -12
View File
@@ -30,7 +30,9 @@
<div class="play-list" :class="setAnimationClass('animate__fadeInLeft')">
<div class="title">
<div>{{ t('user.playlist.created') }}</div>
<div class="import-btn" @click="goToImportPlaylist" v-if="isElectron">{{ t('comp.playlist.import.button') }}</div>
<div class="import-btn" @click="goToImportPlaylist" v-if="isElectron">
{{ t('comp.playlist.import.button') }}
</div>
</div>
<n-scrollbar>
<div
@@ -91,7 +93,11 @@
</div>
</div>
<!-- 未登录时显示登录组件 -->
<div v-if="!isLoggedIn && isMobile" class="login-container" :class="setAnimationClass('animate__fadeIn')">
<div
v-if="!isLoggedIn && isMobile"
class="login-container"
:class="setAnimationClass('animate__fadeIn')"
>
<login-component @login-success="handleLoginSuccess" />
</div>
</div>
@@ -105,9 +111,9 @@ import { useRouter } from 'vue-router';
import { getListDetail } from '@/api/list';
import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
import PlayBottom from '@/components/common/PlayBottom.vue';
import SongItem from '@/components/common/SongItem.vue';
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
import { usePlayerStore } from '@/store/modules/player';
import { useUserStore } from '@/store/modules/user';
import type { Playlist } from '@/type/listDetail';
@@ -243,11 +249,11 @@ onMounted(() => {
// 替换显示歌单的方法
const openPlaylist = (item: any) => {
listLoading.value = true;
getListDetail(item.id).then(res => {
getListDetail(item.id).then((res) => {
list.value = res.data.playlist;
listLoading.value = false;
navigateToMusicList(router, {
id: item.id,
type: 'playlist',
@@ -300,11 +306,11 @@ const isLoggedIn = computed(() => userStore.user);
.title {
@apply text-lg font-bold flex items-center justify-between;
@apply text-gray-900 dark:text-white;
.import-btn {
@apply bg-light-100 font-normal rounded-lg px-2 py-1 text-opacity-70 text-sm hover:bg-light-200 hover:text-green-500 dark:bg-dark-200 dark:hover:bg-dark-300 dark:hover:text-green-400;
@apply cursor-pointer;
@apply transition-all duration-200;
}
.import-btn {
@apply bg-light-100 font-normal rounded-lg px-2 py-1 text-opacity-70 text-sm hover:bg-light-200 hover:text-green-500 dark:bg-dark-200 dark:hover:bg-dark-300 dark:hover:text-green-400;
@apply cursor-pointer;
@apply transition-all duration-200;
}
}
.user-name {
@@ -388,7 +394,7 @@ const isLoggedIn = computed(() => userStore.user);
&-name {
@apply text-gray-900 dark:text-white text-base flex items-center gap-2;
.playlist-creator-tag {
@apply inline-flex items-center justify-center px-2 rounded-full text-xs;
@apply bg-light-300 text-primary dark:bg-dark-300 dark:text-white;