✨ feat(Play): 完成播放可以根据列表播放 上一首 下一首

.env.development

@@ -1,3 +1,4 @@
 VITE_API = /api
 VITE_API_MT = /mt
 VITE_API_MUSIC = /music
+VITE_API_PROXY = http://110.42.251.190:9856

.env.production

@@ -1,3 +1,4 @@
-VITE_API=http://123.56.226.179:3000
+VITE_API = http://110.42.251.190:9898
 VITE_API_MT = http://mt.myalger.top
 VITE_API_MUSIC = http://myalger.top:4000
+VITE_API_PROXY = http://110.42.251.190:9856

.gitignore

@@ -3,3 +3,5 @@ node_modules
 dist
 dist-ssr
 *.local
+
+pnpm-lock.yaml

package.json

@@ -10,6 +10,7 @@
     "@vue/runtime-core": "^3.3.4",
     "autoprefixer": "^9.8.6",
     "axios": "^0.21.1",
+    "lodash": "^4.17.21",
     "postcss": "^7.0.36",
     "sass": "^1.35.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",

src/components/RecommendSonglist.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="recommend-music">
-        <div class="title" :class="setAnimationClass('animate__fadeInLeft')">本周最热音乐</div>
+    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">
+      本周最热音乐
+    </div>
     <div
       class="recommend-music-list"
       :class="setAnimationClass('animate__bounceInUp')"
@@ -12,7 +14,7 @@
           :class="setAnimationClass('animate__bounceInUp')"
           :style="setAnimationDelay(index, 100)"
         >
-                    <song-item :item="item" />
+          <song-item :item="item" @play="handlePlay" />
         </div>
       </template>
     </div>
@@ -20,24 +22,32 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref } from 'vue'
-import { getRecommendMusic } from "@/api/home";
+import { getRecommendMusic } from '@/api/home'
-import type { IRecommendMusic } from "@/type/music";
+import type { IRecommendMusic } from '@/type/music'
-import { setAnimationClass, setAnimationDelay } from "@/utils";
+import { setAnimationClass, setAnimationDelay } from '@/utils'
-import SongItem from "./common/SongItem.vue";
+import SongItem from './common/SongItem.vue'
+import { useStore } from 'vuex'
+
+const store = useStore();
 // 推荐歌曲
-const recommendMusic = ref<IRecommendMusic>();
+const recommendMusic = ref<IRecommendMusic>()
 
 // 加载推荐歌曲
 const loadRecommendMusic = async () => {
-    const { data } = await getRecommendMusic({ limit: 10 });
+  const { data } = await getRecommendMusic({ limit: 10 })
-    recommendMusic.value = data;
+  recommendMusic.value = data
-};
+}
 
 // 页面初始化
 onMounted(() => {
-    loadRecommendMusic();
+  loadRecommendMusic()
-});
+})
+
+const handlePlay = (item: any) => {
+  const musicIndex = (recommendMusic.value?.result.findIndex((music: any) => music.id == item.id) || 0) + 1
+  store.commit('setPlayList', recommendMusic.value?.result.slice(musicIndex))
+}
 </script>
 
 <style lang="scss" scoped>

src/components/common/SongItem.vue

@@ -1,16 +1,25 @@
 <template>
   <div class="recommend-music-list-item">
-        <img :src="item.picUrl + '?param=200y200'" class="recommend-music-list-item-img" />
+    <img
+      :src="item.picUrl + '?param=200y200'"
+      class="recommend-music-list-item-img"
+    />
     <div class="recommend-music-list-item-content">
       <div class="recommend-music-list-item-content-title">
-                <n-ellipsis class="text-ellipsis" line-clamp="1">{{ item.song.name }}</n-ellipsis>
+        <n-ellipsis class="text-ellipsis" line-clamp="1">{{
+          item.name
+        }}</n-ellipsis>
       </div>
       <div class="recommend-music-list-item-content-name">
         <n-ellipsis class="text-ellipsis" line-clamp="1">
           <span
             v-for="(artists, artistsindex) in item.song.artists"
             :key="artistsindex"
-                    >{{ artists.name }}{{ artistsindex < item.song.artists.length - 1 ? ' / ' : '' }}</span>
+            >{{ artists.name
+            }}{{
+              artistsindex < item.song.artists.length - 1 ? ' / ' : ''
+            }}</span
+          >
         </n-ellipsis>
       </div>
     </div>
@@ -23,43 +32,45 @@
         :class="isPlaying ? 'bg-green-600' : ''"
         @click="playMusicEvent(item)"
       >
-                <i class="iconfont icon-playfill"></i>
+        <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
+        <i v-else class="iconfont icon-playfill"></i>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useStore } from "vuex";
+import { useStore } from 'vuex'
-import type { SongResult } from "@/type/music";
+import type { SongResult } from '@/type/music'
-import { computed, } from "vue";
+import { computed } from 'vue'
-
 
 const props = defineProps({
   item: {
     type: Object,
-        required: true
+    required: true,
-    }
+  },
 })
 
+const store = useStore()
 
-const store = useStore();
+const play = computed(() => store.state.play as boolean)
-
-const playMusic = computed(() => store.state.playMusic);
 
+const playMusic = computed(() => store.state.playMusic)
 
 // 判断是否为正在播放的音乐
 const isPlaying = computed(() => {
-    return playMusic.value.id == props.item.id;
+  return playMusic.value.id == props.item.id
 })
 
+const emits = defineEmits(['play'])
+
 // 播放音乐 设置音乐详情 打开音乐底栏
 const playMusicEvent = (item: any) => {
-    store.commit("setPlay", item);
+  store.commit('setPlay', item)
-    store.commit("setIsPlay", true);
+  store.commit('setIsPlay', true)
-};
+  store.state.playListIndex = 0 
-
+  emits('play', item)
-
+}
 </script>
 
 <style lang="scss" scoped>

src/layout/components/PlayBar.vue

@@ -8,25 +8,15 @@
       <div class="music-content">
         <div class="music-content-name">{{ playMusic.song.name }}</div>
         <div class="music-content-singer">
-                    <span
+          <span v-for="(item, index) in playMusic.song.artists" :key="index">{{ item.name
-                        v-for="(item,index) in playMusic.song.artists"
+          }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}</span>
-                        :key="index"
-                    >{{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}</span>
         </div>
-                <n-layout
+        <n-layout class="music-lrc" style="height: 550px" ref="lrcSider" :native-scrollbar="false"
-                    class="music-lrc"
+          @mouseover="mouseOverLayout" @mouseleave="mouseLeaveLayout">
-                    style="height: 550px;"
-                    ref="lrcSider"
-                    :native-scrollbar="false"
-                    @mouseover="mouseOverLayout"
-                    @mouseleave="mouseLeaveLayout"
-                >
           <template v-for="(item, index) in lrcArray" :key="index">
-                        <div
+            <div class="music-lrc-text" :class="{ 'now-text': isCurrentLrc(index) }" @click="setAudioTime(index)">
-                            class="music-lrc-text"
+              {{ item.text }}
-                            :class="{ 'now-text': isCurrentLrc(index) }"
+            </div>
-                            @click="setAudioTime(index)"
-                        >{{ item.text }}</div>
           </template>
         </n-layout>
       </div>
@@ -37,25 +27,25 @@
     <img class="play-bar-img" :src="playMusic.picUrl + '?param=200y200'" @click="setMusicFull" />
     <div class="music-content">
       <div class="music-content-title">
-                <n-ellipsis class="text-ellipsis" line-clamp="1">{{ playMusic.song.name }}</n-ellipsis>
+        <n-ellipsis class="text-ellipsis" line-clamp="1">{{
+          playMusic.name
+        }}</n-ellipsis>
       </div>
       <div class="music-content-name">
         <n-ellipsis class="text-ellipsis" line-clamp="1">
-                    <span
+          <span v-for="(item, index) in playMusic.song.artists" :key="index">{{ item.name
-                        v-for="(item,index) in playMusic.song.artists"
+          }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}</span>
-                        :key="index"
-                    >{{ item.name }}{{ index < playMusic.song.artists.length - 1 ? ' / ' : '' }}</span>
         </n-ellipsis>
       </div>
     </div>
     <div class="music-buttons">
-            <div>
+      <div @click="handlePrev">
         <i class="iconfont icon-prev"></i>
       </div>
       <div class="music-buttons-play" @click="playMusicEvent">
         <i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
       </div>
-            <div>
+      <div @click="handleEnded">
         <i class="iconfont icon-next"></i>
       </div>
     </div>
@@ -96,43 +86,84 @@
 </template>
 
 <script lang="ts" setup>
-import type { SongResult } from "@/type/music";
+import type { SongResult } from '@/type/music'
-import type { ILyric } from "@/type/lyric";
+import type { ILyric } from '@/type/lyric'
-import { secondToMinute } from "@/utils";
+import { secondToMinute } from '@/utils'
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from 'vue'
-import { useStore } from 'vuex';
+import { useStore } from 'vuex'
-import { setAnimationClass } from "@/utils";
+import { setAnimationClass } from '@/utils'
-import { getMusicLrc, getParsingMusicUrl } from "@/api/music"
+import { getMusicLrc, getParsingMusicUrl } from '@/api/music'
+import axios from 'axios'
 
-
+const store = useStore()
-const store = useStore();
+const audio = ref<any>(null)
 
 // 播放的音乐信息
 const playMusic = computed(() => store.state.playMusic as SongResult)
 // 是否播放
 const play = computed(() => store.state.play as boolean)
 // 播放链接
-const playMusicUrl = computed(() => store.state.playMusicUrl as string)
+const ProxyUrl =
-
+  import.meta.env.VITE_API_PROXY + '' || 'http://110.42.251.190:9856'
+const playMusicUrl = ref('')
+watch(
+  () => store.state.playMusicUrl,
+  async (value, oldValue) => {
+    const isUrlHasMc = location.href.includes('mc.')
+    if (value && isUrlHasMc) {
+      let playMusicUrl1 = value as string
+      if (!ProxyUrl) {
+        playMusicUrl.value = playMusicUrl1
+        return
+      }
+      const url = new URL(playMusicUrl1)
+      const pathname = url.pathname
+      const subdomain = url.origin.split('.')[0].split('//')[1]
+      playMusicUrl1 = `${ProxyUrl}/mc?m=${subdomain}&url=${pathname}`
+      // console.log('playMusicUrl1', playMusicUrl1)
+      // // 获取音频文件
+      // const { data } = await axios.get(playMusicUrl1, {
+      //   responseType: 'blob'
+      // })
+      // const musicUrl = URL.createObjectURL(data)
+      // console.log('musicUrl', musicUrl)
+      // playMusicUrl.value = musicUrl
+      playMusicUrl.value = playMusicUrl1
+      console.log('playMusicUrl1',playMusicUrl1)
+      setTimeout(() => {
+        onAudio(audio.value)
+        store.commit('setPlayMusic', true)
+      }, 100)
+    }else {
+      playMusicUrl.value = value
+    }
+  },
+  { immediate: true }
+)
 // 获取音乐播放Dom
-const audio = ref<any>(null)
 
 onMounted(() => {
   // 监听音乐是否播放
-    watch(() => play.value, (value, oldValue) => {
+  watch(
+    () => play.value,
+    (value, oldValue) => {
       if (value) {
         audio.value.play()
         onAudio(audio.value)
       } else {
         audio.value.pause()
       }
-    })
+    }
+  )
 
-    watch(() => playMusicUrl.value, (value, oldValue) => {
+  watch(
+    () => playMusicUrl.value,
+    (value, oldValue) => {
       if (!value) {
         parsingMusic()
       }
-    })
+    }
+  )
 
   // 抬起键盘按钮监听
   document.onkeyup = (e) => {
@@ -147,7 +178,6 @@ onMounted(() => {
     switch (e.code) {
       case 'Space':
         return false
-
     }
   }
 })
@@ -156,12 +186,12 @@ const nowTime = ref(0)
 const allTime = ref(0)
 // 计算属性  获取当前播放时间的进度
 const timeSlider = computed({
-    get: () => nowTime.value / allTime.value * 100,
+  get: () => (nowTime.value / allTime.value) * 100,
   set: (value) => {
-        audio.value.currentTime = value * allTime.value / 100
+    audio.value.currentTime = (value * allTime.value) / 100
     audio.value.play()
-        store.commit("setPlayMusic", true);
+    store.commit('setPlayMusic', true)
-    }
+  },
 })
 
 // 音量条
@@ -170,7 +200,7 @@ const volumeSlider = computed({
   get: () => audioVolume.value * 100,
   set: (value) => {
     audio.value.volume = value / 100
-    }
+  },
 })
 // 获取当前播放时间
 const getNowTime = computed(() => {
@@ -190,7 +220,7 @@ const isMouse = ref(false)
 // 歌词滚动方法
 const lrcScroll = () => {
   if (musicFull.value && !isMouse.value) {
-        let top = newLrcIndex.value * 50 - 225;
+    let top = newLrcIndex.value * 50 - 225
     lrcSider.value.scrollTo({ top: top, behavior: 'smooth' })
   }
 }
@@ -200,35 +230,43 @@ const mouseOverLayout = () => {
 const mouseLeaveLayout = () => {
   setTimeout(() => {
     isMouse.value = false
-    }, 3000);
+  }, 3000)
 }
 
 // 监听音乐播放 获取时间
-const onAudio = (audio: any) => {
+const onAudio = (audio: HTMLAudioElement) => {
-    audio.addEventListener("timeupdate", function () {//监听音频播放的实时时间事件
+  audio.removeEventListener('timeupdate', handleGetAudioTime);
-        // 获取当前播放时间
+  audio.removeEventListener('ended', handleEnded);
-        nowTime.value = Math.floor(audio.currentTime)
+  audio.addEventListener('timeupdate', handleGetAudioTime);
-        // 获取总时间
+  audio.addEventListener('ended', handleEnded);
-        allTime.value = audio.duration
-
-        if (audio.currentTime >= audio.duration) {
-            // store.commit("setPlayMusic", false);
-            audio.play()
 }
+
+function handleEnded() {
+  store.commit('nextPlay');
+}
+
+function handlePrev(){
+  store.commit('prevPlay');
+}
+
+function handleGetAudioTime(this: any) {
+  // 监听音频播放的实时时间事件
+  const audio = this as HTMLAudioElement;
+  // 获取当前播放时间
+  nowTime.value = Math.floor(audio.currentTime);
+  // 获取总时间
+  allTime.value = audio.duration;
   // 获取音量
-        audioVolume.value = audio.volume
+  audioVolume.value = audio.volume;
-
+  lrcScroll();
-        lrcScroll()
-
-    })
 }
 
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
   if (play.value) {
-        store.commit("setPlayMusic", false);
+    store.commit('setPlayMusic', false)
   } else {
-        store.commit("setPlayMusic", true);
+    store.commit('setPlayMusic', true)
   }
 }
 
@@ -248,12 +286,11 @@ const parsingMusic = async () => {
   store.state.playMusicUrl = data.data.url
 }
 
-
 const lrcData = ref<ILyric>()
 
 interface ILrcData {
-    text: string;
+  text: string
-    trText: string;
+  trText: string
 }
 const lrcArray = ref<Array<ILrcData>>()
 const lrcTimeArray = ref<Array<Number>>([])
@@ -263,33 +300,37 @@ const loadLrc = async () => {
   lrcData.value = data
 
   try {
-
     let musicText = data.lrc.lyric
     //歌词时间
     let timeArray = musicText.match(/(\d{2}):(\d{2})(\.(\d*))?/g)
     let timeArrayNum: Array<Number> = []
     timeArray?.forEach(function (item, index) {
       if (item.length < 9) {
-                item = item + "0"
+        item = item + '0'
       }
-            timeArrayNum.push(parseInt(item.split(':')[0]) * 60 + parseFloat(item.split(':')[1]));
+      timeArrayNum.push(
+        parseInt(item.split(':')[0]) * 60 + parseFloat(item.split(':')[1])
+      )
     })
     lrcTimeArray.value = timeArrayNum
     //歌词
-        let musicTextArray = musicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
+    let musicTextArray = musicText
+      .replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '')
+      .split('\n')
     let text = []
 
     try {
       let trMusicText = data.tlyric.lyric
-            let trMusicTextArray = trMusicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
+      let trMusicTextArray = trMusicText
+        .replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '')
+        .split('\n')
       for (let i = 0; i < musicTextArray.length - 1; i++) {
         text.push({
           text: musicTextArray[i],
-                    trText: trMusicTextArray[i]
+          trText: trMusicTextArray[i],
         })
       }
       lrcArray.value = text
-
     } catch (err) {
       text = []
     }
@@ -303,7 +344,6 @@ const isCurrentLrc = (index: any) => {
   let isTrue = !(nowTime.value <= lrcTimeArray.value[index] || nowTime.value >= lrcTimeArray.value[index + 1])
   if (isTrue) {
     newLrcIndex.value = index
-
   }
   return isTrue
 }
@@ -312,22 +352,25 @@ const setAudioTime = (index: any) => {
   audio.value.currentTime = lrcTimeArray.value[index]
   audio.value.play()
 }
-
 </script>
 
 <style lang="scss" scoped>
 .musicPage-enter-active {
   animation: fadeInUp 0.8s ease-in-out;
 }
+
 .musicPage-leave-active {
   animation: fadeOutDown 0.8s ease-in-out;
 }
+
 #drawer-target {
   @apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
   background-color: #333333;
   animation-duration: 300ms;
+
   .music-img {
     @apply flex-1;
+
     .img {
       @apply rounded-xl;
     }
@@ -335,21 +378,26 @@ const setAudioTime = (index: any) => {
 
   .music-content {
     @apply flex flex-col justify-center items-center;
+
     &-name {
       @apply font-bold text-3xl py-2;
     }
+
     &-singer {
       @apply text-base py-2;
     }
   }
+
   .music-lrc {
     background-color: #333333;
     width: 800px;
     height: 550px;
+
     &-text {
       @apply text-white text-lg flex justify-center items-center cursor-pointer;
       height: 50px;
       transition: all 0.2s ease-out;
+
       &:hover {
         @apply font-bold text-xl text-red-500;
       }
@@ -360,6 +408,7 @@ const setAudioTime = (index: any) => {
     }
   }
 }
+
 .text-ellipsis {
   width: 100%;
 }
@@ -371,9 +420,11 @@ const setAudioTime = (index: any) => {
   .music-content {
     width: 200px;
     @apply ml-4;
+
     &-title {
       @apply text-base text-white;
     }
+
     &-name {
       @apply text-xs mt-1;
       @apply text-gray-400;
@@ -387,16 +438,21 @@ const setAudioTime = (index: any) => {
 
 .music-buttons {
   @apply mx-6;
+
   .iconfont {
     @apply text-2xl hover:text-green-500 transition;
   }
+
   .icon {
     @apply text-xl hover:text-white;
   }
+
   @apply flex items-center;
+
   >div {
     @apply cursor-pointer;
   }
+
   &-play {
     @apply flex justify-center items-center w-12 h-12 rounded-full mx-4 hover:bg-green-500 transition;
     background: #383838;
@@ -405,6 +461,7 @@ const setAudioTime = (index: any) => {
 
 .music-time {
   @apply flex flex-1 items-center;
+
   .time {
     @apply mx-4 mt-1;
   }
@@ -413,6 +470,7 @@ const setAudioTime = (index: any) => {
 .audio-volume {
   width: 140px;
   @apply flex items-center mx-4;
+
   .iconfont {
     @apply text-2xl hover:text-green-500 transition cursor-pointer mr-4;
   }
@@ -420,6 +478,7 @@ const setAudioTime = (index: any) => {
 
 .audio-button {
   @apply flex items-center mx-4;
+
   .iconfont {
     @apply text-2xl hover:text-green-500 transition cursor-pointer m-4;
   }

src/store/index.ts

@@ -2,31 +2,58 @@ import { createStore } from "vuex";
 import { SongResult } from "@/type/music";
 import { getMusicUrl } from "@/api/music";
 import homeRouter from "@/router/home";
-let state = {
+
+interface State {
+  menus: any[]
+  play: boolean
+  isPlay: boolean
+  playMusic: SongResult
+  playMusicUrl: string
+  user: any
+  playList: SongResult[]
+  playListIndex: number
+}
+
+const state: State = {
   menus: homeRouter,
   play: false,
   isPlay: false,
   playMusic: {} as SongResult,
-  playMusicUrl: "",
+  playMusicUrl: '',
-  user: null as any,
+  user: null,
-};
+  playList: [],
+  playListIndex: 0,
+}
 
-let mutations = {
+const mutations = {
-  setMenus(state: any, menus: any[]) {
+  setMenus(state: State, menus: any[]) {
-    state.menus = menus;
+    state.menus = menus
   },
-  async setPlay(state: any, playMusic: SongResult) {
+  async setPlay(state: State, playMusic: SongResult) {
-    state.playMusic = playMusic;
+    state.playMusic = playMusic
-    state.playMusicUrl = await getSongUrl(playMusic.id);
+    state.playMusicUrl = await getSongUrl(playMusic.id)
-    state.play = true;
+    state.play = true
   },
-  setIsPlay(state: any, isPlay: boolean) {
+  setIsPlay(state: State, isPlay: boolean) {
-    state.isPlay = isPlay;
+    state.isPlay = isPlay
   },
-  setPlayMusic(state: any, play: boolean) {
+  setPlayMusic(state: State, play: boolean) {
-    state.play = play;
+    state.play = play
   },
-};
+  setPlayList(state: State, playList: SongResult[]) {
+    state.playListIndex = 0
+    state.playList = playList
+  },
+  async nextPlay(state: State) {
+    state.playListIndex = (state.playListIndex + 1) % state.playList.length
+    await updatePlayMusic(state)
+  },
+  async prevPlay(state: State) {
+    state.playListIndex =
+      (state.playListIndex - 1 + state.playList.length) % state.playList.length
+    await updatePlayMusic(state)
+  },
+}
 
 const getSongUrl = async (id: number) => {
   const { data } = await getMusicUrl(id);
@@ -35,6 +62,12 @@ const getSongUrl = async (id: number) => {
   return data.data[0].url;
 };
 
+const updatePlayMusic = async (state: State) => {
+  state.playMusic = state.playList[state.playListIndex]
+  state.playMusicUrl = await getSongUrl(state.playMusic.id)
+  state.play = true
+}
+
 const store = createStore({
   state: state,
   mutations: mutations,

src/views/list/index.vue

@@ -6,9 +6,10 @@ import type { IListDetail } from "@/type/listDetail";
 import { setAnimationClass, setAnimationDelay } from "@/utils";
 import SongItem from "@/components/common/SongItem.vue";
 import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
 
 
-
+const store = useStore();
 const recommendList = ref()
 const showMusic = ref(false)
 
@@ -91,6 +92,13 @@ const formatDetail = computed(() => (detail: any) => {
 })
 
 
+const handlePlay = (item: any) => {
+  const list = listDetail.value?.playlist.tracks || []
+  console.log('list',list)
+  console.log('item',item)
+  const musicIndex = (list.findIndex((music: any) => music.id == item.id) || 0)
+  store.commit('setPlayList', list.slice(musicIndex))
+}
 
 </script>
 
@@ -134,7 +142,7 @@ const formatDetail = computed(() => (detail: any) => {
             :class="setAnimationClass('animate__bounceInUp')"
             :style="setAnimationDelay(index, 50)"
           >
-            <SongItem :item="formatDetail(item)" />
+            <SongItem :item="formatDetail(item)" @play="handlePlay" />
           </div>
         </n-layout>
       </div>

src/views/user/index.vue

@@ -69,6 +69,12 @@ const musicFullClass = computed(() => {
   }
 })
 
+const handlePlay = (item: any) => {
+  const tracks = list.value?.tracks || []
+  const musicIndex = (tracks.findIndex((music: any) => music.id == item.id) || 0)
+  store.commit('setPlayList', tracks.slice(musicIndex))
+}
+
 
 </script>
 
@@ -145,7 +151,7 @@ const musicFullClass = computed(() => {
             :class="setAnimationClass('animate__bounceInUp')"
             :style="setAnimationDelay(index, 100)"
           >
-            <SongItem :item="formatDetail(item)" />
+            <SongItem :item="formatDetail(item)" @play="handlePlay"/>
           </div>
         </n-layout>
       </div>

vite.config.ts

@@ -8,28 +8,28 @@ export default defineConfig({
   plugins: [vue(), VueDevTools()],
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "src"),
+      '@': path.resolve(__dirname, 'src'),
     },
   },
   server: {
-    host: "0.0.0.0", //允许本机
+    host: '0.0.0.0', //允许本机
     proxy: {
       // string shorthand
-      "/mt": {
+      '/mt': {
-        target: "http://mt.myalger.top",
+        target: 'http://mt.myalger.top',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/mt/, ""),
+        rewrite: (path) => path.replace(/^\/mt/, ''),
       },
       // with options
-      "/api": {
+      '/api': {
-        target: "http://123.56.226.179:3000",
+        target: 'http://110.42.251.190:9898',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ""),
+        rewrite: (path) => path.replace(/^\/api/, ''),
       },
-      "/music": {
+      '/music': {
-        target: "http://myalger.top:4000",
+        target: 'http://myalger.top:4000',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/music/, ""),
+        rewrite: (path) => path.replace(/^\/music/, ''),
       },
     },
   },