From 1c9109af7321c838f0ec16f0c09473154bc0a478 Mon Sep 17 00:00:00 2001 From: imsyy Date: Thu, 6 Nov 2025 15:04:40 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E6=A1=8C=E9=9D=A2=E6=AD=8C=E8=AF=8D=E5=AD=97=E4=BD=93=E8=B0=83?= =?UTF-8?q?=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- electron/main/ipc/ipc-lyric.ts | 9 +- electron/main/store/index.ts | 29 ++----- electron/main/windows/lyric-window.ts | 26 +++--- src/assets/data/lyricConfig.ts | 16 ++++ src/components/Setting/LyricsSetting.vue | 98 ++++++++++++++++++---- src/types/desktop-lyric.d.ts | 2 + src/views/DesktopLyric/index.vue | 101 ++++++++++++++++++----- tsconfig.node.json | 2 +- 8 files changed, 206 insertions(+), 77 deletions(-) create mode 100644 src/assets/data/lyricConfig.ts diff --git a/electron/main/ipc/ipc-lyric.ts b/electron/main/ipc/ipc-lyric.ts index a20e346..183057f 100644 --- a/electron/main/ipc/ipc-lyric.ts +++ b/electron/main/ipc/ipc-lyric.ts @@ -64,6 +64,11 @@ const initLyricIpc = (): void => { // 更新歌词窗口配置 ipcMain.on("update-desktop-lyric-option", (_, option, callback: boolean = false) => { if (!option || !isWinAlive(lyricWin)) return; + // 增量更新 + const prevOption = store.get("lyric.config"); + if (prevOption) { + option = { ...prevOption, ...option }; + } store.set("lyric.config", option); // 触发窗口更新 if (callback && isWinAlive(lyricWin)) { @@ -124,9 +129,11 @@ const initLyricIpc = (): void => { // 更新高度 ipcMain.on("update-window-height", (_, height) => { if (!isWinAlive(lyricWin)) return; + const store = useStore(); const { width } = lyricWin.getBounds(); // 更新窗口高度 lyricWin.setBounds({ width, height }); + store.set("lyric", { ...store.get("lyric"), height }); }); // 请求歌词数据及配置 @@ -139,8 +146,6 @@ const initLyricIpc = (): void => { // 获取配置 ipcMain.handle("request-desktop-lyric-option", () => { const config = store.get("lyric.config"); - console.log(config); - if (isWinAlive(lyricWin)) { lyricWin.webContents.send("update-desktop-lyric-option", config); } diff --git a/electron/main/store/index.ts b/electron/main/store/index.ts index 2d047f4..2ccda07 100644 --- a/electron/main/store/index.ts +++ b/electron/main/store/index.ts @@ -1,5 +1,7 @@ +import { screen } from "electron"; import { storeLog } from "../logger"; import type { LyricConfig } from "../../../src/types/desktop-lyric"; +import defaultLyricConfig from "../../../src/assets/data/lyricConfig"; import Store from "electron-store"; storeLog.info("🌱 Store init"); @@ -13,9 +15,6 @@ export interface StoreType { maximized?: boolean; }; lyric: { - fontSize: number; - mainColor: string; - shadowColor: string; // 窗口位置 x?: number; y?: number; @@ -32,6 +31,8 @@ export interface StoreType { * @returns Store */ export const useStore = () => { + // 获取主屏幕 + const screenData = screen.getPrimaryDisplay(); return new Store({ defaults: { window: { @@ -39,25 +40,11 @@ export const useStore = () => { height: 800, }, lyric: { - fontSize: 30, - mainColor: "#fff", - shadowColor: "rgba(0, 0, 0, 0.5)", - x: 0, - y: 0, + x: screenData.workAreaSize.width / 2 - 400, + y: screenData.workAreaSize.height - 90, width: 800, - height: 180, - config: { - isLock: false, - playedColor: "#fe7971", - unplayedColor: "#ccc", - stroke: "#000", - strokeWidth: 2, - fontFamily: "system-ui", - fontSize: 24, - isDoubleLine: true, - position: "both", - limitBounds: false, - }, + height: 152, + config: defaultLyricConfig, }, proxy: "", }, diff --git a/electron/main/windows/lyric-window.ts b/electron/main/windows/lyric-window.ts index cea79f7..5f89aaa 100644 --- a/electron/main/windows/lyric-window.ts +++ b/electron/main/windows/lyric-window.ts @@ -43,28 +43,28 @@ class LyricWindow { width: width || 800, height: height || 180, minWidth: 440, - minHeight: 120, - center: !(x && y), // 没有指定位置时居中显示 - // maxWidth: 1600, - // maxHeight: 300, + minHeight: 140, + maxWidth: 1600, + maxHeight: 360, + // 没有指定位置时居中显示 + center: !(x && y), // 窗口位置 x, y, - // transparent: true, - // backgroundColor: "rgba(0, 0, 0, 0)", + transparent: true, + backgroundColor: "rgba(0, 0, 0, 0)", alwaysOnTop: true, resizable: true, movable: true, show: false, // 不在任务栏显示 // skipTaskbar: true, - // // 窗口不能最小化 - // minimizable: false, - // // 窗口不能最大化 - // maximizable: false, - // // 窗口不能进入全屏状态 - // fullscreenable: false, - frame: true, + // 窗口不能最小化 + minimizable: false, + // 窗口不能最大化 + maximizable: false, + // 窗口不能进入全屏状态 + fullscreenable: false, }); if (!this.win) return null; // 加载地址 diff --git a/src/assets/data/lyricConfig.ts b/src/assets/data/lyricConfig.ts new file mode 100644 index 0000000..22598d9 --- /dev/null +++ b/src/assets/data/lyricConfig.ts @@ -0,0 +1,16 @@ +import type { LyricConfig } from "../../types/desktop-lyric"; + +const config: LyricConfig = { + isLock: false, + playedColor: "#fe7971", + unplayedColor: "#ccc", + shadowColor: "rgba(0, 0, 0, 0.5)", + fontFamily: "system-ui", + fontSize: 24, + fontIsBold: false, + isDoubleLine: true, + position: "both", + limitBounds: false, +}; + +export default config; diff --git a/src/components/Setting/LyricsSetting.vue b/src/components/Setting/LyricsSetting.vue index bc3c054..d97ec25 100644 --- a/src/components/Setting/LyricsSetting.vue +++ b/src/components/Setting/LyricsSetting.vue @@ -387,16 +387,58 @@
- 桌面歌词文字大小 + 歌词字体 + 更改桌面歌词字体 +
+ + + + 恢复默认 + + + + + + +
+ 文字加粗 + 是否加粗桌面歌词文字 +
+ + + +
+ 文字大小 翻译或其他文字将会跟随变化
([]); + // 桌面歌词配置 -const defaultDesktopLyricConfig = { - isLock: false, - playedColor: "#fe7971", - unplayedColor: "#ccc", - shadowColor: "rgba(0, 0, 0, 0.5)", - fontFamily: "system-ui", - fontSize: 24, - isDoubleLine: true, - position: "both", - limitBounds: false, -} as LyricConfig; const desktopLyricConfig = reactive({ ...defaultDesktopLyricConfig }); // 获取桌面歌词配置 const getDesktopLyricConfig = async () => { - if (!isElectron) return; const config = await window.electron.ipcRenderer.invoke("request-desktop-lyric-option"); if (config) Object.assign(desktopLyricConfig, config); // 监听更新 @@ -527,8 +562,35 @@ const restoreDesktopLyricConfig = () => { } }; +// 获取全部系统字体 +const getAllSystemFonts = async () => { + const allFonts = await window.electron.ipcRenderer.invoke("get-all-fonts"); + allFonts.map((v: string) => { + // 去除前后的引号 + v = v.replace(/^['"]+|['"]+$/g, ""); + allFontsData.value.push({ + label: v, + value: v, + style: { + fontFamily: v, + }, + }); + }); + // 添加默认选项 + allFontsData.value.unshift({ + label: "系统默认", + value: "system-ui", + style: { + fontFamily: "system-ui", + }, + }); +}; + onMounted(() => { - getDesktopLyricConfig(); + if (isElectron) { + getDesktopLyricConfig(); + getAllSystemFonts(); + } }); diff --git a/src/types/desktop-lyric.d.ts b/src/types/desktop-lyric.d.ts index f746b9b..9694822 100644 --- a/src/types/desktop-lyric.d.ts +++ b/src/types/desktop-lyric.d.ts @@ -29,6 +29,8 @@ export interface LyricConfig { fontFamily: string; /** 字体大小 */ fontSize: number; + /** 字体是否加粗 */ + fontIsBold: boolean; /** 是否双行 */ isDoubleLine: boolean; /** 文本排版位置 */ diff --git a/src/views/DesktopLyric/index.vue b/src/views/DesktopLyric/index.vue index 947257c..cadd384 100644 --- a/src/views/DesktopLyric/index.vue +++ b/src/views/DesktopLyric/index.vue @@ -14,12 +14,6 @@
-
- -
-
- -
{{ lyricData.playName }} @@ -38,6 +32,9 @@ +
+ +
@@ -53,9 +50,12 @@ :style="{ fontSize: lyricConfig.fontSize + 'px', fontFamily: lyricConfig.fontFamily, + fontWeight: lyricConfig.fontIsBold ? 'bold' : 'normal', textShadow: `0 0 4px ${lyricConfig.shadowColor}`, }" :class="['lyric-container', lyricConfig.position]" + :size="0" + justify="space-around" vertical > - -   - +   @@ -80,6 +78,7 @@