拆分 HomeView.vue 巨型文件

frontend/components.d.ts

@@ -17,8 +17,6 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCarousel: typeof import('element-plus/es')['ElCarousel']
-    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -35,7 +33,6 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']

frontend/src/composables/home/useFilterOptions.ts

@@ -0,0 +1,51 @@
+export const coinRangeOptions = [
+  { label: '全部区间', min: undefined, max: undefined },
+  { 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: undefined },
+]
+
+export const moneyRangeOptions = [
+  { label: '全部区间', min: undefined, max: undefined },
+  { 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: undefined },
+]
+
+export const totalRangeOptions = [
+  { label: '全部区间', min: undefined, max: undefined },
+  { 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 },
+]
+
+export const fireLevelRangeOptions = [
+  { label: '全部等级', min: undefined, max: undefined },
+  { 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: undefined },
+]
+
+export function rangeLabel(
+  min: number | undefined,
+  max: number | undefined,
+  fallback: string
+) {
+  if (min !== undefined && max !== undefined) return `${min}-${max}`
+  if (min !== undefined) return `${min}+`
+  if (max !== undefined) return `≤${max}`
+  return fallback
+}
+
+export function isRangeSelected(
+  currentMin: number | undefined,
+  currentMax: number | undefined,
+  min: number | undefined,
+  max: number | undefined
+) {
+  return currentMin === min && currentMax === max
+}

frontend/src/composables/home/useHomeFilters.ts

@@ -0,0 +1,208 @@
+import { reactive, ref, computed, type Ref } from 'vue'
+import type { ListingPublishOptions } from '@/api/listingOptions'
+import type { Listing } from '@/api/listings'
+import { assetRegions } from '@/utils/listingDisplay'
+
+export type FilterPopoverKey =
+  | 'insurance'
+  | 'stamina'
+  | 'load'
+  | 'region'
+  | 'coin'
+  | 'price'
+  | 'deposit'
+  | 'total'
+  | 'skin'
+  | 'rank'
+  | 'fireLevel'
+  | 'loginMethod'
+
+export type StringFilterKey =
+  | 'insurance'
+  | 'stamina'
+  | 'load'
+  | 'region'
+  | 'rank'
+  | 'loginMethod'
+
+export interface HomeFilters {
+  keyword: string
+  server: string
+  region: string
+  loginMethod: string
+  rank: string
+  insurance: string
+  stamina: string
+  load: string
+  skinGroup: string
+  skinName: string
+  minCoin: number | undefined
+  maxCoin: number | undefined
+  minPrice: number | undefined
+  maxPrice: number | undefined
+  minDeposit: number | undefined
+  maxDeposit: number | undefined
+  minTotal: number | undefined
+  maxTotal: number | undefined
+  minFireLevel: number | undefined
+  maxFireLevel: number | undefined
+}
+
+export function useHomeFilters(
+  publishOptions: Ref<ListingPublishOptions>,
+  listings: Ref<Listing[]>
+) {
+  const filters = reactive<HomeFilters>({
+    keyword: '',
+    server: '',
+    region: '',
+    loginMethod: '',
+    rank: '',
+    insurance: '',
+    stamina: '',
+    load: '',
+    skinGroup: '',
+    skinName: '',
+    minCoin: undefined,
+    maxCoin: undefined,
+    minPrice: undefined,
+    maxPrice: undefined,
+    minDeposit: undefined,
+    maxDeposit: undefined,
+    minTotal: undefined,
+    maxTotal: undefined,
+    minFireLevel: undefined,
+    maxFireLevel: undefined,
+  })
+
+  const activeFilterPopover = ref<FilterPopoverKey | ''>('')
+
+  const regionOptions = computed(() =>
+    uniqueOptions([
+      ...publishOptions.value.region_options,
+      ...listings.value.flatMap((item) => assetRegions(item)),
+    ])
+  )
+
+  const loginMethodOptions = computed(() =>
+    uniqueOptions(
+      publishOptions.value.login_method_options
+        .map((item) => item.trim())
+        .filter(Boolean)
+    )
+  )
+
+  const skinFilterGroups = computed(() => {
+    const preferred = ['operatorRed', 'operatorGold']
+    return preferred
+      .map((key) => publishOptions.value.skin_groups.find((group) => group.key === key))
+      .filter((group): group is ListingPublishOptions['skin_groups'][number] => Boolean(group))
+  })
+
+  const skinChipLabel = computed(() => {
+    if (filters.skinName) return filters.skinName
+    if (filters.skinGroup) {
+      return skinFilterGroups.value.find((group) => group.key === filters.skinGroup)?.title || '皮肤'
+    }
+    return '皮肤'
+  })
+
+  function uniqueOptions(values: string[]) {
+    return [...new Set(values.map((item) => item.trim()).filter(Boolean))]
+  }
+
+  function resetFilters() {
+    filters.keyword = ''
+    filters.server = ''
+    filters.region = ''
+    filters.loginMethod = ''
+    filters.rank = ''
+    filters.insurance = ''
+    filters.stamina = ''
+    filters.load = ''
+    filters.skinGroup = ''
+    filters.skinName = ''
+    filters.minCoin = undefined
+    filters.maxCoin = undefined
+    filters.minPrice = undefined
+    filters.maxPrice = undefined
+    filters.minDeposit = undefined
+    filters.maxDeposit = undefined
+    filters.minTotal = undefined
+    filters.maxTotal = undefined
+    filters.minFireLevel = undefined
+    filters.maxFireLevel = undefined
+  }
+
+  function setStringFilter(key: StringFilterKey, value: string) {
+    filters[key] = value
+    closeFilterPopover()
+  }
+
+  function setCoinRange(min: number | undefined, max: number | undefined) {
+    filters.minCoin = min
+    filters.maxCoin = max
+  }
+
+  function setPriceRange(min: number | undefined, max: number | undefined) {
+    filters.minPrice = min
+    filters.maxPrice = max
+  }
+
+  function setDepositRange(min: number | undefined, max: number | undefined) {
+    filters.minDeposit = min
+    filters.maxDeposit = max
+  }
+
+  function setTotalRange(min: number | undefined, max: number | undefined) {
+    filters.minTotal = min
+    filters.maxTotal = max
+  }
+
+  function setFireLevelRange(min: number | undefined, max: number | undefined) {
+    filters.minFireLevel = min
+    filters.maxFireLevel = max
+  }
+
+  function setSkinFilter(group: string, name = '') {
+    filters.skinGroup = group
+    filters.skinName = name
+  }
+
+  function resetSkinFilter() {
+    filters.skinGroup = ''
+    filters.skinName = ''
+  }
+
+  function setFilterPopover(key: FilterPopoverKey, visible: boolean) {
+    if (visible) {
+      activeFilterPopover.value = key
+      return
+    }
+    if (activeFilterPopover.value === key) activeFilterPopover.value = ''
+  }
+
+  function closeFilterPopover() {
+    activeFilterPopover.value = ''
+  }
+
+  return {
+    filters,
+    activeFilterPopover,
+    regionOptions,
+    loginMethodOptions,
+    skinFilterGroups,
+    skinChipLabel,
+    resetFilters,
+    setStringFilter,
+    setCoinRange,
+    setPriceRange,
+    setDepositRange,
+    setTotalRange,
+    setFireLevelRange,
+    setSkinFilter,
+    resetSkinFilter,
+    setFilterPopover,
+    closeFilterPopover,
+  }
+}

frontend/src/composables/home/useListingQuery.ts

@@ -0,0 +1,117 @@
+import { ref, onMounted, onBeforeUnmount, watch, type Ref } from 'vue'
+import { fetchListingsPage, type Listing, type PublicListingQuery } from '@/api/listings'
+import type { HomeFilters } from './useHomeFilters'
+
+const homePageSize = 12
+
+export function useListingQuery(
+  filters: HomeFilters,
+  sortBy: Ref<string>,
+  activeZone: Ref<string>
+) {
+  const loading = ref(false)
+  const loadingMore = ref(false)
+  const listings = ref<Listing[]>([])
+  const totalListings = ref(0)
+  const zoneCounts = ref<Record<string, number>>({})
+  const currentPage = ref(1)
+  const hasMoreListings = ref(true)
+  let listingRequestSeq = 0
+
+  function buildListingQuery(page: number): PublicListingQuery {
+    return {
+      page,
+      page_size: homePageSize,
+      keyword: filters.keyword.trim(),
+      sort: sortBy.value,
+      zone: 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,
+    }
+  }
+
+  function listingQuerySignature() {
+    return JSON.stringify(buildListingQuery(1))
+  }
+
+  async function loadListingsPage(reset = false) {
+    if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return
+    const requestSeq = ++listingRequestSeq
+    if (reset) {
+      currentPage.value = 1
+      hasMoreListings.value = true
+    }
+    loadingMore.value = true
+    try {
+      const page = await fetchListingsPage(buildListingQuery(currentPage.value))
+      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)
+    } catch {
+      if (reset) {
+        listings.value = []
+        totalListings.value = 0
+        zoneCounts.value = {}
+        hasMoreListings.value = false
+      }
+    } finally {
+      if (requestSeq === listingRequestSeq) {
+        loadingMore.value = false
+      }
+    }
+  }
+
+  function handleWindowScroll() {
+    if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 480) return
+    loadListingsPage(false)
+  }
+
+  function zoneCount(key: string) {
+    if (key === 'all') return zoneCounts.value.all ?? totalListings.value
+    return zoneCounts.value[key] ?? 0
+  }
+
+  onMounted(() => {
+    window.addEventListener('scroll', handleWindowScroll, { passive: true })
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('scroll', handleWindowScroll)
+  })
+
+  watch(() => listingQuerySignature(), () => {
+    loadListingsPage(true)
+  })
+
+  return {
+    loading,
+    loadingMore,
+    listings,
+    totalListings,
+    zoneCounts,
+    hasMoreListings,
+    loadListingsPage,
+    zoneCount,
+  }
+}

frontend/src/styles/home-filters.css

@@ -0,0 +1,230 @@
+/* 筛选器相关样式 */
+.horizontal-filter-card {
+  padding: 24px;
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
+}
+
+.filter-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.filter-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.filter-title strong {
+  font-size: 18px;
+  font-weight: 800;
+  color: #17233d;
+}
+
+.filter-title span {
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #f1f5f9;
+  font-size: 13px;
+  font-weight: 700;
+  color: #64748b;
+}
+
+.filter-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.filter-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  background: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.filter-chip:hover {
+  border-color: #ff6a00;
+  background: #fff7ed;
+}
+
+.filter-chip.active {
+  border-color: #ff6a00;
+  background: #fff7ed;
+  color: #ff6a00;
+}
+
+.filter-chip.wide {
+  min-width: 140px;
+}
+
+/* 筛选器弹窗样式 */
+:global(.home-filter-popover) {
+  padding: 8px !important;
+  border-radius: 12px !important;
+}
+
+.filter-menu,
+.range-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.filter-menu button,
+.range-menu button {
+  padding: 10px 14px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.filter-menu button:hover,
+.range-menu button:hover {
+  background: #f1f5f9;
+}
+
+.filter-menu button.active,
+.range-menu button.active {
+  background: #fff7ed;
+  color: #ff6a00;
+  font-weight: 700;
+}
+
+.range-manual {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid #e2e8f0;
+  margin-top: 4px;
+}
+
+.range-manual :deep(.el-input-number) {
+  flex: 1;
+}
+
+.range-manual span {
+  color: #94a3b8;
+  font-weight: 700;
+}
+
+/* 皮肤筛选器 */
+.skin-filter-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.skin-reset {
+  padding: 10px 14px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.skin-reset:hover {
+  background: #f1f5f9;
+}
+
+.skin-reset.active {
+  background: #fff7ed;
+  color: #ff6a00;
+  font-weight: 700;
+}
+
+.skin-filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skin-filter-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 4px;
+}
+
+.skin-filter-title strong {
+  font-size: 13px;
+  font-weight: 700;
+  color: #17233d;
+}
+
+.skin-filter-title button {
+  padding: 4px 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.skin-filter-title button:hover {
+  background: #f1f5f9;
+}
+
+.skin-filter-title button.active {
+  background: #fff7ed;
+  color: #ff6a00;
+}
+
+.skin-filter-options {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px;
+}
+
+.skin-filter-options button {
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 600;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.skin-filter-options button:hover {
+  background: #f1f5f9;
+}
+
+.skin-filter-options button.active {
+  background: #fff7ed;
+  color: #ff6a00;
+  font-weight: 700;
+}

frontend/src/views/account/OrdersView.vue

@@ -177,7 +177,7 @@ function getCountdownMinutes(order: Order) {
         <template #label>
           <span class="tab-label">
             {{ tab.label }}
-            <span v-if="tabCounts[tab.key] > 0" class="tab-count">{{ tabCounts[tab.key] }}</span>
+            <span v-if="(tabCounts?.[tab.key] ?? 0) > 0" class="tab-count">{{ tabCounts?.[tab.key] }}</span>
           </span>
         </template>
       </el-tab-pane>

frontend/src/views/public/components/HomeAnnouncement.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Bell } from '@element-plus/icons-vue'
+import { ElCarousel, ElCarouselItem, ElIcon } from 'element-plus'
+
+interface Props {
+  announcements: string[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="home-announcement">
+    <el-icon><Bell /></el-icon>
+    <el-carousel
+      height="22px"
+      direction="vertical"
+      indicator-position="none"
+      :autoplay="true"
+      :interval="3200"
+    >
+      <el-carousel-item v-for="item in announcements" :key="item">
+        <span>{{ item }}</span>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<style scoped>
+.home-announcement {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px;
+  color: #854d0e;
+  background: #fefce8;
+  border: 1px solid #fef08a;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
+}
+
+.home-announcement :deep(.el-carousel) {
+  flex: 1;
+}
+</style>

frontend/src/views/public/components/HomeBanner.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ElCarousel, ElCarouselItem } from 'element-plus'
+
+interface HomeBannerSlide {
+  title?: string
+  eyebrow?: string
+  pill?: string
+  badge?: string
+  tone?: string
+  image_url?: string
+}
+
+interface Props {
+  banners: HomeBannerSlide[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <section class="hero-board">
+    <el-carousel height="240px" indicator-position="outside" :interval="3600">
+      <el-carousel-item v-for="slide in banners" :key="slide.title || slide.image_url">
+        <div
+          class="hero-slide"
+          :class="[`tone-${slide.tone}`, { 'has-image': slide.image_url }]"
+        >
+          <img
+            v-if="slide.image_url"
+            :src="slide.image_url"
+            :alt="slide.title || slide.eyebrow || '首页轮播'"
+          />
+          <div class="hero-copy">
+            <span v-if="slide.eyebrow">{{ slide.eyebrow }}</span>
+            <h1 v-if="slide.title">{{ slide.title }}</h1>
+            <p v-if="slide.pill">{{ slide.pill }}</p>
+          </div>
+          <em v-if="slide.badge">{{ slide.badge }}</em>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </section>
+</template>
+
+<style scoped>
+.hero-board {
+  min-width: 0;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.hero-slide {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 40px;
+  background: #f8fafc;
+}
+
+.hero-slide.tone-orange {
+  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
+}
+.hero-slide.tone-green {
+  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+}
+
+.hero-slide img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero-slide.has-image::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 1;
+  max-width: 480px;
+}
+
+.hero-slide.has-image .hero-copy {
+  color: #ffffff;
+}
+
+.hero-copy h1 {
+  margin: 12px 0;
+  font-size: 32px;
+  line-height: 1.2;
+}
+
+.hero-copy p {
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(4px);
+  font-size: 14px;
+}
+</style>

frontend/src/views/public/components/HomeFilters.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { Filter, Refresh, ArrowDown } from '@element-plus/icons-vue'
+import { ElButton, ElIcon } from 'element-plus'
+import RangeFilter from './RangeFilter.vue'
+import StringFilter from './StringFilter.vue'
+import SkinFilter from './SkinFilter.vue'
+import {
+  coinRangeOptions,
+  moneyRangeOptions,
+  totalRangeOptions,
+  fireLevelRangeOptions,
+} from '@/composables/home/useFilterOptions'
+import type { ListingPublishOptions } from '@/api/listingOptions'
+import type { FilterPopoverKey, HomeFilters } from '@/composables/home/useHomeFilters'
+
+interface Props {
+  filters: HomeFilters
+  totalListings: number
+  publishOptions: ListingPublishOptions
+  regionOptions: string[]
+  loginMethodOptions: string[]
+  skinFilterGroups: Array<{ key: string; title: string; options: string[] }>
+  skinChipLabel: string
+  activeFilterPopover: FilterPopoverKey | ''
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:filters': [filters: Partial<HomeFilters>]
+  'reset': []
+  'setFilterPopover': [key: FilterPopoverKey, visible: boolean]
+  'closeFilterPopover': []
+}>()
+
+const filterPopoverBaseProps = {
+  placement: 'bottom-start',
+  popperClass: 'home-filter-popover',
+  trigger: 'click',
+  showAfter: 0,
+  hideAfter: 0,
+  transition: 'none',
+} as const
+
+function filterPopoverProps(key: FilterPopoverKey) {
+  return {
+    ...filterPopoverBaseProps,
+    visible: props.activeFilterPopover === key,
+    'onUpdate:visible': (visible: boolean) => emit('setFilterPopover', key, visible),
+  }
+}
+
+function updateFilter(key: keyof HomeFilters, value: any) {
+  emit('update:filters', { [key]: value })
+}
+
+function closePopover() {
+  emit('closeFilterPopover')
+}
+</script>
+
+<template>
+  <section class="horizontal-filter-card">
+    <div class="filter-header">
+      <div class="filter-title">
+        <el-icon><Filter /></el-icon>
+        <strong>筛选大厅</strong>
+        <span>{{ totalListings }} 个结果</span>
+      </div>
+      <el-button :icon="Refresh" link @click="emit('reset')">
+        重置全部条件
+      </el-button>
+    </div>
+
+    <div class="filter-chip-row">
+      <StringFilter
+        label="保险"
+        placeholder="保险"
+        :model-value="filters.insurance"
+        :options="publishOptions.insurance_options"
+        :popover-props="filterPopoverProps('insurance')"
+        @update:model-value="updateFilter('insurance', $event)"
+        @close="closePopover"
+      />
+
+      <StringFilter
+        label="体力"
+        placeholder="体力"
+        :model-value="filters.stamina"
+        :options="publishOptions.level_options"
+        :popover-props="filterPopoverProps('stamina')"
+        @update:model-value="updateFilter('stamina', $event)"
+        @close="closePopover"
+      />
+
+      <StringFilter
+        label="负载"
+        placeholder="负载"
+        :model-value="filters.load"
+        :options="publishOptions.level_options"
+        :popover-props="filterPopoverProps('load')"
+        @update:model-value="updateFilter('load', $event)"
+        @close="closePopover"
+      />
+
+      <StringFilter
+        label="登录方式"
+        placeholder="登录方式"
+        :model-value="filters.loginMethod"
+        :options="loginMethodOptions"
+        :popover-props="filterPopoverProps('loginMethod')"
+        @update:model-value="updateFilter('loginMethod', $event)"
+        @close="closePopover"
+      />
+
+      <StringFilter
+        label="地区"
+        placeholder="地区选择"
+        :model-value="filters.region"
+        :options="regionOptions"
+        :popover-props="filterPopoverProps('region')"
+        :wide="true"
+        @update:model-value="updateFilter('region', $event)"
+        @close="closePopover"
+      />
+
+      <RangeFilter
+        label="哈夫币(M)"
+        :model-min="filters.minCoin"
+        :model-max="filters.maxCoin"
+        :options="coinRangeOptions"
+        :popover-props="filterPopoverProps('coin')"
+        :wide="true"
+        @update:model-min="updateFilter('minCoin', $event)"
+        @update:model-max="updateFilter('maxCoin', $event)"
+        @close="closePopover"
+      />
+
+      <RangeFilter
+        label="租金"
+        :model-min="filters.minPrice"
+        :model-max="filters.maxPrice"
+        :options="moneyRangeOptions"
+        :popover-props="filterPopoverProps('price')"
+        @update:model-min="updateFilter('minPrice', $event)"
+        @update:model-max="updateFilter('maxPrice', $event)"
+        @close="closePopover"
+      />
+
+      <RangeFilter
+        label="押金"
+        :model-min="filters.minDeposit"
+        :model-max="filters.maxDeposit"
+        :options="moneyRangeOptions"
+        :popover-props="filterPopoverProps('deposit')"
+        @update:model-min="updateFilter('minDeposit', $event)"
+        @update:model-max="updateFilter('maxDeposit', $event)"
+        @close="closePopover"
+      />
+
+      <RangeFilter
+        label="合计金额"
+        :model-min="filters.minTotal"
+        :model-max="filters.maxTotal"
+        :options="totalRangeOptions"
+        :popover-props="filterPopoverProps('total')"
+        :wide="true"
+        @update:model-min="updateFilter('minTotal', $event)"
+        @update:model-max="updateFilter('maxTotal', $event)"
+        @close="closePopover"
+      />
+
+      <SkinFilter
+        :skin-group="filters.skinGroup"
+        :skin-name="filters.skinName"
+        :groups="skinFilterGroups"
+        :popover-props="filterPopoverProps('skin')"
+        @update:skin-group="updateFilter('skinGroup', $event)"
+        @update:skin-name="updateFilter('skinName', $event)"
+        @close="closePopover"
+      />
+
+      <StringFilter
+        label="段位"
+        placeholder="段位"
+        :model-value="filters.rank"
+        :options="publishOptions.rank_options"
+        :popover-props="filterPopoverProps('rank')"
+        @update:model-value="updateFilter('rank', $event)"
+        @close="closePopover"
+      />
+
+      <RangeFilter
+        label="等级"
+        :model-min="filters.minFireLevel"
+        :model-max="filters.maxFireLevel"
+        :options="fireLevelRangeOptions"
+        :popover-props="filterPopoverProps('fireLevel')"
+        @update:model-min="updateFilter('minFireLevel', $event)"
+        @update:model-max="updateFilter('maxFireLevel', $event)"
+        @close="closePopover"
+      />
+    </div>
+  </section>
+</template>
+
+<style src="@/styles/home-filters.css"></style>

frontend/src/views/public/components/HomeStats.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+interface StatCard {
+  label: string
+  value: string
+  hint: string
+}
+
+interface Props {
+  stats: StatCard[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="home-stats-v2">
+    <div v-for="item in stats" :key="item.label" class="stat-item">
+      <div class="stat-main">
+        <strong>{{ item.value }}</strong>
+        <span>{{ item.label }}</span>
+      </div>
+      <small>{{ item.hint }}</small>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-stats-v2 {
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  gap: 12px;
+  min-width: 0;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 16px;
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+}
+
+.stat-main {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.stat-item strong {
+  font-size: 24px;
+  color: #ff6a00;
+}
+
+.stat-item span {
+  font-weight: 700;
+  color: #17233d;
+}
+
+.stat-item small {
+  margin-top: 4px;
+  color: #7b8798;
+  font-size: 12px;
+}
+</style>

frontend/src/views/public/components/HomeZonesAndSort.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ElRadioGroup, ElRadioButton } from 'element-plus'
+
+interface ZoneOption {
+  key: string
+  label: string
+  hint: string
+  count: number
+}
+
+interface Props {
+  zones: ZoneOption[]
+  activeZone: string
+  sortBy: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:activeZone': [value: string]
+  'update:sortBy': [value: string]
+}>()
+
+function selectZone(key: string) {
+  emit('update:activeZone', key)
+}
+</script>
+
+<template>
+  <div class="zones-and-sort">
+    <div class="zone-tabs">
+      <button
+        v-for="zone in zones"
+        :key="zone.key"
+        type="button"
+        class="zone-tab"
+        :class="{ active: activeZone === zone.key }"
+        @click="selectZone(zone.key)"
+      >
+        <div class="zone-main">
+          <strong>{{ zone.label }}</strong>
+          <span class="zone-count">{{ zone.count }}</span>
+        </div>
+        <small>{{ zone.hint }}</small>
+      </button>
+    </div>
+    <div class="list-actions">
+      <el-radio-group :model-value="sortBy" size="small" @update:model-value="(val) => emit('update:sortBy', val as string)">
+        <el-radio-button label="recommended">综合推荐</el-radio-button>
+        <el-radio-button label="coinDesc">哈夫币</el-radio-button>
+        <el-radio-button label="awmDesc">AWM数量</el-radio-button>
+        <el-radio-button label="priceAsc">价格最低</el-radio-button>
+        <el-radio-button label="priceDesc">价格最高</el-radio-button>
+      </el-radio-group>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.zones-and-sort {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.zone-tabs {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 12px;
+}
+
+.zone-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  background: #ffffff;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.zone-tab:hover {
+  border-color: #ff6a00;
+  background: #fff7ed;
+}
+
+.zone-tab.active {
+  border-color: #ff6a00;
+  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
+}
+
+.zone-main {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.zone-tab strong {
+  font-size: 15px;
+  font-weight: 700;
+  color: #17233d;
+}
+
+.zone-count {
+  font-size: 16px;
+  font-weight: 900;
+  color: #ff6a00;
+}
+
+.zone-tab small {
+  font-size: 11px;
+  color: #7b8798;
+}
+
+.list-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

frontend/src/views/public/components/ListingCard.vue

@@ -0,0 +1,343 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import type { Listing } from '@/api/listings'
+import {
+  formatHafCoinM,
+  getCoinWan,
+  getListingDisplayPrice,
+  getListingTitle,
+  getLoginMethod,
+  getServerRegion,
+  hasAcceleratedSaleRatio,
+  hasGiftResources,
+  readAssetNumber,
+  readAssetString,
+  getResourceQuantity,
+  getOnlineTimeText,
+  getSkinNames,
+  getRatioValue,
+  getDailyLoss,
+} from '@/utils/listingDisplay'
+
+interface Props {
+  listing: Listing
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <RouterLink class="listing-card-v2" :to="`/listings/${listing.id}`">
+    <div class="card-cover">
+      <img
+        v-if="listing.cover_url"
+        :src="listing.cover_url"
+        :alt="getListingTitle(listing)"
+        loading="lazy"
+        decoding="async"
+      />
+      <div v-else class="empty-cover">HFB</div>
+      <div class="cover-badges">
+        <span v-if="hasAcceleratedSaleRatio(listing)" class="badge sale">特惠</span>
+        <span v-if="hasGiftResources(listing)" class="badge gift">有赠送</span>
+      </div>
+      <div class="ratio-tag">比例 1:{{ getRatioValue(listing).toFixed(1) }}</div>
+    </div>
+
+    <div class="card-details">
+      <div class="card-title-row">
+        <h3>{{ getListingTitle(listing) }}</h3>
+        <span class="daily-loss">日耗 {{ getDailyLoss(listing) }}</span>
+      </div>
+
+      <div class="stats-grid">
+        <div class="stats-col">
+          <div class="stat-row">
+            <label>哈夫币</label>
+            <strong>{{ formatHafCoinM(getCoinWan(listing)) }}</strong>
+          </div>
+          <div class="stat-row">
+            <label>保险格数</label>
+            <span>{{ readAssetString(listing, 'season_insurance') || '--' }}</span>
+          </div>
+          <div class="stat-row">
+            <label>体力/负重</label>
+            <span>{{ readAssetString(listing, 'stamina_level') }}/{{ readAssetString(listing, 'load_level') }}</span>
+          </div>
+        </div>
+
+        <div class="stats-col">
+          <div class="stat-row">
+            <label>AWM子弹</label>
+            <span :class="{ highlight: getResourceQuantity(listing, 'awmAmmo') > 0 }">
+              {{ getResourceQuantity(listing, 'awmAmmo') }}发
+            </span>
+          </div>
+          <div class="stat-row">
+            <label>六级头甲</label>
+            <span>
+              {{ getResourceQuantity(listing, 'helmet6') }}头 / {{ getResourceQuantity(listing, 'armor6') }}甲
+            </span>
+          </div>
+          <div class="stat-row">
+            <label>其他重器</label>
+            <span>巴雷特 {{ getResourceQuantity(listing, 'barrett') }} / 喷子 {{ getResourceQuantity(listing, 'shotgun') }}</span>
+          </div>
+        </div>
+
+        <div class="stats-col">
+          <div class="stat-row">
+            <label>绝密KD</label>
+            <strong>{{ readAssetNumber(listing, 'secret_kd') || '--' }}</strong>
+          </div>
+          <div class="stat-row">
+            <label>游戏段位</label>
+            <span>{{ listing.rank_level || '未公开' }}</span>
+          </div>
+          <div class="stat-row">
+            <label>所属区服</label>
+            <span>{{ getServerRegion(listing) }}</span>
+          </div>
+        </div>
+
+        <div class="stats-col">
+          <div class="stat-row">
+            <label>上号方式</label>
+            <span>{{ getLoginMethod(listing) }}</span>
+          </div>
+          <div class="stat-row">
+            <label>方便上号</label>
+            <span class="time-text">{{ getOnlineTimeText(listing) || '全天候' }}</span>
+          </div>
+          <div class="stat-row skins-row">
+            <label>持有皮肤</label>
+            <span class="skins-text" :title="getSkinNames(listing).join(', ')">
+              {{ getSkinNames(listing).slice(0, 2).join(', ') || '暂无皮肤' }}
+              <em v-if="getSkinNames(listing).length > 2">...</em>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card-price">
+      <div class="price-item total">
+        <small>总租金</small>
+        <strong>¥{{ getListingDisplayPrice(listing) }}</strong>
+      </div>
+      <div class="price-item deposit">
+        <small>押金</small>
+        <span>¥{{ listing.deposit_amount }}</span>
+      </div>
+      <div class="price-action">
+        <button class="rent-btn">立即租用</button>
+      </div>
+    </div>
+  </RouterLink>
+</template>
+
+<style scoped>
+.listing-card-v2 {
+  display: grid;
+  grid-template-columns: 180px minmax(0, 1fr) 160px;
+  gap: 24px;
+  padding: 20px;
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s;
+}
+
+.listing-card-v2:hover {
+  border-color: #ff6a00;
+  box-shadow: 0 8px 24px rgba(255, 106, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+.card-cover {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #f1f5f9;
+}
+
+.card-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.empty-cover {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 24px;
+  font-weight: 900;
+  color: #cbd5e1;
+}
+
+.cover-badges {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.badge {
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 800;
+  color: #ffffff;
+}
+
+.badge.sale {
+  background: #ef4444;
+}
+.badge.gift {
+  background: #10b981;
+}
+
+.ratio-tag {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 4px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fbbf24;
+  font-size: 11px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.card-details {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.card-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.card-title-row h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  color: #1e293b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.daily-loss {
+  padding: 4px 10px;
+  background: #f1f5f9;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #64748b;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.stats-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.stat-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stat-row label {
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 600;
+}
+
+.stat-row span,
+.stat-row strong {
+  font-size: 13px;
+  color: #334155;
+  font-weight: 600;
+}
+
+.stat-row strong {
+  color: #ff6a00;
+}
+
+.stat-row .highlight {
+  color: #10b981;
+  font-weight: 700;
+}
+
+.card-price {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.price-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.price-item small {
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 600;
+}
+
+.price-item.total strong {
+  font-size: 28px;
+  font-weight: 900;
+  color: #ff6a00;
+}
+
+.price-item.deposit span {
+  font-size: 14px;
+  font-weight: 700;
+  color: #64748b;
+}
+
+.rent-btn {
+  width: 100%;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #ff6a00 0%, #ff8533 100%);
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.rent-btn:hover {
+  background: linear-gradient(135deg, #ff7a1a 0%, #ff9544 100%);
+  transform: scale(1.05);
+}
+</style>

frontend/src/views/public/components/RangeFilter.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ElInputNumber, ElPopover } from 'element-plus'
+import { computed } from 'vue'
+import { rangeLabel, isRangeSelected } from '@/composables/home/useFilterOptions'
+
+interface RangeOption {
+  label: string
+  min: number | undefined
+  max: number | undefined
+}
+
+interface Props {
+  label: string
+  modelMin: number | undefined
+  modelMax: number | undefined
+  options: RangeOption[]
+  popoverProps: Record<string, any>
+  wide?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:modelMin': [value: number | undefined]
+  'update:modelMax': [value: number | undefined]
+  close: []
+}>()
+
+const minValue = computed({
+  get: () => props.modelMin,
+  set: (val) => emit('update:modelMin', val),
+})
+
+const maxValue = computed({
+  get: () => props.modelMax,
+  set: (val) => emit('update:modelMax', val),
+})
+
+const isActive = computed(() => {
+  return props.modelMin !== undefined || props.modelMax !== undefined
+})
+
+const chipLabel = computed(() => {
+  return rangeLabel(props.modelMin, props.modelMax, props.label)
+})
+
+function selectRange(min: number | undefined, max: number | undefined) {
+  emit('update:modelMin', min)
+  emit('update:modelMax', max)
+  emit('close')
+}
+
+function isSelected(item: RangeOption) {
+  return isRangeSelected(props.modelMin, props.modelMax, item.min, item.max)
+}
+</script>
+
+<template>
+  <el-popover v-bind="popoverProps" :width="350">
+    <template #reference>
+      <button
+        class="filter-chip"
+        :class="{ active: isActive, wide }"
+        type="button"
+      >
+        <span>{{ chipLabel }}</span>
+        <el-icon><ArrowDown /></el-icon>
+      </button>
+    </template>
+    <div class="range-menu">
+      <button
+        v-for="item in options"
+        :key="item.label"
+        type="button"
+        :class="{ active: isSelected(item) }"
+        @click="selectRange(item.min, item.max)"
+      >
+        {{ item.label }}
+      </button>
+      <div class="range-manual">
+        <el-input-number
+          v-model="minValue"
+          :controls="false"
+          :min="0"
+          placeholder="最小值"
+        />
+        <span>-</span>
+        <el-input-number
+          v-model="maxValue"
+          :controls="false"
+          :min="0"
+          placeholder="最大值"
+        />
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<style src="@/styles/home-filters.css"></style>

frontend/src/views/public/components/SkinFilter.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ElPopover } from 'element-plus'
+import { computed } from 'vue'
+
+interface SkinGroup {
+  key: string
+  title: string
+  options: string[]
+}
+
+interface Props {
+  skinGroup: string
+  skinName: string
+  groups: SkinGroup[]
+  popoverProps: Record<string, any>
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:skinGroup': [value: string]
+  'update:skinName': [value: string]
+  close: []
+}>()
+
+const isActive = computed(() => {
+  return !!props.skinGroup || !!props.skinName
+})
+
+const chipLabel = computed(() => {
+  if (props.skinName) return props.skinName
+  if (props.skinGroup) {
+    return props.groups.find((g) => g.key === props.skinGroup)?.title || '皮肤'
+  }
+  return '皮肤'
+})
+
+function selectSkin(group: string, name = '') {
+  emit('update:skinGroup', group)
+  emit('update:skinName', name)
+  emit('close')
+}
+
+function resetSkin() {
+  emit('update:skinGroup', '')
+  emit('update:skinName', '')
+  emit('close')
+}
+</script>
+
+<template>
+  <el-popover v-bind="popoverProps" :width="320">
+    <template #reference>
+      <button class="filter-chip" :class="{ active: isActive }" type="button">
+        <span>{{ chipLabel }}</span>
+        <el-icon><ArrowDown /></el-icon>
+      </button>
+    </template>
+    <div class="skin-filter-menu">
+      <button
+        class="skin-reset"
+        type="button"
+        :class="{ active: !skinGroup && !skinName }"
+        @click="resetSkin"
+      >
+        全部皮肤
+      </button>
+      <div v-for="group in groups" :key="group.key" class="skin-filter-group">
+        <div class="skin-filter-title">
+          <strong>{{ group.title }}</strong>
+          <button
+            type="button"
+            :class="{ active: skinGroup === group.key && !skinName }"
+            @click="selectSkin(group.key)"
+          >
+            全部{{ group.title.replace('干员', '') }}
+          </button>
+        </div>
+        <div class="skin-filter-options">
+          <button
+            v-for="skin in group.options"
+            :key="skin"
+            type="button"
+            :class="{ active: skinGroup === group.key && skinName === skin }"
+            @click="selectSkin(group.key, skin)"
+          >
+            {{ skin }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<style src="@/styles/home-filters.css"></style>

frontend/src/views/public/components/StringFilter.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ElPopover } from 'element-plus'
+import { computed } from 'vue'
+
+interface Props {
+  label: string
+  placeholder: string
+  modelValue: string
+  options: string[]
+  popoverProps: Record<string, any>
+  wide?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  close: []
+}>()
+
+const isActive = computed(() => {
+  return !!props.modelValue
+})
+
+const displayLabel = computed(() => {
+  return props.modelValue || props.placeholder
+})
+
+function selectOption(value: string) {
+  emit('update:modelValue', value)
+  emit('close')
+}
+</script>
+
+<template>
+  <el-popover v-bind="popoverProps" :width="220">
+    <template #reference>
+      <button
+        class="filter-chip"
+        :class="{ active: isActive, wide }"
+        type="button"
+      >
+        <span>{{ displayLabel }}</span>
+        <el-icon><ArrowDown /></el-icon>
+      </button>
+    </template>
+    <div class="filter-menu">
+      <button
+        type="button"
+        :class="{ active: !modelValue }"
+        @click="selectOption('')"
+      >
+        {{ placeholder }}
+      </button>
+      <button
+        v-for="item in options"
+        :key="item"
+        type="button"
+        :class="{ active: modelValue === item }"
+        @click="selectOption(item)"
+      >
+        {{ item }}
+      </button>
+    </div>
+  </el-popover>
+</template>
+
+<style src="@/styles/home-filters.css"></style>