mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-16 07:50:50 +08:00
feat: 优化页面样式边距
This commit is contained in:
alger
1
.gitignore
vendored
1
.gitignore
vendored
@@ -33,6 +33,7 @@ android/app/release
|
||||
.windsurf
|
||||
.agent
|
||||
.claude
|
||||
.kiro
|
||||
CLAUDE.md
|
||||
AGENTS.md
|
||||
.sisyphus
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container" :class="{ mobile: isMobile, noElectron: !isElectron }">
|
||||
<div class="app-container h-full w-full" :class="{ mobile: isMobile, noElectron: !isElectron }">
|
||||
<n-config-provider :theme="theme === 'dark' ? darkTheme : lightTheme">
|
||||
<n-dialog-provider>
|
||||
<n-message-provider>
|
||||
@@ -177,7 +177,6 @@ onMounted(async () => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
@apply h-full w-full;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="eq-control">
|
||||
<div class="eq-header">
|
||||
<h3>
|
||||
<div class="eq-control p-6 rounded-lg bg-gray-100 dark:bg-gray-900 w-full max-w-[700px]">
|
||||
<div class="eq-header flex justify-between items-center mb-4">
|
||||
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
|
||||
{{ t('player.eq.title') }}
|
||||
<n-tag type="warning" size="small" round v-if="!isElectron">
|
||||
桌面版可用，网页端不支持
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eq-presets">
|
||||
<div class="eq-presets mb-2 relative h-10">
|
||||
<n-scrollbar x-scrollable>
|
||||
<n-space :size="6" :wrap="false">
|
||||
<n-tag
|
||||
@@ -34,9 +34,19 @@
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
|
||||
<div class="eq-sliders">
|
||||
<div v-for="freq in frequencies" :key="freq" class="eq-slider">
|
||||
<div class="freq-label">{{ formatFreq(freq) }}</div>
|
||||
<div
|
||||
class="eq-sliders flex justify-between items-end bg-gray-50 dark:bg-gray-800 gap-1 rounded-lg p-2 h-[300px]"
|
||||
>
|
||||
<div
|
||||
v-for="freq in frequencies"
|
||||
:key="freq"
|
||||
class="eq-slider flex flex-col items-center w-[45px] h-full"
|
||||
>
|
||||
<div
|
||||
class="freq-label text-xs font-medium text-center text-gray-600 dark:text-gray-400 whitespace-nowrap m-2 h-5"
|
||||
>
|
||||
{{ formatFreq(freq) }}
|
||||
</div>
|
||||
<n-slider
|
||||
v-model:value="eqValues[freq.toString()]"
|
||||
:min="-12"
|
||||
@@ -45,8 +55,13 @@
|
||||
vertical
|
||||
:disabled="!isEnabled"
|
||||
@update:value="updateEQ(freq.toString(), $event)"
|
||||
class="flex-1 my-3 min-h-[180px]"
|
||||
/>
|
||||
<div class="gain-value">{{ eqValues[freq.toString()] }}dB</div>
|
||||
<div
|
||||
class="gain-value text-xs font-medium text-center text-gray-600 dark:text-gray-400 whitespace-nowrap my-1 h-4"
|
||||
>
|
||||
{{ eqValues[freq.toString()] }}dB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -267,91 +282,39 @@ const formatFreq = (freq: number) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.eq-control {
|
||||
@apply p-6 rounded-lg;
|
||||
@apply bg-light dark:bg-dark;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
:deep(.n-scrollbar) {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.eq-header {
|
||||
@apply flex justify-between items-center mb-4;
|
||||
:deep(.n-tag) {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
|
||||
h3 {
|
||||
@apply text-xl font-semibold;
|
||||
@apply text-gray-800 dark:text-gray-200;
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.eq-presets {
|
||||
@apply mb-2 relative;
|
||||
height: 40px;
|
||||
|
||||
:deep(.n-scrollbar) {
|
||||
@apply -mx-2 px-2;
|
||||
}
|
||||
|
||||
:deep(.n-tag) {
|
||||
@apply cursor-pointer transition-all duration-200;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-space) {
|
||||
flex-wrap: nowrap;
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.eq-sliders {
|
||||
@apply flex justify-between items-end;
|
||||
@apply bg-gray-50 dark:bg-gray-800 gap-1;
|
||||
@apply rounded-lg p-2;
|
||||
height: 300px;
|
||||
|
||||
.eq-slider {
|
||||
@apply flex flex-col items-center;
|
||||
width: 45px;
|
||||
height: 100%;
|
||||
|
||||
.n-slider {
|
||||
flex: 1;
|
||||
margin: 12px 0;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.freq-label {
|
||||
@apply text-xs font-medium text-center;
|
||||
@apply text-gray-600 dark:text-gray-400;
|
||||
white-space: nowrap;
|
||||
margin: 8px 0;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.gain-value {
|
||||
@apply text-xs font-medium text-center;
|
||||
@apply text-gray-600 dark:text-gray-400;
|
||||
white-space: nowrap;
|
||||
margin: 4px 0;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.n-space) {
|
||||
flex-wrap: nowrap;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
:deep(.n-slider) {
|
||||
--n-rail-height: 4px;
|
||||
--n-rail-color: theme('colors.gray.200');
|
||||
--n-rail-color-hover: theme('colors.gray.300');
|
||||
--n-fill-color: theme('colors.green.500');
|
||||
--n-fill-color-hover: theme('colors.green.600');
|
||||
--n-handle-color: theme('colors.green.500');
|
||||
--n-rail-color: #e5e7eb;
|
||||
--n-rail-color-hover: #d1d5db;
|
||||
--n-fill-color: #22c55e;
|
||||
--n-fill-color-hover: #16a34a;
|
||||
--n-handle-color: #22c55e;
|
||||
--n-handle-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.n-slider-handle {
|
||||
@apply transition-all duration-200;
|
||||
transition: all 0.2s;
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
@@ -1,729 +0,0 @@
|
||||
<template>
|
||||
<n-drawer
|
||||
:show="show"
|
||||
:height="isMobile ? '100%' : '80%'"
|
||||
placement="bottom"
|
||||
block-scroll
|
||||
mask-closable
|
||||
:style="{ backgroundColor: 'transparent' }"
|
||||
:to="`#layout-main`"
|
||||
:z-index="zIndex"
|
||||
@mask-click="close"
|
||||
>
|
||||
<div class="music-page">
|
||||
<div class="music-header h-12 flex items-center justify-between">
|
||||
<n-ellipsis :line-clamp="1" class="flex-shrink-0 mr-3">
|
||||
<div class="music-title">
|
||||
{{ name }}
|
||||
</div>
|
||||
</n-ellipsis>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="flex-grow flex-1 flex items-center justify-end">
|
||||
<div class="search-container">
|
||||
<n-input
|
||||
v-model:value="searchKeyword"
|
||||
:placeholder="t('comp.musicList.searchSongs')"
|
||||
clearable
|
||||
round
|
||||
size="small"
|
||||
>
|
||||
<template #prefix>
|
||||
<i class="icon iconfont ri-search-line text-sm"></i>
|
||||
</template>
|
||||
</n-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="music-close flex-shrink-0 ml-3">
|
||||
<i class="icon iconfont ri-close-line" @click="close"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="music-content">
|
||||
<!-- 左侧歌单信息 -->
|
||||
<div class="music-info">
|
||||
<div class="music-cover">
|
||||
<n-image
|
||||
:src="getCoverImgUrl"
|
||||
class="cover-img"
|
||||
preview-disabled
|
||||
:class="setAnimationClass('animate__fadeIn')"
|
||||
object-fit="cover"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="listInfo?.creator" class="creator-info">
|
||||
<n-avatar round :size="24" :src="getImgUrl(listInfo.creator.avatarUrl, '50y50')" />
|
||||
<span class="creator-name">{{ listInfo.creator.nickname }}</span>
|
||||
</div>
|
||||
<div v-if="total" class="music-total">{{ t('player.songNum', { num: total }) }}</div>
|
||||
|
||||
<n-scrollbar style="max-height: 200px">
|
||||
<div v-if="listInfo?.description" class="music-desc">
|
||||
{{ listInfo.description }}
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
|
||||
<!-- 右侧歌曲列表 -->
|
||||
<div class="music-list-container">
|
||||
<div class="music-list">
|
||||
<n-spin :show="loadingList || loading">
|
||||
<div class="music-list-content">
|
||||
<div v-if="filteredSongs.length === 0 && searchKeyword" class="no-result">
|
||||
{{ t('comp.musicList.noSearchResults') }}
|
||||
</div>
|
||||
|
||||
<!-- 虚拟列表，设置正确的固定高度 -->
|
||||
<n-virtual-list
|
||||
ref="songListRef"
|
||||
class="song-virtual-list"
|
||||
style="height: calc(70vh - 60px)"
|
||||
:items="filteredSongs"
|
||||
:item-size="70"
|
||||
item-resizable
|
||||
key-field="id"
|
||||
@scroll="handleVirtualScroll"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<div class="double-item">
|
||||
<song-item
|
||||
:item="formatSong(item)"
|
||||
:can-remove="canRemove"
|
||||
@play="handlePlay"
|
||||
@remove-song="(id) => emit('remove-song', id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</n-virtual-list>
|
||||
</div>
|
||||
</n-spin>
|
||||
</div>
|
||||
<play-bottom />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import PinyinMatch from 'pinyin-match';
|
||||
import { computed, onUnmounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { getMusicDetail } from '@/api/music';
|
||||
import SongItem from '@/components/common/SongItem.vue';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { SongResult } from '@/types/music';
|
||||
import { getImgUrl, isMobile, setAnimationClass } from '@/utils';
|
||||
|
||||
import PlayBottom from './common/PlayBottom.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const playerStore = usePlayerStore();
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
show: boolean;
|
||||
name: string;
|
||||
zIndex?: number;
|
||||
songList: any[];
|
||||
loading?: boolean;
|
||||
listInfo?: {
|
||||
trackIds: { id: number }[];
|
||||
[key: string]: any;
|
||||
};
|
||||
cover?: boolean;
|
||||
canRemove?: boolean;
|
||||
}>(),
|
||||
{
|
||||
loading: false,
|
||||
cover: true,
|
||||
zIndex: 9996,
|
||||
canRemove: false
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(['update:show', 'update:loading', 'remove-song']);
|
||||
|
||||
const page = ref(0);
|
||||
const pageSize = 40;
|
||||
const isLoadingMore = ref(false);
|
||||
const displayedSongs = ref<SongResult[]>([]);
|
||||
const loadingList = ref(false);
|
||||
const loadedIds = ref(new Set<number>()); // 用于追踪已加载的歌曲ID
|
||||
const isPlaylistLoading = ref(false); // 标记是否正在加载播放列表
|
||||
const completePlaylist = ref<SongResult[]>([]); // 存储完整的播放列表
|
||||
const hasMore = ref(true); // 标记是否还有更多数据可加载
|
||||
const searchKeyword = ref(''); // 搜索关键词
|
||||
const isFullPlaylistLoaded = ref(false); // 标记完整播放列表是否已加载完成
|
||||
|
||||
// 计算总数
|
||||
const total = computed(() => {
|
||||
if (props.listInfo?.trackIds) {
|
||||
return props.listInfo.trackIds.length;
|
||||
}
|
||||
return props.songList.length;
|
||||
});
|
||||
|
||||
const getCoverImgUrl = computed(() => {
|
||||
if (props.listInfo?.coverImgUrl) {
|
||||
return props.listInfo.coverImgUrl;
|
||||
}
|
||||
|
||||
const song = props.songList[0];
|
||||
if (song?.picUrl) {
|
||||
return song.picUrl;
|
||||
}
|
||||
if (song?.al?.picUrl) {
|
||||
return song.al.picUrl;
|
||||
}
|
||||
if (song?.album?.picUrl) {
|
||||
return song.album.picUrl;
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
// 过滤歌曲列表
|
||||
const filteredSongs = computed(() => {
|
||||
if (!searchKeyword.value) {
|
||||
return displayedSongs.value;
|
||||
}
|
||||
|
||||
const keyword = searchKeyword.value.toLowerCase().trim();
|
||||
return displayedSongs.value.filter((song) => {
|
||||
const songName = song.name?.toLowerCase() || '';
|
||||
const albumName = song.al?.name?.toLowerCase() || '';
|
||||
const artists = song.ar || song.artists || [];
|
||||
|
||||
// 原始文本匹配
|
||||
const nameMatch = songName.includes(keyword);
|
||||
const albumMatch = albumName.includes(keyword);
|
||||
const artistsMatch = artists.some((artist: any) => {
|
||||
return artist.name?.toLowerCase().includes(keyword);
|
||||
});
|
||||
|
||||
// 拼音匹配
|
||||
const namePinyinMatch = song.name && PinyinMatch.match(song.name, keyword);
|
||||
const albumPinyinMatch = song.al?.name && PinyinMatch.match(song.al.name, keyword);
|
||||
const artistsPinyinMatch = artists.some((artist: any) => {
|
||||
return artist.name && PinyinMatch.match(artist.name, keyword);
|
||||
});
|
||||
|
||||
return (
|
||||
nameMatch ||
|
||||
albumMatch ||
|
||||
artistsMatch ||
|
||||
namePinyinMatch ||
|
||||
albumPinyinMatch ||
|
||||
artistsPinyinMatch
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// 格式化歌曲数据
|
||||
const formatSong = (item: any) => {
|
||||
if (!item) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
picUrl: item.al?.picUrl || item.picUrl,
|
||||
song: {
|
||||
artists: item.ar || item.artists,
|
||||
name: item.al?.name || item.name,
|
||||
id: item.al?.id || item.id
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载歌曲数据的核心函数
|
||||
* @param ids 要加载的歌曲ID数组
|
||||
* @param appendToList 是否将加载的歌曲追加到现有列表
|
||||
* @param updateComplete 是否更新完整播放列表
|
||||
*/
|
||||
const loadSongs = async (ids: number[], appendToList = true, updateComplete = false) => {
|
||||
if (ids.length === 0) return [];
|
||||
|
||||
try {
|
||||
console.log(`请求歌曲详情，ID数量: ${ids.length}`);
|
||||
const { data } = await getMusicDetail(ids);
|
||||
|
||||
if (data?.songs) {
|
||||
console.log(`API返回歌曲数量: ${data.songs.length}`);
|
||||
|
||||
// 直接使用API返回的所有歌曲，不再过滤已加载的歌曲
|
||||
// 因为当需要完整加载列表时，我们希望获取所有歌曲，即使ID可能重复
|
||||
const { songs } = data;
|
||||
|
||||
// 只在非更新完整列表时执行过滤
|
||||
let newSongs = songs;
|
||||
if (!updateComplete) {
|
||||
// 在普通加载模式下继续过滤已加载的歌曲，避免重复
|
||||
newSongs = songs.filter((song: any) => !loadedIds.value.has(song.id));
|
||||
console.log(`过滤已加载ID后剩余歌曲数量: ${newSongs.length}`);
|
||||
}
|
||||
|
||||
// 更新已加载ID集合
|
||||
songs.forEach((song: any) => {
|
||||
loadedIds.value.add(song.id);
|
||||
});
|
||||
|
||||
// 追加到显示列表 - 仅当appendToList=true时添加到displayedSongs
|
||||
if (appendToList) {
|
||||
displayedSongs.value.push(...newSongs);
|
||||
}
|
||||
|
||||
// 更新完整播放列表 - 仅当updateComplete=true时添加到completePlaylist
|
||||
if (updateComplete) {
|
||||
completePlaylist.value.push(...songs);
|
||||
console.log(`已添加到完整播放列表，当前完整列表长度: ${completePlaylist.value.length}`);
|
||||
}
|
||||
|
||||
return updateComplete ? songs : newSongs;
|
||||
}
|
||||
console.log('API返回无歌曲数据');
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('加载歌曲失败:', error);
|
||||
}
|
||||
|
||||
return [];
|
||||
};
|
||||
|
||||
// 加载完整播放列表
|
||||
const loadFullPlaylist = async () => {
|
||||
if (isPlaylistLoading.value || isFullPlaylistLoaded.value) return;
|
||||
|
||||
isPlaylistLoading.value = true;
|
||||
// 记录开始时间
|
||||
const startTime = Date.now();
|
||||
console.log(`开始加载完整播放列表，当前显示列表长度: ${displayedSongs.value.length}`);
|
||||
|
||||
try {
|
||||
// 如果没有trackIds，直接使用当前歌曲列表并标记为已完成
|
||||
if (!props.listInfo?.trackIds) {
|
||||
isFullPlaylistLoaded.value = true;
|
||||
console.log('无trackIds信息，使用当前列表作为完整列表');
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取所有trackIds
|
||||
const allIds = props.listInfo.trackIds.map((item) => item.id);
|
||||
console.log(`歌单共有歌曲ID: ${allIds.length}首`);
|
||||
|
||||
// 重置completePlaylist和当前显示歌曲ID集合，保证不会重复添加歌曲
|
||||
completePlaylist.value = [];
|
||||
|
||||
// 使用Set记录所有已加载的歌曲ID
|
||||
const loadedSongIds = new Set<number>();
|
||||
|
||||
// 将当前显示列表中的歌曲和ID添加到集合中
|
||||
displayedSongs.value.forEach((song) => {
|
||||
loadedSongIds.add(song.id as number);
|
||||
// 将已有歌曲添加到completePlaylist
|
||||
completePlaylist.value.push(song);
|
||||
});
|
||||
|
||||
console.log(
|
||||
`已有显示歌曲: ${displayedSongs.value.length}首，已有ID数量: ${loadedSongIds.size}`
|
||||
);
|
||||
|
||||
// 过滤出尚未加载的歌曲ID
|
||||
const unloadedIds = allIds.filter((id) => !loadedSongIds.has(id));
|
||||
console.log(`还需要加载的歌曲ID数量: ${unloadedIds.length}`);
|
||||
|
||||
if (unloadedIds.length === 0) {
|
||||
console.log('所有歌曲已加载，无需再次加载');
|
||||
isFullPlaylistLoaded.value = true;
|
||||
hasMore.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 分批加载所有未加载的歌曲
|
||||
const batchSize = 500; // 每批加载的歌曲数量
|
||||
|
||||
for (let i = 0; i < unloadedIds.length; i += batchSize) {
|
||||
const batchIds = unloadedIds.slice(i, i + batchSize);
|
||||
if (batchIds.length === 0) continue;
|
||||
|
||||
console.log(`请求第${Math.floor(i / batchSize) + 1}批歌曲，数量: ${batchIds.length}`);
|
||||
// 关键修改: 设置appendToList为false，避免loadSongs直接添加到displayedSongs
|
||||
const loadedBatch = await loadSongs(batchIds, false, false);
|
||||
|
||||
// 添加新加载的歌曲到displayedSongs
|
||||
if (loadedBatch.length > 0) {
|
||||
// 过滤掉已有的歌曲，确保不会重复添加
|
||||
const newSongs = loadedBatch.filter((song) => !loadedSongIds.has(song.id as number));
|
||||
|
||||
// 更新已加载ID集合
|
||||
newSongs.forEach((song) => {
|
||||
loadedSongIds.add(song.id as number);
|
||||
});
|
||||
|
||||
console.log(`新增${newSongs.length}首歌曲到显示列表`);
|
||||
|
||||
// 更新显示列表和完整播放列表
|
||||
if (newSongs.length > 0) {
|
||||
// 添加到显示列表
|
||||
displayedSongs.value = [...displayedSongs.value, ...newSongs];
|
||||
|
||||
// 添加到完整播放列表
|
||||
completePlaylist.value.push(...newSongs);
|
||||
|
||||
// 如果当前正在播放的列表与这个列表匹配，实时更新播放列表
|
||||
const currentPlaylist = playerStore.playList;
|
||||
if (currentPlaylist.length > 0 && currentPlaylist[0].id === displayedSongs.value[0]?.id) {
|
||||
console.log('实时更新当前播放列表');
|
||||
playerStore.setPlayList(displayedSongs.value.map(formatSong));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加小延迟避免请求过于密集
|
||||
if (i + batchSize < unloadedIds.length) {
|
||||
await new Promise<void>((resolve) => {
|
||||
setTimeout(() => resolve(), 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 加载完成，更新状态
|
||||
isFullPlaylistLoaded.value = true;
|
||||
hasMore.value = false;
|
||||
|
||||
// 计算加载耗时
|
||||
const endTime = Date.now();
|
||||
const timeUsed = Math.round(((endTime - startTime) / 1000) * 100) / 100;
|
||||
|
||||
console.log(
|
||||
`完整播放列表加载完成，共加载${displayedSongs.value.length}首歌曲，耗时${timeUsed}秒`
|
||||
);
|
||||
console.log(`歌单应有${allIds.length}首歌，实际加载${displayedSongs.value.length}首`);
|
||||
|
||||
// 检查加载的歌曲数量是否与预期相符
|
||||
if (displayedSongs.value.length !== allIds.length) {
|
||||
console.warn(
|
||||
`警告: 加载的歌曲数量(${displayedSongs.value.length})与歌单应有数量(${allIds.length})不符`
|
||||
);
|
||||
|
||||
// 如果数量不符，可能是API未返回所有歌曲，打印缺失的歌曲ID
|
||||
if (displayedSongs.value.length < allIds.length) {
|
||||
const loadedIds = new Set(displayedSongs.value.map((song) => song.id));
|
||||
const missingIds = allIds.filter((id) => !loadedIds.has(id));
|
||||
console.warn(`缺失的歌曲ID: ${missingIds.join(', ')}`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载完整播放列表失败:', error);
|
||||
} finally {
|
||||
isPlaylistLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理播放
|
||||
const handlePlay = async () => {
|
||||
// 当搜索状态下播放时，只播放过滤后的歌曲
|
||||
if (searchKeyword.value) {
|
||||
playerStore.setPlayList(filteredSongs.value.map(formatSong));
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果完整播放列表已加载完成
|
||||
if (isFullPlaylistLoaded.value && completePlaylist.value.length > 0) {
|
||||
playerStore.setPlayList(completePlaylist.value.map(formatSong));
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果完整播放列表未加载完成，先使用当前已加载的歌曲开始播放
|
||||
playerStore.setPlayList(displayedSongs.value.map(formatSong));
|
||||
|
||||
// 如果完整播放列表正在加载中，不需要重新触发加载
|
||||
if (isPlaylistLoading.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 在后台继续加载完整播放列表（如果未加载完成）
|
||||
if (!isFullPlaylistLoaded.value) {
|
||||
console.log('播放时继续在后台加载完整列表');
|
||||
loadFullPlaylist();
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
emit('update:show', false);
|
||||
};
|
||||
|
||||
// 加载更多歌曲
|
||||
const loadMoreSongs = async () => {
|
||||
if (isFullPlaylistLoaded.value) {
|
||||
hasMore.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (searchKeyword.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isLoadingMore.value || displayedSongs.value.length >= total.value) {
|
||||
hasMore.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
isLoadingMore.value = true;
|
||||
|
||||
try {
|
||||
const start = displayedSongs.value.length;
|
||||
const end = Math.min(start + pageSize, total.value);
|
||||
|
||||
if (props.listInfo?.trackIds) {
|
||||
const trackIdsToLoad = props.listInfo.trackIds
|
||||
.slice(start, end)
|
||||
.map((item) => item.id)
|
||||
.filter((id) => !loadedIds.value.has(id));
|
||||
|
||||
if (trackIdsToLoad.length > 0) {
|
||||
await loadSongs(trackIdsToLoad, true, false);
|
||||
}
|
||||
} else if (start < props.songList.length) {
|
||||
const newSongs = props.songList.slice(start, end);
|
||||
newSongs.forEach((song) => {
|
||||
if (!loadedIds.value.has(song.id)) {
|
||||
loadedIds.value.add(song.id);
|
||||
displayedSongs.value.push(song);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
hasMore.value = displayedSongs.value.length < total.value;
|
||||
} catch (error) {
|
||||
console.error('加载更多歌曲失败:', error);
|
||||
} finally {
|
||||
isLoadingMore.value = false;
|
||||
loadingList.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理虚拟列表滚动事件
|
||||
const handleVirtualScroll = (e: any) => {
|
||||
if (!e || !e.target) return;
|
||||
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.target;
|
||||
const threshold = 200;
|
||||
|
||||
if (
|
||||
scrollHeight - scrollTop - clientHeight < threshold &&
|
||||
!isLoadingMore.value &&
|
||||
hasMore.value &&
|
||||
!searchKeyword.value // 搜索状态下不触发加载更多
|
||||
) {
|
||||
loadMoreSongs();
|
||||
}
|
||||
};
|
||||
|
||||
// 重置列表状态
|
||||
const resetListState = () => {
|
||||
page.value = 0;
|
||||
loadedIds.value.clear();
|
||||
displayedSongs.value = [];
|
||||
completePlaylist.value = [];
|
||||
hasMore.value = true;
|
||||
loadingList.value = false;
|
||||
searchKeyword.value = ''; // 重置搜索关键词
|
||||
isFullPlaylistLoaded.value = false; // 重置完整播放列表状态
|
||||
};
|
||||
|
||||
// 初始化歌曲列表
|
||||
const initSongList = (songs: any[]) => {
|
||||
if (songs.length > 0) {
|
||||
displayedSongs.value = [...songs];
|
||||
songs.forEach((song) => loadedIds.value.add(song.id));
|
||||
page.value = Math.ceil(songs.length / pageSize);
|
||||
}
|
||||
|
||||
// 检查是否还有更多数据可加载
|
||||
hasMore.value = displayedSongs.value.length < total.value;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.listInfo,
|
||||
(newListInfo) => {
|
||||
if (newListInfo?.trackIds) {
|
||||
loadFullPlaylist();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// 修改 songList 监听器
|
||||
watch(
|
||||
() => props.songList,
|
||||
(newSongs) => {
|
||||
// 重置所有状态
|
||||
resetListState();
|
||||
|
||||
// 初始化歌曲列表
|
||||
initSongList(newSongs);
|
||||
|
||||
// 如果还有更多歌曲需要加载，且差距较小，立即加载
|
||||
if (hasMore.value && props.listInfo?.trackIds) {
|
||||
setTimeout(() => {
|
||||
loadMoreSongs();
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 监听搜索关键词变化
|
||||
watch(searchKeyword, () => {
|
||||
// 当搜索关键词为空时，考虑加载更多歌曲
|
||||
if (!searchKeyword.value && hasMore.value && displayedSongs.value.length < total.value) {
|
||||
loadMoreSongs();
|
||||
}
|
||||
});
|
||||
|
||||
// 组件卸载时清理状态
|
||||
onUnmounted(() => {
|
||||
isPlaylistLoading.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.music {
|
||||
&-title {
|
||||
@apply text-xl font-bold text-gray-900 dark:text-white;
|
||||
}
|
||||
|
||||
&-total {
|
||||
@apply text-sm font-normal text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
&-page {
|
||||
@apply px-8 w-full h-full bg-light dark:bg-black bg-opacity-75 dark:bg-opacity-75 rounded-t-2xl;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
&-close {
|
||||
@apply cursor-pointer text-gray-500 dark:text-white hover:text-gray-900 dark:hover:text-gray-300 flex gap-2 items-center transition;
|
||||
.icon {
|
||||
@apply text-3xl;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
@apply flex h-[calc(100%-60px)];
|
||||
}
|
||||
|
||||
&-info {
|
||||
@apply w-[25%] flex-shrink-0 pr-8 flex flex-col;
|
||||
|
||||
.music-cover {
|
||||
@apply w-full aspect-square rounded-2xl overflow-hidden mb-4 min-h-[250px];
|
||||
.cover-img {
|
||||
@apply w-full h-full object-cover;
|
||||
}
|
||||
}
|
||||
|
||||
.creator-info {
|
||||
@apply flex items-center mb-4;
|
||||
.creator-name {
|
||||
@apply ml-2 text-gray-700 dark:text-gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
.music-desc {
|
||||
@apply text-sm text-gray-600 dark:text-gray-400 leading-relaxed pr-4;
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
@apply flex-grow min-h-0;
|
||||
&-container {
|
||||
@apply flex-grow min-h-0 flex flex-col relative;
|
||||
}
|
||||
|
||||
&-content {
|
||||
@apply min-h-[calc(80vh-60px)];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
@apply max-w-md;
|
||||
|
||||
:deep(.n-input) {
|
||||
@apply bg-light-200 dark:bg-dark-200;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@apply text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.no-result {
|
||||
@apply text-center py-8 text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
/* 虚拟列表样式 */
|
||||
.song-virtual-list {
|
||||
:deep(.n-virtual-list__scroll) {
|
||||
scrollbar-width: thin;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-400 dark:bg-gray-600 rounded;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.music-page {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.music-content {
|
||||
@apply flex-col;
|
||||
width: 100vw !important;
|
||||
}
|
||||
|
||||
.music-info {
|
||||
@apply w-full pr-0 mb-2 flex flex-row;
|
||||
|
||||
.music-cover {
|
||||
@apply w-[100px] h-[100px] rounded-lg overflow-hidden mb-4;
|
||||
}
|
||||
.music-detail {
|
||||
@apply flex-1 ml-4;
|
||||
}
|
||||
}
|
||||
|
||||
.music-title {
|
||||
@apply text-base;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
@apply max-w-[50%];
|
||||
}
|
||||
|
||||
.song-virtual-list {
|
||||
height: calc(80vh - 120px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-more {
|
||||
@apply text-center py-4 text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.double-item {
|
||||
@apply mb-2 bg-light-100 bg-opacity-20 dark:bg-dark-100 dark:bg-opacity-20 rounded-3xl;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
.music-info {
|
||||
@apply hidden;
|
||||
}
|
||||
.music-list-content {
|
||||
@apply pb-[100px];
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,10 +3,7 @@
|
||||
class="category-selector border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-black z-10"
|
||||
>
|
||||
<n-scrollbar ref="scrollbarRef" x-scrollable>
|
||||
<div
|
||||
class="categories-wrapper py-4 px-4 sm:px-6 lg:px-8 lg:pl-0"
|
||||
@wheel.prevent="handleWheel"
|
||||
>
|
||||
<div class="categories-wrapper py-4 page-padding" @wheel.prevent="handleWheel">
|
||||
<span
|
||||
v-for="(category, index) in categories"
|
||||
:key="getItemKey(category, index)"
|
||||
|
||||
@@ -1,104 +1,140 @@
|
||||
<template>
|
||||
<n-drawer
|
||||
:show="modelValue"
|
||||
:width="400"
|
||||
:width="420"
|
||||
placement="right"
|
||||
@update:show="$emit('update:modelValue', $event)"
|
||||
:unstable-show-mask="false"
|
||||
:show-mask="false"
|
||||
>
|
||||
<n-drawer-content :title="t('comp.playlistDrawer.title')" class="mac-style-drawer">
|
||||
<n-drawer-content class="!p-0">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-lg font-bold tracking-tight text-neutral-900 dark:text-white">
|
||||
{{ t('comp.playlistDrawer.title') }}
|
||||
</h2>
|
||||
<div class="h-1.5 w-1.5 rounded-full bg-primary" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<n-scrollbar class="h-full">
|
||||
<div class="playlist-drawer">
|
||||
<!-- 创建新歌单按钮和表单 -->
|
||||
<div class="create-playlist-section">
|
||||
<div
|
||||
class="create-playlist-button"
|
||||
:class="{ 'is-expanded': isCreating }"
|
||||
<div class="flex flex-col gap-5 px-5 py-4">
|
||||
<!-- 创建新歌单 -->
|
||||
<div class="flex flex-col">
|
||||
<button
|
||||
class="flex items-center gap-4 rounded-2xl p-3 transition-all duration-200"
|
||||
:class="
|
||||
isCreating
|
||||
? 'bg-neutral-100 dark:bg-neutral-800'
|
||||
: 'bg-neutral-50 hover:bg-neutral-100 dark:bg-neutral-800/50 dark:hover:bg-neutral-800'
|
||||
"
|
||||
@click="toggleCreateForm"
|
||||
>
|
||||
<div class="create-playlist-icon">
|
||||
<i class="iconfont" :class="isCreating ? 'ri-close-line' : 'ri-add-line'"></i>
|
||||
<div
|
||||
class="flex h-11 w-11 items-center justify-center rounded-xl bg-primary text-white shadow-lg shadow-primary/25 transition-transform duration-300"
|
||||
:class="{ 'rotate-45': isCreating }"
|
||||
>
|
||||
<i class="iconfont text-xl" :class="isCreating ? 'ri-close-line' : 'ri-add-line'" />
|
||||
</div>
|
||||
<div class="create-playlist-text">
|
||||
<span class="text-sm font-semibold text-neutral-700 dark:text-neutral-200">
|
||||
{{
|
||||
isCreating
|
||||
? t('comp.playlistDrawer.cancelCreate')
|
||||
: t('comp.playlistDrawer.createPlaylist')
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- 创建歌单表单 -->
|
||||
<div class="create-playlist-form" :class="{ 'is-visible': isCreating }">
|
||||
<n-input
|
||||
v-model:value="formValue.name"
|
||||
:placeholder="t('comp.playlistDrawer.playlistName')"
|
||||
maxlength="40"
|
||||
class="mac-style-input"
|
||||
:status="inputError ? 'error' : undefined"
|
||||
>
|
||||
<template #prefix>
|
||||
<i class="iconfont ri-music-2-line"></i>
|
||||
</template>
|
||||
</n-input>
|
||||
<div class="privacy-switch">
|
||||
<div class="privacy-label">
|
||||
<i
|
||||
class="iconfont"
|
||||
:class="formValue.privacy ? 'ri-lock-line' : 'ri-earth-line'"
|
||||
></i>
|
||||
<span>{{
|
||||
formValue.privacy
|
||||
? t('comp.playlistDrawer.privatePlaylist')
|
||||
: t('comp.playlistDrawer.publicPlaylist')
|
||||
}}</span>
|
||||
<div
|
||||
class="overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="isCreating ? 'mt-4 max-h-[200px] opacity-100' : 'max-h-0 opacity-0'"
|
||||
>
|
||||
<div class="flex flex-col gap-4 px-1">
|
||||
<n-input
|
||||
v-model:value="formValue.name"
|
||||
:placeholder="t('comp.playlistDrawer.playlistName')"
|
||||
maxlength="40"
|
||||
round
|
||||
:status="inputError ? 'error' : undefined"
|
||||
>
|
||||
<template #prefix>
|
||||
<i class="iconfont ri-music-2-line text-neutral-400" />
|
||||
</template>
|
||||
</n-input>
|
||||
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<i
|
||||
class="iconfont text-base"
|
||||
:class="
|
||||
formValue.privacy
|
||||
? 'ri-lock-line text-primary'
|
||||
: 'ri-earth-line text-neutral-400 dark:text-neutral-500'
|
||||
"
|
||||
/>
|
||||
<span class="text-sm font-medium text-neutral-600 dark:text-neutral-300">
|
||||
{{
|
||||
formValue.privacy
|
||||
? t('comp.playlistDrawer.privatePlaylist')
|
||||
: t('comp.playlistDrawer.publicPlaylist')
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<n-switch v-model:value="formValue.privacy">
|
||||
<template #checked>{{ t('comp.playlistDrawer.private') }}</template>
|
||||
<template #unchecked>{{ t('comp.playlistDrawer.public') }}</template>
|
||||
</n-switch>
|
||||
</div>
|
||||
<n-switch v-model:value="formValue.privacy" class="mac-style-switch">
|
||||
<template #checked>{{ t('comp.playlistDrawer.private') }}</template>
|
||||
<template #unchecked>{{ t('comp.playlistDrawer.public') }}</template>
|
||||
</n-switch>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<n-button
|
||||
type="primary"
|
||||
quaternary
|
||||
class="mac-style-button"
|
||||
:loading="creating"
|
||||
:disabled="!formValue.name"
|
||||
|
||||
<button
|
||||
class="flex w-full items-center justify-center gap-2 rounded-full bg-primary px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary/25 transition-all duration-200 hover:bg-primary/90 hover:scale-[1.02] active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
:disabled="!formValue.name || creating"
|
||||
@click="handleCreatePlaylist"
|
||||
>
|
||||
{{ t('comp.playlistDrawer.create') }}
|
||||
</n-button>
|
||||
<n-spin v-if="creating" :size="14" />
|
||||
<span>{{ t('comp.playlistDrawer.create') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 歌单列表 -->
|
||||
<div class="playlist-list">
|
||||
<div class="flex flex-col gap-1.5 pb-32">
|
||||
<div
|
||||
v-for="playlist in playlists"
|
||||
v-for="(playlist, index) in playlists"
|
||||
:key="playlist.id"
|
||||
class="playlist-item"
|
||||
class="group flex cursor-pointer items-center gap-3.5 rounded-2xl p-2.5 transition-all duration-200 hover:bg-neutral-50 active:scale-[0.98] dark:hover:bg-neutral-800/60"
|
||||
:style="{ animationDelay: `${index * 0.03}s` }"
|
||||
@click="handleAddToPlaylist(playlist)"
|
||||
>
|
||||
<n-image
|
||||
:src="getImgUrl(playlist.coverImgUrl || playlist.picUrl, '100y100')"
|
||||
class="playlist-item-img"
|
||||
preview-disabled
|
||||
:img-props="{
|
||||
crossorigin: 'anonymous'
|
||||
}"
|
||||
/>
|
||||
<div class="playlist-item-info">
|
||||
<div class="playlist-item-name">{{ playlist.name }}</div>
|
||||
<div class="playlist-item-count">
|
||||
{{ playlist.trackCount }}
|
||||
{{ t('comp.playlistDrawer.count') }}
|
||||
<!-- 封面 -->
|
||||
<div
|
||||
class="relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-xl bg-neutral-100 shadow-sm dark:bg-neutral-800"
|
||||
>
|
||||
<n-image
|
||||
:src="getImgUrl(playlist.coverImgUrl || playlist.picUrl, '100y100')"
|
||||
class="h-full w-full object-cover"
|
||||
preview-disabled
|
||||
:img-props="{ crossorigin: 'anonymous' }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 信息 -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate text-sm font-semibold text-neutral-800 dark:text-neutral-100">
|
||||
{{ playlist.name }}
|
||||
</div>
|
||||
<div class="mt-0.5 text-xs font-medium text-neutral-400 dark:text-neutral-500">
|
||||
{{ playlist.trackCount }} {{ t('comp.playlistDrawer.count') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-item-action">
|
||||
<i class="iconfont ri-add-line"></i>
|
||||
|
||||
<!-- 添加按钮 -->
|
||||
<div
|
||||
class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-neutral-300 transition-all duration-200 group-hover:bg-primary/10 group-hover:text-primary dark:text-neutral-600 dark:group-hover:text-primary"
|
||||
>
|
||||
<i class="iconfont ri-add-line text-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -255,142 +291,7 @@ watch(
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mac-style-drawer {
|
||||
@apply h-full;
|
||||
|
||||
:deep(.n-drawer-header__main) {
|
||||
@apply text-base font-medium;
|
||||
}
|
||||
|
||||
:deep(.n-drawer-content) {
|
||||
@apply h-full;
|
||||
}
|
||||
|
||||
:deep(.n-drawer-content-wrapper) {
|
||||
@apply h-full;
|
||||
}
|
||||
|
||||
:deep(.n-scrollbar-rail) {
|
||||
@apply right-0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-drawer {
|
||||
@apply flex flex-col gap-6 py-6;
|
||||
}
|
||||
|
||||
.create-playlist-section {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
.create-playlist-button {
|
||||
@apply flex items-center gap-4 p-3 rounded-xl cursor-pointer transition-all duration-200
|
||||
bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700;
|
||||
|
||||
&.is-expanded {
|
||||
@apply bg-gray-100 dark:bg-gray-700;
|
||||
|
||||
.create-playlist-icon {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
@apply w-10 h-10 rounded-xl bg-green-500 flex items-center justify-center text-white
|
||||
transition-all duration-300;
|
||||
|
||||
.iconfont {
|
||||
@apply text-xl transition-transform duration-300;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
@apply text-sm font-medium transition-colors duration-300;
|
||||
}
|
||||
}
|
||||
|
||||
.create-playlist-form {
|
||||
@apply max-h-0 overflow-hidden transition-all duration-300 ease-in-out opacity-0;
|
||||
|
||||
&.is-visible {
|
||||
@apply max-h-[200px] mt-4 opacity-100;
|
||||
}
|
||||
|
||||
.mac-style-input {
|
||||
@apply rounded-lg;
|
||||
:deep(.n-input-wrapper) {
|
||||
@apply bg-gray-50 dark:bg-gray-800 border-0;
|
||||
}
|
||||
:deep(.n-input__input) {
|
||||
@apply text-sm;
|
||||
}
|
||||
:deep(.n-input__prefix) {
|
||||
@apply text-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
@apply mt-4;
|
||||
.mac-style-button {
|
||||
@apply w-full rounded-lg text-sm py-2 bg-green-500 hover:bg-green-600 text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-switch {
|
||||
@apply flex items-center justify-between mt-4 px-2;
|
||||
|
||||
.privacy-label {
|
||||
@apply flex items-center gap-2;
|
||||
|
||||
.iconfont {
|
||||
@apply text-base text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
span {
|
||||
@apply text-sm;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-switch) {
|
||||
@apply h-5 min-w-[40px];
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-list {
|
||||
@apply flex flex-col gap-2 pb-40;
|
||||
}
|
||||
|
||||
.playlist-item {
|
||||
@apply flex items-center gap-3 p-2 rounded-xl cursor-pointer transition-all duration-200
|
||||
hover:bg-gray-50 dark:hover:bg-gray-800;
|
||||
|
||||
&-img {
|
||||
@apply w-10 h-10 rounded-xl;
|
||||
}
|
||||
|
||||
&-info {
|
||||
@apply flex-1 min-w-0;
|
||||
}
|
||||
|
||||
&-name {
|
||||
@apply text-sm font-medium truncate;
|
||||
}
|
||||
|
||||
&-count {
|
||||
@apply text-xs text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
&-action {
|
||||
@apply w-8 h-8 rounded-lg flex items-center justify-center
|
||||
text-gray-400 hover:text-green-500 transition-colors duration-200;
|
||||
|
||||
.iconfont {
|
||||
@apply text-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<style scoped>
|
||||
:deep(.n-drawer-body-content-wrapper) {
|
||||
padding-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
|
||||
@@ -5,65 +5,102 @@
|
||||
:show-icon="false"
|
||||
:mask-closable="!downloading"
|
||||
:closable="!downloading"
|
||||
class="update-app-modal"
|
||||
class="update-modal"
|
||||
style="width: 800px; max-width: 90vw"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="app-icon">
|
||||
<img src="@/assets/logo.png" alt="App Icon" />
|
||||
<div class="p-6 pb-4">
|
||||
<!-- 头部：图标 + 版本信息 -->
|
||||
<div class="flex items-center mb-6">
|
||||
<div
|
||||
class="w-20 h-20 mr-5 flex-shrink-0 overflow-hidden rounded-2xl shadow-lg ring-2 ring-neutral-100 dark:ring-neutral-800"
|
||||
>
|
||||
<img src="@/assets/logo.png" alt="App Icon" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="app-info">
|
||||
<h2 class="app-name">{{ t('comp.update.title') }} {{ updateInfo.latestVersion }}</h2>
|
||||
<p class="app-desc mb-2">
|
||||
{{ t('comp.update.currentVersion') }} {{ updateInfo.currentVersion }}
|
||||
</p>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h2 class="text-2xl font-bold tracking-tight text-neutral-900 dark:text-white mb-1.5">
|
||||
{{ t('comp.update.title') }} {{ updateInfo.latestVersion }}
|
||||
</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400"
|
||||
>
|
||||
{{ t('comp.update.currentVersion') }} {{ updateInfo.currentVersion }}
|
||||
</span>
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-primary/10 text-primary dark:bg-primary/20"
|
||||
>
|
||||
NEW
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="update-info">
|
||||
|
||||
<!-- 更新日志 -->
|
||||
<div class="mb-6 rounded-2xl bg-neutral-50 dark:bg-neutral-800/50 overflow-hidden">
|
||||
<n-scrollbar style="max-height: 300px">
|
||||
<div class="update-body" v-html="parsedReleaseNotes"></div>
|
||||
<div
|
||||
class="update-body p-5 text-sm leading-relaxed text-neutral-600 dark:text-neutral-300"
|
||||
v-html="parsedReleaseNotes"
|
||||
/>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
<div v-if="downloading" class="download-status mt-6">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-500">{{ downloadStatus }}</span>
|
||||
<span class="text-sm font-medium">{{ downloadProgress }}%</span>
|
||||
|
||||
<!-- 下载进度 -->
|
||||
<div v-if="downloading" class="mb-6 rounded-2xl bg-neutral-50 dark:bg-neutral-800/50 p-4">
|
||||
<div class="flex items-center justify-between mb-2.5">
|
||||
<span class="text-sm text-neutral-500 dark:text-neutral-400">{{ downloadStatus }}</span>
|
||||
<span class="text-sm font-bold text-primary">{{ downloadProgress }}%</span>
|
||||
</div>
|
||||
<div class="progress-bar-wrapper">
|
||||
<div class="progress-bar" :style="{ width: `${downloadProgress}%` }"></div>
|
||||
<div
|
||||
class="relative h-2 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 rounded-full bg-primary transition-all duration-300 ease-out shadow-[0_0_10px_rgba(34,197,94,0.4)]"
|
||||
:style="{ width: `${downloadProgress}%` }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-actions" :class="{ 'mt-6': !downloading }">
|
||||
<n-button class="cancel-btn" :disabled="downloading" @click="closeModal">
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex gap-3" :class="{ 'mt-6': !downloading }">
|
||||
<button
|
||||
class="flex-1 rounded-xl py-2.5 text-sm font-semibold transition-all duration-200 bg-neutral-100 text-neutral-600 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
:disabled="downloading"
|
||||
@click="closeModal"
|
||||
>
|
||||
{{ t('comp.update.cancel') }}
|
||||
</n-button>
|
||||
<n-button
|
||||
</button>
|
||||
<button
|
||||
v-if="!downloading"
|
||||
type="primary"
|
||||
class="update-btn"
|
||||
class="flex-1 rounded-xl py-2.5 text-sm font-semibold transition-all duration-200 bg-primary text-white hover:bg-primary/90 shadow-lg shadow-primary/25 hover:scale-[1.02] active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
:disabled="downloading"
|
||||
@click="handleUpdate"
|
||||
>
|
||||
{{ downloadBtnText }}
|
||||
</n-button>
|
||||
<!-- 后台下载 -->
|
||||
<n-button v-else class="update-btn" type="primary" @click="closeModal">
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="flex-1 rounded-xl py-2.5 text-sm font-semibold transition-all duration-200 bg-primary text-white hover:bg-primary/90 shadow-lg shadow-primary/25 hover:scale-[1.02] active:scale-95"
|
||||
@click="closeModal"
|
||||
>
|
||||
{{ t('comp.update.backgroundDownload') }}
|
||||
</n-button>
|
||||
</div>
|
||||
<div v-if="!downloading" class="modal-desc mt-4 text-center">
|
||||
<p class="text-xs text-gray-400">
|
||||
{{ t('comp.installApp.downloadProblem') }}
|
||||
<a
|
||||
class="text-green-500"
|
||||
target="_blank"
|
||||
href="https://github.com/algerkong/AlgerMusicPlayer/releases"
|
||||
>GitHub</a
|
||||
>
|
||||
{{ t('comp.installApp.downloadProblemLinkText') }}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<p
|
||||
v-if="!downloading"
|
||||
class="mt-4 text-center text-xs text-neutral-400 dark:text-neutral-500"
|
||||
>
|
||||
{{ t('comp.installApp.downloadProblem') }}
|
||||
<a
|
||||
class="text-primary hover:text-primary/80 transition-colors"
|
||||
target="_blank"
|
||||
href="https://github.com/algerkong/AlgerMusicPlayer/releases"
|
||||
>GitHub</a
|
||||
>
|
||||
{{ t('comp.installApp.downloadProblemLinkText') }}
|
||||
</p>
|
||||
</div>
|
||||
</n-modal>
|
||||
</template>
|
||||
@@ -82,13 +119,14 @@ const { t } = useI18n();
|
||||
const dialog = useDialog();
|
||||
const message = useMessage();
|
||||
|
||||
// 配置 marked
|
||||
marked.setOptions({
|
||||
breaks: true, // 支持 GitHub 风格的换行
|
||||
gfm: true // 启用 GitHub 风格的 Markdown
|
||||
});
|
||||
// 配置 marked（只需执行一次）
|
||||
marked.setOptions({ breaks: true, gfm: true });
|
||||
|
||||
const GITHUB_RELEASE_BASE = 'https://github.com/algerkong/AlgerMusicPlayer/releases/download';
|
||||
const GITHUB_RELEASES_URL = 'https://github.com/algerkong/AlgerMusicPlayer/releases';
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
const ipc = window.electron.ipcRenderer;
|
||||
|
||||
const showModal = computed({
|
||||
get: () => settingsStore.showUpdateModal,
|
||||
@@ -102,22 +140,170 @@ const updateInfo = ref<UpdateResult>({
|
||||
releaseInfo: null
|
||||
});
|
||||
|
||||
// 解析 Markdown
|
||||
const downloading = ref(false);
|
||||
const downloadProgress = ref(0);
|
||||
const downloadStatus = ref(t('comp.update.prepareDownload'));
|
||||
const isDialogShown = ref(false);
|
||||
|
||||
const parsedReleaseNotes = computed(() => {
|
||||
if (!updateInfo.value.releaseInfo?.body) return '';
|
||||
const body = updateInfo.value.releaseInfo?.body;
|
||||
if (!body) return '';
|
||||
try {
|
||||
return marked.parse(updateInfo.value.releaseInfo.body);
|
||||
return marked.parse(body);
|
||||
} catch (error) {
|
||||
console.error('Error parsing markdown:', error);
|
||||
return updateInfo.value.releaseInfo.body;
|
||||
console.error('Markdown 解析失败:', error);
|
||||
return body;
|
||||
}
|
||||
});
|
||||
|
||||
const downloadBtnText = computed(() =>
|
||||
downloading.value ? t('comp.update.downloading') : t('comp.update.nowUpdate')
|
||||
);
|
||||
|
||||
const closeModal = () => {
|
||||
showModal.value = false;
|
||||
};
|
||||
|
||||
const checkForUpdates = async () => {
|
||||
// ---- 下载 URL 解析 ----
|
||||
|
||||
const buildReleaseUrl = (version: string, suffix: string): string =>
|
||||
`${GITHUB_RELEASE_BASE}/v${version}/AlgerMusicPlayer-${version}${suffix}`;
|
||||
|
||||
const resolveDownloadUrl = (
|
||||
assets: any[],
|
||||
platform: string,
|
||||
arch: string,
|
||||
version: string
|
||||
): string => {
|
||||
// 从 release assets 中按平台/架构匹配
|
||||
const findAsset = (keywords: string[]): string | undefined =>
|
||||
assets.find((a) => keywords.every((k) => a.name.includes(k)))?.browser_download_url;
|
||||
|
||||
if (platform === 'darwin') {
|
||||
const macArch = arch === 'arm64' ? 'arm64' : 'x64';
|
||||
return findAsset(['mac', macArch]) || buildReleaseUrl(version, `-${macArch}.dmg`);
|
||||
}
|
||||
|
||||
if (platform === 'win32') {
|
||||
const winArch = arch === 'x64' ? 'x64' : 'ia32';
|
||||
return (
|
||||
findAsset(['win', winArch]) ||
|
||||
buildReleaseUrl(version, `-win-${winArch}.exe`) ||
|
||||
buildReleaseUrl(version, '-win.exe')
|
||||
);
|
||||
}
|
||||
|
||||
if (platform === 'linux') {
|
||||
return (
|
||||
findAsset(['x64', '.AppImage']) ||
|
||||
findAsset(['x64', '.deb']) ||
|
||||
buildReleaseUrl(version, '-linux-x64.AppImage')
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
// ---- IPC 事件处理 ----
|
||||
|
||||
const onDownloadProgress = (_event: any, progress: number, status: string) => {
|
||||
downloadProgress.value = progress;
|
||||
downloadStatus.value = status;
|
||||
};
|
||||
|
||||
const showInstallDialog = (filePath: string) => {
|
||||
const copyFilePath = () => {
|
||||
navigator.clipboard
|
||||
.writeText(filePath)
|
||||
.then(() => message.success(t('comp.update.copySuccess')))
|
||||
.catch(() => message.error(t('comp.update.copyFailed')));
|
||||
};
|
||||
|
||||
const dialogRef = dialog.create({
|
||||
title: t('comp.update.installConfirmTitle'),
|
||||
content: () =>
|
||||
h('div', { class: 'flex flex-col gap-3' }, [
|
||||
h(
|
||||
'p',
|
||||
{ class: 'text-base font-medium text-neutral-800 dark:text-neutral-100' },
|
||||
t('comp.update.installConfirmContent')
|
||||
),
|
||||
h('div', { class: 'h-px bg-neutral-200 dark:bg-neutral-700' }),
|
||||
h(
|
||||
'p',
|
||||
{ class: 'text-sm text-neutral-500 dark:text-neutral-400' },
|
||||
t('comp.update.manualInstallTip')
|
||||
),
|
||||
h('div', { class: 'flex items-center gap-3 mt-1' }, [
|
||||
h('div', { class: 'flex-1 min-w-0' }, [
|
||||
h(
|
||||
'p',
|
||||
{ class: 'text-xs text-neutral-400 dark:text-neutral-500 mb-1' },
|
||||
t('comp.update.fileLocation')
|
||||
),
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
class:
|
||||
'rounded-xl bg-neutral-100 dark:bg-neutral-800 px-3 py-2 text-xs font-mono text-neutral-700 dark:text-neutral-300 break-all'
|
||||
},
|
||||
filePath
|
||||
)
|
||||
]),
|
||||
h(
|
||||
'button',
|
||||
{
|
||||
class:
|
||||
'flex items-center gap-1.5 rounded-xl bg-neutral-200 dark:bg-neutral-700 px-3 py-2 text-xs text-neutral-600 dark:text-neutral-300 cursor-pointer transition-colors hover:bg-neutral-300 dark:hover:bg-neutral-600 flex-shrink-0',
|
||||
onClick: copyFilePath
|
||||
},
|
||||
[h('i', { class: 'ri-file-copy-line text-sm' }), h('span', t('comp.update.copy'))]
|
||||
)
|
||||
])
|
||||
]),
|
||||
positiveText: t('comp.update.yesInstall'),
|
||||
negativeText: t('comp.update.noThanks'),
|
||||
onPositiveClick: () => {
|
||||
ipc.send('install-update', filePath);
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
dialogRef.destroy();
|
||||
},
|
||||
onClose: () => {
|
||||
isDialogShown.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onDownloadComplete = (_event: any, success: boolean, filePath: string) => {
|
||||
downloading.value = false;
|
||||
closeModal();
|
||||
|
||||
if (success && !isDialogShown.value) {
|
||||
isDialogShown.value = true;
|
||||
showInstallDialog(filePath);
|
||||
} else if (!success) {
|
||||
message.error(t('comp.update.downloadFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 生命周期 ----
|
||||
|
||||
const registerIpcListeners = () => {
|
||||
// 先移除旧监听，防止重复注册
|
||||
ipc.removeListener('download-progress', onDownloadProgress);
|
||||
ipc.removeListener('download-complete', onDownloadComplete);
|
||||
ipc.on('download-progress', onDownloadProgress);
|
||||
ipc.on('download-complete', onDownloadComplete);
|
||||
};
|
||||
|
||||
const removeIpcListeners = () => {
|
||||
ipc.removeListener('download-progress', onDownloadProgress);
|
||||
ipc.removeListener('download-complete', onDownloadComplete);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
registerIpcListeners();
|
||||
try {
|
||||
const result = await checkUpdate(config.version);
|
||||
if (result) {
|
||||
@@ -127,407 +313,148 @@ const checkForUpdates = async () => {
|
||||
} catch (error) {
|
||||
console.error('检查更新失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const downloading = ref(false);
|
||||
const downloadProgress = ref(0);
|
||||
const downloadStatus = ref(t('comp.update.prepareDownload'));
|
||||
const downloadBtnText = computed(() => {
|
||||
if (downloading.value) return t('comp.update.downloading');
|
||||
return t('comp.update.nowUpdate');
|
||||
});
|
||||
|
||||
// 下载完成后的文件路径
|
||||
const downloadedFilePath = ref('');
|
||||
// 防止对话框重复弹出
|
||||
const isDialogShown = ref(false);
|
||||
|
||||
// 处理下载状态更新
|
||||
const handleDownloadProgress = (_event: any, progress: number, status: string) => {
|
||||
downloadProgress.value = progress;
|
||||
downloadStatus.value = status;
|
||||
};
|
||||
|
||||
// 处理下载完成
|
||||
const handleDownloadComplete = (_event: any, success: boolean, filePath: string) => {
|
||||
downloading.value = false;
|
||||
closeModal();
|
||||
|
||||
if (success && !isDialogShown.value) {
|
||||
downloadedFilePath.value = filePath;
|
||||
isDialogShown.value = true;
|
||||
|
||||
// 复制文件路径到剪贴板
|
||||
const copyFilePath = () => {
|
||||
navigator.clipboard
|
||||
.writeText(filePath)
|
||||
.then(() => {
|
||||
message.success(t('comp.update.copySuccess'));
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(t('comp.update.copyFailed'));
|
||||
});
|
||||
};
|
||||
|
||||
// 使用naive-ui的对话框询问用户是否安装
|
||||
const dialogRef = dialog.create({
|
||||
title: t('comp.update.installConfirmTitle'),
|
||||
content: () =>
|
||||
h('div', { class: 'update-dialog-content' }, [
|
||||
h('p', { class: 'content-text' }, t('comp.update.installConfirmContent')),
|
||||
h('div', { class: 'divider' }),
|
||||
h('p', { class: 'manual-tip' }, t('comp.update.manualInstallTip')),
|
||||
h('div', { class: 'file-path-container' }, [
|
||||
h('div', { class: 'file-path-box' }, [
|
||||
h('p', { class: 'file-path-label' }, t('comp.update.fileLocation')),
|
||||
h('div', { class: 'file-path-value' }, filePath)
|
||||
]),
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
class: 'copy-btn',
|
||||
onClick: copyFilePath
|
||||
},
|
||||
[h('i', { class: 'ri-file-copy-line' }), h('span', t('comp.update.copy'))]
|
||||
)
|
||||
])
|
||||
]),
|
||||
positiveText: t('comp.update.yesInstall'),
|
||||
negativeText: t('comp.update.noThanks'),
|
||||
onPositiveClick: () => {
|
||||
window.electron.ipcRenderer.send('install-update', filePath);
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
closeModal();
|
||||
// 关闭当前窗口
|
||||
dialogRef.destroy();
|
||||
},
|
||||
onClose: () => {
|
||||
isDialogShown.value = false;
|
||||
}
|
||||
});
|
||||
} else if (!success) {
|
||||
message.error(t('comp.update.downloadFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
// 监听下载事件
|
||||
onMounted(() => {
|
||||
checkForUpdates();
|
||||
// 确保事件监听器只注册一次
|
||||
window.electron.ipcRenderer.removeListener('download-progress', handleDownloadProgress);
|
||||
window.electron.ipcRenderer.removeListener('download-complete', handleDownloadComplete);
|
||||
|
||||
window.electron.ipcRenderer.on('download-progress', handleDownloadProgress);
|
||||
window.electron.ipcRenderer.on('download-complete', handleDownloadComplete);
|
||||
});
|
||||
|
||||
// 清理事件监听
|
||||
onUnmounted(() => {
|
||||
window.electron.ipcRenderer.removeListener('download-progress', handleDownloadProgress);
|
||||
window.electron.ipcRenderer.removeListener('download-complete', handleDownloadComplete);
|
||||
removeIpcListeners();
|
||||
isDialogShown.value = false;
|
||||
});
|
||||
|
||||
// ---- 触发更新下载 ----
|
||||
|
||||
const handleUpdate = async () => {
|
||||
const assets = updateInfo.value.releaseInfo?.assets || [];
|
||||
const { releaseInfo, latestVersion } = updateInfo.value;
|
||||
const assets = releaseInfo?.assets ?? [];
|
||||
const { platform } = window.electron.process;
|
||||
const arch = window.electron.ipcRenderer.sendSync('get-arch');
|
||||
const version = updateInfo.value.latestVersion;
|
||||
const downUrls = {
|
||||
win32: {
|
||||
all: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-win.exe`,
|
||||
x64: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-win-x64.exe`,
|
||||
ia32: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-win-ia32.exe`
|
||||
},
|
||||
darwin: {
|
||||
x64: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-x64.dmg`,
|
||||
arm64: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-arm64.dmg`
|
||||
},
|
||||
linux: {
|
||||
AppImage: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-linux-x64.AppImage`,
|
||||
deb: `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}-linux-x64.deb`
|
||||
}
|
||||
};
|
||||
const arch = ipc.sendSync('get-arch');
|
||||
|
||||
let downloadUrl = '';
|
||||
const downloadUrl = resolveDownloadUrl(assets, platform, arch, latestVersion);
|
||||
|
||||
// 根据平台和架构选择对应的安装包
|
||||
if (platform === 'darwin') {
|
||||
// macOS - 根据芯片架构选择对应的 DMG
|
||||
const macArch = arch === 'arm64' ? 'arm64' : 'x64';
|
||||
const macAsset = assets.find(
|
||||
(asset) => asset.name.includes('mac') && asset.name.includes(macArch)
|
||||
);
|
||||
downloadUrl = macAsset?.browser_download_url || downUrls.darwin[macArch] || '';
|
||||
} else if (platform === 'win32') {
|
||||
// Windows
|
||||
const winAsset = assets.find(
|
||||
(asset) =>
|
||||
asset.name.includes('win') &&
|
||||
(arch === 'x64' ? asset.name.includes('x64') : asset.name.includes('ia32'))
|
||||
);
|
||||
downloadUrl =
|
||||
winAsset?.browser_download_url || downUrls.win32[arch] || downUrls.win32.all || '';
|
||||
} else if (platform === 'linux') {
|
||||
// Linux
|
||||
const linuxAsset = assets.find(
|
||||
(asset) =>
|
||||
(asset.name.endsWith('.AppImage') || asset.name.endsWith('.deb')) &&
|
||||
asset.name.includes('x64')
|
||||
);
|
||||
downloadUrl = linuxAsset?.browser_download_url || downUrls.linux[arch] || '';
|
||||
if (!downloadUrl) {
|
||||
message.error(t('comp.update.noDownloadUrl'));
|
||||
window.open(`${GITHUB_RELEASES_URL}/latest`, '_blank');
|
||||
return;
|
||||
}
|
||||
|
||||
if (downloadUrl) {
|
||||
try {
|
||||
downloading.value = true;
|
||||
downloadStatus.value = t('comp.update.prepareDownload');
|
||||
isDialogShown.value = false;
|
||||
try {
|
||||
downloading.value = true;
|
||||
downloadProgress.value = 0;
|
||||
downloadStatus.value = t('comp.update.prepareDownload');
|
||||
isDialogShown.value = false;
|
||||
|
||||
// 获取代理节点列表
|
||||
const proxyHosts = await getProxyNodes();
|
||||
const proxyDownloadUrl = `${proxyHosts[0]}/${downloadUrl}`;
|
||||
|
||||
// 发送所有可能的下载地址到主进程
|
||||
window.electron.ipcRenderer.send('start-download', proxyDownloadUrl);
|
||||
} catch (error) {
|
||||
downloading.value = false;
|
||||
message.error(t('comp.update.startFailed'));
|
||||
console.error('下载失败:', error);
|
||||
}
|
||||
} else {
|
||||
message.error(t('comp.update.noDownloadUrl'));
|
||||
window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');
|
||||
const proxyHosts = await getProxyNodes();
|
||||
ipc.send('start-download', `${proxyHosts[0]}/${downloadUrl}`);
|
||||
} catch (error) {
|
||||
downloading.value = false;
|
||||
message.error(t('comp.update.startFailed'));
|
||||
console.error('下载失败:', error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.update-app-modal {
|
||||
:deep(.n-modal) {
|
||||
@apply max-w-4xl;
|
||||
}
|
||||
.modal-content {
|
||||
@apply p-6 pb-4;
|
||||
.modal-header {
|
||||
@apply flex items-center mb-6;
|
||||
.app-icon {
|
||||
@apply w-24 h-24 mr-6 rounded-2xl overflow-hidden;
|
||||
img {
|
||||
@apply w-full h-full object-cover;
|
||||
}
|
||||
}
|
||||
.app-info {
|
||||
@apply flex-1;
|
||||
.app-name {
|
||||
@apply text-2xl font-bold mb-2;
|
||||
}
|
||||
.app-desc {
|
||||
@apply text-base text-gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.update-info {
|
||||
@apply mb-6 rounded-lg bg-gray-50 dark:bg-gray-800;
|
||||
.update-title {
|
||||
@apply text-base font-medium p-4 pb-2;
|
||||
}
|
||||
.update-body {
|
||||
@apply p-4 pt-2 text-gray-600 dark:text-gray-300 rounded-lg overflow-hidden;
|
||||
<style scoped>
|
||||
/* 弹窗圆角 */
|
||||
.update-modal :deep(.n-dialog) {
|
||||
border-radius: 1.25rem; /* 20px — rounded-2xl 级别 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(h1) {
|
||||
@apply text-xl font-bold mb-3;
|
||||
}
|
||||
:deep(h2) {
|
||||
@apply text-lg font-bold mb-3;
|
||||
}
|
||||
:deep(h3) {
|
||||
@apply text-base font-bold mb-2;
|
||||
}
|
||||
:deep(p) {
|
||||
@apply mb-3 leading-relaxed;
|
||||
}
|
||||
:deep(ul) {
|
||||
@apply list-disc list-inside mb-3;
|
||||
}
|
||||
:deep(ol) {
|
||||
@apply list-decimal list-inside mb-3;
|
||||
}
|
||||
:deep(li) {
|
||||
@apply mb-2 leading-relaxed;
|
||||
}
|
||||
:deep(code) {
|
||||
@apply px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200;
|
||||
}
|
||||
:deep(pre) {
|
||||
@apply p-3 rounded bg-gray-100 dark:bg-gray-700 overflow-x-auto mb-3;
|
||||
code {
|
||||
@apply bg-transparent p-0;
|
||||
}
|
||||
}
|
||||
:deep(blockquote) {
|
||||
@apply pl-4 border-l-4 border-gray-200 dark:border-gray-600 mb-3;
|
||||
}
|
||||
:deep(a) {
|
||||
@apply text-green-500 hover:text-green-600 dark:hover:text-green-400;
|
||||
}
|
||||
:deep(hr) {
|
||||
@apply my-4 border-gray-200 dark:border-gray-600;
|
||||
}
|
||||
:deep(table) {
|
||||
@apply w-full mb-3;
|
||||
th,
|
||||
td {
|
||||
@apply px-3 py-2 border border-gray-200 dark:border-gray-600;
|
||||
}
|
||||
th {
|
||||
@apply bg-gray-100 dark:bg-gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.download-status {
|
||||
@apply p-2;
|
||||
.progress-bar-wrapper {
|
||||
@apply w-full h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden;
|
||||
.progress-bar {
|
||||
@apply h-full bg-green-500 rounded-full transition-all duration-300 ease-out;
|
||||
box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-actions {
|
||||
@apply flex gap-4;
|
||||
.n-button {
|
||||
@apply flex-1 text-base py-2;
|
||||
}
|
||||
.cancel-btn {
|
||||
@apply bg-gray-800 text-gray-300 border-none;
|
||||
&:hover {
|
||||
@apply bg-gray-700;
|
||||
}
|
||||
&:disabled {
|
||||
@apply opacity-50 cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
.update-btn {
|
||||
@apply bg-green-600 border-none;
|
||||
&:hover {
|
||||
@apply bg-green-500;
|
||||
}
|
||||
&:disabled {
|
||||
@apply opacity-50 cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 对话框内容样式 */
|
||||
.update-dialog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.content-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e5e7eb;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.manual-tip {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.file-path-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
|
||||
.file-path-box {
|
||||
flex: 1;
|
||||
|
||||
.file-path-label {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.file-path-value {
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #f3f4f6;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
color: #1f2937;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
background-color: #e5e7eb;
|
||||
color: #4b5563;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #d1d5db;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式样式 */
|
||||
.dark .update-dialog-content {
|
||||
.divider {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
.manual-tip {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.file-path-container {
|
||||
.file-path-box {
|
||||
.file-path-label {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.file-path-value {
|
||||
background-color: #1f2937;
|
||||
color: #d1d5db;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background-color: #374151;
|
||||
color: #d1d5db;
|
||||
|
||||
&:hover {
|
||||
background-color: #4b5563;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 更新日志 Markdown 渲染样式 */
|
||||
.update-body :deep(h1) {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.update-body :deep(h2) {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.update-body :deep(h3) {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.update-body :deep(p) {
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.625;
|
||||
}
|
||||
.update-body :deep(ul) {
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.update-body :deep(ol) {
|
||||
list-style-type: decimal;
|
||||
list-style-position: inside;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.update-body :deep(li) {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.625;
|
||||
}
|
||||
.update-body :deep(code) {
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.8125rem;
|
||||
background-color: rgb(245 245 245);
|
||||
}
|
||||
.dark .update-body :deep(code) {
|
||||
background-color: rgb(64 64 64);
|
||||
}
|
||||
.update-body :deep(pre) {
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 0.75rem;
|
||||
background-color: rgb(245 245 245);
|
||||
}
|
||||
.dark .update-body :deep(pre) {
|
||||
background-color: rgb(64 64 64);
|
||||
}
|
||||
.update-body :deep(pre code) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
.update-body :deep(blockquote) {
|
||||
padding-left: 1rem;
|
||||
border-left: 4px solid rgb(229 229 229);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.dark .update-body :deep(blockquote) {
|
||||
border-left-color: rgb(82 82 82);
|
||||
}
|
||||
.update-body :deep(a) {
|
||||
color: #22c55e;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.update-body :deep(a:hover) {
|
||||
color: rgb(34 197 94 / 0.8);
|
||||
}
|
||||
.update-body :deep(hr) {
|
||||
margin: 1rem 0;
|
||||
border-color: rgb(229 229 229);
|
||||
}
|
||||
.dark .update-body :deep(hr) {
|
||||
border-color: rgb(82 82 82);
|
||||
}
|
||||
.update-body :deep(table) {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.update-body :deep(th),
|
||||
.update-body :deep(td) {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid rgb(229 229 229);
|
||||
}
|
||||
.dark .update-body :deep(th),
|
||||
.dark .update-body :deep(td) {
|
||||
border-color: rgb(82 82 82);
|
||||
}
|
||||
.update-body :deep(th) {
|
||||
background-color: rgb(245 245 245);
|
||||
}
|
||||
.dark .update-body :deep(th) {
|
||||
background-color: rgb(64 64 64);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,13 +5,32 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* 页面内容区域统一边距工具类 */
|
||||
.page-padding {
|
||||
padding-left: var(--page-pl);
|
||||
padding-right: var(--page-pr);
|
||||
}
|
||||
|
||||
/* 左右对称边距（用于 hero 区域等需要两侧都有边距的场景） */
|
||||
.page-padding-x {
|
||||
padding-left: var(--page-pr);
|
||||
padding-right: var(--page-pr);
|
||||
}
|
||||
|
||||
.n-image img {
|
||||
background-color: #111111;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.n-slider-handle-indicator--top {
|
||||
@apply bg-transparent text-2xl px-2 py-1 shadow-none mb-0 text-white bg-dark-300 dark:bg-gray-800 bg-opacity-80 rounded-lg !important;
|
||||
background-color: transparent;
|
||||
font-size: 1.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
box-shadow: none;
|
||||
margin-bottom: 0;
|
||||
color: white;
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
border-radius: 0.5rem;
|
||||
mix-blend-mode: difference !important;
|
||||
}
|
||||
|
||||
@@ -20,7 +39,9 @@
|
||||
}
|
||||
|
||||
.text-el {
|
||||
@apply overflow-ellipsis overflow-hidden whitespace-nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
@@ -68,8 +89,50 @@
|
||||
--safe-area-inset-right: 0px;
|
||||
--safe-area-inset-bottom: 10px;
|
||||
--safe-area-inset-left: 0px;
|
||||
|
||||
/* 页面内容区域统一边距 */
|
||||
--page-px: 1rem; /* 默认 16px，对应 px-4 */
|
||||
--page-pl: 1rem; /* 左边距，PC 端有菜单时为 0 */
|
||||
--page-pr: 1rem; /* 右边距 */
|
||||
}
|
||||
|
||||
/* PC 端：有左侧菜单，左边距为 0 */
|
||||
.pc {
|
||||
--page-pl: 0px;
|
||||
}
|
||||
|
||||
/* 响应式边距 */
|
||||
@media (min-width: 640px) {
|
||||
:root {
|
||||
--page-px: 1.5rem; /* 24px，对应 sm:px-6 */
|
||||
--page-pr: 1.5rem;
|
||||
}
|
||||
.mobile {
|
||||
--page-pl: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
--page-px: 2rem; /* 32px，对应 lg:px-8 */
|
||||
--page-pr: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
:root[class='dark'] {
|
||||
--text-color: #ffffffdd;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
:size="100"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<div class="list-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
|
||||
<div class="list-content w-full pb-32 pt-6 page-padding">
|
||||
<!-- 列表标题 -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white mb-2">
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Skeleton -->
|
||||
<div class="mt-8 px-4 md:px-8">
|
||||
<div class="mt-8 page-padding-x">
|
||||
<div class="space-y-4">
|
||||
<div v-for="i in 8" :key="i" class="flex items-center gap-4">
|
||||
<n-skeleton class="h-12 w-12 rounded-xl" />
|
||||
@@ -58,7 +58,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Hero Content -->
|
||||
<div class="hero-content relative z-10 px-4 md:px-8 pt-4 md:pt-8 pb-6">
|
||||
<div class="hero-content relative z-10 page-padding-x pt-4 md:pt-8 pb-6">
|
||||
<div class="flex flex-col md:flex-row gap-6 md:gap-10 items-center md:items-end">
|
||||
<!-- Artist Avatar -->
|
||||
<div class="artist-avatar-wrapper relative group">
|
||||
@@ -133,7 +133,7 @@
|
||||
|
||||
<!-- Action Bar -->
|
||||
<section
|
||||
class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 md:py-4 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
class="action-bar sticky top-0 z-20 page-padding-x py-3 md:py-4 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<!-- Left Actions -->
|
||||
@@ -216,7 +216,7 @@
|
||||
</section>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<section class="tab-nav px-4 md:px-8 pt-4 md:pt-6">
|
||||
<section class="tab-nav page-padding-x pt-4 md:pt-6">
|
||||
<div
|
||||
class="tab-list relative flex gap-1 p-1 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl w-fit"
|
||||
>
|
||||
@@ -244,7 +244,7 @@
|
||||
</section>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<section class="tab-content px-4 md:px-8 py-6 md:py-8">
|
||||
<section class="tab-content page-padding-x py-6 md:py-8">
|
||||
<!-- Songs Tab -->
|
||||
<div v-show="activeTab === 'songs'" class="songs-tab">
|
||||
<!-- No Results -->
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Hero Content -->
|
||||
<div class="hero-content relative z-10 px-4 md:px-8 pt-10 pb-8">
|
||||
<div class="hero-content relative z-10 page-padding-x pt-10 pb-8">
|
||||
<div class="flex flex-col md:flex-row gap-8 items-center md:items-end">
|
||||
<div class="cover-wrapper relative group">
|
||||
<div
|
||||
@@ -56,7 +56,7 @@
|
||||
|
||||
<!-- Action Bar (Sticky) -->
|
||||
<section
|
||||
class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
class="action-bar sticky top-0 z-20 page-padding-x py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<!-- Tabs (Segment Control) -->
|
||||
@@ -105,7 +105,7 @@
|
||||
</section>
|
||||
|
||||
<!-- List Section -->
|
||||
<section class="list-section px-4 md:px-8 mt-6">
|
||||
<section class="list-section page-padding-x mt-6">
|
||||
<!-- Downloading List -->
|
||||
<div v-if="tabName === 'downloading'" class="downloading-container">
|
||||
<div v-if="downloadList.length === 0" class="empty-state py-20 text-center">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex gap-6 h-full pb-4 px-6 pt-6 bg-white dark:bg-black">
|
||||
<div class="flex gap-6 h-full pb-4 page-padding pt-6 bg-white dark:bg-black">
|
||||
<favorite class="flex-item" v-if="!isMobile" />
|
||||
<history-list class="flex-item" />
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,13 @@
|
||||
<div
|
||||
v-else
|
||||
ref="scrollContainer"
|
||||
class="artists-scroll relative -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 overflow-x-auto overflow-y-hidden pt-2"
|
||||
class="artists-scroll relative overflow-x-auto overflow-y-hidden pt-2"
|
||||
style="
|
||||
margin-left: calc(var(--page-pl) * -1);
|
||||
margin-right: calc(var(--page-pr) * -1);
|
||||
padding-left: var(--page-pl);
|
||||
padding-right: var(--page-pr);
|
||||
"
|
||||
@wheel="handleWheel"
|
||||
>
|
||||
<div class="artists-track flex gap-6 md:gap-8 lg:gap-10">
|
||||
@@ -137,12 +143,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Typography System */
|
||||
.section-title {
|
||||
@apply text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight;
|
||||
}
|
||||
|
||||
/* Optimized horizontal scroll */
|
||||
/* 优化水平滚动 */
|
||||
.artists-scroll {
|
||||
/* Hide scrollbar while maintaining functionality */
|
||||
scrollbar-width: none;
|
||||
|
||||
@@ -74,7 +74,3 @@ defineEmits<{
|
||||
(e: 'click'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 使用 Tailwind CSS，无需额外样式 */
|
||||
</style>
|
||||
|
||||
@@ -191,12 +191,7 @@ const playAll = async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Typography System */
|
||||
.section-title {
|
||||
@apply text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
/* 网格 */
|
||||
.songs-grid {
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
@@ -487,9 +487,11 @@ onActivated(() => {
|
||||
animation: fadeInUp 0.5s ease-out backwards;
|
||||
}
|
||||
|
||||
/* FM Wave Animation */
|
||||
/* FM 波形动画 */
|
||||
.fm-wave-bar {
|
||||
@apply w-[3px] rounded-full bg-white/60;
|
||||
width: 3px;
|
||||
border-radius: 9999px;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
height: 12px;
|
||||
animation: fmWave 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -108,12 +108,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Typography System */
|
||||
.section-title {
|
||||
@apply text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight;
|
||||
}
|
||||
|
||||
/* Optimized grid */
|
||||
/* 网格 */
|
||||
.songs-grid {
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
@@ -127,12 +127,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Typography System */
|
||||
.section-title {
|
||||
@apply text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
/* 网格 */
|
||||
.private-content-grid {
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="home-container h-full w-full bg-white dark:bg-black transition-colors duration-500">
|
||||
<n-scrollbar class="h-full">
|
||||
<div class="home-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
|
||||
<div class="home-content w-full pb-32 pt-6 page-padding">
|
||||
<!-- Hero Section -->
|
||||
<home-hero />
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
:size="100"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<div class="list-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
|
||||
<div class="list-content w-full pb-32 pt-6 page-padding">
|
||||
<!-- 列表标题 -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white mb-2">
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Hero 内容 -->
|
||||
<div class="hero-content relative z-10 px-4 md:px-8 pt-10 pb-8">
|
||||
<div class="hero-content relative z-10 page-padding-x pt-10 pb-8">
|
||||
<div class="flex flex-col md:flex-row gap-8 items-center md:items-end">
|
||||
<div class="cover-wrapper relative group">
|
||||
<div
|
||||
@@ -48,7 +48,7 @@
|
||||
|
||||
<!-- Action Bar (Sticky) -->
|
||||
<section
|
||||
class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
class="action-bar sticky top-0 z-20 page-padding-x py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<!-- 左侧：搜索框 -->
|
||||
@@ -111,7 +111,7 @@
|
||||
</section>
|
||||
|
||||
<!-- 扫描进度提示 -->
|
||||
<section v-if="localMusicStore.scanning" class="px-4 md:px-8 mt-6">
|
||||
<section v-if="localMusicStore.scanning" class="page-padding-x mt-6">
|
||||
<div
|
||||
class="flex items-center gap-4 p-4 rounded-2xl bg-primary/5 dark:bg-primary/10 border border-primary/20"
|
||||
>
|
||||
@@ -128,7 +128,7 @@
|
||||
</section>
|
||||
|
||||
<!-- 歌曲列表 -->
|
||||
<section class="list-section px-4 md:px-8 mt-6">
|
||||
<section class="list-section page-padding-x mt-6">
|
||||
<!-- 空状态 -->
|
||||
<div
|
||||
v-if="!localMusicStore.scanning && filteredList.length === 0"
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Hero Content -->
|
||||
<div class="hero-content relative z-10 px-4 md:px-8 pt-4 md:pt-10 pb-8">
|
||||
<div class="hero-content relative z-10 page-padding-x pt-4 md:pt-10 pb-8">
|
||||
<div class="flex flex-col md:flex-row gap-8 md:gap-12 items-center md:items-end">
|
||||
<!-- Playlist Cover -->
|
||||
<div class="cover-wrapper relative group">
|
||||
@@ -114,7 +114,7 @@
|
||||
<!-- Action Bar (Sticky) -->
|
||||
<section
|
||||
v-if="songList.length > 0"
|
||||
class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
class="action-bar sticky top-0 z-20 page-padding-x py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -225,7 +225,7 @@
|
||||
</section>
|
||||
|
||||
<!-- List Content -->
|
||||
<section class="song-list-section px-4 md:px-8 mt-6">
|
||||
<section class="song-list-section page-padding-x mt-6">
|
||||
<n-spin :show="loadingList">
|
||||
<div
|
||||
v-if="filteredSongs.length === 0 && searchKeyword"
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
:size="100"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<div class="mv-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
|
||||
<div class="mv-content w-full pb-32 pt-6 page-padding">
|
||||
<!-- 页面标题 -->
|
||||
<div class="mb-8">
|
||||
<h1
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
></div>
|
||||
|
||||
<!-- 头部区域 -->
|
||||
<div class="flex-shrink-0 z-10 px-6 pt-8 pb-4 relative">
|
||||
<div class="flex-shrink-0 z-10 page-padding pt-8 pb-4 relative">
|
||||
<div class="max-w-5xl mx-auto w-full flex items-end justify-between">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-3">
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<!-- Main Content Scrollbar -->
|
||||
<n-scrollbar ref="contentScrollbarRef" class="flex-1" :size="100" @scroll="handleScroll">
|
||||
<div class="podcast-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
|
||||
<div class="podcast-content w-full pb-32 pt-6 page-padding">
|
||||
<!-- Dashboard View (Recommend) -->
|
||||
<div v-if="currentCategoryId === -1">
|
||||
<!-- Hero Section -->
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Hero Content -->
|
||||
<div class="hero-content relative z-10 px-4 md:px-8 pt-4 md:pt-8 pb-6">
|
||||
<div class="hero-content relative z-10 page-padding-x pt-4 md:pt-8 pb-6">
|
||||
<div class="flex flex-col md:flex-row gap-6 md:gap-10 items-center md:items-end">
|
||||
<!-- Radio Cover -->
|
||||
<div class="radio-cover-wrapper relative group">
|
||||
@@ -103,7 +103,7 @@
|
||||
|
||||
<!-- Action Bar -->
|
||||
<section
|
||||
class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
class="action-bar sticky top-0 z-20 page-padding-x py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -139,7 +139,7 @@
|
||||
</section>
|
||||
|
||||
<!-- Program List Section -->
|
||||
<section class="tab-content px-4 md:px-8 py-6 md:py-8">
|
||||
<section class="tab-content page-padding-x py-6 md:py-8">
|
||||
<div class="mb-6 flex items-center gap-3">
|
||||
<h2
|
||||
class="text-xl font-bold tracking-tight text-neutral-900 md:text-2xl dark:text-white"
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<n-scrollbar class="h-full" @scroll="handleScroll">
|
||||
<div class="search-result-content pb-32">
|
||||
<!-- Header Section -->
|
||||
<section class="header-section px-4 md:px-8 pt-8 pb-6">
|
||||
<section class="header-section page-padding-x pt-8 pb-6">
|
||||
<div class="flex flex-col gap-6">
|
||||
<div>
|
||||
<h1
|
||||
@@ -40,7 +40,7 @@
|
||||
<!-- Action Bar (Sticky) -->
|
||||
<section
|
||||
v-if="searchDetail?.songs?.length && searchType === SEARCH_TYPE.MUSIC"
|
||||
class="action-bar sticky top-0 z-20 px-4 md:px-8 py-3 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
class="action-bar sticky top-0 z-20 page-padding-x py-3 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -110,7 +110,7 @@
|
||||
</section>
|
||||
|
||||
<!-- Results Section -->
|
||||
<section class="results-section px-4 md:px-8 mt-6">
|
||||
<section class="results-section page-padding-x mt-6">
|
||||
<n-spin :show="searchDetailLoading">
|
||||
<div
|
||||
v-if="searchDetailLoading && !isLoadingMore"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
class="search-page-container h-full w-full bg-white dark:bg-black transition-colors duration-500"
|
||||
>
|
||||
<n-scrollbar class="h-full">
|
||||
<div class="search-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
|
||||
<div class="search-content w-full pb-32 pt-6 page-padding">
|
||||
<!-- Search Header / Hero -->
|
||||
<div class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-6">
|
||||
<div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="h-full w-full bg-white dark:bg-black transition-colors duration-500 flex flex-col">
|
||||
<!-- 顶部导航区 -->
|
||||
<div
|
||||
class="flex-shrink-0 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-black z-10 pr-4 sm:pr-6 lg:pr-8 pt-6 pb-2"
|
||||
class="flex-shrink-0 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-black z-10 page-padding pt-6 pb-2"
|
||||
>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white mb-6">
|
||||
{{ t('common.settings') }}
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<n-scrollbar class="flex-1">
|
||||
<div class="w-full mx-auto pb-32 pt-6 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full mx-auto pb-32 pt-6 page-padding">
|
||||
<!-- 基础设置 -->
|
||||
<div v-show="currentSection === 'basic'" class="animate-fade-in">
|
||||
<setting-section :title="t('settings.sections.basic')">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="toplist-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
|
||||
<n-scrollbar class="h-full">
|
||||
<div class="toplist-content w-full pb-32 pt-6 px-4 sm:px-6 lg:px-8 lg:pl-0">
|
||||
<div class="toplist-content w-full pb-32 pt-6 page-padding">
|
||||
<!-- Hero Section -->
|
||||
<div class="mb-10">
|
||||
<h1
|
||||
|
||||
@@ -1,143 +1,294 @@
|
||||
<template>
|
||||
<div class="user-detail-page">
|
||||
<n-scrollbar class="content-scrollbar">
|
||||
<div v-loading="loading" class="content-wrapper">
|
||||
<template v-if="userDetail">
|
||||
<!-- 用户信息部分 -->
|
||||
<div class="user-info-section" :class="setAnimationClass('animate__fadeInDown')">
|
||||
<div
|
||||
class="user-info-bg"
|
||||
:style="{ backgroundImage: `url(${getImgUrl(userDetail.profile.backgroundUrl)})` }"
|
||||
>
|
||||
<div class="user-info-content">
|
||||
<n-avatar
|
||||
round
|
||||
:size="80"
|
||||
:src="getImgUrl(userDetail.profile.avatarUrl, '80y80')"
|
||||
/>
|
||||
<div class="user-info-detail">
|
||||
<div class="user-info-name">
|
||||
{{ userDetail.profile.nickname }}
|
||||
<n-tooltip v-if="isArtist(userDetail.profile)" trigger="hover">
|
||||
<template #trigger>
|
||||
<i class="ri-verified-badge-fill artist-icon"></i>
|
||||
</template>
|
||||
{{ t('user.detail.artist') }}
|
||||
</n-tooltip>
|
||||
</div>
|
||||
<div class="user-info-stats">
|
||||
<div class="user-info-stat-item" @click="showFollowerList">
|
||||
<div class="label">{{ userDetail.profile.followeds }}</div>
|
||||
<div>{{ t('user.profile.followers') }}</div>
|
||||
</div>
|
||||
<div class="user-info-stat-item" @click="showFollowList">
|
||||
<div class="label">{{ userDetail.profile.follows }}</div>
|
||||
<div>{{ t('user.profile.following') }}</div>
|
||||
</div>
|
||||
<div class="user-info-stat-item">
|
||||
<div class="label">{{ userDetail.level }}</div>
|
||||
<div>{{ t('user.profile.level') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-info-signature">
|
||||
{{ userDetail.profile.signature || t('user.detail.noSignature') }}
|
||||
<div class="h-full w-full bg-white dark:bg-neutral-900 transition-colors duration-500">
|
||||
<n-scrollbar class="h-full">
|
||||
<div class="w-full pb-32">
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading">
|
||||
<!-- Hero Skeleton -->
|
||||
<div class="relative h-[300px] overflow-hidden rounded-tl-2xl">
|
||||
<div class="absolute inset-0 bg-neutral-200 dark:bg-neutral-800" />
|
||||
<div class="relative z-10 page-padding-x pt-8 pb-6">
|
||||
<div class="flex flex-col items-center gap-6 md:flex-row md:items-end md:gap-10">
|
||||
<n-skeleton class="h-28 w-28 rounded-full md:h-40 md:w-40" />
|
||||
<div class="flex-1 space-y-4 text-center md:text-left">
|
||||
<n-skeleton class="h-8 w-40" />
|
||||
<div class="flex justify-center gap-6 md:justify-start">
|
||||
<n-skeleton class="h-12 w-16" />
|
||||
<n-skeleton class="h-12 w-16" />
|
||||
<n-skeleton class="h-12 w-16" />
|
||||
</div>
|
||||
<n-skeleton class="h-4 w-2/3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-tabs type="line" animated>
|
||||
<!-- 歌单列表 -->
|
||||
<n-tab-pane name="playlists" :tab="t('user.detail.playlists')">
|
||||
<div v-if="playList.length === 0" class="empty-message">
|
||||
{{ t('user.detail.noPlaylists') }}
|
||||
<!-- Content Skeleton -->
|
||||
<div class="mt-8 page-padding-x">
|
||||
<n-skeleton class="h-10 w-48 mb-6" />
|
||||
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
||||
<div v-for="i in 10" :key="i" class="space-y-2">
|
||||
<n-skeleton class="aspect-square w-full rounded-2xl" />
|
||||
<n-skeleton text class="w-3/4" />
|
||||
<n-skeleton text class="w-1/2" />
|
||||
</div>
|
||||
<div v-else class="playlist-grid" :class="setAnimationClass('animate__fadeInUp')">
|
||||
<div
|
||||
v-for="(item, index) in playList"
|
||||
:key="index"
|
||||
class="playlist-item"
|
||||
:class="setAnimationClass('animate__fadeInUp')"
|
||||
:style="setAnimationDelay(index, 50)"
|
||||
@click="openPlaylist(item)"
|
||||
>
|
||||
<div class="playlist-cover">
|
||||
<n-image
|
||||
:src="getImgUrl(item.coverImgUrl, '200y200')"
|
||||
lazy
|
||||
preview-disabled
|
||||
class="cover-img"
|
||||
/>
|
||||
<div class="play-count">
|
||||
<i class="ri-play-fill"></i>
|
||||
{{ formatNumber(item.playCount) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-info">
|
||||
<div class="playlist-name">{{ item.name }}</div>
|
||||
<div class="playlist-stats">
|
||||
{{ t('user.playlist.trackCount', { count: item.trackCount }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
|
||||
<!-- 听歌排行 -->
|
||||
<n-tab-pane name="records" :tab="t('user.detail.records')">
|
||||
<div v-if="!hasRecordPermission" class="empty-message">
|
||||
<div class="no-permission">
|
||||
<i class="ri-lock-line text-2xl mr-2"></i>
|
||||
{{ t('user.detail.noRecordPermission', { name: userDetail.profile.nickname }) }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="!recordList || recordList.length === 0" class="empty-message">
|
||||
{{ t('user.detail.noRecords') }}
|
||||
</div>
|
||||
<div v-else class="record-list">
|
||||
<div
|
||||
v-for="(item, index) in recordList"
|
||||
:key="item.id"
|
||||
class="record-item"
|
||||
:class="setAnimationClass('animate__bounceInUp')"
|
||||
:style="setAnimationDelay(index, 25)"
|
||||
>
|
||||
<song-item
|
||||
class="song-item"
|
||||
:index="index"
|
||||
:item="item"
|
||||
compact
|
||||
@play="handlePlay"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</template>
|
||||
<div v-else-if="!loading" class="empty-message">
|
||||
{{ t('user.message.loadFailed') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<div class="pb-20"></div>
|
||||
<!-- Main Content -->
|
||||
<div v-else-if="userDetail">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section relative overflow-hidden rounded-tl-2xl">
|
||||
<!-- Background Image with Blur -->
|
||||
<div class="absolute inset-0 -top-20">
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center scale-110 blur-2xl opacity-40 dark:opacity-30"
|
||||
:style="{
|
||||
backgroundImage: `url(${getImgUrl(userDetail.profile.backgroundUrl)})`
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-transparent via-white/80 to-white dark:via-neutral-900/80 dark:to-neutral-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Hero Content -->
|
||||
<div class="relative z-10 page-padding-x pt-4 md:pt-8 pb-6">
|
||||
<div class="flex flex-col md:flex-row gap-6 md:gap-10 items-center md:items-end">
|
||||
<!-- User Avatar -->
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute -inset-2 rounded-full bg-gradient-to-br from-primary/30 via-primary/10 to-transparent blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
/>
|
||||
<div
|
||||
class="relative w-28 h-28 md:w-40 md:h-40 rounded-full overflow-hidden shadow-2xl ring-4 ring-white/50 dark:ring-neutral-800/50"
|
||||
>
|
||||
<img
|
||||
:src="getImgUrl(userDetail.profile.avatarUrl, '300y300')"
|
||||
:alt="userDetail.profile.nickname"
|
||||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Info -->
|
||||
<div class="flex-1 text-center md:text-left">
|
||||
<!-- Badge -->
|
||||
<div class="mb-2 md:mb-3" v-if="isArtist(userDetail.profile)">
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary/10 dark:bg-primary/20 text-primary text-xs font-semibold uppercase tracking-wider"
|
||||
>
|
||||
<i class="ri-verified-badge-fill text-sm" />
|
||||
{{ t('user.detail.artist') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1
|
||||
class="text-2xl md:text-3xl lg:text-4xl font-bold text-neutral-900 dark:text-white tracking-tight"
|
||||
>
|
||||
{{ userDetail.profile.nickname }}
|
||||
</h1>
|
||||
|
||||
<!-- Stats -->
|
||||
<div
|
||||
class="flex flex-wrap items-center justify-center md:justify-start gap-4 md:gap-6 mt-4 md:mt-5"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col items-center gap-0.5 cursor-pointer px-3 py-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors duration-200"
|
||||
@click="showFollowerList"
|
||||
>
|
||||
<span class="text-lg font-bold text-neutral-900 dark:text-white">
|
||||
{{ formatNumber(userDetail.profile.followeds) }}
|
||||
</span>
|
||||
<span class="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
{{ t('user.profile.followers') }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col items-center gap-0.5 cursor-pointer px-3 py-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors duration-200"
|
||||
@click="showFollowList"
|
||||
>
|
||||
<span class="text-lg font-bold text-neutral-900 dark:text-white">
|
||||
{{ formatNumber(userDetail.profile.follows) }}
|
||||
</span>
|
||||
<span class="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
{{ t('user.profile.following') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-0.5 px-3 py-1.5">
|
||||
<span class="text-lg font-bold text-neutral-900 dark:text-white">
|
||||
Lv.{{ userDetail.level }}
|
||||
</span>
|
||||
<span class="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
{{ t('user.profile.level') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Signature -->
|
||||
<p
|
||||
v-if="userDetail.profile.signature"
|
||||
class="mt-3 text-sm text-neutral-500 dark:text-neutral-400 line-clamp-2 max-w-lg"
|
||||
>
|
||||
{{ userDetail.profile.signature }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<section class="page-padding-x pt-4 md:pt-6">
|
||||
<div
|
||||
class="relative flex gap-1 p-1 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl w-fit"
|
||||
>
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="relative px-4 md:px-6 py-2 md:py-2.5 rounded-lg text-sm font-medium transition-all duration-200"
|
||||
:class="
|
||||
activeTab === tab.value
|
||||
? 'text-neutral-900 dark:text-white'
|
||||
: 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
|
||||
"
|
||||
@click="activeTab = tab.value"
|
||||
>
|
||||
<span class="relative z-10">{{ tab.label }}</span>
|
||||
<Transition name="tab-indicator">
|
||||
<div
|
||||
v-if="activeTab === tab.value"
|
||||
class="absolute inset-0 bg-white dark:bg-neutral-700 rounded-lg shadow-sm"
|
||||
/>
|
||||
</Transition>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<section class="page-padding-x py-6 md:py-8">
|
||||
<!-- Playlists Tab -->
|
||||
<div v-show="activeTab === 'playlists'">
|
||||
<div
|
||||
v-if="playList.length === 0"
|
||||
class="flex flex-col items-center justify-center py-16 text-neutral-400 dark:text-neutral-500"
|
||||
>
|
||||
<i class="ri-play-list-line text-5xl mb-4 opacity-50" />
|
||||
<p>{{ t('user.detail.noPlaylists') }}</p>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="grid grid-cols-2 gap-4 gap-y-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in playList"
|
||||
:key="item.id || index"
|
||||
class="group cursor-pointer"
|
||||
:style="{ animationDelay: `${index * 0.03}s` }"
|
||||
@click="openPlaylist(item)"
|
||||
>
|
||||
<!-- Cover -->
|
||||
<div class="relative aspect-square overflow-hidden rounded-2xl shadow-lg">
|
||||
<n-image
|
||||
:src="getImgUrl(item.coverImgUrl, '300y300')"
|
||||
lazy
|
||||
preview-disabled
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
<!-- Play Count Overlay -->
|
||||
<div
|
||||
class="absolute top-2 right-2 px-2 py-0.5 rounded-full text-xs bg-black/50 text-white flex items-center gap-1"
|
||||
>
|
||||
<i class="ri-play-fill" />
|
||||
{{ formatNumber(item.playCount) }}
|
||||
</div>
|
||||
<!-- Play Overlay -->
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center bg-black/0 opacity-0 group-hover:bg-black/20 group-hover:opacity-100 transition-all duration-300"
|
||||
>
|
||||
<div
|
||||
class="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center scale-75 group-hover:scale-100 transition-transform duration-300 shadow-xl"
|
||||
>
|
||||
<i class="ri-play-fill text-xl text-neutral-900 ml-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Info -->
|
||||
<div class="mt-3">
|
||||
<h3
|
||||
class="line-clamp-2 text-sm font-semibold text-neutral-800 dark:text-neutral-100 group-hover:text-primary dark:group-hover:text-primary transition-colors"
|
||||
>
|
||||
{{ item.name }}
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-neutral-400 dark:text-neutral-500">
|
||||
{{ t('user.playlist.trackCount', { count: item.trackCount }) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Records Tab -->
|
||||
<div v-show="activeTab === 'records'">
|
||||
<!-- No Permission -->
|
||||
<div
|
||||
v-if="!hasRecordPermission"
|
||||
class="flex flex-col items-center justify-center py-16 text-neutral-400 dark:text-neutral-500"
|
||||
>
|
||||
<i class="ri-lock-line text-5xl mb-4 opacity-50" />
|
||||
<p>
|
||||
{{
|
||||
t('user.detail.noRecordPermission', {
|
||||
name: userDetail.profile.nickname
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<!-- Empty -->
|
||||
<div
|
||||
v-else-if="!recordList || recordList.length === 0"
|
||||
class="flex flex-col items-center justify-center py-16 text-neutral-400 dark:text-neutral-500"
|
||||
>
|
||||
<i class="ri-music-2-line text-5xl mb-4 opacity-50" />
|
||||
<p>{{ t('user.detail.noRecords') }}</p>
|
||||
</div>
|
||||
<!-- Record List -->
|
||||
<div v-else class="w-full">
|
||||
<div v-for="(item, index) in recordList" :key="item.id" class="song-item-container">
|
||||
<song-item :index="index" :item="item" compact @play="handlePlay" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div
|
||||
v-else-if="!loading"
|
||||
class="flex flex-col items-center justify-center min-h-[60vh] text-neutral-400 dark:text-neutral-500"
|
||||
>
|
||||
<i class="ri-user-line text-6xl mb-4 opacity-30" />
|
||||
<p>{{ t('user.message.loadFailed') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
|
||||
<play-bottom />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
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 { usePlayerStore } from '@/store/modules/player';
|
||||
import type { IUserDetail } from '@/types/user';
|
||||
import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
|
||||
import { formatNumber, getImgUrl } from '@/utils';
|
||||
|
||||
defineOptions({
|
||||
name: 'UserDetail'
|
||||
@@ -149,14 +300,18 @@ const route = useRoute();
|
||||
const message = useMessage();
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
// 获取路由参数中的用户ID
|
||||
const userId = ref<number>(Number(route.params.uid));
|
||||
// 用户数据
|
||||
const userDetail = ref<IUserDetail>();
|
||||
const playList = ref<any[]>([]);
|
||||
const recordList = ref<any[]>([]);
|
||||
const loading = ref(true);
|
||||
const hasRecordPermission = ref(true); // 是否有权限查看听歌记录
|
||||
const hasRecordPermission = ref(true);
|
||||
const activeTab = ref('playlists');
|
||||
|
||||
const tabs = computed(() => [
|
||||
{ value: 'playlists', label: t('user.detail.playlists') },
|
||||
{ value: 'records', label: t('user.detail.records') }
|
||||
]);
|
||||
|
||||
// 加载用户数据
|
||||
const loadUserData = async () => {
|
||||
@@ -168,30 +323,27 @@ const loadUserData = async () => {
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
recordList.value = []; // 清空之前的记录
|
||||
hasRecordPermission.value = true; // 重置权限状态
|
||||
recordList.value = [];
|
||||
hasRecordPermission.value = true;
|
||||
|
||||
// 分开处理请求，处理可能的错误
|
||||
// 1. 获取用户详情和歌单列表
|
||||
// 获取用户详情和歌单列表
|
||||
try {
|
||||
const [userDetailRes, playlistRes] = await Promise.all([
|
||||
getUserDetail(userId.value),
|
||||
getUserPlaylist(userId.value)
|
||||
]);
|
||||
|
||||
userDetail.value = userDetailRes.data;
|
||||
playList.value = playlistRes.data.playlist;
|
||||
} catch (error) {
|
||||
console.error('加载用户基本信息失败:', error);
|
||||
message.error(t('user.message.loadBasicInfoFailed'));
|
||||
return; // 如果基本信息加载失败，直接返回
|
||||
message.error(t('user.message.loadFailed'));
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 单独处理听歌记录请求，这个请求可能会无权限
|
||||
// 单独处理听歌记录请求
|
||||
try {
|
||||
const recordRes = await getUserRecord(userId.value);
|
||||
|
||||
if (recordRes.data && recordRes.data.allData) {
|
||||
if (recordRes.data?.allData) {
|
||||
recordList.value = recordRes.data.allData.map((item: any) => ({
|
||||
...item,
|
||||
...item.song,
|
||||
@@ -200,11 +352,9 @@ const loadUserData = async () => {
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('加载听歌记录失败:', error);
|
||||
// 判断是否是无权限错误
|
||||
if (error.response?.data?.code === -2 || error.data?.code === -2) {
|
||||
hasRecordPermission.value = false;
|
||||
}
|
||||
// 不显示错误消息，因为这是预期的情况
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载用户数据失败:', error);
|
||||
@@ -214,23 +364,21 @@ const loadUserData = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 使用onMounted和watch结合的方式解决路由变化问题
|
||||
onMounted(() => {
|
||||
loadUserData();
|
||||
});
|
||||
|
||||
// 监听路由参数变化
|
||||
watch(
|
||||
() => route.params.uid,
|
||||
(newUid) => {
|
||||
if (newUid && Number(newUid) !== userId.value) {
|
||||
userId.value = Number(newUid);
|
||||
activeTab.value = 'playlists';
|
||||
loadUserData();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 替换显示歌单的方法
|
||||
const openPlaylist = (item: any) => {
|
||||
navigateToMusicList(router, {
|
||||
id: item.id,
|
||||
@@ -241,188 +389,55 @@ const openPlaylist = (item: any) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 播放歌曲
|
||||
const handlePlay = () => {
|
||||
if (!recordList.value || recordList.value.length === 0) return;
|
||||
|
||||
const tracks = recordList.value;
|
||||
playerStore.setPlayList(tracks);
|
||||
playerStore.setPlayList(recordList.value);
|
||||
};
|
||||
|
||||
// 显示关注列表
|
||||
const showFollowList = () => {
|
||||
if (!userDetail.value) return;
|
||||
|
||||
router.push({
|
||||
path: `/user/follows`,
|
||||
query: {
|
||||
uid: userId.value.toString(),
|
||||
name: userDetail.value.profile.nickname
|
||||
}
|
||||
query: { uid: userId.value.toString(), name: userDetail.value.profile.nickname }
|
||||
});
|
||||
};
|
||||
|
||||
// 显示粉丝列表
|
||||
const showFollowerList = () => {
|
||||
if (!userDetail.value) return;
|
||||
|
||||
router.push({
|
||||
path: `/user/followers`,
|
||||
query: {
|
||||
uid: userId.value.toString(),
|
||||
name: userDetail.value.profile.nickname
|
||||
}
|
||||
query: { uid: userId.value.toString(), name: userDetail.value.profile.nickname }
|
||||
});
|
||||
};
|
||||
|
||||
// 判断是否为歌手
|
||||
const isArtist = (profile: any) => {
|
||||
return profile.userType === 4 || profile.userType === 2 || profile.accountType === 2;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-detail-page {
|
||||
@apply h-full flex flex-col;
|
||||
|
||||
.content-scrollbar {
|
||||
@apply flex-1 overflow-hidden;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
@apply flex flex-col;
|
||||
@apply pr-4 pb-4;
|
||||
}
|
||||
.hero-section {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.user-info-section {
|
||||
@apply mb-4;
|
||||
|
||||
.user-info-bg {
|
||||
@apply rounded-xl overflow-hidden bg-cover bg-center relative;
|
||||
height: 200px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
@apply absolute inset-0 bg-black bg-opacity-40;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-content {
|
||||
@apply absolute inset-0 flex items-center p-6;
|
||||
}
|
||||
|
||||
.user-info-detail {
|
||||
@apply ml-4 text-white;
|
||||
|
||||
.user-info-name {
|
||||
@apply text-xl font-bold flex items-center;
|
||||
|
||||
.artist-icon {
|
||||
@apply ml-2 text-blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-stats {
|
||||
@apply flex mt-2;
|
||||
|
||||
.user-info-stat-item {
|
||||
@apply mr-6 text-center;
|
||||
|
||||
.label {
|
||||
@apply text-lg font-bold;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-signature {
|
||||
@apply mt-2 text-sm text-gray-200;
|
||||
@apply line-clamp-2;
|
||||
}
|
||||
}
|
||||
.tab-indicator-enter-active,
|
||||
.tab-indicator-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.playlist-grid {
|
||||
@apply grid gap-4 w-full py-4;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
.tab-indicator-enter-from,
|
||||
.tab-indicator-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.playlist-item {
|
||||
@apply flex flex-col rounded-xl overflow-hidden cursor-pointer;
|
||||
@apply transition-all duration-200;
|
||||
@apply hover:scale-105;
|
||||
|
||||
.playlist-cover {
|
||||
@apply relative;
|
||||
aspect-ratio: 1;
|
||||
|
||||
.cover-img {
|
||||
@apply w-full h-full object-cover rounded-xl;
|
||||
}
|
||||
|
||||
.play-count {
|
||||
@apply absolute top-2 right-2 px-2 py-1 rounded-full text-xs;
|
||||
@apply bg-black bg-opacity-50 text-white flex items-center;
|
||||
|
||||
i {
|
||||
@apply mr-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-info {
|
||||
@apply mt-2 px-1;
|
||||
|
||||
.playlist-name {
|
||||
@apply text-gray-900 dark:text-white font-medium;
|
||||
@apply line-clamp-2 text-sm;
|
||||
}
|
||||
|
||||
.playlist-stats {
|
||||
@apply text-gray-500 dark:text-gray-400 text-xs mt-1;
|
||||
}
|
||||
}
|
||||
.song-item-container {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 0 52px;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
@apply p-4;
|
||||
|
||||
.record-item {
|
||||
@apply flex items-center mb-2 rounded-2xl;
|
||||
@apply bg-light-100 dark:bg-dark-100;
|
||||
@apply transition-all duration-200;
|
||||
@apply hover:bg-light-200 dark:hover:bg-dark-200;
|
||||
}
|
||||
|
||||
.play-score {
|
||||
@apply text-gray-500 dark:text-gray-400 mr-2 text-lg w-10 h-10 rounded-full flex items-center justify-center;
|
||||
}
|
||||
|
||||
.song-item {
|
||||
@apply flex-1;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
@apply flex justify-center items-center p-8;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
@apply flex justify-center items-center p-8;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,67 +1,128 @@
|
||||
<template>
|
||||
<div class="followers-page">
|
||||
<div class="content-wrapper">
|
||||
<div class="page-title" v-if="targetUserName">
|
||||
{{ targetUserName + t('user.follower.userFollowersTitle') }}
|
||||
</div>
|
||||
<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">
|
||||
{{ t('user.follower.noFollowers') }}
|
||||
</div>
|
||||
<div class="follower-grid" :class="setAnimationClass('animate__fadeInUp')">
|
||||
<div
|
||||
v-for="(item, index) in followerList"
|
||||
:key="index"
|
||||
class="follower-item"
|
||||
:class="setAnimationClass('animate__fadeInUp')"
|
||||
:style="setAnimationDelay(index, 30)"
|
||||
@click="viewUserDetail(item.userId, item.nickname)"
|
||||
>
|
||||
<div class="follower-item-inner">
|
||||
<div class="follower-avatar">
|
||||
<n-avatar round :size="70" :src="getImgUrl(item.avatarUrl, '70y70')" />
|
||||
<div v-if="isArtist(item)" class="artist-badge">
|
||||
<i class="ri-verified-badge-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="follower-info">
|
||||
<div class="follower-name" :class="{ 'is-artist': isArtist(item) }">
|
||||
{{ item.nickname }}
|
||||
<n-tooltip v-if="isArtist(item)" trigger="hover">
|
||||
<template #trigger>
|
||||
<i class="ri-verified-badge-fill artist-icon"></i>
|
||||
</template>
|
||||
歌手
|
||||
</n-tooltip>
|
||||
</div>
|
||||
<div class="follower-signature">
|
||||
{{ item.signature || '这个人很懒，什么都没留下' }}
|
||||
</div>
|
||||
<div class="h-full w-full bg-white dark:bg-neutral-900 transition-colors duration-500">
|
||||
<n-scrollbar class="h-full">
|
||||
<div class="w-full pb-32">
|
||||
<!-- Loading State -->
|
||||
<div v-if="followerListLoading && followerList.length === 0">
|
||||
<div class="page-padding-x pt-8">
|
||||
<n-skeleton class="h-8 w-48 mb-6" />
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
|
||||
>
|
||||
<div v-for="i in 12" :key="i" class="flex flex-col items-center space-y-3">
|
||||
<n-skeleton class="h-20 w-20 rounded-full" />
|
||||
<n-skeleton text class="w-16" />
|
||||
<n-skeleton text class="w-24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-space v-if="followerListLoading" justify="center" class="loading-more">
|
||||
<n-spin size="small" />
|
||||
</n-space>
|
||||
<!-- Main Content -->
|
||||
<template v-else>
|
||||
<!-- Header Section -->
|
||||
<section class="page-padding-x pt-6 md:pt-8 pb-4">
|
||||
<h1
|
||||
class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white tracking-tight"
|
||||
>
|
||||
<template v-if="targetUserName">
|
||||
{{ targetUserName + t('user.follower.userFollowersTitle') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t('user.follower.myFollowersTitle') }}
|
||||
</template>
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
<n-button
|
||||
v-else-if="hasMoreFollowers"
|
||||
class="load-more-btn"
|
||||
secondary
|
||||
block
|
||||
@click="loadMoreFollowers"
|
||||
>
|
||||
{{ t('user.follower.loadMore') }}
|
||||
</n-button>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
<!-- Empty State -->
|
||||
<div
|
||||
v-if="followerList.length === 0"
|
||||
class="flex flex-col items-center justify-center py-20 text-neutral-400 dark:text-neutral-500"
|
||||
>
|
||||
<i class="ri-user-heart-line text-5xl mb-4 opacity-50" />
|
||||
<p>{{ t('user.follower.noFollowers') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- User Grid -->
|
||||
<section v-else class="page-padding-x">
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 gap-y-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in followerList"
|
||||
:key="item.userId"
|
||||
class="user-card group cursor-pointer"
|
||||
:style="{ animationDelay: `${index * 0.03}s` }"
|
||||
@click="viewUserDetail(item.userId, item.nickname)"
|
||||
>
|
||||
<!-- Avatar -->
|
||||
<div class="relative mx-auto w-fit">
|
||||
<div
|
||||
class="w-20 h-20 md:w-24 md:h-24 rounded-full overflow-hidden shadow-lg ring-2 ring-transparent group-hover:ring-primary/30 transition-all duration-300"
|
||||
>
|
||||
<img
|
||||
:src="getImgUrl(item.avatarUrl, '100y100')"
|
||||
:alt="item.nickname"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<!-- Artist Badge -->
|
||||
<div
|
||||
v-if="isArtist(item)"
|
||||
class="absolute -bottom-0.5 -right-0.5 w-6 h-6 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center shadow-md"
|
||||
>
|
||||
<i class="ri-verified-badge-fill text-primary text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="mt-3 text-center">
|
||||
<h3
|
||||
class="text-sm font-semibold text-neutral-800 dark:text-neutral-100 group-hover:text-primary transition-colors truncate px-1"
|
||||
>
|
||||
{{ item.nickname }}
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-neutral-400 dark:text-neutral-500 line-clamp-1 px-1">
|
||||
{{ item.signature || t('user.follow.noSignature') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading More -->
|
||||
<div v-if="followerListLoading" class="flex items-center justify-center gap-2 py-8">
|
||||
<div
|
||||
class="w-5 h-5 border-2 border-primary/30 border-t-primary rounded-full animate-spin"
|
||||
/>
|
||||
<span class="text-sm text-neutral-400 dark:text-neutral-500">
|
||||
{{ t('common.loading') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Load More Button -->
|
||||
<div v-else-if="hasMoreFollowers" class="flex justify-center py-8">
|
||||
<button
|
||||
class="px-6 py-2.5 rounded-full bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-sm font-medium text-neutral-700 dark:text-neutral-200 transition-all duration-200 hover:scale-105 active:scale-95"
|
||||
@click="loadMoreFollowers"
|
||||
>
|
||||
{{ t('user.follower.loadMore') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- No More -->
|
||||
<div
|
||||
v-else-if="followerList.length > 0"
|
||||
class="text-center text-sm text-neutral-400 dark:text-neutral-500 py-8"
|
||||
>
|
||||
— {{ t('common.noMore') || '没有更多了' }} —
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
|
||||
<play-bottom />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -72,9 +133,10 @@ import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { getUserFollowers } from '@/api/user';
|
||||
import PlayBottom from '@/components/common/PlayBottom.vue';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import type { IUserFollow } from '@/types/user';
|
||||
import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
|
||||
import { getImgUrl } from '@/utils';
|
||||
import { checkLoginStatus as checkAuthStatus } from '@/utils/auth';
|
||||
|
||||
defineOptions({
|
||||
@@ -98,7 +160,6 @@ const targetUserName = ref<string>('');
|
||||
|
||||
const user = computed(() => userStore.user);
|
||||
|
||||
// 检查是否有指定用户ID
|
||||
const checkTargetUser = () => {
|
||||
const uid = route.query.uid;
|
||||
const name = route.query.name;
|
||||
@@ -109,47 +170,37 @@ const checkTargetUser = () => {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 如果没有指定用户ID，则显示当前登录用户的粉丝列表
|
||||
return checkLoginStatus();
|
||||
};
|
||||
|
||||
// 检查登录状态
|
||||
const checkLoginStatus = () => {
|
||||
const loginInfo = checkAuthStatus();
|
||||
|
||||
if (!loginInfo.isLoggedIn) {
|
||||
router.push('/login');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 如果store中没有用户数据，但localStorage中有，则恢复用户数据
|
||||
if (!userStore.user && loginInfo.user) {
|
||||
userStore.setUser(loginInfo.user);
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 加载粉丝列表
|
||||
const loadFollowerList = async () => {
|
||||
// 确定要加载哪个用户的粉丝列表
|
||||
const userId = targetUserId.value || user.value?.userId;
|
||||
|
||||
if (!userId) return;
|
||||
|
||||
try {
|
||||
followerListLoading.value = true;
|
||||
const { data } = await getUserFollowers(userId, followerLimit.value, followerOffset.value);
|
||||
|
||||
if (!data || !data.followeds) {
|
||||
if (!data?.followeds) {
|
||||
hasMoreFollowers.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const newFollowers = data.followeds as IUserFollow[];
|
||||
followerList.value = [...followerList.value, ...newFollowers];
|
||||
|
||||
// 判断是否还有更多粉丝
|
||||
hasMoreFollowers.value = newFollowers.length >= followerLimit.value;
|
||||
} catch (error) {
|
||||
console.error('加载粉丝列表失败:', error);
|
||||
@@ -159,13 +210,11 @@ const loadFollowerList = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 加载更多粉丝
|
||||
const loadMoreFollowers = async () => {
|
||||
followerOffset.value += followerLimit.value;
|
||||
await loadFollowerList();
|
||||
};
|
||||
|
||||
// 查看用户详情
|
||||
const viewUserDetail = (userId: number, nickname: string) => {
|
||||
router.push({
|
||||
path: `/user/detail/${userId}`,
|
||||
@@ -173,26 +222,22 @@ const viewUserDetail = (userId: number, nickname: string) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 判断是否为歌手
|
||||
const isArtist = (user: IUserFollow) => {
|
||||
// 根据用户类型判断是否为歌手，userType 为 4 表示是官方认证的音乐人
|
||||
return user.userType === 4 || user.userType === 2 || user.accountType === 2;
|
||||
};
|
||||
|
||||
// 页面挂载时加载数据
|
||||
onMounted(() => {
|
||||
if (checkTargetUser()) {
|
||||
loadFollowerList();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听路由变化重新加载数据
|
||||
watch(
|
||||
() => route.query,
|
||||
(newQuery) => {
|
||||
if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
|
||||
followerList.value = []; // 清空列表
|
||||
followerOffset.value = 0; // 重置偏移量
|
||||
followerList.value = [];
|
||||
followerOffset.value = 0;
|
||||
checkTargetUser();
|
||||
loadFollowerList();
|
||||
}
|
||||
@@ -201,83 +246,23 @@ watch(
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.followers-page {
|
||||
@apply h-full flex flex-col;
|
||||
.user-card {
|
||||
animation: fadeInUp 0.4s ease backwards;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
@apply flex-1 overflow-hidden p-4;
|
||||
@apply flex flex-col;
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.scrollbar-container {
|
||||
@apply h-full;
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.follower-grid {
|
||||
@apply grid gap-4 w-full;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.follower-item {
|
||||
@apply rounded-xl overflow-hidden cursor-pointer;
|
||||
@apply transition-all duration-200;
|
||||
@apply hover:scale-105;
|
||||
|
||||
&-inner {
|
||||
@apply flex flex-col items-center p-4 h-full;
|
||||
@apply bg-light-100 dark:bg-dark-100;
|
||||
@apply transition-all duration-200;
|
||||
@apply hover:bg-light-200 dark:hover:bg-dark-200;
|
||||
}
|
||||
|
||||
.follower-avatar {
|
||||
@apply relative;
|
||||
|
||||
.artist-badge {
|
||||
@apply absolute bottom-0 right-0;
|
||||
@apply text-blue-500 text-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.follower-info {
|
||||
@apply mt-3 text-center w-full;
|
||||
|
||||
.follower-name {
|
||||
@apply text-gray-900 dark:text-white text-base font-medium;
|
||||
@apply flex items-center justify-center;
|
||||
|
||||
&.is-artist {
|
||||
@apply text-blue-500;
|
||||
}
|
||||
|
||||
.artist-icon {
|
||||
@apply ml-1 text-blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
.follower-signature {
|
||||
@apply text-gray-500 dark:text-gray-400 text-xs mt-1;
|
||||
@apply line-clamp-2 text-center;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-follower {
|
||||
@apply text-center py-8 text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.load-more-btn {
|
||||
@apply mt-4 mb-8;
|
||||
}
|
||||
|
||||
.loading-more {
|
||||
@apply my-4;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
@apply text-xl font-bold mb-4;
|
||||
@apply text-gray-900 dark:text-white;
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,67 +1,128 @@
|
||||
<template>
|
||||
<div class="follows-page">
|
||||
<div class="content-wrapper">
|
||||
<div class="page-title" v-if="targetUserName">
|
||||
{{ targetUserName + t('user.follow.userFollowsTitle') }}
|
||||
</div>
|
||||
<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">
|
||||
{{ t('user.follow.noFollowings') }}
|
||||
</div>
|
||||
<div class="follow-grid" :class="setAnimationClass('animate__fadeInUp')">
|
||||
<div
|
||||
v-for="(item, index) in followList"
|
||||
:key="index"
|
||||
class="follow-item"
|
||||
:class="setAnimationClass('animate__fadeInUp')"
|
||||
:style="setAnimationDelay(index, 30)"
|
||||
@click="viewUserDetail(item.userId, item.nickname)"
|
||||
>
|
||||
<div class="follow-item-inner">
|
||||
<div class="follow-avatar">
|
||||
<n-avatar round :size="70" :src="getImgUrl(item.avatarUrl, '70y70')" />
|
||||
<div v-if="isArtist(item)" class="artist-badge">
|
||||
<i class="ri-verified-badge-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="follow-info">
|
||||
<div class="follow-name" :class="{ 'is-artist': isArtist(item) }">
|
||||
{{ item.nickname }}
|
||||
<n-tooltip v-if="isArtist(item)" trigger="hover">
|
||||
<template #trigger>
|
||||
<i class="ri-verified-badge-fill artist-icon"></i>
|
||||
</template>
|
||||
歌手
|
||||
</n-tooltip>
|
||||
</div>
|
||||
<div class="follow-signature">
|
||||
{{ item.signature || t('user.follow.noSignature') }}
|
||||
</div>
|
||||
<div class="h-full w-full bg-white dark:bg-neutral-900 transition-colors duration-500">
|
||||
<n-scrollbar class="h-full">
|
||||
<div class="w-full pb-32">
|
||||
<!-- Loading State -->
|
||||
<div v-if="followListLoading && followList.length === 0">
|
||||
<div class="page-padding-x pt-8">
|
||||
<n-skeleton class="h-8 w-48 mb-6" />
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
|
||||
>
|
||||
<div v-for="i in 12" :key="i" class="flex flex-col items-center space-y-3">
|
||||
<n-skeleton class="h-20 w-20 rounded-full" />
|
||||
<n-skeleton text class="w-16" />
|
||||
<n-skeleton text class="w-24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-space v-if="followListLoading" justify="center" class="loading-more">
|
||||
<n-spin size="small" />
|
||||
</n-space>
|
||||
<!-- Main Content -->
|
||||
<template v-else>
|
||||
<!-- Header Section -->
|
||||
<section class="page-padding-x pt-6 md:pt-8 pb-4">
|
||||
<h1
|
||||
class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white tracking-tight"
|
||||
>
|
||||
<template v-if="targetUserName">
|
||||
{{ targetUserName + t('user.follow.userFollowsTitle') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t('user.follow.myFollowsTitle') }}
|
||||
</template>
|
||||
</h1>
|
||||
</section>
|
||||
|
||||
<n-button
|
||||
v-else-if="hasMoreFollows"
|
||||
class="load-more-btn"
|
||||
secondary
|
||||
block
|
||||
@click="loadMoreFollows"
|
||||
>
|
||||
{{ t('user.follow.loadMore') }}
|
||||
</n-button>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
<!-- Empty State -->
|
||||
<div
|
||||
v-if="followList.length === 0"
|
||||
class="flex flex-col items-center justify-center py-20 text-neutral-400 dark:text-neutral-500"
|
||||
>
|
||||
<i class="ri-user-follow-line text-5xl mb-4 opacity-50" />
|
||||
<p>{{ t('user.follow.noFollowings') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- User Grid -->
|
||||
<section v-else class="page-padding-x">
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 gap-y-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in followList"
|
||||
:key="item.userId"
|
||||
class="user-card group cursor-pointer"
|
||||
:style="{ animationDelay: `${index * 0.03}s` }"
|
||||
@click="viewUserDetail(item.userId, item.nickname)"
|
||||
>
|
||||
<!-- Avatar -->
|
||||
<div class="relative mx-auto w-fit">
|
||||
<div
|
||||
class="w-20 h-20 md:w-24 md:h-24 rounded-full overflow-hidden shadow-lg ring-2 ring-transparent group-hover:ring-primary/30 transition-all duration-300"
|
||||
>
|
||||
<img
|
||||
:src="getImgUrl(item.avatarUrl, '100y100')"
|
||||
:alt="item.nickname"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<!-- Artist Badge -->
|
||||
<div
|
||||
v-if="isArtist(item)"
|
||||
class="absolute -bottom-0.5 -right-0.5 w-6 h-6 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center shadow-md"
|
||||
>
|
||||
<i class="ri-verified-badge-fill text-primary text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="mt-3 text-center">
|
||||
<h3
|
||||
class="text-sm font-semibold text-neutral-800 dark:text-neutral-100 group-hover:text-primary transition-colors truncate px-1"
|
||||
>
|
||||
{{ item.nickname }}
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-neutral-400 dark:text-neutral-500 line-clamp-1 px-1">
|
||||
{{ item.signature || t('user.follow.noSignature') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading More -->
|
||||
<div v-if="followListLoading" class="flex items-center justify-center gap-2 py-8">
|
||||
<div
|
||||
class="w-5 h-5 border-2 border-primary/30 border-t-primary rounded-full animate-spin"
|
||||
/>
|
||||
<span class="text-sm text-neutral-400 dark:text-neutral-500">
|
||||
{{ t('common.loading') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Load More Button -->
|
||||
<div v-else-if="hasMoreFollows" class="flex justify-center py-8">
|
||||
<button
|
||||
class="px-6 py-2.5 rounded-full bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-sm font-medium text-neutral-700 dark:text-neutral-200 transition-all duration-200 hover:scale-105 active:scale-95"
|
||||
@click="loadMoreFollows"
|
||||
>
|
||||
{{ t('user.follow.loadMore') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- No More -->
|
||||
<div
|
||||
v-else-if="followList.length > 0"
|
||||
class="text-center text-sm text-neutral-400 dark:text-neutral-500 py-8"
|
||||
>
|
||||
— {{ t('common.noMore') || '没有更多了' }} —
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
|
||||
<play-bottom />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -72,9 +133,10 @@ import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { getUserFollows } from '@/api/user';
|
||||
import PlayBottom from '@/components/common/PlayBottom.vue';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import type { IUserFollow } from '@/types/user';
|
||||
import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
|
||||
import { getImgUrl } from '@/utils';
|
||||
import { checkLoginStatus as checkAuthStatus } from '@/utils/auth';
|
||||
|
||||
defineOptions({
|
||||
@@ -109,47 +171,38 @@ const checkTargetUser = () => {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 如果没有指定用户ID，则显示当前登录用户的关注列表
|
||||
return checkLoginStatus();
|
||||
};
|
||||
|
||||
// 检查登录状态
|
||||
const checkLoginStatus = () => {
|
||||
const loginInfo = checkAuthStatus();
|
||||
|
||||
if (!loginInfo.isLoggedIn) {
|
||||
router.push('/login');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 如果store中没有用户数据，但localStorage中有，则恢复用户数据
|
||||
if (!userStore.user && loginInfo.user) {
|
||||
userStore.setUser(loginInfo.user);
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 加载关注列表
|
||||
const loadFollowList = async () => {
|
||||
// 确定要加载哪个用户的关注列表
|
||||
const userId = targetUserId.value || user.value?.userId;
|
||||
|
||||
if (!userId) return;
|
||||
|
||||
try {
|
||||
followListLoading.value = true;
|
||||
const { data } = await getUserFollows(userId, followLimit.value, followOffset.value);
|
||||
|
||||
if (!data || !data.follow) {
|
||||
if (!data?.follow) {
|
||||
hasMoreFollows.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const newFollows = data.follow as IUserFollow[];
|
||||
followList.value = [...followList.value, ...newFollows];
|
||||
|
||||
// 判断是否还有更多关注
|
||||
hasMoreFollows.value = newFollows.length >= followLimit.value;
|
||||
} catch (error) {
|
||||
console.error('加载关注列表失败:', error);
|
||||
@@ -159,13 +212,11 @@ const loadFollowList = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 加载更多关注
|
||||
const loadMoreFollows = async () => {
|
||||
followOffset.value += followLimit.value;
|
||||
await loadFollowList();
|
||||
};
|
||||
|
||||
// 查看用户详情
|
||||
const viewUserDetail = (userId: number, nickname: string) => {
|
||||
router.push({
|
||||
path: `/user/detail/${userId}`,
|
||||
@@ -173,26 +224,22 @@ const viewUserDetail = (userId: number, nickname: string) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 判断是否为歌手
|
||||
const isArtist = (user: IUserFollow) => {
|
||||
// 根据用户类型判断是否为歌手，userType 为 4 表示是官方认证的音乐人
|
||||
return user.userType === 4 || user.userType === 2 || user.accountType === 2;
|
||||
};
|
||||
|
||||
// 页面挂载时加载数据
|
||||
onMounted(() => {
|
||||
if (checkTargetUser()) {
|
||||
loadFollowList();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听路由变化重新加载数据
|
||||
watch(
|
||||
() => route.query,
|
||||
(newQuery) => {
|
||||
if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
|
||||
followList.value = []; // 清空列表
|
||||
followOffset.value = 0; // 重置偏移量
|
||||
followList.value = [];
|
||||
followOffset.value = 0;
|
||||
checkTargetUser();
|
||||
loadFollowList();
|
||||
}
|
||||
@@ -201,83 +248,23 @@ watch(
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.follows-page {
|
||||
@apply h-full flex flex-col;
|
||||
.user-card {
|
||||
animation: fadeInUp 0.4s ease backwards;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
@apply flex-1 overflow-hidden p-4;
|
||||
@apply flex flex-col;
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.scrollbar-container {
|
||||
@apply h-full;
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.follow-grid {
|
||||
@apply grid gap-4 w-full;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.follow-item {
|
||||
@apply rounded-xl overflow-hidden cursor-pointer;
|
||||
@apply transition-all duration-200;
|
||||
@apply hover:scale-105;
|
||||
|
||||
&-inner {
|
||||
@apply flex flex-col items-center p-4 h-full;
|
||||
@apply bg-light-100 dark:bg-dark-100;
|
||||
@apply transition-all duration-200;
|
||||
@apply hover:bg-light-200 dark:hover:bg-dark-200;
|
||||
}
|
||||
|
||||
.follow-avatar {
|
||||
@apply relative;
|
||||
|
||||
.artist-badge {
|
||||
@apply absolute bottom-0 right-0;
|
||||
@apply text-blue-500 text-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-info {
|
||||
@apply mt-3 text-center w-full;
|
||||
|
||||
.follow-name {
|
||||
@apply text-gray-900 dark:text-white text-base font-medium;
|
||||
@apply flex items-center justify-center;
|
||||
|
||||
&.is-artist {
|
||||
@apply text-blue-500;
|
||||
}
|
||||
|
||||
.artist-icon {
|
||||
@apply ml-1 text-blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-signature {
|
||||
@apply text-gray-500 dark:text-gray-400 text-xs mt-1;
|
||||
@apply line-clamp-2 text-center;
|
||||
max-height: 2.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-follow {
|
||||
@apply text-center py-8 text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.load-more-btn {
|
||||
@apply mt-4 mb-8;
|
||||
}
|
||||
|
||||
.loading-more {
|
||||
@apply my-4;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
@apply text-xl font-bold mb-4;
|
||||
@apply text-gray-900 dark:text-white;
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -585,7 +585,8 @@ const currentLoginType = computed(() => userStore.loginType);
|
||||
|
||||
.mobile {
|
||||
.user-page {
|
||||
@apply px-4;
|
||||
padding-left: var(--page-pl);
|
||||
padding-right: var(--page-pr);
|
||||
}
|
||||
|
||||
.login-container {
|
||||
|
||||
Reference in New Issue
Block a user