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);
}
// 磁盘上实际存在的文件路径集合(扫描时收集)
const diskFilePaths = new Set<string>();
// 遍历每个文件夹进行扫描
for (const folderPath of folderPaths.value) {
try {
@@ -141,6 +144,11 @@ export const useLocalMusicStore = defineStore(
const { files } = result;
scanProgress.value += files.length;
// 记录磁盘上存在的文件
for (const file of files) {
diskFilePaths.add(file.path);
}
// 2. 增量扫描:基于修改时间筛选需重新解析的文件
const parseTargets: string[] = [];
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 重新加载完整列表
musicList.value = await localDB.getAllData(LOCAL_MUSIC_STORE);
} catch (error) {
+10 -11
View File
@@ -1,9 +1,10 @@
<template>
<div class="local-music-page h-full w-full bg-white dark:bg-black transition-colors duration-500">
<n-scrollbar class="h-full">
<div class="local-music-content pb-32">
<div
class="local-music-page h-full w-full overflow-hidden bg-white dark:bg-black transition-colors duration-500"
>
<div class="local-music-content h-full flex flex-col">
<!-- 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
@@ -48,7 +49,7 @@
<!-- Action Bar (Sticky) -->
<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">
<!-- 左侧搜索框 -->
@@ -111,7 +112,7 @@
</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
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 class="list-section page-padding-x mt-6">
<section class="list-section page-padding-x mt-6 flex-1 min-h-0">
<!-- 空状态 -->
<div
v-if="!localMusicStore.scanning && filteredList.length === 0"
@@ -146,10 +147,9 @@
</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
class="song-virtual-list"
style="max-height: calc(100vh - 280px)"
class="song-virtual-list h-full"
:items="filteredSongResults"
:item-size="70"
item-resizable
@@ -166,7 +166,6 @@
</div>
</section>
</div>
</n-scrollbar>
<!-- 文件夹管理抽屉 -->
<n-drawer v-model:show="showFolderManager" :width="400" placement="right">