chore: manage snap list

src/components/Checkbox.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{
+  checked: boolean
+  disabled?: boolean
+}>()
+
+const emit = defineEmits(['change'])
+
+function handleClick() {
+  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>
+    </i>
+</template>

src/pages/main/components/SnapVault.vue

@@ -1,18 +1,26 @@
 <script setup lang="ts">
-import { readDir } from '@tauri-apps/plugin-fs'
+import { readDir, remove } from '@tauri-apps/plugin-fs'
 import { LazyStore } from '@tauri-apps/plugin-store'
-import { onMounted, ref } from 'vue'
+import { confirm } from '@tauri-apps/plugin-dialog'
+import { computed, onMounted, ref } from 'vue'
 import { FileSizeFormatter } from '~/utils/file'
+import Checkbox from '~/components/Checkbox.vue'
 import SnapVaultItem from './SnapVaultItem.vue'
 import SnapVaultItemList from './SnapVaultItemList.vue'
 const store = new LazyStore('settings.json')
 
-const list = ref<{ id: string, image: string }[]>([])
+const list = ref<{ id: string, image: string, checked: boolean }[]>([])
 
 const displayMode = ref<'list' | 'grid'>('list')
 
 const isAscending = ref(false)
 
+const deleteLoading = ref(false)
+
+const isCheckedAll = computed(() => list.value.every(item => item.checked))
+
+const hasChecked = computed(() => list.value.some(item => item.checked))
+
 async function loadData() {
   const val = await store.get<{ value: string }>('screenshot_path')
 
@@ -24,6 +32,34 @@ async function loadData() {
   }))
 }
 
+function onChangeAll(checked: boolean) {
+  list.value = list.value.map(item => ({ ...item, checked }))
+}
+
+function onChange(index: number, checked: boolean) {
+  console.log('onChange', index, checked)
+  let newList = list.value.slice()
+  newList[index].checked = checked
+  list.value = newList
+}
+
+async function handleDelete() {
+  if (deleteLoading.value) return
+  deleteLoading.value = true
+  const newList = list.value.filter(item => !item.checked)
+  const confirmation = await confirm(
+    `是否确认删除 ${ list.value.length } 个文件?`,
+    { title: '确认删除', kind: 'warning' },
+  )
+  if (confirmation) {
+    for (const item of list.value) {
+      await remove(item.image)
+    }
+  }
+  deleteLoading.value = false
+
+}
+
 onMounted(async () => {
   loadData()
 })
@@ -53,8 +89,19 @@ onMounted(async () => {
         </div>
       </div>
     </div>
+    <div class="flex flex-row items-center justify-start gap-4">
+      <div class="flex flex-row items-center justify-center gap-2"> 
+        <span>全部</span>
+        <Checkbox :checked="isCheckedAll" @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">
+          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M12 12h2v12h-2z" fill="currentColor" /><path d="M18 12h2v12h-2z" fill="currentColor" /><path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="#232323" /><path d="M12 2h8v2h-8z" fill="#232323" /></svg>
+        </i>
+      </div>
+    </div>
     <div v-if="displayMode === 'list'" class="grid grid-cols-1 gap-4">
-      <SnapVaultItemList v-for="item in list" :key="item.id" :item="item" @change="loadData" />
+      <SnapVaultItemList v-for="(item, index) in list" :key="item.id" :item="item" @remove="loadData" @change="(val: boolean) => onChange(index, val)" />
     </div>
     <div v-else class="grid grid-cols-3 gap-4">
       <SnapVaultItem v-for="item in list" :key="item.id" :item="item" @change="loadData" />

src/pages/main/components/SnapVaultItemList.vue

@@ -4,15 +4,17 @@ import { remove } from '@tauri-apps/plugin-fs'
 import { useElementHover } from '@vueuse/core'
 import { ref } from 'vue'
 import Button from '~/components/Button.vue'
+import Checkbox from '~/components/Checkbox.vue'
 import FileInfo from './FileInfo.vue'
 import PictureReview from '~/pages/preview/PictureReview.vue'
 
 defineProps<{
-  item: { id: string, image: string }
+  item: { id: string, image: string, checked: boolean }
 }>()
 
 const emit = defineEmits<{
   (e: 'change'): void
+  (e: 'remove'): void
 }>()
 
 const snapHoverableElement = ref()
@@ -28,22 +30,25 @@ async function handleDelete(path: string) {
   )
   if (confirmation) {
     await remove(path)
-    emit('change')
+    emit('remove')
   }
   deleteLoading.value = false
 }
 </script>
 
 <template>
-  <div ref="snapHoverableElement" class="flex flex-row items-center relative rounded-md bg-card p-2">
+  <div ref="snapHoverableElement" class="flex flex-row items-center justify-between gap-2 relative rounded-md bg-card p-2">
+    <div class="flex flex-row items-center justify-center w-8 h-8">
+      <Checkbox :checked="item.checked" @change="() => emit('change', !checked)" />
+    </div>
     <PictureReview :image-path="item.image" width="100" height="60" />
-    <div v-if="isHovered" class="absolute right-3 top-3 z-11 flex flex-row gap-2">
+    <FileInfo :path="item.image" class-name="ml-8 flex flex-1 flex-row items-center justify-between gap-2" />
+    <div class="flex flex-row items-center justify-center gap-2">
       <Button class-name="btn-action-icon" anim @click="() => handleDelete(item.image)">
         <i class="h-4 w-4">
-          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M12 12h2v12h-2z" fill="currentColor" /><path d="M18 12h2v12h-2z" fill="currentColor" /><path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="currentColor" /><path d="M12 2h8v2h-8z" fill="currentColor" /></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M12 12h2v12h-2z" fill="currentColor" /><path d="M18 12h2v12h-2z" fill="currentColor" /><path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="#232323" /><path d="M12 2h8v2h-8z" fill="#232323" /></svg>
         </i>
       </Button>
     </div>
-    <FileInfo :path="item.image" class-name="ml-8 flex flex-1 flex-row items-center justify-between gap-2" />
   </div>
 </template>