✨ feat: 添加歌词背景遮罩

Author: imsyy

.github/workflows/release.yml

@@ -98,18 +98,18 @@ jobs:
       # 构建 Electron App
       - name: Build Windows x64 & ARM64 App
         if: runner.os == 'Windows'
-        run: pnpm build:win -- --x64 --arm64 || true
+        run: pnpm build:win || true
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Build macOS Universal App
         if: runner.os == 'macOS'
-        run: pnpm build:mac -- --x64 --arm64 || true
+        run: pnpm build:mac || true
         shell: bash
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Build Linux x64 & ARM64 App
         if: runner.os == 'Linux'
-        run: pnpm build:linux -- --x64 --arm64 || true
+        run: pnpm build:linux || true
         shell: bash
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

src/assets/data/lyricConfig.ts

@@ -13,6 +13,7 @@ const config: LyricConfig = {
   isDoubleLine: true,
   position: "both",
   limitBounds: false,
+  textBackgroundMask: false,
 };
 
 export default config;

src/components/Setting/LyricsSetting.vue

@@ -526,6 +526,18 @@
           @complete="saveDesktopLyricConfig"
         />
       </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">文本背景遮罩</n-text>
+          <n-text class="tip" :depth="3">防止在某些界面看不清文本</n-text>
+        </div>
+        <n-switch
+          v-model:value="desktopLyricConfig.textBackgroundMask"
+          :round="false"
+          class="set"
+          @update:value="saveDesktopLyricConfig"
+        />
+      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">恢复默认配置</n-text>

src/layout/AppLayout.vue

@@ -91,6 +91,12 @@ const contentRef = ref<HTMLElement | null>(null);
 // 主内容高度
 const { height: contentHeight } = useElementSize(contentRef);
 
+// 离开前提醒
+window.addEventListener("beforeunload", (event) => {
+  event.preventDefault();
+  event.returnValue = "";
+});
+
 watchEffect(() => {
   statusStore.mainContentHeight = contentHeight.value;
 });

src/types/desktop-lyric.d.ts

@@ -47,6 +47,8 @@ export interface LyricConfig {
   position: "left" | "center" | "right" | "both";
   /** 是否限制在屏幕边界内拖动 */
   limitBounds: boolean;
+  /** 文本背景遮罩 */
+  textBackgroundMask: boolean;
 }
 
 /**

src/views/DesktopLyric/index.vue

@@ -64,6 +64,7 @@
             {
               active: line.active,
               'is-yrc': Boolean(lyricData?.yrcData?.length && line.line?.words?.length > 1),
+              'has-background-mask': lyricConfig.textBackgroundMask,
             },
           ]"
           :style="{
@@ -745,6 +746,15 @@ onBeforeUnmount(() => {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      position: relative;
+      &.has-background-mask {
+        .scroll-content {
+          background-color: rgba(0, 0, 0, 0.5);
+          border-radius: 6px;
+          padding: 2px 8px;
+          display: inline-block;
+        }
+      }
       .scroll-content {
         display: inline-block;
         white-space: nowrap;