From 02542654de87f62063e50afb7e726d98a67cc06b Mon Sep 17 00:00:00 2001
From: QIU SHENGMING <Kero64@126.com>
Date: Mon, 15 Sep 2025 21:47:01 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9F=B3=E4=B9=90=E6=92=AD=E6=94=BE=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/widget/APlayer.svelte | 14 ++++++++++++++
 src/components/widget/Music.astro    | 20 ++++++++++++++++++++
 src/components/widget/SideBar.astro  |  4 ++++
 3 files changed, 38 insertions(+)
 create mode 100644 src/components/widget/APlayer.svelte
 create mode 100644 src/components/widget/Music.astro

diff --git a/src/components/widget/APlayer.svelte b/src/components/widget/APlayer.svelte
new file mode 100644
index 0000000..2b6b02c
--- /dev/null
+++ b/src/components/widget/APlayer.svelte
@@ -0,0 +1,14 @@
+<div class="meting" id="meting">
+    <!-- require APlayer -->
+    <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>
+    <!-- require MetingJS -->
+    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
+    <meting-js
+        server="netease"
+        type="playlist"
+        id="你的网易云歌单ID"
+        order="random"
+        list-folded="true">
+    </meting-js>
+</div>
\ No newline at end of file
diff --git a/src/components/widget/Music.astro b/src/components/widget/Music.astro
new file mode 100644
index 0000000..3422510
--- /dev/null
+++ b/src/components/widget/Music.astro
@@ -0,0 +1,20 @@
+---
+import WidgetLayout from './WidgetLayout.astro'
+import APlayer from './APlayer.svelte'
+
+const COLLAPSED_HEIGHT = '7.5rem'
+
+interface Props {
+  class?: string
+  style?: string
+}
+const className = Astro.props.class
+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">
+        <APlayer client:only="svelte"/>
+    </div>
+</WidgetLayout>
\ No newline at end of file
diff --git a/src/components/widget/SideBar.astro b/src/components/widget/SideBar.astro
index 43fd117..3df72ee 100644
--- a/src/components/widget/SideBar.astro
+++ b/src/components/widget/SideBar.astro
@@ -3,6 +3,7 @@ import type { MarkdownHeading } from "astro";
 import Categories from "./Categories.astro";
 import Profile from "./Profile.astro";
 import Tag from "./Tags.astro";
+import Music from './Music.astro'
 import Series from './Series.astro'
 
 interface Props {
@@ -24,5 +25,8 @@ const series = Astro.props.series
         </div>
         <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
         <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
+        div id="music" class="flex flex-col w-full gap-4">
+           <Music></Music>
+       </div>
     </div>
 </div>