✨ feat: 添加歌手详情抽屉

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>