refactor: 悬浮按钮组件化

public/plugin.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.6",
+  "version": "1.2.1",
   "pluginName": "超级剪贴板",
   "description": "强大的剪贴板管理工具",
   "author": "ZiuChen",

src/cpns/ClipFloatBtn.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="clip-float-btn">
+    <div @click="restoreDataBase">🧭</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')
+  }
+}
+</script>

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

@@ -0,0 +1,21 @@
+.clip-float-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  z-index: 99999;
+  bottom: 15px;
+  right: 15px;
+  height: 50px;
+  width: 50px;
+  cursor: pointer;
+  border-radius: 50%;
+  font-size: 20px;
+  background-color: @text-bg-color-lighter;
+  user-select: none;
+  &:hover {
+    color: @bg-color;
+    background-color: @primary-color;
+    transition: all 0.15s;
+  }
+}

src/style/index.less

@@ -1,5 +1,6 @@
 .import() {
   /* 导入全部涉及到变量的样式文件 */
+  @import (multiple) './cpns/clip-float-btn.less';
   @import (multiple) './cpns/clip-full-data.less';
   @import (multiple) './cpns/clip-item-list.less';
   @import (multiple) './cpns/clip-search.less';

src/views/Main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main">
-    <div class="clip-restore" @click="restoreDataBase">🧺</div>
+    <ClipFloatBtn></ClipFloatBtn>
     <ClipFullData
       :isShow="fullDataShow"
       :fullData="fullData"
@@ -29,6 +29,7 @@ import ClipItemList from '../cpns/ClipItemList.vue'
 import ClipFullData from '../cpns/ClipFullData.vue'
 import ClipSearch from '../cpns/ClipSearch.vue'
 import ClipSwitch from '../cpns/ClipSwitch.vue'
+import ClipFloatBtn from '../cpns/ClipFloatBtn.vue'
 
 const GAP = 15 // 懒加载 每次添加的条数
 const offset = ref(0) // 懒加载 偏移量
@@ -82,15 +83,6 @@ const handleDataRemove = () => {
   updateShowList(ClipSwitchRef.value.activeTab)
 }
 
-const restoreDataBase = () => {
-  // 情况数据库
-  const flag = window.confirm('确定要清空剪贴板记录吗?')
-  if (flag) {
-    window.db.emptyDataBase()
-    updateShowList('all')
-  }
-}
-
 onMounted(() => {
   // 获取挂载的导航组件 Ref
   const activeTab = computed(() => ClipSwitchRef.value.activeTab)
@@ -168,25 +160,6 @@ onMounted(() => {
 
 <style lang="less" scoped>
 @import '../style';
-.clip-restore {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  bottom: 10px;
-  right: 10px;
-  height: 50px;
-  width: 50px;
-  cursor: pointer;
-  border-radius: 50%;
-  font-size: 20px;
-  background-color: rgb(232, 232, 232);
-  user-select: none;
-  &:hover {
-    // background-color: @primary-color;
-    transition: all 0.15s;
-  }
-}
 .clip-break {
   height: 60px;
 }