feat: P2阶段完成 - listings和auth模块迁移

## P2.1: 商品浏览模块（listings）✅

### 完整迁移（23个文件）
- API: listings.ts, listingOptions.ts, homeConfig.ts
- Views: 5个页面（HomeView, ListingsView, ListingDetailView + 移动端2个）
- Composables: 3个（useHomeFilters, useFilterOptions, useListingQuery）
- Components: 9个（ListingCard, 各种过滤器组件）
- Tests: 2个测试文件

**功能：**
- 首页浏览、商品列表、详情查看
- 高级筛选（服务器、等级、哈夫币、皮肤等）
- 排序和分区功能
- 横幅、公告、统计展示

**技术改进：**
- 更新所有导入路径到 @/shared/
- 建立清晰的模块导出

---

## P2.2: 用户认证模块（auth）✅

### 完整迁移（12个文件）
- API: auth.ts, realname.ts, notifications.ts
- Views: 8个页面（登录、注册、个人资料、实名认证、通知 + 移动端）
- 模块导出

**功能：**
- 用户注册、登录、Token管理
- 实名认证、风险检查
- 个人资料编辑、头像上传
- 消息/通知中心

**技术改进：**
- 统一 API 导入路径
- 类型安全增强

---

## 里程碑

🎉 **P2 阶段完成！**

**累计完成：** 6个模块
- ✅ P0: shared（基础设施）- 22个文件
- ✅ P1: wallet, chats, orders - 24个文件
- ✅ P2: listings, auth - 35个文件

**总计：** 81个文件已迁移

**剩余：** P3阶段（seller, disputes, admin）+ 清理工作

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/features/listings/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/features/listings/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/features/listings/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/features/listings/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/features/listings/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/features/listings/components/ListingCard.vue

@@ -0,0 +1,344 @@
+<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"
+        :data-src="listing.cover_url"
+        :alt="getListingTitle(listing)"
+        loading="lazy"
+        decoding="async"
+        class="lazy-image"
+      />
+      <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/features/listings/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/features/listings/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/features/listings/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>