✨ feat: 优化播放流程

imsyy · imsyy · commit 7721251a9818 · 2025-11-21T11:57:53.000+08:00
diff --git a/src/components/Card/SongCard.vue b/src/components/Card/SongCard.vue
@@ -158,7 +158,7 @@ import { openJumpArtist } from "@/utils/modal";
 import { toLikeSong } from "@/utils/auth";
 import { isObject } from "lodash-es";
 import { formatTimestamp, msToTime } from "@/utils/time";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 import blob from "@/utils/blob";
 import { isElectron } from "@/utils/env";
 
@@ -174,6 +174,7 @@ const props = defineProps<{
 }>();
 
 const router = useRouter();
+const player = usePlayer();
 const dataStore = useDataStore();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
diff --git a/src/components/Layout/Menu.vue b/src/components/Layout/Menu.vue
@@ -34,9 +34,10 @@ import { openCreatePlaylist } from "@/utils/modal";
 import { debounce } from "lodash-es";
 import { isLogin } from "@/utils/auth";
 import { isElectron } from "@/utils/env";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
 const router = useRouter();
+const player = usePlayer();
 const dataStore = useDataStore();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
diff --git a/src/components/List/CommentList.vue b/src/components/List/CommentList.vue
@@ -218,6 +218,9 @@ const likeComment = debounce(async (data: CommentType) => {
             color: var(--primary-hex);
           }
         }
+        .text {
+          white-space: pre-wrap;
+        }
       }
       .reply {
         width: 100%;
@@ -226,6 +229,9 @@ const likeComment = debounce(async (data: CommentType) => {
         font-size: 13px;
         margin-top: 6px;
         background-color: rgba(var(--primary), 0.12);
+        .text {
+          white-space: pre-wrap;
+        }
       }
       .meta {
         padding-top: 12px;
diff --git a/src/components/List/CoverList.vue b/src/components/List/CoverList.vue
@@ -121,8 +121,8 @@ import { formatSongsList } from "@/utils/format";
 import { songDetail } from "@/api/song";
 import { playlistAllSongs } from "@/api/playlist";
 import { radioAllProgram } from "@/api/radio";
+import { usePlayer } from "@/utils/player";
 import CoverMenu from "@/components/Menu/CoverMenu.vue";
-import player from "@/utils/player";
 import { formatTimestamp } from "@/utils/time";
 
 interface Props {
@@ -145,6 +145,7 @@ const emit = defineEmits<{
 }>();
 
 const router = useRouter();
+const player = usePlayer();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
 
diff --git a/src/components/List/SongList.vue b/src/components/List/SongList.vue
@@ -129,8 +129,8 @@ import { VirtList } from "vue-virt-list";
 import { entries, isEmpty } from "lodash-es";
 import { sortOptions } from "@/utils/meta";
 import { renderIcon } from "@/utils/helper";
+import { usePlayer } from "@/utils/player";
 import SongListMenu from "@/components/Menu/SongListMenu.vue";
-import player from "@/utils/player";
 
 const props = withDefaults(
   defineProps<{
@@ -177,6 +177,7 @@ const emit = defineEmits<{
   removeSong: [id: number[]];
 }>();
 
+const player = usePlayer();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
 
diff --git a/src/components/Menu/SongListMenu.vue b/src/components/Menu/SongListMenu.vue
@@ -31,11 +31,12 @@ import { deleteSongs, isLogin } from "@/utils/auth";
 import { songUrl } from "@/api/song";
 import { dailyRecommendDislike } from "@/api/rec";
 import { formatSongsList } from "@/utils/format";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
 const emit = defineEmits<{ removeSong: [index: number[]] }>();
 
 const router = useRouter();
+const player = usePlayer();
 const dataStore = useDataStore();
 const localStore = useLocalStore();
 const statusStore = useStatusStore();
diff --git a/src/components/Modal/AutoClose.vue b/src/components/Modal/AutoClose.vue
@@ -66,8 +66,9 @@
 <script setup lang="ts">
 import { useStatusStore } from "@/stores";
 import { convertSecondsToTime } from "@/utils/time";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const statusStore = useStatusStore();
 
 // 自定义时长
diff --git a/src/components/Modal/ChangeRate.vue b/src/components/Modal/ChangeRate.vue
@@ -32,7 +32,8 @@
 
 <script setup lang="ts">
 import { useStatusStore } from "@/stores";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const statusStore = useStatusStore();
 </script>
diff --git a/src/components/Modal/Equalizer.vue b/src/components/Modal/Equalizer.vue
@@ -39,8 +39,9 @@
 <script setup lang="ts">
 import { isElectron } from "@/utils/env";
 import { useStatusStore } from "@/stores";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const statusStore = useStatusStore();
 
 type PresetKey = keyof typeof presetList;
diff --git a/src/components/Player/FullPlayer.vue b/src/components/Player/FullPlayer.vue
@@ -79,8 +79,9 @@
 import { useStatusStore, useMusicStore, useSettingStore } from "@/stores";
 import { isElectron } from "@/utils/env";
 import { throttle } from "lodash-es";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
 const settingStore = useSettingStore();
diff --git a/src/components/Player/MainAMLyric.vue b/src/components/Player/MainAMLyric.vue
@@ -37,9 +37,10 @@ import { LyricPlayer } from "@applemusic-like-lyrics/vue";
 import { LyricLine } from "@applemusic-like-lyrics/core";
 import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
 import { getLyricLanguage } from "@/utils/format";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 import LyricMenu from "./LyricMenu.vue";
 
+const player = usePlayer();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
 const settingStore = useSettingStore();
diff --git a/src/components/Player/MainLyric.vue b/src/components/Player/MainLyric.vue
@@ -171,11 +171,12 @@
 import { LyricWord } from "@applemusic-like-lyrics/lyric";
 import { NScrollbar } from "naive-ui";
 import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 import { getLyricLanguage } from "@/utils/format";
 import { isElectron } from "@/utils/env";
 import LyricMenu from "./LyricMenu.vue";
 
+const player = usePlayer();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
 const settingStore = useSettingStore();
diff --git a/src/components/Player/MainPlayList.vue b/src/components/Player/MainPlayList.vue
@@ -117,8 +117,9 @@
 <script setup lang="ts">
 import { useStatusStore, useDataStore } from "@/stores";
 import type { VirtualListInst } from "naive-ui";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const dataStore = useDataStore();
 const statusStore = useStatusStore();
 
diff --git a/src/components/Player/MainPlayer.vue b/src/components/Player/MainPlayer.vue
@@ -199,9 +199,10 @@ import {
   openJumpArtist,
   openPlaylistAdd,
 } from "@/utils/modal";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
 const router = useRouter();
+const player = usePlayer();
 const dataStore = useDataStore();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
diff --git a/src/components/Player/PersonalFM.vue b/src/components/Player/PersonalFM.vue
@@ -79,8 +79,9 @@
 import { useMusicStore, useStatusStore } from "@/stores";
 import { coverLoaded } from "@/utils/helper";
 import { debounce, isObject } from "lodash-es";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
 
diff --git a/src/components/Player/PlayerComment.vue b/src/components/Player/PlayerComment.vue
@@ -146,10 +146,11 @@ const loadMoreComment = () => {
 watch(
   () => songId.value,
   () => {
-    if (!isShowComment.value) {
-      commentData.value = [];
-      return;
-    }
+    commentData.value = [];
+    commentHotData.value = [];
+    commentPage.value = 1;
+    commentHasMore.value = true;
+    if (!isShowComment.value) return;
     getHotCommentData();
     getAllComment();
   },
diff --git a/src/components/Player/PlayerControl.vue b/src/components/Player/PlayerControl.vue
@@ -95,8 +95,9 @@ import { useMusicStore, useStatusStore, useDataStore } from "@/stores";
 import { msToTime } from "@/utils/time";
 import { openDownloadSong, openPlaylistAdd } from "@/utils/modal";
 import { toLikeSong } from "@/utils/auth";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const dataStore = useDataStore();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
diff --git a/src/components/Player/PlayerRightMenu.vue b/src/components/Player/PlayerRightMenu.vue
@@ -47,7 +47,7 @@
       v-if="!statusStore.personalFmMode"
       :value="dataStore.playList?.length ?? 0"
       :show="settingStore.showPlaylistCount"
-      :max="999"
+      :max="9999"
       :style="{
         marginRight: settingStore.showPlaylistCount ? '12px' : null,
       }"
@@ -65,8 +65,9 @@ import { useMusicStore, useStatusStore, useDataStore, useSettingStore } from "@/
 import { openAutoClose, openChangeRate, openEqualizer } from "@/utils/modal";
 import { isElectron } from "@/utils/env";
 import { renderIcon } from "@/utils/helper";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const dataStore = useDataStore();
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
diff --git a/src/components/Player/PlayerSlider.vue b/src/components/Player/PlayerSlider.vue
@@ -19,10 +19,11 @@
 <script setup lang="ts">
 import { useStatusStore } from "@/stores";
 import { msToTime } from "@/utils/time";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
 withDefaults(defineProps<{ showTooltip?: boolean }>(), { showTooltip: true });
 
+const player = usePlayer();
 const statusStore = useStatusStore();
 
 // 拖动时的临时值
diff --git a/src/components/Search/SearchInp.vue b/src/components/Search/SearchInp.vue
@@ -39,12 +39,13 @@
 <script setup lang="ts">
 import { useStatusStore, useDataStore, useSettingStore } from "@/stores";
 import { searchDefault } from "@/api/search";
-import SearchInpMenu from "@/components/Menu/SearchInpMenu.vue";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 import { songDetail } from "@/api/song";
 import { formatSongsList } from "@/utils/format";
+import SearchInpMenu from "@/components/Menu/SearchInpMenu.vue";
 
 const router = useRouter();
+const player = usePlayer();
 const dataStore = useDataStore();
 const statusStore = useStatusStore();
 const settingStore = useSettingStore();
diff --git a/src/components/Setting/LyricsSetting.vue b/src/components/Setting/LyricsSetting.vue
@@ -246,14 +246,14 @@
       </n-card>
     </div>
     <div class="set-list">
-      <n-h3 prefix="bar">
-        歌词内容
-      </n-h3>
+      <n-h3 prefix="bar"> 歌词内容 </n-h3>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">
             启用在线 TTML 歌词
-            <n-tag type="warning" size="small" round style="display: inline; vertical-align: middle;">Beta</n-tag>
+            <n-tag type="warning" size="small" round style="display: inline; vertical-align: middle"
+              >Beta</n-tag
+            >
           </n-text>
           <n-text class="tip" :depth="3">
             是否从 AMLL TTML DB 获取歌词（如有），TTML
@@ -545,10 +545,11 @@ import { cloneDeep, isEqual } from "lodash-es";
 import { isElectron } from "@/utils/env";
 import { openLyricExclude } from "@/utils/modal";
 import { LyricConfig } from "@/types/desktop-lyric";
-import defaultDesktopLyricConfig from "@/assets/data/lyricConfig";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 import { SelectOption } from "naive-ui";
+import defaultDesktopLyricConfig from "@/assets/data/lyricConfig";
 
+const player = usePlayer();
 const statusStore = useStatusStore();
 const settingStore = useSettingStore();
 
diff --git a/src/components/Setting/PlaySetting.vue b/src/components/Setting/PlaySetting.vue
@@ -227,8 +227,9 @@ import { isLogin } from "@/utils/auth";
 import { renderOption } from "@/utils/helper";
 import { isElectron } from "@/utils/env";
 import { uniqBy } from "lodash";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const settingStore = useSettingStore();
 
 // 输出设备数据
diff --git a/src/utils/init.ts b/src/utils/init.ts
@@ -3,13 +3,14 @@ import { useEventListener } from "@vueuse/core";
 import { openUserAgreement } from "@/utils/modal";
 import { debounce } from "lodash-es";
 import { isElectron } from "./env";
+import { usePlayer } from "@/utils/player";
 import packageJson from "@/../package.json";
-import player from "@/utils/player";
 import log from "./log";
 
 // 应用初始化时需要执行的操作
 const init = async () => {
   // init pinia-data
+  const player = usePlayer();
   const dataStore = useDataStore();
   const statusStore = useStatusStore();
   const settingStore = useSettingStore();
@@ -58,6 +59,7 @@ const initEventListener = () => {
 
 // 键盘事件
 const keyDownEvent = debounce((event: KeyboardEvent) => {
+  const player = usePlayer();
   const shortcutStore = useShortcutStore();
   const target = event.target as HTMLElement;
   // 排除元素
diff --git a/src/utils/initIpc.ts b/src/utils/initIpc.ts
@@ -2,7 +2,7 @@ import { isElectron } from "./env";
 import { openSetting, openUpdateApp } from "./modal";
 import { useMusicStore, useDataStore, useStatusStore } from "@/stores";
 import { toLikeSong } from "./auth";
-import player from "./player";
+import { usePlayer } from "./player";
 import { cloneDeep } from "lodash-es";
 import { getPlayerInfo } from "./player-utils/song";
 import { SettingType } from "@/types/main";
@@ -17,6 +17,7 @@ const closeUpdateStatus = () => {
 const initIpc = () => {
   try {
     if (!isElectron) return;
+    const player = usePlayer();
     // 播放
     window.electron.ipcRenderer.on("play", () => player.play());
     // 暂停
diff --git a/src/utils/player.ts b/src/utils/player.ts
diff --git a/src/views/Artist/songs.vue b/src/views/Artist/songs.vue
diff --git a/src/views/Cloud.vue b/src/views/Cloud.vue
diff --git a/src/views/DailySongs.vue b/src/views/DailySongs.vue
diff --git a/src/views/History.vue b/src/views/History.vue
diff --git a/src/views/List/album.vue b/src/views/List/album.vue
diff --git a/src/views/List/liked.vue b/src/views/List/liked.vue
diff --git a/src/views/List/playlist.vue b/src/views/List/playlist.vue
diff --git a/src/views/List/radio.vue b/src/views/List/radio.vue
diff --git a/src/views/Local/layout.vue b/src/views/Local/layout.vue
diff --git a/src/views/Video.vue b/src/views/Video.vue

Original file line number	Diff line number	Diff line change
`@@ -218,6 +218,9 @@ const likeComment = debounce(async (data: CommentType) => {`
`218`	`218`	`color: var(--primary-hex);`
`219`	`219`	`}`
`220`	`220`	`}`
	`221`	`+ .text {`
	`222`	`+ white-space: pre-wrap;`
	`223`	`+ }`
`221`	`224`	`}`
`222`	`225`	`.reply {`
`223`	`226`	`width: 100%;`
`@@ -226,6 +229,9 @@ const likeComment = debounce(async (data: CommentType) => {`
`226`	`229`	`font-size: 13px;`
`227`	`230`	`margin-top: 6px;`
`228`	`231`	`background-color: rgba(var(--primary), 0.12);`
	`232`	`+ .text {`
	`233`	`+ white-space: pre-wrap;`
	`234`	`+ }`
`229`	`235`	`}`
`230`	`236`	`.meta {`
`231`	`237`	`padding-top: 12px;`