From 096a9559ab5c19680684a3ff68d780aab2f936bd Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Sun, 4 Sep 2022 18:33:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=9B=BE=E6=A0=87=E5=B1=95=E7=A4=BA=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8F=96=E6=B6=88=E6=94=B6=E8=97=8F=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cpns/ClipItemList.vue          | 22 ++++++++++++++--------
 src/style/cpns/clip-item-list.less |  3 ++-
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/cpns/ClipItemList.vue b/src/cpns/ClipItemList.vue
index e997a7a..2f92a5d 100644
--- a/src/cpns/ClipItemList.vue
+++ b/src/cpns/ClipItemList.vue
@@ -48,18 +48,19 @@
         </div>
       </div>
       <div class="clip-operate" v-show="activeIndex === index">
-        <template v-for="{ id, title } of operation">
+        <template v-for="{ id, title, icon } of operation">
           <div
             v-if="
-              (id !== 'collect' && id !== 'view') ||
+              (id !== 'collect' && id !== 'view' && id !== 'un-collect') ||
               (id === 'collect' && item.collect !== true) ||
+              (id === 'un-collect' && item.collect === true) ||
               (id === 'view' && item.type !== 'image')
             "
             :class="id"
             :title="title"
             @click.stop="handleOperateClick({ id, item })"
           >
-            {{ title.slice(0, 1) }}
+            {{ icon }}
           </div>
         </template>
       </div>
@@ -100,10 +101,11 @@ const handleDataClick = (item) => emit('onDataChange', item)
 const activeIndex = ref(0)
 const handleMouseOver = (index) => (activeIndex.value = index)
 const operation = [
-  { id: 'copy', title: '复制' },
-  { id: 'view', title: '查看全部' },
-  { id: 'collect', title: '收藏' },
-  { id: 'remove', title: '删除' }
+  { id: 'copy', title: '复制', icon: '📄' },
+  { id: 'view', title: '查看全部', icon: '💬' },
+  { id: 'collect', title: '收藏', icon: '⭐' },
+  { id: 'un-collect', title: '取消收藏', icon: '📤' },
+  { id: 'remove', title: '删除', icon: '❌' }
 ]
 const handleOperateClick = ({ id, item }) => {
   switch (id) {
@@ -114,7 +116,11 @@ const handleOperateClick = ({ id, item }) => {
       emit('onDataChange', item)
       break
     case 'collect':
-      item.collect = true // important
+      item.collect = true
+      window.db.updateDataBaseLocal(db)
+      break
+    case 'un-collect':
+      item.collect = undefined
       window.db.updateDataBaseLocal(db)
       break
     case 'remove':
diff --git a/src/style/cpns/clip-item-list.less b/src/style/cpns/clip-item-list.less
index f9a8af6..fdbce87 100644
--- a/src/style/cpns/clip-item-list.less
+++ b/src/style/cpns/clip-item-list.less
@@ -53,6 +53,7 @@
         overflow: hidden;
         word-break: break-all;
         max-height: 150px;
+        max-width: 500px;
         padding: 5px;
         white-space: pre-wrap;
         flex-direction: column;
@@ -80,7 +81,7 @@
       align-items: center;
       justify-content: center;
       min-width: 150px;
-      padding: 10px;
+      padding: 0px 10px;
       & * {
         display: flex;
         align-items: center;