fix(local-music): 扫描自动清理已删除文件,修复双滚动条

- scanFolders() 扫描时收集磁盘文件路径,完成后自动移除 IndexedDB 中已删除的条目
- 移除外层 n-scrollbar,改用 flex 布局,n-virtual-list 作为唯一滚动容器
This commit is contained in:
alger
2026-03-27 23:00:54 +08:00
parent bc46024499
commit c28368f783
2 changed files with 164 additions and 150 deletions
+15
View File
@@ -125,6 +125,9 @@ export const useLocalMusicStore = defineStore(
cachedMap.set(entry.filePath, entry); cachedMap.set(entry.filePath, entry);
} }
// 磁盘上实际存在的文件路径集合(扫描时收集)
const diskFilePaths = new Set<string>();
// 遍历每个文件夹进行扫描 // 遍历每个文件夹进行扫描
for (const folderPath of folderPaths.value) { for (const folderPath of folderPaths.value) {
try { try {
@@ -141,6 +144,11 @@ export const useLocalMusicStore = defineStore(
const { files } = result; const { files } = result;
scanProgress.value += files.length; scanProgress.value += files.length;
// 记录磁盘上存在的文件
for (const file of files) {
diskFilePaths.add(file.path);
}
// 2. 增量扫描:基于修改时间筛选需重新解析的文件 // 2. 增量扫描:基于修改时间筛选需重新解析的文件
const parseTargets: string[] = []; const parseTargets: string[] = [];
for (const file of files) { for (const file of files) {
@@ -168,6 +176,13 @@ export const useLocalMusicStore = defineStore(
} }
} }
// 4. 清理已删除文件:从 IndexedDB 移除磁盘上不存在的条目
for (const [filePath, entry] of cachedMap) {
if (!diskFilePaths.has(filePath)) {
await localDB.deleteData(LOCAL_MUSIC_STORE, entry.id);
}
}
// 5. 从 IndexedDB 重新加载完整列表 // 5. 从 IndexedDB 重新加载完整列表
musicList.value = await localDB.getAllData(LOCAL_MUSIC_STORE); musicList.value = await localDB.getAllData(LOCAL_MUSIC_STORE);
} catch (error) { } catch (error) {
+10 -11
View File
@@ -1,9 +1,10 @@
<template> <template>
<div class="local-music-page h-full w-full bg-white dark:bg-black transition-colors duration-500"> <div
<n-scrollbar class="h-full"> class="local-music-page h-full w-full overflow-hidden bg-white dark:bg-black transition-colors duration-500"
<div class="local-music-content pb-32"> >
<div class="local-music-content h-full flex flex-col">
<!-- Hero Section --> <!-- Hero Section -->
<section class="hero-section relative overflow-hidden rounded-tl-2xl"> <section class="hero-section relative overflow-hidden rounded-tl-2xl shrink-0">
<!-- 背景模糊效果 --> <!-- 背景模糊效果 -->
<div class="hero-bg absolute inset-0 -top-20"> <div class="hero-bg absolute inset-0 -top-20">
<div <div
@@ -48,7 +49,7 @@
<!-- Action Bar (Sticky) --> <!-- Action Bar (Sticky) -->
<section <section
class="action-bar sticky top-0 z-20 page-padding-x py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50" class="action-bar z-20 shrink-0 page-padding-x py-3 md:py-4 bg-white/80 dark:bg-black/80 backdrop-blur-xl border-b border-neutral-100 dark:border-neutral-800/50"
> >
<div class="flex items-center justify-between gap-4"> <div class="flex items-center justify-between gap-4">
<!-- 左侧搜索框 --> <!-- 左侧搜索框 -->
@@ -111,7 +112,7 @@
</section> </section>
<!-- 扫描进度提示 --> <!-- 扫描进度提示 -->
<section v-if="localMusicStore.scanning" class="page-padding-x mt-6"> <section v-if="localMusicStore.scanning" class="page-padding-x mt-6 shrink-0">
<div <div
class="flex items-center gap-4 p-4 rounded-2xl bg-primary/5 dark:bg-primary/10 border border-primary/20" class="flex items-center gap-4 p-4 rounded-2xl bg-primary/5 dark:bg-primary/10 border border-primary/20"
> >
@@ -128,7 +129,7 @@
</section> </section>
<!-- 歌曲列表 --> <!-- 歌曲列表 -->
<section class="list-section page-padding-x mt-6"> <section class="list-section page-padding-x mt-6 flex-1 min-h-0">
<!-- 空状态 --> <!-- 空状态 -->
<div <div
v-if="!localMusicStore.scanning && filteredList.length === 0" v-if="!localMusicStore.scanning && filteredList.length === 0"
@@ -146,10 +147,9 @@
</div> </div>
<!-- 虚拟列表 --> <!-- 虚拟列表 -->
<div v-else-if="filteredList.length > 0" class="song-list-container"> <div v-else-if="filteredList.length > 0" class="song-list-container h-full">
<n-virtual-list <n-virtual-list
class="song-virtual-list" class="song-virtual-list h-full"
style="max-height: calc(100vh - 280px)"
:items="filteredSongResults" :items="filteredSongResults"
:item-size="70" :item-size="70"
item-resizable item-resizable
@@ -166,7 +166,6 @@
</div> </div>
</section> </section>
</div> </div>
</n-scrollbar>
<!-- 文件夹管理抽屉 --> <!-- 文件夹管理抽屉 -->
<n-drawer v-model:show="showFolderManager" :width="400" placement="right"> <n-drawer v-model:show="showFolderManager" :width="400" placement="right">