fix: 移动端表单项错误提示、description 样式调整

packages/amis-core/src/renderers/Item.tsx

@@ -1110,7 +1110,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         static: isStatic,
         staticClassName
       } = props;
-
+      const mobileUI = useMobileUI && isMobile();
       description = description || desc;
 
       return (
@@ -1157,50 +1157,101 @@ export class FormItemWrap extends React.Component<FormItemProps> {
             </label>
           ) : null}
 
-          {renderControl()}
+          {mobileUI ? (
+            <div style={{flex: 1}}>
+              {renderControl()}
 
-          {caption
-            ? render('caption', caption, {
-                className: cx(`Form-caption`, captionClassName)
-              })
-            : null}
+              {caption
+                ? render('caption', caption, {
+                    className: cx(`Form-caption`, captionClassName)
+                  })
+                : null}
 
-          {remark
-            ? render('remark', {
-                type: 'remark',
-                icon: remark.icon || 'warning-mark',
-                className: cx(`Form-remark`),
-                tooltip: remark,
-                useMobileUI,
-                container:
-                  env && env.getModalContainer
-                    ? env.getModalContainer
-                    : undefined
-              })
-            : null}
+              {remark
+                ? render('remark', {
+                    type: 'remark',
+                    icon: remark.icon || 'warning-mark',
+                    className: cx(`Form-remark`),
+                    tooltip: remark,
+                    useMobileUI,
+                    container:
+                      env && env.getModalContainer
+                        ? env.getModalContainer
+                        : undefined
+                  })
+                : null}
 
-          {hint && model && model.isFocused
-            ? render('hint', hint, {
-                className: cx(`Form-hint`)
-              })
-            : null}
+              {hint && model && model.isFocused
+                ? render('hint', hint, {
+                    className: cx(`Form-hint`)
+                  })
+                : null}
 
-          {model &&
-          !model.valid &&
-          showErrorMsg !== false &&
-          Array.isArray(model.errors) ? (
-            <ul className={cx(`Form-feedback`)}>
-              {model.errors.map((msg: string, key: number) => (
-                <li key={key}>{msg}</li>
-              ))}
-            </ul>
-          ) : null}
+              {model &&
+              !model.valid &&
+              showErrorMsg !== false &&
+              Array.isArray(model.errors) ? (
+                <ul className={cx(`Form-feedback`)}>
+                  {model.errors.map((msg: string, key: number) => (
+                    <li key={key}>{msg}</li>
+                  ))}
+                </ul>
+              ) : null}
 
-          {renderDescription !== false && description
-            ? render('description', description, {
-                className: cx(`Form-description`, descriptionClassName)
-              })
-            : null}
+              {renderDescription !== false && description
+                ? render('description', description, {
+                    className: cx(`Form-description`, descriptionClassName)
+                  })
+                : null}
+            </div>
+          ) : (
+            <>
+              {renderControl()}
+
+              {caption
+                ? render('caption', caption, {
+                    className: cx(`Form-caption`, captionClassName)
+                  })
+                : null}
+
+              {remark
+                ? render('remark', {
+                    type: 'remark',
+                    icon: remark.icon || 'warning-mark',
+                    className: cx(`Form-remark`),
+                    tooltip: remark,
+                    useMobileUI,
+                    container:
+                      env && env.getModalContainer
+                        ? env.getModalContainer
+                        : undefined
+                  })
+                : null}
+
+              {hint && model && model.isFocused
+                ? render('hint', hint, {
+                    className: cx(`Form-hint`)
+                  })
+                : null}
+
+              {model &&
+              !model.valid &&
+              showErrorMsg !== false &&
+              Array.isArray(model.errors) ? (
+                <ul className={cx(`Form-feedback`)}>
+                  {model.errors.map((msg: string, key: number) => (
+                    <li key={key}>{msg}</li>
+                  ))}
+                </ul>
+              ) : null}
+
+              {renderDescription !== false && description
+                ? render('description', description, {
+                    className: cx(`Form-description`, descriptionClassName)
+                  })
+                : null}
+            </>
+          )}
         </div>
       );
     },

packages/amis-ui/scss/_components.scss

@@ -1695,7 +1695,7 @@
   --InputRange-handle-onFocus-borderRadius: var(
     --InputRange-handle-border-radius
   );
-  --InputRange-padding: #{px2rem(20px)};
+  --InputRange-padding: #{px2rem(16px)};
   --InputRange-handle-icon-width: var(--sizes-size-5);
   --InputRange-handle-icon-height: var(--sizes-size-5);
   --InputRange-handle-icon-color: var(--colors-brand-9);

packages/amis-ui/scss/_properties.scss

@@ -243,6 +243,7 @@ $Table-strip-bg: transparent;
   --ColorPicker-fontSize: var(--Form-input-fontSize);
   --ColorPicker-height: var(--Form-input-height);
   --ColorPicker-lineHeight: var(--Form-input-lineHeight);
+  --ColorPicker-height: var(--sizes-base-16);
   --ColorPicker-onDisabled-bg: var(--colors-neutral-fill-8);
   --ColorPicker-onDisabled-color: var(--text--muted-color);
   --ColorPicker-onFocused-borderColor: var(--Form-input-onFocused-borderColor);

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

@@ -9,6 +9,7 @@
   background: var(--ColorPicker-bg);
   color: var(--ColorPicker-color);
   border-radius: var(--borderRadius);
+  height: var(--ColorPicker-height);
 
   &:not(.is-disabled) {
     cursor: pointer;

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

@@ -627,8 +627,6 @@
       font-size: var(--fontSizeLg);
 
       .#{$ns}ColorPicker {
-        height: 100%;
-
         > input {
           height: 100%;
         }
@@ -663,8 +661,14 @@
       padding-bottom: 0;
     }
 
-    .#{$ns}CheckboxControl {
-      padding-top: px2rem(2px);
+    .#{$ns}SwitchControl,
+    .#{$ns}TransferControl,
+    .#{$ns}TagControl,
+    .#{$ns}CheckboxControl,
+    .#{$ns}TreeSelectControl,
+    .#{$ns}NestedSelectControl,
+    .#{$ns}TabsTransferControl {
+      padding-top: px2rem(3px);
     }
 
     .#{$ns}Form-static {

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

@@ -1,12 +1,12 @@
 .#{$ns}InputRange {
   display: flex;
   justify-content: space-between;
-  padding: var(--InputRange-padding) 0;
   width: 100%;
 
   &-wrap {
     position: relative;
     flex: auto;
+    padding: var(--InputRange-padding) 0;
   }
 
   &-input {
@@ -34,8 +34,6 @@
   }
 
   &.is-mobile {
-    padding: 0;
-
     .#{$ns}InputRange-input {
       width: var(--InputRange-input-mobile-width);
       // margin-left: 0;