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

feat: 优化页面样式边距

Browse Source
This commit is contained in:
alger
2026-02-08 01:39:20 +08:00
parent e53a035ebc
commit ae20f78ec0
34 changed files with 1201 additions and 2107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/album/index.vue
+1 -1
View File
@@ -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">
src/renderer/views/artist/detail.vue
+5 -5
View File
@@ -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 -->
src/renderer/views/download/DownloadPage.vue
+3 -3
View File
@@ -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">
src/renderer/views/historyAndFavorite/index.vue
+1 -1
View File
@@ -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>
src/renderer/views/home/components/HomeArtists.vue
+8 -7
View File
@@ -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;
src/renderer/views/home/components/HomeCard.vue
-4
View File
@@ -74,7 +74,3 @@ defineEmits<{
(e: 'click'): void;
}>();
</script>
<style scoped>
/* 使用 Tailwind CSS，无需额外样式 */
</style>
src/renderer/views/home/components/HomeDailyRecommend.vue
+1 -6
View File
@@ -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;
}
src/renderer/views/home/components/HomeHero.vue
+4 -2
View File
@@ -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;
}
src/renderer/views/home/components/HomeNewSongs.vue
+1 -6
View File
@@ -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;
}
src/renderer/views/home/components/HomePrivateContent.vue
+1 -6
View File
@@ -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;
}
src/renderer/views/home/index.vue
+1 -1
View File
@@ -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 />
src/renderer/views/list/index.vue
+1 -1
View File
@@ -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">
src/renderer/views/local-music/index.vue
+4 -4
View File
@@ -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"
src/renderer/views/music/MusicListPage.vue
+3 -3
View File
@@ -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"
src/renderer/views/mv/index.vue
+1 -1
View File
@@ -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
src/renderer/views/playlist/ImportPlaylist.vue
+1 -1
View File
@@ -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">
src/renderer/views/podcast/index.vue
+1 -1
View File
@@ -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 -->
src/renderer/views/podcast/radio.vue
+3 -3
View File
@@ -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"
src/renderer/views/search/SearchResult.vue
+3 -3
View File
@@ -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"
src/renderer/views/search/index.vue
+1 -1
View File
@@ -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>
src/renderer/views/set/index.vue
+2 -2
View File
@@ -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')">
src/renderer/views/toplist/index.vue
+1 -1
View File
@@ -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
src/renderer/views/user/detail.vue
+300 -285
View File
@@ -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>
src/renderer/views/user/followers.vue
+136 -151
View File
@@ -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>
src/renderer/views/user/follows.vue
+136 -149
View File
@@ -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>
src/renderer/views/user/index.vue
+2 -1
View File
@@ -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 {