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

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>