feat: unify project responsive layouts

components/AppDialog.vue

@@ -15,9 +15,11 @@
       @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>
+        <view class="app-dialog__copy">
+          <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>
+        </view>
         <slot />
         <view
           class="app-dialog__actions"
@@ -27,9 +29,14 @@
             v-if="showCancel"
             type="secondary"
             :label="cancelText"
+            :compact="compactActions && showCancel"
             @click="cancel"
           />
-          <AppButton :label="confirmText" @click="$emit('confirm')" />
+          <AppButton
+            :label="confirmText"
+            :compact="compactActions && showCancel"
+            @click="$emit('confirm')"
+          />
         </view>
       </scroll-view>
     </view>
@@ -48,6 +55,7 @@ const props = defineProps({
   confirmText: { type: String, default: "我知道了" },
   cancelText: { type: String, default: "取消" },
   showCancel: { type: Boolean, default: false },
+  compactActions: { type: Boolean, default: false },
   closeOnMask: { type: Boolean, default: true },
 });
 const emit = defineEmits(["confirm", "cancel", "close"]);
@@ -75,6 +83,8 @@ const cancel = () => {
 </script>
 
 <style scoped lang="scss">
+@use "../styles/adaptive-frame-profiles.scss" as adaptive;
+
 .app-dialog-layer {
   position: fixed;
   z-index: 80;
@@ -89,22 +99,30 @@ const cancel = () => {
 .app-dialog {
   width: 650rpx;
   max-width: 100%;
-  min-height: 520rpx;
-  background: url("/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png")
-    center / contain no-repeat;
+  @include adaptive.adaptive-auth-dialog;
 }
 .app-dialog__content {
   z-index: 1;
   display: flex;
-  min-height: 520rpx;
-  max-height: calc(100vh - 80rpx);
+  max-height: calc(var(--app-viewport-height, 100vh) - 160rpx);
   flex-direction: column;
   align-items: center;
   box-sizing: border-box;
-  padding: 74rpx 66rpx 54rpx;
+  padding: 16rpx 20rpx 12rpx;
   text-align: center;
   overflow-y: auto;
 }
+.app-dialog__copy {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+.app-dialog__title,
+.app-dialog__message {
+  display: block;
+  width: 100%;
+}
 .app-dialog__eyebrow {
   color: #9f170f;
   font-size: 22rpx;
@@ -131,7 +149,7 @@ const cancel = () => {
   width: 100%;
   grid-template-columns: 1fr 1fr;
   gap: 16rpx;
-  margin-top: auto;
+  margin-top: 26rpx;
 }
 .app-dialog__actions--single {
   display: flex;