优化 PC 首页点击式筛选与排序体验

默认区平铺常用条件并支持刀皮/红皮/枪皮多选，高级筛选折叠展示；修复综合推荐无法选中、筛选排序导致页面回顶等问题。

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

@@ -27,6 +27,7 @@ describe('useHomeFilters', () => {
     filters.minCoin = 100
     filters.region = ['北京', '上海']
     filters.insurance = ['3*3', '2*2']
+    filters.skinNames = ['凌霄成卫', '坠星者']
 
     resetFilters()
 
@@ -34,6 +35,21 @@ describe('useHomeFilters', () => {
     expect(filters.minCoin).toBeUndefined()
     expect(filters.region).toEqual([])
     expect(filters.insurance).toEqual([])
+    expect(filters.skinNames).toEqual([])
+  })
+
+  it('应该支持皮肤多选切换', () => {
+    const publishOptions = ref(emptyListingPublishOptions)
+    const listings = ref([])
+
+    const { filters, toggleSkinName } = useHomeFilters(publishOptions, listings)
+
+    toggleSkinName('凌霄成卫')
+    toggleSkinName('坠星者')
+    expect(filters.skinNames).toEqual(['凌霄成卫', '坠星者'])
+
+    toggleSkinName('凌霄成卫')
+    expect(filters.skinNames).toEqual(['坠星者'])
   })
 
   it('应该正确设置字符串多选筛选器', () => {

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

@@ -1,41 +1,55 @@
 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 },
+  { label: '全部', min: undefined, max: undefined },
+  { label: '15-50', min: 15, max: 50 },
+  { label: '50-100', min: 50, max: 100 },
+  { label: '100-150', min: 100, max: 150 },
+  { label: '150-200', min: 150, max: 200 },
+  { label: '200-250', min: 200, max: 250 },
+  { label: '250-300', min: 250, max: 300 },
+  { label: '300以上', min: 300, 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 },
+  { label: '全部', min: undefined, max: undefined },
+  { label: '≤30', min: undefined, max: 30 },
+  { label: '30-35', min: 30, max: 35 },
+  { label: '35-40', min: 35, max: 40 },
+  { label: '40-45', min: 40, max: 45 },
+  { label: '45+', min: 45, max: undefined },
 ]
 
 export const moneyRangeOptions = [
-  { label: '全部区间', min: undefined, max: undefined },
+  { 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 },
+  { label: '100-150', min: 100, max: 150 },
+  { label: '150-200', min: 150, max: 200 },
+  { label: '200以上', min: 200, max: undefined },
+]
+
+/** 押金区间：去掉 0-50 */
+export const depositRangeOptions = [
+  { label: '全部', min: undefined, max: undefined },
+  { label: '50-100', min: 50, max: 100 },
+  { label: '100-150', min: 100, max: 150 },
+  { label: '150-200', min: 150, max: 200 },
+  { label: '200以上', min: 200, max: undefined },
 ]
 
 export const totalRangeOptions = [
-  { label: '全部区间', min: undefined, max: undefined },
+  { 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 },
+  { label: '5000+', min: 5000, max: undefined },
 ]
 
+/** 等级最高 60 */
 export const fireLevelRangeOptions = [
-  { label: '全部等级', min: undefined, max: undefined },
+  { 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) {

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

@@ -3,6 +3,15 @@ import type { ListingPublishOptions } from '../api/listingOptions'
 import type { Listing } from '../api/listings'
 import { assetRegions } from '@/shared/utils/listingDisplay'
 
+/** PC 默认区优先展示的皮肤组：刀皮 / 红皮 */
+export const defaultSkinGroupDefs = [
+  { key: 'melee', label: '刀皮' },
+  { key: 'operatorRed', label: '红皮' },
+] as const
+
+/** 高级筛选：枪皮（武器皮肤） */
+export const advancedSkinGroupDefs = [{ key: 'weapon', label: '枪皮' }] as const
+
 export type FilterPopoverKey =
   | 'insurance'
   | 'stamina'
@@ -29,8 +38,8 @@ export interface HomeFilters {
   insurance: string[]
   stamina: string[]
   load: string[]
-  skinGroup: string
-  skinName: string
+  /** 多选具体皮肤名（刀皮/红皮等） */
+  skinNames: string[]
   minCoin: number | undefined
   maxCoin: number | undefined
   minRatio: number | undefined
@@ -45,6 +54,12 @@ export interface HomeFilters {
   maxFireLevel: number | undefined
 }
 
+export interface SkinFilterGroup {
+  key: string
+  title: string
+  options: string[]
+}
+
 export function useHomeFilters(
   publishOptions: Ref<ListingPublishOptions>,
   listings: Ref<Listing[]>
@@ -58,8 +73,7 @@ export function useHomeFilters(
     insurance: [],
     stamina: [],
     load: [],
-    skinGroup: '',
-    skinName: '',
+    skinNames: [],
     minCoin: undefined,
     maxCoin: undefined,
     minRatio: undefined,
@@ -75,6 +89,7 @@ export function useHomeFilters(
   })
 
   const activeFilterPopover = ref<FilterPopoverKey | ''>('')
+  const advancedFiltersOpen = ref(false)
 
   const regionOptions = computed(() =>
     uniqueOptions([
@@ -89,19 +104,52 @@ export function useHomeFilters(
     )
   )
 
-  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))
+  function resolveSkinGroups(
+    defs: ReadonlyArray<{ key: string; label: string }>
+  ): SkinFilterGroup[] {
+    const groups: SkinFilterGroup[] = []
+    for (const def of defs) {
+      const group = publishOptions.value.skin_groups.find(item => item.key === def.key)
+      if (!group) continue
+      groups.push({
+        key: def.key,
+        title: def.label,
+        options: uniqueOptions(group.options || []),
+      })
+    }
+    return groups
+  }
+
+  /** 默认区刀皮 / 红皮（展示全部选项，支持多选） */
+  const skinFilterGroups = computed((): SkinFilterGroup[] =>
+    resolveSkinGroups(defaultSkinGroupDefs)
+  )
+
+  /** 高级区枪皮 */
+  const advancedSkinFilterGroups = computed((): SkinFilterGroup[] =>
+    resolveSkinGroups(advancedSkinGroupDefs)
+  )
+
+  const selectedSkinGroups = computed(() => {
+    if (!filters.skinNames.length) return [] as string[]
+    const keys = new Set<string>()
+    for (const group of [...skinFilterGroups.value, ...advancedSkinFilterGroups.value]) {
+      if (group.options.some(name => filters.skinNames.includes(name))) {
+        keys.add(group.key)
+      }
+    }
+    return [...keys]
   })
 
-  const skinChipLabel = computed(() => {
-    if (filters.skinName) return filters.skinName
-    if (filters.skinGroup) {
-      return skinFilterGroups.value.find(group => group.key === filters.skinGroup)?.title || '皮肤'
-    }
-    return '皮肤'
+  const advancedActiveCount = computed(() => {
+    let count = 0
+    if (filters.region.length) count += 1
+    if (filters.rank.length) count += 1
+    if (filters.minPrice !== undefined || filters.maxPrice !== undefined) count += 1
+    if (filters.minDeposit !== undefined || filters.maxDeposit !== undefined) count += 1
+    if (filters.minTotal !== undefined || filters.maxTotal !== undefined) count += 1
+    if (filters.minFireLevel !== undefined || filters.maxFireLevel !== undefined) count += 1
+    return count
   })
 
   function uniqueOptions(values: string[]) {
@@ -117,8 +165,7 @@ export function useHomeFilters(
     filters.insurance = []
     filters.stamina = []
     filters.load = []
-    filters.skinGroup = ''
-    filters.skinName = ''
+    filters.skinNames = []
     filters.minCoin = undefined
     filters.maxCoin = undefined
     filters.minRatio = undefined
@@ -146,11 +193,23 @@ export function useHomeFilters(
     filters[key] = next
   }
 
+  function toggleSkinName(name: string) {
+    const current = filters.skinNames
+    filters.skinNames = current.includes(name)
+      ? current.filter(item => item !== name)
+      : uniqueOptions([...current, name])
+  }
+
   function setCoinRange(min: number | undefined, max: number | undefined) {
     filters.minCoin = min
     filters.maxCoin = max
   }
 
+  function setRatioRange(min: number | undefined, max: number | undefined) {
+    filters.minRatio = min
+    filters.maxRatio = max
+  }
+
   function setPriceRange(min: number | undefined, max: number | undefined) {
     filters.minPrice = min
     filters.maxPrice = max
@@ -171,14 +230,19 @@ export function useHomeFilters(
     filters.maxFireLevel = max
   }
 
-  function setSkinFilter(group: string, name = '') {
-    filters.skinGroup = group
-    filters.skinName = name
-  }
-
-  function resetSkinFilter() {
-    filters.skinGroup = ''
-    filters.skinName = ''
+  /** 区间 chip：再点同一档则清空 */
+  function toggleRange(
+    currentMin: number | undefined,
+    currentMax: number | undefined,
+    min: number | undefined,
+    max: number | undefined,
+    apply: (min: number | undefined, max: number | undefined) => void
+  ) {
+    if (currentMin === min && currentMax === max) {
+      apply(undefined, undefined)
+      return
+    }
+    apply(min, max)
   }
 
   function setFilterPopover(key: FilterPopoverKey, visible: boolean) {
@@ -196,20 +260,24 @@ export function useHomeFilters(
   return {
     filters,
     activeFilterPopover,
+    advancedFiltersOpen,
+    advancedActiveCount,
     regionOptions,
     loginMethodOptions,
     skinFilterGroups,
-    skinChipLabel,
+    advancedSkinFilterGroups,
+    selectedSkinGroups,
     resetFilters,
     setStringFilter,
     toggleStringFilter,
+    toggleSkinName,
     setCoinRange,
+    setRatioRange,
     setPriceRange,
     setDepositRange,
     setTotalRange,
     setFireLevelRange,
-    setSkinFilter,
-    resetSkinFilter,
+    toggleRange,
     setFilterPopover,
     closeFilterPopover,
   }

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

@@ -36,8 +36,8 @@ export function useListingQuery(
       insurance: joinCSV(filters.insurance),
       stamina: joinCSV(filters.stamina),
       load: joinCSV(filters.load),
-      skin_group: filters.skinGroup,
-      skin_name: filters.skinName,
+      // 多选皮肤名；后端 skin_name CSV 为 OR 匹配
+      skin_name: joinCSV(filters.skinNames),
       min_coin: filters.minCoin,
       max_coin: filters.maxCoin,
       min_ratio: filters.minRatio,