feat: 长内容以蓝色高亮显示 不再提供查看全部按钮

src/cpns/ClipItemList.vue

@@ -11,39 +11,21 @@
     >
       <div class="clip-info">
         <div class="clip-time">
-          <template v-if="item.type === 'text'">
+          <span>{{ dateFormat(item.updateTime) }}</span>
-            <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>
         </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 = [

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;
+          padding: 5px 7px;
-          &.clip-data-status {
-            color: @primary-color;
-            transition: all 0.15s;
-            &:hover {
-              color: @bg-color;
-              background-color: @primary-color;
-              transition: all 0.15s;
-            }
-          }
         }
       }
       .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 {

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 {

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;