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

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>