From 8bf1240b9422d032ed34e74507d10a2660b2c2fd Mon Sep 17 00:00:00 2001
From: hokori <yakumoy847@gmail.com>
Date: Sun, 27 Apr 2025 18:00:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=90=9C=E7=B4=A2=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2=E5=BB=BA=E8=AE=AE=E6=A1=86?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91=E5=92=8C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在搜索输入框获得焦点时显示建议框，失去焦点时隐藏建议框。同时调整建议框的宽度和位置以更好地匹配输入框。
---
 src/components/Home.vue    |  7 +++++--
 src/components/Results.vue | 11 +++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 0917791..58d6c25 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -21,6 +21,8 @@
         @keyup.enter="handleSearch"
         @keydown.down.prevent="selectNext"
         @keydown.up.prevent="selectPrev"
+        @focus="inputFocused = true"
+        @blur="inputFocused = false"
       >
         <template #append>
           <el-button @click="handleSearch">
@@ -30,7 +32,7 @@
       </el-input>
     </div>
     
-    <div v-if="suggestions.length > 0" class="suggestions-container">
+    <div v-if="suggestions.length > 0 && inputFocused" class="suggestions-container">
       <div
         v-for="(item, index) in suggestions"
         :key="index"
@@ -68,7 +70,8 @@ export default defineComponent({
       searchQuery: '',
       suggestions: [],
       loading: false,
-      selectedIndex: -1
+      selectedIndex: -1,
+      inputFocused: false
     }
   },
   methods: {
diff --git a/src/components/Results.vue b/src/components/Results.vue
index a7ecdae..812f252 100644
--- a/src/components/Results.vue
+++ b/src/components/Results.vue
@@ -27,11 +27,13 @@
           @keyup.enter="handleSearch"
           @keydown.down.prevent="selectNext"
           @keydown.up.prevent="selectPrev"
+          @focus="inputFocused = true"
+          @blur="inputFocused = false"
         />
         <el-button @click="handleSearch" type="warning">搜索</el-button>
       </div>
       
-      <div v-if="suggestions.length > 0" class="suggestions-container">
+      <div v-if="suggestions.length > 0 && inputFocused" class="suggestions-container">
         <div
           v-for="(item, index) in suggestions"
           :key="index"
@@ -135,7 +137,8 @@ export default defineComponent({
       suggestionLoading: false,
       error: null,
       suggestions: [],
-      selectedIndex: -1
+      selectedIndex: -1,
+      inputFocused: false
     }
   },
   created() {
@@ -453,7 +456,7 @@ export default defineComponent({
 
 .suggestions-container {
   position: absolute;
-  width: calc(100% - 220px); /* 调整宽度以匹配输入框 */
+  width: calc(100% - 120px); /* 调整宽度以匹配输入框 */
   max-height: 300px;
   overflow-y: auto;
   background-color: #ffffff;
@@ -461,7 +464,7 @@ export default defineComponent({
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   z-index: 1000;
   top: 100%; /* 位于搜索框正下方 */
-  left: 200px; /* 与输入框左侧对齐 */
+  left: 110px; /* 调整与输入框左侧对齐 */
   margin-top: 5px;
 }