feat(0.4.2): 增加回收站，可以恢复已删除的 mark

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "note_gen",
-    "version": "0.4.1"
+    "version": "0.4.2"
   },
   "tauri": {
     "allowlist": {

src/db.ts

@@ -16,6 +16,7 @@ interface Mark {
   tab: number;
   keywords: string[];
   deleted: boolean;
+  deletedAt?: number;
   createdAt: number;
 }
 
@@ -37,7 +38,7 @@ const db = new Dexie('note-db') as Dexie & {
 
 db.version(1).stores({
   tabs: '++id, name&, total, createdAt',
-  marks: '++id, status, imgPath, content, description, tab, keywords, deleted, createdAt',
+  marks: '++id, status, imgPath, content, description, tab, keywords, deleted, deletedAt, createdAt',
   notes: '++id, title, content, markIds, tab, generating, createdAt',
   folders: '++id, name, createdAt',
 });

src/pages/home/components/NoteManager/NoteToArticle.vue

@@ -77,7 +77,7 @@ async function genArticle() {
   for (let index = 0; index < note.value.markIds.length; index++) {
     const markId = note.value.markIds[index];
     console.log(markId);
-    await db.marks.update(markId, { deleted: true })
+    await db.marks.update(markId, { deleted: true, deletedAt: Date.now() })
   }
   await markStore.getMarks(note.value.tab)
   await db.notes.delete(note.value.id)

src/pages/trash/components/table/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <v-data-table
+    density="compact"
+    fixed-header
+    :height="height"
+    v-model:page="page"
+    :headers="headers"
+    :items="desserts"
+    :items-per-page="itemsPerPage"
+  >
+    <template v-slot:item.index="{ index }">
+      {{ index + 1 + (page - 1) * itemsPerPage }}
+    </template>
+    <template v-slot:item.imgPath="{ value }">
+      <v-img class="w-6 h-6" cover :src="convertFileSrc(value)" />
+    </template>
+    <template v-slot:item.keywords="{ value }">
+      <v-chip
+        v-for="(item, index) in value" :key="index"
+        class="mr-1"
+        size="x-small"
+      >
+        {{ item }}
+      </v-chip>
+    </template>
+    <template v-slot:item.content="{ value }">
+      <v-icon v-tooltip="value" class="ml-1 cursor-pointer" color="primary">mdi-text-search</v-icon>
+    </template>
+    <template v-slot:item.description="{ value }">
+      {{ value }}
+    </template>
+    <template v-slot:item.deletedAt="{ value }">
+      {{ dayjs(value).fromNow() }}
+    </template>
+    <template v-slot:item.actions="{ item }">
+      <v-btn icon="mdi-recycle-variant" variant="text" color="error" size="small" v-tooltip="'还原'" @click="recycle(item)"></v-btn>
+    </template>
+  </v-data-table>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+import { db, Mark } from '../../../../db';
+import { convertFileSrc } from "@tauri-apps/api/tauri";
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime'
+import zh from 'dayjs/locale/zh-cn'
+
+dayjs.locale(zh)
+dayjs.extend(relativeTime)
+
+const page = ref(1)
+const pageCount = ref(0)
+const itemsPerPage = ref(10)
+const headers = [
+  { title: '索引', key: 'index', sortable: false },
+  { title: '记录', key: 'imgPath', sortable: false },
+  { title: '关键词', key: 'keywords', sortable: false },
+  { title: '描述', key: 'description', sortable: false },
+  { title: '内容', key: 'content', sortable: false },
+  { title: '来源于', key: 'tabName' },
+  { title: '删除于', key: 'deletedAt' },
+  { title: '操作', key: 'actions', sortable: false },
+]
+
+interface DeletedMark extends Mark {
+  tabName: string
+}
+
+const desserts = ref<DeletedMark[]>([])
+
+// 获取 marks
+async function getDeletedMarks() {
+  desserts.value = []
+  const res = (await db.marks.filter(item => item.deleted).sortBy('deletedAt')).reverse()
+  res.forEach(async(item) => {
+    const tabName = await db.tabs.get(item.tab).then(tab => tab?.name) || ''
+    desserts.value.push({ tabName, ...item })
+  })
+  pageCount.value = Math.ceil(desserts.value.length / itemsPerPage.value)
+}
+
+const height = computed(() => {
+  // 屏幕高度
+  return window.innerHeight - 62
+})
+
+onMounted(() => {
+  getDeletedMarks()
+})
+
+async function recycle(item: Mark) {
+  await db.marks.update(item.id, { deleted: false, status: false })
+  getDeletedMarks()
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/pages/trash/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="flex-1">
+    <PageTable />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import PageTable from './components/table/index.vue'
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/router.ts

@@ -11,7 +11,7 @@ const routes = [
       { path: '/collection', name: 'collection', component: () => import('./pages/building/index.vue') },
       { path: '/image', name: 'image', component: () => import('./pages/building/index.vue') },
       { path: '/search', name: 'search', component: () => import('./pages/building/index.vue') },
-      { path: '/trash', name: 'trash', component: () => import('./pages/building/index.vue') },
+      { path: '/trash', name: 'trash', component: () => import('./pages/trash/index.vue') },
       { path: '/history', name: 'history', component: () => import('./pages/building/index.vue') },
       { path: '/platform', name: 'platform', component: () => import('./pages/building/index.vue') },
       { path: '/help', name: 'help', component: () => import('./pages/building/index.vue') },

src/stores/marks.ts

@@ -20,7 +20,7 @@ export default defineStore('markStore', () => {
   async function deleteMark(mark: Mark) {
     const index = marks.value.findIndex(item => item.id == mark.id)
     marks.value.splice(index, 1)
-    await db.marks.delete(mark.id)
+    await db.marks.update(mark.id, { deleted: true, deletedAt: Date.now() })
   }
 
   const enabledMarks = computed(() => {