u

code/base-project/base-vue/packages/ao-design/src/modal/index.scss

@@ -1,67 +1,156 @@
 @use '../_styles/_variables.scss' as *;
 
 $modal-prefix: '#{$prefix}-modal';
+$btn-prefix: '#{$prefix}-btn';
 
-.#{$modal-prefix}-wrapper {
+.#{$modal-prefix}-container {
   position: fixed;
   inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
+  pointer-events: auto;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  .#{$modal-prefix}-mask {
+    position: fixed;
+    inset: 0;
+    background: $bg-color-mask;
+    pointer-events: auto;
+    width: 100%;
+    height: 100%;
+  }
+
+  .#{$modal-prefix}-position-top {
+    align-items: flex-start;
+    padding-top: 20vh;
+  }
+
+  .#{$modal-prefix}-position-center {
+    align-items: center;
+  }
+
+  .#{$modal-prefix}-position-bottom {
+    align-items: flex-end;
+    padding-bottom: 20vh;
+  }
+
+  .#{$modal-prefix}-wrapper {
+    position: relative;
+    overflow: auto;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .#{$modal-prefix} {
+      background: #fff;
+      border-radius: 4px;
+      overflow: hidden;
+      font-size: 14px;
+      margin: 0;
+      width: 480px;
+      height: 300px;
+      display: flex;
+      flex-direction: column;
+
+      &-header {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        width: 100%;
+        font-size: 16px;
+        padding: 12px 16px;
+        border-bottom: 1px solid $separator-color;
+        word-break: break-all;
+      }
+
+      &-title {
+        display: flex;
+        align-items: center;
+        line-height: 1;
+      }
+
+      &-icon {
+        font-size: 24px;
+        margin-right: 6px;
+        &-info {
+          color: $primary-color;
+        }
+        &-success {
+          color: $success-color;
+        }
+        &-warning {
+          color: $warning-color;
+        }
+        &-danger {
+          color: $danger-color;
+        }
+        &-question {
+          color: $primary-color;
+        }
+      }
+
+      &-close {
+        flex-shrink: 0;
+        margin-left: auto;
+        color: $text-color-assist;
+        cursor: pointer;
+        border-radius: $border-radius;
+        width: 20px;
+        height: 20px;
+        &:hover {
+          background-color: $default-color-hover;
+        }
+      }
+
+      &-body {
+        flex: 1 1 auto;
+        padding: 12px 16px;
+        overflow-y: auto;
+      }
+
+      &-footer {
+        padding: 12px 16px;
+        flex-shrink: 0;
+        border-top: 1px solid $separator-color;
+        text-align: right;
+        .#{$btn-prefix}:not(:first-child) {
+          margin-left: 12px;
+        }
+      }
+    }
+
+    .#{$modal-prefix}-fullscreen {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+/* 内容动画 - 修复版 */
+.#{$modal-prefix}-content-fade-enter-active,
+.#{$modal-prefix}-content-fade-leave-active {
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
 }
 
-.#{$modal-prefix}-mask {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
+.#{$modal-prefix}-content-fade-enter-from,
+.#{$modal-prefix}-content-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
 }
 
-.#{$modal-prefix} {
-  position: relative;
-  z-index: 1001;
-  background: #fff;
-  border-radius: 8px;
-  min-width: 300px;
-  max-width: 90%;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+.#{$modal-prefix}-content-fade-enter-to,
+.#{$modal-prefix}-content-fade-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+/* 遮罩动画 - 修复版 */
+.#{$modal-prefix}-mask-fade-enter-active,
+.#{$modal-prefix}-mask-fade-leave-active {
+  transition: opacity 0.3s ease;
 }
 
-.#{$modal-prefix}-header {
-  padding: 12px 16px;
-  font-weight: 600;
-  border-bottom: 1px solid #eee;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.#{$modal-prefix}-close {
-  border: none;
-  background: transparent;
-  font-size: 18px;
-  cursor: pointer;
-}
-
-.#{$modal-prefix}-body {
-  padding: 16px;
-}
-
-.#{$modal-prefix}-footer {
-  padding: 12px 16px;
-  border-top: 1px solid #eee;
-  text-align: right;
-}
-
-.#{$modal-prefix}-fade-enter-active,
-.#{$modal-prefix}-fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.#{$modal-prefix}-fade-enter-from,
-.#{$modal-prefix}-fade-leave-to {
+.#{$modal-prefix}-mask-fade-enter-from,
+.#{$modal-prefix}-mask-fade-leave-to {
   opacity: 0;
 }