修改完成

components/PageHeader.vue

@@ -16,16 +16,22 @@
       mode="aspectFit"
     />
     <view class="header-side header-side--left">
-      <view v-if="root" class="header-icon-button" @click="$emit('brand')">
+      <button
+        v-if="root"
+        class="header-icon-button"
+        aria-label="返回首页"
+        @click="$emit('brand')"
+      >
         <image
           class="header-logo"
           src="/static/assets/foundation/transparent/brand-seal.png"
           mode="aspectFit"
         />
-      </view>
-      <view
+      </button>
+      <button
         v-else
         class="header-back"
+        aria-label="返回上一页"
         hover-class="header-back--pressed"
         @click="goBack"
       >
@@ -34,15 +40,16 @@
           src="/static/assets/foundation/transparent/chevron-right.png"
           mode="aspectFit"
         />
-      </view>
+      </button>
     </view>
 
     <text class="header-title">{{ title }}</text>
 
     <view class="header-side header-side--right">
-      <view
+      <button
         v-if="root"
         class="header-icon-button header-notice"
+        aria-label="打开消息中心"
         @click="$emit('notice')"
       >
         <image
@@ -51,10 +58,10 @@
           mode="aspectFit"
         />
         <view v-if="unreadCount > 0" class="notice-dot"></view>
-      </view>
-      <view v-else class="header-action" @click="$emit('action')">{{
+      </button>
+      <button v-else class="header-action" :disabled="!action" @click="$emit('action')">{{
         action
-      }}</view>
+      }}</button>
     </view>
   </view>
   </view>
@@ -66,9 +73,17 @@ const props = defineProps({
   action: { type: String, default: "" },
   root: { type: Boolean, default: false },
   unreadCount: { type: Number, default: 0 },
+  fallbackUrl: { type: String, default: "/pages/genealogy/g01-my-genealogies" },
 });
 
-const goBack = () => uni.navigateBack();
+const goBack = () => {
+  const stack = getCurrentPages();
+  if (stack.length > 1) {
+    uni.navigateBack();
+    return;
+  }
+  uni.reLaunch({ url: props.fallbackUrl });
+};
 </script>
 
 <style scoped lang="scss">
@@ -128,7 +143,6 @@ const goBack = () => uni.navigateBack();
 
 .page-header--root .header-side,
 .page-header--root .header-title {
-  position: relative;
   z-index: 2;
 }
 
@@ -147,12 +161,20 @@ const goBack = () => uni.navigateBack();
 }
 
 .header-icon-button {
-  position: relative;
-  display: flex;
+  display: grid;
   width: 88rpx;
   height: 88rpx;
-  align-items: center;
-  justify-content: center;
+  place-items: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  line-height: normal;
+}
+.header-icon-button::after,
+.header-back::after,
+.header-action::after {
+  border: 0;
 }
 
 .header-logo {
@@ -164,12 +186,19 @@ const goBack = () => uni.navigateBack();
   height: 48rpx;
 }
 
+.header-logo,
+.header-notice-icon,
 .notice-dot {
-  position: absolute;
-  top: 15rpx;
-  right: 13rpx;
+  grid-area: 1 / 1;
+}
+
+.notice-dot {
+  align-self: start;
+  justify-self: end;
   width: 14rpx;
   height: 14rpx;
+  margin-top: 15rpx;
+  margin-right: 13rpx;
   border: 2rpx solid $brand-red;
   border-radius: 50%;
   background: #fff9ed;
@@ -177,7 +206,12 @@ const goBack = () => uni.navigateBack();
 
 .header-action {
   width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
   font-size: 27rpx;
+  line-height: normal;
 }
 
 .header-back {
@@ -186,6 +220,11 @@ const goBack = () => uni.navigateBack();
   height: 88rpx;
   align-items: center;
   justify-content: flex-start;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  line-height: normal;
 }
 .header-back__icon {
   width: 42rpx;