Merge pull request #20 from ZiuChen/v1.1.3

V1.1.3

public/plugin.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.1.2",
-  "pluginName": "剪贴板",
+  "version": "1.1.3",
+  "pluginName": "超级剪贴板",
   "description": "强大的剪贴板管理工具",
   "author": "ZiuChen",
   "homepage": "https://github.com/ZiuChen",

src/cpns/ClipItemList.vue

@@ -17,16 +17,16 @@
           <template v-if="item.type === 'text'">
             <div
               class="clip-data-status"
-              v-if="item.data.length >= 500"
+              v-if="item.data.split(`\n`).length - 1 > 8"
               @click.stop="handleDataClick(item)"
             >
               查看全部
             </div>
-            <div>{{ item.data.slice(0, 500).trim() }}</div>
+            <div>{{ item.data.split(`\n`).slice(0, 8).join(`\n`).trim() }}</div>
           </template>
           <template v-if="item.type === 'image'">
             <img class="clip-data-image" :src="item.data" alt="Image" />
-            <div class="clip-data-status">{{ item.size }}</div>
+            <div class="clip-data-status image">{{ item.size }}</div>
           </template>
           <template v-if="item.type === 'file'">
             <div
@@ -53,6 +53,10 @@ const props = defineProps({
   showList: {
     type: Array,
     required: true
+  },
+  fullData: {
+    type: Object,
+    required: true
   }
 })
 const emit = defineEmits(['onDataChange'])
@@ -78,11 +82,11 @@ watch(
 onMounted(() => {
   // 监听键盘事件
   document.addEventListener('keydown', (e) => {
-    const { key, ctrlKey } = e
+    const { key, ctrlKey, metaKey } = e
     const isArrowUp = key === 'ArrowUp'
     const isArrowDown = key === 'ArrowDown'
     const isEnter = key === 'Enter'
-    const isCopy = ctrlKey && (key === 'C' || key === 'c')
+    const isCopy = (ctrlKey || metaKey) && (key === 'C' || key === 'c')
     if (isArrowUp) {
       if (activeIndex.value > 0) {
         activeIndex.value--
@@ -104,7 +108,9 @@ onMounted(() => {
           ?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
       }
     } else if (isCopy) {
-      window.copy(props.showList[activeIndex.value])
+      if (props.fullData.data === '') {
+        window.copy(props.showList[activeIndex.value])
+      }
     } else if (isEnter) {
       window.copy(props.showList[activeIndex.value])
       window.paste()

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

@@ -4,13 +4,14 @@
     display: flex;
     justify-content: space-between;
     border: 0px solid @bg-color;
-    /* 有上边框占用px 但是不显示(与背景同色) */
-    border-width: 1px 0px 1px 0px;
-    border-color: @bg-color @bg-color #eee @bg-color;
+    margin: 0px 5px;
+    /* 占用px 但是不显示(与背景同色) */
+    border-width: 1px 1px 1px 1px;
+    border-color: @text-bg-color-lighter @bg-color @text-bg-color-lighter @bg-color;
     cursor: pointer;
     &.active {
       border: 0px solid @primary-color;
-      border-width: 1px 0px 1px 0px;
+      border-width: 1px 1px 1px 1px;
       background-color: @text-bg-color-lighter;
     }
     .clip-info {
@@ -46,19 +47,24 @@
         flex-direction: column;
         color: @text-color;
         img.clip-data-image {
+          // 此 class用于区分 file的 image
           max-height: 140px; // 比外框 max-height少一点 因为有 5px的边框
           max-width: 90%;
           padding: 5px;
-          background-color: @text-color-lighter;
+          background-color: @bg-color;
           border-radius: 5px;
         }
         .clip-data-status {
           position: absolute;
           width: fit-content;
-          color: @bg-color;
-          background-color: @text-color-lighter;
+          color: @text-color;
+          background-color: @primary-color-lighter;
           border-radius: 5px;
-          padding: 3px;
+          padding: 2px;
+          font-size: 13px;
+          &.image {
+            margin: 10px;
+          }
         }
       }
     }

src/style/cpns/file-list.less

@@ -3,8 +3,9 @@
   justify-content: flex-start;
   align-items: center;
   cursor: pointer;
+  font-size: 13px;
   &:hover {
-    font-weight: 600;
+    text-decoration: underline;
     &::after {
       content: '📤';
     }

src/views/Main.vue

@@ -4,7 +4,7 @@
     <ClipFullData
       :isShow="fullDataShow"
       :fullData="fullData"
-      @onOverlayClick="toggleFullData('')"
+      @onOverlayClick="toggleFullData({ type: 'text', data: '' })"
     ></ClipFullData>
     <ClipSwitch ref="ClipSwitchRef" @onNavClick="handleNavClick">
       <template #SidePanel>
@@ -13,7 +13,8 @@
     </ClipSwitch>
     <div class="clip-break"></div>
     <div class="clip-empty-status" v-if="showList.length === 0">📪 无记录</div>
-    <ClipItemList :showList="showList" @onDataChange="toggleFullData"> </ClipItemList>
+    <ClipItemList :showList="showList" :fullData="fullData" @onDataChange="toggleFullData">
+    </ClipItemList>
   </div>
 </template>
 
@@ -139,6 +140,7 @@ onMounted(() => {
       window.focus()
     } else if (isExit) {
       filterText.value = ''
+    } else if (ctrlKey) {
     } else {
       window.focus() // 其他键盘事件 直接聚焦搜索框
     }
@@ -168,7 +170,7 @@ onMounted(() => {
   }
 }
 .clip-break {
-  height: 55px;
+  height: 60px;
 }
 .clip-empty-status {
   height: 100%;