🎈 perf: 清理旧的 blob URL

Author: imsyy

src/components/UI/s-image.vue

@@ -1,26 +1,24 @@
 <!-- 图片组件 -->
 <template>
-  <Transition name="fade" mode="out-in">
-    <div ref="imgContainer" :key="src" class="s-image">
-      <!-- 加载图片 -->
-      <Transition name="fade">
-        <img v-if="!isLoaded" :src="defaultSrc" class="loading" alt="loading" />
-      </Transition>
-      <!-- 真实图片 -->
-      <img
-        v-if="imgSrc"
-        ref="imgRef"
-        :src="imgSrc"
-        :key="imgSrc"
-        :alt="alt || 'image'"
-        :class="['cover', { loaded: isLoaded }]"
-        :decoding="decodeAsync ? 'async' : 'auto'"
-        :loading="nativeLazy ? 'lazy' : 'eager'"
-        @load="imageLoaded"
-        @error="imageError"
-      />
-    </div>
-  </Transition>
+  <div ref="imgContainer" :key="src" class="s-image">
+    <!-- 加载图片 -->
+    <Transition name="fade">
+      <img v-if="!isLoaded" :src="defaultSrc" class="loading" alt="loading" />
+    </Transition>
+    <!-- 真实图片 -->
+    <img
+      v-if="imgSrc"
+      ref="imgRef"
+      :src="imgSrc"
+      :key="imgSrc"
+      :alt="alt || 'image'"
+      :class="['cover', { loaded: isLoaded }]"
+      :decoding="decodeAsync ? 'async' : 'auto'"
+      :loading="nativeLazy ? 'lazy' : 'eager'"
+      @load="imageLoaded"
+      @error="imageError"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">

src/layout/AppLayout.vue

@@ -79,6 +79,7 @@
 
 <script setup lang="ts">
 import { useMusicStore, useStatusStore, useSettingStore } from "@/stores";
+import blob from "@/utils/blob";
 import init from "@/utils/init";
 
 const musicStore = useMusicStore();
@@ -94,6 +95,8 @@ const { height: contentHeight } = useElementSize(contentRef);
 // 离开前提醒
 window.addEventListener("beforeunload", (event) => {
   event.preventDefault();
+  // 释放所有 blob URL
+  blob.revokeAllBlobURLs();
   event.returnValue = "";
 });
 

src/stores/music.ts

@@ -3,6 +3,7 @@ import type { SongType } from "@/types/main";
 import { isElectron } from "@/utils/env";
 import { cloneDeep } from "lodash-es";
 import { SongLyric } from "@/types/lyric";
+import blob from "@/utils/blob";
 
 interface MusicState {
   playSong: SongType;
@@ -80,6 +81,16 @@ export const useMusicStore = defineStore("music", {
   actions: {
     /** 重置音乐数据 */
     resetMusicData() {
+      // 清理旧的 blob URL（如果 cover 是 blob URL）
+      const oldCover = this.playSong.cover;
+      const oldPath = this.playSong.path;
+      if (oldCover && oldCover.startsWith("blob:") && oldPath) {
+        try {
+          blob.revokeBlobURL(oldPath);
+        } catch (e) {
+          // 忽略错误
+        }
+      }
       this.playSong = { ...defaultMusicData };
       this.setSongLyric({ lrcData: [], yrcData: [] }, true);
       if (isElectron) {

src/utils/player.ts

@@ -451,6 +451,16 @@ class Player {
     try {
       const musicStore = useMusicStore();
       const statusStore = useStatusStore();
+      // 清理旧的 blob URL（如果存在）
+      const oldCover = musicStore.playSong.cover;
+      const oldPath = musicStore.playSong.path;
+      if (oldCover && oldCover.startsWith("blob:") && oldPath && oldPath !== path) {
+        try {
+          blob.revokeBlobURL(oldPath);
+        } catch (e) {
+          // 忽略错误
+        }
+      }
       // 获取封面数据
       const coverData = await window.electron.ipcRenderer.invoke("get-music-cover", path);
       if (coverData) {