提取认证页共享自适应骨架

pages/auth/a01-entry.vue

@@ -1,20 +1,6 @@
 <!-- 页面编号：A-01；用途：APP 唯一登录入口，承载密码、验证码与微信登录入口。 -->
 <template>
-  <view class="auth-page login-page">
-    <view class="auth-header">
-      <image
-        class="auth-header__image"
-        src="/static/assets/modules/auth/opaque/a01-vnext-header-v1.png"
-        mode="widthFix"
-      />
-      <image
-        class="brand-seal"
-        src="/static/assets/foundation/transparent/brand-seal.png"
-        mode="aspectFit"
-      />
-    </view>
-
-    <view class="auth-paper">
+  <AuthPageShell class="auth-page login-page">
       <view class="login-content">
         <view class="login-heading">
           <text class="login-title">登录家谱</text>
@@ -217,53 +203,55 @@
           >
         </view>
       </view>
-    </view>
 
-    <!-- 当前只验收自定义容器外观，真实行为验证数据留到接口阶段接入。 -->
-    <view
-      v-if="verificationVisible"
-      class="verification-layer"
-      @click="closeVerification"
-    >
-      <view class="verification-dialog" @click.stop>
-        <image
-          class="verification-dialog__skin"
-          src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
-          mode="aspectFit"
-        />
-        <view class="verification-dialog__content">
-          <text class="verification-title">安全验证</text>
-          <text class="verification-copy"
-            >{{ verificationPurpose }}前需要完成行为验证</text
-          >
-          <text class="verification-note">验证数据将在接口接入后启用</text>
-          <view class="verification-actions">
-            <view
-              class="verification-action"
-              hover-class="tap-fade"
-              @click="closeVerification"
-              >取消</view
-            >
-            <view
-              class="verification-action verification-action--primary"
-              hover-class="tap-fade"
-              @click="confirmVerification"
-              >知道了</view
+    <template #overlay>
+      <!-- 当前只验收自定义容器外观，真实行为验证数据留到接口阶段接入。 -->
+      <view
+        v-if="verificationVisible"
+        class="verification-layer"
+        @click="closeVerification"
+      >
+        <view class="verification-dialog" @click.stop>
+          <image
+            class="verification-dialog__skin"
+            src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
+            mode="aspectFit"
+          />
+          <view class="verification-dialog__content">
+            <text class="verification-title">安全验证</text>
+            <text class="verification-copy"
+              >{{ verificationPurpose }}前需要完成行为验证</text
             >
+            <text class="verification-note">验证数据将在接口接入后启用</text>
+            <view class="verification-actions">
+              <view
+                class="verification-action"
+                hover-class="tap-fade"
+                @click="closeVerification"
+                >取消</view
+              >
+              <view
+                class="verification-action verification-action--primary"
+                hover-class="tap-fade"
+                @click="confirmVerification"
+                >知道了</view
+              >
+            </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 { onLoad, onUnload } from "@dcloudio/uni-app";
+import AuthPageShell from "@/components/AuthPageShell.vue";
 
 const LOGIN_METHOD_STORAGE_KEY = "a01:last-login-method";
 const activeLoginMethod = ref("password");
@@ -375,54 +363,6 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
 </script>
 
 <style scoped lang="scss">
-.auth-page {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--app-viewport-height);
-  overflow-x: hidden;
-  background: #940400;
-  color: #493323;
-}
-
-.auth-header {
-  position: relative;
-  flex: 0 0 auto;
-  box-sizing: border-box;
-  width: 100%;
-  height: calc(var(--app-safe-top) + min(36.5vw, 175px));
-  overflow: hidden;
-  padding-top: var(--app-safe-top);
-  background: #940400;
-}
-
-.auth-header__image {
-  display: block;
-  width: 100%;
-  height: auto;
-  pointer-events: none;
-}
-
-.brand-seal {
-  position: absolute;
-  top: calc(var(--app-safe-top) + clamp(46px, 11.5vw, 58px));
-  left: 50%;
-  width: clamp(56px, 17vw, 78px);
-  height: clamp(67px, 20.4vw, 94px);
-  transform: translateX(-50%);
-  pointer-events: none;
-}
-
-.auth-paper {
-  display: flex;
-  flex: 1;
-  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;
-}
-
 .login-content {
   display: flex;
   flex: 1;