完成50%

components/AppTabbar.vue

@@ -1,7 +1,7 @@
 <!-- 公共组件：根页面底部导航；仅维护家谱、家族、我的三项已确认入口及其透明图标。 -->
 <template>
   <view class="app-tabbar" role="tablist" aria-label="主要导航">
-    <view
+    <button
       v-for="item in items"
       :key="item.key"
       class="tab-item"
@@ -9,28 +9,31 @@
       :aria-selected="active === item.key"
       :aria-label="`${item.label}${active === item.key ? '，当前页面' : ''}`"
       hover-class="tab-item--pressed"
-      @click="switchTab(item)"
+      @click="switchRoot(item)"
     >
       <image
         class="tab-icon"
         :src="active === item.key ? item.activeIcon : item.icon"
         mode="aspectFit"
+        aria-hidden="true"
       />
       <text :class="['tab-label', { active: active === item.key }]">{{
         item.label
       }}</text>
-    </view>
+    </button>
   </view>
 </template>
 
 <script setup>
+import { goRoot } from "@/utils/navigation.js";
+
 const props = defineProps({ active: { type: String, required: true } });
 
 const items = [
   {
     key: "genealogy",
     label: "家谱",
-    path: "/pages/genealogy/g01-my-genealogies",
+    routeKey: "G01",
     icon: "/static/assets/foundation/transparent/tab-genealogy.png",
     activeIcon:
       "/static/assets/foundation/transparent/tab-genealogy-active.png",
@@ -38,21 +41,22 @@ const items = [
   {
     key: "family",
     label: "家族",
-    path: "/pages/family/f01-family-feed",
+    routeKey: "F01",
     icon: "/static/assets/foundation/transparent/tab-family.png",
     activeIcon: "/static/assets/foundation/transparent/tab-family-active.png",
   },
   {
     key: "profile",
     label: "我的",
-    path: "/pages/profile/m01-profile-home",
+    routeKey: "M01",
     icon: "/static/assets/foundation/transparent/tab-profile.png",
     activeIcon: "/static/assets/foundation/transparent/tab-profile-active.png",
   },
 ];
 
-const switchTab = (item) => {
-  if (item.key !== props.active) uni.reLaunch({ url: item.path });
+const switchRoot = (item) => {
+  if (item.key === props.active) return;
+  return goRoot(item.routeKey);
 };
 </script>
 
@@ -78,8 +82,16 @@ const switchTab = (item) => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  margin: 0;
   padding: 4rpx 0;
   box-sizing: border-box;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  line-height: normal;
+}
+.tab-item::after {
+  border: 0;
 }
 .tab-item--pressed {
   opacity: 0.72;