feat: 优化歌曲组件事件处理，使用展开运算符简化事件传递

src/renderer/components/common/SongItem.vue

@@ -8,9 +8,9 @@
     :can-remove="canRemove"
     :is-next="isNext"
     :index="index"
-    @play="$emit('play', $event)"
+    @play="(...args) => $emit('play', ...args)"
-    @select="$emit('select', $event)"
+    @select="(...args) => $emit('select', ...args)"
-    @remove-song="$emit('remove-song', $event)"
+    @remove-song="(...args) => $emit('remove-song', ...args)"
   />
 </template>
 

src/renderer/components/common/songItemCom/CompactSongItem.vue

@@ -6,9 +6,9 @@
     :can-remove="canRemove"
     :is-next="isNext"
     :index="index"
-    @play="$emit('play', $event)"
+    @play="(...args) => $emit('play', ...args)"
-    @select="$emit('select', $event)"
+    @select="(...args) => $emit('select', ...args)"
-    @remove-song="$emit('remove-song', $event)"
+    @remove-song="(...args) => $emit('remove-song', ...args)"
     class="compact-song-item"
     ref="baseItem"
   >
@@ -112,7 +112,7 @@ const props = withDefaults(
   }
 );
 
-defineEmits(['play', 'select', 'remove-song']);
+const emit = defineEmits(['play', 'select', 'remove-song']);
 const baseItem = ref<InstanceType<typeof BaseSongItem>>();
 
 // 从基础组件获取响应式状态
@@ -124,10 +124,19 @@ const isHovering = computed(() => baseItem.value?.isHovering || false);
 const artists = computed(() => baseItem.value?.artists || []);
 
 // 包装方法，避免直接访问可能为undefined的ref
-const onToggleSelect = () => baseItem.value?.toggleSelect();
+const onToggleSelect = () => {
+  baseItem.value?.toggleSelect();
+  emit('select', props.item.id, !props.selected);
+};
 const onArtistClick = (id: number) => baseItem.value?.handleArtistClick(id);
-const onToggleFavorite = (event: Event) => baseItem.value?.toggleFavorite(event);
+const onToggleFavorite = (event: Event) => {
-const onPlayMusic = () => baseItem.value?.playMusicEvent(props.item);
+  baseItem.value?.toggleFavorite(event);
+  // 可选：emit 收藏事件
+};
+const onPlayMusic = () => {
+  baseItem.value?.playMusicEvent(props.item);
+  emit('play', props.item);
+};
 const onMenuClick = (event: MouseEvent) => baseItem.value?.handleMenuClick(event);
 
 // 从useSongItem.ts导入格式化时长和获取时长方法

src/renderer/components/common/songItemCom/ListSongItem.vue

@@ -6,9 +6,9 @@
     :can-remove="canRemove"
     :is-next="isNext"
     :index="index"
-    @play="$emit('play', $event)"
+    @play="(...args) => $emit('play', ...args)"
-    @select="$emit('select', $event)"
+    @select="(...args) => $emit('select', ...args)"
-    @remove-song="$emit('remove-song', $event)"
+    @remove-song="(...args) => $emit('remove-song', ...args)"
     class="list-song-item"
     ref="baseItem"
   >
@@ -108,7 +108,7 @@ const props = withDefaults(
   }
 );
 
-defineEmits(['play', 'select', 'remove-song']);
+const emit = defineEmits(['play', 'select', 'remove-song']);
 const baseItem = ref<InstanceType<typeof BaseSongItem>>();
 
 // 从基础组件获取响应式状态
@@ -119,11 +119,20 @@ const isFavorite = computed(() => baseItem.value?.isFavorite || false);
 const artists = computed(() => baseItem.value?.artists || []);
 
 // 包装方法，避免直接访问可能为undefined的ref
-const onToggleSelect = () => baseItem.value?.toggleSelect();
+const onToggleSelect = () => {
+  baseItem.value?.toggleSelect();
+  emit('select', props.item.id, !props.selected);
+};
 const onImageLoad = (event: Event) => baseItem.value?.imageLoad(event);
 const onArtistClick = (id: number) => baseItem.value?.handleArtistClick(id);
-const onToggleFavorite = (event: Event) => baseItem.value?.toggleFavorite(event);
+const onToggleFavorite = (event: Event) => {
-const onPlayMusic = () => baseItem.value?.playMusicEvent(props.item);
+  baseItem.value?.toggleFavorite(event);
+  // 可选：emit 收藏事件
+};
+const onPlayMusic = () => {
+  baseItem.value?.playMusicEvent(props.item);
+  emit('play', props.item);
+};
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/common/songItemCom/MiniSongItem.vue

@@ -6,9 +6,9 @@
     :can-remove="canRemove"
     :is-next="isNext"
     :index="index"
-    @play="$emit('play', $event)"
+    @play="(...args) => $emit('play', ...args)"
-    @select="$emit('select', $event)"
+    @select="(...args) => $emit('select', ...args)"
-    @remove-song="$emit('remove-song', $event)"
+    @remove-song="(...args) => $emit('remove-song', ...args)"
     class="mini-song-item"
     ref="baseItem"
   >
@@ -109,7 +109,7 @@ const props = withDefaults(
   }
 );
 
-defineEmits(['play', 'select', 'remove-song']);
+const emit = defineEmits(['play', 'select', 'remove-song']);
 const baseItem = ref<InstanceType<typeof BaseSongItem>>();
 
 // 从基础组件获取响应式状态
@@ -120,11 +120,20 @@ const isFavorite = computed(() => baseItem.value?.isFavorite || false);
 const artists = computed(() => baseItem.value?.artists || []);
 
 // 包装方法，避免直接访问可能为undefined的ref
-const onToggleSelect = () => baseItem.value?.toggleSelect();
+const onToggleSelect = () => {
+  baseItem.value?.toggleSelect();
+  emit('select', props.item.id, !props.selected);
+};
 const onImageLoad = (event: Event) => baseItem.value?.imageLoad(event);
 const onArtistClick = (id: number) => baseItem.value?.handleArtistClick(id);
-const onToggleFavorite = (event: Event) => baseItem.value?.toggleFavorite(event);
+const onToggleFavorite = (event: Event) => {
-const onPlayMusic = () => baseItem.value?.playMusicEvent(props.item);
+  baseItem.value?.toggleFavorite(event);
+  // 可选：emit 收藏事件
+};
+const onPlayMusic = () => {
+  baseItem.value?.playMusicEvent(props.item);
+  emit('play', props.item);
+};
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/common/songItemCom/StandardSongItem.vue

@@ -6,9 +6,9 @@
     :can-remove="canRemove"
     :is-next="isNext"
     :index="index"
-    @play="$emit('play', $event)"
+    @play="(...args) => $emit('play', ...args)"
-    @select="$emit('select', $event)"
+    @select="(...args) => $emit('select', ...args)"
-    @remove-song="$emit('remove-song', $event)"
+    @remove-song="(...args) => $emit('remove-song', ...args)"
     class="standard-song-item"
     ref="baseItem"
   >
@@ -118,7 +118,7 @@ const props = withDefaults(
   }
 );
 
-defineEmits(['play', 'select', 'remove-song']);
+const emit = defineEmits(['play', 'select', 'remove-song']);
 const baseItem = ref<InstanceType<typeof BaseSongItem>>();
 
 // 从playerStore和baseItem获取响应式状态
@@ -129,12 +129,22 @@ const isFavorite = computed(() => baseItem.value?.isFavorite || false);
 const artists = computed(() => baseItem.value?.artists || []);
 
 // 包装方法，避免直接访问可能为undefined的ref
-const onToggleSelect = () => baseItem.value?.toggleSelect();
+const onToggleSelect = () => {
+  baseItem.value?.toggleSelect();
+  emit('select', props.item.id, !props.selected);
+};
 const onImageLoad = (event: Event) => baseItem.value?.imageLoad(event);
 const onArtistClick = (id: number) => baseItem.value?.handleArtistClick(id);
-const onToggleFavorite = (event: Event) => baseItem.value?.toggleFavorite(event);
+const onToggleFavorite = (event: Event) => {
-const onPlayMusic = () => baseItem.value?.playMusicEvent(props.item);
+  baseItem.value?.toggleFavorite(event);
-const onPlayNext = () => baseItem.value?.handlePlayNext();
+};
+const onPlayMusic = () => {
+  baseItem.value?.playMusicEvent(props.item);
+  emit('play', props.item);
+};
+const onPlayNext = () => {
+  baseItem.value?.handlePlayNext();
+};
 </script>
 
 <style lang="scss" scoped>