🌈 style: 更新版本 1.5.1

electron/set.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0",
+  "version": "1.5.1",
   "isProxy": false,
   "author": "alger"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "alger-music",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "这是一个用于音乐播放的应用程序。",
   "author": "Alger <algerkc@qq.com>",
   "main": "app.js",

src/components/MusicList.vue

@@ -9,16 +9,20 @@
       <i class="iconfont icon-icon_error music-close" @click="close"></i>
       <div class="music-title text-el">{{ name }}</div>
       <!-- 歌单歌曲列表 -->
-      <div class="music-list">
+      <div :show="loading" class="music-list">
         <n-scrollbar>
-          <div
-            v-for="(item, index) in songList"
-            :key="item.id"
-            :class="setAnimationClass('animate__bounceInUp')"
-            :style="setAnimationDelay(index, 50)"
-          >
-            <song-item :item="formatDetail(item)" @play="handlePlay" />
-          </div>
+          <n-spin :show="loading">
+            <div class="music-list-content">
+              <div
+                v-for="(item, index) in songList"
+                :key="item.id"
+                :class="setAnimationClass('animate__bounceInUp')"
+                :style="setAnimationDelay(index, 50)"
+              >
+                <song-item :item="formatDetail(item)" @play="handlePlay" />
+              </div>
+            </div>
+          </n-spin>
           <play-bottom />
         </n-scrollbar>
       </div>
@@ -34,6 +38,8 @@ import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
 import PlayBottom from './common/PlayBottom.vue';
 
+const loading = ref(true);
+
 const store = useStore();
 
 const props = defineProps<{
@@ -43,6 +49,14 @@ const props = defineProps<{
 }>();
 const emit = defineEmits(['update:show']);
 
+watch(
+  () => props.songList,
+  (val) => {
+    loading.value = !(val && val.length);
+  },
+  { immediate: true },
+);
+
 const formatDetail = computed(() => (detail: any) => {
   const song = {
     artists: detail.ar,
@@ -81,6 +95,9 @@ const close = () => {
 
   &-list {
     height: calc(100% - 60px);
+    &-content {
+      min-height: 400px;
+    }
   }
 }
 

src/components/common/SearchItem.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="search-item" @click="handleClick">
+  <div class="search-item" :class="item.type" @click="handleClick">
     <div class="search-item-img">
-      <n-image :src="getImgUrl(item.picUrl, '200y200')" lazy preview-disabled />
+      <n-image :src="getImgUrl(item.picUrl, '320y180')" lazy preview-disabled />
+      <div v-if="item.type === 'mv'" class="play">
+        <i class="iconfont icon icon-play"></i>
+      </div>
     </div>
     <div class="search-item-info">
-      <div class="search-item-name">{{ item.name }}</div>
-      <div class="search-item-artist">{{ item.desc }}</div>
+      <p class="search-item-name">{{ item.name }}</p>
+      <p class="search-item-artist">{{ item.desc }}</p>
     </div>
 
     <MusicList
@@ -72,6 +75,7 @@ const handleClick = async () => {
     @apply w-12 h-12 mr-4 rounded-2xl overflow-hidden;
   }
   .search-item-info {
+    @apply flex-1 overflow-hidden;
     &-name {
       @apply text-white text-sm text-center;
     }
@@ -80,4 +84,23 @@ const handleClick = async () => {
     }
   }
 }
+
+.mv {
+  &:hover {
+    .play {
+      @apply opacity-60;
+    }
+  }
+  .search-item-img {
+    width: 160px;
+    height: 90px;
+    @apply rounded-lg relative;
+  }
+  .play {
+    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity;
+    .icon {
+      @apply text-white text-5xl;
+    }
+  }
+}
 </style>

src/utils/index.ts

@@ -60,8 +60,11 @@ export const getMusicProxyUrl = (url: string) => {
 
 export const getImgUrl = computed(() => (url: string | undefined, size: string = '') => {
   const bdUrl = 'https://image.baidu.com/search/down?url=';
-  const imgUrl = encodeURIComponent(`${url}?param=${size}`);
-  return `${bdUrl}${imgUrl}`;
+  const imgUrl = `${url}?param=${size}`;
+  if (!getIsMc()) {
+    return imgUrl;
+  }
+  return `${bdUrl}${encodeURIComponent(imgUrl)}`;
 });
 
 export const isMobile = computed(() => {

src/views/list/index.vue

@@ -20,8 +20,8 @@ const selectRecommendItem = async (item: IRecommendItem) => {
   recommendItem.value = null;
   listDetail.value = null;
   showMusic.value = true;
-  const { data } = await getListDetail(item.id);
   recommendItem.value = item;
+  const { data } = await getListDetail(item.id);
   listDetail.value = data;
 };
 
@@ -90,10 +90,9 @@ watch(
       </div>
     </n-scrollbar>
     <music-list
-      v-if="listDetail?.playlist"
       v-model:show="showMusic"
-      :name="listDetail?.playlist.name"
-      :song-list="listDetail?.playlist.tracks"
+      :name="recommendItem?.name || ''"
+      :song-list="listDetail?.playlist.tracks || []"
     />
   </div>
 </template>

src/views/user/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { onBeforeRouteUpdate, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 
 import { getListDetail } from '@/api/list';
@@ -36,8 +36,9 @@ const loadPage = async () => {
   const { data: playlistData } = await getUserPlaylist(user.value.userId);
   playList.value = playlistData.playlist;
 
-  const { data: recordData } = await getUserRecord(user.value.userId);
-  recordList.value = recordData.allData;
+  getUserRecord(user.value.userId).then(({ data: recordData }) => {
+    recordList.value = recordData.allData;
+  });
 };
 
 onActivated(() => {
@@ -52,8 +53,9 @@ const isShowList = ref(false);
 const list = ref<Playlist>();
 // 展示歌单
 const showPlaylist = async (id: number) => {
-  const { data } = await getListDetail(id);
   isShowList.value = true;
+  list.value = {};
+  const { data } = await getListDetail(id);
   list.value = data.playlist;
 };
 
@@ -77,7 +79,7 @@ const handlePlay = () => {
 </script>
 
 <template>
-  <div class="user-page" @click.stop="isShowList = false">
+  <div class="user-page">
     <div
       v-if="userDetail"
       class="left"
@@ -138,7 +140,7 @@ const handlePlay = () => {
         </n-scrollbar>
       </div>
     </div>
-    <music-list v-if="list" v-model:show="isShowList" :name="list.name" :song-list="list.tracks" />
+    <music-list v-model:show="isShowList" :name="list?.name || ''" :song-list="list?.tracks || []" />
   </div>
 </template>