✨ feat: 优化播放流程

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();

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();

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;

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();
 

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();
 

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();

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();
 
 // 自定义时长

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>

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;

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();

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();

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();

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();
 

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();

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();
 

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();
   },

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();

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();

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();
 
 // 拖动时的临时值

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();

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();
 

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();
 
 // 输出设备数据

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;
   // 排除元素

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());
     // 暂停

src/utils/player.ts

@@ -24,15 +24,13 @@ import audioContextManager from "@/utils/player-utils/context";
 import lyricManager from "./lyricManager";
 import blob from "./blob";
 
+/* *允许播放格式 */
+const allowPlayFormat = ["mp3", "flac", "webm", "ogg", "wav"];
+
 /**
  * 播放器核心
  * Howler.js 音频库
  */
-let _player: Player | null = null;
-
-/* *允许播放格式 */
-const allowPlayFormat = ["mp3", "flac", "webm", "ogg", "wav"];
-
 class Player {
   /** 播放器 */
   private player: Howl;
@@ -681,7 +679,7 @@ class Player {
 
     // 播放器未加载完成或不存在
     if (!this.player || this.player.state() !== "loaded") {
-      if (changeStatus) statusStore.playStatus = false;
+      window.$message.warning("播放器未加载完成，请稍后重试");
       return;
     }
     // 立即设置播放状态
@@ -1428,7 +1426,9 @@ class Player {
   }
 }
 
-export default new Player();
+// export default new Player();
+
+let _player: Player | null = null;
 
 /**
  * 获取播放器实例

src/views/Artist/songs.vue

@@ -16,7 +16,7 @@ import { artistAllSongs } from "@/api/artist";
 import { songDetail } from "@/api/song";
 import { formatSongsList } from "@/utils/format";
 import { debounce } from "lodash-es";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
 const props = defineProps<{
   id: number;
@@ -26,6 +26,8 @@ const emit = defineEmits<{
   scroll: [e: Event];
 }>();
 
+const player = usePlayer();
+
 // 歌曲数据
 const loading = ref<boolean>(true);
 const hasMore = ref<boolean>(true);

src/views/Cloud.vue

@@ -97,8 +97,9 @@ import { userCloud } from "@/api/cloud";
 import { formatSongsList } from "@/utils/format";
 import { fuzzySearch, renderIcon } from "@/utils/helper";
 import { openBatchList } from "@/utils/modal";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const router = useRouter();
 const dataStore = useDataStore();
 

src/views/DailySongs.vue

@@ -54,8 +54,9 @@ import { updateDailySongsData } from "@/utils/auth";
 import { formatTimestamp } from "@/utils/time";
 import { renderIcon } from "@/utils/helper";
 import { openBatchList } from "@/utils/modal";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const musicStore = useMusicStore();
 
 // 更新日期

src/views/History.vue

@@ -58,8 +58,9 @@
 
 <script setup lang="ts">
 import { useDataStore } from "@/stores";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
+const player = usePlayer();
 const dataStore = useDataStore();
 
 // 清空最近播放

src/views/List/album.vue

@@ -181,10 +181,11 @@ import { useDataStore, useStatusStore } from "@/stores";
 import { debounce } from "lodash-es";
 import { formatTimestamp } from "@/utils/time";
 import { openDescModal, openJumpArtist } from "@/utils/modal";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 import { toLikeAlbum } from "@/utils/auth";
 
 const router = useRouter();
+const player = usePlayer();
 const dataStore = useDataStore();
 const statusStore = useStatusStore();
 

src/views/List/liked.vue

@@ -54,7 +54,7 @@
                 <SvgIcon name="Update" :depth="3" />
                 <n-text>{{ formatTimestamp(playlistDetailData.updateTime) }}</n-text>
               </div>
-              <div v-else-if="playlistDetailData.createTime" class="item">
+              <div v-if="playlistDetailData.createTime" class="item">
                 <SvgIcon name="Time" :depth="3" />
                 <n-text>{{ formatTimestamp(playlistDetailData.createTime) }}</n-text>
               </div>
@@ -176,9 +176,10 @@ import { useDataStore, useStatusStore } from "@/stores";
 import { openBatchList, openDescModal, openUpdatePlaylist } from "@/utils/modal";
 import { formatTimestamp } from "@/utils/time";
 import { isLogin, updateUserLikePlaylist } from "@/utils/auth";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
 const router = useRouter();
+const player = usePlayer();
 const dataStore = useDataStore();
 const statusStore = useStatusStore();
 

src/views/List/playlist.vue

@@ -71,7 +71,7 @@
                 <SvgIcon name="Update" :depth="3" />
                 <n-text>{{ formatTimestamp(playlistDetailData.updateTime) }}</n-text>
               </div>
-              <div v-else-if="playlistDetailData.createTime" class="item">
+              <div v-if="playlistDetailData.createTime" class="item">
                 <SvgIcon name="Time" :depth="3" />
                 <n-text>{{ formatTimestamp(playlistDetailData.createTime) }}</n-text>
               </div>
@@ -226,9 +226,10 @@ import { debounce } from "lodash-es";
 import { useDataStore, useStatusStore } from "@/stores";
 import { openBatchList, openDescModal, openUpdatePlaylist } from "@/utils/modal";
 import { formatTimestamp } from "@/utils/time";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
 const router = useRouter();
+const player = usePlayer();
 const dataStore = useDataStore();
 const statusStore = useStatusStore();
 

src/views/List/radio.vue

@@ -179,12 +179,13 @@ import { renderToolbar } from "@/utils/meta";
 import { debounce } from "lodash-es";
 import { useDataStore, useStatusStore } from "@/stores";
 import { radioAllProgram, radioDetail } from "@/api/radio";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 import { formatTimestamp } from "@/utils/time";
 import { toSubRadio } from "@/utils/auth";
 import { openDescModal } from "@/utils/modal";
 
 const router = useRouter();
+const player = usePlayer();
 const dataStore = useDataStore();
 const statusStore = useStatusStore();
 

src/views/Local/layout.vue

@@ -151,9 +151,10 @@ import { formatSongsList } from "@/utils/format";
 import { uniqBy, flattenDeep, debounce } from "lodash-es";
 import { changeLocalMusicPath, fuzzySearch, renderIcon } from "@/utils/helper";
 import { openBatchList } from "@/utils/modal";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 
 const router = useRouter();
+const player = usePlayer();
 const localStore = useLocalStore();
 const settingStore = useSettingStore();
 

src/views/Video.vue

@@ -132,13 +132,14 @@ import { formatCommentList, formatCoverList } from "@/utils/format";
 import { isArray, isEmpty } from "lodash-es";
 import { formatNumber } from "@/utils/helper";
 import { getComment } from "@/api/comment";
-import player from "@/utils/player";
+import { usePlayer } from "@/utils/player";
 // Plyr
 import Plyr from "plyr";
 import "plyr/dist/plyr.css";
 import { formatTimestamp } from "@/utils/time";
 
 const router = useRouter();
+const player = usePlayer();
 const statusStore = useStatusStore();
 
 // 是否激活