refactor(AudioPlayer): 调整播放列表弹出层样式和行为

将播放列表弹出层的样式和行为进行优化，包括调整高度、添加遮罩层以及在选择歌曲后自动关闭播放列表

 <!--
 <!--
  * @Date: 2025-04-07 12:35:35
  * @Date: 2025-04-07 12:35:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-04-07 17:20:54
+ * @LastEditTime: 2025-04-07 17:37:34
  * @FilePath: /mlaj/src/components/ui/audioPlayer.vue
  * @FilePath: /mlaj/src/components/ui/audioPlayer.vue
  * @Description: 音频播放器组件，支持播放控制、进度条调节、音量控制、播放列表等功能
  * @Description: 音频播放器组件，支持播放控制、进度条调节、音量控制、播放列表等功能
 -->
 -->
@@ -81,12 +81,13 @@
 
 
     <!-- 播放列表弹出层 -->
     <!-- 播放列表弹出层 -->
     <van-popup
     <van-popup
+      teleport="body"
       v-model:show="isPlaylistVisible"
       v-model:show="isPlaylistVisible"
       position="bottom"
       position="bottom"
-      :overlay="false"
+      :overlay="true"
       round
       round
       class="playlist-popup"
       class="playlist-popup"
-      style="height: 100%"
+      style="height: 70vh"
     >
     >
       <div class="playlist-header flex justify-between items-center px-4 py-3 border-b sticky top-0 bg-white z-10">
       <div class="playlist-header flex justify-between items-center px-4 py-3 border-b sticky top-0 bg-white z-10">
         <h4 class="font-medium">播放列表 ({{ songs.length }})</h4>
         <h4 class="font-medium">播放列表 ({{ songs.length }})</h4>
@@ -158,7 +159,6 @@ onMounted(() => {
 const loadAudio = async () => {
 const loadAudio = async () => {
   if (!currentSong.value) return
   if (!currentSong.value) return
   isLoading.value = true
   isLoading.value = true
-  isPlaylistVisible.value = false // 关闭播放列表
   try {
   try {
     if (audio.value) {
     if (audio.value) {
       audio.value.removeEventListener('timeupdate', updateProgress)
       audio.value.removeEventListener('timeupdate', updateProgress)
@@ -306,6 +306,8 @@ const selectSong = async (index) => {
   if (audio.value) {
   if (audio.value) {
     await audio.value.play()
     await audio.value.play()
     isPlaying.value = true
     isPlaying.value = true
+    // 关闭播放列表
+    isPlaylistVisible.value = false
     // 滚动到当前播放的音频
     // 滚动到当前播放的音频
     const playlistItems = document.querySelector('.playlist-items')
     const playlistItems = document.querySelector('.playlist-items')
     const activeItem = playlistItems?.querySelector('.active')
     const activeItem = playlistItems?.querySelector('.active')

 <!--
 <!--
  * @Date: 2025-03-24 13:04:21
  * @Date: 2025-03-24 13:04:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-04-07 17:17:52
+ * @LastEditTime: 2025-04-07 17:58:02
  * @FilePath: /mlaj/src/views/profile/settings/AudioPlayerPage.vue
  * @FilePath: /mlaj/src/views/profile/settings/AudioPlayerPage.vue
  * @Description: 音频播放页面
  * @Description: 音频播放页面
 -->
 -->
@@ -37,7 +37,7 @@ const audioList = ref([
     title: '示例音频 2',
     title: '示例音频 2',
     artist: '演唱者 2',
     artist: '演唱者 2',
     cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
     cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
-    url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
+    url: 'https://img.tukuppt.com/newpreview_music/08/99/00/5c88d4a8d1f5745026.mp3'
   },
   },
   {
   {
     id: 3,
     id: 3,