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

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;