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

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

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

@@ -1,18 +1,23 @@
 <script setup lang="ts">
-import { Filter, Refresh } from '@element-plus/icons-vue'
+import { Refresh } 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,
   ratioRangeOptions,
   moneyRangeOptions,
+  depositRangeOptions,
   totalRangeOptions,
   fireLevelRangeOptions,
+  isRangeSelected,
 } from '@/features/listings/composables/useFilterOptions'
 import type { ListingPublishOptions } from '@/features/listings/api/listingOptions'
-import type { FilterPopoverKey, HomeFilters } from '@/features/listings/composables/useHomeFilters'
+import type { HomeFilters, SkinFilterGroup } from '@/features/listings/composables/useHomeFilters'
+
+interface RangeOption {
+  label: string
+  min: number | undefined
+  max: number | undefined
+}
 
 interface Props {
   filters: HomeFilters
@@ -20,190 +25,324 @@ interface Props {
   publishOptions: ListingPublishOptions
   regionOptions: string[]
   loginMethodOptions: string[]
-  skinFilterGroups: Array<{ key: string; title: string; options: string[] }>
-  skinChipLabel: string
-  activeFilterPopover: FilterPopoverKey | ''
+  skinFilterGroups: SkinFilterGroup[]
+  advancedSkinFilterGroups: SkinFilterGroup[]
+  advancedOpen: boolean
+  advancedActiveCount: number
 }
 
 const props = defineProps<Props>()
 
 const emit = defineEmits<{
   'update:filters': [filters: Partial<HomeFilters>]
+  'update:advancedOpen': [value: boolean]
   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 updateFilter<K extends keyof HomeFilters>(key: K, value: HomeFilters[K]) {
+  emit('update:filters', { [key]: value } as Partial<HomeFilters>)
+}
 
-function filterPopoverProps(key: FilterPopoverKey) {
-  return {
-    ...filterPopoverBaseProps,
-    visible: props.activeFilterPopover === key,
-    'onUpdate:visible': (visible: boolean) => emit('setFilterPopover', key, visible),
+function toggleChip(key: 'insurance' | 'stamina' | 'load' | 'loginMethod' | 'region' | 'rank', value: string) {
+  const current = props.filters[key]
+  const next = current.includes(value)
+    ? current.filter(item => item !== value)
+    : [...current, value]
+  updateFilter(key, next)
+}
+
+function toggleSkin(name: string) {
+  const current = props.filters.skinNames
+  const next = current.includes(name)
+    ? current.filter(item => item !== name)
+    : [...current, name]
+  updateFilter('skinNames', next)
+}
+
+function toggleRange(
+  minKey: 'minCoin' | 'minRatio' | 'minPrice' | 'minDeposit' | 'minTotal' | 'minFireLevel',
+  maxKey: 'maxCoin' | 'maxRatio' | 'maxPrice' | 'maxDeposit' | 'maxTotal' | 'maxFireLevel',
+  option: RangeOption
+) {
+  const currentMin = props.filters[minKey]
+  const currentMax = props.filters[maxKey]
+  if (isRangeSelected(currentMin, currentMax, option.min, option.max)) {
+    emit('update:filters', { [minKey]: undefined, [maxKey]: undefined } as Partial<HomeFilters>)
+    return
   }
+  emit('update:filters', { [minKey]: option.min, [maxKey]: option.max } as Partial<HomeFilters>)
 }
 
-function updateFilter(key: keyof HomeFilters, value: any) {
-  emit('update:filters', { [key]: value })
+function isRangeActive(
+  minKey: 'minCoin' | 'minRatio' | 'minPrice' | 'minDeposit' | 'minTotal' | 'minFireLevel',
+  maxKey: 'maxCoin' | 'maxRatio' | 'maxPrice' | 'maxDeposit' | 'maxTotal' | 'maxFireLevel',
+  option: RangeOption
+) {
+  return isRangeSelected(props.filters[minKey], props.filters[maxKey], option.min, option.max)
 }
 
-function closePopover() {
-  emit('closeFilterPopover')
+function toggleAdvanced() {
+  emit('update:advancedOpen', !props.advancedOpen)
 }
 </script>
 
 <template>
-  <section class="horizontal-filter-card">
+  <section class="horizontal-filter-card quick-filter-card">
     <div class="filter-header">
       <div class="filter-title">
-        <el-icon><Filter /></el-icon>
-        <strong>筛选大厅</strong>
+        <span class="filter-title-bar" aria-hidden="true" />
+        <strong>筛选条件</strong>
         <span>{{ totalListings }} 个结果</span>
       </div>
-      <el-button :icon="Refresh" link @click="emit('reset')"> 重置全部条件 </el-button>
+      <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)"
-      />
+    <div class="quick-filter-grid">
+      <div class="filter-field">
+        <label>哈夫币</label>
+        <div class="pill-row">
+          <button
+            v-for="item in coinRangeOptions.filter(o => o.label !== '全部')"
+            :key="item.label"
+            type="button"
+            class="pill-chip"
+            :class="{ active: isRangeActive('minCoin', 'maxCoin', item) }"
+            @click="toggleRange('minCoin', 'maxCoin', item)"
+          >
+            {{ item.label }}
+          </button>
+        </div>
+      </div>
 
-      <StringFilter
-        label="体力"
-        placeholder="体力"
-        :model-value="filters.stamina"
-        :options="publishOptions.level_options"
-        :popover-props="filterPopoverProps('stamina')"
-        @update:model-value="updateFilter('stamina', $event)"
-      />
+      <div class="filter-field">
+        <label>比例</label>
+        <div class="pill-row">
+          <button
+            v-for="item in ratioRangeOptions.filter(o => o.label !== '全部')"
+            :key="item.label"
+            type="button"
+            class="pill-chip"
+            :class="{ active: isRangeActive('minRatio', 'maxRatio', item) }"
+            @click="toggleRange('minRatio', 'maxRatio', item)"
+          >
+            {{ item.label }}
+          </button>
+        </div>
+      </div>
 
-      <StringFilter
-        label="负载"
-        placeholder="负载"
-        :model-value="filters.load"
-        :options="publishOptions.level_options"
-        :popover-props="filterPopoverProps('load')"
-        @update:model-value="updateFilter('load', $event)"
-      />
+      <div class="filter-field">
+        <label>保险</label>
+        <div class="pill-row">
+          <button
+            v-for="item in publishOptions.insurance_options"
+            :key="item"
+            type="button"
+            class="pill-chip"
+            :class="{ active: filters.insurance.includes(item) }"
+            @click="toggleChip('insurance', item)"
+          >
+            {{ item }}
+          </button>
+        </div>
+      </div>
 
-      <StringFilter
-        label="登录方式"
-        placeholder="登录方式"
-        :model-value="filters.loginMethod"
-        :options="loginMethodOptions"
-        :popover-props="filterPopoverProps('loginMethod')"
-        @update:model-value="updateFilter('loginMethod', $event)"
-      />
+      <div class="filter-field">
+        <label>体力</label>
+        <div class="pill-row">
+          <button
+            v-for="item in publishOptions.level_options"
+            :key="`stamina-${item}`"
+            type="button"
+            class="pill-chip"
+            :class="{ active: filters.stamina.includes(item) }"
+            @click="toggleChip('stamina', item)"
+          >
+            {{ item }}
+          </button>
+        </div>
+      </div>
 
-      <StringFilter
-        label="地区"
-        placeholder="地区选择"
-        :model-value="filters.region"
-        :options="regionOptions"
-        :popover-props="filterPopoverProps('region')"
-        :wide="true"
-        @update:model-value="updateFilter('region', $event)"
-      />
+      <div class="filter-field">
+        <label>负重</label>
+        <div class="pill-row">
+          <button
+            v-for="item in publishOptions.level_options"
+            :key="`load-${item}`"
+            type="button"
+            class="pill-chip"
+            :class="{ active: filters.load.includes(item) }"
+            @click="toggleChip('load', item)"
+          >
+            {{ item }}
+          </button>
+        </div>
+      </div>
 
-      <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"
-      />
+      <div class="filter-field">
+        <label>登录方式</label>
+        <div class="pill-row">
+          <button
+            v-for="item in loginMethodOptions"
+            :key="item"
+            type="button"
+            class="pill-chip"
+            :class="{ active: filters.loginMethod.includes(item) }"
+            @click="toggleChip('loginMethod', item)"
+          >
+            {{ item }}
+          </button>
+        </div>
+      </div>
 
-      <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"
-      />
+      <div
+        v-for="group in skinFilterGroups"
+        :key="group.key"
+        class="filter-field filter-field-full"
+      >
+        <label>{{ group.title }}</label>
+        <div class="pill-row">
+          <button
+            v-for="skin in group.options"
+            :key="`${group.key}-${skin}`"
+            type="button"
+            class="pill-chip"
+            :class="{ active: filters.skinNames.includes(skin) }"
+            @click="toggleSkin(skin)"
+          >
+            {{ skin }}
+          </button>
+        </div>
+      </div>
+    </div>
 
-      <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"
-      />
+    <div class="advanced-toggle-row">
+      <button type="button" class="advanced-toggle" @click="toggleAdvanced">
+        {{ advancedOpen ? '收起高级筛选' : '展开高级筛选' }}
+        <em v-if="advancedActiveCount">{{ advancedActiveCount }}</em>
+        <span class="advanced-caret" :class="{ open: advancedOpen }">▾</span>
+      </button>
+    </div>
 
-      <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"
-      />
+    <div v-show="advancedOpen" class="advanced-filter-panel">
+      <div class="quick-filter-grid">
+        <div class="filter-field">
+          <label>租金</label>
+          <div class="pill-row">
+            <button
+              v-for="item in moneyRangeOptions.filter(o => o.label !== '全部')"
+              :key="`price-${item.label}`"
+              type="button"
+              class="pill-chip"
+              :class="{ active: isRangeActive('minPrice', 'maxPrice', item) }"
+              @click="toggleRange('minPrice', 'maxPrice', item)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </div>
 
-      <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"
-      />
+        <div class="filter-field">
+          <label>押金</label>
+          <div class="pill-row">
+            <button
+              v-for="item in depositRangeOptions.filter(o => o.label !== '全部')"
+              :key="`deposit-${item.label}`"
+              type="button"
+              class="pill-chip"
+              :class="{ active: isRangeActive('minDeposit', 'maxDeposit', item) }"
+              @click="toggleRange('minDeposit', 'maxDeposit', item)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </div>
 
-      <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"
-      />
+        <div class="filter-field">
+          <label>合计金额</label>
+          <div class="pill-row">
+            <button
+              v-for="item in totalRangeOptions.filter(o => o.label !== '全部')"
+              :key="`total-${item.label}`"
+              type="button"
+              class="pill-chip"
+              :class="{ active: isRangeActive('minTotal', 'maxTotal', item) }"
+              @click="toggleRange('minTotal', 'maxTotal', item)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </div>
 
-      <StringFilter
-        label="段位"
-        placeholder="段位"
-        :model-value="filters.rank"
-        :options="publishOptions.rank_options"
-        :popover-props="filterPopoverProps('rank')"
-        @update:model-value="updateFilter('rank', $event)"
-      />
+        <div class="filter-field">
+          <label>等级</label>
+          <div class="pill-row">
+            <button
+              v-for="item in fireLevelRangeOptions.filter(o => o.label !== '全部')"
+              :key="`fire-${item.label}`"
+              type="button"
+              class="pill-chip"
+              :class="{ active: isRangeActive('minFireLevel', 'maxFireLevel', item) }"
+              @click="toggleRange('minFireLevel', 'maxFireLevel', item)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </div>
 
-      <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 class="filter-field">
+          <label>段位</label>
+          <div class="pill-row">
+            <button
+              v-for="item in publishOptions.rank_options"
+              :key="item"
+              type="button"
+              class="pill-chip"
+              :class="{ active: filters.rank.includes(item) }"
+              @click="toggleChip('rank', item)"
+            >
+              {{ item }}
+            </button>
+          </div>
+        </div>
+
+        <div class="filter-field filter-field-full">
+          <label>IP地区</label>
+          <div class="pill-row">
+            <button
+              v-for="item in regionOptions"
+              :key="item"
+              type="button"
+              class="pill-chip"
+              :class="{ active: filters.region.includes(item) }"
+              @click="toggleChip('region', item)"
+            >
+              {{ item }}
+            </button>
+            <span v-if="!regionOptions.length" class="pill-empty">暂无地区选项</span>
+          </div>
+        </div>
+
+        <div
+          v-for="group in advancedSkinFilterGroups"
+          :key="group.key"
+          class="filter-field filter-field-full"
+        >
+          <label>{{ group.title }}</label>
+          <div class="pill-row">
+            <button
+              v-for="skin in group.options"
+              :key="`${group.key}-${skin}`"
+              type="button"
+              class="pill-chip"
+              :class="{ active: filters.skinNames.includes(skin) }"
+              @click="toggleSkin(skin)"
+            >
+              {{ skin }}
+            </button>
+            <span v-if="!group.options.length" class="pill-empty">暂无枪皮选项</span>
+          </div>
+        </div>
+      </div>
     </div>
   </section>
 </template>