refactor: 提取移动端公共底部导航栏并优化全面屏安全区域与接口报错机制

frontend/src/api/client.ts

@@ -1,5 +1,15 @@
 import axios, { type AxiosResponse, type InternalAxiosRequestConfig } from 'axios'
 import { ElMessage } from 'element-plus'
+import { showToast } from 'vant'
+
+function showError(message: string) {
+  const isMobile = window.location.pathname.startsWith('/m')
+  if (isMobile) {
+    showToast({ message, icon: 'cross' })
+  } else {
+    ElMessage.error(message)
+  }
+}
 
 declare module 'axios' {
   export interface AxiosRequestConfig {
@@ -115,7 +125,7 @@ apiClient.interceptors.response.use(
     if (!originalRequest || error?.response?.status !== 401 || originalRequest._retry) {
       if (originalRequest && !originalRequest.silent) {
         const msg = error.response?.data?.message || error.message || '网络连接异常，请稍后重试'
-        ElMessage.error(msg)
+        showError(msg)
       }
       return Promise.reject(error)
     }
@@ -125,7 +135,7 @@ apiClient.interceptors.response.use(
     if (isRefreshRequest(requestUrl)) {
       redirectToLogin(scope)
       if (originalRequest && !originalRequest.silent) {
-        ElMessage.error('登录已失效，请重新登录')
+        showError('登录已失效，请重新登录')
       }
       return Promise.reject(error)
     }
@@ -152,7 +162,7 @@ apiClient.interceptors.response.use(
       rejectPendingRequests(scope, refreshError)
       redirectToLogin(scope)
       if (originalRequest && !originalRequest.silent) {
-        ElMessage.error('会话已过期，请重新登录')
+        showError('会话已过期，请重新登录')
       }
       return Promise.reject(refreshError)
     } finally {

frontend/src/components/MobileBottomNav.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { useRoute, RouterLink } from 'vue-router'
+
+const route = useRoute()
+
+function isNavActive(path: string) {
+  if (path === '/m') return route.path === '/m'
+  return route.path.startsWith(path)
+}
+</script>
+
+<template>
+  <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/messages"
+      class="nav-item"
+      :class="{ active: isNavActive('/m/messages') }"
+    >
+      <van-icon name="chat-o" :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>
+</template>
+
+<style scoped>
+.bottom-nav {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  background: #fff;
+  border-top: 1px solid #eee;
+  padding-bottom: env(safe-area-inset-bottom);
+  height: calc(50px + env(safe-area-inset-bottom));
+  box-sizing: border-box;
+}
+
+.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;
+}
+
+/* 响应式适配 */
+@media (min-width: 520px) {
+  .bottom-nav {
+    left: calc((100vw - 430px) / 2);
+    right: calc((100vw - 430px) / 2);
+  }
+}
+</style>

frontend/src/views/mobile/MobileHomeView.css

@@ -2,7 +2,7 @@
   min-height: 100vh;
   background: #f5f7fa;
   color: #17233d;
-  padding-bottom: 58px;
+  padding-bottom: calc(58px + env(safe-area-inset-bottom));
 }
 
 /* ========== 顶部信息区 ========== */
@@ -569,55 +569,6 @@
   }
 }
 
-/* ========== 底部导航：原生App风格 ========== */
-.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;
-}
-
 /* ========== 响应式适配 ========== */
 @media (min-width: 520px) {
   .mobile-shell {
@@ -625,9 +576,4 @@
     margin: 0 auto;
     box-shadow: 0 0 0 1px rgba(23, 35, 61, 0.08);
   }
-
-  .bottom-nav {
-    left: calc((100vw - 430px) / 2);
-    right: calc((100vw - 430px) / 2);
-  }
 }

frontend/src/views/mobile/MobileHomeView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
-import { RouterLink, useRoute } from "vue-router";
+import { RouterLink } from "vue-router";
 import { showToast } from "vant";
+import MobileBottomNav from "@/components/MobileBottomNav.vue";
 
 import {
   emptyListingPublishOptions,
@@ -36,7 +37,6 @@ import {
   readAssetString,
 } from "@/utils/listingDisplay";
 
-const route = useRoute();
 const loading = ref(false);
 const loadFailed = ref(false);
 const listings = ref<Listing[]>([]);
@@ -145,12 +145,6 @@ const displayListings = computed(() => {
   return sortListings(filtered);
 });
 
-/** 判断当前底部导航是否激活 */
-function isNavActive(path: string) {
-  if (path === "/m") return route.path === "/m";
-  return route.path.startsWith(path);
-}
-
 onMounted(() => {
   loadListings();
   loadHomeConfig();
@@ -497,49 +491,9 @@ function uniqueOptions(values: string[]) {
       v-model:range-filters="rangeFilters"
       :sections="filterSections"
       :range-presets="rangePresets"
-      @reset="clearFilters"
-    />
-
-    <!-- ========== 底部导航：原生App风格，手写，不用 van-tabbar ========== -->
-    <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/messages"
-        class="nav-item"
-        :class="{ active: isNavActive('/m/messages') }"
-      >
-        <van-icon name="chat-o" :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>
+    <MobileBottomNav />
   </main>
 </template>
 
 <style scoped src="./MobileHomeView.css"></style>
+

frontend/src/views/mobile/MobileListingDetailView.vue

@@ -339,7 +339,7 @@ function isNavActive(path: string) {
 .mobile-detail {
   min-height: 100dvh;
   background: #f5f7fa;
-  padding-bottom: 80px;
+  padding-bottom: calc(80px + env(safe-area-inset-bottom));
 }
 
 /* ========== 顶部导航 ========== */
@@ -639,7 +639,7 @@ function isNavActive(path: string) {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 8px 12px;
+  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);

frontend/src/views/mobile/MobileMessagesView.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import { useRouter, useRoute } from "vue-router";
+import { useRouter } from "vue-router";
+import MobileBottomNav from "@/components/MobileBottomNav.vue";
 
 const router = useRouter();
-const route = useRoute();
-
-function isNavActive(path: string) {
-  if (path === "/m") return route.path === "/m";
-  return route.path.startsWith(path);
-}
 </script>
 
 <template>
@@ -24,28 +19,7 @@ function isNavActive(path: string) {
     <van-empty description="暂无消息" image="search" />
 
     <!-- 底部导航 -->
-    <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/messages" class="nav-item" :class="{ active: isNavActive('/m/messages') }">
-        <van-icon name="chat-o" :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>
+    <MobileBottomNav />
   </main>
 </template>
 
@@ -53,7 +27,7 @@ function isNavActive(path: string) {
 .mobile-messages {
   min-height: 100dvh;
   background: #f5f7fa;
-  padding-bottom: 56px;
+  padding-bottom: calc(56px + env(safe-area-inset-bottom));
 }
 
 /* ========== 顶部导航 ========== */
@@ -91,53 +65,4 @@ function isNavActive(path: string) {
 .header-spacer {
   width: 36px;
 }
-
-/* ========== 底部导航 ========== */
-.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/MobileOrdersView.vue

@@ -1,26 +1,20 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { useRouter } from "vue-router";
 import { showToast } from "vant";
+import MobileBottomNav from "@/components/MobileBottomNav.vue";
 
 import { fetchOrders, payOrder, type Order } from "@/api/orders";
 import { useSessionStore } from "@/stores/session";
 import { formatDateMinute } from "@/utils/time";
 
 const router = useRouter();
-const route = useRoute();
 const session = useSessionStore();
 const loading = ref(false);
 const orders = ref<Order[]>([]);
 const activeTab = ref("all");
 const payingOrderId = ref<number | null>(null);
 
-/** 判断当前底部导航是否激活 */
-function isNavActive(path: string) {
-  if (path === "/m") return route.path === "/m";
-  return route.path.startsWith(path);
-}
-
 onMounted(loadOrders);
 
 async function loadOrders() {
@@ -204,44 +198,7 @@ function readError(error: unknown, fallback: string) {
     </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/messages"
-        class="nav-item"
-        :class="{ active: isNavActive('/m/messages') }"
-      >
-        <van-icon name="chat-o" :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>
+    <MobileBottomNav />
   </main>
 </template>
 
@@ -249,7 +206,7 @@ function readError(error: unknown, fallback: string) {
 .mobile-orders {
   min-height: 100dvh;
   background: #f5f7fa;
-  padding-bottom: 56px;
+  padding-bottom: calc(56px + env(safe-area-inset-bottom));
 }
 
 /* ========== 顶部导航 ========== */
@@ -433,52 +390,4 @@ function readError(error: unknown, fallback: string) {
   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

@@ -3,6 +3,7 @@ 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";
 
 const session = useSessionStore();
 const router = useRouter();
@@ -122,12 +123,6 @@ function confirmLogout() {
     .catch(() => {});
 }
 
-/** 判断当前底部导航是否激活 */
-function isNavActive(path: string) {
-  if (path === "/m") return route.path === "/m";
-  return route.path.startsWith(path);
-}
-
 const isLoggedIn = computed(() => Boolean(session.token));
 
 onMounted(() => {
@@ -300,45 +295,7 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
       </section>
     </van-popup>
 
-    <!-- 底部导航 - 手写原生，和首页一致 -->
-    <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/messages"
-        class="nav-item"
-        :class="{ active: isNavActive('/m/messages') }"
-      >
-        <van-icon name="chat-o" :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>
+    <MobileBottomNav />
   </main>
 </template>
 
@@ -347,7 +304,7 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
   min-height: 100vh;
   background: #f5f6f8;
   color: #1a202c;
-  padding: 0 0 60px;
+  padding: 0 0 calc(60px + env(safe-area-inset-bottom));
 }
 
 /* ========== 已登录区 - 个人信息卡 ========== */
@@ -653,55 +610,6 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
   font-weight: 800;
 }
 
-/* ========== 底部导航 - 手写原生 ========== */
-.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;
-}
-
 /* ========== 响应式适配 ========== */
 @media (min-width: 520px) {
   .mobile-profile-shell {
@@ -709,10 +617,5 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
     margin: 0 auto;
     box-shadow: 0 0 0 1px rgba(23, 35, 61, 0.08);
   }
-
-  .bottom-nav {
-    left: calc((100vw - 430px) / 2);
-    right: calc((100vw - 430px) / 2);
-  }
 }
 </style>

frontend/src/views/mobile/MobileSellerListingCreateView.css

@@ -3,7 +3,7 @@
   min-width: 0;
   min-height: 100dvh;
   background: #f4f6f8;
-  padding-bottom: 56px;
+  padding-bottom: calc(56px + env(safe-area-inset-bottom));
   overflow-x: hidden;
 }
 
@@ -657,58 +657,7 @@
   background: #ff6a00 !important;
 }
 
-.bottom-nav {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 100;
-  display: flex;
-  width: 100%;
-  height: 50px;
-  box-sizing: border-box;
-  background: #fff;
-  border-top: 1px solid #eee;
-}
 
-.nav-item {
-  flex: 0 0 20%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
-  min-width: 0;
-  height: 50px;
-  color: #999;
-  font-size: 10px;
-  text-decoration: none;
-}
-
-.nav-item.active {
-  color: #1477ff;
-}
-
-.nav-item span {
-  font-weight: 600;
-}
-
-.publish-pill {
-  display: grid;
-  width: 36px;
-  height: 26px;
-  place-items: center;
-  border-radius: 13px;
-  background: #ff6a00;
-  color: #fff;
-  font-size: 18px;
-  font-weight: 900;
-}
-
-.nav-publish span,
-.nav-publish.active span {
-  color: #ff6a00;
-}
 
 @media (min-width: 430px) {
   .time-row {

frontend/src/views/mobile/MobileSellerListingCreateView.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
 import { showDialog, showToast } from 'vant'
+import MobileBottomNav from '@/components/MobileBottomNav.vue'
 
 import { usePublishForm } from '@/composables/usePublishForm'
 
-const route = useRoute()
-
 const {
   commonOnlineTimes,
   dailyLossOptions,
@@ -81,10 +79,7 @@ const {
   notifyError: (message) => showToast({ message, icon: 'cross' }),
 })
 
-function isNavActive(path: string) {
-  if (path === '/m') return route.path === '/m'
-  return route.path.startsWith(path)
-}
+
 
 function selectRadio<T extends string>(value: T, setter: (value: T) => void) {
   setter(value)
@@ -596,44 +591,7 @@ function selectRadio<T extends string>(value: T, setter: (value: T) => void) {
       </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/messages"
-        class="nav-item"
-        :class="{ active: isNavActive('/m/messages') }"
-      >
-        <van-icon name="chat-o" :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>
+    <MobileBottomNav />
   </main>
 </template>