refactor: 调整悬浮按钮代码实现

src/cpns/ClipFloatBtn.vue

@@ -1,18 +1,16 @@
 <template>
-  <div class="clip-float-btn">
-    <div @click="restoreDataBase">🧭</div>
+  <div class="clip-float-btn" @click="handleBtnClick">
+    <div>{{ props.icon }}</div>
   </div>
 </template>
 
 <script setup>
-// const emit = defineEmits(['onBtnClick'])
-// const handleBtnClick = () => emit('onBtnClick')
-const restoreDataBase = () => {
-  // 清空数据库
-  const flag = window.confirm('确定要清空剪贴板记录吗?')
-  if (flag) {
-    window.db.emptyDataBase()
-    updateShowList('all')
+const emit = defineEmits(['onBtnClick'])
+const handleBtnClick = () => emit('onBtnClick')
+const props = defineProps({
+  icon: {
+    type: String,
+    default: '🌎'
   }
-}
+})
 </script>

src/style/cpns/clip-float-btn.less

@@ -19,4 +19,7 @@
     background-color: @primary-color;
     transition: all 0.15s;
   }
+  div {
+    margin-bottom: 5px;
+  }
 }

src/views/Main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main">
-    <ClipFloatBtn></ClipFloatBtn>
+    <ClipFloatBtn :icon="'🧭'" @onBtnClick="restoreDataBase"></ClipFloatBtn>
     <ClipFullData
       :isShow="fullDataShow"
       :fullData="fullData"
@@ -67,6 +67,15 @@ const updateShowList = (type) => {
   window.toTop()
 }
 
+const restoreDataBase = () => {
+  // 清空数据库
+  const flag = window.confirm('确定要清空剪贴板记录吗?')
+  if (flag) {
+    window.db.emptyDataBase()
+    updateShowList('all')
+  }
+}
+
 const handleNavClick = (type) => {
   updateShowList(type)
   offset.value = 0 // 重置懒加载偏移量
@@ -160,6 +169,7 @@ onMounted(() => {
       }
     } else if (ctrlKey || metaKey || isArrow || isEnter) {
       // 仅有 Ctrl时 什么也不执行 (utools模拟执行粘贴时触发)
+      e.preventDefault()
     } else {
       window.focus() // 其他键盘事件 直接聚焦搜索框
     }