amis-ui 6.11.0-beta.9 → 6.12.0-beta.0

package/lib/utils/smoothSignature.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0-beta.9
+ * amis-ui v6.12.0-beta.0
  * Copyright 2018-2025 fex
  */
 

package/lib/utils/vectorComputed.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0-beta.9
+ * amis-ui v6.12.0-beta.0
  * Copyright 2018-2025 fex
  */
 

package/lib/withRemoteConfig.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0-beta.9
+ * amis-ui v6.12.0-beta.0
  * Copyright 2018-2025 fex
  */
 

package/lib/withStore.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0-beta.9
+ * amis-ui v6.12.0-beta.0
  * Copyright 2018-2025 fex
  */
 

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "6.11.0-beta.9",
+  "version": "6.12.0-beta.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c ",
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^6.11.0-beta.9",
-    "amis-formula": "^6.11.0-beta.9",
+    "amis-core": "^6.12.0-beta.0",
+    "amis-formula": "^6.12.0-beta.0",
     "animate.css": "4.1.1",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",

package/scss/_components.scss

@@ -3785,15 +3785,19 @@
 
   // timeline
   --Timeline-time-color: var(--colors-neutral-text-5);
-  --Timeline-time-fontSize: var(--fonts-size-7);
-  --Timeline-time-fontWeight: var(--fonts-weight-6);
+  --Timeline-time-fontSize: var(--fonts-size-4);
+  --Timeline-time-fontWeight: var(--fonts-weight-3);
   --Timeline-title-color: var(--colors-neutral-text-2);
-  --Timeline-title-fontSize: var(--fonts-size-7);
+  --Timeline-title-fontSize: var(--fonts-size-6);
   --Timeline-title-fontWeight: var(--fonts-weight-6);
   --Timeline-type-info-color: var(--colors-info-5);
   --Timeline-type-success-color: var(--colors-success-5);
   --Timeline-type-warning-color: var(--colors-warning-5);
   --Timeline-type-danger-color: var(--colors-error-5);
+  --Timeline-dot-info-bg-color: var(--colors-info-5);
+  --Timeline-dot-success-bg-color: var(--colors-success-5);
+  --Timeline-dot-warning-bg-color: var(--colors-warning-5);
+  --Timeline-dot-danger-bg-color: var(--colors-error-5);
   --Timeline-detail-label-color: var(--colors-brand-5);
   --Timeline-detail-label-fontSize: var(--fonts-size-7);
   --Timeline-detail-label-fontWeight: var(--fonts-weight-6);
@@ -3811,13 +3815,17 @@
   --Timeline-visible-top-left-border-radius: var(--borders-radius-3);
   --Timeline-visible-bottom-right-border-radius: var(--borders-radius-3);
   --Timeline-visible-bottom-left-border-radius: var(--borders-radius-3);
-  --Timeline-left-size: var(--sizes-size-2);
+  --Timeline-left-size: var(--sizes-size-4);
   --Timeline-horizontal-top-size: var(--sizes-size-0);
   --Timeline-line-bg: #e6e6e8;
   --Timeline-round-bg: #dadbdd;
 
+  --TimelineItem-round-width-xl: #{px2rem(8px)};
+  --TimelineItem-round-width-lg: #{px2rem(6px)};
+  --TimelineItem-round-width-md: #{px2rem(4px)};
+  --TimelineItem-round-width-sm: #{px2rem(2px)};
   --TimelineItem--axle-flex: 0 0 #{px2rem(24px)};
-  --TimelineItem--left-line-width: #{px2rem(2px)};
+  --TimelineItem--left-line-width: #{px2rem(1px)};
   --TimelineItem--left-line-left: #{px2rem(13px)};
   --TimelineItem--left-line-top: #{px2rem(20px)};
   --TimelineItem--horizontal-left-line-top: #{px2rem(18px)};
@@ -3828,7 +3836,7 @@
   --TimelineItem--round-top: #{px2rem(8px)};
   --TimelineItem--icon-width: #{px2rem(16px)};
   --TimelineItem--icon-height: #{px2rem(16px)};
-  --TimelineItem--icon-left: #{px2rem(6px)};
+  --TimelineItem--icon-left: #{px2rem(12px)};
   --TimelineItem--content-padding-bottom: var(--gap-md);
   --TimelineItem--content-margin-left: var(--Timeline-left-size);
   --TimelineItem--content-time-margin-bottom: var(--gap-xs);
@@ -3860,10 +3868,14 @@
   --TimelineItem-custem-button-margin-left: var(--fontSizeSm);
   --TimelineItem-custem-time-padding-right: var(--fontSizeSm);
   --TimelineItem-round-bg: var(--Timeline-round-bg);
-  --Timeline--success-bg: var(--Timeline-type-success-color);
-  --Timeline--info-bg: var(--Timeline-type-info-color);
-  --Timeline--warning-bg: var(--Timeline-type-warning-color);
-  --Timeline--danger-bg: var(--Timeline-type-danger-color);
+  --Timeline--success-dot-color: var(--Timeline-type-success-color);
+  --Timeline--success-dot-bg-color: var(--Timeline-dot-success-bg-color);
+  --Timeline--info-dot-color: var(--Timeline-type-info-color);
+  --Timeline--info-dot-bg-color: var(--Timeline-dot-info-bg-color);
+  --Timeline--warning-dot-color: var(--Timeline-type-warning-color);
+  --Timeline--warning-dot-bg-color: var(--Timeline-dot-warning-bg-color);
+  --Timeline--danger-dot-color: var(--Timeline-type-danger-color);
+  --Timeline--danger-dot-bg-color: var(--Timeline-dot-danger-bg-color);
 
   --inputTag-option-height: var(--sizes-base-16);
   --inputTag-option-color: var(--colors-neutral-text-2);

package/scss/_properties.scss

@@ -630,7 +630,10 @@ $Table-strip-bg: transparent;
   --Pagination-padding: 0 #{px2rem(8px)};
   --Pagination-padding-sm: 0 #{px2rem(4px)};
   --Pagination-light-color: var(--colors-neutral-text-4);
+  --Pagination-border: var(--borderWidth) var(--borders-style-2)
+    var(--colors-neutral-line-7);
 
+  --Panel--default-bg: var(--colors-neutral-fill-11);
   --Panel--default-badgeBg: var(--colors-neutral-fill-3);
   --Panel--default-badgeColor: var(--colors-neutral-fill-10);
 
@@ -825,9 +828,12 @@ $Table-strip-bg: transparent;
   // ContextMenu
   --menu-background: #fff;
   --menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
-  --menu-border-radius: 4px;
+  --menu-border-radius: 6px;
+  --menu-padding: 4px;
   --menu-font-color: #151b26;
   --menu-font-family: PingFangSC-Regular;
+  --menu-font-padding: 5px 8px;
+  --menu-font-size: 14px;
   --menu-border-color: #e8e9eb; // 默认的边框色
   --menu-active-color: var(--colors-brand-5);
   --menu-hover-bg-color: #e6f0ff;
@@ -837,6 +843,12 @@ $Table-strip-bg: transparent;
   --menu-min-width: 150px; // 一级子项最小宽度
   --menu-sub-min-width: 100px; // 二级子项最小宽度
 
+  --Context-menu-border-radius: 6px;
+  --Context-menu-active-color: #2468f2;
+  --Context-menu-hover-color: #151b26;
+  --Context-menu-hover-bg-color: #f2f2f4;
+  --Context-menu-hasChild-active-color: #151b26;
+
   --SearchBox-width: #{px2rem(150px)};
   --SearchBox-history-dropdown-maxWidth: calc(var(--SearchBox-width) * 2);
   --SearchBox-history-dropdown-maxHeight: #{px2rem(200px)};

package/scss/base/_animate.scss

@@ -0,0 +1,42 @@
+// 内容放大
+.amis-hoverZoomIn-show,
+.amis-hoverZoomIn:hover {
+  transform: scale(1.1);
+}
+
+// 内容缩小
+.amis-hoverZoomOut-show,
+.amis-hoverZoomOut:hover {
+  transform: scale(0.9);
+}
+
+// 阴影增强
+.amis-hoverShadow-show,
+.amis-hoverShadow:hover {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+// 发光边框
+.amis-hoverBorder-show,
+.amis-hoverBorder:hover {
+  box-shadow: 0 0 10px var(--colors-brand-5),
+    0 0 10px var(--colors-brand-5) inset;
+}
+
+// 内容上升
+.amis-hoverUp-show,
+.amis-hoverUp:hover {
+  transform: translateY(-5px);
+}
+
+// 内容下降
+.amis-hoverDown-show,
+.amis-hoverDown:hover {
+  transform: translateY(5px);
+}
+
+// 内容翻转
+.amis-hoverFlip-show,
+.amis-hoverFlip:hover {
+  transform: rotateY(180deg);
+}

package/scss/components/_carousel.scss

@@ -215,8 +215,9 @@
         top: 0;
         justify-content: center;
       }
-      
-      &-leftArrow, &-rightArrow {
+
+      &-leftArrow,
+      &-rightArrow {
         height: 10%;
         width: 100%;
         left: 0;
@@ -238,27 +239,27 @@
           transform: translate(-50%, -50%) rotate(90deg);
         }
       }
-  
+
       &-item.slide {
         transform: translateY(100%);
       }
-  
+
       &-item.slide.in {
         transform: translateY(0);
       }
-  
+
       &-item.slide.out {
         transform: translateY(-100%);
       }
-  
+
       &-item.slideRight {
         transform: translateY(-100%);
       }
-  
+
       &-item.slideRight.in {
         transform: translateY(0);
       }
-  
+
       &-item.slideRight.out {
         transform: translateY(100%);
       }

package/scss/components/_context-menu.scss

@@ -57,10 +57,11 @@
     position: absolute;
 
     margin: 0;
-    padding: 4px 0;
+    padding: var(--menu-padding);
 
     background: var(--menu-background);
     box-shadow: var(--menu-box-shadow);
+    border-radius: var(--Context-menu-border-radius);
 
     color: var(--menu-font-color);
     font-family: var(--menu-font-family);
@@ -89,16 +90,24 @@
     > a {
       white-space: nowrap;
       display: block;
-      padding: var(--default-padding);
-      color: inherit;
+      padding: var(--menu-font-padding);
+      font-size: var(--menu-font-size);
+      color: var(--menu-font-color);
       border-top: none;
       border-bottom: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      > i {
+        font-size: 12px;
+      }
     }
 
     &:not(.is-disabled):hover > a {
       text-decoration: none;
-      color: var(--menu-active-color);
-      background: var(--menu-hover-bg-color);
+      background: var(--Context-menu-hover-bg-color);
+      border-radius: var(--Context-menu-border-radius);
+      color: var(--Context-menu-hover-color);
       cursor: pointer;
       border-top: none;
       border-bottom: none;
@@ -109,23 +118,21 @@
       pointer-events: none;
     }
 
-    &.has-child > a::after {
-      content: '';
-      width: 0;
-      height: 0;
-      border-width: 4px 7px;
-      border-style: solid;
-      border-color: transparent transparent transparent
-        var(--default-icon-color);
-      text-shadow: var(--menu-box-shadow);
-      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
+    &.is-active > a {
+      color: var(--Context-menu-active-color);
     }
 
-    &.has-child:hover > a::after {
-      border-color: transparent transparent transparent var(--menu-active-color);
+    &.has-child {
+      &::after {
+        position: absolute;
+        content: '';
+        width: 12px;
+        position: absolute;
+        right: -12px;
+        top: 0;
+        bottom: 0;
+        z-index: 1;
+      }
     }
 
     &.is-danger {
@@ -147,44 +154,29 @@
 
   &-item:hover > &-subList {
     display: block;
+    min-width: var(--menu-min-width);
     animation-duration: var(--animation-duration);
     animation-fill-mode: both;
     animation-name: contextMenuIn;
     position: absolute;
-    left: 100%; // calc(100% + 3px);
+    left: calc(100% + 8px);
     top: -3px;
-    min-width: var(--menu-sub-min-width);
-
     margin: 0;
-    padding: 0;
-
+    padding: var(--menu-padding);
     background: var(--menu-background);
     box-shadow: var(--menu-box-shadow);
-    border-radius: var(--menu-border-radius);
+    border-radius: var(--Context-menu-border-radius);
 
-    color: var(--menu-font-color);
+    color: var(--Context-menu-hover-color);
     font-family: var(--menu-font-family);
     font-size: 12px;
     line-height: 20px;
+    max-height: 500px;
+    overflow-y: auto;
 
     &:hover {
       display: block;
     }
-
-    // 附加的边框线
-    &::before {
-      display: block;
-      position: absolute;
-      content: '';
-      top: -1px;
-      left: -1px;
-      bottom: -1px;
-      right: -1px;
-
-      border-radius: var(--menu-border-radius);
-      border: 1px solid var(--menu-border-color);
-      z-index: -1;
-    }
   }
 
   &--left &-item:hover > &-subList {

package/scss/components/_dropdown.scss

@@ -47,7 +47,6 @@
     &-root {
       position: absolute;
       z-index: $zindex-dropdown;
-      top: 100%;
       left: 0;
       margin: px2rem(1px) 0 0;
       border: var(--Form-select-outer-borderWidth) solid

package/scss/components/_menu.scss

@@ -163,6 +163,63 @@
     }
   }
 
+  &-panel {
+    &-wrapper {
+      display: flex;
+      width: 100%;
+      padding: 12px;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      color: var(--Menu-light-fontColor);
+      font-size: var(--Nav-item-fontSize);
+
+      &:hover {
+        color: var(--Menu-light-fontColor-onHover);
+      }
+      
+      &__icon-wrapper {
+        width: var(--Tabs-linkFontSize);
+        height: var(--Tabs-linkFontSize);
+        line-height: var(--Tabs-linkFontSize);
+        margin-right: 8px;
+      }
+
+      &__icon {
+        fill: currentColor;
+        width: 100%;
+        height: 100%;
+      }
+
+      &__label {
+        &.is-group-header {
+          color: var(--Menu-light-groupTitle-fontColor);
+        }
+      }
+    }
+
+    &-group {
+      display: flex;
+      width: 100%;
+
+      &-item {
+        min-width: 120px;
+
+        &__header {
+          border-bottom: 1px solid #e8e8e8;
+          margin-bottom: 10px;
+          margin-bottom: 10px;
+        }
+      }
+
+      &-item + &-item {
+        margin-left: 16px;
+      }
+    }
+  }
+
   &-overflow-item {
     flex: none;
   }
@@ -336,6 +393,7 @@
   &-vertical.#{$ns}Nav-Menu-sub {
     min-width: px2rem(160px);
   }
+  
 
   &-item,
   &-submenu-title {

package/scss/components/_pagination.scss

@@ -65,7 +65,9 @@
       border-radius: var(--borderRadius);
     }
   }
+
   &-simple {
+    color: var(--Pagination-light-color);
     > ul > li {
       &:hover,
       &:focus {
@@ -267,7 +269,6 @@
 
   .#{$ns}Pagination-item {
     margin-left: px2rem(4px);
-
     > li {
       > a,
       > span {
@@ -280,7 +281,7 @@
 
     .#{$ns}Pagination-inputGroup,
     .#{$ns}Pagination-simplego {
-      height: var(--Pagination-height-sm);
+      height: var(--Pagination-height);
       &-input {
         min-width: px2rem(40px);
         width: px2rem(40px);
@@ -302,7 +303,6 @@
       }
     }
   }
-
   .#{$ns}Pagination-perpage {
     margin-left: px2rem(4px);
     padding: 0 px2rem(6px);
@@ -310,3 +310,96 @@
     vertical-align: baseline;
   }
 }
+@include media-breakpoint-down(sm) {
+  .#{$ns}Pagination-wrap-size--sm {
+    .#{$ns}Pagination-item {
+      display: flex;
+      justify-content: center;
+      gap: px2rem(16px);
+      > li {
+        > a,
+        > span {
+          border: var(--borderWidth) solid var(--borderColor);
+          padding: var(--Pagination-padding);
+          min-width: var(--Pagination-minWidth);
+          height: var(--Pagination-height);
+          line-height: var(--Pagination-height);
+          border-radius: var(--borderRadius);
+        }
+        &.disabled {
+          > a,
+          > span {
+            opacity: 0.5;
+            cursor: not-allowed;
+          }
+        }
+        
+      }
+
+      .#{$ns}Pagination-inputGroup,
+      .#{$ns}Pagination-simplego {
+        &-input {
+          border: none;
+          padding: 0;
+          margin-left: 0;
+        }
+        &-right {
+          border: none;
+        }
+      }
+    }
+  }
+  .#{$ns}Pagination-wrap-size--md {
+    .#{$ns}Pagination-item {
+      display: flex;
+      justify-content: space-between;
+      > li {
+        > a,
+        > span {
+          border: var(--Pagination-border);
+          border-radius: var(--borderRadius);
+        }
+        &.disabled {
+          > a,
+          > span {
+            opacity: 0.5;
+            cursor: not-allowed;
+          }
+        }
+      }
+
+      .#{$ns}Pagination-inputGroup,
+      .#{$ns}Pagination-simplego {
+        &-input {
+          border: none;
+        }
+        &-right {
+          border: none;
+        }
+      }
+    }
+  }
+  .#{$ns}Pagination {
+    &-simplego {
+      display: inline-flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      height: var(--Pagination-height);
+    }
+    input {
+      display: inline-block;
+      min-width: var(--Pagination-minWidth);
+      width: px2rem(32px);
+      height: var(--Pagination-height);
+      line-height: var(--Pagination-height);
+      font-size: var(--fontSizeSm);
+      margin-right: 0;
+      padding: 0;
+      &:focus,
+      &:hover {
+        outline: none;
+        border-color: var(--primary);
+      }
+    }
+  }
+}

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/_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;
     }