diff --git a/dist/components/Button/button.d.ts b/dist/components/Button/button.d.ts
index 522ba29..57dc580 100644
--- a/dist/components/Button/button.d.ts
+++ b/dist/components/Button/button.d.ts
@@ -15,15 +15,17 @@ interface BaseButtonProps {
   /**点击跳转的地址，指定此属性 button 的行为和 a 链接一致 */
   href?: string
 }
+type NativeButtonProps = BaseButtonProps &
+  React.ButtonHTMLAttributes<HTMLElement>
 type AnchorButtonProps = BaseButtonProps &
   React.ButtonHTMLAttributes<HTMLElement>
-export type ButtonProps = Partial<AnchorButtonProps>
+export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>
 /**
  * >按钮用于开始一个即时操作。
  *
  * ### 何时使用
  * 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
- * 在violetUI我们提供了7种按钮
+ * 在violet-design我们提供了6种按钮
  *
  * - 默认按钮：用于没有主次之分的一组行动点。
  * - 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
@@ -31,12 +33,14 @@ export type ButtonProps = Partial<AnchorButtonProps>
  * - 链接按钮：一般用于链接，即导航至某位置。
  * - 图标按钮：可以通过Icon组件，为按钮提供各式各样的图标选择。
  * - 虚线按钮：常用于添加操作。
- * - 禁用按钮：行动点不可用的时候，一般需要文案解释。
  *
  *
- * 除了默认按钮尺寸，还提供了两种尺寸配合使用
+ * 除了默认Mid Button尺寸，还提供了两种尺寸可供自由组合
  * - Large Button
  * - Samll Button
+ *
+ * 所有按钮都提供了disabled属性，用于行动点不可用的时候，一般需要文案解释。
+ *
  */
 export declare const Button: {
   (props: ButtonProps): JSX.Element
diff --git a/dist/components/DatePicker/DatePicker.d.ts b/dist/components/DatePicker/DatePicker.d.ts
index 3ebc8b0..3200f57 100644
--- a/dist/components/DatePicker/DatePicker.d.ts
+++ b/dist/components/DatePicker/DatePicker.d.ts
@@ -51,6 +51,12 @@ export type Props = DatePickerProps &
   PickerProps
 /**
  * 输入或选择日期/时间的控件。
+ * - 支持日期、时间、日期时间选择
+ * - 支持用户手动输入日期&时间，并完成数值校验
+ * - 支持设定不可选日期
+ * - 支持设定日期展示格式
+ * - 支持国际化
+ * - 支持定制日期单元格样式及日期单元格内容
  */
 export declare class DatePicker extends React.Component<Props, State> {
   static defaultProps: {
diff --git a/dist/components/Form/form.d.ts b/dist/components/Form/form.d.ts
index 83cefea..b44e467 100644
--- a/dist/components/Form/form.d.ts
+++ b/dist/components/Form/form.d.ts
@@ -22,9 +22,6 @@ export type IFormRef = Omit<
   'fields' | 'dispatch' | 'form'
 >
 export declare const FormContext: React.Context<IFormContext>
-/**
- * >高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
-// /* eslint-disable react/display-name */
 /**
  * > 表单控件, 带数据与管理功能, 包含数据录入、校验等
  *
diff --git a/dist/components/Icon/icon.d.ts b/dist/components/Icon/icon.d.ts
index 66e79a1..dcad0bf 100644
--- a/dist/components/Icon/icon.d.ts
+++ b/dist/components/Icon/icon.d.ts
@@ -1,24 +1,16 @@
-import { FC } from 'react'
-import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
-export type ThemeProps =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'info'
-  | 'warning'
-  | 'danger'
-  | 'light'
-  | 'dark'
+import { FC } from 'react';
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+export type ThemeProps = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark';
 export interface IconProps extends FontAwesomeIconProps {
-  /** 支持框架主题 根据主题显示不同的颜色 */
-  theme?: ThemeProps
+    /** 支持框架主题 根据主题显示不同的颜色 */
+    theme?: ThemeProps;
 }
 /**
  * 提供了一套常用的图标集合 基于 react-fontawesome。
  *
- * 支持 react-fontawesome的所有属性 可以在这里查询 https://github.com/FortAwesome/react-fontawesome#basic
+ * ###何时使用
+ *需要使用图标表达或装饰时
  *
- * 支持 fontawesome 所有 free-solid-icons，可以在这里查看所有图标 https://fontawesome.com/icons?d=gallery&s=solid&m=free
  */
-export declare const Icon: FC<IconProps>
-export default Icon
+export declare const Icon: FC<IconProps>;
+export default Icon;
diff --git a/dist/components/Icon/index.d.ts b/dist/components/Icon/index.d.ts
index e390c09..f430f8d 100644
--- a/dist/components/Icon/index.d.ts
+++ b/dist/components/Icon/index.d.ts
@@ -1,2 +1,2 @@
-import Icon from './icon'
-export default Icon
+import Icon from './icon';
+export default Icon;
diff --git a/dist/components/Input/index.d.ts b/dist/components/Input/index.d.ts
index 138b3f0..e638371 100644
--- a/dist/components/Input/index.d.ts
+++ b/dist/components/Input/index.d.ts
@@ -1,2 +1,2 @@
-import Input from './input'
-export default Input
+import Input from './input';
+export default Input;
diff --git a/dist/components/Input/input.d.ts b/dist/components/Input/input.d.ts
index 67659ea..2797a7b 100644
--- a/dist/components/Input/input.d.ts
+++ b/dist/components/Input/input.d.ts
@@ -1,19 +1,18 @@
-import React, { ReactElement, InputHTMLAttributes, ChangeEvent } from 'react'
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
-export type InputSize = 'lg' | 'sm' | 'md'
-export interface InputProps
-  extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
-  /**是否禁用 Input */
-  disabled?: boolean
-  /**设置 input 大小，支持 lg、sm、md */
-  size?: InputSize
-  /**添加图标，在右侧悬浮添加一个图标，用于提示 */
-  icon?: IconProp
-  /**添加前缀 用于配置一些固定组合 */
-  prepend?: string | ReactElement
-  /**添加后缀 用于配置一些固定组合 */
-  append?: string | ReactElement
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+import React, { ReactElement, InputHTMLAttributes, ChangeEvent } from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+export type InputSize = 'lg' | 'sm' | 'md';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
+    /**是否禁用 Input */
+    disabled?: boolean;
+    /**设置 input 大小，支持 lg、sm、md */
+    size?: InputSize;
+    /**添加图标，在右侧悬浮添加一个图标，用于提示 */
+    icon?: IconProp;
+    /**添加前缀 用于配置一些固定组合 */
+    prepend?: string | ReactElement;
+    /**添加后缀 用于配置一些固定组合 */
+    append?: string | ReactElement;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 /**
  * Input 输入框 通过鼠标或键盘输入内容，是最基础的表单域的包装。
@@ -23,7 +22,5 @@ export interface InputProps
  *
  * 支持 HTMLInput 的所有基本属性
  */
-export declare const Input: React.ForwardRefExoticComponent<
-  InputProps & React.RefAttributes<HTMLInputElement>
->
-export default Input
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;
diff --git a/dist/components/InputNumber/index.d.ts b/dist/components/InputNumber/index.d.ts
index 2333cc4..dba8373 100644
--- a/dist/components/InputNumber/index.d.ts
+++ b/dist/components/InputNumber/index.d.ts
@@ -1,2 +1,2 @@
-import InputNumber from './inputNumber'
-export default InputNumber
+import InputNumber from './inputNumber';
+export default InputNumber;
diff --git a/dist/components/InputNumber/inputNumber.d.ts b/dist/components/InputNumber/inputNumber.d.ts
index 4f67c9a..dbc5bad 100644
--- a/dist/components/InputNumber/inputNumber.d.ts
+++ b/dist/components/InputNumber/inputNumber.d.ts
@@ -1,31 +1,31 @@
-import React from 'react'
-type Status = 'default' | 'error' | 'warning' | 'success'
+import React from 'react';
+type Status = 'default' | 'error' | 'warning' | 'success';
 export interface IInputNumberProps {
-  placeholder?: string
-  /** 自动获取焦点 */
-  autoFocus?: boolean
-  /** 是否显示增减按钮 */
-  controls?: boolean
-  /** 禁用 */
-  disabled?: boolean
-  /** 是否启用键盘快捷行为 */
-  keyboard?: boolean
-  /** 最大值 */
-  max?: number
-  /** 最小值 */
-  min?: number
-  /** 设置校验状态 */
-  status?: Status
-  /** 输入框大小 */
-  size?: 'default' | 'small' | 'large'
-  /** 每次改变步数 */
-  step?: number
-  /** 当前值 */
-  value?: string
-  /** 变化回调 */
-  onChange?: (value: string) => void
-  /** 按下回车的回调 */
-  onPressEnter?: () => void
+    placeholder?: string;
+    /** 自动获取焦点 */
+    autoFocus?: boolean;
+    /** 是否显示增减按钮 */
+    controls?: boolean;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 是否启用键盘快捷行为 */
+    keyboard?: boolean;
+    /** 最大值 */
+    max?: number;
+    /** 最小值 */
+    min?: number;
+    /** 设置校验状态 */
+    status?: Status;
+    /** 输入框大小 */
+    size?: 'default' | 'small' | 'large';
+    /** 每次改变步数 */
+    step?: number;
+    /** 当前值 */
+    value?: string;
+    /** 变化回调 */
+    onChange?: (value: string) => void;
+    /** 按下回车的回调 */
+    onPressEnter?: () => void;
 }
 /**
  * > 通过鼠标或键盘，输入范围内的数值。
@@ -33,5 +33,5 @@ export interface IInputNumberProps {
  * ### 何时使用
  * 当需要获取标准数值时。
  */
-export declare const InputNumber: React.FC<IInputNumberProps>
-export default InputNumber
+export declare const InputNumber: React.FC<IInputNumberProps>;
+export default InputNumber;
diff --git a/dist/components/Menu/index.d.ts b/dist/components/Menu/index.d.ts
index 1196893..184b683 100644
--- a/dist/components/Menu/index.d.ts
+++ b/dist/components/Menu/index.d.ts
@@ -1,10 +1,10 @@
-import { FC } from 'react'
-import { IMenuProps } from './menu'
-import { ISubMenuProps } from './subMenu/subMenu'
-import { IMenuItemProps } from './menuItem'
+import { FC } from 'react';
+import { IMenuProps } from './menu';
+import { ISubMenuProps } from './subMenu/subMenu';
+import { IMenuItemProps } from './menuItem';
 export type IMenuComponent = FC<IMenuProps> & {
-  Item: FC<IMenuItemProps>
-  SubMenu: FC<ISubMenuProps>
-}
-declare const TransMenu: IMenuComponent
-export default TransMenu
+    Item: FC<IMenuItemProps>;
+    SubMenu: FC<ISubMenuProps>;
+};
+declare const TransMenu: IMenuComponent;
+export default TransMenu;
diff --git a/dist/components/Menu/menu.d.ts b/dist/components/Menu/menu.d.ts
index 2b10565..dcc7908 100644
--- a/dist/components/Menu/menu.d.ts
+++ b/dist/components/Menu/menu.d.ts
@@ -1,25 +1,25 @@
-import React, { ReactNode } from 'react'
-type selectCallback = (selectIndex: string) => void
-type Mode = 'vertical' | 'horizontal'
+import React, { ReactNode } from 'react';
+type selectCallback = (selectIndex: string) => void;
+type Mode = 'vertical' | 'horizontal';
 export interface IMenuProps {
-  /** 添加自定义类名 */
-  className?: string
-  /** 设置点击触发的回调函数 */
-  onSelect?: selectCallback
-  /** 自定义样式 */
-  style?: React.CSSProperties
-  /** 设置默认高亮选项 */
-  defaultIndex?: string
-  /** 横向 or 纵向 */
-  mode?: Mode
-  children?: ReactNode
+    /** 添加自定义类名 */
+    className?: string;
+    /** 设置点击触发的回调函数 */
+    onSelect?: selectCallback;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 设置默认高亮选项 */
+    defaultIndex?: string;
+    /** 横向 or 纵向 */
+    mode?: Mode;
+    children?: ReactNode;
 }
 export interface IMenuContext {
-  index: string
-  onSelect?: selectCallback
-  mode: Mode
+    index: string;
+    onSelect?: selectCallback;
+    mode: Mode;
 }
-export declare const MenuContext: React.Context<IMenuContext>
+export declare const MenuContext: React.Context<IMenuContext>;
 /**
  * > 为页面和功能提供导航的菜单列表。
  *
@@ -31,5 +31,5 @@ export declare const MenuContext: React.Context<IMenuContext>
  * ### 开发者注意事项
  * Menu组件的使用，需搭配 `Menu.Item`/`Menu.SubMenu` 作为子组件来进行开发
  */
-export declare const Menu: React.FC<IMenuProps>
-export default Menu
+export declare const Menu: React.FC<IMenuProps>;
+export default Menu;
diff --git a/dist/components/Menu/menuItem.d.ts b/dist/components/Menu/menuItem.d.ts
index 7bfd273..dfe50e8 100644
--- a/dist/components/Menu/menuItem.d.ts
+++ b/dist/components/Menu/menuItem.d.ts
@@ -1,10 +1,10 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode } from 'react';
 export interface IMenuItemProps {
-  style?: React.CSSProperties
-  className?: string
-  disabled?: boolean
-  index?: string
-  children?: ReactNode
+    style?: React.CSSProperties;
+    className?: string;
+    disabled?: boolean;
+    index?: string;
+    children?: ReactNode;
 }
-export declare const MenuItem: React.FC<IMenuItemProps>
-export default MenuItem
+export declare const MenuItem: React.FC<IMenuItemProps>;
+export default MenuItem;
diff --git a/dist/components/Menu/subMenu/subMenu.d.ts b/dist/components/Menu/subMenu/subMenu.d.ts
index e3ae645..8523e97 100644
--- a/dist/components/Menu/subMenu/subMenu.d.ts
+++ b/dist/components/Menu/subMenu/subMenu.d.ts
@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode } from 'react';
 export interface ISubMenuProps {
-  index?: string
-  title: string
-  className?: string
-  children?: ReactNode
+    index?: string;
+    title: string;
+    className?: string;
+    children?: ReactNode;
 }
-export declare const SubMenu: React.FC<ISubMenuProps & React.PropsWithChildren>
-export default SubMenu
+export declare const SubMenu: React.FC<ISubMenuProps & React.PropsWithChildren>;
+export default SubMenu;
diff --git a/dist/components/Progress/index.d.ts b/dist/components/Progress/index.d.ts
index 2fb7555..1cba8de 100644
--- a/dist/components/Progress/index.d.ts
+++ b/dist/components/Progress/index.d.ts
@@ -1,2 +1,2 @@
-import Progress from './progress'
-export default Progress
+import Progress from './progress';
+export default Progress;
diff --git a/dist/components/Progress/progress.d.ts b/dist/components/Progress/progress.d.ts
index 435dcc7..57ad250 100644
--- a/dist/components/Progress/progress.d.ts
+++ b/dist/components/Progress/progress.d.ts
@@ -1,29 +1,29 @@
-import React, { ReactNode } from 'react'
-export type ProgressType = 'line' | 'circle'
-export type ProgressStatus = 'success' | 'exception' | 'normal' | 'active'
-export type ProgressSize = 'lg' | 'md' | 'sm'
+import React, { ReactNode } from 'react';
+export type ProgressType = 'line' | 'circle';
+export type ProgressStatus = 'success' | 'exception' | 'normal' | 'active';
+export type ProgressSize = 'lg' | 'md' | 'sm';
 export interface ProgressProps {
-  /**百分比*/
-  percent?: number
-  /**是否呈现进度和状态标志*/
-  showInfo?: boolean
-  /**进度条状态*/
-  status?: ProgressStatus
-  /**进度条颜色*/
-  strokeColor?: string
-  /**stroke-linecap的样式*/
-  strokeLinecap?: string
-  /**是否已经完成（达到100%）*/
-  success?: boolean
-  /**圆环特有属性：内部圆环颜色*/
-  innerColor?: string
-  /**进度条样式*/
-  type?: ProgressType
-  /**大小*/
-  size?: ProgressSize
-  /**类名*/
-  className?: string
-  children?: ReactNode
+    /**百分比*/
+    percent?: number;
+    /**是否呈现进度和状态标志*/
+    showInfo?: boolean;
+    /**进度条状态*/
+    status?: ProgressStatus;
+    /**进度条颜色*/
+    strokeColor?: string;
+    /**stroke-linecap的样式*/
+    strokeLinecap?: string;
+    /**是否已经完成（达到100%）*/
+    success?: boolean;
+    /**圆环特有属性：内部圆环颜色*/
+    innerColor?: string;
+    /**进度条样式*/
+    type?: ProgressType;
+    /**大小*/
+    size?: ProgressSize;
+    /**类名*/
+    className?: string;
+    children?: ReactNode;
 }
 /**
  * > 展示工作流的进度
@@ -33,5 +33,5 @@ export interface ProgressProps {
  *
  *
  */
-export declare const Progress: React.FC<ProgressProps>
-export default Progress
+export declare const Progress: React.FC<ProgressProps>;
+export default Progress;
diff --git a/dist/components/Radio/index.d.ts b/dist/components/Radio/index.d.ts
index cd8a4df..666bc2f 100644
--- a/dist/components/Radio/index.d.ts
+++ b/dist/components/Radio/index.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const _default: {
-  Radio: import('react').FC<import('./radio').RadioProps>
-  RadioGroup: import('react').FC<import('./radioGroup').RadioGroupProps>
-}
-export default _default
+    Radio: import("react").FC<import("./radio").RadioProps>;
+    RadioGroup: import("react").FC<import("./radioGroup").RadioGroupProps>;
+};
+export default _default;
diff --git a/dist/components/Radio/radio.d.ts b/dist/components/Radio/radio.d.ts
index a54abba..62eeb3e 100644
--- a/dist/components/Radio/radio.d.ts
+++ b/dist/components/Radio/radio.d.ts
@@ -1,21 +1,21 @@
-import React, { ReactNode } from 'react'
-export type RadioType = 'button' | 'dot'
+import React, { ReactNode } from 'react';
+export type RadioType = 'button' | 'dot';
 export interface RadioProps {
-  /**设置类名*/
-  className?: string
-  value?: string
-  key?: string
-  /**是否选中*/
-  checked?: boolean
-  /**是否禁用*/
-  disabled?: boolean
-  children?: ReactNode
-  /**设置radio的样式*/
-  style?: React.CSSProperties
-  /**设置样式*/
-  type?: RadioType
-  /**添加函数*/
-  onChange?: (event: React.FormEvent<HTMLInputElement>) => void
+    /**设置类名*/
+    className?: string;
+    value?: string;
+    key?: string;
+    /**是否选中*/
+    checked?: boolean;
+    /**是否禁用*/
+    disabled?: boolean;
+    children?: ReactNode;
+    /**设置radio的样式*/
+    style?: React.CSSProperties;
+    /**设置样式*/
+    type?: RadioType;
+    /**添加函数*/
+    onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
 }
-export declare const Radio: React.FC<RadioProps>
-export default Radio
+export declare const Radio: React.FC<RadioProps>;
+export default Radio;
diff --git a/dist/components/Radio/radioGroup.d.ts b/dist/components/Radio/radioGroup.d.ts
index 8cb69d2..5978657 100644
--- a/dist/components/Radio/radioGroup.d.ts
+++ b/dist/components/Radio/radioGroup.d.ts
@@ -1,21 +1,21 @@
-import React, { ReactNode } from 'react'
-export type RadioGroupType = 'button' | 'dot'
+import React, { ReactNode } from 'react';
+export type RadioGroupType = 'button' | 'dot';
 export interface RadioGroupProps {
-  /**设置类名*/
-  className?: string
-  value?: string
-  /**默认的值*/
-  defaultValue?: string
-  disabled?: boolean
-  children?: ReactNode
-  /**调整radio大小*/
-  size?: string
-  /**设置radio的样式*/
-  style?: React.CSSProperties
-  /**设置radio的类型*/
-  type?: RadioGroupType
-  /**添加函数*/
-  onChange?: (event: React.FormEvent<HTMLInputElement>) => void
+    /**设置类名*/
+    className?: string;
+    value?: string;
+    /**默认的值*/
+    defaultValue?: string;
+    disabled?: boolean;
+    children?: ReactNode;
+    /**调整radio大小*/
+    size?: string;
+    /**设置radio的样式*/
+    style?: React.CSSProperties;
+    /**设置radio的类型*/
+    type?: RadioGroupType;
+    /**添加函数*/
+    onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
 }
 /**
  * > 单选，由用户从一个或多个选项中做出选择
@@ -27,5 +27,5 @@ export interface RadioGroupProps {
  *
  *
  */
-export declare const RadioGroup: React.FC<RadioGroupProps>
-export default RadioGroup
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+export default RadioGroup;
diff --git a/dist/components/RangeDatePicker/RangeDatePicker.d.ts b/dist/components/RangeDatePicker/RangeDatePicker.d.ts
index 25c6b2f..a8950bb 100644
--- a/dist/components/RangeDatePicker/RangeDatePicker.d.ts
+++ b/dist/components/RangeDatePicker/RangeDatePicker.d.ts
@@ -1,70 +1,62 @@
-import React from 'react'
-import dayjs from 'dayjs'
-import { Merge, Omit } from '../../_utils/DateUtil'
-import { PickerProps, PickerAction } from '../DatePicker/Picker'
-import { FieldType, InputProps } from './RangePickerInput'
-import { Props as ICalendarProps } from '../Calendar/Calendar'
+import React from 'react';
+import dayjs from 'dayjs';
+import { Merge, Omit } from '../../_utils/DateUtil';
+import { PickerProps, PickerAction } from '../DatePicker/Picker';
+import { FieldType, InputProps } from './RangePickerInput';
+import { Props as ICalendarProps } from '../Calendar/Calendar';
 interface RangeDatePickerProps {
-  /** 输入格式 (Day.js format) */
-  dateFormat: string
-  /** 初始日历基准日期（如果未设置开始日期) */
-  initialDate: dayjs.Dayjs
-  /** 初始开始日期 */
-  initialStartDate?: dayjs.Dayjs
-  /** 初始结束日期 */
-  initialEndDate?: dayjs.Dayjs
-  /** 更改触发事件 */
-  onChange?: (start?: dayjs.Dayjs, end?: dayjs.Dayjs) => void
-  /** 开始日期显示文字（可选） */
-  startText: string
-  /** 结束日期显示文字（可选 */
-  endText: string
-  /** 日历包装元素 */
-  wrapper?: (calendar: JSX.Element) => JSX.Element
+    /** 输入格式 (Day.js format) */
+    dateFormat: string;
+    /** 初始日历基准日期（如果未设置开始日期) */
+    initialDate: dayjs.Dayjs;
+    /** 初始开始日期 */
+    initialStartDate?: dayjs.Dayjs;
+    /** 初始结束日期 */
+    initialEndDate?: dayjs.Dayjs;
+    /** 更改触发事件 */
+    onChange?: (start?: dayjs.Dayjs, end?: dayjs.Dayjs) => void;
+    /** 开始日期显示文字（可选） */
+    startText: string;
+    /** 结束日期显示文字（可选 */
+    endText: string;
+    /** 日历包装元素 */
+    wrapper?: (calendar: JSX.Element) => JSX.Element;
 }
 export interface State {
-  start?: dayjs.Dayjs
-  end?: dayjs.Dayjs
-  hoverDate?: dayjs.Dayjs
-  startValue: string
-  endValue: string
-  mode?: FieldType
+    start?: dayjs.Dayjs;
+    end?: dayjs.Dayjs;
+    hoverDate?: dayjs.Dayjs;
+    startValue: string;
+    endValue: string;
+    mode?: FieldType;
 }
-type CalendarProps = Merge<
-  Omit<ICalendarProps, 'base' | 'onChange' | 'selected'>,
-  {
-    showMonthCnt?: number
-  }
->
-export type Props = RangeDatePickerProps &
-  CalendarProps &
-  InputProps &
-  PickerProps
+type CalendarProps = Merge<Omit<ICalendarProps, 'base' | 'onChange' | 'selected'>, {
+    showMonthCnt?: number;
+}>;
+export type Props = RangeDatePickerProps & CalendarProps & InputProps & PickerProps;
 /**
  * 输入或选择日期/时间范围的控件。
  */
 export declare class RangeDatePicker extends React.Component<Props, State> {
-  static defaultProps: {
-    dateFormat: string
-    portal: boolean
-    initialDate: dayjs.Dayjs
-    showMonthCnt: number
-    startText: string
-    endText: string
-    view: string
-  }
-  constructor(props: Props)
-  handleDateChange: (
-    actions: PickerAction
-  ) => (year?: dayjs.Dayjs, month?: dayjs.Dayjs, date?: dayjs.Dayjs) => void
-  handleInputChange: (fieldType: FieldType, value: string) => void
-  handleMouseOver: (date: dayjs.Dayjs) => void
-  handleInputBlur: (fieldType: FieldType, value: string) => void
-  handleCalendarText: (date: dayjs.Dayjs) => string
-  handleCalendarClass: (date: dayjs.Dayjs) => '' | 'calendar__day--range'
-  handleInputClear: (fieldType: FieldType) => void
-  renderRangePickerInput: () => JSX.Element
-  renderCalendar: (actions: PickerAction) => JSX.Element
-  render(): JSX.Element
+    static defaultProps: {
+        dateFormat: string;
+        portal: boolean;
+        initialDate: dayjs.Dayjs;
+        showMonthCnt: number;
+        startText: string;
+        endText: string;
+        view: string;
+    };
+    constructor(props: Props);
+    handleDateChange: (actions: PickerAction) => (year?: dayjs.Dayjs, month?: dayjs.Dayjs, date?: dayjs.Dayjs) => void;
+    handleInputChange: (fieldType: FieldType, value: string) => void;
+    handleMouseOver: (date: dayjs.Dayjs) => void;
+    handleInputBlur: (fieldType: FieldType, value: string) => void;
+    handleCalendarText: (date: dayjs.Dayjs) => string;
+    handleCalendarClass: (date: dayjs.Dayjs) => "" | "calendar__day--range";
+    handleInputClear: (fieldType: FieldType) => void;
+    renderRangePickerInput: () => JSX.Element;
+    renderCalendar: (actions: PickerAction) => JSX.Element;
+    render(): JSX.Element;
 }
-export default RangeDatePicker
+export default RangeDatePicker;
diff --git a/dist/components/RangeDatePicker/RangePickerInput.d.ts b/dist/components/RangeDatePicker/RangePickerInput.d.ts
index 763a9c0..2e54c23 100644
--- a/dist/components/RangeDatePicker/RangePickerInput.d.ts
+++ b/dist/components/RangeDatePicker/RangePickerInput.d.ts
@@ -1,53 +1,39 @@
-import React from 'react'
-import { Props as IPickerInputProps } from '../DatePicker/PickerInput'
-import { Merge, Omit } from '../../_utils/DateUtil'
+import React from 'react';
+import { Props as IPickerInputProps } from '../DatePicker/PickerInput';
+import { Merge, Omit } from '../../_utils/DateUtil';
 export declare enum FieldType {
-  START = 0,
-  END = 1,
+    START = 0,
+    END = 1
 }
 interface RangePickerInputProps {
-  /** 起始日期 */
-  startValue?: string
-  /** 结束日期 */
-  endValue?: string
-  /** 输入改变触发事件 */
-  onChange?: (fieldType: FieldType, value: string) => void
-  /** 获取焦点触发事件 */
-  onBlur?: (fieldType: FieldType, value: string) => void
-  /** 点击事件 */
-  onClick?: (fieldTyp: FieldType) => void
-  /** 清除输入 */
-  onClear?: (fieldType: FieldType) => void
+    /** 起始日期 */
+    startValue?: string;
+    /** 结束日期 */
+    endValue?: string;
+    /** 输入改变触发事件 */
+    onChange?: (fieldType: FieldType, value: string) => void;
+    /** 获取焦点触发事件 */
+    onBlur?: (fieldType: FieldType, value: string) => void;
+    /** 点击事件 */
+    onClick?: (fieldTyp: FieldType) => void;
+    /** 清除输入 */
+    onClear?: (fieldType: FieldType) => void;
 }
-export type InputProps = Merge<
-  Omit<
-    IPickerInputProps,
-    'onBlur' | 'onClear' | 'onChange' | 'onClick' | 'placeholder'
-  >,
-  {
+export type InputProps = Merge<Omit<IPickerInputProps, 'onBlur' | 'onClear' | 'onChange' | 'onClick' | 'placeholder'>, {
     /** 起始输入框placeholder */
-    startPlaceholder?: string
+    startPlaceholder?: string;
     /** 结束输入框placeholder */
-    endPlaceholder?: string
-  }
->
-type Props = RangePickerInputProps & InputProps
+    endPlaceholder?: string;
+}>;
+type Props = RangePickerInputProps & InputProps;
 declare class RangePickerInput extends React.Component<Props> {
-  handleChange: (
-    fieldType: FieldType
-  ) => (e: React.FormEvent<HTMLInputElement>) => void | undefined
-  handleBlur: (
-    fieldType: FieldType
-  ) => (e: React.FormEvent<HTMLInputElement>) => void | undefined
-  handleClick: (fieldType: FieldType) => () => void | undefined
-  handleClear: (fieldType: FieldType) => () => void | undefined
-  renderStartInput: () => JSX.Element
-  renderEndInput: () => JSX.Element
-  renderPickerInput: (
-    fieldType: FieldType,
-    value?: string,
-    placeholder?: string
-  ) => JSX.Element
-  render(): JSX.Element
+    handleChange: (fieldType: FieldType) => (e: React.FormEvent<HTMLInputElement>) => void | undefined;
+    handleBlur: (fieldType: FieldType) => (e: React.FormEvent<HTMLInputElement>) => void | undefined;
+    handleClick: (fieldType: FieldType) => () => void | undefined;
+    handleClear: (fieldType: FieldType) => () => void | undefined;
+    renderStartInput: () => JSX.Element;
+    renderEndInput: () => JSX.Element;
+    renderPickerInput: (fieldType: FieldType, value?: string, placeholder?: string) => JSX.Element;
+    render(): JSX.Element;
 }
-export default RangePickerInput
+export default RangePickerInput;
diff --git a/dist/components/Select/index.d.ts b/dist/components/Select/index.d.ts
index be5f575..6191ddb 100644
--- a/dist/components/Select/index.d.ts
+++ b/dist/components/Select/index.d.ts
@@ -1,2 +1,2 @@
-import Select from './select'
-export default Select
+import Select from './select';
+export default Select;
diff --git a/dist/components/Select/option.d.ts b/dist/components/Select/option.d.ts
index 96b4b50..fff3d98 100644
--- a/dist/components/Select/option.d.ts
+++ b/dist/components/Select/option.d.ts
@@ -1,16 +1,16 @@
-import { ReactNode, FC } from 'react'
+import { ReactNode, FC } from 'react';
 export interface SelectOptionProps {
-  index?: string
-  /** 默认根据此属性值进行筛选，该值不能相同*/
-  value: string
-  /** 选项的标签，若不设置则默认与 value 相同*/
-  label?: string
-  /** 是否禁用该选项*/
-  disabled?: boolean
-  children?: ReactNode
-  onSelect?: (value: string, isSelected?: boolean) => void
-  selectedValues?: string[]
-  multiple?: boolean
+    index?: string;
+    /** 默认根据此属性值进行筛选，该值不能相同*/
+    value: string;
+    /** 选项的标签，若不设置则默认与 value 相同*/
+    label?: string;
+    /** 是否禁用该选项*/
+    disabled?: boolean;
+    children?: ReactNode;
+    onSelect?: (value: string, isSelected?: boolean) => void;
+    selectedValues?: string[];
+    multiple?: boolean;
 }
-export declare const Option: FC<SelectOptionProps>
-export default Option
+export declare const Option: FC<SelectOptionProps>;
+export default Option;
diff --git a/dist/components/Select/select.d.ts b/dist/components/Select/select.d.ts
index d0d7245..4148651 100644
--- a/dist/components/Select/select.d.ts
+++ b/dist/components/Select/select.d.ts
@@ -1,47 +1,11 @@
-import React, { ReactNode, FC } from 'react'
-import { InputSize } from '../Input/input'
-import { SelectOptionProps } from './option'
-export interface SelectProps {
-  /** 指定默认选中的条目 */
-  defaultValue?: string | string[]
-  /** 选择框默认文本 */
-  placeholder?: string
-  /** 是否禁用 */
-  disabled?: boolean
-  /** 是否支持多选*/
-  multiple?: boolean
-  /** select input 的 name 属性 */
-  name?: string
-  /** 选中值发生变化时触发 */
-  onChange?: (selectedValue: string, selectedValues: string[]) => void
-  /** 下拉框出现/隐藏时触发 */
-  onVisibleChange?: (visible: boolean) => void
-  children?: ReactNode
-  /** 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 */
-  options: SelectOptionProps[]
-  /** 选择框大小 */
-  size?: InputSize
-  /** 配置是否可搜索 */
-  showSearch?: boolean
-  /** 是否根据输入项进行筛选 */
-  filterOption?:
-    | boolean
-    | ((inputValue: string, options: SelectOptionProps[]) => boolean)
-  /** 文本框值变化时回调 */
-  onSearch?: (value: string) => void
-}
-/** 下拉框 */
-export interface IselectContext {
-  onSelect?: (value: string, isSelected?: boolean) => void
-  selectedValues: string[]
-  multiple?: boolean
-}
-/** 定义全局的量 */
-/** 当没有provide，则用括号里的默认值 */
-export declare const SelectContext: React.Context<IselectContext>
+import { FC } from 'react';
+import SelectProps from './selectProps';
 /**
  * 下拉选择器。
- * 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
+ *
+ * ###何时使用
+ * - 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
+ * - 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。
  */
-export declare const Select: FC<SelectProps>
-export default Select
+export declare const Select: FC<SelectProps>;
+export default Select;
diff --git a/dist/components/Switcher/index.d.ts b/dist/components/Switcher/index.d.ts
index 1557fa4..981bc2e 100644
--- a/dist/components/Switcher/index.d.ts
+++ b/dist/components/Switcher/index.d.ts
@@ -1,2 +1,2 @@
-import Switch from './switcher'
-export default Switch
+import Switch from './switcher';
+export default Switch;
diff --git a/dist/components/Switcher/switcher.d.ts b/dist/components/Switcher/switcher.d.ts
index 87f76db..317825e 100644
--- a/dist/components/Switcher/switcher.d.ts
+++ b/dist/components/Switcher/switcher.d.ts
@@ -1,25 +1,17 @@
-import React, { ReactNode, CSSProperties } from 'react'
-export type ThemeProps =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'info'
-  | 'warning'
-  | 'danger'
-  | 'light'
-  | 'dark'
+import React, { ReactNode, CSSProperties } from 'react';
+export type ThemeProps = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark';
 export interface SwitchProps {
-  className?: string
-  defaultChecked?: boolean
-  checked?: boolean
-  disabled?: boolean
-  onChange?: (checked: boolean) => void
-  checkedChildren?: ReactNode
-  unCheckedChildren?: ReactNode
-  size?: 'small' | 'medium'
-  children?: ReactNode
-  style?: CSSProperties
-  theme?: ThemeProps
+    className?: string;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    checkedChildren?: ReactNode;
+    unCheckedChildren?: ReactNode;
+    size?: 'small' | 'medium';
+    children?: ReactNode;
+    style?: CSSProperties;
+    theme?: ThemeProps;
 }
-export declare const Switch: React.FC<SwitchProps>
-export default Switch
+export declare const Switch: React.FC<SwitchProps>;
+export default Switch;
diff --git a/dist/components/Tabs/index.d.ts b/dist/components/Tabs/index.d.ts
index 1ca36d7..44f6903 100644
--- a/dist/components/Tabs/index.d.ts
+++ b/dist/components/Tabs/index.d.ts
@@ -1,8 +1,8 @@
-import { FC } from 'react'
-import { TabsProps } from './tabs'
-import { TabItemProps } from './tabItem'
+import { FC } from 'react';
+import { TabsProps } from './tabs';
+import { TabItemProps } from './tabItem';
 export type ITabsComponent = FC<TabsProps> & {
-  Item: FC<TabItemProps>
-}
-declare const TransTabs: ITabsComponent
-export default TransTabs
+    Item: FC<TabItemProps>;
+};
+declare const TransTabs: ITabsComponent;
+export default TransTabs;
diff --git a/dist/components/Tabs/tabItem.d.ts b/dist/components/Tabs/tabItem.d.ts
index 8777d09..fcf9933 100644
--- a/dist/components/Tabs/tabItem.d.ts
+++ b/dist/components/Tabs/tabItem.d.ts
@@ -1,10 +1,10 @@
-import React, { FC, ReactNode } from 'react'
+import React, { FC, ReactNode } from 'react';
 export interface TabItemProps {
-  /** Tab选项上面的文字 */
-  label: string | React.ReactElement
-  /** Tab选项是否被禁用 */
-  disabled?: boolean
-  children?: ReactNode
+    /** Tab选项上面的文字 */
+    label: string | React.ReactElement;
+    /** Tab选项是否被禁用 */
+    disabled?: boolean;
+    children?: ReactNode;
 }
-export declare const TabItem: FC<TabItemProps>
-export default TabItem
+export declare const TabItem: FC<TabItemProps>;
+export default TabItem;
diff --git a/dist/components/Tabs/tabs.d.ts b/dist/components/Tabs/tabs.d.ts
index d28e83d..627b301 100644
--- a/dist/components/Tabs/tabs.d.ts
+++ b/dist/components/Tabs/tabs.d.ts
@@ -1,21 +1,21 @@
-import { FC, ReactNode } from 'react'
-type Mode = 'vertical' | 'horizontal'
+import { FC, ReactNode } from 'react';
+type Mode = 'vertical' | 'horizontal';
 export interface TabsProps {
-  /**当前激活 tab 面板的 index，默认为0 */
-  defaultIndex?: number
-  /**可以扩展的 className */
-  className?: string
-  /**点击 Tab 触发的回调函数 */
-  onSelect?: (selectedIndex: number) => void
-  /**Tabs的样式，两种可选，默认为 line */
-  type?: 'line' | 'card'
-  mode?: Mode
-  children?: ReactNode
+    /**当前激活 tab 面板的 index，默认为0 */
+    defaultIndex?: number;
+    /**可以扩展的 className */
+    className?: string;
+    /**点击 Tab 触发的回调函数 */
+    onSelect?: (selectedIndex: number) => void;
+    /**Tabs的样式，两种可选，默认为 line */
+    type?: 'line' | 'card';
+    mode?: Mode;
+    children?: ReactNode;
 }
 /**
  * 选项卡切换组件。
  * 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
  * ### 引用方法
  */
-export declare const Tabs: FC<TabsProps>
-export default Tabs
+export declare const Tabs: FC<TabsProps>;
+export default Tabs;
diff --git a/dist/components/Transition/index.d.ts b/dist/components/Transition/index.d.ts
index dff1efb..5b4704f 100644
--- a/dist/components/Transition/index.d.ts
+++ b/dist/components/Transition/index.d.ts
@@ -1,2 +1,2 @@
-import Transition from './transition'
-export default Transition
+import Transition from './transition';
+export default Transition;
diff --git a/dist/components/Transition/transition.d.ts b/dist/components/Transition/transition.d.ts
index 97de900..64fe47b 100644
--- a/dist/components/Transition/transition.d.ts
+++ b/dist/components/Transition/transition.d.ts
@@ -1,14 +1,68 @@
-import React, { ReactNode } from 'react'
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition'
-type AnimationName =
-  | 'zoom-in-top'
-  | 'zoom-in-left'
-  | 'zoom-in-bottom'
-  | 'zoom-in-right'
-type TransitionProps = CSSTransitionProps & {
-  animation?: AnimationName
-  wrapper?: boolean
-  children?: ReactNode
+import React, { ReactNode } from 'react';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right';
+export interface TransitionProps extends CSSTransitionProps {
+    /** 设置组件的显示或隐藏状态(逻辑上的概念) */
+    in: boolean;
+    /** 设置可以在初始化时隐藏组件 */
+    mountOnEnter?: boolean;
+    /** 设置当组件处于 exited 状态时卸载组件 */
+    unmountOnExit?: boolean;
+    /** 设置初始进入时拥有过渡效果 */
+    appear?: boolean;
+    /** 设置入场时是否有过渡效果 */
+    enter?: boolean;
+    /** 设置出场时是否有过渡效果 */
+    exit?: boolean;
+    /** 过渡持续时间 */
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+        appear?: number;
+    };
+    /** 在 entering 状态之前调用 */
+    onEnter?: () => void;
+    /** 在 entering 状态之后调用 */
+    onEntering?: () => void;
+    /** 在 entered 状态之后调用 */
+    onEntered?: () => void;
+    /** 在 exiting 状态之前调用 */
+    onExit?: () => void;
+    /** 在 exiting 状态之后调用 */
+    onExiting?: () => void;
+    /** 在 exited 状态之后调用 */
+    onExited?: () => void;
+    /** 展开的动画效果 */
+    animation?: AnimationName;
+    /** 避免自身动画消失，故嵌套一层节点 */
+    wrapper?: boolean;
+    /** 组件包含的子节点 */
+    children?: ReactNode;
 }
-declare const Transition: React.FC<TransitionProps>
-export default Transition
+/**
+ * 过渡动画
+ *
+ * ###何时使用
+ * 当需要一些过渡动画效果时使用，如下拉菜单。
+ *
+ * ###使用方法
+ * 给 Transition 组件设置 `className` 后（若无 `className` ,也可用 `animation` ），在相应的 css 文件中设置不同阶段的样式。阶段分为：
+ *
+ *     进入的三阶段：`className-enter`,  `className-enter-active`, `className-enter-done`
+ *
+ *     离开的三阶段：`className-exit`,  `className-exit-active`,  `className-exit-done`
+ *
+ * 本组件库提供一种下拉菜单的效果可供使用，分为四种:
+ *
+ *     1.从顶部滑出 `zoom-in-top`
+ *
+ *     2.从底部滑出 `zoom-in-bottom`
+ *
+ *     3.从左上角滑出 `zoom-in-left`
+ *
+ *     4.从右上角滑出 `zoom-in-right`
+ *
+ * 使用时将 `className` 或者 `animation` 设置为效果名即可。
+ */
+export declare const Transition: React.FC<TransitionProps>;
+export default Transition;
diff --git a/dist/components/Upload/dragger.d.ts b/dist/components/Upload/dragger.d.ts
index 36e68b2..48cefea 100644
--- a/dist/components/Upload/dragger.d.ts
+++ b/dist/components/Upload/dragger.d.ts
@@ -1,7 +1,7 @@
-import React, { FC } from 'react'
+import React, { FC } from 'react';
 interface DraggerProps {
-  onFile: (files: FileList) => void
-  children?: React.ReactNode
+    onFile: (files: FileList) => void;
+    children?: React.ReactNode;
 }
-export declare const Dragger: FC<DraggerProps>
-export default Dragger
+export declare const Dragger: FC<DraggerProps>;
+export default Dragger;
diff --git a/dist/components/Upload/index.d.ts b/dist/components/Upload/index.d.ts
index 9529f84..0a1491a 100644
--- a/dist/components/Upload/index.d.ts
+++ b/dist/components/Upload/index.d.ts
@@ -1,2 +1,2 @@
-import Upload from './upload'
-export default Upload
+import Upload from './upload';
+export default Upload;
diff --git a/dist/components/Upload/upload.d.ts b/dist/components/Upload/upload.d.ts
index b3ff5a0..a2b4ee6 100644
--- a/dist/components/Upload/upload.d.ts
+++ b/dist/components/Upload/upload.d.ts
@@ -1,54 +1,60 @@
-import React, { FC } from 'react'
-export type UploadFileStatus = 'ready' | 'uploading' | 'success' | 'error'
+import React, { FC } from 'react';
+export type UploadFileStatus = 'ready' | 'uploading' | 'success' | 'error';
 export interface UploadFile {
-  uid: string
-  size: number
-  name: string
-  status?: UploadFileStatus
-  percent?: number
-  raw?: File
-  response?: any
-  error?: any
+    uid: string;
+    size: number;
+    name: string;
+    status?: UploadFileStatus;
+    percent?: number;
+    raw?: File;
+    response?: any;
+    error?: any;
 }
 export interface UploadProps {
-  /**必选参数, 上传的地址 */
-  action: string
-  /**默认已经上传的文件列表 */
-  defaultFileList?: UploadFile[]
-  /**上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 */
-  beforeUpload?: (file: File) => boolean | Promise<File>
-  /**文件上传时的钩子 */
-  onProgress?: (percentage: number, file: UploadFile) => void
-  /**文件上传成功时的钩子 */
-  onSuccess?: (data: any, file: UploadFile) => void
-  /**文件上传失败时的钩子 */
-  onError?: (err: any, file: UploadFile) => void
-  /**文件状态改变时的钩子，上传成功或者失败时都会被调用	 */
-  onChange?: (file: UploadFile) => void
-  /**文件列表移除文件时的钩子 */
-  onRemove?: (file: UploadFile) => void
-  /**设置上传的请求头部 */
-  headers?: {
-    [key: string]: any
-  }
-  /**上传的文件字段名 */
-  name?: string
-  /**上传时附带的额外参数 */
-  data?: {
-    [key: string]: any
-  }
-  /**支持发送 cookie 凭证信息 */
-  withCredentials?: boolean
-  /**接受上传的文件类型 */
-  accept?: string
-  /**是否支持多选文件 */
-  multiple?: boolean
-  children?: React.ReactNode
-  /**是否支持拖拽上传 */
-  drag?: boolean
+    /**必选参数, 上传的地址 */
+    action: string;
+    /**默认已经上传的文件列表 */
+    defaultFileList?: UploadFile[];
+    /**上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 */
+    beforeUpload?: (file: File) => boolean | Promise<File>;
+    /**文件上传时的钩子 */
+    onProgress?: (percentage: number, file: UploadFile) => void;
+    /**文件上传成功时的钩子 */
+    onSuccess?: (data: any, file: UploadFile) => void;
+    /**文件上传失败时的钩子 */
+    onError?: (err: any, file: UploadFile) => void;
+    /**文件状态改变时的钩子，上传成功或者失败时都会被调用	 */
+    onChange?: (file: UploadFile) => void;
+    /**文件列表移除文件时的钩子 */
+    onRemove?: (file: UploadFile) => void;
+    /**设置上传的请求头部 */
+    headers?: {
+        [key: string]: any;
+    };
+    /**上传的文件字段名 */
+    name?: string;
+    /**上传时附带的额外参数 */
+    data?: {
+        [key: string]: any;
+    };
+    /**支持发送 cookie 凭证信息 */
+    withCredentials?: boolean;
+    /**接受上传的文件类型 */
+    accept?: string;
+    /**是否支持多选文件 */
+    multiple?: boolean;
+    children?: React.ReactNode;
+    /**是否支持拖拽上传 */
+    drag?: boolean;
 }
 /**
- * 通过点击或者拖拽上传文件
+ * 文件选择上传和拖拽上传控件
+ *
+ * ###何时使用
+ * 上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。
+ * - 当需要上传一个或一些文件时。
+ * - 当需要展现上传的进度时。
+ * - 当需要使用拖拽交互时。
  */
-export declare const Upload: FC<UploadProps>
-export default Upload
+export declare const Upload: FC<UploadProps>;
+export default Upload;
diff --git a/dist/components/Upload/uploadList.d.ts b/dist/components/Upload/uploadList.d.ts
index ae9adeb..8f382c7 100644
--- a/dist/components/Upload/uploadList.d.ts
+++ b/dist/components/Upload/uploadList.d.ts
@@ -1,8 +1,8 @@
-import { FC } from 'react'
-import { UploadFile } from './upload'
+import { FC } from 'react';
+import { UploadFile } from './upload';
 interface UploadListProps {
-  fileList: UploadFile[]
-  onRemove: (file: UploadFile) => void
+    fileList: UploadFile[];
+    onRemove: (file: UploadFile) => void;
 }
-export declare const UploadList: FC<UploadListProps>
-export default UploadList
+export declare const UploadList: FC<UploadListProps>;
+export default UploadList;
diff --git a/dist/hooks/useClickOutside.d.ts b/dist/hooks/useClickOutside.d.ts
index f56894a..795ac3e 100644
--- a/dist/hooks/useClickOutside.d.ts
+++ b/dist/hooks/useClickOutside.d.ts
@@ -1,6 +1,3 @@
-import { RefObject } from 'react'
-declare function useClickOutside(
-  ref: RefObject<HTMLElement>,
-  handler: Function
-): void
-export default useClickOutside
+import { RefObject } from 'react';
+declare function useClickOutside(ref: RefObject<HTMLElement>, handler: Function): void;
+export default useClickOutside;
diff --git a/dist/hooks/useDebounce.d.ts b/dist/hooks/useDebounce.d.ts
index e056639..2cf098a 100644
--- a/dist/hooks/useDebounce.d.ts
+++ b/dist/hooks/useDebounce.d.ts
@@ -1,2 +1,2 @@
-declare function useDebounce(value: any, wait?: number): any
-export default useDebounce
+declare function useDebounce(value: any, wait?: number): any;
+export default useDebounce;
diff --git a/dist/index.css b/dist/index.css
index 9eda973..39d2c14 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -496,98 +496,6 @@ template {
   display: none;
 }
 
-.zoom-in-top-enter {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.zoom-in-top-enter-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
-  transform-origin: center top;
-}
-
-.zoom-in-top-exit {
-  opacity: 1;
-}
-
-.zoom-in-top-exit-active {
-  opacity: 0;
-  transform: scaleY(0);
-  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
-  transform-origin: center top;
-}
-
-.zoom-in-left-enter {
-  opacity: 0;
-  transform: scale(0.45, 0.45);
-}
-
-.zoom-in-left-enter-active {
-  opacity: 1;
-  transform: scale(1, 1);
-  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
-  transform-origin: top left;
-}
-
-.zoom-in-left-exit {
-  opacity: 1;
-}
-
-.zoom-in-left-exit-active {
-  opacity: 0;
-  transform: scale(0.45, 0.45);
-  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
-  transform-origin: top left;
-}
-
-.zoom-in-right-enter {
-  opacity: 0;
-  transform: scale(0.45, 0.45);
-}
-
-.zoom-in-right-enter-active {
-  opacity: 1;
-  transform: scale(1, 1);
-  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
-  transform-origin: top right;
-}
-
-.zoom-in-right-exit {
-  opacity: 1;
-}
-
-.zoom-in-right-exit-active {
-  opacity: 0;
-  transform: scale(0.45, 0.45);
-  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
-  transform-origin: top right;
-}
-
-.zoom-in-bottom-enter {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.zoom-in-bottom-enter-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
-  transform-origin: center bottom;
-}
-
-.zoom-in-bottom-exit {
-  opacity: 1;
-}
-
-.zoom-in-bottom-exit-active {
-  opacity: 0;
-  transform: scaleY(0);
-  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
-  transform-origin: center bottom;
-}
-
 .violetSwitch {
   margin: 0;
   padding: 0;
@@ -957,33 +865,24 @@ template {
   cursor: pointer;
   transition: all 100ms ease-out;
 }
-.violetButton.disabled, .violetButton[disabled] {
+.violetButton:active {
+  opacity: 0.5;
+}
+.violetButton--disabled {
   cursor: not-allowed;
   opacity: 0.65;
   box-shadow: none;
 }
-.violetButton.disabled > *, .violetButton[disabled] > * {
-  pointer-events: none;
-}
-
 .violetButton--lg {
   padding: 0.5rem 1rem;
   font-size: 1.25rem;
   border-radius: 0.3rem;
 }
-.violetButton--lg:active, .violetButton--lg:active {
-  opacity: 0.5;
-}
-
 .violetButton--sm {
   padding: 0.25rem 0.5rem;
   font-size: 0.875rem;
   border-radius: 0.2rem;
 }
-.violetButton--sm:active, .violetButton--sm:active {
-  opacity: 0.5;
-}
-
 .violetButton--primary {
   color: #fff;
   background: #815c94;
@@ -994,10 +893,6 @@ template {
   background: #815c94;
   border-color: #815c94;
 }
-.violetButton--primary:active, .violetButton--primary:active {
-  opacity: 0.5;
-}
-
 .violetButton--danger {
   color: #fff;
   background: #a8456b;
@@ -1008,10 +903,6 @@ template {
   background: #a8456b;
   border-color: #a8456b;
 }
-.violetButton--danger:active, .violetButton--danger:active {
-  opacity: 0.5;
-}
-
 .violetButton--default {
   color: #212529;
   background: #fff;
@@ -1022,24 +913,12 @@ template {
   background: #fff;
   border-color: #ced4da;
 }
-.violetButton--default:active, .violetButton--default:active {
-  opacity: 0.5;
-}
-
 .violetButton--link {
   font-weight: 400;
   color: #815c94;
   text-decoration: none;
   box-shadow: none;
 }
-.violetButton--link:active, .violetButton--link:active {
-  opacity: 0.5;
-}
-.violetButton--link:disabled, .violetButton--link:disabled {
-  color: underline;
-  pointer-events: none;
-}
-
 .violetButton--dash {
   color: #212529;
   background: #fff;
@@ -1052,9 +931,6 @@ template {
   background: #fff;
   border-color: #ced4da;
 }
-.violetButton--dash:active {
-  opacity: 0.5;
-}
 
 .violetForm .violetFormRow {
   display: flex;
@@ -1129,6 +1005,12 @@ template {
   justify-content: center;
 }
 
+.link-line {
+  width: 10px;
+  height: 20%;
+  border-right: solid #ACC0D8 1px;
+}
+
 .input-wrapper {
   display: flex;
   width: 100%;
@@ -1165,9 +1047,14 @@ template {
   background-color: #fff;
   background-clip: padding-box;
   border: 2px solid #ced4da;
+  border-radius: 1rem;
   border-radius: 0.25rem;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+  transition: all 100ms ease-out;
+}
+.input-inner:hover {
+  color: #583f65;
+  text-decoration: none;
 }
 .input-inner:focus {
   color: #495057;
@@ -1183,6 +1070,8 @@ template {
 .input-inner:disabled, .input-inner[readonly] {
   background-color: #e9ecef;
   opacity: 1;
+}
+.input-inner--disabled {
   cursor: not-allowed;
 }
 
@@ -1195,10 +1084,10 @@ template {
   font-size: 1rem;
   font-weight: 100;
   line-height: 1.5;
-  color: #495057;
+  color: #815c94;
   text-align: center;
   white-space: nowrap;
-  background-color: #e9ecef;
+  background-color: #fff;
   border: 2px solid #ced4da;
   border-radius: 0.25rem;
 }
@@ -1562,6 +1451,7 @@ template {
 
 .violetSelect {
   position: relative;
+  margin: 0 3px;
 }
 .violetSelect .input-wrapper {
   cursor: pointer;
@@ -1595,35 +1485,53 @@ template {
   margin-top: 0;
   white-space: nowrap;
   position: absolute;
-  background: #fff;
-  z-index: 100;
-  top: calc(100% + 8px);
+  z-index: 200;
+  top: 2.9rem;
   left: 0;
-  border: 1px solid #dee2e6;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
+  border-radius: 0.35rem;
+  background: #fff;
   width: 100%;
 }
+.violetSelect__dropdown .violetSelect__optGroup {
+  cursor: default;
+}
 .violetSelect__dropdown .violetSelect__item {
   padding: 0.5rem 1rem;
+  margin-left: 0;
   cursor: pointer;
-  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
-  color: #212529;
+  color: #495057;
+  transition: opacity 100ms ease-out;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  border-radius: 0.25rem;
+}
+.violetSelect__dropdown .violetSelect__item:hover {
+  background: #815c94;
+  color: white;
+}
+.violetSelect__dropdown .violetSelect__item:active {
+  opacity: 0.5;
 }
 .violetSelect__dropdown .violetSelect__item.violetSelectItem--selected {
   color: #815c94;
   font-weight: 700;
 }
+.violetSelect__dropdown .violetSelect__item.violetSelectItem--selected:hover {
+  color: #fff;
+}
 .violetSelect__dropdown .violetSelect__item.violetSelectItem--disabled {
   color: #6c757d;
-  pointer-events: none;
-  cursor: default;
+  cursor: not-allowed;
 }
-.violetSelect__dropdown .violetSelect__item:hover {
-  background: #815c94;
-  color: white;
+.violetSelect__dropdown .violetSelect__item.violetSelectItem--disabled:hover {
+  color: #6c757d;
+  background: #fff;
+}
+.violetSelect__dropdown .violetSelect__item.violetSelectItem--disabled:active {
+  opacity: 1;
+  color: #6c757d;
 }
 
 .violetSelected__tags {
@@ -2732,4 +2640,96 @@ template {
 
 .col {
   box-sizing: border-box;
+}
+
+.zoom-in-top-enter {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.zoom-in-top-enter-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center top;
+}
+
+.zoom-in-top-exit {
+  opacity: 1;
+}
+
+.zoom-in-top-exit-active {
+  opacity: 0;
+  transform: scaleY(0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center top;
+}
+
+.zoom-in-left-enter {
+  opacity: 0;
+  transform: scale(0.45, 0.45);
+}
+
+.zoom-in-left-enter-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: top left;
+}
+
+.zoom-in-left-exit {
+  opacity: 1;
+}
+
+.zoom-in-left-exit-active {
+  opacity: 0;
+  transform: scale(0.45, 0.45);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: top left;
+}
+
+.zoom-in-right-enter {
+  opacity: 0;
+  transform: scale(0.45, 0.45);
+}
+
+.zoom-in-right-enter-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: top right;
+}
+
+.zoom-in-right-exit {
+  opacity: 1;
+}
+
+.zoom-in-right-exit-active {
+  opacity: 0;
+  transform: scale(0.45, 0.45);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: top right;
+}
+
+.zoom-in-bottom-enter {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.zoom-in-bottom-enter-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center bottom;
+}
+
+.zoom-in-bottom-exit {
+  opacity: 1;
+}
+
+.zoom-in-bottom-exit-active {
+  opacity: 0;
+  transform: scaleY(0);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+  transform-origin: center bottom;
 }
\ No newline at end of file
diff --git a/dist/index.d.ts b/dist/index.d.ts
index d3349e3..a1566f1 100644
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -1,21 +1,22 @@
-import './styles/index.scss'
-export { default as Affix } from './components/Affix'
-export { default as AutoComplete } from './components/AutoComplete'
-export { default as Button } from './components/Button'
-export { default as Calendar } from './components/Calendar'
-export { default as Cascader } from './components/Cascader'
-export { default as CheckBox } from './components/CheckBox'
-export { default as DatePicker } from './components/DatePicker'
-export { default as Form } from './components/Form'
-export { default as Grid } from './components/Grid/grid'
-export { default as Icon } from './components/Icon'
-export { default as Input } from './components/Input'
-export { default as InputNumber } from './components/InputNumber'
-export { default as Menu } from './components/Menu'
-export { default as Progress } from './components/Progress'
-export { default as RadioGroup } from './components/Radio'
-export { default as Radio } from './components/Radio'
-export { default as Select } from './components/Select'
-export { default as Switcher } from './components/Switcher'
-export { default as Tabs } from './components/Tabs'
-export { default as Upload } from './components/Upload'
+import './styles/index.scss';
+export { default as Affix } from './components/Affix';
+export { default as AutoComplete } from './components/AutoComplete';
+export { default as Button } from './components/Button';
+export { default as Calendar } from './components/Calendar';
+export { default as Cascader } from './components/Cascader';
+export { default as CheckBox } from './components/CheckBox';
+export { default as DatePicker } from './components/DatePicker';
+export { default as Form } from './components/Form';
+export { default as Grid } from './components/Grid/grid';
+export { default as Icon } from './components/Icon';
+export { default as Input } from './components/Input';
+export { default as InputNumber } from './components/InputNumber';
+export { default as Menu } from './components/Menu';
+export { default as Progress } from './components/Progress';
+export { default as RadioGroup } from './components/Radio';
+export { default as Radio } from './components/Radio';
+export { default as Select } from './components/Select';
+export { default as Switcher } from './components/Switcher';
+export { default as Tabs } from './components/Tabs';
+export { default as Transition } from './components/Transition';
+export { default as Upload } from './components/Upload';
diff --git a/package.json b/package.json
index a31ebbf..94a819b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "violet-design",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "private": false,
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -59,6 +59,7 @@
     "build-ts": "tsc -p tsconfig.build.json",
     "build-css": "node-sass ./src/styles/index.scss ./build/index.css",
     "build-es": "rollup --config rollup/rollup.esm.config.js",
+    "build-cjs": "rollup --config rollup/rollup.cjs.config.js",
     "build-umd": "rollup --config rollup/rollup.umd.config.js",
     "test": "react-scripts test",
     "test:nowatch": "cross-env CI=true react-scripts test",
diff --git a/rollup/rollup.cjs.config.js b/rollup/rollup.cjs.config.js
new file mode 100644
index 0000000..1a578df
--- /dev/null
+++ b/rollup/rollup.cjs.config.js
@@ -0,0 +1,15 @@
+import basicConfig from './rollup.config'
+import excludeDependenciesFromBundle from 'rollup-plugin-exclude-dependencies-from-bundle'
+
+const config = {
+  ...basicConfig,
+  output: [
+    {
+      file: 'dist/index.cjs.js',
+      format: 'cjs',
+    },
+  ],
+  plugins: [...basicConfig.plugins, excludeDependenciesFromBundle()],
+}
+
+export default config
diff --git a/src/components/Button/button.tsx b/src/components/Button/button.tsx
index cd91f9a..8a5da23 100644
--- a/src/components/Button/button.tsx
+++ b/src/components/Button/button.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 import classNames from 'classnames'
 
 export type ButtonSize = 'lg' | 'sm' | 'mid'