refactor: reuse shared header on G03

pages/genealogy/g03-create-genealogy.vue

@@ -3,21 +3,11 @@
   <view class="flow-page">
     <GenealogyPageBackground />
 
-    <view class="flow-header">
-      <view class="flow-header__content">
-        <view class="flow-header__back" @click="goBack">
-          <image
-            class="flow-header__back-icon"
-            src="/static/assets/foundation/transparent/chevron-right.png"
-            mode="aspectFit"
-          />
-        </view>
-        <text class="flow-header__title">{{
-          isAncestorStep ? "录入首代人物" : "创建家谱"
-        }}</text>
-        <view class="flow-header__side" />
-      </view>
-    </view>
+    <PageHeader
+      :title="isAncestorStep ? '录入首代人物' : '创建家谱'"
+      custom-back
+      @back="goBack"
+    />
 
     <view class="flow-content">
       <view class="create-flow-panel">
@@ -248,6 +238,7 @@
 import { computed, onMounted, onUnmounted, reactive, ref } from "vue";
 import { onLoad, onShow } from "@dcloudio/uni-app";
 import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
+import PageHeader from "@/components/PageHeader.vue";
 
 const currentStep = ref("create");
 const genealogyId = ref("");
@@ -423,47 +414,6 @@ const enterOverview = () =>
   background: #f9f6ef;
 }
 
-.flow-header {
-  z-index: 3;
-  height: 112rpx;
-  overflow: hidden;
-  background: url("/static/assets/foundation/opaque/root-header-cinnabar.jpg")
-    center / 100% 100% no-repeat;
-}
-
-.flow-header__content {
-  z-index: 1;
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 26rpx;
-  box-sizing: border-box;
-}
-
-.flow-header__back,
-.flow-header__side {
-  display: flex;
-  width: 72rpx;
-  align-items: center;
-}
-
-.flow-header__back-icon {
-  width: 34rpx;
-  height: 34rpx;
-  transform: rotate(180deg);
-}
-
-.flow-header__title {
-  flex: 1;
-  color: #ffe4a7;
-  font-family: "STKaiti", "KaiTi", serif;
-  font-size: 39rpx;
-  font-weight: 700;
-  letter-spacing: 4rpx;
-  text-align: center;
-}
-
 .flow-content {
   z-index: 2;
   padding: 24rpx 32rpx 48rpx;