feat(am-bg): 支持设置背景动画渲染比例

Author: MoYingJi

src/components/Player/PlayerBackground.vue

@@ -23,6 +23,7 @@
         :flowSpeed="flowSpeed"
         :hasLyric="musicStore.isHasLrc"
         :lowFreqVolume="lowFreqVolume"
+        :renderScale="settingStore.playerBackgroundRenderScale ?? 0.5"
       />
     </Transition>
   </div>
@@ -55,8 +56,6 @@ const { pause: pauseRaf, resume: resumeRaf } = useRafFn(
       statusStore.playStatus
     ) {
       lowFreqVolume.value = player.getLowFrequencyVolume();
-    } else {
-      lowFreqVolume.value = 1.0;
     }
   },
   { immediate: false },
@@ -70,8 +69,8 @@ watch(
     statusStore.playStatus,
   ],
   ([enabled, bgType, playing]) => {
-    if (enabled && bgType === "animation" && playing) {
-      resumeRaf();
+    if (enabled && bgType === "animation") {
+      playing ? resumeRaf() : pauseRaf();
     } else {
       pauseRaf();
       lowFreqVolume.value = 1.0;

src/components/Setting/PlaySetting.vue

@@ -260,6 +260,23 @@
             placeholder="请输入背景动画流动速度"
           />
         </n-card>
+        <n-card class="set-item">
+          <div class="label">
+            <n-text class="name">背景渲染缩放比例</n-text>
+            <n-text class="tip" :depth="3">设置当前渲染缩放比例，默认 0.5</n-text>
+            <n-text class="tip" :depth="3">
+              适当提高此值（如 1.0 或 1.5）可以减少分界线锯齿，让效果更好，但也会增加显卡压力
+            </n-text>
+          </div>
+          <n-input-number
+            v-model:value="settingStore.playerBackgroundRenderScale"
+            :min="0.1"
+            :max="10"
+            :show-button="false"
+            class="set"
+            placeholder="请输入背景渲染缩放比例"
+          />
+        </n-card>
         <n-card class="set-item">
           <div class="label">
             <n-text class="name">背景动画暂停时暂停</n-text>

src/stores/setting.ts

@@ -149,6 +149,8 @@ export interface SettingState {
   playerBackgroundPause: boolean;
   /** 背景动画是否响应低频音量 */
   playerBackgroundLowFreqVolume: boolean;
+  /** 背景动画渲染比例 */
+  playerBackgroundRenderScale: number;
   /** 播放器元素自动隐藏 */
   autoHidePlayerMeta: boolean;
   /** 记忆最后进度 */
@@ -359,6 +361,7 @@ export const useSettingStore = defineStore("setting", {
     playerBackgroundFlowSpeed: 4,
     playerBackgroundPause: false,
     playerBackgroundLowFreqVolume: false,
+    playerBackgroundRenderScale: 0.5,
     autoHidePlayerMeta: true,
     memoryLastSeek: true,
     progressTooltipShow: true,