From 8ffe472605c391ca3f469108829cc85b801064b3 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Mon, 13 Jan 2025 22:13:46 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0=E6=AD=8C?=
 =?UTF-8?q?=E6=89=8B=E8=AF=A6=E6=83=85=E6=8A=BD=E5=B1=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |   7 +-
 src/main/index.ts                             |   2 +-
 src/renderer/api/artist.ts                    |  21 ++
 src/renderer/components.d.ts                  |   2 +
 src/renderer/components/MusicList.vue         |   5 +-
 .../components/common/ArtistDrawer.vue        | 316 ++++++++++++++++++
 src/renderer/components/common/MPop.vue       |  40 ---
 src/renderer/components/common/SearchItem.vue |  80 ++++-
 src/renderer/components/common/SongItem.vue   |  35 +-
 src/renderer/layout/AppLayout.vue             |  24 +-
 src/renderer/layout/components/MusicFull.vue  |  18 +-
 src/renderer/layout/components/PlayBar.vue    |  17 +-
 src/renderer/layout/components/TitleBar.vue   |   2 +-
 src/renderer/store/index.ts                   |  20 +-
 src/renderer/type/artist.ts                   | 110 ++++++
 src/renderer/views/search/index.vue           |   8 +-
 16 files changed, 624 insertions(+), 83 deletions(-)
 create mode 100644 src/renderer/api/artist.ts
 create mode 100644 src/renderer/components/common/ArtistDrawer.vue
 delete mode 100644 src/renderer/components/common/MPop.vue
 create mode 100644 src/renderer/type/artist.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3571744..22ac53f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,4 +5,9 @@
 ### ✨ 新功能
 - 添加下载管理 进度显示 播放下载的音乐
 - 添加缓存管理 清理缓存
-- 优化下载格式问题 支持下载其他格式 ps:其实之前只是后缀名问题
\ No newline at end of file
+- 优化下载格式问题 支持下载其他格式 ps:其实之前只是后缀名问题
+
+## 咖啡☕️
+|                                        微信                                 |       |                                       支付宝                                       |
+| :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: |
+| <img src="https://www.ghproxy.cn/https://raw.githubusercontent.com/algerkong/AlgerMusicPlayer/dev_electron/src/renderer/assets/wechat.png" alt="WeChat QRcode" width=200>|           | <img src="https://www.ghproxy.cn/https://raw.githubusercontent.com/algerkong/AlgerMusicPlayer/dev_electron/src/renderer/assets/alipay.png" alt="Wechat QRcode" width=200> |
\ No newline at end of file
diff --git a/src/main/index.ts b/src/main/index.ts
index 815024f..33e5b36 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -60,7 +60,7 @@ app.whenReady().then(() => {
   initialize();
 
   // macOS 激活应用时的处理
-  app.on('activate', function () {
+  app.on('activate', () => {
     if (mainWindow === null) initialize();
   });
 });
diff --git a/src/renderer/api/artist.ts b/src/renderer/api/artist.ts
new file mode 100644
index 0000000..3b9db85
--- /dev/null
+++ b/src/renderer/api/artist.ts
@@ -0,0 +1,21 @@
+import request from '@/utils/request';
+
+// 获取歌手详情
+export const getArtistDetail = (id) => {
+  return request.get('/artist/detail', { params: { id } });
+};
+
+// 获取歌手热门歌曲
+export const getArtistTopSongs = (params) => {
+  return request.get('/artist/songs', {
+    params: {
+      ...params,
+      order: 'hot'
+    }
+  });
+};
+
+// 获取歌手专辑
+export const getArtistAlbums = (params) => {
+  return request.get('/artist/album', { params });
+};
diff --git a/src/renderer/components.d.ts b/src/renderer/components.d.ts
index e0b2b1b..da30727 100644
--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -15,6 +15,7 @@ declare module 'vue' {
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
@@ -29,6 +30,7 @@ declare module 'vue' {
     NLayout: typeof import('naive-ui')['NLayout']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
+    NPagination: typeof import('naive-ui')['NPagination']
     NPopover: typeof import('naive-ui')['NPopover']
     NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
diff --git a/src/renderer/components/MusicList.vue b/src/renderer/components/MusicList.vue
index 631bc50..cfe978c 100644
--- a/src/renderer/components/MusicList.vue
+++ b/src/renderer/components/MusicList.vue
@@ -7,6 +7,7 @@
     mask-closable
     :style="{ backgroundColor: 'transparent' }"
     :to="`#layout-main`"
+    :z-index="9998"
     @mask-click="close"
   >
     <div class="music-page">
@@ -17,7 +18,7 @@
           </div>
         </n-ellipsis>
         <div class="music-close">
-          <i class="icon iconfont icon-icon_error" @click="close"></i>
+          <i class="icon iconfont ri-close-line" @click="close"></i>
         </div>
       </div>
       <div class="music-content">
@@ -234,7 +235,7 @@ watch(
   }
 
   &-close {
-    @apply cursor-pointer text-gray-900 dark:text-white flex gap-2 items-center;
+    @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;
     }
diff --git a/src/renderer/components/common/ArtistDrawer.vue b/src/renderer/components/common/ArtistDrawer.vue
new file mode 100644
index 0000000..fff1cc9
--- /dev/null
+++ b/src/renderer/components/common/ArtistDrawer.vue
@@ -0,0 +1,316 @@
+<template>
+  <n-drawer
+    v-model:show="modelValue"
+    :width="800"
+    placement="right"
+    :mask-closable="true"
+    :z-index="9997"
+  >
+    <div v-loading="loading" class="artist-drawer">
+      <div class="close-btn">
+        <i class="ri-close-line" @click="modelValue = false"></i>
+      </div>
+
+      <!-- 歌手信息头部 -->
+      <div class="artist-header">
+        <div class="artist-cover">
+          <n-image
+            :src="getImgUrl(artistInfo?.avatar, '300y300')"
+            class="w-48 h-48 rounded-2xl object-cover"
+            preview-disabled
+          />
+        </div>
+        <div class="artist-info">
+          <h1 class="artist-name">{{ artistInfo?.name }}</h1>
+          <div v-if="artistInfo?.alias?.length" class="artist-alias">
+            {{ artistInfo.alias.join(' / ') }}
+          </div>
+          <div v-if="artistInfo?.briefDesc" class="artist-desc">
+            {{ artistInfo.briefDesc }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 标签页切换 -->
+      <n-tabs v-model:value="activeTab" class="flex-1" type="line" animated>
+        <n-tab-pane name="songs" tab="热门歌曲">
+          <div ref="songListRef" class="songs-list">
+            <n-scrollbar style="max-height: 61vh" :size="5" @scroll="handleSongScroll">
+              <div class="song-list-content">
+                <song-item
+                  v-for="song in songs"
+                  :key="song.id"
+                  :item="song"
+                  :list="true"
+                  @play="handlePlay"
+                />
+                <div v-if="songLoading" class="loading-more">加载中...</div>
+              </div>
+              <play-bottom />
+            </n-scrollbar>
+          </div>
+        </n-tab-pane>
+
+        <n-tab-pane name="albums" tab="专辑">
+          <div ref="albumListRef" class="albums-list">
+            <n-scrollbar style="max-height: 61vh" :size="5" @scroll="handleAlbumScroll">
+              <div class="albums-grid">
+                <search-item
+                  v-for="album in albums"
+                  :key="album.id"
+                  shape="square"
+                  :item="{
+                    id: album.id,
+                    picUrl: album.picUrl,
+                    name: album.name,
+                    desc: formatPublishTime(album.publishTime),
+                    size: album.size,
+                    type: '专辑'
+                  }"
+                />
+                <div v-if="albumLoading" class="loading-more">加载中...</div>
+              </div>
+              <play-bottom />
+            </n-scrollbar>
+          </div>
+        </n-tab-pane>
+
+        <n-tab-pane name="about" tab="艺人介绍">
+          <div class="artist-description">
+            <n-scrollbar style="max-height: 60vh">
+              <div class="description-content" v-html="artistInfo?.briefDesc"></div>
+            </n-scrollbar>
+          </div>
+        </n-tab-pane>
+      </n-tabs>
+    </div>
+  </n-drawer>
+</template>
+
+<script setup lang="ts">
+import { useDateFormat } from '@vueuse/core';
+import { ref, watch } from 'vue';
+import { useStore } from 'vuex';
+
+import { getArtistAlbums, getArtistDetail, getArtistTopSongs } from '@/api/artist';
+import { getMusicDetail } from '@/api/music';
+import SearchItem from '@/components/common/SearchItem.vue';
+import SongItem from '@/components/common/SongItem.vue';
+import { IArtist } from '@/type/artist';
+import { getImgUrl } from '@/utils';
+
+import PlayBottom from './PlayBottom.vue';
+
+const modelValue = defineModel<boolean>('show', { required: true });
+
+const store = useStore();
+const activeTab = ref('songs');
+const currentArtistId = ref<number>();
+
+// 歌手信息
+const artistInfo = ref<IArtist>();
+const songs = ref<any[]>([]);
+const albums = ref<any[]>([]);
+
+// 加载状态
+const songLoading = ref(false);
+const albumLoading = ref(false);
+
+// 分页参数
+const songPage = ref({
+  page: 1,
+  pageSize: 30,
+  hasMore: true
+});
+
+const albumPage = ref({
+  page: 1,
+  pageSize: 30,
+  hasMore: true
+});
+
+watch(modelValue, (newVal) => {
+  store.commit('setShowArtistDrawer', newVal);
+});
+const loading = ref(false);
+// 加载歌手信息
+const loadArtistInfo = async (id: number) => {
+  if (currentArtistId.value === id) return;
+  activeTab.value = 'songs';
+  loading.value = true;
+  currentArtistId.value = id;
+  try {
+    const info = await getArtistDetail(id);
+    if (info.data?.data?.artist) {
+      artistInfo.value = info.data.data.artist;
+    }
+    // 重置分页并加载初始数据
+    resetPagination();
+    await Promise.all([loadSongs(), loadAlbums()]);
+  } catch (error) {
+    console.error('加载歌手信息失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 重置分页
+const resetPagination = () => {
+  songPage.value = {
+    page: 1,
+    pageSize: 30,
+    hasMore: true
+  };
+  albumPage.value = {
+    page: 1,
+    pageSize: 30,
+    hasMore: true
+  };
+  songs.value = [];
+  albums.value = [];
+};
+
+// 加载歌曲
+const loadSongs = async () => {
+  if (!currentArtistId.value || !songPage.value.hasMore || songLoading.value) return;
+
+  try {
+    songLoading.value = true;
+    const { page, pageSize } = songPage.value;
+    const res = await getArtistTopSongs({
+      id: currentArtistId.value,
+      limit: pageSize,
+      offset: (page - 1) * pageSize
+    });
+
+    const ids = res.data.songs.map((item) => item.id);
+    const songsDetail = await getMusicDetail(ids);
+
+    if (songsDetail.data?.songs) {
+      const newSongs = songsDetail.data.songs.map((item) => {
+        return {
+          ...item,
+          picUrl: item.al.picUrl,
+          song: {
+            artists: item.ar,
+            name: item.name,
+            id: item.id
+          }
+        };
+      });
+      songs.value = page === 1 ? newSongs : [...songs.value, ...newSongs];
+      songPage.value.hasMore = newSongs.length === pageSize;
+      songPage.value.page++;
+    }
+  } catch (error) {
+    console.error('加载歌曲失败:', error);
+  } finally {
+    songLoading.value = false;
+  }
+};
+
+// 加载专辑
+const loadAlbums = async () => {
+  if (!currentArtistId.value || !albumPage.value.hasMore || albumLoading.value) return;
+
+  try {
+    albumLoading.value = true;
+    const { page, pageSize } = albumPage.value;
+    const res = await getArtistAlbums({
+      id: currentArtistId.value,
+      limit: pageSize,
+      offset: (page - 1) * pageSize
+    });
+
+    if (res.data?.hotAlbums) {
+      const newAlbums = res.data.hotAlbums;
+      albums.value = page === 1 ? newAlbums : [...albums.value, ...newAlbums];
+      albumPage.value.hasMore = newAlbums.length === pageSize;
+      albumPage.value.page++;
+    }
+  } catch (error) {
+    console.error('加载专辑失败:', error);
+  } finally {
+    albumLoading.value = false;
+  }
+};
+
+// 处理滚动加载
+const handleSongScroll = (e: { target: any }) => {
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+  if (scrollHeight - scrollTop - clientHeight < 50) {
+    loadSongs();
+  }
+};
+
+const handleAlbumScroll = (e: { target: any }) => {
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+  if (scrollHeight - scrollTop - clientHeight < 50) {
+    loadAlbums();
+  }
+};
+
+// 格式化发布时间
+const formatPublishTime = (time: number) => {
+  return useDateFormat(time, 'YYYY-MM-DD').value;
+};
+
+const handlePlay = () => {
+  store.commit(
+    'setPlayList',
+    songs.value.map((item) => ({
+      ...item,
+      picUrl: item.al.picUrl
+    }))
+  );
+};
+
+// 暴露方法给父组件
+defineExpose({
+  loadArtistInfo
+});
+</script>
+
+<style lang="scss" scoped>
+.artist-drawer {
+  @apply h-full bg-light dark:bg-dark px-6 overflow-hidden flex flex-col;
+
+  .close-btn {
+    @apply absolute top-4 right-4 text-gray-500 dark:text-gray-400 hover:text-green-500 text-2xl cursor-pointer p-2;
+  }
+
+  .artist-header {
+    @apply flex gap-6 pt-6;
+
+    .artist-info {
+      @apply flex-1;
+
+      .artist-name {
+        @apply text-4xl font-bold mb-2;
+      }
+
+      .artist-alias {
+        @apply text-gray-500 dark:text-gray-400 mb-2;
+      }
+
+      .artist-desc {
+        @apply text-sm text-gray-600 dark:text-gray-300 line-clamp-3;
+      }
+    }
+  }
+
+  .albums-grid {
+    @apply grid gap-4 grid-cols-5;
+  }
+
+  .loading-more {
+    @apply text-center py-4 text-gray-500 dark:text-gray-400;
+  }
+
+  .artist-description {
+    .description-content {
+      @apply text-sm leading-relaxed whitespace-pre-wrap;
+    }
+  }
+}
+</style>
diff --git a/src/renderer/components/common/MPop.vue b/src/renderer/components/common/MPop.vue
deleted file mode 100644
index 35c361a..0000000
--- a/src/renderer/components/common/MPop.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import { setAnimationClass } from '@/utils';
-
-const props = defineProps({
-  showPop: {
-    type: Boolean,
-    default: false
-  },
-  showClose: {
-    type: Boolean,
-    default: true
-  }
-});
-
-const musicFullClass = computed(() => {
-  if (props.showPop) {
-    return setAnimationClass('animate__fadeInUp');
-  }
-  return setAnimationClass('animate__fadeOutDown');
-});
-</script>
-
-<template>
-  <div v-show="props.showPop" class="pop-page" :class="musicFullClass">
-    <i v-if="props.showClose" class="iconfont icon-icon_error close"></i>
-    <img src="http://code.myalger.top/2000*2000.jpg,f054f0,0f2255" />
-    <slot></slot>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.pop-page {
-  height: 800px;
-  @apply absolute top-4 left-0 w-full;
-  background-color: #000000f0;
-  .close {
-    @apply absolute top-4 right-4 cursor-pointer text-white text-3xl;
-  }
-}
-</style>
diff --git a/src/renderer/components/common/SearchItem.vue b/src/renderer/components/common/SearchItem.vue
index eb9c5f1..4a8442d 100644
--- a/src/renderer/components/common/SearchItem.vue
+++ b/src/renderer/components/common/SearchItem.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="search-item" :class="item.type" @click="handleClick">
+  <div class="search-item" :class="[item.type, shape]" @click="handleClick">
     <div class="search-item-img">
       <n-image
-        :src="getImgUrl(item.picUrl, item.type === 'mv' ? '320y180' : '100y100')"
+        class="w-full h-full"
+        :src="getImgUrl(item.picUrl, item.type === 'mv' ? '320y180' : '200y200')"
         lazy
         preview-disabled
       />
@@ -15,6 +16,11 @@
       <p class="search-item-artist">{{ item.desc }}</p>
     </div>
 
+    <div v-if="item.type === '专辑'" class="search-item-size">
+      <i class="ri-music-2-line"></i>
+      <span>{{ item.size }}</span>
+    </div>
+
     <music-list
       v-if="['专辑', 'playlist'].includes(item.type)"
       v-model:show="showPop"
@@ -43,15 +49,21 @@ import { getImgUrl } from '@/utils';
 
 import MusicList from '../MusicList.vue';
 
-const props = defineProps<{
-  item: {
-    picUrl: string;
-    name: string;
-    desc: string;
-    type: string;
-    [key: string]: any;
-  };
-}>();
+const props = withDefaults(
+  defineProps<{
+    shape?: 'square' | 'rectangle';
+    item: {
+      picUrl: string;
+      name: string;
+      desc: string;
+      type: string;
+      [key: string]: any;
+    };
+  }>(),
+  {
+    shape: 'rectangle'
+  }
+);
 
 const songList = ref<any[]>([]);
 
@@ -104,11 +116,45 @@ const handleClick = async () => {
 
 <style scoped lang="scss">
 .search-item {
-  @apply rounded-3xl p-3 flex items-center hover:bg-light-200 dark:hover:bg-gray-800 transition cursor-pointer;
-  margin: 0 10px;
-  .search-item-img {
-    @apply w-12 h-12 mr-4 rounded-2xl overflow-hidden;
+  @apply rounded-lg p-0 flex items-center hover:bg-transparent transition cursor-pointer border-none;
+
+  &.square {
+    @apply flex-col relative;
+
+    .search-item-img {
+      @apply w-full aspect-square mb-2 mr-0 rounded-lg overflow-hidden hover:shadow-xl transition-all duration-300 shadow-sm shadow-black/20 dark:shadow-white/20;
+      img {
+        @apply object-cover w-full h-full transition-transform duration-500;
+      }
+    }
+
+    .search-item-info {
+      @apply w-full text-left px-0;
+
+      .search-item-name {
+        @apply truncate mb-1 font-medium text-base text-gray-800 dark:text-gray-200;
+      }
+
+      .search-item-artist {
+        @apply truncate text-sm text-gray-500 dark:text-gray-400;
+      }
+    }
+
+    .search-item-size {
+      @apply absolute top-2 right-2 text-xs text-white px-2 py-1 rounded-full bg-black/30 backdrop-blur-sm;
+      i {
+        @apply text-xs;
+      }
+    }
   }
+
+  &.rectangle {
+    @apply hover:bg-light-200 dark:hover:bg-dark-200 p-3;
+    .search-item-img {
+      @apply w-12 h-12 mr-4 rounded-lg overflow-hidden;
+    }
+  }
+
   .search-item-info {
     @apply flex-1 overflow-hidden;
     &-name {
@@ -138,4 +184,8 @@ const handleClick = async () => {
     }
   }
 }
+
+.search-item-size {
+  @apply flex items-center gap-2 text-gray-400;
+}
 </style>
diff --git a/src/renderer/components/common/SongItem.vue b/src/renderer/components/common/SongItem.vue
index 9672931..5926bdf 100644
--- a/src/renderer/components/common/SongItem.vue
+++ b/src/renderer/components/common/SongItem.vue
@@ -25,10 +25,14 @@
         }}</n-ellipsis>
         <div class="song-item-content-divider">-</div>
         <n-ellipsis class="song-item-content-name text-ellipsis" line-clamp="1">
-          <span v-for="(artists, artistsindex) in item.ar || item.song.artists" :key="artistsindex"
-            >{{ artists.name
-            }}{{ artistsindex < (item.ar || item.song.artists).length - 1 ? ' / ' : '' }}</span
-          >
+          <template v-for="(artist, index) in artists" :key="index">
+            <span
+              class="cursor-pointer hover:text-green-500"
+              @click.stop="handleArtistClick(artist.id)"
+              >{{ artist.name }}</span
+            >
+            <span v-if="index < artists.length - 1"> / </span>
+          </template>
         </n-ellipsis>
       </div>
       <template v-else>
@@ -37,12 +41,14 @@
         </div>
         <div class="song-item-content-name">
           <n-ellipsis class="text-ellipsis" line-clamp="1">
-            <span
-              v-for="(artists, artistsindex) in item.ar || item.song.artists"
-              :key="artistsindex"
-              >{{ artists.name
-              }}{{ artistsindex < (item.ar || item.song.artists).length - 1 ? ' / ' : '' }}</span
-            >
+            <template v-for="(artist, index) in artists" :key="index">
+              <span
+                class="cursor-pointer hover:text-green-500"
+                @click.stop="handleArtistClick(artist.id)"
+                >{{ artist.name }}</span
+              >
+              <span v-if="index < artists.length - 1"> / </span>
+            </template>
           </n-ellipsis>
         </div>
       </template>
@@ -266,6 +272,15 @@ const toggleFavorite = async (e: Event) => {
 const toggleSelect = () => {
   emits('select', props.item.id, !props.selected);
 };
+
+const handleArtistClick = (id: number) => {
+  store.commit('setCurrentArtistId', id);
+};
+
+// 获取歌手列表（最多显示5个）
+const artists = computed(() => {
+  return (props.item.ar || props.item.song?.artists)?.slice(0, 4) || [];
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/layout/AppLayout.vue b/src/renderer/layout/AppLayout.vue
index 4382f5a..d7ab0a9 100644
--- a/src/renderer/layout/AppLayout.vue
+++ b/src/renderer/layout/AppLayout.vue
@@ -31,11 +31,12 @@
     </div>
     <install-app-modal v-if="!isElectron"></install-app-modal>
     <update-modal v-if="isElectron" />
+    <artist-drawer ref="artistDrawerRef" :show="artistDrawerShow" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted } from 'vue';
+import { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 
@@ -61,6 +62,8 @@ const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
 const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
 
+const ArtistDrawer = defineAsyncComponent(() => import('@/components/common/ArtistDrawer.vue'));
+
 const store = useStore();
 
 const isPlay = computed(() => store.state.isPlay as boolean);
@@ -71,6 +74,25 @@ onMounted(() => {
   store.dispatch('initializeSettings');
   store.dispatch('initializeTheme');
 });
+
+const artistDrawerRef = ref<InstanceType<typeof ArtistDrawer>>();
+const artistDrawerShow = computed({
+  get: () => store.state.showArtistDrawer,
+  set: (val) => store.commit('setShowArtistDrawer', val)
+});
+
+// 监听歌手ID变化
+watch(
+  () => store.state.currentArtistId,
+  (newId) => {
+    if (newId) {
+      artistDrawerShow.value = true;
+      nextTick(() => {
+        artistDrawerRef.value?.loadArtistInfo(newId);
+      });
+    }
+  }
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/layout/components/MusicFull.vue b/src/renderer/layout/components/MusicFull.vue
index 5e1b706..eb41c6b 100644
--- a/src/renderer/layout/components/MusicFull.vue
+++ b/src/renderer/layout/components/MusicFull.vue
@@ -22,9 +22,14 @@
         <div>
           <div class="music-content-name">{{ playMusic.name }}</div>
           <div class="music-content-singer">
-            <span v-for="(item, index) in playMusic.ar || playMusic.song.artists" :key="index">
-              {{ item.name
-              }}{{ index < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
+            <span
+              v-for="(item, index) in playMusic.ar || playMusic.song.artists"
+              :key="index"
+              class="cursor-pointer hover:text-green-500"
+              @click="handleArtistClick(item.id)"
+            >
+              {{ item.name }}
+              {{ index < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
             </span>
           </div>
         </div>
@@ -70,6 +75,7 @@
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
 import { onBeforeUnmount, ref, watch } from 'vue';
+import { useStore } from 'vuex';
 
 import {
   lrcArray,
@@ -219,6 +225,12 @@ onBeforeUnmount(() => {
   }
 });
 
+const store = useStore();
+const handleArtistClick = (id: number) => {
+  props.musicFull = false;
+  store.commit('setCurrentArtistId', id);
+};
+
 defineExpose({
   lrcScroll
 });
diff --git a/src/renderer/layout/components/PlayBar.vue b/src/renderer/layout/components/PlayBar.vue
index 18a5440..5253469 100644
--- a/src/renderer/layout/components/PlayBar.vue
+++ b/src/renderer/layout/components/PlayBar.vue
@@ -55,11 +55,12 @@
           <span
             v-for="(artists, artistsindex) in playMusic.ar || playMusic.song.artists"
             :key="artistsindex"
-            >{{ artists.name
-            }}{{
-              artistsindex < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : ''
-            }}</span
+            class="cursor-pointer hover:text-green-500"
+            @click="handleArtistClick(artists.id)"
           >
+            {{ artists.name
+            }}{{ artistsindex < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
+          </span>
         </n-ellipsis>
       </div>
     </div>
@@ -295,6 +296,9 @@ const musicFullVisible = ref(false);
 const setMusicFull = () => {
   musicFullVisible.value = !musicFullVisible.value;
   store.commit('setMusicFull', musicFullVisible.value);
+  if (musicFullVisible.value) {
+    store.commit('setShowArtistDrawer', false);
+  }
 };
 
 const palyListRef = useTemplateRef('palyListRef');
@@ -322,6 +326,11 @@ const toggleFavorite = async (e: Event) => {
 const openLyricWindow = () => {
   openLyric();
 };
+
+const handleArtistClick = (id: number) => {
+  musicFullVisible.value = false;
+  store.commit('setCurrentArtistId', id);
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/layout/components/TitleBar.vue b/src/renderer/layout/components/TitleBar.vue
index e587647..482fed9 100644
--- a/src/renderer/layout/components/TitleBar.vue
+++ b/src/renderer/layout/components/TitleBar.vue
@@ -99,7 +99,7 @@ const drag = (event: MouseEvent) => {
   -webkit-app-region: drag;
   @apply flex justify-between px-6 py-2 select-none relative;
   @apply text-dark dark:text-white;
-  z-index: 9999999;
+  z-index: 999;
 }
 
 #buttons {
diff --git a/src/renderer/store/index.ts b/src/renderer/store/index.ts
index 255ea9e..a850321 100644
--- a/src/renderer/store/index.ts
+++ b/src/renderer/store/index.ts
@@ -16,7 +16,7 @@ function getLocalStorageItem<T>(key: string, defaultValue: T): T {
   return item ? JSON.parse(item) : defaultValue;
 }
 
-interface State {
+export interface State {
   menus: any[];
   play: boolean;
   isPlay: boolean;
@@ -35,6 +35,8 @@ interface State {
   theme: ThemeType;
   musicFull: boolean;
   showUpdateModal: boolean;
+  showArtistDrawer: boolean;
+  currentArtistId: number | null;
 }
 
 const state: State = {
@@ -55,7 +57,9 @@ const state: State = {
   playMode: getLocalStorageItem('playMode', 0),
   theme: getCurrentTheme(),
   musicFull: false,
-  showUpdateModal: false
+  showUpdateModal: false,
+  showArtistDrawer: false,
+  currentArtistId: null
 };
 
 const { handlePlayMusic, nextPlay, prevPlay } = useMusicListHook();
@@ -147,6 +151,15 @@ const mutations = {
     state.user = null;
     localStorage.removeItem('user');
     localStorage.removeItem('token');
+  },
+  setShowArtistDrawer(state, show: boolean) {
+    state.showArtistDrawer = show;
+    if (!show) {
+      state.currentArtistId = null;
+    }
+  },
+  setCurrentArtistId(state, id: number) {
+    state.currentArtistId = id;
   }
 };
 
@@ -197,6 +210,9 @@ const actions = {
 
     // 更新本地存储
     localStorage.setItem('favoriteList', JSON.stringify(state.favoriteList));
+  },
+  showArtist({ commit }, id: number) {
+    commit('setCurrentArtistId', id);
   }
 };
 
diff --git a/src/renderer/type/artist.ts b/src/renderer/type/artist.ts
new file mode 100644
index 0000000..77d4800
--- /dev/null
+++ b/src/renderer/type/artist.ts
@@ -0,0 +1,110 @@
+export interface IArtistDetail {
+  videoCount: number;
+  vipRights: VipRights;
+  identify: Identify;
+  artist: IArtist;
+  blacklist: boolean;
+  preferShow: number;
+  showPriMsg: boolean;
+  secondaryExpertIdentiy: SecondaryExpertIdentiy[];
+  eventCount: number;
+  user: User;
+}
+
+interface User {
+  backgroundUrl: string;
+  birthday: number;
+  detailDescription: string;
+  authenticated: boolean;
+  gender: number;
+  city: number;
+  signature: null;
+  description: string;
+  remarkName: null;
+  shortUserName: string;
+  accountStatus: number;
+  locationStatus: number;
+  avatarImgId: number;
+  defaultAvatar: boolean;
+  province: number;
+  nickname: string;
+  expertTags: null;
+  djStatus: number;
+  avatarUrl: string;
+  accountType: number;
+  authStatus: number;
+  vipType: number;
+  userName: string;
+  followed: boolean;
+  userId: number;
+  lastLoginIP: string;
+  lastLoginTime: number;
+  authenticationTypes: number;
+  mutual: boolean;
+  createTime: number;
+  anchor: boolean;
+  authority: number;
+  backgroundImgId: number;
+  userType: number;
+  experts: null;
+  avatarDetail: AvatarDetail;
+}
+
+interface AvatarDetail {
+  userType: number;
+  identityLevel: number;
+  identityIconUrl: string;
+}
+
+interface SecondaryExpertIdentiy {
+  expertIdentiyId: number;
+  expertIdentiyName: string;
+  expertIdentiyCount: number;
+}
+
+export interface IArtist {
+  id: number;
+  cover: string;
+  avatar: string;
+  name: string;
+  transNames: any[];
+  alias: any[];
+  identities: any[];
+  identifyTag: string[];
+  briefDesc: string;
+  rank: Rank;
+  albumSize: number;
+  musicSize: number;
+  mvSize: number;
+}
+
+interface Rank {
+  rank: number;
+  type: number;
+}
+
+interface Identify {
+  imageUrl: string;
+  imageDesc: string;
+  actionUrl: string;
+}
+
+interface VipRights {
+  rightsInfoDetailDtoList: RightsInfoDetailDtoList[];
+  oldProtocol: boolean;
+  redVipAnnualCount: number;
+  redVipLevel: number;
+  now: number;
+}
+
+interface RightsInfoDetailDtoList {
+  vipCode: number;
+  expireTime: number;
+  iconUrl: null;
+  dynamicIconUrl: null;
+  vipLevel: number;
+  signIap: boolean;
+  signDeduct: boolean;
+  signIapDeduct: boolean;
+  sign: boolean;
+}
diff --git a/src/renderer/views/search/index.vue b/src/renderer/views/search/index.vue
index 82752c5..4778251 100644
--- a/src/renderer/views/search/index.vue
+++ b/src/renderer/views/search/index.vue
@@ -27,7 +27,7 @@
     <n-layout
       v-if="isMobile ? searchDetail : true"
       class="search-list"
-      :class="setAnimationClass('animate__fadeInUp')"
+      :class="setAnimationClass('animate__fadeInDown')"
       :native-scrollbar="false"
       @scroll="handleScroll"
     >
@@ -53,6 +53,7 @@
               <div
                 v-for="(item, index) in list"
                 :key="item.id"
+                class="mb-3"
                 :class="setAnimationClass('animate__bounceInRight')"
                 :style="setAnimationDelay(index, 50)"
               >
@@ -83,8 +84,8 @@
               <n-tag
                 v-for="(item, index) in searchHistory"
                 :key="index"
-                :class="setAnimationClass('animate__bounceInLeft')"
-                :style="setAnimationDelay(index, 10)"
+                :class="setAnimationClass('animate__bounceIn')"
+                :style="setAnimationDelay(index, 50)"
                 class="search-history-item"
                 round
                 closable
@@ -362,6 +363,7 @@ const handleSearchHistory = (keyword: string) => {
   @apply flex-1 rounded-xl;
   @apply bg-light-100 dark:bg-dark-100;
   height: 100%;
+  animation-duration: 0.2s;
 
   &-box {
     @apply pb-28;