1

src/entrypoints/sidepanel/component/historyComponent.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {ref, inject} from 'vue';
-import {Search, Delete} from "@element-plus/icons-vue";
+import {Search, Delete, Paperclip} from "@element-plus/icons-vue";
+import {ElMessageBox,ElMessage} from "element-plus";
 
 const drawer = ref(false);
 const count = ref(0);
@@ -32,12 +33,25 @@ watch(drawer, (newVal) => {
 })
 
 function handleDeleteDB() {
-  deleteDB().then((res) => {
-    console.log('Database deleted successfully.', res);
-    // // 重新加载页面
-    // window.location.reload();
-  }).catch((error: any) => {
-    console.error('Error deleting database:', error);
+  ElMessageBox.confirm(
+      '此操作无法撤销。',
+      '删除全部？',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        showClose: false,
+        type: 'warning',
+        center: true,
+      }
+  ).then(() => {
+    deleteDB().then((res:any) => {
+      console.log('Database deleted successfully.', res);
+      // // 重新加载页面
+      // window.location.reload();
+    }).catch((error: any) => {
+      console.error('Error deleting database:', error);
+    });
+  }).catch(() => {
   });
 }
 
@@ -99,23 +113,43 @@ async function getFirstTwoRecordsFromEachStore(db: any) {
 
 function handleDeleteStore(e: any, item: any) {
   e.stopPropagation();
-  if (item === props.msgUuid) {
-    const result = getNextOrPreviousId(dataList.value, item);
-    emit('currentData', result)
+  if (dataList.value.length < 2){
+    ElMessage({
+      message: '不可删除',
+      grouping: true,
+      showClose: true
+    });
+    return;
   }
-
-  useStore(item).clearAll().then((res: any) => {
-    loading.value = true;
-    getFirstTwoRecordsFromEachStore(db.value).then((data: any) => {
-      dataList.value = data.filter((item: any) => item !== null);
-      count.value = dataList.value.length || 0;
-      console.log(dataList.value)
-      loading.value = false;
-      // console.log('First two records from each store:', data);
-    }).catch((error) => {
-      console.error('Error:', error);
+  ElMessageBox.confirm(
+      '此操作无法撤销。',
+      '要删除此对话吗？',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+        showClose: false,
+        center: true,
+      }
+  ).then(() => {
+    useStore(item).clearAll().then((res: any) => {
+      loading.value = true;
+      getFirstTwoRecordsFromEachStore(db.value).then((data: any) => {
+        dataList.value = data.filter((item: any) => item !== null);
+        count.value = dataList.value.length || 0;
+        loading.value = false;
+        // if (item === props.msgUuid) {
+        //   const result = getNextOrPreviousId(dataList.value, item);
+        //   emit('currentData', result)
+        // }
+      }).catch((error) => {
+        console.error('Error:', error);
+      });
     });
-  });
+  }).catch(() => {
+  })
+
+
 }
 
 
@@ -150,8 +184,11 @@ defineExpose({
     </template>
     <div style="height: 100%;overflow: hidden;" v-loading="loading">
       <div class="his_delete">
-        <el-input style="margin-right: 12px" v-model="input" placeholder="搜索" clearable :prefix-icon="Search"/>
-        <el-button :icon="Delete" circle @click="handleDeleteDB"/>
+        <el-input style="margin-right: 12px" v-model="input" placeholder="搜索" clearable :prefix-icon="Search"
+                  :disabled="true"/>
+        <el-tooltip effect="dark" content="删除全部" placement="top">
+          <el-button :icon="Delete" circle @click="handleDeleteDB"/>
+        </el-tooltip>
       </div>
       <div class="his_content">
         <template v-for="item in dataList" :key="item.storeName">
@@ -161,7 +198,10 @@ defineExpose({
             <p class="ellipsis" style="color: #888888">{{ item.data[1] ? item.data[1].content : '--' }}</p>
             <p class="his_list_op">
               <span>{{ item.data[0]?.timestamp }}</span>
-              <el-button :icon="Delete" link @click="(e:any)=>handleDeleteStore(e,item.storeName)"/>
+              <el-tooltip effect="dark" content="删除" placement="top">
+                <el-button :icon="Delete" link @click="(e:any)=>handleDeleteStore(e,item.storeName)"/>
+              </el-tooltip>
+
             </p>
           </div>
         </template>