feat: 表单项水平对齐方式调整

2024-11-30 10:59:42 +08:00 · 2023-05-29 15:26:11 +08:00 · 2023-05-29 15:26:11 +08:00 · 215e11f70d
commit 215e11f70d
parent a4c2bb8255
49 changed files with 326 additions and 120 deletions
--- a/packages/amis-ui/scss/_components.scss
+++ b/packages/amis-ui/scss/_components.scss
@ -1631,6 +1631,7 @@

  // 表单
  --Form-item-gap: var(--sizes-base-12);
+  --Form-item-mobile-gap: var(--sizes-base-4);
  --Form-item-color: var(--colors-neutral-text-4);
  --Form-item-fontColor: var(--Form-item-color);
  --Form-item-fontSize: var(--fonts-size-7);
--- a/packages/amis-ui/scss/components/_calendar.scss
+++ b/packages/amis-ui/scss/components/_calendar.scss
@ -211,6 +211,7 @@
    overflow-y: scroll;

    table {
+      padding: 0;
      border-spacing: 0 px2rem(4px);
    }

@ -245,8 +246,8 @@
    }

    .calendar-wrap {
-      position: relative;
      width: px2rem(50px);
+      position: relative;
      height: 100%;
      text-align: center;
      display: inline-flex;
@ -264,6 +265,12 @@
    }
  }

+  &-embed {
+    .#{$ns}CalendarMobile-footer {
+      width: 90vw;
+    }
+  }
+
  &-footer {
    flex-shrink: 0;

--- a/packages/amis-ui/scss/components/_column-toggler.scss
+++ b/packages/amis-ui/scss/components/_column-toggler.scss
@ -67,11 +67,6 @@
    text-decoration: var(--link-decoration);
    background: var(--table-togglable-bg-color);

-    &:hover {
-      background: var(--table-togglable-hover-bg-color);
-      color: var(--DropDown-menuItem-onHover-color);
-    }
-
    &.is-active {
      color: var(--DropDown-menuItem-onActive-color);
    }
@ -97,6 +92,13 @@
    }
  }

+  &-menu:not(.is-mobile) > li {
+    &:hover {
+      background: var(--table-togglable-hover-bg-color);
+      color: var(--DropDown-menuItem-onHover-color);
+    }
+  }
+
  &-menu > li a {
    color: inherit;
    display: block;
--- a/packages/amis-ui/scss/components/_condition-builder.scss
+++ b/packages/amis-ui/scss/components/_condition-builder.scss
@ -1,3 +1,6 @@
+.#{$ns}ConditionBuilderControl.is-mobile {
+  overflow-x: auto;
+}
 .#{$ns}CBGroup {
  font-size: var(--fontSizeSm);
  position: relative;
@ -331,9 +334,31 @@
    opacity: 0;
  }

-  &:hover > &-body > &-body-item > &-dragbar,
-  &:hover > &-body > &-body-item > .#{$ns}CBDelete {
-    opacity: 1;
+  &:is(.is-mobile) {
+    > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-group
+      > .#{$ns}CBGroupOrItem-dragbar,
+    > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBGroupOrItem-dragbar,
+    > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBDelete {
+      opacity: 1;
+    }
+  }
+
+  &:not(.is-mobile) {
+    &:hover
+      > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBGroupOrItem-dragbar,
+    &:hover
+      > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBDelete {
+      opacity: 1;
+    }
  }

  &-simple {
--- a/packages/amis-ui/scss/components/_crud.scss
+++ b/packages/amis-ui/scss/components/_crud.scss
@ -30,21 +30,21 @@
    font-weight: var(--Pick-base-value-fontWeight);
    background: var(--Pick-base-value-bgColor);
    border-width: var(--Pick-base-value-top-border-width)
-        var(--Pick-base-value-right-border-width)
-        var(--Pick-base-value-bottom-border-width)
-        var(--Pick-base-value-left-border-width);
+      var(--Pick-base-value-right-border-width)
+      var(--Pick-base-value-bottom-border-width)
+      var(--Pick-base-value-left-border-width);
    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);
+      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);
+      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);
+      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-top: var(--gap-xs);

@ -90,6 +90,10 @@
    display: inline-flex;
    align-items: center;

+    &.is-mobile {
+      margin-top: 0;
+    }
+
    &--left:not(:first-child) {
      margin-left: var(--Crud-toolbar-gap);
    }
@ -137,6 +141,12 @@
  &-filter {
    margin-bottom: var(--gap-base);
  }
+
+  &.is-mobile {
+    .#{$ns}Crud-toolbar {
+      flex: 1;
+    }
+  }
 }

@include media-breakpoint-up(sm) {
--- a/packages/amis-ui/scss/components/_dropdown.scss
+++ b/packages/amis-ui/scss/components/_dropdown.scss
@ -75,11 +75,6 @@
    color: var(--DropDown-menuItem-color);
    text-decoration: var(--link-decoration);

-    &:hover {
-      background: var(--DropDown-menuItem-onHover-bg);
-      color: var(--DropDown-menuItem-onHover-color);
-    }
-
    &.is-active {
      background: var(--DropDown-menuItem-onHover-bg);
      color: var(--DropDown-menuItem-onActive-color);
@ -128,6 +123,14 @@
    }
  }

+  &-menuItem,
+  &-menu:not(.is-mobile) > li {
+    &:hover {
+      background: var(--DropDown-menuItem-onHover-bg);
+      color: var(--DropDown-menuItem-onHover-color);
+    }
+  }
+
  &-menu > li a {
    color: inherit;
    display: block;
--- a/packages/amis-ui/scss/components/_json-schema.scss
+++ b/packages/amis-ui/scss/components/_json-schema.scss
@ -32,6 +32,17 @@
        border-bottom: var(--Form-input-borderWidth) solid
          var(--Form-input-borderColor);
      }
+
+      .#{$ns}InputBox {
+        height: 100%;
+        line-height: 1;
+
+        > .#{$ns}InputBox-caret {
+          svg {
+            top: 0.125em;
+          }
+        }
+      }
    }
  }

--- a/packages/amis-ui/scss/components/_list-menu.scss
+++ b/packages/amis-ui/scss/components/_list-menu.scss
@ -94,14 +94,18 @@
 .#{$ns}ListMenu-add-wrap {
  display: flex;
  align-items: center;
-  justify-content: space-around;
-  margin: px2rem(20px) 0;
-  text-align: center;
+  margin: var(--ListMenu-item-mobile-margin);
+  text-align: left;
+
+  .#{$ns}ResultBox {
+    width: 100%;
+  }

  input {
-    &::-webkit-input-placeholder {
-      text-align: center;
-    }
+    width: 100%;
+    padding: var(--Form-item-mobile-gap) 0;
+    border-bottom: 1px solid var(--borderColor);
+    border-radius: 0;
  }
 }

--- a/packages/amis-ui/scss/components/_popup.scss
+++ b/packages/amis-ui/scss/components/_popup.scss
@ -130,6 +130,10 @@
    height: 100%;
    display: flex;
    flex: 1;
+
+    > div {
+      flex: 1;
+    }
  }

  & > * {
--- a/packages/amis-ui/scss/components/_table.scss
+++ b/packages/amis-ui/scss/components/_table.scss
@ -207,6 +207,14 @@
    }
  }

+  &.is-mobile {
+    .#{$ns}Table-toolbar {
+      .#{$ns}Form-item {
+        padding: 0;
+      }
+    }
+  }
+
  &-header + &-toolbar {
    padding-top: 0;
  }
--- a/packages/amis-ui/scss/components/form/_checks.scss
+++ b/packages/amis-ui/scss/components/form/_checks.scss
@ -64,6 +64,14 @@
    }
  }

+  &.is-mobile {
+    > i {
+      + span {
+        vertical-align: middle;
+      }
+    }
+  }
+
  &:hover > i + span > a {
    display: inline-block;
  }
--- a/packages/amis-ui/scss/components/form/_color.scss
+++ b/packages/amis-ui/scss/components/form/_color.scss
@ -10,10 +10,6 @@
  color: var(--ColorPicker-color);
  border-radius: var(--borderRadius);

-  &-popup {
-    height: px2rem(460px);
-  }
-
  &:not(.is-disabled) {
    cursor: pointer;

@ -124,6 +120,8 @@
 }

 .#{$ns}ColorPicker-popup {
+  height: px2rem(500px);
+
  .sketch-picker {
    width: 80% !important;
    box-shadow: none !important;
--- a/packages/amis-ui/scss/components/form/_date-range.scss
+++ b/packages/amis-ui/scss/components/form/_date-range.scss
@ -19,7 +19,7 @@
    display: none;
  }

-  &:not(.is-disabled) {
+  &:not(.is-disabled):not(.is-mobile) {
    &:hover {
      background: var(--DatePicker-onHover-bg);
      border-color: var(--DatePicker-onHover-borderColor);
@ -81,6 +81,7 @@
    font-size: var(--DatePicker-fontSize);
    font-weight: var(--inputDate-default-fontWeight);
    color: var(--inputDate-default-color);
+    text-align: center;

    &::placeholder {
      color: var(--colors-neutral-text-6);
@ -226,6 +227,7 @@
  list-style: none;
  background: #f7f7f9;
  line-height: px2rem(32px);
+  overflow-x: auto;
 }

 .#{$ns}DateRangePicker-ranger {
@ -324,8 +326,4 @@
    flex-grow: unset;
    flex-basis: unset;
  }
-
-  .#{$ns}DateRangePicker-toggler {
-    margin-top: -3px;
-  }
 }
--- a/packages/amis-ui/scss/components/form/_date.scss
+++ b/packages/amis-ui/scss/components/form/_date.scss
@ -42,7 +42,7 @@

  @include input-border();

-  &:not(.is-disabled) {
+  &:not(.is-disabled):not(.is-mobile) {
    cursor: pointer;

    &:hover {
@ -239,10 +239,6 @@
    flex-grow: unset;
    flex-basis: unset;
  }
-
-  .#{$ns}DatePicker-toggler {
-    margin-top: -3px;
-  }
 }

 .#{$ns}DatePicker-popup.#{$ns}DatePicker-mobile {
--- a/packages/amis-ui/scss/components/form/_editor.scss
+++ b/packages/amis-ui/scss/components/form/_editor.scss
@ -109,6 +109,10 @@
      min-height: 500px;
    }
  }
+
+  .monaco-editor .iPadShowKeyboard {
+    display: none;
+  }
 }

 .monaco-inputbox > .wrapper {
--- a/packages/amis-ui/scss/components/form/_form.scss
+++ b/packages/amis-ui/scss/components/form/_form.scss
@ -511,7 +511,7 @@
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
-    padding: var(--Form-item-gap) 0;
+    padding: var(--Form-item-mobile-gap) 0;
    position: relative;

    &::after {
@ -540,6 +540,11 @@
      margin-right: 0;
      margin-bottom: 0;
      font-size: var(--fontSizeLg);
+
+      > span {
+        line-height: px2rem(32px);
+        display: inline-block;
+      }
    }

    .#{$ns}Form-description {
@ -618,7 +623,23 @@
      flex: 1;
      flex-wrap: wrap;
      font-size: var(--fontSizeLg);
-      overflow-x: auto;
+
+      .#{$ns}ColorPicker {
+        height: 100%;
+
+        > input {
+          height: 100%;
+        }
+      }
+
+      .#{$ns}ResultBox {
+        height: 100%;
+
+        .#{$ns}ResultBox-value-wrap {
+          justify-content: flex-end;
+          text-align: right;
+        }
+      }

      &.is-disabled > .#{$ns}TextControl-input {
        background: transparent;
--- a/packages/amis-ui/scss/components/form/_location.scss
+++ b/packages/amis-ui/scss/components/form/_location.scss
@ -106,6 +106,11 @@
    border: none;
    box-shadow: var(--boxShadow);
  }
+
+  &.is-mobile {
+    flex: 1;
+    text-align: right;
+  }
 }

 .#{$ns}LocationControl:not(.is-inline) > .#{$ns}LocationPicker {
--- a/packages/amis-ui/scss/components/form/_nested-select.scss
+++ b/packages/amis-ui/scss/components/form/_nested-select.scss
@ -11,6 +11,11 @@
 .#{$ns}NestedSelect {
  position: relative;
  @include input-border();
+
+  &.is-mobile {
+    text-align: right;
+  }
+
  &-optionArrowRight {
    display: inline-block;
    padding-right: var(--Form-select-icon-rigin);
--- a/packages/amis-ui/scss/components/form/_range.scss
+++ b/packages/amis-ui/scss/components/form/_range.scss
@ -302,6 +302,13 @@
    }
  }

+  &.is-mobile {
+    .#{$ns}InputRange-label {
+      display: block;
+      white-space: nowrap;
+    }
+  }
+
  // marks
  &-marks {
    position: relative;
--- a/packages/amis-ui/scss/components/form/_select.scss
+++ b/packages/amis-ui/scss/components/form/_select.scss
@ -269,7 +269,7 @@
  }

  &.is-mobile {
-    min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
+    min-height: var(--Form-select-height);
    border: none;
    padding: 0;
    font-size: var(--fontSizeLg);
--- a/packages/amis-ui/scss/components/form/_transfer.scss
+++ b/packages/amis-ui/scss/components/form/_transfer.scss
@ -189,7 +189,7 @@
      var(--transfer-search-paddingRight) var(--transfer-search-paddingBottom)
      var(--transfer-search-paddingLeft);
    width: 100%;
-    .#{$ns}InputBox {
+    .#{$ns}InputBox:not(.is-mobile) {
      font-size: var(--transfer-search-fontSize);
      font-weight: var(--transfer-search-fontWeight);
      line-height: var(--transfer-search-lineHeight);
@ -254,6 +254,10 @@
    display: flex;
    flex-direction: column;
    justify-content: center;
+
+    &.is-mobile {
+      display: none;
+    }
  }

  &-arrow {
@ -568,6 +572,10 @@
  &.is-mobile {
    width: 100%;
    min-width: auto;
+
+    .#{$ns}Table-table > thead > tr > th:first-child.#{$ns}Table-checkCell {
+      padding-left: var(--select-table-option-paddingLeft);
+    }
  }

  & > .#{$ns}Transfer-selection {
--- a/packages/amis-ui/src/components/BaiduMapPicker.tsx
+++ b/packages/amis-ui/src/components/BaiduMapPicker.tsx
@ -101,7 +101,7 @@ export class BaiduMapPicker extends React.Component<

  componentWillUnmount() {
    this.ac?.dispose?.();
-    document.body.removeChild(this.placeholderInput!);
+    this.placeholderInput && document.body.removeChild(this.placeholderInput!);

    delete this.placeholderInput;
    delete this.map;
--- a/packages/amis-ui/src/components/Checkbox.tsx
+++ b/packages/amis-ui/src/components/Checkbox.tsx
@ -5,7 +5,7 @@

 import React from 'react';
 import {ClassNamesFn, themeable} from 'amis-core';
-import {autobind} from 'amis-core';
+import {autobind, isMobile} from 'amis-core';

 const preventEvent = (e: any) => e.stopPropagation();

@ -30,6 +30,7 @@ interface CheckboxProps {
  partial?: boolean;
  optionType?: 'default' | 'button';
  children?: React.ReactNode | Array<React.ReactNode>;
+  useMobileUI?: boolean;
 }

 export class Checkbox extends React.Component<CheckboxProps, any> {
@ -93,7 +94,8 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
          'Checkbox--button--disabled--unchecked':
            optionType === 'button' && disabled && !_checked,
          'Checkbox--button--disabled--checked':
-            optionType === 'button' && disabled && _checked
+            optionType === 'button' && disabled && _checked,
+          'is-mobile': isMobile()
        })}
        data-role="checkbox"
      >
--- a/packages/amis-ui/src/components/Collapse.tsx
+++ b/packages/amis-ui/src/components/Collapse.tsx
@ -56,6 +56,7 @@ export interface CollapseProps {
  partial?: boolean;
  children?: React.ReactNode | Array<React.ReactNode>;
  useMobileUI?: boolean;
+  divideLine?: boolean;
 }

 export interface CollapseState {
--- a/packages/amis-ui/src/components/DateRangePicker.tsx
+++ b/packages/amis-ui/src/components/DateRangePicker.tsx
@ -1788,8 +1788,7 @@ export class DateRangePicker extends React.Component<
                `${ns}CalendarMobile-pop--${viewMode}`
              )}
              onHide={this.close}
-              showClose={false}
-              // header={CalendarMobileTitle}
+              header={CalendarMobileTitle}
            >
              {useCalendarMobile ? calendarMobile : this.renderCalendar()}
            </PopUp>
--- a/packages/amis-ui/src/components/Pagination.tsx
+++ b/packages/amis-ui/src/components/Pagination.tsx
@ -5,7 +5,7 @@
 */
 import React from 'react';
 import isInteger from 'lodash/isInteger';
-import {localeable, LocaleProps} from 'amis-core';
+import {isMobile, localeable, LocaleProps} from 'amis-core';
 import {themeable, ThemeProps} from 'amis-core';
 import {autobind} from 'amis-core';
 import {Icon} from './icons';
@ -94,6 +94,8 @@ export interface BasicPaginationProps {
  popOverContainerSelector?: string;

  onPageChange?: (page: number, perPage?: number) => void;
+
+  useMobileUI?: boolean;
 }
 export interface PaginationProps
  extends BasicPaginationProps,
@ -255,7 +257,6 @@ export class Pagination extends React.Component<
  render() {
    const {
      layout,
-      maxButtons,
      mode,
      activePage,
      total,
@ -269,10 +270,13 @@ export class Pagination extends React.Component<
      hasNext,
      popOverContainer,
      popOverContainerSelector,
+      useMobileUI,
      translate: __
    } = this.props;
+    let maxButtons = this.props.maxButtons;
    const {pageNum, perPage} = this.state;
    const lastPage = this.getLastPage();
+    const mobileUI = useMobileUI && isMobile();

    // 简易模式
    if (mode === 'simple') {
@ -439,11 +443,23 @@ export class Pagination extends React.Component<
      </li>
    );

+    if (mobileUI) {
+      pageButtons = [
+        pageButtons[0],
+        this.renderPageItem(activePage),
+        pageButtons[pageButtons.length - 1]
+      ];
+    }
+
+    console.log('pageButtons-----', pageButtons, activePage);
+
    const go = (
      <div className={cx('Pagination-inputGroup Pagination-item')} key="go">
-        <span className={cx('Pagination-inputGroup-left')} key="go-left">
-          {__('Pagination.goto')}
-        </span>
+        {!mobileUI ? (
+          <span className={cx('Pagination-inputGroup-left')} key="go-left">
+            {__('Pagination.goto')}
+          </span>
+        ) : null}
        <input
          className={cx('Pagination-inputGroup-input')}
          key="go-input"
--- a/packages/amis-ui/src/components/PopOverContainer.tsx
+++ b/packages/amis-ui/src/components/PopOverContainer.tsx
@ -165,7 +165,7 @@ export class PopOverContainer extends React.Component<
        {mobileUI ? (
          <PopUp
            isShow={this.state.isOpened}
-            container={popOverContainer}
+            container={document.body}
            className={popOverClassName}
            showConfirm={showConfirm}
            onHide={this.close}
--- a/packages/amis-ui/src/components/Range.tsx
+++ b/packages/amis-ui/src/components/Range.tsx
@ -188,10 +188,6 @@ class HandleItem extends React.Component<HandleItemProps, HandleItemState> {

  @autobind
  onTouchEnd() {
-    const {isDrag} = this.state;
-    if (isDrag) {
-      return;
-    }
    this.setState({
      labelActive: false
    });
@ -503,7 +499,8 @@ export class Range extends React.Component<RangeItemProps, any> {
   */
  @autobind
  getMarkMaxWidth(value: keyof MarksType, marks: MarksType) {
-    const {max, min} = this.props;
+    const {max, min, useMobileUI} = this.props;
+    const mobileUI = useMobileUI && isMobile();
    const curNum = isString(value) ? parseInt(value, 10) : value;
    // 给最大宽度赋初始值 默认最大
    let maxWidth = Math.abs(max - min);
@ -515,7 +512,9 @@ export class Range extends React.Component<RangeItemProps, any> {
      }
    });
    // 差值的1/2 即为此刻度标记的最大宽度
-    return Math.floor(maxWidth / 2) + '%';
+    return mobileUI
+      ? Math.floor(maxWidth) + '%'
+      : Math.floor(maxWidth / 2) + '%';
  }

  render() {
--- a/packages/amis-ui/src/components/ResultBox.tsx
+++ b/packages/amis-ui/src/components/ResultBox.tsx
@ -254,8 +254,6 @@ export class ResultBox extends React.Component<ResultBoxProps> {
    const isFocused = this.state.isFocused;
    const mobileUI = useMobileUI && isMobile();

-    console.log('onResultClick-----', onResultClick);
-
    return (
      <div
        className={cx('ResultBox', className, {
--- a/packages/amis-ui/src/components/Transfer.tsx
+++ b/packages/amis-ui/src/components/Transfer.tsx
@ -450,6 +450,7 @@ export class Transfer<
              clearable={false}
              onKeyDown={this.handleSearchKeyDown}
              placeholder={searchPlaceholder}
+              useMobileUI
            >
              {this.state.searchResult !== null ? (
                <a onClick={this.handleSeachCancel}>
@ -848,7 +849,7 @@ export class Transfer<
        <div className={cx('Transfer-select')}>
          {this.renderSelect(this.props)}
        </div>
-        <div className={cx('Transfer-mid')}>
+        <div className={cx('Transfer-mid', {'is-mobile': mobileUI})}>
          {showArrow /*todo 需要改成确认模式，即：点了按钮才到右边 */ ? (
            <div className={cx('Transfer-arrow')}>
              <Icon icon="right-arrow" className="icon" />
--- a/packages/amis-ui/src/components/TransferDropDown.tsx
+++ b/packages/amis-ui/src/components/TransferDropDown.tsx
@ -71,7 +71,7 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
  @autobind
  onConfirm() {
    const {onChange} = this.props;
-    onChange?.(this.state.tempValue as typeof Option[]);
+    onChange?.(this.state.tempValue as (typeof Option)[]);
  }

  render() {
@ -124,6 +124,7 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
                  placeholder={placeholder ?? __('Transfer.searchKeyword')}
                  clearable={false}
                  onKeyDown={this.handleSearchKeyDown}
+                  useMobileUI
                >
                  {searchResult !== null ? (
                    <a onClick={this.handleSeachCancel}>
--- a/packages/amis-ui/src/components/TransferSearch.tsx
+++ b/packages/amis-ui/src/components/TransferSearch.tsx
@ -31,7 +31,6 @@ export class TransferSearch extends React.Component<
  TransferSearchProps,
  TransferSearchState
 > {
-
  state: TransferSearchState = {
    inputValue: ''
  };
@ -86,11 +85,7 @@ export class TransferSearch extends React.Component<
  }

  render() {
-    const {
-      classnames: cx,
-      translate: __,
-      placeholder
-    } = this.props;
+    const {classnames: cx, translate: __, placeholder} = this.props;

    const {inputValue} = this.state;

@ -102,6 +97,7 @@ export class TransferSearch extends React.Component<
          clearable={false}
          onKeyDown={this.handleSearchKeyDown}
          placeholder={placeholder}
+          useMobileUI
        >
          {!!inputValue ? (
            <a onClick={this.handleSeachCancel}>
--- a/packages/amis-ui/src/components/UserSelect.tsx
+++ b/packages/amis-ui/src/components/UserSelect.tsx
@ -813,6 +813,7 @@ export class UserSelect extends React.Component<
              onChange={this.handleSearch}
              placeholder={searchPlaceholder}
              clearable={false}
+              useMobileUI
            >
              {this.state.isSearch ? (
                <a onClick={this.handleSeachCancel}>
--- a/packages/amis-ui/src/components/condition-builder/Field.tsx
+++ b/packages/amis-ui/src/components/condition-builder/Field.tsx
@ -11,7 +11,8 @@ import {
  localeable,
  LocaleProps,
  findTree,
-  noop
+  noop,
+  isMobile
 } from 'amis-core';
 import {Icon} from '../icons';
 import SearchBox from '../SearchBox';
@ -109,9 +110,10 @@ export class ConditionField extends React.Component<

    return (
      <PopOverContainer
+        useMobileUI
        popOverContainer={popOverContainer || (() => findDOMNode(this))}
        popOverRender={({onClose}) => (
-          <>
+          <div>
            {searchable ? (
              <SearchBox mini={false} onSearch={this.onSearch} />
            ) : null}
@ -139,7 +141,7 @@ export class ConditionField extends React.Component<
                }
              />
            )}
-          </>
+          </div>
        )}
      >
        {({onClick, ref, isOpened}) => (
@ -159,10 +161,13 @@ export class ConditionField extends React.Component<
              onResultClick={onClick}
              placeholder={__('Condition.field_placeholder')}
              disabled={disabled}
+              useMobileUI
            >
-              <span className={cx('CBGroup-fieldCaret')}>
-                <Icon icon="caret" className="icon" />
-              </span>
+              {!isMobile() ? (
+                <span className={cx('CBGroup-fieldCaret')}>
+                  <Icon icon="caret" className="icon" />
+                </span>
+              ) : null}
            </ResultBox>
          </div>
        )}
--- a/packages/amis-ui/src/components/condition-builder/Formula.tsx
+++ b/packages/amis-ui/src/components/condition-builder/Formula.tsx
@ -30,6 +30,7 @@ export class Formula extends React.Component<FormulaProps> {
              {__('Condition.expression')}
            </span>
          }
+          useMobileUI
        />
      </div>
    );
--- a/packages/amis-ui/src/components/condition-builder/GroupOrItem.tsx
+++ b/packages/amis-ui/src/components/condition-builder/GroupOrItem.tsx
@ -1,6 +1,6 @@
 import {ConditionBuilderConfig} from './config';
 import {ConditionBuilderFields, ConditionBuilderFuncs} from './types';
-import {ThemeProps, themeable, autobind} from 'amis-core';
+import {ThemeProps, themeable, autobind, isMobile} from 'amis-core';
 import React from 'react';
 import {Icon} from '../icons';
 import ConditionGroup from './Group';
@ -48,6 +48,9 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {

  @autobind
  handlerHoverIn(e: any) {
+    if (isMobile()) {
+      return;
+    }
    e.stopPropagation();
    this.setState({
      hover: true
@ -85,7 +88,8 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
    return (
      <div
        className={cx(
-          `CBGroupOrItem${builderMode === 'simple' ? '-simple' : ''}`
+          `CBGroupOrItem${builderMode === 'simple' ? '-simple' : ''}`,
+          {'is-mobile': isMobile()}
        )}
        data-id={value?.id}
      >
@ -93,7 +97,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
          {value?.conjunction ? (
            <div
              className={cx('CBGroupOrItem-body-group', {
-                'is-hover': this.state.hover
+                'is-hover': this.state.hover || isMobile()
              })}
              onMouseOver={this.handlerHoverIn}
              onMouseOut={this.handlerHoverOut}
--- a/packages/amis-ui/src/components/condition-builder/Item.tsx
+++ b/packages/amis-ui/src/components/condition-builder/Item.tsx
@ -16,7 +16,8 @@ import {
  LocaleProps,
  findTree,
  noop,
-  getVariable
+  getVariable,
+  isMobile
 } from 'amis-core';
 import {Icon} from '../icons';

@ -213,6 +214,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
      });
      return (
        <PopOverContainer
+          useMobileUI
          popOverContainer={popOverContainer || (() => findDOMNode(this))}
          popOverRender={({onClose}) => (
            <GroupedSelection
@ -242,10 +244,13 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
                onResultClick={onClick}
                disabled={disabled}
                placeholder={__('Condition.cond_placeholder')}
+                useMobileUI
              >
-                <span className={cx('CBGroup-operatorCaret')}>
-                  <Icon icon="caret" className="icon" />
-                </span>
+                {!isMobile() ? (
+                  <span className={cx('CBGroup-operatorCaret')}>
+                    <Icon icon="caret" className="icon" />
+                  </span>
+                ) : null}
              </ResultBox>
            </div>
          )}
--- a/packages/amis-ui/src/components/condition-builder/Value.tsx
+++ b/packages/amis-ui/src/components/condition-builder/Value.tsx
@ -55,6 +55,7 @@ export class Value extends React.Component<ValueProps> {
          onChange={onChange}
          placeholder={__(field.placeholder)}
          disabled={disabled}
+          useMobileUI
        />
      );
    } else if (field.type === 'number') {
@ -68,6 +69,7 @@ export class Value extends React.Component<ValueProps> {
          value={value ?? field.defaultValue}
          onChange={onChange}
          disabled={disabled}
+          useMobileUI
        />
      );
    } else if (field.type === 'date') {
@ -81,6 +83,7 @@ export class Value extends React.Component<ValueProps> {
          timeFormat=""
          disabled={disabled}
          popOverContainer={popOverContainer}
+          useMobileUI
        />
      );
    } else if (field.type === 'time') {
@ -96,6 +99,7 @@ export class Value extends React.Component<ValueProps> {
          timeFormat={field.format || 'HH:mm'}
          disabled={disabled}
          popOverContainer={popOverContainer}
+          useMobileUI
        />
      );
    } else if (field.type === 'datetime') {
@ -109,6 +113,7 @@ export class Value extends React.Component<ValueProps> {
          timeFormat={field.timeFormat || 'HH:mm'}
          disabled={disabled}
          popOverContainer={popOverContainer}
+          useMobileUI
        />
      );
    } else if (field.type === 'select') {
@ -128,6 +133,7 @@ export class Value extends React.Component<ValueProps> {
          multiple={op === 'select_any_in' || op === 'select_not_any_in'}
          disabled={disabled}
          popOverContainer={popOverContainer}
+          useMobileUI
        />
      );
    } else if (field.type === 'boolean') {
--- a/packages/amis-ui/src/components/condition-builder/index.tsx
+++ b/packages/amis-ui/src/components/condition-builder/index.tsx
@ -355,6 +355,7 @@ export class QueryBuilder extends React.Component<
                </span>
              )
            }
+            useMobileUI
            onResultClick={onClick}
          ></ResultBox>
        )}
--- a/packages/amis-ui/src/locale/zh-CN.ts
+++ b/packages/amis-ui/src/locale/zh-CN.ts
@ -44,7 +44,7 @@ register('zh-CN', {
  'CRUD.loadMore': '加载更多',
  'CRUD.loadMoreDisableTip': '无数据或最后一页',
  'CRUD.perPage': '每页显示',
-  'CRUD.stat': '{{page}}/{{lastPage}} 总共：{{total}} 项',
+  'CRUD.stat': '{{page}}/{{lastPage}} 共：{{total}} 项',
  'CRUD.paginationGoText': '前往',
  'CRUD.paginationPageText': '页',
  'PaginationWrapper.placeholder': '请配置内容',
--- a/packages/amis/src/renderers/CRUD.tsx
+++ b/packages/amis/src/renderers/CRUD.tsx
@ -47,7 +47,12 @@ import {ListSchema} from './List';
 import {TableSchema} from './Table';
 import type {TableRendererEvent} from './Table';
 import type {CardsRendererEvent} from './Cards';
-import {isPureVariable, resolveVariableAndFilter, parseQuery} from 'amis-core';
+import {
+  isPureVariable,
+  resolveVariableAndFilter,
+  parseQuery,
+  isMobile
+} from 'amis-core';

 import type {PaginationProps} from './Pagination';
 import {isAlive} from 'mobx-state-tree';
@ -1925,12 +1930,14 @@ export default class CRUD extends React.Component<CRUDProps, any> {

  renderSwitchPerPage(childProps: any) {
    const {
+      useMobileUI,
      store,
      perPageAvailable,
      classnames: cx,
      classPrefix: ns,
      translate: __
    } = this.props;
+    const mobileUI = useMobileUI && isMobile();

    const items = childProps.items;

@ -1938,16 +1945,19 @@ export default class CRUD extends React.Component<CRUDProps, any> {
      return null;
    }

-    const perPages = (perPageAvailable || [5, 10, 20, 50, 100]).map(
-      (item: any) => ({
-        label: item,
-        value: item + ''
-      })
-    );
+    const perPages = mobileUI
+      ? (perPageAvailable || [5, 10, 20, 50, 100]).map((item: any) => ({
+          label: item + ' 条/页',
+          value: item + ''
+        }))
+      : (perPageAvailable || [5, 10, 20, 50, 100]).map((item: any) => ({
+          label: item,
+          value: item + ''
+        }));

    return (
      <div className={cx('Crud-pageSwitch')}>
-        <span>{__('CRUD.perPage')}</span>
+        {!mobileUI ? <span>{__('CRUD.perPage')}</span> : null}
        <Select
          classPrefix={ns}
          searchable={false}
@ -2033,8 +2043,9 @@ export default class CRUD extends React.Component<CRUDProps, any> {
      return null;
    }

-    const {render, store, translate: __} = this.props;
+    const {render, store, useMobileUI, translate: __} = this.props;
    const type = (toolbar as Schema).type || toolbar;
+    const mobileUI = useMobileUI && isMobile();

    if (type === 'bulkActions' || type === 'bulk-actions') {
      return this.renderBulkActions(childProps);
@ -2088,7 +2099,10 @@ export default class CRUD extends React.Component<CRUDProps, any> {
                  key={index}
                  className={cx(
                    'Crud-toolbar-item',
-                    align ? `Crud-toolbar-item--${align}` : ''
+                    align ? `Crud-toolbar-item--${align}` : '',
+                    {
+                      'is-mobile': mobileUI
+                    }
                    // toolbar.className
                  )}
                >
@ -2277,7 +2291,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
    return (
      <div
        className={cx('Crud', className, {
-          'is-loading': store.loading
+          'is-loading': store.loading,
+          'is-mobile': isMobile()
        })}
        style={style}
      >
--- a/packages/amis/src/renderers/Collapse.tsx
+++ b/packages/amis/src/renderers/Collapse.tsx
@ -156,8 +156,6 @@ export default class Collapse extends React.Component<CollapseProps, {}> {
      divideLine
    } = this.props;

-    console.log('cooooooo', divideLine);
-
    return (
      <BasicCollapse
        id={id}
--- a/packages/amis/src/renderers/DropDownButton.tsx
+++ b/packages/amis/src/renderers/DropDownButton.tsx
@ -16,6 +16,7 @@ import type {
  Trigger
 } from 'amis-ui/lib/components/TooltipWrapper';
 import {resolveVariableAndFilter} from 'amis-core';
+import {isMobile} from 'amis-core';

 export type DropdownButton =
  | (ActionSchema & {children?: Array<DropdownButton>})
@ -244,7 +245,10 @@ export default class DropDownButton extends React.Component<

    if (typeof button !== 'string' && Array.isArray(button?.children)) {
      return (
-        <div key={index} className={cx('DropDown-menu')}>
+        <div
+          key={index}
+          className={cx('DropDown-menu', {'is-mobile': isMobile()})}
+        >
          <li key={`${index}/0`} className={cx('DropDown-groupTitle')}>
            {button.icon ? generateIcon(cx, button.icon, 'm-r-xs') : null}
            <span>{button.label}</span>
@ -311,6 +315,9 @@ export default class DropDownButton extends React.Component<
              className={cx(
                'DropDown-menu-root',
                'DropDown-menu',
+                {
+                  'is-mobile': isMobile()
+                },
                menuClassName
              )}
              onClick={closeOnClick ? this.close : noop}
@ -391,7 +398,8 @@ export default class DropDownButton extends React.Component<
            'DropDown--block': block,
            'DropDown--alignRight': align === 'right',
            'is-opened': this.state.isOpened,
-            'is-actived': isActived
+            'is-actived': isActived,
+            'is-mobile': isMobile()
          },
          className
        )}
--- a/packages/amis/src/renderers/Form/ConditionBuilder.tsx
+++ b/packages/amis/src/renderers/Form/ConditionBuilder.tsx
@ -24,6 +24,7 @@ import {
 } from 'amis-ui';

 import {IconSchema} from '../Icon';
+import {isMobile} from 'amis-core';

 /**
 * 条件组合控件
@ -113,7 +114,13 @@ export default class ConditionBuilderControl extends React.PureComponent<Conditi
    }

    return (
-      <div className={cx(`ConditionBuilderControl`, className)}>
+      <div
+        className={cx(
+          `ConditionBuilderControl`,
+          {'is-mobile': isMobile()},
+          className
+        )}
+      >
        <ConditionBuilderWithRemoteOptions
          renderEtrValue={this.renderEtrValue}
          pickerIcon={this.renderPickerIcon()}
--- a/packages/amis/src/renderers/Form/InputTag.tsx
+++ b/packages/amis/src/renderers/Form/InputTag.tsx
@ -669,7 +669,7 @@ export default class TagControl extends React.PureComponent<
                      {mobileUI && !this.isReachMaxFromState() ? (
                        <div className={cx('ListMenu-add-wrap')}>
                          <ResultBox
-                            placeholder={__('SubForm.add')}
+                            placeholder={__('placeholder.enter') + '...'}
                            allowInput
                            value={this.state.inputValue}
                            useMobileUI={useMobileUI}
--- a/packages/amis/src/renderers/Form/LocationPicker.tsx
+++ b/packages/amis/src/renderers/Form/LocationPicker.tsx
@ -12,6 +12,7 @@ import {LocationPicker, Alert2, BaiduMapPicker, Icon} from 'amis-ui';
 import {filter} from 'amis-core';
 import {FormBaseControlSchema} from '../../Schema';
 import {supportStatic} from './StaticHoc';
+import {isMobile} from 'amis-core';
 /**
 * Location 选点组件
 * 文档：https://aisuda.bce.baidu.com/amis/zh-CN/components/form/location
@ -100,7 +101,9 @@ export class LocationControl extends React.Component<LocationControlProps> {

    return (
      <div
-        className={this.props.classnames('LocationControl')}
+        className={this.props.classnames('LocationControl', {
+          'is-mobile': isMobile()
+        })}
        ref={this.domRef}
      >
        <span>{value.address}</span>
@ -141,7 +144,11 @@ export class LocationControl extends React.Component<LocationControlProps> {
  render() {
    const {style} = this.props;
    return (
-      <div className={this.props.classnames('LocationControl')}>
+      <div
+        className={this.props.classnames('LocationControl', {
+          'is-mobile': isMobile()
+        })}
+      >
        <LocationPicker
          {...this.props}
          ak={filter(this.props.ak, this.props.data)}
--- a/packages/amis/src/renderers/Form/MatrixCheckboxes.tsx
+++ b/packages/amis/src/renderers/Form/MatrixCheckboxes.tsx
@ -13,7 +13,7 @@ import {
 import {buildApi, isValidApi, isEffectiveApi} from 'amis-core';
 import {Checkbox, Spinner, SpinnerExtraProps} from 'amis-ui';
 import {setVariable, createObject} from 'amis-core';
-import {ApiObject, ActionObject} from 'amis-core';
+import {ApiObject, ActionObject, isMobile} from 'amis-core';
 import {FormBaseControlSchema, SchemaApi} from '../../Schema';
 import {supportStatic} from './StaticHoc';

@ -297,7 +297,7 @@ export default class MatrixCheckbox extends React.Component<
    const value = this.props.value || buildDefaultValue(columns, rows);

    return (
-      <div className={cx('Table m-b-none')}>
+      <div className={cx('Table m-b-none', {'is-mobile': isMobile()})}>
        <div className={cx('Table-content')}>
          <table className={cx('Table-table')}>
            <thead>
--- a/packages/amis/src/renderers/Table/ColumnToggler.tsx
+++ b/packages/amis/src/renderers/Table/ColumnToggler.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import {findDOMNode} from 'react-dom';
 import Sortable from 'sortablejs';
 import cloneDeep from 'lodash/cloneDeep';
-import {RendererProps} from 'amis-core';
+import {isMobile, RendererProps} from 'amis-core';
 import {Overlay} from 'amis-core';
 import {PopOver} from 'amis-core';
 import {Modal} from 'amis-ui';
@ -319,8 +319,10 @@ export default class ColumnToggler extends React.Component<
      classPrefix: ns,
      children,
      closeOnClick,
-      closeOnOutside
+      closeOnOutside,
+      useMobileUI
    } = this.props;
+    const mobileUI = useMobileUI && isMobile();
    const body = (
      <RootClose
        disabled={!this.state.isOpened}
@ -329,7 +331,7 @@ export default class ColumnToggler extends React.Component<
        {(ref: any) => {
          return (
            <ul
-              className={cx('ColumnToggler-menu')}
+              className={cx('ColumnToggler-menu', {'is-mobile': mobileUI})}
              onClick={closeOnClick ? this.close : noop}
              ref={ref}
            >
@ -520,8 +522,10 @@ export default class ColumnToggler extends React.Component<
      isActived,
      data,
      draggable,
-      hideExpandIcon
+      hideExpandIcon,
+      useMobileUI
    } = this.props;
+    const mobileUI = useMobileUI && isMobile();

    const button = (
      <button
@ -588,7 +592,7 @@ export default class ColumnToggler extends React.Component<
        ) : (
          <TooltipWrapper
            placement={placement}
-            tooltip={disabled ? disabledTip : (tooltip as any)}
+            tooltip={disabled || mobileUI ? disabledTip : (tooltip as any)}
            container={tooltipContainer}
            trigger={tooltipTrigger}
            rootClose={tooltipRootClose}
--- a/packages/amis/src/renderers/Table/index.tsx
+++ b/packages/amis/src/renderers/Table/index.tsx
@ -1175,9 +1175,15 @@ export default class Table extends React.Component<TableProps, object> {
      clip.top - headerHeight - headingHeight < offsetY &&
      clip.top + clip.height - 40 > offsetY;

-    affixedDom.style.cssText += `top: ${offsetY}px;width: ${
-      (this.table.parentNode as HTMLElement).offsetWidth
-    }px`;
+    if (isMobile()) {
+      affixedDom.style.cssText += `top: 0;width: ${
+        (this.table.parentNode as HTMLElement).offsetWidth
+      }px`;
+    } else {
+      affixedDom.style.cssText += `top: ${offsetY}px;width: ${
+        (this.table.parentNode as HTMLElement).offsetWidth
+      }px`;
+    }

    affixed
      ? affixedDom.classList.add('in')