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

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>