feat: 搜索框支持切换展开/收起状态

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()
 })

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的值

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;