From e8204cb72966a511fff0eb71dd6d3342bccd74b0 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Sun, 4 Sep 2022 15:41:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=82=AC=E6=B5=AE=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E7=BB=84=E4=BB=B6=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/plugin.json                 |  2 +-
 src/cpns/ClipFloatBtn.vue          | 18 +++++++++++++++++
 src/style/cpns/clip-float-btn.less | 21 ++++++++++++++++++++
 src/style/index.less               |  1 +
 src/views/Main.vue                 | 31 ++----------------------------
 5 files changed, 43 insertions(+), 30 deletions(-)
 create mode 100644 src/cpns/ClipFloatBtn.vue
 create mode 100644 src/style/cpns/clip-float-btn.less

diff --git a/public/plugin.json b/public/plugin.json
index 4a54d82..27499fe 100644
--- a/public/plugin.json
+++ b/public/plugin.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.1.6",
+  "version": "1.2.1",
   "pluginName": "超级剪贴板",
   "description": "强大的剪贴板管理工具",
   "author": "ZiuChen",
diff --git a/src/cpns/ClipFloatBtn.vue b/src/cpns/ClipFloatBtn.vue
new file mode 100644
index 0000000..0499d5c
--- /dev/null
+++ b/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>
diff --git a/src/style/cpns/clip-float-btn.less b/src/style/cpns/clip-float-btn.less
new file mode 100644
index 0000000..09bc516
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/style/index.less b/src/style/index.less
index 8b2b518..cfc9ed5 100644
--- a/src/style/index.less
+++ b/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';
diff --git a/src/views/Main.vue b/src/views/Main.vue
index f2ffe42..6e26c12 100644
--- a/src/views/Main.vue
+++ b/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;
 }