修复音乐播放器bug

bug
现在还有一个超级无敌的bug，那就是展开音乐列表的时候，会把整个网页都给拉伸一下。这应该是因为？尝试了很多次，但都是展开之后，音乐播放器都不能自由滚动😓，这主要是因为我改变了本来aplayer的样式，因为它一直出现两个播放器，生成不一样的aplayer之后，原生的列表也变了。

所以我决定回复原来的aplayer引用，改为销毁一个音乐播放器

一度变成了

内容来自其他网站。

src/components/widget/APlayer.svelte

@@ -1,14 +1,178 @@
-<div class="meting" id="meting">
+<script>
-    <!-- require APlayer -->
+  import { onMount, onDestroy } from 'svelte';
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
+  
-    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
+  let container;
-    <!-- require MetingJS -->
+  let playerInstance = null;
-    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
+  
-    <meting-js
+  onMount(() => {
-        server="netease"
+    // 确保脚本加载完成后再初始化
-        type="playlist"
+    loadScripts().then(() => {
-        id="420944487"
+      initPlayer();
-        order="random"
+    });
-        list-folded="true">
+  });
-    </meting-js>
+  
-</div>
+  onDestroy(() => {
+    destroyPlayer();
+  });
+  
+  function loadScripts() {
+    return new Promise((resolve) => {
+      // 检查是否已经加载了必要的脚本
+      if (window.APlayer && window.Meting) {
+        resolve();
+        return;
+      }
+      
+      let loadedCount = 0;
+      const totalScripts = 3;
+      
+      function checkLoaded() {
+        loadedCount++;
+        if (loadedCount === totalScripts) {
+          resolve();
+        }
+      }
+      
+      // 加载CSS
+      if (!document.querySelector('link[href*="aplayer"]')) {
+        const css = document.createElement('link');
+        css.rel = 'stylesheet';
+        css.href = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css';
+        css.onload = checkLoaded;
+        document.head.appendChild(css);
+      } else {
+        checkLoaded();
+      }
+      
+      // 加载APlayer JS
+      if (!window.APlayer) {
+        const script1 = document.createElement('script');
+        script1.src = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js';
+        script1.onload = checkLoaded;
+        document.body.appendChild(script1);
+      } else {
+        checkLoaded();
+      }
+      
+      // 加载Meting JS
+      if (!window.Meting) {
+        const script2 = document.createElement('script');
+        script2.src = 'https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js';
+        script2.onload = checkLoaded;
+        document.body.appendChild(script2);
+      } else {
+        checkLoaded();
+      }
+    });
+  }
+  
+  function destroyPlayer() {
+    if (playerInstance) {
+      try {
+        playerInstance.destroy();
+        console.log('播放器实例已销毁');
+      } catch (e) {
+        console.log('销毁播放器时出错:', e);
+      }
+      playerInstance = null;
+    }
+    
+    // 清理全局实例引用
+    if (window.musicPlayerInstance === playerInstance) {
+      window.musicPlayerInstance = null;
+    }
+  }
+  
+  function initPlayer() {
+    if (!container) return;
+    
+    // 先销毁现有实例
+    destroyPlayer();
+    
+    // 清空容器
+    container.innerHTML = '';
+    
+    // 创建meting-js元素
+    const metingElement = document.createElement('meting-js');
+    metingElement.setAttribute('server', 'netease');
+    metingElement.setAttribute('type', 'playlist');
+    metingElement.setAttribute('id', '420944487');
+    metingElement.setAttribute('order', 'random');
+    metingElement.setAttribute('list-folded', 'true');
+    metingElement.setAttribute('list-max-height', '300px'); // 限制列表最大高度
+    metingElement.setAttribute('fixed', 'false');
+    metingElement.setAttribute('autoplay', 'false');
+    metingElement.setAttribute('preload', 'auto');
+    
+    container.appendChild(metingElement);
+    
+    // 等待Meting初始化完成
+    setTimeout(() => {
+      const aplayerElement = container.querySelector('.aplayer');
+      if (aplayerElement && aplayerElement.aplayer) {
+        playerInstance = aplayerElement.aplayer;
+        window.musicPlayerInstance = playerInstance;
+        
+        // 添加样式修复
+        if (aplayerElement) {
+          aplayerElement.style.boxShadow = 'none';
+          aplayerElement.style.margin = '0';
+          
+          // 确保列表滚动正常
+          const listElement = aplayerElement.querySelector('.aplayer-list');
+          if (listElement) {
+            listElement.style.maxHeight = '300px';
+            listElement.style.overflowY = 'auto';
+          }
+        }
+        
+        console.log('播放器初始化完成');
+      }
+    }, 100);
+  }
+</script>
+
+<!-- 播放器容器 -->
+<div bind:this={container} class="music-player-container"></div>
+
+<style>
+  .music-player-container {
+    width: 100%;
+    position: relative;
+  }
+  
+  /* 全局样式修复 */
+  :global(.aplayer) {
+    box-shadow: none !important;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  
+  :global(.aplayer-list) {
+    max-height: 300px !important;
+    overflow-y: auto !important;
+  }
+  
+  :global(.aplayer-list ol) {
+    max-height: none !important;
+  }
+  
+  /* 防止列表展开时影响页面布局 */
+  :global(.aplayer.aplayer-withlist .aplayer-list) {
+    position: relative !important;
+  }
+  
+  /* 确保滚动条样式 */
+  :global(.aplayer-list::-webkit-scrollbar) {
+    width: 4px;
+  }
+  
+  :global(.aplayer-list::-webkit-scrollbar-thumb) {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 2px;
+  }
+  
+  :global(.aplayer-list::-webkit-scrollbar-track) {
+    background: transparent;
+  }
+</style>

src/components/widget/Music.astro

@@ -13,8 +13,54 @@ const style = Astro.props.style
 
 const isCollapsed = false
 ---
+
 <WidgetLayout name="音乐" id="music" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
-    <div class="flex flex-col gap-1">
+    <div class="flex flex-col gap-1 music-widget-container">
         <APlayer client:only="svelte"/>
     </div>
-</WidgetLayout>
+</WidgetLayout>
+
+<script>
+// 页面切换时的清理工作
+function cleanupMusicPlayer() {
+  if (window.musicPlayerInstance) {
+    try {
+      window.musicPlayerInstance.destroy();
+      console.log('页面切换时清理播放器');
+    } catch (e) {
+      console.log('清理播放器时出错:', e);
+    }
+    window.musicPlayerInstance = null;
+  }
+}
+
+// Astro 页面切换事件
+document.addEventListener('astro:before-preparation', cleanupMusicPlayer);
+document.addEventListener('astro:before-swap', cleanupMusicPlayer);
+
+// 如果使用了 Swup
+if (typeof window !== 'undefined' && window.swup) {
+  window.swup.hooks.on('content:replace', cleanupMusicPlayer);
+}
+
+// 页面卸载时清理
+window.addEventListener('beforeunload', cleanupMusicPlayer);
+</script>
+
+<style>
+.music-widget-container {
+  overflow: hidden;
+  position: relative;
+}
+
+/* 防止音乐播放器影响整体布局 */
+.music-widget-container :global(.aplayer) {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+.music-widget-container :global(.aplayer-list) {
+  position: relative !important;
+  z-index: 10;
+}
+</style>