amis-ui 6.11.0 → 6.12.0-ab.2

package/scss/components/_images.scss

@@ -1,5 +1,21 @@
 @use 'sass:math';
 
+.sm-ss-sss-m,
+.sss-ss-ms-m,
+.sms-ss-sms-m,
+.sm-ss-sss-ss,
+.ms-ss-sss-ss,
+.sss-ss-sm-ss,
+.mss-ss-ssm-ss,
+.sss-ss-mm-ss,
+[class^="even-"]{
+  .#{$ns}Image{
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
 .#{$ns}Images {
   display: flex;
   flex-wrap: wrap;
@@ -196,6 +212,351 @@
   &-thumbWrap:hover &-overlay {
     display: flex;
   }
+
+  .#{$ns}Img-container{
+    position: relative;
+
+    img{
+      transition: all ease-in-out .3s;
+
+    }
+
+    .mask{
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+      font-weight: bold;
+      font-size: px2rem(15px);
+      background-color: rgb(44, 63, 82);
+      color: #fff;
+      transition: all ease-in-out .3s;
+    }
+  }
+
+  .hover-slide{
+    &:hover .mask{
+      opacity: 1;
+      transform: translate(5%, 5%);
+      z-index: 1;
+    }
+  }
+
+  .pull-top{
+    .mask{
+      opacity: 1;
+    }
+    img{
+      position: absolute;
+    }
+    &:hover img{
+      transform: translateY(-70%);
+    }
+  }
+
+  .scale-center{
+    .mask{
+      scale: 0.5;
+
+      span{
+        position: absolute;
+        top: 5%;
+        left: 5%;
+      }
+    }
+
+    &:hover .mask{
+      transform: scale(2);
+      opacity: 1;
+    }
+
+    &:hover img{
+      transform: scale(0.5);
+    }
+  }
+
+  .scale-top{
+    img{
+      position: absolute;
+    }
+    .mask {
+      opacity: 1;
+      span{
+        position: absolute;
+        bottom: 5%;
+        left: 5%;
+      }
+    }
+    &:hover img{
+      transform: translateY(-50%) scale(0.5);
+    }
+  }
+
+  .text-style-1{
+    overflow: hidden;
+    .mask{
+      z-index: 1;
+      opacity: 1;
+      background: rgba(48, 133, 163, 0.4);
+      span{
+        position: absolute;
+        left: 5%;
+        bottom: 5%;
+        transition: all ease-in-out .3s;
+      }
+    }
+    img{
+      scale: 1.2;
+      transform: translateX(-5%);
+    }
+    &:hover .mask{
+      background: rgba(48, 133, 163, 0);
+      span{
+        transform: translateY(-200%);
+      }
+    }
+    &:hover img{
+      transform: translateX(5%);
+    }
+  }
+
+  .text-style-2{
+    .mask{
+      opacity: 1;
+      background: transparent;
+      span{
+        z-index: 1;
+        transition: all ease-in-out .3s;
+      }
+    }
+    .mask::before{
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 0%;
+      background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0, rgba(72, 76, 97, .8) 75%);
+      transition: all ease-in-out .3s;
+    }
+    &:hover .mask::before{
+      height: 100%;
+    }
+    &:hover .mask span{
+      transform: translateY(-200%);
+    }
+  }
+
+  .text-style-3{
+    overflow: hidden;
+    .mask{
+      z-index: 1;
+      opacity: 1;
+      background: transparent;
+      span{
+        position: absolute;
+        top: 10%;
+        transition: all 0.3s ease-in-out;
+      }
+    }
+    img{
+      scale: 1.2;
+      transition: all 0.3s ease-in-out;
+    }
+    .mask::before,
+    .mask::after{
+      content: "";
+      position: absolute;
+      top: 10%;
+      bottom: 10%;
+      left: 15%;
+      right: 15%;
+      transition: all 0.3s ease-in-out;
+      color: rgba(255, 255, 255, 0.7);
+      opacity: 0;
+    }
+    .mask::before{
+      border-top: 1px solid #ffffff;
+      border-bottom: 1px solid #ffffff;
+      transform: scaleX(0); /* 初始状态：水平方向缩放为0 */
+      transform-origin: left; /* 设置变换的原点为左侧 */
+    }
+    .mask::after {
+      border-left: 1px solid #ffffff;
+      border-right: 1px solid #ffffff;
+      transform: scaleY(0); /* 初始状态：垂直方向缩放为0 */
+      transform-origin: top; /* 设置变换的原点为顶部 */
+    }
+    &:hover .mask::before{
+      opacity: 1;
+      transform: scaleX(1.2) translateX(-10%); /* 鼠标悬停时：水平方向缩放为1 */
+    }
+    &:hover .mask::after{
+      opacity: 1;
+      transform: scaleY(1.2) translateY(-10%); /* 鼠标悬停时：垂直方向缩放为1 */
+    }
+    &:hover .mask{
+      background: rgba(48, 133, 163, 0.4);
+      span{
+        top: 20%;
+      }
+    }
+    &:hover img{
+      transform: translateY(10%);
+    }
+  }
+
+  .text-style-4{
+    .mask{
+      background: #fff;
+      opacity: 1;
+      left: 0;
+      bottom: 0;
+      top: auto;
+      height: 0!important;
+      transform-origin: bottom;
+      color: #0b0a22;
+      z-index: 1;
+      span{
+        display: none;
+      }
+    }
+
+    &:hover .mask{
+      height: 40%!important;
+      span{
+        display: block;
+      }
+    }
+  }
+
+  .text-style-5{
+    .mask{
+      opacity: 1;
+      background: rgba(48, 133, 163, 0);
+      z-index: 1;
+      span{
+        position: relative;
+        bottom: -10%;
+        transition: all 0.3s ease-in-out;
+      }
+    }
+    .mask::before{
+      content: "";
+      border: 1px solid #ffffff;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      width: 0;
+      height: 0;
+      transition: all 0.3s ease-in-out;
+      opacity: 0;
+    }
+    &:hover .mask::before{
+      width: 90%;
+      height: 90%;
+      opacity: 1;
+    }
+
+    &:hover .mask{
+      background: rgba(48, 133, 163, 0.4);
+      span{
+        bottom: 10%;
+      }
+    }
+  }
+
+  .text-style-6{
+    .mask{
+      opacity: 1;
+      z-index: 1;
+      background: rgba(48, 133, 163, 0.4);
+      span{
+        position: absolute;
+        transition: all 0.3s ease-in-out;
+        bottom: 40%;
+      }
+    }
+    .mask::before,
+    .mask::after{
+      content: "";
+      position: absolute;
+      top: 5%;
+      bottom: 5%;
+      left: 7%;
+      right: 7%;
+      transition: all 0.3s ease-in-out;
+      color: rgba(255, 255, 255, 0.7);
+      opacity: 0;
+    }
+    .mask::before{
+      border-top: 1px solid #ffffff;
+      border-bottom: 1px solid #ffffff;
+      transform: scaleX(0); /* 初始状态：水平方向缩放为0 */
+    }
+    .mask::after {
+      border-left: 1px solid #ffffff;
+      border-right: 1px solid #ffffff;
+      transform: scaleY(0); /* 初始状态：垂直方向缩放为0 */
+    }
+    &:hover .mask::before{
+      opacity: 1;
+      transform: scaleX(1); /* 鼠标悬停时：水平方向缩放为1 */
+    }
+    &:hover .mask::after{
+      opacity: 1;
+      transform: scaleY(1); /* 鼠标悬停时：垂直方向缩放为1 */
+    }
+    &:hover .mask{
+      background: rgba(48, 133, 163, 0);
+      span{
+        bottom: 5%;
+      }
+    }
+  }
+
+  .text-style-7{
+    .mask{
+      opacity: 1;
+      z-index: 1;
+      background: rgba(48, 133, 163, 0);
+      span{
+        position: absolute;
+        top: 10%;
+        transition: all 0.3s ease-in-out;
+      }
+    }
+    .mask::before,
+    .mask::after{
+      content: "";
+      width: 80%;
+      height: 1px;
+      background: #ffffff;
+      position: absolute;
+      transition: all 0.3s ease-in-out;
+    }
+    &:hover .mask{
+      background: rgba(48, 133, 163, 0.4);
+      span{
+        top: 20%;
+      }
+    }
+    &:hover .mask::before{
+      transform: rotateZ(45deg);
+    }
+    &:hover .mask::after{
+      transform: rotateZ(-45deg);
+    }
+  }
 }
 
 .#{$ns}ImageField--thumb {
@@ -208,8 +569,82 @@
 .#{$ns}ImagesField {
   position: relative;
   @include clearfix();
+
+  &--full {
+    position: relative;
+
+    .#{$ns}Images {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+      cursor: grab;
+
+      &-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        min-height: 300px;
+      }
+
+      &-item {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #fff;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      &-itemInner {
+        position: relative;
+        max-width: 100%;
+        max-height: 100vh;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .#{$ns}Image-image {
+        display: block;
+        max-width: 100%;
+        height: auto;
+
+        &--contain {
+          object-fit: contain;
+          width: 100%;
+          height: 100%;
+        }
+
+        &--cover {
+          object-fit: cover;
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &-itemIndex {
+        position: absolute;
+        right: 16px;
+        bottom: 16px;
+        background: rgba(0, 0, 0, 0.5);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 12px;
+        font-size: 12px;
+        z-index: 10;
+        pointer-events: none;
+      }
+    }
+  }
 }
 
 .Image-view-icon {
   content: var(--image-image-normal-icon);
 }
+
+
+

package/scss/components/_list.scss

@@ -10,6 +10,7 @@
     border: var(--List-borderWidth) solid var(--List-borderColor);
     background: var(--List-bg);
     margin-bottom: var(--gap-sm);
+    margin-right: px2rem(15px);
   }
 
   &-toolbar {
@@ -91,6 +92,16 @@
     background: var(--Table-bg);
     z-index: $zindex-sticky;
   }
+
+  &-content-wrapper {
+    display: flex;
+    position: relative;
+  }
+
+  &-main {
+    flex: 1;
+    min-width: 0; // 防止内容溢出
+  }
 }
 
 .#{$ns}ListGroup {
@@ -254,3 +265,49 @@
     background: var(--ListMenu-item--onHover-bg);
   }
 }
+
+// 修改索引条样式
+.#{$ns}AlphabetIndexer {
+  position: sticky;
+  top: calc(var(--affix-offset-top) + var(--gap-base));
+  right: px2rem(5px);
+  height: fit-content;
+  padding: px2rem(10px) px2rem(5px);
+  background: var(--white);
+  border-radius: var(--borderRadius);
+  box-shadow: var(--boxShadow);
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  overflow-y: auto;
+
+  // 移动端样式
+  @media (max-width: 768px) {
+    position: sticky;
+    top: calc(var(--affix-offset-top) + var(--gap-base));
+    right: px2rem(5px);
+    align-self: flex-start;
+  }
+
+  &-letter {
+    font-size: var(--fontSizeSm);
+    padding: px2rem(2px) px2rem(4px);
+    cursor: pointer;
+    text-align: center;
+
+    @media (max-width: 768px) {
+      padding: px2rem(1px) px2rem(2px);
+    }
+
+    &:hover {
+      color: var(--primary);
+    }
+
+    &.is-active {
+      color: var(--white);
+      background: var(--primary);
+      border-radius: var(--borderRadius-sm);
+    }
+  }
+}

package/scss/components/_page.scss

@@ -2,6 +2,9 @@
   width: 100%;
   height: 100%;
   background: var(--Page-main-bg);
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
 
   &-header {
     padding: var(--Page-header-paddingY) var(--Page-header-paddingX);
@@ -17,7 +20,7 @@
   &-content {
     padding: var(--Page-content-paddingY) var(--Page-content-paddingX);
     position: relative;
-    height: 100%;
+    height: auto;
     width: 100%;
   }
 
@@ -109,6 +112,29 @@
   // background: var(--Page-aside-bg);
 }
 
+@include media-breakpoint-down(sm) {
+  .#{$ns}Page {
+    flex-direction: column;
+  }
+
+  .#{$ns}Page-aside {
+    flex-shrink: 0;
+  }
+
+  .#{$ns}Page-content {
+    flex-grow: 1;
+    min-height: 0;
+    display: flex;
+    align-items: stretch;
+    flex-direction: row;
+  }
+
+  .#{$ns}Page-main {
+    height: auto;
+    width: 100%;
+  }
+}
+
 @include media-breakpoint-up(md) {
   .#{$ns}Page-aside {
     &::before {

package/scss/components/_popoverable.scss

@@ -23,12 +23,13 @@
 
   .#{$ns}Field-popOverWrap {
     &-ellipsis {
-      width: 200px;
-      white-space: nowrap;
+      width: auto;
       overflow: hidden;
-      text-overflow: ellipsis;
-      vertical-align: bottom;
-      display: inline-block;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      line-clamp: 1;
+      -webkit-line-clamp: 1;
+      word-break: break-all;
     }
 
     &-noWrap {

package/scss/components/_signature.scss

@@ -59,6 +59,7 @@
         cursor: pointer;
         font-size: 14px;
         color: #aaa;
+        top: 0;
         &:hover {
           color: #000;
         }

package/scss/components/_slider.scss

@@ -0,0 +1,27 @@
+.#{$ns}Slider {
+  display: flex;
+  &-BodyContainer {
+    width: 60%;
+  }
+  &-LeftContainer,
+  &-RightContainer {
+    flex: 1;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .#{$ns}Slider {
+    display: flex;
+    overflow: hidden;
+    &-BodyContainer {
+      flex: 1;
+    }
+    &-LeftContainer,
+    &-RightContainer {
+      flex: initial;
+      width: 0;
+      transition: width 0.3s;
+      overflow: hidden;
+    }
+  }
+}

package/scss/components/_steps.scss

@@ -407,13 +407,27 @@
 
 .#{$ns}Steps-mobile.#{$ns}Steps--horizontal {
   .#{$ns}StepsItem {
+    overflow: visible;
     &-container {
+      &Tail:after {
+        display: none;
+      }
       &Wrapper {
+        transform: translateX(px2rem(-5px));
         .#{$ns}StepsItem-body {
           .#{$ns}StepsItem-title {
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
             &::after {
               display: none !important;
             }
+            span {
+              left: 0;
+            }
+          }
+          .#{$ns}StepsItem-description {
+            min-width: px2rem(140px);
           }
         }
 
@@ -429,6 +443,7 @@
       &Icon {
         position: relative;
         display: block;
+        margin-left: px2rem(40px);
 
         &:after {
           content: '';
@@ -436,8 +451,8 @@
           right: 0;
           top: px2rem(15px);
           height: 1px;
-          left: px2rem(40px);
-          width: 99999px;
+          left: px2rem(35px);
+          width: px2rem(80px);
           background-color: var(--Steps-line-bg);
         }
       }

package/scss/components/_table.scss

@@ -305,6 +305,16 @@
       text-align: right;
     }
 
+    & th.align-top,
+    & td.align-top {
+      vertical-align: top !important;
+    }
+
+    & th.align-bottom,
+    & td.align-bottom {
+      vertical-align: bottom !important;
+    }
+
     & td .#{$ns}SwitchControl {
       padding-top: 0;
     }
@@ -1022,7 +1032,15 @@
         border-top: none; // 不然会导致拖动时顶部露出内容
 
         &.#{$ns}Table-table--tableFillHeight {
-          min-height: 100%; // 为了让表格占满高度
+          > tbody {
+            height: calc(
+              var(--Table-content-height) - var(--Table-thead-height) - 20px
+            );
+
+            > tr > td {
+              border-bottom: none;
+            }
+          }
         }
       }