From fcca51cd07d9c158150261950bf250b0a6b0c596 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Sun, 4 Sep 2022 13:28:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=8D=95=E6=9D=A1=E5=8E=86=E5=8F=B2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/preload.js         | 18 ++++++++++++++++--
 src/cpns/ClipItemList.vue | 28 +++++++++++-----------------
 src/cpns/ClipSwitch.vue   |  3 ++-
 src/views/Main.vue        | 23 ++++++++++++++++++-----
 4 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/public/preload.js b/public/preload.js
index 0bd7a67..11b1f11 100644
--- a/public/preload.js
+++ b/public/preload.js
@@ -106,6 +106,16 @@ class DB {
     })
     this.updateDataBaseLocal()
   }
+  removeItemViaId(id) {
+    for (const item of this.dataBase.data) {
+      if (item.id === id) {
+        this.dataBase.data.splice(this.dataBase.data.indexOf(item), 1)
+        this.updateDataBaseLocal()
+        return true
+      }
+    }
+    return false
+  }
 }
 
 const pbpaste = async () => {
@@ -171,12 +181,15 @@ const paste = () => {
   else utools.simulateKeyboardTap('v', 'ctrl')
 }
 
+const db = new DB(DBPath)
+db.init()
+
+const remove = (item) => db.removeItemViaId(item.id)
+
 const focus = () => document.querySelector('.clip-search input')?.focus()
 const toTop = () => (document.scrollingElement.scrollTop = 0)
 const resetNav = () => document.querySelectorAll('.clip-switch-item')[0]?.click()
 
-const db = new DB(DBPath)
-db.init()
 watchClipboard(db, (item) => {
   // 此函数不断执行
   if (!item) return
@@ -204,6 +217,7 @@ utools.onPluginEnter(() => {
 window.db = db
 window.copy = copy
 window.paste = paste
+window.remove = remove
 window.openFile = utools.shellOpenPath
 window.getIcon = utools.getFileIcon
 window.focus = focus
diff --git a/src/cpns/ClipItemList.vue b/src/cpns/ClipItemList.vue
index 1078997..3cc6e80 100644
--- a/src/cpns/ClipItemList.vue
+++ b/src/cpns/ClipItemList.vue
@@ -75,7 +75,7 @@ const props = defineProps({
     required: true
   }
 })
-const emit = defineEmits(['onDataChange'])
+const emit = defineEmits(['onDataChange', 'onDataRemove'])
 const handleItemClick = (ev, item) => {
   const { button } = ev
   if (button === 0) {
@@ -91,26 +91,20 @@ const handleDataClick = (item) => emit('onDataChange', item)
 const activeIndex = ref(0)
 const handleMouseOver = (index) => (activeIndex.value = index)
 const operation = [
-  {
-    id: 'collect',
-    title: '收藏'
-  },
-  {
-    id: 'big-bang',
-    title: '分词'
-  },
-  {
-    id: 'delete',
-    title: '删除'
-  }
+  { id: 'copy', title: '复制' },
+  { id: 'collect', title: '收藏' },
+  { id: 'remove', title: '删除' }
 ]
-const handleOperateClick = (type) => {
-  switch (type) {
+const handleOperateClick = ({ id, item }) => {
+  switch (id) {
+    case 'copy':
+      window.copy(item)
+      break
     case 'collect':
       break
-    case 'big-bang':
-      break
     case 'remove':
+      window.remove(item)
+      emit('onDataRemove')
       break
   }
 }
diff --git a/src/cpns/ClipSwitch.vue b/src/cpns/ClipSwitch.vue
index 1962b39..3c7bdab 100644
--- a/src/cpns/ClipSwitch.vue
+++ b/src/cpns/ClipSwitch.vue
@@ -21,7 +21,8 @@ const tabs = ref([
   { name: '📚 全部', type: 'all' },
   { name: '📋 文字', type: 'text' },
   { name: '⛺ 图片', type: 'image' },
-  { name: '📂 文件', type: 'file' }
+  { name: '📂 文件', type: 'file' },
+  { name: '⭐ 收藏', type: 'collect' }
 ])
 const activeTab = ref('all')
 const emit = defineEmits(['onNavClick'])
diff --git a/src/views/Main.vue b/src/views/Main.vue
index c487d26..9576336 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -13,7 +13,12 @@
     </ClipSwitch>
     <div class="clip-break"></div>
     <div class="clip-empty-status" v-if="showList.length === 0">📪 无记录</div>
-    <ClipItemList :showList="showList" :fullData="fullData" @onDataChange="toggleFullData">
+    <ClipItemList
+      :showList="showList"
+      :fullData="fullData"
+      @onDataChange="toggleFullData"
+      @onDataRemove="handleDataRemove"
+    >
     </ClipItemList>
   </div>
 </template>
@@ -67,6 +72,14 @@ const toggleFullData = (item) => {
   fullDataShow.value = !fullDataShow.value
 }
 
+const ClipSwitchRef = ref()
+
+const handleDataRemove = () => {
+  // 此函数须在挂载后执行
+  list.value = window.db.dataBase.data
+  updateShowList(ClipSwitchRef.value.activeTab)
+}
+
 const restoreDataBase = () => {
   // 情况数据库
   const flag = window.confirm('确定要清空剪贴板记录吗?')
@@ -76,11 +89,11 @@ const restoreDataBase = () => {
   }
 }
 
-const ClipSwitchRef = ref()
 onMounted(() => {
   // 获取挂载的导航组件 Ref
   const activeTab = computed(() => ClipSwitchRef.value.activeTab)
   const toggleNav = ClipSwitchRef.value.toggleNav
+  const tabs = ClipSwitchRef.value.tabs
 
   // 初始化数据
   list.value = window.db.dataBase.data
@@ -129,9 +142,9 @@ onMounted(() => {
       (ctrlKey && (key === 'F' || key === 'f')) || (ctrlKey && (key === 'L' || key === 'l'))
     const isExit = key === 'Escape'
     if (isTab) {
-      const list = ['all', 'text', 'image', 'file']
-      const index = list.indexOf(activeTab.value)
-      const target = index === list.length - 1 ? list[0] : list[index + 1]
+      const tabTypes = tabs.map((item) => item.type)
+      const index = tabTypes.indexOf(activeTab.value)
+      const target = index === tabTypes.length - 1 ? tabTypes[0] : tabTypes[index + 1]
       toggleNav(target)
       updateShowList(activeTab.value)
     } else if (isSearch) {