From 0cee0141c3b37215889beb7bc801aed7fd5907e2 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Mon, 21 Jul 2025 14:51:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E6=90=9C=E7=B4=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 open-isle-cli/src/components/Dropdown.vue     |  3 ++-
 .../src/components/HeaderComponent.vue        | 20 ++++++++++++----
 .../src/components/SearchDropdown.vue         | 23 ++++++++-----------
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/open-isle-cli/src/components/Dropdown.vue b/open-isle-cli/src/components/Dropdown.vue
index d16645fed..1386ee07d 100644
--- a/open-isle-cli/src/components/Dropdown.vue
+++ b/open-isle-cli/src/components/Dropdown.vue
@@ -148,6 +148,7 @@ export default {
     })
 
     const clickOutside = e => {
+      if (isMobile) return
       if (wrapper.value && !wrapper.value.contains(e.target)) {
         close()
       }
@@ -269,7 +270,7 @@ export default {
   right: 0;
   background: var(--background-color);
   border: 1px solid var(--normal-border-color);
-  z-index: 10;
+  z-index: 10000;
   max-height: 200px;
   min-width: 350px;
   overflow-y: auto;
diff --git a/open-isle-cli/src/components/HeaderComponent.vue b/open-isle-cli/src/components/HeaderComponent.vue
index 0955d046f..4d5150c96 100644
--- a/open-isle-cli/src/components/HeaderComponent.vue
+++ b/open-isle-cli/src/components/HeaderComponent.vue
@@ -13,7 +13,7 @@
       </div>
 
       <div v-if="isLogin" class="header-content-right">
-        <div v-if="isMobile" class="search-icon" @click="showSearch = true">
+        <div v-if="isMobile" class="search-icon" @click="search">
           <i class="fas fa-search"></i>
         </div>
         <DropdownMenu ref="userMenu" :items="headerMenuItems">
@@ -27,20 +27,21 @@
       </div>
 
       <div v-else class="header-content-right">
-        <div v-if="isMobile" class="search-icon" @click="showSearch = true">
+        <div v-if="isMobile" class="search-icon" @click="search">
           <i class="fas fa-search"></i>
         </div>
         <div class="header-content-item-main" @click="goToLogin">登录</div>
         <div class="header-content-item-secondary" @click="goToSignup">注册</div>
       </div>
+      
+      <SearchDropdown ref="searchDropdown" v-if="isMobile && showSearch" @close="closeSearch" />
     </div>
   </header>
-  <SearchDropdown v-if="isMobile && showSearch" @close="showSearch = false" />
 </template>
 
 <script>
 import { authState, clearToken, loadCurrentUser } from '../utils/auth'
-import { watch } from 'vue'
+import { watch, nextTick } from 'vue'
 import DropdownMenu from './DropdownMenu.vue'
 import SearchDropdown from './SearchDropdown.vue'
 import { isMobile } from '../utils/screen'
@@ -104,6 +105,17 @@ export default {
         window.location.reload()
       })
     },
+    search() {
+      this.showSearch = true
+      nextTick(() => {
+        this.$refs.searchDropdown.toggle()
+      })
+    },
+    closeSearch() {
+      nextTick(() => {
+        this.showSearch = false
+      })
+    },
     goToLogin() {
       this.$router.push('/login')
     },
diff --git a/open-isle-cli/src/components/SearchDropdown.vue b/open-isle-cli/src/components/SearchDropdown.vue
index 73f5e1de1..6be3e0dac 100644
--- a/open-isle-cli/src/components/SearchDropdown.vue
+++ b/open-isle-cli/src/components/SearchDropdown.vue
@@ -2,13 +2,10 @@
   <div class="search-dropdown">
     <Dropdown ref="dropdown" v-model="selected" :fetch-options="fetchResults" remote menu-class="search-menu"
       option-class="search-option" :show-search="isMobile" @update:search="keyword = $event" @close="onClose">
-      <template #display="{ toggle, setSearch }">
-        <div v-if="isMobile" class="search-mobile-trigger" @click="toggle">
-          <i class="fas fa-search"></i>
-        </div>
-        <div v-else class="search-input" @click="toggle">
+      <template #display="{ setSearch }">
+        <div class="search-input">
           <i class="search-input-icon fas fa-search"></i>
-          <input class="text-input" v-model="keyword" placeholder="Search" @focus="toggle" @input="setSearch(keyword)" />
+          <input class="text-input" v-model="keyword" placeholder="Search" @input="setSearch(keyword)" />
         </div>
       </template>
       <template #option="{ option }">
@@ -26,7 +23,7 @@
 </template>
 
 <script>
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch } from 'vue'
 import { isMobile } from '../utils/screen'
 import { useRouter } from 'vue-router'
 import Dropdown from './Dropdown.vue'
@@ -44,6 +41,10 @@ export default {
     const results = ref([])
     const dropdown = ref(null)
 
+    const toggle = () => {
+      dropdown.value.toggle()
+    }
+
     const onClose = () => emit('close')
 
     const fetchResults = async (kw) => {
@@ -76,12 +77,6 @@ export default {
       comment: 'fas fa-comment'
     }
 
-    onMounted(() => {
-      if (isMobile.value && dropdown.value) {
-        dropdown.value.toggle()
-      }
-    })
-
     watch(selected, val => {
       if (!val) return
       const opt = results.value.find(r => r.id === val)
@@ -99,7 +94,7 @@ export default {
       keyword.value = ''
     })
 
-    return { keyword, selected, fetchResults, highlight, iconMap, isMobile, dropdown, onClose }
+    return { keyword, selected, fetchResults, highlight, iconMap, isMobile, dropdown, onClose, toggle }
   }
 }
 </script>