From 5c58a8ca7fa4b3fc147230fb5d31b525ae462a73 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Tue, 16 Aug 2022 18:25:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=8A=E4=B8=8B=E9=94=AE=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E9=80=89=E4=B8=AD=20`Enter`=E6=89=A7=E8=A1=8C?=
 =?UTF-8?q?=E5=A4=8D=E5=88=B6+=E7=B2=98=E8=B4=B4=20`Ctrl+C`=E6=89=A7?=
 =?UTF-8?q?=E8=A1=8C=E5=A4=8D=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cpns/ClipItemList.vue          | 46 ++++++++++++++++++++++++++++++
 src/style/cpns/clip-item-list.less |  2 +-
 src/views/Main.vue                 |  2 +-
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/cpns/ClipItemList.vue b/src/cpns/ClipItemList.vue
index 8769f2f..be36b18 100644
--- a/src/cpns/ClipItemList.vue
+++ b/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>
diff --git a/src/style/cpns/clip-item-list.less b/src/style/cpns/clip-item-list.less
index 7c4ec41..df3bcd0 100644
--- a/src/style/cpns/clip-item-list.less
+++ b/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;
diff --git a/src/views/Main.vue b/src/views/Main.vue
index d9613e7..a0eb788 100644
--- a/src/views/Main.vue
+++ b/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') {