app/components/JinshenHeader.vue

@@ -38,17 +38,18 @@
 
     <!-- 右侧功能区 -->
     <div class="header-actions">
-      <el-input
+      <el-link
-        v-model="searchQuery"
+        class="search-link"
-        class="search-input"
+        :underline="false"
-        :placeholder="$t('search-placeholder')"
+        type="info"
-        :prefix-icon="Search"
+        @click="navigateTo(localePath('/search'))"
-        clearable
+      >
-        @keyup.enter="handleSearch"
+        <el-icon class="action-icon"><ElIconSearch /></el-icon>
-      />
+      </el-link>
+
       <el-dropdown @command="setLocale">
         <el-link type="info" :underline="false">
-          <el-icon class="mdi mdi-translate translate-link" />
+          <el-icon class="mdi mdi-translate action-icon" />
         </el-link>
         <template #dropdown>
           <el-dropdown-menu>
@@ -62,29 +63,13 @@
 </template>
 
 <script setup lang="ts">
-  import { Search } from '@element-plus/icons-vue';
-
   const router = useRouter();
   const localePath = useLocalePath();
 
   const { setLocale } = useI18n();
 
-  const searchQuery = ref('');
-
   const activeName = ref<string | undefined>(undefined);
 
-  const handleSearch = () => {
-    const trimmed = searchQuery.value.trim();
-    if (!trimmed) return;
-    navigateTo({
-      path: localePath('/search'),
-      query: {
-        query: trimmed,
-      },
-    });
-    searchQuery.value = '';
-  };
-
   const refreshMenu = () => {
     const path = router.currentRoute.value.path;
     if (path.startsWith('/productions')) {
@@ -170,11 +155,7 @@
     gap: 16px;
   }
 
-  .search-input {
+  .action-icon {
-    width: 200px;
+    font-size: 24px;
-  }
-
-  .translate-link {
-    font-size: 20px;
   }
 </style>

app/pages/search.vue

@@ -10,15 +10,18 @@
           :prefix-icon="Search"
           clearable
           @keyup.enter="navigateToQuery(keyword)"
-          @input="handleInput(keyword)"
           @clear="handleClear"
         />
-        <el-button type="primary" @click="navigateToQuery(keyword)">
+        <el-button
+          type="primary"
+          class="search-button"
+          @click="navigateToQuery(keyword)"
+        >
           {{ $t('search.search-button') }}
         </el-button>
       </div>
-      <p v-if="keyword && hasResults" class="search-meta">
+      <p v-if="hasResults" class="search-meta">
-        {{ $t('search.results-for', { query: keyword }) }}
+        {{ $t('search.results-for', { query: route.query?.query }) }}
       </p>
     </div>
 
@@ -63,8 +66,8 @@
     <div v-else class="search-state">
       <el-empty
         :description="
-          keyword
+          route.query.query
-            ? $t('search.no-results', { query: keyword })
+            ? $t('search.no-results', { query: route.query?.query })
             : $t('search.no-query')
         "
       />
@@ -231,9 +234,9 @@
     };
   }
 
-  const handleInput = debounce((value: string) => {
+  // const handleInput = debounce((value: string) => {
-    performSearch(value);
+  //   performSearch(value);
-  }, 300);
+  // }, 300);
 
   const handleClear = () => {
     keyword.value = '';
@@ -241,6 +244,18 @@
     router.replace(localePath({ path: '/search' }));
   };
 
+  watch(
+    () => route.query.query,
+    (newQuery) => {
+      if (typeof newQuery === 'string' && newQuery.trim()) {
+        keyword.value = newQuery;
+        performSearch(newQuery);
+      } else {
+        loading.value = false;
+      }
+    }
+  );
+
   onMounted(() => {
     if (typeof route.query.query === 'string' && route.query.query.trim()) {
       keyword.value = route.query.query;
@@ -280,10 +295,18 @@
     display: flex;
     gap: 1rem;
     align-items: center;
+    font-size: 16px;
   }
 
   .search-input {
     flex: 1;
+    height: 50px;
+  }
+
+  .search-button {
+    height: 50px;
+    width: 100px;
+    font-size: 16px;
   }
 
   .search-meta {