From 631ce1eaa0621fb1a4bc768ad620e84d8a863ad8 Mon Sep 17 00:00:00 2001
From: akai <akainice@gmail.com>
Date: Tue, 13 Dec 2022 11:24:07 +0800
Subject: [PATCH] feat: sync 2.4.8

---
 src/components/Avatar/index.tsx               |  3 +-
 src/components/Button/index.tsx               |  6 ++-
 src/components/Button/style.less              |  4 ++
 src/components/Card/CardActions.tsx           |  7 +--
 src/components/Card/CardContent.tsx           |  7 +--
 src/components/Card/CardMedia.tsx             |  7 +--
 src/components/Card/CardText.tsx              |  7 +--
 src/components/Card/CardTitle.tsx             |  7 +--
 src/components/Carousel/Item.tsx              |  3 +-
 src/components/Chat/index.tsx                 | 13 ++++-
 src/components/Chat/style.less                |  3 ++
 src/components/Checkbox/Checkbox.tsx          |  2 +-
 src/components/Checkbox/CheckboxGroup.tsx     |  2 +-
 src/components/ClickOutside/index.tsx         |  7 +--
 src/components/ComponentsProvider/index.tsx   |  2 +-
 .../ComponentsProvider/interface.ts           |  1 +
 src/components/Composer/Action.tsx            |  2 +-
 src/components/Composer/ComposerInput.tsx     | 10 ++--
 src/components/Composer/ToolbarItem.tsx       |  2 +-
 src/components/Composer/index.tsx             | 33 +++++++++---
 src/components/Composer/riseInput.ts          | 25 ++++------
 src/components/Divider/index.tsx              |  7 +--
 src/components/Empty/index.tsx                |  7 +--
 src/components/FileCard/index.tsx             |  3 +-
 src/components/Flex/FlexItem.tsx              |  2 +-
 src/components/Form/Form.tsx                  |  6 +--
 src/components/Form/FormActions.tsx           |  4 +-
 src/components/Form/FormItem.tsx              |  7 +--
 src/components/HelpText/index.tsx             |  4 +-
 src/components/Icon/index.tsx                 | 15 ++++--
 src/components/IconButton/index.tsx           |  6 +--
 src/components/Image/index.tsx                |  6 ++-
 src/components/Label/index.tsx                |  4 +-
 src/components/LazyComponent/SuspenseWrap.tsx |  2 +-
 src/components/LazyComponent/index.tsx        |  4 +-
 src/components/List/List.tsx                  |  7 +--
 src/components/List/ListItem.tsx              |  3 +-
 src/components/Loading/index.tsx              |  7 +--
 src/components/LocaleProvider/index.tsx       |  3 +-
 src/components/MediaObject/index.tsx          |  2 +-
 src/components/Message/SystemMessage.tsx      |  6 +--
 src/components/Modal/Base.tsx                 | 29 +++++++----
 src/components/Modal/Confirm.tsx              | 50 +++++++++++++++----
 src/components/Modal/Modal.tsx                |  7 +--
 src/components/Modal/Popup.tsx                |  8 +--
 src/components/Modal/style.less               |  9 ++--
 src/components/Navbar/index.tsx               |  6 +--
 src/components/Popover/index.tsx              |  3 +-
 src/components/Portal/index.ts                |  3 +-
 src/components/QuickReplies/style.less        |  2 +-
 src/components/Radio/Radio.tsx                |  2 +-
 src/components/Radio/RadioGroup.tsx           |  2 +-
 src/components/RateActions/index.tsx          |  6 +--
 src/components/ScrollView/Item.tsx            |  7 +--
 src/components/SendConfirm/SendConfirm.tsx    |  2 +-
 src/components/Skeleton/index.tsx             | 20 ++++++++
 src/components/Skeleton/style.less            | 26 ++++++++++
 src/components/Tabs/Tab.tsx                   |  3 +-
 src/components/Tabs/Tabs.tsx                  | 13 +++--
 src/components/Text/index.tsx                 |  3 +-
 src/components/Time/Time.tsx                  |  2 +-
 src/components/Toast/Toast.tsx                |  6 +--
 src/components/Toast/index.tsx                |  2 +-
 src/components/Toolbar/Toolbar.tsx            |  2 +-
 src/components/Toolbar/ToolbarButton.tsx      |  2 +-
 src/components/Toolbar/style.less             |  6 ++-
 src/components/Typing/style.less              | 32 +++++++-----
 src/components/Video/index.tsx                |  2 +-
 src/hooks/useMount.ts                         | 12 +++--
 src/index.ts                                  |  2 +
 src/styles/index.less                         |  1 +
 src/styles/var.less                           |  2 +-
 src/utils/isSafari.ts                         |  1 -
 src/utils/mountComponent.ts                   |  4 +-
 src/utils/ua.ts                               | 18 +++++++
 75 files changed, 376 insertions(+), 177 deletions(-)
 create mode 100644 src/components/Skeleton/index.tsx
 create mode 100644 src/components/Skeleton/style.less
 delete mode 100644 src/utils/isSafari.ts
 create mode 100644 src/utils/ua.ts

diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
index baea8120..26bf5469 100644
--- a/src/components/Avatar/index.tsx
+++ b/src/components/Avatar/index.tsx
@@ -12,9 +12,10 @@ export interface AvatarProps {
   url?: string;
   size?: AvatarSize;
   shape?: AvatarShape;
+  children?: React.ReactNode;
 }
 
-export const Avatar: React.FC<AvatarProps> = (props) => {
+export const Avatar = (props: AvatarProps) => {
   const { className, src, alt, url, size = 'md', shape = 'circle', children } = props;
 
   const Element = url ? 'a' : 'span';
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index fdd94e7b..2052fb8a 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -12,6 +12,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   icon?: string;
   loading?: boolean;
   disabled?: boolean;
+  children?: React.ReactNode;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
@@ -19,7 +20,7 @@ function composeClass(type?: string) {
   return type && `Btn--${type}`;
 }
 
-export const Button = (props: ButtonProps) => {
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     className,
     label,
@@ -59,6 +60,7 @@ export const Button = (props: ButtonProps) => {
       type="button"
       disabled={disabled}
       onClick={handleClick}
+      ref={ref}
       {...other}
     >
       {icon && (
@@ -69,4 +71,4 @@ export const Button = (props: ButtonProps) => {
       {label || children}
     </button>
   );
-};
+});
diff --git a/src/components/Button/style.less b/src/components/Button/style.less
index 6990bb49..7c44c38f 100644
--- a/src/components/Button/style.less
+++ b/src/components/Button/style.less
@@ -74,6 +74,10 @@
   }
 }
 
+[data-old-ios] .Btn:not(.Btn--block) {
+  display: inline-block;
+}
+
 @media (hover: hover) {
   .Btn {
     &:hover {
diff --git a/src/components/Card/CardActions.tsx b/src/components/Card/CardActions.tsx
index 32c2a489..1af68c82 100644
--- a/src/components/Card/CardActions.tsx
+++ b/src/components/Card/CardActions.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type CardActionsProps = {
+export interface CardActionsProps {
   className?: string;
   direction?: 'column' | 'row';
-};
+  children?: React.ReactNode;
+}
 
-export const CardActions: React.FC<CardActionsProps> = (props) => {
+export const CardActions = (props: CardActionsProps) => {
   const { children, className, direction, ...other } = props;
   return (
     <div
diff --git a/src/components/Card/CardContent.tsx b/src/components/Card/CardContent.tsx
index 9c05937d..9af181c7 100644
--- a/src/components/Card/CardContent.tsx
+++ b/src/components/Card/CardContent.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type CardContentProps = {
+export interface CardContentProps {
   className?: string;
-};
+  children?: React.ReactNode;
+}
 
-export const CardContent: React.FC<CardContentProps> = (props) => {
+export const CardContent = (props: CardContentProps) => {
   const { className, children, ...other } = props;
   return (
     <div className={clsx('CardContent', className)} {...other}>
diff --git a/src/components/Card/CardMedia.tsx b/src/components/Card/CardMedia.tsx
index 9b8a82cb..70e8d7b1 100644
--- a/src/components/Card/CardMedia.tsx
+++ b/src/components/Card/CardMedia.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import { Flex } from '../Flex';
 
-export type CardMediaProps = {
+export interface CardMediaProps {
   className?: string;
   aspectRatio?: 'square' | 'wide';
   color?: string;
   image?: string;
-};
+  children?: React.ReactNode;
+}
 
-export const CardMedia: React.FC<CardMediaProps> = (props) => {
+export const CardMedia = (props: CardMediaProps) => {
   const { className, aspectRatio = 'square', color, image, children, ...other } = props;
 
   const bgStyle = {
diff --git a/src/components/Card/CardText.tsx b/src/components/Card/CardText.tsx
index 82de89ca..5c95b581 100644
--- a/src/components/Card/CardText.tsx
+++ b/src/components/Card/CardText.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type CardTextProps = {
+export interface CardTextProps {
   className?: string;
-};
+  children?: React.ReactNode;
+}
 
-export const CardText: React.FC<CardTextProps> = (props) => {
+export const CardText = (props: CardTextProps) => {
   const { className, children, ...other } = props;
   return (
     <div className={clsx('CardText', className)} {...other}>
diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx
index 815c31db..49e5b28c 100644
--- a/src/components/Card/CardTitle.tsx
+++ b/src/components/Card/CardTitle.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type CardTitleProps = {
+export interface CardTitleProps {
   className?: string;
   title?: React.ReactNode;
   subtitle?: React.ReactNode;
   center?: boolean;
-};
+  children?: React.ReactNode;
+}
 
-export const CardTitle: React.FC<CardTitleProps> = (props) => {
+export const CardTitle = (props: CardTitleProps) => {
   const { className, title, subtitle, center, children, ...other } = props;
   return (
     <div className={clsx('CardTitle', { 'CardTitle--center': center }, className)} {...other}>
diff --git a/src/components/Carousel/Item.tsx b/src/components/Carousel/Item.tsx
index d81a7f69..e3155282 100644
--- a/src/components/Carousel/Item.tsx
+++ b/src/components/Carousel/Item.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 interface CarouselItemProps {
   width: string;
+  children?: React.ReactNode;
 }
 
-export const CarouselItem: React.FC<CarouselItemProps> = (props) => {
+export const CarouselItem = (props: CarouselItemProps) => {
   const { width, children } = props;
 
   return (
diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
index 8513b566..5e174e04 100644
--- a/src/components/Chat/index.tsx
+++ b/src/components/Chat/index.tsx
@@ -8,7 +8,7 @@ import {
 } from '../MessageContainer';
 import { QuickReplies, QuickReplyItemProps } from '../QuickReplies';
 import { Composer as DComposer, ComposerProps, ComposerHandle } from '../Composer';
-import isSafari from '../../utils/isSafari';
+import { isSafari, getIOSMajorVersion } from '../../utils/ua';
 
 export type ChatProps = Omit<ComposerProps, 'onFocus' | 'onChange' | 'onBlur'> &
   MessageContainerProps & {
@@ -164,6 +164,7 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
     onQuickReplyScroll,
     renderQuickReplies,
     text,
+    textOnce,
     placeholder,
     onInputFocus,
     onInputChange,
@@ -192,8 +193,15 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
   }
 
   useEffect(() => {
+    const rootEl = document.documentElement;
     if (isSafari()) {
-      document.documentElement.dataset.safari = '';
+      rootEl.dataset.safari = '';
+    }
+
+    const v = getIOSMajorVersion();
+    // iOS 9、10 不支持按钮使用 flex
+    if (v && v < 11) {
+      rootEl.dataset.oldIos = '';
     }
   }, []);
 
@@ -228,6 +236,7 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
             ref={composerRef}
             inputType={inputType}
             text={text}
+            textOnce={textOnce}
             inputOptions={inputOptions}
             placeholder={placeholder}
             onAccessoryToggle={onAccessoryToggle}
diff --git a/src/components/Chat/style.less b/src/components/Chat/style.less
index 99c8bac5..ce3cf32a 100644
--- a/src/components/Chat/style.less
+++ b/src/components/Chat/style.less
@@ -6,11 +6,14 @@
       height: calc(100vh - calc(100vh - 100%));
     }
   }
+
   body,
   #root {
     height: 100%;
   }
+
   body {
+    overflow: hidden;
     margin: 0;
   }
 }
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 9447b117..eeac225f 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -8,7 +8,7 @@ export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: CheckboxValue;
 };
 
-export const Checkbox: React.FC<CheckboxProps> = (props) => {
+export const Checkbox = (props: CheckboxProps) => {
   const { className, label, checked, disabled, onChange, ...other } = props;
   return (
     <label
diff --git a/src/components/Checkbox/CheckboxGroup.tsx b/src/components/Checkbox/CheckboxGroup.tsx
index 01f801a6..ebc54713 100644
--- a/src/components/Checkbox/CheckboxGroup.tsx
+++ b/src/components/Checkbox/CheckboxGroup.tsx
@@ -12,7 +12,7 @@ export type CheckboxGroupProps = {
   onChange: (value: CheckboxValue[], event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {
+export const CheckboxGroup = (props: CheckboxGroupProps) => {
   const { className, options, value, name, disabled, block, onChange } = props;
 
   function handleChange(val: CheckboxValue, e: React.ChangeEvent<HTMLInputElement>) {
diff --git a/src/components/ClickOutside/index.tsx b/src/components/ClickOutside/index.tsx
index e82ca3a6..44a9340a 100644
--- a/src/components/ClickOutside/index.tsx
+++ b/src/components/ClickOutside/index.tsx
@@ -3,13 +3,14 @@ import React, { useEffect, useRef } from 'react';
 const doc = document;
 const html = doc.documentElement;
 
-export type ClickOutsideProps = {
+export interface ClickOutsideProps {
   onClick: (event: React.MouseEvent<HTMLElement>) => void;
   // mouseEvent?: 'click' | 'mousedown' | 'mouseup' | false;
   mouseEvent?: 'click' | 'mousedown' | 'mouseup';
-};
+  children?: React.ReactNode;
+}
 
-export const ClickOutside: React.FC<ClickOutsideProps> = (props) => {
+export const ClickOutside = (props: ClickOutsideProps) => {
   const { children, onClick, mouseEvent = 'mouseup', ...others } = props;
   const wrapper = useRef<HTMLDivElement>(null!);
 
diff --git a/src/components/ComponentsProvider/index.tsx b/src/components/ComponentsProvider/index.tsx
index 629d5877..e79a46bf 100644
--- a/src/components/ComponentsProvider/index.tsx
+++ b/src/components/ComponentsProvider/index.tsx
@@ -12,7 +12,7 @@ import {
 export { useComponents } from './useComponents';
 export type { ComponentsProviderProps, ComponentsMap };
 
-export const ComponentsProvider: React.FC<ComponentsProviderProps> = (props) => {
+export const ComponentsProvider = (props: ComponentsProviderProps) => {
   const { components, children } = props;
   const componentsRef = React.useRef<ComponentsMap>({ ...components });
 
diff --git a/src/components/ComponentsProvider/interface.ts b/src/components/ComponentsProvider/interface.ts
index 310459bd..ed6c06c2 100644
--- a/src/components/ComponentsProvider/interface.ts
+++ b/src/components/ComponentsProvider/interface.ts
@@ -51,4 +51,5 @@ export interface ComponentsMap {
 
 export interface ComponentsProviderProps {
   components: ComponentsMap;
+  children?: React.ReactNode;
 }
diff --git a/src/components/Composer/Action.tsx b/src/components/Composer/Action.tsx
index 57749938..632375c9 100644
--- a/src/components/Composer/Action.tsx
+++ b/src/components/Composer/Action.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton, IconButtonProps } from '../IconButton';
 
-export const Action: React.FC<IconButtonProps> = (props) => (
+export const Action = (props: IconButtonProps) => (
   <div className="Composer-actions" data-action-icon={props.icon}>
     <IconButton size="lg" {...props} />
   </div>
diff --git a/src/components/Composer/ComposerInput.tsx b/src/components/Composer/ComposerInput.tsx
index f2d57d47..aad8e0e2 100644
--- a/src/components/Composer/ComposerInput.tsx
+++ b/src/components/Composer/ComposerInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import clsx from 'clsx';
 import { Input, InputProps } from '../Input';
 import { SendConfirm } from '../SendConfirm';
@@ -21,7 +21,6 @@ export const ComposerInput = ({
   ...rest
 }: ComposerInputProps) => {
   const [pastedImage, setPastedImage] = useState<File | null>(null);
-  const wrapRef = useRef<HTMLDivElement>(null);
 
   const handlePaste = useCallback((e: React.ClipboardEvent<any>) => {
     parseDataTransfer(e, setPastedImage);
@@ -40,13 +39,14 @@ export const ComposerInput = ({
   }, [onImageSend, pastedImage]);
 
   useEffect(() => {
-    if (canTouch && inputRef.current && wrapRef.current) {
-      riseInput(inputRef.current, wrapRef.current);
+    if (canTouch && inputRef.current) {
+      const $composer = document.querySelector('.Composer');
+      riseInput(inputRef.current, $composer);
     }
   }, [inputRef]);
 
   return (
-    <div className={clsx({ 'S--invisible': invisible })} ref={wrapRef}>
+    <div className={clsx({ 'S--invisible': invisible })}>
       <Input
         className="Composer-input"
         rows={1}
diff --git a/src/components/Composer/ToolbarItem.tsx b/src/components/Composer/ToolbarItem.tsx
index 260c11c7..cd721a73 100644
--- a/src/components/Composer/ToolbarItem.tsx
+++ b/src/components/Composer/ToolbarItem.tsx
@@ -7,7 +7,7 @@ type IToolbarItem = {
   onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 
-export const ToolbarItem: React.FC<IToolbarItem> = (props) => {
+export const ToolbarItem = (props: IToolbarItem) => {
   const { item, onClick } = props;
 
   return (
diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx
index 82be436d..15a39601 100644
--- a/src/components/Composer/index.tsx
+++ b/src/components/Composer/index.tsx
@@ -19,6 +19,7 @@ export type InputType = 'voice' | 'text';
 export type ComposerProps = {
   wideBreakpoint?: string;
   text?: string;
+  textOnce?: string;
   inputOptions?: InputProps;
   placeholder?: string;
   inputType?: InputType;
@@ -42,9 +43,10 @@ export interface ComposerHandle {
 export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props, ref) => {
   const {
     text: initialText = '',
+    textOnce: oTextOnce,
     inputType: initialInputType = 'text',
     wideBreakpoint,
-    placeholder = '请输入...',
+    placeholder: oPlaceholder = '请输入...',
     recorder = {},
     onInputTypeChange,
     onFocus,
@@ -60,6 +62,8 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
   } = props;
 
   const [text, setText] = useState(initialText);
+  const [textOnce, setTextOnce] = useState('');
+  const [placeholder, setPlaceholder] = useState(oPlaceholder);
   const [inputType, setInputType] = useState(initialInputType || 'text');
   const [isAccessoryOpen, setAccessoryOpen] = useState(false);
   const [accessoryContent, setAccessoryContent] = useState('');
@@ -105,6 +109,16 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
     }
   }, [isAccessoryOpen, onAccessoryToggle]);
 
+  useEffect(() => {
+    if (oTextOnce) {
+      setTextOnce(oTextOnce);
+      setPlaceholder(oTextOnce);
+    } else {
+      setTextOnce('');
+      setPlaceholder(oPlaceholder);
+    }
+  }, [oPlaceholder, oTextOnce]);
+
   useEffect(() => {
     isMountRef.current = true;
   }, []);
@@ -157,13 +171,20 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
   );
 
   const send = useCallback(() => {
-    onSend('text', text);
-    setText('');
-
+    if (text) {
+      onSend('text', text);
+      setText('');
+    } else if (textOnce) {
+      onSend('text', textOnce);
+    }
+    if (textOnce) {
+      setTextOnce('');
+      setPlaceholder(oPlaceholder);
+    }
     if (focused.current) {
       inputRef.current.focus();
     }
-  }, [onSend, text]);
+  }, [oPlaceholder, onSend, text, textOnce]);
 
   const handleInputKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -289,7 +310,7 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
             aria-label={isAccessoryOpen ? '关闭工具栏' : '展开工具栏'}
           />
         )}
-        {text && <SendButton onClick={handleSendBtnClick} disabled={false} />}
+        {(text || textOnce) && <SendButton onClick={handleSendBtnClick} disabled={false} />}
       </div>
       {isAccessoryOpen && (
         <AccessoryWrap onClickOutside={handleAccessoryBlur}>
diff --git a/src/components/Composer/riseInput.ts b/src/components/Composer/riseInput.ts
index 38b9fa7e..ce0efe65 100644
--- a/src/components/Composer/riseInput.ts
+++ b/src/components/Composer/riseInput.ts
@@ -1,13 +1,10 @@
-const ua = navigator.userAgent;
-const iOS = /iPad|iPhone|iPod/.test(ua);
+import { isIOS, isSafariOrIOS11, getIOSMajorVersion } from '../../utils/ua';
 
-function uaIncludes(str: string) {
-  return ua.indexOf(str) !== -1;
-}
+const iOS = isIOS();
 
 function testScrollType() {
   if (iOS) {
-    if (uaIncludes('Safari/') || /OS 11_[0-3]\D/.test(ua)) {
+    if (isSafariOrIOS11()) {
       /**
        * 不处理
        * - Safari
@@ -15,21 +12,21 @@ function testScrollType() {
        */
       return 0;
     }
-    // 用 `scrollTop` 的方式
-    return 1;
+
+    const major = getIOSMajorVersion();
+    // iOS 12及以下用 `scrollTop` 的方式
+    if (major < 13) {
+      return 1;
+    }
   }
   // 其它的用 `scrollIntoView` 的方式
   return 2;
 }
 
-export default function riseInput(input: HTMLElement, target: HTMLElement) {
+export default function riseInput(input: Element, wrap?: Element | null) {
   const scrollType = testScrollType();
   let scrollTimer: ReturnType<typeof setTimeout>;
-
-  if (!target) {
-    // eslint-disable-next-line no-param-reassign
-    target = input;
-  }
+  const target = wrap || input;
 
   const scrollIntoView = () => {
     if (scrollType === 0) return;
diff --git a/src/components/Divider/index.tsx b/src/components/Divider/index.tsx
index 88b9f8e1..06095c96 100644
--- a/src/components/Divider/index.tsx
+++ b/src/components/Divider/index.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type DividerProps = {
+export interface DividerProps {
   className?: string;
   position?: 'center' | 'left' | 'right';
-};
+  children?: React.ReactNode;
+}
 
-export const Divider: React.FC<DividerProps> = (props) => {
+export const Divider = (props: DividerProps) => {
   const { className, position = 'center', children, ...other } = props;
   return (
     <div
diff --git a/src/components/Empty/index.tsx b/src/components/Empty/index.tsx
index 088acbac..8b5f90a1 100644
--- a/src/components/Empty/index.tsx
+++ b/src/components/Empty/index.tsx
@@ -2,17 +2,18 @@ import React from 'react';
 import clsx from 'clsx';
 import { Flex } from '../Flex';
 
-export type EmptyProps = {
+export interface EmptyProps {
   className?: string;
   type?: 'error' | 'default';
   image?: string;
   tip?: string;
-};
+  children?: React.ReactNode;
+}
 
 const IMAGE_EMPTY = '//gw.alicdn.com/tfs/TB1fnnLRkvoK1RjSZFDXXXY3pXa-300-250.svg';
 const IMAGE_OOPS = '//gw.alicdn.com/tfs/TB1lRjJRbvpK1RjSZPiXXbmwXXa-300-250.svg';
 
-export const Empty: React.FC<EmptyProps> = (props) => {
+export const Empty = (props: EmptyProps) => {
   const { className, type, image, tip, children } = props;
   const imgUrl = image || (type === 'error' ? IMAGE_OOPS : IMAGE_EMPTY);
 
diff --git a/src/components/FileCard/index.tsx b/src/components/FileCard/index.tsx
index f341477c..6f030cfa 100644
--- a/src/components/FileCard/index.tsx
+++ b/src/components/FileCard/index.tsx
@@ -11,9 +11,10 @@ export interface FileCardProps {
   className?: string;
   file: File;
   extension?: string;
+  children?: React.ReactNode;
 }
 
-export const FileCard: React.FC<FileCardProps> = (props) => {
+export const FileCard = (props: FileCardProps) => {
   const { className, file, extension, children } = props;
   const { name, size } = file;
   const ext = extension || getExtName(name);
diff --git a/src/components/Flex/FlexItem.tsx b/src/components/Flex/FlexItem.tsx
index 2f32e0d0..ff05821e 100644
--- a/src/components/Flex/FlexItem.tsx
+++ b/src/components/Flex/FlexItem.tsx
@@ -8,7 +8,7 @@ export interface FlexItemProps extends React.HTMLAttributes<HTMLElement> {
   order?: number;
 }
 
-export const FlexItem: React.FC<FlexItemProps> = (props) => {
+export const FlexItem = (props: FlexItemProps) => {
   const { className, flex, alignSelf, order, style, children, ...other } = props;
   return (
     <div
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 7d2dc810..7b60b48d 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type FormProps = {
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   className?: string;
   /** @deprecated Use `<Input>`'s `variant` instead */
   theme?: string;
-};
+}
 
 export const ThemeContext = React.createContext('');
 
-export const Form: React.FC<FormProps> = (props) => {
+export const Form = (props: FormProps) => {
   const { className, theme = '', children, ...other } = props;
   return (
     <ThemeContext.Provider value={theme}>
diff --git a/src/components/Form/FormActions.tsx b/src/components/Form/FormActions.tsx
index bc46c6da..bc0901f1 100644
--- a/src/components/Form/FormActions.tsx
+++ b/src/components/Form/FormActions.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export const FormActions: React.FC = (props) => {
+export interface FormActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const FormActions = (props: FormActionsProps) => {
   const { children, ...other } = props;
   return (
     <div className={clsx('FormActions')} {...other}>
diff --git a/src/components/Form/FormItem.tsx b/src/components/Form/FormItem.tsx
index 54f906c4..f855da75 100644
--- a/src/components/Form/FormItem.tsx
+++ b/src/components/Form/FormItem.tsx
@@ -3,15 +3,16 @@ import clsx from 'clsx';
 import { Label } from '../Label';
 import { HelpText } from '../HelpText';
 
-export type FormItemProps = {
+export interface FormItemProps {
   label?: string | React.ReactNode;
   help?: string;
   required?: boolean;
   invalid?: boolean;
   hidden?: boolean;
-};
+  children?: React.ReactNode;
+}
 
-export const FormItem: React.FC<FormItemProps> = (props) => {
+export const FormItem = (props: FormItemProps) => {
   const { label, help, required, invalid, hidden, children } = props;
   return (
     <div className={clsx('FormItem', { required, 'is-invalid': invalid })} hidden={hidden}>
diff --git a/src/components/HelpText/index.tsx b/src/components/HelpText/index.tsx
index e1c6119e..beffc15f 100644
--- a/src/components/HelpText/index.tsx
+++ b/src/components/HelpText/index.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
-export const HelpText: React.FC = (props) => {
+export interface HelpTextProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const HelpText = (props: HelpTextProps) => {
   const { children, ...others } = props;
   return (
     <div className="HelpText" {...others}>
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 247f8551..6d019c65 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -1,20 +1,25 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type IconProps = React.SVGProps<SVGSVGElement> & {
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
   type: string;
   className?: string;
   name?: string;
   spin?: boolean;
-};
+}
 
-export const Icon: React.FC<IconProps> = (props) => {
+export const Icon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {
   const { type, className, spin, name, ...other } = props;
   const ariaProps = typeof name === 'string' ? { 'aria-label': name } : { 'aria-hidden': true };
 
   return (
-    <svg className={clsx('Icon', { 'is-spin': spin }, className)} {...ariaProps} {...other}>
+    <svg
+      className={clsx('Icon', { 'is-spin': spin }, className)}
+      ref={ref}
+      {...ariaProps}
+      {...other}
+    >
       <use xlinkHref={`#icon-${type}`} />
     </svg>
   );
-};
+});
diff --git a/src/components/IconButton/index.tsx b/src/components/IconButton/index.tsx
index 8a20a4fb..5bff4d73 100644
--- a/src/components/IconButton/index.tsx
+++ b/src/components/IconButton/index.tsx
@@ -7,12 +7,12 @@ export interface IconButtonProps extends ButtonProps {
   img?: string;
 }
 
-export const IconButton: React.FC<IconButtonProps> = (props) => {
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
   const { className, icon, img, ...other } = props;
   return (
-    <Button className={clsx('IconBtn', className)} {...other}>
+    <Button className={clsx('IconBtn', className)} ref={ref} {...other}>
       {icon && <Icon type={icon} />}
       {!icon && img && <img src={img} alt="" />}
     </Button>
   );
-};
+});
diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx
index cbcbd045..1a2fc26b 100644
--- a/src/components/Image/index.tsx
+++ b/src/components/Image/index.tsx
@@ -11,7 +11,7 @@ export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
 
 export const Image = React.forwardRef<HTMLImageElement, ImageProps>((props, ref) => {
   const { className, src: oSrc, lazy, fluid, children, ...other } = props;
-  const [src, setSrc] = useState('');
+  const [src, setSrc] = useState(lazy ? undefined : oSrc);
   const imgRef = useForwardRef(ref);
   const savedSrc = useRef('');
   const lazyLoaded = useRef(false);
@@ -38,7 +38,9 @@ export const Image = React.forwardRef<HTMLImageElement, ImageProps>((props, ref)
 
   useEffect(() => {
     savedSrc.current = oSrc;
-    setSrc(lazy && !lazyLoaded.current ? '' : oSrc);
+    if (!lazy || lazyLoaded.current) {
+      setSrc(oSrc);
+    }
   }, [lazy, oSrc]);
 
   return (
diff --git a/src/components/Label/index.tsx b/src/components/Label/index.tsx
index 259ee7d6..3048b73c 100644
--- a/src/components/Label/index.tsx
+++ b/src/components/Label/index.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
 
-export const Label: React.FC = (props) => {
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+export const Label = (props: LabelProps) => {
   const { children, ...other } = props;
 
   return (
diff --git a/src/components/LazyComponent/SuspenseWrap.tsx b/src/components/LazyComponent/SuspenseWrap.tsx
index b39f047e..59ebcb21 100644
--- a/src/components/LazyComponent/SuspenseWrap.tsx
+++ b/src/components/LazyComponent/SuspenseWrap.tsx
@@ -2,7 +2,7 @@ import React, { Suspense } from 'react';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { LazyComponentPropsWithComponent } from './interface';
 
-export const SuspenseWrap: React.FC<LazyComponentPropsWithComponent> = (props) => {
+export const SuspenseWrap = (props: LazyComponentPropsWithComponent) => {
   const { component: Comp, onError, fallback, ...rest } = props;
 
   return Comp ? (
diff --git a/src/components/LazyComponent/index.tsx b/src/components/LazyComponent/index.tsx
index a6bb3dd4..29f50c74 100644
--- a/src/components/LazyComponent/index.tsx
+++ b/src/components/LazyComponent/index.tsx
@@ -9,7 +9,7 @@ import { useComponents } from '../ComponentsProvider/useComponents';
 
 export type { LazyComponentProps, LazyComponentOnLoadParams };
 
-export const LazyComponentWithCode: React.FC<LazyComponentPropsWithCode> = (props) => {
+export const LazyComponentWithCode = (props: LazyComponentPropsWithCode) => {
   const { code, fallback, onLoad, onError, ...rest } = props;
   const { getComponent } = useComponents();
 
@@ -24,7 +24,7 @@ export const LazyComponentWithCode: React.FC<LazyComponentPropsWithCode> = (prop
   return <SuspenseWrap component={Comp} onError={onError} fallback={fallback} {...rest} />;
 };
 
-export const LazyComponent: React.FC<LazyComponentProps> = (props) => {
+export const LazyComponent = (props: LazyComponentProps) => {
   const { component, code, onLoad, ...rest } = props;
 
   if (component) {
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index cbe45499..d3a181c9 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type ListProps = {
+export interface ListProps {
   className?: string;
   bordered?: boolean;
-};
+  children?: React.ReactNode;
+}
 
-export const List: React.FC<ListProps> = (props) => {
+export const List = (props: ListProps) => {
   const { bordered = false, className, children } = props;
   return (
     <div className={clsx('List', { 'List--bordered': bordered }, className)} role="list">
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index 15007a2f..94331fda 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -8,6 +8,7 @@ interface ListItemPropsBase {
   content?: React.ReactNode;
   rightIcon?: string;
   onClick?: (event: React.MouseEvent) => void;
+  children?: React.ReactNode;
 }
 
 interface ListItemPropsWithLink extends ListItemPropsBase {
@@ -17,7 +18,7 @@ interface ListItemPropsWithLink extends ListItemPropsBase {
 
 export type ListItemProps = ListItemPropsBase | ListItemPropsWithLink;
 
-export const ListItem: React.FC<ListItemProps> = (props) => {
+export const ListItem = (props: ListItemProps) => {
   const { className, as: Element = 'div', content, rightIcon, children, onClick, ...other } = props;
   return (
     <Element className={clsx('ListItem', className)} onClick={onClick} role="listitem" {...other}>
diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
index df49e560..982754f1 100644
--- a/src/components/Loading/index.tsx
+++ b/src/components/Loading/index.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import { Flex } from '../Flex';
 import { Icon } from '../Icon';
 
-export type LoadingProps = {
+export interface LoadingProps {
   tip?: string;
-};
+  children?: React.ReactNode;
+}
 
-export const Loading: React.FC<LoadingProps> = (props) => {
+export const Loading = (props: LoadingProps) => {
   const { tip, children } = props;
   return (
     <Flex className="Loading" center>
diff --git a/src/components/LocaleProvider/index.tsx b/src/components/LocaleProvider/index.tsx
index 3f0e7da8..cb1e8ebb 100644
--- a/src/components/LocaleProvider/index.tsx
+++ b/src/components/LocaleProvider/index.tsx
@@ -8,12 +8,13 @@ type ILocales = {
 type ILocaleContext = {
   locale?: string;
   locales?: ILocales;
+  children?: React.ReactNode;
 };
 
 const LocaleContext = React.createContext<ILocaleContext>(undefined!);
 const DEFAULT_LOCALE = 'en-US';
 
-const LocaleProvider: React.FC<ILocaleContext> = ({ locale, locales, children }) => (
+const LocaleProvider = ({ locale, locales, children }: ILocaleContext) => (
   <LocaleContext.Provider value={{ locale, locales }}>{children}</LocaleContext.Provider>
 );
 
diff --git a/src/components/MediaObject/index.tsx b/src/components/MediaObject/index.tsx
index 4099fbde..0db77de3 100644
--- a/src/components/MediaObject/index.tsx
+++ b/src/components/MediaObject/index.tsx
@@ -10,7 +10,7 @@ export type MediaObjectProps = {
   meta?: React.ReactNode;
 };
 
-export const MediaObject: React.FC<MediaObjectProps> = (props) => {
+export const MediaObject = (props: MediaObjectProps) => {
   const { className, picUrl, picSize, title, picAlt, meta } = props;
   return (
     <div className={clsx('MediaObject', className)}>
diff --git a/src/components/Message/SystemMessage.tsx b/src/components/Message/SystemMessage.tsx
index b54d2267..f19f4215 100644
--- a/src/components/Message/SystemMessage.tsx
+++ b/src/components/Message/SystemMessage.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import clsx from 'clsx';
 
-export type SystemMessageProps = {
+export interface SystemMessageProps {
   className?: string;
   content: string;
   action?: {
     text: string;
     onClick: (event: React.MouseEvent) => void;
   };
-};
+}
 
-export const SystemMessage: React.FC<SystemMessageProps> = (props) => {
+export const SystemMessage = (props: SystemMessageProps) => {
   const { className, content, action } = props;
   return (
     <div className={clsx('Message SystemMessage', className)}>
diff --git a/src/components/Modal/Base.tsx b/src/components/Modal/Base.tsx
index 4ab74510..054fca77 100644
--- a/src/components/Modal/Base.tsx
+++ b/src/components/Modal/Base.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 import useMount from '../../hooks/useMount';
@@ -8,7 +8,7 @@ import { Button, ButtonProps } from '../Button';
 import useNextId from '../../hooks/useNextId';
 import toggleClass from '../../utils/toggleClass';
 
-export type ModalProps = {
+export interface ModalProps {
   active?: boolean;
   baseClass?: string;
   className?: string;
@@ -25,7 +25,12 @@ export type ModalProps = {
   bgColor?: string;
   onClose?: () => void;
   onBackdropClick?: () => void;
-};
+  children?: React.ReactNode;
+}
+
+export interface BaseModalHandle {
+  wrapperRef: React.RefObject<HTMLDivElement>;
+}
 
 function clearModal() {
   if (!document.querySelector('.Modal') && !document.querySelector('.Popup')) {
@@ -33,7 +38,7 @@ function clearModal() {
   }
 }
 
-export const Base: React.FC<ModalProps> = (props) => {
+export const Base = React.forwardRef<BaseModalHandle, ModalProps>((props, ref) => {
   const {
     baseClass,
     active,
@@ -56,13 +61,13 @@ export const Base: React.FC<ModalProps> = (props) => {
   const mid = useNextId('modal-');
   const titleId = props.titleId || mid;
 
-  const wrapper = useRef<HTMLDivElement>(null);
-  const { didMount, isShow } = useMount({ active, ref: wrapper });
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const { didMount, isShow } = useMount({ active, ref: wrapperRef });
 
   useEffect(() => {
     setTimeout(() => {
-      if (autoFocus && wrapper.current) {
-        wrapper.current.focus();
+      if (autoFocus && wrapperRef.current) {
+        wrapperRef.current.focus();
       }
     });
   }, [autoFocus]);
@@ -79,6 +84,10 @@ export const Base: React.FC<ModalProps> = (props) => {
     }
   }, [active, didMount]);
 
+  useImperativeHandle(ref, () => ({
+    wrapperRef,
+  }));
+
   useEffect(
     () => () => {
       clearModal();
@@ -91,7 +100,7 @@ export const Base: React.FC<ModalProps> = (props) => {
   const isPopup = baseClass === 'Popup';
 
   return createPortal(
-    <div className={clsx(baseClass, className, { active: isShow })} ref={wrapper} tabIndex={-1}>
+    <div className={clsx(baseClass, className, { active: isShow })} ref={wrapperRef} tabIndex={-1}>
       {backdrop && (
         <Backdrop
           active={isShow}
@@ -137,4 +146,4 @@ export const Base: React.FC<ModalProps> = (props) => {
     </div>,
     document.body,
   );
-};
+});
diff --git a/src/components/Modal/Confirm.tsx b/src/components/Modal/Confirm.tsx
index 63b5b9f9..f022664b 100644
--- a/src/components/Modal/Confirm.tsx
+++ b/src/components/Modal/Confirm.tsx
@@ -1,13 +1,41 @@
 import React from 'react';
 import clsx from 'clsx';
-import { Base, ModalProps } from './Base';
-
-export const Confirm: React.FC<ModalProps> = ({ className, ...other }) => (
-  <Base
-    baseClass="Modal"
-    className={clsx('Confirm', className)}
-    showClose={false}
-    btnVariant="outline"
-    {...other}
-  />
-);
+import { Base, ModalProps, BaseModalHandle } from './Base';
+import { useLocale } from '../LocaleProvider';
+import { ButtonProps } from '../Button';
+
+const isPrimary = (btn: ButtonProps) => btn.color === 'primary';
+
+export const Confirm = React.forwardRef<BaseModalHandle, ModalProps>((props, ref) => {
+  const { className, vertical: oVertical, actions, ...other } = props;
+  const { locale = '' } = useLocale();
+  const isZh = locale.includes('zh');
+  // 中文默认横排
+  const vertical = oVertical != null ? oVertical : !isZh;
+
+  if (Array.isArray(actions)) {
+    // 主按钮排序：横排主按钮在后，竖排主按钮在前
+    actions.sort((a, b) => {
+      if (isPrimary(a)) {
+        return vertical ? -1 : 1;
+      }
+      if (isPrimary(b)) {
+        return vertical ? 1 : -1;
+      }
+      return 0;
+    });
+  }
+
+  return (
+    <Base
+      baseClass="Modal"
+      className={clsx('Confirm', className)}
+      showClose={false}
+      btnVariant="outline"
+      vertical={vertical}
+      actions={actions}
+      ref={ref}
+      {...other}
+    />
+  );
+});
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 8b37b243..1dceb2cb 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { Base, ModalProps } from './Base';
+import { Base, ModalProps, BaseModalHandle } from './Base';
 
-export const Modal: React.FC<ModalProps> = (props) => (
+export const Modal = React.forwardRef<BaseModalHandle, ModalProps>((props, ref) => (
   <Base
     baseClass="Modal"
     btnVariant={props.vertical === false ? undefined : 'outline'}
+    ref={ref}
     {...props}
   />
-);
+));
diff --git a/src/components/Modal/Popup.tsx b/src/components/Modal/Popup.tsx
index 34f37dbf..802a1761 100644
--- a/src/components/Modal/Popup.tsx
+++ b/src/components/Modal/Popup.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Base, ModalProps } from './Base';
+import { Base, ModalProps, BaseModalHandle } from './Base';
 
-export const Popup: React.FC<ModalProps> = (props) => (
-  <Base baseClass="Popup" overflow {...props} />
-);
+export const Popup = React.forwardRef<BaseModalHandle, ModalProps>((props, ref) => (
+  <Base baseClass="Popup" overflow ref={ref} {...props} />
+));
diff --git a/src/components/Modal/style.less b/src/components/Modal/style.less
index 36c8e1c2..1b7cea8a 100644
--- a/src/components/Modal/style.less
+++ b/src/components/Modal/style.less
@@ -144,13 +144,11 @@
 
 .Popup-header {
   position: relative;
-  margin-top: 4px;
   padding: @popup-header-padding;
 }
 
 .Modal-title,
 .Popup-title {
-  min-height: 25px;
   margin: @popup-title-margin;
   color: @popup-title-color;
   font-size: @popup-title-font-size;
@@ -169,9 +167,12 @@
   top: 12px;
 }
 
+.Popup-title {
+  min-height: 25px;
+}
+
 .Popup-close {
-  top: 50%;
-  transform: translateY(-50%);
+  top: 20px;
 }
 
 .Popup-body {
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index e6132727..67a08b09 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import { IconButton, IconButtonProps } from '../IconButton';
 
-export type NavbarProps = {
+export interface NavbarProps {
   title: string;
   className?: string;
   logo?: string;
   leftContent?: IconButtonProps;
   rightContent?: IconButtonProps[];
-};
+}
 
-export const Navbar: React.FC<NavbarProps> = (props) => {
+export const Navbar = (props: NavbarProps) => {
   const { className, title, logo, leftContent, rightContent = [] } = props;
   return (
     <header className={clsx('Navbar', className)}>
diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
index 714d3875..ed0186f6 100644
--- a/src/components/Popover/index.tsx
+++ b/src/components/Popover/index.tsx
@@ -10,9 +10,10 @@ export type PopoverProps = {
   active: boolean;
   target: HTMLElement;
   onClose: () => void;
+  children?: React.ReactNode;
 };
 
-export const Popover: React.FC<PopoverProps> = (props) => {
+export const Popover = (props: PopoverProps) => {
   const { className, active, target, children, onClose } = props;
   const wrapper = useClickOutside(onClose, 'mousedown');
   const { didMount, isShow } = useMount({ active, ref: wrapper });
diff --git a/src/components/Portal/index.ts b/src/components/Portal/index.ts
index cec10050..e625d248 100644
--- a/src/components/Portal/index.ts
+++ b/src/components/Portal/index.ts
@@ -6,6 +6,7 @@ type Container = React.RefObject<any> | Element | (() => Element) | null;
 export interface PortalProps {
   container?: Container;
   onRendered?: () => void;
+  children?: React.ReactNode;
 }
 
 function getEl(el: Container) {
@@ -17,7 +18,7 @@ function getEl(el: Container) {
   return typeof el === 'function' ? el() : el.current || el;
 }
 
-export const Portal: React.FC<PortalProps> = (props) => {
+export const Portal = (props: PortalProps) => {
   const { children, container = document.body, onRendered } = props;
   const [mountNode, setMountNode] = useState<Element | null>(null);
 
diff --git a/src/components/QuickReplies/style.less b/src/components/QuickReplies/style.less
index d4265fc1..3728f18f 100644
--- a/src/components/QuickReplies/style.less
+++ b/src/components/QuickReplies/style.less
@@ -62,7 +62,7 @@
     align-items: center;
   }
   &-img {
-    max-height: 16px;
+    max-height: 13px;
   }
   &-inner > .Icon,
   &-img {
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index 52be7f9c..62d4f0f5 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -8,7 +8,7 @@ export type RadioProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: RadioValue;
 };
 
-export const Radio: React.FC<RadioProps> = (props) => {
+export const Radio = (props: RadioProps) => {
   const { className, label, checked, disabled, onChange, ...other } = props;
 
   return (
diff --git a/src/components/Radio/RadioGroup.tsx b/src/components/Radio/RadioGroup.tsx
index 46c1eec9..863fc2be 100644
--- a/src/components/Radio/RadioGroup.tsx
+++ b/src/components/Radio/RadioGroup.tsx
@@ -12,7 +12,7 @@ export type RadioGroupProps = {
   onChange: (value: RadioValue, event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const RadioGroup: React.FC<RadioGroupProps> = (props) => {
+export const RadioGroup = (props: RadioGroupProps) => {
   const { className, options, value, name, disabled, block, onChange } = props;
   return (
     <div className={clsx('RadioGroup', { 'RadioGroup--block': block }, className)}>
diff --git a/src/components/RateActions/index.tsx b/src/components/RateActions/index.tsx
index 119b9c2a..954c9b7f 100644
--- a/src/components/RateActions/index.tsx
+++ b/src/components/RateActions/index.tsx
@@ -6,13 +6,13 @@ import { useLocale } from '../LocaleProvider';
 const UP = 'up';
 const DOWN = 'down';
 
-export type RateActionsProps = {
+export interface RateActionsProps {
   upTitle?: string;
   downTitle?: string;
   onClick: (value: string) => void;
-};
+}
 
-export const RateActions: React.FC<RateActionsProps> = (props) => {
+export const RateActions = (props: RateActionsProps) => {
   const { trans } = useLocale('RateActions', {
     up: '赞同',
     down: '反对',
diff --git a/src/components/ScrollView/Item.tsx b/src/components/ScrollView/Item.tsx
index f4790d4a..17ef769d 100644
--- a/src/components/ScrollView/Item.tsx
+++ b/src/components/ScrollView/Item.tsx
@@ -3,17 +3,18 @@ import clsx from 'clsx';
 
 export type ScrollViewEffect = 'slide' | 'fade' | '';
 
-export type ScrollViewItemProps = {
+export interface ScrollViewItemProps {
   item: any;
   effect?: ScrollViewEffect;
   onIntersect?: (item?: any, entry?: IntersectionObserverEntry) => boolean | void;
-};
+  children?: React.ReactNode;
+}
 
 const observerOptions = {
   threshold: [0, 0.1],
 };
 
-export const Item: React.FC<ScrollViewItemProps> = (props) => {
+export const Item = (props: ScrollViewItemProps) => {
   const { item, effect, children, onIntersect } = props;
   const itemRef = useRef<HTMLDivElement>(null);
 
diff --git a/src/components/SendConfirm/SendConfirm.tsx b/src/components/SendConfirm/SendConfirm.tsx
index c7bee48f..d6987923 100644
--- a/src/components/SendConfirm/SendConfirm.tsx
+++ b/src/components/SendConfirm/SendConfirm.tsx
@@ -9,7 +9,7 @@ export type SendConfirmProps = {
   onSend: () => void;
 };
 
-export const SendConfirm: React.FC<SendConfirmProps> = (props) => {
+export const SendConfirm = (props: SendConfirmProps) => {
   const { file, onCancel, onSend } = props;
   const [img, setImg] = useState('');
   const { trans } = useLocale('SendConfirm');
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
new file mode 100644
index 00000000..45e5534f
--- /dev/null
+++ b/src/components/Skeleton/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export interface SkeletonProps {
+  className?: string;
+  w?: React.CSSProperties['width'];
+  h?: React.CSSProperties['height'];
+  mb?: React.CSSProperties['marginBottom'];
+  style?: React.CSSProperties;
+  r?: 'sm' | 'md' | 'xl' | 'none';
+}
+
+export const Skeleton = ({ className, w, h, mb, r, style }: SkeletonProps) => {
+  return (
+    <div
+      className={clsx('Skeleton', r && `Skeleton--r-${r}`, className)}
+      style={{ ...style, width: w, height: h, marginBottom: mb }}
+    />
+  );
+};
diff --git a/src/components/Skeleton/style.less b/src/components/Skeleton/style.less
new file mode 100644
index 00000000..dde95fdc
--- /dev/null
+++ b/src/components/Skeleton/style.less
@@ -0,0 +1,26 @@
+@keyframes shimmer {
+  0% {
+    background-position: -468px 0;
+  }
+  to {
+    background-position: 468px 0;
+  }
+}
+
+.Skeleton {
+  background: linear-gradient(90deg, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
+  background-size: 800px 104px;
+  animation: 1.25s linear infinite forwards shimmer;
+}
+
+.Skeleton--r-sm {
+  border-radius: 2px;
+}
+
+.Skeleton--r-md {
+  border-radius: 6px;
+}
+
+.Skeleton--r-xl {
+  border-radius: 32px;
+}
diff --git a/src/components/Tabs/Tab.tsx b/src/components/Tabs/Tab.tsx
index f69da906..b294dd1c 100644
--- a/src/components/Tabs/Tab.tsx
+++ b/src/components/Tabs/Tab.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 export interface TabProps {
   label: string;
+  children?: React.ReactNode;
 }
 
-export const Tab: React.FC<TabProps> = ({ children }) => <div>{children}</div>;
+export const Tab = ({ children }: TabProps) => <div>{children}</div>;
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 417eab96..aefa56bc 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -8,9 +8,10 @@ type TabItemProps = {
   index: number;
   tabIndex: number;
   onClick: (index: number, event: React.MouseEvent) => void;
+  children?: React.ReactNode;
 };
 
-const TabItem: React.FC<TabItemProps> = (props) => {
+const TabItem = (props: TabItemProps) => {
   const { active, index, children, onClick, ...others } = props;
 
   function handleClick(e: React.MouseEvent) {
@@ -33,12 +34,13 @@ const TabItem: React.FC<TabItemProps> = (props) => {
   );
 };
 
-type TabsPaneProps = {
+interface TabsPaneProps {
   active: boolean;
   id?: string;
-};
+  children?: React.ReactNode;
+}
 
-const TabsPane: React.FC<TabsPaneProps> = (props) => {
+const TabsPane = (props: TabsPaneProps) => {
   const { active, children, ...others } = props;
 
   return (
@@ -54,9 +56,10 @@ export type TabsProps = {
   scrollable?: boolean;
   hideNavIfOnlyOne?: boolean;
   onChange?: (index: number, event: React.MouseEvent) => void;
+  children?: React.ReactNode;
 };
 
-export const Tabs: React.FC<TabsProps> = (props) => {
+export const Tabs = (props: TabsProps) => {
   const { className, index: oIndex = 0, scrollable, hideNavIfOnlyOne, children, onChange } = props;
   const [pointerStyles, setPointerStyles] = useState({});
   const [index, setIndex] = useState(oIndex || 0);
diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
index eb4dfe40..aa9086eb 100644
--- a/src/components/Text/index.tsx
+++ b/src/components/Text/index.tsx
@@ -7,9 +7,10 @@ export interface TextProps {
   align?: 'left' | 'center' | 'right' | 'justify';
   breakWord?: boolean;
   truncate?: boolean | number;
+  children?: React.ReactNode;
 }
 
-export const Text: React.FC<TextProps> = (props) => {
+export const Text = (props: TextProps) => {
   const { as: Element = 'div', className, align, breakWord, truncate, children, ...other } = props;
   const ellipsis = Number.isInteger(truncate);
 
diff --git a/src/components/Time/Time.tsx b/src/components/Time/Time.tsx
index 7dd3c3e0..e463bb3a 100644
--- a/src/components/Time/Time.tsx
+++ b/src/components/Time/Time.tsx
@@ -6,7 +6,7 @@ export interface TimeProps {
   date: IDate;
 }
 
-export const Time: React.FC<TimeProps> = ({ date }) => {
+export const Time = ({ date }: TimeProps) => {
   const { trans } = useLocale('Time');
 
   return (
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 0124f00c..99d75ebd 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -5,7 +5,7 @@ import { Icon } from '../Icon';
 export interface ToastProps {
   content: React.ReactNode;
   type?: 'success' | 'error' | 'loading';
-  duration: number;
+  duration?: number;
   onUnmount?: () => void;
 }
 
@@ -22,8 +22,8 @@ function renderIcon(type: ToastProps['type']) {
   }
 }
 
-export const Toast: React.FC<ToastProps> = (props) => {
-  const { content, type, duration, onUnmount } = props;
+export const Toast = (props: ToastProps) => {
+  const { content, type, duration = 2000, onUnmount } = props;
   const [show, setShow] = useState(false);
 
   useEffect(() => {
diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
index 449c25ca..ab8ae884 100644
--- a/src/components/Toast/index.tsx
+++ b/src/components/Toast/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { mountComponent } from '../../utils/mountComponent';
 import { Toast, ToastProps } from './Toast';
 
-function show(content: string, type: ToastProps['type'], duration = 2000) {
+function show(content: string, type?: ToastProps['type'], duration?: number) {
   mountComponent(<Toast content={content} type={type} duration={duration} />);
 }
 
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index 3ad5c08c..75a7f034 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -6,7 +6,7 @@ export interface ToolbarProps {
   onClick: (item: ToolbarItemProps, event: React.MouseEvent) => void;
 }
 
-export const Toolbar: React.FC<ToolbarProps> = (props) => {
+export const Toolbar = (props: ToolbarProps) => {
   const { items, onClick } = props;
   return (
     <div className="Toolbar">
diff --git a/src/components/Toolbar/ToolbarButton.tsx b/src/components/Toolbar/ToolbarButton.tsx
index b05220ee..8caa9038 100644
--- a/src/components/Toolbar/ToolbarButton.tsx
+++ b/src/components/Toolbar/ToolbarButton.tsx
@@ -15,7 +15,7 @@ export interface ToolbarButtonProps {
   onClick: (item: ToolbarItemProps, event: React.MouseEvent) => void;
 }
 
-export const ToolbarButton: React.FC<ToolbarButtonProps> = (props) => {
+export const ToolbarButton = (props: ToolbarButtonProps) => {
   const { item, onClick } = props;
   const { type, icon, img, title } = item;
 
diff --git a/src/components/Toolbar/style.less b/src/components/Toolbar/style.less
index 28a1d764..7d9f8311 100644
--- a/src/components/Toolbar/style.less
+++ b/src/components/Toolbar/style.less
@@ -17,6 +17,7 @@
   width: 76px;
   padding: 6px;
   border: 0;
+  border-radius: 0;
   background: transparent;
   color: var(--gray-2);
   vertical-align: top;
@@ -64,6 +65,9 @@
 
 .Toolbar-btnText {
   display: block;
-  margin-top: 6px;
+  margin-top: 8px;
   font-size: 14px;
+  line-height: 1.1;
+  white-space: initial;
+  word-wrap: break-word;
 }
diff --git a/src/components/Typing/style.less b/src/components/Typing/style.less
index d6f4ecac..70788220 100644
--- a/src/components/Typing/style.less
+++ b/src/components/Typing/style.less
@@ -5,40 +5,48 @@
   transition: opacity 0.1s;
 }
 
+@frame-time: 0.18s;
+
 .Typing-dot {
   display: inline-block;
-  width: 5px;
-  height: 5px;
-  margin-left: 9px;
+  width: 6px;
+  height: 6px;
+  margin-left: 6px;
   border-radius: 50%;
-  animation: typing-dot 0.8s linear infinite;
+  animation: typing-dot (@frame-time * 7) linear infinite;
   background: var(--gray-3);
 
   &:nth-child(1) {
     margin: 0;
   }
   &:nth-child(2) {
-    animation-delay: -0.2s;
+    animation-delay: @frame-time;
   }
   &:nth-child(3) {
-    animation-delay: -0.4s;
+    animation-delay: @frame-time * 2;
   }
 }
 
 @keyframes typing-dot {
   0% {
-    transform: scale(0.57);
+    transform: scale(1);
+  }
+  16.67% {
+    transform: scale(0);
   }
-  25% {
-    transform: scale(0.78);
+  33.33% {
+    transform: scale(0);
   }
   50% {
+    transform: scale(0);
+  }
+  66.67% {
     transform: scale(1);
   }
-  75% {
-    transform: scale(0.78);
+  83.33% {
+    transform: scale(1);
   }
   100% {
-    transform: scale(0.57);
+    transform: scale(1);
   }
 }
diff --git a/src/components/Video/index.tsx b/src/components/Video/index.tsx
index 35a35ce5..43ccd036 100644
--- a/src/components/Video/index.tsx
+++ b/src/components/Video/index.tsx
@@ -13,7 +13,7 @@ export type VideoProps = React.VideoHTMLAttributes<HTMLVideoElement> & {
   onCoverLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 };
 
-export const Video: React.FC<VideoProps> = (props) => {
+export const Video = (props: VideoProps) => {
   const {
     className,
     src,
diff --git a/src/hooks/useMount.ts b/src/hooks/useMount.ts
index 3f5bbe5d..fe5aeb99 100644
--- a/src/hooks/useMount.ts
+++ b/src/hooks/useMount.ts
@@ -12,11 +12,15 @@ function useMount({ active = false, ref, delay = 300 }: UseMountOptions) {
   const [didMount, setDidMount] = useState(false);
   const timeout = useRef<ReturnType<typeof setTimeout>>();
 
+  const clear = () => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+  };
+
   useEffect(() => {
     if (active) {
-      if (timeout.current) {
-        clearTimeout(timeout.current);
-      }
+      clear();
       setDidMount(active);
     } else {
       setIsShow(active);
@@ -24,6 +28,8 @@ function useMount({ active = false, ref, delay = 300 }: UseMountOptions) {
         setDidMount(active);
       }, delay);
     }
+
+    return clear;
   }, [active, delay]);
 
   useEffect(() => {
diff --git a/src/index.ts b/src/index.ts
index 35d445b8..93c4cc7a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -107,6 +107,8 @@ export { Search } from './components/Search';
 export type { SearchProps } from './components/Search';
 export { Select } from './components/Select';
 export type { SelectProps } from './components/Select';
+export { Skeleton } from './components/Skeleton';
+export type { SkeletonProps } from './components/Skeleton';
 export { Stepper, Step } from './components/Stepper';
 export type { StepperProps, StepProps } from './components/Stepper';
 export { Tabs, Tab } from './components/Tabs';
diff --git a/src/styles/index.less b/src/styles/index.less
index 2755fb9a..c2eb4cfa 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -38,6 +38,7 @@
 @import '../components/ScrollView/style';
 @import '../components/Search/style';
 @import '../components/Select/style';
+@import '../components/Skeleton/style';
 @import '../components/Stepper/style';
 @import '../components/Tabs/style';
 @import '../components/Tag/style';
diff --git a/src/styles/var.less b/src/styles/var.less
index 874b2a67..4fe2f306 100644
--- a/src/styles/var.less
+++ b/src/styles/var.less
@@ -318,7 +318,7 @@
 @popup-max-height: 70vh;
 @popup-wide-width: 480px;
 
-@popup-header-padding: 15px 40px;
+@popup-header-padding: 18px 40px 10px;
 
 @popup-title-margin: @modal-title-margin;
 @popup-title-color: @modal-title-color;
diff --git a/src/utils/isSafari.ts b/src/utils/isSafari.ts
deleted file mode 100644
index 4dc84fac..00000000
--- a/src/utils/isSafari.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default () => /^((?!chrome|android|crios|fxios).)*safari/i.test(navigator.userAgent);
diff --git a/src/utils/mountComponent.ts b/src/utils/mountComponent.ts
index e1996430..5c53168e 100644
--- a/src/utils/mountComponent.ts
+++ b/src/utils/mountComponent.ts
@@ -8,7 +8,9 @@ export function mountComponent(Comp: React.ReactElement, root = document.body) {
   const Clone = React.cloneElement(Comp, {
     onUnmount() {
       ReactDOM.unmountComponentAtNode(div);
-      root.removeChild(div);
+      if (root && div) {
+        root.removeChild(div);
+      }
     },
   });
 
diff --git a/src/utils/ua.ts b/src/utils/ua.ts
new file mode 100644
index 00000000..731acb30
--- /dev/null
+++ b/src/utils/ua.ts
@@ -0,0 +1,18 @@
+const ua = navigator.userAgent;
+
+export function isIOS() {
+  return /iPad|iPhone|iPod/.test(ua);
+}
+
+export function isSafari() {
+  return /^((?!chrome|android|crios|fxios).)*safari/i.test(ua);
+}
+
+export function isSafariOrIOS11() {
+  return ua.includes('Safari/') || /OS 11_[0-3]\D/.test(ua);
+}
+
+export function getIOSMajorVersion() {
+  const v = ua.match(/OS (\d+)_/);
+  return v ? +v[1] : 0;
+}