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

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>
+