From 2ef9c1afda846b771fca5595a6b35e083c256c30 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Wed, 4 Feb 2026 20:14:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=B8=93=E8=BE=91?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/views/album/index.vue | 345 +++++++++++++++++++++++++++++
 1 file changed, 345 insertions(+)
 create mode 100644 src/renderer/views/album/index.vue

diff --git a/src/renderer/views/album/index.vue b/src/renderer/views/album/index.vue
new file mode 100644
index 0000000..b4b2dd8
--- /dev/null
+++ b/src/renderer/views/album/index.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="list-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
+    <!-- 专辑地区分类 - 保持固定在顶部 -->
+    <div
+      class="play-list-type 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 pr-4 sm:pr-6 lg:pr-8" @wheel.prevent="handleWheel">
+          <span
+            v-for="(item, index) in areas"
+            :key="item.value"
+            class="play-list-type-item"
+            :class="[
+              setAnimationClass('animate__bounceIn'),
+              { active: currentArea === item.value }
+            ]"
+            :style="getAnimationDelay(index)"
+            @click="handleClickArea(item)"
+          >
+            {{ item.name }}
+          </span>
+        </div>
+      </n-scrollbar>
+    </div>
+
+    <!-- 专辑列表 -->
+    <n-scrollbar
+      ref="contentScrollbarRef"
+      class="h-full"
+      style="height: calc(100% - 73px)"
+      :size="100"
+      @scroll="handleScroll"
+    >
+      <div class="list-content w-full pb-32 pt-6 pr-4 sm:pr-6 lg:pr-8">
+        <!-- 列表标题 -->
+        <div class="mb-8">
+          <h1 class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white mb-2">
+            {{ currentAreaName }}
+          </h1>
+          <p class="text-neutral-500 dark:text-neutral-400">{{ t('comp.newAlbum.title') }}</p>
+        </div>
+
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
+          <!-- Loading State -->
+          <template v-if="loading && page === 0">
+            <div v-for="i in 15" :key="`loading-${i}`" class="space-y-3">
+              <div
+                class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
+              />
+              <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+              <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+            </div>
+          </template>
+
+          <!-- Content State -->
+          <template v-else>
+            <div
+              v-for="(album, index) in albumList"
+              :key="album.id"
+              class="list-card group cursor-pointer animate-item"
+              :style="{ animationDelay: calculateAnimationDelay(index % TOTAL_ITEMS, 0.05) }"
+              @click.stop="openAlbum(album)"
+            >
+              <!-- Cover Image -->
+              <div
+                class="relative aspect-square overflow-hidden rounded-2xl shadow-md group-hover:shadow-xl transition-all duration-500"
+              >
+                <img
+                  :src="getImgUrl(album.picUrl, '400y400')"
+                  :alt="album.name"
+                  class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                  loading="lazy"
+                  crossorigin="anonymous"
+                />
+
+                <!-- Play Overlay -->
+                <div
+                  class="absolute inset-0 bg-transparent group-hover:bg-black/20 transition-colors duration-300 flex items-center justify-center"
+                >
+                  <div
+                    class="play-icon w-12 h-12 rounded-full bg-white/90 flex items-center justify-center opacity-0 scale-75 group-hover:opacity-100 group-hover:scale-100 transition-all duration-300 shadow-xl"
+                    @click.stop="playAlbum(album)"
+                  >
+                    <i class="ri-play-fill text-2xl text-neutral-900 ml-1"></i>
+                  </div>
+                </div>
+
+                <!-- Album Size Badge -->
+                <div
+                  v-if="album.size"
+                  class="absolute top-3 left-3 px-2 py-1 rounded-lg bg-black/40 backdrop-blur-md text-white text-[10px] font-bold flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                >
+                  <i class="ri-music-2-fill"></i>
+                  {{ album.size }} {{ t('comp.playlistDrawer.count') }}
+                </div>
+              </div>
+
+              <!-- Info -->
+              <div class="mt-3 space-y-1">
+                <h3
+                  class="text-sm md:text-base font-bold text-neutral-900 dark:text-white line-clamp-1 group-hover:text-primary transition-colors"
+                >
+                  {{ album.name }}
+                </h3>
+                <p
+                  v-if="getArtistNames(album)"
+                  class="text-xs text-neutral-500 dark:text-neutral-400 line-clamp-1"
+                >
+                  {{ getArtistNames(album) }}
+                </p>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <!-- 加载更多 -->
+        <div v-if="isLoadingMore" class="flex justify-center items-center py-8">
+          <n-spin size="small" />
+          <span class="ml-2 text-neutral-500">{{ t('comp.homeListItem.loading') }}</span>
+        </div>
+        <div v-if="!hasMore && albumList.length > 0" class="text-center py-8 text-neutral-500">
+          {{ t('comp.recommendSonglist.empty') }}
+        </div>
+      </div>
+    </n-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { getNewAlbums } from '@/api/album';
+import { getAlbum } from '@/api/list';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import { usePlayerCoreStore } from '@/store/modules/playerCore';
+import { usePlaylistStore } from '@/store/modules/playlist';
+import { calculateAnimationDelay, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+
+defineOptions({
+  name: 'Album'
+});
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+
+const TOTAL_ITEMS = 30; // 每页数量
+
+const areas = [
+  { name: '全部', value: 'ALL' },
+  { name: '华语', value: 'ZH' },
+  { name: '欧美', value: 'EA' },
+  { name: '韩国', value: 'KR' },
+  { name: '日本', value: 'JP' }
+];
+
+const albumList = ref<any[]>([]);
+const page = ref(0);
+const hasMore = ref(true);
+const isLoadingMore = ref(false);
+const loading = ref(false);
+
+const currentArea = ref((route.query.area as string) || 'ALL');
+const currentAreaName = computed(
+  () => areas.find((a) => a.value === currentArea.value)?.name || '全部'
+);
+
+const getAnimationDelay = computed(() => {
+  return (index: number) => setAnimationDelay(index, 30);
+});
+
+const loadList = async (area: string, isLoadMore = false) => {
+  if (!hasMore.value && isLoadMore) return;
+  if (isLoadMore) {
+    isLoadingMore.value = true;
+  } else {
+    loading.value = true;
+    page.value = 0;
+    albumList.value = [];
+    contentScrollbarRef.value?.scrollTo({ top: 0 });
+  }
+
+  try {
+    const params = {
+      area: area,
+      limit: TOTAL_ITEMS,
+      offset: page.value * TOTAL_ITEMS
+    };
+    const { data } = await getNewAlbums(params);
+
+    // API returns { albums: [], code: 200 } or { monthData: [] } depending on endpoint
+    // /album/new returns { albums: [], total, code }
+    const albums = data.albums || [];
+
+    if (isLoadMore) {
+      albumList.value.push(...albums);
+    } else {
+      albumList.value = albums;
+    }
+
+    // Check if we have more data
+    hasMore.value = albums.length === TOTAL_ITEMS;
+    page.value++;
+  } catch (error) {
+    console.error('加载专辑列表失败:', error);
+  } finally {
+    loading.value = false;
+    isLoadingMore.value = false;
+  }
+};
+
+const handleScroll = (e: any) => {
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+  if (scrollTop + clientHeight >= scrollHeight - 100 && !isLoadingMore.value && hasMore.value) {
+    loadList(currentArea.value, true);
+  }
+};
+
+const handleClickArea = (item: { name: string; value: string }) => {
+  if (currentArea.value === item.value) return;
+  currentArea.value = item.value;
+  router.replace({ query: { area: item.value } });
+  loadList(item.value);
+};
+
+const scrollbarRef = ref();
+const contentScrollbarRef = ref();
+
+const handleWheel = (e: WheelEvent) => {
+  const scrollbar = scrollbarRef.value;
+  if (scrollbar) {
+    const delta = e.deltaY || e.detail;
+    scrollbar.scrollBy({ left: delta });
+  }
+};
+
+const getArtistNames = (album: any) => {
+  if (album.artists) {
+    return album.artists.map((ar: any) => ar.name).join(' / ');
+  }
+  return '';
+};
+
+const openAlbum = async (album: any) => {
+  try {
+    navigateToMusicList(router, {
+      id: album.id,
+      type: 'album',
+      name: album.name,
+      listInfo: {
+        ...album,
+        coverImgUrl: album.picUrl
+      },
+      canRemove: false
+    });
+  } catch (error) {
+    console.error('Failed to navigate to album:', error);
+  }
+};
+
+const playAlbum = async (album: any) => {
+  try {
+    const { data } = await getAlbum(album.id);
+    if (data.code === 200 && data.songs?.length > 0) {
+      const playerCore = usePlayerCoreStore();
+      const playlistStore = usePlaylistStore();
+
+      const playlist = data.songs.map((s: any) => ({
+        id: s.id,
+        name: s.name,
+        picUrl: s.al?.picUrl || album.picUrl,
+        source: 'netease',
+        song: s,
+        ...s,
+        playLoading: false
+      }));
+
+      playlistStore.setPlayList(playlist, false, false);
+      await playerCore.handlePlayMusic(playlist[0], true);
+    }
+  } catch (error) {
+    console.error('Failed to play album:', error);
+  }
+};
+
+onMounted(() => {
+  currentArea.value = (route.query.area as string) || 'ALL';
+  loadList(currentArea.value);
+});
+
+watch(
+  () => route.query.area,
+  (newArea) => {
+    if (newArea && newArea !== currentArea.value) {
+      currentArea.value = newArea as string;
+      loadList(newArea as string);
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.play-list-type {
+  .categories-wrapper {
+    @apply flex items-center;
+    white-space: nowrap;
+  }
+
+  &-item {
+    @apply py-1.5 px-4 mr-3 inline-block rounded-full cursor-pointer transition-all duration-300;
+    @apply text-sm font-medium;
+    @apply bg-gray-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400;
+    @apply hover:bg-gray-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white;
+
+    &.active {
+      @apply bg-primary text-white shadow-lg shadow-primary/25 scale-105;
+    }
+  }
+}
+
+.animate-item {
+  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.list-card {
+  &:hover {
+    .play-icon {
+      @apply opacity-100 scale-100;
+    }
+  }
+}
+</style>