From 47180413f484c8f826fb58f9f180901ab2db2451 Mon Sep 17 00:00:00 2001
From: yml <yml@yml.com>
Date: Fri, 22 May 2026 19:11:08 +0800
Subject: [PATCH] [Snow Team] frontend-pc: auto-commit work

---
 frontend/src/layouts/AppLayout.vue            |  69 +-
 frontend/src/styles/base.css                  | 643 +++++++++++++++++-
 frontend/src/views/public/HomeView.vue        | 119 +++-
 .../src/views/public/ListingDetailView.vue    | 161 +++--
 frontend/src/views/public/ListingsView.vue    | 216 +++++-
 5 files changed, 1088 insertions(+), 120 deletions(-)

diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
index 6e416a2..9e14372 100644
--- a/frontend/src/layouts/AppLayout.vue
+++ b/frontend/src/layouts/AppLayout.vue
@@ -1,33 +1,64 @@
 <script setup lang="ts">
-import { Bell, House, Key, Phone, Shop, Tickets, UserFilled, Wallet } from '@element-plus/icons-vue'
+import {
+  Bell,
+  CirclePlus,
+  House,
+  Search,
+  Shop,
+  Tickets,
+  UserFilled,
+  Wallet,
+} from "@element-plus/icons-vue";
 
 const navItems = [
-  { label: '首页', to: '/', icon: House },
-  { label: '租号', to: '/listings', icon: Shop },
-  { label: '订单', to: '/orders', icon: Tickets },
-  { label: '钱包', to: '/wallet', icon: Wallet },
-  { label: '通知', to: '/notifications', icon: Bell },
-  { label: '实名', to: '/realname', icon: UserFilled },
-  { label: '后台', to: '/admin/login', icon: Key },
-  { label: '登录', to: '/login', icon: Phone },
-]
+  { label: "首页", to: "/", icon: House },
+  { label: "租号大厅", to: "/listings", icon: Shop },
+  { label: "我的订单", to: "/orders", icon: Tickets },
+  { label: "钱包", to: "/wallet", icon: Wallet },
+];
 </script>
 
 <template>
-  <div class="app-shell">
-    <aside class="sidebar">
-      <RouterLink class="brand" to="/">
-        <span class="brand-mark">H</span>
-        <span>哈夫币租号</span>
+  <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>
       </RouterLink>
-      <nav class="nav">
-        <RouterLink v-for="item in navItems" :key="item.to" class="nav-link" :to="item.to">
+
+      <nav class="pc-nav">
+        <RouterLink
+          v-for="item in navItems"
+          :key="item.to"
+          class="pc-nav-link"
+          :to="item.to"
+        >
           <el-icon><component :is="item.icon" /></el-icon>
           <span>{{ item.label }}</span>
         </RouterLink>
       </nav>
-    </aside>
-    <main class="main">
+
+      <div class="pc-search">
+        <el-icon><Search /></el-icon>
+        <input placeholder="搜索区服 / 段位 / 哈夫币数量" />
+      </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">
+          <el-icon><CirclePlus /></el-icon>
+          <span>发布账号</span>
+        </RouterLink>
+      </div>
+    </header>
+
+    <main class="pc-main">
       <slot />
     </main>
   </div>
diff --git a/frontend/src/styles/base.css b/frontend/src/styles/base.css
index 4fd8b94..4ed42e6 100644
--- a/frontend/src/styles/base.css
+++ b/frontend/src/styles/base.css
@@ -1,9 +1,8 @@
 :root {
   color: #1f2933;
   background: #f6f8fb;
-  font-family:
-    Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
+  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
 }
@@ -170,8 +169,11 @@ a {
   display: grid;
   min-height: 100vh;
   place-items: center;
-  background:
-    linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(17, 24, 39, 0.08)),
+  background: linear-gradient(
+      135deg,
+      rgba(15, 118, 110, 0.12),
+      rgba(17, 24, 39, 0.08)
+    ),
     #f5f7fb;
   padding: 24px;
 }
@@ -182,7 +184,7 @@ a {
   border-radius: 8px;
   background: #ffffff;
   padding: 28px;
-  box-shadow: 0 20px 60px rgba(17, 24, 39, 0.10);
+  box-shadow: 0 20px 60px rgba(17, 24, 39, 0.1);
 }
 
 .admin-login-brand {
@@ -646,6 +648,635 @@ h1 {
   gap: 8px;
   justify-content: flex-end;
 }
+/* PC public marketplace */
+.pc-app-shell {
+  min-height: 100vh;
+  background: radial-gradient(
+      circle at 12% 0%,
+      rgba(255, 200, 87, 0.24),
+      transparent 32%
+    ),
+    linear-gradient(180deg, #fff9e8 0, #f6f8fb 300px, #f6f8fb 100%);
+}
+
+.pc-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: auto auto minmax(280px, 440px) auto;
+  align-items: center;
+  gap: 24px;
+  min-height: 72px;
+  border-bottom: 1px solid rgba(231, 183, 69, 0.32);
+  background: rgba(255, 255, 255, 0.92);
+  padding: 0 clamp(24px, 5vw, 72px);
+  backdrop-filter: blur(14px);
+}
+
+.pc-brand,
+.pc-nav,
+.pc-user-actions,
+.pc-search,
+.pc-login-link,
+.pc-post-link,
+.pc-icon-link {
+  display: flex;
+  align-items: center;
+}
+
+.pc-brand {
+  gap: 10px;
+  font-weight: 800;
+}
+
+.pc-brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #f59e0b, #111827);
+  color: #ffffff;
+  font-size: 13px;
+  letter-spacing: 0.5px;
+  box-shadow: 0 14px 28px rgba(245, 158, 11, 0.26);
+}
+
+.pc-brand-text {
+  color: #111827;
+  font-size: 18px;
+}
+
+.pc-nav {
+  gap: 6px;
+}
+
+.pc-nav-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 40px;
+  border-radius: 999px;
+  padding: 0 14px;
+  color: #4b5563;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.pc-nav-link.router-link-active,
+.pc-nav-link:hover {
+  background: #fff3c4;
+  color: #92400e;
+}
+
+.pc-search {
+  gap: 10px;
+  height: 42px;
+  border: 1px solid #f1d38b;
+  border-radius: 999px;
+  background: #fffaf0;
+  padding: 0 16px;
+  color: #b45309;
+}
+
+.pc-search input {
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #111827;
+  font-size: 14px;
+}
+
+.pc-user-actions {
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.pc-icon-link,
+.pc-login-link,
+.pc-post-link {
+  justify-content: center;
+  min-height: 40px;
+  border-radius: 999px;
+  font-weight: 700;
+}
+
+.pc-icon-link {
+  width: 40px;
+  border: 1px solid #e5e7eb;
+  background: #ffffff;
+  color: #4b5563;
+}
+
+.pc-login-link {
+  gap: 6px;
+  border: 1px solid #e5e7eb;
+  background: #ffffff;
+  padding: 0 14px;
+  color: #111827;
+}
+
+.pc-post-link {
+  gap: 6px;
+  background: linear-gradient(135deg, #f59e0b, #f97316);
+  padding: 0 16px;
+  color: #ffffff;
+  box-shadow: 0 12px 24px rgba(249, 115, 22, 0.22);
+}
+
+.pc-post-link.large {
+  min-height: 44px;
+  padding: 0 22px;
+}
+
+.pc-main {
+  width: min(1240px, calc(100% - 48px));
+  margin: 0 auto;
+  padding: 28px 0 56px;
+}
+
+.anti-fraud-strip {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+  border: 1px solid #fde68a;
+  border-radius: 14px;
+  background: linear-gradient(90deg, #fffbeb, #fef3c7);
+  padding: 10px 16px;
+  color: #92400e;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.anti-fraud-strip.compact {
+  margin-bottom: 22px;
+}
+
+.pc-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 24px;
+  margin-top: 18px;
+}
+
+.pc-hero-content,
+.pc-action-card,
+.advanced-filter-card,
+.resource-card,
+.feature-card,
+.pc-stat-card {
+  border: 1px solid rgba(229, 231, 235, 0.9);
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.08);
+}
+
+.pc-hero-content {
+  min-height: 360px;
+  border-radius: 28px;
+  background: linear-gradient(
+      135deg,
+      rgba(17, 24, 39, 0.82),
+      rgba(120, 53, 15, 0.72)
+    ),
+    radial-gradient(circle at 82% 20%, rgba(251, 191, 36, 0.9), transparent 24%),
+    #111827;
+  padding: 48px;
+  color: #ffffff;
+  overflow: hidden;
+}
+
+.pc-hero-content .eyebrow {
+  color: #fbbf24;
+}
+
+.pc-hero h1 {
+  max-width: 620px;
+  font-size: clamp(40px, 5vw, 64px);
+  letter-spacing: -2px;
+}
+
+.pc-hero-desc {
+  max-width: 560px;
+  margin: 18px 0 0;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 18px;
+  line-height: 1.8;
+}
+
+.pc-hero-actions,
+.hero-tags,
+.sort-toolbar,
+.resource-tags,
+.resource-title-line {
+  display: flex;
+  align-items: center;
+}
+
+.pc-hero-actions {
+  gap: 14px;
+  margin-top: 32px;
+}
+
+.primary-cta,
+.secondary-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 46px;
+  border-radius: 999px;
+  padding: 0 22px;
+  font-weight: 800;
+}
+
+.primary-cta {
+  gap: 8px;
+  background: #fbbf24;
+  color: #111827;
+}
+
+.secondary-cta {
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  color: #ffffff;
+}
+
+.hero-tags {
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 34px;
+}
+
+.hero-tags span {
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 8px 12px;
+  color: #fde68a;
+  font-size: 13px;
+}
+
+.pc-action-card {
+  border-radius: 24px;
+  padding: 22px;
+}
+
+.pc-action-card h2 {
+  margin: 0 0 18px;
+  font-size: 20px;
+}
+
+.action-row {
+  display: grid;
+  grid-template-columns: 42px 1fr;
+  gap: 12px;
+  align-items: center;
+  border: 1px solid #edf0f4;
+  border-radius: 16px;
+  background: #ffffff;
+  padding: 14px;
+}
+
+.action-row + .action-row {
+  margin-top: 12px;
+}
+
+.action-row .el-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  background: #fff7ed;
+  color: #ea580c;
+  font-size: 20px;
+}
+
+.action-row strong,
+.action-row span {
+  display: block;
+}
+
+.action-row strong {
+  color: #111827;
+}
+
+.action-row span {
+  margin-top: 4px;
+  color: #6b7280;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.action-row.highlight {
+  border-color: #fbbf24;
+  background: #fffbeb;
+}
+
+.pc-stat-grid,
+.pc-feature-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.pc-stat-card,
+.feature-card {
+  border-radius: 20px;
+  padding: 20px;
+}
+
+.pc-stat-card span,
+.feature-card span {
+  color: #6b7280;
+  font-size: 13px;
+}
+
+.pc-stat-card strong,
+.feature-card strong {
+  display: block;
+  margin-top: 8px;
+  color: #111827;
+  font-size: 24px;
+}
+
+.pc-stat-card p {
+  margin: 8px 0 0;
+  color: #6b7280;
+}
+
+.feature-card .el-icon {
+  color: #f59e0b;
+  font-size: 24px;
+}
+
+.feature-card strong {
+  font-size: 18px;
+}
+
+.listings-header {
+  align-items: center;
+  margin-bottom: 18px;
+}
+
+.advanced-filter-card {
+  border-radius: 22px;
+  padding: 20px;
+}
+
+.filter-title,
+.sort-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.filter-title strong {
+  color: #111827;
+  font-size: 18px;
+}
+
+.filter-title span {
+  color: #6b7280;
+}
+
+.pc-filter-grid {
+  display: grid;
+  grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 16px;
+}
+
+.pc-filter-grid .el-form-item {
+  margin-bottom: 0;
+}
+
+.sort-toolbar {
+  margin-top: 16px;
+}
+
+.pc-resource-list {
+  display: grid;
+  gap: 14px;
+  margin-top: 18px;
+}
+
+.resource-card {
+  display: grid;
+  grid-template-columns: 150px minmax(0, 1fr) 150px;
+  gap: 18px;
+  align-items: center;
+  border-radius: 22px;
+  padding: 14px;
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.resource-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 22px 50px rgba(17, 24, 39, 0.12);
+}
+
+.resource-cover {
+  display: grid;
+  place-items: center;
+  height: 108px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #111827, #f59e0b);
+  color: #ffffff;
+  font-weight: 900;
+  overflow: hidden;
+}
+
+.resource-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.resource-title-line {
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.resource-title-line strong {
+  color: #111827;
+  font-size: 19px;
+}
+
+.resource-title-line em {
+  border-radius: 999px;
+  background: #dcfce7;
+  padding: 4px 10px;
+  color: #166534;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.resource-main p {
+  display: -webkit-box;
+  margin: 10px 0 0;
+  overflow: hidden;
+  color: #6b7280;
+  line-height: 1.6;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.resource-tags {
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.resource-tags span {
+  border-radius: 999px;
+  background: #f3f4f6;
+  padding: 5px 10px;
+  color: #4b5563;
+  font-size: 12px;
+}
+
+.resource-price-box {
+  border-left: 1px solid #edf0f4;
+  padding-left: 18px;
+  text-align: right;
+}
+
+.resource-price-box span,
+.resource-price-box em,
+.resource-price-box small {
+  display: block;
+  color: #6b7280;
+  font-style: normal;
+}
+
+.resource-price-box strong {
+  display: block;
+  margin: 4px 0;
+  color: #ef4444;
+  font-size: 28px;
+}
+
+.pc-detail-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 22px;
+}
+
+.pc-detail-main,
+.pc-order-card {
+  border: 1px solid rgba(229, 231, 235, 0.9);
+  border-radius: 24px;
+  background: #ffffff;
+  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.08);
+}
+
+.pc-detail-main {
+  overflow: hidden;
+}
+
+.detail-cover {
+  display: grid;
+  place-items: center;
+  height: 300px;
+  background: linear-gradient(135deg, #111827, #92400e 54%, #f59e0b);
+  color: #ffffff;
+  font-size: 28px;
+  font-weight: 900;
+  letter-spacing: 1px;
+}
+
+.detail-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.detail-title {
+  padding: 28px;
+}
+
+.pc-detail .detail-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 0;
+  padding: 0 28px 28px;
+}
+
+.pc-order-card {
+  position: sticky;
+  top: 96px;
+  align-self: start;
+  margin-top: 0;
+  padding: 24px;
+}
+
+.pc-order-card h2 {
+  margin: 0 0 8px;
+  font-size: 22px;
+}
+
+.order-safe-text {
+  margin: 0 0 18px;
+  color: #6b7280;
+  line-height: 1.7;
+}
+
+.order-total-box {
+  border-radius: 18px;
+  background: #fffbeb;
+  margin-bottom: 16px;
+  padding: 16px;
+}
+
+.order-total-box span,
+.order-total-box em {
+  display: block;
+  color: #92400e;
+  font-style: normal;
+}
+
+.order-total-box strong {
+  display: block;
+  margin: 4px 0;
+  color: #ef4444;
+  font-size: 30px;
+}
+
+@media (max-width: 1180px) {
+  .pc-topbar {
+    grid-template-columns: auto 1fr auto;
+  }
+
+  .pc-search {
+    display: none;
+  }
+
+  .pc-hero,
+  .pc-filter-grid,
+  .pc-detail-layout,
+  .pc-detail .detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .pc-order-card {
+    position: static;
+  }
+
+  .resource-card {
+    grid-template-columns: 120px minmax(0, 1fr);
+  }
+
+  .resource-price-box {
+    grid-column: 2;
+    border-left: 0;
+    border-top: 1px solid #edf0f4;
+    padding: 12px 0 0;
+    text-align: left;
+  }
+}
 
 @media (max-width: 1180px) {
   .admin-shell {
diff --git a/frontend/src/views/public/HomeView.vue b/frontend/src/views/public/HomeView.vue
index a764006..8993cae 100644
--- a/frontend/src/views/public/HomeView.vue
+++ b/frontend/src/views/public/HomeView.vue
@@ -1,23 +1,110 @@
+<script setup lang="ts">
+import {
+  ArrowRight,
+  CircleCheck,
+  Coin,
+  Iphone,
+  Lock,
+  Pointer,
+  Trophy,
+} from "@element-plus/icons-vue";
+
+const quickStats = [
+  { label: "在线账号", value: "128+", desc: "覆盖热门区服" },
+  { label: "最快交接", value: "3分钟", desc: "号主在线响应" },
+  { label: "押金托管", value: "平台担保", desc: "归还后释放" },
+];
+
+const categories = [
+  "烽火地带",
+  "全面战场",
+  "高哈夫币",
+  "高段位",
+  "低押金",
+  "可包夜",
+];
+</script>
+
 <template>
-  <section class="page">
-    <div class="page-header">
-      <p class="eyebrow">Delta Force Rental</p>
-      <h1>哈夫币租号平台</h1>
-      <p>先把账号发布、交接、订单、押金和仲裁链路打牢，再接真实支付和更复杂的风控。</p>
+  <section class="pc-home page">
+    <div class="anti-fraud-strip">
+      <el-icon><Lock /></el-icon>
+      <span
+        >防骗提示：哈夫币租号仅通过平台下单与托管押金，切勿私下转账、共享验证码或点击陌生链接。</span
+      >
     </div>
-    <div class="metric-grid">
-      <div class="metric-card">
-        <span>一期路线</span>
-        <strong>自研业务核心</strong>
+
+    <section class="pc-hero">
+      <div class="pc-hero-content">
+        <p class="eyebrow">Delta Force Account Rental</p>
+        <h1>三角洲行动账号租赁大厅</h1>
+        <p class="pc-hero-desc">
+          按区服、段位、哈夫币、价格快速筛选，平台担保交接，找号更省心。
+        </p>
+        <div class="pc-hero-actions">
+          <RouterLink class="primary-cta" to="/listings">
+            立即找号
+            <el-icon><ArrowRight /></el-icon>
+          </RouterLink>
+          <RouterLink class="secondary-cta" to="/seller/listings/create"
+            >我要发布账号</RouterLink
+          >
+        </div>
+        <div class="hero-tags">
+          <span v-for="item in categories" :key="item">{{ item }}</span>
+        </div>
       </div>
-      <div class="metric-card">
-        <span>交接模式</span>
-        <strong>号主手动交接</strong>
-      </div>
-      <div class="metric-card">
-        <span>资金模型</span>
-        <strong>先做账务</strong>
+
+      <aside class="pc-action-card">
+        <h2>快捷入口</h2>
+        <RouterLink class="action-row" to="/orders">
+          <el-icon><Pointer /></el-icon>
+          <div>
+            <strong>我租到的</strong>
+            <span>查看交接、租赁中与归还订单</span>
+          </div>
+        </RouterLink>
+        <RouterLink class="action-row" to="/seller/listings">
+          <el-icon><Trophy /></el-icon>
+          <div>
+            <strong>我租出的</strong>
+            <span>管理已发布账号与租客交接</span>
+          </div>
+        </RouterLink>
+        <RouterLink class="action-row highlight" to="/seller/listings/create">
+          <el-icon><Coin /></el-icon>
+          <div>
+            <strong>账号发布</strong>
+            <span>实名认证后即可上架出租</span>
+          </div>
+        </RouterLink>
+      </aside>
+    </section>
+
+    <div class="pc-stat-grid">
+      <div v-for="item in quickStats" :key="item.label" class="pc-stat-card">
+        <span>{{ item.label }}</span>
+        <strong>{{ item.value }}</strong>
+        <p>{{ item.desc }}</p>
       </div>
     </div>
+
+    <section class="pc-feature-row">
+      <div class="feature-card">
+        <el-icon><CircleCheck /></el-icon>
+        <strong>平台审核上架</strong>
+        <span>账号信息、截图与价格经过审核后展示</span>
+      </div>
+      <div class="feature-card">
+        <el-icon><Lock /></el-icon>
+        <strong>押金账务留痕</strong>
+        <span>订单、押金、仲裁记录全链路可追踪</span>
+      </div>
+      <div class="feature-card">
+        <el-icon><Iphone /></el-icon>
+        <strong>交接流程清晰</strong>
+        <span>号主提交说明，租客确认收号与归还</span>
+      </div>
+    </section>
   </section>
 </template>
diff --git a/frontend/src/views/public/ListingDetailView.vue b/frontend/src/views/public/ListingDetailView.vue
index 86a7c3f..8f842cc 100644
--- a/frontend/src/views/public/ListingDetailView.vue
+++ b/frontend/src/views/public/ListingDetailView.vue
@@ -1,87 +1,132 @@
 <script setup lang="ts">
-import { ElMessage } from 'element-plus'
-import { onMounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from "element-plus";
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
-import { fetchListing, type Listing } from '@/api/listings'
-import { createOrder } from '@/api/orders'
+import { fetchListing, type Listing } from "@/api/listings";
+import { createOrder } from "@/api/orders";
 
-const route = useRoute()
-const router = useRouter()
-const loading = ref(false)
-const ordering = ref(false)
-const rentHours = ref(1)
-const listing = ref<Listing | null>(null)
+const route = useRoute();
+const router = useRouter();
+const loading = ref(false);
+const ordering = ref(false);
+const rentHours = ref(1);
+const listing = ref<Listing | null>(null);
 
 onMounted(async () => {
-  loading.value = true
+  loading.value = true;
   try {
-    listing.value = await fetchListing(String(route.params.id))
+    listing.value = await fetchListing(String(route.params.id));
   } finally {
-    loading.value = false
+    loading.value = false;
   }
-})
+});
 
 async function handleCreateOrder() {
-  if (!listing.value) return
-  ordering.value = true
+  if (!listing.value) return;
+  ordering.value = true;
   try {
-    const order = await createOrder(listing.value.id, rentHours.value)
-    ElMessage.success('订单已创建，账号已锁定')
-    await router.push(`/orders/${order.id}`)
+    const order = await createOrder(listing.value.id, rentHours.value);
+    ElMessage.success("订单已创建，账号已锁定");
+    await router.push(`/orders/${order.id}`);
   } catch (error) {
-    ElMessage.error(readError(error, '下单失败'))
+    ElMessage.error(readError(error, "下单失败"));
   } finally {
-    ordering.value = false
+    ordering.value = false;
   }
 }
 
 function readError(error: unknown, fallback: string) {
-  if (typeof error === 'object' && error && 'response' in error) {
-    const response = (error as { response?: { data?: { message?: string } } }).response
-    return response?.data?.message || fallback
+  if (typeof error === "object" && error && "response" in error) {
+    const response = (error as { response?: { data?: { message?: string } } })
+      .response;
+    return response?.data?.message || fallback;
   }
-  return fallback
+  return fallback;
 }
 </script>
 
 <template>
-  <section class="page" v-loading="loading">
-    <div v-if="listing" class="page-header">
-      <p class="eyebrow">{{ listing.server_region }} / {{ listing.login_platform }}</p>
-      <h1>{{ listing.title }}</h1>
-      <p>{{ listing.description || '号主暂未填写详细说明。' }}</p>
+  <section class="pc-detail page" v-loading="loading">
+    <div class="anti-fraud-strip compact">
+      <span
+        >防骗提示：下单后请按平台交接流程确认收号与归还，不要私下交易。</span
+      >
     </div>
 
-    <div v-if="listing" class="detail-grid">
-      <div class="metric-card">
-        <span>哈夫币</span>
-        <strong>{{ listing.haf_coin_amount }}</strong>
-      </div>
-      <div class="metric-card">
-        <span>时租</span>
-        <strong>¥{{ listing.price_hourly }}</strong>
-      </div>
-      <div class="metric-card">
-        <span>押金</span>
-        <strong>¥{{ listing.deposit_amount }}</strong>
-      </div>
-      <div class="metric-card">
-        <span>租期</span>
-        <strong>{{ listing.min_rent_hours }}-{{ listing.max_rent_hours }} 小时</strong>
-      </div>
-    </div>
+    <div v-if="listing" class="pc-detail-layout">
+      <section class="pc-detail-main">
+        <div class="detail-cover">
+          <img
+            v-if="listing.screenshot_urls?.[0]"
+            :src="listing.screenshot_urls[0]"
+            :alt="listing.title"
+          />
+          <span v-else>HFB ACCOUNT</span>
+        </div>
+        <div class="page-header detail-title">
+          <p class="eyebrow">
+            {{ listing.server_region }} / {{ listing.login_platform }}
+          </p>
+          <h1>{{ listing.title }}</h1>
+          <p>{{ listing.description || "号主暂未填写详细说明。" }}</p>
+        </div>
 
-    <div v-if="listing" class="order-panel">
-      <el-form label-position="top">
-        <el-form-item label="租用时长">
-          <el-input-number v-model="rentHours" :min="listing.min_rent_hours" :max="listing.max_rent_hours" />
-        </el-form-item>
-        <p>
-          预计租金：¥{{ (listing.price_hourly * rentHours).toFixed(2) }}，押金：¥{{ listing.deposit_amount }}
+        <div class="detail-grid">
+          <div class="metric-card">
+            <span>哈夫币</span>
+            <strong>{{ listing.haf_coin_amount }}</strong>
+          </div>
+          <div class="metric-card">
+            <span>时租</span>
+            <strong>¥{{ listing.price_hourly }}</strong>
+          </div>
+          <div class="metric-card">
+            <span>日租</span>
+            <strong>¥{{ listing.price_daily }}</strong>
+          </div>
+          <div class="metric-card">
+            <span>押金</span>
+            <strong>¥{{ listing.deposit_amount }}</strong>
+          </div>
+        </div>
+      </section>
+
+      <aside class="order-panel pc-order-card">
+        <h2>立即租用</h2>
+        <p class="order-safe-text">
+          平台托管订单与押金，租期 {{ listing.min_rent_hours }}-{{
+            listing.max_rent_hours
+          }}
+          小时。
         </p>
-        <el-button type="primary" :loading="ordering" @click="handleCreateOrder">立即下单并锁定账号</el-button>
-      </el-form>
+        <el-form label-position="top">
+          <el-form-item label="租用时长">
+            <el-input-number
+              v-model="rentHours"
+              :min="listing.min_rent_hours"
+              :max="listing.max_rent_hours"
+              class="full-control"
+            />
+          </el-form-item>
+          <div class="order-total-box">
+            <span>预计租金</span>
+            <strong
+              >¥{{ (listing.price_hourly * rentHours).toFixed(2) }}</strong
+            >
+            <em>押金 ¥{{ listing.deposit_amount }}</em>
+          </div>
+          <el-button
+            type="warning"
+            size="large"
+            :loading="ordering"
+            class="full-control"
+            @click="handleCreateOrder"
+          >
+            立即下单并锁定账号
+          </el-button>
+        </el-form>
+      </aside>
     </div>
   </section>
 </template>
diff --git a/frontend/src/views/public/ListingsView.vue b/frontend/src/views/public/ListingsView.vue
index adb8012..b88383c 100644
--- a/frontend/src/views/public/ListingsView.vue
+++ b/frontend/src/views/public/ListingsView.vue
@@ -1,40 +1,214 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from "vue";
+import { Refresh, Search } from "@element-plus/icons-vue";
 
-import { fetchListings, type Listing } from '@/api/listings'
+import { fetchListings, type Listing } from "@/api/listings";
 
-const loading = ref(false)
-const listings = ref<Listing[]>([])
+const loading = 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,
+});
 
-onMounted(loadListings)
+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 || item.price_hourly <= filters.maxPrice;
+    return (
+      matchKeyword && matchRegion && matchPlatform && matchCoin && matchPrice
+    );
+  });
+
+  return [...result].sort((a, b) => {
+    if (sortBy.value === "price-asc") return a.price_hourly - b.price_hourly;
+    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 || a.price_hourly - b.price_hourly
+    );
+  });
+});
+
+onMounted(loadListings);
 
 async function loadListings() {
-  loading.value = true
+  loading.value = true;
   try {
-    listings.value = await fetchListings()
+    listings.value = await fetchListings();
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
+
+function resetFilters() {
+  filters.keyword = "";
+  filters.region = "";
+  filters.platform = "";
+  filters.minCoin = undefined;
+  filters.maxPrice = undefined;
+  sortBy.value = "recommended";
+}
+
+function uniqueOptions(values: string[]) {
+  return [...new Set(values.filter(Boolean))];
+}
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header">
-      <p class="eyebrow">Listings</p>
-      <h1>租号列表</h1>
-      <p>支持区服、平台、价格、押金、段位和哈夫币数量展示。</p>
+  <section class="pc-listings page">
+    <div class="anti-fraud-strip compact">
+      <span
+        >防骗提示：只在平台内沟通、下单和确认归还，谨防冒充客服与低价私单。</span
+      >
     </div>
 
-    <el-empty v-if="!loading && listings.length === 0" description="暂无已上架租号" />
-    <div v-else v-loading="loading" class="listing-grid">
-      <RouterLink v-for="item in listings" :key="item.id" class="listing-card" :to="`/listings/${item.id}`">
-        <span>{{ item.server_region }} / {{ item.login_platform }}</span>
-        <strong>{{ item.title }}</strong>
-        <p>{{ item.rank_level || '未填写段位' }} · 哈夫币 {{ item.haf_coin_amount }}</p>
-        <div class="listing-price">
-          <b>¥{{ item.price_hourly }}/小时</b>
+    <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>
+
+    <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
+          />
+        </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
+          >
+            <el-option
+              v-for="item in platformOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </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>
+      </div>
+    </section>
+
+    <el-empty
+      v-if="!loading && filteredListings.length === 0"
+      description="暂无符合条件的租号"
+    />
+    <div v-else v-loading="loading" class="pc-resource-list">
+      <RouterLink
+        v-for="item in filteredListings"
+        :key="item.id"
+        class="resource-card"
+        :to="`/listings/${item.id}`"
+      >
+        <div class="resource-cover">
+          <img
+            v-if="item.screenshot_urls?.[0]"
+            :src="item.screenshot_urls[0]"
+            :alt="item.title"
+          />
+          <span v-else>HFB</span>
+        </div>
+        <div class="resource-main">
+          <div class="resource-title-line">
+            <strong>{{ item.title }}</strong>
+            <em>{{ item.status === "published" ? "可租" : item.status }}</em>
+          </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>
+        </div>
+        <div class="resource-price-box">
+          <span>时租</span>
+          <strong>¥{{ item.price_hourly }}</strong>
           <em>押金 ¥{{ item.deposit_amount }}</em>
+          <small
+            >{{ item.min_rent_hours }}-{{ item.max_rent_hours }} 小时</small
+          >
         </div>
       </RouterLink>
     </div>