feat: optimize dropdown for mobile

open-isle-cli/src/components/HeaderComponent.vue

@@ -13,6 +13,9 @@
       </div>
 
       <div v-if="isLogin" class="header-content-right">
+        <div v-if="isMobile" class="search-icon" @click="showSearch = true">
+          <i class="fas fa-search"></i>
+        </div>
         <DropdownMenu ref="userMenu" :items="headerMenuItems">
           <template #trigger>
             <div class="avatar-container">
@@ -24,21 +27,27 @@
       </div>
 
       <div v-else class="header-content-right">
+        <div v-if="isMobile" class="search-icon" @click="showSearch = true">
+          <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>
     </div>
   </header>
+  <SearchDropdown v-if="isMobile && showSearch" @close="showSearch = false" />
 </template>
 
 <script>
 import { authState, clearToken, loadCurrentUser } from '../utils/auth'
 import { watch } from 'vue'
 import DropdownMenu from './DropdownMenu.vue'
+import SearchDropdown from './SearchDropdown.vue'
+import { isMobile } from '../utils/screen'
 
 export default {
   name: 'HeaderComponent',
-  components: { DropdownMenu },
+  components: { DropdownMenu, SearchDropdown },
   props: {
     showMenuBtn: {
       type: Boolean,
@@ -47,13 +56,17 @@ export default {
   },
   data() {
     return {
-      avatar: ''
+      avatar: '',
+      showSearch: false
     }
   },
   computed: {
     isLogin() {
       return authState.loggedIn
     },
+    isMobile() {
+      return isMobile.value
+    },
     headerMenuItems() {
       return [
         { text: '设置', onClick: this.goToSettings },
@@ -80,6 +93,7 @@ export default {
 
     watch(() => this.$route.fullPath, () => {
       if (this.$refs.userMenu) this.$refs.userMenu.close()
+      this.showSearch = false
     })
   },
 
@@ -227,6 +241,11 @@ export default {
   background-color: var(--menu-selected-background-color);
 }
 
+.search-icon {
+  font-size: 18px;
+  cursor: pointer;
+}
+
 @media (max-width: 1200px) {
   .header-content {
     padding-left: 15px;