首页增加比例筛选并优化排序

frontend/src/features/listings/api/listings.ts

@@ -64,6 +64,8 @@ export interface PublicListingQuery {
   skin_name?: string
   min_coin?: number
   max_coin?: number
+  min_ratio?: number
+  max_ratio?: number
   min_price?: number
   max_price?: number
   min_deposit?: number

frontend/src/features/listings/components/HomeFilters.vue

@@ -6,6 +6,7 @@ import StringFilter from './StringFilter.vue'
 import SkinFilter from './SkinFilter.vue'
 import {
   coinRangeOptions,
+  ratioRangeOptions,
   moneyRangeOptions,
   totalRangeOptions,
   fireLevelRangeOptions,
@@ -134,6 +135,17 @@ function closePopover() {
         @close="closePopover"
       />
 
+      <RangeFilter
+        label="比例"
+        :model-min="filters.minRatio"
+        :model-max="filters.maxRatio"
+        :options="ratioRangeOptions"
+        :popover-props="filterPopoverProps('ratio')"
+        @update:model-min="updateFilter('minRatio', $event)"
+        @update:model-max="updateFilter('maxRatio', $event)"
+        @close="closePopover"
+      />
+
       <RangeFilter
         label="租金"
         :model-min="filters.minPrice"

frontend/src/features/listings/composables/useFilterOptions.ts

@@ -6,6 +6,14 @@ export const coinRangeOptions = [
   { label: '500+', min: 500, max: undefined },
 ]
 
+export const ratioRangeOptions = [
+  { label: '全部比例', min: undefined, max: undefined },
+  { label: '0-20', min: 0, max: 20 },
+  { label: '20-30', min: 20, max: 30 },
+  { label: '30-40', min: 30, max: 40 },
+  { label: '40+', min: 40, max: undefined },
+]
+
 export const moneyRangeOptions = [
   { label: '全部区间', min: undefined, max: undefined },
   { label: '0-50', min: 0, max: 50 },

frontend/src/features/listings/composables/useHomeFilterQuery.ts

@@ -16,6 +16,8 @@ export const desktopHomeFilterQueryKeys = [
   'skin_name',
   'min_coin',
   'max_coin',
+  'min_ratio',
+  'max_ratio',
   'min_price',
   'max_price',
   'min_deposit',

frontend/src/features/listings/composables/useHomeFilters.ts

@@ -9,6 +9,7 @@ export type FilterPopoverKey =
   | 'load'
   | 'region'
   | 'coin'
+  | 'ratio'
   | 'price'
   | 'deposit'
   | 'total'
@@ -32,6 +33,8 @@ export interface HomeFilters {
   skinName: string
   minCoin: number | undefined
   maxCoin: number | undefined
+  minRatio: number | undefined
+  maxRatio: number | undefined
   minPrice: number | undefined
   maxPrice: number | undefined
   minDeposit: number | undefined
@@ -59,6 +62,8 @@ export function useHomeFilters(
     skinName: '',
     minCoin: undefined,
     maxCoin: undefined,
+    minRatio: undefined,
+    maxRatio: undefined,
     minPrice: undefined,
     maxPrice: undefined,
     minDeposit: undefined,
@@ -116,6 +121,8 @@ export function useHomeFilters(
     filters.skinName = ''
     filters.minCoin = undefined
     filters.maxCoin = undefined
+    filters.minRatio = undefined
+    filters.maxRatio = undefined
     filters.minPrice = undefined
     filters.maxPrice = undefined
     filters.minDeposit = undefined

frontend/src/features/listings/composables/useListingQuery.ts

@@ -36,6 +36,8 @@ export function useListingQuery(
       skin_name: filters.skinName,
       min_coin: filters.minCoin,
       max_coin: filters.maxCoin,
+      min_ratio: filters.minRatio,
+      max_ratio: filters.maxRatio,
       min_price: filters.minPrice,
       max_price: filters.maxPrice,
       min_deposit: filters.minDeposit,

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

@@ -180,6 +180,8 @@ function applyRouteQueryToHomeState() {
   filters.skinName = readQueryString(query, 'skin_name')
   filters.minCoin = readQueryNumber(query, 'min_coin')
   filters.maxCoin = readQueryNumber(query, 'max_coin')
+  filters.minRatio = readQueryNumber(query, 'min_ratio')
+  filters.maxRatio = readQueryNumber(query, 'max_ratio')
   filters.minPrice = readQueryNumber(query, 'min_price')
   filters.maxPrice = readQueryNumber(query, 'max_price')
   filters.minDeposit = readQueryNumber(query, 'min_deposit')
@@ -224,6 +226,8 @@ function buildDesktopHomeQueryValues(): Record<string, HomeQueryValue> {
     skin_name: filters.skinName,
     min_coin: filters.minCoin,
     max_coin: filters.maxCoin,
+    min_ratio: filters.minRatio,
+    max_ratio: filters.maxRatio,
     min_price: filters.minPrice,
     max_price: filters.maxPrice,
     min_deposit: filters.minDeposit,

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

@@ -111,6 +111,12 @@ const rangePresets: Record<string, Array<{ label: string; min: string; max: stri
     { label: '300-500', min: '300', max: '500' },
     { label: '500以上', min: '500', max: '' },
   ],
+  ratio: [
+    { label: '0-20', min: '0', max: '20' },
+    { label: '20-30', min: '20', max: '30' },
+    { label: '30-40', min: '30', max: '40' },
+    { label: '40以上', min: '40', max: '' },
+  ],
   deposit: [
     { label: '0-50', min: '0', max: '50' },
     { label: '50-100', min: '50', max: '100' },
@@ -191,6 +197,14 @@ const filterSections = computed<FilterSection[]>(() => [
     minPlaceholder: '最低',
     maxPlaceholder: '最高',
   },
+  {
+    key: 'ratio',
+    title: '比例',
+    type: 'range',
+    unit: 'w/元',
+    minPlaceholder: '最低比例',
+    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 },
@@ -436,6 +450,9 @@ function buildListingQuery(page: number): PublicListingQuery {
     } else if (key === 'coin') {
       query.min_coin = min
       query.max_coin = max
+    } else if (key === 'ratio') {
+      query.min_ratio = min
+      query.max_ratio = max
     } else if (key === 'secretKd') {
       query.min_secret_kd = min
       query.max_secret_kd = max