fix: #5 #11 图片右侧多余图块 移除数据底部色块 调整图片边框样式

src/cpns/ClipItemList.vue

@@ -25,7 +25,7 @@
             <div>{{ item.data.slice(0, 500).trim() }}</div>
           </template>
           <template v-if="item.type === 'image'">
-            <img :src="item.data" alt="Image" />
+            <img class="clip-data-image" :src="item.data" alt="Image" />
             <div class="clip-data-status">{{ item.size }}</div>
           </template>
           <template v-if="item.type === 'file'">

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

@@ -45,16 +45,20 @@
         white-space: pre-wrap;
         flex-direction: column;
         color: @text-color;
-        background-color: @bg-color;
-        img {
-          max-height: 150px;
+        img.clip-data-image {
+          max-height: 140px; // 比外框 max-height少一点 因为有 5px的边框
           max-width: 90%;
+          padding: 5px;
+          background-color: @text-color-lighter;
+          border-radius: 5px;
         }
         .clip-data-status {
           position: absolute;
           width: fit-content;
           color: @bg-color;
-          background-color: @text-color;
+          background-color: @text-color-lighter;
+          border-radius: 5px;
+          padding: 3px;
         }
       }
     }