From 5bf7d33936c73aed7e897975d201ccd5b3454ac2 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Thu, 8 Sep 2022 19:37:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=95=BF=E5=86=85=E5=AE=B9=E4=BB=A5?=
 =?UTF-8?q?=E8=93=9D=E8=89=B2=E9=AB=98=E4=BA=AE=E6=98=BE=E7=A4=BA=20?=
 =?UTF-8?q?=E4=B8=8D=E5=86=8D=E6=8F=90=E4=BE=9B`=E6=9F=A5=E7=9C=8B?=
 =?UTF-8?q?=E5=85=A8=E9=83=A8`=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cpns/ClipItemList.vue          | 42 ++++++++++++------------------
 src/style/cpns/clip-item-list.less | 14 +++-------
 src/style/cpns/file-list.less      |  1 +
 src/style/index.less               |  4 +--
 4 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/src/cpns/ClipItemList.vue b/src/cpns/ClipItemList.vue
index e05ea7e..a5ee289 100644
--- a/src/cpns/ClipItemList.vue
+++ b/src/cpns/ClipItemList.vue
@@ -11,39 +11,21 @@
     >
       <div class="clip-info">
         <div class="clip-time">
-          <template v-if="item.type === 'text'">
-            <span
-              class="clip-data-status"
-              v-if="item.data.split(`\n`).length - 1 > 7"
-              @click.stop="handleDataClick(item)"
-            >
-              查看全部
-            </span>
-            <span v-else>{{ dateFormat(item.updateTime) }}</span>
-          </template>
-          <template v-if="item.type === 'image'">
-            <span>{{ dateFormat(item.updateTime) }}</span>
-          </template>
-          <template v-if="item.type === 'file'">
-            <span
-              class="clip-data-status"
-              v-if="JSON.parse(item.data).length >= 7"
-              @click.stop="handleDataClick(item)"
-            >
-              查看全部
-            </span>
-            <span v-else>{{ dateFormat(item.updateTime) }}</span>
-          </template>
+          <span>{{ dateFormat(item.updateTime) }}</span>
         </div>
         <div class="clip-data">
           <template v-if="item.type === 'text'">
-            <div>{{ item.data.split(`\n`).slice(0, 7).join(`\n`).trim() }}</div>
+            <div :class="{ 'clip-over-sized-content': isOverSizedContent(item) }">
+              {{ item.data.split(`\n`).slice(0, 6).join(`\n`).trim() }}
+            </div>
           </template>
           <template v-if="item.type === 'image'">
             <img class="clip-data-image" :src="item.data" alt="Image" />
           </template>
           <template v-if="item.type === 'file'">
-            <FileList :data="JSON.parse(item.data)" />
+            <div :class="{ 'clip-over-sized-content': isOverSizedContent(item) }">
+              <FileList :data="JSON.parse(item.data).slice(0, 6)" />
+            </div>
           </template>
         </div>
       </div>
@@ -87,6 +69,14 @@ const props = defineProps({
   }
 })
 const emit = defineEmits(['onDataChange', 'onDataRemove'])
+const isOverSizedContent = (item) => {
+  const { type, data } = item
+  if (type === 'text') {
+    return data.split(`\n`).length - 1 > 6
+  } else if (type === 'file') {
+    return JSON.parse(item.data).length >= 6
+  }
+}
 const handleItemClick = (ev, item) => {
   const { button } = ev
   if (button === 0) {
@@ -98,7 +88,7 @@ const handleItemClick = (ev, item) => {
     window.copy(item)
   }
 }
-const handleDataClick = (item) => emit('onDataChange', item)
+const handleContentExpand = (item) => emit('onDataChange', item)
 const activeIndex = ref(0)
 const handleMouseOver = (index) => (activeIndex.value = index)
 const operation = [
diff --git a/src/style/cpns/clip-item-list.less b/src/style/cpns/clip-item-list.less
index 58c3913..422d424 100644
--- a/src/style/cpns/clip-item-list.less
+++ b/src/style/cpns/clip-item-list.less
@@ -37,16 +37,7 @@
           background-color: @text-bg-color;
           border-radius: 5px;
           min-width: 50px;
-          padding: 5px 7px 5px 7px;
-          &.clip-data-status {
-            color: @primary-color;
-            transition: all 0.15s;
-            &:hover {
-              color: @bg-color;
-              background-color: @primary-color;
-              transition: all 0.15s;
-            }
-          }
+          padding: 5px 7px;
         }
       }
       .clip-data {
@@ -65,6 +56,9 @@
           max-width: 90%;
           box-shadow: 0px 0px 3px @text-color;
         }
+        .clip-over-sized-content {
+          color: @primary-color-lighter;
+        }
       }
     }
     .clip-count {
diff --git a/src/style/cpns/file-list.less b/src/style/cpns/file-list.less
index 69fe628..3440fc7 100644
--- a/src/style/cpns/file-list.less
+++ b/src/style/cpns/file-list.less
@@ -4,6 +4,7 @@
   align-items: center;
   cursor: pointer;
   font-size: 13px;
+  width: fit-content;
   &:hover {
     text-decoration: underline;
     &::after {
diff --git a/src/style/index.less b/src/style/index.less
index 3b70f66..f1745d5 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -12,7 +12,7 @@
 @media (prefers-color-scheme: dark) {
   #app {
     @primary-color: #3271ae;
-    @primary-color-lighter: #798ea4;
+    @primary-color-lighter: #4997e1;
     @text-color: #e8e6e3;
     @text-color-lighter: rgb(181, 181, 181);
     @text-bg-color: #656565;
@@ -27,7 +27,7 @@
 @media (prefers-color-scheme: light) {
   #app {
     @primary-color: #3271ae;
-    @primary-color-lighter: #798ea4;
+    @primary-color-lighter: #4997e1;
     @text-color: #333;
     @text-color-lighter: rgb(138, 138, 138);
     @text-bg-color: #f2f2f2;