diff --git a/es6.js b/es6.js
index b3e9e1b6f..7b7734593 100644
--- a/es6.js
+++ b/es6.js
@@ -92,27 +92,36 @@ async function handleFile(srcName) {
         });
 
         const target = [
-            "isNull",
-            "toPix",
-            "isKey",
-            "isObject",
-            "map",
-            "extend",
-            "isFunction",
-            "isEmptyArray",
-            "isArray",
-            "Controller",
-            clzName,
-            "createWidget",
-            "Events",
-            "emptyFn",
-            "nextTick",
-            "bind",
-            "i18nText",
-            "isNotNull",
-            "isString",
-            "isNumber",
-            "isEmpty",
+          "isNull",
+          "toPix",
+          "isKey",
+          "isObject",
+          "map",
+          "extend",
+          "isFunction",
+          "isEmptyArray",
+          "isArray",
+          "Controller",
+          clzName,
+          "createWidget",
+          "Events",
+          "emptyFn",
+          "nextTick",
+          "bind",
+          "i18nText",
+          "isNotNull",
+          "isString",
+          "isNumber",
+          "isEmpty",
+          "isEmptyString",
+          "any",
+          "deepContains",
+          "isNotEmptyString",
+          "each",
+          "contains",
+          "remove",
+          "createItems",
+          "makeArrayByArray",
         ];
 
         target.forEach(t => {
diff --git a/src/base/single/trigger/trigger.js b/src/base/single/trigger/trigger.js
index 3755fc8ae..af9db4078 100644
--- a/src/base/single/trigger/trigger.js
+++ b/src/base/single/trigger/trigger.js
@@ -12,7 +12,7 @@ export class Trigger extends Single {
         const conf = super._defaultConfig(...arguments);
 
         return extend(conf, {
-            _baseCls: (conf._baseCls || "") + " bi-trigger cursor-pointer",
+            _baseCls: `${conf._baseCls || ""} bi-trigger cursor-pointer`,
             height: 24,
         });
     }
diff --git a/src/case/index.js b/src/case/index.js
index 1b8b33c0b..40e8a73e4 100644
--- a/src/case/index.js
+++ b/src/case/index.js
@@ -2,16 +2,29 @@ import * as button from "./button";
 import * as calendarItem from "./calendar";
 import * as pager from "./pager";
 import * as editor from "./editor";
+import * as trigger from "./trigger";
+import * as loader from "./loader";
+import * as segment from "./segment";
+import { MultiSelectBar } from "./toolbar/toolbar.multiselect";
 
 Object.assign(BI, {
     ...button,
     ...calendarItem,
     ...pager,
     ...editor,
+    ...trigger,
+    ...loader,
+    ...segment,
+    MultiSelectBar,
 });
 
 export * from "./button";
 export * from "./calendar";
 export * from "./pager";
 export * from "./editor";
-
+export * from "./trigger";
+export * from "./loader";
+export * from "./segment";
+export {
+    MultiSelectBar
+};
diff --git a/src/case/loader/index.js b/src/case/loader/index.js
new file mode 100644
index 000000000..0fe9aa242
--- /dev/null
+++ b/src/case/loader/index.js
@@ -0,0 +1,3 @@
+export { LazyLoader } from "./loader.lazy";
+export { ListLoader } from "./loader.list";
+export { SortList } from "./sort.list";
diff --git a/src/case/loader/loader.lazy.js b/src/case/loader/loader.lazy.js
index 339940077..54f983ee6 100644
--- a/src/case/loader/loader.lazy.js
+++ b/src/case/loader/loader.lazy.js
@@ -1,103 +1,106 @@
-/**
- * Created by roy on 15/11/6.
- */
-BI.LazyLoader = BI.inherit(BI.Widget, {
-    _const: {
-        PAGE: 100
-    },
-    _defaultConfig: function () {
-        return BI.extend(BI.LazyLoader.superclass._defaultConfig.apply(this, arguments), {
+import { shortcut, Widget, extend, createWidget, takeRight, take } from "@/core";
+import { Loader } from "@/base";
+
+@shortcut()
+export class LazyLoader extends Widget {
+    static xtype = "bi.lazy_loader"
+
+    _const = {
+        PAGE: 100,
+    };
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-lazy-loader",
             el: {},
-            items: []
+            items: [],
         });
-    },
+    }
 
-    _init: function () {
-        var self = this, o = this.options;
-        BI.LazyLoader.superclass._init.apply(this, arguments);
-        var all = o.items.length;
-        this.loader = BI.createWidget({
+    _init() {
+        const o = this.options;
+        super._init(...arguments);
+        const all = o.items.length;
+        this.loader = createWidget({
             type: "bi.loader",
             element: this,
             // 下面是button_group的属性
             el: o.el,
-
-            itemsCreator: function (options, populate) {
-                populate(self._getNextItems(options));
+            itemsCreator: (options, populate) => {
+                populate(this._getNextItems(options));
             },
-            hasNext: function (option) {
-                return option.count < all;
-            }
+            hasNext: option => option.count < all,
         });
 
-        this.loader.on(BI.Loader.EVENT_CHANGE, function (obj) {
-            self.fireEvent(BI.LazyLoader.EVENT_CHANGE, obj);
+        this.loader.on(Loader.EVENT_CHANGE, obj => {
+            this.fireEvent(LazyLoader.EVENT_CHANGE, obj);
         });
-    },
-    _getNextItems: function (options) {
-        var self = this, o = this.options;
-        var lastNum = o.items.length - this._const.PAGE * (options.times - 1);
-        var lastItems = BI.takeRight(o.items, lastNum);
-        var nextItems = BI.take(lastItems, this._const.PAGE);
+    }
+
+    _getNextItems(options) {
+        const o = this.options;
+        const lastNum = o.items.length - this._const.PAGE * (options.times - 1);
+        const lastItems = takeRight(o.items, lastNum);
+        const nextItems = take(lastItems, this._const.PAGE);
+        
         return nextItems;
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.loader.populate(items);
-    },
+    }
 
-    addItems: function (items) {
+    addItems(items) {
         this.loader.addItems(items);
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.loader.empty();
-    },
+    }
 
-    setNotSelectedValue: function () {
-        this.loader.setNotSelectedValue.apply(this.loader, arguments);
-    },
+    setNotSelectedValue() {
+        this.loader.setNotSelectedValue(...arguments);
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
         return this.loader.getNotSelectedValue();
-    },
+    }
 
-    setValue: function () {
-        this.loader.setValue.apply(this.loader, arguments);
-    },
+    setValue() {
+        this.loader.setValue(...arguments);
+    }
 
-    getValue: function () {
-        return this.loader.getValue.apply(this.loader, arguments);
-    },
+    getValue() {
+        return this.loader.getValue(...arguments);
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.loader.getAllButtons();
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.loader.getAllLeaves();
-    },
+    }
 
-    getSelectedButtons: function () {
+    getSelectedButtons() {
         return this.loader.getSelectedButtons();
-    },
+    }
 
-    getNotSelectedButtons: function () {
+    getNotSelectedButtons() {
         return this.loader.getNotSelectedButtons();
-    },
+    }
 
-    getIndexByValue: function (value) {
+    getIndexByValue(value) {
         return this.loader.getIndexByValue(value);
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
         return this.loader.getNodeById(id);
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
         return this.loader.getNodeByValue(value);
     }
-});
-BI.LazyLoader.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.lazy_loader", BI.LazyLoader);
\ No newline at end of file
+}
diff --git a/src/case/loader/loader.list.js b/src/case/loader/loader.list.js
index aeb3ad959..a8aa011e3 100644
--- a/src/case/loader/loader.list.js
+++ b/src/case/loader/loader.list.js
@@ -1,105 +1,112 @@
+import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, nextTick, bind, isEmpty, isNumber, isObject, isFunction, each, isNotEmptyArray, DOM } from "@/core";
+
 /**
  * 恶心的加载控件， 为解决排序问题引入的控件
  *
  * Created by GUY on 2015/11/12.
- * @class BI.ListLoader
- * @extends BI.Widget
+ * @class ListLoader
+ * @extends Widget
  */
-BI.ListLoader = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.ListLoader.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-list-loader",
+@shortcut()
+export class ListLoader extends Widget {
+    static xtype = "bi.list_loader"
 
-            isDefaultInit: true, // 是否默认初始化数据
+    static EVENT_CHANGE = "EVENT_CHANGE"
 
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
+            baseCls: "bi-list-loader",
+            isDefaultInit: true, // 是否默认初始化数据
             // 下面是button_group的属性
             el: {
-                type: "bi.button_group"
+                type: "bi.button_group",
             },
-
             items: [],
-            itemsCreator: BI.emptyFn,
-            onLoaded: BI.emptyFn,
-
+            itemsCreator: emptyFn,
+            onLoaded: emptyFn,
             // 下面是分页信息
             count: false,
             next: {},
-            hasNext: BI.emptyFn
+            hasNext: emptyFn,
         });
-    },
+    }
 
-    _nextLoad: function () {
-        var self = this, o = this.options;
+    _nextLoad() {
+        const o = this.options;
         this.next.setLoading();
-        o.itemsCreator.apply(this, [{times: ++this.times}, function () {
-            self.next.setLoaded();
-            self.addItems.apply(self, arguments);
+        o.itemsCreator.apply(this, [{
+            times: ++this.times,
+        }, (...args) => {
+            this.next.setLoaded();
+            this.addItems(...args);
         }]);
-    },
+    }
 
-    _init: function () {
-        BI.ListLoader.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
         if (o.itemsCreator === false) {
             o.next = false;
         }
 
-        this.button_group = BI.createWidget(o.el, {
+        this.button_group = createWidget(o.el, {
             type: "bi.button_group",
             element: this,
             chooseType: 0,
             items: o.items,
             behaviors: {},
             layouts: [{
-                type: "bi.vertical"
-            }]
+                type: "bi.vertical",
+            }],
         });
-        this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-            if (type === BI.Events.CLICK) {
-                self.fireEvent(BI.ListLoader.EVENT_CHANGE, obj);
+        this.button_group.on(Controller.EVENT_CHANGE, (...args) => {
+            const [type, , obj] = args;
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
+            if (type === Events.CLICK) {
+                this.fireEvent(ListLoader.EVENT_CHANGE, obj);
             }
         });
 
         if (o.next !== false) {
-            this.next = BI.createWidget(BI.extend({
-                type: "bi.loading_bar"
+            this.next = createWidget(extend({
+                type: "bi.loading_bar",
             }, o.next));
-            this.next.on(BI.Controller.EVENT_CHANGE, function (type) {
-                if (type === BI.Events.CLICK) {
-                    self._nextLoad();
+            this.next.on(Controller.EVENT_CHANGE, type => {
+                if (type === Events.CLICK) {
+                    this._nextLoad();
                 }
             });
         }
 
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical",
             element: this,
-            items: [this.next]
+            items: [this.next],
         });
 
-        o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () {
+        o.isDefaultInit && isEmpty(o.items) && nextTick(bind(function () {
             this.populate();
         }, this));
-        if (BI.isNotEmptyArray(o.items)) {
+        if (isNotEmptyArray(o.items)) {
             this.populate(o.items);
         }
-    },
+    }
 
-    hasNext: function () {
-        var o = this.options;
-        if (BI.isNumber(o.count)) {
+    hasNext() {
+        const o = this.options;
+        if (isNumber(o.count)) {
             return this.count < o.count;
         }
+        
         return !!o.hasNext.apply(this, [{
             times: this.times,
-            count: this.count
+            count: this.count,
         }]);
-    },
+    }
 
-    addItems: function (items) {
+    addItems(items) {
         this.count += items.length;
-        if (BI.isObject(this.next)) {
+        if (isObject(this.next)) {
             this.options.items = this.options.items.concat(items);
             if (this.hasNext()) {
                 this.next.setLoaded();
@@ -107,90 +114,91 @@ BI.ListLoader = BI.inherit(BI.Widget, {
                 this.next.setEnd();
             }
         }
-        this.button_group.addItems.apply(this.button_group, arguments);
+        this.button_group.addItems(...arguments);
         this.next.element.appendTo(this.element);
-    },
+    }
 
-    populate: function (items) {
-        var self = this, o = this.options;
-        if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) {
-            o.itemsCreator.apply(this, [{times: 1}, function () {
-                if (arguments.length === 0) {
+    populate(items) {
+        const o = this.options;
+        if (arguments.length === 0 && (isFunction(o.itemsCreator))) {
+            o.itemsCreator.apply(this, [{
+                times: 1,
+            }, (...args) => {
+                if (args.length === 0) {
                     throw new Error("参数不能为空");
                 }
-                self.populate.apply(self, arguments);
+                this.populate(...args);
                 o.onLoaded();
             }]);
+            
             return;
         }
         this.options.items = items;
         this.times = 1;
         this.count = 0;
         this.count += items.length;
-        if (BI.isObject(this.next)) {
+        if (isObject(this.next)) {
             if (this.hasNext()) {
                 this.next.setLoaded();
             } else {
                 this.next.invisible();
             }
         }
-        BI.DOM.hang([this.next]);
-        this.button_group.populate.apply(this.button_group, arguments);
+        DOM.hang([this.next]);
+        this.button_group.populate(...arguments);
         this.next.element.appendTo(this.element);
-    },
+    }
 
-    empty: function () {
-        BI.DOM.hang([this.next]);
+    empty() {
+        DOM.hang([this.next]);
         this.button_group.empty();
         this.next.element.appendTo(this.element);
-        BI.each([this.next], function (i, ob) {
+        each([this.next], (i, ob) => {
             ob && ob.setVisible(false);
         });
-    },
+    }
 
-    setNotSelectedValue: function () {
-        this.button_group.setNotSelectedValue.apply(this.button_group, arguments);
-    },
+    setNotSelectedValue() {
+        this.button_group.setNotSelectedValue(...arguments);
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
         return this.button_group.getNotSelectedValue();
-    },
+    }
 
-    setValue: function () {
-        this.button_group.setValue.apply(this.button_group, arguments);
-    },
+    setValue() {
+        this.button_group.setValue(...arguments);
+    }
 
-    getValue: function () {
-        return this.button_group.getValue.apply(this.button_group, arguments);
-    },
+    getValue() {
+        return this.button_group.getValue(...arguments);
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.button_group.getAllButtons();
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.button_group.getAllLeaves();
-    },
+    }
 
-    getSelectedButtons: function () {
+    getSelectedButtons() {
         return this.button_group.getSelectedButtons();
-    },
+    }
 
-    getNotSelectedButtons: function () {
+    getNotSelectedButtons() {
         return this.button_group.getNotSelectedButtons();
-    },
+    }
 
-    getIndexByValue: function (value) {
+    getIndexByValue(value) {
         return this.button_group.getIndexByValue(value);
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
         return this.button_group.getNodeById(id);
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
         return this.button_group.getNodeByValue(value);
     }
-});
-BI.ListLoader.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.list_loader", BI.ListLoader);
\ No newline at end of file
+}
diff --git a/src/case/loader/sort.list.js b/src/case/loader/sort.list.js
index c4606a7cb..b3d147fe3 100644
--- a/src/case/loader/sort.list.js
+++ b/src/case/loader/sort.list.js
@@ -1,58 +1,61 @@
+import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, each, stripEL } from "@/core";
+
 /**
  * Created by GUY on 2016/4/29.
  *
- * @class BI.SortList
- * @extends BI.Widget
+ * @class SortList
+ * @extends Widget
  */
-BI.SortList = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.SortList.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-sort-list",
+@shortcut()
+export class SortList extends Widget {
+    static xtype = "bi.sort_list"
 
-            isDefaultInit: true, // 是否默认初始化数据
+    static EVENT_CHANGE = "EVENT_CHANGE"
 
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
+            baseCls: "bi-sort-list",
+            isDefaultInit: true, // 是否默认初始化数据
             // 下面是button_group的属性
             el: {
-                type: "bi.button_group"
+                type: "bi.button_group",
             },
-
             items: [],
-            itemsCreator: BI.emptyFn,
-            onLoaded: BI.emptyFn,
-
+            itemsCreator: emptyFn,
+            onLoaded: emptyFn,
             // 下面是分页信息
             count: false,
             next: {},
-            hasNext: BI.emptyFn
-
+            hasNext: emptyFn,
             // containment: this.element,
             // connectWith: ".bi-sort-list",
         });
-    },
+    }
 
-    _init: function () {
-        BI.SortList.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.loader = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.loader = createWidget({
             type: "bi.list_loader",
             element: this,
             isDefaultInit: o.isDefaultInit,
             el: o.el,
             items: this._formatItems(o.items),
-            itemsCreator: function (op, callback) {
-                o.itemsCreator(op, function (items) {
-                    callback(self._formatItems(items));
+            itemsCreator (op, callback) {
+                o.itemsCreator(op, items => {
+                    callback(this._formatItems(items));
                 });
             },
             onLoaded: o.onLoaded,
             count: o.count,
             next: o.next,
-            hasNext: o.hasNext
+            hasNext: o.hasNext,
         });
-        this.loader.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-            if (type === BI.Events.CLICK) {
-                self.fireEvent(BI.SortList.EVENT_CHANGE, value, obj);
+        this.loader.on(Controller.EVENT_CHANGE, (...args) => {
+            const [type, value, obj] = args;
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
+            if (type === Events.CLICK) {
+                this.fireEvent(SortList.EVENT_CHANGE, value, obj);
             }
         });
 
@@ -63,114 +66,116 @@ BI.SortList = BI.inherit(BI.Widget, {
             cursor: o.cursor || "drag",
             tolerance: o.tolerance || "intersect",
             placeholder: {
-                element: function ($currentItem) {
-                    var holder = BI.createWidget({
+                element ($currentItem) {
+                    const holder = createWidget({
                         type: "bi.layout",
                         cls: "bi-sortable-holder",
-                        height: $currentItem.outerHeight()
+                        height: $currentItem.outerHeight(),
                     });
                     holder.element.css({
                         "margin-left": $currentItem.css("margin-left"),
                         "margin-right": $currentItem.css("margin-right"),
                         "margin-top": $currentItem.css("margin-top"),
                         "margin-bottom": $currentItem.css("margin-bottom"),
-                        margin: $currentItem.css("margin")
+                        margin: $currentItem.css("margin"),
                     });
+                    
                     return holder.element;
                 },
-                update: function () {
+                update () {
 
-                }
+                },
             },
-            start: function (event, ui) {
+            start (event, ui) {
 
             },
-            stop: function (event, ui) {
-                self.fireEvent(BI.SortList.EVENT_CHANGE);
+            stop: (event, ui) => {
+                this.fireEvent(SortList.EVENT_CHANGE);
             },
-            over: function (event, ui) {
+            over (event, ui) {
 
-            }
+            },
         });
-    },
+    }
 
-    _formatItems: function (items) {
-        BI.each(items, function (i, item) {
-            item = BI.stripEL(item);
-            item.cls = item.cls ? item.cls + " sort-item" : "sort-item";
+    _formatItems(items) {
+        each(items, (i, item) => {
+            item = stripEL(item);
+            item.cls = item.cls ? `${item.cls} sort-item` : "sort-item";
             item.attributes = {
-                sorted: item.value
+                sorted: item.value,
             };
         });
+        
         return items;
-    },
+    }
 
-    hasNext: function () {
+    hasNext() {
         return this.loader.hasNext();
-    },
+    }
 
-    addItems: function (items) {
+    addItems(items) {
         this.loader.addItems(items);
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         if (items) {
             arguments[0] = this._formatItems(items);
         }
-        this.loader.populate.apply(this.loader, arguments);
-    },
+        this.loader.populate(...arguments);
+    }
 
-    empty: function () {
+    empty() {
         this.loader.empty();
-    },
+    }
 
-    setNotSelectedValue: function () {
-        this.loader.setNotSelectedValue.apply(this.loader, arguments);
-    },
+    setNotSelectedValue() {
+        this.loader.setNotSelectedValue(...arguments);
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
         return this.loader.getNotSelectedValue();
-    },
+    }
 
-    setValue: function () {
-        this.loader.setValue.apply(this.loader, arguments);
-    },
+    setValue() {
+        this.loader.setValue(...arguments);
+    }
 
-    getValue: function () {
+    getValue() {
         return this.loader.getValue();
-    },
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.loader.getAllButtons();
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.loader.getAllLeaves();
-    },
+    }
 
-    getSelectedButtons: function () {
+    getSelectedButtons() {
         return this.loader.getSelectedButtons();
-    },
+    }
 
-    getNotSelectedButtons: function () {
+    getNotSelectedButtons() {
         return this.loader.getNotSelectedButtons();
-    },
+    }
 
-    getIndexByValue: function (value) {
+    getIndexByValue(value) {
         return this.loader.getIndexByValue(value);
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
         return this.loader.getNodeById(id);
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
         return this.loader.getNodeByValue(value);
-    },
+    }
 
-    getSortedValues: function () {
-        return this.loader.element.sortable("toArray", {attribute: "sorted"});
+    getSortedValues() {
+        return this.loader.element.sortable("toArray", {
+            attribute: "sorted",
+        });
     }
-});
-BI.SortList.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.sort_list", BI.SortList);
+}
diff --git a/src/case/segment/button.segment.js b/src/case/segment/button.segment.js
index 05d0a3d83..9508a686c 100644
--- a/src/case/segment/button.segment.js
+++ b/src/case/segment/button.segment.js
@@ -1,43 +1,48 @@
+import { shortcut, extend, createWidget } from "@/core";
+import { BasicButton } from "@/base";
+
 /**
  * 分段控件使用的button
  *
  * Created by GUY on 2015/9/7.
- * @class BI.SegmentButton
- * @extends BI.BasicButton
+ * @class SegmentButton
+ * @extends BasicButton
  */
-BI.SegmentButton = BI.inherit(BI.BasicButton, {
+@shortcut()
+export class SegmentButton extends BasicButton {
+    static xtype = "bi.segment_button"
 
-    _defaultConfig: function () {
-        var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-select bi-card",
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-segment-button bi-list-item-select bi-card`,
             shadow: true,
             readonly: true,
-            hgap: 5
+            hgap: 5,
         });
-    },
+    }
 
-    _init: function () {
-        BI.SegmentButton.superclass._init.apply(this, arguments);
-        var opts = this.options, self = this;
-        this.text = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const opts = this.options;
+        this.text = createWidget({
             type: "bi.label",
             element: this,
             textHeight: opts.height,
             whiteSpace: opts.whiteSpace,
             text: opts.text,
             value: opts.value,
-            hgap: opts.hgap
+            hgap: opts.hgap,
         });
-    },
+    }
 
-    setSelected: function () {
-        BI.SegmentButton.superclass.setSelected.apply(this, arguments);
-    },
+    setSelected() {
+        super.setSelected(...arguments);
+    }
 
-    setText: function (text) {
-        BI.SegmentButton.superclass.setText.apply(this, arguments);
+    setText(text) {
+        super.setText(...arguments);
         this.text.setText(text);
     }
-});
-BI.shortcut("bi.segment_button", BI.SegmentButton);
+}
diff --git a/src/case/segment/index.js b/src/case/segment/index.js
new file mode 100644
index 000000000..59c90b855
--- /dev/null
+++ b/src/case/segment/index.js
@@ -0,0 +1,2 @@
+export { SegmentButton } from "./button.segment";
+export { Segment } from "./segment";
diff --git a/src/case/segment/segment.js b/src/case/segment/segment.js
index 2c1dda918..ac16eba20 100644
--- a/src/case/segment/segment.js
+++ b/src/case/segment/segment.js
@@ -1,72 +1,79 @@
+import { shortcut, Widget, extend, toPix, Controller, createWidget, createItems, makeArrayByArray } from "@/core";
+import { ButtonGroup } from "@/base";
+
 /**
  * 单选按钮组
  *
  * Created by GUY on 2015/9/7.
- * @class BI.Segment
- * @extends BI.Widget
+ * @class Segment
+ * @extends Widget
  */
-BI.Segment = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.Segment.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class Segment extends Widget {
+    static xtype = "bi.segment"
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-segment",
             items: [],
             height: 24,
         });
-    },
-    _init: function () {
-        BI.Segment.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.buttonGroup = BI.createWidget({
+    }
+
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.buttonGroup = createWidget({
             element: this,
             type: "bi.button_group",
             value: o.value,
-            items: [BI.createItems(o.items, {
+            items: [createItems(o.items, {
                 type: "bi.segment_button",
-                height: BI.toPix(o.height, 2),
+                height: toPix(o.height, 2),
                 whiteSpace: o.whiteSpace,
             })],
             layouts: [{
                 type: "bi.table",
-                columnSize: BI.makeArrayByArray(o.items, "fill"),
+                columnSize: makeArrayByArray(o.items, "fill"),
             }],
         });
-        this.buttonGroup.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.buttonGroup.on(Controller.EVENT_CHANGE, (...args) => {
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
-        this.buttonGroup.on(BI.ButtonGroup.EVENT_CHANGE, function (value, obj) {
-            self.fireEvent(BI.Segment.EVENT_CHANGE, value, obj);
+        this.buttonGroup.on(ButtonGroup.EVENT_CHANGE, (value, obj) => {
+            this.fireEvent(Segment.EVENT_CHANGE, value, obj);
         });
-    },
+    }
 
-    _setEnable: function (enable) {
-        BI.Segment.superclass._setEnable.apply(this, arguments);
+    _setEnable(enable) {
+        super._setEnable(...arguments);
         if (enable === true) {
             this.element.removeClass("base-disabled disabled");
         } else if (enable === false) {
             this.element.addClass("base-disabled disabled");
         }
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.buttonGroup.setValue(v);
-    },
+    }
 
-    setEnabledValue: function (v) {
+    setEnabledValue(v) {
         this.buttonGroup.setEnabledValue(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.buttonGroup.getValue();
-    },
+    }
 
-    populate: function (buttons) {
-        var o = this.options;
-        this.buttonGroup.populate([BI.createItems(buttons, {
+    populate(buttons) {
+        const o = this.options;
+        this.buttonGroup.populate([createItems(buttons, {
             type: "bi.segment_button",
-            height: BI.toPix(o.height, 2),
+            height: toPix(o.height, 2),
             whiteSpace: o.whiteSpace,
         })]);
-    },
-});
-BI.Segment.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.segment", BI.Segment);
+    }
+}
diff --git a/src/case/toolbar/toolbar.multiselect.js b/src/case/toolbar/toolbar.multiselect.js
index f18677b85..f5fb1bf45 100644
--- a/src/case/toolbar/toolbar.multiselect.js
+++ b/src/case/toolbar/toolbar.multiselect.js
@@ -1,20 +1,29 @@
+import { shortcut, extend, emptyFn, i18nText, Controller, createWidget, Events } from "@/core";
+import { BasicButton, Checkbox } from "@/base";
+import { HalfIconButton } from "../button";
+
 /**
  * guy
  * 复选导航条
  * Created by GUY on 2015/8/25.
- * @class BI.MultiSelectBar
- * @extends BI.BasicButton
+ * @class MultiSelectBar
+ * @extends BasicButton
  */
-BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectBar.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class MultiSelectBar extends BasicButton {
+    static xtype = "bi.multi_select_bar"
+
+    static EVENT_CHANGE = "EVENT_CHANGE"
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             extraCls: "bi-multi-select-bar",
             height: 25,
-            text: BI.i18nText("BI-Select_All"),
-            isAllCheckedBySelectedValue: BI.emptyFn,
+            text: i18nText("BI-Select_All"),
+            isAllCheckedBySelectedValue: emptyFn,
             // 手动控制选中
             disableSelected: true,
-            isHalfCheckedBySelectedValue: function (selectedValues) {
+            isHalfCheckedBySelectedValue (selectedValues) {
                 return selectedValues.length > 0;
             },
             halfSelected: false,
@@ -22,46 +31,47 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
             iconWidth: 14,
             iconHeight: 14,
         });
-    },
-    _init: function () {
-        BI.MultiSelectBar.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        var isSelect = o.selected === true;
-        var isHalfSelect = !o.selected && o.halfSelected;
-        this.checkbox = BI.createWidget({
+    }
+
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        const isSelect = o.selected === true;
+        const isHalfSelect = !o.selected && o.halfSelected;
+        this.checkbox = createWidget({
             type: "bi.checkbox",
             stopPropagation: true,
-            handler: function () {
-                self.setSelected(self.isSelected());
+            handler: () => {
+                this.setSelected(this.isSelected());
             },
             selected: isSelect,
             invisible: isHalfSelect,
             iconWidth: o.iconWidth,
-            iconHeight: o.iconHeight
+            iconHeight: o.iconHeight,
         });
-        this.half = BI.createWidget({
+        this.half = createWidget({
             type: "bi.half_icon_button",
             stopPropagation: true,
-            handler: function () {
-                self.setSelected(true);
+            handler: () => {
+                this.setSelected(true);
             },
             invisible: isSelect || !isHalfSelect,
             iconWidth: o.iconWidth,
-            iconHeight: o.iconHeight
+            iconHeight: o.iconHeight,
         });
-        this.checkbox.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CLICK, self.isSelected(), self);
+        this.checkbox.on(Controller.EVENT_CHANGE, () => {
+            this.fireEvent(Controller.EVENT_CHANGE, Events.CLICK, this.isSelected(), this);
         });
-        this.checkbox.on(BI.Checkbox.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, self.isSelected(), self);
+        this.checkbox.on(Checkbox.EVENT_CHANGE, () => {
+            this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
         });
-        this.half.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CLICK, self.isSelected(), self);
+        this.half.on(Controller.EVENT_CHANGE, () => {
+            this.fireEvent(Controller.EVENT_CHANGE, Events.CLICK, this.isSelected(), this);
         });
-        this.half.on(BI.HalfIconButton.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, self.isSelected(), self);
+        this.half.on(HalfIconButton.EVENT_CHANGE, () => {
+            this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
         });
-        this.text = BI.createWidget({
+        this.text = createWidget({
             type: "bi.label",
             textAlign: "left",
             whiteSpace: "nowrap",
@@ -71,43 +81,43 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
             text: o.text,
             keyword: o.keyword,
             value: o.value,
-            py: o.py
+            py: o.py,
         });
-        BI.createWidget({
+        createWidget({
             type: "bi.htape",
             element: this,
             items: [{
                 width: o.iconWrapperWidth,
                 el: {
                     type: "bi.center_adapt",
-                    items: [this.checkbox, this.half]
-                }
+                    items: [this.checkbox, this.half],
+                },
             }, {
-                el: this.text
-            }]
+                el: this.text,
+            }],
         });
-    },
+    }
 
-    _setSelected: function (v) {
+    _setSelected(v) {
         this.checkbox.setSelected(!!v);
-    },
+    }
 
-    // 自己手动控制选中
-    beforeClick: function () {
-        var isHalf = this.isHalfSelected(), isSelected = this.isSelected();
+    beforeClick() {
+        const isHalf = this.isHalfSelected(),
+            isSelected = this.isSelected();
         if (isHalf === true) {
             this.setSelected(true);
         } else {
             this.setSelected(!isSelected);
         }
-    },
+    }
 
-    setSelected: function (v) {
+    setSelected(v) {
         this.checkbox.setSelected(v);
         this.setHalfSelected(false);
-    },
+    }
 
-    setHalfSelected: function (b) {
+    setHalfSelected(b) {
         this.halfSelected = !!b;
         if (b === true) {
             this.checkbox.setSelected(false);
@@ -117,29 +127,27 @@ BI.MultiSelectBar = BI.inherit(BI.BasicButton, {
             this.half.invisible();
             this.checkbox.visible();
         }
-    },
+    }
 
-    isHalfSelected: function () {
+    isHalfSelected() {
         return !this.isSelected() && !!this.halfSelected;
-    },
+    }
 
-    isSelected: function () {
+    isSelected() {
         return this.checkbox.isSelected();
-    },
+    }
 
-    setValue: function (selectedValues) {
-        BI.MultiSelectBar.superclass.setValue.apply(this, arguments);
-        var isAllChecked = this.options.isAllCheckedBySelectedValue.apply(this, arguments);
+    setValue(selectedValues) {
+        super.setValue(...arguments);
+        const isAllChecked = this.options.isAllCheckedBySelectedValue.apply(this, arguments);
         this.setSelected(isAllChecked);
         !isAllChecked && this.setHalfSelected(this.options.isHalfCheckedBySelectedValue.apply(this, arguments));
-    },
+    }
 
-    doClick: function () {
-        BI.MultiSelectBar.superclass.doClick.apply(this, arguments);
-        if(this.isValid()) {
-            this.fireEvent(BI.MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
+    doClick() {
+        super.doClick(...arguments);
+        if (this.isValid()) {
+            this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this);
         }
     }
-});
-BI.MultiSelectBar.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.multi_select_bar", BI.MultiSelectBar);
+}
diff --git a/src/case/trigger/index.js b/src/case/trigger/index.js
new file mode 100644
index 000000000..df4e68ab5
--- /dev/null
+++ b/src/case/trigger/index.js
@@ -0,0 +1,8 @@
+export { EditorTrigger } from "./trigger.editor";
+export { IconTrigger } from "./trigger.icon";
+export { IconTextTrigger } from "./trigger.icon.text";
+export { SelectIconTextTrigger } from "./trigger.icon.text.select";
+export { TextTrigger } from "./trigger.text";
+export { SelectTextTrigger } from "./trigger.text.select";
+export { SmallSelectTextTrigger } from "./trigger.text.select.small";
+export { SmallTextTrigger } from "./trigger.text.small";
diff --git a/src/case/trigger/trigger.editor.js b/src/case/trigger/trigger.editor.js
index 5bdcc8f56..3bb8439ac 100644
--- a/src/case/trigger/trigger.editor.js
+++ b/src/case/trigger/trigger.editor.js
@@ -1,93 +1,98 @@
+import { shortcut, extend, emptyFn, createWidget, toPix, Controller } from "@/core";
+import { Trigger } from "@/base";
+import { SignEditor } from "../editor";
+
 /**
  * 文本输入框trigger
  *
  * Created by GUY on 2015/9/15.
- * @class BI.EditorTrigger
- * @extends BI.Trigger
+ * @class EditorTrigger
+ * @extends Trigger
  */
-BI.EditorTrigger = BI.inherit(BI.Trigger, {
-    _defaultConfig: function (config) {
-        var conf = BI.EditorTrigger.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-editor-trigger bi-border-radius " + (config.simple ? "bi-border-bottom" : "bi-border"),
+@shortcut()
+export class EditorTrigger extends Trigger {
+    static xtype = "bi.editor_trigger";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_EMPTY = "EVENT_EMPTY";
+    static EVENT_VALID = "EVENT_VALID";
+    static EVENT_ERROR = "EVENT_ERROR";
+
+    _defaultConfig(config) {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-editor-trigger bi-border-radius ${config.simple ? "bi-border-bottom" : "bi-border"}`,
             height: 24,
-            validationChecker: BI.emptyFn,
-            quitChecker: BI.emptyFn,
+            validationChecker: emptyFn,
+            quitChecker: emptyFn,
             allowBlank: false,
             watermark: "",
-            errorText: ""
+            errorText: "",
         });
-    },
+    }
 
-    _init: function () {
-        BI.EditorTrigger.superclass._init.apply(this, arguments);
-        var self = this, o = this.options, c = this._const;
-        this.editor = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.editor = createWidget({
             type: "bi.sign_editor",
-            height: BI.toPix(o.height, 2),
+            height: toPix(o.height, 2),
             value: o.value,
             validationChecker: o.validationChecker,
             quitChecker: o.quitChecker,
             allowBlank: o.allowBlank,
             watermark: o.watermark,
             errorText: o.errorText,
-            title: function () {
-                return self.getValue();
-            }
+            title: () => this.getValue(),
         });
-        this.editor.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.editor.on(Controller.EVENT_CHANGE, (...args) => {
+            this.fireEvent(Controller.EVENT_CHANGE, ...args);
         });
-        this.editor.on(BI.SignEditor.EVENT_CHANGE, function () {
-            self.fireEvent(BI.EditorTrigger.EVENT_CHANGE, arguments);
+        this.editor.on(SignEditor.EVENT_CHANGE, (...args) => {
+            this.fireEvent(EditorTrigger.EVENT_CHANGE, ...args);
         });
-        this.editor.on(BI.SignEditor.EVENT_FOCUS, function () {
-            self.fireEvent(BI.EditorTrigger.EVENT_FOCUS, arguments);
+        this.editor.on(SignEditor.EVENT_FOCUS, (...args) => {
+            this.fireEvent(EditorTrigger.EVENT_FOCUS, ...args);
         });
-        this.editor.on(BI.SignEditor.EVENT_EMPTY, function () {
-            self.fireEvent(BI.EditorTrigger.EVENT_EMPTY, arguments);
+        this.editor.on(SignEditor.EVENT_EMPTY, (...args) => {
+            this.fireEvent(EditorTrigger.EVENT_EMPTY, ...args);
         });
-        this.editor.on(BI.SignEditor.EVENT_VALID, function () {
-            self.fireEvent(BI.EditorTrigger.EVENT_VALID, arguments);
+        this.editor.on(SignEditor.EVENT_VALID, (...args) => {
+            this.fireEvent(EditorTrigger.EVENT_VALID, ...args);
         });
-        this.editor.on(BI.SignEditor.EVENT_ERROR, function () {
-            self.fireEvent(BI.EditorTrigger.EVENT_ERROR, arguments);
+        this.editor.on(SignEditor.EVENT_ERROR, (...args) => {
+            this.fireEvent(EditorTrigger.EVENT_ERROR, ...args);
         });
 
-        BI.createWidget({
+        createWidget({
             element: this,
             type: "bi.horizontal_fill",
-            height: BI.toPix(o.height, 2),
+            height: toPix(o.height, 2),
             items: [
                 {
                     el: this.editor,
-                    width: "fill"
+                    width: "fill",
                 }, {
                     el: {
                         type: "bi.trigger_icon_button",
-                        width: o.triggerWidth || BI.toPix(o.height, 2)
+                        width: o.triggerWidth || toPix(o.height, 2),
                     },
-                    width: ""
+                    width: "",
                 }
-            ]
+            ],
         });
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.editor.getValue();
-    },
+    }
 
-    setValue: function (value) {
+    setValue(value) {
         this.editor.setValue(value);
-    },
+    }
 
-    setText: function (text) {
+    setText(text) {
         this.editor.setState(text);
     }
-});
-BI.EditorTrigger.EVENT_CHANGE = "EVENT_CHANGE";
-BI.EditorTrigger.EVENT_FOCUS = "EVENT_FOCUS";
-BI.EditorTrigger.EVENT_EMPTY = "EVENT_EMPTY";
-BI.EditorTrigger.EVENT_VALID = "EVENT_VALID";
-BI.EditorTrigger.EVENT_ERROR = "EVENT_ERROR";
-BI.shortcut("bi.editor_trigger", BI.EditorTrigger);
+}
diff --git a/src/case/trigger/trigger.icon.js b/src/case/trigger/trigger.icon.js
index 2da61d480..3368dd070 100644
--- a/src/case/trigger/trigger.icon.js
+++ b/src/case/trigger/trigger.icon.js
@@ -1,30 +1,35 @@
+import { shortcut, extend, createWidget } from "@/core";
+import { Trigger } from "@/base";
+
 /**
  * 图标按钮trigger
  *
  * Created by GUY on 2015/10/8.
- * @class BI.IconTrigger
- * @extends BI.Trigger
+ * @class IconTrigger
+ * @extends Trigger
  */
-BI.IconTrigger = BI.inherit(BI.Trigger, {
+@shortcut()
+export class IconTrigger extends Trigger {
+    static xtype = "bi.icon_trigger"
 
-    _defaultConfig: function () {
-        return BI.extend(BI.IconTrigger.superclass._defaultConfig.apply(this, arguments), {
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-icon-trigger",
             extraCls: "pull-down-font",
             el: {},
-            height: 24
+            height: 24,
         });
-    },
-    _init: function () {
-        var o = this.options;
-        BI.IconTrigger.superclass._init.apply(this, arguments);
-        this.iconButton = BI.createWidget(o.el, {
+    }
+
+    _init() {
+        const o = this.options;
+        super._init(...arguments);
+        this.iconButton = createWidget(o.el, {
             type: "bi.trigger_icon_button",
             element: this,
             width: o.width,
             height: o.height,
-            extraCls: o.extraCls
+            extraCls: o.extraCls,
         });
     }
-});
-BI.shortcut("bi.icon_trigger", BI.IconTrigger);
\ No newline at end of file
+}
diff --git a/src/case/trigger/trigger.icon.text.js b/src/case/trigger/trigger.icon.text.js
index a102b5d0c..b93c3181b 100644
--- a/src/case/trigger/trigger.icon.text.js
+++ b/src/case/trigger/trigger.icon.text.js
@@ -1,29 +1,35 @@
+import { shortcut, extend, isKey, createWidget, isEmptyString } from "@/core";
+import { Trigger } from "@/base";
+
 /**
  * 文字trigger
  *
  * Created by GUY on 2015/9/15.
- * @class BI.IconTextTrigger
- * @extends BI.Trigger
+ * @class IconTextTrigger
+ * @extends Trigger
  */
-BI.IconTextTrigger = BI.inherit(BI.Trigger, {
+@shortcut()
+export class IconTextTrigger extends Trigger {
+    static xtype = "bi.icon_text_trigger"
 
-    _defaultConfig: function () {
-        var conf = BI.IconTextTrigger.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-text-trigger",
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-text-trigger`,
             height: 24,
             iconHeight: null,
             iconWidth: null,
-            textCls: ""
+            textCls: "",
         });
-    },
+    }
 
-    _init: function () {
-        BI.IconTextTrigger.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.text = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.text = createWidget({
             type: "bi.label",
-            cls: "select-text-label" + (BI.isKey(o.textCls) ? (" " + o.textCls) : ""),
+            cls: `select-text-label${isKey(o.textCls) ? (` ${o.textCls}`) : ""}`,
             textAlign: "left",
             height: o.height,
             hgap: o.textHgap,
@@ -32,19 +38,19 @@ BI.IconTextTrigger = BI.inherit(BI.Trigger, {
             rgap: o.textRgap,
             tgap: o.textTgap,
             bgap: o.textBgap,
-            text: o.text
+            text: o.text,
         });
-        this.trigerButton = BI.createWidget({
+        this.trigerButton = createWidget({
             type: "bi.trigger_icon_button",
-            width: o.triggerWidth || o.height
+            width: o.triggerWidth || o.height,
         });
 
-        BI.createWidget({
+        createWidget({
             element: this,
             type: "bi.horizontal_fill",
             columnSize: ["", "fill", ""],
-            ref: function (_ref) {
-                self.wrapper = _ref;
+            ref: _ref => {
+                this.wrapper = _ref;
             },
             items: [{
                 el: {
@@ -53,41 +59,39 @@ BI.IconTextTrigger = BI.inherit(BI.Trigger, {
                     width: o.triggerWidth || o.height,
                     iconCls: o.iconCls,
                     invisible: !o.iconCls,
-                    ref: function (_ref) {
-                        self.icon = _ref;
+                    ref: _ref => {
+                        this.icon = _ref;
                     },
                     iconHeight: o.iconHeight,
                     iconWidth: o.iconWidth,
-                    disableSelected: true
-                }
+                    disableSelected: true,
+                },
             }, {
                 el: this.text,
-                lgap: BI.isEmptyString(o.iconCls) ? 5 : 0
+                lgap: isEmptyString(o.iconCls) ? 5 : 0,
             }, {
-                el: this.trigerButton
-            }]
+                el: this.trigerButton,
+            }],
         });
-    },
+    }
 
-    setValue: function (value) {
+    setValue(value) {
         this.text.setValue(value);
-    },
+    }
 
-    setIcon: function (iconCls) {
-        var o = this.options;
+    setIcon(iconCls) {
         this.icon.setIcon(iconCls);
         this.icon.setVisible(!!iconCls);
-    },
+    }
 
-    setTextCls: function (cls) {
-        var o = this.options;
-        var oldCls = o.textCls;
+    setTextCls(cls) {
+        const o = this.options;
+        const oldCls = o.textCls;
         o.textCls = cls;
         this.text.element.removeClass(oldCls).addClass(cls);
-    },
+    }
 
-    setText: function (text) {
+    setText(text) {
         this.text.setText(text);
     }
-});
-BI.shortcut("bi.icon_text_trigger", BI.IconTextTrigger);
+}
diff --git a/src/case/trigger/trigger.icon.text.select.js b/src/case/trigger/trigger.icon.text.select.js
index b0142b91e..0045972a4 100644
--- a/src/case/trigger/trigger.icon.text.select.js
+++ b/src/case/trigger/trigger.icon.text.select.js
@@ -1,23 +1,28 @@
+import { shortcut, extend, createWidget, isFunction, isArray, isNotNull, any, deepContains, Tree } from "@/core";
+import { Trigger } from "@/base";
+
 /**
  * Created by Windy on 2017/12/12.
  */
-BI.SelectIconTextTrigger = BI.inherit(BI.Trigger, {
+@shortcut()
+export class SelectIconTextTrigger extends Trigger {
+    static xtype = "bi.select_icon_text_trigger"
 
-    _defaultConfig: function () {
-        return BI.extend(BI.SelectIconTextTrigger.superclass._defaultConfig.apply(this, arguments), {
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-select-text-trigger",
             height: 24,
             iconHeight: null,
             iconWidth: null,
-            iconCls: ""
+            iconCls: "",
         });
-    },
+    }
 
-    _init: function () {
-        BI.SelectIconTextTrigger.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        var obj = this._digist(o.value, o.items);
-        this.trigger = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        const obj = this._digist(o.value, o.items);
+        this.trigger = createWidget({
             type: "bi.icon_text_trigger",
             element: this,
             text: obj.text,
@@ -32,49 +37,49 @@ BI.SelectIconTextTrigger = BI.inherit(BI.Trigger, {
             height: o.height,
             iconHeight: o.iconHeight,
             iconWidth: o.iconWidth,
-            iconWrapperWidth: o.iconWrapperWidth
+            iconWrapperWidth: o.iconWrapperWidth,
         });
-    },
+    }
 
-    _digist: function (vals, items) {
-        var o = this.options;
-        vals = BI.isArray(vals) ? vals : [vals];
-        var result;
-        var formatItems = BI.Tree.transformToArrayFormat(items);
-        BI.any(formatItems, function (i, item) {
-            if (BI.deepContains(vals, item.value)) {
+    _digist(vals, items) {
+        const o = this.options;
+        vals = isArray(vals) ? vals : [vals];
+        let result;
+        const formatItems = Tree.transformToArrayFormat(items);
+        any(formatItems, (i, item) => {
+            if (deepContains(vals, item.value)) {
                 result = {
                     text: item.text || item.value,
-                    iconCls: item.iconCls
+                    iconCls: item.iconCls,
                 };
+                
                 return true;
             }
         });
 
-        if (BI.isNotNull(result)) {
+        if (isNotNull(result)) {
             return {
                 text: result.text,
                 textCls: "",
-                iconCls: result.iconCls
+                iconCls: result.iconCls,
             };
         } else {
             return {
-                text: BI.isFunction(o.text) ? o.text() : o.text,
+                text: isFunction(o.text) ? o.text() : o.text,
                 textCls: "bi-water-mark",
-                iconCls: o.iconCls
+                iconCls: o.iconCls,
             };
         }
-    },
+    }
 
-    setValue: function (vals) {
-        var obj = this._digist(vals, this.options.items);
+    setValue(vals) {
+        const obj = this._digist(vals, this.options.items);
         this.trigger.setText(obj.text);
         this.trigger.setIcon(obj.iconCls);
         this.trigger.setTextCls(obj.textCls);
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.options.items = items;
     }
-});
-BI.shortcut("bi.select_icon_text_trigger", BI.SelectIconTextTrigger);
+}
diff --git a/src/case/trigger/trigger.text.js b/src/case/trigger/trigger.text.js
index 6e7273252..f4e15110d 100644
--- a/src/case/trigger/trigger.text.js
+++ b/src/case/trigger/trigger.text.js
@@ -1,41 +1,45 @@
+import { shortcut, isFunction, isKey, isNotEmptyString } from "@/core";
+import { Trigger } from "@/base";
+
 /**
  * 文字trigger
  *
  * Created by GUY on 2015/9/15.
- * @class BI.TextTrigger
- * @extends BI.Trigger
+ * @class TextTrigger
+ * @extends Trigger
  */
-BI.TextTrigger = BI.inherit(BI.Trigger, {
+@shortcut()
+export class TextTrigger extends Trigger {
+    static xtype = "bi.text_trigger"
+
+    static EVENT_CLEAR = "EVENT_CLEAR"
 
-    props: function () {
-        var self = this;
+    props() {
         return {
             baseCls: "bi-text-trigger",
             height: 24,
             textHgap: 6,
             textCls: "",
             allowClear: false,
-            title: function () {
-                return self.text.getText();
-            },
+            title: () => this.text.getText(),
             defaultText: "",
             text: "",
         };
-    },
+    }
 
-    render: function () {
-        var self = this, o = this.options, c = this._const;
+    render() {
+        const o = this.options;
 
-        var text = this.getText();
+        const text = this.getText();
 
-        var defaultText = this.getDefaultText();
+        const defaultText = this.getDefaultText();
 
-        var label = {
+        const label = {
             type: "bi.label",
-            ref: function (_ref) {
-                self.text = _ref;
+            ref: _ref => {
+                this.text = _ref;
             },
-            cls: `select-text-label ${o.textCls} ${!BI.isNotEmptyString(text) && BI.isNotEmptyString(defaultText) ? "bi-tips" : ""}`,
+            cls: `select-text-label ${o.textCls} ${!isNotEmptyString(text) && isNotEmptyString(defaultText) ? "bi-tips" : ""}`,
             textAlign: "left",
             height: o.height,
             text: text || o.defaultText,
@@ -47,98 +51,93 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
             rgap: o.textRgap,
             tgap: o.textTgap,
             bgap: o.textBgap,
-            readonly: o.readonly
+            readonly: o.readonly,
         };
 
-        var triggerButton = {
+        const triggerButton = {
             type: "bi.trigger_icon_button",
-            ref: function (_ref) {
-                self.triggerButton = _ref;
+            ref: _ref => {
+                this.triggerButton = _ref;
             },
-            width: o.triggerWidth || o.height
+            width: o.triggerWidth || o.height,
         };
 
         return ({
             type: "bi.horizontal_fill",
             columnSize: ["fill", ""],
-            items: [
-                {
-                    el: label,
-                    width: "fill"
-                }, {
-                    el: o.allowClear ? {
-                        type: "bi.vertical_adapt",
-                        width: o.triggerWidth || o.height,
-                        height: o.height,
-                        horizontalAlign: "left",
-                        scrollable: false,
-                        items: [
-                            {
-                                el: {
-                                    type: "bi.icon_button",
-                                    ref: function (_ref) {
-                                        self.clearBtn = _ref;
-                                    },
-                                    cls: "close-h-font " + (o.allowClear ? "clear-button" : ""),
-                                    stopPropagation: true,
-                                    width: o.triggerWidth || o.height,
-                                    invisible: !BI.isNotEmptyString(o.text),
-                                    handler: function () {
-                                        self.fireEvent(BI.TextTrigger.EVENT_CLEAR);
-                                    },
-                                },
-                            }, {
-                                el: triggerButton,
-                            }
-                        ]
-                    } : triggerButton,
-                }
-            ]
+            items: [{
+                el: label,
+                width: "fill",
+            }, {
+                el: o.allowClear ? {
+                    type: "bi.vertical_adapt",
+                    width: o.triggerWidth || o.height,
+                    height: o.height,
+                    horizontalAlign: "left",
+                    scrollable: false,
+                    items: [{
+                        el: {
+                            type: "bi.icon_button",
+                            ref: _ref => {
+                                this.clearBtn = _ref;
+                            },
+                            cls: `close-h-font ${o.allowClear ? "clear-button" : ""}`,
+                            stopPropagation: true,
+                            width: o.triggerWidth || o.height,
+                            invisible: !isNotEmptyString(o.text),
+                            handler: () => {
+                                this.fireEvent(TextTrigger.EVENT_CLEAR);
+                            },
+                        },
+                    }, {
+                        el: triggerButton,
+                    }],
+                } : triggerButton,
+            }],
         });
-    },
+    }
 
-    getText: function () {
-        var o = this.options;
-        return BI.isFunction(o.text) ? o.text() : o.text;
-    },
+    getText() {
+        const o = this.options;
+        
+        return isFunction(o.text) ? o.text() : o.text;
+    }
 
-    getDefaultText: function () {
-        var o = this.options;
-        return BI.isFunction(o.defaultText) ? o.defaultText() : o.defaultText;
-    },
+    getDefaultText() {
+        const o = this.options;
+        
+        return isFunction(o.defaultText) ? o.defaultText() : o.defaultText;
+    }
 
-    getTextor: function () {
+    getTextor() {
         return this.text;
-    },
+    }
 
-    setTextCls: function (cls) {
-        var o = this.options;
-        var oldCls = o.textCls;
+    setTextCls(cls) {
+        const o = this.options;
+        const oldCls = o.textCls;
         o.textCls = cls;
         this.text.element.removeClass(oldCls).addClass(cls);
-    },
+    }
 
-    setText: function (text) {
+    setText(text) {
         if (this.options.allowClear) {
-            this.clearBtn.setVisible(BI.isNotEmptyString(text));
+            this.clearBtn.setVisible(isNotEmptyString(text));
         }
-        if (BI.isKey(text)) {
+        if (isKey(text)) {
             this.text.setText(text);
             this.text.element.removeClass("bi-tips");
-        } else if (BI.isKey(this.options.defaultText)) {
+        } else if (isKey(this.options.defaultText)) {
             this.text.setText(this.options.defaultText);
             this.text.element.addClass("bi-tips");
         } else {
             this.text.setText("");
             this.text.element.removeClass("bi-tips");
         }
-    },
+    }
 
-    setTipType: function (v) {
+    setTipType(v) {
         this.text.options.tipType = v;
         this.options.tipType = v;
     }
-});
-
-BI.TextTrigger.EVENT_CLEAR = "EVENT_CLEAR";
-BI.shortcut("bi.text_trigger", BI.TextTrigger);
+}
diff --git a/src/case/trigger/trigger.text.select.js b/src/case/trigger/trigger.text.select.js
index 005ac241b..8094a424d 100644
--- a/src/case/trigger/trigger.text.select.js
+++ b/src/case/trigger/trigger.text.select.js
@@ -1,32 +1,40 @@
+import { shortcut, extend, emptyFn, createWidget, isFunction, isArray, Tree, each, contains, remove } from "@/core";
+import { Trigger } from "@/base";
+import { TextTrigger } from "./trigger.text";
+
 /**
  * 选择字段trigger
  *
  * Created by GUY on 2015/9/15.
- * @class BI.SelectTextTrigger
- * @extends BI.Trigger
+ * @class SelectTextTrigger
+ * @extends Trigger
  */
-BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
+@shortcut()
+export class SelectTextTrigger extends Trigger {
+    static xtype = "bi.select_text_trigger"
+
+    static EVENT_CLEAR = "EVENT_CLEAR"
 
-    _defaultConfig: function () {
-        return BI.extend(BI.SelectTextTrigger.superclass._defaultConfig.apply(this, arguments), {
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-select-text-trigger",
             height: 24,
             allowClear: false,
-            valueFormatter: BI.emptyFn,
+            valueFormatter: emptyFn,
             defaultText: "",
         });
-    },
+    }
 
-    _init: function () {
-        BI.SelectTextTrigger.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        var text = this._digest(o.value, o.items);
-        this.trigger = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        const text = this._digest(o.value, o.items);
+        this.trigger = createWidget({
             type: "bi.text_trigger",
             element: this,
             height: o.height,
             readonly: o.readonly,
-            text: text,
+            text,
             defaultText: o.defaultText,
             textHgap: o.textHgap,
             textVgap: o.textVgap,
@@ -37,71 +45,67 @@ BI.SelectTextTrigger = BI.inherit(BI.Trigger, {
             tipType: o.tipType,
             title: null,
             allowClear: o.allowClear,
-            listeners: [
-                {
-                    eventName: BI.TextTrigger.EVENT_CLEAR,
-                    action: function () {
-                        self.setText("");
-                        self.fireEvent(BI.SelectTextTrigger.EVENT_CLEAR);
-                    }
-                }
-            ]
+            listeners: [{
+                eventName: TextTrigger.EVENT_CLEAR,
+                action: () => {
+                    this.setText("");
+                    this.fireEvent(SelectTextTrigger.EVENT_CLEAR);
+                },
+            }],
         });
-    },
+    }
 
-    _digest: function (val, items) {
-        var o = this.options;
+    _digest(val, items) {
+        const o = this.options;
 
-        val = BI.isArray(val) ? val.slice() : [val];
+        val = isArray(val) ? val.slice() : [val];
 
-        var result = [];
+        const result = [];
 
         //  提升valueFormatter的优先级
-        if (o.valueFormatter !== BI.emptyFn && BI.isFunction(o.valueFormatter)) {
-            BI.each(val, function (index, v) {
+        if (o.valueFormatter !== emptyFn && isFunction(o.valueFormatter)) {
+            each(val, (index, v) => {
                 result.push(o.valueFormatter(v));
             });
+            
             return result.join(",");
         }
 
-        var formatItems = BI.Tree.transformToArrayFormat(items);
-        BI.each(formatItems, function (i, item) {
-            if (BI.contains(val, item.value) && !BI.contains(result, item.text || item.value)) {
+        const formatItems = Tree.transformToArrayFormat(items);
+        each(formatItems, (i, item) => {
+            if (contains(val, item.value) && !contains(result, item.text || item.value)) {
                 result.push(item.text || item.value);
-                BI.remove(val, item.value);
+                remove(val, item.value);
             }
         });
 
         if (result.length > 0 && val.length === 0) {
             return result.join(",");
         } else {
-            return BI.isFunction(o.text) ? o.text() : o.text;
+            return isFunction(o.text) ? o.text() : o.text;
         }
-    },
+    }
 
-    setText: function (text) {
+    setText(text) {
         this.options.text = text;
         this.trigger.setText(text);
-    },
+    }
 
-    setValue: function (val) {
-        var formatText = this._digest(val, this.options.items);
+    setValue(val) {
+        const formatText = this._digest(val, this.options.items);
         this.trigger.setText(formatText);
-    },
+    }
 
-    setTipType: function (v) {
+    setTipType(v) {
         this.options.tipType = v;
         this.trigger.setTipType(v);
-    },
+    }
 
-    getTextor: function () {
+    getTextor() {
         return this.trigger.getTextor();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.options.items = items;
     }
-});
-
-BI.SelectTextTrigger.EVENT_CLEAR = "EVENT_CLEAR";
-BI.shortcut("bi.select_text_trigger", BI.SelectTextTrigger);
+}
diff --git a/src/case/trigger/trigger.text.select.small.js b/src/case/trigger/trigger.text.select.small.js
index adbd5603c..944ee1a51 100644
--- a/src/case/trigger/trigger.text.select.small.js
+++ b/src/case/trigger/trigger.text.select.small.js
@@ -1,26 +1,31 @@
+import { shortcut, extend, toPix, createWidget, isArray, deepContains, each, contains, Tree } from "@/core";
+import { Trigger } from "@/base";
+
 /**
  * 选择字段trigger小一号的
  *
- * @class BI.SmallSelectTextTrigger
- * @extends BI.Trigger
+ * @class SmallSelectTextTrigger
+ * @extends Trigger
  */
-BI.SmallSelectTextTrigger = BI.inherit(BI.Trigger, {
+@shortcut()
+export class SmallSelectTextTrigger extends Trigger {
+    static xtype = "bi.small_select_text_trigger"
 
-    _defaultConfig: function () {
-        return BI.extend(BI.SmallSelectTextTrigger.superclass._defaultConfig.apply(this, arguments), {
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-small-select-text-trigger bi-border",
             height: 20,
         });
-    },
+    }
 
-    _init: function () {
-        BI.SmallSelectTextTrigger.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        var obj = this._digest(o.value, o.items);
-        this.trigger = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        const obj = this._digest(o.value, o.items);
+        this.trigger = createWidget({
             type: "bi.small_text_trigger",
             element: this,
-            height: BI.toPix(o.height, 2),
+            height: toPix(o.height, 2),
             text: obj.text,
             cls: obj.cls,
             textHgap: o.textHgap,
@@ -30,15 +35,15 @@ BI.SmallSelectTextTrigger = BI.inherit(BI.Trigger, {
             textTgap: o.textTgap,
             textBgap: o.textBgap,
         });
-    },
+    }
 
-    _digest: function(vals, items){
-        var o = this.options;
-        vals = BI.isArray(vals) ? vals : [vals];
-        var result = [];
-        var formatItems = BI.Tree.transformToArrayFormat(items);
-        BI.each(formatItems, function (i, item) {
-            if (BI.deepContains(vals, item.value) && !BI.contains(result, item.text || item.value)) {
+    _digest(vals, items) {
+        const o = this.options;
+        vals = isArray(vals) ? vals : [vals];
+        const result = [];
+        const formatItems = Tree.transformToArrayFormat(items);
+        each(formatItems, (i, item) => {
+            if (deepContains(vals, item.value) && !contains(result, item.text || item.value)) {
                 result.push(item.text || item.value);
             }
         });
@@ -46,24 +51,23 @@ BI.SmallSelectTextTrigger = BI.inherit(BI.Trigger, {
         if (result.length > 0) {
             return {
                 cls: "",
-                text: result.join(",")
-            }
+                text: result.join(","),
+            };
         } else {
             return {
                 cls: "bi-water-mark",
-                text: o.text
-            }
+                text: o.text,
+            };
         }
-    },
+    }
 
-    setValue: function (vals) {
-        var formatValue = this._digest(vals, this.options.items);
+    setValue(vals) {
+        const formatValue = this._digest(vals, this.options.items);
         this.trigger.element.removeClass("bi-water-mark").addClass(formatValue.cls);
         this.trigger.setText(formatValue.text);
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.options.items = items;
     }
-});
-BI.shortcut("bi.small_select_text_trigger", BI.SmallSelectTextTrigger);
+}
diff --git a/src/case/trigger/trigger.text.small.js b/src/case/trigger/trigger.text.small.js
index 27c395a69..9269a4210 100644
--- a/src/case/trigger/trigger.text.small.js
+++ b/src/case/trigger/trigger.text.small.js
@@ -1,23 +1,30 @@
+import { shortcut, extend, createWidget } from "@/core";
+import { Trigger } from "@/base";
+
 /**
  * 文字trigger(右边小三角小一号的) ==
  *
- * @class BI.SmallTextTrigger
- * @extends BI.Trigger
+ * @class SmallTextTrigger
+ * @extends Trigger
  */
-BI.SmallTextTrigger = BI.inherit(BI.Trigger, {
-    _defaultConfig: function () {
-        var conf = BI.SmallTextTrigger.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-text-trigger",
+@shortcut()
+export class SmallTextTrigger extends Trigger {
+    static xtype = "bi.small_text_trigger"
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+        
+        return extend(conf, {
+            baseCls: `${conf.baseCls || ""} bi-text-trigger`,
             height: 20,
             textHgap: 6,
         });
-    },
+    }
 
-    _init: function () {
-        BI.SmallTextTrigger.superclass._init.apply(this, arguments);
-        var self = this, o = this.options, c = this._const;
-        this.text = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const o = this.options;
+        this.text = createWidget({
             type: "bi.label",
             textAlign: "left",
             height: o.height,
@@ -29,32 +36,29 @@ BI.SmallTextTrigger = BI.inherit(BI.Trigger, {
             tgap: o.textTgap,
             bgap: o.textBgap,
         });
-        this.trigerButton = BI.createWidget({
+        this.trigerButton = createWidget({
             type: "bi.trigger_icon_button",
-            width: o.triggerWidth || o.height
+            width: o.triggerWidth || o.height,
         });
 
-        BI.createWidget({
+        createWidget({
             element: this,
             type: "bi.horizontal_fill",
-            items: [
-                {
-                    el: this.text,
-                    width: "fill"
-                }, {
-                    el: this.trigerButton,
-                    width: ""
-                }
-            ]
+            items: [{
+                el: this.text,
+                width: "fill",
+            }, {
+                el: this.trigerButton,
+                width: "",
+            }],
         });
-    },
+    }
 
-    setValue: function (value) {
+    setValue(value) {
         this.text.setValue(value);
-    },
+    }
 
-    setText: function (text) {
+    setText(text) {
         this.text.setText(text);
     }
-});
-BI.shortcut("bi.small_text_trigger", BI.SmallTextTrigger);
+}
diff --git a/src/core/platform/web/dom.js b/src/core/platform/web/dom.js
index 5835df64f..1fca2871b 100644
--- a/src/core/platform/web/dom.js
+++ b/src/core/platform/web/dom.js
@@ -502,207 +502,208 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig
     for (i = 0; i < directions.length; i++) {
         direct = directions[i];
         switch (direct) {
-            case "left":
-                leftRight.push(direct);
-                break;
-            case "right":
-                leftRight.push(direct);
-                break;
-            case "top":
-                topBottom.push(direct);
-                break;
-            case "bottom":
-                topBottom.push(direct);
-                break;
-            case "innerLeft":
-                innerLeftRight.push(direct);
-                break;
-            case "innerRight":
-                innerLeftRight.push(direct);
-                break;
-            default:
-                break;
+        case "left":
+            leftRight.push(direct);
+            break;
+        case "right":
+            leftRight.push(direct);
+            break;
+        case "top":
+            topBottom.push(direct);
+            break;
+        case "bottom":
+            topBottom.push(direct);
+            break;
+        case "innerLeft":
+            innerLeftRight.push(direct);
+            break;
+        case "innerRight":
+            innerLeftRight.push(direct);
+            break;
+        default:
+            break;
         }
     }
     for (i = 0; i < directions.length; i++) {
+        let tW, tH;
         direct = directions[i];
         switch (direct) {
-            case "left":
-                if (!isNeedAdaptHeight) {
-                    var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
-                    if (isLeftSpaceEnough(combo, popup, tW)) {
-                        left = getLeftPosition(combo, popup, tW, container).left;
-                        if (topBottom[0] === "bottom") {
-                            pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container);
-                        } else {
-                            pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container);
-                        }
-                        pos.dir = `left,${pos.dir}`;
-                        if (tbFirst) {
-                            pos.change = "left";
-                        }
-                        pos.left = left;
-
-                        return pos;
+        case "left":
+            if (!isNeedAdaptHeight) {
+                tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
+                if (isLeftSpaceEnough(combo, popup, tW)) {
+                    left = getLeftPosition(combo, popup, tW, container).left;
+                    if (topBottom[0] === "bottom") {
+                        pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container);
+                    } else {
+                        pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container);
                     }
-                }
-                lrFirst = true;
-                break;
-            case "right":
-                if (!isNeedAdaptHeight) {
-                    var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
-                    if (isRightSpaceEnough(combo, popup, tW)) {
-                        left = getRightPosition(combo, popup, tW, container).left;
-                        if (topBottom[0] === "bottom") {
-                            pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container);
-                        } else {
-                            pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container);
-                        }
-                        pos.dir = `right,${pos.dir}`;
-                        if (tbFirst) {
-                            pos.change = "right";
-                        }
-                        pos.left = left;
-
-                        return pos;
+                    pos.dir = `left,${pos.dir}`;
+                    if (tbFirst) {
+                        pos.change = "left";
                     }
+                    pos.left = left;
+
+                    return pos;
                 }
-                lrFirst = true;
-                break;
-            case "top":
-                var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
-                if (isTopSpaceEnough(combo, popup, tH)) {
-                    top = getTopPosition(combo, popup, tH, container).top;
-                    if (leftRight[0] === "right") {
-                        pos = getLeftAlignPosition(combo, popup, tW, container);
+            }
+            lrFirst = true;
+            break;
+        case "right":
+            if (!isNeedAdaptHeight) {
+                tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
+                if (isRightSpaceEnough(combo, popup, tW)) {
+                    left = getRightPosition(combo, popup, tW, container).left;
+                    if (topBottom[0] === "bottom") {
+                        pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container);
                     } else {
-                        pos = getRightAlignPosition(combo, popup, tW, container);
+                        pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container);
                     }
-                    pos.dir = `top,${pos.dir}`;
-                    if (lrFirst) {
-                        pos.change = "top";
+                    pos.dir = `right,${pos.dir}`;
+                    if (tbFirst) {
+                        pos.change = "right";
                     }
-                    pos.top = top;
+                    pos.left = left;
 
                     return pos;
                 }
-                if (needAdaptHeight) {
-                    isNeedAdaptHeight = true;
+            }
+            lrFirst = true;
+            break;
+        case "top":
+            tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
+            if (isTopSpaceEnough(combo, popup, tH)) {
+                top = getTopPosition(combo, popup, tH, container).top;
+                if (leftRight[0] === "right") {
+                    pos = getLeftAlignPosition(combo, popup, tW, container);
+                } else {
+                    pos = getRightAlignPosition(combo, popup, tW, container);
+                }
+                pos.dir = `top,${pos.dir}`;
+                if (lrFirst) {
+                    pos.change = "top";
                 }
-                tbFirst = true;
-                break;
-            case "bottom":
-                var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
-                if (isBottomSpaceEnough(combo, popup, tH)) {
-                    top = getBottomPosition(combo, popup, tH, container).top;
-                    if (leftRight[0] === "right") {
-                        pos = getLeftAlignPosition(combo, popup, tW, container);
+                pos.top = top;
+
+                return pos;
+            }
+            if (needAdaptHeight) {
+                isNeedAdaptHeight = true;
+            }
+            tbFirst = true;
+            break;
+        case "bottom":
+            tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight;
+            if (isBottomSpaceEnough(combo, popup, tH)) {
+                top = getBottomPosition(combo, popup, tH, container).top;
+                if (leftRight[0] === "right") {
+                    pos = getLeftAlignPosition(combo, popup, tW, container);
+                } else {
+                    pos = getRightAlignPosition(combo, popup, tW, container);
+                }
+                pos.dir = `bottom,${pos.dir}`;
+                if (lrFirst) {
+                    pos.change = "bottom";
+                }
+                pos.top = top;
+
+                return pos;
+            }
+            if (needAdaptHeight) {
+                isNeedAdaptHeight = true;
+            }
+            tbFirst = true;
+            break;
+        case "innerLeft":
+            if (!isNeedAdaptHeight) {
+                tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
+                if (isInnerLeftSpaceEnough(combo, popup, tW)) {
+                    left = getInnerLeftPosition(combo, popup, tW).left;
+                    if (topBottom[0] === "bottom") {
+                        pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight);
                     } else {
-                        pos = getRightAlignPosition(combo, popup, tW, container);
+                        pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight);
                     }
-                    pos.dir = `bottom,${pos.dir}`;
-                    if (lrFirst) {
-                        pos.change = "bottom";
+                    pos.dir = `innerLeft,${pos.dir}`;
+                    if (tbFirst) {
+                        pos.change = "innerLeft";
                     }
-                    pos.top = top;
+                    pos.left = left;
 
                     return pos;
                 }
-                if (needAdaptHeight) {
-                    isNeedAdaptHeight = true;
-                }
-                tbFirst = true;
-                break;
-            case "innerLeft":
-                if (!isNeedAdaptHeight) {
-                    var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight;
-                    if (isInnerLeftSpaceEnough(combo, popup, tW)) {
-                        left = getInnerLeftPosition(combo, popup, tW).left;
-                        if (topBottom[0] === "bottom") {
-                            pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight);
-                        } else {
-                            pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight);
-                        }
-                        pos.dir = `innerLeft,${pos.dir}`;
-                        if (tbFirst) {
-                            pos.change = "innerLeft";
-                        }
-                        pos.left = left;
-
-                        return pos;
+            }
+            lrFirst = true;
+            break;
+        case "innerRight":
+            if (!isNeedAdaptHeight) {
+                tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
+                if (isInnerRightSpaceEnough(combo, popup, tW)) {
+                    left = getInnerRightPosition(combo, popup, tW).left;
+                    if (topBottom[0] === "bottom") {
+                        pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight);
+                    } else {
+                        pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight);
                     }
-                }
-                lrFirst = true;
-                break;
-            case "innerRight":
-                if (!isNeedAdaptHeight) {
-                    var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight;
-                    if (isInnerRightSpaceEnough(combo, popup, tW)) {
-                        left = getInnerRightPosition(combo, popup, tW).left;
-                        if (topBottom[0] === "bottom") {
-                            pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight);
-                        } else {
-                            pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight);
-                        }
-                        pos.dir = `innerLeft,${pos.dir}`;
-                        if (tbFirst) {
-                            pos.change = "innerRight";
-                        }
-                        pos.left = left;
-
-                        return pos;
+                    pos.dir = `innerLeft,${pos.dir}`;
+                    if (tbFirst) {
+                        pos.change = "innerRight";
                     }
+                    pos.left = left;
+
+                    return pos;
                 }
-                break;
-            default:
-                break;
+            }
+            break;
+        default:
+            break;
         }
     }
 
     // 此处为四个方向放不下时挑空间最大的方向去放置, 也就是说我设置了弹出方向为"bottom,left",
     // 最后发现实际弹出方向可能是"top,left"，那么此时外界获取popup的方向应该是"top,left"
     switch (directions[0]) {
-        case "left":
-        case "right":
-            if (isRightSpaceLarger(combo)) {
-                left = getRightAdaptPosition(combo, popup, extraWidth, container).left;
-                firstDir = "right";
-            } else {
-                left = getLeftAdaptPosition(combo, popup, extraWidth, container).left;
-                firstDir = "left";
-            }
-            if (topBottom[0] === "bottom") {
-                pos = getTopAlignPosition(combo, popup, extraHeight, needAdaptHeight);
-                pos.left = left;
-                pos.dir = `${firstDir},${pos.dir}`;
-
-                return pos;
-            }
-            pos = getBottomAlignPosition(combo, popup, extraHeight, needAdaptHeight);
+    case "left":
+    case "right":
+        if (isRightSpaceLarger(combo)) {
+            left = getRightAdaptPosition(combo, popup, extraWidth, container).left;
+            firstDir = "right";
+        } else {
+            left = getLeftAdaptPosition(combo, popup, extraWidth, container).left;
+            firstDir = "left";
+        }
+        if (topBottom[0] === "bottom") {
+            pos = getTopAlignPosition(combo, popup, extraHeight, needAdaptHeight);
             pos.left = left;
             pos.dir = `${firstDir},${pos.dir}`;
 
             return pos;
-        default :
-            if (isBottomSpaceLarger(combo)) {
-                top = getBottomAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top;
-                firstDir = "bottom";
-            } else {
-                top = getTopAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top;
-                firstDir = "top";
-            }
-            if (leftRight[0] === "right") {
-                pos = getLeftAlignPosition(combo, popup, extraWidth, container);
-                pos.top = top;
-                pos.dir = `${firstDir},${pos.dir}`;
-
-                return pos;
-            }
-            pos = getRightAlignPosition(combo, popup, extraWidth, container);
+        }
+        pos = getBottomAlignPosition(combo, popup, extraHeight, needAdaptHeight);
+        pos.left = left;
+        pos.dir = `${firstDir},${pos.dir}`;
+
+        return pos;
+    default :
+        if (isBottomSpaceLarger(combo)) {
+            top = getBottomAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top;
+            firstDir = "bottom";
+        } else {
+            top = getTopAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top;
+            firstDir = "top";
+        }
+        if (leftRight[0] === "right") {
+            pos = getLeftAlignPosition(combo, popup, extraWidth, container);
             pos.top = top;
             pos.dir = `${firstDir},${pos.dir}`;
 
             return pos;
+        }
+        pos = getRightAlignPosition(combo, popup, extraWidth, container);
+        pos.top = top;
+        pos.dir = `${firstDir},${pos.dir}`;
+
+        return pos;
     }
 }
 
@@ -715,26 +716,26 @@ export function getComboPosition(combo, popup, extraWidth, extraHeight, needAdap
     popup.resetHeight && popup.resetHeight(maxHeight);
     const position = getComboPositionByDirections(combo, popup, extraWidth, extraHeight, needAdaptHeight, directions || ["bottom", "top", "right", "left"], positionRelativeElement);
     switch (offsetStyle) {
-        case "center":
-            if (position.change) {
-                var p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
-                position.top = p.top;
-            } else {
-                var p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
-                position.left = p.left;
-            }
-            break;
-        case "middle":
-            if (position.change) {
-                var p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
-                position.left = p.left;
-            } else {
-                var p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
-                position.top = p.top;
-            }
-            break;
-        default:
-            break;
+    case "center":
+        if (position.change) {
+            const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
+            position.top = p.top;
+        } else {
+            const p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
+            position.left = p.left;
+        }
+        break;
+    case "middle":
+        if (position.change) {
+            const p = getCenterAdaptPosition(combo, popup, positionRelativeElement);
+            position.left = p.left;
+        } else {
+            const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement);
+            position.top = p.top;
+        }
+        break;
+    default:
+        break;
     }
     if (needAdaptHeight === true) {
         popup.resetHeight && popup.resetHeight(Math.min(viewportBounds.height - position.top - (positionRelativeElement ? positionRelativeElement.getBoundingClientRect().top : 0), maxHeight));
diff --git a/src/core/utils/color.js b/src/core/utils/color.js
index 2eff91b95..a219a4f7d 100644
--- a/src/core/utils/color.js
+++ b/src/core/utils/color.js
@@ -1,4 +1,5 @@
 import { parseInt, parseFloat, isNull, isKey } from "../2.base";
+import * as DOMUtils from "../platform/web/dom";
 
 export const DOM = {
     isColor(color) {
@@ -198,4 +199,6 @@ export const DOM = {
             Math.floor(255 * (bgColor * (1 - A)) + G * A)},${
             Math.floor(255 * (bgColor * (1 - A)) + B * A)})`;
     },
+
+    ...DOMUtils,
 };