From d90d455d4acb4e0db529ba2fb2922b927d592c2b Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Sun, 4 Sep 2022 19:46:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=90=9C=E7=B4=A2=E6=A1=86=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=88=87=E6=8D=A2=E5=B1=95=E5=BC=80/=E6=94=B6?=
 =?UTF-8?q?=E8=B5=B7=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/preload.js               | 10 ++++++++--
 src/cpns/ClipSearch.vue         | 13 ++++++++++++-
 src/style/cpns/clip-search.less | 12 +++++++++++-
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/public/preload.js b/public/preload.js
index 3fcc8fc..a25d03f 100644
--- a/public/preload.js
+++ b/public/preload.js
@@ -187,7 +187,13 @@ db.init()
 
 const remove = (item) => db.removeItemViaId(item.id)
 
-const focus = () => document.querySelector('.clip-search input')?.focus()
+const select = () => document.querySelector('.clip-search input').select()
+const focus = () => {
+  document.querySelector('.clip-search-input').style.display !== 'none'
+    ? document.querySelector('.clip-search-input')?.focus()
+    : (document.querySelector('.clip-search-btn')?.click(),
+      document.querySelector('.clip-search-input')?.focus())
+}
 const toTop = () => (document.scrollingElement.scrollTop = 0)
 const resetNav = () => document.querySelectorAll('.clip-switch-item')[0]?.click()
 
@@ -224,8 +230,8 @@ utools.onPluginEnter(() => {
       db.addItem(item)
     })
   }
-  document.querySelector('.clip-search input').select() // 进入插件将搜索框内容全选
   focus()
+  select() // 进入插件将搜索框内容全选
   toTop()
   resetNav()
 })
diff --git a/src/cpns/ClipSearch.vue b/src/cpns/ClipSearch.vue
index 33d8933..3fb8d3b 100644
--- a/src/cpns/ClipSearch.vue
+++ b/src/cpns/ClipSearch.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="clip-search">
+    <span class="clip-search-btn" v-show="!filterText && !isFocus" @click="toggleFocusStatus(true)"
+      >🔍</span
+    >
     <input
+      class="clip-search-input"
+      @focusout="toggleFocusStatus(false)"
+      v-show="filterText || isFocus"
       v-model="filterText"
       type="text"
       :placeholder="itemCount ? `🔍 在${itemCount}条历史中检索...` : '🔍 检索剪贴板历史...'"
@@ -10,7 +16,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 const props = defineProps({
   modelValue: {
     type: String,
@@ -20,6 +26,11 @@ const props = defineProps({
     type: Number
   }
 })
+
+const isFocus = ref(true)
+const toggleFocusStatus = (status) =>
+  status ? ((isFocus.value = status), nextTick(() => window.focus())) : (isFocus.value = status)
+
 const filterText = ref('')
 const emit = defineEmits(['update:modelValue'])
 // filterText变了 通知父组件修改 modelValue的值
diff --git a/src/style/cpns/clip-search.less b/src/style/cpns/clip-search.less
index fcc8ba1..962003c 100644
--- a/src/style/cpns/clip-search.less
+++ b/src/style/cpns/clip-search.less
@@ -1,6 +1,16 @@
 .clip-search {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   min-width: 300px;
-  input {
+  margin-right: 10px;
+  .clip-search-btn {
+    width: 25px;
+    height: 25px;
+    padding: 10px;
+    cursor: pointer;
+  }
+  .clip-search-input {
     width: 90%;
     /* normalize */
     background: none;