fix: manage snap delete

src/components/Checkbox.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
 const props = defineProps<{
-  checked: boolean
-  disabled?: boolean
+  checked: boolean // 是否全选中
+  someChecked?: boolean // 是否有选择中的
+  disabled?: boolean // 是否禁用
 }>()
 
 const emit = defineEmits(['change'])
 
 function handleClick() {
+  if (props.disabled) return
   emit('change', !props.checked)
 }
 
 </script>
 <template>
     <i class="h-6 w-6 cursor-pointer" @click="handleClick">
-        <svg v-show="disabled" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 11h10v2H7z" fill="#232323"></path></svg>
-        <svg v-show="!disabled && !checked" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" fill="#232323"></path></svg>
-        <svg v-show="!disabled && checked" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42l-6.59 6.59l-2.58-2.57l-1.42 1.41l4 3.99z" fill="#232323"></path></svg>
+        <svg v-show="someChecked" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 11h10v2H7z" :fill="disabled ? '#999' : '#232323'"></path></svg>
+        <svg v-show="!someChecked && !checked" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" :fill="disabled ? '#999' : '#232323'"></path></svg>
+        <svg v-show="!someChecked && checked" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42l-6.59 6.59l-2.58-2.57l-1.42 1.41l4 3.99z" :fill="disabled ? '#999' : '#232323'"></path></svg>
     </i>
 </template>

src/pages/main/components/SnapVault.vue

@@ -17,7 +17,7 @@ const isAscending = ref(false)
 
 const deleteLoading = ref(false)
 
-const isCheckedAll = computed(() => list.value.every(item => item.checked))
+const isCheckedAll = computed(() => list.value.length > 0 && list.value.every(item => item.checked))
 
 const hasChecked = computed(() => list.value.some(item => item.checked))
 
@@ -47,7 +47,7 @@ function onChange(index: number, checked: boolean) {
 async function handleDelete() {
   if (deleteLoading.value) return
   deleteLoading.value = true
-  const newList = list.value.filter(item => !item.checked)
+  const newList = list.value.filter(item => item.checked)
   const confirmation = await confirm(
     `是否确认删除 ${ newList.length } 个文件?`,
     { title: '确认删除', kind: 'warning' },
@@ -56,6 +56,7 @@ async function handleDelete() {
     for (const item of newList) {
       await remove(item.image)
     }
+    await loadData()
   }
   deleteLoading.value = false
 
@@ -90,10 +91,10 @@ onMounted(async () => {
         </div>
       </div>
     </div>
-    <div class="flex flex-row items-center justify-start gap-4">
+    <div class="flex flex-row items-center justify-start gap-4 my-4">
       <div class="flex flex-row items-center justify-center gap-2"> 
         <span>全部</span>
-        <Checkbox :checked="isCheckedAll" @change="onChangeAll" />
+        <Checkbox :checked="isCheckedAll" :some-checked="hasChecked && !isCheckedAll" :disabled="list.length === 0" @change="onChangeAll" />
       </div>
       <div v-if="hasChecked" class="flex flex-row items-center justify-center gap-2" @click="handleDelete">
         <i class="h-6 w-6 cursor-pointer">