首页布局优化-1

frontend/src/components/MobileBottomNav.vue

@@ -62,7 +62,7 @@ function isNavActive(path: string) {
 }
 
 .nav-item.active {
-  color: #1477ff;
+  color: #ff6a00;
 }
 
 .nav-item span {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 export type FilterSection =
   | {
@@ -46,6 +46,36 @@ const activeCount = computed(() => {
   return chipCount + rangeCount
 })
 
+const visibleSections = computed(() =>
+  props.sections.filter(section => section.type === 'range' || section.options.length)
+)
+const activeSectionKey = ref('')
+const navRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+
+watch(
+  [() => props.show, () => visibleSections.value.map(section => section.key).join(',')],
+  async ([show]) => {
+    if (!show) return
+    activeSectionKey.value = visibleSections.value[0]?.key || ''
+    await nextTick()
+    if (contentRef.value) contentRef.value.scrollTop = 0
+  },
+  { immediate: true }
+)
+
+watch(activeSectionKey, async sectionKey => {
+  if (!sectionKey) return
+  await nextTick()
+  centerActiveNavItem(sectionKey)
+})
+
+function sectionCount(section: FilterSection) {
+  if (section.type === 'chips') return props.selectedFilters[section.key]?.length || 0
+  const range = props.rangeFilters[section.key]
+  return range?.min || range?.max ? 1 : 0
+}
+
 function toggleChip(sectionKey: string, value: string) {
   const selected = props.selectedFilters[sectionKey] || []
   const next = selected.includes(value)
@@ -78,6 +108,58 @@ function resetFilters() {
   emit('update:selectedFilters', {})
   emit('update:rangeFilters', {})
 }
+
+function scrollToSection(sectionKey: string) {
+  activeSectionKey.value = sectionKey
+  const body = contentRef.value
+  if (!body) return
+  const section = findSectionElement(sectionKey)
+  if (!section) return
+  body.scrollTo({ top: Math.max(sectionTopInBody(section, body) - 8, 0), behavior: 'auto' })
+}
+
+function syncActiveSection() {
+  const body = contentRef.value
+  if (!body) return
+  const sections = Array.from(body.querySelectorAll<HTMLElement>('[data-filter-section]'))
+  const currentTop = body.scrollTop + 28
+  let current = sections[0]
+  for (const section of sections) {
+    if (sectionTopInBody(section, body) <= currentTop) {
+      current = section
+      continue
+    }
+    break
+  }
+  activeSectionKey.value = current?.dataset.filterSection || visibleSections.value[0]?.key || ''
+}
+
+function centerActiveNavItem(sectionKey: string) {
+  const nav = navRef.value
+  if (!nav) return
+  const navItem =
+    Array.from(nav.querySelectorAll<HTMLElement>('[data-filter-nav]')).find(
+      item => item.dataset.filterNav === sectionKey
+    ) || null
+  if (!navItem) return
+  const itemTop = navItem.getBoundingClientRect().top - nav.getBoundingClientRect().top
+  const targetTop = nav.scrollTop + itemTop - nav.clientHeight / 2 + navItem.clientHeight / 2
+  nav.scrollTo({ top: Math.max(targetTop, 0), behavior: 'auto' })
+}
+
+function findSectionElement(sectionKey: string) {
+  const body = contentRef.value
+  if (!body) return null
+  return (
+    Array.from(body.querySelectorAll<HTMLElement>('[data-filter-section]')).find(
+      section => section.dataset.filterSection === sectionKey
+    ) || null
+  )
+}
+
+function sectionTopInBody(section: HTMLElement, body: HTMLElement) {
+  return section.getBoundingClientRect().top - body.getBoundingClientRect().top + body.scrollTop
+}
 </script>
 
 <template>
@@ -89,66 +171,96 @@ function resetFilters() {
     @update:show="emit('update:show', $event)"
   >
     <header class="sheet-header">
+      <span></span>
       <strong>筛选</strong>
-      <button type="button" @click="emit('update:show', false)">完成</button>
+      <button
+        class="sheet-close"
+        type="button"
+        aria-label="关闭筛选"
+        @click="emit('update:show', false)"
+      >
+        <van-icon name="cross" :size="24" />
+      </button>
     </header>
 
     <div class="sheet-body">
-      <section v-for="section in sections" :key="section.key" class="filter-section">
+      <nav ref="navRef" class="filter-nav" aria-label="筛选分类">
-        <div class="filter-title">
+        <button
-          <h3>{{ section.title }}</h3>
+          v-for="section in visibleSections"
-          <span v-if="section.type === 'range' && section.unit">单位：{{ section.unit }}</span>
+          :key="section.key"
-        </div>
+          type="button"
+          class="filter-nav-item"
+          :data-filter-nav="section.key"
+          :class="{ active: activeSectionKey === section.key }"
+          @click="scrollToSection(section.key)"
+        >
+          <span>{{ section.title }}</span>
+          <em v-if="sectionCount(section)">{{ sectionCount(section) }}</em>
+        </button>
+      </nav>
 
-        <template v-if="section.type === 'range'">
+      <div ref="contentRef" class="filter-content" @scroll.passive="syncActiveSection">
-          <div class="range-row">
+        <section
-            <input
+          v-for="section in visibleSections"
-              :value="rangeFilters[section.key]?.min || ''"
+          :key="section.key"
-              type="number"
+          class="filter-section"
-              inputmode="decimal"
+          :data-filter-section="section.key"
-              :placeholder="section.minPlaceholder || '最低'"
+        >
-              @input="updateRange(section.key, 'min', ($event.target as HTMLInputElement).value)"
+          <div class="filter-title">
-            />
+            <h3>{{ section.title }}</h3>
-            <span></span>
+            <span v-if="section.type === 'range' && section.unit">单位：{{ section.unit }}</span>
-            <input
-              :value="rangeFilters[section.key]?.max || ''"
-              type="number"
-              inputmode="decimal"
-              :placeholder="section.maxPlaceholder || '最高'"
-              @input="updateRange(section.key, 'max', ($event.target as HTMLInputElement).value)"
-            />
           </div>
-          <div v-if="rangePresets[section.key]?.length" class="chip-grid">
+
+          <template v-if="section.type === 'range'">
+            <div class="range-row">
+              <input
+                :value="rangeFilters[section.key]?.min || ''"
+                type="number"
+                inputmode="decimal"
+                :placeholder="section.minPlaceholder || '最低'"
+                @input="updateRange(section.key, 'min', ($event.target as HTMLInputElement).value)"
+              />
+              <span></span>
+              <input
+                :value="rangeFilters[section.key]?.max || ''"
+                type="number"
+                inputmode="decimal"
+                :placeholder="section.maxPlaceholder || '最高'"
+                @input="updateRange(section.key, 'max', ($event.target as HTMLInputElement).value)"
+              />
+            </div>
+            <div v-if="rangePresets[section.key]?.length" class="chip-grid">
+              <button
+                v-for="preset in rangePresets[section.key]"
+                :key="`${section.key}-${preset.label}`"
+                type="button"
+                :class="{ active: isRangePresetActive(section.key, preset.min, preset.max) }"
+                @click="applyRangePreset(section.key, preset.min, preset.max)"
+              >
+                {{ preset.label }}
+              </button>
+            </div>
+          </template>
+
+          <div v-else class="chip-grid">
             <button
-              v-for="preset in rangePresets[section.key]"
+              v-for="option in section.options"
-              :key="`${section.key}-${preset.label}`"
+              :key="`${section.key}-${option}`"
               type="button"
-              :class="{ active: isRangePresetActive(section.key, preset.min, preset.max) }"
+              :class="{ active: selectedFilters[section.key]?.includes(option) }"
-              @click="applyRangePreset(section.key, preset.min, preset.max)"
+              @click="toggleChip(section.key, option)"
             >
-              {{ preset.label }}
+              {{ option }}
             </button>
           </div>
-        </template>
+        </section>
-
+      </div>
-        <div v-else class="chip-grid">
-          <button
-            v-for="option in section.options"
-            :key="`${section.key}-${option}`"
-            type="button"
-            :class="{ active: selectedFilters[section.key]?.includes(option) }"
-            @click="toggleChip(section.key, option)"
-          >
-            {{ option }}
-          </button>
-        </div>
-      </section>
     </div>
 
     <footer class="sheet-footer">
       <button type="button" @click="resetFilters">重置</button>
       <button type="button" class="primary" @click="emit('update:show', false)">
-        查看结果{{ activeCount ? ` (${activeCount})` : '' }}
+        确定{{ activeCount ? ` (${activeCount})` : '' }}
       </button>
     </footer>
   </van-popup>
@@ -156,8 +268,13 @@ function resetFilters() {
 
 <style scoped>
 .mobile-filter-sheet {
+  display: grid;
+  grid-template-rows: 50px minmax(0, 1fr) auto;
+  height: 86vh;
   max-height: 86vh;
   overflow: hidden;
+  border-radius: 16px 16px 0 0;
+  background: #fff;
 }
 
 .sheet-header,
@@ -170,32 +287,118 @@ function resetFilters() {
 }
 
 .sheet-header {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr) 36px;
   border-bottom: 1px solid #edf2f7;
+  padding: 0 12px;
+  text-align: center;
 }
 
 .sheet-header strong {
   color: #17233d;
-  font-size: 16px;
+  font-size: 17px;
+  font-weight: 900;
 }
 
 .sheet-header button,
 .sheet-footer button {
   border: none;
   background: transparent;
-  color: #2563eb;
+  color: #ff6a00;
   font-weight: 700;
 }
 
+.sheet-close {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border-radius: 999px;
+  color: #222;
+}
+
 .sheet-body {
-  max-height: calc(86vh - 112px);
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  min-height: 0;
+  overflow: hidden;
+  background: #fff;
+}
+
+.filter-nav {
+  min-height: 0;
   overflow-y: auto;
-  padding: 4px 16px 16px;
+  background: #f6f6f6;
-  background: #f7f8fa;
+  scrollbar-width: none;
+}
+
+.filter-nav::-webkit-scrollbar,
+.filter-content::-webkit-scrollbar {
+  display: none;
+}
+
+.filter-nav-item {
+  position: relative;
+  display: grid;
+  width: 100%;
+  min-height: 48px;
+  place-items: center;
+  gap: 3px;
+  padding: 6px 6px;
+  border: none;
+  border-bottom: 1px solid #eeeeee;
+  background: transparent;
+  color: #222;
+  font-size: 13px;
+  line-height: 1.25;
+}
+
+.filter-nav-item.active {
+  background: #fff;
+  color: #ff6a00;
+  font-weight: 800;
+}
+
+.filter-nav-item.active::before {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 3px;
+  height: 20px;
+  border-radius: 999px;
+  background: #ff6a00;
+  content: '';
+  transform: translateY(-50%);
+}
+
+.filter-nav-item span {
+  display: block;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.filter-nav-item em {
+  display: grid;
+  min-width: 15px;
+  height: 15px;
+  place-items: center;
+  border-radius: 999px;
+  background: #ff6a00;
+  color: #fff;
+  font-size: 10px;
+  font-style: normal;
+  line-height: 1;
+}
+
+.filter-content {
+  min-height: 0;
+  overflow-y: auto;
+  background: #fff;
 }
 
 .filter-section {
-  padding: 14px 0;
+  padding: 14px 14px 16px;
-  border-bottom: 1px solid #e8edf3;
+  border-bottom: 1px solid #f0f0f0;
 }
 
 .filter-title {
@@ -208,41 +411,42 @@ function resetFilters() {
 
 .filter-title h3 {
   margin: 0;
-  color: #17233d;
+  color: #2b2b2b;
-  font-size: 14px;
+  font-size: 15px;
+  font-weight: 900;
 }
 
 .filter-title span {
   color: #8b9cb5;
-  font-size: 12px;
+  font-size: 11px;
 }
 
 .chip-grid {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
+  gap: 7px;
 }
 
 .chip-grid button {
-  min-height: 32px;
+  min-height: 34px;
-  padding: 0 12px;
+  padding: 0 7px;
-  border: 1px solid #dbe3ee;
+  border: 1px solid transparent;
   border-radius: 8px;
-  background: #fff;
+  background: #f5f5f5;
-  color: #334155;
+  color: #666;
   font-size: 13px;
 }
 
 .chip-grid button.active {
-  border-color: #2563eb;
+  border-color: #ff6a00;
-  background: #eff6ff;
+  background: #fff7ed;
-  color: #1d4ed8;
+  color: #c2410c;
   font-weight: 700;
 }
 
 .range-row {
   display: grid;
-  grid-template-columns: 1fr 18px 1fr;
+  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
   align-items: center;
   margin-bottom: 10px;
 }
@@ -256,20 +460,53 @@ function resetFilters() {
   min-width: 0;
   height: 36px;
   padding: 0 10px;
-  border: 1px solid #dbe3ee;
+  border: 1px solid #eeeeee;
   border-radius: 8px;
   background: #fff;
+  color: #333;
+  font-size: 13px;
+  text-align: center;
 }
 
 .sheet-footer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
   border-top: 1px solid #edf2f7;
+  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
+}
+
+.sheet-footer button {
+  height: 38px;
+  border: 1px solid #eeeeee;
+  border-radius: 10px;
+  background: #fff;
+  color: #222;
+  font-size: 15px;
+  font-weight: 800;
 }
 
 .sheet-footer .primary {
-  min-width: 128px;
+  min-width: 0;
   height: 38px;
-  border-radius: 8px;
+  border-color: #ffcc00;
-  background: #2563eb;
+  border-radius: 10px;
+  background: #ff6a00;
   color: #fff;
 }
+
+@media (max-width: 360px) {
+  .sheet-body {
+    grid-template-columns: 88px minmax(0, 1fr);
+  }
+
+  .filter-nav-item {
+    font-size: 12px;
+  }
+
+  .filter-section {
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+}
 </style>

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

@@ -1,20 +1,27 @@
 .mobile-shell {
+  width: 100%;
+  max-width: 430px;
   min-height: 100vh;
+  margin: 0 auto;
   padding-bottom: 68px;
   background: #f6f8fb;
   color: #17233d;
 }
 
 .mobile-hero {
+  position: sticky;
+  top: 0;
+  z-index: 20;
   padding: 12px 12px 10px;
   background: #fff;
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
 }
 
 .mobile-topbar {
-  display: grid;
+  display: flex;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  gap: 10px;
   align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .mobile-brand {
@@ -26,12 +33,13 @@
 
 .mobile-logo {
   display: grid;
-  width: 34px;
+  width: 42px;
-  height: 34px;
+  height: 42px;
   place-items: center;
-  border-radius: 8px;
+  border-radius: 10px;
-  background: #2563eb;
+  background: linear-gradient(135deg, #ff8a1f 0%, #ff5a00 100%);
   color: #fff;
+  font-size: 20px;
   font-weight: 900;
 }
 
@@ -43,25 +51,37 @@
 
 .mobile-brand strong {
   color: #0f172a;
-  font-size: 14px;
+  font-size: 17px;
 }
 
 .mobile-brand small {
   color: #64748b;
-  font-size: 11px;
+  font-size: 13px;
 }
 
 .home-search {
+  margin-top: 10px;
   padding: 0;
 }
 
+.home-search :deep(.van-search__content) {
+  height: 38px;
+  background: #f2f5f9;
+}
+
+.home-search :deep(.van-field__control) {
+  font-size: 14px;
+}
+
 .mobile-service {
-  height: 32px;
+  flex: 0 0 auto;
-  padding: 0 10px;
+  height: 40px;
-  border: 1px solid #dbe3ee;
+  padding: 0 16px;
-  border-radius: 8px;
+  border: 1px solid #fed7aa;
+  border-radius: 12px;
   background: #fff;
-  color: #2563eb;
+  color: #ff6a00;
+  font-size: 16px;
   font-weight: 700;
 }
 
@@ -108,25 +128,58 @@
   margin-bottom: 12px;
   border-radius: 8px;
   overflow: hidden;
+  background: #fff7ed;
+}
+
+.banner-swipe :deep(.van-swipe__indicators) {
+  right: 16px;
+  bottom: 12px;
+  left: auto;
+  transform: none;
+}
+
+.banner-swipe :deep(.van-swipe__indicator) {
+  width: 5px;
+  height: 5px;
+  background: rgba(255, 255, 255, 0.52);
+  opacity: 1;
+}
+
+.banner-swipe :deep(.van-swipe__indicator--active) {
+  width: 16px;
+  border-radius: 999px;
+  background: #ff6a00;
 }
 
 .mobile-banner {
   position: relative;
   display: flex;
-  min-height: 116px;
+  min-height: 128px;
   align-items: flex-end;
-  padding: 16px;
+  padding: 16px 16px 24px;
   overflow: hidden;
-  background: #0f172a;
+  background: #9a3412;
   color: #fff;
 }
 
 .mobile-banner.tone-warm {
-  background: #7c2d12;
+  background: #9a3412;
 }
 
 .mobile-banner.tone-cool {
-  background: #1e3a8a;
+  background: #7c2d12;
+}
+
+.mobile-banner.tone-blue {
+  background: #7c2d12;
+}
+
+.mobile-banner.tone-green {
+  background: #854d0e;
+}
+
+.mobile-banner.tone-orange {
+  background: #c2410c;
 }
 
 .banner-image {
@@ -141,12 +194,16 @@
   position: absolute;
   inset: 0;
   content: '';
-  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.72));
+  background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.58));
 }
 
-.mobile-banner > div:not(.banner-badge) {
+.banner-copy {
   position: relative;
   z-index: 1;
+  display: grid;
+  gap: 5px;
+  max-width: 270px;
+  padding-right: 44px;
 }
 
 .mobile-banner p,
@@ -154,30 +211,116 @@
   margin: 0;
 }
 
-.mobile-banner p,
+.mobile-banner p {
-.mobile-banner span {
+  color: rgba(255, 247, 237, 0.86);
   font-size: 12px;
-  opacity: 0.9;
+  font-weight: 800;
+  letter-spacing: 0;
 }
 
 .mobile-banner h1 {
-  margin-top: 4px;
+  font-size: 19px;
-  font-size: 20px;
+  line-height: 1.32;
+}
+
+.banner-pill {
+  width: fit-content;
+  max-width: 100%;
+  color: #ffedd5;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.mobile-banner.has-image .banner-pill {
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.34);
+  color: #fff7ed;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.2;
 }
 
 .banner-badge {
   position: absolute;
-  top: 12px;
+  top: 14px;
-  right: 12px;
+  right: 14px;
   z-index: 1;
-  padding: 4px 8px;
+  padding: 4px 9px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.88);
+  background: rgba(255, 247, 237, 0.94);
-  color: #0f172a;
+  color: #9a3412;
   font-size: 12px;
   font-weight: 800;
 }
 
+.zone-strip {
+  display: flex;
+  gap: 8px;
+  margin: 0 -12px 12px;
+  padding: 0 12px 2px;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.zone-strip::-webkit-scrollbar {
+  display: none;
+}
+
+.zone-pill {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-areas:
+    'label count'
+    'hint hint';
+  column-gap: 6px;
+  row-gap: 3px;
+  flex: 0 0 74px;
+  min-height: 54px;
+  align-items: center;
+  padding: 8px 9px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #fff;
+  color: #334155;
+}
+
+.zone-pill strong {
+  grid-area: label;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.zone-pill span {
+  grid-area: count;
+  color: #ff6a00;
+  font-size: 13px;
+  font-weight: 900;
+  text-align: right;
+}
+
+.zone-pill small {
+  grid-area: hint;
+  overflow: hidden;
+  color: #7b8798;
+  font-size: 10px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zone-pill.active {
+  border-color: #ff6a00;
+  background: #fff7ed;
+  color: #9a3412;
+}
+
+.zone-pill.active span {
+  color: #ff6a00;
+}
+
 .list-toolbar {
   display: flex;
   gap: 8px;
@@ -213,7 +356,7 @@
   height: 18px;
   place-items: center;
   border-radius: 999px;
-  background: #2563eb;
+  background: #ff6a00;
   color: #fff;
   font-size: 11px;
   font-style: normal;
@@ -242,24 +385,50 @@
 }
 
 .sort-panel button.active {
-  background: #eff6ff;
+  background: #fff7ed;
-  color: #1d4ed8;
+  color: #c2410c;
 }
 
 .result-count {
+  display: flex;
+  align-items: baseline;
+  gap: 1px;
   margin-bottom: 10px;
   color: #64748b;
   font-size: 13px;
 }
 
 .result-count strong {
-  color: #2563eb;
+  color: #ff6a00;
 }
 
 .state-loading {
   padding: 32px 0;
 }
 
+.mobile-empty {
+  min-height: 280px;
+  justify-content: center;
+  padding: 36px 0 28px;
+}
+
+.mobile-empty :deep(.van-empty__image) {
+  width: 118px;
+  height: 118px;
+  opacity: 0.58;
+}
+
+.mobile-empty :deep(.van-empty__description) {
+  margin-top: 12px;
+  color: #8b95a1;
+  font-size: 14px;
+}
+
+.mobile-empty :deep(.van-button--primary) {
+  border-color: #ff6a00;
+  background: #ff6a00;
+}
+
 .mobile-list {
   display: grid;
   gap: 12px;
@@ -303,7 +472,7 @@
 .card-cover-labels em {
   padding: 3px 7px;
   border-radius: 999px;
-  background: rgba(37, 99, 235, 0.92);
+  background: rgba(255, 106, 0, 0.92);
   color: #fff;
   font-size: 11px;
   font-style: normal;
@@ -329,8 +498,8 @@
   margin-top: 6px;
   padding: 3px 7px;
   border-radius: 999px;
-  background: #eff6ff;
+  background: #fff7ed;
-  color: #2563eb;
+  color: #c2410c;
   font-size: 11px;
   font-weight: 800;
 }
@@ -389,7 +558,14 @@
     display: none;
   }
 
-  .mobile-topbar {
+  .mobile-logo {
-    grid-template-columns: 34px minmax(0, 1fr) auto;
+    width: 38px;
+    height: 38px;
+  }
+
+  .mobile-service {
+    height: 36px;
+    padding: 0 12px;
+    font-size: 14px;
   }
 }

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: 'recommended', label: '综合推荐' },
-  { key: 'published', 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() {
+function filterQuerySignature() {
-  return JSON.stringify(buildListingQuery(1))
+  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="没有符合条件的账号"
         >