新增商品编号搜索

frontend/src/layouts/AppLayout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import {
   ArrowDown,
@@ -28,6 +28,7 @@ import { useSessionStore } from '@/stores/session'
 
 const session = useSessionStore()
 const router = useRouter()
+const route = useRoute()
 
 const navItems = [
   { label: '首页', to: '/', icon: House },
@@ -50,6 +51,7 @@ const sellerServiceItems = [
 
 const showUserDropdown = ref(false)
 const supportLoading = ref(false)
+const topSearchKeyword = ref('')
 
 const realnameBadge = computed(() => {
   switch (session.realnameStatus) {
@@ -64,6 +66,33 @@ const realnameBadge = computed(() => {
   }
 })
 
+watch(
+  () => [route.path, route.query.keyword],
+  () => {
+    if (route.path !== '/') return
+    topSearchKeyword.value = normalizeRouteKeyword(route.query.keyword)
+  },
+  { immediate: true }
+)
+
+function normalizeRouteKeyword(value: unknown) {
+  if (Array.isArray(value)) return String(value[0] || '')
+  return typeof value === 'string' ? value : ''
+}
+
+function handleTopSearchInput(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+  topSearchKeyword.value = value
+  const keyword = value.trim()
+  router.replace({
+    path: '/',
+    query: {
+      ...route.query,
+      keyword: keyword || undefined,
+    },
+  })
+}
+
 function handleLogout() {
   session.logout()
   showUserDropdown.value = false
@@ -108,7 +137,11 @@ async function handleSupportClick() {
 
       <div class="pc-search">
         <el-icon><Search /></el-icon>
-        <input placeholder="搜索区服 / 段位 / 哈夫币数量 / 皮肤" />
+        <input
+          :value="topSearchKeyword"
+          placeholder="搜索编号 / 区服 / 段位 / 哈夫币数量 / 皮肤"
+          @input="handleTopSearchInput"
+        />
       </div>
 
       <div class="pc-user-actions">