From eaa0e762c0641fb6776ddee1c8addb14815780bb Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Thu, 8 Sep 2022 20:19:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AASidePanel=E6=8F=92=E6=A7=BD=E5=86=85=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=20=E5=A4=9A=E9=80=89=E6=8C=89=E9=92=AE=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/preload.js               |  8 +++++---
 src/cpns/ClipSearch.vue         | 23 ++++++++++++-----------
 src/style/cpns/clip-search.less |  6 ------
 src/style/cpns/clip-switch.less |  6 ++++++
 src/views/Main.vue              | 28 +++++++++++++++++++++++++---
 5 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/public/preload.js b/public/preload.js
index 7768d15..40c9fc3 100644
--- a/public/preload.js
+++ b/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 = () => {
-  document.querySelector('.clip-search-input').style.display !== 'none'
-    ? document.querySelector('.clip-search-input')?.focus()
+const focus = (isBlur = false) => {
+  return document.querySelector('.clip-search').style.display !== 'none'
+    ? 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())
 }
diff --git a/src/cpns/ClipSearch.vue b/src/cpns/ClipSearch.vue
index 3fb8d3b..e4684ea 100644
--- a/src/cpns/ClipSearch.vue
+++ b/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)"
-      v-show="filterText || isFocus"
+      @focusout="handleFocusOut"
       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>
diff --git a/src/style/cpns/clip-search.less b/src/style/cpns/clip-search.less
index 962003c..fcd8523 100644
--- a/src/style/cpns/clip-search.less
+++ b/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 */
diff --git a/src/style/cpns/clip-switch.less b/src/style/cpns/clip-switch.less
index 92fdbaf..50f7fa6 100644
--- a/src/style/cpns/clip-switch.less
+++ b/src/style/cpns/clip-switch.less
@@ -34,4 +34,10 @@
       }
     }
   }
+  .clip-switch-btn {
+    width: 25px;
+    height: 25px;
+    padding: 10px;
+    cursor: pointer;
+  }
 }
diff --git a/src/views/Main.vue b/src/views/Main.vue
index f6da365..fa55477 100644
--- a/src/views/Main.vue
+++ b/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()