From 2966b59c9036393362b0826279fe39e66c35233b Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Fri, 29 May 2026 10:06:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components.d.ts               |    1 +
 frontend/src/layouts/AppLayout.vue     |  352 ++++---
 frontend/src/styles/base.css           |    8 +
 frontend/src/views/public/HomeView.vue | 1220 ++++++++++++++++++------
 4 files changed, 1176 insertions(+), 405 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index a6caca0..da3b850 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -34,6 +34,7 @@ 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']
diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
index ecdb307..05e83b0 100644
--- a/frontend/src/layouts/AppLayout.vue
+++ b/frontend/src/layouts/AppLayout.vue
@@ -2,12 +2,12 @@
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 import {
-  Bell,
+  ArrowDown,
   ChatDotRound,
   CirclePlus,
   House,
   Search,
-  Shop,
+  Service,
   SwitchButton,
   Tickets,
   UserFilled,
@@ -38,8 +38,11 @@ function handleLogout() {
   <div class="pc-app-shell">
     <header class="pc-topbar">
       <RouterLink class="pc-brand" to="/">
-        <span class="pc-brand-mark">HFB</span>
-        <span class="pc-brand-text">哈夫币租号</span>
+        <span class="pc-brand-mark">锤</span>
+        <div class="pc-brand-info">
+          <span class="pc-brand-text">大锤商行</span>
+          <small class="pc-brand-sub">哈夫币租号</small>
+        </div>
       </RouterLink>
 
       <nav class="pc-nav">
@@ -56,15 +59,22 @@ function handleLogout() {
 
       <div class="pc-search">
         <el-icon><Search /></el-icon>
-        <input placeholder="搜索区服 / 段位 / 哈夫币数量" />
+        <input placeholder="搜索区服 / 段位 / 哈夫币数量 / 皮肤" />
       </div>
 
       <div class="pc-user-actions">
+        <RouterLink class="pc-icon-link service-link" to="/notifications" title="联系客服">
+          <el-icon><Service /></el-icon>
+          <span>客服</span>
+        </RouterLink>
+
+        <RouterLink class="pc-post-link" :to="session.isLoggedIn ? '/seller/listings/create' : '/login'">
+          <el-icon><CirclePlus /></el-icon>
+          <span>发布账号</span>
+        </RouterLink>
+
         <!-- 未登录：显示登录/注册按钮 -->
         <template v-if="!session.isLoggedIn">
-          <RouterLink class="pc-icon-link" to="/notifications" aria-label="通知">
-            <el-icon><Bell /></el-icon>
-          </RouterLink>
           <RouterLink class="pc-login-link" to="/login">
             <el-icon><UserFilled /></el-icon>
             <span>登录/注册</span>
@@ -73,15 +83,12 @@ function handleLogout() {
 
         <!-- 已登录：显示用户头像+昵称 + 下拉菜单 -->
         <template v-else>
-          <RouterLink class="pc-icon-link" to="/notifications" aria-label="通知">
-            <el-icon><Bell /></el-icon>
-          </RouterLink>
-
           <div class="pc-user-block" @mouseleave="showUserDropdown = false">
             <button
               class="pc-user-trigger"
               @mouseenter="showUserDropdown = true"
               @click="showUserDropdown = !showUserDropdown"
+              :class="{ active: showUserDropdown }"
             >
               <span class="pc-avatar-chip">
                 <img
@@ -93,49 +100,46 @@ function handleLogout() {
                 <span v-else class="pc-avatar-text">{{ session.avatarText }}</span>
               </span>
               <span class="pc-user-name">{{ session.displayName }}</span>
+              <el-icon class="arrow-icon" :class="{ rotated: showUserDropdown }"><ArrowDown /></el-icon>
             </button>
 
             <Transition name="dropdown">
-              <div v-if="showUserDropdown" class="pc-user-dropdown">
-                <RouterLink
-                  class="dropdown-item"
-                  to="/orders"
-                  @click="showUserDropdown = false"
-                >
-                  <el-icon><Tickets /></el-icon>
-                  <span>我的订单</span>
-                </RouterLink>
-                <RouterLink
-                  class="dropdown-item"
-                  to="/wallet"
-                  @click="showUserDropdown = false"
-                >
-                  <el-icon><Wallet /></el-icon>
-                  <span>钱包</span>
-                </RouterLink>
-                <RouterLink
-                  class="dropdown-item"
-                  to="/seller/listings/create"
-                  @click="showUserDropdown = false"
-                >
-                  <el-icon><CirclePlus /></el-icon>
-                  <span>发布账号</span>
-                </RouterLink>
-                <div class="dropdown-divider"></div>
-                <button class="dropdown-item logout" @click="handleLogout">
-                  <el-icon><SwitchButton /></el-icon>
-                  <span>退出登录</span>
-                </button>
+              <div v-if="showUserDropdown" class="pc-user-dropdown-container">
+                <div class="pc-user-dropdown">
+                  <RouterLink
+                    class="dropdown-item"
+                    to="/orders"
+                    @click="showUserDropdown = false"
+                  >
+                    <el-icon><Tickets /></el-icon>
+                    <span>我的订单</span>
+                  </RouterLink>
+                  <RouterLink
+                    class="dropdown-item"
+                    to="/wallet"
+                    @click="showUserDropdown = false"
+                  >
+                    <el-icon><Wallet /></el-icon>
+                    <span>我的钱包</span>
+                  </RouterLink>
+                  <RouterLink
+                    class="dropdown-item"
+                    to="/seller/listings/create"
+                    @click="showUserDropdown = false"
+                  >
+                    <el-icon><CirclePlus /></el-icon>
+                    <span>发布账号</span>
+                  </RouterLink>
+                  <div class="dropdown-divider"></div>
+                  <button class="dropdown-item logout" @click="handleLogout">
+                    <el-icon><SwitchButton /></el-icon>
+                    <span>退出登录</span>
+                  </button>
+                </div>
               </div>
             </Transition>
           </div>
         </template>
-
-        <!-- 未登录时发布按钮放在外面 -->
-        <RouterLink v-if="!session.isLoggedIn" class="pc-post-link" to="/login">
-          <el-icon><CirclePlus /></el-icon>
-          <span>发布账号</span>
-        </RouterLink>
       </div>
     </header>
 
@@ -151,6 +155,8 @@ function handleLogout() {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  max-width: 100vw;
+  overflow-x: clip;
   background: #f5f6f8;
 }
 
@@ -160,8 +166,10 @@ function handleLogout() {
   z-index: 100;
   display: flex;
   align-items: center;
-  gap: 16px;
-  height: 56px;
+  gap: 20px;
+  min-width: 0;
+  max-width: 100%;
+  height: 64px;
   padding: 0 24px;
   background: #fff;
   border-bottom: 1px solid #eef1f5;
@@ -172,28 +180,39 @@ function handleLogout() {
 .pc-brand {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   text-decoration: none;
   flex-shrink: 0;
 }
 
 .pc-brand-mark {
   display: grid;
-  width: 32px;
-  height: 32px;
+  width: 38px;
+  height: 38px;
   place-items: center;
-  border-radius: 8px;
-  background: #1477ff;
-  color: #fff;
-  font-size: 14px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #fff3e8 0%, #ffe4cc 100%);
+  color: #ff6a00;
+  font-size: 20px;
   font-weight: 900;
 }
 
+.pc-brand-info {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
 .pc-brand-text {
   font-size: 16px;
   font-weight: 800;
   color: #17233d;
-  white-space: nowrap;
+}
+
+.pc-brand-sub {
+  font-size: 11px;
+  color: #8b9cb5;
+  font-weight: 600;
 }
 
 /* ========== 导航 ========== */
@@ -201,40 +220,51 @@ function handleLogout() {
   display: flex;
   align-items: center;
   gap: 4px;
-  margin-left: 16px;
+  margin-left: 10px;
+  min-width: 0;
+  height: 100%;
 }
 
 .pc-nav-link {
   display: flex;
   align-items: center;
   gap: 5px;
-  padding: 6px 12px;
-  border-radius: 8px;
+  padding: 8px 14px;
+  border-radius: 10px;
   color: #5a6577;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 700;
   text-decoration: none;
-  transition: background 0.15s, color 0.15s;
+  transition: all 0.2s;
 }
 
 .pc-nav-link:hover,
 .pc-nav-link.router-link-active {
-  background: #f0f5ff;
-  color: #1477ff;
+  background: #fff3e8;
+  color: #ff6a00;
 }
 
 /* ========== 搜索 ========== */
 .pc-search {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   margin-left: auto;
-  padding: 0 12px;
-  height: 36px;
-  border-radius: 10px;
+  padding: 0 14px;
+  height: 40px;
+  border-radius: 12px;
   background: #f4f6f8;
-  max-width: 280px;
-  flex: 0 1 280px;
+  border: 1px solid transparent;
+  max-width: 320px;
+  min-width: 180px;
+  flex: 1;
+  transition: all 0.2s;
+}
+
+.pc-search:focus-within {
+  background: #fff;
+  border-color: #ff6a00;
+  box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.08);
 }
 
 .pc-search input {
@@ -252,6 +282,7 @@ function handleLogout() {
 
 .pc-search .el-icon {
   color: #a0aab6;
+  font-size: 16px;
   flex-shrink: 0;
 }
 
@@ -259,66 +290,110 @@ function handleLogout() {
 .pc-user-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   margin-left: 12px;
+  min-width: 0;
   flex-shrink: 0;
+  height: 100%;
 }
 
 .pc-icon-link {
-  display: grid;
-  width: 36px;
-  height: 36px;
-  place-items: center;
-  border-radius: 10px;
-  color: #6b7a90;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 22px;
+  height: 40px;
+  border-radius: 12px;
+  border: 1px solid #eef1f5;
+  background: #ffffff;
+  color: #5a6577;
+  font-size: 14px;
+  font-weight: 700;
   text-decoration: none;
-  transition: background 0.15s;
+  transition: all 0.2s;
+  white-space: nowrap;
 }
 
 .pc-icon-link:hover {
-  background: #f0f5ff;
-  color: #1477ff;
+  background: #fff3e8;
+  border-color: #ff6a00;
+  color: #ff6a00;
+  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.05);
+}
+
+.service-link {
+  gap: 7px;
+  min-width: 92px;
+  justify-content: center;
+  padding: 0 18px;
+  border-color: rgba(255, 106, 0, 0.32);
+  border-radius: 10px;
+  background: #fff8f2;
+  color: #ff6a00;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.service-link .el-icon {
+  width: 18px;
+  height: 18px;
+  font-size: 18px;
+  stroke-width: 2.2;
+}
+
+.service-link:hover {
+  background: #fff3e8;
+  border-color: #ff6a00;
+  box-shadow: 0 6px 16px rgba(255, 106, 0, 0.1);
+  transform: translateY(-1px);
 }
 
 .pc-login-link {
   display: flex;
   align-items: center;
-  gap: 5px;
-  padding: 6px 14px;
+  gap: 6px;
+  padding: 0 16px;
+  height: 40px;
   border-radius: 10px;
-  background: #1477ff;
-  color: #fff;
+  background: #f4f6f8;
+  color: #17233d;
   font-size: 13px;
   font-weight: 700;
   text-decoration: none;
-  transition: background 0.15s;
+  transition: all 0.2s;
 }
 
 .pc-login-link:hover {
-  background: #0d5fd4;
+  background: #eaeff5;
 }
 
 .pc-post-link {
   display: flex;
   align-items: center;
-  gap: 5px;
-  padding: 6px 14px;
+  gap: 6px;
+  padding: 0 18px;
+  height: 40px;
   border-radius: 10px;
   background: #ff6a00;
   color: #fff;
-  font-size: 13px;
-  font-weight: 700;
+  font-size: 14px;
+  font-weight: 800;
   text-decoration: none;
-  transition: background 0.15s;
+  box-shadow: 0 6px 16px rgba(255, 106, 0, 0.2);
+  transition: all 0.2s;
 }
 
 .pc-post-link:hover {
   background: #e55d00;
+  transform: translateY(-1px);
 }
 
 /* ========== 已登录 - 用户块 ========== */
 .pc-user-block {
   position: relative;
+  height: 40px;
+  display: flex;
+  align-items: center;
 }
 
 .pc-user-trigger {
@@ -326,27 +401,29 @@ function handleLogout() {
   align-items: center;
   gap: 8px;
   padding: 4px 10px 4px 4px;
+  height: 36px;
   border: none;
-  border-radius: 10px;
+  border-radius: 999px;
   background: #f4f6f8;
   cursor: pointer;
-  transition: background 0.15s;
+  transition: all 0.2s;
 }
 
-.pc-user-trigger:hover {
+.pc-user-trigger:hover,
+.pc-user-trigger.active {
   background: #eaeff5;
 }
 
 .pc-avatar-chip {
   display: grid;
-  width: 30px;
-  height: 30px;
+  width: 28px;
+  height: 28px;
   place-items: center;
-  border-radius: 8px;
+  border-radius: 50%;
   overflow: hidden;
-  background: #1477ff;
+  background: linear-gradient(135deg, #ff6a00 0%, #e55d00 100%);
   color: #fff;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 800;
   flex-shrink: 0;
 }
@@ -365,89 +442,110 @@ function handleLogout() {
   max-width: 100px;
   overflow: hidden;
   color: #17233d;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 700;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* ========== 下拉菜单 ========== */
-.pc-user-dropdown {
+.arrow-icon {
+  font-size: 12px;
+  color: #8b9cb5;
+  transition: transform 0.3s;
+}
+
+.arrow-icon.rotated {
+  transform: rotate(180deg);
+}
+
+/* ========== 下拉菜单容器 (Hover Bridge) ========== */
+.pc-user-dropdown-container {
   position: absolute;
-  top: calc(100% + 6px);
+  top: 100%;
   right: 0;
   z-index: 200;
-  min-width: 180px;
-  padding: 6px;
-  border-radius: 12px;
+  padding-top: 12px;
+}
+
+.pc-user-dropdown {
+  min-width: 200px;
+  padding: 8px;
+  border-radius: 14px;
   background: #fff;
   border: 1px solid #eef1f5;
-  box-shadow: 0 8px 24px rgba(23, 35, 61, 0.12);
+  box-shadow: 0 10px 30px rgba(23, 35, 61, 0.15);
 }
 
 .dropdown-item {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   width: 100%;
-  padding: 9px 12px;
+  padding: 10px 14px;
   border: none;
-  border-radius: 8px;
+  border-radius: 10px;
   background: none;
-  color: #3d4e63;
+  color: #475569;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   text-decoration: none;
   cursor: pointer;
-  transition: background 0.12s;
+  transition: all 0.2s;
 }
 
 .dropdown-item:hover {
-  background: #f0f5ff;
-  color: #1477ff;
+  background: #fff3e8;
+  color: #ff6a00;
+  transform: translateX(4px);
 }
 
 .dropdown-item .el-icon {
-  color: #8b9cb5;
-  flex-shrink: 0;
+  font-size: 16px;
+  color: #94a3b8;
+  transition: color 0.2s;
 }
 
 .dropdown-item:hover .el-icon {
-  color: #1477ff;
+  color: #ff6a00;
 }
 
 .dropdown-item.logout {
-  color: #e74c3c;
+  color: #ef4444;
 }
 
 .dropdown-item.logout .el-icon {
-  color: #e74c3c;
+  color: #ef4444;
 }
 
 .dropdown-item.logout:hover {
-  background: #fef0ef;
+  background: #fff1f0;
 }
 
 .dropdown-divider {
   height: 1px;
-  margin: 4px 8px;
-  background: #eef1f5;
+  margin: 6px 10px;
+  background: #f1f5f9;
 }
 
 /* 下拉动画 */
 .dropdown-enter-active,
 .dropdown-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.dropdown-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
 }
-.dropdown-enter-from,
 .dropdown-leave-to {
   opacity: 0;
-  transform: translateY(-4px);
+  transform: translateY(5px);
 }
 
 /* ========== 主体 ---------- */
 .pc-main {
   flex: 1;
+  min-width: 0;
   padding: 20px 24px;
+  overflow-x: clip;
 }
 </style>
diff --git a/frontend/src/styles/base.css b/frontend/src/styles/base.css
index 137a5ab..fb36ad4 100644
--- a/frontend/src/styles/base.css
+++ b/frontend/src/styles/base.css
@@ -11,10 +11,18 @@
   box-sizing: border-box;
 }
 
+html,
 body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+#app {
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 a {
diff --git a/frontend/src/views/public/HomeView.vue b/frontend/src/views/public/HomeView.vue
index f7f23ba..b5c2da1 100644
--- a/frontend/src/views/public/HomeView.vue
+++ b/frontend/src/views/public/HomeView.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from "vue";
 import {
+  ArrowDown,
   Bell,
-  CirclePlus,
   Filter,
-  Headset,
   Refresh,
   Search,
 } from "@element-plus/icons-vue";
@@ -24,19 +23,19 @@ import {
   formatHafCoinM,
   getCoinM,
   getCoinWan,
-  getListingChips,
   getListingDisplayPrice,
-  getListingSubtitle,
   getListingTitle,
   getLoginMethod,
   getServerRegion,
   hasAcceleratedSaleRatio,
   hasGiftResources,
+  assetRegions,
   readAssetNumber,
   readAssetString,
   getResourceQuantity,
   getOnlineTimeText,
   getSkinNames,
+  getSkinGroup,
   getRatioValue,
   getDailyLoss,
 } from "@/utils/listingDisplay";
@@ -49,11 +48,14 @@ const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions);
 const filters = reactive({
   keyword: "",
   server: "",
+  region: "",
   loginMethod: "",
   rank: "",
   insurance: "",
   stamina: "",
   load: "",
+  skinGroup: "",
+  skinName: "",
   minCoin: undefined as number | undefined,
   maxCoin: undefined as number | undefined,
   minPrice: undefined as number | undefined,
@@ -62,15 +64,45 @@ const filters = reactive({
   maxDeposit: undefined as number | undefined,
   minTotal: undefined as number | undefined,
   maxTotal: undefined as number | undefined,
+  minFireLevel: undefined as number | undefined,
+  maxFireLevel: undefined as number | undefined,
 });
 const sortBy = ref("recommended");
 
-const serverOptions = computed(() =>
-  uniqueOptions(
-    publishOptions.value.server_options
-      .map((item) => item.trim())
-      .filter(Boolean)
-  )
+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 },
+];
+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 },
+];
+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 },
+];
+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 },
+];
+
+const regionOptions = computed(() =>
+  uniqueOptions([
+    ...publishOptions.value.region_options,
+    ...listings.value.flatMap((item) => assetRegions(item)),
+  ])
 );
 const loginMethodOptions = computed(() =>
   uniqueOptions(
@@ -79,6 +111,19 @@ const loginMethodOptions = computed(() =>
       .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 "皮肤";
+});
 
 const visibleListings = computed(() => {
   const keyword = filters.keyword.trim().toLowerCase();
@@ -89,6 +134,7 @@ const visibleListings = computed(() => {
       item.rank_level,
       getServerRegion(item),
       getLoginMethod(item),
+      ...assetRegions(item),
       getListingTitle(item),
       ...getSkinNames(item),
     ]
@@ -97,11 +143,18 @@ const visibleListings = computed(() => {
     
     if (keyword && !text.includes(keyword)) return false;
     if (filters.server && getServerRegion(item) !== filters.server) return false;
+    if (filters.region && !assetRegions(item).includes(filters.region)) return false;
     if (filters.loginMethod && getLoginMethod(item) !== filters.loginMethod) return false;
     if (filters.rank && item.rank_level !== filters.rank) return false;
     if (filters.insurance && readAssetString(item, "season_insurance") !== filters.insurance) return false;
     if (filters.stamina && readAssetString(item, "stamina_level") !== filters.stamina) return false;
     if (filters.load && readAssetString(item, "load_level") !== filters.load) return false;
+    if (filters.skinName) {
+      const skins = filters.skinGroup ? getSkinGroup(item, filters.skinGroup) : getSkinNames(item);
+      if (!skins.includes(filters.skinName)) return false;
+    } else if (filters.skinGroup && getSkinGroup(item, filters.skinGroup).length === 0) {
+      return false;
+    }
 
     // Range filters
     const price = getListingDisplayPrice(item);
@@ -116,6 +169,9 @@ const visibleListings = computed(() => {
     if (filters.maxDeposit && deposit > filters.maxDeposit) return false;
     if (filters.minTotal && total < filters.minTotal) return false;
     if (filters.maxTotal && total > filters.maxTotal) return false;
+    const fireLevel = readAssetNumber(item, "fire_level");
+    if (filters.minFireLevel && fireLevel < filters.minFireLevel) return false;
+    if (filters.maxFireLevel && fireLevel > filters.maxFireLevel) return false;
     
     return true;
   });
@@ -175,11 +231,14 @@ async function loadHome() {
 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;
@@ -188,40 +247,70 @@ function resetFilters() {
   filters.maxDeposit = undefined;
   filters.minTotal = undefined;
   filters.maxTotal = undefined;
+  filters.minFireLevel = undefined;
+  filters.maxFireLevel = undefined;
   sortBy.value = "recommended";
 }
 
 function uniqueOptions(values: string[]) {
   return [...new Set(values.map((item) => item.trim()).filter(Boolean))];
 }
+
+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;
+}
+
+function isRangeSelected(
+  currentMin: number | undefined,
+  currentMax: number | undefined,
+  min: number | undefined,
+  max: number | undefined,
+) {
+  return currentMin === min && currentMax === max;
+}
+
+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(groupKey: string, skinName = "") {
+  filters.skinGroup = groupKey;
+  filters.skinName = skinName;
+}
+
+function resetSkinFilter() {
+  filters.skinGroup = "";
+  filters.skinName = "";
+}
 </script>
 
 <template>
   <section class="pc-home-redesign">
-    <!-- 头部栏 -->
-    <div class="home-head">
-      <div class="brand-block">
-        <span class="brand-mark-large">锤</span>
-        <div>
-          <strong>大锤商行</strong>
-          <small>三角洲行动哈夫币租号</small>
-        </div>
-      </div>
-      <div class="home-searchbar">
-        <el-icon><Search /></el-icon>
-        <input v-model="filters.keyword" placeholder="搜区服 / 段位 / 哈夫币 / 皮肤" />
-      </div>
-      <RouterLink class="home-service" to="/notifications">
-        <el-icon><Headset /></el-icon>
-        <span>客服</span>
-      </RouterLink>
-      <RouterLink class="home-publish" to="/seller/listings/create">
-        <el-icon><CirclePlus /></el-icon>
-        <span>发布账号</span>
-      </RouterLink>
-    </div>
-
-    <!-- 滚动公告 -->
+    <!-- 滚动公告 (置顶于主内容上方) -->
     <div class="home-announcement">
       <el-icon><Bell /></el-icon>
       <el-carousel
@@ -285,125 +374,294 @@ function uniqueOptions(values: string[]) {
           <el-button :icon="Refresh" link @click="resetFilters">重置全部条件</el-button>
         </div>
 
-        <div class="filter-body-v2">
-          <!-- 第一行: 核心规格 -->
-          <div class="filter-row">
-            <div class="filter-item">
-              <label>保险格数</label>
-              <el-select v-model="filters.insurance" clearable placeholder="全部保险" size="default">
-                <el-option
-                  v-for="item in publishOptions.insurance_options"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
-              </el-select>
+        <div class="filter-chip-row">
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="220">
+            <template #reference>
+              <button class="filter-chip" :class="{ active: filters.insurance }" type="button">
+                <span>{{ filters.insurance || "保险" }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="filter-menu">
+              <button type="button" :class="{ active: !filters.insurance }" @click="filters.insurance = ''">全部保险</button>
+              <button
+                v-for="item in publishOptions.insurance_options"
+                :key="item"
+                type="button"
+                :class="{ active: filters.insurance === item }"
+                @click="filters.insurance = item"
+              >
+                {{ item }}
+              </button>
             </div>
-            <div class="filter-item">
-              <label>体力等级</label>
-              <el-select v-model="filters.stamina" clearable placeholder="全部体力" size="default">
-                <el-option
-                  v-for="item in publishOptions.level_options"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
-              </el-select>
-            </div>
-            <div class="filter-item">
-              <label>负重等级</label>
-              <el-select v-model="filters.load" clearable placeholder="全部负重" size="default">
-                <el-option
-                  v-for="item in publishOptions.level_options"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
-              </el-select>
-            </div>
-            <div class="filter-item">
-              <label>地区选择</label>
-              <el-select v-model="filters.server" clearable placeholder="全部区服" size="default">
-                <el-option v-for="item in serverOptions" :key="item" :label="item" :value="item" />
-              </el-select>
-            </div>
-            <div class="filter-item">
-              <label>段位等级</label>
-              <el-select v-model="filters.rank" clearable placeholder="全部段位" size="default">
-                <el-option
-                  v-for="item in publishOptions.rank_options"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
-              </el-select>
-            </div>
-            <div class="filter-item">
-              <label>登陆方式</label>
-              <el-select v-model="filters.loginMethod" clearable placeholder="全部方式" size="default">
-                <el-option v-for="item in loginMethodOptions" :key="item" :label="item" :value="item" />
-              </el-select>
-            </div>
-          </div>
+          </el-popover>
 
-          <!-- 第二行: 价值筛选 -->
-          <div class="filter-row range-row">
-            <div class="filter-item">
-              <label>哈夫币 (M)</label>
-              <div class="range-inputs">
-                <el-input-number v-model="filters.minCoin" :min="0" :step="50" placeholder="最低" controls-position="right" />
-                <span class="range-sep">-</span>
-                <el-input-number v-model="filters.maxCoin" :min="0" :step="50" placeholder="最高" controls-position="right" />
-              </div>
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="220">
+            <template #reference>
+              <button class="filter-chip" :class="{ active: filters.stamina }" type="button">
+                <span>{{ filters.stamina || "体力" }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="filter-menu">
+              <button type="button" :class="{ active: !filters.stamina }" @click="filters.stamina = ''">全部体力</button>
+              <button
+                v-for="item in publishOptions.level_options"
+                :key="item"
+                type="button"
+                :class="{ active: filters.stamina === item }"
+                @click="filters.stamina = item"
+              >
+                {{ item }}
+              </button>
             </div>
-            <div class="filter-item">
-              <label>单日租金 (元)</label>
-              <div class="range-inputs">
-                <el-input-number v-model="filters.minPrice" :min="0" :step="10" placeholder="最低" controls-position="right" />
-                <span class="range-sep">-</span>
-                <el-input-number v-model="filters.maxPrice" :min="0" :step="10" placeholder="最高" controls-position="right" />
-              </div>
-            </div>
-            <div class="filter-item">
-              <label>押金金额 (元)</label>
-              <div class="range-inputs">
-                <el-input-number v-model="filters.minDeposit" :min="0" :step="10" placeholder="最低" controls-position="right" />
-                <span class="range-sep">-</span>
-                <el-input-number v-model="filters.maxDeposit" :min="0" :step="10" placeholder="最高" controls-position="right" />
-              </div>
-            </div>
-          </div>
+          </el-popover>
 
-          <!-- 第三行: 合计与关键词 -->
-          <div class="filter-row last-row">
-            <div class="filter-item">
-              <label>合计金额 (租金+押金)</label>
-              <div class="range-inputs">
-                <el-input-number v-model="filters.minTotal" :min="0" :step="10" placeholder="最低" controls-position="right" />
-                <span class="range-sep">-</span>
-                <el-input-number v-model="filters.maxTotal" :min="0" :step="10" placeholder="最高" controls-position="right" />
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="220">
+            <template #reference>
+              <button class="filter-chip" :class="{ active: filters.load }" type="button">
+                <span>{{ filters.load || "负重" }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="filter-menu">
+              <button type="button" :class="{ active: !filters.load }" @click="filters.load = ''">全部负重</button>
+              <button
+                v-for="item in publishOptions.level_options"
+                :key="item"
+                type="button"
+                :class="{ active: filters.load === item }"
+                @click="filters.load = item"
+              >
+                {{ item }}
+              </button>
+            </div>
+          </el-popover>
+
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="240">
+            <template #reference>
+              <button class="filter-chip wide" :class="{ active: filters.region }" type="button">
+                <span>{{ filters.region || "地区选择" }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="filter-menu">
+              <button type="button" :class="{ active: !filters.region }" @click="filters.region = ''">全部省市</button>
+              <button
+                v-for="item in regionOptions"
+                :key="item"
+                type="button"
+                :class="{ active: filters.region === item }"
+                @click="filters.region = item"
+              >
+                {{ item }}
+              </button>
+            </div>
+          </el-popover>
+
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="350">
+            <template #reference>
+              <button class="filter-chip wide" :class="{ active: filters.minCoin !== undefined || filters.maxCoin !== undefined }" type="button">
+                <span>{{ rangeLabel(filters.minCoin, filters.maxCoin, "哈夫币(M)") }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="range-menu">
+              <button
+                v-for="item in coinRangeOptions"
+                :key="item.label"
+                type="button"
+                :class="{ active: isRangeSelected(filters.minCoin, filters.maxCoin, item.min, item.max) }"
+                @click="setCoinRange(item.min, item.max)"
+              >
+                {{ item.label }}
+              </button>
+              <div class="range-manual">
+                <el-input-number v-model="filters.minCoin" :controls="false" :min="0" placeholder="最小值" />
+                <span>-</span>
+                <el-input-number v-model="filters.maxCoin" :controls="false" :min="0" placeholder="最大值" />
               </div>
             </div>
-            <div class="filter-item skin-search">
-              <label>皮肤/关键词搜索</label>
-              <el-input v-model="filters.keyword" placeholder="搜索皮肤名称、角色、装备等..." clearable>
-                <template #prefix>
-                  <el-icon><Search /></el-icon>
-                </template>
-              </el-input>
-            </div>
-          </div>
-        </div>
+          </el-popover>
 
-        <div class="filter-footer">
-          <div class="quick-tags">
-            <span>快捷选择：</span>
-            <button type="button" :class="{active: filters.minCoin === 100}" @click="filters.minCoin = 100">100M+</button>
-            <button type="button" :class="{active: filters.minCoin === 300}" @click="filters.minCoin = 300">300M+</button>
-            <button type="button" :class="{active: filters.loginMethod === '账号密码'}" @click="filters.loginMethod = '账号密码'">账密优先</button>
-            <button type="button" :class="{active: filters.server === 'QQ'}" @click="filters.server = 'QQ'">QQ 区服</button>
-            <button type="button" :class="{active: filters.insurance === '3*3'}" @click="filters.insurance = '3*3'">9格保险</button>
-          </div>
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="350">
+            <template #reference>
+              <button class="filter-chip" :class="{ active: filters.minPrice !== undefined || filters.maxPrice !== undefined }" type="button">
+                <span>{{ rangeLabel(filters.minPrice, filters.maxPrice, "租金") }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="range-menu">
+              <button
+                v-for="item in moneyRangeOptions"
+                :key="item.label"
+                type="button"
+                :class="{ active: isRangeSelected(filters.minPrice, filters.maxPrice, item.min, item.max) }"
+                @click="setPriceRange(item.min, item.max)"
+              >
+                {{ item.label }}
+              </button>
+              <div class="range-manual">
+                <el-input-number v-model="filters.minPrice" :controls="false" :min="0" placeholder="最小值" />
+                <span>-</span>
+                <el-input-number v-model="filters.maxPrice" :controls="false" :min="0" placeholder="最大值" />
+              </div>
+            </div>
+          </el-popover>
+
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="350">
+            <template #reference>
+              <button class="filter-chip" :class="{ active: filters.minDeposit !== undefined || filters.maxDeposit !== undefined }" type="button">
+                <span>{{ rangeLabel(filters.minDeposit, filters.maxDeposit, "押金") }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="range-menu">
+              <button
+                v-for="item in moneyRangeOptions"
+                :key="item.label"
+                type="button"
+                :class="{ active: isRangeSelected(filters.minDeposit, filters.maxDeposit, item.min, item.max) }"
+                @click="setDepositRange(item.min, item.max)"
+              >
+                {{ item.label }}
+              </button>
+              <div class="range-manual">
+                <el-input-number v-model="filters.minDeposit" :controls="false" :min="0" placeholder="最小值" />
+                <span>-</span>
+                <el-input-number v-model="filters.maxDeposit" :controls="false" :min="0" placeholder="最大值" />
+              </div>
+            </div>
+          </el-popover>
+
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="350">
+            <template #reference>
+              <button class="filter-chip wide" :class="{ active: filters.minTotal !== undefined || filters.maxTotal !== undefined }" type="button">
+                <span>{{ rangeLabel(filters.minTotal, filters.maxTotal, "合计金额") }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="range-menu">
+              <button
+                v-for="item in totalRangeOptions"
+                :key="item.label"
+                type="button"
+                :class="{ active: isRangeSelected(filters.minTotal, filters.maxTotal, item.min, item.max) }"
+                @click="setTotalRange(item.min, item.max)"
+              >
+                {{ item.label }}
+              </button>
+              <div class="range-manual">
+                <el-input-number v-model="filters.minTotal" :controls="false" :min="0" placeholder="最小值" />
+                <span>-</span>
+                <el-input-number v-model="filters.maxTotal" :controls="false" :min="0" placeholder="最大值" />
+              </div>
+            </div>
+          </el-popover>
+
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="320">
+            <template #reference>
+              <button class="filter-chip" :class="{ active: filters.skinGroup || filters.skinName }" type="button">
+                <span>{{ skinChipLabel }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="skin-filter-menu">
+              <button class="skin-reset" type="button" :class="{ active: !filters.skinGroup && !filters.skinName }" @click="resetSkinFilter">
+                全部皮肤
+              </button>
+              <div v-for="group in skinFilterGroups" :key="group.key" class="skin-filter-group">
+                <div class="skin-filter-title">
+                  <strong>{{ group.title }}</strong>
+                  <button
+                    type="button"
+                    :class="{ active: filters.skinGroup === group.key && !filters.skinName }"
+                    @click="setSkinFilter(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: filters.skinGroup === group.key && filters.skinName === skin }"
+                    @click="setSkinFilter(group.key, skin)"
+                  >
+                    {{ skin }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </el-popover>
+
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="220">
+            <template #reference>
+              <button class="filter-chip" :class="{ active: filters.rank }" type="button">
+                <span>{{ filters.rank || "段位" }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="filter-menu">
+              <button type="button" :class="{ active: !filters.rank }" @click="filters.rank = ''">全部段位</button>
+              <button
+                v-for="item in publishOptions.rank_options"
+                :key="item"
+                type="button"
+                :class="{ active: filters.rank === item }"
+                @click="filters.rank = item"
+              >
+                {{ item }}
+              </button>
+            </div>
+          </el-popover>
+
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="350">
+            <template #reference>
+              <button class="filter-chip" :class="{ active: filters.minFireLevel !== undefined || filters.maxFireLevel !== undefined }" type="button">
+                <span>{{ rangeLabel(filters.minFireLevel, filters.maxFireLevel, "等级") }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="range-menu">
+              <button
+                v-for="item in fireLevelRangeOptions"
+                :key="item.label"
+                type="button"
+                :class="{ active: isRangeSelected(filters.minFireLevel, filters.maxFireLevel, item.min, item.max) }"
+                @click="setFireLevelRange(item.min, item.max)"
+              >
+                {{ item.label }}
+              </button>
+              <div class="range-manual">
+                <el-input-number v-model="filters.minFireLevel" :controls="false" :min="0" placeholder="最小值" />
+                <span>-</span>
+                <el-input-number v-model="filters.maxFireLevel" :controls="false" :min="0" placeholder="最大值" />
+              </div>
+            </div>
+          </el-popover>
+
+          <el-popover placement="bottom-start" popper-class="home-filter-popover" trigger="click" :width="220">
+            <template #reference>
+              <button class="filter-chip wide" :class="{ active: filters.loginMethod }" type="button">
+                <span>{{ filters.loginMethod || "登陆方式" }}</span>
+                <el-icon><ArrowDown /></el-icon>
+              </button>
+            </template>
+            <div class="filter-menu">
+              <button type="button" :class="{ active: !filters.loginMethod }" @click="filters.loginMethod = ''">全部方式</button>
+              <button
+                v-for="item in loginMethodOptions"
+                :key="item"
+                type="button"
+                :class="{ active: filters.loginMethod === item }"
+                @click="filters.loginMethod = item"
+              >
+                {{ item }}
+              </button>
+            </div>
+          </el-popover>
         </div>
       </section>
 
@@ -555,12 +813,14 @@ function uniqueOptions(values: string[]) {
 .pc-home-redesign {
   display: grid;
   gap: 20px;
+  width: 100%;
   max-width: 1280px;
+  min-width: 0;
   margin: 0 auto;
+  overflow-x: clip;
 }
 
 /* 基础通用样式 */
-.home-head,
 .home-announcement,
 .horizontal-filter-card,
 .listing-card-v2 {
@@ -570,96 +830,6 @@ function uniqueOptions(values: string[]) {
   box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
 }
 
-/* 头部栏 */
-.home-head {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 14px 20px;
-}
-
-.brand-block {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-shrink: 0;
-}
-
-.brand-mark-large {
-  display: grid;
-  width: 44px;
-  height: 44px;
-  place-items: center;
-  border-radius: 12px;
-  background: linear-gradient(135deg, #fff3e8 0%, #ffe4cc 100%);
-  color: #ff6a00;
-  font-size: 20px;
-  font-weight: 900;
-}
-
-.brand-block strong {
-  display: block;
-  color: #17233d;
-  font-size: 18px;
-}
-
-.brand-block small {
-  display: block;
-  margin-top: 2px;
-  color: #7b8798;
-  font-size: 12px;
-}
-
-.home-searchbar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1;
-  max-width: 480px;
-  height: 42px;
-  margin-left: 20px;
-  border: 1px solid #edf1f6;
-  border-radius: 999px;
-  background: #f7f9fc;
-  padding: 0 16px;
-}
-
-.home-searchbar input {
-  width: 100%;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: #17233d;
-  font-size: 14px;
-}
-
-.home-service,
-.home-publish,
-.all-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-height: 40px;
-  border-radius: 999px;
-  padding: 0 18px;
-  font-size: 14px;
-  font-weight: 700;
-  text-decoration: none;
-}
-
-.home-service, .all-link {
-  border: 1px solid #e8edf3;
-  color: #1477ff;
-  background: #ffffff;
-}
-
-.home-publish {
-  background: #ff6a00;
-  color: #ffffff;
-  box-shadow: 0 8px 16px rgba(255, 106, 0, 0.2);
-}
-
 /* 公告 */
 .home-announcement {
   display: flex;
@@ -679,15 +849,18 @@ function uniqueOptions(values: string[]) {
 .home-content {
   display: grid;
   gap: 20px;
+  min-width: 0;
 }
 
 .hero-section {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 280px;
   gap: 20px;
+  min-width: 0;
 }
 
 .hero-board {
+  min-width: 0;
   border-radius: 16px;
   overflow: hidden;
 }
@@ -747,6 +920,7 @@ function uniqueOptions(values: string[]) {
   display: grid;
   grid-template-rows: repeat(3, 1fr);
   gap: 12px;
+  min-width: 0;
 }
 
 .stat-item {
@@ -767,7 +941,7 @@ function uniqueOptions(values: string[]) {
 
 .stat-item strong {
   font-size: 24px;
-  color: #1477ff;
+  color: #ff6a00;
 }
 
 .stat-item span {
@@ -781,16 +955,20 @@ function uniqueOptions(values: string[]) {
   font-size: 12px;
 }
 
-/* 横向筛选栏 v2 */
+/* 横向筛选栏 v2 - 审美优化版 */
 .horizontal-filter-card {
-  padding: 24px;
+  padding: 24px 26px 22px;
+  background: #ffffff;
+  border-radius: 20px;
+  min-width: 0;
+  overflow: visible;
 }
 
 .filter-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
 }
 
 .filter-title {
@@ -799,98 +977,566 @@ function uniqueOptions(values: string[]) {
   gap: 10px;
 }
 
+.filter-title .el-icon {
+  font-size: 18px;
+  color: #ff6a00;
+}
+
 .filter-title strong {
   font-size: 20px;
-  color: #17233d;
+  font-weight: 800;
+  color: #1e293b;
 }
 
 .filter-title span {
+  font-size: 13px;
+  color: #94a3b8;
+  font-weight: 600;
+}
+
+.filter-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+  padding: 4px 0 0;
+  overflow: visible;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  flex: 1 1 96px;
+  min-width: 0;
+  max-width: 140px;
+  height: 40px;
+  padding: 0 12px;
+  border: 1px solid #edf1f6;
+  border-radius: 12px;
+  background: #ffffff;
+  color: #1f2937;
   font-size: 14px;
-  color: #7b8798;
+  font-weight: 800;
+  white-space: nowrap;
+  cursor: pointer;
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
+  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.filter-chip.wide {
+  flex-basis: 112px;
+  max-width: 160px;
+}
+
+.filter-chip span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filter-chip:hover,
+.filter-chip.active {
+  border-color: #ffb27a;
+  color: #ff6a00;
+  box-shadow: 0 8px 18px rgba(255, 106, 0, 0.1);
+}
+
+.filter-chip:active {
+  transform: translateY(1px);
+}
+
+.filter-chip .el-icon {
+  font-size: 12px;
+}
+
+:global(.home-filter-popover.el-popover) {
+  padding: 0;
+  border: 1px solid #e5eaf2;
+  border-radius: 8px;
+  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14);
+}
+
+:global(.home-filter-popover .el-popper__arrow::before) {
+  border-color: #e5eaf2;
+}
+
+.filter-menu,
+.range-menu,
+.skin-filter-menu {
+  padding: 12px;
+}
+
+.filter-menu {
+  display: grid;
+  gap: 4px;
+  max-height: 300px;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.filter-menu::-webkit-scrollbar {
+  display: none;
+}
+
+.filter-menu button,
+.range-menu button {
+  width: 100%;
+  min-height: 34px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #5f6670;
+  font-size: 14px;
+  font-weight: 700;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.16s ease, color 0.16s ease;
+}
+
+.filter-menu button {
+  padding: 0 10px;
+}
+
+.filter-menu button:hover,
+.filter-menu button.active,
+.range-menu button:hover,
+.range-menu button.active {
+  background: #fff3e8;
+  color: #ff6a00;
+}
+
+.range-menu {
+  display: grid;
+  gap: 6px;
+}
+
+.range-menu button {
+  padding: 0 36px;
+  font-size: 15px;
+}
+
+.range-manual {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 10px;
+  border-top: 1px solid #e7ecf3;
+}
+
+.range-manual > span {
+  color: #5f6670;
+  font-size: 18px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.range-manual :deep(.el-input-number) {
+  width: 100%;
+}
+
+.range-manual :deep(.el-input__wrapper),
+.skin-filter-menu :deep(.el-input__wrapper) {
+  min-height: 38px;
+  border: 1px solid #dbe2ec;
+  border-radius: 6px;
+  box-shadow: none;
+}
+
+.range-manual :deep(.el-input__wrapper:hover),
+.skin-filter-menu :deep(.el-input__wrapper:hover) {
+  border-color: #ffb27a;
+}
+
+.range-manual :deep(.el-input__wrapper.is-focus),
+.skin-filter-menu :deep(.el-input__wrapper.is-focus) {
+  border-color: #ff6a00;
+  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12);
+}
+
+.range-manual :deep(.el-input__inner),
+.skin-filter-menu :deep(.el-input__inner) {
+  font-weight: 700;
+}
+
+.skin-filter-menu {
+  display: grid;
+  gap: 14px;
+  width: 100%;
+}
+
+.skin-reset {
+  width: 100%;
+  height: 36px;
+  border: 0;
+  border-radius: 10px;
+  background: #fff7f0;
+  color: #ff6a00;
+  font-size: 14px;
+  font-weight: 800;
+  text-align: left;
+  padding: 0 14px;
+  cursor: pointer;
+}
+
+.skin-reset.active {
+  background: #ff6a00;
+  color: #ffffff;
+}
+
+.skin-filter-group {
+  display: grid;
+  gap: 10px;
+}
+
+.skin-filter-group + .skin-filter-group {
+  padding-top: 12px;
+  border-top: 1px solid #f1f5f9;
+}
+
+.skin-filter-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.skin-filter-title strong {
+  color: #1f2937;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.skin-filter-title button {
+  height: 28px;
+  border: 1px solid #ffd7bd;
+  border-radius: 999px;
+  background: #fffaf5;
+  color: #ff6a00;
+  font-size: 12px;
+  font-weight: 800;
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+.skin-filter-title button.active,
+.skin-filter-title button:hover {
+  background: #ff6a00;
+  border-color: #ff6a00;
+  color: #ffffff;
+}
+
+.skin-filter-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-height: 156px;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.skin-filter-options::-webkit-scrollbar {
+  display: none;
+}
+
+.skin-filter-options button {
+  max-width: 100%;
+  min-height: 30px;
+  border: 1px solid #eef1f5;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #5f6670;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 0 10px;
+  cursor: pointer;
+  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
+}
+
+.skin-filter-options button:hover,
+.skin-filter-options button.active {
+  border-color: #ffb27a;
+  background: #fff3e8;
+  color: #ff6a00;
 }
 
 .filter-body-v2 {
   display: flex;
   flex-direction: column;
-  gap: 24px;
-  padding-bottom: 24px;
+  gap: 18px;
+  padding-bottom: 18px;
   border-bottom: 1px solid #f1f5f9;
 }
 
 .filter-row {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
-  gap: 20px;
-}
-
-.filter-row.range-row {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.filter-row.last-row {
-  grid-template-columns: 1fr 2fr;
+  gap: 16px;
 }
 
 .filter-item {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 7px;
+  min-width: 0;
 }
 
 .filter-item label {
-  font-size: 14px;
-  font-weight: 700;
+  font-size: 13px;
+  font-weight: 800;
   color: #475569;
+  padding-left: 2px;
+}
+
+/* 筛选控件 */
+.filter-select {
+  width: 100%;
+}
+
+.horizontal-filter-card :deep(.filter-select .el-select__wrapper) {
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid #e7edf5;
+  border-radius: 12px;
+  background: #fbfcfe;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.horizontal-filter-card :deep(.filter-select .el-select__wrapper:hover) {
+  border-color: #ffd0ad;
+  background: #ffffff;
+}
+
+.horizontal-filter-card :deep(.filter-select .el-select__wrapper.is-focused) {
+  border-color: #ff6a00;
+  background: #ffffff;
+  box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
+}
+
+.horizontal-filter-card :deep(.filter-select .el-select__placeholder) {
+  color: #a4adba;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.horizontal-filter-card :deep(.filter-select .el-select__caret) {
+  color: #98a2b3;
+  font-size: 14px;
+}
+
+.skin-search :deep(.el-input__wrapper) {
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid #e7edf5;
+  border-radius: 12px;
+  background: #fbfcfe;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.skin-search :deep(.el-input__wrapper:hover) {
+  border-color: #ffd0ad;
+  background: #ffffff;
+}
+
+.skin-search :deep(.el-input__wrapper.is-focus) {
+  border-color: #ff6a00;
+  background: #ffffff;
+  box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
+}
+
+.skin-search :deep(.el-input__inner) {
+  color: #334155;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.skin-search :deep(.el-input__inner::placeholder) {
+  color: #a4adba;
 }
 
 .range-inputs {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
+  min-width: 0;
 }
 
 .range-inputs :deep(.el-input-number) {
+  --el-color-primary: #ff6a00;
+  --el-input-border-color: transparent;
+  --el-input-hover-border-color: transparent;
+  --el-input-focus-border-color: transparent;
   flex: 1;
+  min-width: 0;
+  width: 100%;
+  height: 36px;
+  overflow: hidden;
+  border: 1px solid #e7edf5;
+  border-radius: 12px;
+  background: #fbfcfe;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.range-inputs :deep(.el-input-number:hover) {
+  border-color: #ffd0ad;
+  background: #ffffff;
+}
+
+.range-inputs :deep(.el-input-number.is-focus),
+.range-inputs :deep(.el-input-number:focus-within) {
+  border-color: #ff6a00;
+  background: #ffffff;
+  box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
+}
+
+.range-inputs :deep(.el-input-number .el-input) {
+  height: 100%;
+  min-width: 0;
+}
+
+.range-inputs :deep(.el-input-number .el-input__wrapper) {
+  height: 100%;
+  padding: 0 34px 0 10px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none !important;
+}
+
+.range-inputs :deep(.el-input-number .el-input__wrapper:hover),
+.range-inputs :deep(.el-input-number .el-input__wrapper.is-focus),
+.range-inputs :deep(.el-input-number.is-focus .el-input__wrapper),
+.range-inputs :deep(.el-input-number:focus-within .el-input__wrapper) {
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.range-inputs :deep(.el-input-number .el-input__inner) {
+  color: #334155;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.range-inputs :deep(.el-input-number .el-input__inner::placeholder) {
+  color: #a4adba;
+}
+
+.range-inputs :deep(.el-input-number__increase),
+.range-inputs :deep(.el-input-number__decrease) {
+  right: 0;
+  width: 34px;
+  height: 50%;
+  border: 0;
+  border-left: 1px solid #e7edf5;
+  background: #f8fafc;
+  color: #98a2b3;
+  line-height: 17px;
+  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.range-inputs :deep(.el-input-number__increase) {
+  top: 0;
+  border-bottom: 1px solid #eef2f7;
+  border-top-right-radius: 11px;
+}
+
+.range-inputs :deep(.el-input-number__decrease) {
+  bottom: 0;
+  border-bottom-right-radius: 11px;
+}
+
+.range-inputs :deep(.el-input-number__increase:hover),
+.range-inputs :deep(.el-input-number__decrease:hover) {
+  border-left-color: #ffd0ad;
+  background: #fff7f0;
+  color: #ff6a00;
+}
+
+.range-inputs :deep(.el-input-number__increase.is-disabled),
+.range-inputs :deep(.el-input-number__decrease.is-disabled) {
+  background: #f8fafc;
+  color: #cbd5e1;
+  cursor: not-allowed;
 }
 
 .range-sep {
   color: #cbd5e1;
-  font-weight: 600;
+  font-weight: 800;
+  font-size: 14px;
+}
+
+:global(.filter-select-dropdown) {
+  overflow: hidden;
+  border: 1px solid #e7edf5 !important;
+  border-radius: 14px !important;
+  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
+}
+
+:global(.filter-select-dropdown .el-select-dropdown__list) {
+  padding: 6px;
+}
+
+:global(.filter-select-dropdown .el-select-dropdown__item) {
+  margin: 2px 0;
+  border-radius: 10px;
+  color: #475569;
+  font-weight: 700;
+}
+
+:global(.filter-select-dropdown .el-select-dropdown__item.hover),
+:global(.filter-select-dropdown .el-select-dropdown__item:hover) {
+  background: #fff3e8;
+  color: #ff6a00;
+}
+
+:global(.filter-select-dropdown .el-select-dropdown__item.selected) {
+  background: #ff6a00;
+  color: #ffffff;
 }
 
 .filter-footer {
-  padding-top: 20px;
+  padding-top: 16px;
 }
 
 .quick-tags {
   display: flex;
   align-items: center;
-  gap: 12px;
-  font-size: 14px;
+  gap: 10px;
+  font-size: 13px;
   color: #64748b;
+  font-weight: 700;
 }
 
 .quick-tags button {
-  padding: 6px 16px;
-  border: 1px solid #e2e8f0;
-  border-radius: 999px;
-  background: #ffffff;
-  color: #475569;
-  font-size: 13px;
+  padding: 6px 14px;
+  border: 1px solid #f1f5f9;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 800;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .quick-tags button:hover {
-  border-color: #1477ff;
-  color: #1477ff;
-  background: #f0f7ff;
+  background: #ffffff;
+  border-color: #ff6a00;
+  color: #ff6a00;
+  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.1);
 }
 
 .quick-tags button.active {
-  background: #1477ff;
-  border-color: #1477ff;
+  background: #ff6a00;
+  border-color: #ff6a00;
   color: #ffffff;
+  box-shadow: 0 8px 20px rgba(255, 106, 0, 0.2);
 }
 
 /* 列表头部 */
@@ -898,6 +1544,9 @@ function uniqueOptions(values: string[]) {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+  gap: 16px;
+  min-width: 0;
+  flex-wrap: wrap;
   margin-top: 10px;
 }
 
@@ -912,7 +1561,7 @@ function uniqueOptions(values: string[]) {
   margin: 0;
   font-size: 12px;
   font-weight: 900;
-  color: #1477ff;
+  color: #ff6a00;
   text-transform: uppercase;
   letter-spacing: 1px;
 }
@@ -921,6 +1570,21 @@ function uniqueOptions(values: string[]) {
   display: flex;
   align-items: center;
   gap: 16px;
+  min-width: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.list-actions :deep(.el-radio-button__inner) {
+  border-radius: 8px;
+  border: 1px solid #eef1f5;
+  margin-left: 8px;
+}
+
+.list-actions :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+  background-color: #ff6a00;
+  border-color: #ff6a00;
+  box-shadow: -1px 0 0 0 #ff6a00;
 }
 
 /* 增强版卡片 v2 */
@@ -1070,7 +1734,7 @@ function uniqueOptions(values: string[]) {
 }
 
 .highlight {
-  color: #1477ff !important;
+  color: #ff6a00 !important;
 }
 
 .time-text, .skins-text {
@@ -1123,7 +1787,7 @@ function uniqueOptions(values: string[]) {
   height: 40px;
   border: none;
   border-radius: 10px;
-  background: #1477ff;
+  background: #ff6a00;
   color: #ffffff;
   font-size: 14px;
   font-weight: 800;
@@ -1132,7 +1796,7 @@ function uniqueOptions(values: string[]) {
 }
 
 .rent-btn:hover {
-  background: #0d5fd4;
+  background: #e55d00;
 }
 
 @media (max-width: 1200px) {