diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
index 9e14372..dd4da62 100644
--- a/frontend/src/layouts/AppLayout.vue
+++ b/frontend/src/layouts/AppLayout.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
 import {
   Bell,
   CirclePlus,
   House,
   Search,
   Shop,
+  SwitchButton,
   Tickets,
   UserFilled,
   Wallet,
 } from "@element-plus/icons-vue";
+import { useSessionStore } from "@/stores/session";
+
+const session = useSessionStore();
+const router = useRouter();
 
 const navItems = [
   { label: "首页", to: "/", icon: House },
@@ -16,6 +23,14 @@ const navItems = [
   { label: "我的订单", to: "/orders", icon: Tickets },
   { label: "钱包", to: "/wallet", icon: Wallet },
 ];
+
+const showUserDropdown = ref(false);
+
+function handleLogout() {
+  session.logout();
+  showUserDropdown.value = false;
+  router.replace("/");
+}
 </script>
 
 <template>
@@ -44,14 +59,79 @@ const navItems = [
       </div>
 
       <div class="pc-user-actions">
-        <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>
-        </RouterLink>
-        <RouterLink class="pc-post-link" to="/seller/listings/create">
+        <!-- 未登录：显示登录/注册按钮 -->
+        <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>
+          </RouterLink>
+        </template>
+
+        <!-- 已登录：显示用户头像+昵称 + 下拉菜单 -->
+        <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"
+            >
+              <span class="pc-avatar-chip">
+                <img
+                  v-if="session.avatarUrl"
+                  :src="session.avatarUrl"
+                  alt=""
+                  class="pc-avatar-img"
+                />
+                <span v-else class="pc-avatar-text">{{ session.avatarText }}</span>
+              </span>
+              <span class="pc-user-name">{{ session.displayName }}</span>
+            </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>
+            </Transition>
+          </div>
+        </template>
+
+        <!-- 未登录时发布按钮放在外面 -->
+        <RouterLink v-if="!session.isLoggedIn" class="pc-post-link" to="/login">
           <el-icon><CirclePlus /></el-icon>
           <span>发布账号</span>
         </RouterLink>
@@ -63,3 +143,310 @@ const navItems = [
     </main>
   </div>
 </template>
+
+<style scoped>
+/* ========== 顶部栏 ========== */
+.pc-app-shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: #f5f6f8;
+}
+
+.pc-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: 56px;
+  padding: 0 24px;
+  background: #fff;
+  border-bottom: 1px solid #eef1f5;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+}
+
+/* ========== 品牌 ========== */
+.pc-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  flex-shrink: 0;
+}
+
+.pc-brand-mark {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border-radius: 8px;
+  background: #1477ff;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.pc-brand-text {
+  font-size: 16px;
+  font-weight: 800;
+  color: #17233d;
+  white-space: nowrap;
+}
+
+/* ========== 导航 ========== */
+.pc-nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 16px;
+}
+
+.pc-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  color: #5a6577;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 0.15s, color 0.15s;
+}
+
+.pc-nav-link:hover,
+.pc-nav-link.router-link-active {
+  background: #f0f5ff;
+  color: #1477ff;
+}
+
+/* ========== 搜索 ========== */
+.pc-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  padding: 0 12px;
+  height: 36px;
+  border-radius: 10px;
+  background: #f4f6f8;
+  max-width: 280px;
+  flex: 0 1 280px;
+}
+
+.pc-search input {
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #17233d;
+  font-size: 13px;
+  width: 100%;
+}
+
+.pc-search input::placeholder {
+  color: #a0aab6;
+}
+
+.pc-search .el-icon {
+  color: #a0aab6;
+  flex-shrink: 0;
+}
+
+/* ========== 用户操作区 ========== */
+.pc-user-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 12px;
+  flex-shrink: 0;
+}
+
+.pc-icon-link {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border-radius: 10px;
+  color: #6b7a90;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.pc-icon-link:hover {
+  background: #f0f5ff;
+  color: #1477ff;
+}
+
+.pc-login-link {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 14px;
+  border-radius: 10px;
+  background: #1477ff;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.pc-login-link:hover {
+  background: #0d5fd4;
+}
+
+.pc-post-link {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 14px;
+  border-radius: 10px;
+  background: #ff6a00;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.pc-post-link:hover {
+  background: #e55d00;
+}
+
+/* ========== 已登录 - 用户块 ========== */
+.pc-user-block {
+  position: relative;
+}
+
+.pc-user-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px 4px 4px;
+  border: none;
+  border-radius: 10px;
+  background: #f4f6f8;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.pc-user-trigger:hover {
+  background: #eaeff5;
+}
+
+.pc-avatar-chip {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #1477ff;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 800;
+  flex-shrink: 0;
+}
+
+.pc-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pc-avatar-text {
+  line-height: 1;
+}
+
+.pc-user-name {
+  max-width: 100px;
+  overflow: hidden;
+  color: #17233d;
+  font-size: 13px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ========== 下拉菜单 ========== */
+.pc-user-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 200;
+  min-width: 180px;
+  padding: 6px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid #eef1f5;
+  box-shadow: 0 8px 24px rgba(23, 35, 61, 0.12);
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 9px 12px;
+  border: none;
+  border-radius: 8px;
+  background: none;
+  color: #3d4e63;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.dropdown-item:hover {
+  background: #f0f5ff;
+  color: #1477ff;
+}
+
+.dropdown-item .el-icon {
+  color: #8b9cb5;
+  flex-shrink: 0;
+}
+
+.dropdown-item:hover .el-icon {
+  color: #1477ff;
+}
+
+.dropdown-item.logout {
+  color: #e74c3c;
+}
+
+.dropdown-item.logout .el-icon {
+  color: #e74c3c;
+}
+
+.dropdown-item.logout:hover {
+  background: #fef0ef;
+}
+
+.dropdown-divider {
+  height: 1px;
+  margin: 4px 8px;
+  background: #eef1f5;
+}
+
+/* 下拉动画 */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+/* ========== 主体 ---------- */
+.pc-main {
+  flex: 1;
+  padding: 20px 24px;
+}
+</style>
diff --git a/frontend/src/stores/session.ts b/frontend/src/stores/session.ts
index e551ec6..14b5071 100644
--- a/frontend/src/stores/session.ts
+++ b/frontend/src/stores/session.ts
@@ -1,67 +1,80 @@
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
 
-import { fetchMe, loginWithSms, updateMe, type AuthUser } from '@/api/auth'
+import { fetchMe, loginWithSms, updateMe, type AuthUser } from "@/api/auth";
 
-export const useSessionStore = defineStore('session', {
+export const useSessionStore = defineStore("session", {
   state: () => ({
-    token: localStorage.getItem('access_token') || '',
-    refreshToken: localStorage.getItem('refresh_token') || '',
-    userId: Number(localStorage.getItem('user_id') || 0),
-    phone: localStorage.getItem('phone') || '',
-    nickname: localStorage.getItem('nickname') || '',
-    avatarUrl: localStorage.getItem('avatar_url') || '',
-    realnameStatus: localStorage.getItem('realname_status') || 'unknown',
+    token: localStorage.getItem("access_token") || "",
+    refreshToken: localStorage.getItem("refresh_token") || "",
+    userId: Number(localStorage.getItem("user_id") || 0),
+    phone: localStorage.getItem("phone") || "",
+    nickname: localStorage.getItem("nickname") || "",
+    avatarUrl: localStorage.getItem("avatar_url") || "",
+    realnameStatus: localStorage.getItem("realname_status") || "unknown",
   }),
+  getters: {
+    isLoggedIn: (state) => Boolean(state.token),
+    displayName: (state) =>
+      state.nickname ||
+      (state.phone
+        ? `用户${state.phone.slice(-6)}`
+        : `用户${state.userId || 0}`),
+    avatarText: (state) => (state.nickname || state.phone || "U").slice(0, 1),
+  },
   actions: {
     async login(phone: string, code: string) {
-      const result = await loginWithSms(phone, code)
-      this.applySession(result.user, result.tokens.access_token, result.tokens.refresh_token)
-      return result
+      const result = await loginWithSms(phone, code);
+      this.applySession(
+        result.user,
+        result.tokens.access_token,
+        result.tokens.refresh_token
+      );
+      return result;
     },
     async loadMe() {
-      const user = await fetchMe()
-      this.applyUser(user)
-      return user
+      const user = await fetchMe();
+      this.applyUser(user);
+      return user;
     },
     async updateProfile(payload: { nickname: string; avatar_url: string }) {
-      const user = await updateMe(payload)
-      this.applyUser(user)
-      return user
+      const user = await updateMe(payload);
+      this.applyUser(user);
+      return user;
     },
     logout() {
-      this.token = ''
-      this.refreshToken = ''
-      this.userId = 0
-      this.phone = ''
-      this.realnameStatus = 'unknown'
-      localStorage.removeItem('access_token')
-      localStorage.removeItem('refresh_token')
-      localStorage.removeItem('user_id')
-      localStorage.removeItem('phone')
-      localStorage.removeItem('nickname')
-      localStorage.removeItem('avatar_url')
-      localStorage.removeItem('realname_status')
+      this.token = "";
+      this.refreshToken = "";
+      this.userId = 0;
+      this.phone = "";
+      this.realnameStatus = "unknown";
+      localStorage.removeItem("access_token");
+      localStorage.removeItem("refresh_token");
+      localStorage.removeItem("user_id");
+      localStorage.removeItem("phone");
+      localStorage.removeItem("nickname");
+      localStorage.removeItem("avatar_url");
+      localStorage.removeItem("realname_status");
     },
     applySession(user: AuthUser, accessToken: string, refreshToken: string) {
-      this.token = accessToken
-      this.refreshToken = refreshToken
-      this.userId = user.id
-      localStorage.setItem('access_token', accessToken)
-      localStorage.setItem('refresh_token', refreshToken)
-      localStorage.setItem('user_id', String(user.id))
-      this.applyUser(user)
+      this.token = accessToken;
+      this.refreshToken = refreshToken;
+      this.userId = user.id;
+      localStorage.setItem("access_token", accessToken);
+      localStorage.setItem("refresh_token", refreshToken);
+      localStorage.setItem("user_id", String(user.id));
+      this.applyUser(user);
     },
     applyUser(user: AuthUser) {
-      this.userId = user.id
-      localStorage.setItem('user_id', String(user.id))
-      this.phone = user.phone
-      localStorage.setItem('phone', user.phone)
-      this.nickname = user.nickname
-      localStorage.setItem('nickname', user.nickname)
-      this.avatarUrl = user.avatar_url
-      localStorage.setItem('avatar_url', user.avatar_url)
-      this.realnameStatus = user.realname_status
-      localStorage.setItem('realname_status', user.realname_status)
+      this.userId = user.id;
+      localStorage.setItem("user_id", String(user.id));
+      this.phone = user.phone;
+      localStorage.setItem("phone", user.phone);
+      this.nickname = user.nickname;
+      localStorage.setItem("nickname", user.nickname);
+      this.avatarUrl = user.avatar_url;
+      localStorage.setItem("avatar_url", user.avatar_url);
+      this.realnameStatus = user.realname_status;
+      localStorage.setItem("realname_status", user.realname_status);
     },
   },
-})
+});
diff --git a/frontend/src/views/public/ListingsView.vue b/frontend/src/views/public/ListingsView.vue
index e2f36d0..e554b87 100644
--- a/frontend/src/views/public/ListingsView.vue
+++ b/frontend/src/views/public/ListingsView.vue
@@ -1,181 +1,694 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from "vue";
-import { Refresh, Search } from "@element-plus/icons-vue";
 
+import {
+  emptyListingPublishOptions,
+  type ListingPublishOptions,
+} from "@/api/listingOptions";
 import { fetchListings, type Listing } from "@/api/listings";
+import {
+  defaultHomeAnnouncements,
+  defaultHomeBanners,
+  fetchMobileHomeConfig,
+  type HomeBannerSlide,
+} from "@/api/homeConfig";
+import {
+  assetRegions,
+  formatHafCoinM,
+  getCoinM,
+  getCoinWan,
+  getListingChips,
+  getListingDisplayPrice,
+  getListingSubtitle,
+  getListingTitle,
+  getLoginMethod,
+  getResourceQuantity,
+  getServerRegion,
+  getSkinGroup,
+  hasAcceleratedSaleRatio,
+  hasGiftResources,
+  readAssetNumber,
+  readAssetString,
+} from "@/views/mobile/listingDisplay";
 import { listingStatusLabel } from "@/utils/statusLabels";
 
+/* ------------------------------------------------------------------ */
+/*  数据加载                                                            */
+/* ------------------------------------------------------------------ */
 const loading = ref(false);
+const loadFailed = ref(false);
 const listings = ref<Listing[]>([]);
-const sortBy = ref("recommended");
-const filters = reactive({
-  keyword: "",
-  region: "",
-  platform: "",
-  minCoin: undefined as number | undefined,
-  maxPrice: undefined as number | undefined,
+const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions);
+const announcements = ref<string[]>(defaultHomeAnnouncements);
+const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners);
+
+onMounted(() => {
+  loadListings();
+  loadHomeConfig();
 });
 
-const regionOptions = computed(() =>
-  uniqueOptions(listings.value.map((item) => item.server_region))
-);
-const platformOptions = computed(() =>
-  uniqueOptions(listings.value.map((item) => item.login_platform))
-);
-const filteredListings = computed(() => {
-  const keyword = filters.keyword.trim().toLowerCase();
-  const result = listings.value.filter((item) => {
-    const matchKeyword =
-      !keyword ||
-      [item.title, item.description, item.rank_level, item.server_region]
-        .filter(Boolean)
-        .some((value) => String(value).toLowerCase().includes(keyword));
-    const matchRegion =
-      !filters.region || item.server_region === filters.region;
-    const matchPlatform =
-      !filters.platform || item.login_platform === filters.platform;
-    const matchCoin =
-      !filters.minCoin || item.haf_coin_amount >= filters.minCoin;
-    const matchPrice =
-      !filters.maxPrice || listingPrice(item) <= filters.maxPrice;
-    return (
-      matchKeyword && matchRegion && matchPlatform && matchCoin && matchPrice
-    );
-  });
-
-  return [...result].sort((a, b) => {
-    if (sortBy.value === "price-asc") return listingPrice(a) - listingPrice(b);
-    if (sortBy.value === "coin-desc")
-      return b.haf_coin_amount - a.haf_coin_amount;
-    if (sortBy.value === "deposit-asc")
-      return a.deposit_amount - b.deposit_amount;
-    return (
-      b.haf_coin_amount - a.haf_coin_amount || listingPrice(a) - listingPrice(b)
-    );
-  });
-});
-
-onMounted(loadListings);
-
 async function loadListings() {
   loading.value = true;
+  loadFailed.value = false;
   try {
     listings.value = await fetchListings();
+  } catch {
+    loadFailed.value = true;
   } finally {
     loading.value = false;
   }
 }
 
-function resetFilters() {
-  filters.keyword = "";
-  filters.region = "";
-  filters.platform = "";
-  filters.minCoin = undefined;
-  filters.maxPrice = undefined;
-  sortBy.value = "recommended";
+async function loadHomeConfig() {
+  try {
+    const config = await fetchMobileHomeConfig();
+    announcements.value = config.announcements;
+    bannerSlides.value = config.banners;
+    publishOptions.value = config.publish_options;
+  } catch {
+    announcements.value = defaultHomeAnnouncements;
+    bannerSlides.value = defaultHomeBanners;
+    publishOptions.value = emptyListingPublishOptions;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  排序                                                                */
+/* ------------------------------------------------------------------ */
+const sortBy = ref("comprehensive");
+
+const sortOptions = [
+  { key: "comprehensive", label: "综合排序" },
+  { key: "published", label: "发布时间" },
+  { key: "priceAsc", label: "价格最低" },
+  { key: "priceDesc", label: "价格最高" },
+];
+
+const activeSortLabel = computed(
+  () => sortOptions.find((o) => o.key === sortBy.value)?.label || "综合排序"
+);
+
+function selectSort(key: string) {
+  sortBy.value = key;
+  sortOpen.value = false;
+}
+
+/* ------------------------------------------------------------------ */
+/*  筛选 — 复用移动端 FilterSection 体系                                  */
+/* ------------------------------------------------------------------ */
+type SelectedFilters = Record<string, string[]>;
+type RangeFilters = Record<string, { min: string; max: string }>;
+type RangePresets = Record<
+  string,
+  Array<{ label: string; min: string; max: string }>
+>;
+
+const selectedFilters = ref<SelectedFilters>({});
+const rangeFilters = ref<RangeFilters>({});
+const searchValue = ref("");
+const sortOpen = ref(false);
+const filterOpen = ref(false);
+
+const rangePresets: RangePresets = {
+  coin: [
+    { label: "50-100", min: "50", max: "100" },
+    { label: "100-200", min: "100", max: "200" },
+    { label: "200-300", min: "200", max: "300" },
+    { label: "300-500", min: "300", max: "500" },
+    { label: "500以上", min: "500", max: "" },
+  ],
+  resource_awmAmmo: [
+    { label: "0-20", min: "0", max: "20" },
+    { label: "20-50", min: "20", max: "50" },
+    { label: "50-100", min: "50", max: "100" },
+    { label: "100-200", min: "100", max: "200" },
+    { label: "200以上", min: "200", max: "" },
+  ],
+};
+
+const serverFilterOptions = computed(() =>
+  uniqueOptions(
+    publishOptions.value.server_options
+      .map((item) => item.trim())
+      .filter(Boolean)
+  )
+);
+
+const loginMethodFilterOptions = computed(() =>
+  uniqueOptions(
+    publishOptions.value.login_method_options
+      .map((item) => item.trim())
+      .filter(Boolean)
+  )
+);
+
+type FilterSection =
+  | {
+      key: string;
+      title: string;
+      type: "range";
+      unit?: string;
+      minPlaceholder?: string;
+      maxPlaceholder?: string;
+    }
+  | { key: string; title: string; type: "chips"; options: string[] };
+
+const filterSections = computed<FilterSection[]>(() => [
+  {
+    key: "price",
+    title: "价格区间",
+    type: "range",
+    unit: "元",
+    minPlaceholder: "最低价",
+    maxPlaceholder: "最高价",
+  },
+  {
+    key: "coin",
+    title: "哈夫币数量",
+    type: "range",
+    unit: "M",
+    minPlaceholder: "最低",
+    maxPlaceholder: "最高",
+  },
+  {
+    key: "server",
+    title: "区服",
+    type: "chips",
+    options: serverFilterOptions.value,
+  },
+  {
+    key: "login",
+    title: "上号方式",
+    type: "chips",
+    options: loginMethodFilterOptions.value,
+  },
+  {
+    key: "insurance",
+    title: "保险",
+    type: "chips",
+    options: publishOptions.value.insurance_options,
+  },
+  {
+    key: "stamina",
+    title: "体力",
+    type: "chips",
+    options: publishOptions.value.level_options,
+  },
+  {
+    key: "load",
+    title: "负重",
+    type: "chips",
+    options: publishOptions.value.level_options,
+  },
+  ...publishOptions.value.quantity_items.map((item) => ({
+    key: `resource_${item.key}`,
+    title: item.label,
+    type: "range" as const,
+    unit: parseQuantityUnit(item.price),
+    minPlaceholder: "最低",
+    maxPlaceholder: "最高",
+  })),
+  ...publishOptions.value.skin_groups.map((group) => ({
+    key: group.key,
+    title: group.title,
+    type: "chips" as const,
+    options: group.options,
+  })),
+  {
+    key: "secretKd",
+    title: "绝密KD",
+    type: "range",
+    minPlaceholder: "最低",
+    maxPlaceholder: "最高",
+  },
+  {
+    key: "rank",
+    title: "段位",
+    type: "chips",
+    options: publishOptions.value.rank_options,
+  },
+  {
+    key: "deposit",
+    title: "押金",
+    type: "range",
+    unit: "元",
+    minPlaceholder: "最低",
+    maxPlaceholder: "最高",
+  },
+]);
+
+/* 筛选交互 */
+const activeFilterSection = ref("price");
+const filterContentRef = ref<HTMLElement | null>(null);
+const filterSectionRefs = new Map<string, HTMLElement>();
+const filterTabRefs = new Map<string, HTMLElement>();
+
+function toggleChip(sectionKey: string, value: string) {
+  const selected = selectedFilters.value[sectionKey] || [];
+  const next = selected.includes(value)
+    ? selected.filter((item) => item !== value)
+    : [...selected, value];
+  selectedFilters.value = { ...selectedFilters.value, [sectionKey]: next };
+}
+
+function updateRange(sectionKey: string, side: "min" | "max", value: string) {
+  const current = rangeFilters.value[sectionKey] || { min: "", max: "" };
+  rangeFilters.value = {
+    ...rangeFilters.value,
+    [sectionKey]: { ...current, [side]: value },
+  };
+}
+
+function applyRangePreset(sectionKey: string, min: string, max: string) {
+  rangeFilters.value = {
+    ...rangeFilters.value,
+    [sectionKey]: { min, max },
+  };
+}
+
+function isRangePresetActive(sectionKey: string, min: string, max: string) {
+  const range = rangeFilters.value[sectionKey];
+  return range?.min === min && range?.max === max;
+}
+
+function isSkinGroupKey(key: string) {
+  return publishOptions.value.skin_groups.some((group) => group.key === key);
+}
+
+function setFilterSectionRef(key: string, el: Element | null) {
+  if (el instanceof HTMLElement) filterSectionRefs.set(key, el);
+  else filterSectionRefs.delete(key);
+}
+
+function setFilterTabRef(key: string, el: Element | null) {
+  if (el instanceof HTMLElement) filterTabRefs.set(key, el);
+  else filterTabRefs.delete(key);
+}
+
+function scrollToFilterSection(key: string) {
+  const container = filterContentRef.value;
+  const target = filterSectionRefs.get(key);
+  if (!container || !target) return;
+  activeFilterSection.value = key;
+  container.scrollTo({
+    top: Math.max(target.offsetTop - 8, 0),
+    behavior: "smooth",
+  });
+}
+
+function handleFilterScroll() {
+  const container = filterContentRef.value;
+  if (!container) return;
+  const anchorTop = container.scrollTop + 16;
+  let activeKey = filterSections.value[0]?.key || "";
+  for (const section of filterSections.value) {
+    const el = filterSectionRefs.get(section.key);
+    if (el && el.offsetTop <= anchorTop) activeKey = section.key;
+  }
+  if (activeKey && activeKey !== activeFilterSection.value) {
+    activeFilterSection.value = activeKey;
+  }
+}
+
+function toggleSortPanel() {
+  sortOpen.value = !sortOpen.value;
+}
+
+function clearFilters() {
+  selectedFilters.value = {};
+  rangeFilters.value = {};
+  searchValue.value = "";
+}
+
+/* ------------------------------------------------------------------ */
+/*  筛选 + 排序后的列表                                                  */
+/* ------------------------------------------------------------------ */
+const activeFilterCount = computed(() => {
+  const chipCount = Object.values(selectedFilters.value).reduce(
+    (sum, values) => sum + values.length,
+    0
+  );
+  const rangeCount = Object.values(rangeFilters.value).filter(
+    (range) => range.min || range.max
+  ).length;
+  return chipCount + rangeCount;
+});
+
+const filteredListings = computed(() => {
+  const keyword = searchValue.value.trim().toLowerCase();
+  const filtered = listings.value.filter((item) => {
+    if (!matchesFilters(item)) return false;
+    if (!keyword) return true;
+    return searchText(item).includes(keyword);
+  });
+  return sortListings(filtered);
+});
+
+function matchesFilters(item: Listing) {
+  const chipOk = Object.entries(selectedFilters.value).every(
+    ([key, values]) => {
+      if (!values.length) return true;
+      if (key === "server") return values.includes(getServerRegion(item));
+      if (key === "login") return values.includes(getLoginMethod(item));
+      if (key === "insurance")
+        return values.includes(readAssetString(item, "season_insurance"));
+      if (key === "stamina")
+        return values.includes(readAssetString(item, "stamina_level"));
+      if (key === "load")
+        return values.includes(readAssetString(item, "load_level"));
+      if (key === "rank") return values.includes(item.rank_level);
+      if (isSkinGroupKey(key)) {
+        return getSkinGroup(item, key).some((skin) => values.includes(skin));
+      }
+      return true;
+    }
+  );
+  if (!chipOk) return false;
+
+  return Object.entries(rangeFilters.value).every(([key, range]) => {
+    if (!range.min && !range.max) return true;
+    let value = 0;
+    if (key === "price") value = getListingDisplayPrice(item);
+    if (key === "coin") value = getCoinM(item);
+    if (key === "secretKd") value = readAssetNumber(item, "secret_kd");
+    if (key === "deposit") value = Number(item.deposit_amount || 0);
+    if (key.startsWith("resource_")) {
+      value = getResourceQuantity(item, key.replace("resource_", ""));
+    }
+    return inRange(value, range);
+  });
+}
+
+function inRange(value: number, range: { min: string; max: string }) {
+  const min = range.min === "" ? undefined : Number(range.min);
+  const max = range.max === "" ? undefined : Number(range.max);
+  if (min !== undefined && Number.isFinite(min) && value < min) return false;
+  if (max !== undefined && Number.isFinite(max) && value > max) return false;
+  return true;
+}
+
+function searchText(item: Listing) {
+  return [
+    item.title,
+    item.description,
+    getServerRegion(item),
+    getLoginMethod(item),
+    item.rank_level,
+    readAssetString(item, "season_insurance"),
+    readAssetString(item, "stamina_level"),
+    readAssetString(item, "load_level"),
+    formatHafCoinM(getCoinWan(item)),
+    assetRegions(item).join(" "),
+    ...publishOptions.value.skin_groups.map((group) =>
+      getSkinGroup(item, group.key).join(" ")
+    ),
+  ]
+    .join(" ")
+    .toLowerCase();
+}
+
+function sortListings(items: Listing[]) {
+  const sorted = [...items];
+  if (sortBy.value === "comprehensive") return sorted;
+  if (sortBy.value === "priceAsc") {
+    return sorted.sort(
+      (a, b) => getListingDisplayPrice(a) - getListingDisplayPrice(b)
+    );
+  }
+  if (sortBy.value === "priceDesc") {
+    return sorted.sort(
+      (a, b) => getListingDisplayPrice(b) - getListingDisplayPrice(a)
+    );
+  }
+  return sorted.sort((a, b) => {
+    const bTime = Date.parse(b.published_at || b.created_at || "") || 0;
+    const aTime = Date.parse(a.published_at || a.created_at || "") || 0;
+    return bTime - aTime || b.id - a.id;
+  });
 }
 
 function uniqueOptions(values: string[]) {
-  return [...new Set(values.filter(Boolean))];
+  return [...new Set(values.map((item) => item.trim()).filter(Boolean))];
 }
 
-function listingPrice(item: Listing) {
-  return Number(item.price_daily || item.price_hourly || 0);
+function parseQuantityUnit(price: string) {
+  const unit = price.split("/")[1]?.trim();
+  return unit || undefined;
 }
 </script>
 
 <template>
-  <section class="pc-listings page">
-    <div class="anti-fraud-strip compact">
+  <section class="pc-listings">
+    <!-- 防骗提示 -->
+    <div class="fraud-tip">
+      <span class="fraud-dot"></span>
       <span
-        >防骗提示：只在平台内沟通、下单和确认归还，谨防冒充客服与低价私单。</span
+        v-for="(text, idx) in announcements"
+        :key="idx"
+        class="fraud-text"
+        >{{ text }}</span
       >
     </div>
 
-    <div class="page-header-row listings-header">
-      <div>
-        <p class="eyebrow">Account Market</p>
-        <h1>租号大厅</h1>
-        <p>参考大锤商行 PC 信息密度，支持高级筛选、排序和卡片式资源浏览。</p>
-      </div>
-      <RouterLink class="pc-post-link large" to="/seller/listings/create"
-        >账号发布</RouterLink
-      >
+    <!-- 页头 -->
+    <div class="listings-header">
+      <h1>租号大厅</h1>
+      <span class="result-count">
+        <strong>{{ filteredListings.length }}</strong> 个可租账号
+      </span>
     </div>
 
-    <section class="advanced-filter-card">
-      <div class="filter-title">
-        <strong>高级筛选</strong>
-        <span>共 {{ filteredListings.length }} 个可租账号</span>
-      </div>
-      <el-form label-position="top" class="pc-filter-grid">
-        <el-form-item label="关键词">
-          <el-input
-            v-model="filters.keyword"
-            placeholder="标题 / 段位 / 区服"
-            :prefix-icon="Search"
-            clearable
+    <!-- 搜索 + 排序 + 筛选入口 -->
+    <div class="toolbar">
+      <div class="search-box">
+        <svg class="search-icon" viewBox="0 0 20 20" fill="currentColor">
+          <path
+            fill-rule="evenodd"
+            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+            clip-rule="evenodd"
           />
-        </el-form-item>
-        <el-form-item label="区服">
-          <el-select v-model="filters.region" placeholder="全部区服" clearable>
-            <el-option
-              v-for="item in regionOptions"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="登录平台">
-          <el-select
-            v-model="filters.platform"
-            placeholder="全部平台"
-            clearable
+        </svg>
+        <input v-model="searchValue" placeholder="搜区服 / 段位 / 哈夫币数量" />
+      </div>
+
+      <button
+        type="button"
+        class="toolbar-btn sort-btn"
+        @click="toggleSortPanel"
+      >
+        <span>{{ activeSortLabel }}</span>
+        <svg
+          :class="{ rotated: sortOpen }"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          width="14"
+          height="14"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class="toolbar-btn filter-btn"
+        @click="filterOpen = !filterOpen"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
+          <path
+            fill-rule="evenodd"
+            d="M3 3a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-.293.707L12 10.414V15a1 1 0 01-.553.894l-2 1A1 1 0 018 16v-5.586L3.293 5.707A1 1 0 013 5V3z"
+            clip-rule="evenodd"
+          />
+        </svg>
+        <span>筛选</span>
+        <em v-if="activeFilterCount">{{ activeFilterCount }}</em>
+      </button>
+    </div>
+
+    <!-- 排序下拉 -->
+    <Transition name="sort-panel">
+      <div v-if="sortOpen" class="sort-panel">
+        <button
+          v-for="option in sortOptions"
+          :key="option.key"
+          type="button"
+          :class="{ active: sortBy === option.key }"
+          @click="selectSort(option.key)"
+        >
+          <span>{{ option.label }}</span>
+          <svg
+            v-if="sortBy === option.key"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            width="16"
+            height="16"
           >
-            <el-option
-              v-for="item in platformOptions"
-              :key="item"
-              :label="item"
-              :value="item"
+            <path
+              fill-rule="evenodd"
+              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+              clip-rule="evenodd"
             />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="最低哈夫币">
-          <el-input-number
-            v-model="filters.minCoin"
-            :min="0"
-            :step="10000"
-            placeholder="不限"
-            class="full-control"
-          />
-        </el-form-item>
-        <el-form-item label="最高价格">
-          <el-input-number
-            v-model="filters.maxPrice"
-            :min="0"
-            :step="1"
-            placeholder="不限"
-            class="full-control"
-          />
-        </el-form-item>
-      </el-form>
-      <div class="sort-toolbar">
-        <el-radio-group v-model="sortBy">
-          <el-radio-button label="recommended">综合推荐</el-radio-button>
-          <el-radio-button label="price-asc">价格最低</el-radio-button>
-          <el-radio-button label="coin-desc">哈夫币最多</el-radio-button>
-          <el-radio-button label="deposit-asc">押金最低</el-radio-button>
-        </el-radio-group>
-        <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+          </svg>
+        </button>
       </div>
-    </section>
+    </Transition>
 
-    <el-empty
-      v-if="!loading && filteredListings.length === 0"
-      description="暂无符合条件的租号"
-    />
-    <div v-else v-loading="loading" class="pc-resource-list">
+    <!-- ================== 筛选侧栏 ================== -->
+    <Transition name="filter-sidebar">
+      <aside v-if="filterOpen" class="filter-sidebar">
+        <header class="filter-sidebar-header">
+          <h2>筛选</h2>
+          <button
+            type="button"
+            class="filter-close-btn"
+            @click="filterOpen = false"
+          >
+            ✕
+          </button>
+        </header>
+
+        <div class="filter-sidebar-body">
+          <nav class="filter-tabs">
+            <button
+              v-for="section in filterSections"
+              :key="section.key"
+              :ref="(el) => setFilterTabRef(section.key, el as Element | null)"
+              type="button"
+              :class="{ active: activeFilterSection === section.key }"
+              @click="scrollToFilterSection(section.key)"
+            >
+              {{ section.title }}
+            </button>
+          </nav>
+
+          <section
+            ref="filterContentRef"
+            class="filter-content"
+            @scroll.passive="handleFilterScroll"
+          >
+            <div
+              v-for="section in filterSections"
+              :key="section.key"
+              :ref="(el) => setFilterSectionRef(section.key, el as Element | null)"
+              class="filter-block"
+            >
+              <h3>{{ section.title }}</h3>
+              <p
+                v-if="section.type === 'range' && section.unit"
+                class="filter-unit"
+              >
+                单位：{{ section.unit }}
+              </p>
+
+              <template v-if="section.type === 'range'">
+                <div class="range-editor">
+                  <input
+                    :value="rangeFilters[section.key]?.min || ''"
+                    type="number"
+                    inputmode="decimal"
+                    :placeholder="section.minPlaceholder || '最低'"
+                    @input="
+                      updateRange(
+                        section.key,
+                        'min',
+                        ($event.target as HTMLInputElement).value
+                      )
+                    "
+                  />
+                  <span class="range-sep">—</span>
+                  <input
+                    :value="rangeFilters[section.key]?.max || ''"
+                    type="number"
+                    inputmode="decimal"
+                    :placeholder="section.maxPlaceholder || '最高'"
+                    @input="
+                      updateRange(
+                        section.key,
+                        'max',
+                        ($event.target as HTMLInputElement).value
+                      )
+                    "
+                  />
+                </div>
+                <div
+                  v-if="rangePresets[section.key]?.length"
+                  class="chip-grid range-preset-grid"
+                >
+                  <button
+                    v-for="preset in rangePresets[section.key]"
+                    :key="`${section.key}-${preset.label}`"
+                    type="button"
+                    :class="{
+                      active: isRangePresetActive(
+                        section.key,
+                        preset.min,
+                        preset.max
+                      ),
+                    }"
+                    @click="
+                      applyRangePreset(section.key, preset.min, preset.max)
+                    "
+                  >
+                    {{ preset.label }}
+                  </button>
+                </div>
+              </template>
+
+              <div v-else class="chip-grid">
+                <button
+                  v-for="option in section.options"
+                  :key="`${section.key}-${option}`"
+                  type="button"
+                  :class="{
+                    active: selectedFilters[section.key]?.includes(option),
+                  }"
+                  @click="toggleChip(section.key, option)"
+                >
+                  {{ option }}
+                </button>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <footer class="filter-sidebar-footer">
+          <button type="button" class="reset-btn" @click="clearFilters">
+            重置
+          </button>
+          <button type="button" class="confirm-btn" @click="filterOpen = false">
+            确定
+          </button>
+        </footer>
+      </aside>
+    </Transition>
+
+    <!-- 筛选遮罩 -->
+    <Transition name="overlay">
+      <div
+        v-if="filterOpen"
+        class="filter-overlay"
+        @click="filterOpen = false"
+      ></div>
+    </Transition>
+
+    <!-- 加载 / 错误 / 空状态 -->
+    <div v-if="loading" class="state-loading">正在加载优质账号...</div>
+    <div v-else-if="loadFailed" class="state-error">
+      接口暂不可用，请稍后刷新。
+    </div>
+    <div v-else-if="filteredListings.length === 0" class="state-empty">
+      <p>没有符合条件的账号</p>
+      <button type="button" class="reset-btn" @click="clearFilters">
+        重置条件
+      </button>
+    </div>
+
+    <!-- 列表 -->
+    <div v-else class="pc-resource-list">
       <RouterLink
         v-for="item in filteredListings"
         :key="item.id"
@@ -186,33 +699,681 @@ function listingPrice(item: Listing) {
           <img
             v-if="item.cover_url"
             :src="item.cover_url"
-            :alt="item.title"
+            :alt="getListingTitle(item)"
           />
-          <span v-else>HFB</span>
+          <span v-else>图</span>
+          <div
+            v-if="hasGiftResources(item) || hasAcceleratedSaleRatio(item)"
+            class="cover-labels"
+          >
+            <em v-if="hasGiftResources(item)">有赠送</em>
+            <em v-if="hasAcceleratedSaleRatio(item)">特惠</em>
+          </div>
         </div>
         <div class="resource-main">
-          <div class="resource-title-line">
-            <strong>{{ item.title }}</strong>
-            <em>{{ item.status === "published" ? "可租" : listingStatusLabel(item.status) }}</em>
+          <h2 class="card-title">{{ getListingTitle(item) }}</h2>
+          <p class="card-subtitle">{{ getListingSubtitle(item) }}</p>
+          <div class="resource-badge-row">
+            <span class="trust-badge">押金秒退</span>
+            <span class="server-badge">{{ getServerRegion(item) }}</span>
+            <span v-if="getLoginMethod(item)" class="server-badge">{{
+              getLoginMethod(item)
+            }}</span>
           </div>
-          <p>
-            {{
-              item.description || "号主暂未填写说明，可下单后按平台流程交接。"
-            }}
-          </p>
-          <div class="resource-tags">
-            <span>{{ item.server_region }}</span>
-            <span>{{ item.login_platform }}</span>
-            <span>{{ item.rank_level || "未填写段位" }}</span>
-            <span>哈夫币 {{ item.haf_coin_amount }}</span>
+          <div class="card-chip-row">
+            <span
+              v-for="chip in getListingChips(item)"
+              :key="`${item.id}-${chip.label}`"
+              >{{ chip.label }}:{{ chip.value }}</span
+            >
           </div>
         </div>
         <div class="resource-price-box">
-          <span>价格</span>
-          <strong>¥{{ listingPrice(item).toFixed(2) }}</strong>
-          <em>押金 ¥{{ item.deposit_amount }}</em>
+          <strong>¥{{ getListingDisplayPrice(item) }}</strong>
+          <span class="rent-sub">押金¥{{ item.deposit_amount }}</span>
         </div>
       </RouterLink>
     </div>
   </section>
 </template>
+
+<style scoped>
+/* ================================================================== */
+/*  页面容器                                                            */
+/* ================================================================== */
+.pc-listings {
+  position: relative;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px 40px;
+  color: #1a202c;
+}
+
+/* ================================================================== */
+/*  防骗提示                                                            */
+/* ================================================================== */
+.fraud-tip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  margin-bottom: 12px;
+  border-radius: 10px;
+  background: #fffdf0;
+  border: 1px solid #f5e6a3;
+  font-size: 13px;
+  color: #8a6d1b;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.fraud-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #f5a623;
+  flex-shrink: 0;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.fraud-text + .fraud-text::before {
+  content: "  |  ";
+  color: #d4c47a;
+}
+
+/* ================================================================== */
+/*  页头                                                                */
+/* ================================================================== */
+.listings-header {
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
+.listings-header h1 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 900;
+  color: #17233d;
+}
+
+.result-count {
+  color: #8b9cb5;
+  font-size: 14px;
+}
+
+.result-count strong {
+  color: #1477ff;
+  font-weight: 800;
+}
+
+/* ================================================================== */
+/*  工具栏：搜索 + 排序 + 筛选                                           */
+/* ================================================================== */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 1 360px;
+  height: 38px;
+  padding: 0 12px;
+  border-radius: 10px;
+  background: #f4f6f8;
+  border: 1px solid transparent;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.search-box:focus-within {
+  border-color: #1477ff;
+  box-shadow: 0 0 0 3px rgba(20, 119, 255, 0.1);
+  background: #fff;
+}
+
+.search-icon {
+  width: 16px;
+  height: 16px;
+  color: #a0aab6;
+  flex-shrink: 0;
+}
+
+.search-box input {
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #17233d;
+  font-size: 13px;
+  width: 100%;
+}
+
+.search-box input::placeholder {
+  color: #a0aab6;
+}
+
+.toolbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 14px;
+  height: 38px;
+  border: 1px solid #e1e7ef;
+  border-radius: 10px;
+  background: #fff;
+  color: #3d4e63;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.toolbar-btn:hover {
+  border-color: #1477ff;
+}
+
+.sort-btn svg {
+  transition: transform 0.2s;
+}
+
+.sort-btn svg.rotated {
+  transform: rotate(180deg);
+}
+
+.filter-btn {
+  position: relative;
+}
+
+.filter-btn em {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  display: grid;
+  width: 18px;
+  height: 18px;
+  place-items: center;
+  border-radius: 50%;
+  background: #1477ff;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 800;
+  font-style: normal;
+}
+
+/* ================================================================== */
+/*  排序面板                                                            */
+/* ================================================================== */
+.sort-panel {
+  display: flex;
+  gap: 4px;
+  padding: 8px 0;
+  margin-bottom: 12px;
+  border-radius: 10px;
+  background: #fff;
+  border: 1px solid #e1e7ef;
+}
+
+.sort-panel button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  background: none;
+  color: #5a6577;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+
+.sort-panel button:hover {
+  background: #f0f5ff;
+}
+
+.sort-panel button.active {
+  background: #1477ff;
+  color: #fff;
+}
+
+.sort-panel button.active svg {
+  color: #fff;
+}
+
+.sort-panel svg {
+  color: #1477ff;
+}
+
+.sort-panel-enter-active,
+.sort-panel-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.sort-panel-enter-from,
+.sort-panel-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+/* ================================================================== */
+/*  筛选侧栏                                                            */
+/* ================================================================== */
+.filter-sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 300;
+  display: grid;
+  grid-template-rows: 52px minmax(0, 1fr) 60px;
+  width: min(480px, 90vw);
+  height: 100vh;
+  background: #fff;
+  border-left: 1px solid #eef1f5;
+  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);
+}
+
+.filter-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 18px;
+  border-bottom: 1px solid #eef1f5;
+}
+
+.filter-sidebar-header h2 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 800;
+  color: #17233d;
+}
+
+.filter-close-btn {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border: none;
+  border-radius: 10px;
+  background: #f4f6f8;
+  color: #64748b;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.filter-sidebar-body {
+  display: grid;
+  grid-template-columns: 110px minmax(0, 1fr);
+  min-height: 0;
+}
+
+/* ---- 左侧 Tab 导航 ---- */
+.filter-tabs {
+  overflow-y: auto;
+  background: #f6f7f9;
+  border-right: 1px solid #eef1f5;
+}
+
+.filter-tabs button {
+  display: block;
+  width: 100%;
+  min-height: 44px;
+  border: none;
+  background: transparent;
+  color: #3d4e63;
+  padding: 8px 12px;
+  text-align: left;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+
+.filter-tabs button:hover {
+  background: #edf1f7;
+}
+
+.filter-tabs button.active {
+  background: #fff;
+  color: #ff7a00;
+  font-weight: 800;
+}
+
+/* ---- 右侧内容 ---- */
+.filter-content {
+  overflow-y: auto;
+  padding: 20px 18px 32px;
+}
+
+.filter-block {
+  scroll-margin-top: 8px;
+}
+
+.filter-block + .filter-block {
+  margin-top: 28px;
+}
+
+.filter-block h3 {
+  margin: 0 0 12px;
+  font-size: 16px;
+  font-weight: 800;
+  color: #17233d;
+}
+
+.filter-unit {
+  margin: -6px 0 10px;
+  color: #8a96a8;
+  font-size: 12px;
+}
+
+/* ---- Range 编辑器 ---- */
+.range-editor {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+}
+
+.range-sep {
+  color: #cfd6df;
+  font-size: 14px;
+}
+
+.range-editor input {
+  height: 40px;
+  border: 1px solid #e1e7ef;
+  border-radius: 8px;
+  background: #fff;
+  color: #17233d;
+  padding: 0 12px;
+  text-align: center;
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.range-editor input:focus {
+  border-color: #1477ff;
+  box-shadow: 0 0 0 3px rgba(20, 119, 255, 0.08);
+}
+
+/* ---- Chip 网格 ---- */
+.chip-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chip-grid button {
+  min-width: 0;
+  padding: 7px 14px;
+  border: none;
+  border-radius: 8px;
+  background: #f4f5f7;
+  color: #2d3748;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
+}
+
+.chip-grid button:hover {
+  background: #eaeff5;
+}
+
+.chip-grid button.active {
+  background: #fff3d1;
+  color: #cc7a00;
+  font-weight: 800;
+  box-shadow: inset 0 0 0 1px #ffd15c;
+}
+
+.range-preset-grid {
+  margin-top: 10px;
+}
+
+/* ---- Footer ---- */
+.filter-sidebar-footer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 18px;
+  border-top: 1px solid #eef1f5;
+}
+
+.filter-sidebar-footer button {
+  height: 42px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.reset-btn {
+  border: 1px solid #e1e7ef;
+  background: #fff;
+  color: #2d3748;
+}
+
+.confirm-btn {
+  border: none;
+  background: #1477ff;
+  color: #fff;
+}
+
+.confirm-btn:hover {
+  background: #0d5fd4;
+}
+
+/* ---- 侧栏动画 ---- */
+.filter-sidebar-enter-active,
+.filter-sidebar-leave-active {
+  transition: transform 0.25s ease;
+}
+
+.filter-sidebar-enter-from,
+.filter-sidebar-leave-to {
+  transform: translateX(100%);
+}
+
+/* ---- 遮罩 ---- */
+.filter-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 299;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.overlay-enter-active,
+.overlay-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.overlay-enter-from,
+.overlay-leave-to {
+  opacity: 0;
+}
+
+/* ================================================================== */
+/*  状态提示                                                            */
+/* ================================================================== */
+.state-loading,
+.state-error,
+.state-empty {
+  text-align: center;
+  padding: 48px 20px;
+  color: #8b9cb5;
+  font-size: 14px;
+}
+
+.state-empty button {
+  margin-top: 12px;
+}
+
+/* ================================================================== */
+/*  列表卡片                                                            */
+/* ================================================================== */
+.pc-resource-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 14px;
+}
+
+.resource-card {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr) auto;
+  gap: 14px;
+  padding: 14px;
+  border-radius: 14px;
+  background: #fff;
+  border: 1px solid #eef1f5;
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow 0.15s, border-color 0.15s;
+}
+
+.resource-card:hover {
+  border-color: #c5d5ea;
+  box-shadow: 0 4px 16px rgba(23, 35, 61, 0.08);
+}
+
+.resource-cover {
+  position: relative;
+  width: 120px;
+  height: 90px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #f0f5ff;
+}
+
+.resource-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.resource-cover span {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  color: #1477ff;
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.cover-labels {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  display: flex;
+  gap: 4px;
+}
+
+.cover-labels em {
+  font-style: normal;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #fff;
+  background: #ff6a00;
+}
+
+.cover-labels em + em {
+  background: #e74c3c;
+}
+
+.resource-main {
+  min-width: 0;
+}
+
+.card-title {
+  margin: 0 0 4px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #17233d;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-subtitle {
+  margin: 0 0 8px;
+  font-size: 13px;
+  color: #1477ff;
+  font-weight: 600;
+}
+
+.resource-badge-row {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 6px;
+}
+
+.trust-badge,
+.server-badge {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.trust-badge {
+  background: #e8faf0;
+  color: #0d9a5f;
+}
+
+.server-badge {
+  background: #f0f5ff;
+  color: #3d6fcc;
+}
+
+.card-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.card-chip-row span {
+  color: #8b9cb5;
+  font-size: 11px;
+}
+
+.resource-price-box {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 2px;
+  white-space: nowrap;
+}
+
+.resource-price-box strong {
+  font-size: 20px;
+  font-weight: 900;
+  color: #e74c3c;
+}
+
+.rent-sub {
+  color: #8b9cb5;
+  font-size: 11px;
+}
+</style>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index bfd16fb..f824ba8 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -26,7 +26,8 @@ export default defineConfig({
       '221329.cc.cd',
       "d4aa-77-93-89-84.ngrok-free.app",
       "frp-bus.com",
-      "www.u499731.nyat.app"
+      "www.u499731.nyat.app",
+      "fn.221329.xyz"
     ],
   },
 });