diff --git a/frontend/src/features/auth/api/auth.ts b/frontend/src/features/auth/api/auth.ts
new file mode 100644
index 0000000..15cdd65
--- /dev/null
+++ b/frontend/src/features/auth/api/auth.ts
@@ -0,0 +1,56 @@
+import { apiClient } from '@/shared/api/client'
+import type { ApiResponse } from '@/shared/types/types'
+import type { RealnameStatusValue, RiskStatus, UserStatus } from '@/types/status'
+
+export interface AuthUser {
+  id: number
+  phone: string
+  nickname: string
+  avatar_url: string
+  realname_status: RealnameStatusValue
+  risk_status: RiskStatus
+  credit_score: number
+  status: UserStatus
+}
+
+export interface TokenPair {
+  access_token: string
+  refresh_token: string
+  token_type: string
+  expires_in: number
+}
+
+export interface LoginData {
+  user: AuthUser
+  tokens: TokenPair
+}
+
+export async function sendSmsCode(phone: string) {
+  const { data } = await apiClient.post<ApiResponse<{ phone: string; expires_in: number }>>('/auth/sms/send', {
+    phone,
+  })
+  return data.data
+}
+
+export async function loginWithSms(phone: string, code: string) {
+  const { data } = await apiClient.post<ApiResponse<LoginData>>('/auth/sms/login', { phone, code })
+  return data.data
+}
+
+export async function fetchMe() {
+  const { data } = await apiClient.get<ApiResponse<AuthUser>>('/me')
+  return data.data
+}
+
+export async function updateMe(payload: Pick<AuthUser, 'nickname' | 'avatar_url'>) {
+  const { data } = await apiClient.put<ApiResponse<AuthUser>>('/me', payload)
+  return data.data
+}
+
+/** Manually refresh user token (for store to call on app init) */
+export async function refreshUserToken(refreshToken: string) {
+  const { data } = await apiClient.post<ApiResponse<TokenPair>>('/auth/refresh', {
+    refresh_token: refreshToken,
+  })
+  return data.data
+}
diff --git a/frontend/src/features/auth/api/notifications.ts b/frontend/src/features/auth/api/notifications.ts
new file mode 100644
index 0000000..91e3c57
--- /dev/null
+++ b/frontend/src/features/auth/api/notifications.ts
@@ -0,0 +1,27 @@
+import { apiClient } from './client'
+
+import type { ApiResponse, PaginatedResult } from './types'
+
+export interface NotificationItem {
+  id: number
+  user_id: number
+  type: string
+  title: string
+  content: string
+  biz_type: string
+  biz_id?: number
+  read_at?: string
+  created_at: string
+}
+
+export async function fetchNotifications(page = 1, pageSize = 20) {
+  const { data } = await apiClient.get<ApiResponse<PaginatedResult<NotificationItem>>>('/notifications', {
+    params: { page, page_size: pageSize },
+  })
+  return data.data
+}
+
+export async function markNotificationRead(id: number) {
+  const { data } = await apiClient.post<ApiResponse<{ read: boolean }>>(`/notifications/${id}/read`)
+  return data.data
+}
diff --git a/frontend/src/features/auth/api/realname.ts b/frontend/src/features/auth/api/realname.ts
new file mode 100644
index 0000000..8acc319
--- /dev/null
+++ b/frontend/src/features/auth/api/realname.ts
@@ -0,0 +1,26 @@
+import { apiClient } from '@/shared/api/client'
+import type { ApiResponse } from './types'
+import type { RealnameStatusValue } from '@/types/status'
+
+export interface RealnameStatus {
+  status: RealnameStatusValue
+  provider?: string
+  provider_order_no?: string
+  masked_name?: string
+  masked_id_no?: string
+  verified_at?: string
+  fail_reason?: string
+}
+
+export async function startRealname(name: string, idNo: string) {
+  const { data } = await apiClient.post<ApiResponse<RealnameStatus>>('/realname/start', {
+    name,
+    id_no: idNo,
+  })
+  return data.data
+}
+
+export async function getRealnameStatus() {
+  const { data } = await apiClient.get<ApiResponse<RealnameStatus>>('/realname/status')
+  return data.data
+}
diff --git a/frontend/src/features/auth/index.ts b/frontend/src/features/auth/index.ts
new file mode 100644
index 0000000..f4343d0
--- /dev/null
+++ b/frontend/src/features/auth/index.ts
@@ -0,0 +1,4 @@
+// Auth 模块统一导出
+export * from './api/auth'
+export * from './api/realname'
+export * from './api/notifications'
diff --git a/frontend/src/features/auth/views/LoginView.vue b/frontend/src/features/auth/views/LoginView.vue
new file mode 100644
index 0000000..8324578
--- /dev/null
+++ b/frontend/src/features/auth/views/LoginView.vue
@@ -0,0 +1,409 @@
+<script setup lang="ts">
+import { ElMessage } from "element-plus";
+import { ChatLineRound, Iphone } from "@element-plus/icons-vue";
+import { onUnmounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+
+import { sendSmsCode } from "@/api/auth";
+import { useSessionStore } from "@/stores/session";
+
+const router = useRouter();
+const session = useSessionStore();
+const loading = ref(false);
+const sending = ref(false);
+const countDown = ref(0);
+const form = reactive({
+  phone: "",
+  code: "",
+});
+
+let timer: ReturnType<typeof setInterval> | null = null;
+
+function startCountDown() {
+  countDown.value = 60;
+  timer = setInterval(() => {
+    countDown.value--;
+    if (countDown.value <= 0) {
+      clearInterval(timer!);
+      timer = null;
+    }
+  }, 1000);
+}
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+});
+
+async function handleSendCode() {
+  if (!form.phone.trim()) {
+    ElMessage.warning("请输入手机号");
+    return;
+  }
+  sending.value = true;
+  try {
+    await sendSmsCode(form.phone);
+    ElMessage.success("验证码已发送，请注意查收");
+    startCountDown();
+  } catch (error) {
+    ElMessage.error(readError(error, "验证码发送失败"));
+  } finally {
+    sending.value = false;
+  }
+}
+
+async function handleLogin() {
+  loading.value = true;
+  try {
+    await session.login(form.phone, form.code);
+    ElMessage.success("登录成功");
+    await router.push("/");
+  } catch (error) {
+    ElMessage.error(readError(error, "登录失败"));
+  } finally {
+    loading.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;
+  }
+  return fallback;
+}
+</script>
+
+<template>
+  <section class="login-shell">
+    <div class="login-card">
+      <div class="login-left">
+        <div class="brand-lockup">
+          <div class="brand-logo">锤</div>
+          <strong>大锤商行</strong>
+        </div>
+        <div class="login-hero">
+          <h2>安全租号<br />畅享游戏</h2>
+          <p>
+            高效、安全的哈夫币账号交易平台。<br />
+            7×24 小时智能订单系统随时为您服务。
+          </p>
+        </div>
+        <div class="login-footer">
+          <span>© 哈夫币租号平台</span>
+        </div>
+      </div>
+
+      <div class="login-right">
+        <div class="login-header">
+          <p class="eyebrow">SMS Login</p>
+          <h1>欢迎回来</h1>
+          <p class="subtitle">登录后即可发布或租赁账号</p>
+        </div>
+
+        <el-form class="user-form" label-position="top" @submit.prevent>
+          <el-form-item label="手机号">
+            <el-input
+              v-model="form.phone"
+              maxlength="11"
+              placeholder="请输入手机号"
+              size="large"
+              :prefix-icon="Iphone"
+            />
+          </el-form-item>
+
+          <el-form-item label="验证码">
+            <div class="user-code-row">
+              <el-input
+                v-model="form.code"
+                maxlength="6"
+                placeholder="6 位验证码"
+                size="large"
+                :prefix-icon="ChatLineRound"
+                @keyup.enter="handleLogin"
+              />
+              <el-button
+                size="large"
+                :disabled="countDown > 0 || sending"
+                :loading="sending"
+                @click="handleSendCode"
+              >
+                {{
+                  countDown > 0
+                    ? `${countDown}s`
+                    : sending
+                    ? "发送中"
+                    : "发送验证码"
+                }}
+              </el-button>
+            </div>
+          </el-form-item>
+
+          <el-button
+            class="user-login-btn"
+            type="primary"
+            size="large"
+            :loading="loading"
+            @click="handleLogin"
+          >
+            登录
+          </el-button>
+
+          <p class="login-notice">未收到验证码时，请稍后重试或联系客服处理</p>
+        </el-form>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.login-shell {
+  display: grid;
+  flex: 1;
+  place-items: center;
+  margin: -20px -24px;
+  padding: 32px 24px;
+}
+
+.login-card {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 1fr 420px;
+  width: min(940px, 100%);
+  min-height: 520px;
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(20px);
+  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.08),
+    0 1px 0 rgba(255, 255, 255, 0.6) inset;
+  overflow: hidden;
+}
+
+/* ========== 左侧品牌区 ========== */
+.login-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 40px 36px;
+  background: radial-gradient(
+      circle at 30% 20%,
+      rgba(20, 119, 255, 0.08),
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 80% 90%,
+      rgba(109, 40, 217, 0.06),
+      transparent 50%
+    ),
+    linear-gradient(160deg, rgba(20, 119, 255, 0.06), rgba(109, 40, 217, 0.03));
+}
+
+.brand-lockup {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.brand-logo {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #1477ff, #2f8dff);
+  box-shadow: 0 8px 24px rgba(20, 119, 255, 0.22);
+  color: #fff;
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.brand-lockup strong {
+  color: #0f172a;
+  font-size: 15px;
+  font-weight: 800;
+  letter-spacing: 0.3px;
+}
+
+.login-hero h2 {
+  margin: 0 0 14px;
+  color: #0f172a;
+  font-size: 28px;
+  font-weight: 800;
+  line-height: 1.25;
+}
+
+.login-hero p {
+  margin: 0;
+  color: #475569;
+  font-size: 14px;
+  line-height: 1.7;
+  max-width: 300px;
+}
+
+.login-footer span {
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+/* ========== 右侧表单区 ========== */
+.login-right {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 36px 32px;
+  background: rgba(255, 255, 255, 0.45);
+}
+
+.login-header {
+  margin-bottom: 24px;
+}
+
+.login-header .eyebrow {
+  margin: 0 0 8px;
+  color: #1477ff;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.login-header h1 {
+  margin: 0;
+  color: #0f172a;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.login-header .subtitle {
+  margin: 8px 0 0;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.user-form :deep(.el-form-item__label) {
+  color: #334155;
+  font-size: 13px;
+  font-weight: 600;
+  padding-bottom: 6px;
+}
+
+.user-form :deep(.el-input__wrapper) {
+  background: #ffffff;
+  box-shadow: 0 0 0 1px #e2e8f0 inset;
+  border-radius: 10px;
+  padding: 0 12px;
+  transition: box-shadow 0.2s, background 0.2s;
+}
+.user-form :deep(.el-input__wrapper:hover) {
+  background: #ffffff;
+}
+.user-form :deep(.el-input__wrapper.is-focus) {
+  background: #ffffff;
+  box-shadow: 0 0 0 1px rgba(20, 119, 255, 0.45) inset,
+    0 0 0 3px rgba(20, 119, 255, 0.08);
+}
+.user-form :deep(.el-input__inner) {
+  color: #0f172a;
+  font-size: 14px;
+  height: 44px;
+}
+.user-form :deep(.el-input__inner::placeholder) {
+  color: #94a3b8;
+}
+.user-form :deep(.el-input__prefix-inner) {
+  color: #94a3b8;
+}
+
+.user-code-row {
+  display: grid;
+  grid-template-columns: 1fr 120px;
+  gap: 10px;
+  width: 100%;
+}
+
+.user-code-row .el-button {
+  height: 46px;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  background: #ffffff;
+  border-color: #1477ff;
+  color: #1477ff;
+  box-shadow: none;
+  transition: background 0.2s, color 0.2s;
+}
+.user-code-row .el-button:hover:not(:disabled) {
+  background: #1477ff;
+  border-color: #1477ff;
+  color: #ffffff;
+}
+.user-code-row .el-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.user-login-btn {
+  width: 100%;
+  height: 46px;
+  border-radius: 10px;
+  font-size: 15px;
+  font-weight: 700;
+  margin-top: 8px;
+  letter-spacing: 0.5px;
+  background: linear-gradient(135deg, #1477ff, #2f8dff);
+  border: none;
+  box-shadow: 0 10px 28px rgba(20, 119, 255, 0.22);
+  transition: transform 0.15s, box-shadow 0.2s;
+}
+.user-login-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 14px 36px rgba(20, 119, 255, 0.28);
+}
+
+.login-notice {
+  margin: 18px 0 0;
+  color: #94a3b8;
+  font-size: 12px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+/* ========== 响应式 ========== */
+@media (max-width: 860px) {
+  .login-card {
+    grid-template-columns: 1fr;
+    max-width: 420px;
+  }
+  .login-left {
+    display: none;
+  }
+  .login-right {
+    padding: 32px 28px;
+  }
+  .login-shell {
+    padding: 24px 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .login-shell {
+    padding: 16px 12px;
+  }
+  .login-right {
+    padding: 24px 20px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .user-login-btn {
+    transition: none;
+  }
+}
+</style>
diff --git a/frontend/src/features/auth/views/MobileLoginView.vue b/frontend/src/features/auth/views/MobileLoginView.vue
new file mode 100644
index 0000000..9df2b56
--- /dev/null
+++ b/frontend/src/features/auth/views/MobileLoginView.vue
@@ -0,0 +1,343 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { RouterLink, useRoute, useRouter } from "vue-router";
+import { showToast, showDialog } from "vant";
+
+import { useSessionStore } from "@/stores/session";
+import { useSmsCountdown } from "@/composables/useSmsCountdown";
+
+const router = useRouter();
+const route = useRoute();
+const session = useSessionStore();
+const loading = ref(false);
+const agreed = ref(false);
+const form = reactive({
+  phone: "",
+  code: "",
+});
+
+const { countDown, sending, handleSendCode, readError } = useSmsCountdown();
+
+async function handleLogin() {
+  if (!agreed.value) {
+    showDialog({
+      title: "提示",
+      message: "请先阅读并同意用户协议和隐私政策",
+    });
+    return;
+  }
+
+  loading.value = true;
+  try {
+    await session.login(form.phone, form.code);
+    const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/m/profile";
+    await router.replace(redirect);
+  } catch {
+    showToast({ message: "登录失败，请检查手机号和验证码", icon: "cross" });
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <main class="mobile-login-shell">
+    <header class="page-header">
+      <button class="back-btn" type="button" @click="router.back()">
+        <van-icon name="arrow-left" :size="20" />
+      </button>
+    </header>
+
+    <section class="auth-body">
+      <div class="brand-lockup">
+        <div class="brand-logo">锤</div>
+        <strong>大锤商行</strong>
+      </div>
+
+      <div class="form-section">
+        <h1>登录</h1>
+
+        <label class="auth-input-row">
+          <input
+            v-model="form.phone"
+            type="tel"
+            maxlength="11"
+            placeholder="手机号"
+          />
+        </label>
+
+        <label class="auth-input-row code-row">
+          <input
+            v-model="form.code"
+            type="text"
+            inputmode="numeric"
+            maxlength="6"
+            placeholder="验证码"
+          />
+          <span class="code-action">
+            <van-button
+              size="small"
+              plain
+              :disabled="sending || countDown > 0"
+              :loading="sending"
+              class="code-btn"
+              @click="handleSendCode(form.phone)"
+            >
+              {{
+                countDown > 0
+                  ? `${countDown}s`
+                  : sending
+                  ? "发送中"
+                  : "发送验证码"
+              }}
+            </van-button>
+          </span>
+        </label>
+
+        <div class="assist-row">
+          <span>验证码登录</span>
+          <RouterLink to="/m/register">没有账号？<b>立即注册</b></RouterLink>
+        </div>
+
+        <div class="agreement-row">
+          <van-checkbox v-model="agreed" shape="square" icon-size="16px">
+            我已阅读并同意《<b>用户协议</b>》和《<b>隐私政策</b>》
+          </van-checkbox>
+        </div>
+
+        <van-button
+          type="primary"
+          block
+          class="primary-button"
+          :loading="loading"
+          loading-text="登录中..."
+          @click="handleLogin"
+        >
+          登录
+        </van-button>
+
+        <RouterLink to="/m/register" class="secondary-entry">
+          还没有账号，创建一个
+        </RouterLink>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.mobile-login-shell {
+  min-height: 100dvh;
+  background:
+    radial-gradient(circle at 50% 12%, rgba(20, 119, 255, 0.1), transparent 34%),
+    linear-gradient(180deg, #f8fbff 0%, #ffffff 70%, #f7fafc 100%);
+  color: #111827;
+}
+
+.page-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  margin: 0;
+  padding: 0 18px;
+  background: transparent;
+}
+
+.back-btn {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: none;
+  border-radius: 999px;
+  background: none;
+  color: #111827;
+}
+
+.auth-body {
+  box-sizing: border-box;
+  display: flex;
+  min-height: 100dvh;
+  flex-direction: column;
+  justify-content: center;
+  padding: 54px 34px 28px;
+}
+
+.brand-lockup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin: 0 auto clamp(34px, 6vh, 54px);
+}
+
+.brand-logo {
+  display: grid;
+  width: 46px;
+  height: 46px;
+  place-items: center;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #1477ff, #2f8dff);
+  box-shadow: 0 14px 32px rgba(20, 119, 255, 0.18);
+  color: #ffffff;
+  font-size: 19px;
+  font-weight: 900;
+}
+
+.brand-lockup strong {
+  display: block;
+  color: #111827;
+  font-size: 18px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.form-section {
+  width: min(100%, 420px);
+  margin: 0 auto;
+}
+
+.form-section h1 {
+  margin: 0 0 22px;
+  color: #05070a;
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.auth-input-row {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  margin-bottom: 10px;
+  padding: 0 16px;
+  border: 1px solid #e1e5eb;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.03);
+}
+
+.auth-input-row.code-row {
+  gap: 8px;
+}
+
+.auth-input-row input {
+  width: 100%;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: #0f172a;
+  font-size: 16px;
+  outline: none;
+}
+
+.auth-input-row input::placeholder {
+  color: #b6beca;
+}
+
+.code-action {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.code-btn {
+  min-width: 82px;
+  height: 32px;
+  border-color: #1477ff !important;
+  border-radius: 8px;
+  color: #1477ff !important;
+  font-weight: 700;
+}
+
+.assist-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin: 14px 0 24px;
+  color: #111827;
+  font-size: 13px;
+}
+
+.assist-row span {
+  min-width: 0;
+  color: #1477ff;
+}
+
+.assist-row a {
+  flex-shrink: 0;
+  color: #22252b;
+  text-decoration: none;
+}
+
+.assist-row b {
+  color: #05070a;
+  font-weight: 900;
+}
+
+.agreement-row {
+  display: flex;
+  align-items: center;
+  margin: 0 0 20px;
+}
+
+.agreement-row :deep(.van-checkbox__label) {
+  margin-left: 8px;
+  color: #252b36;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.agreement-row :deep(.van-checkbox__label b) {
+  color: #1477ff;
+  font-weight: 700;
+}
+
+.primary-button {
+  height: 48px;
+  border: none !important;
+  border-radius: 10px !important;
+  background: #1477ff !important;
+  box-shadow: 0 12px 24px rgba(20, 119, 255, 0.18);
+  font-size: 17px;
+  font-weight: 900;
+}
+
+.secondary-entry {
+  display: grid;
+  min-height: 46px;
+  margin-top: 12px;
+  place-items: center;
+  border: 1px solid #e4e8ee;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.82);
+  color: #1477ff;
+  font-size: 15px;
+  font-weight: 900;
+  text-align: center;
+  text-decoration: none;
+}
+
+@media (max-height: 700px) {
+  .auth-body {
+    justify-content: flex-start;
+    padding-top: 52px;
+  }
+
+  .brand-lockup {
+    margin-bottom: 26px;
+  }
+
+  .form-section h1 {
+    margin-bottom: 18px;
+  }
+
+  .assist-row {
+    margin-bottom: 18px;
+  }
+}
+</style>
diff --git a/frontend/src/features/auth/views/MobileProfileView.vue b/frontend/src/features/auth/views/MobileProfileView.vue
new file mode 100644
index 0000000..95e81f0
--- /dev/null
+++ b/frontend/src/features/auth/views/MobileProfileView.vue
@@ -0,0 +1,1081 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useSessionStore } from "@/stores/session";
+import { showDialog, showToast } from "vant";
+import MobileBottomNav from "@/components/MobileBottomNav.vue";
+
+import { fetchWalletBalance, fetchWalletLedger, type WalletLedger } from "@/api/wallet";
+import { formatDateMinute } from "@/utils/time";
+import { uploadFile } from "@/api/files";
+
+const session = useSessionStore();
+const router = useRouter();
+const route = useRoute();
+
+/** 数据项 */
+const balance = ref(0);
+const showSettings = ref(false);
+const showProfileEditor = ref(false);
+const savingProfile = ref(false);
+const profileForm = reactive({
+  nickname: "",
+  avatar_url: "",
+});
+
+const avatarFileInput = ref<HTMLInputElement | null>(null);
+const uploadingAvatar = ref(false);
+
+function triggerAvatarUpload() {
+  avatarFileInput.value?.click();
+}
+
+async function handleAvatarFileChange(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
+  if (!file) return;
+
+  uploadingAvatar.value = true;
+  const toast = showToast({
+    type: "loading",
+    message: "上传中...",
+    forbidClick: true,
+    duration: 0,
+  });
+
+  try {
+    const uploaded = await uploadFile(file, "avatar");
+    profileForm.avatar_url = uploaded.url;
+    showToast({ message: "上传成功", icon: "passed" });
+  } catch (error) {
+    showToast({ message: readError(error, "上传失败"), icon: "cross" });
+  } finally {
+    uploadingAvatar.value = false;
+  }
+}
+
+// 收支明细列表
+const showLedgers = ref(false);
+const loadingLedgers = ref(false);
+const ledgers = ref<WalletLedger[]>([]);
+
+const settingsGroups = [
+  {
+    title: "账号与安全",
+    items: [
+      { label: "资料更改", icon: "edit", action: "profile" },
+      { label: "实名认证", icon: "idcard", action: "realname" },
+      { label: "注销账号", icon: "delete-o", action: "cancel-account" },
+    ],
+  },
+  {
+    title: "法律与隐私",
+    items: [
+      { label: "隐私政策", icon: "shield-o", action: "privacy" },
+      { label: "用户协议", icon: "description", action: "terms" },
+    ],
+  },
+];
+
+onMounted(() => {
+  if (!isLoggedIn.value) {
+    router.replace({ path: "/m/login", query: { redirect: route.fullPath } });
+  } else {
+    loadBalance();
+  }
+});
+
+async function loadBalance() {
+  try {
+    const wallet = await fetchWalletBalance();
+    balance.value = wallet.available_balance;
+  } catch {
+    // 失败静默处理，显示为默认0
+  }
+}
+
+async function openLedgers() {
+  showLedgers.value = true;
+  loadingLedgers.value = true;
+  try {
+    const res = await fetchWalletLedger(1, 20);
+    ledgers.value = res.items;
+  } catch {
+    showToast({ message: "无法获取账单明细", icon: "cross" });
+  } finally {
+    loadingLedgers.value = false;
+  }
+}
+
+function handleWithdraw() {
+  showDialog({
+    title: "提现提示",
+    message: "为了您的资金安全，提现请前往电脑端网页版进行操作。",
+  });
+}
+
+function goOrders(tabKey: string) {
+  router.push({ path: "/m/orders", query: { tab: tabKey } });
+}
+
+function onSettingClick(action: string) {
+  showSettings.value = false;
+  switch (action) {
+    case "profile":
+      openProfileEditor();
+      break;
+    case "realname":
+      router.push("/m/realname");
+      break;
+    case "cancel-account":
+      showDialog({
+        title: "注销账号",
+        message: "注销后账号数据将无法恢复，确认注销吗？",
+        showCancelButton: true,
+        confirmButtonText: "确认注销",
+        confirmButtonColor: "#ee0a24",
+        cancelButtonText: "再想想",
+      })
+        .then(() => {
+          showToast({ message: "注销功能开发中", icon: "info-o" });
+        })
+        .catch(() => {});
+      break;
+    case "privacy":
+      showToast({ message: "隐私政策页面开发中", icon: "info-o" });
+      break;
+    case "terms":
+      showToast({ message: "用户协议页面开发中", icon: "info-o" });
+      break;
+  }
+}
+
+function openProfileEditor() {
+  profileForm.nickname = session.nickname || defaultName.value;
+  profileForm.avatar_url = session.avatarUrl || "";
+  showProfileEditor.value = true;
+}
+
+async function saveProfile() {
+  const nickname = profileForm.nickname.trim();
+  const avatarURL = profileForm.avatar_url.trim();
+  if (!nickname) {
+    showToast({ message: "请输入昵称", icon: "warning-o" });
+    return;
+  }
+  if (nickname.length > 24) {
+    showToast({ message: "昵称不能超过 24 个字符", icon: "warning-o" });
+    return;
+  }
+
+  savingProfile.value = true;
+  try {
+    await session.updateProfile({ nickname, avatar_url: avatarURL });
+    showProfileEditor.value = false;
+    showToast({ message: "资料已更新", icon: "passed" });
+    await loadBalance();
+  } catch (error) {
+    showToast({ message: readError(error, "资料更新失败"), icon: "cross" });
+  } finally {
+    savingProfile.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;
+  }
+  return fallback;
+}
+
+function confirmLogout() {
+  showSettings.value = false;
+  showDialog({
+    title: "退出登录",
+    message: "确定要退出当前账号吗？",
+    showCancelButton: true,
+    confirmButtonText: "退出",
+    confirmButtonColor: "#ee0a24",
+    cancelButtonText: "取消",
+  })
+    .then(() => {
+      session.logout();
+      router.replace("/m");
+    })
+    .catch(() => {});
+}
+
+const isLoggedIn = computed(() => Boolean(session.token));
+const isRealnameVerified = computed(() => session.realnameStatus === "verified");
+const isRealnamePending = computed(() => session.realnameStatus === "pending");
+
+const defaultName = computed(() =>
+  session.phone
+    ? `用户${session.phone.slice(-6)}`
+    : `用户${session.userId || 883099}`
+);
+const displayName = computed(() => session.nickname || defaultName.value);
+const displayId = computed(() => session.userId || 138865);
+const maskedPhone = computed(() =>
+  session.phone
+    ? `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}`
+    : "登录后查看手机号"
+);
+const avatarText = computed(() => displayName.value.slice(0, 1));
+
+function resolveAvatarURL(url: string | undefined | null) {
+  if (!url) return "";
+  if (url.includes("/api/files/object?key=avatar/")) {
+    return url.replace("/api/files/object", "/api/public/files/object");
+  }
+  return url;
+}
+</script>
+
+<template>
+  <main class="mobile-profile-shell">
+    <!-- 已登录区 -->
+    <template v-if="isLoggedIn">
+      <!-- Hero 顶部蓝色横幅 -->
+      <section class="profile-hero">
+        <div class="hero-top-row">
+          <span class="app-title">个人中心</span>
+          <button class="hero-setting-btn" @click="showSettings = true">
+            <van-icon name="setting-o" :size="20" color="#374151" />
+          </button>
+        </div>
+        <div class="profile-hero-content">
+          <div class="avatar-wrap">
+            <div class="avatar-circle">
+              <img v-if="session.avatarUrl" :src="resolveAvatarURL(session.avatarUrl)" alt="" />
+              <span v-else>{{ avatarText }}</span>
+            </div>
+          </div>
+          <div class="hero-user">
+            <div class="name-row">
+              <h1 class="user-nickname">{{ displayName }}</h1>
+              <van-tag v-if="isRealnameVerified" type="success" size="medium" round class="verified-tag">
+                <van-icon name="shield" /> 已实名
+              </van-tag>
+              <van-tag v-else-if="isRealnamePending" type="warning" size="medium" round class="verified-tag">
+                审核中
+              </van-tag>
+              <van-tag v-else type="danger" size="medium" round class="unverified-tag" @click="router.push('/m/realname')">
+                未实名
+              </van-tag>
+            </div>
+            <p class="user-meta">ID: {{ displayId }} · {{ maskedPhone }}</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- 余额卡片 - 银行卡质感暗色卡片 -->
+      <div class="balance-card">
+        <div class="balance-row">
+          <div class="balance-info">
+            <span class="balance-label">账户可用余额(元)</span>
+            <strong class="balance-value">¥{{ Math.round(Number(balance || 0)) }}</strong>
+          </div>
+          <button class="withdraw-btn" @click="handleWithdraw">提现</button>
+        </div>
+        <div class="balance-footer">
+          <button class="detail-btn" @click="openLedgers">
+            查看收支明细 <van-icon name="arrow" :size="10" />
+          </button>
+        </div>
+      </div>
+
+      <!-- 买家服务面板 -->
+      <div class="menu-card">
+        <div class="card-header">
+          <h3>买家服务</h3>
+          <span class="see-all" @click="goOrders('all')">
+            全部订单 <van-icon name="arrow" :size="10" />
+          </span>
+        </div>
+        <div class="grid-menu col-4">
+          <div class="grid-item" @click="goOrders('pending_payment')">
+            <div class="icon-wrap warning"><van-icon name="bill-o" :size="22" /></div>
+            <span>待支付</span>
+          </div>
+          <div class="grid-item" @click="goOrders('pending_handoff')">
+            <div class="icon-wrap info"><van-icon name="logistics" :size="22" /></div>
+            <span>待交接</span>
+          </div>
+          <div class="grid-item" @click="goOrders('renting')">
+            <div class="icon-wrap primary"><van-icon name="play-circle-o" :size="22" /></div>
+            <span>使用中</span>
+          </div>
+          <div class="grid-item" @click="goOrders('completed')">
+            <div class="icon-wrap success"><van-icon name="smile-o" :size="22" /></div>
+            <span>已完成</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 卖家服务面板 -->
+      <div class="menu-card">
+        <div class="card-header">
+          <h3>卖家服务</h3>
+        </div>
+        <div class="grid-menu col-3">
+          <div class="grid-item" @click="router.push('/m/seller/listings/create')">
+            <div class="icon-wrap orange"><van-icon name="plus" :size="22" /></div>
+            <span>发布商品</span>
+          </div>
+          <div class="grid-item" @click="router.push('/m/seller/listings')">
+            <div class="icon-wrap purple"><van-icon name="shop-o" :size="22" /></div>
+            <span>我的商品</span>
+          </div>
+          <div class="grid-item" @click="openLedgers">
+            <div class="icon-wrap teal"><van-icon name="balance-o" :size="22" /></div>
+            <span>提现/账单</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 常用功能 Cell Group -->
+      <div class="menu-card cell-card">
+        <van-cell-group :border="false">
+          <van-cell title="消息中心" icon="chat-o" is-link to="/m/messages" />
+          <van-cell title="资料修改" icon="edit" is-link @click="openProfileEditor" />
+          <van-cell title="实名认证" icon="idcard" is-link to="/m/realname">
+            <template #value>
+              <span :class="isRealnameVerified ? 'verified-color' : 'unverified-color'">
+                {{ isRealnameVerified ? '已认证' : isRealnamePending ? '审核中' : '未认证' }}
+              </span>
+            </template>
+          </van-cell>
+          <van-cell title="系统设置" icon="setting-o" is-link @click="showSettings = true" />
+        </van-cell-group>
+      </div>
+    </template>
+
+    <!-- 账单明细 Popup -->
+    <van-popup
+      v-model:show="showLedgers"
+      position="bottom"
+      round
+      class="ledgers-popup"
+      :style="{ height: '65%' }"
+    >
+      <header class="popup-header">
+        <h3>收支明细</h3>
+        <button class="popup-close" @click="showLedgers = false">✕</button>
+      </header>
+      <div class="popup-body">
+        <van-loading v-if="loadingLedgers" class="center-loading" vertical>加载中...</van-loading>
+        <van-empty v-else-if="ledgers.length === 0" description="暂无收支记录" />
+        <div v-else class="ledger-list">
+          <div v-for="item in ledgers" :key="item.id" class="ledger-item">
+            <div class="ledger-left">
+              <strong class="ledger-remark">{{ item.remark || item.biz_type }}</strong>
+              <span class="ledger-time">{{ formatDateMinute(item.created_at) }}</span>
+            </div>
+            <div class="ledger-right" :class="item.direction === 'in' ? 'in-color' : 'out-color'">
+              {{ item.direction === 'in' ? '+' : '-' }}¥{{ Math.round(Number(item.amount || 0)) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+
+    <!-- 设置面板 - Popup -->
+    <van-popup
+      v-model:show="showSettings"
+      position="right"
+      :style="{ width: '80%', height: '100%' }"
+    >
+      <div class="settings-panel">
+        <header class="settings-header">
+          <h2>设置</h2>
+          <button class="settings-close" @click="showSettings = false">
+            <van-icon name="cross" :size="20" />
+          </button>
+        </header>
+
+        <div
+          v-for="group in settingsGroups"
+          :key="group.title"
+          class="settings-group"
+        >
+          <h3 class="settings-group-title">{{ group.title }}</h3>
+          <van-cell-group :border="false">
+            <van-cell
+              v-for="item in group.items"
+              :key="item.action"
+              :title="item.label"
+              :icon="item.icon"
+              is-link
+              @click="onSettingClick(item.action)"
+            />
+          </van-cell-group>
+        </div>
+
+        <div class="settings-logout">
+          <van-button plain type="danger" block round @click="confirmLogout">
+            退出登录
+          </van-button>
+        </div>
+      </div>
+    </van-popup>
+
+    <!-- 个人资料编辑 Popup -->
+    <van-popup
+      v-model:show="showProfileEditor"
+      position="bottom"
+      round
+      :style="{ maxWidth: '430px', margin: '0 auto', left: 0, right: 0 }"
+    >
+      <section class="profile-editor">
+        <header class="profile-editor-header">
+          <h2>资料更改</h2>
+          <button type="button" @click="showProfileEditor = false">
+            <van-icon name="cross" :size="20" />
+          </button>
+        </header>
+
+        <div class="profile-preview">
+          <div class="profile-preview-avatar clickable" @click="triggerAvatarUpload">
+            <img v-if="profileForm.avatar_url" :src="resolveAvatarURL(profileForm.avatar_url)" alt="" />
+            <span v-else>{{ (profileForm.nickname || defaultName).slice(0, 1) }}</span>
+            <div class="avatar-upload-overlay">
+              <van-icon name="photograph" :size="16" />
+            </div>
+            <van-loading v-if="uploadingAvatar" size="20px" class="avatar-loading" />
+          </div>
+          <div class="preview-info">
+            <strong>{{ profileForm.nickname || defaultName }}</strong>
+            <p>{{ maskedPhone }}</p>
+            <van-button
+              size="mini"
+              type="primary"
+              plain
+              round
+              icon="photograph"
+              class="upload-btn"
+              :loading="uploadingAvatar"
+              @click="triggerAvatarUpload"
+            >
+              上传本地照片
+            </van-button>
+          </div>
+          <!-- 隐藏的文件选择框 -->
+          <input
+            ref="avatarFileInput"
+            type="file"
+            accept="image/*"
+            style="display: none"
+            @change="handleAvatarFileChange"
+          />
+        </div>
+
+        <label class="editor-field">
+          <span>昵称</span>
+          <input
+            v-model="profileForm.nickname"
+            maxlength="24"
+            placeholder="请输入昵称"
+          />
+        </label>
+
+        <label class="editor-field">
+          <span>头像地址</span>
+          <input
+            v-model="profileForm.avatar_url"
+            maxlength="512"
+            placeholder="可填写图片 URL，留空使用文字头像"
+          />
+        </label>
+
+        <van-button
+          type="primary"
+          block
+          round
+          class="profile-save-btn"
+          :loading="savingProfile"
+          loading-text="保存中..."
+          @click="saveProfile"
+        >
+          保存资料
+        </van-button>
+      </section>
+    </van-popup>
+
+    <MobileBottomNav />
+  </main>
+</template>
+
+<style scoped>
+.mobile-profile-shell {
+  min-height: 100dvh;
+  background: #f6f8fa;
+  color: #1a202c;
+  padding: 0 0 calc(64px + env(safe-area-inset-bottom));
+}
+
+/* ========== Hero Header ========== */
+.profile-hero {
+  background: #ffffff;
+  padding: 20px 16px 20px;
+  border-bottom: 1px solid rgba(243, 244, 246, 0.8);
+}
+
+.hero-top-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.app-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #111827;
+  letter-spacing: 0.5px;
+}
+
+.hero-setting-btn {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.hero-setting-btn:active {
+  background: #e5e7eb;
+}
+
+.profile-hero-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.avatar-circle {
+  display: grid;
+  width: 60px;
+  height: 60px;
+  place-items: center;
+  border-radius: 999px;
+  overflow: hidden;
+  background: #eaf2ff;
+  color: #1477ff;
+  font-size: 24px;
+  font-weight: 900;
+  border: 1px solid #e5e7eb;
+}
+
+.avatar-circle img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero-user {
+  flex: 1;
+  min-width: 0;
+}
+
+.name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.user-nickname {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  color: #111827;
+}
+
+.verified-tag, .unverified-tag {
+  font-size: 10px !important;
+  height: 18px;
+  padding: 0 6px;
+  font-weight: 700;
+  border: none;
+}
+
+.user-meta {
+  margin: 4px 0 0;
+  color: #6b7280;
+  font-size: 12px;
+}
+
+/* ========== Balance Card ========== */
+.balance-card {
+  margin: 12px 16px 14px;
+  padding: 16px;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.02);
+  border: 1px solid rgba(243, 244, 246, 0.9);
+}
+
+.balance-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.balance-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.balance-label {
+  color: #9ca3af;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.balance-value {
+  font-size: 26px;
+  font-weight: 800;
+  font-family: Inter, system-ui, sans-serif;
+  color: #111827;
+}
+
+.withdraw-btn {
+  background: transparent;
+  border: 1px solid #1477ff;
+  color: #1477ff;
+  font-weight: 700;
+  font-size: 12px;
+  height: 28px;
+  padding: 0 16px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.withdraw-btn:active {
+  background: #1477ff;
+  color: #ffffff;
+}
+
+.balance-footer {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.detail-btn {
+  background: transparent;
+  border: none;
+  color: #1477ff;
+  font-weight: 700;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  padding: 0;
+}
+
+/* ========== Menu Cards ========== */
+.menu-card {
+  margin: 0 16px 14px;
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.02);
+  border: 1px solid rgba(243, 244, 246, 0.9);
+}
+
+.menu-card.cell-card {
+  padding: 0;
+  overflow: hidden;
+}
+
+.menu-card .card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.menu-card .card-header h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 800;
+  color: #111827;
+}
+
+.see-all {
+  font-size: 11px;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  cursor: pointer;
+}
+
+/* Grid Menu Layout */
+.grid-menu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.grid-menu.col-4 .grid-item {
+  flex: 0 0 25%;
+}
+
+.grid-menu.col-3 .grid-item {
+  flex: 0 0 33.33%;
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.grid-item:active .icon-wrap {
+  transform: scale(0.92);
+}
+
+.icon-wrap {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border-radius: 12px;
+  transition: transform 0.15s ease;
+}
+
+/* Vibrant pastel colors for menu icon wraps */
+.icon-wrap.warning { color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
+.icon-wrap.info { color: #2563eb; background: rgba(37, 99, 235, 0.08); }
+.icon-wrap.primary { color: #1477ff; background: rgba(20, 119, 255, 0.08); }
+.icon-wrap.success { color: #10b981; background: rgba(16, 185, 129, 0.08); }
+.icon-wrap.orange { color: #ff5f00; background: rgba(255, 95, 0, 0.08); }
+.icon-wrap.purple { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }
+.icon-wrap.teal { color: #0d9488; background: rgba(13, 148, 136, 0.08); }
+
+.grid-item span {
+  font-size: 11px;
+  color: #374151;
+  font-weight: 600;
+}
+
+/* Vant Cell Adjustments */
+:deep(.van-cell-group) {
+  background: transparent;
+}
+:deep(.van-cell) {
+  padding: 14px 16px;
+  font-size: 14px;
+}
+.verified-color {
+  color: #10b981;
+  font-weight: 600;
+}
+.unverified-color {
+  color: #9ca3af;
+}
+
+/* 收支明细 Popup */
+.ledgers-popup {
+  display: flex;
+  flex-direction: column;
+}
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #f3f4f6;
+  flex-shrink: 0;
+}
+.popup-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 800;
+}
+.popup-close {
+  border: none;
+  background: transparent;
+  font-size: 16px;
+  color: #9ca3af;
+  cursor: pointer;
+}
+.popup-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 16px;
+}
+.ledger-list {
+  display: flex;
+  flex-direction: column;
+}
+.ledger-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 0;
+  border-bottom: 1px solid #f3f4f6;
+}
+.ledger-item:last-child {
+  border-bottom: none;
+}
+.ledger-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ledger-remark {
+  font-size: 14px;
+  color: #1f2937;
+  font-weight: 600;
+}
+.ledger-time {
+  font-size: 11px;
+  color: #9ca3af;
+}
+.ledger-right {
+  font-size: 15px;
+  font-weight: 800;
+}
+.in-color {
+  color: #10b981;
+}
+.out-color {
+  color: #ef4444;
+}
+
+/* ========== 设置面板 ========== */
+.settings-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f5f6f8;
+}
+
+.settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.settings-header h2 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.settings-close {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: none;
+  background: none;
+  color: #999;
+  cursor: pointer;
+}
+
+.settings-group {
+  margin-top: 12px;
+}
+
+.settings-group-title {
+  margin: 0 0 4px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #999;
+}
+
+.settings-group :deep(.van-cell) {
+  font-size: 15px;
+}
+
+.settings-logout {
+  margin: auto 16px 24px;
+  padding-top: 20px;
+}
+
+/* ========== 资料修改 ========== */
+.profile-editor {
+  padding: 16px 16px max(18px, env(safe-area-inset-bottom));
+  background: #fff;
+}
+
+.profile-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.profile-editor-header h2 {
+  margin: 0;
+  color: #17233d;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.profile-editor-header button {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: none;
+  border-radius: 12px;
+  background: #f4f6f8;
+  color: #64748b;
+}
+
+.profile-preview {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 18px 0;
+  padding: 14px;
+  border-radius: 14px;
+  background: #f7faff;
+}
+
+.profile-preview-avatar {
+  display: grid;
+  width: 52px;
+  height: 52px;
+  flex: 0 0 auto;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 16px;
+  background: #1477ff;
+  color: #fff;
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.profile-preview-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.profile-preview-avatar.clickable {
+  cursor: pointer;
+  position: relative;
+}
+
+.avatar-upload-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.profile-preview-avatar.clickable:hover .avatar-upload-overlay,
+.profile-preview-avatar.clickable:active .avatar-upload-overlay {
+  opacity: 1;
+}
+
+.avatar-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.preview-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.preview-info strong {
+  display: block;
+  max-width: 230px;
+  overflow: hidden;
+  color: #17233d;
+  font-size: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-info p {
+  margin: 0;
+  color: #7b8798;
+  font-size: 12px;
+}
+
+.upload-btn {
+  margin-top: 4px;
+  font-weight: 600;
+}
+
+.editor-field {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.editor-field span {
+  display: block;
+  margin-bottom: 6px;
+  color: #697386;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.editor-field input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 46px;
+  border: 1px solid #e1e7ef;
+  border-radius: 12px;
+  background: #fff;
+  color: #17233d;
+  font-size: 14px;
+  outline: none;
+  padding: 0 12px;
+}
+
+.editor-field input:focus {
+  border-color: #1477ff;
+  box-shadow: 0 0 0 3px rgba(20, 119, 255, 0.1);
+}
+
+.profile-save-btn {
+  height: 44px;
+  margin-top: 6px;
+  background: #1477ff;
+  border-color: transparent;
+  font-weight: 800;
+}
+
+/* ========== 响应式适配 ========== */
+@media (min-width: 520px) {
+  .mobile-profile-shell {
+    max-width: 430px;
+    margin: 0 auto;
+    box-shadow: 0 0 0 1px rgba(23, 35, 61, 0.08);
+  }
+}
+</style>
diff --git a/frontend/src/features/auth/views/MobileRealnameView.vue b/frontend/src/features/auth/views/MobileRealnameView.vue
new file mode 100644
index 0000000..ecc634b
--- /dev/null
+++ b/frontend/src/features/auth/views/MobileRealnameView.vue
@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { showToast, showDialog } from "vant";
+import {
+  getRealnameStatus,
+  startRealname,
+  type RealnameStatus,
+} from "@/api/realname";
+import { realnameStatusLabel } from "@/utils/statusLabels";
+import { useSessionStore } from "@/stores/session";
+import { formatDateTime } from "@/utils/time";
+
+const session = useSessionStore();
+const router = useRouter();
+const route = useRoute();
+const loading = ref(false);
+const status = ref<RealnameStatus | null>(null);
+const form = reactive({
+  name: "",
+  idNo: "",
+});
+
+onMounted(loadStatus);
+
+function redirectAfterVerified() {
+  const redirect =
+    typeof route.query.redirect === "string" ? route.query.redirect : "";
+  if (redirect) {
+    router.replace(redirect);
+  }
+}
+
+async function loadStatus() {
+  if (!session.token) return;
+  try {
+    status.value = await getRealnameStatus();
+    if (status.value.status === "verified") {
+      await session.loadMe();
+      redirectAfterVerified();
+    }
+  } catch {
+    status.value = null;
+  }
+}
+
+async function handleSubmit() {
+  if (!form.name.trim()) {
+    showToast({ message: "请输入真实姓名", icon: "warning-o" });
+    return;
+  }
+  if (!form.idNo.trim() || form.idNo.length < 15) {
+    showToast({ message: "请输入有效的证件号", icon: "warning-o" });
+    return;
+  }
+  loading.value = true;
+  try {
+    status.value = await startRealname(form.name, form.idNo);
+    await session.loadMe();
+    showDialog({
+      title: "认证成功",
+      message: "实名认证已通过",
+      confirmButtonText: "好的",
+    }).then(() => {
+      redirectAfterVerified();
+    });
+  } catch (error: unknown) {
+    const msg =
+      typeof error === "object" && error && "response" in error
+        ? (
+            error as {
+              response?: { data?: { message?: string } };
+            }
+          ).response?.data?.message || "实名认证失败"
+        : "实名认证失败";
+    showToast({ message: msg, icon: "cross" });
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <main class="mobile-realname">
+    <header class="page-header">
+      <button class="back-btn" @click="router.back()">
+        <van-icon name="arrow-left" :size="20" />
+      </button>
+      <h1>实名认证</h1>
+      <span class="header-spacer"></span>
+    </header>
+
+    <!-- 未登录提示 -->
+    <van-empty
+      v-if="!session.token"
+      description="请先登录后再实名认证"
+      image="search"
+    />
+
+    <template v-else>
+      <!-- 认证状态 -->
+      <section v-if="status" class="status-card">
+        <div class="status-row">
+          <span class="status-label">当前状态</span>
+          <van-tag
+            :type="status.status === 'verified' ? 'success' : 'warning'"
+            size="medium"
+            round
+          >
+            {{ realnameStatusLabel(status.status) }}
+          </van-tag>
+        </div>
+        <p v-if="status.masked_name" class="status-detail">
+          姓名：{{ status.masked_name }}
+        </p>
+        <p v-if="status.masked_id_no" class="status-detail">
+          证件号：{{ status.masked_id_no }}
+        </p>
+        <p v-if="status.verified_at" class="status-detail">
+          通过时间：{{ formatDateTime(status.verified_at) }}
+        </p>
+      </section>
+
+      <!-- 认证表单 -->
+      <section v-if="status?.status !== 'verified'" class="form-card">
+        <h2>提交认证</h2>
+        <p class="form-hint">
+          号主发布前必须完成实名认证，提交合法姓名和身份证号即可认证。
+        </p>
+        <van-field
+          v-model="form.name"
+          label="姓名"
+          placeholder="请输入真实姓名"
+          clearable
+          class="realname-field"
+        />
+        <van-field
+          v-model="form.idNo"
+          label="身份证号"
+          placeholder="请输入18位身份证号"
+          maxlength="18"
+          clearable
+          class="realname-field"
+        />
+        <van-button
+          type="primary"
+          block
+          round
+          :loading="loading"
+          class="submit-btn"
+          @click="handleSubmit"
+        >
+          提交认证
+        </van-button>
+      </section>
+    </template>
+  </main>
+</template>
+
+<style scoped>
+.mobile-realname {
+  min-height: 100dvh;
+  background: #f5f7fa;
+  padding-bottom: 20px;
+}
+
+/* ========== 顶部导航 ========== */
+.page-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding: 0 12px;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.page-header h1 {
+  flex: 1;
+  margin: 0;
+  font-size: 17px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.back-btn {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border: none;
+  background: none;
+  color: #333;
+  cursor: pointer;
+}
+
+.header-spacer {
+  width: 36px;
+}
+
+/* ========== 认证状态 ========== */
+.status-card {
+  margin: 16px 12px;
+  padding: 16px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.status-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.status-label {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a202c;
+}
+
+.status-detail {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: #666;
+}
+
+/* ========== 认证表单 ========== */
+.form-card {
+  margin: 0 12px 16px;
+  padding: 18px 16px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.form-card h2 {
+  margin: 0 0 6px;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.form-hint {
+  margin: 0 0 16px;
+  font-size: 13px;
+  color: #999;
+  line-height: 1.5;
+}
+
+.realname-field {
+  margin-bottom: 12px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.submit-btn {
+  margin-top: 8px;
+  background: #1477ff;
+  border-color: transparent;
+  font-weight: 800;
+  height: 44px;
+  font-size: 16px;
+}
+</style>
diff --git a/frontend/src/features/auth/views/MobileRegisterView.vue b/frontend/src/features/auth/views/MobileRegisterView.vue
new file mode 100644
index 0000000..bb3ee52
--- /dev/null
+++ b/frontend/src/features/auth/views/MobileRegisterView.vue
@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { RouterLink, useRoute, useRouter } from "vue-router";
+import { showToast } from "vant";
+
+import { useSessionStore } from "@/stores/session";
+import { useSmsCountdown } from "@/composables/useSmsCountdown";
+
+const router = useRouter();
+const route = useRoute();
+const session = useSessionStore();
+const loading = ref(false);
+const agreed = ref(false);
+const form = reactive({
+  phone: "",
+  code: "",
+  inviteCode: "",
+});
+
+const { countDown, sending, handleSendCode, readError } = useSmsCountdown();
+
+async function handleRegister() {
+  if (!agreed.value) {
+    showToast({
+      message: "请先阅读并同意用户协议和隐私政策",
+      icon: "warning-o",
+    });
+    return;
+  }
+
+  loading.value = true;
+  try {
+    await session.login(form.phone, form.code);
+    const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/m/profile";
+    await router.replace(redirect);
+  } catch {
+    showToast({ message: "注册失败，请检查手机号和验证码", icon: "cross" });
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <main class="mobile-register-shell">
+    <header class="page-header">
+      <button class="back-btn" type="button" @click="router.back()">
+        <van-icon name="arrow-left" :size="20" />
+      </button>
+    </header>
+
+    <section class="auth-body">
+      <div class="brand-lockup">
+        <div class="brand-logo">锤</div>
+        <strong>大锤商行</strong>
+      </div>
+
+      <div class="form-section">
+        <h1>注册</h1>
+
+        <label class="auth-input-row">
+          <input
+            v-model="form.phone"
+            type="tel"
+            maxlength="11"
+            inputmode="tel"
+            placeholder="手机号"
+          />
+        </label>
+
+        <label class="auth-input-row code-row">
+          <input
+            v-model="form.code"
+            type="text"
+            inputmode="numeric"
+            maxlength="6"
+            placeholder="验证码"
+          />
+          <span class="code-action">
+            <van-button
+              size="small"
+              plain
+              :disabled="sending || countDown > 0"
+              :loading="sending"
+              class="code-btn"
+              @click="handleSendCode(form.phone)"
+            >
+              {{
+                countDown > 0
+                  ? `${countDown}s`
+                  : sending
+                  ? "发送中"
+                  : "发送验证码"
+              }}
+            </van-button>
+          </span>
+        </label>
+
+        <label class="auth-input-row">
+          <input
+            v-model="form.inviteCode"
+            maxlength="16"
+            placeholder="邀请码（选填）"
+          />
+        </label>
+
+        <div class="assist-row">
+          <span>验证码注册</span>
+          <RouterLink to="/m/login">已有账号？<b>去登录</b></RouterLink>
+        </div>
+
+        <div class="agreement-row">
+          <van-checkbox v-model="agreed" shape="square" icon-size="16px">
+            我已阅读并同意《<b>用户协议</b>》和《<b>隐私政策</b>》
+          </van-checkbox>
+        </div>
+
+        <van-button
+          type="primary"
+          block
+          class="primary-button"
+          :loading="loading"
+          loading-text="注册中..."
+          @click="handleRegister"
+        >
+          注册并登录
+        </van-button>
+
+        <RouterLink to="/m/login" class="secondary-entry">
+          返回登录
+        </RouterLink>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.mobile-register-shell {
+  min-height: 100dvh;
+  background:
+    radial-gradient(circle at 50% 12%, rgba(20, 119, 255, 0.1), transparent 34%),
+    linear-gradient(180deg, #f8fbff 0%, #ffffff 70%, #f7fafc 100%);
+  color: #111827;
+}
+
+.page-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  margin: 0;
+  padding: 0 18px;
+  background: transparent;
+}
+
+.back-btn {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: none;
+  border-radius: 999px;
+  background: none;
+  color: #111827;
+}
+
+.auth-body {
+  box-sizing: border-box;
+  display: flex;
+  min-height: 100dvh;
+  flex-direction: column;
+  justify-content: center;
+  padding: 50px 34px 22px;
+}
+
+.brand-lockup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin: 0 auto clamp(24px, 4vh, 38px);
+}
+
+.brand-logo {
+  display: grid;
+  width: 46px;
+  height: 46px;
+  place-items: center;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #1477ff, #2f8dff);
+  box-shadow: 0 14px 32px rgba(20, 119, 255, 0.18);
+  color: #ffffff;
+  font-size: 19px;
+  font-weight: 900;
+}
+
+.brand-lockup strong {
+  display: block;
+  color: #111827;
+  font-size: 18px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.form-section {
+  width: min(100%, 420px);
+  margin: 0 auto;
+}
+
+.form-section h1 {
+  margin: 0 0 20px;
+  color: #05070a;
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.auth-input-row {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  margin-bottom: 10px;
+  padding: 0 16px;
+  border: 1px solid #e1e5eb;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.03);
+}
+
+.auth-input-row.code-row {
+  gap: 8px;
+}
+
+.auth-input-row input {
+  width: 100%;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: #0f172a;
+  font-size: 16px;
+  outline: none;
+}
+
+.auth-input-row input::placeholder {
+  color: #b6beca;
+}
+
+.code-action {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.code-btn {
+  min-width: 82px;
+  height: 32px;
+  border-color: #1477ff !important;
+  border-radius: 8px;
+  color: #1477ff !important;
+  font-weight: 700;
+}
+
+.assist-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin: 12px 0 18px;
+  color: #111827;
+  font-size: 13px;
+}
+
+.assist-row span {
+  min-width: 0;
+  color: #1477ff;
+}
+
+.assist-row a {
+  flex-shrink: 0;
+  color: #22252b;
+  text-decoration: none;
+}
+
+.assist-row b {
+  color: #05070a;
+  font-weight: 900;
+}
+
+.agreement-row {
+  display: flex;
+  align-items: center;
+  margin: 0 0 18px;
+}
+
+.agreement-row :deep(.van-checkbox__label) {
+  margin-left: 8px;
+  color: #252b36;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.agreement-row :deep(.van-checkbox__label b) {
+  color: #1477ff;
+  font-weight: 700;
+}
+
+.primary-button {
+  height: 48px;
+  border: none !important;
+  border-radius: 10px !important;
+  background: #1477ff !important;
+  box-shadow: 0 12px 24px rgba(20, 119, 255, 0.18);
+  font-size: 17px;
+  font-weight: 900;
+}
+
+.secondary-entry {
+  display: grid;
+  min-height: 44px;
+  margin-top: 10px;
+  place-items: center;
+  border: 1px solid #e4e8ee;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.82);
+  color: #1477ff;
+  font-size: 15px;
+  font-weight: 900;
+  text-align: center;
+  text-decoration: none;
+}
+
+@media (max-height: 760px) {
+  .auth-body {
+    justify-content: flex-start;
+    padding-top: 48px;
+  }
+
+  .brand-lockup {
+    margin-bottom: 20px;
+  }
+
+  .form-section h1 {
+    margin-bottom: 16px;
+  }
+
+  .assist-row {
+    margin-bottom: 14px;
+  }
+}
+</style>
diff --git a/frontend/src/features/auth/views/NotificationsView.vue b/frontend/src/features/auth/views/NotificationsView.vue
new file mode 100644
index 0000000..7bc4f38
--- /dev/null
+++ b/frontend/src/features/auth/views/NotificationsView.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
+
+import { fetchNotifications, markNotificationRead, type NotificationItem } from '@/api/notifications'
+import { formatDateTime } from '@/utils/time'
+
+const loading = ref(false)
+const notifications = ref<NotificationItem[]>([])
+const currentPage = ref(1)
+const currentPageSize = ref(20)
+const total = ref(0)
+
+onMounted(loadNotifications)
+
+async function loadNotifications() {
+  loading.value = true
+  try {
+    const result = await fetchNotifications(currentPage.value, currentPageSize.value)
+    notifications.value = result.items
+    total.value = result.total
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSizeChange() {
+  currentPage.value = 1
+  loadNotifications()
+}
+
+async function markRead(id: number) {
+  await markNotificationRead(id)
+  ElMessage.success('已标记为已读')
+  await loadNotifications()
+}
+</script>
+
+<template>
+  <section class="page">
+    <div class="page-header">
+      <p class="eyebrow">Notifications</p>
+      <h1>站内信</h1>
+      <p>接收审核、交接、归还、申诉和仲裁结果通知。</p>
+    </div>
+
+    <el-empty v-if="!loading && notifications.length === 0" description="暂无站内信" />
+    <div v-else v-loading="loading" class="notification-list">
+      <div v-for="item in notifications" :key="item.id" class="notification-item" :class="{ unread: !item.read_at }">
+        <div>
+          <span>{{ item.type }}</span>
+          <h2>{{ item.title }}</h2>
+          <p>{{ item.content }}</p>
+          <small>{{ formatDateTime(item.created_at) }}</small>
+        </div>
+        <div class="notification-actions">
+          <RouterLink v-if="item.biz_type === 'order' && item.biz_id" :to="`/orders/${item.biz_id}`">
+            <el-button size="small">查看订单</el-button>
+          </RouterLink>
+          <el-button v-if="!item.read_at" size="small" type="primary" @click="markRead(item.id)">已读</el-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="pagination-wrap" v-if="total > 0">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="currentPageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next"
+        @current-change="loadNotifications"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </section>
+</template>
diff --git a/frontend/src/features/auth/views/ProfileView.vue b/frontend/src/features/auth/views/ProfileView.vue
new file mode 100644
index 0000000..038e403
--- /dev/null
+++ b/frontend/src/features/auth/views/ProfileView.vue
@@ -0,0 +1,714 @@
+<script setup lang="ts">
+import {
+  Camera,
+  CircleCheckFilled,
+  CirclePlus,
+  Coin,
+  EditPen,
+  Finished,
+  Goods,
+  Postcard,
+  RefreshRight,
+  Shop,
+  Tickets,
+  User,
+  Van,
+  VideoPlay,
+  Wallet,
+  WarningFilled,
+} from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { uploadFile } from '@/api/files'
+import { useSessionStore } from '@/stores/session'
+import { realnameStatusLabel } from '@/utils/statusLabels'
+
+const session = useSessionStore()
+const router = useRouter()
+const saving = ref(false)
+const uploadingAvatar = ref(false)
+const avatarFileInput = ref<HTMLInputElement | null>(null)
+const form = reactive({
+  nickname: '',
+  avatar_url: '',
+})
+const buyerServices = [
+  { label: '待支付', icon: Coin, tone: 'warning', to: { path: '/orders', query: { tab: 'pending_payment' } } },
+  { label: '待交接', icon: Van, tone: 'info', to: { path: '/orders', query: { tab: 'pending_handoff' } } },
+  { label: '使用中', icon: VideoPlay, tone: 'primary', to: { path: '/orders', query: { tab: 'renting' } } },
+  { label: '已完成', icon: Finished, tone: 'success', to: { path: '/orders', query: { tab: 'completed' } } },
+]
+const sellerServices = [
+  { label: '发布商品', icon: CirclePlus, tone: 'orange', to: '/seller/listings/create' },
+  { label: '我的商品', icon: Shop, tone: 'purple', to: '/seller/listings' },
+  { label: '提现/账单', icon: Wallet, tone: 'teal', to: '/wallet' },
+]
+
+const displayName = computed(() => session.displayName)
+const maskedPhone = computed(() => {
+  if (!session.phone) return '未绑定手机号'
+  return `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}`
+})
+const avatarText = computed(() => (form.nickname || displayName.value || 'U').slice(0, 1))
+const realnameTone = computed(() => {
+  if (session.realnameStatus === 'verified') return 'verified'
+  if (session.realnameStatus === 'pending') return 'pending'
+  if (session.realnameStatus === 'rejected') return 'rejected'
+  return 'unverified'
+})
+
+onMounted(async () => {
+  if (!session.phone) {
+    await session.loadMe()
+  }
+  resetForm()
+})
+
+function resetForm() {
+  form.nickname = session.nickname || session.displayName
+  form.avatar_url = session.avatarUrl || ''
+}
+
+function resolveAvatarURL(url: string | undefined | null) {
+  if (!url) return ''
+  if (url.includes('/api/files/object?key=avatar/')) {
+    return url.replace('/api/files/object', '/api/public/files/object')
+  }
+  return url
+}
+
+function triggerAvatarUpload() {
+  avatarFileInput.value?.click()
+}
+
+async function handleAvatarFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file) return
+
+  uploadingAvatar.value = true
+  try {
+    const uploaded = await uploadFile(file, 'avatar')
+    form.avatar_url = uploaded.url
+    ElMessage.success('头像上传成功')
+  } catch (error) {
+    ElMessage.error(readError(error, '头像上传失败'))
+  } finally {
+    uploadingAvatar.value = false
+  }
+}
+
+async function saveProfile() {
+  const nickname = form.nickname.trim()
+  const avatarURL = form.avatar_url.trim()
+  if (!nickname) {
+    ElMessage.warning('请输入昵称')
+    return
+  }
+  if (nickname.length > 24) {
+    ElMessage.warning('昵称不能超过 24 个字符')
+    return
+  }
+
+  saving.value = true
+  try {
+    await session.updateProfile({ nickname, avatar_url: avatarURL })
+    resetForm()
+    ElMessage.success('个人资料已保存')
+  } catch (error) {
+    ElMessage.error(readError(error, '资料更新失败'))
+  } finally {
+    saving.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
+  }
+  return fallback
+}
+</script>
+
+<template>
+  <section class="profile-page">
+    <div class="profile-hero">
+      <div class="hero-avatar">
+        <img v-if="session.avatarUrl" :src="resolveAvatarURL(session.avatarUrl)" alt="" />
+        <span v-else>{{ session.avatarText }}</span>
+      </div>
+      <div class="hero-copy">
+        <span class="eyebrow">Profile</span>
+        <h1>个人资料</h1>
+        <p>{{ displayName }} · {{ maskedPhone }}</p>
+      </div>
+      <button class="hero-realname" :class="`is-${realnameTone}`" type="button" @click="router.push('/realname')">
+        <el-icon><CircleCheckFilled v-if="session.realnameStatus === 'verified'" /><WarningFilled v-else /></el-icon>
+        <span>{{ realnameStatusLabel(session.realnameStatus) }}</span>
+      </button>
+    </div>
+
+    <div class="profile-layout">
+      <section class="edit-panel">
+        <div class="panel-head">
+          <div class="panel-icon">
+            <el-icon><EditPen /></el-icon>
+          </div>
+          <div>
+            <h2>资料编辑</h2>
+            <p>修改昵称和头像后会同步展示在顶部用户信息中。</p>
+          </div>
+        </div>
+
+        <div class="avatar-editor">
+          <button class="avatar-preview" type="button" @click="triggerAvatarUpload">
+            <img v-if="form.avatar_url" :src="resolveAvatarURL(form.avatar_url)" alt="" />
+            <span v-else>{{ avatarText }}</span>
+            <i><el-icon><Camera /></el-icon></i>
+          </button>
+          <div class="avatar-actions">
+            <strong>{{ form.nickname || displayName }}</strong>
+            <p>支持上传本地图片，也可以直接填写头像 URL。</p>
+            <el-button :icon="Camera" :loading="uploadingAvatar" @click="triggerAvatarUpload">上传头像</el-button>
+            <input ref="avatarFileInput" type="file" accept="image/*" hidden @change="handleAvatarFileChange" />
+          </div>
+        </div>
+
+        <el-form class="profile-form" label-position="top">
+          <el-form-item label="昵称">
+            <el-input v-model="form.nickname" :prefix-icon="User" maxlength="24" placeholder="请输入昵称" size="large" />
+          </el-form-item>
+          <el-form-item label="头像地址">
+            <el-input
+              v-model="form.avatar_url"
+              :prefix-icon="Postcard"
+              maxlength="512"
+              placeholder="可填写图片 URL，留空使用文字头像"
+              size="large"
+            />
+          </el-form-item>
+          <div class="form-actions">
+            <el-button size="large" :icon="RefreshRight" @click="resetForm">重置</el-button>
+            <el-button type="primary" size="large" :icon="EditPen" :loading="saving" @click="saveProfile">保存资料</el-button>
+          </div>
+        </el-form>
+      </section>
+
+      <aside class="account-card">
+        <span class="card-kicker">账号信息</span>
+        <dl>
+          <div>
+            <dt>用户 ID</dt>
+            <dd>{{ session.userId || '-' }}</dd>
+          </div>
+          <div>
+            <dt>手机号</dt>
+            <dd>{{ maskedPhone }}</dd>
+          </div>
+          <div>
+            <dt>实名状态</dt>
+            <dd :class="`is-${realnameTone}`">{{ realnameStatusLabel(session.realnameStatus) }}</dd>
+          </div>
+        </dl>
+        <button class="realname-shortcut" type="button" @click="router.push('/realname')">
+          <span>查看实名认证</span>
+          <el-icon><CircleCheckFilled /></el-icon>
+        </button>
+      </aside>
+    </div>
+
+    <div class="service-panels">
+      <section class="service-panel">
+        <div class="service-head">
+          <h2>买家服务</h2>
+          <RouterLink class="service-all" :to="{ path: '/orders', query: { tab: 'all' } }">
+            <span>全部订单</span>
+            <el-icon><Tickets /></el-icon>
+          </RouterLink>
+        </div>
+        <div class="service-grid buyer-grid">
+          <RouterLink v-for="item in buyerServices" :key="item.label" class="service-item" :to="item.to">
+            <span class="service-icon" :class="`is-${item.tone}`">
+              <el-icon><component :is="item.icon" /></el-icon>
+            </span>
+            <strong>{{ item.label }}</strong>
+          </RouterLink>
+        </div>
+      </section>
+
+      <section class="service-panel">
+        <div class="service-head">
+          <h2>卖家服务</h2>
+          <RouterLink class="service-all" to="/seller/listings">
+            <span>管理发布</span>
+            <el-icon><Goods /></el-icon>
+          </RouterLink>
+        </div>
+        <div class="service-grid seller-grid">
+          <RouterLink v-for="item in sellerServices" :key="item.label" class="service-item" :to="item.to">
+            <span class="service-icon" :class="`is-${item.tone}`">
+              <el-icon><component :is="item.icon" /></el-icon>
+            </span>
+            <strong>{{ item.label }}</strong>
+          </RouterLink>
+        </div>
+      </section>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.profile-page {
+  width: min(1180px, 100%);
+  margin: 0 auto;
+  padding: 10px 0 40px;
+}
+
+.profile-hero {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 30px 34px;
+  border: 1px solid #eef1f5;
+  border-radius: 18px;
+  background:
+    linear-gradient(135deg, rgba(255, 106, 0, 0.12), rgba(37, 99, 235, 0.08)),
+    #ffffff;
+  box-shadow: 0 16px 36px rgba(23, 35, 61, 0.08);
+}
+
+.hero-avatar,
+.avatar-preview {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #ff6a00;
+  color: #ffffff;
+  font-weight: 900;
+}
+
+.hero-avatar {
+  width: 74px;
+  height: 74px;
+  font-size: 28px;
+  flex-shrink: 0;
+}
+
+.hero-avatar img,
+.avatar-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero-copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.eyebrow {
+  color: #ff6a00;
+  font-size: 13px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.hero-copy h1 {
+  margin: 8px 0 0;
+  color: #17233d;
+  font-size: 34px;
+  line-height: 1.2;
+}
+
+.hero-copy p {
+  margin: 10px 0 0;
+  color: #64748b;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.hero-realname {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.hero-realname.is-verified,
+.account-card dd.is-verified {
+  background: #ecfdf3;
+  color: #16a34a;
+}
+
+.hero-realname.is-pending,
+.account-card dd.is-pending {
+  background: #fff7ed;
+  color: #f97316;
+}
+
+.hero-realname.is-rejected,
+.account-card dd.is-rejected {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+.hero-realname.is-unverified,
+.account-card dd.is-unverified {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.profile-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 22px;
+  margin-top: 22px;
+}
+
+.edit-panel,
+.account-card {
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 10px 28px rgba(23, 35, 61, 0.06);
+}
+
+.edit-panel {
+  padding: 28px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 26px;
+}
+
+.panel-icon {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  border-radius: 12px;
+  background: #fff3e8;
+  color: #ff6a00;
+  font-size: 24px;
+}
+
+.panel-head h2 {
+  margin: 0;
+  color: #17233d;
+  font-size: 22px;
+}
+
+.panel-head p {
+  margin: 6px 0 0;
+  color: #64748b;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.avatar-editor {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  max-width: 640px;
+  padding: 20px;
+  border-radius: 14px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.avatar-preview {
+  position: relative;
+  width: 82px;
+  height: 82px;
+  border: none;
+  font-size: 30px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.avatar-preview i {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  display: grid;
+  width: 26px;
+  height: 26px;
+  place-items: center;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #ff6a00;
+  box-shadow: 0 4px 12px rgba(23, 35, 61, 0.16);
+}
+
+.avatar-actions strong {
+  display: block;
+  color: #17233d;
+  font-size: 20px;
+}
+
+.avatar-actions p {
+  margin: 6px 0 12px;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.profile-form {
+  display: grid;
+  gap: 6px;
+  max-width: 640px;
+  margin-top: 24px;
+}
+
+.profile-form :deep(.el-form-item__label) {
+  color: #475569;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.profile-form :deep(.el-input__wrapper) {
+  min-height: 48px;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px #dbe3ee inset;
+}
+
+.profile-form :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #ff6a00 inset, 0 0 0 4px rgba(255, 106, 0, 0.08);
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.form-actions .el-button {
+  height: 46px;
+  border-radius: 10px;
+  font-weight: 900;
+}
+
+.form-actions .el-button--primary {
+  border: none;
+  background: #ff6a00;
+  box-shadow: 0 10px 20px rgba(255, 106, 0, 0.18);
+}
+
+.account-card {
+  padding: 24px;
+}
+
+.card-kicker {
+  color: #8b9cb5;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.account-card dl {
+  display: grid;
+  gap: 12px;
+  margin: 18px 0 0;
+}
+
+.account-card dl div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 48px;
+  padding: 0 14px;
+  border-radius: 10px;
+  background: #f8fafc;
+}
+
+.account-card dt {
+  color: #8b9cb5;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.account-card dd {
+  margin: 0;
+  color: #334155;
+  font-size: 14px;
+  font-weight: 900;
+  text-align: right;
+}
+
+.realname-shortcut {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 44px;
+  margin-top: 18px;
+  padding: 0 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #ffffff;
+  color: #475569;
+  font-size: 14px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.realname-shortcut:hover {
+  border-color: #ff6a00;
+  color: #ff6a00;
+}
+
+.service-panels {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22px;
+  margin-top: 22px;
+}
+
+.service-panel {
+  padding: 24px;
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 10px 28px rgba(23, 35, 61, 0.06);
+}
+
+.service-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.service-head h2 {
+  margin: 0;
+  color: #17233d;
+  font-size: 22px;
+}
+
+.service-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 900;
+  text-decoration: none;
+}
+
+.service-all:hover {
+  color: #ff6a00;
+}
+
+.service-grid {
+  display: grid;
+  gap: 14px;
+  margin-top: 22px;
+}
+
+.buyer-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.seller-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.service-item {
+  display: grid;
+  min-width: 0;
+  min-height: 118px;
+  place-items: center;
+  gap: 10px;
+  padding: 16px 10px;
+  border: 1px solid #edf2f7;
+  border-radius: 14px;
+  background: #fbfdff;
+  color: #1f2937;
+  text-align: center;
+  text-decoration: none;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.service-item:hover {
+  border-color: rgba(255, 106, 0, 0.35);
+  box-shadow: 0 12px 24px rgba(23, 35, 61, 0.08);
+  transform: translateY(-2px);
+}
+
+.service-item strong {
+  color: #334155;
+  font-size: 15px;
+  font-weight: 900;
+  line-height: 1.35;
+}
+
+.service-icon {
+  display: grid;
+  width: 58px;
+  height: 58px;
+  place-items: center;
+  border-radius: 14px;
+  font-size: 28px;
+}
+
+.service-icon.is-warning {
+  background: #fff7ed;
+  color: #f59e0b;
+}
+
+.service-icon.is-info {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.service-icon.is-primary {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.service-icon.is-success {
+  background: #ecfdf3;
+  color: #10b981;
+}
+
+.service-icon.is-orange {
+  background: #fff1e8;
+  color: #ff6a00;
+}
+
+.service-icon.is-purple {
+  background: #f3e8ff;
+  color: #8b5cf6;
+}
+
+.service-icon.is-teal {
+  background: #e8f7f5;
+  color: #0f766e;
+}
+
+@media (max-width: 1100px) {
+  .profile-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .service-panels {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/frontend/src/features/auth/views/RealnameView.vue b/frontend/src/features/auth/views/RealnameView.vue
new file mode 100644
index 0000000..b199d1a
--- /dev/null
+++ b/frontend/src/features/auth/views/RealnameView.vue
@@ -0,0 +1,584 @@
+<script setup lang="ts">
+import {
+  CircleCheckFilled,
+  CreditCard,
+  DocumentChecked,
+  Lock,
+  Postcard,
+  RefreshRight,
+  User,
+  WarningFilled,
+} from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { getRealnameStatus, startRealname, type RealnameStatus } from '@/api/realname'
+import { useSessionStore } from '@/stores/session'
+import { realnameStatusLabel } from '@/utils/statusLabels'
+import { formatDateTime } from '@/utils/time'
+
+const session = useSessionStore()
+const route = useRoute()
+const router = useRouter()
+const loading = ref(false)
+const status = ref<RealnameStatus | null>(null)
+const form = reactive({
+  name: '',
+  idNo: '',
+})
+
+const currentStatus = computed(() => status.value?.status || 'unverified')
+const statusMeta = computed(() => {
+  switch (currentStatus.value) {
+    case 'verified':
+      return {
+        icon: CircleCheckFilled,
+        tone: 'verified',
+        title: '认证已完成',
+        summary: '可发布账号并参与需要实名的交易流程。',
+      }
+    case 'pending':
+      return {
+        icon: DocumentChecked,
+        tone: 'pending',
+        title: '认证处理中',
+        summary: '认证结果返回后会自动同步到账号状态。',
+      }
+    case 'rejected':
+      return {
+        icon: WarningFilled,
+        tone: 'rejected',
+        title: '认证未通过',
+        summary: status.value?.fail_reason || '请核对姓名与身份证号后重新提交。',
+      }
+    default:
+      return {
+        icon: Postcard,
+        tone: 'unverified',
+        title: '等待认证',
+        summary: '提交真实姓名与身份证号后即可完成核验。',
+      }
+  }
+})
+
+const canSubmit = computed(() => !!session.token && currentStatus.value !== 'verified')
+
+onMounted(loadStatus)
+
+function redirectAfterVerified() {
+  const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : ''
+  if (redirect) {
+    router.replace(redirect)
+  }
+}
+
+async function loadStatus() {
+  if (!session.token) return
+  try {
+    status.value = await getRealnameStatus()
+    if (status.value.status === 'verified') {
+      await session.loadMe()
+      redirectAfterVerified()
+    }
+  } catch {
+    status.value = null
+  }
+}
+
+async function handleSubmit() {
+  if (!form.name.trim()) {
+    ElMessage.warning('请输入真实姓名')
+    return
+  }
+  if (!form.idNo.trim() || form.idNo.length < 15) {
+    ElMessage.warning('请输入有效的证件号')
+    return
+  }
+  loading.value = true
+  try {
+    status.value = await startRealname(form.name, form.idNo)
+    await session.loadMe()
+    ElMessage.success('实名认证已通过')
+    redirectAfterVerified()
+  } catch (error) {
+    ElMessage.error(readError(error, '实名认证失败'))
+  } finally {
+    loading.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
+  }
+  return fallback
+}
+</script>
+
+<template>
+  <section class="realname-page">
+    <div class="realname-hero">
+      <div class="hero-copy">
+        <span class="eyebrow">Realname</span>
+        <h1>实名认证</h1>
+        <p>完成实名后可发布账号、进入交易流程，并提升账号可信度。</p>
+      </div>
+      <div class="hero-status" :class="`is-${statusMeta.tone}`">
+        <el-icon><component :is="statusMeta.icon" /></el-icon>
+        <div>
+          <span>当前状态</span>
+          <strong>{{ realnameStatusLabel(currentStatus) }}</strong>
+        </div>
+      </div>
+    </div>
+
+    <el-alert
+      v-if="!session.token"
+      class="login-alert"
+      type="warning"
+      :closable="false"
+      title="请先登录后再实名认证"
+    />
+
+    <div class="realname-layout">
+      <section class="verify-panel">
+        <div class="panel-head">
+          <div class="panel-icon">
+            <el-icon><CreditCard /></el-icon>
+          </div>
+          <div>
+            <h2>{{ currentStatus === 'verified' ? '实名信息' : '提交认证' }}</h2>
+            <p>{{ currentStatus === 'verified' ? '实名信息已完成脱敏展示。' : '请使用本人真实身份信息完成核验。' }}</p>
+          </div>
+        </div>
+
+        <div v-if="currentStatus === 'verified'" class="verified-summary">
+          <div class="verified-mark">
+            <el-icon><CircleCheckFilled /></el-icon>
+          </div>
+          <div class="verified-copy">
+            <strong>认证通过</strong>
+            <span>{{ status?.verified_at ? formatDateTime(status.verified_at) : '已完成实名核验' }}</span>
+          </div>
+        </div>
+
+        <el-form v-else class="verify-form" label-position="top">
+          <el-form-item label="姓名">
+            <el-input v-model="form.name" :prefix-icon="User" placeholder="请输入真实姓名" size="large" />
+          </el-form-item>
+          <el-form-item label="身份证号">
+            <el-input
+              v-model="form.idNo"
+              :prefix-icon="Postcard"
+              maxlength="18"
+              placeholder="请输入 18 位身份证号"
+              size="large"
+            />
+          </el-form-item>
+          <el-button
+            type="primary"
+            size="large"
+            :icon="DocumentChecked"
+            :disabled="!canSubmit"
+            :loading="loading"
+            @click="handleSubmit"
+          >
+            提交认证
+          </el-button>
+        </el-form>
+      </section>
+
+      <aside class="status-card" :class="`is-${statusMeta.tone}`">
+        <div class="status-visual">
+          <el-icon><component :is="statusMeta.icon" /></el-icon>
+        </div>
+        <div class="status-content">
+          <span class="status-kicker">认证状态</span>
+          <h2>{{ statusMeta.title }}</h2>
+          <p>{{ statusMeta.summary }}</p>
+        </div>
+
+        <dl class="status-details">
+          <div>
+            <dt>姓名</dt>
+            <dd>{{ status?.masked_name || '待提交' }}</dd>
+          </div>
+          <div>
+            <dt>证件号</dt>
+            <dd>{{ status?.masked_id_no || '待提交' }}</dd>
+          </div>
+          <div>
+            <dt>通过时间</dt>
+            <dd>{{ status?.verified_at ? formatDateTime(status.verified_at) : '暂无' }}</dd>
+          </div>
+        </dl>
+
+        <div class="security-note">
+          <el-icon><Lock /></el-icon>
+          <span>身份信息仅用于实名核验，页面只展示脱敏结果。</span>
+        </div>
+      </aside>
+    </div>
+
+    <div class="realname-actions">
+      <RouterLink class="secondary-action" to="/seller/listings/create">
+        <el-icon><RefreshRight /></el-icon>
+        <span>返回发布账号</span>
+      </RouterLink>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.realname-page {
+  width: min(1180px, 100%);
+  margin: 0 auto;
+  padding: 10px 0 40px;
+}
+
+.realname-hero {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  min-height: 156px;
+  padding: 34px 36px;
+  border: 1px solid #eef1f5;
+  border-radius: 18px;
+  background:
+    linear-gradient(135deg, rgba(255, 106, 0, 0.12) 0%, rgba(22, 163, 74, 0.08) 52%, rgba(37, 99, 235, 0.08) 100%),
+    #ffffff;
+  box-shadow: 0 16px 36px rgba(23, 35, 61, 0.08);
+}
+
+.hero-copy {
+  max-width: 640px;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 12px;
+  color: #ff6a00;
+  font-size: 13px;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.hero-copy h1 {
+  margin: 0;
+  color: #17233d;
+  font-size: 36px;
+  line-height: 1.2;
+}
+
+.hero-copy p {
+  margin: 14px 0 0;
+  color: #64748b;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.7;
+}
+
+.hero-status {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 210px;
+  padding: 18px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.88);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow: 0 12px 28px rgba(23, 35, 61, 0.08);
+}
+
+.hero-status .el-icon {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border-radius: 12px;
+  font-size: 24px;
+}
+
+.hero-status span,
+.status-kicker {
+  color: #8b9cb5;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.hero-status strong {
+  display: block;
+  margin-top: 4px;
+  color: #17233d;
+  font-size: 22px;
+  line-height: 1.2;
+}
+
+.hero-status.is-verified .el-icon,
+.status-card.is-verified .status-visual {
+  background: #ecfdf3;
+  color: #16a34a;
+}
+
+.hero-status.is-pending .el-icon,
+.status-card.is-pending .status-visual {
+  background: #fff7ed;
+  color: #f97316;
+}
+
+.hero-status.is-rejected .el-icon,
+.status-card.is-rejected .status-visual {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+.hero-status.is-unverified .el-icon,
+.status-card.is-unverified .status-visual {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.login-alert {
+  margin-top: 18px;
+}
+
+.realname-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 380px;
+  gap: 22px;
+  margin-top: 22px;
+}
+
+.verify-panel,
+.status-card {
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 10px 28px rgba(23, 35, 61, 0.06);
+}
+
+.verify-panel {
+  min-height: 430px;
+  padding: 28px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 28px;
+}
+
+.panel-icon {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  border-radius: 12px;
+  background: #fff3e8;
+  color: #ff6a00;
+  font-size: 24px;
+}
+
+.panel-head h2,
+.status-content h2 {
+  margin: 0;
+  color: #17233d;
+  font-size: 22px;
+  line-height: 1.3;
+}
+
+.panel-head p,
+.status-content p {
+  margin: 6px 0 0;
+  color: #64748b;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.verify-form {
+  display: grid;
+  gap: 6px;
+  max-width: 620px;
+}
+
+.verify-form :deep(.el-form-item__label) {
+  color: #475569;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.verify-form :deep(.el-input__wrapper) {
+  min-height: 48px;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px #dbe3ee inset;
+}
+
+.verify-form :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #ff6a00 inset, 0 0 0 4px rgba(255, 106, 0, 0.08);
+}
+
+.verify-form .el-button {
+  width: 168px;
+  height: 46px;
+  margin-top: 8px;
+  border: none;
+  border-radius: 10px;
+  background: #ff6a00;
+  font-weight: 900;
+  box-shadow: 0 10px 20px rgba(255, 106, 0, 0.18);
+}
+
+.verified-summary {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  max-width: 620px;
+  padding: 24px;
+  border-radius: 14px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.verified-mark {
+  display: grid;
+  width: 58px;
+  height: 58px;
+  place-items: center;
+  border-radius: 16px;
+  background: #ecfdf3;
+  color: #16a34a;
+  font-size: 34px;
+}
+
+.verified-copy strong {
+  display: block;
+  color: #17233d;
+  font-size: 22px;
+}
+
+.verified-copy span {
+  display: block;
+  margin-top: 6px;
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.status-card {
+  padding: 24px;
+}
+
+.status-visual {
+  display: grid;
+  width: 56px;
+  height: 56px;
+  place-items: center;
+  border-radius: 16px;
+  font-size: 30px;
+}
+
+.status-content {
+  margin-top: 18px;
+}
+
+.status-details {
+  display: grid;
+  gap: 12px;
+  margin: 24px 0 0;
+}
+
+.status-details div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 46px;
+  padding: 0 14px;
+  border-radius: 10px;
+  background: #f8fafc;
+}
+
+.status-details dt {
+  color: #8b9cb5;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.status-details dd {
+  margin: 0;
+  color: #334155;
+  font-size: 14px;
+  font-weight: 800;
+  text-align: right;
+}
+
+.security-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-top: 22px;
+  padding: 14px;
+  border-radius: 12px;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.6;
+}
+
+.security-note .el-icon {
+  margin-top: 2px;
+  color: #2563eb;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.realname-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 18px;
+}
+
+.secondary-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 16px;
+  border-radius: 10px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  color: #475569;
+  font-size: 14px;
+  font-weight: 800;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.secondary-action:hover {
+  border-color: #ff6a00;
+  color: #ff6a00;
+  box-shadow: 0 8px 18px rgba(255, 106, 0, 0.08);
+}
+
+@media (max-width: 1100px) {
+  .realname-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .realname-hero {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .hero-status {
+    width: 100%;
+  }
+}
+</style>
diff --git a/frontend/src/features/listings/api/homeConfig.ts b/frontend/src/features/listings/api/homeConfig.ts
new file mode 100644
index 0000000..05bd33d
--- /dev/null
+++ b/frontend/src/features/listings/api/homeConfig.ts
@@ -0,0 +1,95 @@
+import { apiClient } from '@/shared/api/client'
+import type { ApiResponse } from '@/shared/types/types'
+import {
+  mergeListingPublishOptions,
+  type ListingPublishOptions,
+} from './listingOptions'
+
+export interface HomeBannerSlide {
+  eyebrow: string
+  title: string
+  badge: string
+  pill: string
+  tone: string
+  image_url?: string
+}
+
+export interface MobileHomeConfig {
+  announcements: string[]
+  banners: HomeBannerSlide[]
+  publish_options: ListingPublishOptions
+}
+
+export const defaultHomeAnnouncements = [
+  '平台担保交易，拒绝私下转账/共享验证码，交接全程留痕。',
+  '优先推荐同地区账号，减少异地登录保护触发。',
+  '下单前请核对哈夫币、保险、体力负重和截图信息。',
+]
+
+export const defaultHomeBanners: HomeBannerSlide[] = [
+  {
+    eyebrow: '三角洲行动账号专区',
+    title: '高哈夫币 · 安全交接 · 随租随玩',
+    badge: 'HOT',
+    pill: '新人领券最高减 20 元',
+    tone: 'blue',
+    image_url: '',
+  },
+  {
+    eyebrow: '平台担保交易',
+    title: '交接全程留痕，拒绝私下转账',
+    badge: 'SAFE',
+    pill: '租号前先验实名与资料',
+    tone: 'green',
+    image_url: '',
+  },
+  {
+    eyebrow: '高效筛选',
+    title: '按区服、段位、哈夫币快速找号',
+    badge: 'FAST',
+    pill: '支持扫码号与账密号',
+    tone: 'orange',
+    image_url: '',
+  },
+]
+
+export async function fetchMobileHomeConfig() {
+  const { data } = await apiClient.get<ApiResponse<MobileHomeConfig>>('/mobile-home-config')
+  return mergeHomeConfig(data.data)
+}
+
+export function mergeHomeConfig(config?: Partial<MobileHomeConfig>): MobileHomeConfig {
+  const announcements =
+    config?.announcements
+      ?.map((item) => (typeof item === 'string' ? item.trim() : ''))
+      .filter(Boolean) || []
+  const banners =
+    config?.banners
+      ?.map((item) => {
+        const banner = isBannerLike(item) ? item : ({} as Partial<HomeBannerSlide>)
+        return {
+          eyebrow: banner.eyebrow?.trim() || '',
+          title: banner.title?.trim() || '',
+          badge: banner.badge?.trim() || '',
+          pill: banner.pill?.trim() || '',
+          tone: normalizeBannerTone(banner.tone),
+          image_url: banner.image_url?.trim() || '',
+        }
+      })
+      .filter((item) => item.title || item.image_url) || []
+
+  return {
+    announcements: announcements.length ? announcements : defaultHomeAnnouncements,
+    banners: banners.length ? banners : defaultHomeBanners,
+    publish_options: mergeListingPublishOptions(config?.publish_options),
+  }
+}
+
+function isBannerLike(value: unknown): value is Partial<HomeBannerSlide> {
+  return typeof value === 'object' && value !== null
+}
+
+function normalizeBannerTone(tone?: string) {
+  if (tone === 'green' || tone === 'orange') return tone
+  return 'blue'
+}
diff --git a/frontend/src/features/listings/api/listingOptions.ts b/frontend/src/features/listings/api/listingOptions.ts
new file mode 100644
index 0000000..2818324
--- /dev/null
+++ b/frontend/src/features/listings/api/listingOptions.ts
@@ -0,0 +1,398 @@
+import { apiClient } from '@/shared/api/client'
+import type { ApiResponse } from '@/shared/types/types'
+
+export type ChargeMode = '赠送' | '收费'
+
+export type QuantityKey = string
+
+export type ScreenshotKey = string
+
+export type SkinCategoryKey = string
+
+export interface PublishOptionGroup {
+  key: SkinCategoryKey | string
+  title: string
+  options: string[]
+}
+
+export interface PublishQuantityItem {
+  key: QuantityKey
+  label: string
+  price: string
+  placeholder?: string
+}
+
+export interface PublishScreenshotSlot {
+  key: ScreenshotKey
+  label: string
+  required: boolean
+  hint: string
+}
+
+export interface PublishPriceConfig {
+  deposit_placeholder: string
+  price_placeholder: string
+  ratio_description: string
+}
+
+export interface PublishDepositSkinGroupRule {
+  group_key: string
+  label: string
+  amount_per_item: number
+}
+
+export interface PublishDepositRecommendConfig {
+  base_amount: number
+  skin_group_rules: PublishDepositSkinGroupRule[]
+}
+
+export interface PublishInsuranceBaseRatio {
+  insurance: string
+  ratio: number
+}
+
+export interface PublishRatioConfigItem {
+  key: string
+  label: string
+  kind: string
+  group_key?: string
+  missing_penalty: number
+}
+
+export interface PublishCoinCorrection {
+  threshold_m: number
+  correction: number
+}
+
+export interface PublishSaleFixedMarkupRule {
+  min_m: number
+  max_m: number
+  markup_amount: number
+}
+
+export interface PublishSaleRatioAdjustmentRule {
+  min_m: number
+  max_m: number
+  ratio_subtract: number
+}
+
+export interface PublishRatioConfig {
+  insurance_base_ratios: PublishInsuranceBaseRatio[]
+  config_items: PublishRatioConfigItem[]
+  coin_corrections: PublishCoinCorrection[]
+}
+
+export interface PublishSalePriceConfig {
+  fixed_markup_rules: PublishSaleFixedMarkupRule[]
+  ratio_adjustment_rules: PublishSaleRatioAdjustmentRule[]
+}
+
+export interface ListingPublishOptions {
+  server_options: string[]
+  face_options: string[]
+  rank_options: string[]
+  insurance_options: string[]
+  level_options: string[]
+  login_method_options: string[]
+  region_options: string[]
+  skin_groups: PublishOptionGroup[]
+  quantity_items: PublishQuantityItem[]
+  screenshot_slots: PublishScreenshotSlot[]
+  ban_record_options: string[]
+  ban_evidence_options: string[]
+  fire_level_min: number
+  price_config: PublishPriceConfig
+  deposit_recommend_config: PublishDepositRecommendConfig
+  ratio_config: PublishRatioConfig
+}
+
+export const emptyListingPublishOptions: ListingPublishOptions = {
+  server_options: [],
+  face_options: [],
+  rank_options: [],
+  insurance_options: [],
+  level_options: [],
+  login_method_options: [],
+  region_options: [],
+  skin_groups: [],
+  quantity_items: [],
+  screenshot_slots: [],
+  ban_record_options: [],
+  ban_evidence_options: [],
+  fire_level_min: 38,
+  price_config: {
+    deposit_placeholder: '',
+    price_placeholder: '',
+    ratio_description: '',
+  },
+  deposit_recommend_config: {
+    base_amount: 50,
+    skin_group_rules: [
+      { group_key: 'melee', label: '刀皮', amount_per_item: 5 },
+      { group_key: 'operatorGold', label: '干员金皮', amount_per_item: 10 },
+      { group_key: 'operatorRed', label: '干员红皮', amount_per_item: 30 },
+    ],
+  },
+  ratio_config: {
+    insurance_base_ratios: [],
+    config_items: [],
+    coin_corrections: [],
+  },
+}
+
+export const emptyListingSalePriceConfig: PublishSalePriceConfig = {
+  fixed_markup_rules: [
+    { min_m: 10, max_m: 30, markup_amount: 28 },
+    { min_m: 30, max_m: 50, markup_amount: 31 },
+    { min_m: 50, max_m: 70, markup_amount: 34 },
+    { min_m: 70, max_m: 90, markup_amount: 38 },
+  ],
+  ratio_adjustment_rules: [
+    { min_m: 90, max_m: 150, ratio_subtract: 5 },
+    { min_m: 150, max_m: 230, ratio_subtract: 4 },
+    { min_m: 230, max_m: 310, ratio_subtract: 3.5 },
+    { min_m: 310, max_m: 390, ratio_subtract: 3 },
+    { min_m: 390, max_m: 470, ratio_subtract: 0 },
+    { min_m: 470, max_m: 550, ratio_subtract: 0 },
+    { min_m: 550, max_m: 0, ratio_subtract: 0 },
+  ],
+}
+
+export async function fetchListingPublishOptions() {
+  const { data } = await apiClient.get<ApiResponse<ListingPublishOptions>>('/listing-publish-options')
+  return mergeListingPublishOptions(data.data)
+}
+
+export async function fetchListingSalePriceConfig() {
+  const { data } = await apiClient.get<ApiResponse<PublishSalePriceConfig>>('/listing-sale-price-config')
+  return mergeListingSalePriceConfig(data.data)
+}
+
+export function mergeListingPublishOptions(options?: Partial<ListingPublishOptions>): ListingPublishOptions {
+  return {
+    server_options: normalizeStringList(options?.server_options),
+    face_options: normalizeStringList(options?.face_options),
+    rank_options: normalizeStringList(options?.rank_options),
+    insurance_options: normalizeStringList(options?.insurance_options),
+    level_options: normalizeStringList(options?.level_options),
+    login_method_options: normalizeStringList(options?.login_method_options),
+    region_options: normalizeStringList(options?.region_options),
+    skin_groups: normalizeOptionGroups(options?.skin_groups),
+    quantity_items: normalizeQuantityItems(options?.quantity_items),
+    screenshot_slots: normalizeScreenshotSlots(options?.screenshot_slots),
+    ban_record_options: normalizeStringList(options?.ban_record_options),
+    ban_evidence_options: normalizeStringList(options?.ban_evidence_options),
+    fire_level_min: readPositiveInteger(options?.fire_level_min, 38),
+    price_config: normalizePriceConfig(options?.price_config),
+    deposit_recommend_config: normalizeDepositRecommendConfig(options?.deposit_recommend_config),
+    ratio_config: normalizeRatioConfig(options?.ratio_config),
+  }
+}
+
+export function mergeListingSalePriceConfig(options?: Partial<PublishSalePriceConfig>): PublishSalePriceConfig {
+  return normalizeSalePriceConfig(options)
+}
+
+function normalizeStringList(values?: unknown[]) {
+  return Array.isArray(values)
+    ? values.map((item) => (typeof item === 'string' ? item.trim() : '')).filter(Boolean)
+    : []
+}
+
+function normalizeOptionGroups(values?: unknown[]): PublishOptionGroup[] {
+  if (!Array.isArray(values)) return []
+  return values
+    .map((item) => {
+      const group = isRecord(item) ? item : {}
+      return {
+        key: typeof group.key === 'string' ? group.key.trim() : '',
+        title: typeof group.title === 'string' ? group.title.trim() : '',
+        options: normalizeStringList(Array.isArray(group.options) ? group.options : []),
+      }
+    })
+    .filter((item) => item.key && item.title)
+}
+
+function normalizeQuantityItems(values?: unknown[]): PublishQuantityItem[] {
+  if (!Array.isArray(values)) return []
+  return values
+    .map((item) => {
+      const row = isRecord(item) ? item : {}
+      return {
+        key: typeof row.key === 'string' ? row.key.trim() : '',
+        label: typeof row.label === 'string' ? row.label.trim() : '',
+        price: typeof row.price === 'string' ? row.price.trim() : '',
+        placeholder: typeof row.placeholder === 'string' ? row.placeholder.trim() : undefined,
+      }
+    })
+    .filter((item) => item.key && item.label)
+}
+
+function normalizeScreenshotSlots(values?: unknown[]): PublishScreenshotSlot[] {
+  if (!Array.isArray(values)) return []
+  return values
+    .map((item) => {
+      const row = isRecord(item) ? item : {}
+      return {
+        key: typeof row.key === 'string' ? row.key.trim() : '',
+        label: typeof row.label === 'string' ? row.label.trim() : '',
+        required: row.required === true,
+        hint: typeof row.hint === 'string' ? row.hint.trim() : '',
+      }
+    })
+    .filter((item) => item.key && item.label)
+}
+
+function normalizePriceConfig(value?: unknown): PublishPriceConfig {
+  const row = isRecord(value) ? value : {}
+  return {
+    deposit_placeholder: typeof row.deposit_placeholder === 'string' ? row.deposit_placeholder.trim() : '',
+    price_placeholder: typeof row.price_placeholder === 'string' ? row.price_placeholder.trim() : '',
+    ratio_description: typeof row.ratio_description === 'string' ? row.ratio_description.trim() : '',
+  }
+}
+
+function normalizeDepositRecommendConfig(value?: unknown): PublishDepositRecommendConfig {
+  const row = isRecord(value) ? value : {}
+  const config = {
+    base_amount: readNumber(row.base_amount),
+    skin_group_rules: normalizeDepositSkinGroupRules(
+      Array.isArray(row.skin_group_rules) ? row.skin_group_rules : [],
+    ),
+  }
+  if (config.base_amount <= 0) {
+    config.base_amount = emptyListingPublishOptions.deposit_recommend_config.base_amount
+  }
+  if (config.skin_group_rules.length === 0) {
+    config.skin_group_rules = [...emptyListingPublishOptions.deposit_recommend_config.skin_group_rules]
+  }
+  return config
+}
+
+function normalizeDepositSkinGroupRules(values: unknown[]): PublishDepositSkinGroupRule[] {
+  return values
+    .map((item) => {
+      const row = isRecord(item) ? item : {}
+      return {
+        group_key: typeof row.group_key === 'string' ? row.group_key.trim() : '',
+        label: typeof row.label === 'string' ? row.label.trim() : '',
+        amount_per_item: readNumber(row.amount_per_item),
+      }
+    })
+    .filter((item) => item.group_key && item.label && item.amount_per_item >= 0)
+}
+
+function normalizeRatioConfig(value?: unknown): PublishRatioConfig {
+  const row = isRecord(value) ? value : {}
+  return {
+    insurance_base_ratios: normalizeInsuranceBaseRatios(
+      Array.isArray(row.insurance_base_ratios) ? row.insurance_base_ratios : [],
+    ),
+    config_items: normalizeRatioConfigItems(
+      Array.isArray(row.config_items) ? row.config_items : [],
+    ),
+    coin_corrections: normalizeCoinCorrections(
+      Array.isArray(row.coin_corrections) ? row.coin_corrections : [],
+    ),
+  }
+}
+
+function normalizeSalePriceConfig(value?: unknown): PublishSalePriceConfig {
+  const row = isRecord(value) ? value : {}
+  const config = {
+    fixed_markup_rules: normalizeSaleFixedMarkupRules(
+      Array.isArray(row.fixed_markup_rules) ? row.fixed_markup_rules : [],
+    ),
+    ratio_adjustment_rules: normalizeSaleRatioAdjustmentRules(
+      Array.isArray(row.ratio_adjustment_rules) ? row.ratio_adjustment_rules : [],
+    ),
+  }
+  if (config.fixed_markup_rules.length === 0 && config.ratio_adjustment_rules.length === 0) {
+    return JSON.parse(JSON.stringify(emptyListingSalePriceConfig)) as PublishSalePriceConfig
+  }
+  return config
+}
+
+function normalizeInsuranceBaseRatios(values: unknown[]): PublishInsuranceBaseRatio[] {
+  return values
+    .map((item) => {
+      const row = isRecord(item) ? item : {}
+      return {
+        insurance: typeof row.insurance === 'string' ? row.insurance.trim() : '',
+        ratio: readNumber(row.ratio),
+      }
+    })
+    .filter((item) => item.insurance && item.ratio > 0)
+}
+
+function normalizeRatioConfigItems(values: unknown[]): PublishRatioConfigItem[] {
+  return values
+    .map((item) => {
+      const row = isRecord(item) ? item : {}
+      return {
+        key: typeof row.key === 'string' ? row.key.trim() : '',
+        label: typeof row.label === 'string' ? row.label.trim() : '',
+        kind: typeof row.kind === 'string' ? row.kind.trim() : '',
+        group_key: typeof row.group_key === 'string' ? row.group_key.trim() : '',
+        missing_penalty: readNumber(row.missing_penalty),
+      }
+    })
+    .filter((item) => item.key && item.label && item.kind)
+}
+
+function normalizeCoinCorrections(values: unknown[]): PublishCoinCorrection[] {
+  return values
+    .map((item) => {
+      const row = isRecord(item) ? item : {}
+      return {
+        threshold_m: readNumber(row.threshold_m),
+        correction: readNumber(row.correction),
+      }
+    })
+    .filter((item) => item.threshold_m >= 0 && item.correction > 0)
+}
+
+function normalizeSaleFixedMarkupRules(values: unknown[]): PublishSaleFixedMarkupRule[] {
+  return values
+    .map((item) => {
+      const row = isRecord(item) ? item : {}
+      return {
+        min_m: readNumber(row.min_m),
+        max_m: readNumber(row.max_m),
+        markup_amount: readNumber(row.markup_amount),
+      }
+    })
+    .filter((item) => item.min_m >= 0 && item.max_m >= item.min_m && item.markup_amount >= 0)
+}
+
+function normalizeSaleRatioAdjustmentRules(values: unknown[]): PublishSaleRatioAdjustmentRule[] {
+  return values
+    .map((item) => {
+      const row = isRecord(item) ? item : {}
+      return {
+        min_m: readNumber(row.min_m),
+        max_m: readNumber(row.max_m),
+        ratio_subtract: readNumber(row.ratio_subtract),
+      }
+    })
+    .filter(
+      (item) =>
+        item.min_m >= 0 &&
+        (item.max_m === 0 || item.max_m >= item.min_m) &&
+        item.ratio_subtract >= 0,
+    )
+}
+
+function readNumber(value: unknown) {
+  const parsed = Number(value)
+  return Number.isFinite(parsed) ? parsed : 0
+}
+
+function readPositiveInteger(value: unknown, fallback: number) {
+  const parsed = Math.trunc(readNumber(value))
+  return parsed > 0 ? parsed : fallback
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
diff --git a/frontend/src/features/listings/api/listings.ts b/frontend/src/features/listings/api/listings.ts
new file mode 100644
index 0000000..8a673cb
--- /dev/null
+++ b/frontend/src/features/listings/api/listings.ts
@@ -0,0 +1,194 @@
+import { apiClient } from '@/shared/api/client'
+import type { ApiResponse } from '@/shared/types/types'
+import type { ListingReviewStatus, ListingStatus } from '@/shared/types/status'
+
+export interface Listing {
+  id: number
+  account_id: number
+  owner_id: number
+  owner_phone?: string
+  owner_nickname?: string
+  title: string
+  description: string
+  game_name: string
+  server_region: string
+  login_platform: string
+  rank_level: string
+  haf_coin_amount: number
+  asset_summary?: Record<string, unknown>
+  screenshot_urls: string[]
+  cover_url: string
+  price: number
+  deposit_amount: number
+  is_accelerated_sale?: boolean
+  in_transaction: boolean
+  status: ListingStatus
+  review_status: ListingReviewStatus
+  review_reason: string
+  published_at?: string
+  created_at: string
+  updated_at: string
+}
+
+export interface ListingPayload {
+  title: string
+  description: string
+  server_region: string
+  login_platform: string
+  rank_level: string
+  haf_coin_amount: number
+  asset_summary?: Record<string, unknown>
+  screenshot_urls: string[]
+  price: number
+  deposit_amount: number
+}
+
+export interface PublicListingQuery {
+  page?: number
+  page_size?: number
+  keyword?: string
+  sort?: string
+  zone?: string
+  server?: string
+  region?: string
+  login_method?: string
+  rank?: string
+  insurance?: string
+  stamina?: string
+  load?: string
+  skin_group?: string
+  skin_name?: string
+  min_coin?: number
+  max_coin?: number
+  min_price?: number
+  max_price?: number
+  min_deposit?: number
+  max_deposit?: number
+  min_total?: number
+  max_total?: number
+  min_fire_level?: number
+  max_fire_level?: number
+  min_secret_kd?: number
+  max_secret_kd?: number
+  [key: `resource_${string}_min`]: number | undefined
+  [key: `resource_${string}_max`]: number | undefined
+}
+
+export interface PublicListingPage {
+  items: Listing[]
+  total: number
+  page: number
+  page_size: number
+  zone_counts: Record<string, number>
+}
+
+export async function fetchListings(query: PublicListingQuery = {}) {
+  const page = await fetchListingsPage(query)
+  return page.items
+}
+
+export async function fetchListingsPage(query: PublicListingQuery = {}) {
+  const params = Object.fromEntries(
+    Object.entries(query).filter(([, value]) => value !== '' && value !== undefined && value !== null)
+  )
+  const { data } = await apiClient.get<ApiResponse<Partial<PublicListingPage>>>('/listings', { params })
+  return normalizePublicListingPage(data.data, query)
+}
+
+function normalizePublicListingPage(data: Partial<PublicListingPage>, query: PublicListingQuery): PublicListingPage {
+  const items = Array.isArray(data.items) ? data.items : []
+  return {
+    items,
+    total: Number.isFinite(Number(data.total)) ? Number(data.total) : items.length,
+    page: Number.isFinite(Number(data.page)) ? Number(data.page) : Number(query.page || 1),
+    page_size: Number.isFinite(Number(data.page_size)) ? Number(data.page_size) : Number(query.page_size || items.length || 20),
+    zone_counts: data.zone_counts && typeof data.zone_counts === 'object' ? data.zone_counts : {},
+  }
+}
+
+export async function fetchListing(id: string | number) {
+  const { data } = await apiClient.get<ApiResponse<Listing>>(`/listings/${id}`)
+  return data.data
+}
+
+export async function fetchSellerListings() {
+  const { data } = await apiClient.get<ApiResponse<{ items: Listing[] }>>('/seller/listings')
+  return data.data.items
+}
+
+export async function createListing(payload: ListingPayload) {
+  const { data } = await apiClient.post<ApiResponse<Listing>>('/listings', payload)
+  return data.data
+}
+
+export async function submitListingReview(id: number) {
+  const { data } = await apiClient.post<ApiResponse<Listing>>(`/listings/${id}/submit-review`)
+  return data.data
+}
+
+export async function offlineListing(id: number) {
+  const { data } = await apiClient.delete<ApiResponse<{ offline: boolean }>>(`/listings/${id}`)
+  return data.data
+}
+
+export async function fetchPendingReviewListings() {
+  const { data } = await apiClient.get<ApiResponse<{ items: Listing[] }>>('/admin/listings/pending')
+  return data.data.items
+}
+
+export interface AdminListingQuery {
+  owner_id?: string
+  status?: ListingStatus | ''
+  review_status?: ListingReviewStatus | ''
+  limit?: number
+  page?: number
+  page_size?: number
+}
+
+export interface AdminListingPage {
+  items: Listing[]
+  total: number
+  page: number
+  page_size: number
+}
+
+export async function fetchAdminListings(query: AdminListingQuery = {}) {
+  const params = Object.fromEntries(Object.entries(query).filter(([, value]) => value !== '' && value !== undefined))
+  const { data } = await apiClient.get<ApiResponse<AdminListingPage>>('/admin/listings', { params })
+  return normalizeAdminListingPage(data.data, query)
+}
+
+function normalizeAdminListingPage(data: Partial<AdminListingPage>, query: AdminListingQuery): AdminListingPage {
+  const items = Array.isArray(data.items) ? data.items : []
+  return {
+    items,
+    total: Number.isFinite(Number(data.total)) ? Number(data.total) : items.length,
+    page: Number.isFinite(Number(data.page)) ? Number(data.page) : Number(query.page || 1),
+    page_size: Number.isFinite(Number(data.page_size)) ? Number(data.page_size) : Number(query.page_size || items.length || 10),
+  }
+}
+
+export async function fetchAdminListing(id: string | number) {
+  const { data } = await apiClient.get<ApiResponse<Listing>>(`/admin/listings/${id}`)
+  return data.data
+}
+
+export async function adminOfflineListing(id: number, reason: string) {
+  const { data } = await apiClient.post<ApiResponse<Listing>>(`/admin/listings/${id}/offline`, { reason })
+  return data.data
+}
+
+export async function adminMarkListingAbnormal(id: number, reason: string) {
+  const { data } = await apiClient.post<ApiResponse<Listing>>(`/admin/listings/${id}/mark-abnormal`, { reason })
+  return data.data
+}
+
+export async function approveListing(id: number) {
+  const { data } = await apiClient.post<ApiResponse<Listing>>(`/admin/listings/${id}/approve`)
+  return data.data
+}
+
+export async function rejectListing(id: number, reason: string) {
+  const { data } = await apiClient.post<ApiResponse<Listing>>(`/admin/listings/${id}/reject`, { reason })
+  return data.data
+}
diff --git a/frontend/src/features/listings/components/HomeAnnouncement.vue b/frontend/src/features/listings/components/HomeAnnouncement.vue
new file mode 100644
index 0000000..365d08b
--- /dev/null
+++ b/frontend/src/features/listings/components/HomeAnnouncement.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Bell } from '@element-plus/icons-vue'
+import { ElCarousel, ElCarouselItem, ElIcon } from 'element-plus'
+
+interface Props {
+  announcements: string[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="home-announcement">
+    <el-icon><Bell /></el-icon>
+    <el-carousel
+      height="22px"
+      direction="vertical"
+      indicator-position="none"
+      :autoplay="true"
+      :interval="3200"
+    >
+      <el-carousel-item v-for="item in announcements" :key="item">
+        <span>{{ item }}</span>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<style scoped>
+.home-announcement {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px;
+  color: #854d0e;
+  background: #fefce8;
+  border: 1px solid #fef08a;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
+}
+
+.home-announcement :deep(.el-carousel) {
+  flex: 1;
+}
+</style>
diff --git a/frontend/src/features/listings/components/HomeBanner.vue b/frontend/src/features/listings/components/HomeBanner.vue
new file mode 100644
index 0000000..2d8c37f
--- /dev/null
+++ b/frontend/src/features/listings/components/HomeBanner.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ElCarousel, ElCarouselItem } from 'element-plus'
+
+interface HomeBannerSlide {
+  title?: string
+  eyebrow?: string
+  pill?: string
+  badge?: string
+  tone?: string
+  image_url?: string
+}
+
+interface Props {
+  banners: HomeBannerSlide[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <section class="hero-board">
+    <el-carousel height="240px" indicator-position="outside" :interval="3600">
+      <el-carousel-item v-for="slide in banners" :key="slide.title || slide.image_url">
+        <div
+          class="hero-slide"
+          :class="[`tone-${slide.tone}`, { 'has-image': slide.image_url }]"
+        >
+          <img
+            v-if="slide.image_url"
+            :src="slide.image_url"
+            :alt="slide.title || slide.eyebrow || '首页轮播'"
+          />
+          <div class="hero-copy">
+            <span v-if="slide.eyebrow">{{ slide.eyebrow }}</span>
+            <h1 v-if="slide.title">{{ slide.title }}</h1>
+            <p v-if="slide.pill">{{ slide.pill }}</p>
+          </div>
+          <em v-if="slide.badge">{{ slide.badge }}</em>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </section>
+</template>
+
+<style scoped>
+.hero-board {
+  min-width: 0;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.hero-slide {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 40px;
+  background: #f8fafc;
+}
+
+.hero-slide.tone-orange {
+  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
+}
+.hero-slide.tone-green {
+  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+}
+
+.hero-slide img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero-slide.has-image::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 1;
+  max-width: 480px;
+}
+
+.hero-slide.has-image .hero-copy {
+  color: #ffffff;
+}
+
+.hero-copy h1 {
+  margin: 12px 0;
+  font-size: 32px;
+  line-height: 1.2;
+}
+
+.hero-copy p {
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(4px);
+  font-size: 14px;
+}
+</style>
diff --git a/frontend/src/features/listings/components/HomeFilters.vue b/frontend/src/features/listings/components/HomeFilters.vue
new file mode 100644
index 0000000..4d02ed3
--- /dev/null
+++ b/frontend/src/features/listings/components/HomeFilters.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { Filter, Refresh, ArrowDown } from '@element-plus/icons-vue'
+import { ElButton, ElIcon } from 'element-plus'
+import RangeFilter from './RangeFilter.vue'
+import StringFilter from './StringFilter.vue'
+import SkinFilter from './SkinFilter.vue'
+import {
+  coinRangeOptions,
+  moneyRangeOptions,
+  totalRangeOptions,
+  fireLevelRangeOptions,
+} from '@/composables/home/useFilterOptions'
+import type { ListingPublishOptions } from '@/api/listingOptions'
+import type { FilterPopoverKey, HomeFilters } from '@/composables/home/useHomeFilters'
+
+interface Props {
+  filters: HomeFilters
+  totalListings: number
+  publishOptions: ListingPublishOptions
+  regionOptions: string[]
+  loginMethodOptions: string[]
+  skinFilterGroups: Array<{ key: string; title: string; options: string[] }>
+  skinChipLabel: string
+  activeFilterPopover: FilterPopoverKey | ''
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:filters': [filters: Partial<HomeFilters>]
+  'reset': []
+  'setFilterPopover': [key: FilterPopoverKey, visible: boolean]
+  'closeFilterPopover': []
+}>()
+
+const filterPopoverBaseProps = {
+  placement: 'bottom-start',
+  popperClass: 'home-filter-popover',
+  trigger: 'click',
+  showAfter: 0,
+  hideAfter: 0,
+  transition: 'none',
+} as const
+
+function filterPopoverProps(key: FilterPopoverKey) {
+  return {
+    ...filterPopoverBaseProps,
+    visible: props.activeFilterPopover === key,
+    'onUpdate:visible': (visible: boolean) => emit('setFilterPopover', key, visible),
+  }
+}
+
+function updateFilter(key: keyof HomeFilters, value: any) {
+  emit('update:filters', { [key]: value })
+}
+
+function closePopover() {
+  emit('closeFilterPopover')
+}
+</script>
+
+<template>
+  <section class="horizontal-filter-card">
+    <div class="filter-header">
+      <div class="filter-title">
+        <el-icon><Filter /></el-icon>
+        <strong>筛选大厅</strong>
+        <span>{{ totalListings }} 个结果</span>
+      </div>
+      <el-button :icon="Refresh" link @click="emit('reset')">
+        重置全部条件
+      </el-button>
+    </div>
+
+    <div class="filter-chip-row">
+      <StringFilter
+        label="保险"
+        placeholder="保险"
+        :model-value="filters.insurance"
+        :options="publishOptions.insurance_options"
+        :popover-props="filterPopoverProps('insurance')"
+        @update:model-value="updateFilter('insurance', $event)"
+        @close="closePopover"
+      />
+
+      <StringFilter
+        label="体力"
+        placeholder="体力"
+        :model-value="filters.stamina"
+        :options="publishOptions.level_options"
+        :popover-props="filterPopoverProps('stamina')"
+        @update:model-value="updateFilter('stamina', $event)"
+        @close="closePopover"
+      />
+
+      <StringFilter
+        label="负载"
+        placeholder="负载"
+        :model-value="filters.load"
+        :options="publishOptions.level_options"
+        :popover-props="filterPopoverProps('load')"
+        @update:model-value="updateFilter('load', $event)"
+        @close="closePopover"
+      />
+
+      <StringFilter
+        label="登录方式"
+        placeholder="登录方式"
+        :model-value="filters.loginMethod"
+        :options="loginMethodOptions"
+        :popover-props="filterPopoverProps('loginMethod')"
+        @update:model-value="updateFilter('loginMethod', $event)"
+        @close="closePopover"
+      />
+
+      <StringFilter
+        label="地区"
+        placeholder="地区选择"
+        :model-value="filters.region"
+        :options="regionOptions"
+        :popover-props="filterPopoverProps('region')"
+        :wide="true"
+        @update:model-value="updateFilter('region', $event)"
+        @close="closePopover"
+      />
+
+      <RangeFilter
+        label="哈夫币(M)"
+        :model-min="filters.minCoin"
+        :model-max="filters.maxCoin"
+        :options="coinRangeOptions"
+        :popover-props="filterPopoverProps('coin')"
+        :wide="true"
+        @update:model-min="updateFilter('minCoin', $event)"
+        @update:model-max="updateFilter('maxCoin', $event)"
+        @close="closePopover"
+      />
+
+      <RangeFilter
+        label="租金"
+        :model-min="filters.minPrice"
+        :model-max="filters.maxPrice"
+        :options="moneyRangeOptions"
+        :popover-props="filterPopoverProps('price')"
+        @update:model-min="updateFilter('minPrice', $event)"
+        @update:model-max="updateFilter('maxPrice', $event)"
+        @close="closePopover"
+      />
+
+      <RangeFilter
+        label="押金"
+        :model-min="filters.minDeposit"
+        :model-max="filters.maxDeposit"
+        :options="moneyRangeOptions"
+        :popover-props="filterPopoverProps('deposit')"
+        @update:model-min="updateFilter('minDeposit', $event)"
+        @update:model-max="updateFilter('maxDeposit', $event)"
+        @close="closePopover"
+      />
+
+      <RangeFilter
+        label="合计金额"
+        :model-min="filters.minTotal"
+        :model-max="filters.maxTotal"
+        :options="totalRangeOptions"
+        :popover-props="filterPopoverProps('total')"
+        :wide="true"
+        @update:model-min="updateFilter('minTotal', $event)"
+        @update:model-max="updateFilter('maxTotal', $event)"
+        @close="closePopover"
+      />
+
+      <SkinFilter
+        :skin-group="filters.skinGroup"
+        :skin-name="filters.skinName"
+        :groups="skinFilterGroups"
+        :popover-props="filterPopoverProps('skin')"
+        @update:skin-group="updateFilter('skinGroup', $event)"
+        @update:skin-name="updateFilter('skinName', $event)"
+        @close="closePopover"
+      />
+
+      <StringFilter
+        label="段位"
+        placeholder="段位"
+        :model-value="filters.rank"
+        :options="publishOptions.rank_options"
+        :popover-props="filterPopoverProps('rank')"
+        @update:model-value="updateFilter('rank', $event)"
+        @close="closePopover"
+      />
+
+      <RangeFilter
+        label="等级"
+        :model-min="filters.minFireLevel"
+        :model-max="filters.maxFireLevel"
+        :options="fireLevelRangeOptions"
+        :popover-props="filterPopoverProps('fireLevel')"
+        @update:model-min="updateFilter('minFireLevel', $event)"
+        @update:model-max="updateFilter('maxFireLevel', $event)"
+        @close="closePopover"
+      />
+    </div>
+  </section>
+</template>
+
+<style src="@/styles/home-filters.css"></style>
diff --git a/frontend/src/features/listings/components/HomeStats.vue b/frontend/src/features/listings/components/HomeStats.vue
new file mode 100644
index 0000000..a4c8669
--- /dev/null
+++ b/frontend/src/features/listings/components/HomeStats.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+interface StatCard {
+  label: string
+  value: string
+  hint: string
+}
+
+interface Props {
+  stats: StatCard[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="home-stats-v2">
+    <div v-for="item in stats" :key="item.label" class="stat-item">
+      <div class="stat-main">
+        <strong>{{ item.value }}</strong>
+        <span>{{ item.label }}</span>
+      </div>
+      <small>{{ item.hint }}</small>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-stats-v2 {
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  gap: 12px;
+  min-width: 0;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 16px;
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+}
+
+.stat-main {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.stat-item strong {
+  font-size: 24px;
+  color: #ff6a00;
+}
+
+.stat-item span {
+  font-weight: 700;
+  color: #17233d;
+}
+
+.stat-item small {
+  margin-top: 4px;
+  color: #7b8798;
+  font-size: 12px;
+}
+</style>
diff --git a/frontend/src/features/listings/components/HomeZonesAndSort.vue b/frontend/src/features/listings/components/HomeZonesAndSort.vue
new file mode 100644
index 0000000..f78892e
--- /dev/null
+++ b/frontend/src/features/listings/components/HomeZonesAndSort.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ElRadioGroup, ElRadioButton } from 'element-plus'
+
+interface ZoneOption {
+  key: string
+  label: string
+  hint: string
+  count: number
+}
+
+interface Props {
+  zones: ZoneOption[]
+  activeZone: string
+  sortBy: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:activeZone': [value: string]
+  'update:sortBy': [value: string]
+}>()
+
+function selectZone(key: string) {
+  emit('update:activeZone', key)
+}
+</script>
+
+<template>
+  <div class="zones-and-sort">
+    <div class="zone-tabs">
+      <button
+        v-for="zone in zones"
+        :key="zone.key"
+        type="button"
+        class="zone-tab"
+        :class="{ active: activeZone === zone.key }"
+        @click="selectZone(zone.key)"
+      >
+        <div class="zone-main">
+          <strong>{{ zone.label }}</strong>
+          <span class="zone-count">{{ zone.count }}</span>
+        </div>
+        <small>{{ zone.hint }}</small>
+      </button>
+    </div>
+    <div class="list-actions">
+      <el-radio-group :model-value="sortBy" size="small" @update:model-value="(val) => emit('update:sortBy', val as string)">
+        <el-radio-button label="recommended">综合推荐</el-radio-button>
+        <el-radio-button label="coinDesc">哈夫币</el-radio-button>
+        <el-radio-button label="awmDesc">AWM数量</el-radio-button>
+        <el-radio-button label="priceAsc">价格最低</el-radio-button>
+        <el-radio-button label="priceDesc">价格最高</el-radio-button>
+      </el-radio-group>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.zones-and-sort {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.zone-tabs {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 12px;
+}
+
+.zone-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  background: #ffffff;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.zone-tab:hover {
+  border-color: #ff6a00;
+  background: #fff7ed;
+}
+
+.zone-tab.active {
+  border-color: #ff6a00;
+  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
+}
+
+.zone-main {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.zone-tab strong {
+  font-size: 15px;
+  font-weight: 700;
+  color: #17233d;
+}
+
+.zone-count {
+  font-size: 16px;
+  font-weight: 900;
+  color: #ff6a00;
+}
+
+.zone-tab small {
+  font-size: 11px;
+  color: #7b8798;
+}
+
+.list-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/frontend/src/features/listings/components/ListingCard.vue b/frontend/src/features/listings/components/ListingCard.vue
new file mode 100644
index 0000000..cbfff16
--- /dev/null
+++ b/frontend/src/features/listings/components/ListingCard.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import type { Listing } from '@/api/listings'
+import {
+  formatHafCoinM,
+  getCoinWan,
+  getListingDisplayPrice,
+  getListingTitle,
+  getLoginMethod,
+  getServerRegion,
+  hasAcceleratedSaleRatio,
+  hasGiftResources,
+  readAssetNumber,
+  readAssetString,
+  getResourceQuantity,
+  getOnlineTimeText,
+  getSkinNames,
+  getRatioValue,
+  getDailyLoss,
+} from '@/utils/listingDisplay'
+
+interface Props {
+  listing: Listing
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <RouterLink class="listing-card-v2" :to="`/listings/${listing.id}`">
+    <div class="card-cover">
+      <img
+        v-if="listing.cover_url"
+        :data-src="listing.cover_url"
+        :alt="getListingTitle(listing)"
+        loading="lazy"
+        decoding="async"
+        class="lazy-image"
+      />
+      <div v-else class="empty-cover">HFB</div>
+      <div class="cover-badges">
+        <span v-if="hasAcceleratedSaleRatio(listing)" class="badge sale">特惠</span>
+        <span v-if="hasGiftResources(listing)" class="badge gift">有赠送</span>
+      </div>
+      <div class="ratio-tag">比例 1:{{ getRatioValue(listing).toFixed(1) }}</div>
+    </div>
+
+    <div class="card-details">
+      <div class="card-title-row">
+        <h3>{{ getListingTitle(listing) }}</h3>
+        <span class="daily-loss">日耗 {{ getDailyLoss(listing) }}</span>
+      </div>
+
+      <div class="stats-grid">
+        <div class="stats-col">
+          <div class="stat-row">
+            <label>哈夫币</label>
+            <strong>{{ formatHafCoinM(getCoinWan(listing)) }}</strong>
+          </div>
+          <div class="stat-row">
+            <label>保险格数</label>
+            <span>{{ readAssetString(listing, 'season_insurance') || '--' }}</span>
+          </div>
+          <div class="stat-row">
+            <label>体力/负重</label>
+            <span>{{ readAssetString(listing, 'stamina_level') }}/{{ readAssetString(listing, 'load_level') }}</span>
+          </div>
+        </div>
+
+        <div class="stats-col">
+          <div class="stat-row">
+            <label>AWM子弹</label>
+            <span :class="{ highlight: getResourceQuantity(listing, 'awmAmmo') > 0 }">
+              {{ getResourceQuantity(listing, 'awmAmmo') }}发
+            </span>
+          </div>
+          <div class="stat-row">
+            <label>六级头甲</label>
+            <span>
+              {{ getResourceQuantity(listing, 'helmet6') }}头 / {{ getResourceQuantity(listing, 'armor6') }}甲
+            </span>
+          </div>
+          <div class="stat-row">
+            <label>其他重器</label>
+            <span>巴雷特 {{ getResourceQuantity(listing, 'barrett') }} / 喷子 {{ getResourceQuantity(listing, 'shotgun') }}</span>
+          </div>
+        </div>
+
+        <div class="stats-col">
+          <div class="stat-row">
+            <label>绝密KD</label>
+            <strong>{{ readAssetNumber(listing, 'secret_kd') || '--' }}</strong>
+          </div>
+          <div class="stat-row">
+            <label>游戏段位</label>
+            <span>{{ listing.rank_level || '未公开' }}</span>
+          </div>
+          <div class="stat-row">
+            <label>所属区服</label>
+            <span>{{ getServerRegion(listing) }}</span>
+          </div>
+        </div>
+
+        <div class="stats-col">
+          <div class="stat-row">
+            <label>上号方式</label>
+            <span>{{ getLoginMethod(listing) }}</span>
+          </div>
+          <div class="stat-row">
+            <label>方便上号</label>
+            <span class="time-text">{{ getOnlineTimeText(listing) || '全天候' }}</span>
+          </div>
+          <div class="stat-row skins-row">
+            <label>持有皮肤</label>
+            <span class="skins-text" :title="getSkinNames(listing).join(', ')">
+              {{ getSkinNames(listing).slice(0, 2).join(', ') || '暂无皮肤' }}
+              <em v-if="getSkinNames(listing).length > 2">...</em>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card-price">
+      <div class="price-item total">
+        <small>总租金</small>
+        <strong>¥{{ getListingDisplayPrice(listing) }}</strong>
+      </div>
+      <div class="price-item deposit">
+        <small>押金</small>
+        <span>¥{{ listing.deposit_amount }}</span>
+      </div>
+      <div class="price-action">
+        <button class="rent-btn">立即租用</button>
+      </div>
+    </div>
+  </RouterLink>
+</template>
+
+<style scoped>
+.listing-card-v2 {
+  display: grid;
+  grid-template-columns: 180px minmax(0, 1fr) 160px;
+  gap: 24px;
+  padding: 20px;
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s;
+}
+
+.listing-card-v2:hover {
+  border-color: #ff6a00;
+  box-shadow: 0 8px 24px rgba(255, 106, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+.card-cover {
+  position: relative;
+  width: 100%;
+  height: 180px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #f1f5f9;
+}
+
+.card-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.empty-cover {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 24px;
+  font-weight: 900;
+  color: #cbd5e1;
+}
+
+.cover-badges {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.badge {
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 800;
+  color: #ffffff;
+}
+
+.badge.sale {
+  background: #ef4444;
+}
+.badge.gift {
+  background: #10b981;
+}
+
+.ratio-tag {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 4px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fbbf24;
+  font-size: 11px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.card-details {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.card-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.card-title-row h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  color: #1e293b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.daily-loss {
+  padding: 4px 10px;
+  background: #f1f5f9;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #64748b;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.stats-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.stat-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stat-row label {
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 600;
+}
+
+.stat-row span,
+.stat-row strong {
+  font-size: 13px;
+  color: #334155;
+  font-weight: 600;
+}
+
+.stat-row strong {
+  color: #ff6a00;
+}
+
+.stat-row .highlight {
+  color: #10b981;
+  font-weight: 700;
+}
+
+.card-price {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.price-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.price-item small {
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 600;
+}
+
+.price-item.total strong {
+  font-size: 28px;
+  font-weight: 900;
+  color: #ff6a00;
+}
+
+.price-item.deposit span {
+  font-size: 14px;
+  font-weight: 700;
+  color: #64748b;
+}
+
+.rent-btn {
+  width: 100%;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #ff6a00 0%, #ff8533 100%);
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.rent-btn:hover {
+  background: linear-gradient(135deg, #ff7a1a 0%, #ff9544 100%);
+  transform: scale(1.05);
+}
+</style>
diff --git a/frontend/src/features/listings/components/RangeFilter.vue b/frontend/src/features/listings/components/RangeFilter.vue
new file mode 100644
index 0000000..1d8db13
--- /dev/null
+++ b/frontend/src/features/listings/components/RangeFilter.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ElInputNumber, ElPopover } from 'element-plus'
+import { computed } from 'vue'
+import { rangeLabel, isRangeSelected } from '@/composables/home/useFilterOptions'
+
+interface RangeOption {
+  label: string
+  min: number | undefined
+  max: number | undefined
+}
+
+interface Props {
+  label: string
+  modelMin: number | undefined
+  modelMax: number | undefined
+  options: RangeOption[]
+  popoverProps: Record<string, any>
+  wide?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:modelMin': [value: number | undefined]
+  'update:modelMax': [value: number | undefined]
+  close: []
+}>()
+
+const minValue = computed({
+  get: () => props.modelMin,
+  set: (val) => emit('update:modelMin', val),
+})
+
+const maxValue = computed({
+  get: () => props.modelMax,
+  set: (val) => emit('update:modelMax', val),
+})
+
+const isActive = computed(() => {
+  return props.modelMin !== undefined || props.modelMax !== undefined
+})
+
+const chipLabel = computed(() => {
+  return rangeLabel(props.modelMin, props.modelMax, props.label)
+})
+
+function selectRange(min: number | undefined, max: number | undefined) {
+  emit('update:modelMin', min)
+  emit('update:modelMax', max)
+  emit('close')
+}
+
+function isSelected(item: RangeOption) {
+  return isRangeSelected(props.modelMin, props.modelMax, item.min, item.max)
+}
+</script>
+
+<template>
+  <el-popover v-bind="popoverProps" :width="350">
+    <template #reference>
+      <button
+        class="filter-chip"
+        :class="{ active: isActive, wide }"
+        type="button"
+      >
+        <span>{{ chipLabel }}</span>
+        <el-icon><ArrowDown /></el-icon>
+      </button>
+    </template>
+    <div class="range-menu">
+      <button
+        v-for="item in options"
+        :key="item.label"
+        type="button"
+        :class="{ active: isSelected(item) }"
+        @click="selectRange(item.min, item.max)"
+      >
+        {{ item.label }}
+      </button>
+      <div class="range-manual">
+        <el-input-number
+          v-model="minValue"
+          :controls="false"
+          :min="0"
+          placeholder="最小值"
+        />
+        <span>-</span>
+        <el-input-number
+          v-model="maxValue"
+          :controls="false"
+          :min="0"
+          placeholder="最大值"
+        />
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<style src="@/styles/home-filters.css"></style>
diff --git a/frontend/src/features/listings/components/SkinFilter.vue b/frontend/src/features/listings/components/SkinFilter.vue
new file mode 100644
index 0000000..5af5364
--- /dev/null
+++ b/frontend/src/features/listings/components/SkinFilter.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ElPopover } from 'element-plus'
+import { computed } from 'vue'
+
+interface SkinGroup {
+  key: string
+  title: string
+  options: string[]
+}
+
+interface Props {
+  skinGroup: string
+  skinName: string
+  groups: SkinGroup[]
+  popoverProps: Record<string, any>
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:skinGroup': [value: string]
+  'update:skinName': [value: string]
+  close: []
+}>()
+
+const isActive = computed(() => {
+  return !!props.skinGroup || !!props.skinName
+})
+
+const chipLabel = computed(() => {
+  if (props.skinName) return props.skinName
+  if (props.skinGroup) {
+    return props.groups.find((g) => g.key === props.skinGroup)?.title || '皮肤'
+  }
+  return '皮肤'
+})
+
+function selectSkin(group: string, name = '') {
+  emit('update:skinGroup', group)
+  emit('update:skinName', name)
+  emit('close')
+}
+
+function resetSkin() {
+  emit('update:skinGroup', '')
+  emit('update:skinName', '')
+  emit('close')
+}
+</script>
+
+<template>
+  <el-popover v-bind="popoverProps" :width="320">
+    <template #reference>
+      <button class="filter-chip" :class="{ active: isActive }" type="button">
+        <span>{{ chipLabel }}</span>
+        <el-icon><ArrowDown /></el-icon>
+      </button>
+    </template>
+    <div class="skin-filter-menu">
+      <button
+        class="skin-reset"
+        type="button"
+        :class="{ active: !skinGroup && !skinName }"
+        @click="resetSkin"
+      >
+        全部皮肤
+      </button>
+      <div v-for="group in groups" :key="group.key" class="skin-filter-group">
+        <div class="skin-filter-title">
+          <strong>{{ group.title }}</strong>
+          <button
+            type="button"
+            :class="{ active: skinGroup === group.key && !skinName }"
+            @click="selectSkin(group.key)"
+          >
+            全部{{ group.title.replace('干员', '') }}
+          </button>
+        </div>
+        <div class="skin-filter-options">
+          <button
+            v-for="skin in group.options"
+            :key="skin"
+            type="button"
+            :class="{ active: skinGroup === group.key && skinName === skin }"
+            @click="selectSkin(group.key, skin)"
+          >
+            {{ skin }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<style src="@/styles/home-filters.css"></style>
diff --git a/frontend/src/features/listings/components/StringFilter.vue b/frontend/src/features/listings/components/StringFilter.vue
new file mode 100644
index 0000000..17ff63f
--- /dev/null
+++ b/frontend/src/features/listings/components/StringFilter.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ElPopover } from 'element-plus'
+import { computed } from 'vue'
+
+interface Props {
+  label: string
+  placeholder: string
+  modelValue: string
+  options: string[]
+  popoverProps: Record<string, any>
+  wide?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  close: []
+}>()
+
+const isActive = computed(() => {
+  return !!props.modelValue
+})
+
+const displayLabel = computed(() => {
+  return props.modelValue || props.placeholder
+})
+
+function selectOption(value: string) {
+  emit('update:modelValue', value)
+  emit('close')
+}
+</script>
+
+<template>
+  <el-popover v-bind="popoverProps" :width="220">
+    <template #reference>
+      <button
+        class="filter-chip"
+        :class="{ active: isActive, wide }"
+        type="button"
+      >
+        <span>{{ displayLabel }}</span>
+        <el-icon><ArrowDown /></el-icon>
+      </button>
+    </template>
+    <div class="filter-menu">
+      <button
+        type="button"
+        :class="{ active: !modelValue }"
+        @click="selectOption('')"
+      >
+        {{ placeholder }}
+      </button>
+      <button
+        v-for="item in options"
+        :key="item"
+        type="button"
+        :class="{ active: modelValue === item }"
+        @click="selectOption(item)"
+      >
+        {{ item }}
+      </button>
+    </div>
+  </el-popover>
+</template>
+
+<style src="@/styles/home-filters.css"></style>
diff --git a/frontend/src/features/listings/composables/__tests__/useFilterOptions.spec.ts b/frontend/src/features/listings/composables/__tests__/useFilterOptions.spec.ts
new file mode 100644
index 0000000..0d77d62
--- /dev/null
+++ b/frontend/src/features/listings/composables/__tests__/useFilterOptions.spec.ts
@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { rangeLabel, isRangeSelected } from '@/composables/home/useFilterOptions'
+
+describe('useFilterOptions', () => {
+  describe('rangeLabel', () => {
+    it('应该返回双向范围标签', () => {
+      expect(rangeLabel(100, 500, '哈夫币')).toBe('100-500')
+    })
+
+    it('应该返回最小值+标签', () => {
+      expect(rangeLabel(500, undefined, '哈夫币')).toBe('500+')
+    })
+
+    it('应该返回最大值标签', () => {
+      expect(rangeLabel(undefined, 500, '哈夫币')).toBe('≤500')
+    })
+
+    it('应该返回默认标签', () => {
+      expect(rangeLabel(undefined, undefined, '哈夫币')).toBe('哈夫币')
+    })
+  })
+
+  describe('isRangeSelected', () => {
+    it('应该正确判断范围是否选中', () => {
+      expect(isRangeSelected(100, 500, 100, 500)).toBe(true)
+      expect(isRangeSelected(100, 500, 200, 500)).toBe(false)
+      expect(isRangeSelected(undefined, undefined, undefined, undefined)).toBe(true)
+    })
+  })
+})
diff --git a/frontend/src/features/listings/composables/__tests__/useHomeFilters.spec.ts b/frontend/src/features/listings/composables/__tests__/useHomeFilters.spec.ts
new file mode 100644
index 0000000..d784cc8
--- /dev/null
+++ b/frontend/src/features/listings/composables/__tests__/useHomeFilters.spec.ts
@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest'
+import { useHomeFilters } from '@/composables/home/useHomeFilters'
+import { ref } from 'vue'
+import { emptyListingPublishOptions } from '@/api/listingOptions'
+
+describe('useHomeFilters', () => {
+  it('应该初始化空的筛选器', () => {
+    const publishOptions = ref(emptyListingPublishOptions)
+    const listings = ref([])
+
+    const { filters } = useHomeFilters(publishOptions, listings)
+
+    expect(filters.keyword).toBe('')
+    expect(filters.minCoin).toBeUndefined()
+    expect(filters.maxCoin).toBeUndefined()
+  })
+
+  it('应该正确重置筛选器', () => {
+    const publishOptions = ref(emptyListingPublishOptions)
+    const listings = ref([])
+
+    const { filters, resetFilters } = useHomeFilters(publishOptions, listings)
+
+    filters.keyword = '测试'
+    filters.minCoin = 100
+    filters.region = '北京'
+
+    resetFilters()
+
+    expect(filters.keyword).toBe('')
+    expect(filters.minCoin).toBeUndefined()
+    expect(filters.region).toBe('')
+  })
+
+  it('应该正确设置字符串筛选器', () => {
+    const publishOptions = ref(emptyListingPublishOptions)
+    const listings = ref([])
+
+    const { filters, setStringFilter, closeFilterPopover } = useHomeFilters(publishOptions, listings)
+
+    setStringFilter('region', '上海')
+
+    expect(filters.region).toBe('上海')
+  })
+
+  it('应该正确设置范围筛选器', () => {
+    const publishOptions = ref(emptyListingPublishOptions)
+    const listings = ref([])
+
+    const { filters, setCoinRange } = useHomeFilters(publishOptions, listings)
+
+    setCoinRange(100, 500)
+
+    expect(filters.minCoin).toBe(100)
+    expect(filters.maxCoin).toBe(500)
+  })
+})
diff --git a/frontend/src/features/listings/composables/useFilterOptions.ts b/frontend/src/features/listings/composables/useFilterOptions.ts
new file mode 100644
index 0000000..c6a1f76
--- /dev/null
+++ b/frontend/src/features/listings/composables/useFilterOptions.ts
@@ -0,0 +1,51 @@
+export 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 },
+]
+
+export 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 },
+]
+
+export 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 },
+]
+
+export 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 },
+]
+
+export 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
+}
+
+export function isRangeSelected(
+  currentMin: number | undefined,
+  currentMax: number | undefined,
+  min: number | undefined,
+  max: number | undefined
+) {
+  return currentMin === min && currentMax === max
+}
diff --git a/frontend/src/features/listings/composables/useHomeFilters.ts b/frontend/src/features/listings/composables/useHomeFilters.ts
new file mode 100644
index 0000000..4cd235e
--- /dev/null
+++ b/frontend/src/features/listings/composables/useHomeFilters.ts
@@ -0,0 +1,208 @@
+import { reactive, ref, computed, type Ref } from 'vue'
+import type { ListingPublishOptions } from '../api/listingOptions'
+import type { Listing } from '../api/listings'
+import { assetRegions } from '@/shared/utils/listingDisplay'
+
+export type FilterPopoverKey =
+  | 'insurance'
+  | 'stamina'
+  | 'load'
+  | 'region'
+  | 'coin'
+  | 'price'
+  | 'deposit'
+  | 'total'
+  | 'skin'
+  | 'rank'
+  | 'fireLevel'
+  | 'loginMethod'
+
+export type StringFilterKey =
+  | 'insurance'
+  | 'stamina'
+  | 'load'
+  | 'region'
+  | 'rank'
+  | 'loginMethod'
+
+export interface HomeFilters {
+  keyword: string
+  server: string
+  region: string
+  loginMethod: string
+  rank: string
+  insurance: string
+  stamina: string
+  load: string
+  skinGroup: string
+  skinName: string
+  minCoin: number | undefined
+  maxCoin: number | undefined
+  minPrice: number | undefined
+  maxPrice: number | undefined
+  minDeposit: number | undefined
+  maxDeposit: number | undefined
+  minTotal: number | undefined
+  maxTotal: number | undefined
+  minFireLevel: number | undefined
+  maxFireLevel: number | undefined
+}
+
+export function useHomeFilters(
+  publishOptions: Ref<ListingPublishOptions>,
+  listings: Ref<Listing[]>
+) {
+  const filters = reactive<HomeFilters>({
+    keyword: '',
+    server: '',
+    region: '',
+    loginMethod: '',
+    rank: '',
+    insurance: '',
+    stamina: '',
+    load: '',
+    skinGroup: '',
+    skinName: '',
+    minCoin: undefined,
+    maxCoin: undefined,
+    minPrice: undefined,
+    maxPrice: undefined,
+    minDeposit: undefined,
+    maxDeposit: undefined,
+    minTotal: undefined,
+    maxTotal: undefined,
+    minFireLevel: undefined,
+    maxFireLevel: undefined,
+  })
+
+  const activeFilterPopover = ref<FilterPopoverKey | ''>('')
+
+  const regionOptions = computed(() =>
+    uniqueOptions([
+      ...publishOptions.value.region_options,
+      ...listings.value.flatMap((item) => assetRegions(item)),
+    ])
+  )
+
+  const loginMethodOptions = computed(() =>
+    uniqueOptions(
+      publishOptions.value.login_method_options
+        .map((item) => item.trim())
+        .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 '皮肤'
+  })
+
+  function uniqueOptions(values: string[]) {
+    return [...new Set(values.map((item) => item.trim()).filter(Boolean))]
+  }
+
+  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
+    filters.maxPrice = undefined
+    filters.minDeposit = undefined
+    filters.maxDeposit = undefined
+    filters.minTotal = undefined
+    filters.maxTotal = undefined
+    filters.minFireLevel = undefined
+    filters.maxFireLevel = undefined
+  }
+
+  function setStringFilter(key: StringFilterKey, value: string) {
+    filters[key] = value
+    closeFilterPopover()
+  }
+
+  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(group: string, name = '') {
+    filters.skinGroup = group
+    filters.skinName = name
+  }
+
+  function resetSkinFilter() {
+    filters.skinGroup = ''
+    filters.skinName = ''
+  }
+
+  function setFilterPopover(key: FilterPopoverKey, visible: boolean) {
+    if (visible) {
+      activeFilterPopover.value = key
+      return
+    }
+    if (activeFilterPopover.value === key) activeFilterPopover.value = ''
+  }
+
+  function closeFilterPopover() {
+    activeFilterPopover.value = ''
+  }
+
+  return {
+    filters,
+    activeFilterPopover,
+    regionOptions,
+    loginMethodOptions,
+    skinFilterGroups,
+    skinChipLabel,
+    resetFilters,
+    setStringFilter,
+    setCoinRange,
+    setPriceRange,
+    setDepositRange,
+    setTotalRange,
+    setFireLevelRange,
+    setSkinFilter,
+    resetSkinFilter,
+    setFilterPopover,
+    closeFilterPopover,
+  }
+}
diff --git a/frontend/src/features/listings/composables/useListingQuery.ts b/frontend/src/features/listings/composables/useListingQuery.ts
new file mode 100644
index 0000000..61f48e7
--- /dev/null
+++ b/frontend/src/features/listings/composables/useListingQuery.ts
@@ -0,0 +1,122 @@
+import { ref, onMounted, onBeforeUnmount, watch, type Ref } from 'vue'
+import { fetchListingsPage, type Listing, type PublicListingQuery } from '../api/listings'
+import type { HomeFilters } from './useHomeFilters'
+
+const homePageSize = 12
+
+export function useListingQuery(
+  filters: HomeFilters,
+  sortBy: Ref<string>,
+  activeZone: Ref<string>
+) {
+  const loading = ref(false)
+  const loadingMore = ref(false)
+  const listings = ref<Listing[]>([])
+  const totalListings = ref(0)
+  const zoneCounts = ref<Record<string, number>>({})
+  const currentPage = ref(1)
+  const hasMoreListings = ref(true)
+  let listingRequestSeq = 0
+
+  function buildListingQuery(page: number): PublicListingQuery {
+    return {
+      page,
+      page_size: homePageSize,
+      keyword: filters.keyword.trim(),
+      sort: sortBy.value,
+      zone: activeZone.value,
+      server: filters.server,
+      region: filters.region,
+      login_method: filters.loginMethod,
+      rank: filters.rank,
+      insurance: filters.insurance,
+      stamina: filters.stamina,
+      load: filters.load,
+      skin_group: filters.skinGroup,
+      skin_name: filters.skinName,
+      min_coin: filters.minCoin,
+      max_coin: filters.maxCoin,
+      min_price: filters.minPrice,
+      max_price: filters.maxPrice,
+      min_deposit: filters.minDeposit,
+      max_deposit: filters.maxDeposit,
+      min_total: filters.minTotal,
+      max_total: filters.maxTotal,
+      min_fire_level: filters.minFireLevel,
+      max_fire_level: filters.maxFireLevel,
+    }
+  }
+
+  function listingQuerySignature() {
+    return JSON.stringify(buildListingQuery(1))
+  }
+
+  async function loadListingsPage(reset = false) {
+    if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return
+    const requestSeq = ++listingRequestSeq
+    if (reset) {
+      currentPage.value = 1
+      hasMoreListings.value = true
+    }
+    loadingMore.value = true
+    try {
+      const page = await fetchListingsPage(buildListingQuery(currentPage.value))
+      if (requestSeq !== listingRequestSeq) return
+      listings.value = reset ? page.items : [...listings.value, ...page.items]
+      totalListings.value = page.total
+      zoneCounts.value = page.zone_counts
+      hasMoreListings.value = listings.value.length < page.total
+      currentPage.value = page.page + 1
+      requestAnimationFrame(handleWindowScroll)
+    } catch {
+      if (reset) {
+        listings.value = []
+        totalListings.value = 0
+        zoneCounts.value = {}
+        hasMoreListings.value = false
+      }
+    } finally {
+      if (requestSeq === listingRequestSeq) {
+        loadingMore.value = false
+      }
+    }
+  }
+
+  function handleWindowScroll() {
+    if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 480) return
+    loadListingsPage(false)
+  }
+
+  function zoneCount(key: string) {
+    if (key === 'all') return zoneCounts.value.all ?? totalListings.value
+    return zoneCounts.value[key] ?? 0
+  }
+
+  onMounted(() => {
+    window.addEventListener('scroll', handleWindowScroll, { passive: true })
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('scroll', handleWindowScroll)
+  })
+
+  // 使用防抖优化搜索
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+  watch(() => listingQuerySignature(), () => {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => {
+      loadListingsPage(true)
+    }, 300)
+  })
+
+  return {
+    loading,
+    loadingMore,
+    listings,
+    totalListings,
+    zoneCounts,
+    hasMoreListings,
+    loadListingsPage,
+    zoneCount,
+  }
+}
diff --git a/frontend/src/features/listings/index.ts b/frontend/src/features/listings/index.ts
new file mode 100644
index 0000000..8e8603e
--- /dev/null
+++ b/frontend/src/features/listings/index.ts
@@ -0,0 +1,7 @@
+// Listings 模块统一导出
+export * from './api/listings'
+export * from './api/listingOptions'
+export * from './api/homeConfig'
+export * from './composables/useHomeFilters'
+export * from './composables/useFilterOptions'
+export * from './composables/useListingQuery'
diff --git a/frontend/src/features/listings/views/HomeView.vue b/frontend/src/features/listings/views/HomeView.vue
new file mode 100644
index 0000000..8af136c
--- /dev/null
+++ b/frontend/src/features/listings/views/HomeView.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ElEmpty } from 'element-plus'
+import {
+  defaultHomeAnnouncements,
+  defaultHomeBanners,
+  fetchMobileHomeConfig,
+  type HomeBannerSlide,
+} from '@/api/homeConfig'
+import {
+  emptyListingPublishOptions,
+  type ListingPublishOptions,
+} from '@/api/listingOptions'
+import { useHomeFilters } from '@/composables/home/useHomeFilters'
+import { useListingQuery } from '@/composables/home/useListingQuery'
+import HomeAnnouncement from './components/HomeAnnouncement.vue'
+import HomeBanner from './components/HomeBanner.vue'
+import HomeStats from './components/HomeStats.vue'
+import HomeFilters from './components/HomeFilters.vue'
+import HomeZonesAndSort from './components/HomeZonesAndSort.vue'
+import ListingCard from './components/ListingCard.vue'
+
+const announcements = ref<string[]>(defaultHomeAnnouncements)
+const banners = ref<HomeBannerSlide[]>(defaultHomeBanners)
+const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions)
+const sortBy = ref('recommended')
+const activeZone = ref('all')
+
+const {
+  filters,
+  activeFilterPopover,
+  regionOptions,
+  loginMethodOptions,
+  skinFilterGroups,
+  skinChipLabel,
+  resetFilters,
+  setFilterPopover,
+  closeFilterPopover,
+} = useHomeFilters(publishOptions, computed(() => listings.value))
+
+const {
+  loading,
+  loadingMore,
+  listings,
+  totalListings,
+  zoneCounts,
+  hasMoreListings,
+  loadListingsPage,
+  zoneCount,
+} = useListingQuery(filters, sortBy, activeZone)
+
+const statCards = computed(() => [
+  { label: '可租账号', value: `${totalListings.value}`, hint: '当前筛选结果' },
+  {
+    label: '高哈夫币',
+    value: `${zoneCount('highCoin')}`,
+    hint: '100M 以上',
+  },
+  {
+    label: '账密登录',
+    value: `${zoneCount('password')}`,
+    hint: '交接更快',
+  },
+])
+
+const zoneOptions = computed(() => [
+  {
+    key: 'all',
+    label: '全部专区',
+    hint: '当前可租账号',
+    count: zoneCount('all'),
+  },
+  {
+    key: 'sale',
+    label: '特惠专区',
+    hint: '价格更划算',
+    count: zoneCount('sale'),
+  },
+  {
+    key: 'gift',
+    label: '赠送专区',
+    hint: '含赠送物品',
+    count: zoneCount('gift'),
+  },
+  {
+    key: 'night',
+    label: '夜间专区',
+    hint: '夜间也好上号',
+    count: zoneCount('night'),
+  },
+  {
+    key: 'password',
+    label: '账密专区',
+    hint: '交接更快',
+    count: zoneCount('password'),
+  },
+  {
+    key: 'highCoin',
+    label: '高币专区',
+    hint: '100M 以上',
+    count: zoneCount('highCoin'),
+  },
+])
+
+async function loadHome() {
+  loading.value = true
+  try {
+    const [, config] = await Promise.all([
+      loadListingsPage(true),
+      fetchMobileHomeConfig(),
+    ])
+    announcements.value = config.announcements
+    banners.value = config.banners
+    publishOptions.value = config.publish_options
+  } catch {
+    announcements.value = defaultHomeAnnouncements
+    banners.value = defaultHomeBanners
+    publishOptions.value = emptyListingPublishOptions
+  } finally {
+    loading.value = false
+  }
+}
+
+function updateFilters(partial: Partial<typeof filters>) {
+  Object.assign(filters, partial)
+}
+
+function handleResetFilters() {
+  resetFilters()
+  activeZone.value = 'all'
+  sortBy.value = 'recommended'
+}
+
+loadHome()
+</script>
+
+<template>
+  <section class="pc-home-redesign">
+    <HomeAnnouncement :announcements="announcements" />
+
+    <main class="home-content">
+      <div class="hero-section">
+        <HomeBanner :banners="banners" />
+        <HomeStats :stats="statCards" />
+      </div>
+
+      <HomeFilters
+        :filters="filters"
+        :total-listings="totalListings"
+        :publish-options="publishOptions"
+        :region-options="regionOptions"
+        :login-method-options="loginMethodOptions"
+        :skin-filter-groups="skinFilterGroups"
+        :skin-chip-label="skinChipLabel"
+        :active-filter-popover="activeFilterPopover"
+        @update:filters="updateFilters"
+        @reset="handleResetFilters"
+        @set-filter-popover="setFilterPopover"
+        @close-filter-popover="closeFilterPopover"
+      />
+
+      <div class="list-head">
+        <div class="zone-head">
+          <p class="eyebrow">Account Zone</p>
+          <h2>账号专区</h2>
+        </div>
+      </div>
+
+      <HomeZonesAndSort
+        :zones="zoneOptions"
+        :active-zone="activeZone"
+        :sort-by="sortBy"
+        @update:active-zone="activeZone = $event"
+        @update:sort-by="sortBy = $event"
+      />
+
+      <el-empty
+        v-if="!loading && listings.length === 0"
+        description="没有符合条件的账号"
+      />
+      <div v-else v-loading="loading" class="enhanced-desktop-list">
+        <ListingCard
+          v-for="item in listings"
+          :key="item.id"
+          :listing="item"
+        />
+      </div>
+
+      <div v-if="!loading && listings.length" class="infinite-load-state">
+        <span v-if="loadingMore">正在加载更多账号...</span>
+        <span v-else-if="!hasMoreListings">已经到底了</span>
+      </div>
+    </main>
+  </section>
+</template>
+
+<style scoped>
+.pc-home-redesign {
+  display: grid;
+  gap: 20px;
+  width: 100%;
+  max-width: 1720px;
+  min-width: 0;
+  margin: 0 auto;
+  overflow-x: clip;
+}
+
+.home-content {
+  display: grid;
+  gap: 20px;
+  min-width: 0;
+}
+
+.infinite-load-state {
+  padding: 6px 0 18px;
+  color: #94a3b8;
+  font-size: 13px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.hero-section {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 20px;
+  min-width: 0;
+}
+
+.list-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.zone-head {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.eyebrow {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #ff6a00;
+}
+
+.zone-head h2 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 900;
+  color: #17233d;
+}
+
+.enhanced-desktop-list {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+</style>
diff --git a/frontend/src/features/listings/views/ListingDetailView.vue b/frontend/src/features/listings/views/ListingDetailView.vue
new file mode 100644
index 0000000..d69604f
--- /dev/null
+++ b/frontend/src/features/listings/views/ListingDetailView.vue
@@ -0,0 +1,749 @@
+<script setup lang="ts">
+import { ElMessage } from "element-plus";
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import { fetchListing, type Listing } from "@/api/listings";
+import { createOrder } from "@/api/orders";
+import { useSessionStore } from "@/stores/session";
+import {
+  assetRegions,
+  formatEstimatedRentalDuration,
+  formatHafCoinM,
+  formatRatio,
+  getCoinWan,
+  getDailyLoss,
+  getListingConsumablePrice,
+  getListingChips,
+  getListingDisplayPrice,
+  getListingRentPrice,
+  getListingResources,
+  getListingSubtitle,
+  getListingTitle,
+  getOnlineTimeText,
+  getLoginMethod,
+  getServerRegion,
+  readAssetNumber,
+  readAssetString,
+} from "@/utils/listingDisplay";
+
+const route = useRoute();
+const router = useRouter();
+const session = useSessionStore();
+const loading = ref(false);
+const ordering = ref(false);
+const listing = ref<Listing | null>(null);
+
+onMounted(async () => {
+  loading.value = true;
+  try {
+    listing.value = await fetchListing(String(route.params.id));
+  } finally {
+    loading.value = false;
+  }
+});
+
+const orderTotal = computed(() => {
+  if (!listing.value) return "0";
+  return `${Math.round(getListingDisplayPrice(listing.value))}`;
+});
+
+const orderPriceBreakdown = computed(() => {
+  if (!listing.value) {
+    return {
+      rent: 0,
+      consumable: 0,
+      total: 0,
+    };
+  }
+  return {
+    rent: getListingRentPrice(listing.value),
+    consumable: getListingConsumablePrice(listing.value),
+    total: Math.round(getListingDisplayPrice(listing.value)),
+  };
+});
+
+const coverURL = computed(() => {
+  if (!listing.value) return "";
+  return listing.value.cover_url || listing.value.screenshot_urls?.[0] || "";
+});
+
+const detailMetrics = computed(() => {
+  if (!listing.value) return [];
+  const dailyLoss = getDailyLoss(listing.value);
+  return [
+    { label: "纯币", value: formatHafCoinM(getCoinWan(listing.value)), tone: "coin" },
+    {
+      label: "日损耗",
+      value: dailyLoss ? `${dailyLoss}/天` : "--",
+      tone: "coin",
+    },
+    { label: "价格", value: `¥${orderTotal.value}`, tone: "price" },
+    { label: "押金", value: `¥${listing.value.deposit_amount}`, tone: "" },
+  ];
+});
+
+const detailScreenshots = computed(() => {
+  if (!listing.value) return [];
+  const labels = ["纯币截图", "游戏ID截图", "总资产截图", "腾讯安全中心截图", "皮肤截图"];
+  return (listing.value.screenshot_urls || []).map((url, index) => ({
+    label: labels[index] || `账号截图${index + 1}`,
+    url,
+  }));
+});
+
+const detailSkinGroups = computed(() => {
+  if (!listing.value) return [];
+  const groups = listing.value.asset_summary?.skin_groups;
+  if (typeof groups !== "object" || groups === null) return [];
+  const titles: Record<string, string> = {
+    melee: "近战皮肤",
+    operator: "干员皮肤",
+    operatorGold: "干员金皮",
+    operatorRed: "干员红皮",
+    weapon: "武器皮肤",
+  };
+  return Object.entries(groups as Record<string, unknown>)
+    .map(([key, value]) => ({
+      key,
+      title: titles[key] || key,
+      options: Array.isArray(value)
+        ? value.filter((skin): skin is string => typeof skin === "string")
+        : [],
+    }))
+    .filter((group) => group.options.length);
+});
+
+const accountRows = computed(() => {
+  if (!listing.value) return [];
+  const regions = assetRegions(listing.value);
+  return [
+    { label: "所属区服", value: getServerRegion(listing.value) || "--" },
+    { label: "上号方式", value: getLoginMethod(listing.value) || "--" },
+    { label: "游戏段位", value: listing.value.rank_level || "--" },
+    { label: "M单价", value: formatRatio(listing.value) },
+    { label: "方便上号", value: getOnlineTimeText(listing.value) || "--" },
+    { label: "预计可租", value: formatEstimatedRentalDuration(listing.value) },
+    { label: "常用登录地", value: regions.length ? regions.join("、") : "--" },
+    { label: "封禁记录", value: readAssetString(listing.value, "ban_record") || "无" },
+  ];
+});
+
+async function handleCreateOrder() {
+  if (!listing.value) return;
+  if (!session.token) {
+    await router.push({ path: "/login", query: { redirect: route.fullPath } });
+    return;
+  }
+
+  ordering.value = true;
+  try {
+    const order = await createOrder(listing.value.id);
+    ElMessage.success("订单已创建，请完成支付");
+    await router.push(`/orders/${order.id}`);
+  } catch (error) {
+    ElMessage.error(readError(error, "下单失败"));
+  } finally {
+    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;
+  }
+  return fallback;
+}
+
+function listingPrice(item: Listing) {
+  return `${Math.round(getListingDisplayPrice(item))}`;
+}
+</script>
+
+<template>
+  <section class="pc-detail page" v-loading="loading">
+    <div class="anti-fraud-strip compact">
+      <span
+        >防骗提示：下单后请按平台交接流程确认收号与归还，不要私下交易。</span
+      >
+    </div>
+
+    <div v-if="listing" class="pc-detail-layout">
+      <section class="pc-detail-main">
+        <div class="detail-hero-card">
+          <img
+            v-if="coverURL"
+            :src="coverURL"
+            :alt="getListingTitle(listing)"
+          />
+          <span v-else>HFB ACCOUNT</span>
+          <div class="detail-hero-overlay">
+            <div class="detail-tags">
+              <span>{{ getServerRegion(listing) }}</span>
+              <span v-if="getLoginMethod(listing)">{{ getLoginMethod(listing) }}</span>
+              <span v-if="listing.rank_level">{{ listing.rank_level }}</span>
+            </div>
+            <h1>{{ getListingTitle(listing) }}</h1>
+            <p>{{ getListingSubtitle(listing) }}</p>
+          </div>
+        </div>
+
+        <div class="detail-body">
+          <div class="detail-summary-row">
+            <div v-for="metric in detailMetrics" :key="metric.label" class="detail-metric" :class="`is-${metric.tone}`">
+              <span>{{ metric.label }}</span>
+              <strong>{{ metric.value }}</strong>
+            </div>
+          </div>
+
+          <section class="detail-section">
+            <div class="detail-section-head">
+              <h2>账号资料</h2>
+              <span>{{ listing.game_name || "三角洲行动" }}</span>
+            </div>
+            <div class="detail-chip-row">
+              <span v-for="chip in getListingChips(listing)" :key="chip.label">
+                {{ chip.label }}：{{ chip.value }}
+              </span>
+            </div>
+            <dl class="detail-info-grid">
+              <div v-for="row in accountRows" :key="row.label">
+                <dt>{{ row.label }}</dt>
+                <dd>{{ row.value }}</dd>
+              </div>
+            </dl>
+          </section>
+
+          <section v-if="getListingResources(listing).length" class="detail-section">
+            <div class="detail-section-head">
+              <h2>额外消耗品</h2>
+              <span>{{ getListingResources(listing).length }} 项</span>
+            </div>
+            <div class="detail-resource-grid">
+              <div v-for="resource in getListingResources(listing)" :key="resource.key" class="detail-resource-card">
+                <span>{{ resource.label }}</span>
+                <strong>{{ resource.quantity }}</strong>
+                <em>
+                  <b>{{ resource.mode || "--" }}</b>
+                  <small v-if="resource.amount > 0">¥{{ resource.amount }}</small>
+                  <small v-else-if="resource.mode === '收费'">{{ resource.price || "¥0" }}</small>
+                  <small v-else>无额外收费</small>
+                </em>
+              </div>
+            </div>
+          </section>
+
+          <section v-if="detailSkinGroups.length" class="detail-section">
+            <div class="detail-section-head">
+              <h2>皮肤清单</h2>
+              <span>按类型展示</span>
+            </div>
+            <div class="skin-groups">
+              <div v-for="group in detailSkinGroups" :key="group.key" class="skin-group">
+                <h3>{{ group.title }}</h3>
+                <div class="detail-chip-row">
+                  <span v-for="skin in group.options" :key="skin">{{ skin }}</span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section class="detail-section">
+            <div class="detail-section-head">
+              <h2>号主备注</h2>
+            </div>
+            <p class="detail-description">{{ listing.description || "号主暂未填写详细说明。" }}</p>
+          </section>
+
+          <section v-if="detailScreenshots.length" class="detail-section">
+            <div class="detail-section-head">
+              <h2>账号截图</h2>
+              <span>{{ detailScreenshots.length }} 张</span>
+            </div>
+            <div class="detail-screenshot-grid">
+              <figure v-for="shot in detailScreenshots" :key="shot.url" class="detail-screenshot">
+                <img :src="shot.url" :alt="shot.label" loading="lazy" decoding="async" />
+                <figcaption>{{ shot.label }}</figcaption>
+              </figure>
+            </div>
+          </section>
+        </div>
+      </section>
+
+      <aside class="order-panel pc-order-card">
+        <h2>立即下单</h2>
+        <p class="order-safe-text">平台托管订单与押金，按平台交接流程完成账号使用。</p>
+        <el-form label-position="top">
+          <div class="order-total-box">
+            <div class="order-total-head">
+              <span>租赁价格</span>
+              <strong>¥{{ listingPrice(listing) }}</strong>
+            </div>
+            <div class="order-price-breakdown">
+              <div>
+                <span>基础租金</span>
+                <strong>¥{{ orderPriceBreakdown.rent }}</strong>
+              </div>
+              <div>
+                <span>额外物品</span>
+                <strong>¥{{ orderPriceBreakdown.consumable }}</strong>
+              </div>
+            </div>
+            <em>押金另付 ¥{{ listing.deposit_amount }}</em>
+          </div>
+          <dl class="order-check-list">
+            <div>
+              <dt>账号区服</dt>
+              <dd>{{ getServerRegion(listing) || "--" }}</dd>
+            </div>
+            <div>
+              <dt>上号方式</dt>
+              <dd>{{ getLoginMethod(listing) || "--" }}</dd>
+            </div>
+            <div>
+              <dt>预计可租</dt>
+              <dd>{{ formatEstimatedRentalDuration(listing) }}</dd>
+            </div>
+          </dl>
+          <el-button
+            type="warning"
+            size="large"
+            :loading="ordering"
+            :disabled="listing.in_transaction"
+            class="full-control"
+            @click="handleCreateOrder"
+          >
+            {{ listing.in_transaction ? "交易中" : "立即下单" }}
+          </el-button>
+        </el-form>
+      </aside>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.pc-detail-layout {
+  grid-template-columns: minmax(0, 1fr) 420px;
+  align-items: start;
+}
+
+.pc-detail-main {
+  overflow: hidden;
+}
+
+.detail-hero-card {
+  position: relative;
+  display: grid;
+  height: 340px;
+  overflow: hidden;
+  background: #111827;
+  color: #ffffff;
+}
+
+.detail-hero-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.detail-hero-card > span {
+  display: grid;
+  height: 340px;
+  place-items: center;
+  font-size: 32px;
+  font-weight: 900;
+}
+
+.detail-hero-card::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background:
+    linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.58)),
+    linear-gradient(90deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.08) 62%);
+}
+
+.detail-hero-overlay {
+  position: absolute;
+  inset: auto 0 0;
+  z-index: 1;
+  max-width: 860px;
+  padding: 28px;
+}
+
+.detail-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.detail-tags span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgba(255, 255, 255, 0.34);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.14);
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.detail-hero-overlay h1 {
+  margin: 0;
+  color: #ffffff;
+  font-size: 30px;
+  line-height: 1.25;
+}
+
+.detail-hero-overlay p {
+  margin: 8px 0 0;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.detail-body {
+  display: grid;
+  gap: 18px;
+  padding: 24px;
+}
+
+.detail-summary-row {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.detail-metric,
+.detail-section {
+  border: 1px solid #edf0f4;
+  border-radius: 16px;
+  background: #ffffff;
+}
+
+.detail-metric {
+  padding: 18px;
+  background: #f8fafc;
+}
+
+.detail-metric span {
+  display: block;
+  color: #8b9cb5;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.detail-metric strong {
+  display: block;
+  margin-top: 8px;
+  color: #17233d;
+  font-size: 28px;
+  line-height: 1.1;
+}
+
+.detail-metric.is-coin strong {
+  color: #1477ff;
+}
+
+.detail-metric.is-price strong {
+  color: #ef4444;
+}
+
+.detail-section {
+  padding: 22px;
+}
+
+.detail-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.detail-section-head h2 {
+  margin: 0;
+  color: #17233d;
+  font-size: 20px;
+}
+
+.detail-section-head span {
+  color: #8b9cb5;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.detail-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.detail-chip-row span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid rgba(255, 106, 0, 0.28);
+  border-radius: 8px;
+  background: #fff7ed;
+  color: #ea580c;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.detail-info-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin: 18px 0 0;
+}
+
+.detail-info-grid div {
+  min-width: 0;
+  border-radius: 12px;
+  background: #f8fafc;
+  padding: 14px;
+}
+
+.detail-info-grid dt {
+  color: #8b9cb5;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.detail-info-grid dd {
+  margin: 8px 0 0;
+  overflow-wrap: anywhere;
+  color: #17233d;
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.detail-resource-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.detail-resource-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px 12px;
+  border-radius: 12px;
+  background: #f8fafc;
+  padding: 14px;
+}
+
+.detail-resource-card span {
+  min-width: 0;
+  color: #475569;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.detail-resource-card strong {
+  color: #17233d;
+  font-size: 18px;
+}
+
+.detail-resource-card em {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  grid-column: 1 / -1;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.detail-resource-card em b {
+  color: #ff6a00;
+}
+
+.detail-resource-card em small {
+  color: #17233d;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.skin-groups {
+  display: grid;
+  gap: 16px;
+}
+
+.skin-group h3 {
+  margin: 0 0 10px;
+  color: #475569;
+  font-size: 15px;
+}
+
+.detail-description {
+  margin: 0;
+  color: #52616f;
+  font-size: 15px;
+  line-height: 1.8;
+}
+
+.detail-screenshot-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.detail-screenshot {
+  margin: 0;
+}
+
+.detail-screenshot img {
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  object-fit: cover;
+  border-radius: 12px;
+  border: 1px solid #edf0f4;
+}
+
+.detail-screenshot figcaption {
+  margin-top: 8px;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 800;
+  text-align: center;
+}
+
+.pc-order-card {
+  max-width: none;
+  border-radius: 20px;
+}
+
+.order-total-box {
+  margin-bottom: 14px;
+}
+
+.order-total-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(217, 119, 6, 0.14);
+}
+
+.order-total-head span {
+  color: #92400e;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.order-total-head strong {
+  margin: 0;
+  color: #ef4444;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.order-price-breakdown {
+  display: grid;
+  gap: 8px;
+  padding: 12px 0;
+}
+
+.order-price-breakdown div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.order-price-breakdown span {
+  color: #8a5a12;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.order-price-breakdown strong {
+  margin: 0;
+  color: #17233d;
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+.order-total-box > em {
+  padding-top: 10px;
+  border-top: 1px solid rgba(217, 119, 6, 0.14);
+  color: #92400e;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.order-check-list {
+  display: grid;
+  gap: 10px;
+  margin: 0 0 18px;
+}
+
+.order-check-list div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 40px;
+  padding: 0 12px;
+  border-radius: 10px;
+  background: #f8fafc;
+}
+
+.order-check-list dt {
+  color: #8b9cb5;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.order-check-list dd {
+  margin: 0;
+  color: #17233d;
+  font-size: 14px;
+  font-weight: 900;
+  text-align: right;
+}
+
+@media (max-width: 1180px) {
+  .pc-detail-layout,
+  .detail-screenshot-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-summary-row,
+  .detail-info-grid,
+  .detail-resource-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .detail-hero-card,
+  .detail-hero-card img,
+  .detail-hero-card > span {
+    height: 300px;
+  }
+
+  .detail-hero-overlay {
+    padding: 24px;
+  }
+
+  .detail-hero-overlay h1 {
+    font-size: 26px;
+  }
+}
+
+@media (max-width: 720px) {
+  .detail-summary-row,
+  .detail-info-grid,
+  .detail-resource-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/frontend/src/features/listings/views/ListingsView.vue b/frontend/src/features/listings/views/ListingsView.vue
new file mode 100644
index 0000000..c261255
--- /dev/null
+++ b/frontend/src/features/listings/views/ListingsView.vue
@@ -0,0 +1,1389 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "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 "@/utils/listingDisplay";
+import { listingStatusLabel } from "@/utils/statusLabels";
+
+/* ------------------------------------------------------------------ */
+/*  数据加载                                                            */
+/* ------------------------------------------------------------------ */
+const loading = ref(false);
+const loadFailed = ref(false);
+const listings = ref<Listing[]>([]);
+const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions);
+const announcements = ref<string[]>(defaultHomeAnnouncements);
+const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners);
+
+onMounted(() => {
+  loadListings();
+  loadHomeConfig();
+});
+
+async function loadListings() {
+  loading.value = true;
+  loadFailed.value = false;
+  try {
+    listings.value = await fetchListings();
+  } catch {
+    loadFailed.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+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: "awmDesc", label: "AWM数量" },
+  { 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)
+    );
+  }
+  if (sortBy.value === "awmDesc") {
+    return sorted.sort(
+      (a, b) =>
+        getResourceQuantity(b, "awmAmmo") - getResourceQuantity(a, "awmAmmo") ||
+        getCoinWan(b) - getCoinWan(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.map((item) => item.trim()).filter(Boolean))];
+}
+
+function parseQuantityUnit(price: string) {
+  const unit = price.split("/")[1]?.trim();
+  return unit || undefined;
+}
+</script>
+
+<template>
+  <section class="pc-listings">
+    <!-- 防骗提示 -->
+    <div class="fraud-tip">
+      <span class="fraud-dot"></span>
+      <span
+        v-for="(text, idx) in announcements"
+        :key="idx"
+        class="fraud-text"
+        >{{ text }}</span
+      >
+    </div>
+
+    <!-- 页头 -->
+    <div class="listings-header">
+      <h1>租号大厅</h1>
+      <span class="result-count">
+        <strong>{{ filteredListings.length }}</strong> 个可租账号
+      </span>
+    </div>
+
+    <!-- 搜索 + 排序 + 筛选入口 -->
+    <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"
+          />
+        </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"
+          >
+            <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"
+            />
+          </svg>
+        </button>
+      </div>
+    </Transition>
+
+    <!-- ================== 筛选侧栏 ================== -->
+    <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"
+        class="resource-card"
+        :to="`/listings/${item.id}`"
+      >
+        <div class="resource-cover">
+          <img
+            v-if="item.cover_url"
+            :src="item.cover_url"
+            :alt="getListingTitle(item)"
+            loading="lazy"
+            decoding="async"
+          />
+          <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">
+          <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>
+          <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">
+          <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/src/features/listings/views/MobileHomeView.vue b/frontend/src/features/listings/views/MobileHomeView.vue
new file mode 100644
index 0000000..84ef6e5
--- /dev/null
+++ b/frontend/src/features/listings/views/MobileHomeView.vue
@@ -0,0 +1,541 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { RouterLink, useRouter } from "vue-router";
+import { showToast } from "vant";
+import MobileBottomNav from "@/components/MobileBottomNav.vue";
+
+import { ensureSupportChat } from "@/api/chats";
+import {
+  emptyListingPublishOptions,
+  type ListingPublishOptions,
+} from "@/api/listingOptions";
+import { fetchListingsPage, type Listing, type PublicListingQuery } from "@/api/listings";
+import {
+  defaultHomeAnnouncements,
+  defaultHomeBanners,
+  fetchMobileHomeConfig,
+  type HomeBannerSlide,
+} from "@/api/homeConfig";
+import MobileHomeFilterSheet, {
+  type FilterSection,
+} from "./MobileHomeFilterSheet.vue";
+import {
+  getListingChips,
+  getListingDisplayPrice,
+  getListingSubtitle,
+  getListingTitle,
+  getLoginMethod,
+  getServerRegion,
+  hasAcceleratedSaleRatio,
+  hasGiftResources,
+} from "@/utils/listingDisplay";
+import { useSessionStore } from "@/stores/session";
+
+const router = useRouter();
+const session = useSessionStore();
+const loading = ref(false);
+const loadingMore = ref(false);
+const loadFailed = ref(false);
+const listings = ref<Listing[]>([]);
+const totalListings = ref(0);
+const currentPage = ref(1);
+const hasMoreListings = ref(true);
+const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions);
+const sortOpen = ref(false);
+const activeSort = ref("comprehensive");
+const filterOpen = ref(false);
+const selectedFilters = ref<Record<string, string[]>>({});
+const rangeFilters = ref<Record<string, { min: string; max: string }>>({});
+const refreshing = ref(false);
+const searchValue = ref("");
+const announcements = ref<string[]>(defaultHomeAnnouncements);
+const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners);
+const supportLoading = ref(false);
+const mobilePageSize = 10;
+let listingRequestSeq = 0;
+
+const sortOptions = [
+  { key: "comprehensive", label: "综合排序" },
+  { key: "published", label: "发布时间" },
+  { key: "awmDesc", label: "AWM数量" },
+  { key: "priceAsc", label: "价格最低" },
+  { key: "priceDesc", label: "价格最高" },
+];
+
+const rangePresets: Record<string, Array<{ label: string; min: string; max: string }>> = {
+  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 activeSortLabel = computed(
+  () =>
+    sortOptions.find((option) => option.key === activeSort.value)?.label ||
+    "综合排序"
+);
+
+async function handleSupportClick() {
+  if (!session.isLoggedIn) {
+    router.push({ path: "/m/login", query: { redirect: router.currentRoute.value.fullPath } });
+    return;
+  }
+  if (supportLoading.value) return;
+  supportLoading.value = true;
+  try {
+    const chat = await ensureSupportChat();
+    router.push(`/m/chats/${chat.id}`);
+  } catch {
+    showToast({ message: "联系客服失败，请稍后重试", icon: "cross" });
+  } finally {
+    supportLoading.value = false;
+  }
+}
+
+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)
+  )
+);
+
+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 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 displayListings = computed(() => {
+  return listings.value;
+});
+
+onMounted(() => {
+  loadListings();
+  loadHomeConfig();
+  window.addEventListener("scroll", handleWindowScroll, { passive: true });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", handleWindowScroll);
+});
+
+watch(
+  () => listingQuerySignature(),
+  () => {
+    loadListings(true);
+  }
+);
+
+async function loadListings(reset = true) {
+  if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return;
+  const requestSeq = ++listingRequestSeq;
+  if (reset) {
+    loading.value = true;
+    currentPage.value = 1;
+    hasMoreListings.value = true;
+  }
+  loadingMore.value = true;
+  loadFailed.value = false;
+  try {
+    const page = await fetchListingsPage(buildListingQuery(currentPage.value));
+    if (requestSeq !== listingRequestSeq) return;
+    listings.value = reset ? page.items : [...listings.value, ...page.items];
+    totalListings.value = page.total;
+    hasMoreListings.value = listings.value.length < page.total;
+    currentPage.value = page.page + 1;
+    requestAnimationFrame(handleWindowScroll);
+  } catch {
+    if (reset) {
+      listings.value = [];
+      totalListings.value = 0;
+      hasMoreListings.value = false;
+      loadFailed.value = true;
+    }
+  } finally {
+    if (requestSeq === listingRequestSeq) {
+      loading.value = false;
+      loadingMore.value = false;
+    }
+  }
+}
+
+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;
+  }
+}
+
+async function onRefresh() {
+  refreshing.value = true;
+  try {
+    const [, nextHomeConfig] = await Promise.all([
+      loadListings(true),
+      fetchMobileHomeConfig(),
+    ]);
+    announcements.value = nextHomeConfig.announcements;
+    bannerSlides.value = nextHomeConfig.banners;
+    publishOptions.value = nextHomeConfig.publish_options;
+    showToast({ message: "刷新成功", icon: "passed" });
+  } catch {
+    // 静默处理
+  } finally {
+    refreshing.value = false;
+  }
+}
+
+function openFilters() {
+  sortOpen.value = false;
+  filterOpen.value = true;
+}
+
+function toggleSortPanel() {
+  sortOpen.value = !sortOpen.value;
+}
+
+function selectSort(sortKey: string) {
+  activeSort.value = sortKey;
+  sortOpen.value = false;
+}
+
+function clearFilters() {
+  selectedFilters.value = {};
+  rangeFilters.value = {};
+  searchValue.value = "";
+}
+
+function buildListingQuery(page: number): PublicListingQuery {
+  const query: PublicListingQuery = {
+    page,
+    page_size: mobilePageSize,
+    keyword: searchValue.value.trim(),
+    sort: activeSort.value,
+  };
+  const skinGroups: string[] = [];
+  const skinNames: string[] = [];
+  for (const [key, values] of Object.entries(selectedFilters.value)) {
+    const value = values.filter(Boolean).join(",");
+    if (!value) continue;
+    if (key === "server") query.server = value;
+    else if (key === "login") query.login_method = value;
+    else if (key === "insurance") query.insurance = value;
+    else if (key === "stamina") query.stamina = value;
+    else if (key === "load") query.load = value;
+    else if (key === "rank") query.rank = value;
+    else if (isSkinGroupKey(key)) {
+      skinGroups.push(key);
+      skinNames.push(...values);
+    }
+  }
+  if (skinGroups.length) query.skin_group = skinGroups.join(",");
+  if (skinNames.length) query.skin_name = skinNames.join(",");
+
+  for (const [key, range] of Object.entries(rangeFilters.value)) {
+    if (!range.min && !range.max) continue;
+    const min = parseOptionalNumber(range.min);
+    const max = parseOptionalNumber(range.max);
+    if (key === "price") {
+      query.min_price = min;
+      query.max_price = max;
+    } else if (key === "coin") {
+      query.min_coin = min;
+      query.max_coin = max;
+    } else if (key === "secretKd") {
+      query.min_secret_kd = min;
+      query.max_secret_kd = max;
+    } else if (key === "deposit") {
+      query.min_deposit = min;
+      query.max_deposit = max;
+    } else if (key.startsWith("resource_")) {
+      const resourceKey = key.replace("resource_", "");
+      query[`resource_${resourceKey}_min`] = min;
+      query[`resource_${resourceKey}_max`] = max;
+    }
+  }
+  return query;
+}
+
+function listingQuerySignature() {
+  return JSON.stringify(buildListingQuery(1));
+}
+
+function parseOptionalNumber(value: string) {
+  if (value === "") return undefined;
+  const number = Number(value);
+  return Number.isFinite(number) ? number : undefined;
+}
+
+function handleWindowScroll() {
+  if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 360) return;
+  loadListings(false);
+}
+
+function isSkinGroupKey(key: string) {
+  return publishOptions.value.skin_groups.some((group) => group.key === key);
+}
+
+function parseQuantityUnit(price: string) {
+  const unit = price.split("/")[1]?.trim();
+  return unit || undefined;
+}
+
+function uniqueOptions(values: string[]) {
+  return [...new Set(values.map((item) => item.trim()).filter(Boolean))];
+}
+
+</script>
+
+<template>
+  <main class="mobile-shell">
+    <!-- ========== Hero 区域：顶部搜索与公告 ========== -->
+    <section class="mobile-hero">
+      <div class="mobile-topbar">
+        <div class="mobile-brand">
+          <span class="mobile-logo">锤</span>
+          <div>
+            <strong>大锤商行</strong>
+            <small>哈夫币租号</small>
+          </div>
+        </div>
+        <van-search
+          v-model="searchValue"
+          shape="round"
+          placeholder="搜区服 / 段位"
+          class="home-search"
+        />
+        <button class="mobile-service" type="button" :disabled="supportLoading" @click="handleSupportClick">
+          {{ supportLoading ? "接入中" : "客服" }}
+        </button>
+      </div>
+
+      <!-- 防骗提示卡片（不用 van-notice-bar） -->
+      <div class="fraud-tip">
+        <van-icon name="warning-o" :size="16" color="#b8860b" />
+        <span class="fraud-dot"></span>
+        <van-swipe
+          class="announcement-swipe"
+          vertical
+          :autoplay="3200"
+          :show-indicators="false"
+          touchable
+        >
+          <van-swipe-item v-for="item in announcements" :key="item">
+            <span>{{ item }}</span>
+          </van-swipe-item>
+        </van-swipe>
+      </div>
+    </section>
+
+    <!-- ========== Content 区域 ========== -->
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <section class="mobile-content">
+        <!-- Banner 轮播 -->
+        <van-swipe class="banner-swipe" :autoplay="3600" lazy-render>
+          <van-swipe-item
+            v-for="slide in bannerSlides"
+            :key="slide.title || slide.image_url"
+          >
+            <div
+              class="mobile-banner"
+              :class="[`tone-${slide.tone}`, { 'has-image': slide.image_url }]"
+            >
+              <img
+                v-if="slide.image_url"
+                class="banner-image"
+                :src="slide.image_url"
+                :alt="slide.title || slide.eyebrow || '首页轮播图'"
+              />
+              <div>
+                <p v-if="slide.eyebrow">{{ slide.eyebrow }}</p>
+                <h1 v-if="slide.title">{{ slide.title }}</h1>
+                <span v-if="slide.pill">{{ slide.pill }}</span>
+              </div>
+              <div v-if="slide.badge" class="banner-badge">{{ slide.badge }}</div>
+            </div>
+          </van-swipe-item>
+        </van-swipe>
+
+        <div class="list-toolbar">
+          <button type="button" class="sort-entry" @click="toggleSortPanel">
+            <span>{{ activeSortLabel }}</span>
+            <van-icon :name="sortOpen ? 'arrow-up' : 'arrow-down'" :size="14" />
+          </button>
+          <button type="button" class="filter-entry" @click="openFilters">
+            <van-icon name="filter-o" :size="16" />
+            <span>筛选</span>
+            <em v-if="activeFilterCount">{{ activeFilterCount }}</em>
+          </button>
+        </div>
+        <div v-if="sortOpen" class="sort-panel">
+          <button
+            v-for="option in sortOptions"
+            :key="option.key"
+            type="button"
+            :class="{ active: activeSort === option.key }"
+            @click="selectSort(option.key)"
+          >
+            <span>{{ option.label }}</span>
+            <van-icon
+              v-if="activeSort === option.key"
+              name="success"
+              :size="18"
+            />
+          </button>
+        </div>
+        <div class="result-count">
+          <strong>{{ totalListings }}</strong>
+          <span>个可租账号</span>
+        </div>
+
+        <!-- 加载/错误状态 -->
+        <van-loading v-if="loading" class="state-loading" size="24px" vertical>
+          正在加载优质账号...
+        </van-loading>
+        <van-notice-bar
+          v-else-if="loadFailed"
+          left-icon="info-o"
+          color="#6b7a90"
+          background="transparent"
+          text="接口暂不可用，请稍后刷新。"
+        />
+        <van-empty
+          v-else-if="displayListings.length === 0"
+          image="search"
+          description="没有符合条件的账号"
+        >
+          <van-button size="small" type="primary" @click="clearFilters">
+            重置条件
+          </van-button>
+        </van-empty>
+
+        <!-- 列表卡片：全宽上下布局 -->
+        <div class="mobile-list">
+          <RouterLink
+            v-for="item in displayListings"
+            :key="item.id"
+            class="mobile-card"
+            :to="`/m/listings/${item.id}`"
+          >
+            <div class="card-cover">
+              <img
+                v-if="item.cover_url"
+                :src="item.cover_url"
+                :alt="getListingTitle(item)"
+                loading="lazy"
+                decoding="async"
+              />
+              <span v-else>图</span>
+              <div
+                v-if="hasGiftResources(item) || hasAcceleratedSaleRatio(item)"
+                class="card-cover-labels"
+              >
+                <em v-if="hasGiftResources(item)">有赠送</em>
+                <em v-if="hasAcceleratedSaleRatio(item)">特惠</em>
+              </div>
+            </div>
+            <div class="card-main">
+              <div class="card-title-row">
+                <h2>{{ getListingTitle(item) }}</h2>
+              </div>
+              <p class="card-subtitle">{{ getListingSubtitle(item) }}</p>
+              <div class="card-badges-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>
+              <div class="card-footer">
+                <div class="price-col">
+                  <strong>¥{{ getListingDisplayPrice(item) }}</strong>
+                  <span class="rent-sub">押金¥{{ item.deposit_amount }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="card-chip-row">
+              <span
+                v-for="chip in getListingChips(item)"
+                :key="`${item.id}-${chip.label}`"
+              >
+                {{ chip.label }}:{{ chip.value }}
+              </span>
+            </div>
+          </RouterLink>
+        </div>
+        <div v-if="!loading && displayListings.length" class="mobile-load-state">
+          <span v-if="loadingMore">正在加载更多账号...</span>
+          <span v-else-if="!hasMoreListings">已经到底了</span>
+        </div>
+      </section>
+    </van-pull-refresh>
+
+    <MobileHomeFilterSheet
+      v-model:show="filterOpen"
+      v-model:selected-filters="selectedFilters"
+      v-model:range-filters="rangeFilters"
+      :sections="filterSections"
+      :range-presets="rangePresets"
+    />
+
+    <MobileBottomNav />
+  </main>
+</template>
+
+<style scoped src="./MobileHomeView.css"></style>
diff --git a/frontend/src/features/listings/views/MobileListingDetailView.vue b/frontend/src/features/listings/views/MobileListingDetailView.vue
new file mode 100644
index 0000000..ab54738
--- /dev/null
+++ b/frontend/src/features/listings/views/MobileListingDetailView.vue
@@ -0,0 +1,733 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { showToast, showDialog } from "vant";
+
+import { fetchListing, type Listing } from "@/api/listings";
+import { createOrder } from "@/api/orders";
+import { useSessionStore } from "@/stores/session";
+import {
+  assetRegions,
+  formatHafCoinM,
+  formatRatio,
+  getCoinWan,
+  getDailyLoss,
+  getListingConsumablePrice,
+  getListingChips,
+  getListingDisplayPrice,
+  getListingRentPrice,
+  getListingResources,
+  getListingSubtitle,
+  getListingTitle,
+  getLoginMethod,
+  getServerRegion,
+  readAssetString,
+} from "@/utils/listingDisplay";
+
+const route = useRoute();
+const router = useRouter();
+const session = useSessionStore();
+const loading = ref(false);
+const ordering = ref(false);
+const listing = ref<Listing | null>(null);
+
+onMounted(async () => {
+  loading.value = true;
+  try {
+    listing.value = await fetchListing(String(route.params.id));
+  } catch {
+    showToast({ message: "加载失败", icon: "warning-o" });
+  } finally {
+    loading.value = false;
+  }
+});
+
+const orderTotal = computed(() => {
+  if (!listing.value) return "0";
+  return `${Math.round(getListingDisplayPrice(listing.value))}`;
+});
+
+const orderPriceBreakdown = computed(() => {
+  if (!listing.value) {
+    return {
+      rent: 0,
+      consumable: 0,
+    };
+  }
+  return {
+    rent: getListingRentPrice(listing.value),
+    consumable: getListingConsumablePrice(listing.value),
+  };
+});
+
+const detailMetrics = computed(() => {
+  if (!listing.value) return [];
+  const dailyLoss = getDailyLoss(listing.value);
+  return [
+    { label: "纯币", value: formatHafCoinM(getCoinWan(listing.value)), tone: "coin" },
+    {
+      label: "日损耗",
+      value: dailyLoss ? `${dailyLoss}/天` : "--",
+      tone: "coin",
+    },
+    { label: "价格", value: `¥${getListingDisplayPrice(listing.value)}`, tone: "price" },
+    { label: "押金", value: `¥${listing.value.deposit_amount}`, tone: "" },
+  ];
+});
+
+const detailScreenshots = computed(() => {
+  if (!listing.value) return [];
+  const labels = ["纯币截图", "游戏ID截图", "总资产截图", "腾讯安全中心截图", "皮肤截图"];
+  return (listing.value.screenshot_urls || []).map((url, index) => ({
+    label: labels[index] || `账号截图${index + 1}`,
+    url,
+  }));
+});
+
+const detailSkinGroups = computed(() => {
+  if (!listing.value) return [];
+  const groups = listing.value.asset_summary?.skin_groups;
+  if (typeof groups !== "object" || groups === null) return [];
+  const titles: Record<string, string> = {
+    melee: "近战皮肤",
+    operator: "干员皮肤",
+    operatorGold: "干员金皮",
+    operatorRed: "干员红皮",
+    weapon: "武器皮肤",
+  };
+  return Object.entries(groups as Record<string, unknown>)
+    .map(([key, value]) => ({
+      key,
+      title: titles[key] || key,
+      options: Array.isArray(value)
+        ? value.filter((skin): skin is string => typeof skin === "string")
+        : [],
+    }))
+    .filter((group) => group.options.length);
+});
+
+/* 下单 */
+async function handleCreateOrder() {
+  if (!listing.value) return;
+
+  if (!session.token) {
+    showDialog({
+      title: "请先登录",
+      message: "下单需要登录账号，是否前往登录？",
+      confirmButtonText: "去登录",
+      cancelButtonText: "取消",
+      showCancelButton: true,
+    }).then(() => {
+      router.push({ path: "/m/login", query: { redirect: route.fullPath } });
+    });
+    return;
+  }
+
+  if (session.realnameStatus !== "verified") {
+    try {
+      await session.loadMe();
+    } catch {
+      // 401 会由全局拦截器处理。
+    }
+  }
+
+  if (session.realnameStatus !== "verified") {
+    showDialog({
+      title: "请先实名认证",
+      message: "租号下单前需要完成实名认证。",
+      confirmButtonText: "去认证",
+      cancelButtonText: "取消",
+      showCancelButton: true,
+    }).then(() => {
+      router.push({ path: "/m/realname", query: { redirect: route.fullPath } });
+    });
+    return;
+  }
+
+  ordering.value = true;
+  try {
+    await createOrder(listing.value.id);
+    showToast({ message: "订单已创建，请完成支付", icon: "passed" });
+    await router.push(`/m/orders`);
+  } catch (error) {
+    showToast({ message: readError(error, "下单失败"), icon: "cross" });
+  } finally {
+    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;
+  }
+  return fallback;
+}
+
+/** 判断当前底部导航是否激活 */
+function isNavActive(path: string) {
+  if (path === "/m") return route.path === "/m";
+  return route.path.startsWith(path);
+}
+</script>
+
+<template>
+  <main class="mobile-detail">
+    <!-- 顶部导航 -->
+    <header class="page-header">
+      <button class="back-btn" @click="router.back()">
+        <van-icon name="arrow-left" :size="20" />
+      </button>
+      <h1>账号详情</h1>
+      <span class="header-spacer"></span>
+    </header>
+
+    <van-loading v-if="loading" class="center-loading" size="24px" vertical>
+      加载中...
+    </van-loading>
+
+    <template v-else-if="listing">
+      <!-- 防骗提示 -->
+      <div class="fraud-tip">
+        <van-icon name="shield-o" :size="14" color="#ff9800" />
+        <span
+          >防骗提示：下单后请按平台交接流程确认收号与归还，不要私下交易。</span
+        >
+      </div>
+
+      <!-- 封面图 -->
+      <div class="cover-area">
+        <img
+          v-if="detailScreenshots[0]?.url"
+          :src="detailScreenshots[0].url"
+          :alt="getListingTitle(listing)"
+          class="cover-img"
+          decoding="async"
+        />
+        <div v-else class="cover-placeholder">
+          <van-icon name="photo-o" :size="40" color="#ccc" />
+          <span>暂无截图</span>
+        </div>
+        <!-- 截图指示器 -->
+        <div
+          v-if="detailScreenshots.length > 1"
+          class="cover-count"
+        >
+          {{ detailScreenshots.length }}张
+        </div>
+      </div>
+
+      <!-- 标题信息 -->
+      <div class="info-card">
+        <div class="info-tag-row">
+          <van-tag plain type="primary" size="medium">{{
+            getServerRegion(listing)
+          }}</van-tag>
+          <van-tag v-if="getLoginMethod(listing)" plain type="primary" size="medium">
+            {{ getLoginMethod(listing) }}
+          </van-tag>
+          <van-tag v-if="listing.rank_level" plain size="medium">{{
+            listing.rank_level
+          }}</van-tag>
+        </div>
+        <h2 class="detail-title">{{ getListingTitle(listing) }}</h2>
+        <p class="detail-desc">{{ getListingSubtitle(listing) }}</p>
+      </div>
+
+      <!-- 资产指标 -->
+      <div class="metric-row">
+        <div v-for="metric in detailMetrics" :key="metric.label" class="metric-item">
+          <span class="metric-label">{{ metric.label }}</span>
+          <strong class="metric-value" :class="metric.tone">{{ metric.value }}</strong>
+        </div>
+      </div>
+
+      <!-- 基础信息 -->
+      <div class="info-card">
+        <h3 class="card-subtitle">账号资料</h3>
+        <div class="detail-chip-row">
+          <span
+            v-for="chip in getListingChips(listing)"
+            :key="chip.label"
+          >
+            {{ chip.label }}:{{ chip.value }}
+          </span>
+        </div>
+        <div class="info-line">
+          <span class="info-label">M单价</span>
+          <span class="info-text">{{ formatRatio(listing) }}</span>
+        </div>
+        <div class="info-line">
+          <span class="info-label">常用登录地</span>
+          <span class="info-text">{{ assetRegions(listing).join("、") || "--" }}</span>
+        </div>
+        <div v-if="readAssetString(listing, 'ban_record')" class="info-line">
+          <span class="info-label">封禁记录</span>
+          <span class="info-text">{{ readAssetString(listing, "ban_record") }}</span>
+        </div>
+      </div>
+
+      <div v-if="getListingResources(listing).length" class="info-card">
+        <h3 class="card-subtitle">额外消耗品</h3>
+        <div class="resource-grid">
+          <div
+            v-for="resource in getListingResources(listing)"
+            :key="resource.key"
+            class="resource-pill"
+          >
+            <span>{{ resource.label }}</span>
+            <strong>{{ resource.quantity }}</strong>
+            <em>
+              <b>{{ resource.mode || "--" }}</b>
+              <small v-if="resource.amount > 0">¥{{ resource.amount }}</small>
+              <small v-else-if="resource.mode === '收费'">{{ resource.price || "¥0" }}</small>
+              <small v-else>无额外收费</small>
+            </em>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="detailSkinGroups.length" class="info-card">
+        <h3 class="card-subtitle">皮肤</h3>
+        <div v-for="group in detailSkinGroups" :key="group.key" class="skin-detail-group">
+          <p>{{ group.title }}</p>
+          <div class="detail-chip-row">
+            <span v-for="skin in group.options" :key="skin">{{ skin }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="listing.description" class="info-card">
+        <h3 class="card-subtitle">备注</h3>
+        <p class="detail-desc">{{ listing.description }}</p>
+      </div>
+
+      <!-- 截图列表 -->
+      <div v-if="detailScreenshots.length" class="info-card">
+        <h3 class="card-subtitle">账号截图</h3>
+        <div class="screenshot-grid">
+          <figure v-for="shot in detailScreenshots" :key="shot.url" class="screenshot-item">
+            <img :src="shot.url" class="screenshot-thumb" loading="lazy" decoding="async" />
+            <figcaption>{{ shot.label }}</figcaption>
+          </figure>
+        </div>
+      </div>
+
+      <!-- 留白给底部下单栏 -->
+      <div class="bottom-spacer"></div>
+
+      <!-- 底部下单栏（固定） -->
+      <div class="order-bar">
+        <div class="order-bar-left">
+          <div class="order-price">
+            <span class="price-label">价格</span>
+            <span class="price-amount">¥{{ orderTotal }}</span>
+          </div>
+          <div class="order-price-detail">
+            <span>租金 ¥{{ orderPriceBreakdown.rent }}</span>
+            <span>额外 ¥{{ orderPriceBreakdown.consumable }}</span>
+          </div>
+        </div>
+        <van-button
+          type="primary"
+          round
+          class="order-btn"
+          :loading="ordering"
+          :disabled="listing.in_transaction"
+          loading-text="下单中..."
+          @click="handleCreateOrder"
+        >
+          {{ listing.in_transaction ? "交易中" : "立即下单" }}
+        </van-button>
+      </div>
+    </template>
+
+    <!-- 空状态 -->
+    <div v-else class="empty-state">
+      <van-icon name="info-o" :size="48" color="#ccc" />
+      <p>未找到该账号信息</p>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.mobile-detail {
+  min-height: 100dvh;
+  background: #f5f7fa;
+  padding-bottom: calc(80px + env(safe-area-inset-bottom));
+}
+
+/* ========== 顶部导航 ========== */
+.page-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding: 0 12px;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.page-header h1 {
+  flex: 1;
+  margin: 0;
+  font-size: 17px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.back-btn {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border: none;
+  background: none;
+  color: #333;
+  cursor: pointer;
+}
+
+.header-spacer {
+  width: 36px;
+}
+
+.center-loading {
+  display: flex;
+  justify-content: center;
+  padding: 60px 0;
+}
+
+/* ========== 防骗提示 ========== */
+.fraud-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: #fff8e1;
+  font-size: 11px;
+  color: #e65100;
+  line-height: 1.4;
+}
+
+/* ========== 封面图 ========== */
+.cover-area {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: #e8e8e8;
+  overflow: hidden;
+}
+
+.cover-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cover-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: #999;
+  font-size: 12px;
+}
+
+.cover-count {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  padding: 2px 8px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 11px;
+}
+
+/* ========== 信息卡片 ========== */
+.info-card {
+  margin: 10px 12px;
+  padding: 14px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.info-tag-row {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.detail-title {
+  margin: 0 0 6px;
+  font-size: 20px;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 1.35;
+}
+
+.detail-desc {
+  margin: 0;
+  font-size: 13px;
+  color: #666;
+  line-height: 1.5;
+}
+
+/* ========== 资产指标 ========== */
+.metric-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  padding: 0 12px;
+}
+
+.metric-item {
+  background: #fff;
+  border-radius: 10px;
+  padding: 10px 6px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.metric-label {
+  display: block;
+  font-size: 11px;
+  color: #999;
+  margin-bottom: 4px;
+}
+
+.metric-value {
+  display: block;
+  overflow: hidden;
+  font-size: 15px;
+  color: #1a1a1a;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric-value.coin {
+  color: #1477ff;
+}
+
+.metric-value.price {
+  color: #ff5f00;
+}
+
+/* ========== 账号资料 ========== */
+.info-line {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid #f5f5f5;
+  font-size: 13px;
+}
+
+.info-line:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  color: #999;
+}
+
+.info-text {
+  color: #333;
+  font-weight: 500;
+}
+
+/* ========== 截图列表 ========== */
+.card-subtitle {
+  margin: 0 0 10px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.detail-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-bottom: 10px;
+}
+
+.detail-chip-row span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  border: 1px solid #ff8a1f;
+  border-radius: 5px;
+  color: #ff7900;
+  padding: 0 7px;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.resource-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.resource-pill {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 4px 8px;
+  border-radius: 8px;
+  background: #f7f9fc;
+  padding: 10px;
+}
+
+.resource-pill span {
+  min-width: 0;
+  color: #5f6b7a;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.resource-pill strong {
+  color: #17233d;
+  font-size: 14px;
+}
+
+.resource-pill em {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  grid-column: 1 / -1;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.resource-pill em b {
+  color: #ff7900;
+}
+
+.resource-pill em small {
+  min-width: 0;
+  color: #17233d;
+  font-size: 11px;
+  font-weight: 800;
+  text-align: right;
+}
+
+.skin-detail-group + .skin-detail-group {
+  margin-top: 12px;
+}
+
+.skin-detail-group p {
+  margin: 0 0 8px;
+  color: #5f6b7a;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.screenshot-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.screenshot-item {
+  margin: 0;
+}
+
+.screenshot-thumb {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.screenshot-item figcaption {
+  margin-top: 4px;
+  color: #6b7280;
+  font-size: 11px;
+  font-weight: 700;
+  text-align: center;
+}
+
+/* ========== 底部留白 ========== */
+.bottom-spacer {
+  height: 20px;
+}
+
+/* ========== 底部下单栏 ========== */
+.order-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
+  background: #fff;
+  border-top: 1px solid #eee;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.order-bar-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.order-price {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.price-label {
+  font-size: 11px;
+  color: #999;
+}
+
+.price-amount {
+  font-size: 18px;
+  font-weight: 900;
+  color: #ff5f00;
+}
+
+.order-price-detail {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  color: #8a5a12;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.order-btn {
+  flex-shrink: 0;
+  padding: 0 20px;
+  height: 40px;
+  font-size: 14px;
+  font-weight: 700;
+  background: #ff6a00 !important;
+  border: none !important;
+}
+
+/* ========== 空状态 ========== */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 80px 0;
+  color: #999;
+  font-size: 14px;
+}
+</style>