feat: 移除more按钮 改为显示在data左上角的div

src/cpns/ClipItemList.vue

@@ -13,28 +13,32 @@
         </div>
         <div class="clip-data">
           <template v-if="item.type === 'text'">
+            <div
+              class="clip-data-status"
+              v-if="item.data.length >= 500"
+              @click.stop="handleDataClick(item)"
+            >
+              点此查看全部>>
+            </div>
             {{ item.data.slice(0, 500).trim() }}
           </template>
           <template v-if="item.type === 'image'">
             <img :src="item.data" alt="Image" />
-            <div class="clip-image-size">{{ item.size }}</div>
+            <div class="clip-data-status">{{ item.size }}</div>
           </template>
           <template v-if="item.type === 'file'">
+            <div
+              class="clip-data-status"
+              v-if="JSON.parse(item.data).length >= 8"
+              @click.stop="handleDataClick(item)"
+            >
+              点此查看全部>>
+            </div>
             <FileList :data="JSON.parse(item.data)" />
           </template>
         </div>
       </div>
       <div class="clip-count">{{ index + 1 }}</div>
-      <div
-        class="clip-more"
-        v-if="
-          (item.type === 'text' && item.data.length >= 500) ||
-          (item.type === 'file' && JSON.parse(item.data).length >= 8)
-        "
-        @click.stop="onDataChange(item)"
-      >
-        📃
-      </div>
     </div>
   </div>
 </template>
@@ -60,9 +64,7 @@ const handleItemClick = (ev, item) => {
     window.copy(item)
   }
 }
-const onDataChange = (item) => {
-  emit('onDataChange', item)
-}
+const handleDataClick = (item) => emit('onDataChange', item)
 </script>
 
 <style lang="less" scoped>

src/style/cpns/clip-item-list.less

@@ -46,9 +46,10 @@
         img {
           max-height: 150px;
         }
-        .clip-image-size {
+        .clip-data-status {
           position: absolute;
-          background-color: @bg-color;
+          color: @bg-color;
+          background-color: @text-color;
         }
       }
     }
@@ -62,18 +63,5 @@
       color: @text-color-lighter;
       padding: 10px;
     }
-    .clip-more {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 10px;
-      font-size: 13px;
-      cursor: pointer;
-      border-radius: 0px 5px 5px 0px;
-    }
-    .clip-more:hover {
-      background-color: @text-bg-color;
-      transition: all 0.15s;
-    }
   }
 }