diff --git a/src/views/api/Music.vue b/src/views/api/Music.vue
index a2633f8..bc2194a 100644
--- a/src/views/api/Music.vue
+++ b/src/views/api/Music.vue
@@ -168,8 +168,23 @@
       </el-table-column>
     </el-table>
   </el-drawer>
-  <el-drawer v-model="musicPlaying" :close-on-click-modal="false" size="40%" title="播放音乐">
-    <a-player v-if="musicPlaying && currentMusic" ref="player" autoplay showLrc :list="musicList" v-model:music="currentMusic" @play="musicPlay"/>
+  <el-drawer v-model="musicPlaying" :close-on-click-modal="false" size="1200px" title="播放音乐" class="music-drawer">
+    <music-player-panel
+      v-if="musicPlaying && currentMusic"
+      ref="player"
+      autoplay
+      :music="currentMusic"
+      :list="musicList"
+      @update:music="currentMusic = $event"
+      @play="musicPlay"
+      @toggle="player?.toggle()"
+      @prev="switchPrev"
+      @next="switchNext"
+      @toggle-shuffle="player && (player.shuffle = !player.shuffle)"
+      @next-mode="cycleRepeatMode"
+      @toggle-mute="togglePlayerMute"
+      @select-song="onSelectSong"
+    />
   </el-drawer>
 </div>
 </template>
@@ -181,7 +196,7 @@ import { useBaseList } from '@/model/baselist'
 import { MsgResult, Page } from '@/model/common.dto'
 import { UploadInstance, ElMessage, ElMessageBox } from 'element-plus'
 import { MusicModel, MusicLibModel, MusicLyricModel, MusicPlayerItem } from '@/model/api/music'
-import APlayer from './aplayer/vue-aplayer.vue'
+import MusicPlayerPanel from './aplayer/music-player-panel.vue'
 import prettyBytes from 'pretty-bytes'
 // 格式化秒为 mm:ss
 function formatDuration(seconds?: number): string {
@@ -225,7 +240,7 @@ const musicList = ref<MusicPlayerItem[]>([])
 const currentMusic = ref<MusicPlayerItem>()
 const lyricForm = ref<VForm>()
 const musicUpload = ref<UploadInstance>()
-const player = ref<InstanceType<typeof APlayer>>()
+const player = ref<InstanceType<typeof MusicPlayerPanel>>()
 const lyricLoading = ref(false)
 const libDrawerVisible = ref(false)
 const libTableData = ref<(MusicLibModel & { _isNew?: boolean })[]>([])
@@ -384,20 +399,39 @@ function musicPlay() {
     player.value?.pause()
   })
   navigator.mediaSession.setActionHandler('previoustrack', () => {
-    if (currentId === 0) {
-      player.value?.switch(musicList.value.length - 1)
-    } else {
-      player.value?.switch(currentId - 1)
-    }
+    switchPrev()
   })
   navigator.mediaSession.setActionHandler('nexttrack', () => {
-    if (currentId === musicList.value.length - 1) {
-      player.value?.switch(0)
-    } else {
-      player.value?.switch(currentId + 1)
-    }
+    switchNext()
   })
 }
+function switchPrev() {
+  if (!currentMusic.value) return
+  const idx = musicList.value.indexOf(currentMusic.value)
+  const prevIdx = idx <= 0 ? musicList.value.length - 1 : idx - 1
+  player.value?.switch(prevIdx)
+}
+function switchNext() {
+  if (!currentMusic.value) return
+  const idx = musicList.value.indexOf(currentMusic.value)
+  const nextIdx = idx >= musicList.value.length - 1 ? 0 : idx + 1
+  player.value?.switch(nextIdx)
+}
+function cycleRepeatMode() {
+  if (!player.value) return
+  if (player.value.repeatMode === 'no_repeat') player.value.repeatMode = 'repeat_all'
+  else if (player.value.repeatMode === 'repeat_all') player.value.repeatMode = 'repeat_one'
+  else player.value.repeatMode = 'no_repeat'
+}
+function togglePlayerMute() {
+  if (!player.value?.audio) return
+  const audio = player.value.audio as unknown as HTMLAudioElement
+  audio.muted = !audio.muted
+}
+function onSelectSong(song: MusicPlayerItem) {
+  const idx = musicList.value.indexOf(song)
+  if (idx >= 0) player.value?.switch(idx)
+}
 
 function loadLibs() {
   return http.get<never, any>('/music/lib/list').then(data => {
diff --git a/src/views/api/aplayer/assets/loading.svg b/src/views/api/aplayer/assets/loading.svg
deleted file mode 100644
index 0ab9175..0000000
--- a/src/views/api/aplayer/assets/loading.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
-    <path fill="#FFF" d="M4 16c0-6.6 5.4-12 12-12s12 5.4 12 12c0 1.2-0.8 2-2 2s-2-0.8-2-2c0-4.4-3.6-8-8-8s-8 3.6-8 8 3.6 8 8 8c1.2 0 2 0.8 2 2s-0.8 2-2 2c-6.6 0-12-5.4-12-12z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/lrc.svg b/src/views/api/aplayer/assets/lrc.svg
deleted file mode 100644
index 57fac17..0000000
--- a/src/views/api/aplayer/assets/lrc.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
-    <path d="M26.667 5.333h-21.333c-0 0-0.001 0-0.001 0-1.472 0-2.666 1.194-2.666 2.666 0 0 0 0.001 0 0.001v-0 16c0 0 0 0.001 0 0.001 0 1.472 1.194 2.666 2.666 2.666 0 0 0.001 0 0.001 0h21.333c0 0 0.001 0 0.001 0 1.472 0 2.666-1.194 2.666-2.666 0-0 0-0.001 0-0.001v0-16c0-0 0-0.001 0-0.001 0-1.472-1.194-2.666-2.666-2.666-0 0-0.001 0-0.001 0h0zM5.333 16h5.333v2.667h-5.333v-2.667zM18.667 24h-13.333v-2.667h13.333v2.667zM26.667 24h-5.333v-2.667h5.333v2.667zM26.667 18.667h-13.333v-2.667h13.333v2.667z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/menu.svg b/src/views/api/aplayer/assets/menu.svg
deleted file mode 100644
index 2806d05..0000000
--- a/src/views/api/aplayer/assets/menu.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 0 32 32">
-    <path d="M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/no_repeat.svg b/src/views/api/aplayer/assets/no_repeat.svg
deleted file mode 100644
index 182635c..0000000
--- a/src/views/api/aplayer/assets/no_repeat.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
-    <path d="M2.667 7.027l1.707-1.693 22.293 22.293-1.693 1.707-4-4h-11.64v4l-5.333-5.333 5.333-5.333v4h8.973l-8.973-8.973v0.973h-2.667v-3.64l-4-4zM22.667 17.333h2.667v5.573l-2.667-2.667v-2.907zM22.667 6.667v-4l5.333 5.333-5.333 5.333v-4h-10.907l-2.667-2.667h13.573z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/pause.svg b/src/views/api/aplayer/assets/pause.svg
deleted file mode 100644
index ae0cd59..0000000
--- a/src/views/api/aplayer/assets/pause.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-8 0 32 32">
-    <path stroke="#000" fill="#FFF" d="M14.080 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048zM2.88 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/play.svg b/src/views/api/aplayer/assets/play.svg
deleted file mode 100644
index a856703..0000000
--- a/src/views/api/aplayer/assets/play.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-8 0 32 32">
-    <path stroke="#000" fill="#FFF" d="M15.552 15.168q0.448 0.32 0.448 0.832 0 0.448-0.448 0.768l-13.696 8.512q-0.768 0.512-1.312 0.192t-0.544-1.28v-16.448q0-0.96 0.544-1.28t1.312 0.192z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/repeat_all.svg b/src/views/api/aplayer/assets/repeat_all.svg
deleted file mode 100644
index f346d77..0000000
--- a/src/views/api/aplayer/assets/repeat_all.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
-<path d="M9.333 9.333h13.333v4l5.333-5.333-5.333-5.333v4h-16v8h2.667v-5.333zM22.667 22.667h-13.333v-4l-5.333 5.333 5.333 5.333v-4h16v-8h-2.667v5.333z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/repeat_one.svg b/src/views/api/aplayer/assets/repeat_one.svg
deleted file mode 100644
index 9325e37..0000000
--- a/src/views/api/aplayer/assets/repeat_one.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
-    <path d="M9.333 9.333h13.333v4l5.333-5.333-5.333-5.333v4h-16v8h2.667v-5.333zM22.667 22.667h-13.333v-4l-5.333 5.333 5.333 5.333v-4h16v-8h-2.667v5.333zM17.333 20v-8h-1.333l-2.667 1.333v1.333h2v5.333h2z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/shuffle.svg b/src/views/api/aplayer/assets/shuffle.svg
deleted file mode 100644
index 37eb42e..0000000
--- a/src/views/api/aplayer/assets/shuffle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
-    <path d="M22.667 4l7 6-7 6 7 6-7 6v-4h-3.653l-3.76-3.76 2.827-2.827 2.587 2.587h2v-8h-2l-12 12h-6v-4h4.347l12-12h3.653v-4zM2.667 8h6l3.76 3.76-2.827 2.827-2.587-2.587h-4.347v-4z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/skip.svg b/src/views/api/aplayer/assets/skip.svg
deleted file mode 100644
index e7a23dd..0000000
--- a/src/views/api/aplayer/assets/skip.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
-    <path d="M25.468 6.947c-0.326-0.172-0.724-0.151-1.030 0.057l-6.438 4.38v-3.553c0-0.371-0.205-0.71-0.532-0.884-0.326-0.172-0.724-0.151-1.030 0.057l-12 8.164c-0.274 0.186-0.438 0.496-0.438 0.827s0.164 0.641 0.438 0.827l12 8.168c0.169 0.115 0.365 0.174 0.562 0.174 0.16 0 0.321-0.038 0.468-0.116 0.327-0.173 0.532-0.514 0.532-0.884v-3.556l6.438 4.382c0.169 0.115 0.365 0.174 0.562 0.174 0.16 0 0.321-0.038 0.468-0.116 0.327-0.173 0.532-0.514 0.532-0.884v-16.333c0-0.371-0.205-0.71-0.532-0.884z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/volume_down.svg b/src/views/api/aplayer/assets/volume_down.svg
deleted file mode 100644
index 4e94d08..0000000
--- a/src/views/api/aplayer/assets/volume_down.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
-    <path d="M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/volume_off.svg b/src/views/api/aplayer/assets/volume_off.svg
deleted file mode 100644
index 7f0fab3..0000000
--- a/src/views/api/aplayer/assets/volume_off.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
-    <path d="M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/assets/volume_up.svg b/src/views/api/aplayer/assets/volume_up.svg
deleted file mode 100644
index 4476774..0000000
--- a/src/views/api/aplayer/assets/volume_up.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
-    <path d="M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528zM25.152 16q0 2.72-1.536 5.056t-4 3.36q-0.256 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.704 0.672-1.056 1.024-0.512 1.376-0.8 1.312-0.96 2.048-2.4t0.736-3.104-0.736-3.104-2.048-2.4q-0.352-0.288-1.376-0.8-0.672-0.352-0.672-1.056 0-0.448 0.32-0.8t0.8-0.352q0.224 0 0.48 0.096 2.496 1.056 4 3.36t1.536 5.056zM29.728 16q0 4.096-2.272 7.552t-6.048 5.056q-0.224 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.64 0.704-1.056 0.128-0.064 0.384-0.192t0.416-0.192q0.8-0.448 1.44-0.896 2.208-1.632 3.456-4.064t1.216-5.152-1.216-5.152-3.456-4.064q-0.64-0.448-1.44-0.896-0.128-0.096-0.416-0.192t-0.384-0.192q-0.704-0.416-0.704-1.056 0-0.448 0.32-0.8t0.832-0.352q0.224 0 0.448 0.096 3.776 1.632 6.048 5.056t2.272 7.552z"></path>
-</svg>
\ No newline at end of file
diff --git a/src/views/api/aplayer/components/aplayer-controller-progress.vue b/src/views/api/aplayer/components/aplayer-controller-progress.vue
deleted file mode 100644
index 6c3d734..0000000
--- a/src/views/api/aplayer/components/aplayer-controller-progress.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-  <div
-    class="aplayer-bar-wrap"
-    @mousedown="onThumbMouseDown"
-    ref="barWrap"
-  >
-    <div class="aplayer-bar">
-      <div
-        class="aplayer-loaded"
-        :style="{width: `${loadProgress * 100}%`}">
-      </div>
-      <div
-        class="aplayer-played"
-        :style="{width: `${playProgress * 100}%`, background: theme}"
-      >
-        <span
-          ref="thumb"
-          @mouseover="thumbHovered = true"
-          @mouseout="thumbHovered = false"
-          class="aplayer-thumb"
-          :style="{borderColor: theme, backgroundColor: thumbHovered ? theme : '#fff'}"
-        >
-          <span class="aplayer-loading-icon" :style="{backgroundColor: theme }">
-            <player-icon type="loading"/>
-          </span>
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { getElementViewLeft } from '../utils'
-import PlayerIcon from './aplayer-icon.vue'
-
-defineProps<{
-  loadProgress: number
-  playProgress: number
-  theme?: string
-}>()
-
-const emit = defineEmits(['dragbegin', 'dragging', 'dragend'])
-
-const thumbHovered = ref(false)
-const barWrap = ref<unknown>(null)
-
-const onThumbMouseDown = (e: MouseEvent) => {
-  const barWidth = (<HTMLElement>barWrap.value).clientWidth
-  let percentage = (e.clientX - getElementViewLeft(<HTMLElement>barWrap.value)) / barWidth
-  percentage = percentage > 0 ? percentage : 0
-  percentage = percentage < 1 ? percentage : 1
-  emit('dragbegin', percentage)
-  document.addEventListener('mousemove', onDocumentMouseMove)
-  document.addEventListener('mouseup', onDocumentMouseUp)
-}
-
-const onDocumentMouseMove = (e: MouseEvent) => {
-  const barWidth = (<HTMLElement>barWrap.value).clientWidth
-  let percentage = (e.clientX - getElementViewLeft(<HTMLElement>barWrap.value)) / barWidth
-  percentage = percentage > 0 ? percentage : 0
-  percentage = percentage < 1 ? percentage : 1
-  emit('dragging', percentage)
-}
-
-const onDocumentMouseUp = (e: MouseEvent) => {
-  document.removeEventListener('mouseup', onDocumentMouseUp)
-  document.removeEventListener('mousemove', onDocumentMouseMove)
-  const barWidth = (<HTMLElement>barWrap.value).clientWidth
-  let percentage = (e.clientX - getElementViewLeft(<HTMLElement>barWrap.value)) / barWidth
-  percentage = percentage > 0 ? percentage : 0
-  percentage = percentage < 1 ? percentage : 1
-  emit('dragend', percentage)
-}
-</script>
-<style lang="less" scoped>
-.aplayer-bar-wrap {
-  margin: 0 0 0 5px;
-  padding: 4px 0;
-  cursor: pointer;
-  flex: 1;
-  .aplayer-bar {
-    position: relative;
-    height: 2px;
-    width: 100%;
-    background: #cdcdcd;
-    .aplayer-loaded {
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      background: #aaa;
-      height: 2px;
-      transition: all 0.5s ease;
-      will-change: width;
-    }
-    .aplayer-played {
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      height: 2px;
-      transition: background-color .3s;
-      will-change: width;
-      .aplayer-thumb {
-        position: absolute;
-        top: 0;
-        right: 5px;
-        margin-top: -5px;
-        margin-right: -10px;
-        width: 10px;
-        height: 10px;
-        border: 1px solid;
-        transform: scale(.8);
-        will-change: transform;
-        transition: transform 300ms, background-color .3s, border-color .3s;
-        border-radius: 50%;
-        background: #fff;
-        cursor: pointer;
-        &:hover {
-          transform: scale(1);
-        }
-        overflow: hidden;
-        .aplayer-loading-icon {
-          display: none;
-          width: 100%;
-          height: 100%;
-          .icon-svg {
-            position: absolute;
-            animation: spin 1s linear infinite;
-          }
-        }
-      }
-    }
-  }
-}
-.aplayer-loading {
-  .aplayer-bar-wrap .aplayer-bar .aplayer-thumb .aplayer-loading-icon {
-    display: block;
-  }
-  .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
-    transform: scale(1);
-  }
-}
-@keyframes spin {
-  0% {
-    transform: rotate(0)
-  }
-  100% {
-    transform: rotate(360deg)
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/api/aplayer/components/aplayer-controller-volume.vue b/src/views/api/aplayer/components/aplayer-controller-volume.vue
deleted file mode 100644
index 1a2e987..0000000
--- a/src/views/api/aplayer/components/aplayer-controller-volume.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <div class="aplayer-volume-wrap">
-    <icon-button
-      :class="`aplayer-icon-${volumeIcon}`"
-      :icon="volumeIcon"
-      @click="emit('togglemute')"
-    />
-    <div
-      class="aplayer-volume-bar-wrap"
-      @mousedown="onBarMouseDown"
-    >
-      <div class="aplayer-volume-bar" ref="bar">
-        <div
-          class="aplayer-volume"
-          :style="{
-            height: muted ? 0 : `${Math.trunc(volume * 100)}%`,
-            background: theme
-          }"
-        >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import IconButton from './aplayer-iconbutton.vue'
-import {getElementViewTop} from '../utils'
-
-const props = defineProps<{
-  volume: number
-  muted: boolean
-  theme: string
-}>()
-const emit = defineEmits(['setvolume', 'togglemute'])
-const barHeight = 40
-
-const volumeIcon = computed(() => {
-  if (props.muted || props.volume <= 0) return 'volume_off'
-  if (props.volume >= 1) return 'volume_up'
-  return 'volume_down'
-})
-
-const bar = ref<unknown>(null)
-
-const onBarMouseDown = () => {
-  document.addEventListener('mousemove', onDocumentMouseMove)
-  document.addEventListener('mouseup', onDocumentMouseUp)
-}
-const onDocumentMouseMove = (e: MouseEvent) => {
-  let percentage = (barHeight - e.clientY + getElementViewTop(<HTMLElement>bar.value)) / barHeight
-  percentage = percentage > 0 ? percentage : 0
-  percentage = percentage < 1 ? percentage : 1
-  emit('setvolume', percentage)
-}
-const onDocumentMouseUp = (e: MouseEvent) => {
-  document.removeEventListener('mouseup', onDocumentMouseUp)
-  document.removeEventListener('mousemove', onDocumentMouseMove)
-
-  let percentage = (barHeight - e.clientY + getElementViewTop(<HTMLElement>bar.value)) / barHeight
-  percentage = percentage > 0 ? percentage : 0
-  percentage = percentage < 1 ? percentage : 1
-  emit('setvolume', percentage)
-}
-</script>
-
-<style lang="less" scoped>
-.aplayer-volume-wrap {
-  position: relative;
-  cursor: pointer;
-  z-index: 0;
-  &:hover .aplayer-volume-bar-wrap {
-    display: block;
-  }
-  .aplayer-volume-bar-wrap {
-    display: none;
-    position: absolute;
-    bottom: 15px;
-    left: -4px;
-    right: -4px;
-    height: 40px;
-    z-index: -1;
-    transition: all .2s ease;
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: -16px;
-      left: 0;
-      right: 0;
-      height: 62px;
-      background-color: #fff;
-      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.07), 0 0 5px 0 rgba(0, 0, 0, 0.1);
-    }
-    .aplayer-volume-bar {
-      position: absolute;
-      bottom: 0;
-      left: 11px;
-      width: 5px;
-      height: 40px;
-      background: #aaa;
-      border-radius: 2.5px;
-      overflow: hidden;
-      z-index: 1;
-
-      .aplayer-volume {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        transition: height 0.1s ease, background-color .3s;
-        will-change: height;
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/api/aplayer/components/aplayer-controller.vue b/src/views/api/aplayer/components/aplayer-controller.vue
deleted file mode 100644
index a3f0903..0000000
--- a/src/views/api/aplayer/components/aplayer-controller.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <div class="aplayer-controller">
-    <v-progress
-      :loadProgress="loadProgress"
-      :playProgress="playProgress"
-      :theme="theme"
-      @dragbegin="val => emit('dragbegin', val)"
-      @dragend="val => emit('dragend', val)"
-      @dragging="val => emit('dragging', val)"
-    />
-    <div class="aplayer-time">
-      <div class="aplayer-time-inner">
-        - <span class="aplayer-ptime">{{secondToTime(stat.playedTime)}}</span> / <span
-        class="aplayer-dtime">{{secondToTime(stat.duration)}}</span>
-      </div>
-      <volume
-        v-if="!isMobile"
-        :volume="volume"
-        :theme="theme"
-        :muted="muted"
-        @togglemute="emit('togglemute')"
-        @setvolume="(v: number) => emit('setvolume', v)"
-      />
-      <icon-button
-        class="aplayer-icon-mode"
-        icon="shuffle"
-        :class="{ 'inactive': !shuffle }"
-        @click="emit('toggleshuffle')"
-      />
-      <icon-button
-        class="aplayer-icon-mode"
-        :icon="repeat === 'repeat_one' ? 'repeat_one' : 'repeat_all'"
-        :class="{ 'inactive': repeat === 'no_repeat'}"
-        @click="emit('nextmode')"
-      />
-      <icon-button
-        class="aplayer-icon-menu"
-        icon="menu"
-        :class="{ 'inactive': !showList }"
-        @click="emit('togglelist')"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import IconButton from './aplayer-iconbutton.vue'
-import VProgress from './aplayer-controller-progress.vue'
-import Volume from './aplayer-controller-volume.vue'
-import { StatType } from '@/model/api/music'
-
-const props = defineProps<{
-  shuffle: boolean
-  repeat: string
-  stat: StatType
-  theme: string
-  volume: number
-  muted: boolean
-  showList: boolean
-  isMobile: boolean
-}>()
-const emit = defineEmits(['dragbegin', 'dragend', 'dragging', 'togglemute', 'setvolume', 'toggleshuffle', 'nextmode', 'togglelist'])
-const loadProgress = computed(() => {
-  if (props.stat.duration === 0) return 0
-  return props.stat.loadedTime / props.stat.duration
-})
-const playProgress = computed(() => {
-  if (props.stat.duration === 0) return 0
-  return props.stat.playedTime / props.stat.duration
-})
-
-const secondToTime = (second: number) => {
-  if (isNaN(second)) {
-    return '00:00'
-  }
-  const pad0 = (num: number) => {
-    return num < 10 ? '0' + num : '' + num
-  }
-
-  const min = Math.trunc(second / 60)
-  const sec = Math.trunc(second - min * 60)
-  const hours = Math.trunc(min / 60)
-  const minAdjust = Math.trunc((second / 60) - (60 * Math.trunc((second / 60) / 60)))
-  return second >= 3600 ? pad0(hours) + ':' + pad0(minAdjust) + ':' + pad0(sec) : pad0(min) + ':' + pad0(sec)
-}
-</script>
-
-<style lang="less" scoped>
-.aplayer-controller {
-  display: flex;
-  align-items: center;
-  position: relative;
-  .aplayer-time {
-    display: flex;
-    align-items: center;
-    position: relative;
-    height: 17px;
-    color: #999;
-    font-size: 11px;
-    padding-left: 7px;
-    .aplayer-volume-wrap {
-      margin-left: 4px;
-      margin-right: 4px;
-    }
-    .aplayer-icon {
-      cursor: pointer;
-      transition: all 0.2s ease;
-      margin-left: 4px;
-      &.inactive {
-        opacity: .3;
-      }
-      &.aplayer-icon-menu {
-        display: none;
-      }
-    }
-    .aplayer-volume-wrap + .aplayer-icon {
-      margin-left: 0;
-    }
-    &.aplayer-time-narrow {
-      .aplayer-icon-mode {
-        display: none;
-      }
-      .aplayer-icon-menu {
-        display: none;
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/api/aplayer/components/aplayer-icon.vue b/src/views/api/aplayer/components/aplayer-icon.vue
deleted file mode 100644
index b275bba..0000000
--- a/src/views/api/aplayer/components/aplayer-icon.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <img class="icon-svg" :src="svg" :style="style" />
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-
-const props = defineProps<{type: string}>()
-const svgModules = import.meta.glob('../assets/*.svg', { eager: true, import: 'default' }) as Record<string, string>
-
-const SVGs = Object.entries(svgModules).reduce((svgs: {[propName:string]: string}, [path, svgFile]) => {
-  const fileNameMatch = path.match(/^.*\/(.+?)\.svg$/)
-  if (fileNameMatch) {
-    svgs[fileNameMatch[1]] = svgFile
-  }
-  return svgs
-}, {})
-
-const svg = computed(() => SVGs[props.type])
-const style = computed(() => {
-  if (props.type === 'next') {
-    return { transform: 'rotate(180deg)' }
-  }
-})
-</script>
\ No newline at end of file
diff --git a/src/views/api/aplayer/components/aplayer-iconbutton.vue b/src/views/api/aplayer/components/aplayer-iconbutton.vue
deleted file mode 100644
index 099984a..0000000
--- a/src/views/api/aplayer/components/aplayer-iconbutton.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="aplayer-icon"
-  >
-    <player-icon :type="icon"/>
-  </button>
-</template>
-
-<script lang="ts" setup>
-import PlayerIcon from './aplayer-icon.vue'
-defineProps<{icon: string}>()
-</script>
-
-<style lang="less" scoped>
-.aplayer-icon {
-  width: 15px;
-  height: 15px;
-  border: none;
-  background-color: transparent;
-  outline: none;
-  cursor: pointer;
-  opacity: .8;
-  vertical-align: middle;
-  padding: 0;
-  font-size: 12px;
-  margin: 0;
-  display: inline;
-  &:hover {
-    opacity: 1;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/api/aplayer/components/aplayer-list.vue b/src/views/api/aplayer/components/aplayer-list.vue
deleted file mode 100644
index 0fc80a2..0000000
--- a/src/views/api/aplayer/components/aplayer-list.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <transition name="slide-v">
-    <div
-      class="aplayer-list"
-      :style="listHeightStyle"
-      ref="list"
-      v-show="show"
-    >
-      <ol ref="ol" :style="listHeightStyle">
-        <li
-          v-for="(aMusic, index) of musicList"
-          :key="index"
-          :class="{'aplayer-list-light': aMusic === currentMusic}"
-          @click="emit('selectsong', aMusic)"
-        >
-          <span class="aplayer-list-cur" :style="{background: theme}"></span>
-          <span class="aplayer-list-index">{{ index + 1}}</span>
-          <span class="aplayer-list-title">{{ aMusic.title || 'Untitled' }}</span>
-          <span class="aplayer-list-author">{{ aMusic.artist || 'Unknown' }}</span>
-        </li>
-      </ol>
-    </div>
-  </transition>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { MusicPlayerItem } from '@/model/api/music'
-
-const props = defineProps<{
-  show: boolean
-  currentMusic: MusicPlayerItem
-  musicList: MusicPlayerItem[]
-  theme?: string
-  listMaxHeight?: string
-}>()
-const emit = defineEmits(['selectsong'])
-const listHeightStyle = computed(() => {
-  return {
-    height: `${33 * props.musicList.length - 1}px`,
-    maxHeight: props.listMaxHeight || ''
-  }
-})
-</script>
-
-<style lang="less" scoped>
-.aplayer-list {
-  overflow: hidden;
-  &.slide-v-enter-active,
-  &.slide-v-leave-active {
-    transition: height 500ms ease;
-    will-change: height;
-  }
-  &.slide-v-enter,
-  &.slide-v-leave-to {
-    height: 0 !important;
-  }
-  ol {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow-y: auto;
-    &::-webkit-scrollbar {
-      width: 5px;
-    }
-    &::-webkit-scrollbar-track {
-      background-color: #f9f9f9;
-    }
-    &::-webkit-scrollbar-thumb {
-      border-radius: 3px;
-      background-color: #eee;
-    }
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: #ccc;
-    }
-    &:hover {
-      li.aplayer-list-light:not(:hover) {
-        background-color: inherit;
-        transition: inherit;
-      }
-    }
-    &:not(:hover) {
-      li.aplayer-list-light {
-        transition: background-color .6s ease;
-      }
-    }
-    li {
-      position: relative;
-      height: 32px;
-      line-height: 32px;
-      padding: 0 15px;
-      font-size: 12px;
-      border-top: 1px solid #e9e9e9;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      overflow: hidden;
-      margin: 0;
-      text-align: start;
-      display: flex;
-      &:first-child {
-        border-top: none;
-      }
-      &:hover {
-        background: #efefef;
-      }
-      &.aplayer-list-light {
-        background: #efefef;
-        .aplayer-list-cur {
-          display: inline-block;
-        }
-      }
-      .aplayer-list-cur {
-        display: none;
-        width: 3px;
-        height: 22px;
-        position: absolute;
-        left: 0;
-        top: 5px;
-        transition: background-color .3s;
-      }
-      .aplayer-list-index {
-        color: #666;
-        margin-right: 12px;
-      }
-      .aplayer-list-title {
-        flex-grow: 1;
-      }
-      .aplayer-list-author {
-        flex-shrink: 0;
-        color: #666;
-        float: right;
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/api/aplayer/components/aplayer-lrc.vue b/src/views/api/aplayer/components/aplayer-lrc.vue
deleted file mode 100644
index 5a10d5e..0000000
--- a/src/views/api/aplayer/components/aplayer-lrc.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div class="aplayer-lrc">
-    <div
-      class="aplayer-lrc-contents"
-      :style="transformStyle"
-    >
-      <p
-        v-for="(line, index) of lrcLines"
-        :key="index"
-        :class="{ 'aplayer-lrc-current': index === currentLineIndex }"
-      >
-        {{ line[1] }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, watch, ref } from 'vue'
-import { parseLrc } from '../utils'
-import { StatType } from '@/model/api/music'
-
-const props = defineProps<{
-  lrcSource: string
-  playStat: StatType
-}>()
-
-const currentLineIndex = ref(0)
-
-const lrcLines = computed(() => parseLrc(props.lrcSource))
-
-const transformStyle = computed(() => {
-  return {
-    transform: `translateY(${-currentLineIndex.value * 16}px)`,
-    webkitTransform: `translateY(${-currentLineIndex.value * 16}px)`,
-  }
-})
-
-watch(() => props.playStat.playedTime, (playedTime: number) => {
-  for (let i = 0; i < lrcLines.value.length; i++) {
-    const line = lrcLines.value[i]
-    const nextLine = lrcLines.value[i + 1]
-    if (playedTime >= line[0] && (!nextLine || playedTime < nextLine[0])) {
-      currentLineIndex.value = i
-    }
-  }
-})
-</script>
-<style lang="less" scoped>
-@import "../less/variables";
-.aplayer-lrc {
-  position: relative;
-  height: @lrc-height;
-  text-align: center;
-  overflow: hidden;
-  margin-bottom: 7px;
-  &:before {
-    position: absolute;
-    top: 0;
-    z-index: 1;
-    display: block;
-    overflow: hidden;
-    width: 100%;
-    height: 10%;
-    content: ' ';
-    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
-    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
-  }
-  &:after {
-    position: absolute;
-    bottom: 0;
-    z-index: 1;
-    display: block;
-    overflow: hidden;
-    width: 100%;
-    height: 33%;
-    content: ' ';
-    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
-    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ccffffff', GradientType=0);
-  }
-  p {
-    font-size: 12px;
-    color: #666;
-    line-height: 16px;
-    height: 16px;
-    padding: 0;
-    margin: 0;
-    transition: all 0.5s ease-out;
-    opacity: 0.4;
-    overflow: hidden;
-    &.aplayer-lrc-current {
-      opacity: 1;
-      overflow: visible;
-      height: initial;
-    }
-  }
-  .aplayer-lrc-contents {
-    width: 100%;
-    transition: all 0.5s ease-out;
-    user-select: text;
-    cursor: default;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/api/aplayer/components/aplayer-thumbnail.vue b/src/views/api/aplayer/components/aplayer-thumbnail.vue
deleted file mode 100644
index 3f57729..0000000
--- a/src/views/api/aplayer/components/aplayer-thumbnail.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-  <div
-    class="aplayer-pic"
-    :style="{backgroundColor: theme}"
-    @mousedown="onDragBegin"
-    @click="onClick"
-  >
-    <img v-if="pic" ref="thumbnailPic" :src="pic" @load="imgLoad" />
-    <div class="aplayer-button" :class="playing ? 'aplayer-pause' : 'aplayer-play'">
-      <icon-button
-        :icon="playing ? 'pause' : 'play'"
-        :class="playing ? 'aplayer-icon-pause' : 'aplayer-icon-play'"
-      />
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref, watch } from 'vue'
-import IconButton from './aplayer-iconbutton.vue'
-import { adaptingThemeColor } from '../utils'
-
-const props = withDefaults(defineProps<{
-  pic?: string
-  theme: string
-  playing: boolean
-  enableDrag: boolean
-}>(), {
-  playing: false,
-  enableDrag: false
-})
-
-const emit = defineEmits(['dragbegin', 'dragging', 'dragend', 'toggleplay', 'adaptingTheme'])
-
-const hasMovedSinceMouseDown = ref(false)
-const dragStartX = ref(0)
-const dragStartY = ref(0)
-const thumbnailPic = ref<unknown>(null)
-
-const onDragBegin = (e: MouseEvent) => {
-  if (props.enableDrag) {
-    hasMovedSinceMouseDown.value = false
-    emit('dragbegin')
-    dragStartX.value = e.clientX
-    dragStartY.value = e.clientY
-    document.addEventListener('mousemove', onDocumentMouseMove)
-    document.addEventListener('mouseup', onDocumentMouseUp)
-  }
-}
-const onDocumentMouseMove = (e: MouseEvent) => {
-  hasMovedSinceMouseDown.value = true
-  emit('dragging', {offsetLeft: e.clientX - dragStartX.value, offsetTop: e.clientY - dragStartY.value})
-}
-const onDocumentMouseUp = () => {
-  document.removeEventListener('mouseup', onDocumentMouseUp)
-  document.removeEventListener('mousemove', onDocumentMouseMove)
-  emit('dragend')
-}
-const onClick = () => {
-  if (!hasMovedSinceMouseDown.value) {
-    emit('toggleplay')
-  }
-}
-const imgLoad = () => {
-  const color = adaptingThemeColor(<HTMLImageElement>thumbnailPic.value)
-  emit('adaptingTheme', `rgb(${color.r},${color.g},${color.b})`)
-}
-watch(() => props.pic, (pic?: string) => {
-  if (!pic) emit('adaptingTheme', null)
-}, { immediate: true })
-</script>
-
-<style lang="less" scoped>
-@import "../less/variables";
-.aplayer-float {
-  .aplayer-pic:active {
-    cursor: move;
-  }
-}
-.aplayer-pic {
-  flex-shrink: 0;
-  position: relative;
-  height: @aplayer-height;
-  width: @aplayer-height;
-  transition: all 0.3s ease;
-  cursor: pointer;
-  &:hover {
-    .aplayer-button {
-      opacity: 1;
-    }
-  }
-  .aplayer-button {
-    position: absolute;
-    border-radius: 50%;
-    opacity: 0.8;
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-    background: rgba(0, 0, 0, 0.2);
-    transition: all 0.1s ease;
-  }
-  .aplayer-play {
-    width: 26px;
-    height: 26px;
-    border: 2px solid #fff;
-    bottom: 50%;
-    right: 50%;
-    margin: 0 -15px -15px 0;
-    .aplayer-icon-play {
-      position: absolute;
-      top: 3px;
-      left: 4px;
-      height: 20px;
-      width: 20px;
-    }
-  }
-  .aplayer-pause {
-    width: 16px;
-    height: 16px;
-    border: 2px solid #fff;
-    bottom: 4px;
-    right: 4px;
-    .aplayer-icon-pause {
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      height: 12px;
-      width: 12px;
-    }
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/api/aplayer/less/variables.less b/src/views/api/aplayer/less/variables.less
deleted file mode 100644
index 02c0268..0000000
--- a/src/views/api/aplayer/less/variables.less
+++ /dev/null
@@ -1,3 +0,0 @@
-@aplayer-height: 66px;
-@lrc-height: 30px;
-@aplayer-height-lrc: @aplayer-height + @lrc-height - 6;
diff --git a/src/views/api/aplayer/music-player-panel.vue b/src/views/api/aplayer/music-player-panel.vue
new file mode 100644
index 0000000..7b69937
--- /dev/null
+++ b/src/views/api/aplayer/music-player-panel.vue
@@ -0,0 +1,1005 @@
+<template>
+  <div class="music-player-panel" :style="panelBgStyle">
+    <!-- 上半部分：唱片 + 歌曲信息 -->
+    <div class="player-main">
+      <!-- 左侧：唱片盘面 + 圆形频谱 -->
+      <div class="disc-section">
+        <div class="disc-container">
+          <!-- 唱片 -->
+          <div class="disc-outer" :class="{ playing: isPlaying }">
+            <canvas ref="visualizerCanvas" class="visualizer-canvas"></canvas>
+            <div class="vinyl-grooves"></div>
+            <div class="disc-cover-wrapper">
+              <img v-if="currentMusic?.pic" ref="coverImg" :src="currentMusic.pic" class="disc-cover" crossorigin="anonymous" @load="onCoverLoad" />
+              <div v-else class="disc-cover"></div>
+            </div>
+            <div class="disc-center-dot"></div>
+          </div>
+          <!-- 唱针 SVG -->
+          <svg class="needle" :class="{ playing: isPlaying }" viewBox="0 0 120 200" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="60" cy="16" r="14" fill="#555" stroke="#777" stroke-width="2"/>
+            <circle cx="60" cy="16" r="6" fill="#888" stroke="#aaa" stroke-width="1"/>
+            <rect x="57" y="16" width="6" height="120" rx="3" fill="url(#armGradient)"/>
+            <rect x="55" y="130" width="10" height="30" rx="2" fill="#444" stroke="#666" stroke-width="1"/>
+            <rect x="58" y="158" width="4" height="14" rx="1" fill="#333"/>
+            <circle cx="60" cy="174" r="3" fill="#222" stroke="#555" stroke-width="1"/>
+            <defs>
+              <linearGradient id="armGradient" x1="0" y1="0" x2="1" y2="0">
+                <stop offset="0%" stop-color="#777"/>
+                <stop offset="50%" stop-color="#bbb"/>
+                <stop offset="100%" stop-color="#777"/>
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+      </div>
+      <!-- 右侧：歌曲信息 + 歌词 -->
+      <div class="info-section">
+        <div class="song-info">
+          <h2 class="song-title">{{ currentMusic?.title || 'Untitled' }}</h2>
+          <div class="song-meta">
+            <span v-if="currentMusic?.album">专辑：{{ currentMusic.album }}</span>
+            <span v-if="currentMusic?.artist">歌手：{{ currentMusic.artist }}</span>
+          </div>
+        </div>
+        <div class="lyrics-area" ref="lyricsContainer">
+          <div class="lyrics-content" :style="lyricsTransformStyle">
+            <p
+              v-for="(line, index) in lrcLines"
+              :key="index"
+              :class="{ 'current-line': index === currentLineIndex }"
+            >{{ line[1] || '&nbsp;' }}</p>
+          </div>
+          <div v-if="!lrcLines.length" class="no-lyrics">暂无歌词</div>
+        </div>
+      </div>
+    </div>
+    <!-- 进度条 -->
+    <div class="progress-section">
+      <span class="time-label">{{ formatTime(playedTime) }}</span>
+      <div class="progress-bar" ref="progressBar" @mousedown="onProgressMouseDown">
+        <div class="progress-loaded" :style="{ width: loadProgress + '%' }"></div>
+        <div class="progress-played" :style="{ width: playProgress + '%' }">
+          <span class="progress-thumb"></span>
+        </div>
+      </div>
+      <span class="time-label">{{ formatTime(duration) }}</span>
+    </div>
+    <!-- 播放控制 -->
+    <div class="controls-section">
+      <button class="ctrl-btn" :class="{ active: shuffle }" @click="emit('toggleShuffle')" title="随机播放">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>
+      </button>
+      <button class="ctrl-btn" @click="emit('prev')" title="上一首">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+      </button>
+      <button class="ctrl-btn ctrl-btn-play" @click="emit('toggle')" :title="isPlaying ? '暂停' : '播放'">
+        <svg v-if="isPlaying" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+        <svg v-else viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+      </button>
+      <button class="ctrl-btn" @click="emit('next')" title="下一首">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
+      </button>
+      <button class="ctrl-btn" :class="{ active: repeatMode !== 'no_repeat' }" @click="emit('nextMode')" :title="repeatTitle">
+        <svg v-if="repeatMode === 'repeat_one'" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z"/></svg>
+        <svg v-else viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg>
+      </button>
+      <div class="volume-control">
+        <button class="ctrl-btn" @click="emit('toggleMute')" :title="muted ? '取消静音' : '静音'">
+          <svg v-if="muted" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>
+          <svg v-else-if="volume > 0.5" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
+          <svg v-else viewBox="0 0 24 24" fill="currentColor"><path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/></svg>
+        </button>
+        <input type="range" class="volume-slider" min="0" max="1" step="0.01" :value="volume" @input="onVolumeInput" />
+      </div>
+    </div>
+    <!-- 播放列表 -->
+    <div class="playlist-section" v-if="list.length > 1">
+      <div class="playlist-header" @click="playlistVisible = !playlistVisible">
+        <span>播放列表 ({{ list.length }})</span>
+        <span class="playlist-toggle">{{ playlistVisible ? '收起' : '展开' }}</span>
+      </div>
+      <transition name="slide">
+        <div class="playlist-body" v-show="playlistVisible">
+          <div
+            v-for="(item, index) in list"
+            :key="index"
+            class="playlist-item"
+            :class="{ active: item === currentMusic }"
+            @click="emit('selectSong', item)"
+          >
+            <span class="playlist-index">{{ index + 1 }}</span>
+            <span class="playlist-title">{{ item.title || 'Untitled' }}</span>
+            <span class="playlist-artist">{{ item.artist || '' }}</span>
+          </div>
+        </div>
+      </transition>
+    </div>
+    <!-- 隐藏的audio -->
+    <audio ref="audioEl"></audio>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, reactive, nextTick } from 'vue'
+import { MusicPlayerItem, StatType } from '@/model/api/music'
+import { parseLrc, getElementViewLeft, adaptingThemeColor } from './utils'
+import Hls from 'hls.js'
+
+const props = defineProps<{
+  music: MusicPlayerItem
+  list: MusicPlayerItem[]
+  autoplay?: boolean
+}>()
+
+const emit = defineEmits(['update:music', 'toggle', 'prev', 'next', 'toggleShuffle', 'nextMode', 'toggleMute', 'selectSong', 'play'])
+
+const audioEl = ref<HTMLAudioElement | null>(null)
+const progressBar = ref<HTMLDivElement | null>(null)
+const visualizerCanvas = ref<HTMLCanvasElement | null>(null)
+const coverImg = ref<HTMLImageElement | null>(null)
+const playlistVisible = ref(false)
+const themeColor = ref<{ r: number; g: number; b: number } | null>(null)
+
+const panelBgStyle = computed(() => {
+  if (!themeColor.value) {
+    return { background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)' }
+  }
+  const { r, g, b } = themeColor.value
+  // 将提取的颜色变暗，确保背景不会太亮
+  const darken = (v: number) => Math.floor(v * 0.3)
+  const dr = darken(r), dg = darken(g), db = darken(b)
+  const dr2 = Math.floor(r * 0.15), dg2 = Math.floor(g * 0.15), db2 = Math.floor(b * 0.15)
+  return {
+    background: `linear-gradient(135deg, rgb(${dr2}, ${dg2}, ${db2}) 0%, rgb(${dr}, ${dg}, ${db}) 50%, rgb(${dr2}, ${dg2}, ${db2}) 100%)`
+  }
+})
+
+function onCoverLoad() {
+  if (!coverImg.value) return
+  try {
+    const color = adaptingThemeColor(coverImg.value)
+    themeColor.value = color
+  } catch {
+    themeColor.value = null
+  }
+}
+
+const isPlaying = ref(false)
+const shuffle = ref(false)
+const repeatMode = ref<'no_repeat' | 'repeat_one' | 'repeat_all'>('no_repeat')
+const muted = ref(false)
+const volume = ref(0.5)
+const currentLineIndex = ref(0)
+const hls = ref<Hls | null>(null)
+
+const playStat = reactive<StatType>({
+  duration: 0,
+  loadedTime: 0,
+  playedTime: 0,
+})
+
+const internalMusic = ref<MusicPlayerItem>(props.music)
+const currentMusic = computed({
+  get: () => internalMusic.value,
+  set: (val) => {
+    internalMusic.value = val
+    emit('update:music', val)
+  },
+})
+
+const playedTime = computed(() => playStat.playedTime)
+const duration = computed(() => playStat.duration)
+const loadProgress = computed(() => playStat.duration ? (playStat.loadedTime / playStat.duration) * 100 : 0)
+const playProgress = computed(() => playStat.duration ? (playStat.playedTime / playStat.duration) * 100 : 0)
+
+const lrcLines = computed(() => {
+  if (!currentMusic.value?.lrc) return []
+  return parseLrc(currentMusic.value.lrc)
+})
+
+const lyricsContainer = ref<HTMLDivElement | null>(null)
+const lyricsTransformStyle = computed(() => {
+  const lineHeight = 34
+  const containerHeight = lyricsContainer.value?.clientHeight || 300
+  const centerOffset = Math.floor(containerHeight / 2 / lineHeight)
+  const offset = Math.max(0, currentLineIndex.value - centerOffset)
+  return { transform: `translateY(-${offset * lineHeight}px)` }
+})
+
+const repeatTitle = computed(() => {
+  if (repeatMode.value === 'no_repeat') return '顺序播放'
+  if (repeatMode.value === 'repeat_one') return '单曲循环'
+  return '列表循环'
+})
+
+// Audio Visualizer
+let audioCtx: AudioContext | null = null
+let analyser: AnalyserNode | null = null
+let source: MediaElementAudioSourceNode | null = null
+let animationId: number | null = null
+let dataArray: Uint8Array<ArrayBuffer> | null = null
+let visualizerConnected = false
+
+function initVisualizer(audio: HTMLAudioElement) {
+  if (visualizerConnected) return
+  audioCtx = new AudioContext()
+  analyser = audioCtx.createAnalyser()
+  analyser.fftSize = 256
+  source = audioCtx.createMediaElementSource(audio)
+  source.connect(analyser)
+  analyser.connect(audioCtx.destination)
+  dataArray = new Uint8Array(analyser.frequencyBinCount)
+  visualizerConnected = true
+}
+
+function drawVisualizer() {
+  if (!visualizerCanvas.value || !analyser || !dataArray) return
+  const canvas = visualizerCanvas.value
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  const width = canvas.width
+  const height = canvas.height
+  if (width === 0 || height === 0) return
+
+  analyser.getByteFrequencyData(dataArray)
+  ctx.clearRect(0, 0, width, height)
+
+  const centerX = width / 2
+  const centerY = height / 2
+  // 封面占 disc 的 52% + 6px border, 频谱从封面外边缘开始
+  const discRadius = Math.min(width, height) * 0.30
+  const barCount = dataArray.length
+  const maxBarLength = Math.min(width, height) * 0.18
+
+  for (let i = 0; i < barCount; i++) {
+    const value = dataArray[i]
+    const barLength = (value / 255) * maxBarLength
+    if (barLength < 1) continue
+    const angle = (i / barCount) * Math.PI * 2 - Math.PI / 2
+
+    const startX = centerX + Math.cos(angle) * (discRadius + 2)
+    const startY = centerY + Math.sin(angle) * (discRadius + 2)
+    const endX = centerX + Math.cos(angle) * (discRadius + 2 + barLength)
+    const endY = centerY + Math.sin(angle) * (discRadius + 2 + barLength)
+
+    const ratio = i / barCount
+    const r = Math.floor(100 + ratio * 155)
+    const g = Math.floor(180 - ratio * 100)
+    const b = Math.floor(230 + ratio * 25)
+    const alpha = 0.4 + (value / 255) * 0.6
+
+    ctx.beginPath()
+    ctx.moveTo(startX, startY)
+    ctx.lineTo(endX, endY)
+    ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`
+    ctx.lineWidth = Math.max(1.5, (Math.PI * 2 * discRadius) / barCount * 0.7)
+    ctx.lineCap = 'round'
+    ctx.stroke()
+  }
+
+  animationId = requestAnimationFrame(drawVisualizer)
+}
+
+function startVisualizer() {
+  if (animationId) return
+  if (audioCtx?.state === 'suspended') audioCtx.resume()
+  drawVisualizer()
+}
+
+function stopVisualizer() {
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+    animationId = null
+  }
+}
+
+// Audio controls
+function play() {
+  const media = audioEl.value
+  if (!media) return
+  media.play()
+}
+
+function pause() {
+  audioEl.value?.pause()
+}
+
+function toggle() {
+  if (isPlaying.value) pause()
+  else play()
+}
+
+function switchTrack(index: number) {
+  const normalizedIndex = ((index % props.list.length) + props.list.length) % props.list.length
+  currentMusic.value = props.list[normalizedIndex]
+  nextTick(() => play())
+}
+
+function onProgressMouseDown(e: MouseEvent) {
+  if (!progressBar.value || !audioEl.value) return
+  const barWidth = progressBar.value.clientWidth
+  let pct = (e.clientX - getElementViewLeft(progressBar.value)) / barWidth
+  pct = Math.max(0, Math.min(1, pct))
+  if (!isNaN(audioEl.value.duration)) {
+    audioEl.value.currentTime = audioEl.value.duration * pct
+  }
+
+  const onMove = (ev: MouseEvent) => {
+    let p = (ev.clientX - getElementViewLeft(progressBar.value!)) / barWidth
+    p = Math.max(0, Math.min(1, p))
+    if (!isNaN(audioEl.value!.duration)) {
+      audioEl.value!.currentTime = audioEl.value!.duration * p
+    }
+  }
+  const onUp = () => {
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup', onUp)
+  }
+  document.addEventListener('mousemove', onMove)
+  document.addEventListener('mouseup', onUp)
+}
+
+function onVolumeInput(e: Event) {
+  const val = parseFloat((e.target as HTMLInputElement).value)
+  volume.value = val
+  if (audioEl.value) {
+    audioEl.value.volume = val
+    if (val > 0) {
+      audioEl.value.muted = false
+      muted.value = false
+    }
+  }
+}
+
+function formatTime(sec: number) {
+  if (isNaN(sec)) return '00:00'
+  const m = Math.floor(sec / 60)
+  const s = Math.floor(sec % 60)
+  return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+}
+
+function initAudio() {
+  const media = audioEl.value
+  if (!media) return
+
+  media.volume = volume.value
+
+  media.addEventListener('play', () => {
+    isPlaying.value = true
+    emit('play')
+  })
+  media.addEventListener('pause', () => { isPlaying.value = false })
+  media.addEventListener('timeupdate', () => {
+    playStat.playedTime = media.currentTime
+  })
+  media.addEventListener('durationchange', () => {
+    if (media.duration !== 1) playStat.duration = media.duration
+  })
+  media.addEventListener('progress', () => {
+    if (media.buffered.length) {
+      playStat.loadedTime = media.buffered.end(media.buffered.length - 1)
+    }
+  })
+  media.addEventListener('ended', () => {
+    const currentIndex = props.list.indexOf(currentMusic.value)
+    if (repeatMode.value === 'repeat_one') {
+      media.currentTime = 0
+      play()
+    } else if (repeatMode.value === 'repeat_all') {
+      switchTrack(currentIndex + 1)
+    } else {
+      if (currentIndex < props.list.length - 1) {
+        switchTrack(currentIndex + 1)
+      }
+    }
+  })
+  media.addEventListener('volumechange', () => {
+    volume.value = media.volume
+    muted.value = media.muted
+  })
+
+  loadSource(currentMusic.value)
+}
+
+function loadSource(music: MusicPlayerItem) {
+  const media = audioEl.value
+  const src = music.src
+  if (!media || !src) return
+
+  if (/\.m3u8(?=[#?]|$)/.test(src)) {
+    if (media.canPlayType('application/x-mpegURL') || media.canPlayType('application/vnd.apple.mpegURL')) {
+      media.src = src
+    } else if (Hls.isSupported()) {
+      if (!hls.value) hls.value = new Hls()
+      hls.value.loadSource(src)
+      hls.value.attachMedia(media)
+    } else {
+      media.src = src
+    }
+  } else {
+    media.src = src
+  }
+}
+
+watch(currentMusic, (music) => {
+  if (!music) return
+  loadSource(music)
+  currentLineIndex.value = 0
+  playStat.playedTime = 0
+  playStat.duration = 0
+  playStat.loadedTime = 0
+})
+
+watch(() => props.music, (music) => {
+  internalMusic.value = music
+})
+
+watch(() => playStat.playedTime, (time) => {
+  const lines = lrcLines.value
+  for (let i = 0; i < lines.length; i++) {
+    const nextLine = lines[i + 1]
+    if (time >= lines[i][0] && (!nextLine || time < nextLine[0])) {
+      currentLineIndex.value = i
+      break
+    }
+  }
+})
+
+watch(isPlaying, (playing) => {
+  if (playing) startVisualizer()
+  else stopVisualizer()
+})
+
+watch(() => props.list, () => {
+  playlistVisible.value = props.list.length > 1
+}, { immediate: true })
+
+let resizeObserver: ResizeObserver | null = null
+
+function resizeCanvas() {
+  const canvas = visualizerCanvas.value
+  if (!canvas) return
+  const parent = canvas.parentElement
+  if (!parent) return
+  const rect = parent.getBoundingClientRect()
+  if (rect.width === 0 || rect.height === 0) return
+  canvas.width = rect.width
+  canvas.height = rect.height
+}
+
+onMounted(() => {
+  initAudio()
+  if (props.autoplay) {
+    nextTick(() => play())
+  }
+
+  nextTick(() => {
+    if (audioEl.value) {
+      initVisualizer(audioEl.value)
+    }
+    resizeCanvas()
+  })
+
+  resizeObserver = new ResizeObserver(() => {
+    resizeCanvas()
+    if (isPlaying.value && visualizerConnected && !animationId) {
+      startVisualizer()
+    }
+  })
+  if (visualizerCanvas.value?.parentElement) {
+    resizeObserver.observe(visualizerCanvas.value.parentElement)
+  }
+})
+
+onBeforeUnmount(() => {
+  stopVisualizer()
+  resizeObserver?.disconnect()
+  hls.value?.destroy()
+})
+
+defineExpose({
+  audio: audioEl,
+  isPlaying,
+  currentMusic,
+  playStat,
+  play,
+  pause,
+  toggle,
+  switch: switchTrack,
+  shuffle,
+  repeatMode,
+  muted,
+  volume,
+})
+</script>
+
+<style lang="less" scoped>
+// === 颜色变量 ===
+@color-primary: #64c8ff;
+@color-primary-purple: #a78bfa;
+@color-white: #fff;
+@color-text: #e0e0e0;
+@color-text-secondary: #aaa;
+@color-text-muted: #888;
+@color-text-dim: #555;
+@color-bg-default: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+@color-vinyl-dark: #111;
+@color-vinyl-groove: #222;
+@color-vinyl-groove-alt: #1a1a1a;
+@color-vinyl-border: #333;
+
+// === 尺寸变量 ===
+@disc-section-width: 420px;
+@disc-size: 360px;
+@disc-cover-ratio: 52%;
+@disc-cover-border: 6px;
+@needle-width: 80px;
+@needle-height: 134px;
+@lyrics-line-height: 34px;
+@ctrl-btn-size: 36px;
+@ctrl-btn-play-size: 48px;
+@playlist-max-height: 140px;
+@info-max-width: 380px;
+
+// === 混合 ===
+.text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.abs-full() {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.abs-center() {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.flex-center() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.music-player-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: @color-bg-default;
+  color: @color-text;
+  padding: 24px 30px;
+  overflow: hidden;
+  transition: background 1.5s ease;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+// === 上半部分 ===
+.player-main {
+  display: flex;
+  gap: 40px;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+// === 唱片区域 ===
+.disc-section {
+  flex-shrink: 0;
+  width: @disc-section-width;
+  .flex-center();
+}
+
+.disc-container {
+  position: relative;
+  width: @disc-size;
+  height: @disc-size;
+}
+
+// === 唱针 ===
+.needle {
+  position: absolute;
+  top: -16px;
+  right: -10px;
+  width: @needle-width;
+  height: @needle-height;
+  z-index: 10;
+  transform-origin: 50% 12%;
+  transform: rotate(-30deg);
+  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
+
+  &.playing {
+    transform: rotate(5deg);
+  }
+}
+
+// === 唱片 ===
+.disc-outer {
+  position: relative;
+  width: @disc-size;
+  height: @disc-size;
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 50%,
+    @color-vinyl-dark 0%, @color-vinyl-dark 28%,
+    @color-vinyl-groove-alt 28.5%, @color-vinyl-groove 29%, @color-vinyl-groove-alt 29.5%,
+    @color-vinyl-groove 32%, @color-vinyl-groove-alt 32.5%, @color-vinyl-groove 33%,
+    @color-vinyl-groove-alt 35%, @color-vinyl-groove 35.5%, @color-vinyl-groove-alt 36%,
+    @color-vinyl-groove 38%, @color-vinyl-groove-alt 38.5%, @color-vinyl-groove 39%,
+    @color-vinyl-groove-alt 41%, @color-vinyl-groove 41.5%,
+    @color-vinyl-groove-alt 60%, @color-vinyl-groove 60.5%, @color-vinyl-groove-alt 61%,
+    @color-vinyl-groove 63%, @color-vinyl-groove-alt 63.5%, @color-vinyl-groove 64%,
+    @color-vinyl-groove-alt 66%, @color-vinyl-groove 66.5%, @color-vinyl-groove-alt 67%,
+    @color-vinyl-groove 69%, @color-vinyl-groove-alt 69.5%, @color-vinyl-groove 70%,
+    @color-vinyl-groove-alt 72%, @color-vinyl-groove 72.5%, @color-vinyl-groove-alt 73%,
+    @color-vinyl-groove 75%, @color-vinyl-groove-alt 75.5%, @color-vinyl-groove 76%,
+    @color-vinyl-groove-alt 78%, @color-vinyl-groove 78.5%, @color-vinyl-groove-alt 79%,
+    @color-vinyl-groove 81%, @color-vinyl-groove-alt 81.5%, @color-vinyl-groove 82%,
+    @color-vinyl-groove-alt 84%, @color-vinyl-groove 84.5%, @color-vinyl-groove-alt 85%,
+    @color-vinyl-groove 87%, @color-vinyl-groove-alt 87.5%, @color-vinyl-groove 88%,
+    @color-vinyl-groove-alt 90%, @color-vinyl-groove 90.5%, @color-vinyl-groove-alt 91%,
+    @color-vinyl-groove 93%, @color-vinyl-groove-alt 93.5%, @color-vinyl-groove 94%,
+    @color-vinyl-groove-alt 96%, @color-vinyl-groove 96.5%, @color-vinyl-groove-alt 97%,
+    @color-vinyl-border 98%, @color-vinyl-groove 100%
+  );
+  box-shadow: 0 0 0 4px @color-vinyl-border, 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.3);
+  animation: disc-spin 20s linear infinite;
+  animation-play-state: paused;
+
+  &.playing {
+    animation-play-state: running;
+  }
+}
+
+.vinyl-grooves {
+  .abs-full();
+  border-radius: 50%;
+  background: repeating-radial-gradient(
+    circle at center,
+    transparent 0px,
+    transparent 2px,
+    rgba(255, 255, 255, 0.02) 2.5px,
+    transparent 3px
+  );
+  pointer-events: none;
+}
+
+.visualizer-canvas {
+  .abs-full();
+  border-radius: 50%;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.disc-cover-wrapper {
+  .abs-center();
+  width: @disc-cover-ratio;
+  height: @disc-cover-ratio;
+  border-radius: 50%;
+  overflow: hidden;
+  z-index: 2;
+  border: @disc-cover-border solid @color-vinyl-border;
+  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
+}
+
+.disc-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+  &-empty {
+    background: radial-gradient(circle, #2a2a2a 30%, @color-vinyl-dark 70%);
+  }
+}
+
+.disc-center-dot {
+  .abs-center();
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #666 0%, @color-vinyl-border 60%, @color-vinyl-groove 100%);
+  border: 2px solid @color-dim-border;
+  z-index: 4;
+}
+
+@color-dim-border: #555;
+
+@keyframes disc-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+// === 歌曲信息 ===
+.info-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  max-width: @info-max-width;
+}
+
+.song-info {
+  margin-bottom: 20px;
+  flex-shrink: 0;
+  min-height: 60px;
+}
+
+.song-title {
+  font-size: 22px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: @color-white;
+  .text-ellipsis();
+}
+
+.song-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-size: 13px;
+  color: @color-text-secondary;
+}
+
+// === 歌词 ===
+.lyrics-area {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 82%, transparent 100%);
+  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 82%, transparent 100%);
+}
+
+.lyrics-content {
+  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
+
+  p {
+    line-height: @lyrics-line-height;
+    height: @lyrics-line-height;
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.35);
+    transition: all 0.4s ease;
+    .text-ellipsis();
+
+    &.current-line {
+      color: @color-white;
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+}
+
+.no-lyrics {
+  .flex-center();
+  height: 100%;
+  color: @color-text-dim;
+  font-size: 14px;
+}
+
+// === 进度条 ===
+.progress-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 0 6px 0;
+  flex-shrink: 0;
+}
+
+.time-label {
+  font-size: 12px;
+  color: @color-text-muted;
+  min-width: 42px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  position: relative;
+  cursor: pointer;
+
+  &:hover .progress-thumb {
+    opacity: 1;
+  }
+}
+
+.progress-loaded {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 2px;
+  transition: width 0.3s;
+}
+
+.progress-played {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: linear-gradient(90deg, @color-primary, @color-primary-purple);
+  border-radius: 2px;
+}
+
+.progress-thumb {
+  position: absolute;
+  right: -5px;
+  top: -3px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: @color-white;
+  box-shadow: 0 0 6px rgba(100, 200, 255, 0.8);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+// === 控制按钮 ===
+.controls-section {
+  .flex-center();
+  gap: 16px;
+  padding: 6px 0 10px 0;
+  flex-shrink: 0;
+}
+
+.ctrl-btn {
+  width: @ctrl-btn-size;
+  height: @ctrl-btn-size;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  .flex-center();
+  border-radius: 50%;
+  transition: all 0.2s;
+  padding: 8px;
+  color: rgba(255, 255, 255, 0.5);
+
+  &:hover {
+    color: @color-white;
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  &.active {
+    color: @color-primary;
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.ctrl-btn-play {
+    width: @ctrl-btn-play-size;
+    height: @ctrl-btn-play-size;
+    background: rgba(100, 200, 255, 0.15);
+    color: @color-white;
+    padding: 12px;
+    border: 1px solid rgba(100, 200, 255, 0.3);
+
+    &:hover {
+      background: rgba(100, 200, 255, 0.3);
+    }
+  }
+}
+
+.volume-control {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+}
+
+.volume-slider {
+  width: 70px;
+  height: 3px;
+  accent-color: @color-primary;
+  cursor: pointer;
+}
+
+// === 播放列表 ===
+.playlist-section {
+  flex-shrink: 0;
+  margin-top: 6px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.playlist-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  cursor: pointer;
+  font-size: 13px;
+  color: @color-text-muted;
+
+  &:hover {
+    color: #ccc;
+  }
+}
+
+.playlist-toggle {
+  font-size: 12px;
+  color: @color-text-dim;
+}
+
+.playlist-body {
+  max-height: @playlist-max-height;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 2px;
+  }
+}
+
+.playlist-item {
+  display: flex;
+  align-items: center;
+  padding: 5px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.2s;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  &.active {
+    background: rgba(100, 200, 255, 0.12);
+    color: @color-primary;
+
+    .playlist-index {
+      color: @color-primary;
+    }
+  }
+}
+
+.playlist-index {
+  width: 24px;
+  text-align: center;
+  color: @color-text-dim;
+  flex-shrink: 0;
+}
+
+.playlist-title {
+  flex: 1;
+  .text-ellipsis();
+}
+
+.playlist-artist {
+  color: @color-text-dim;
+  margin-left: 12px;
+  flex-shrink: 0;
+  font-size: 12px;
+}
+
+// === 过渡动画 ===
+.slide-enter-active, .slide-leave-active {
+  transition: all 0.3s ease;
+  max-height: @playlist-max-height;
+  overflow: hidden;
+}
+.slide-enter-from, .slide-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+</style>
diff --git a/src/views/api/aplayer/vue-aplayer.vue b/src/views/api/aplayer/vue-aplayer.vue
deleted file mode 100644
index 1172036..0000000
--- a/src/views/api/aplayer/vue-aplayer.vue
+++ /dev/null
@@ -1,834 +0,0 @@
-<template>
-  <div
-    class="aplayer"
-    :class="{
-      'aplayer-narrow': mini,
-      'aplayer-withlist' : !mini && list.length > 0,
-      'aplayer-withlrc': !mini && (!!$slots.display || showLrc),
-      'aplayer-float': isFloatMode,
-      'aplayer-loading': isPlaying && isLoading
-    }"
-    :style="floatStyleObj"
-  >
-    <div class="aplayer-body">
-      <thumbnail
-        :pic="currentMusic.pic"
-        :playing="thumbnailPlaying"
-        :enable-drag="isFloatMode"
-        :theme="currentMusic.theme || theme"
-        @toggleplay="toggle"
-        @dragbegin="onDragBegin"
-        @dragging="onDragAround"
-        @adaptingTheme="setSelfAdaptingTheme"
-      />
-      <div class="aplayer-info" v-show="!mini">
-        <div class="aplayer-music">
-          <span class="aplayer-title">{{ currentMusic.title || 'Untitled' }}</span>
-          <span class="aplayer-author">{{ currentMusic.artist || currentMusic.author || 'Unknown' }}</span>
-        </div>
-        <slot name="display" :current-music="currentMusic" :play-stat="playStat">
-          <lyrics :lrc-source="currentMusic.lrc" :play-stat="playStat" v-if="showLrc && currentMusic.lrc" />
-        </slot>
-        <controls
-          :shuffle="shouldShuffle"
-          :repeat="repeatMode"
-          :stat="playStat"
-          :volume="audioVolume"
-          :muted="isAudioMuted"
-          :theme="currentTheme"
-          :showList="showList"
-          :isMobile="isMobile"
-          @toggleshuffle="shouldShuffle = !shouldShuffle"
-          @togglelist="showList = !showList"
-          @togglemute="toggleMute"
-          @setvolume="setAudioVolume"
-          @dragbegin="onProgressDragBegin"
-          @dragend="onProgressDragEnd"
-          @dragging="onProgressDragging"
-          @nextmode="setNextMode"
-        />
-      </div>
-    </div>
-    <audio ref="audio"></audio>
-    <music-list
-      :show="showList && !mini"
-      :current-music="currentMusic"
-      :music-list="list"
-      :play-index="playIndex"
-      :listMaxHeight="listMaxHeight"
-      :theme="currentTheme"
-      @selectsong="onSelectSong"
-    />
-  </div>
-</template>
-<script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
-import type { PropType } from 'vue'
-import Hls from 'hls.js'
-import type { MusicPlayerItem, StatType } from '@/model/api/music'
-import Thumbnail from './components/aplayer-thumbnail.vue'
-import MusicList from './components/aplayer-list.vue'
-import Controls from './components/aplayer-controller.vue'
-import Lyrics from './components/aplayer-lrc.vue'
-import { warn } from './utils'
-
-defineOptions({
-  name: 'APlayer',
-})
-
-interface PlayerMusicItem extends MusicPlayerItem {
-  author?: string
-  theme?: string
-  url?: string
-}
-
-interface DragOffset {
-  offsetLeft: number
-  offsetTop: number
-}
-
-interface PlayerExpose {
-  play: () => Promise<void> | undefined
-  pause: () => void
-  toggle: () => void
-  switch: (index: number) => void
-}
-
-const REPEAT = {
-  NONE: 'none',
-  MUSIC: 'music',
-  LIST: 'list',
-  NO_REPEAT: 'no_repeat',
-  REPEAT_ONE: 'repeat_one',
-  REPEAT_ALL: 'repeat_all',
-} as const
-
-type RepeatValue = typeof REPEAT[keyof typeof REPEAT]
-type NormalizedRepeatValue = typeof REPEAT.NO_REPEAT | typeof REPEAT.REPEAT_ONE | typeof REPEAT.REPEAT_ALL
-
-const MEDIA_EVENTS = [
-  'abort',
-  'canplay', 'canplaythrough',
-  'durationchange',
-  'emptied', 'encrypted', 'ended', 'error',
-  'interruptbegin', 'interruptend',
-  'loadeddata', 'loadedmetadata', 'loadstart',
-  'mozaudioavailable',
-  'pause', 'play', 'playing', 'progress',
-  'ratechange',
-  'seeked', 'seeking', 'stalled', 'suspend',
-  'timeupdate',
-  'volumechange',
-  'waiting',
-] as const
-
-type MediaEventName = typeof MEDIA_EVENTS[number]
-
-let activeMutex: PlayerExpose | null = null
-
-const props = defineProps({
-  music: {
-    type: Object as PropType<PlayerMusicItem>,
-    required: true,
-    validator: (song: PlayerMusicItem) => Boolean(song?.src),
-  },
-  list: {
-    type: Array as PropType<PlayerMusicItem[]>,
-    default: () => [],
-  },
-  mini: {
-    type: Boolean,
-    default: false,
-  },
-  showLrc: {
-    type: Boolean,
-    default: false,
-  },
-  mutex: {
-    type: Boolean,
-    default: true,
-  },
-  theme: {
-    type: String,
-    default: '#41b883',
-  },
-  listMaxHeight: String,
-  listFolded: {
-    type: Boolean,
-    default: false,
-  },
-  float: {
-    type: Boolean,
-    default: false,
-  },
-  autoplay: {
-    type: Boolean,
-    default: false,
-  },
-  muted: {
-    type: Boolean,
-    default: false,
-  },
-  preload: {
-    type: String as PropType<HTMLMediaElement['preload']>,
-    default: 'none',
-  },
-  volume: {
-    type: Number,
-    default: 0.5,
-    validator: (value: number) => value >= 0 && value <= 1,
-  },
-  shuffle: {
-    type: Boolean,
-    default: false,
-  },
-  repeat: {
-    type: String as PropType<RepeatValue>,
-    default: 'no_repeat',
-  },
-})
-
-const emit = defineEmits([
-  'update:music',
-  'update:muted',
-  'update:volume',
-  'update:shuffle',
-  'update:repeat',
-  'abort',
-  'canplay',
-  'canplaythrough',
-  'durationchange',
-  'emptied',
-  'encrypted',
-  'ended',
-  'error',
-  'interruptbegin',
-  'interruptend',
-  'loadeddata',
-  'loadedmetadata',
-  'loadstart',
-  'mozaudioavailable',
-  'pause',
-  'play',
-  'playing',
-  'progress',
-  'ratechange',
-  'seeked',
-  'seeking',
-  'stalled',
-  'suspend',
-  'timeupdate',
-  'volumechange',
-  'waiting',
-] as const)
-
-const audio = ref<HTMLAudioElement | null>(null)
-const internalMusic = ref<PlayerMusicItem>(props.music)
-const isPlaying = ref(false)
-const isSeeking = ref(false)
-const wasPlayingBeforeSeeking = ref(false)
-const isMobile = /mobile/i.test(window.navigator.userAgent)
-const playStat = reactive<StatType>({
-  duration: 0,
-  loadedTime: 0,
-  playedTime: 0,
-})
-const showList = ref(!props.listFolded)
-const audioPlayPromise = ref<Promise<void>>(Promise.resolve())
-const rejectPlayPromise = ref<((reason?: unknown) => void) | null>(null)
-const floatOriginX = ref(0)
-const floatOriginY = ref(0)
-const floatOffsetLeft = ref(0)
-const floatOffsetTop = ref(0)
-const selfAdaptingTheme = ref<string | null>(null)
-const internalMuted = ref(props.muted)
-const internalVolume = ref(props.volume)
-const isLoading = ref(false)
-const internalShuffle = ref(props.shuffle)
-const internalRepeat = ref<RepeatValue>(props.repeat)
-const shuffledList = ref<PlayerMusicItem[]>([])
-const hls = ref<Hls | null>(null)
-
-const currentMusic = computed({
-  get: () => internalMusic.value,
-  set: (value: PlayerMusicItem) => {
-    emit('update:music', value)
-    internalMusic.value = value
-  },
-})
-
-const currentTheme = computed(() => selfAdaptingTheme.value || currentMusic.value.theme || props.theme)
-const isFloatMode = computed(() => props.float && !isMobile)
-const thumbnailPlaying = computed(() => isPlaying.value || (isSeeking.value && wasPlayingBeforeSeeking.value))
-const floatStyleObj = computed(() => {
-  return {
-    transform: `translate(${floatOffsetLeft.value}px, ${floatOffsetTop.value}px)`,
-    webkitTransform: `translate(${floatOffsetLeft.value}px, ${floatOffsetTop.value}px)`,
-  }
-})
-
-const playIndex = computed({
-  get: () => shuffledList.value.indexOf(currentMusic.value),
-  set: (value: number) => {
-    if (!shuffledList.value.length) return
-    const normalizedIndex = value % shuffledList.value.length
-    currentMusic.value = shuffledList.value[normalizedIndex < 0 ? normalizedIndex + shuffledList.value.length : normalizedIndex]
-  },
-})
-
-const isAudioMuted = computed({
-  get: () => internalMuted.value,
-  set: (value: boolean) => {
-    emit('update:muted', value)
-    internalMuted.value = value
-  },
-})
-
-const audioVolume = computed({
-  get: () => internalVolume.value,
-  set: (value: number) => {
-    emit('update:volume', value)
-    internalVolume.value = value
-  },
-})
-
-const shouldShuffle = computed({
-  get: () => internalShuffle.value,
-  set: (value: boolean) => {
-    emit('update:shuffle', value)
-    internalShuffle.value = value
-  },
-})
-
-const repeatMode = computed<NormalizedRepeatValue>({
-  get: () => {
-    switch (internalRepeat.value) {
-      case REPEAT.NONE:
-      case REPEAT.NO_REPEAT:
-        return REPEAT.NO_REPEAT
-      case REPEAT.MUSIC:
-      case REPEAT.REPEAT_ONE:
-        return REPEAT.REPEAT_ONE
-      default:
-        return REPEAT.REPEAT_ALL
-    }
-  },
-  set: (value) => {
-    emit('update:repeat', value)
-    internalRepeat.value = value
-  },
-})
-
-function onDragBegin() {
-  floatOriginX.value = floatOffsetLeft.value
-  floatOriginY.value = floatOffsetTop.value
-}
-
-function onDragAround({ offsetLeft, offsetTop }: DragOffset) {
-  floatOffsetLeft.value = floatOriginX.value + offsetLeft
-  floatOffsetTop.value = floatOriginY.value + offsetTop
-}
-
-function setNextMode() {
-  if (repeatMode.value === REPEAT.REPEAT_ALL) {
-    repeatMode.value = REPEAT.REPEAT_ONE
-  } else if (repeatMode.value === REPEAT.REPEAT_ONE) {
-    repeatMode.value = REPEAT.NO_REPEAT
-  } else {
-    repeatMode.value = REPEAT.REPEAT_ALL
-  }
-}
-
-function thenPlay() {
-  nextTick(() => {
-    void play()
-  })
-}
-
-function toggle() {
-  const media = audio.value
-  if (!media) return
-
-  if (!media.paused) {
-    pause()
-  } else {
-    void play()
-  }
-}
-
-function play() {
-  const media = audio.value
-  if (!media) return
-
-  if (props.mutex) {
-    if (activeMutex && activeMutex !== playerExpose) {
-      activeMutex.pause()
-    }
-    activeMutex = playerExpose
-  }
-
-  const mediaPlayPromise = media.play()
-  if (mediaPlayPromise) {
-    audioPlayPromise.value = new Promise<void>((resolve, reject) => {
-      rejectPlayPromise.value = reject
-      mediaPlayPromise.then(() => {
-        rejectPlayPromise.value = null
-        resolve()
-      }).catch((error) => {
-        warn(String(error))
-      })
-    })
-    return audioPlayPromise.value
-  }
-}
-
-function pause() {
-  const media = audio.value
-  if (!media) return
-
-  audioPlayPromise.value
-    .then(() => {
-      media.pause()
-    })
-    .catch(() => {
-      media.pause()
-    })
-
-  if (rejectPlayPromise.value) {
-    rejectPlayPromise.value()
-    rejectPlayPromise.value = null
-  }
-}
-
-function switchTrack(index: number) {
-  playIndex.value = index
-  thenPlay()
-}
-
-function onProgressDragBegin(value: number) {
-  const media = audio.value
-  if (!media) return
-
-  wasPlayingBeforeSeeking.value = isPlaying.value
-  isSeeking.value = true
-  pause()
-
-  if (!isNaN(media.duration)) {
-    media.currentTime = media.duration * value
-  }
-}
-
-function onProgressDragging(value: number) {
-  const media = audio.value
-  if (!media) return
-
-  if (isNaN(media.duration)) {
-    playStat.playedTime = 0
-  } else {
-    media.currentTime = media.duration * value
-  }
-}
-
-function onProgressDragEnd() {
-  if (wasPlayingBeforeSeeking.value) {
-    thenPlay()
-  } else {
-    isSeeking.value = false
-    wasPlayingBeforeSeeking.value = false
-  }
-}
-
-function toggleMute() {
-  const media = audio.value
-  if (!media) return
-
-  setAudioMuted(!media.muted)
-}
-
-function setAudioMuted(value: boolean) {
-  const media = audio.value
-  if (!media) return
-
-  media.muted = value
-}
-
-function setAudioVolume(value: number) {
-  const media = audio.value
-  if (!media) return
-
-  media.volume = value
-  if (value > 0) {
-    setAudioMuted(false)
-  }
-}
-
-function getShuffledList() {
-  if (!props.list.length) {
-    return [internalMusic.value]
-  }
-
-  const unshuffled = [...props.list]
-  if (!internalShuffle.value || unshuffled.length <= 1) {
-    return unshuffled
-  }
-
-  let indexOfCurrentMusic = unshuffled.indexOf(internalMusic.value)
-  if (unshuffled.length === 2 && indexOfCurrentMusic !== -1) {
-    if (indexOfCurrentMusic === 0) {
-      return unshuffled
-    }
-    return [internalMusic.value, unshuffled[0]]
-  }
-
-  for (let index = unshuffled.length - 1; index > 0; index--) {
-    const randomIndex = Math.floor(Math.random() * (index + 1))
-    const tmp = unshuffled[index]
-    unshuffled[index] = unshuffled[randomIndex]
-    unshuffled[randomIndex] = tmp
-  }
-
-  if (indexOfCurrentMusic !== -1) {
-    indexOfCurrentMusic = unshuffled.indexOf(internalMusic.value)
-    if (indexOfCurrentMusic !== 0) {
-      [unshuffled[0], unshuffled[indexOfCurrentMusic]] = [unshuffled[indexOfCurrentMusic], unshuffled[0]]
-    }
-  }
-
-  return unshuffled
-}
-
-function onSelectSong(song: PlayerMusicItem) {
-  if (currentMusic.value === song) {
-    toggle()
-  } else {
-    currentMusic.value = song
-    thenPlay()
-  }
-}
-
-function onAudioPlay() {
-  isPlaying.value = true
-  isSeeking.value = false
-  wasPlayingBeforeSeeking.value = false
-}
-
-function onAudioPause() {
-  isPlaying.value = false
-  if (!isSeeking.value) {
-    wasPlayingBeforeSeeking.value = false
-  }
-}
-
-function onAudioWaiting() {
-  isLoading.value = true
-}
-
-function onAudioCanplay() {
-  isLoading.value = false
-}
-
-function onAudioDurationChange() {
-  const media = audio.value
-  if (!media) return
-
-  if (media.duration !== 1) {
-    playStat.duration = media.duration
-  }
-}
-
-function onAudioProgress() {
-  const media = audio.value
-  if (!media) return
-
-  if (media.buffered.length) {
-    playStat.loadedTime = media.buffered.end(media.buffered.length - 1)
-  } else {
-    playStat.loadedTime = 0
-  }
-}
-
-function onAudioTimeUpdate() {
-  if (!audio.value) return
-  playStat.playedTime = audio.value.currentTime
-}
-
-function onAudioSeeking() {
-  if (!audio.value) return
-  playStat.playedTime = audio.value.currentTime
-}
-
-function onAudioSeeked() {
-  if (!audio.value) return
-  playStat.playedTime = audio.value.currentTime
-}
-
-function onAudioVolumeChange() {
-  const media = audio.value
-  if (!media) return
-
-  audioVolume.value = media.volume
-  isAudioMuted.value = media.muted
-}
-
-function onAudioEnded() {
-  const media = audio.value
-
-  if (repeatMode.value === REPEAT.REPEAT_ALL) {
-    if (shouldShuffle.value && playIndex.value === shuffledList.value.length - 1) {
-      shuffledList.value = getShuffledList()
-    }
-    playIndex.value += 1
-    thenPlay()
-  } else if (repeatMode.value === REPEAT.REPEAT_ONE) {
-    thenPlay()
-  } else {
-    playIndex.value += 1
-    if (playIndex.value !== 0) {
-      thenPlay()
-    } else if (shuffledList.value.length === 1 && media) {
-      media.currentTime = 0
-    }
-  }
-}
-
-function initAudio() {
-  const media = audio.value
-  if (!media) return
-
-  media.muted = props.muted
-  media.preload = props.preload
-  media.volume = props.volume
-
-  MEDIA_EVENTS.forEach((eventName) => {
-    media.addEventListener(eventName, (event) => emitMediaEvent(eventName, event))
-  })
-
-  media.addEventListener('play', onAudioPlay)
-  media.addEventListener('pause', onAudioPause)
-  media.addEventListener('abort', onAudioPause)
-  media.addEventListener('waiting', onAudioWaiting)
-  media.addEventListener('canplay', onAudioCanplay)
-  media.addEventListener('progress', onAudioProgress)
-  media.addEventListener('durationchange', onAudioDurationChange)
-  media.addEventListener('seeking', onAudioSeeking)
-  media.addEventListener('seeked', onAudioSeeked)
-  media.addEventListener('timeupdate', onAudioTimeUpdate)
-  media.addEventListener('volumechange', onAudioVolumeChange)
-  media.addEventListener('ended', onAudioEnded)
-
-  media.src = currentMusic.value.src || currentMusic.value.url || ''
-}
-
-function setSelfAdaptingTheme(color: string | null) {
-  selfAdaptingTheme.value = color
-}
-
-function emitMediaEvent<T extends MediaEventName>(eventName: T, event: Event) {
-  emit(eventName, event)
-}
-
-watch(() => props.music, (music) => {
-  internalMusic.value = music
-})
-
-watch(currentMusic, (music) => {
-  const media = audio.value
-  const src = music.src || music.url
-  if (!media || !src) return
-
-  if (/\.m3u8(?=(#|\?|$))/.test(src)) {
-    if (media.canPlayType('application/x-mpegURL') || media.canPlayType('application/vnd.apple.mpegURL')) {
-      media.src = src
-    } else if (Hls.isSupported()) {
-      if (!hls.value) {
-        hls.value = new Hls()
-      }
-      hls.value.loadSource(src)
-      hls.value.attachMedia(media)
-    } else {
-      warn('HLS is not supported on your browser')
-      media.src = src
-    }
-  } else {
-    media.src = src
-  }
-})
-
-watch(isAudioMuted, (value) => {
-  if (!audio.value) return
-  audio.value.muted = value
-})
-
-watch(() => props.preload, (value) => {
-  if (!audio.value) return
-  audio.value.preload = value
-})
-
-watch(audioVolume, (value) => {
-  if (!audio.value) return
-  audio.value.volume = value
-})
-
-watch(() => props.muted, (value) => {
-  internalMuted.value = value
-})
-
-watch(() => props.volume, (value) => {
-  internalVolume.value = value
-})
-
-watch(() => props.shuffle, (value) => {
-  internalShuffle.value = value
-})
-
-watch(() => props.repeat, (value) => {
-  internalRepeat.value = value
-})
-
-shuffledList.value = getShuffledList()
-
-onMounted(() => {
-  initAudio()
-  if (props.autoplay) {
-    void play()
-  }
-})
-
-const playerExpose: PlayerExpose = {
-  play,
-  pause,
-  toggle,
-  switch: switchTrack,
-}
-
-defineExpose({
-  audio,
-  currentMusic,
-  isPlaying,
-  playStat,
-  ...playerExpose,
-})
-
-onBeforeUnmount(() => {
-  if (activeMutex === playerExpose) {
-    activeMutex = null
-  }
-  hls.value?.destroy()
-})
-</script>
-
-<style lang="less" scoped>
-  @import "./less/variables";
-
-  .aplayer {
-    font-family: Arial, Helvetica, sans-serif;
-    color: #000;
-    background-color: #fff;
-    margin: 5px;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
-    border-radius: 2px;
-    overflow: hidden;
-    user-select: none;
-    line-height: initial;
-
-    * {
-      box-sizing: content-box;
-    }
-
-    .aplayer-lrc-content {
-      display: none;
-    }
-
-    .aplayer-body {
-      display: flex;
-
-      position: relative;
-      .aplayer-info {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-
-        text-align: start;
-        padding: 14px 7px 0 10px;
-        height: @aplayer-height;
-        box-sizing: border-box;
-        overflow: hidden;
-
-        .aplayer-music {
-          flex-grow: 1;
-
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          margin-left: 5px;
-          user-select: text;
-          cursor: default;
-          padding-bottom: 2px;
-
-          .aplayer-title {
-            font-size: 14px;
-          }
-
-          .aplayer-author {
-            font-size: 12px;
-            color: #666;
-            margin-left: 10px;
-          }
-        }
-
-        .aplayer-lrc {
-          z-index: 0;
-        }
-      }
-    }
-
-    // Mini mode
-    &.aplayer-narrow {
-      width: @aplayer-height;
-    }
-
-    &.aplayer-withlrc {
-      .aplayer-body {
-        .aplayer-pic {
-          height: @aplayer-height-lrc;
-          width: @aplayer-height-lrc;
-        }
-
-        .aplayer-info {
-          height: @aplayer-height-lrc;
-        }
-
-        .aplayer-info {
-          padding: 10px 7px 0 7px;
-        }
-      }
-    }
-
-    &.aplayer-withlist {
-      .aplayer-body {
-        .aplayer-info {
-          border-bottom: 1px solid #e9e9e9;
-        }
-
-        .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
-          display: block;
-        }
-      }
-    }
-
-    /* floating player on top */
-    position: relative;
-    &.aplayer-float {
-      z-index: 1;
-    }
-  }
-
-  @keyframes aplayer-roll {
-    0% {
-      left: 0
-    }
-    100% {
-      left: -100%
-    }
-  }
-</style>
\ No newline at end of file