修改完成

components/AppDialog.vue

@@ -4,13 +4,17 @@
     class="app-dialog-layer"
     @click="closeOnMask && cancel()"
   >
-    <view class="app-dialog" @click.stop>
-      <image
-        class="app-dialog__skin"
-        src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
-        mode="aspectFit"
-      />
-      <view class="app-dialog__content">
+    <view
+      ref="dialogRef"
+      class="app-dialog"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="title"
+      tabindex="-1"
+      @click.stop
+      @keydown.esc.stop="cancel"
+    >
+      <scroll-view class="app-dialog__content" scroll-y>
         <text v-if="eyebrow" class="app-dialog__eyebrow">{{ eyebrow }}</text>
         <text class="app-dialog__title">{{ title }}</text>
         <text v-if="message" class="app-dialog__message">{{ message }}</text>
@@ -27,15 +31,16 @@
           />
           <AppButton :label="confirmText" @click="$emit('confirm')" />
         </view>
-      </view>
+      </scroll-view>
     </view>
   </view>
 </template>
 
 <script setup>
+import { nextTick, ref, watch } from "vue";
 import AppButton from "@/components/AppButton.vue";
 
-defineProps({
+const props = defineProps({
   visible: { type: Boolean, default: false },
   eyebrow: { type: String, default: "" },
   title: { type: String, required: true },
@@ -46,6 +51,23 @@ defineProps({
   closeOnMask: { type: Boolean, default: true },
 });
 const emit = defineEmits(["confirm", "cancel", "close"]);
+const dialogRef = ref(null);
+let previousFocus = null;
+
+watch(
+  () => props.visible,
+  async (visible) => {
+    if (typeof document === "undefined") return;
+    if (visible) {
+      previousFocus = document.activeElement;
+      await nextTick();
+      dialogRef.value?.focus?.();
+      return;
+    }
+    previousFocus?.focus?.();
+    previousFocus = null;
+  },
+);
 const cancel = () => {
   emit("cancel");
   emit("close");
@@ -65,28 +87,23 @@ const cancel = () => {
   background: rgba(35, 18, 10, 0.62);
 }
 .app-dialog {
-  position: relative;
   width: 650rpx;
   max-width: 100%;
   min-height: 520rpx;
-}
-.app-dialog__skin {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+  background: url("/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png")
+    center / contain no-repeat;
 }
 .app-dialog__content {
-  position: relative;
   z-index: 1;
   display: flex;
   min-height: 520rpx;
+  max-height: calc(100vh - 80rpx);
   flex-direction: column;
   align-items: center;
   box-sizing: border-box;
   padding: 74rpx 66rpx 54rpx;
   text-align: center;
+  overflow-y: auto;
 }
 .app-dialog__eyebrow {
   color: #9f170f;