新增商品编号搜索

frontend/src/features/listings/views/HomeView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import {
   defaultHomeAnnouncements,
   defaultHomeBanners,
@@ -24,6 +25,8 @@ const banners = ref<HomeBannerSlide[]>(defaultHomeBanners)
 const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions)
 const sortBy = ref('recommended')
 const activeZone = ref('all')
+const route = useRoute()
+const router = useRouter()
 
 const {
   filters,
@@ -40,6 +43,8 @@ const {
   computed(() => listings.value)
 )
 
+filters.keyword = routeKeyword()
+
 const {
   loading,
   loadingMore,
@@ -50,6 +55,13 @@ const {
   zoneCount,
 } = useListingQuery(filters, sortBy, activeZone)
 
+watch(
+  () => route.query.keyword,
+  () => {
+    filters.keyword = routeKeyword()
+  }
+)
+
 const statCards = computed(() => [
   { label: '可租账号', value: `${totalListings.value}`, hint: '当前筛选结果' },
   {
@@ -127,6 +139,19 @@ function handleResetFilters() {
   resetFilters()
   activeZone.value = 'all'
   sortBy.value = 'recommended'
+  router.replace({
+    path: '/',
+    query: {
+      ...route.query,
+      keyword: undefined,
+    },
+  })
+}
+
+function routeKeyword() {
+  const keyword = route.query.keyword
+  if (Array.isArray(keyword)) return String(keyword[0] || '')
+  return typeof keyword === 'string' ? keyword : ''
 }
 
 loadHome()