diff --git a/scss/_variables.scss b/scss/_variables.scss
index 958f9712..f8d564ee 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -146,6 +146,9 @@ $gap-base: px2rem(15px) !default;
 $gap-md: px2rem(20px) !default;
 $gap-lg: px2rem(30px) !default;
 
+$icon-color: $gray600 !default;
+$icon-onHover-color: $gray900 !default;
+
 // Components
 $scrollbar-width: px2rem(17px) !default;
 
@@ -446,7 +449,7 @@ $Table-thead-fontSize: $fontSizeBase !default;
 $Table-thead-color: $text--loud-color !default;
 $Table-thead-borderColor: $Table-borderColor !default;
 $Table-thead-borderWidth: $Table-borderWidth !default;
-$Table-thead-iconColor: $text--muted-color !default;
+$Table-thead-iconColor: $icon-color !default;
 $TableCell-height: px2rem(40px) !default;
 $TableCell-paddingX: $gap-sm !default;
 $TableCell--edge-paddingX: $gap-md !default;
@@ -554,19 +557,19 @@ $ListItem-onModified-borderColor: darken($ListItem-onModified-bg, 10%) !default;
 $ListItem-onDragging-opacity: 0.1 !default;
 
 // QuickEdit
-$QuickEdit-iconColor: $text--muted-color !default;
-$QuickEdit-onHover-iconColor: $text-color !default;
+$QuickEdit-iconColor: $icon-color !default;
+$QuickEdit-onHover-iconColor: $icon-onHover-color !default;
 $QuickEdit-onFocus-borderColor: $info !default;
 $QuickEdit-onFocus-borderWidth: $borderWidth !default;
 
 // Copyable
-$Copyable-iconColor: $text--muted-color !default;
-$Copyable-onHover-iconColor: $text-color !default;
+$Copyable-iconColor: $icon-color !default;
+$Copyable-onHover-iconColor: $icon-onHover-color !default;
 
 // PopOverAble
 
-$PopOverAble-iconColor: $text--muted-color !default;
-$PopOverAble-onHover-iconColor: $text-color !default;
+$PopOverAble-iconColor: $icon-color !default;
+$PopOverAble-onHover-iconColor: $icon-onHover-color !default;
 
 // PopOver
 $PopOver-bg: white !default;
@@ -574,8 +577,8 @@ $PopOver-bg: white !default;
 // Remark
 $Remark-width: 1rem !default;
 $Remark-icon-fontSize: $fontSizeBase !default;
-$Remark-iconColor: $text--muted-color !default;
-$Remark-onHover-iconColor: $text-color !default;
+$Remark-iconColor: $icon-color !default;
+$Remark-onHover-iconColor: $icon-onHover-color !default;
 $Remark-bg: transparent !default;
 $Remark-onHover-bg: transparent !default;
 $Remark-borderWidth: 0 !default;
@@ -618,7 +621,7 @@ $Form-input-onActive-color: $info !default;
 $Form-input-borderRadius: $borderRadius !default;
 $Form-input-borderColor: $borderColor !default;
 $Form-input-borderWidth: px2rem(1px) !default;
-$Form-input-iconColor: #999 !default;
+$Form-input-iconColor: $icon-color !default;
 $Form-input-onFocused-borderColor: $info !default;
 $Form-input-onFocused-bg: $Form-input-bg !default;
 $Form-input-onError-borderColor: $danger !default;
@@ -674,18 +677,18 @@ $Form-select-onFocused-color: $Form-select-color !default;
 $Form-select-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
 $Form-select-onError-borderColor: $Form-input-onError-borderColor !default;
 $Form-selectOption-height: $Form-input-height !default;
-$Form-selectValue-color: #007eff !default;
+$Form-selectValue-color: $info !default;
 $Form-selectValue-bg: saturate(lighten($Form-selectValue-color, 40%), 2.5%) !default;
 $Form-selectValue-borderColor: saturate(lighten($Form-selectValue-color, 30%), 2.5%) !default;
 $Form-selectValue-fontSize: $fontSizeSm !default;
 $Form-select-caret-vender: 'FontAwesome' !default;
 $Form-select-caret-icon: '\f0d7' !default;
 $Form-select-caret-fontSize: $fontSizeBase !default;
-$Form-select-caret-iconColor: $Form-input-iconColor !default;
-$Form-select-caret-onHover-iconColor: $Form-input-iconColor !default;
+$Form-select-caret-iconColor: $icon-color !default;
+$Form-select-caret-onHover-iconColor: $icon-onHover-color !default;
 $Form-select-outer-borderWidth: px2rem(1px) !default;
 $Form-select-outer-boxShadow: none !default;
-$Form-select-outer-top: 100% !default;
+$Form-select-input-fontSize: $fontSizeSm !default;
 $Form-select-menu-height: $Form-input-height !default;
 $Form-select-menu-bg: $white !default;
 $Form-select-menu-color: $Form-select-color !default;
@@ -696,6 +699,8 @@ $Form-select-menu-onActive-bg: transparent !default;
 $Form-select-menu-onDisabled-color: $text--muted-color !default;
 $Form-select-menu-onDisabled-bg: transparent !default;
 $Form-select-checkall-bottomBorder: #eceff8 !default;
+$Form-select-popoverGap: 0 !default;
+$Form-select-search-height: $Form-select-menu-height !default;
 
 // InputGroup
 $InputGroup-height: $Form-input-height !default;
@@ -713,8 +718,8 @@ $InputGroup-select-bg: $white !default;
 $InputGroup-select-onFocused-bg: $white !default;
 $InputGroup-select-color: $Form-select-color !default;
 $InputGroup-select-onFocused-color: $Form-select-onFocused-color !default;
-$InputGroup-select-arrowColor: $Form-select-caret-iconColor !default;
-$InputGroup-select-onFocused-arrowColor: $Form-select-caret-iconColor !default;
+$InputGroup-select-arrowColor: $icon-color !default;
+$InputGroup-select-onFocused-arrowColor: $icon-onHover-color !default;
 $InputGroup-button-borderWidth: $borderWidth !default;
 $InputGroup-button-borderColor: $Form-input-borderColor !default;
 $InputGroup-button-borderRadius: $borderRadius !default;
@@ -892,6 +897,8 @@ $Checkbox-color: $Form-input-borderColor !default;
 $Checkbox-onHover-color: $info !default;
 
 $Checkbox--sm-size: px2rem(16px) !default;
+$Checkbox--sm-inner-size: $Checkbox--sm-size/2 !default;
+$Checkbox--sm--full-inner-size: px2rem(10px) !default;
 $Checkbox-gb: #fff !default;
 $Checkbox-borderRadius: $borderRadius !default;
 
@@ -949,8 +956,8 @@ $DatePicker-fontSize: $Form-input-fontSize !default;
 $DatePicker-paddingX: px2rem(12px) !default;
 $DatePicker-paddingY: ($DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize)/2 - $DatePicker-borderWidth !default;
 $DatePicker-placeholderColor: $Form-input-placeholderColor !default;
-$DatePicker-iconColor: $gray600 !default;
-$DatePicker-onHover-iconColor: darken($DatePicker-iconColor, 10%) !default;
+$DatePicker-iconColor: $icon-color !default;
+$DatePicker-onHover-iconColor: $icon-onHover-color !default;
 $DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
 $DatePicker-toggler-vendor: 'FontAwesome' !default;
 $DatePicker-toggler-fontSize: $Form-fontSize !default;
@@ -1041,7 +1048,7 @@ $ListControl-item-onDisabled-bg: $ListControl-item-bg !default;
 // Combo
 $Combo-toolbarBtn-lineHeight: 1 !default;
 $Combo-toolbarBtn-height: px2rem(20px) !default;
-$Combo-toolbarBtn-color: $Form-input-iconColor !default;
+$Combo-toolbarBtn-color: $icon-color !default;
 $Combo-toolbarBtn-paddingX: px2rem(5px) !default;
 $Combo-toolbarBtn-paddingY: px2rem(2px) !default;
 
@@ -1261,7 +1268,7 @@ $TransferSelect-heading-borderBottom: $borderWidth solid $borderColor !default;
 // Tree
 $TreeSelect-popover-bg: #fff !default;
 $Tree-indent: px2rem(20px) !default;
-$Tree-itemArrowWidth: px2rem(10px) !default;
+$Tree-itemArrowWidth: px2rem(16px) !default;
 $Tree-arrowVendor: 'FontAwesome' !default;
 $Tree-unfoldedArrowContent: '\f107' !default;
 $Tree-foldedArrowContent: '\f105' !default;
@@ -1271,7 +1278,10 @@ $Tree-leafIconVendor: 'FontAwesome' !default;
 $Tree-leafIconContent: '\f15b' !default;
 $Tree-folderIconVendor: 'FontAwesome' !default;
 $Tree-folderIconContent: '\f07b' !default;
-$Tree-itemText--onChecked-color: $Form-selectValue-color !default;
+$Tree-itemLabel--onChecked-color: $Form-selectValue-color !default;
+$Tree-itemHeight: px2rem(30px) !default;
+$Tree-item-onHover-bg: rgba(0, 126, 255, 0.08) !default;
+$Tree-inputHeight: $Form-input-height * 0.85 !default;
 
 // IconPicker
 $IconPicker-tabs-bg: #f0f3f4 !default;
@@ -1339,8 +1349,8 @@ $Carousel-imageTitle-bottom: px2rem(45px) !default;
 $Carousel-imageDescription-bottom: px2rem(25px) !default;
 
 // Picker
-$Picker-iconColor: $gray600 !default;
-$Picker-onHover-iconColor: darken($Picker-iconColor, 10%) !default;
+$Picker-iconColor: $icon-color !default;
+$Picker-onHover-iconColor: $icon-onHover-color !default;
 $Picker-btn-vendor: 'FontAwesome' !default;
 $Picker-btn-fontSize: $Form-fontSize !default;
 $Picker-btn-icon: '\f2d2' !default;
\ No newline at end of file
diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss
index 30b780ae..e3a33308 100644
--- a/scss/components/form/_checks.scss
+++ b/scss/components/form/_checks.scss
@@ -8,12 +8,12 @@
         position: absolute;
     }
 
-    &:hover input:not(:disabled) + i {
+    &:hover input:not(:disabled)+i {
         border-color: $Checkbox-onHover-color;
         // box-shadow: 0 0 px2rem(1px) $Checkbox-onHover-color inset;
     }
 
-    > i {
+    >i {
         cursor: pointer;
         line-height: 1;
         background: $Checkbox-gb;
@@ -21,7 +21,7 @@
         vertical-align: middle;
         position: relative;
 
-        + span {
+        +span {
             margin-left: $Checkbox-gap;
             cursor: pointer;
 
@@ -39,6 +39,8 @@
             height: 0px;
             background-color: transparent;
             transition: all 0.2s;
+            transform-origin: 50% 50%;
+            transform: translate(-50%, -50%);
         }
     }
 
@@ -48,19 +50,17 @@
         input {
             margin-left: -$Checkbox-size;
 
-            &:checked + i {
+            &:checked+i {
                 border-color: $Checkbox-onHover-color;
 
                 &:before {
-                    left: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) / 2;
-                    top: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) / 2;
                     width: $Checkbox-inner-size;
                     height: $Checkbox-inner-size;
                     background: $Checkbox-onHover-color;
                 }
             }
 
-            &[disabled] + i {
+            &[disabled]+i {
                 border-color: lighten($Checkbox-color, 5%);
                 cursor: not-allowed;
 
@@ -70,13 +70,13 @@
                 }
             }
 
-            &[disabled] + i + span {
+            &[disabled]+i+span {
                 cursor: not-allowed;
                 color: $text--muted-color;
             }
         }
 
-        > i {
+        >i {
             width: $Checkbox-size;
             height: $Checkbox-size;
             border: px2rem(1px) solid $Checkbox-color;
@@ -87,25 +87,16 @@
     }
 
     &--full.#{$ns}Checkbox--checkbox {
-        &:not(:disabled) + i:hover {
+        &:not(:disabled)+i:hover {
             border-color: $Checkbox-color;
         }
 
         input {
-            &:checked + i {
+            &:checked+i {
                 border-color: $Checkbox-onHover-color;
                 background: $Checkbox-onHover-color;
 
                 &:before {
-                    // todo 后面自动计算
-                    @if $ns== 'cxd-' {
-                        top: px2rem(2px);
-                        left: px2rem(1px);
-                    } @else {
-                        top: px2rem(5px);
-                        left: ($Checkbox-size - $Checkbox--full-inner-size) /2;
-                    }
-
                     width: $Checkbox--full-inner-size;
                     height: $Checkbox--full-inner-size / 2;
                     border-color: $white;
@@ -120,13 +111,13 @@
             //     }
             // }
 
-            &:checked[disabled] + i {
+            &:checked[disabled]+i {
                 border-color: lighten($Checkbox-color, 5%);
                 background-color: lighten($Checkbox-color, 5%);
             }
         }
 
-        > i {
+        >i {
             position: relative;
             cursor: pointer;
 
@@ -138,9 +129,9 @@
                 width: 0;
                 height: 0;
                 border-color: transparent;
-                transition: all 0.2s;
+                transition: width 0.2s, height 0.2s, transform 0.2s;
                 border-width: 0 0 px2rem(2px) px2rem(2px);
-                transform: rotate(-40deg);
+                transform: translate(-50%, -60%) rotate(-40deg);
                 border-style: solid;
             }
         }
@@ -152,12 +143,10 @@
         input {
             margin-left: -$Radio-size;
 
-            &:checked + i {
+            &:checked+i {
                 border-color: $Radio-onHover-color;
 
                 &:before {
-                    left: ($Radio-size - px2rem(2px) - $Radio-inner-size) / 2;
-                    top: ($Radio-size - px2rem(2px) - $Radio-inner-size) / 2;
                     width: $Radio-inner-size;
                     height: $Radio-inner-size;
                     background-color: $Radio-onHover-color;
@@ -165,7 +154,7 @@
                 }
             }
 
-            &[disabled] + i {
+            &[disabled]+i {
                 border-color: lighten($Radio-color, 5%);
                 cursor: not-allowed;
 
@@ -174,13 +163,13 @@
                 }
             }
 
-            &[disabled] + i + span {
+            &[disabled]+i+span {
                 cursor: not-allowed;
                 color: $text--muted-color;
             }
         }
 
-        > i {
+        >i {
             cursor: pointer;
             width: $Radio-size;
             height: $Radio-size;
@@ -192,30 +181,41 @@
     }
 
     &--sm {
-        margin-right: px2rem(5px);
+        padding-left: $Checkbox--sm-size;
 
         input {
-            &:checked + i {
+            margin-left: -$Checkbox--sm-size;
+
+            &:checked+i {
                 &:before {
-                    left: $Checkbox--sm-size / 4 - px2rem(1px);
-                    top: $Checkbox--sm-size / 4 - px2rem(1px);
-                    width: $Checkbox--sm-size / 2;
-                    height: $Checkbox--sm-size / 2;
+                    width: $Checkbox--sm-inner-size;
+                    height: $Checkbox--sm-inner-size;
                 }
             }
         }
 
-        > i {
+        >i {
             width: $Checkbox--sm-size;
             height: $Checkbox--sm-size;
             margin-left: -$Checkbox--sm-size;
 
-            + span {
+            +span {
                 margin-left: $gap-xs;
             }
         }
     }
 
+    &--sm.#{$ns}Checkbox--full {
+        input {
+            &:checked+i {
+                &:before {
+                    width: $Checkbox--sm--full-inner-size;
+                    height: $Checkbox--sm--full-inner-size / 2;
+                }
+            }
+        }
+    }
+
     &-desc {
         color: $text--muted-color;
         margin-left: $Checkbox-gap;
@@ -244,13 +244,14 @@
 
 .#{$ns}RadiosControl-group,
 .#{$ns}CheckboxesControl-group {
+
     .#{$ns}RadiosControl-group,
     .#{$ns}CheckboxesControl-group {
         padding-left: px2rem(80px);
         @include clearfix();
 
-        > .#{$ns}RadiosControl-groupLabel,
-        > .#{$ns}CheckboxesControl-groupLabel {
+        >.#{$ns}RadiosControl-groupLabel,
+        >.#{$ns}CheckboxesControl-groupLabel {
             float: left;
             width: px2rem(80px);
             margin-left: px2rem(-80px);
@@ -261,4 +262,4 @@
 .#{$ns}RadiosControl-groupLabel,
 .#{$ns}CheckboxesControl-groupLabel {
     display: block;
-}
+}
\ No newline at end of file
diff --git a/scss/components/form/_select.scss b/scss/components/form/_select.scss
index ee113347..8b83a187 100644
--- a/scss/components/form/_select.scss
+++ b/scss/components/form/_select.scss
@@ -132,22 +132,10 @@
         transform: rotate(180deg);
     }
 
-    // &-menuOuter {
-    //     position: absolute;
-    //     background: $Form-select-menu-bg;
-    //     color: $Form-select-menu-color;
-    //     border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
-    //     left: px2rem(-1px);
-    //     right: px2rem(-1px);
-    //     min-width: 100%;
-    //     top: $Form-select-outer-top;
-    //     z-index: 10;
-    //     box-shadow: $Form-select-outer-boxShadow;
-    // }
-
     &-menu {
         max-height: px2rem(300px);
-        overflow: auto;
+        overflow-y: auto;
+        overflow-x: hidden;
         user-select: none;
     }
 
@@ -156,19 +144,22 @@
         outline: none;
         border: none;
         margin: 0 $Form-select-paddingX;
-        padding: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize)/2 0;
-        line-height: $Form-input-lineHeight;
+        height: $Form-select-search-height;
+        font-size: $Form-select-input-fontSize;
         border-bottom: 1px solid $borderColor;
         display: flex;
         align-items: center;
 
+        // &.is-focused {
+        //     border-color: $Form-input-onFocused-borderColor;
+        // }
+
         >svg {
             fill: #999;
             width: px2rem(14px);
             min-width: px2rem(14px);
             height: px2rem(14px);
             margin-right: px2rem(5px);
-            top: 0;
         }
 
         >input {
@@ -176,7 +167,8 @@
             border: none;
             flex-grow: 1;
             background: transparent;
-            font-size: px2rem(12px);
+            position: relative;
+            top: 0.125em;
         }
     }
 
@@ -222,8 +214,8 @@
     &-noResult {
         color: $Form-select-placeholderColor;
         line-height: $Form-input-lineHeight;
+        font-size: $Form-select-input-fontSize;
         user-select: none;
-        margin: 5px 0 0;
         padding: ($Form-select-menu-height - $Form-input-lineHeight * $Form-input-fontSize)/2 $Form-select-paddingX;
     }
 
@@ -236,6 +228,10 @@
         cursor: pointer;
         padding: ($Form-select-menu-height - $Form-input-lineHeight * $Form-input-fontSize)/2 $Form-select-paddingX;
 
+        &:hover {
+            text-decoration: none;
+        }
+
         >svg {
             width: px2rem(14px);
             height: px2rem(14px);
@@ -278,7 +274,8 @@
 }
 
 .#{$ns}Select-popover {
-    margin-top: px2rem(2px);
+    margin-top: $Form-select-popoverGap - $Form-select-outer-borderWidth;
+
     background: $Form-select-menu-bg;
     color: $Form-select-menu-color;
     border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
@@ -289,7 +286,7 @@
     z-index: 2;
 
     &.#{$ns}PopOver--leftTopLeftBottom {
-        margin-top: px2rem(-2px);
+        margin-top: -($Form-select-popoverGap - $Form-select-outer-borderWidth);
     }
 }
 
diff --git a/scss/components/form/_tree.scss b/scss/components/form/_tree.scss
index 0a03d2c0..c3274746 100644
--- a/scss/components/form/_tree.scss
+++ b/scss/components/form/_tree.scss
@@ -1,34 +1,3 @@
-@mixin tree-input {
-    > svg {
-        display: inline-block;
-        cursor: pointer;
-        position: relative;
-        top: 2px;
-        width: px2rem(16px);
-        height: px2rem(16px);
-        margin-left: px2rem(5px);
-    }
-
-    > input {
-        margin-left: px2rem(15px);
-        padding: px2rem(5px);
-        width: px2rem(150px);
-        height: px2rem(25px);
-        color: $Form-input-color;
-
-        &::placeholder {
-            color: $Form-input-placeholderColor;
-            user-select: none;
-        }
-
-        &:focus {
-            outline: none;
-            border: $borderWidth solid $info;
-        }
-    }
-}
-
-// todo
 .#{$ns}TreeControl {
     border: 1px solid $Form-input-borderColor;
     padding: 6px 12px;
@@ -46,6 +15,7 @@
 }
 
 .#{$ns}Tree {
+
     &-list,
     &-sublist {
         list-style: none;
@@ -53,39 +23,26 @@
         margin: 0;
     }
 
-    &-sublist {
-        padding-left: $Tree-indent;
-
-        &.is-folded {
-            display: none;
-        }
-
-        > li {
-            @include tree-input;
-        }
+    &-sublist.is-folded {
+        display: none;
     }
 
     &-item {
-        line-height: px2rem(30px);
+        line-height: $Tree-itemHeight;
         position: relative;
 
-        .#{$ns}Tree-item-icons {
-            visibility: hidden;
-            transition: visibility .1s ease;
-        }
-
-        > a {
+        >div {
             color: inherit;
 
             &:hover {
                 text-decoration: none;
 
-                > span.#{$ns}Tree-item-icons {
+                >.#{$ns}Tree-item-icons {
                     visibility: visible;
                 }
             }
 
-            > span > svg {
+            >span>svg {
                 display: inline-block;
                 cursor: pointer;
                 position: relative;
@@ -95,49 +52,105 @@
                 margin-left: px2rem(5px);
             }
         }
+    }
 
-        &--isLeaf > a {
-            padding-left: $Tree-itemArrowWidth + $gap-xs;
-        }
-
-        &--isEdit {
-            display: inline-block;
-            @include tree-input;
+    &-itemLabel {
+        &:hover {
+            background: $Tree-item-onHover-bg;
         }
     }
 
-    &-rootItem {
-        > a > i {
-            margin-left: 0 !important;
+    &-item-icons {
+        visibility: hidden;
+        transition: visibility .1s ease;
+        display: inline-block;
+        vertical-align: top;
+        height: $Tree-itemHeight;
+        line-height: $Tree-itemHeight;
+
+        >a {
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: $gap-xs;
+            cursor: pointer;
+
+            >svg {
+                $svgSize: px2rem(16px);
+                width: $svgSize;
+                height: $svgSize;
+                top: 0.125 * $svgSize;
+            }
+        }
+    }
+
+    &-itemInput {
+        padding-left: $Tree-itemArrowWidth;
+
+        >a {
+            display: inline-block;
+            cursor: pointer;
+            margin-left: $gap-sm;
+            color: $icon-color;
+
+            &:hover {
+                color: $icon-onHover-color;
+                text-decoration: none;
+            }
         }
 
-        .#{$ns}Tree-addTop {
-            height: px2rem(25px);
-            line-height: px2rem(25px);
-            cursor: pointer;
-            padding-left: $Tree-indent;
-            > p {
-                > svg {
-                    position: relative;
-                    top: 2px;
-                    width: px2rem(16px);
-                    height: px2rem(16px);
-                }
-                > span {
-                    padding-left: px2rem(5px);
-                }
+        >input {
+            outline: none;
+            background-color: $Form-input-bg;
+            border: $Form-input-borderWidth solid $Form-input-borderColor;
+            border-radius: $Form-input-borderRadius;
+            line-height: $Form-input-lineHeight;
+            padding: ($Tree-inputHeight - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 $Form-input-paddingX;
+            font-size: $Form-input-fontSize;
+
+            &::placeholder {
+                color: $Form-input-placeholderColor;
+                user-select: none;
             }
 
-            &-input {
-                @include tree-input
+            &:focus {
+                border-color: $Form-input-onFocused-borderColor;
+                box-shadow: $Form-input-boxShadow;
+
+                @if $Form-input-onFocused-bg !=$Form-input-bg {
+                    background-color: $Form-input-onFocused-bg;
+                }
             }
         }
     }
 
+    &-addTopBtn {
+        cursor: pointer;
+        height: $Tree-itemHeight;
+        line-height: $Tree-itemHeight;
+        display: block;
+
+        &:hover {
+            text-decoration: none;
+        }
+
+        &.is-disabled {
+            pointer-events: none;
+            color: $text--muted-color;
+        }
+
+        >svg {
+            $svgSize: px2rem(14px);
+            width: $svgSize;
+            height: $svgSize;
+            top: $svgSize * 0.125;
+            margin-right: $Tree-itemArrowWidth - px2rem(14px); // icon 的宽度是14px
+        }
+    }
+
     &-itemArrow {
         cursor: pointer;
         width: $Tree-itemArrowWidth;
-        margin-right: $gap-xs;
+        text-align: center;
         display: inline-block;
 
         &:before {
@@ -151,9 +164,14 @@
         }
     }
 
+    &-itemArrowPlaceholder {
+        display: inline-block;
+        width: $Tree-itemArrowWidth;
+    }
+
     &-itemIcon {
         display: inline-block;
-        margin-right: $gap-xs;
+        margin-right: px2rem(3px);
     }
 
     &-rootIcon {
@@ -180,13 +198,13 @@
         }
     }
 
-    &-itemText {
+    &-itemLabel {
         user-select: none;
         cursor: pointer;
 
         &.is-checked,
         &.is-children-checked {
-            color: $Tree-itemText--onChecked-color;
+            color: $Tree-itemLabel--onChecked-color;
         }
 
         &.is-disabled {
@@ -197,4 +215,46 @@
     &-placeholder {
         color: $text--muted-color;
     }
-}
+
+
+
+    &-item &-item>&-itemLabel {
+        padding-left: $Tree-indent;
+    }
+
+    &-item &-item &-item>&-itemLabel {
+        padding-left: $Tree-indent * 2;
+    }
+
+    &-item &-item &-item &-item>&-itemLabel {
+        padding-left: $Tree-indent * 3;
+    }
+
+    &-item &-item &-item &-item &-item>&-itemLabel {
+        padding-left: $Tree-indent * 4;
+    }
+
+    &-item &-item &-item &-item &-item &-item>&-itemLabel {
+        padding-left: $Tree-indent * 5;
+    }
+
+    &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
+        padding-left: $Tree-indent * 6;
+    }
+
+    &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
+        padding-left: $Tree-indent * 7;
+    }
+
+    &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
+        padding-left: $Tree-indent * 8;
+    }
+
+    &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
+        padding-left: $Tree-indent * 9;
+    }
+
+    &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item &-item>&-itemLabel {
+        padding-left: $Tree-indent * 10;
+    }
+}
\ No newline at end of file
diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss
index 2862ef40..2a19e9af 100644
--- a/scss/themes/cxd.scss
+++ b/scss/themes/cxd.scss
@@ -26,6 +26,9 @@ $borderColor: #e8ebee;
 
 $link-onHover-decoration: none;
 
+$icon-color: #999;
+$icon-onHover-color: $primary;
+
 $Layout-header-boxShadow: none;
 $Layout-header-bg: #F5F5F5;
 $Layout-aside-width: px2rem(180px);
@@ -103,6 +106,9 @@ $Form-select-menu-color: #333;
 $Form-select-menu-onHover-color: #000;
 $Form-select-menu-onHover-bg: #eaf6fe;
 $Form-select-menu-height: px2rem(24px);
+$Form-select-popoverGap: px2rem(3px);
+$Form-select-search-height: px2rem(30px);
+$Form-selectValue-color: $primary !default;
 
 $InputGroup-select-borderWidth: px2rem(1px);
 $InputGroup-select-bg: #f6f7fb;
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index e39f33e6..e9d62061 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -20,7 +20,7 @@ interface CheckboxProps {
   id?: string;
   key?: string | number;
   style?: React.CSSProperties;
-  type?: string;
+  type: 'checkbox' | 'radio';
   size?: 'sm' | 'lg' | 'small' | 'large';
   label?: string;
   labelClassName?: string;
@@ -80,19 +80,12 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
       labelClassName
     } = this.props;
 
-    className =
-      (className ? className : '') +
-      (size && sizeMap[size] ? ` ${sizeMap[size]}` : '');
-
     return (
       <label
-        className={cx(
-          `Checkbox Checkbox--${type}`,
-          {
-            'Checkbox--full': !partial
-          },
-          className
-        )}
+        className={cx(`Checkbox Checkbox--${type}`, className, {
+          'Checkbox--full': !partial,
+          [`Checkbox--${size}`]: size
+        })}
       >
         <input
           type={type}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index b8057c42..50520a6b 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -47,11 +47,15 @@ export interface OptionProps {
   placeholder?: string;
   autoFill?: {[propName: string]: any};
   creatable?: boolean;
-  onAdd?: (idx?: number) => void;
+  onAdd?: (
+    idx?: number | Array<number>,
+    value?: any,
+    skipForm?: boolean
+  ) => void;
   addControls?: Array<any>;
   editable?: boolean;
   editControls?: Array<any>;
-  onEdit?: (value: Option) => void;
+  onEdit?: (value: Option, origin?: Option, skipForm?: boolean) => void;
   removable?: boolean;
   onDelete?: (value: Option) => void;
 }
@@ -588,7 +592,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
     const menu = (
       <div ref={this.menu} className={cx('Select-menu')}>
         {searchable ? (
-          <div className={cx(`Select-input`)}>
+          <div
+            className={cx(`Select-input`, {
+              'is-focused': this.state.isFocused
+            })}
+          >
             <Icon icon="search" className="icon" />
             <input
               {...getInputProps({
diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx
index ccb457a0..fce4bee8 100644
--- a/src/components/Tree.tsx
+++ b/src/components/Tree.tsx
@@ -5,11 +5,12 @@
  */
 
 import React from 'react';
-import {eachTree, isVisible, isObject, autobind} from '../utils/helper';
+import {eachTree, isVisible, autobind, findTreeIndex} from '../utils/helper';
 import {Option, Options, value2array} from './Checkboxes';
 import {ClassNamesFn, themeable} from '../theme';
 import {highlight} from '../renderers/Form/Options';
 import {Icon} from './icons';
+import Checkbox from './Checkbox';
 
 interface TreeSelectorProps {
   classPrefix: string;
@@ -32,18 +33,19 @@ interface TreeSelectorProps {
   // 多选时，选中父节点时，是否只将起子节点加入到值中。
   onlyChildren?: boolean;
   // 名称、取值等字段名映射
-  nameField?: string;
-  valueField?: string;
+  labelField: string;
+  valueField: string;
   iconField?: string;
   unfoldedField?: string;
   foldedField?: string;
   disabledField?: string;
+
   className?: string;
   itemClassName?: string;
   joinValues?: boolean;
   extractValue?: boolean;
   delimiter?: string;
-  data: Options;
+  options: Options;
   value: any;
   onChange: Function;
   placeholder?: string;
@@ -54,26 +56,30 @@ interface TreeSelectorProps {
   selfDisabledAffectChildren?: boolean;
   minLength?: number;
   maxLength?: number;
-  addMode?: 'dialog' | 'normal';
-  addable?: boolean;
-  onAdd?: Function;
-  openAddDialog?: Function;
-  editMode?: 'dialog' | 'normal';
-  onEdit?: Function;
+
+  // 是否为内建 增、改、删。当有复杂表单的时候直接抛出去让外层能统一处理
+  bultinCUD?: boolean;
+  creatable?: boolean;
+  onAdd?: (
+    idx?: number | Array<number>,
+    value?: any,
+    skipForm?: boolean
+  ) => void;
   editable?: boolean;
-  openEditDialog?: Function;
+  onEdit?: (value: Option, origin?: Option, skipForm?: boolean) => void;
   removable?: boolean;
-  onRemove?: Function;
+  onDelete?: (value: Option) => void;
 }
 
 interface TreeSelectorState {
   value: Array<any>;
   unfolded: {[propName: string]: string};
-  editItem: Option | null;
-  addItem: Option | null;
-  addingItem: Option | null;
+
+  inputValue: string;
+  addingParent: Option | null;
+  isAdding: boolean;
+  isEditing: boolean;
   editingItem: Option | null;
-  addTop: boolean;
 }
 
 export class TreeSelector extends React.Component<
@@ -89,7 +95,7 @@ export class TreeSelector extends React.Component<
     disabled: false,
     withChildren: false,
     onlyChildren: false,
-    nameField: 'name',
+    labelField: 'label',
     valueField: 'value',
     iconField: 'icon',
     unfoldedField: 'unfolded',
@@ -115,14 +121,15 @@ export class TreeSelector extends React.Component<
         multiple: props.multiple,
         delimiter: props.delimiter,
         valueField: props.valueField,
-        options: props.data
+        options: props.options
       }),
       unfolded: this.syncUnFolded(props),
-      editItem: null, // 点击编辑时的 item
-      addItem: null, // 点击添加时的 item
-      addingItem: null, // 添加后的 item
-      editingItem: null, // 编辑后的 item
-      addTop: false // 添加一级
+
+      inputValue: '',
+      addingParent: null,
+      isAdding: false,
+      isEditing: false,
+      editingItem: null
     });
   }
 
@@ -131,7 +138,7 @@ export class TreeSelector extends React.Component<
 
     if (
       this.props.value !== nextProps.value ||
-      this.props.data !== nextProps.data
+      this.props.options !== nextProps.options
     ) {
       toUpdate.value = value2array(nextProps.value, {
         joinValues: nextProps.joinValues,
@@ -139,11 +146,11 @@ export class TreeSelector extends React.Component<
         multiple: nextProps.multiple,
         delimiter: nextProps.delimiter,
         valueField: nextProps.valueField,
-        options: nextProps.data
+        options: nextProps.options
       });
     }
 
-    if (this.props.data !== nextProps.data) {
+    if (this.props.options !== nextProps.options) {
       toUpdate.unfolded = this.syncUnFolded(nextProps);
     }
 
@@ -155,7 +162,7 @@ export class TreeSelector extends React.Component<
     let unfolded: {[propName: string]: string} = {};
     const {foldedField, unfoldedField} = this.props;
 
-    eachTree(props.data, (node: Option, index, level) => {
+    eachTree(props.options, (node: Option, index, level) => {
       if (node.children && node.children.length) {
         let ret: any = true;
 
@@ -179,7 +186,6 @@ export class TreeSelector extends React.Component<
   @autobind
   toggleUnfolded(node: any) {
     this.setState({
-      addItem: null,
       unfolded: {
         ...this.state.unfolded,
         [node[this.props.valueField as string]]: !this.state.unfolded[
@@ -308,128 +314,124 @@ export class TreeSelector extends React.Component<
   }
 
   @autobind
-  handleAdd(item: Option | null, isFolder: boolean) {
-    const {addMode, openAddDialog, valueField} = this.props;
-    let {unfolded} = this.state;
-    if (addMode === 'dialog') {
-      openAddDialog && openAddDialog(item ? item : null);
-    } else if (addMode === 'normal') {
-      // item 为 null 时为添加一级
-      if (item) {
-        // 添加时，默认折叠的文件夹需要展开
-        if (isFolder && !unfolded[item[valueField as string]]) {
-          unfolded = {
-            ...unfolded,
-            [item[valueField as string]]: !unfolded[item[valueField as string]]
-          };
-        }
+  handleAdd(parent: Option | null = null) {
+    const {bultinCUD, onAdd, options} = this.props;
+    let idx: Array<number> | undefined = undefined;
 
-        this.setState({
-          addItem: item,
-          editItem: null,
-          unfolded
-        });
-      } else {
-        this.setState({
-          addTop: true,
-          editItem: null,
-          addItem: null
-        });
-      }
+    if (!bultinCUD) {
+      idx = parent
+        ? findTreeIndex(options, item => item === parent)
+        : undefined;
+      return onAdd && onAdd(idx);
+    } else {
+      this.setState({
+        isEditing: false,
+        isAdding: true,
+        addingParent: parent
+      });
     }
   }
 
   @autobind
   handleEdit(item: Option) {
-    const {editMode, openEditDialog} = this.props;
-    const {addItem} = this.state;
-    if (editMode === 'dialog') {
-      openEditDialog && openEditDialog(item);
-      addItem &&
-        this.setState({
-          addItem: null
-        });
-    } else if (editMode === 'normal') {
-      this.setState({
-        editItem: item,
-        addItem: null
-      });
-    }
+    const labelField = this.props.labelField;
+    this.setState({
+      isEditing: true,
+      isAdding: false,
+      editingItem: item,
+      inputValue: item[labelField]
+    });
   }
 
   @autobind
   handleRemove(item: Option) {
-    const {onRemove} = this.props;
-    onRemove && onRemove(item);
+    const {onDelete} = this.props;
+
+    onDelete && onDelete(item);
   }
 
   @autobind
-  handleConfirmOnAdd() {
-    const {onAdd} = this.props;
-    const {addItem: parent, addingItem} = this.state;
-    onAdd &&
-      onAdd({
-        ...addingItem,
-        parent: parent
-      });
-
+  handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
     this.setState({
-      addingItem: null,
-      addItem: null,
-      addTop: false
+      inputValue: e.currentTarget.value
     });
   }
 
   @autobind
-  handleCancelOnAdd() {
-    this.setState({
-      addItem: null,
-      addTop: false
-    });
-  }
+  handleConfirm() {
+    const {
+      inputValue: value,
+      isAdding,
+      addingParent,
+      editingItem,
+      isEditing
+    } = this.state;
 
-  @autobind
-  handleConfirmOnEdit() {
-    const {onEdit} = this.props;
-    let {editingItem, editItem: prevItem} = this.state;
-    onEdit &&
-      onEdit({
-        ...editingItem,
-        prev: prevItem
-      });
-    this.setState({
-      editingItem: null,
-      editItem: null
-    });
-  }
+    if (!value) {
+      return;
+    }
 
-  @autobind
-  handleCancelOnEdit() {
-    this.setState({
-      editItem: null
-    });
-  }
-
-  @autobind
-  handleChangeOnAdd(value: string) {
-    this.setState({
-      addingItem: {
-        label: value
+    const {labelField, onAdd, options, onEdit} = this.props;
+    this.setState(
+      {
+        inputValue: '',
+        isAdding: false,
+        isEditing: false
+      },
+      () => {
+        if (isAdding && onAdd) {
+          let idx =
+            (addingParent &&
+              findTreeIndex(options, item => item === addingParent)) ||
+            [];
+          onAdd(idx.concat(0), {[labelField]: value}, true);
+        } else if (isEditing && onEdit) {
+          onEdit(
+            {
+              ...editingItem,
+              [labelField]: value
+            },
+            editingItem!,
+            true
+          );
+        }
       }
-    });
+    );
   }
 
   @autobind
-  handleChangeOnEdit(item: Option, value: string) {
-    let {editItem} = this.state;
+  handleCancel() {
     this.setState({
-      editingItem: {
-        ...item,
-        label: value || (editItem as Option)['label']
-      }
+      inputValue: '',
+      isAdding: false,
+      isEditing: false
     });
   }
 
+  renderInput(prfix: JSX.Element | null = null) {
+    const {classnames: cx} = this.props;
+    const {inputValue} = this.state;
+
+    return (
+      <div className={cx('Tree-itemLabel')}>
+        <div className={cx('Tree-itemInput')}>
+          {prfix}
+          <input
+            onChange={this.handleInputChange}
+            value={inputValue}
+            placeholder="请输入"
+          />
+          <a data-tooltip="取消" onClick={this.handleCancel}>
+            <Icon icon="close" className="icon" />
+          </a>
+          <a data-tooltip="确认" onClick={this.handleConfirm}>
+            <Icon icon="check" className="icon" />
+          </a>
+        </div>
+      </div>
+    );
+  }
+
   @autobind
   renderList(
     list: Options,
@@ -442,7 +444,7 @@ export class TreeSelector extends React.Component<
       showRadio,
       multiple,
       disabled,
-      nameField = '',
+      labelField: nameField = '',
       valueField = '',
       iconField = '',
       disabledField = '',
@@ -451,14 +453,21 @@ export class TreeSelector extends React.Component<
       onlyChildren,
       classnames: cx,
       highlightTxt,
-      data,
+      options: data,
       maxLength,
       minLength,
-      addable,
+      creatable,
       editable,
       removable
     } = this.props;
-    const {addItem, editItem, unfolded, addTop, value: stateValue} = this.state;
+    const {
+      unfolded,
+      value: stateValue,
+      isAdding,
+      addingParent,
+      editingItem,
+      isEditing
+    } = this.state;
 
     let childrenChecked = 0;
     let ret = list.map((item, key) => {
@@ -508,25 +517,19 @@ export class TreeSelector extends React.Component<
       }
 
       const checkbox: JSX.Element | null = multiple ? (
-        <label className={cx(`Checkbox Checkbox--checkbox Checkbox--sm`)}>
-          <input
-            type="checkbox"
-            disabled={nodeDisabled}
-            checked={selfChecked}
-            onChange={e => this.handleCheck(item, e.currentTarget.checked)}
-          />
-          <i />
-        </label>
+        <Checkbox
+          size="sm"
+          disabled={nodeDisabled}
+          checked={checked}
+          onChange={this.handleCheck.bind(this, item)}
+        />
       ) : showRadio ? (
-        <label className={cx(`Checkbox Checkbox--radio Checkbox--sm`)}>
-          <input
-            type="radio"
-            disabled={nodeDisabled}
-            checked={checked}
-            onChange={() => this.handleSelect(item)}
-          />
-          <i />
-        </label>
+        <Checkbox
+          size="sm"
+          disabled={nodeDisabled}
+          checked={checked}
+          onChange={this.handleSelect.bind(this, item)}
+        />
       ) : null;
 
       const isLeaf = !item.children || !item.children.length;
@@ -538,10 +541,17 @@ export class TreeSelector extends React.Component<
             'Tree-item--isLeaf': isLeaf
           })}
         >
-          {!editItem ||
-          (isObject(editItem) &&
-            (editItem as Option)[valueField] !== item[valueField]) ? (
-            <a>
+          {isEditing && editingItem === item ? (
+            this.renderInput(checkbox)
+          ) : (
+            <div
+              className={cx('Tree-itemLabel', {
+                'is-children-checked':
+                  multiple && !cascade && tmpChildrenChecked && !nodeDisabled,
+                'is-checked': checked,
+                'is-disabled': nodeDisabled
+              })}
+            >
               {!isLeaf ? (
                 <i
                   onClick={() => this.toggleUnfolded(item)}
@@ -549,26 +559,14 @@ export class TreeSelector extends React.Component<
                     'is-folded': !unfolded[item[valueField]]
                   })}
                 />
-              ) : null}
-
-              {showIcon ? (
-                <i
-                  className={cx(
-                    `Tree-itemIcon ${item[iconField] ||
-                      (childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')}`
-                  )}
-                />
-              ) : null}
+              ) : (
+                <span className={cx('Tree-itemArrowPlaceholder')} />
+              )}
 
               {checkbox}
 
               <span
-                className={cx('Tree-itemText', {
-                  'is-children-checked':
-                    multiple && !cascade && tmpChildrenChecked && !nodeDisabled,
-                  'is-checked': checked,
-                  'is-disabled': nodeDisabled
-                })}
+                className={cx('Tree-itemText')}
                 onClick={() =>
                   !nodeDisabled &&
                   (multiple
@@ -576,77 +574,63 @@ export class TreeSelector extends React.Component<
                     : this.handleSelect(item))
                 }
               >
+                {showIcon ? (
+                  <i
+                    className={cx(
+                      `Tree-itemIcon ${item[iconField] ||
+                        (childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')}`
+                    )}
+                  />
+                ) : null}
+
                 {highlightTxt
                   ? highlight(item[nameField], highlightTxt)
                   : item[nameField]}
               </span>
-              {!nodeDisabled && !addTop && !addItem && !editItem ? (
-                <span className={cx('Tree-item-icons')}>
-                  {addable ? (
-                    <Icon
-                      icon="plus"
-                      className="icon"
-                      onClick={() => this.handleAdd(item, !isLeaf)}
-                    />
+              {!nodeDisabled && !isAdding && !isEditing ? (
+                <div className={cx('Tree-item-icons')}>
+                  {creatable ? (
+                    <a
+                      onClick={this.handleAdd.bind(this, item)}
+                      data-tooltip="添加孩子节点"
+                    >
+                      <Icon icon="plus" className="icon" />
+                    </a>
                   ) : null}
                   {removable ? (
-                    <Icon
-                      icon="minus"
-                      className="icon"
-                      onClick={() => this.handleRemove(item)}
-                    />
+                    <a
+                      onClick={this.handleRemove.bind(this, item)}
+                      data-tooltip="移除该节点"
+                    >
+                      <Icon icon="minus" className="icon" />
+                    </a>
                   ) : null}
                   {editable ? (
-                    <Icon
-                      icon="pencil"
-                      className="icon"
-                      onClick={() => this.handleEdit(item)}
-                    />
+                    <a
+                      onClick={this.handleEdit.bind(this, item)}
+                      data-tooltip="编辑该节点"
+                    >
+                      <Icon icon="pencil" className="icon" />
+                    </a>
                   ) : null}
-                </span>
+                </div>
               ) : null}
-            </a>
-          ) : (
-            <div className={cx('Tree-item--isEdit')}>
-              <input
-                defaultValue={item['label']}
-                onChange={e =>
-                  this.handleChangeOnEdit(item, e.currentTarget.value)
-                }
-              />
-              <Icon
-                icon="check"
-                className="icon"
-                onClick={this.handleConfirmOnEdit}
-              />
-              <Icon
-                icon="close"
-                className="icon"
-                onClick={this.handleCancelOnEdit}
-              />
             </div>
           )}
           {/* 有children而且为展开状态 或者 添加child时 */}
           {(childrenItems && unfolded[item[valueField]]) ||
-          (addItem && addItem[valueField] === item[valueField]) ? (
+          (isAdding && addingParent === item) ? (
             <ul className={cx('Tree-sublist')}>
-              {addItem && addItem[valueField] === item[valueField] ? (
-                <li>
-                  <input
-                    onChange={e =>
-                      this.handleChangeOnAdd(e.currentTarget.value)
-                    }
-                  />
-                  <Icon
-                    icon="check"
-                    className="icon"
-                    onClick={this.handleConfirmOnAdd}
-                  />
-                  <Icon
-                    icon="close"
-                    className="icon"
-                    onClick={this.handleCancelOnAdd}
-                  />
+              {isAdding && addingParent === item ? (
+                <li className={cx('Tree-item')}>
+                  {this.renderInput(
+                    checkbox
+                      ? React.cloneElement(checkbox, {
+                          checked: false,
+                          disabled: true
+                        })
+                      : null
+                  )}
                 </li>
               ) : null}
               {childrenItems}
@@ -670,29 +654,53 @@ export class TreeSelector extends React.Component<
       rootLabel,
       showIcon,
       classnames: cx,
-      addable
+      creatable
     } = this.props;
-    let data = this.props.data;
-    const {value, addTop} = this.state;
+    let data = this.props.options;
+    const {value, isAdding, addingParent, isEditing, inputValue} = this.state;
+
+    let addBtn = null;
+
+    if (creatable) {
+      addBtn = (
+        <li>
+          <a
+            className={cx('Tree-addTopBtn', {
+              'is-disabled': isAdding || isEditing
+            })}
+            onClick={this.handleAdd.bind(this, null)}
+          >
+            <Icon icon="plus" className="icon" />
+            <span>添加一级节点</span>
+          </a>
+        </li>
+      );
+    }
 
     return (
       <div className={cx(`Tree ${className || ''}`)}>
         {data && data.length ? (
           <ul className={cx('Tree-list')}>
             {hideRoot ? (
-              this.renderList(data, value, false).dom
+              <>
+                {addBtn}
+                {isAdding && !addingParent ? (
+                  <li className={cx('Tree-item')}>{this.renderInput()}</li>
+                ) : null}
+                {this.renderList(data, value, false).dom}
+              </>
             ) : (
-              <li className={cx('Tree-item Tree-rootItem')}>
+              <li
+                className={cx('Tree-item Tree-rootItem', {
+                  'is-checked': !value || !value.length
+                })}
+              >
                 <a>
                   {showIcon ? (
                     <i className={cx('Tree-itemIcon Tree-rootIcon')} />
                   ) : null}
 
-                  <label
-                    className={cx('Tree-itemLabel', {
-                      'is-checked': !value || !value.length
-                    })}
-                  >
+                  <label className={cx('Tree-itemLabel')}>
                     <span
                       className={cx('Tree-itemText')}
                       onClick={this.clearSelect}
@@ -701,36 +709,11 @@ export class TreeSelector extends React.Component<
                     </span>
                   </label>
                 </a>
-                {addable ? (
-                  <div className={cx('Tree-addTop')}>
-                    {!addTop ? (
-                      <p onClick={() => this.handleAdd(null, false)}>
-                        <Icon icon="plus" className="icon" />
-                        <span>添加一级</span>
-                      </p>
-                    ) : null}
-                    {addTop ? (
-                      <div className={cx('Tree-addTop-input')}>
-                        <input
-                          onChange={e =>
-                            this.handleChangeOnAdd(e.currentTarget.value)
-                          }
-                        />
-                        <Icon
-                          icon="check"
-                          className="icon"
-                          onClick={this.handleConfirmOnAdd}
-                        />
-                        <Icon
-                          icon="close"
-                          className="icon"
-                          onClick={this.handleCancelOnAdd}
-                        />
-                      </div>
-                    ) : null}
-                  </div>
-                ) : null}
+                {addBtn}
                 <ul className={cx('Tree-sublist')}>
+                  {isAdding && !addingParent ? (
+                    <li className={cx('Tree-item')}>{this.renderInput()}</li>
+                  ) : null}
                   {this.renderList(data, value, false).dom}
                 </ul>
               </li>
diff --git a/src/icons/check.svg b/src/icons/check.svg
index 304805e8..2099d16a 100644
--- a/src/icons/check.svg
+++ b/src/icons/check.svg
@@ -1,3 +1,9 @@
-<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3506" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M972.544 175.189333a31.658667 31.658667 0 0 1 15.701333 5.162667 31.872 31.872 0 0 1 7.296 46.976c-0.682667 0.896-1.493333 1.664-2.218666 2.474667L343.082667 876.032a32.341333 32.341333 0 0 1-37.546667 5.589333 37.504 37.504 0 0 1-8.064-6.101333L30.208 597.845333c-0.768-0.810667-1.536-1.621333-2.218667-2.517333a32.256 32.256 0 0 1 14.378667-49.749333 32 32 0 0 1 28.8 3.584c2.474667 1.664 2.944 2.304 5.12 4.309333l244.736 254.250667L948.181333 184.448l2.517334-2.261333a36.693333 36.693333 0 0 1 11.861333-6.016c2.901333-0.725333 3.669333-0.725333 6.613333-1.024l3.370667 0.042666z" p-id="3507"></path>
-</svg>
\ No newline at end of file
+<svg viewBox="0 0 13 9" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" p-id="3506" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g transform="translate(6.656854, 2.656854) scale(-1, 1) rotate(-315.000000) translate(-6.656854, -2.656854) ">
+        <polygon id="path-1" points="11.1568542 5.15685425 11.1568542 -0.843145751 12.1568542 -0.843145751 12.1568542 6.15685425 1.15685425 6.15685425 1.15685425 5.15685425"></polygon>
+    </g>
+</svg>
+
+
diff --git a/src/icons/close.svg b/src/icons/close.svg
index 31d97c03..85243a17 100644
--- a/src/icons/close.svg
+++ b/src/icons/close.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
-    <path d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z" p-id="1464" data-spm-anchor-id="a313x.7781069.0.i0" />
+    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12" version="1.1">
+    <polygon id="path-1" points="6.0003653 5.2970518 10.5993691 0.6980479600000002 11.3064759 1.4051547400000004 6.7074721 6.0041586 11.3009516 10.5976381 10.5938448 11.3047449 6.0003653 6.7112654 1.4056713299999997 11.3059593 0.6985645500000004 10.5988525 5.2932585 6.0041586 0.6956119200000002 1.4065120000000002 1.4027187000000003 0.69940522"></polygon>
 </svg>
\ No newline at end of file
diff --git a/src/renderers/Form/Options.tsx b/src/renderers/Form/Options.tsx
index 177a9b85..675845fb 100644
--- a/src/renderers/Form/Options.tsx
+++ b/src/renderers/Form/Options.tsx
@@ -8,7 +8,9 @@ import {
   anyChanged,
   autobind,
   createObject,
-  setVariable
+  setVariable,
+  spliceTree,
+  findTreeIndex
 } from '../../utils/helper';
 import {reaction} from 'mobx';
 import {FormControlProps, registerFormItem, FormItemBasicConfig} from './Item';
@@ -42,11 +44,15 @@ export interface OptionsControlProps extends FormControlProps, OptionProps {
   setLoading: (value: boolean) => void;
   reloadOptions: () => void;
   creatable?: boolean;
-  onAdd?: (idx?: number) => void;
+  onAdd?: (
+    idx?: number | Array<number>,
+    value?: any,
+    skipForm?: boolean
+  ) => void;
   addControls?: Array<any>;
   editable?: boolean;
   editControls?: Array<any>;
-  onEdit?: (value: Option) => void;
+  onEdit?: (value: Option, origin?: Option, skipForm?: boolean) => void;
   removable?: boolean;
   onDelete?: (value: Option) => void;
 }
@@ -462,7 +468,11 @@ export function registerOptionsControl(config: OptionsConfig) {
     }
 
     @autobind
-    async handleOptionAdd(idx: number = -1) {
+    async handleOptionAdd(
+      idx: number | Array<number> = -1,
+      value: any,
+      skipForm: boolean = false
+    ) {
       let {
         addControls,
         disabled,
@@ -473,15 +483,17 @@ export function registerOptionsControl(config: OptionsConfig) {
         data,
         valueField,
         formItem: model,
-        createBtnLabel
+        createBtnLabel,
+        env
       } = this.props;
 
+      // 禁用或者没有配置 name
       if (disabled || !model) {
         return;
       }
 
       // 用户没有配置表单项，则自动创建一个 label 输入
-      if (!Array.isArray(addControls) || !addControls.length) {
+      if (!skipForm && (!Array.isArray(addControls) || !addControls.length)) {
         addControls = [
           {
             type: 'text',
@@ -492,18 +504,37 @@ export function registerOptionsControl(config: OptionsConfig) {
         ];
       }
 
-      let result: any = await onOpenDialog(
-        {
-          type: 'dialog',
-          title: createBtnLabel || '新增选项',
-          body: {
-            type: 'form',
-            api: addApi,
-            controls: addControls
+      let result: any = skipForm
+        ? value
+        : await onOpenDialog(
+            {
+              type: 'dialog',
+              title: createBtnLabel || '新增选项',
+              body: {
+                type: 'form',
+                api: addApi,
+                controls: addControls
+              }
+            },
+            data
+          );
+
+      // 单独发请求
+      if (skipForm && addApi) {
+        try {
+          const payload = await env.fetcher(addApi!, result);
+
+          if (!payload.ok) {
+            env.notify('error', payload.msg || '新增失败，请仔细检查');
+          } else {
+            result = payload.data || result;
           }
-        },
-        data
-      );
+        } catch (e) {
+          result = null;
+          console.error(e);
+          env.notify('error', e.message);
+        }
+      }
 
       // 有 result 说明弹框点了确认。否则就是取消了。
       if (!result) {
@@ -523,13 +554,24 @@ export function registerOptionsControl(config: OptionsConfig) {
         this.reload();
       } else {
         // 否则直接前端变更 options
-        const options = model.options.concat();
-        ~idx ? options.splice(idx, 0, {...result}) : options.push({...result});
+        let options = model.options.concat();
+        if (Array.isArray(idx)) {
+          options = spliceTree(options, idx, 0, {...result});
+        } else {
+          ~idx
+            ? options.splice(idx, 0, {...result})
+            : options.push({...result});
+        }
+        model.setOptions(options);
       }
     }
 
     @autobind
-    async handleOptionEdit(value: any) {
+    async handleOptionEdit(
+      value: any,
+      origin: any = value,
+      skipForm: boolean = false
+    ) {
       let {
         editControls,
         disabled,
@@ -538,15 +580,14 @@ export function registerOptionsControl(config: OptionsConfig) {
         editApi,
         source,
         data,
-        formItem: model,
-        valueField
+        formItem: model
       } = this.props;
 
       if (disabled || !model) {
         return;
       }
 
-      if (!Array.isArray(editControls) || !editControls.length) {
+      if (!skipForm && (!Array.isArray(editControls) || !editControls.length)) {
         editControls = [
           {
             type: 'text',
@@ -557,18 +598,20 @@ export function registerOptionsControl(config: OptionsConfig) {
         ];
       }
 
-      let result = await onOpenDialog(
-        {
-          type: 'dialog',
-          title: '编辑选项',
-          body: {
-            type: 'form',
-            api: editApi,
-            controls: editControls
-          }
-        },
-        createObject(data, value)
-      );
+      let result = skipForm
+        ? value
+        : await onOpenDialog(
+            {
+              type: 'dialog',
+              title: '编辑选项',
+              body: {
+                type: 'form',
+                api: editApi,
+                controls: editControls
+              }
+            },
+            createObject(data, value)
+          );
 
       // 没有结果，说明取消了。
       if (!result) {
@@ -578,18 +621,15 @@ export function registerOptionsControl(config: OptionsConfig) {
       if (source) {
         this.reload();
       } else {
-        const options = model.options.concat();
-        const idx = findIndex(
-          options,
-          item => item[valueField || 'value'] == result[valueField || 'value']
-        );
+        const indexes = findTreeIndex(model.options, item => item === origin);
 
-        if (~idx) {
-          options.splice(idx, 1, {
-            ...options[idx],
-            ...result
-          });
-          model.setOptions(options);
+        if (indexes) {
+          model.setOptions(
+            spliceTree(model.options, indexes, 1, {
+              ...origin,
+              ...result
+            })
+          );
         }
       }
     }
@@ -623,6 +663,10 @@ export function registerOptionsControl(config: OptionsConfig) {
 
       // 通过 deleteApi 删除。
       try {
+        if (!deleteApi) {
+          throw new Error('请配置 deleteApi');
+        }
+
         const result = await env.fetcher(deleteApi!, ctx);
 
         if (!result.ok) {
@@ -655,7 +699,8 @@ export function registerOptionsControl(config: OptionsConfig) {
         editApi,
         deleteApi,
         creatable,
-        editable
+        editable,
+        removable
       } = this.props;
 
       return (
@@ -673,7 +718,7 @@ export function registerOptionsControl(config: OptionsConfig) {
           reloadOptions={this.reload}
           creatable={creatable || isEffectiveApi(addApi)}
           editable={editable || isEffectiveApi(editApi)}
-          removable={isEffectiveApi(deleteApi)}
+          removable={removable || isEffectiveApi(deleteApi)}
           onAdd={this.handleOptionAdd}
           onEdit={this.handleOptionEdit}
           onDelete={this.handleOptionDelete}
diff --git a/src/renderers/Form/Tree.tsx b/src/renderers/Form/Tree.tsx
index f0b1b9e9..c84c23a7 100644
--- a/src/renderers/Form/Tree.tsx
+++ b/src/renderers/Form/Tree.tsx
@@ -2,11 +2,6 @@ import React from 'react';
 import cx from 'classnames';
 import TreeSelector from '../../components/Tree';
 import {OptionsControl, OptionsControlProps} from './Options';
-import {autobind, createObject} from '../../utils/helper';
-import {Action, Schema, PlainObject, Api, Payload} from '../../types';
-import {isEffectiveApi} from '../../utils/api';
-import {filter} from '../../utils/tpl';
-import {Option} from '../../components/Checkboxes';
 import {Spinner} from '../../components';
 
 export interface TreeProps extends OptionsControlProps {
@@ -18,13 +13,14 @@ export interface TreeProps extends OptionsControlProps {
   cascade?: boolean; // 父子之间是否完全独立。
   withChildren?: boolean; // 选父级的时候是否把子节点的值也包含在内。
   onlyChildren?: boolean; // 选父级的时候，是否只把子节点的值包含在内
+  addControls?: Array<any>;
+  updateControls?: Array<any>;
 }
 
 export default class TreeControl extends React.Component<TreeProps> {
   static defaultProps: Partial<TreeProps> = {
     placeholder: '选项加载中...',
     multiple: false,
-    hideRoot: false,
     rootLabel: '顶级',
     rootValue: '',
     showIcon: true
@@ -59,7 +55,15 @@ export default class TreeControl extends React.Component<TreeProps> {
       cascade,
       rootValue,
       showIcon,
-      showRadio
+      showRadio,
+      onAdd,
+      creatable,
+      addControls,
+      onEdit,
+      editable,
+      editControls,
+      removable,
+      onDelete
     } = this.props;
 
     return (
@@ -75,7 +79,7 @@ export default class TreeControl extends React.Component<TreeProps> {
             extractValue={extractValue}
             delimiter={delimiter}
             placeholder={placeholder}
-            data={options}
+            options={options}
             multiple={multiple}
             initiallyOpen={initiallyOpen}
             unfoldedLevel={unfoldedLevel}
@@ -89,8 +93,15 @@ export default class TreeControl extends React.Component<TreeProps> {
             cascade={cascade}
             foldedField="collapsed"
             value={value || ''}
-            nameField="label"
+            labelField="label"
             selfDisabledAffectChildren={false}
+            onAdd={onAdd}
+            creatable={creatable}
+            onEdit={onEdit}
+            editable={editable}
+            removable={removable}
+            onDelete={onDelete}
+            bultinCUD={!addControls && !editControls}
           />
         )}
       </div>
diff --git a/src/renderers/Form/TreeSelect.tsx b/src/renderers/Form/TreeSelect.tsx
index 87c128e8..3d66a3dc 100644
--- a/src/renderers/Form/TreeSelect.tsx
+++ b/src/renderers/Form/TreeSelect.tsx
@@ -419,7 +419,7 @@ export default class TreeSelectControl extends React.Component<
             extractValue={extractValue}
             delimiter={delimiter}
             placeholder={optionsPlaceholder}
-            data={filtedOptions}
+            options={filtedOptions}
             highlightTxt={this.state.inputValue}
             multiple={multiple}
             initiallyOpen={initiallyOpen}
@@ -433,7 +433,7 @@ export default class TreeSelectControl extends React.Component<
             foldedField="collapsed"
             hideRoot
             value={value || ''}
-            nameField="label"
+            labelField="label"
             maxLength={maxLength}
             minLength={minLength}
           />
diff --git a/src/utils/helper.ts b/src/utils/helper.ts
index 54680b84..306f618b 100644
--- a/src/utils/helper.ts
+++ b/src/utils/helper.ts
@@ -691,6 +691,11 @@ export function mapTree<T extends TreeItem>(
   });
 }
 
+/**
+ * 遍历树
+ * @param tree
+ * @param iterator
+ */
 export function eachTree<T extends TreeItem>(
   tree: Array<T>,
   iterator: (item: T, key: number, level: number) => any,
@@ -705,15 +710,19 @@ export function eachTree<T extends TreeItem>(
   });
 }
 
+/**
+ * 在树中查找节点。
+ * @param tree
+ * @param iterator
+ */
 export function findTree<T extends TreeItem>(
   tree: Array<T>,
-  iterator: (item: T, key: number, level: number) => any,
-  level: number = 1
+  iterator: (item: T, key: number, level: number, paths: Array<T>) => any
 ): T | null {
   let result: T | null = null;
 
-  everyTree(tree, (item, key, level) => {
-    if (iterator(item, key, level)) {
+  everyTree(tree, (item, key, level, paths) => {
+    if (iterator(item, key, level, paths)) {
       result = item;
       return false;
     }
@@ -723,6 +732,46 @@ export function findTree<T extends TreeItem>(
   return result;
 }
 
+/**
+ * 在树中查找节点, 返回下标数组。
+ * @param tree
+ * @param iterator
+ */
+export function findTreeIndex<T extends TreeItem>(
+  tree: Array<T>,
+  iterator: (item: T, key: number, level: number, paths: Array<T>) => any
+): Array<number> | undefined {
+  let idx: Array<number> = [];
+
+  findTree(tree, (item, index, level, paths) => {
+    if (iterator(item, index, level, paths)) {
+      idx = [index];
+
+      paths = paths.concat();
+      paths.unshift({
+        children: tree
+      } as any);
+
+      for (let i = paths.length - 1; i > 0; i--) {
+        const prev = paths[i - 1];
+        const current = paths[i];
+        idx.unshift(prev.children!.indexOf(current));
+      }
+
+      return true;
+    }
+    return false;
+  });
+
+  return idx.length ? idx : undefined;
+}
+
+/**
+ * 过滤树节点
+ *
+ * @param tree
+ * @param iterator
+ */
 export function filterTree<T extends TreeItem>(
   tree: Array<T>,
   iterator: (item: T, key: number, level: number) => boolean,
@@ -741,44 +790,111 @@ export function filterTree<T extends TreeItem>(
   });
 }
 
+/**
+ * 判断树中每个节点是否满足某个条件。
+ * @param tree
+ * @param iterator
+ */
 export function everyTree<T extends TreeItem>(
   tree: Array<T>,
-  iterator: (item: T, key: number, level: number) => boolean,
-  level: number = 1
+  iterator: (item: T, key: number, level: number, paths: Array<T>) => boolean,
+  level: number = 1,
+  paths: Array<T> = []
 ): boolean {
   return tree.every((item, index) => {
-    const value: any = iterator(item, index, level);
+    const value: any = iterator(item, index, level, paths);
 
     if (value && item.children && item.children.splice) {
-      return everyTree(item.children, iterator, level + 1);
+      return everyTree(item.children, iterator, level + 1, paths.concat(item));
     }
 
     return value;
   });
 }
 
+/**
+ * 判断树中是否有某些节点满足某个条件。
+ * @param tree
+ * @param iterator
+ */
 export function someTree<T extends TreeItem>(
   tree: Array<T>,
-  iterator: (item: T, key: number, level: number) => boolean,
-  level: number = 1
+  iterator: (item: T, key: number, level: number, paths: Array<T>) => boolean
 ): boolean {
-  return tree.some((item, index) => {
-    const value: any = iterator(item, index, level);
-
-    if (!value && item.children && item.children.splice) {
-      return someTree(item.children, iterator, level + 1);
-    }
-
-    return value;
-  });
+  return !everyTree(tree, iterator);
 }
 
-export function flattenTree<T extends TreeItem>(tree: Array<T>): Array<T> {
-  let flattened: Array<T> = [];
-  eachTree(tree, item => flattened.push(item));
+/**
+ * 将树打平变成一维数组，可以传入第二个参数实现打平节点中的其他属性。
+ *
+ * 比如：
+ *
+ * flattenTree([
+ *     {
+ *         id: 1,
+ *         children: [
+ *              { id: 2 },
+ *              { id: 3 },
+ *         ]
+ *     }
+ * ], item => item.id); // 输出位 [1, 2, 3]
+ *
+ * @param tree
+ * @param mapper
+ */
+export function flattenTree<T extends TreeItem>(tree: Array<T>): Array<T>;
+export function flattenTree<T extends TreeItem, U>(
+  tree: Array<T>,
+  mapper: (value: T, index: number) => U
+): Array<U>;
+export function flattenTree<T extends TreeItem, U>(
+  tree: Array<T>,
+  mapper?: (value: T, index: number) => U
+): Array<U> {
+  let flattened: Array<any> = [];
+  eachTree(tree, (item, index) =>
+    flattened.push(mapper ? mapper(item, index) : item)
+  );
   return flattened;
 }
 
+/**
+ * 操作树，遵循 imutable, 每次返回一个新的树。
+ * 类似数组的 splice 不同的地方这个方法不修改原始数据，
+ * 同时第二个参数不是下标，而是下标数组，分别代表每一层的下标。
+ *
+ * 至于如何获取下标数组，请查看 findTreeIndex
+ *
+ * @param tree
+ * @param idx
+ * @param deleteCount
+ * @param ...items
+ */
+export function spliceTree<T extends TreeItem>(
+  tree: Array<T>,
+  idx: Array<number> | number,
+  deleteCount: number = 0,
+  ...items: Array<T>
+): Array<T> {
+  const list = tree.concat();
+  if (typeof idx === 'number') {
+    list.splice(idx, deleteCount, ...items);
+  } else if (Array.isArray(idx) && idx.length) {
+    const lastIdx = idx.pop()!;
+    let host = idx.reduce((list: Array<T>, idx) => {
+      const child = {
+        ...list[idx],
+        children: list[idx].children ? list[idx].children!.concat() : []
+      };
+      list[idx] = child;
+      return child.children;
+    }, list);
+    host.splice(lastIdx, deleteCount, ...items);
+  }
+
+  return list;
+}
+
 export function ucFirst(str?: string) {
   return str ? str.substring(0, 1).toUpperCase() + str.substring(1) : '';
 }