迁移A04为自适应文档流

pages/auth/a04-register.vue

@@ -1,18 +1,6 @@
 <!-- 页面编号：A-04；用途：注册账号与本页服务协议确认。 -->
 <template>
-  <view class="auth-page register-page">
-    <view class="page-canvas">
-      <image
-        class="page-backdrop"
-        src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"
-        mode="scaleToFill"
-      />
-      <image
-        class="brand-seal"
-        src="/static/assets/foundation/transparent/brand-seal.png"
-        mode="aspectFit"
-      />
-
+  <AuthPageShell class="auth-page register-page">
       <view class="register-content">
         <view class="page-heading">
           <view class="back-button" hover-class="tap-fade" @click="goBack">
@@ -149,17 +137,19 @@
           >
         </view>
       </view>
-    </view>
 
-    <view v-if="feedbackVisible" class="feedback-toast">
-      <text class="feedback-toast__copy">{{ feedbackMessage }}</text>
-    </view>
-  </view>
+    <template #overlay>
+      <view v-if="feedbackVisible" class="feedback-toast">
+        <text class="feedback-toast__copy">{{ feedbackMessage }}</text>
+      </view>
+    </template>
+  </AuthPageShell>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import { onUnload } from "@dcloudio/uni-app";
+import AuthPageShell from "@/components/AuthPageShell.vue";
 
 const phone = ref("");
 const password = ref("");
@@ -228,51 +218,22 @@ const submitRegister = () => {
 </script>
 
 <style scoped lang="scss">
-.auth-page {
-  width: 100%;
-  height: 100dvh;
-  min-height: 100%;
-  overflow-y: auto;
-  background: #f7f0e4;
-  color: #493323;
-}
-
-.page-canvas {
-  display: grid;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: calc(1665rpx + env(safe-area-inset-bottom));
-  padding-bottom: env(safe-area-inset-bottom);
-}
-
-.page-backdrop {
-  grid-area: 1 / 1;
-  align-self: start;
-  width: 100%;
-  height: 1665rpx;
-  pointer-events: none;
-}
-
-.brand-seal {
-  z-index: 1;
-  grid-area: 1 / 1;
-  align-self: start;
-  justify-self: center;
-  width: 184rpx;
-  height: 221rpx;
-  margin-top: 64rpx;
-  pointer-events: none;
-}
-
 .register-content {
-  z-index: 2;
-  grid-area: 1 / 1;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
   box-sizing: border-box;
-  padding: 430rpx 64rpx 46rpx;
+  width: 100%;
+  max-width: 480px;
+  min-width: 0;
+  margin: 0 auto;
+  padding: clamp(10px, 2.2vh, 20px) clamp(24px, 8.5vw, 44px);
 }
 
 .page-heading {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto auto auto;
   justify-items: center;
   min-height: 154rpx;
@@ -286,8 +247,8 @@ const submitRegister = () => {
   justify-self: start;
   align-items: center;
   justify-content: center;
-  width: 88rpx;
-  height: 88rpx;
+  width: var(--app-touch-min);
+  height: var(--app-touch-min);
   margin-top: 10rpx;
 }
 
@@ -298,14 +259,16 @@ const submitRegister = () => {
 }
 
 .page-title {
+  grid-column: 1;
   grid-row: 1;
   color: #9f170f;
-  font-size: 66rpx;
+  font-size: 58rpx;
   font-weight: 700;
   letter-spacing: 7rpx;
 }
 
 .page-subtitle {
+  grid-column: 1;
   grid-row: 2;
   margin-top: 12rpx;
   color: #806c58;
@@ -314,6 +277,7 @@ const submitRegister = () => {
 }
 
 .register-divider {
+  grid-column: 1;
   grid-row: 3;
   width: 300rpx;
   height: 50rpx;
@@ -331,26 +295,26 @@ const submitRegister = () => {
 .input-row {
   display: flex;
   align-items: center;
-  min-height: 104rpx;
+  min-height: var(--app-touch-min);
   border-bottom: 1rpx solid rgba(182, 116, 43, 0.68);
 }
 
 .input-label {
   flex: 0 0 152rpx;
   color: #674b35;
-  font-size: 31rpx;
+  font-size: 30rpx;
 }
 
 .auth-input {
   flex: 1;
   min-width: 0;
-  min-height: 96rpx;
-  color: #3f2c1d;
-  font-size: 29rpx;
+  min-height: var(--app-touch-min);
+  color: #493323;
+  font-size: 30rpx;
 }
 
 .placeholder {
-  color: #a79e94;
+  color: #9f968d;
 }
 
 .field-error,
@@ -372,7 +336,7 @@ const submitRegister = () => {
 .register-submit {
   display: grid;
   place-items: center;
-  min-height: 104rpx;
+  min-height: var(--app-touch-min);
   margin-top: 36rpx;
 }
 
@@ -386,7 +350,7 @@ const submitRegister = () => {
   z-index: 1;
   grid-area: 1 / 1;
   color: #fffaf0;
-  font-size: 39rpx;
+  font-size: 36rpx;
   letter-spacing: 6rpx;
 }
 
@@ -399,9 +363,9 @@ const submitRegister = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 76rpx;
-  color: #58483c;
-  font-size: 22rpx;
+  min-height: var(--app-touch-min);
+  color: #493323;
+  font-size: 24rpx;
   line-height: 30rpx;
 }
 
@@ -446,14 +410,15 @@ const submitRegister = () => {
   align-items: center;
   justify-content: center;
   min-height: 82rpx;
-  color: #6b5a4a;
-  font-size: 25rpx;
+  margin-top: auto;
+  color: #493323;
+  font-size: 28rpx;
 }
 
 .login-entry__link {
   display: flex;
   align-items: center;
-  min-height: 82rpx;
+  min-height: var(--app-touch-min);
   margin-left: 8rpx;
   color: #a7160c;
 }
@@ -468,7 +433,7 @@ const submitRegister = () => {
 .feedback-toast {
   position: fixed;
   z-index: 30;
-  top: calc(env(safe-area-inset-top) + 24rpx);
+  top: calc(var(--status-bar-height, 0px) + 24rpx);
   left: 50%;
   display: flex;
   align-items: center;

tests/a04-registration-contract.ps1

@@ -87,10 +87,36 @@ foreach ($required in @(
 
 $contentRule = [regex]::Match($register, '(?ms)^\.register-content\s*\{(?<Body>.*?)^\}')
 if (-not $contentRule.Success) { throw 'A04 register content rule is missing.' }
-foreach ($required in @('display: flex;', 'flex: 1;', 'flex-direction: column;', 'max-width: 480px;', 'margin: 0 auto;')) {
+foreach ($required in @('display: flex;', 'flex: 1;', 'flex-direction: column;', 'justify-content: flex-start;', 'max-width: 480px;', 'margin: 0 auto;')) {
   Assert-Contains -Content $contentRule.Groups['Body'].Value -Expected $required -Message "A04 register content must use document flow: $required"
 }
 
+$headingRule = [regex]::Match($register, '(?ms)^\.page-heading\s*\{(?<Body>.*?)^\}')
+if (-not $headingRule.Success) { throw 'A04 page heading rule is missing.' }
+Assert-Contains -Content $headingRule.Groups['Body'].Value -Expected 'grid-template-columns: minmax(0, 1fr);' -Message 'A04 heading must center against the full content width.'
+foreach ($selector in @('page-title', 'page-subtitle', 'register-divider')) {
+  $rule = [regex]::Match($register, "(?ms)^\.$selector\s*\{(?<Body>.*?)^\}")
+  if (-not $rule.Success) { throw "A04 heading child rule is missing: $selector" }
+  Assert-Contains -Content $rule.Groups['Body'].Value -Expected 'grid-column: 1;' -Message "A04 heading child must remain in the full-width grid column: $selector"
+}
+
+foreach ($ruleContract in @(
+  @{ Selector = 'register-submit__content'; Expected = 'font-size: 36rpx;' },
+  @{ Selector = 'agreement-row'; Expected = 'font-size: 24rpx;' },
+  @{ Selector = 'agreement-row'; Expected = 'color: #493323;' },
+  @{ Selector = 'input-label'; Expected = 'font-size: 30rpx;' },
+  @{ Selector = 'auth-input'; Expected = 'font-size: 30rpx;' },
+  @{ Selector = 'auth-input'; Expected = 'color: #493323;' },
+  @{ Selector = 'placeholder'; Expected = 'color: #9f968d;' },
+  @{ Selector = 'login-entry'; Expected = 'font-size: 28rpx;' },
+  @{ Selector = 'login-entry'; Expected = 'color: #493323;' },
+  @{ Selector = 'login-entry'; Expected = 'margin-top: auto;' }
+)) {
+  $rule = [regex]::Match($register, "(?ms)^\.$($ruleContract.Selector)\s*\{(?<Body>.*?)^\}")
+  if (-not $rule.Success) { throw "A04 style rule is missing: $($ruleContract.Selector)" }
+  Assert-Contains -Content $rule.Groups['Body'].Value -Expected $ruleContract.Expected -Message "A04 typography must match A01: $($ruleContract.Selector) $($ruleContract.Expected)"
+}
+
 foreach ($forbidden in @(
   '(?s)\.register-panel\s*\{[^}]*\bborder\s*:',
   '(?s)\.register-panel\s*\{[^}]*\bbackground\s*:',

tests/a04-registration-runtime-smoke.js

@@ -83,6 +83,7 @@ const run = async () => {
         const header = document.querySelector('.auth-shell__header')
         const headerImage = document.querySelector('.auth-shell__header-image img')
         const paper = document.querySelector('.auth-shell__paper')
+        const title = document.querySelector('.page-title')
         const loginEntry = document.querySelector('.login-entry')
         return {
           width: document.documentElement.scrollWidth,
@@ -93,6 +94,7 @@ const run = async () => {
           headerNaturalWidth: headerImage?.naturalWidth,
           headerNaturalHeight: headerImage?.naturalHeight,
           paperTop: paper?.getBoundingClientRect().top,
+          titleCenter: title ? title.getBoundingClientRect().left + title.getBoundingClientRect().width / 2 : null,
           loginEntryBottom: loginEntry?.getBoundingClientRect().bottom + window.scrollY
         }
       })()`)
@@ -100,6 +102,7 @@ const run = async () => {
       assert.deepStrictEqual([metrics.headerNaturalWidth, metrics.headerNaturalHeight], [824, 340], `A04 header asset changed at ${size.width}x${size.height}`)
       assert(Math.abs(metrics.headerImageHeight / metrics.headerImageWidth - 340 / 824) < 0.01, `A04 header is distorted at ${size.width}x${size.height}`)
       assert(metrics.paperTop >= metrics.headerBottom - 1, `A04 paper overlaps its header at ${size.width}x${size.height}`)
+      assert(Math.abs(metrics.titleCenter - size.width / 2) <= 1, `A04 title is not centered at ${size.width}x${size.height}: ${metrics.titleCenter}`)
       assert(metrics.loginEntryBottom <= metrics.documentScrollHeight + 1, `A04 last action is unreachable at ${size.width}x${size.height}`)
     }