🐞 fix: 修复各种报错问题

components.d.ts

@@ -25,6 +25,7 @@ declare module 'vue' {
     NSlider: typeof import('naive-ui')['NSlider']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTooltip: typeof import('naive-ui')['NTooltip']
+    NVirtualList: typeof import('naive-ui')['NVirtualList']
     PlayBottom: typeof import('./src/components/common/PlayBottom.vue')['default']
     PlayListsItem: typeof import('./src/components/common/PlayListsItem.vue')['default']
     PlaylistType: typeof import('./src/components/PlaylistType.vue')['default']

src/App.vue

@@ -3,9 +3,7 @@
     <audio id="MusicAudio" ref="audioRef" :src="playMusicUrl" :autoplay="play"></audio>
     <n-config-provider :theme="darkTheme">
       <n-dialog-provider>
-        <keep-alive>
+        <router-view></router-view>
-          <router-view></router-view>
-        </keep-alive>
       </n-dialog-provider>
     </n-config-provider>
   </div>

src/components/MusicList.vue

@@ -3,7 +3,7 @@
     :show="show"
     :height="isMobile ? '100vh' : '70vh'"
     placement="bottom"
-    :drawer-style="{ backgroundColor: 'transparent' }"
+    :style="{ backgroundColor: 'transparent' }"
   >
     <div class="music-page">
       <div class="music-close">

src/components/common/SearchItem.vue

@@ -50,7 +50,6 @@ const handleClick = async () => {
   if (props.item.type === '专辑') {
     showPop.value = true;
     const res = await getAlbum(props.item.id);
-    console.log('res.data', res.data);
     songList.value = res.data.songs.map((song: any) => {
       song.al.picUrl = song.al.picUrl || props.item.picUrl;
       return song;

src/components/common/SongItem.vue

@@ -7,8 +7,8 @@
       </div>
       <div class="song-item-content-name">
         <n-ellipsis class="text-ellipsis" line-clamp="1">
-          <span v-for="(artists, artistsindex) in item.song.artists" :key="artistsindex"
+          <span v-for="(artists, artistsindex) in item.artists" :key="artistsindex"
-            >{{ artists.name }}{{ artistsindex < item.song.artists.length - 1 ? ' / ' : '' }}</span
+            >{{ artists.name }}{{ artistsindex < item.artists.length - 1 ? ' / ' : '' }}</span
           >
         </n-ellipsis>
       </div>
@@ -32,12 +32,12 @@
 <script lang="ts" setup>
 import { useStore } from 'vuex';
 
-import type { SongResult } from '@/type/music';
+import type { Song } from '@/type/music';
 import { getImgUrl } from '@/utils';
 
 const props = withDefaults(
   defineProps<{
-    item: SongResult;
+    item: Song;
     mini?: boolean;
   }>(),
   {
@@ -61,7 +61,7 @@ const isPlaying = computed(() => {
 const emits = defineEmits(['play']);
 
 // 播放音乐 设置音乐详情 打开音乐底栏
-const playMusicEvent = async (item: SongResult) => {
+const playMusicEvent = async (item: Song) => {
   if (playMusic.value.id === item.id) {
     return;
   }

src/hooks/MusicHistoryHook.ts

@@ -1,12 +1,12 @@
 // musicHistoryHooks
 import { useLocalStorage } from '@vueuse/core';
 
-import type { SongResult } from '@/type/music';
+import type { Song } from '@/type/music';
 
 export const useMusicHistory = () => {
-  const musicHistory = useLocalStorage<SongResult[]>('musicHistory', []);
+  const musicHistory = useLocalStorage<Song[]>('musicHistory', []);
 
-  const addMusic = (music: SongResult) => {
+  const addMusic = (music: Song) => {
     const index = musicHistory.value.findIndex((item) => item.id === music.id);
     if (index !== -1) {
       musicHistory.value[index].count = (musicHistory.value[index].count || 0) + 1;
@@ -16,7 +16,7 @@ export const useMusicHistory = () => {
     }
   };
 
-  const delMusic = (music: SongResult) => {
+  const delMusic = (music: Song) => {
     const index = musicHistory.value.findIndex((item) => item.id === music.id);
     if (index !== -1) {
       musicHistory.value.splice(index, 1);

src/hooks/MusicHook.ts

@@ -1,6 +1,12 @@
 import { getMusicLrc } from '@/api/music';
 import { ILyric } from '@/type/lyric';
 
+const windowData = window as any;
+
+export const isElectron = computed(() => {
+  return !!windowData.electronAPI;
+});
+
 interface ILrcData {
   text: string;
   trText: string;
@@ -135,6 +141,9 @@ export const getLrcTimeRange = (index: number) => {
 
 export const sendLyricToWin = (isPlay: boolean = true) => {
   try {
+    if (!isElectron.value) {
+      return;
+    }
     // 设置lyricWinData 获取 当前播放的两句歌词 和歌词时间
     let lyricWinData = null;
     if (lrcArray.value.length > 0) {
@@ -154,8 +163,6 @@ export const sendLyricToWin = (isPlay: boolean = true) => {
         startCurrentTime: getLrcTime(nowIndex),
         isPlay,
       };
-
-      const windowData = window as any;
       windowData.electronAPI.sendLyric(JSON.stringify(lyricWinData));
     }
   } catch (error) {
@@ -164,7 +171,9 @@ export const sendLyricToWin = (isPlay: boolean = true) => {
 };
 
 export const openLyric = () => {
-  const windowData = window as any;
+  if (!isElectron.value) {
+    return;
+  }
   windowData.electronAPI.openLyric();
   sendLyricToWin();
 };

src/layout/AppLayout.vue

@@ -37,6 +37,7 @@ import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 
 import PlayBottom from '@/components/common/PlayBottom.vue';
+import { isElectron } from '@/hooks/MusicHook';
 import homeRouter from '@/router/home';
 import { isMobile } from '@/utils';
 
@@ -69,11 +70,6 @@ const audio = {
   value: document.querySelector('#MusicAudio') as HTMLAudioElement,
 };
 
-const windowData = window as any;
-const isElectron = computed(() => {
-  return !!windowData.electronAPI;
-});
-
 onMounted(() => {
   // 监听音乐是否播放
   watch(
@@ -95,14 +91,6 @@ onMounted(() => {
       default:
     }
   };
-  // 按下键盘按钮监听
-  document.onkeydown = (e) => {
-    switch (e.code) {
-      case 'Space':
-        return false;
-      default:
-    }
-  };
 });
 
 const audioPlay = () => {

src/layout/components/MusicFull.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-drawer :show="musicFull" height="100vh" placement="bottom" :drawer-style="{ backgroundColor: 'transparent' }">
+  <n-drawer :show="musicFull" height="100vh" placement="bottom" :style="{ backgroundColor: 'transparent' }">
     <div id="drawer-target">
       <div
         class="drawer-back"
@@ -10,10 +10,10 @@
         <n-image ref="PicImgRef" :src="getImgUrl(playMusic?.picUrl, '300y300')" class="img" lazy preview-disabled />
       </div>
       <div class="music-content">
-        <div class="music-content-name">{{ playMusic.song.name }}</div>
+        <div class="music-content-name">{{ playMusic.name }}</div>
         <div class="music-content-singer">
-          <span v-for="(item, index) in playMusic.song.artists" :key="index">
+          <span v-for="(item, index) in playMusic.artists" :key="index">
-            {{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}
+            {{ item.name }}{{ index < playMusic.artists.length - 1 ? ' / ' : '' }}
           </span>
         </div>
         <n-layout
@@ -57,7 +57,7 @@ import {
   reduceCorrectionTime,
   setAudioTime,
 } from '@/hooks/MusicHook';
-import type { SongResult } from '@/type/music';
+import type { Song } from '@/type/music';
 import { getImgUrl } from '@/utils';
 
 const store = useStore();
@@ -74,7 +74,7 @@ const props = defineProps({
 });
 
 // 播放的音乐信息
-const playMusic = computed(() => store.state.playMusic as SongResult);
+const playMusic = computed(() => store.state.playMusic as Song);
 const isPlaying = computed(() => store.state.play as boolean);
 // 获取歌词滚动dom
 const lrcSider = ref<any>(null);

src/layout/components/PlayBar.vue

@@ -1,10 +1,10 @@
 <template>
   <!-- 展开全屏 -->
-  <music-full ref="MusicFullRef" v-model:music-full="musicFull" :audio="audio.value as HTMLAudioElement" />
+  <music-full ref="MusicFullRef" v-model:music-full="musicFullVisible" :audio="audio.value as HTMLAudioElement" />
   <!-- 底部播放栏 -->
   <div
     class="music-play-bar"
-    :class="setAnimationClass('animate__bounceInUp') + ' ' + (musicFull ? 'play-bar-opcity' : '')"
+    :class="setAnimationClass('animate__bounceInUp') + ' ' + (musicFullVisible ? 'play-bar-opcity' : '')"
   >
     <n-image
       :src="getImgUrl(playMusic?.picUrl, '300y300')"
@@ -21,8 +21,8 @@
       </div>
       <div class="music-content-name">
         <n-ellipsis class="text-ellipsis" line-clamp="1">
-          <span v-for="(item, index) in playMusic.song.artists" :key="index">
+          <span v-for="(item, index) in playMusic.artists" :key="index">
-            {{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}
+            {{ item.name }}{{ index < playMusic.artists.length - 1 ? ' / ' : '' }}
           </span>
         </n-ellipsis>
       </div>
@@ -62,7 +62,7 @@
         </template>
         解析播放
       </n-tooltip> -->
-      <n-tooltip class="music-lyric" trigger="hover" :z-index="9999999">
+      <n-tooltip v-if="isElectron" class="music-lyric" trigger="hover" :z-index="9999999">
         <template #trigger>
           <i class="iconfont ri-netease-cloud-music-line" @click="openLyric"></i>
         </template>
@@ -79,11 +79,11 @@
         </template>
         <div class="music-play-list">
           <div class="music-play-list-back"></div>
-          <n-scrollbar>
+          <n-virtual-list :item-size="75" item-resizable>
             <div class="music-play-list-content">
               <song-item v-for="item in playList" :key="item.id" :item="item" mini></song-item>
             </div>
-          </n-scrollbar>
+          </n-virtual-list>
         </div>
       </n-popover>
     </div>
@@ -95,8 +95,8 @@
 import { useStore } from 'vuex';
 
 import SongItem from '@/components/common/SongItem.vue';
-import { allTime, loadLrc, nowTime, openLyric, sendLyricToWin } from '@/hooks/MusicHook';
+import { allTime, isElectron, loadLrc, nowTime, openLyric, sendLyricToWin } from '@/hooks/MusicHook';
-import type { SongResult } from '@/type/music';
+import type { Song } from '@/type/music';
 import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
 
 import MusicFull from './MusicFull.vue';
@@ -104,11 +104,11 @@ import MusicFull from './MusicFull.vue';
 const store = useStore();
 
 // 播放的音乐信息
-const playMusic = computed(() => store.state.playMusic as SongResult);
+const playMusic = computed(() => store.state.playMusic as Song);
 // 是否播放
 const play = computed(() => store.state.play as boolean);
 
-const playList = computed(() => store.state.playList as SongResult[]);
+const playList = computed(() => store.state.playList as Song[]);
 
 const audio = {
   value: document.querySelector('#MusicAudio') as HTMLAudioElement,
@@ -197,7 +197,9 @@ function handleGetAudioTime(this: HTMLAudioElement) {
   // 获取音量
   audioVolume.value = audio.volume;
   sendLyricToWin(store.state.isPlay);
-  MusicFullRef.value?.lrcScroll();
+  if (musicFullVisible.value) {
+    MusicFullRef.value?.lrcScroll();
+  }
 }
 
 // 播放暂停按钮事件
@@ -209,11 +211,11 @@ const playMusicEvent = async () => {
   }
 };
 
-const musicFull = ref(false);
+const musicFullVisible = ref(false);
 
 // 设置musicFull
 const setMusicFull = () => {
-  musicFull.value = !musicFull.value;
+  musicFullVisible.value = !musicFullVisible.value;
 };
 </script>
 

src/store/index.ts

@@ -3,17 +3,17 @@ import { createStore } from 'vuex';
 import { getMusicUrl, getParsingMusicUrl } from '@/api/music';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
 import homeRouter from '@/router/home';
-import { SongResult } from '@/type/music';
+import type { Song } from '@/type/music';
 import { getMusicProxyUrl } from '@/utils';
 
 interface State {
   menus: any[];
   play: boolean;
   isPlay: boolean;
-  playMusic: SongResult;
+  playMusic: Song;
   playMusicUrl: string;
   user: any;
-  playList: SongResult[];
+  playList: Song[];
   playListIndex: number;
   setData: any;
   lyric: any;
@@ -24,7 +24,7 @@ const state: State = {
   menus: homeRouter,
   play: false,
   isPlay: false,
-  playMusic: {} as SongResult,
+  playMusic: {} as Song,
   playMusicUrl: '',
   user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user') as string) : null,
   playList: [],
@@ -42,7 +42,7 @@ const mutations = {
   setMenus(state: State, menus: any[]) {
     state.menus = menus;
   },
-  async setPlay(state: State, playMusic: SongResult) {
+  async setPlay(state: State, playMusic: Song) {
     state.playMusic = { ...playMusic, playLoading: true };
     state.playMusicUrl = await getSongUrl(playMusic.id);
     state.play = true;
@@ -55,7 +55,7 @@ const mutations = {
   setPlayMusic(state: State, play: boolean) {
     state.play = play;
   },
-  setPlayList(state: State, playList: SongResult[]) {
+  setPlayList(state: State, playList: Song[]) {
     state.playListIndex = playList.findIndex((item) => item.id === state.playMusic.id);
     state.playList = playList;
   },

src/type/music.ts

@@ -1,7 +1,7 @@
 export interface IRecommendMusic {
   code: number;
   category: number;
-  result: SongResult[];
+  result: Song[];
 }
 
 export interface SongResult {
@@ -18,7 +18,7 @@ export interface SongResult {
   playLoading?: boolean;
 }
 
-interface Song {
+export interface Song {
   name: string;
   id: number;
   position: number;
@@ -64,6 +64,9 @@ interface Song {
   lMusic: BMusic;
   exclusive: boolean;
   privilege: Privilege;
+  count?: number;
+  playLoading?: boolean;
+  picUrl?: string;
 }
 
 interface Privilege {

src/views/search/index.vue

@@ -133,7 +133,6 @@ const loadSearch = async (keywords: any) => {
   // songs map 替换属性
   songs.forEach((item: any) => {
     item.picUrl = item.al.picUrl;
-    item.song = item;
     item.artists = item.ar;
   });
   albums.forEach((item: any) => {

src/views/set/index.vue

@@ -49,7 +49,9 @@ const windowData = window as any;
 
 const handleSave = () => {
   store.commit('setSetData', setData.value);
-  windowData.electronAPI.restart();
+  if (windowData.electronAPI) {
+    windowData.electronAPI.restart();
+  }
 };
 </script>