优化筛选, 增加记住筛选功能

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

@@ -12,6 +12,14 @@ import {
   type ListingPublishOptions,
 } from '@/features/listings/api/listingOptions'
 import { useHomeFilters } from '@/features/listings/composables/useHomeFilters'
+import {
+  desktopHomeFilterQueryKeys,
+  isSameQuery,
+  mergeHomeQuery,
+  readQueryNumber,
+  readQueryString,
+  type HomeQueryValue,
+} from '@/features/listings/composables/useHomeFilterQuery'
 import { useListingQuery } from '@/features/listings/composables/useListingQuery'
 import HomeAnnouncement from '../components/HomeAnnouncement.vue'
 import HomeBanner from '../components/HomeBanner.vue'
@@ -43,7 +51,7 @@ const {
   computed(() => listings.value)
 )
 
-filters.keyword = routeKeyword()
+applyRouteQueryToHomeState()
 
 const {
   loading,
@@ -56,9 +64,16 @@ const {
 } = useListingQuery(filters, sortBy, activeZone)
 
 watch(
-  () => route.query.keyword,
+  () => route.query,
   () => {
-    filters.keyword = routeKeyword()
+    applyRouteQueryToHomeState()
+  }
+)
+
+watch(
+  () => desktopHomeStateSignature(),
+  () => {
+    syncHomeQuery()
   }
 )
 
@@ -139,19 +154,74 @@ function handleResetFilters() {
   resetFilters()
   activeZone.value = 'all'
   sortBy.value = 'recommended'
-  router.replace({
-    path: '/',
-    query: {
-      ...route.query,
-      keyword: undefined,
-    },
-  })
+  syncHomeQuery()
 }
 
-function routeKeyword() {
-  const keyword = route.query.keyword
-  if (Array.isArray(keyword)) return String(keyword[0] || '')
-  return typeof keyword === 'string' ? keyword : ''
+function applyRouteQueryToHomeState() {
+  const query = route.query
+  filters.keyword = readQueryString(query, 'keyword')
+  filters.server = readQueryString(query, 'server')
+  filters.region = readQueryString(query, 'region')
+  filters.loginMethod = readQueryString(query, 'login_method')
+  filters.rank = readQueryString(query, 'rank')
+  filters.insurance = readQueryString(query, 'insurance')
+  filters.stamina = readQueryString(query, 'stamina')
+  filters.load = readQueryString(query, 'load')
+  filters.skinGroup = readQueryString(query, 'skin_group')
+  filters.skinName = readQueryString(query, 'skin_name')
+  filters.minCoin = readQueryNumber(query, 'min_coin')
+  filters.maxCoin = readQueryNumber(query, 'max_coin')
+  filters.minPrice = readQueryNumber(query, 'min_price')
+  filters.maxPrice = readQueryNumber(query, 'max_price')
+  filters.minDeposit = readQueryNumber(query, 'min_deposit')
+  filters.maxDeposit = readQueryNumber(query, 'max_deposit')
+  filters.minTotal = readQueryNumber(query, 'min_total')
+  filters.maxTotal = readQueryNumber(query, 'max_total')
+  filters.minFireLevel = readQueryNumber(query, 'min_fire_level')
+  filters.maxFireLevel = readQueryNumber(query, 'max_fire_level')
+  sortBy.value = readQueryString(query, 'sort') || 'recommended'
+  activeZone.value = readQueryString(query, 'zone') || 'all'
+}
+
+function desktopHomeStateSignature() {
+  return JSON.stringify(buildDesktopHomeQueryValues())
+}
+
+function syncHomeQuery() {
+  const query = mergeHomeQuery(
+    route.query,
+    desktopHomeFilterQueryKeys,
+    buildDesktopHomeQueryValues()
+  )
+  if (isSameQuery(route.query, query)) return
+  router.replace({ path: '/', query })
+}
+
+function buildDesktopHomeQueryValues(): Record<string, HomeQueryValue> {
+  return {
+    keyword: filters.keyword.trim() || undefined,
+    sort: sortBy.value === 'recommended' ? undefined : sortBy.value,
+    zone: activeZone.value === 'all' ? undefined : activeZone.value,
+    server: filters.server,
+    region: filters.region,
+    login_method: filters.loginMethod,
+    rank: filters.rank,
+    insurance: filters.insurance,
+    stamina: filters.stamina,
+    load: filters.load,
+    skin_group: filters.skinGroup,
+    skin_name: filters.skinName,
+    min_coin: filters.minCoin,
+    max_coin: filters.maxCoin,
+    min_price: filters.minPrice,
+    max_price: filters.maxPrice,
+    min_deposit: filters.minDeposit,
+    max_deposit: filters.maxDeposit,
+    min_total: filters.minTotal,
+    max_total: filters.maxTotal,
+    min_fire_level: filters.minFireLevel,
+    max_fire_level: filters.maxFireLevel,
+  }
 }
 
 loadHome()

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { RouterLink, useRouter } from 'vue-router'
+import { RouterLink, useRoute, useRouter } from 'vue-router'
 import { showToast } from 'vant'
 import MobileBottomNav from '@/components/MobileBottomNav.vue'
 
@@ -22,6 +22,15 @@ import {
   type HomeBannerSlide,
 } from '@/features/listings/api/homeConfig'
 import MobileHomeFilterSheet, { type FilterSection } from './MobileHomeFilterSheet.vue'
+import {
+  decodeHomeQueryJson,
+  encodeHomeQueryJson,
+  isSameQuery,
+  mergeHomeQuery,
+  mobileHomeFilterQueryKeys,
+  readQueryString,
+  type HomeQueryValue,
+} from '@/features/listings/composables/useHomeFilterQuery'
 import {
   getListingChips,
   getListingDisplayPrice,
@@ -38,6 +47,7 @@ import {
 import { useSessionStore } from '@/stores/session'
 
 const router = useRouter()
+const route = useRoute()
 const session = useSessionStore()
 const loading = ref(false)
 const loadingMore = ref(false)
@@ -255,6 +265,8 @@ const visibleZoneOptions = computed(() =>
   }))
 )
 
+applyRouteQueryToMobileState()
+
 onMounted(() => {
   loadListings()
   loadHomeConfig()
@@ -269,11 +281,20 @@ onBeforeUnmount(() => {
 watch(
   () => filterQuerySignature(),
   () => {
+    syncMobileHomeQuery()
     loadListings(true)
   }
 )
 
+watch(
+  () => route.query,
+  () => {
+    applyRouteQueryToMobileState()
+  }
+)
+
 watch(searchValue, () => {
+  syncMobileHomeQuery()
   if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
   searchDebounceTimer = setTimeout(() => {
     loadListings(true)
@@ -367,6 +388,7 @@ function clearFilters() {
   rangeFilters.value = {}
   searchValue.value = ''
   activeZone.value = 'all'
+  syncMobileHomeQuery()
 }
 
 function buildListingQuery(page: number): PublicListingQuery {
@@ -443,6 +465,57 @@ function parseOptionalNumber(value: string) {
   return Number.isFinite(number) ? number : undefined
 }
 
+function applyRouteQueryToMobileState() {
+  const query = route.query
+  searchValue.value = readQueryString(query, 'keyword')
+  activeSort.value = readQueryString(query, 'sort') || 'recommended'
+  activeZone.value = readQueryString(query, 'zone') || 'all'
+  selectedFilters.value = normalizeSelectedFilters(
+    decodeHomeQueryJson<Record<string, unknown>>(query, 'filters', {})
+  )
+  rangeFilters.value = normalizeRangeFilters(
+    decodeHomeQueryJson<Record<string, unknown>>(query, 'ranges', {})
+  )
+}
+
+function syncMobileHomeQuery() {
+  const query = mergeHomeQuery(route.query, mobileHomeFilterQueryKeys, buildMobileHomeQueryValues())
+  if (isSameQuery(route.query, query)) return
+  router.replace({ path: route.path, query })
+}
+
+function buildMobileHomeQueryValues(): Record<string, HomeQueryValue> {
+  return {
+    keyword: searchValue.value.trim() || undefined,
+    sort: activeSort.value === 'recommended' ? undefined : activeSort.value,
+    zone: activeZone.value === 'all' ? undefined : activeZone.value,
+    filters: encodeHomeQueryJson(normalizeSelectedFilters(selectedFilters.value)),
+    ranges: encodeHomeQueryJson(normalizeRangeFilters(rangeFilters.value)),
+  }
+}
+
+function normalizeSelectedFilters(value: Record<string, unknown>) {
+  const normalized: Record<string, string[]> = {}
+  for (const [key, items] of Object.entries(value)) {
+    if (!Array.isArray(items)) continue
+    const filters = items.map(item => String(item).trim()).filter(Boolean)
+    if (filters.length) normalized[key] = filters
+  }
+  return normalized
+}
+
+function normalizeRangeFilters(value: Record<string, unknown>) {
+  const normalized: Record<string, { min: string; max: string }> = {}
+  for (const [key, range] of Object.entries(value)) {
+    if (!range || typeof range !== 'object' || Array.isArray(range)) continue
+    const record = range as Record<string, unknown>
+    const min = record.min === undefined ? '' : String(record.min).trim()
+    const max = record.max === undefined ? '' : String(record.max).trim()
+    if (min || max) normalized[key] = { min, max }
+  }
+  return normalized
+}
+
 function handleWindowScroll() {
   showBackTop.value = window.scrollY > 520
   if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 360) return