From b774ce82122b934388d5f2d93fe6174e4b1b6156 Mon Sep 17 00:00:00 2001
From: rain <rain>
Date: Tue, 21 Jul 2026 12:08:15 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=81=E7=A7=BBA05=E5=B9=B6=E6=81=A2?=
 =?UTF-8?q?=E5=A4=8D=E8=AE=A4=E8=AF=81=E9=A1=B5=E6=B0=B4=E5=A2=A8=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AuthPageShell.vue       |   8 +-
 pages/auth/a05-reset-password.vue  | 171 +++++++++++------------------
 tests/a01-a02-ui-contract.ps1      |   2 +-
 tests/auth-page-shell-contract.ps1 |   3 +
 4 files changed, 73 insertions(+), 111 deletions(-)

diff --git a/components/AuthPageShell.vue b/components/AuthPageShell.vue
index de7fbb9..540bed5 100644
--- a/components/AuthPageShell.vue
+++ b/components/AuthPageShell.vue
@@ -67,6 +67,12 @@
   box-sizing: border-box;
   width: 100%;
   padding-bottom: var(--app-safe-bottom);
-  background: #f7f0e5 url("/static/assets/foundation/opaque/auth-page-paper.jpg") center top / 100% auto repeat-y;
+  background-color: #f7f0e5;
+  background-image:
+    url("/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"),
+    url("/static/assets/foundation/opaque/auth-page-paper.jpg");
+  background-position: center calc(-48.18vw), center top;
+  background-size: 100% auto, 100% auto;
+  background-repeat: no-repeat, repeat-y;
 }
 </style>
diff --git a/pages/auth/a05-reset-password.vue b/pages/auth/a05-reset-password.vue
index 76bb8bd..a6e7e13 100644
--- a/pages/auth/a05-reset-password.vue
+++ b/pages/auth/a05-reset-password.vue
@@ -1,18 +1,6 @@
 <!-- 页面编号：A-05；用途：通过手机号验证后重设登录密码。 -->
 <template>
-  <view class="auth-page reset-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 reset-page">
       <view class="reset-content">
         <view class="page-heading">
           <view class="back-button" hover-class="tap-fade" @click="goBack">
@@ -147,48 +135,50 @@
           >
         </view>
       </view>
-    </view>
 
-    <view v-if="successVisible" class="success-layer">
-      <view class="success-dialog">
-        <image
-          class="success-dialog__skin"
-          src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
-          mode="aspectFit"
-        />
-        <view class="success-dialog__content">
+    <template #overlay>
+      <view v-if="successVisible" class="success-layer">
+        <view class="success-dialog">
           <image
-            class="success-mark"
-            src="/static/assets/foundation/transparent/brand-seal.png"
+            class="success-dialog__skin"
+            src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
             mode="aspectFit"
           />
-          <text class="success-title">密码已重设</text>
-          <text class="success-copy">请返回登录页，使用新密码登录</text>
-          <view
-            class="success-action"
-            hover-class="button-hover"
-            @click="prepareLogin"
-          >
+          <view class="success-dialog__content">
             <image
-              class="success-action__skin"
-              src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
+              class="success-mark"
+              src="/static/assets/foundation/transparent/brand-seal.png"
               mode="aspectFit"
             />
-            <text class="success-action__copy">返回登录</text>
+            <text class="success-title">密码已重设</text>
+            <text class="success-copy">请返回登录页，使用新密码登录</text>
+            <view
+              class="success-action"
+              hover-class="button-hover"
+              @click="prepareLogin"
+            >
+              <image
+                class="success-action__skin"
+                src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
+                mode="aspectFit"
+              />
+              <text class="success-action__copy">返回登录</text>
+            </view>
           </view>
         </view>
       </view>
-    </view>
 
-    <view v-if="feedbackVisible" class="feedback-toast">
-      <text class="feedback-toast__copy">{{ feedbackMessage }}</text>
-    </view>
-  </view>
+      <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 verificationCode = ref("");
@@ -262,51 +252,22 @@ const submitReset = () => {
 </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;
-}
-
 .reset-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;
@@ -320,8 +281,8 @@ const submitReset = () => {
   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;
 }
 
@@ -331,13 +292,15 @@ const submitReset = () => {
   transform: scaleX(-1);
 }
 .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;
@@ -345,6 +308,7 @@ const submitReset = () => {
   letter-spacing: 1rpx;
 }
 .reset-divider {
+  grid-column: 1;
   grid-row: 3;
   width: 300rpx;
   height: 50rpx;
@@ -361,31 +325,31 @@ const submitReset = () => {
 .input-row {
   display: flex;
   align-items: center;
-  min-height: 84rpx;
+  min-height: var(--app-touch-min);
   border-bottom: 1rpx solid #cfaa70;
 }
 
 .input-label {
   flex: 0 0 162rpx;
   color: #674b35;
-  font-size: 29rpx;
+  font-size: 30rpx;
 }
 .auth-input {
   flex: 1;
   min-width: 0;
-  min-height: 82rpx;
-  color: #3f2c1d;
-  font-size: 27rpx;
+  min-height: var(--app-touch-min);
+  color: #493323;
+  font-size: 30rpx;
 }
 .placeholder {
-  color: #a79e94;
+  color: #9f968d;
 }
 .get-code {
   flex: 0 0 auto;
   padding-left: 14rpx;
   border-left: 1rpx solid #d7bd94;
   color: #a7160c;
-  font-size: 23rpx;
+  font-size: 26rpx;
 }
 .field-error {
   display: block;
@@ -402,7 +366,7 @@ const submitReset = () => {
 .reset-submit {
   display: grid;
   place-items: center;
-  min-height: 104rpx;
+  min-height: var(--app-touch-min);
   margin-top: 26rpx;
 }
 
@@ -416,28 +380,29 @@ const submitReset = () => {
   z-index: 1;
   grid-area: 1 / 1;
   color: #fffaf0;
-  font-size: 39rpx;
+  font-size: 36rpx;
   letter-spacing: 6rpx;
 }
 .reset-tip {
   display: block;
   margin-top: 22rpx;
   color: #806c58;
-  font-size: 22rpx;
+  font-size: 24rpx;
   text-align: center;
 }
 .login-entry {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 78rpx;
-  color: #6b5a4a;
-  font-size: 24rpx;
+  min-height: var(--app-touch-min);
+  margin-top: auto;
+  color: #493323;
+  font-size: 28rpx;
 }
 .login-entry__link {
   display: flex;
   align-items: center;
-  min-height: 78rpx;
+  min-height: var(--app-touch-min);
   margin-left: 8rpx;
   color: #a7160c;
 }
@@ -458,7 +423,7 @@ const submitReset = () => {
   display: grid;
   width: 620rpx;
   min-height: 520rpx;
-  max-height: calc(100vh - 80rpx);
+  max-height: calc(var(--app-viewport-height) - 40px);
 }
 .success-dialog__skin {
   grid-area: 1 / 1;
@@ -512,7 +477,7 @@ const submitReset = () => {
 .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;
@@ -541,16 +506,4 @@ const submitReset = () => {
   opacity: 0.72;
 }
 
-@media screen and (max-width: 340px) {
-  .reset-content {
-    padding-right: 48rpx;
-    padding-left: 48rpx;
-  }
-  .page-title {
-    font-size: 60rpx;
-  }
-  .input-label {
-    flex-basis: 150rpx;
-  }
-}
 </style>
diff --git a/tests/a01-a02-ui-contract.ps1 b/tests/a01-a02-ui-contract.ps1
index a7f4a06..495cf4d 100644
--- a/tests/a01-a02-ui-contract.ps1
+++ b/tests/a01-a02-ui-contract.ps1
@@ -74,7 +74,6 @@ Assert-Contains -Content $entry -Expected '<AuthPageShell' -Message 'A01 must co
 foreach ($forbidden in @(
   'class="page-canvas"',
   'class="page-backdrop"',
-  'a01-red-hall-ink-backdrop-v1.png',
   'mode="scaleToFill"',
   '--auth-paper-start',
   '1665rpx'
@@ -82,6 +81,7 @@ foreach ($forbidden in @(
   Assert-NotContains -Content $entry -Unexpected $forbidden -Message "A01 still uses rejected page coordinates: $forbidden"
   Assert-NotContains -Content $shell -Unexpected $forbidden -Message "The adaptive shell uses rejected page coordinates: $forbidden"
 }
+Assert-Contains -Content $shell -Expected 'a01-red-hall-ink-backdrop-v1.png' -Message 'The shared auth shell must preserve the approved paper scenery as decoration.'
 
 $pageRule = [regex]::Match($shell, '(?ms)^\.auth-shell\s*\{(?<Body>.*?)^\}')
 $headerRule = [regex]::Match($shell, '(?ms)^\.auth-shell__header\s*\{(?<Body>.*?)^\}')
diff --git a/tests/auth-page-shell-contract.ps1 b/tests/auth-page-shell-contract.ps1
index 26cfe81..9c2cae4 100644
--- a/tests/auth-page-shell-contract.ps1
+++ b/tests/auth-page-shell-contract.ps1
@@ -21,7 +21,10 @@ foreach ($required in @(
   'a01-vnext-header-v1.png',
   'mode="widthFix"',
   'class="auth-shell__paper"',
+  'a01-red-hall-ink-backdrop-v1.png',
   'auth-page-paper.jpg',
+  'background-position: center calc(-48.18vw), center top;',
+  'background-repeat: no-repeat, repeat-y;',
   '<slot />',
   '<slot name="overlay" />',
   'min-height: var(--app-viewport-height);'