🎈 perf: 优化相关引用

Author: imsyy

components.d.ts

@@ -101,6 +101,7 @@ declare module 'vue' {
     NQrCode: typeof import('naive-ui')['NQrCode']
     NRadio: typeof import('naive-ui')['NRadio']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+    NResult: typeof import('naive-ui')['NResult']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSkeleton: typeof import('naive-ui')['NSkeleton']

electron/main/index.ts

@@ -9,7 +9,6 @@ import initAppServer from "../server";
 import { initSingleLock } from "./utils/single-lock";
 import loadWindow from "./windows/load-window";
 import mainWindow from "./windows/main-window";
-import lyricWindow from "./windows/lyric-window";
 import initIpc from "./ipc";
 
 // 屏蔽报错
@@ -19,7 +18,6 @@ process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = "true";
 class MainProcess {
   // 窗口
   mainWindow: BrowserWindow | null = null;
-  lyricWindow: BrowserWindow | null = null;
   loadWindow: BrowserWindow | null = null;
   // 托盘
   mainTray: MainTray | null = null;
@@ -44,9 +42,8 @@ class MainProcess {
       // 启动窗口
       this.loadWindow = loadWindow.create();
       this.mainWindow = mainWindow.create();
-      this.lyricWindow = lyricWindow.create();
       // 注册其他服务
-      this.mainTray = initTray(this.mainWindow!, this.lyricWindow!);
+      this.mainTray = initTray(this.mainWindow!);
       // 注册 IPC 通信
       initIpc();
     });

electron/main/ipc/ipc-file.ts

@@ -1,5 +1,5 @@
 import { app, BrowserWindow, dialog, ipcMain, shell } from "electron";
-import { basename, join, resolve } from "path";
+import { basename, isAbsolute, join, relative, resolve } from "path";
 import { access, readFile, stat, unlink, writeFile } from "fs/promises";
 import { parseFile } from "music-metadata";
 import { getFileID, getFileMD5, metaDataLyricsArrayToLrc } from "../utils/helper";
@@ -371,6 +371,16 @@ const initFileIpc = (): void => {
       }
     },
   );
+
+  // 检查是否是子文件夹
+  ipcMain.handle("check-if-subfolder", (_, localFilesPath: string[], selectedDir: string) => {
+    const resolvedSelectedDir = resolve(selectedDir);
+    const allPaths = localFilesPath.map((p) => resolve(p));
+    return allPaths.some((existingPath) => {
+      const relativePath = relative(existingPath, resolvedSelectedDir);
+      return relativePath && !relativePath.startsWith("..") && !isAbsolute(relativePath);
+    });
+  });
 };
 
 export default initFileIpc;

electron/main/ipc/ipc-lyric.ts

@@ -1,5 +1,4 @@
-import { ipcMain, screen } from "electron";
-import { isAbsolute, relative, resolve } from "path";
+import { BrowserWindow, ipcMain, screen } from "electron";
 import { useStore } from "../store";
 import lyricWindow from "../windows/lyric-window";
 import mainWindow from "../windows/main-window";
@@ -10,30 +9,54 @@ import mainWindow from "../windows/main-window";
 const initLyricIpc = (): void => {
   const store = useStore();
   const mainWin = mainWindow.getWin();
-  const lyricWin = lyricWindow.getWin();
+
+  // 歌词窗口
+  let lyricWin: BrowserWindow | null = null;
 
   // 切换桌面歌词
-  ipcMain.on("change-desktop-lyric", (_event, val: boolean) => {
+  ipcMain.on("toggle-desktop-lyric", (_event, val: boolean) => {
     if (val) {
-      lyricWin?.show();
+      lyricWin = lyricWindow.create();
       lyricWin?.setAlwaysOnTop(true, "screen-saver");
-    } else lyricWin?.hide();
+    } else {
+      lyricWin?.destroy();
+      lyricWin = null;
+    }
+  });
+
+  // 更新歌词窗口数据
+  ipcMain.on("update-desktop-lyric-data", (_, lyricData) => {
+    if (!lyricData || !lyricWin) return;
+    lyricWin?.webContents.send("update-desktop-lyric-data", lyricData);
+  });
+
+  // 更新歌词窗口配置
+  ipcMain.on("update-desktop-lyric-option", (_, option) => {
+    if (!option || !lyricWin) return;
+    lyricWin?.webContents.send("desktop-lyric-option-change", option);
+  });
+
+  // 播放状态更改
+  ipcMain.on("play-status-change", (_, status) => {
+    if (!status || !lyricWin) return;
+    lyricWin?.webContents.send("update-desktop-lyric-data", { playStatus: status });
   });
 
   // 音乐名称更改
   ipcMain.on("play-song-change", (_, title) => {
-    if (!title) return;
-    lyricWin?.webContents.send("play-song-change", title);
+    if (!title || !lyricWin) return;
+    lyricWin?.webContents.send("update-desktop-lyric-data", { playName: title });
   });
 
   // 音乐歌词更改
   ipcMain.on("play-lyric-change", (_, lyricData) => {
-    if (!lyricData) return;
-    lyricWin?.webContents.send("play-lyric-change", lyricData);
+    if (!lyricData || !lyricWin) return;
+    lyricWin?.webContents.send("update-desktop-lyric-data", lyricData);
   });
 
   // 获取窗口位置
   ipcMain.handle("get-window-bounds", () => {
+    if (!lyricWin) return {};
     return lyricWin?.getBounds();
   });
 
@@ -45,7 +68,8 @@ const initLyricIpc = (): void => {
 
   // 移动窗口
   ipcMain.on("move-window", (_, x, y, width, height) => {
-    lyricWin?.setBounds({ x, y, width, height });
+    if (!lyricWin) return;
+    lyricWin.setBounds({ x, y, width, height });
     // 保存配置
     store.set("lyric", { ...store.get("lyric"), x, y, width, height });
     // 保持置顶
@@ -82,7 +106,8 @@ const initLyricIpc = (): void => {
 
   // 关闭桌面歌词
   ipcMain.on("closeDesktopLyric", () => {
-    lyricWin?.hide();
+    if (!lyricWin) return;
+    lyricWin.hide();
     mainWin?.webContents.send("closeDesktopLyric");
   });
 
@@ -96,16 +121,6 @@ const initLyricIpc = (): void => {
       lyricWin.setIgnoreMouseEvents(false);
     }
   });
-
-  // 检查是否是子文件夹
-  ipcMain.handle("check-if-subfolder", (_, localFilesPath: string[], selectedDir: string) => {
-    const resolvedSelectedDir = resolve(selectedDir);
-    const allPaths = localFilesPath.map((p) => resolve(p));
-    return allPaths.some((existingPath) => {
-      const relativePath = relative(existingPath, resolvedSelectedDir);
-      return relativePath && !relativePath.startsWith("..") && !isAbsolute(relativePath);
-    });
-  });
 };
 
 export default initLyricIpc;

electron/main/ipc/ipc-tray.ts

@@ -34,7 +34,7 @@ const initTrayIpc = (): void => {
   });
 
   // 桌面歌词开关
-  ipcMain.on("change-desktop-lyric", (_, val: boolean) => {
+  ipcMain.on("toggle-desktop-lyric", (_, val: boolean) => {
     tray?.setDesktopLyricShow(val);
   });
 

electron/main/tray/index.ts

@@ -10,6 +10,7 @@ import {
 import { isWin, appName } from "../utils/config";
 import { join } from "path";
 import { trayLog } from "../logger";
+import lyricWindow from "../windows/lyric-window";
 
 // 播放模式
 type PlayMode = "repeat" | "repeat-once" | "shuffle";
@@ -49,7 +50,7 @@ const trayIcon = (filename: string) => {
 // 托盘菜单
 const createTrayMenu = (
   win: BrowserWindow,
-  lyricWin: BrowserWindow,
+  lyricWin: BrowserWindow | null,
 ): MenuItemConstructorOptions[] => {
   // 区分明暗图标
   const showIcon = (iconName: string) => {
@@ -145,8 +146,12 @@ const createTrayMenu = (
       id: "toogleDesktopLyricLock",
       label: `${desktopLyricLock ? "解锁" : "锁定"}桌面歌词`,
       icon: showIcon(desktopLyricLock ? "lock" : "unlock"),
-      visible: desktopLyricShow,
-      click: () => lyricWin.webContents.send("toogleDesktopLyricLock", !desktopLyricLock),
+      visible: desktopLyricShow && lyricWin !== null,
+      click: () => {
+        if (lyricWin) {
+          lyricWin.webContents.send("toogleDesktopLyricLock", !desktopLyricLock);
+        }
+      },
     },
     {
       type: "separator",
@@ -182,22 +187,22 @@ const createTrayMenu = (
 class CreateTray implements MainTray {
   // 窗口
   private _win: BrowserWindow;
-  private _lyricWin: BrowserWindow;
+  private _lyricWin: BrowserWindow | null;
   // 托盘
   private _tray: Tray;
   // 菜单
   private _menu: MenuItemConstructorOptions[];
   private _contextMenu: Menu;
 
-  constructor(win: BrowserWindow, lyricWin: BrowserWindow) {
+  constructor(win: BrowserWindow) {
     // 托盘图标
     const icon = trayIcon(isWin ? "tray.ico" : "tray@32.png").resize({
       height: 32,
       width: 32,
     });
     // 初始化数据
     this._win = win;
-    this._lyricWin = lyricWin;
+    this._lyricWin = lyricWindow.getWin();
     this._tray = new Tray(icon);
     this._menu = createTrayMenu(this._win, this._lyricWin);
     this._contextMenu = Menu.buildFromTemplate(this._menu);
@@ -301,10 +306,10 @@ class CreateTray implements MainTray {
  * @param lyricWin 歌词窗口
  * @returns 托盘实例
  */
-export const initTray = (win: BrowserWindow, lyricWin: BrowserWindow) => {
+export const initTray = (win: BrowserWindow) => {
   try {
     trayLog.info("🚀 Tray Process Startup");
-    const tray = new CreateTray(win, lyricWin);
+    const tray = new CreateTray(win);
     // 保存单例实例
     mainTrayInstance = tray;
     return tray;

electron/main/utils/config.ts

@@ -41,6 +41,15 @@ export const mainWinUrl =
     ? process.env["ELECTRON_RENDERER_URL"]
     : `http://localhost:${port}`;
 
+/**
+ * 歌词窗口加载地址
+ * @returns string
+ */
+export const lyricWinUrl =
+  isDev && process.env["ELECTRON_RENDERER_URL"]
+    ? `${process.env["ELECTRON_RENDERER_URL"]}/#/desktop-lyric`
+    : `http://localhost:${port}/#/desktop-lyric`;
+
 /**
  * 加载窗口地址
  * @returns string

electron/main/windows/lyric-window.ts

@@ -1,7 +1,7 @@
 import { BrowserWindow } from "electron";
 import { createWindow } from "./index";
 import { useStore } from "../store";
-import { join } from "path";
+import { lyricWinUrl } from "../utils/config";
 
 class LyricWindow {
   private win: BrowserWindow | null = null;
@@ -12,6 +12,10 @@ class LyricWindow {
    */
   private event(): void {
     if (!this.win) return;
+    // 准备好显示
+    this.win.on("ready-to-show", () => {
+      this.win?.show();
+    });
     // 歌词窗口缩放
     this.win?.on("resized", () => {
       const store = useStore();
@@ -56,7 +60,7 @@ class LyricWindow {
     });
     if (!this.win) return null;
     // 加载地址
-    this.win.loadFile(join(__dirname, "../main/web/lyric.html"));
+    this.win.loadURL(lyricWinUrl);
     // 窗口事件
     this.event();
     return this.win;

src/api/song.ts

@@ -1,4 +1,4 @@
-import { isElectron } from "@/utils/helper";
+import { isElectron } from "@/utils/env";
 import { songLevelData } from "@/utils/meta";
 import request from "@/utils/request";
 

src/components/Card/SongCard.vue

@@ -153,13 +153,14 @@
 <script setup lang="ts">
 import type { SongType } from "@/types/main";
 import { useStatusStore, useMusicStore, useDataStore } from "@/stores";
-import { formatNumber, isElectron } from "@/utils/helper";
+import { formatNumber } from "@/utils/helper";
 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 blob from "@/utils/blob";
+import { isElectron } from "@/utils/env";
 
 const props = defineProps<{
   // 歌曲