feat: 上下键切换选中 Enter执行复制+粘贴 Ctrl+C执行复制

src/cpns/ClipItemList.vue

@@ -6,6 +6,8 @@
       :key="item.createTime"
       @click.left="handleItemClick($event, item)"
       @click.right="handleItemClick($event, item)"
+      @mouseover="handleMouseOver(index)"
+      :class="{ active: index === activeIndex }"
     >
       <div class="clip-info">
         <div class="clip-time">
@@ -44,6 +46,7 @@
 </template>
 
 <script setup>
+import { ref, onMounted, watch } from 'vue'
 import FileList from './FileList.vue'
 import { dateFormat } from '../utils'
 const props = defineProps({
@@ -65,6 +68,49 @@ const handleItemClick = (ev, item) => {
   }
 }
 const handleDataClick = (item) => emit('onDataChange', item)
+const activeIndex = ref(0)
+const handleMouseOver = (index) => (activeIndex.value = index)
+// 父组件中改变了引用类型的地址 故要用 getter返回
+watch(
+  () => props.showList,
+  () => (activeIndex.value = 0)
+)
+onMounted(() => {
+  // 监听键盘事件
+  document.addEventListener('keydown', (e) => {
+    const { key, ctrlKey } = e
+    const isArrowUp = key === 'ArrowUp'
+    const isArrowDown = key === 'ArrowDown'
+    const isEnter = key === 'Enter'
+    const isCopy = ctrlKey && (key === 'C' || key === 'c')
+    if (isArrowUp) {
+      if (activeIndex.value > 0) {
+        activeIndex.value--
+        const activeNode = document.querySelector('.clip-item.active')
+        if (activeIndex.value === 1) {
+          window.toTop()
+        } else {
+          activeNode?.previousElementSibling?.previousElementSibling?.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest'
+          })
+        }
+      }
+    } else if (isArrowDown) {
+      if (activeIndex.value < props.showList.length - 1) {
+        activeIndex.value++
+        document
+          .querySelector('.clip-item.active+.clip-item')
+          ?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+      }
+    } else if (isCopy) {
+      window.copy(props.showList[activeIndex.value])
+    } else if (isEnter) {
+      window.copy(props.showList[activeIndex.value])
+      window.paste()
+    }
+  })
+})
 </script>
 
 <style lang="less" scoped>

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

@@ -8,7 +8,7 @@
     border-width: 1px 0px 1px 0px;
     border-color: @bg-color @bg-color #eee @bg-color;
     cursor: pointer;
-    &:hover {
+    &.active {
       border: 0px solid @primary-color;
       border-width: 1px 0px 1px 0px;
       background-color: @text-bg-color-lighter;

src/views/Main.vue

@@ -119,7 +119,7 @@ onMounted(() => {
   // 列表懒加载
   document.addEventListener('scroll', (e) => {
     const { scrollTop, clientHeight, scrollHeight } = e.target.scrollingElement
-    if (scrollTop + clientHeight + 20 >= scrollHeight) {
+    if (scrollTop + clientHeight + 5 >= scrollHeight) {
       offset.value += GAP
       let addition = []
       if (activeTab.value !== 'all') {