订单和发布适配移动端

frontend/src/router/index.ts

@@ -45,13 +45,14 @@ const router = createRouter({
     {
       path: "/m/orders",
       name: "mobile-orders",
-      component: () => import("@/views/account/OrdersView.vue"),
+      component: () => import("@/views/mobile/MobileOrdersView.vue"),
       meta: { layout: "blank" },
     },
     {
       path: "/m/seller/listings/create",
       name: "mobile-seller-listing-create",
-      component: () => import("@/views/seller/SellerListingCreateView.vue"),
+      component: () =>
+        import("@/views/mobile/MobileSellerListingCreateView.vue"),
       meta: { layout: "blank" },
     },
     {

frontend/src/views/mobile/MobileOrdersView.vue

@@ -0,0 +1,438 @@
+<script setup lang="ts">
+import { onMounted, ref, computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { showToast } from "vant";
+
+import { fetchOrders, type Order } from "@/api/orders";
+
+const router = useRouter();
+const route = useRoute();
+const loading = ref(false);
+const orders = ref<Order[]>([]);
+const activeTab = ref("all");
+
+/** 判断当前底部导航是否激活 */
+function isNavActive(path: string) {
+  if (path === "/m") return route.path === "/m";
+  return route.path.startsWith(path);
+}
+
+onMounted(loadOrders);
+
+async function loadOrders() {
+  loading.value = true;
+  try {
+    orders.value = await fetchOrders();
+  } catch {
+    showToast("订单加载失败，请稍后重试");
+  } finally {
+    loading.value = false;
+  }
+}
+
+/* 状态筛选 */
+const statusTabs = [
+  { key: "all", label: "全部" },
+  { key: "pending", label: "待交接" },
+  { key: "renting", label: "租赁中" },
+  { key: "returning", label: "待归还" },
+  { key: "completed", label: "已完成" },
+];
+
+const displayOrders = computed(() => {
+  if (activeTab.value === "all") return orders.value;
+  return orders.value.filter((o) => o.status === activeTab.value);
+});
+
+/* 状态颜色映射 */
+function statusColor(status: string) {
+  const map: Record<string, string> = {
+    pending: "#ff9800",
+    renting: "#1477ff",
+    returning: "#e91e63",
+    completed: "#4caf50",
+    cancelled: "#999",
+    dispute: "#f44336",
+  };
+  return map[status] || "#999";
+}
+
+function statusLabel(status: string) {
+  const map: Record<string, string> = {
+    pending: "待交接",
+    renting: "租赁中",
+    returning: "待归还",
+    completed: "已完成",
+    cancelled: "已取消",
+    dispute: "申诉中",
+  };
+  return map[status] || status;
+}
+
+function goDetail(id: number) {
+  router.push(`/m/orders/${id}`);
+}
+</script>
+
+<template>
+  <main class="mobile-orders">
+    <!-- 顶部导航 -->
+    <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>
+
+    <!-- 状态筛选条 -->
+    <div class="status-tabs">
+      <button
+        v-for="tab in statusTabs"
+        :key="tab.key"
+        class="tab-btn"
+        :class="{ active: activeTab === tab.key }"
+        @click="activeTab = tab.key"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <!-- 订单列表 -->
+    <section class="order-list">
+      <van-loading v-if="loading" class="center-loading" size="24px" vertical>
+        加载中...
+      </van-loading>
+
+      <div v-else-if="displayOrders.length === 0" class="empty-state">
+        <van-icon name="orders-o" :size="48" color="#ccc" />
+        <p>暂无订单</p>
+      </div>
+
+      <div
+        v-for="order in displayOrders"
+        :key="order.id"
+        class="order-card"
+        @click="goDetail(order.id)"
+      >
+        <!-- 卡片头：订单号 + 状态 -->
+        <div class="card-header">
+          <span class="order-no">{{ order.order_no }}</span>
+          <span
+            class="status-badge"
+            :style="{ background: statusColor(order.status) }"
+          >
+            {{ statusLabel(order.status) }}
+          </span>
+        </div>
+
+        <!-- 卡片体：关键信息 -->
+        <div class="card-body">
+          <h3 class="order-title">{{ order.title }}</h3>
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="info-label">租期</span>
+              <span class="info-value">{{ order.rent_hours }}小时</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">租金</span>
+              <span class="info-value price">¥{{ order.rent_amount }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">押金</span>
+              <span class="info-value">¥{{ order.deposit_amount }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">区服</span>
+              <span class="info-value">{{ order.server_region }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 卡片底：时间 + 操作 -->
+        <div class="card-footer">
+          <span class="order-time">{{ order.created_at?.slice(0, 16) }}</span>
+          <span class="detail-link">查看详情 ›</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 底部导航 -->
+    <nav class="bottom-nav">
+      <RouterLink
+        to="/m"
+        class="nav-item"
+        :class="{ active: isNavActive('/m') }"
+      >
+        <van-icon name="home-o" :size="22" />
+        <span>首页</span>
+      </RouterLink>
+      <RouterLink
+        to="/m/listings"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/listings') }"
+      >
+        <van-icon name="search" :size="22" />
+        <span>租号</span>
+      </RouterLink>
+      <RouterLink to="/m/seller/listings/create" class="nav-item nav-publish">
+        <div class="publish-pill">+</div>
+        <span>发布</span>
+      </RouterLink>
+      <RouterLink
+        to="/m/orders"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/orders') }"
+      >
+        <van-icon name="orders-o" :size="22" />
+        <span>订单</span>
+      </RouterLink>
+      <RouterLink
+        to="/m/profile"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/profile') }"
+      >
+        <van-icon name="manager-o" :size="22" />
+        <span>我的</span>
+      </RouterLink>
+    </nav>
+  </main>
+</template>
+
+<style scoped>
+.mobile-orders {
+  min-height: 100dvh;
+  background: #f5f7fa;
+  padding-bottom: 56px;
+}
+
+/* ========== 顶部导航 ========== */
+.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-tabs {
+  display: flex;
+  gap: 6px;
+  padding: 12px 16px;
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.tab-btn {
+  flex-shrink: 0;
+  padding: 6px 14px;
+  border-radius: 16px;
+  border: 1px solid #ddd;
+  background: #fff;
+  color: #666;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.tab-btn.active {
+  background: #1477ff;
+  color: #fff;
+  border-color: #1477ff;
+}
+
+/* ========== 订单列表 ========== */
+.order-list {
+  padding: 12px 16px;
+}
+
+.center-loading {
+  display: flex;
+  justify-content: center;
+  padding: 60px 0;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 80px 0;
+  color: #999;
+  font-size: 14px;
+}
+
+/* ========== 订单卡片 ========== */
+.order-card {
+  background: #fff;
+  border-radius: 12px;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  cursor: pointer;
+  transition: box-shadow 0.15s;
+}
+
+.order-card:active {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px 0;
+}
+
+.order-no {
+  font-size: 11px;
+  color: #999;
+  font-family: monospace;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.card-body {
+  padding: 10px 14px;
+}
+
+.order-title {
+  margin: 0 0 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 1.3;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px 16px;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.info-label {
+  color: #999;
+}
+
+.info-value {
+  color: #333;
+  font-weight: 500;
+}
+
+.info-value.price {
+  color: #ff5f00;
+  font-weight: 700;
+}
+
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px 10px;
+  border-top: 1px solid #f5f5f5;
+}
+
+.order-time {
+  font-size: 11px;
+  color: #bbb;
+}
+
+.detail-link {
+  font-size: 12px;
+  color: #1477ff;
+  font-weight: 600;
+}
+
+/* ========== 底部导航 ========== */
+.bottom-nav {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  height: 50px;
+  background: #fff;
+  border-top: 1px solid #eee;
+}
+
+.nav-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  color: #999;
+  font-size: 10px;
+  text-decoration: none;
+}
+
+.nav-item.active {
+  color: #1477ff;
+}
+
+.nav-item span {
+  font-weight: 600;
+}
+
+.publish-pill {
+  width: 36px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border-radius: 13px;
+  background: #ff6a00;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.nav-publish span {
+  color: #ff6a00;
+}
+</style>

frontend/src/views/mobile/MobileProfileView.vue

@@ -1,14 +1,30 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { useSessionStore } from "@/stores/session";
 
 const session = useSessionStore();
 const router = useRouter();
+const route = useRoute();
+
+/** 判断当前底部导航是否激活 */
+function isNavActive(path: string) {
+  if (path === "/m") return route.path === "/m";
+  return route.path.startsWith(path);
+}
+
 const isLoggedIn = computed(() => Boolean(session.token));
-const displayName = computed(() => session.phone ? `用户${session.phone.slice(-6)}` : `用户${session.userId || 883099}`);
+const displayName = computed(() =>
+  session.phone
+    ? `用户${session.phone.slice(-6)}`
+    : `用户${session.userId || 883099}`
+);
 const displayId = computed(() => session.userId || 138865);
-const maskedPhone = computed(() => session.phone ? `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}` : "登录后查看手机号");
+const maskedPhone = computed(() =>
+  session.phone
+    ? `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}`
+    : "登录后查看手机号"
+);
 
 const sellerOrders = [
   { label: "商品管理", icon: "🛍️", to: "/m/seller/listings/create" },
@@ -22,7 +38,17 @@ const buyerOrders = [
   { label: "已完成", icon: "☑️", to: "/m/orders" },
   { label: "退款/售后", icon: "🧾", to: "/m/orders" },
 ];
-const serviceItems = ["收款账户", "余额明细", "提现记录", "商务合作", "我的代练", "我的代肝", "我的收藏", "我的打赏", "我的邀请"];
+const serviceItems = [
+  "收款账户",
+  "余额明细",
+  "提现记录",
+  "商务合作",
+  "我的代练",
+  "我的代肝",
+  "我的收藏",
+  "我的打赏",
+  "我的邀请",
+];
 const serviceIcons = ["👥", "🪙", "💸", "💼", "⚔️", "💎", "⭐", "💰", "🎁"];
 
 function logout() {
@@ -42,7 +68,13 @@ function goToLogin() {
         <div class="guest-logo">锤</div>
         <h1>登录大锤商行</h1>
         <p>登录后查看订单、管理发布、提现余额，并享受平台担保交易服务。</p>
-        <van-button type="primary" block round class="guest-login-btn" @click="goToLogin">
+        <van-button
+          type="primary"
+          block
+          round
+          class="guest-login-btn"
+          @click="goToLogin"
+        >
           立即登录
         </van-button>
         <div class="guest-benefits">
@@ -57,13 +89,7 @@ function goToLogin() {
     <template v-else>
       <!-- 头像区 -->
       <section class="profile-header">
-        <van-image
+        <van-image round width="64px" height="64px" src="" class="avatar-image">
-          round
-          width="64px"
-          height="64px"
-          src=""
-          class="avatar-image"
-        >
           <template #error>
             <div class="avatar-fallback">👤</div>
           </template>
@@ -87,10 +113,19 @@ function goToLogin() {
         </van-cell>
         <van-cell class="balance-actions">
           <template #title>
-            <van-button size="mini" plain hairline type="warning" class="detail-btn">查看明细</van-button>
+            <van-button
+              size="mini"
+              plain
+              hairline
+              type="warning"
+              class="detail-btn"
+              >查看明细</van-button
+            >
           </template>
           <template #value>
-            <van-button type="primary" size="small" round class="withdraw-btn">提现</van-button>
+            <van-button type="primary" size="small" round class="withdraw-btn"
+              >提现</van-button
+            >
           </template>
         </van-cell>
       </van-cell-group>
@@ -137,10 +172,7 @@ function goToLogin() {
     <!-- 服务菜单 -->
     <van-cell-group inset class="service-group">
       <van-grid :column-num="4" :border="false" class="service-grid">
-        <van-grid-item
+        <van-grid-item v-for="(item, index) in serviceItems" :key="item">
-          v-for="(item, index) in serviceItems"
-          :key="item"
-        >
           <template #icon>
             <span class="menu-icon">{{ serviceIcons[index] }}</span>
           </template>
@@ -165,11 +197,19 @@ function goToLogin() {
 
     <!-- 底部导航 - 手写原生，和首页一致 -->
     <nav class="bottom-nav">
-      <RouterLink to="/m" class="nav-item">
+      <RouterLink
+        to="/m"
+        class="nav-item"
+        :class="{ active: isNavActive('/m') }"
+      >
         <van-icon name="home-o" :size="22" />
         <span>首页</span>
       </RouterLink>
-      <RouterLink to="/m/listings" class="nav-item">
+      <RouterLink
+        to="/m/listings"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/listings') }"
+      >
         <van-icon name="search" :size="22" />
         <span>租号</span>
       </RouterLink>
@@ -177,11 +217,19 @@ function goToLogin() {
         <div class="publish-pill">+</div>
         <span>发布</span>
       </RouterLink>
-      <RouterLink to="/m/orders" class="nav-item">
+      <RouterLink
+        to="/m/orders"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/orders') }"
+      >
         <van-icon name="orders-o" :size="22" />
         <span>订单</span>
       </RouterLink>
-      <RouterLink to="/m/profile" class="nav-item active">
+      <RouterLink
+        to="/m/profile"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/profile') }"
+      >
         <van-icon name="manager-o" :size="22" />
         <span>我的</span>
       </RouterLink>

frontend/src/views/mobile/MobileSellerListingCreateView.vue

@@ -0,0 +1,596 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { showToast } from "vant";
+
+import { uploadFile } from "@/api/files";
+import { createListing } from "@/api/listings";
+
+const router = useRouter();
+const route = useRoute();
+const loading = ref(false);
+const uploading = ref(false);
+const screenshotUrls = ref<string[]>([]);
+
+/** 判断当前底部导航是否激活 */
+function isNavActive(path: string) {
+  if (path === "/m") return route.path === "/m";
+  return route.path.startsWith(path);
+}
+
+const form = reactive({
+  title: "",
+  description: "",
+  server_region: "微信区",
+  login_platform: "QQ",
+  rank_level: "",
+  haf_coin_amount: 0,
+  price_hourly: 5,
+  price_daily: 50,
+  price_weekly: 300,
+  deposit_amount: 100,
+  min_rent_hours: 1,
+  max_rent_hours: 24,
+});
+
+/* 区服选项 */
+const serverOptions = ["微信区", "QQ区", "全平台"];
+const platformOptions = ["QQ", "微信", "Steam"];
+
+/* 截图相关 */
+const fileInput = ref<HTMLInputElement | null>(null);
+
+function triggerUpload() {
+  fileInput.value?.click();
+}
+
+async function handleScreenshotUpload(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) return;
+  uploading.value = true;
+  try {
+    const uploaded = await uploadFile(file, "listing");
+    screenshotUrls.value = [...screenshotUrls.value, uploaded.url];
+    showToast("截图已上传");
+  } catch (error) {
+    showToast(readError(error, "截图上传失败"));
+  } finally {
+    uploading.value = false;
+    input.value = "";
+  }
+}
+
+function removeScreenshot(index: number) {
+  screenshotUrls.value = screenshotUrls.value.filter((_, i) => i !== index);
+}
+
+/* 提交 */
+async function handleSubmit() {
+  if (!form.title.trim()) {
+    showToast("请输入标题");
+    return;
+  }
+  loading.value = true;
+  try {
+    await createListing({ ...form, screenshot_urls: screenshotUrls.value });
+    showToast("发布成功");
+    await router.push("/m/profile");
+  } catch (error) {
+    showToast(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>
+  <main class="mobile-publish">
+    <!-- 顶部导航 -->
+    <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>
+
+    <!-- 表单主体 -->
+    <section class="form-body">
+      <!-- 基本信息 -->
+      <div class="form-section">
+        <h2 class="section-title">基本信息</h2>
+        <van-field
+          v-model="form.title"
+          label="标题"
+          placeholder="例如：高段位哈夫币充足账号"
+          required
+          class="publish-field"
+        />
+        <van-field
+          v-model="form.description"
+          label="说明"
+          type="textarea"
+          placeholder="描述账号资产和特点"
+          rows="3"
+          autosize
+          class="publish-field"
+        />
+      </div>
+
+      <!-- 游戏信息 -->
+      <div class="form-section">
+        <h2 class="section-title">游戏信息</h2>
+
+        <van-field label="区服" class="publish-field">
+          <template #input>
+            <div class="radio-group">
+              <button
+                v-for="opt in serverOptions"
+                :key="opt"
+                class="radio-btn"
+                :class="{ active: form.server_region === opt }"
+                @click="form.server_region = opt"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </template>
+        </van-field>
+
+        <van-field label="平台" class="publish-field">
+          <template #input>
+            <div class="radio-group">
+              <button
+                v-for="opt in platformOptions"
+                :key="opt"
+                class="radio-btn"
+                :class="{ active: form.login_platform === opt }"
+                @click="form.login_platform = opt"
+              >
+                {{ opt }}
+              </button>
+            </div>
+          </template>
+        </van-field>
+
+        <van-field
+          v-model="form.rank_level"
+          label="段位"
+          placeholder="如：钻石、战神"
+          class="publish-field"
+        />
+        <van-field
+          v-model="form.haf_coin_amount"
+          label="哈夫币"
+          type="digit"
+          placeholder="0"
+          class="publish-field"
+        />
+      </div>
+
+      <!-- 价格设置 -->
+      <div class="form-section">
+        <h2 class="section-title">价格设置</h2>
+        <div class="price-grid">
+          <van-field
+            v-model="form.price_hourly"
+            label="时租"
+            type="number"
+            suffix="元/小时"
+            class="publish-field price-field"
+          />
+          <van-field
+            v-model="form.price_daily"
+            label="日租"
+            type="number"
+            suffix="元/天"
+            class="publish-field price-field"
+          />
+          <van-field
+            v-model="form.price_weekly"
+            label="周租"
+            type="number"
+            suffix="元/周"
+            class="publish-field price-field"
+          />
+          <van-field
+            v-model="form.deposit_amount"
+            label="押金"
+            type="number"
+            suffix="元"
+            class="publish-field price-field"
+          />
+        </div>
+      </div>
+
+      <!-- 租期设置 -->
+      <div class="form-section">
+        <h2 class="section-title">租期限制</h2>
+        <div class="period-row">
+          <van-field
+            v-model="form.min_rent_hours"
+            label="最短"
+            type="digit"
+            suffix="小时"
+            class="publish-field period-field"
+          />
+          <span class="period-sep">~</span>
+          <van-field
+            v-model="form.max_rent_hours"
+            label="最长"
+            type="digit"
+            suffix="小时"
+            class="publish-field period-field"
+          />
+        </div>
+      </div>
+
+      <!-- 账号截图 -->
+      <div class="form-section">
+        <h2 class="section-title">账号截图</h2>
+        <p class="section-hint">上传账号资产截图（最多12张）</p>
+
+        <div class="upload-area">
+          <div
+            v-for="(url, index) in screenshotUrls"
+            :key="url"
+            class="upload-item"
+          >
+            <img :src="url" class="upload-thumb" />
+            <button class="remove-btn" @click="removeScreenshot(index)">
+              ✕
+            </button>
+          </div>
+
+          <button
+            v-if="screenshotUrls.length < 12"
+            class="upload-add"
+            :disabled="uploading"
+            @click="triggerUpload"
+          >
+            <van-icon name="photograph" :size="24" color="#ccc" />
+            <span>{{ uploading ? "上传中" : "添加" }}</span>
+          </button>
+        </div>
+
+        <input
+          ref="fileInput"
+          type="file"
+          accept="image/jpeg,image/png,image/webp"
+          style="display: none"
+          @change="handleScreenshotUpload"
+        />
+      </div>
+
+      <!-- 提交按钮 -->
+      <van-button
+        type="primary"
+        block
+        round
+        class="submit-btn"
+        :loading="loading"
+        loading-text="发布中..."
+        @click="handleSubmit"
+      >
+        保存发布
+      </van-button>
+    </section>
+
+    <!-- 底部导航 -->
+    <nav class="bottom-nav">
+      <RouterLink
+        to="/m"
+        class="nav-item"
+        :class="{ active: isNavActive('/m') }"
+      >
+        <van-icon name="home-o" :size="22" />
+        <span>首页</span>
+      </RouterLink>
+      <RouterLink
+        to="/m/listings"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/listings') }"
+      >
+        <van-icon name="search" :size="22" />
+        <span>租号</span>
+      </RouterLink>
+      <RouterLink to="/m/seller/listings/create" class="nav-item nav-publish">
+        <div class="publish-pill">+</div>
+        <span>发布</span>
+      </RouterLink>
+      <RouterLink
+        to="/m/orders"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/orders') }"
+      >
+        <van-icon name="orders-o" :size="22" />
+        <span>订单</span>
+      </RouterLink>
+      <RouterLink
+        to="/m/profile"
+        class="nav-item"
+        :class="{ active: isNavActive('/m/profile') }"
+      >
+        <van-icon name="manager-o" :size="22" />
+        <span>我的</span>
+      </RouterLink>
+    </nav>
+  </main>
+</template>
+
+<style scoped>
+.mobile-publish {
+  min-height: 100dvh;
+  background: #f5f7fa;
+  padding-bottom: 56px;
+}
+
+/* ========== 顶部导航 ========== */
+.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;
+}
+
+/* ========== 表单区 ========== */
+.form-body {
+  padding: 12px 16px 24px;
+}
+
+.form-section {
+  background: #fff;
+  border-radius: 12px;
+  padding: 14px;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.section-title {
+  margin: 0 0 10px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+.section-hint {
+  margin: -6px 0 8px;
+  font-size: 11px;
+  color: #999;
+}
+
+.publish-field {
+  margin-bottom: 6px;
+  border-radius: 8px;
+  background: #f8f9fb;
+  overflow: hidden;
+}
+
+.publish-field :deep(.van-field__label) {
+  color: #333;
+  font-weight: 600;
+  font-size: 13px;
+  width: 60px;
+}
+
+.publish-field :deep(.van-field__control) {
+  font-size: 14px;
+}
+
+/* ========== 单选按钮组 ========== */
+.radio-group {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.radio-btn {
+  padding: 5px 14px;
+  border-radius: 14px;
+  border: 1px solid #ddd;
+  background: #fff;
+  color: #666;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.radio-btn.active {
+  background: #1477ff;
+  color: #fff;
+  border-color: #1477ff;
+}
+
+/* ========== 价格网格 ========== */
+.price-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+
+.price-field :deep(.van-field__label) {
+  width: auto;
+  font-size: 12px;
+}
+
+.price-field :deep(.van-field__suffix) {
+  font-size: 11px;
+  color: #999;
+}
+
+/* ========== 租期行 ========== */
+.period-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.period-field {
+  flex: 1;
+}
+
+.period-sep {
+  color: #ccc;
+  font-size: 16px;
+  padding-top: 16px;
+}
+
+/* ========== 截图上传 ========== */
+.upload-area {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.upload-item {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.upload-thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.remove-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: 0 0 0 8px;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.upload-add {
+  width: 72px;
+  height: 72px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  border: 1px dashed #ccc;
+  border-radius: 8px;
+  background: #f8f9fb;
+  color: #999;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.upload-add:disabled {
+  opacity: 0.5;
+}
+
+/* ========== 提交按钮 ========== */
+.submit-btn {
+  margin-top: 8px;
+  height: 44px;
+  font-size: 15px;
+  font-weight: 700;
+  background: #ff6a00 !important;
+  border: none !important;
+}
+
+/* ========== 底部导航 ========== */
+.bottom-nav {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  height: 50px;
+  background: #fff;
+  border-top: 1px solid #eee;
+}
+
+.nav-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  color: #999;
+  font-size: 10px;
+  text-decoration: none;
+}
+
+.nav-item.active {
+  color: #1477ff;
+}
+
+.nav-item span {
+  font-weight: 600;
+}
+
+.publish-pill {
+  width: 36px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border-radius: 13px;
+  background: #ff6a00;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.nav-publish span {
+  color: #ff6a00;
+}
+
+.nav-publish.active span {
+  color: #ff6a00;
+}
+</style>