切换上游 api 库 #459

Author: imsyy

electron/server/netease/index.ts

@@ -1,6 +1,6 @@
 import { FastifyInstance, FastifyRequest, FastifyReply } from "fastify";
 import { pathCase } from "change-case";
-import NeteaseCloudMusicApi from "NeteaseCloudMusicApi";
+import NeteaseCloudMusicApi from "@neteaseapireborn/api";
 import log from "../../main/logger";
 
 // 获取数据
@@ -33,12 +33,12 @@ const initNcmAPI = async (fastify: FastifyInstance) => {
   // 主信息
   fastify.get("/netease", (_, reply) => {
     reply.send({
-      name: "NeteaseCloudMusicApi",
-      version: "4.25.0",
-      description: "网易云音乐 Node.js API service",
-      author: "@binaryify",
+      name: "@neteaseapireborn/api",
+      version: "4.29.2",
+      description: "网易云音乐 API Enhanced",
+      author: "@MoeFurina",
       license: "MIT",
-      url: "https://gitlab.com/Binaryify/neteasecloudmusicapi",
+      url: "https://github.com/NeteaseCloudMusicApiEnhanced/api-enhanced",
     });
   });
 

package.json

@@ -40,6 +40,7 @@
     "@electron-toolkit/utils": "^3.0.0",
     "@imsyy/color-utils": "^1.0.2",
     "@material/material-color-utilities": "^0.3.0",
+    "@neteaseapireborn/api": "^4.29.2",
     "@pixi/app": "^7.4.3",
     "@pixi/core": "^7.4.3",
     "@pixi/display": "^7.4.3",
@@ -48,7 +49,6 @@
     "@pixi/filter-color-matrix": "^7.4.3",
     "@pixi/sprite": "^7.4.3",
     "@vueuse/core": "^12.8.2",
-    "NeteaseCloudMusicApi": "^4.27.0",
     "axios": "^1.11.0",
     "change-case": "^5.4.4",
     "dayjs": "^1.11.13",

pnpm-lock.yaml

@@ -176,7 +176,15 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
           children: [...likedPlaylist.value],
         },
       ]
-    : [];
+    : [
+        {
+          key: "local",
+          link: "local",
+          label: "本地歌曲",
+          show: isElectron,
+          icon: renderIcon("FolderMusic"),
+        },
+      ];
 });
 
 // 生成歌单列表

src/components/Layout/Menu.vue

@@ -28,7 +28,7 @@
       />
     </Transition>
     <!-- 默认内容 -->
-    <SearchDefault @to-search="toSearch" />
+    <SearchDefault v-if="settingStore.useOnlineService" @to-search="toSearch" />
     <!-- 搜索结果 -->
     <SearchSuggest @to-search="toSearch" />
     <!-- 右键菜单 -->
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { useStatusStore, useDataStore } from "@/stores";
+import { useStatusStore, useDataStore, useSettingStore } from "@/stores";
 import { searchDefault } from "@/api/search";
 import SearchInpMenu from "@/components/Menu/SearchInpMenu.vue";
 import player from "@/utils/player";
@@ -47,13 +47,16 @@ import { formatSongsList } from "@/utils/format";
 const router = useRouter();
 const dataStore = useDataStore();
 const statusStore = useStatusStore();
+const settingStore = useSettingStore();
 
 // 右键菜单
 const searchInpMenuRef = ref<InstanceType<typeof SearchInpMenu> | null>(null);
 
 // 搜索框数据
 const searchInputRef = ref<HTMLInputElement | null>(null);
-const searchPlaceholder = ref<string>("搜索音乐 / 视频");
+const searchPlaceholder = ref<string>(
+  settingStore.useOnlineService ? "搜索音乐 / 视频" : "搜索本地音乐",
+);
 const searchRealkeyword = ref<string>("");
 
 // 搜索框输入限制
@@ -94,14 +97,23 @@ const updatePlaceholder = async () => {
 
 // 前往搜索
 const toSearch = async (key: any, type: string = "keyword") => {
+  // 关闭搜索框
+  statusStore.searchFocus = false;
+  searchInputRef.value?.blur();
   // 未输入内容且不存在推荐
   if (!key && searchPlaceholder.value === "搜索音乐 / 视频") return;
   if (!key && searchPlaceholder.value !== "搜索音乐 / 视频" && searchRealkeyword.value) {
     key = searchRealkeyword.value?.trim();
   }
-  // 关闭搜索框
-  statusStore.searchFocus = false;
-  searchInputRef.value?.blur();
+  // 本地搜索
+  if (!settingStore.useOnlineService) {
+    // 跳转本地搜索页面
+    router.push({
+      name: "search",
+      query: { keyword: key },
+    });
+    return;
+  }
   // 更新推荐
   updatePlaceholder();
   // 前往搜索
@@ -143,9 +155,10 @@ const toSearch = async (key: any, type: string = "keyword") => {
 };
 
 onMounted(() => {
-  updatePlaceholder();
   // 每分钟更新
-  useIntervalFn(updatePlaceholder, 60 * 1000);
+  if (settingStore.useOnlineService) {
+    useIntervalFn(updatePlaceholder, 60 * 1000, { immediate: true });
+  }
 });
 </script>
 

src/components/Search/SearchInp.vue

@@ -27,7 +27,11 @@
         <!-- 搜索建议 -->
         <Transition name="fade" mode="out-in" @after-leave="calcSearchSuggestHeights">
           <div
-            v-if="Object.keys(searchSuggestData)?.length && searchSuggestData?.order"
+            v-if="
+              Object.keys(searchSuggestData)?.length &&
+              searchSuggestData?.order &&
+              settingStore.useOnlineService
+            "
             ref="searchSuggestRef"
             class="all-suggest"
           >
@@ -60,13 +64,14 @@
 
 <script setup lang="ts">
 import { searchSuggest } from "@/api/search";
-import { useStatusStore } from "@/stores";
+import { useStatusStore, useSettingStore } from "@/stores";
 
 const emit = defineEmits<{
   toSearch: [key: number | string, type: string];
 }>();
 
 const statusStore = useStatusStore();
+const settingStore = useSettingStore();
 
 // 搜索建议数据
 const searchSuggestData = ref<any>({});
@@ -125,7 +130,7 @@ const calcSearchSuggestHeights = () => {
 watchDebounced(
   () => statusStore.searchInputValue,
   (val) => {
-    if (!val || val === "") return;
+    if (!val || val === "" || !settingStore.useOnlineService) return;
     getSearchSuggest(val);
   },
   { debounce: 300 },

src/components/Search/SearchSuggest.vue

@@ -142,13 +142,7 @@
           <n-text class="name">在线服务</n-text>
           <n-text class="tip" :depth="3">是否开启软件的在线服务</n-text>
         </div>
-        <n-switch
-          class="set"
-          :disabled="true"
-          :value="useOnlineService"
-          :round="false"
-          @update:value="modeChange"
-        />
+        <n-switch class="set" :value="useOnlineService" :round="false" @update:value="modeChange" />
       </n-card>
       <n-card class="set-item">
         <div class="label">
@@ -256,12 +250,13 @@
 
 <script setup lang="ts">
 import type { SelectOption } from "naive-ui";
-import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
-import { isElectron } from "@/utils/helper";
+import { useDataStore, useMusicStore, useSettingStore, useStatusStore } from "@/stores";
+import { isDev, isElectron } from "@/utils/helper";
 import { isEmpty } from "lodash-es";
 import themeColor from "@/assets/data/themeColor.json";
 import player from "@/utils/player";
 
+const dataStore = useDataStore();
 const musicStore = useMusicStore();
 const settingStore = useSettingStore();
 const statusStore = useStatusStore();
@@ -319,26 +314,40 @@ const modeChange = (val: boolean) => {
   if (val) {
     window.$dialog.warning({
       title: "开启在线服务",
-      content: "确定开启软件的在线服务？更改将在重启后生效！",
+      content: "确定开启软件的在线服务？更改将在热重载后生效！",
       positiveText: "开启",
       negativeText: "取消",
       onPositiveClick: () => {
         useOnlineService.value = true;
         settingStore.useOnlineService = true;
+        // 清理播放数据
+        dataStore.$reset();
+        musicStore.$reset();
+        // 清空本地数据
+        localStorage.removeItem("data-store");
+        localStorage.removeItem("music-store");
+        // 热重载
+        window.location.reload();
       },
     });
   } else {
     window.$dialog.warning({
       title: "关闭在线服务",
       content:
-        "确定关闭软件的在线服务？将关闭包括搜索、登录、在线音乐播放等在内的全部在线服务，软件将会变为本地播放器！更改将在软件重启后生效！",
+        "确定关闭软件的在线服务？将关闭包括搜索、登录、在线音乐播放等在内的全部在线服务，并且将会退出登录状态，软件将会变为本地播放器！更改将在重启后生效！",
       positiveText: "关闭",
       negativeText: "取消",
       onPositiveClick: () => {
         useOnlineService.value = false;
         settingStore.useOnlineService = false;
+        // 清理播放数据
+        dataStore.$reset();
+        musicStore.$reset();
+        // 清空本地数据
+        localStorage.removeItem("data-store");
+        localStorage.removeItem("music-store");
         // 重启
-        window.electron.ipcRenderer.send("win-reload");
+        if (!isDev) window.electron.ipcRenderer.send("win-reload");
       },
       onNegativeClick: () => {
         useOnlineService.value = true;

src/components/Setting/GeneralSetting.vue

@@ -8,7 +8,7 @@
       </Transition>
       <!-- 真实图片 -->
       <img
-        v-if="src"
+        v-if="imgSrc"
         ref="imgRef"
         :src="imgSrc"
         :key="imgSrc"
@@ -69,10 +69,27 @@ const imageError = (e: Event) => {
 };
 
 // 可视状态变化
-watchOnce(isCanLook, (show) => {
-  emit("update:show", show);
-  if (show) imgSrc.value = props.src;
-});
+watch(
+  isCanLook,
+  (show) => {
+    emit("update:show", show);
+    if (show) imgSrc.value = props.src;
+  },
+  { immediate: true },
+);
+
+// 监听 src 变化
+watch(
+  () => props.src,
+  (val) => {
+    isLoaded.value = false;
+    if (isCanLook.value) {
+      imgSrc.value = val;
+    } else {
+      imgSrc.value = undefined;
+    }
+  },
+);
 </script>
 
 <style lang="scss" scoped>

src/components/UI/s-image.vue

@@ -610,10 +610,11 @@ class Player {
       return;
     }
     this.player.play();
-    statusStore.playStatus = true;
     // 淡入
     await new Promise<void>((resolve) => {
       this.player.once("play", () => {
+        // 在淡入开始时立即设置播放状态
+        statusStore.playStatus = true;
         this.player.fade(0, statusStore.playVolume, this.getFadeTime());
         resolve();
       });
@@ -631,12 +632,14 @@ class Player {
       return;
     }
 
+    // 立即设置播放状态
+    if (changeStatus) statusStore.playStatus = false;
+    
     // 淡出
     await new Promise<void>((resolve) => {
       this.player.fade(statusStore.playVolume, 0, this.getFadeTime());
       this.player.once("fade", () => {
         this.player.pause();
-        if (changeStatus) statusStore.playStatus = false;
         resolve();
       });
     });
@@ -905,8 +908,18 @@ class Player {
     const statusStore = useStatusStore();
     // 获取配置
     const { showTip, play } = options;
+    
+    // 处理随机播放模式
+    let processedData = cloneDeep(data);
+    if (statusStore.playSongMode === "shuffle") {
+      // 保存原始播放列表
+      await dataStore.setOriginalPlayList(cloneDeep(data));
+      // 随机排序
+      processedData = this.shuffleArray(processedData);
+    }
+    
     // 更新列表
-    await dataStore.setPlayList(cloneDeep(data));
+    await dataStore.setPlayList(processedData);
     // 关闭特殊模式
     if (statusStore.playHeartbeatMode) this.toggleHeartMode(false);
     if (statusStore.personalFmMode) statusStore.personalFmMode = false;
@@ -916,15 +929,15 @@ class Player {
       if (musicStore.playSong.id === song.id) {
         if (play) await this.play();
       } else {
-        // 查找索引
-        statusStore.playIndex = data.findIndex((item) => item.id === song.id);
+        // 查找索引（在处理后的列表中查找）
+        statusStore.playIndex = processedData.findIndex((item) => item.id === song.id);
         // 播放
         await this.pause(false);
         await this.initPlayer();
       }
     } else {
       statusStore.playIndex =
-        statusStore.playSongMode === "shuffle" ? Math.floor(Math.random() * data.length) : 0;
+        statusStore.playSongMode === "shuffle" ? Math.floor(Math.random() * processedData.length) : 0;
       // 播放
       await this.pause(false);
       await this.initPlayer();