Merge pull request #4712 from qinhaoyan/fix/date-picker-style

styles：优化日期范围选择器和下拉框多选模式样式

packages/amis-ui/scss/components/form/_date-range.scss

@@ -10,7 +10,6 @@
   border-radius: var(--DatePicker-borderRadius);
   color: var(--DatePicker-color);
   background: var(--DatePicker-bg);
-  min-width: var(--DateRangePicker-minWidth);
   @include input-border();
 
   .#{$ns}DateRangePicker-clear {
@@ -46,6 +45,7 @@
     padding: 0;
     background: 0;
     flex: 1;
+    width: 50%;
   }
 
   .#{$ns}DateRangePicker-input.isActive {
@@ -116,7 +116,7 @@
   margin: 0;
   padding-left: px2rem(10px);
   list-style: none;
-  background: #F7F7F9;
+  background: #f7f7f9;
   line-height: px2rem(32px);
 }
 
@@ -146,16 +146,6 @@
   display: flex;
 }
 
-.#{$ns}DateRangeControl {
-  &.is-date > .#{$ns}DateRangePicker {
-    min-width: calc(var(--DateRangePicker-minWidth) + var(--fontSizeLg) * 10);
-  }
-
-  &.is-datetime > .#{$ns}DateRangePicker {
-    min-width: calc(var(--DateRangePicker-minWidth) + var(--fontSizeLg) * 10);
-  }
-}
-
 .#{$ns}DateRangePicker-popover {
   margin: px2rem(2px) 0 0;
 

packages/amis-ui/scss/components/form/_select.scss

@@ -288,6 +288,29 @@
           ) / 2
       )
       var(--Form-select-paddingX);
+    display: flex;
+
+    &-checkbox {
+      width: 100%;
+      display: flex;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      align-items: center;
+      > label {
+        width: 100%;
+        display: flex;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        align-items: center;
+        > span {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+    }
 
     &.is-active {
       color: var(--Form-select-menu-onActive-color);

packages/amis-ui/src/components/Select.tsx

@@ -1062,25 +1062,30 @@ export class Select extends React.Component<SelectProps, SelectState> {
               })
             )
           ) : multiple ? (
-            <Checkbox
-              checked={checked}
-              trueValue={item.value}
-              onChange={() => {
-                this.handleChange(item);
-              }}
-              disabled={item.disabled}
-              size="sm"
+            <div
+              title={item[labelField]}
+              className={cx('Select-option-checkbox')}
             >
-              {item.disabled
-                ? item[labelField]
-                : highlight(
-                    item[labelField],
-                    inputValue as string,
-                    cx('Select-option-hl')
-                  )}
+              <Checkbox
+                checked={checked}
+                trueValue={item.value}
+                onChange={() => {
+                  this.handleChange(item);
+                }}
+                disabled={item.disabled}
+                size="sm"
+              >
+                {item.disabled
+                  ? item[labelField]
+                  : highlight(
+                      item[labelField],
+                      inputValue as string,
+                      cx('Select-option-hl')
+                    )}
 
-              {item.tip}
-            </Checkbox>
+                {item.tip}
+              </Checkbox>
+            </div>
           ) : (
             <span
               className={cx('Select-option-content')}