diff --git a/scss/components/_color.scss b/scss/components/_color.scss
new file mode 100644
index 000000000..d66d33173
--- /dev/null
+++ b/scss/components/_color.scss
@@ -0,0 +1,18 @@
+.#{$ns}ColorField {
+    display: inline-block;
+
+    &-previewIcon {
+        display: inline-block;
+        vertical-align: middle;
+        width: px2rem(16px);
+        height: px2rem(16px);
+        box-shadow: $boxShadowSm;
+        background-color: #ccc;
+    }
+
+    &-value {
+        display: inline-block;
+        margin-left: 10px;
+        vertical-align: middle;
+    }
+}
\ No newline at end of file
diff --git a/scss/components/_toast.scss b/scss/components/_toast.scss
index ceadd490f..9ab45c3fa 100644
--- a/scss/components/_toast.scss
+++ b/scss/components/_toast.scss
@@ -1,4 +1,5 @@
 @keyframes bounceIn {
+
     from,
     20%,
     40%,
@@ -58,13 +59,14 @@
         pointer-events: none;
         position: fixed;
         z-index: $zindex-toast;
+        width: 100%;
+        height: 100%;
     }
 
     width: $Toast-width;
     pointer-events: auto;
     margin-bottom: $gap-xs;
-    padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
-        ($Toast-paddingX + $Toast-paddingL);
+    padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast-paddingL);
     box-shadow: $Toast-box-shadow;
     border-radius: $Toast-borderRadius;
     border: $Toast-border-width solid;
@@ -72,25 +74,24 @@
     position: relative;
     opacity: $Toast-opacity;
     cursor: pointer;
+    opacity: 0;
+    transform: translateZ(0);
 
-    &:hover {
+    &.in,
+    &.out {
+        animation-fill-mode: both;
+        animation-duration: 0.75s;
         opacity: 1;
     }
 
     &.in {
-        animation-duration: 0.75s;
         animation-name: bounceIn;
     }
 
     &.out {
-        animation-duration: 0.75s;
         animation-name: bounceOut;
     }
 
-    &.hidden {
-        display: none;
-    }
-
     &-title {
         display: $Toast-display;
         font-size: $fontSizeMd;
@@ -136,8 +137,7 @@
         color: $Toast--info-color;
         border-color: $Toast--info-borderColor;
         background-color: $Toast--info-bgColor;
-        padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
-            ($Toast-paddingX + $Toast--info-paddingL);
+        padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast--info-paddingL);
 
         &::before {
             content: $Toast--info-icon;
@@ -186,4 +186,4 @@
         bottom: $gap-base;
         right: $gap-base;
     }
-}
+}
\ No newline at end of file
diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss
index 6704db310..bf9df6705 100644
--- a/scss/themes/cxd.scss
+++ b/scss/themes/cxd.scss
@@ -502,6 +502,7 @@ $Card-actions-onChecked-onHover-bg: $white;
 @import "../components/button-group";
 @import "../components/dropdown";
 @import "../components/collapse";
+@import "../components/color";
 @import "../components/wizard";
 @import "../components/crud";
 @import "../components/table";
diff --git a/scss/themes/dark.scss b/scss/themes/dark.scss
index c4f2a7f28..40574f28e 100644
--- a/scss/themes/dark.scss
+++ b/scss/themes/dark.scss
@@ -184,6 +184,7 @@ pre {
 @import '../components/button-group';
 @import '../components/dropdown';
 @import '../components/collapse';
+@import "../components/color";
 @import '../components/wizard';
 @import '../components/crud';
 @import '../components/table';
diff --git a/scss/themes/default.scss b/scss/themes/default.scss
index 928d4395a..9a4c88f28 100644
--- a/scss/themes/default.scss
+++ b/scss/themes/default.scss
@@ -49,6 +49,7 @@ $Form-input-borderColor: #cfdadd;
 @import "../components/button-group";
 @import "../components/dropdown";
 @import "../components/collapse";
+@import "../components/color";
 @import "../components/wizard";
 @import "../components/crud";
 @import "../components/table";
@@ -99,4 +100,4 @@ $Form-input-borderColor: #cfdadd;
 @import "../components/form/nested-select";
 @import "../components/form/icon-picker";
 
-@import "../utilities";
+@import "../utilities";
\ No newline at end of file
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index b0456b0a4..c84424df6 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -40,8 +40,6 @@ export class Modal extends React.Component<ModalProps, ModalState> {
         overlay: true
     };
 
-    contentDom: any;
-
     componentDidMount() {
         if (this.props.show) {
             this.handleEntered();
@@ -54,7 +52,6 @@ export class Modal extends React.Component<ModalProps, ModalState> {
         }
     }
 
-    contentRef = (ref: any) => (this.contentDom = ref);
     handleEntered = () => {
         const onEntered = this.props.onEntered;
         document.body.classList.add(`is-modalOpened`);
@@ -91,33 +88,22 @@ export class Modal extends React.Component<ModalProps, ModalState> {
                     onExited={this.handleExited}
                     onEntered={this.handleEntered}
                 >
-                    {(status: string) => {
-                        if (status === ENTERING || status === EXITING) {
-                            // force reflow
-                            // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
-                            // 否则看不到动画。
-                            this.contentDom.offsetWidth;
-                        }
-
-                        return (
-                            <div
-                                ref={this.modalRef}
-                                role="dialog"
-                                className={cx(
-                                    `amis-dialog-widget ${ns}Modal`,
-                                    {
-                                        [`${ns}Modal--${size}`]: size
-                                    },
-                                    className
-                                )}
-                            >
-                                {overlay ? <div className={cx(`${ns}Modal-overlay`, fadeStyles[status])} /> : null}
-                                <div ref={this.contentRef} className={cx(`${ns}Modal-content`, fadeStyles[status])}>
-                                    {children}
-                                </div>
-                            </div>
-                        );
-                    }}
+                    {(status: string) => (
+                        <div
+                            ref={this.modalRef}
+                            role="dialog"
+                            className={cx(
+                                `amis-dialog-widget ${ns}Modal`,
+                                {
+                                    [`${ns}Modal--${size}`]: size
+                                },
+                                className
+                            )}
+                        >
+                            {overlay ? <div className={cx(`${ns}Modal-overlay`, fadeStyles[status])} /> : null}
+                            <div className={cx(`${ns}Modal-content`, fadeStyles[status])}>{children}</div>
+                        </div>
+                    )}
                 </Transition>
             </Portal>
         );
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 55c799865..8171a7c4b 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -322,7 +322,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
     }
 
     removeItem(index: number, e?: React.MouseEvent<HTMLElement>) {
-        const {onChange, simpleValue} = this.props;
+        const {onChange, simpleValue, disabled} = this.props;
+        if (disabled) {
+            return;
+        }
         let {selection: value} = this.state;
 
         e && e.stopPropagation();
@@ -415,7 +418,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
     }
 
     renderValue({inputValue, isOpen}: ControllerStateAndHelpers<any>) {
-        const {multiple, placeholder, classPrefix: ns, labelField, searchable, creatable} = this.props;
+        const {multiple, placeholder, classPrefix: ns, labelField, searchable, creatable, disabled} = this.props;
 
         const selection = this.state.selection;
 
@@ -434,7 +437,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
         return selection.map((item, index) =>
             multiple ? (
                 <div className={`${ns}Select-value`} key={index}>
-                    <span className={`${ns}Select-valueIcon`} onClick={this.removeItem.bind(this, index)}>
+                    <span className={`${ns}Select-valueIcon ${disabled ? 'is-disabled' : ''}`} onClick={this.removeItem.bind(this, index)}>
                         ×
                     </span>
                     <span className={`${ns}Select-valueLabel`}>{item[labelField || 'label']}</span>
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index 75e2caadc..6c8b56582 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -15,9 +15,8 @@ const fadeStyles: {
     [propName: string]: string;
 } = {
     [ENTERING]: 'in',
-    [ENTERED]: '',
-    [EXITING]: 'out',
-    [EXITED]: 'hidden'
+    [ENTERED]: 'in',
+    [EXITING]: 'out'
 };
 
 let toastRef: any = null;
@@ -192,12 +191,12 @@ export class ToastMessage extends React.Component<ToastMessageProps> {
         visible: false
     };
 
-    content: React.RefObject<HTMLDivElement>;
-    timer: number;
+    // content: React.RefObject<HTMLDivElement>;
+    timer: NodeJS.Timeout;
     constructor(props: ToastMessageProps) {
         super(props);
 
-        this.content = React.createRef();
+        // this.content = React.createRef();
         this.handleMouseEnter = this.handleMouseEnter.bind(this);
         this.handleMouseLeave = this.handleMouseLeave.bind(this);
         this.handleEntered = this.handleEntered.bind(this);
@@ -247,16 +246,16 @@ export class ToastMessage extends React.Component<ToastMessageProps> {
                 onExited={onDismiss}
             >
                 {(status: string) => {
-                    if (status === ENTERING) {
-                        // force reflow
-                        // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
-                        // 否则看不到动画。
-                        this.content.current && this.content.current.offsetWidth;
-                    }
+                    // if (status === ENTERING) {
+                    //     // force reflow
+                    //     // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
+                    //     // 否则看不到动画。
+                    //     this.content.current && this.content.current.offsetWidth;
+                    // }
 
                     return (
                         <div
-                            ref={this.content}
+                            // ref={this.content}
                             className={cx(`${ns}Toast ${ns}Toast--${level}`, fadeStyles[status])}
                             onMouseEnter={this.handleMouseEnter}
                             onMouseLeave={this.handleMouseLeave}
diff --git a/src/index.tsx b/src/index.tsx
index 39ed5889e..d6a4fc4cf 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -64,6 +64,7 @@ import './renderers/ButtonGroup';
 import './renderers/ButtonToolbar';
 import './renderers/DropDownButton';
 import './renderers/Collapse';
+import './renderers/Color';
 import './renderers/CRUD';
 import './renderers/Pagination';
 import './renderers/Cards';
diff --git a/src/renderers/Color.tsx b/src/renderers/Color.tsx
new file mode 100644
index 000000000..a08eba1a6
--- /dev/null
+++ b/src/renderers/Color.tsx
@@ -0,0 +1,38 @@
+/**
+ * @file 用来展示颜色块。
+ */
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {resolveVariableAndFilter} from '../utils/tpl-builtin';
+
+export interface ColorProps extends RendererProps {
+    className: string;
+    defaultColor: string;
+    showValue: boolean;
+}
+
+export class ColorField extends React.Component<ColorProps, object> {
+    static defaultProps = {
+        className: '',
+        defaultColor: '#ccc',
+        showValue: true
+    };
+
+    render() {
+        const {className, data, classnames: cx, name, value, defaultColor, showValue} = this.props;
+        const color = value || (name ? resolveVariableAndFilter(name, data, '| raw') : null);
+
+        return (
+            <div className={cx('ColorField', className)}>
+                <i className={cx('ColorField-previewIcon')} style={{backgroundColor: color || defaultColor}} />
+                {showValue ? <span className={cx('ColorField-value')}>{color}</span> : null}
+            </div>
+        );
+    }
+}
+
+@Renderer({
+    test: /(^|\/)color$/,
+    name: 'color'
+})
+export class ColorFieldRenderer extends ColorField {}
diff --git a/src/renderers/Form/DiffEditor.tsx b/src/renderers/Form/DiffEditor.tsx
index beb37ab1a..e2a6f7bc6 100644
--- a/src/renderers/Form/DiffEditor.tsx
+++ b/src/renderers/Form/DiffEditor.tsx
@@ -187,7 +187,6 @@ export class DiffEditorControlRenderer extends DiffEditor {
 
 @Renderer({
     test: /(^|\/)diff-editor$/,
-    sizeMutable: false,
     name: 'diff-editor'
 })
 export class DiffEditorRenderer extends DiffEditor {
diff --git a/src/renderers/Form/File.tsx b/src/renderers/Form/File.tsx
index 3930c7878..3123b9d0d 100644
--- a/src/renderers/Form/File.tsx
+++ b/src/renderers/Form/File.tsx
@@ -816,7 +816,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                     ref={this.dropzone}
                     onDrop={this.handleDrop}
                     onDropRejected={this.handleDropRejected}
-                    accept={accept}
+                    accept={accept === '*' ? '' : accept}
                     multiple={multiple}
                 >
                     {({getRootProps, getInputProps, isDragActive}) => (