播放器组件重构&歌词加载问题修复

Co-authored-by: Copilot <copilot@github.com>

src/views/api/aplayer/components/aplayer-controller-volume.vue

@@ -3,7 +3,7 @@
     <icon-button
       :class="`aplayer-icon-${volumeIcon}`"
       :icon="volumeIcon"
-      @click="$emit('togglemute')"
+      @click="emit('togglemute')"
     />
     <div
       class="aplayer-volume-bar-wrap"
@@ -33,7 +33,7 @@ const props = defineProps<{
   muted: boolean
   theme: string
 }>()
-const emit = defineEmits(['setvolume'])
+const emit = defineEmits(['setvolume', 'togglemute'])
 const barHeight = 40
 
 const volumeIcon = computed(() => {

src/views/api/aplayer/components/aplayer-controller.vue

@@ -4,9 +4,9 @@
       :loadProgress="loadProgress"
       :playProgress="playProgress"
       :theme="theme"
-      @dragbegin="val => $emit('dragbegin', val)"
-      @dragend="val => $emit('dragend', val)"
-      @dragging="val => $emit('dragging', val)"
+      @dragbegin="val => emit('dragbegin', val)"
+      @dragend="val => emit('dragend', val)"
+      @dragging="val => emit('dragging', val)"
     />
     <div class="aplayer-time">
       <div class="aplayer-time-inner">
@@ -18,26 +18,26 @@
         :volume="volume"
         :theme="theme"
         :muted="muted"
-        @togglemute="$emit('togglemute')"
-        @setvolume="(v: number) => $emit('setvolume', v)"
+        @togglemute="emit('togglemute')"
+        @setvolume="(v: number) => emit('setvolume', v)"
       />
       <icon-button
         class="aplayer-icon-mode"
         icon="shuffle"
         :class="{ 'inactive': !shuffle }"
-        @click="$emit('toggleshuffle')"
+        @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')"
+        @click="emit('nextmode')"
       />
       <icon-button
         class="aplayer-icon-menu"
         icon="menu"
         :class="{ 'inactive': !showList }"
-        @click="$emit('togglelist')"
+        @click="emit('togglelist')"
       />
     </div>
   </div>
@@ -60,6 +60,7 @@ const props = defineProps<{
   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

src/views/api/aplayer/components/aplayer-list.vue

@@ -11,7 +11,7 @@
           v-for="(aMusic, index) of musicList"
           :key="index"
           :class="{'aplayer-list-light': aMusic === currentMusic}"
-          @click="$emit('selectsong', aMusic)"
+          @click="emit('selectsong', aMusic)"
         >
           <span class="aplayer-list-cur" :style="{background: theme}"></span>
           <span class="aplayer-list-index">{{ index + 1}}</span>
@@ -34,6 +34,7 @@ const props = defineProps<{
   theme?: string
   listMaxHeight?: string
 }>()
+const emit = defineEmits(['selectsong'])
 const listHeightStyle = computed(() => {
   return {
     height: `${33 * props.musicList.length - 1}px`,

src/views/api/aplayer/components/aplayer-lrc.vue

@@ -25,10 +25,9 @@ const props = defineProps<{
   playStat: StatType
 }>()
 
-const displayLrc = ref('')
 const currentLineIndex = ref(0)
 
-const lrcLines = computed(() => parseLrc(displayLrc.value))
+const lrcLines = computed(() => parseLrc(props.lrcSource))
 
 const transformStyle = computed(() => {
   return {
@@ -37,17 +36,6 @@ const transformStyle = computed(() => {
   }
 })
 
-watch(() => props.lrcSource, (lrcSource: string) => {
-  currentLineIndex.value = 0
-  if (/^https?:\/\//.test(lrcSource)) {
-    fetch(lrcSource)
-      .then(response => response.text())
-      .then(lrc => displayLrc.value = lrc)
-  } else {
-    displayLrc.value = lrcSource
-  }
-}, { immediate: true })
-
 watch(() => props.playStat.playedTime, (playedTime: number) => {
   for (let i = 0; i < lrcLines.value.length; i++) {
     const line = lrcLines.value[i]