refactor: 调整导航SidePanel插槽内结构 多选按钮初始化

public/preload.js

@@ -192,9 +192,11 @@ db.init()
 const remove = (item) => db.removeItemViaId(item.id)
 
 const select = () => document.querySelector('.clip-search input').select()
-const focus = () => {
+const focus = (isBlur = false) => {
-  document.querySelector('.clip-search-input').style.display !== 'none'
+  return document.querySelector('.clip-search').style.display !== 'none'
-    ? document.querySelector('.clip-search-input')?.focus()
+    ? isBlur
+      ? document.querySelector('.clip-search-input')?.blur()
+      : document.querySelector('.clip-search-input')?.focus()
     : (document.querySelector('.clip-search-btn')?.click(),
       document.querySelector('.clip-search-input')?.focus())
 }

src/cpns/ClipSearch.vue

@@ -1,12 +1,8 @@
 <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)"
+      @focusout="handleFocusOut"
-      v-show="filterText || isFocus"
       v-model="filterText"
       type="text"
       :placeholder="itemCount ? `🔍 在${itemCount}条历史中检索...` : '🔍 检索剪贴板历史...'"
@@ -27,22 +23,27 @@ const props = defineProps({
   }
 })
 
-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'])
+const emit = defineEmits(['update:modelValue', 'onPanelHide'])
 // filterText变了 通知父组件修改 modelValue的值
 watch(filterText, (val) => emit('update:modelValue', val))
 
+const handleFocusOut = () => {
+  if (!filterText.value) {
+    emit('onPanelHide')
+  }
+}
+
 // modelValue变了 更新 filterText的值
 watch(
   () => props.modelValue,
   (val) => (filterText.value = val)
 )
 
-const clear = () => emit('update:modelValue', '')
+const clear = () => {
+  emit('update:modelValue', '')
+  nextTick(() => window.focus())
+}
 </script>
 
 <style lang="less" scoped>

src/style/cpns/clip-search.less

@@ -4,12 +4,6 @@
   justify-content: flex-end;
   min-width: 300px;
   margin-right: 10px;
-  .clip-search-btn {
-    width: 25px;
-    height: 25px;
-    padding: 10px;
-    cursor: pointer;
-  }
   .clip-search-input {
     width: 90%;
     /* normalize */

src/style/cpns/clip-switch.less

@@ -34,4 +34,10 @@
       }
     }
   }
+  .clip-switch-btn {
+    width: 25px;
+    height: 25px;
+    padding: 10px;
+    cursor: pointer;
+  }
 }

src/views/Main.vue

@@ -8,7 +8,16 @@
     ></ClipFullData>
     <ClipSwitch ref="ClipSwitchRef" @onNavClick="handleNavClick">
       <template #SidePanel>
-        <ClipSearch v-model="filterText" :itemCount="list.length"></ClipSearch>
+        <div v-show="!isSearchPanelExpand">
+          <span class="clip-switch-btn"> 👆 </span>
+          <span class="clip-switch-btn clip-search-btn" @click="handleSearchBtnClick"> 🔍 </span>
+        </div>
+        <ClipSearch
+          v-show="isSearchPanelExpand"
+          @onPanelHide="isSearchPanelExpand = false"
+          v-model="filterText"
+          :itemCount="list.length"
+        ></ClipSearch>
       </template>
     </ClipSwitch>
     <div class="clip-break"></div>
@@ -24,13 +33,22 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted, computed } from 'vue'
+import { ref, watch, onMounted, computed, nextTick } from 'vue'
 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 isMultiple = ref(false)
+
+const isSearchPanelExpand = ref(false)
+
+const handleSearchBtnClick = () => {
+  isSearchPanelExpand.value = true
+  nextTick(() => window.focus())
+}
+
 const GAP = 15 // 懒加载 每次添加的条数
 const offset = ref(0) // 懒加载 偏移量
 const filterText = ref('') // 搜索框绑定值
@@ -164,9 +182,13 @@ onMounted(() => {
       window.focus()
     } else if (isExit) {
       if (filterText.value) {
+        // 有筛选词 先清空筛选词
         filterText.value = ''
-        e.stopPropagation()
+      } else {
+        // 无筛选词 隐藏搜索框
+        window.focus(true)
       }
+      e.stopPropagation()
     } else if (ctrlKey || metaKey || isArrow || isEnter) {
       // 仅有 Ctrl时 什么也不执行 (utools模拟执行粘贴时触发)
       e.preventDefault()