amis-ui 6.11.0-beta.0 → 6.11.0-beta.2

package/lib/themes/default.css

@@ -140,6 +140,7 @@
   --ButtonGroup-divider-width: 0.0625rem;
   --ButtonGroup-divider-color: #fff;
   --ButtonGroup-borderWidth: var(--borders-width-2);
+  --Button-onDisabled-opacity: 0.3;
   --Breadcrumb-item-fontSize: var(--fontSizeMd);
   --Breadcrumb-item-default-color: var(--colors-neutral-text-5);
   --Breadcrumb-item-hover-color: var(--colors-brand-5);
@@ -17245,6 +17246,9 @@ samp {
   width: 100%;
   height: 100%;
 }
+.amis-animation-placeholder {
+  opacity: 0;
+}
 .has-popover {
   position: relative;
 }
@@ -18538,6 +18542,7 @@ img.cxd-AsideNav-itemIcon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  text-align: center;
   vertical-align: middle;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -25175,6 +25180,10 @@ input[type=button].cxd-Button--block {
 }
 .cxd-Crud-selection {
   margin-bottom: var(--gap-base);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap-xs);
+  line-height: 1;
 }
 .cxd-Crud-selection-overflow-wrapper {
   display: flex;
@@ -25185,6 +25194,7 @@ input[type=button].cxd-Button--block {
   overflow-y: auto;
   height: calc((var(--Picker-tag-height) + var(--Picker-tag-marginBottom) * 4) * 3);
   max-height: calc((var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5);
+  gap: var(--gap-xs);
 }
 .cxd-Crud-selection-overflow-wrapper .cxd-Crud-value {
   cursor: pointer;
@@ -25194,7 +25204,8 @@ input[type=button].cxd-Button--block {
   white-space: nowrap;
   vertical-align: middle;
   line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem);
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   font-size: var(--Pick-base-value-fontSize);
   color: var(--Pick-base-value-color);
   font-weight: var(--Pick-base-value-fontWeight);
@@ -25203,9 +25214,6 @@ input[type=button].cxd-Button--block {
   border-style: var(--Pick-base-value-top-border-style) var(--Pick-base-value-right-border-style) var(--Pick-base-value-bottom-border-style) var(--Pick-base-value-left-border-style);
   border-color: var(--Pick-base-value-top-border-color) var(--Pick-base-value-right-border-color) var(--Pick-base-value-bottom-border-color) var(--Pick-base-value-left-border-color);
   border-radius: var(--Pick-base-top-left-border-radius) var(--Pick-base-top-right-border-radius) var(--Pick-base-bottom-right-border-radius) var(--Pick-base-bottom-left-border-radius);
-  margin-right: var(--gap-xs);
-  margin-bottom: var(--gap-xs);
-  margin-top: var(--gap-xs);
   max-width: 9.375rem;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -25216,13 +25224,15 @@ input[type=button].cxd-Button--block {
 }
 .cxd-Crud-selection-overflow-wrapper .cxd-Crud-value.is-disabled {
   pointer-events: none;
+}
+.cxd-Crud-selection-overflow-wrapper .cxd-Crud-value.is-disabled .cxd-Crud-valueIcon {
   opacity: var(--Button-onDisabled-opacity);
 }
 .cxd-Crud-selection-overflow-wrapper .cxd-Crud-valueIcon {
   color: var(--Pick-base-value-icon-color);
   cursor: pointer;
   border-right: 0.0625rem solid var(--Form-selectValue-borderColor);
-  padding: 1px 5px;
+  padding: 0 5px;
 }
 .cxd-Crud-selection-overflow-wrapper .cxd-Crud-valueIcon:hover {
   background: var(--Pick-base-value-hover-icon-color);
@@ -25243,7 +25253,8 @@ input[type=button].cxd-Button--block {
   white-space: nowrap;
   vertical-align: middle;
   line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem);
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   font-size: var(--Pick-base-value-fontSize);
   color: var(--Pick-base-value-color);
   font-weight: var(--Pick-base-value-fontWeight);
@@ -25252,9 +25263,6 @@ input[type=button].cxd-Button--block {
   border-style: var(--Pick-base-value-top-border-style) var(--Pick-base-value-right-border-style) var(--Pick-base-value-bottom-border-style) var(--Pick-base-value-left-border-style);
   border-color: var(--Pick-base-value-top-border-color) var(--Pick-base-value-right-border-color) var(--Pick-base-value-bottom-border-color) var(--Pick-base-value-left-border-color);
   border-radius: var(--Pick-base-top-left-border-radius) var(--Pick-base-top-right-border-radius) var(--Pick-base-bottom-right-border-radius) var(--Pick-base-bottom-left-border-radius);
-  margin-right: var(--gap-xs);
-  margin-bottom: var(--gap-xs);
-  margin-top: var(--gap-xs);
   max-width: 9.375rem;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -25265,13 +25273,15 @@ input[type=button].cxd-Button--block {
 }
 .cxd-Crud .cxd-Crud-value.is-disabled {
   pointer-events: none;
+}
+.cxd-Crud .cxd-Crud-value.is-disabled .cxd-Crud-valueIcon {
   opacity: var(--Button-onDisabled-opacity);
 }
 .cxd-Crud .cxd-Crud-valueIcon {
   color: var(--Pick-base-value-icon-color);
   cursor: pointer;
   border-right: 0.0625rem solid var(--Form-selectValue-borderColor);
-  padding: 1px 5px;
+  padding: 0 5px;
 }
 .cxd-Crud .cxd-Crud-valueIcon:hover {
   background: var(--Pick-base-value-hover-icon-color);
@@ -29078,14 +29088,14 @@ input[type=button].cxd-Button--block {
   color: var(--PopOverAble-onHover-iconColor);
   opacity: 1;
 }
+.cxd-TableCell-ellipsis {
+  display: flex;
+  align-items: center;
+}
 .cxd-Field--popOverAble {
   outline: none;
   position: relative;
 }
-.cxd-Field--popOverAble--flex {
-  display: flex;
-  align-items: center;
-}
 .cxd-Field--popOverAble .cxd-Field-popOverWrap-ellipsis {
   width: 200px;
   white-space: nowrap;
@@ -32123,6 +32133,23 @@ input[type=button].cxd-Button--block {
 .cxd-GridNavItem-content--clickable {
   cursor: pointer;
 }
+/**
+ * @file _shape.scss
+ *
+ * @author allenve(yupeng12@baidu.com)
+ * @created: 2024/12/12
+ */
+.cxd-Shape {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 200px;
+}
+.cxd-Shape-svg {
+  position: absolute;
+}
 fieldset.cxd-Collapse--lg, fieldset.cxd-Collapse--md, fieldset.cxd-Collapse--base, fieldset.cxd-Collapse--sm, fieldset.cxd-Collapse--xs {
   position: relative;
 }
@@ -38949,7 +38976,8 @@ td.rdtQuarter.rdtDisabled:hover > span {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  position: absolute;
+  flex: 1;
+  min-width: 0;
   line-height: var(--Form-input-lineHeight);
   padding: var(--Pick-base-paddingTop) var(--Pick-base-paddingRight) var(--Pick-base-paddingBottom) var(--Pick-base-paddingLeft);
 }
@@ -38963,12 +38991,6 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border-style: var(--Pick-base-top-border-style) var(--Pick-base-right-border-style) var(--Pick-base-bottom-border-style) var(--Pick-base-left-border-style);
   border-color: var(--Pick-base-top-border-color) var(--Pick-base-right-border-color) var(--Pick-base-bottom-border-color) var(--Pick-base-left-border-color);
 }
-.cxd-Picker .cxd-Picker-values {
-  display: inline;
-}
-.cxd-Picker .cxd-Picker-values .cxd-Picker-valueLabel {
-  pointer-events: auto;
-}
 .cxd-Picker-valueWrap {
   flex-grow: 1;
   position: relative;
@@ -38979,8 +39001,9 @@ td.rdtQuarter.rdtDisabled:hover > span {
   display: inline-block;
 }
 .cxd-Picker .cxd-Picker-valueWrap {
-  margin-bottom: calc(var(--gap-xs) * -1);
-  line-height: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap-xs);
 }
 .cxd-Picker .cxd-Picker-value {
   cursor: pointer;
@@ -38990,7 +39013,8 @@ td.rdtQuarter.rdtDisabled:hover > span {
   white-space: nowrap;
   vertical-align: middle;
   line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem);
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   font-size: var(--Pick-base-value-fontSize);
   color: var(--Pick-base-value-color);
   font-weight: var(--Pick-base-value-fontWeight);
@@ -38999,9 +39023,6 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border-style: var(--Pick-base-value-top-border-style) var(--Pick-base-value-right-border-style) var(--Pick-base-value-bottom-border-style) var(--Pick-base-value-left-border-style);
   border-color: var(--Pick-base-value-top-border-color) var(--Pick-base-value-right-border-color) var(--Pick-base-value-bottom-border-color) var(--Pick-base-value-left-border-color);
   border-radius: var(--Pick-base-top-left-border-radius) var(--Pick-base-top-right-border-radius) var(--Pick-base-bottom-right-border-radius) var(--Pick-base-bottom-left-border-radius);
-  margin-right: var(--gap-xs);
-  margin-bottom: var(--gap-xs);
-  margin-top: var(--gap-xs);
   max-width: 9.375rem;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -39012,13 +39033,15 @@ td.rdtQuarter.rdtDisabled:hover > span {
 }
 .cxd-Picker .cxd-Picker-value.is-disabled {
   pointer-events: none;
+}
+.cxd-Picker .cxd-Picker-value.is-disabled .cxd-Picker-valueIcon {
   opacity: var(--Button-onDisabled-opacity);
 }
 .cxd-Picker .cxd-Picker-valueIcon {
   color: var(--Pick-base-value-icon-color);
   cursor: pointer;
   border-right: 0.0625rem solid var(--Form-selectValue-borderColor);
-  padding: 1px 5px;
+  padding: 0 5px;
 }
 .cxd-Picker .cxd-Picker-valueIcon:hover {
   background: var(--Pick-base-value-hover-icon-color);
@@ -39085,6 +39108,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   overflow-y: auto;
   height: calc((var(--Picker-tag-height) + var(--Picker-tag-marginBottom) * 4) * 3);
   max-height: calc((var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5);
+  gap: var(--gap-xs);
 }
 .cxd-Picker-overflow-wrapper .cxd-Picker-value {
   cursor: pointer;
@@ -39094,7 +39118,8 @@ td.rdtQuarter.rdtDisabled:hover > span {
   white-space: nowrap;
   vertical-align: middle;
   line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem);
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   font-size: var(--Pick-base-value-fontSize);
   color: var(--Pick-base-value-color);
   font-weight: var(--Pick-base-value-fontWeight);
@@ -39103,9 +39128,6 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border-style: var(--Pick-base-value-top-border-style) var(--Pick-base-value-right-border-style) var(--Pick-base-value-bottom-border-style) var(--Pick-base-value-left-border-style);
   border-color: var(--Pick-base-value-top-border-color) var(--Pick-base-value-right-border-color) var(--Pick-base-value-bottom-border-color) var(--Pick-base-value-left-border-color);
   border-radius: var(--Pick-base-top-left-border-radius) var(--Pick-base-top-right-border-radius) var(--Pick-base-bottom-right-border-radius) var(--Pick-base-bottom-left-border-radius);
-  margin-right: var(--gap-xs);
-  margin-bottom: var(--gap-xs);
-  margin-top: var(--gap-xs);
   max-width: 9.375rem;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -39116,13 +39138,15 @@ td.rdtQuarter.rdtDisabled:hover > span {
 }
 .cxd-Picker-overflow-wrapper .cxd-Picker-value.is-disabled {
   pointer-events: none;
+}
+.cxd-Picker-overflow-wrapper .cxd-Picker-value.is-disabled .cxd-Picker-valueIcon {
   opacity: var(--Button-onDisabled-opacity);
 }
 .cxd-Picker-overflow-wrapper .cxd-Picker-valueIcon {
   color: var(--Pick-base-value-icon-color);
   cursor: pointer;
   border-right: 0.0625rem solid var(--Form-selectValue-borderColor);
-  padding: 1px 5px;
+  padding: 0 5px;
 }
 .cxd-Picker-overflow-wrapper .cxd-Picker-valueIcon:hover {
   background: var(--Pick-base-value-hover-icon-color);
@@ -41455,7 +41479,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-UserSelect-selectPopup {
   width: 100vw;
   height: 100vh;
-  z-index: var(3000)1;
+  z-index: calc(var(3000) + 1);
 }
 .cxd-UserSelect-searchBox {
   height: 3.25rem;

package/lib/utils/smoothSignature.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0-beta.0
+ * amis-ui v6.11.0-beta.2
  * Copyright 2018-2024 fex
  */
 

package/lib/utils/vectorComputed.d.ts

@@ -0,0 +1,20 @@
+export declare function vectorLength(v: number[]): number;
+export declare function dotProduct(v1: number[], v2: number[]): number;
+export declare function vectorAngle(v1: number[], v2: number[]): number;
+export declare function computeSideLength(side: number, angle: number): number;
+/**
+ * 传入起点、终点和距离，返回直线上距离起点距离为distance
+ *
+ * @param {[number, number]} [startX, startY]
+ * @param {[number, number]} [endX, endY]
+ * @param {number} distance
+ * @returns
+ * @memberof SvgPathGenerator
+ */
+export declare function radiusPoint([startX, startY]: number[], [endX, endY]: number[], distance: number): number[];
+export declare function radiusStartEndPoint(v1: number[], v2: number[], radius: number): {
+    start: number[];
+    end: number[];
+    radius: number;
+    sweepFlag: number;
+};

package/lib/utils/vectorComputed.js

@@ -0,0 +1,84 @@
+/**
+ * amis-ui v6.11.0-beta.2
+ * Copyright 2018-2024 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+
+// 计算向量的模长
+function vectorLength(v) {
+    return Math.sqrt(v.reduce(function (sum, cur) { return sum + Math.pow(cur, 2); }, 0));
+}
+// 计算向量的点积
+function dotProduct(v1, v2) {
+    return v1.reduce(function (sum, cur, index) { return sum + cur * v2[index]; }, 0);
+}
+// 计算向量的夹角
+function vectorAngle(v1, v2) {
+    return Math.acos(dotProduct(v1, v2) / (vectorLength(v1) * vectorLength(v2)));
+}
+// 通过直角边和夹角计算另一直角边长度
+function computeSideLength(side, angle) {
+    return side / Math.tan(angle);
+}
+/**
+ * 传入起点、终点和距离，返回直线上距离起点距离为distance
+ *
+ * @param {[number, number]} [startX, startY]
+ * @param {[number, number]} [endX, endY]
+ * @param {number} distance
+ * @returns
+ * @memberof SvgPathGenerator
+ */
+function radiusPoint(_a, _b, distance) {
+    var _c = tslib.__read(_a, 2), startX = _c[0], startY = _c[1];
+    var _d = tslib.__read(_b, 2), endX = _d[0], endY = _d[1];
+    // 计算终点与起点的直线距离
+    var dx = endX - startX;
+    var dy = endY - startY;
+    var totalDistance = Math.sqrt(dx * dx + dy * dy);
+    // 如果距离大于总距离的一半，则取一半
+    if (distance > totalDistance / 2) {
+        distance = totalDistance / 2;
+    }
+    // 计算比例
+    var ratio = distance / totalDistance;
+    // 计算新点
+    var x = startX + dx * ratio;
+    var y = startY + dy * ratio;
+    return [x, y];
+}
+// 传入2个向量和圆角半径，返回圆角弧线的起始点坐标
+function radiusStartEndPoint(v1, v2, radius) {
+    // 计算向量夹角
+    var angle = vectorAngle([v1[2] - v1[0], v1[3] - v1[1]], [v2[2] - v1[0], v2[3] - v1[1]]);
+    // 计算3点是顺时针还是逆时针
+    var sweepFlag = (v1[2] - v1[0]) * (v2[3] - v1[1]) - (v1[3] - v1[1]) * (v2[2] - v1[0]) < 0
+        ? 1
+        : 0;
+    // 计算短边一半的长度
+    var maxLength = Math.min(vectorLength([v1[2] - v1[0], v1[3] - v1[1]]) / 2, vectorLength([v2[2] - v1[0], v2[3] - v1[1]]) / 2);
+    // 计算radius的最大值
+    var maxRadius = Math.min(radius, maxLength * Math.tan(angle / 2));
+    // 直角边的长度
+    var distance = computeSideLength(maxRadius, angle / 2);
+    var _a = tslib.__read(radiusPoint([v1[0], v1[1]], [v1[2], v1[3]], distance), 2), startX = _a[0], startY = _a[1];
+    var _b = tslib.__read(radiusPoint([v2[0], v2[1]], [v2[2], v2[3]], distance), 2), endX = _b[0], endY = _b[1];
+    return {
+        start: [startX, startY],
+        end: [endX, endY],
+        radius: maxRadius,
+        sweepFlag: sweepFlag
+    };
+}
+
+exports.computeSideLength = computeSideLength;
+exports.dotProduct = dotProduct;
+exports.radiusPoint = radiusPoint;
+exports.radiusStartEndPoint = radiusStartEndPoint;
+exports.vectorAngle = vectorAngle;
+exports.vectorLength = vectorLength;

package/lib/withRemoteConfig.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0-beta.0
+ * amis-ui v6.11.0-beta.2
  * Copyright 2018-2024 fex
  */
 

package/lib/withStore.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0-beta.0
+ * amis-ui v6.11.0-beta.2
  * Copyright 2018-2024 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.0",
+  "version": "6.11.0-beta.2",
   "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.0",
-    "amis-formula": "^6.11.0-beta.0",
+    "amis-core": "^6.11.0-beta.2",
+    "amis-formula": "^6.11.0-beta.2",
     "animate.css": "4.1.1",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",

package/scss/_mixins.scss

@@ -661,7 +661,8 @@
     line-height: calc(
       var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
     );
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     font-size: var(--Pick-base-value-fontSize);
     color: var(--Pick-base-value-color);
     font-weight: var(--Pick-base-value-fontWeight);
@@ -682,9 +683,6 @@
       var(--Pick-base-top-right-border-radius)
       var(--Pick-base-bottom-right-border-radius)
       var(--Pick-base-bottom-left-border-radius);
-    margin-right: var(--gap-xs);
-    margin-bottom: var(--gap-xs);
-    margin-top: var(--gap-xs);
     max-width: px2rem(150px);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -696,7 +694,10 @@
 
     &.is-disabled {
       pointer-events: none;
-      opacity: var(--Button-onDisabled-opacity);
+
+      .#{$ns}#{$component-prefix}-valueIcon {
+        opacity: var(--Button-onDisabled-opacity);
+      }
     }
   }
 
@@ -704,7 +705,7 @@
     color: var(--Pick-base-value-icon-color);
     cursor: pointer;
     border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
-    padding: 1px 5px;
+    padding: 0 5px;
 
     &:hover {
       background: var(--Pick-base-value-hover-icon-color);

package/scss/_properties.scss

@@ -179,6 +179,7 @@ $Table-strip-bg: transparent;
   --ButtonGroup-divider-width: #{px2rem(1px)};
   --ButtonGroup-divider-color: #fff;
   --ButtonGroup-borderWidth: var(--borders-width-2);
+  --Button-onDisabled-opacity: 0.3;
 
   --Breadcrumb-item-fontSize: var(--fontSizeMd);
   --Breadcrumb-item-default-color: var(--colors-neutral-text-5);

package/scss/base/_typography.scss

@@ -74,3 +74,6 @@ samp {
   width: 100%;
   height: 100%;
 }
+.amis-animation-placeholder {
+  opacity: 0;
+}

package/scss/components/_button.scss

@@ -2,6 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  text-align: center;
   vertical-align: middle;
   user-select: none;
   background: transparent;

package/scss/components/_crud.scss

@@ -9,6 +9,10 @@
 
   &-selection {
     margin-bottom: var(--gap-base);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-xs);
+    line-height: 1;
 
     &-overflow {
       &-wrapper {
@@ -25,6 +29,7 @@
           (var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5
         );
 
+        gap: var(--gap-xs);
         @include tag-item(Crud);
       }
     }

package/scss/components/_popoverable.scss

@@ -12,15 +12,15 @@
   }
 }
 
+.#{$ns}TableCell-ellipsis {
+  display: flex;
+  align-items: center;
+}
+
 .#{$ns}Field--popOverAble {
   outline: none;
   position: relative;
 
-  &--flex {
-    display: flex;
-    align-items: center;
-  }
-
   .#{$ns}Field-popOverWrap {
     &-ellipsis {
       width: 200px;

package/scss/components/_shape.scss

@@ -0,0 +1,18 @@
+/**
+ * @file _shape.scss
+ *
+ * @author allenve(yupeng12@baidu.com)
+ * @created: 2024/12/12
+ */
+
+.#{$ns}Shape {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 200px;
+  &-svg {
+    position: absolute;
+  }
+}

package/scss/components/form/_picker.scss

@@ -71,7 +71,8 @@
     font-size: var(--Pick-base-placeholder-fontSize);
     font-weight: var(--Pick-base-placeholder-fontWeight);
     user-select: none;
-    position: absolute;
+    flex: 1;
+    min-width: 0;
     // margin-top: 2 * var(--Form-input-borderWidth);
     line-height: var(--Form-input-lineHeight);
     padding: var(--Pick-base-paddingTop) var(--Pick-base-paddingRight)
@@ -95,13 +96,15 @@
       var(--Pick-base-left-border-color);
   }
 
-  .#{$ns}Picker-values {
-    display: inline;
+  // .#{$ns}Picker-values {
+  //   display: inline;
 
-    .#{$ns}Picker-valueLabel {
-      pointer-events: auto;
-    }
-  }
+  //   .#{$ns}OverflowTpl {
+  //     .#{$ns}Picker-valueLabel {
+  //       pointer-events: auto;
+  //     }
+  //   }
+  // }
 
   &-valueWrap {
     flex-grow: 1;
@@ -115,8 +118,9 @@
   }
 
   .#{$ns}Picker-valueWrap {
-    margin-bottom: calc(var(--gap-xs) * -1);
-    line-height: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-xs);
   }
 
   /* tag 样式 */
@@ -174,6 +178,7 @@
         (var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5
       );
 
+      gap: var(--gap-xs);
       @include tag-item(Picker);
     }
   }

package/scss/components/form/_user-select.scss

@@ -12,7 +12,7 @@
   &-selectPopup {
     width: 100vw;
     height: 100vh;
-    z-index: var($zindex-top) + 1;
+    z-index: calc(var($zindex-top) + 1);
   }
 
   &-searchBox {

package/scss/themes/_common.scss

@@ -81,6 +81,7 @@
 @import '../components/steps';
 @import '../components/portlet';
 @import '../components/grid-nav';
+@import '../components/shape';
 
 @import '../components/form/fieldset';
 @import '../components/form/group';