完成50%

components/PageHeader.vue

@@ -8,37 +8,40 @@
       class="header-texture"
       src="/static/assets/foundation/opaque/root-header-cinnabar.jpg"
       mode="scaleToFill"
+      aria-hidden="true"
     />
     <image
       v-if="root"
       class="header-hall"
       src="/static/assets/foundation/transparent/root-header-hall.png"
       mode="aspectFit"
+      aria-hidden="true"
     />
     <view class="header-side header-side--left">
-      <button
+      <view
         v-if="root"
-        class="header-icon-button"
-        aria-label="返回首页"
-        @click="$emit('brand')"
+        class="header-brand"
+        aria-hidden="true"
       >
         <image
           class="header-logo"
           src="/static/assets/foundation/transparent/brand-seal.png"
           mode="aspectFit"
+          aria-hidden="true"
         />
-      </button>
+      </view>
       <button
         v-else
         class="header-back"
         aria-label="返回上一页"
         hover-class="header-back--pressed"
-        @click="goBack"
+        @click="handleBack"
       >
         <image
           class="header-back__icon"
           src="/static/assets/foundation/transparent/chevron-right.png"
           mode="aspectFit"
+          aria-hidden="true"
         />
       </button>
     </view>
@@ -47,49 +50,57 @@
 
     <view class="header-side header-side--right">
       <button
-        v-if="root"
+        v-if="root && notice"
         class="header-icon-button header-notice"
-        aria-label="打开消息中心"
+        :aria-label="unreadCount > 0 ? `打开消息中心，${unreadCount} 条未读` : '打开消息中心'"
         @click="$emit('notice')"
       >
         <image
           class="header-notice-icon"
           src="/static/assets/foundation/transparent/notice.png"
           mode="aspectFit"
+          aria-hidden="true"
         />
         <view v-if="unreadCount > 0" class="notice-dot"></view>
       </button>
-      <button v-else class="header-action" :disabled="!action" @click="$emit('action')">{{
+      <button
+        v-else-if="root && action"
+        class="header-action header-action--root"
+        @click="$emit('action')"
+      >{{ action }}</button>
+      <button v-else-if="action" class="header-action" @click="$emit('action')">{{
         action
       }}</button>
+      <view
+        v-else
+        class="header-action-placeholder"
+        aria-hidden="true"
+      ></view>
     </view>
   </view>
   </view>
 </template>
 
 <script setup>
+import { goBack } from "@/utils/navigation.js";
+
 const props = defineProps({
   title: { type: String, required: true },
   action: { type: String, default: "" },
   root: { type: Boolean, default: false },
   unreadCount: { type: Number, default: 0 },
-  fallbackUrl: { type: String, default: "/pages/genealogy/g01-my-genealogies" },
+  notice: { type: Boolean, default: false },
   customBack: { type: Boolean, default: false },
 });
 
-const emit = defineEmits(["brand", "notice", "action", "back"]);
+const emit = defineEmits(["notice", "action", "back"]);
 
-const goBack = () => {
+const handleBack = () => {
   if (props.customBack) {
     emit("back");
     return;
   }
-  const stack = getCurrentPages();
-  if (stack.length > 1) {
-    uni.navigateBack();
-    return;
-  }
-  uni.reLaunch({ url: props.fallbackUrl });
+  return goBack();
 };
 </script>
 
@@ -180,6 +191,17 @@ const goBack = () => {
   background: transparent;
   line-height: normal;
 }
+.header-brand {
+  display: grid;
+  width: 88rpx;
+  min-height: 88rpx;
+  place-items: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  line-height: normal;
+}
 .header-icon-button::after,
 .header-back::after,
 .header-action::after {
@@ -214,13 +236,27 @@ const goBack = () => {
 }
 
 .header-action {
+  display: flex;
   width: 100%;
+  min-height: 88rpx;
+  align-items: center;
+  justify-content: flex-end;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
+  color: #ffe3a7;
   font-size: 27rpx;
   line-height: normal;
+  text-align: right;
+}
+.header-action-placeholder {
+  width: 100%;
+  min-height: 88rpx;
+}
+.header-action--root {
+  color: #ffe3a7;
+  font-weight: 700;
 }
 
 .header-back {
@@ -244,11 +280,6 @@ const goBack = () => {
 .header-back--pressed {
   opacity: 0.62;
 }
-.header-action {
-  color: #ffe3a7;
-  text-align: right;
-}
-
 .header-title {
   flex: 1;
   overflow: hidden;