首页布局优化-1

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

@@ -29,6 +29,7 @@ import {
   formatListingCode,
   getLoginMethod,
   getServerRegion,
+  assetRegions,
   hasAcceleratedSaleRatio,
   hasGiftResources,
 } from '@/utils/listingDisplay'
@@ -41,11 +42,13 @@ const loadingMore = ref(false)
 const loadFailed = ref(false)
 const listings = ref<Listing[]>([])
 const totalListings = ref(0)
+const zoneCounts = ref<Record<string, number>>({})
 const currentPage = ref(1)
 const hasMoreListings = ref(true)
 const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions)
 const sortOpen = ref(false)
-const activeSort = ref('comprehensive')
+const activeSort = ref('recommended')
+const activeZone = ref('all')
 const filterOpen = ref(false)
 const selectedFilters = ref<Record<string, string[]>>({})
 const rangeFilters = ref<Record<string, { min: string; max: string }>>({})
@@ -56,23 +59,57 @@ const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners)
 const supportLoading = ref(false)
 const mobilePageSize = 10
 let listingRequestSeq = 0
+let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
 
 const sortOptions = [
-  { key: 'comprehensive', label: '综合排序' },
-  { key: 'published', label: '发布时间' },
+  { key: 'recommended', label: '综合推荐' },
+  { key: 'coinDesc', label: '哈夫币' },
   { key: 'awmDesc', label: 'AWM数量' },
   { key: 'priceAsc', label: '价格最低' },
   { key: 'priceDesc', label: '价格最高' },
+  { key: 'published', label: '最新发布' },
+]
+
+const zoneOptions = [
+  { key: 'all', label: '全部', hint: '当前可租' },
+  { key: 'sale', label: '特惠', hint: '价格更划算' },
+  { key: 'gift', label: '赠送', hint: '含赠送物品' },
+  { key: 'night', label: '夜间', hint: '夜间好上号' },
+  { key: 'password', label: '账密', hint: '交接更快' },
+  { key: 'highCoin', label: '高币', hint: '100M以上' },
 ]
 
 const rangePresets: Record<string, Array<{ label: string; min: string; max: string }>> = {
-  coin: [
+  price: [
+    { label: '0-50', min: '0', max: '50' },
     { label: '50-100', min: '50', max: '100' },
     { label: '100-200', min: '100', max: '200' },
-    { label: '200-300', min: '200', max: '300' },
+    { label: '200以上', min: '200', max: '' },
+  ],
+  coin: [
+    { label: '0-100', min: '0', max: '100' },
+    { label: '100-300', min: '100', max: '300' },
     { label: '300-500', min: '300', max: '500' },
     { label: '500以上', min: '500', max: '' },
   ],
+  deposit: [
+    { label: '0-50', min: '0', max: '50' },
+    { label: '50-100', min: '50', max: '100' },
+    { label: '100-200', min: '100', max: '200' },
+    { label: '200以上', min: '200', max: '' },
+  ],
+  total: [
+    { label: '0-500', min: '0', max: '500' },
+    { label: '500-1000', min: '500', max: '1000' },
+    { label: '1000-2000', min: '1000', max: '2000' },
+    { label: '2000-5000', min: '2000', max: '5000' },
+  ],
+  fireLevel: [
+    { label: '38-50', min: '38', max: '50' },
+    { label: '50-60', min: '50', max: '60' },
+    { label: '60-70', min: '60', max: '70' },
+    { label: '70以上', min: '70', max: '' },
+  ],
   resource_awmAmmo: [
     { label: '0-20', min: '0', max: '20' },
     { label: '20-50', min: '20', max: '50' },
@@ -111,6 +148,13 @@ const loginMethodFilterOptions = computed(() =>
   uniqueOptions(publishOptions.value.login_method_options.map(item => item.trim()).filter(Boolean))
 )
 
+const regionFilterOptions = computed(() =>
+  uniqueOptions([
+    ...publishOptions.value.region_options,
+    ...listings.value.flatMap(item => assetRegions(item)),
+  ])
+)
+
 const filterSections = computed<FilterSection[]>(() => [
   {
     key: 'price',
@@ -129,6 +173,7 @@ const filterSections = computed<FilterSection[]>(() => [
     maxPlaceholder: '最高',
   },
   { key: 'server', title: '区服', type: 'chips', options: serverFilterOptions.value },
+  { key: 'region', title: '资产地区', type: 'chips', options: regionFilterOptions.value },
   { key: 'login', title: '上号方式', type: 'chips', options: loginMethodFilterOptions.value },
   {
     key: 'insurance',
@@ -159,6 +204,13 @@ const filterSections = computed<FilterSection[]>(() => [
     minPlaceholder: '最低',
     maxPlaceholder: '最高',
   },
+  {
+    key: 'fireLevel',
+    title: '等级',
+    type: 'range',
+    minPlaceholder: '最低',
+    maxPlaceholder: '最高',
+  },
   { key: 'rank', title: '段位', type: 'chips', options: publishOptions.value.rank_options },
   {
     key: 'deposit',
@@ -168,6 +220,14 @@ const filterSections = computed<FilterSection[]>(() => [
     minPlaceholder: '最低',
     maxPlaceholder: '最高',
   },
+  {
+    key: 'total',
+    title: '合计金额',
+    type: 'range',
+    unit: '元',
+    minPlaceholder: '最低',
+    maxPlaceholder: '最高',
+  },
 ])
 
 const activeFilterCount = computed(() => {
@@ -185,6 +245,13 @@ const displayListings = computed(() => {
   return listings.value
 })
 
+const visibleZoneOptions = computed(() =>
+  zoneOptions.map(zone => ({
+    ...zone,
+    count: zoneCount(zone.key),
+  }))
+)
+
 onMounted(() => {
   loadListings()
   loadHomeConfig()
@@ -193,15 +260,23 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('scroll', handleWindowScroll)
+  if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
 })
 
 watch(
-  () => listingQuerySignature(),
+  () => filterQuerySignature(),
   () => {
     loadListings(true)
   }
 )
 
+watch(searchValue, () => {
+  if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
+  searchDebounceTimer = setTimeout(() => {
+    loadListings(true)
+  }, 300)
+})
+
 async function loadListings(reset = true) {
   if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return
   const requestSeq = ++listingRequestSeq
@@ -217,6 +292,7 @@ async function loadListings(reset = true) {
     if (requestSeq !== listingRequestSeq) return
     listings.value = reset ? page.items : [...listings.value, ...page.items]
     totalListings.value = page.total
+    zoneCounts.value = page.zone_counts
     hasMoreListings.value = listings.value.length < page.total
     currentPage.value = page.page + 1
     requestAnimationFrame(handleWindowScroll)
@@ -224,6 +300,7 @@ async function loadListings(reset = true) {
     if (reset) {
       listings.value = []
       totalListings.value = 0
+      zoneCounts.value = {}
       hasMoreListings.value = false
       loadFailed.value = true
     }
@@ -277,10 +354,16 @@ function selectSort(sortKey: string) {
   sortOpen.value = false
 }
 
+function selectZone(zoneKey: string) {
+  activeZone.value = zoneKey
+  sortOpen.value = false
+}
+
 function clearFilters() {
   selectedFilters.value = {}
   rangeFilters.value = {}
   searchValue.value = ''
+  activeZone.value = 'all'
 }
 
 function buildListingQuery(page: number): PublicListingQuery {
@@ -289,6 +372,7 @@ function buildListingQuery(page: number): PublicListingQuery {
     page_size: mobilePageSize,
     keyword: searchValue.value.trim(),
     sort: activeSort.value,
+    zone: activeZone.value,
   }
   const skinGroups: string[] = []
   const skinNames: string[] = []
@@ -296,6 +380,7 @@ function buildListingQuery(page: number): PublicListingQuery {
     const value = values.filter(Boolean).join(',')
     if (!value) continue
     if (key === 'server') query.server = value
+    else if (key === 'region') query.region = value
     else if (key === 'login') query.login_method = value
     else if (key === 'insurance') query.insurance = value
     else if (key === 'stamina') query.stamina = value
@@ -325,6 +410,12 @@ function buildListingQuery(page: number): PublicListingQuery {
     } else if (key === 'deposit') {
       query.min_deposit = min
       query.max_deposit = max
+    } else if (key === 'total') {
+      query.min_total = min
+      query.max_total = max
+    } else if (key === 'fireLevel') {
+      query.min_fire_level = min
+      query.max_fire_level = max
     } else if (key.startsWith('resource_')) {
       const resourceKey = key.replace('resource_', '')
       query[`resource_${resourceKey}_min`] = min
@@ -334,8 +425,13 @@ function buildListingQuery(page: number): PublicListingQuery {
   return query
 }
 
-function listingQuerySignature() {
-  return JSON.stringify(buildListingQuery(1))
+function filterQuerySignature() {
+  return JSON.stringify({
+    sort: activeSort.value,
+    zone: activeZone.value,
+    selected: selectedFilters.value,
+    ranges: rangeFilters.value,
+  })
 }
 
 function parseOptionalNumber(value: string) {
@@ -361,6 +457,11 @@ function parseQuantityUnit(price: string) {
 function uniqueOptions(values: string[]) {
   return [...new Set(values.map(item => item.trim()).filter(Boolean))]
 }
+
+function zoneCount(key: string) {
+  if (key === 'all') return zoneCounts.value.all ?? totalListings.value
+  return zoneCounts.value[key] ?? 0
+}
 </script>
 
 <template>
@@ -375,12 +476,6 @@ function uniqueOptions(values: string[]) {
             <small>哈夫币租号</small>
           </div>
         </div>
-        <van-search
-          v-model="searchValue"
-          shape="round"
-          placeholder="搜编号 / 区服 / 段位"
-          class="home-search"
-        />
         <button
           class="mobile-service"
           type="button"
@@ -390,6 +485,12 @@ function uniqueOptions(values: string[]) {
           {{ supportLoading ? '接入中' : '客服' }}
         </button>
       </div>
+      <van-search
+        v-model="searchValue"
+        shape="round"
+        placeholder="搜编号 / 区服 / 段位"
+        class="home-search"
+      />
 
       <!-- 防骗提示卡片（不用 van-notice-bar） -->
       <div class="fraud-tip">
@@ -425,16 +526,31 @@ function uniqueOptions(values: string[]) {
                 :src="slide.image_url"
                 :alt="slide.title || slide.eyebrow || '首页轮播图'"
               />
-              <div>
+              <div class="banner-copy">
                 <p v-if="slide.eyebrow">{{ slide.eyebrow }}</p>
                 <h1 v-if="slide.title">{{ slide.title }}</h1>
-                <span v-if="slide.pill">{{ slide.pill }}</span>
+                <span v-if="slide.pill" class="banner-pill">{{ slide.pill }}</span>
               </div>
               <div v-if="slide.badge" class="banner-badge">{{ slide.badge }}</div>
             </div>
           </van-swipe-item>
         </van-swipe>
 
+        <div class="zone-strip" aria-label="账号专区">
+          <button
+            v-for="zone in visibleZoneOptions"
+            :key="zone.key"
+            type="button"
+            class="zone-pill"
+            :class="{ active: activeZone === zone.key }"
+            @click="selectZone(zone.key)"
+          >
+            <strong>{{ zone.label }}</strong>
+            <span>{{ zone.count }}</span>
+            <small>{{ zone.hint }}</small>
+          </button>
+        </div>
+
         <div class="list-toolbar">
           <button type="button" class="sort-entry" @click="toggleSortPanel">
             <span>{{ activeSortLabel }}</span>
@@ -476,6 +592,7 @@ function uniqueOptions(values: string[]) {
         />
         <van-empty
           v-else-if="displayListings.length === 0"
+          class="mobile-empty"
           image="search"
           description="没有符合条件的账号"
         >