feat: 完成70%全局样式与可读性优化

components/PageHeader.vue

@@ -46,7 +46,20 @@
       </button>
     </view>
 
-    <text class="header-title">{{ title }}</text>
+    <view
+      class="header-project-lockup"
+      :class="{ 'header-project-lockup--root': root }"
+    >
+      <image
+        v-if="!root"
+        class="header-project-lockup__logo"
+        src="/static/assets/foundation/transparent/brand-seal.png"
+        mode="aspectFit"
+        aria-hidden="true"
+      />
+      <text class="header-project-name">代代相传</text>
+    </view>
+    <text class="header-title app-single-line">{{ title }}</text>
 
     <view class="header-side header-side--right">
       <button
@@ -65,10 +78,10 @@
       </button>
       <button
         v-else-if="root && action"
-        class="header-action header-action--root"
+        class="header-action header-action--root app-single-line"
         @click="$emit('action')"
       >{{ action }}</button>
-      <button v-else-if="action" class="header-action" @click="$emit('action')">{{
+      <button v-else-if="action" class="header-action app-single-line" @click="$emit('action')">{{
         action
       }}</button>
       <view
@@ -168,6 +181,7 @@ const handleBack = () => {
 
 .header-side {
   display: flex;
+  flex: 0 0 120rpx;
   width: 120rpx;
   min-height: 88rpx;
   align-items: center;
@@ -179,6 +193,10 @@ const handleBack = () => {
 .header-side--right {
   justify-content: flex-end;
 }
+.page-header:not(.page-header--root) .header-side--right {
+  flex-basis: 152rpx;
+  width: 152rpx;
+}
 
 .header-icon-button {
   display: grid;
@@ -246,9 +264,12 @@ const handleBack = () => {
   border: 0;
   background: transparent;
   color: #ffe3a7;
-  font-size: 27rpx;
+  font-size: clamp(16px, 27rpx, 20px);
   line-height: normal;
   text-align: right;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .header-action-placeholder {
   width: 100%;
@@ -280,12 +301,45 @@ const handleBack = () => {
 .header-back--pressed {
   opacity: 0.62;
 }
+.header-project-lockup {
+  position: absolute;
+  top: calc(var(--status-bar-height, 0px) + 52rpx);
+  left: 112rpx;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  gap: 7rpx;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.header-project-lockup--root {
+  top: calc(var(--status-bar-height, 0px) + 62rpx);
+  left: 116rpx;
+}
+
+.header-project-lockup__logo {
+  width: 34rpx;
+  height: 34rpx;
+  flex: 0 0 auto;
+}
+
+.header-project-name {
+  color: #ffe3a7;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: clamp(11px, 19rpx, 14px);
+  font-weight: 700;
+  letter-spacing: 3rpx;
+  line-height: 1;
+  white-space: nowrap;
+}
 .header-title {
+  min-width: 0;
   flex: 1;
   overflow: hidden;
   color: #fff9ed;
   font-family: serif;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
   letter-spacing: 4rpx;
   text-align: center;
@@ -296,7 +350,7 @@ const handleBack = () => {
 .page-header--root .header-title {
   color: #ffe3a7;
   font-family: "STKaiti", "KaiTi", serif;
-  font-size: 48rpx;
+  font-size: clamp(24px, 48rpx, 30px);
   letter-spacing: 5rpx;
   transform: translateY(2rpx);
 }