移动端输入框样式优化 (#3268)

scss/components/_modal.scss

@@ -231,3 +231,21 @@
     }
   }
 }
+
+/* 移动端样式调整 */
+@include media-breakpoint-down(sm) {
+  .#{$ns}Modal {
+    .#{$ns}Modal-footer {
+      display: flex;
+
+      > .#{$ns}Button {
+        flex: 1;
+        height: px2rem(44px);
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}

scss/components/_panel.scss

@@ -182,3 +182,47 @@
     }
   }
 }
+
+/* 移动端样式调整 */
+@include media-breakpoint-down(sm) {
+  .#{$ns}Panel--form {
+    border: none;
+    box-shadow: none;
+
+    margin: 0 calc(var(--Panel-bodyPadding) * -1)
+      calc(var(--Panel-marginBottom) / 2);
+
+    .#{$ns}Panel-body {
+      padding-top: 0;
+    }
+
+    > .#{$ns}Panel-heading {
+      background: none;
+      border: none;
+      border-radius: 0;
+
+      .#{$ns}Panel-title {
+        padding-left: var(--Panel-bodyPadding);
+        border-left: px2rem(3px) solid var(--primary);
+      }
+    }
+
+    .#{$ns}Panel-footerWrap {
+      padding-bottom: var(--Panel-bodyPadding);
+    }
+
+    .#{$ns}Panel-footer {
+      border-top: none;
+      display: flex;
+      padding: 0 var(--Panel-bodyPadding);
+
+      > .#{$ns}Button {
+        flex: 1;
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}

scss/components/form/_form.scss

@@ -406,3 +406,125 @@
 .#{$ns}Form-column-10 > .#{$ns}Form-item {
   width: 10%;
 }
+
+/* 移动端样式调整 */
+@include media-breakpoint-down(sm) {
+  .#{$ns}Form {
+    .#{$ns}Form-item {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 0;
+      padding: var(--Form-item-gap) 0;
+      position: relative;
+
+      &::after {
+        position: absolute;
+        box-sizing: border-box;
+        content: ' ';
+        pointer-events: none;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+        transform: scaleY(0.5);
+      }
+
+      .#{$ns}InputGroup-addOn,
+      .#{$ns}TextControl-addOn {
+        border: none;
+      }
+
+      > .#{$ns}Form-label {
+        flex: 0 0 30%;
+        max-width: 30%;
+        min-height: 1px;
+        text-align: left;
+        padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
+        overflow-wrap: break-word;
+        margin-right: 0;
+        margin-bottom: 0;
+      }
+
+      .#{$ns}Form-value,
+      .#{$ns}Form-control {
+        flex: 1;
+        flex-wrap: wrap;
+
+        &.is-disabled > .#{$ns}TextControl-input {
+          background: transparent;
+        }
+      }
+
+      .#{$ns}Form-hint,
+      .#{$ns}Form-remark,
+      .#{$ns}Form-static,
+      .#{$ns}Form-group--hor .#{$ns}Form-item,
+      .#{$ns}SwitchControl,
+      .#{$ns}CheckboxControl,
+      .#{$ns}RadiosControl,
+      .#{$ns}CheckboxesControl {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      .#{$ns}Form-hint {
+        margin-left: 0;
+        color: var(--text--muted-color);
+      }
+
+      .#{$ns}Form-static {
+        min-height: 0;
+      }
+
+      .#{$ns}InputGroup {
+        .#{$ns}Select,
+        .#{$ns}InputGroup-btn .#{$ns}Button {
+          border: none;
+        }
+      }
+
+      .#{$ns}Form-group--hor .#{$ns}Form-item .#{$ns}Button {
+        margin-bottom: var(--gap-xs);
+      }
+
+      .#{$ns}TextareaControl > textarea,
+      .#{$ns}Form-control > .#{$ns}TextControl-input,
+      .#{$ns}TextControl.is-focused > .#{$ns}TextControl-input {
+        border: none;
+        padding: 0 var(--Form-input-paddingX) 0 0;
+        box-shadow: none;
+
+        &:hover,
+        &:focus,
+        &.active {
+          border: none;
+          outline: none;
+          outline-style: none;
+        }
+      }
+    }
+
+    .#{$ns}Form-groupColumn {
+      margin-bottom: 0;
+    }
+
+    .#{$ns}Divider {
+      display: none;
+    }
+
+    .#{$ns}Tabs-pane {
+      padding: 0;
+    }
+
+    > .#{$ns}Form-item {
+      &:last-child::after,
+      &:last-of-type::after {
+        display: none;
+      }
+    }
+
+    .#{$ns}Form-item .#{$ns}Form-groupColumn > .#{$ns}Form-item {
+      padding-bottom: var(--Form-input-paddingX);
+    }
+  }
+}

src/renderers/Form/Item.tsx

@@ -519,7 +519,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       // 强制不渲染 label 的话
@@ -575,6 +576,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                       type: 'remark',
                       icon: labelRemark.icon || 'warning-mark',
                       tooltip: labelRemark,
+                      useMobileUI,
                       className: cx(`Form-labelRemark`),
                       container: props.popOverContainer
                         ? props.popOverContainer
@@ -608,6 +610,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                   icon: remark.icon || 'warning-mark',
                   tooltip: remark,
                   className: cx(`Form-remark`),
+                  useMobileUI,
                   container: props.popOverContainer
                     ? props.popOverContainer
                     : env && env.getModalContainer
@@ -664,7 +667,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -700,6 +704,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                       icon: labelRemark.icon || 'warning-mark',
                       tooltip: labelRemark,
                       className: cx(`Form-lableRemark`),
+                      useMobileUI,
                       container: props.popOverContainer
                         ? props.popOverContainer
                         : env && env.getModalContainer
@@ -725,6 +730,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                 icon: remark.icon || 'warning-mark',
                 className: cx(`Form-remark`),
                 tooltip: remark,
+                useMobileUI,
                 container:
                   env && env.getModalContainer
                     ? env.getModalContainer
@@ -779,7 +785,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderLabel,
         renderDescription,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -815,6 +822,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                       icon: labelRemark.icon || 'warning-mark',
                       tooltip: labelRemark,
                       className: cx(`Form-lableRemark`),
+                      useMobileUI,
                       container: props.popOverContainer
                         ? props.popOverContainer
                         : env && env.getModalContainer
@@ -841,6 +849,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                   icon: remark.icon || 'warning-mark',
                   className: cx(`Form-remark`),
                   tooltip: remark,
+                  useMobileUI,
                   container: props.popOverContainer
                     ? props.popOverContainer
                     : env && env.getModalContainer
@@ -897,7 +906,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -932,6 +942,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                         icon: labelRemark.icon || 'warning-mark',
                         tooltip: labelRemark,
                         className: cx(`Form-lableRemark`),
+                        useMobileUI,
                         container: props.popOverContainer
                           ? props.popOverContainer
                           : env && env.getModalContainer

src/renderers/Remark.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {Api, SchemaNode, Schema, Action} from '../types';
 import cx from 'classnames';
-import TooltipWrapper from '../components/TooltipWrapper';
+import TooltipWrapper, {TooltipObject} from '../components/TooltipWrapper';
 import {filter} from '../utils/tpl';
-import {themeable} from '../theme';
+import {ClassNamesFn, themeable} from '../theme';
 import {hasIcon, Icon} from '../components/icons';
 import {BaseSchema, SchemaClassName, SchemaIcon, SchemaTpl} from '../Schema';
+import {autobind, isMobile} from '../utils/helper';
 
 /**
  * 提示渲染器，默认会显示个小图标，鼠标放上来的时候显示配置的内容。
@@ -91,6 +92,50 @@ class Remark extends React.Component<RemarkProps> {
     trigger: ['hover', 'focus'] as Array<'hover' | 'click' | 'focus'>
   };
 
+  @autobind
+  showModalTip(tooltip?: string | TooltipObject) {
+    let {onAction, data} = this.props;
+    return (e: React.MouseEvent) => {
+      onAction &&
+        onAction(
+          e,
+          {
+            actionType: 'dialog',
+            dialog: {
+              title:
+                tooltip && typeof tooltip !== 'string' ? tooltip.title : '',
+              body:
+                tooltip && typeof tooltip !== 'string'
+                  ? tooltip.content
+                  : tooltip
+            }
+          },
+          data
+        );
+    };
+  }
+
+  renderLabel(finalIcon: any, finalLabel: string, cx: ClassNamesFn) {
+    return (
+      <>
+        {finalLabel ? <span>{finalLabel}</span> : null}
+        {finalIcon ? (
+          hasIcon(finalIcon) ? (
+            <span className={cx('Remark-icon')}>
+              <Icon icon={finalIcon} />
+            </span>
+          ) : (
+            <i className={cx('Remark-icon', finalIcon)} />
+          )
+        ) : finalIcon === false && finalLabel ? null : (
+          <span className={cx('Remark-icon icon')}>
+            <Icon icon="question-mark" />
+          </span>
+        )}
+      </>
+    );
+  }
+
   render() {
     const {
       className,
@@ -106,17 +151,34 @@ class Remark extends React.Component<RemarkProps> {
       content,
       data,
       env,
-      tooltipClassName
+      tooltipClassName,
+      useMobileUI
     } = this.props;
 
     const finalIcon = tooltip?.icon ?? icon;
     const finalLabel = tooltip?.label ?? label;
+    const parsedTip = filterContents(tooltip || content, data);
+
+    // 移动端使用弹框提示
+    if (isMobile() && useMobileUI) {
+      return (
+        <div
+          className={cx(
+            `Remark`,
+            (tooltip && tooltip.className) || className || `Remark--warning`
+          )}
+          onClick={this.showModalTip(parsedTip)}
+        >
+          {this.renderLabel(finalIcon, finalLabel, cx)}
+        </div>
+      );
+    }
 
     return (
       <TooltipWrapper
         classPrefix={ns}
         classnames={cx}
-        tooltip={filterContents(tooltip || content, data)}
+        tooltip={parsedTip}
         tooltipClassName={
           (tooltip && tooltip.tooltipClassName) || tooltipClassName
         }
@@ -132,20 +194,7 @@ class Remark extends React.Component<RemarkProps> {
             (tooltip && tooltip.className) || className || `Remark--warning`
           )}
         >
-          {finalLabel ? <span>{finalLabel}</span> : null}
+          {this.renderLabel(finalIcon, finalLabel, cx)}
-          {finalIcon ? (
-            hasIcon(finalIcon) ? (
-              <span className={cx('Remark-icon')}>
-                <Icon icon={finalIcon} />
-              </span>
-            ) : (
-              <i className={cx('Remark-icon', finalIcon)} />
-            )
-          ) : finalIcon === false && finalLabel ? null : (
-            <span className={cx('Remark-icon icon')}>
-              <Icon icon="question-mark" />
-            </span>
-          )}
         </div>
       </TooltipWrapper>
     );