diff --git a/src/case/checkbox/check.arrownode.js b/src/case/checkbox/check.arrownode.js
index 3347f83d0..625e7a6e4 100644
--- a/src/case/checkbox/check.arrownode.js
+++ b/src/case/checkbox/check.arrownode.js
@@ -2,24 +2,28 @@
  * Created by roy on 15/10/16.
  * 右与下箭头切换的树节点
  */
-BI.ArrowTreeGroupNodeCheckbox = BI.inherit(BI.IconButton, {
+import { shortcut } from "@/core";
+import { IconButton } from "@/base";
 
-    props: function (conf) {
+@shortcut()
+export class ArrowTreeGroupNodeCheckbox extends IconButton {
+    static xtype = "bi.arrow_group_node_checkbox";
+
+    props(conf) {
         return {
-            extraCls: "bi-arrow-group-node-checkbox " + (conf.collapseIcon ||  "expander-right-font"),
+            extraCls: `bi-arrow-group-node-checkbox ${conf.collapseIcon || "expander-right-font"}`,
             expandIcon: "expander-down-font",
-            collapseIcon: "expander-right-font"
+            collapseIcon: "expander-right-font",
         };
-    },
+    }
 
-    setSelected: function (v) {
-        var o = this.options;
-        BI.ArrowTreeGroupNodeCheckbox.superclass.setSelected.apply(this, arguments);
-        if(v) {
+    setSelected(v) {
+        const o = this.options;
+        super.setSelected(...arguments);
+        if (v) {
             this.element.removeClass(o.collapseIcon).addClass(o.expandIcon);
         } else {
             this.element.removeClass(o.expandIcon).addClass(o.collapseIcon);
         }
     }
-});
-BI.shortcut("bi.arrow_group_node_checkbox", BI.ArrowTreeGroupNodeCheckbox);
+}
diff --git a/src/case/checkbox/check.checkingmarknode.js b/src/case/checkbox/check.checkingmarknode.js
index b3996691e..4f51a02c1 100644
--- a/src/case/checkbox/check.checkingmarknode.js
+++ b/src/case/checkbox/check.checkingmarknode.js
@@ -3,19 +3,23 @@
  * @class BI.CheckingMarkNode
  * @extends BI.IconButton
  */
-BI.CheckingMarkNode = BI.inherit(BI.IconButton, {
-    _defaultConfig: function () {
-        return BI.extend( BI.CheckingMarkNode.superclass._defaultConfig.apply(this, arguments), {
-        });
-    },
+import { extend, shortcut } from "@/core";
+import { IconButton } from "@/base";
 
-    setSelected: function (v) {
-        BI.CheckingMarkNode.superclass.setSelected.apply(this, arguments);
-        if(v === true) {
+@shortcut()
+export class CheckingMarkNode extends IconButton {
+    static xtype = "bi.checking_mark_node";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {});
+    }
+
+    setSelected(v) {
+        super.setSelected(...arguments);
+        if (v === true) {
             this.element.addClass("check-mark-font");
         } else {
             this.element.removeClass("check-mark-font");
         }
     }
-});
-BI.shortcut("bi.checking_mark_node", BI.CheckingMarkNode);
+}
diff --git a/src/case/checkbox/check.first.treenode.js b/src/case/checkbox/check.first.treenode.js
index aa808488f..bade32c4d 100644
--- a/src/case/checkbox/check.first.treenode.js
+++ b/src/case/checkbox/check.first.treenode.js
@@ -3,31 +3,36 @@
  * @class BI.FirstTreeNodeCheckbox
  * @extends BI.IconButton
  */
-BI.FirstTreeNodeCheckbox = BI.inherit(BI.IconButton, {
-    _defaultConfig: function () {
-        return BI.extend( BI.FirstTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
+import { extend, shortcut } from "@/core";
+import { IconButton } from "@/base";
+
+@shortcut()
+export class FirstTreeNodeCheckbox extends IconButton {
+    static xtype = "bi.first_tree_node_checkbox";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type2" : "tree-collapse-icon-type2",
             iconWidth: 24,
-            iconHeight: 24
+            iconHeight: 24,
         });
-    },
+    }
 
-    getLineCls: function () {
+    getLineCls() {
         switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
-            case "solid":
-                return "tree-solid-expand-icon-type2";
-            default:
-                return "tree-expand-icon-type2";
+        case "solid":
+            return "tree-solid-expand-icon-type2";
+        default:
+            return "tree-expand-icon-type2";
         }
-    },
+    }
 
-    setSelected: function (v) {
-        BI.FirstTreeNodeCheckbox.superclass.setSelected.apply(this, arguments);
-        if(v === true) {
+    setSelected(v) {
+        super.setSelected(...arguments);
+        if (v === true) {
             this.element.addClass(this.getLineCls());
         } else {
             this.element.removeClass(this.getLineCls());
         }
     }
-});
-BI.shortcut("bi.first_tree_node_checkbox", BI.FirstTreeNodeCheckbox);
\ No newline at end of file
+}
diff --git a/src/case/checkbox/check.last.treenode.js b/src/case/checkbox/check.last.treenode.js
index cb536f8cc..93ebc9c66 100644
--- a/src/case/checkbox/check.last.treenode.js
+++ b/src/case/checkbox/check.last.treenode.js
@@ -3,31 +3,36 @@
  * @class BI.LastTreeNodeCheckbox
  * @extends BI.IconButton
  */
-BI.LastTreeNodeCheckbox = BI.inherit(BI.IconButton, {
-    _defaultConfig: function () {
-        return BI.extend(BI.LastTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
+import { extend, shortcut } from "@/core";
+import { IconButton } from "@/base";
+
+@shortcut()
+export class LastTreeNodeCheckbox extends IconButton {
+    static xtype = "bi.last_tree_node_checkbox";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type4" : "tree-collapse-icon-type4",
             iconWidth: 24,
-            iconHeight: 24
+            iconHeight: 24,
         });
-    },
+    }
 
-    getLineCls: function () {
+    getLineCls() {
         switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
-            case "solid":
-                return "tree-solid-expand-icon-type4";
-            default:
-                return "tree-expand-icon-type4";
+        case "solid":
+            return "tree-solid-expand-icon-type4";
+        default:
+            return "tree-expand-icon-type4";
         }
-    },
+    }
 
-    setSelected: function (v) {
-        BI.LastTreeNodeCheckbox.superclass.setSelected.apply(this, arguments);
+    setSelected(v) {
+        super.setSelected(...arguments);
         if (v === true) {
             this.element.addClass(this.getLineCls());
         } else {
             this.element.removeClass(this.getLineCls());
         }
     }
-});
-BI.shortcut("bi.last_tree_node_checkbox", BI.LastTreeNodeCheckbox);
\ No newline at end of file
+}
diff --git a/src/case/checkbox/check.mid.treenode.js b/src/case/checkbox/check.mid.treenode.js
index 7ec4e5230..a9d44de0e 100644
--- a/src/case/checkbox/check.mid.treenode.js
+++ b/src/case/checkbox/check.mid.treenode.js
@@ -3,31 +3,36 @@
  * @class BI.MidTreeNodeCheckbox
  * @extends BI.IconButton
  */
-BI.MidTreeNodeCheckbox = BI.inherit(BI.IconButton, {
-    _defaultConfig: function () {
-        return BI.extend( BI.MidTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
+import { extend, shortcut } from "@/core";
+import { IconButton } from "@/base";
+
+@shortcut()
+export class MidTreeNodeCheckbox extends IconButton {
+    static xtype = "bi.mid_tree_node_checkbox";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type3" : "tree-collapse-icon-type3",
             iconWidth: 24,
-            iconHeight: 24
+            iconHeight: 24,
         });
-    },
+    }
 
-    getLineCls: function () {
+    getLineCls() {
         switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
-            case "solid":
-                return "tree-solid-expand-icon-type3";
-            default:
-                return "tree-expand-icon-type3";
+        case "solid":
+            return "tree-solid-expand-icon-type3";
+        default:
+            return "tree-expand-icon-type3";
         }
-    },
+    }
 
-    setSelected: function (v) {
-        BI.MidTreeNodeCheckbox.superclass.setSelected.apply(this, arguments);
-        if(v === true) {
+    setSelected(v) {
+        super.setSelected(...arguments);
+        if (v === true) {
             this.element.addClass(this.getLineCls());
         } else {
             this.element.removeClass(this.getLineCls());
         }
     }
-});
-BI.shortcut("bi.mid_tree_node_checkbox", BI.MidTreeNodeCheckbox);
\ No newline at end of file
+}
diff --git a/src/case/checkbox/check.treenode.js b/src/case/checkbox/check.treenode.js
index 128bb73c6..fa1b54404 100644
--- a/src/case/checkbox/check.treenode.js
+++ b/src/case/checkbox/check.treenode.js
@@ -3,31 +3,36 @@
  * @class BI.TreeNodeCheckbox
  * @extends BI.IconButton
  */
-BI.TreeNodeCheckbox = BI.inherit(BI.IconButton, {
-    _defaultConfig: function () {
-        return BI.extend( BI.TreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
+import { extend, shortcut } from "@/core";
+import { IconButton } from "@/base";
+
+@shortcut()
+export class TreeNodeCheckbox extends IconButton {
+    static xtype = "bi.tree_node_checkbox";
+    
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type1" : "tree-collapse-icon-type1",
             iconWidth: 24,
-            iconHeight: 24
+            iconHeight: 24,
         });
-    },
+    }
 
-    getLineCls: function () {
+    getLineCls() {
         switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
-            case "solid":
-                return "tree-solid-expand-icon-type1";
-            default:
-                return "tree-expand-icon-type1";
+        case "solid":
+            return "tree-solid-expand-icon-type1";
+        default:
+            return "tree-expand-icon-type1";
         }
-    },
+    }
 
-    setSelected: function (v) {
-        BI.TreeNodeCheckbox.superclass.setSelected.apply(this, arguments);
-        if(v) {
+    setSelected(v) {
+        super.setSelected(...arguments);
+        if (v) {
             this.element.addClass(this.getLineCls());
         } else {
             this.element.removeClass(this.getLineCls());
         }
     }
-});
-BI.shortcut("bi.tree_node_checkbox", BI.TreeNodeCheckbox);
\ No newline at end of file
+}
diff --git a/src/case/checkbox/index.js b/src/case/checkbox/index.js
new file mode 100644
index 000000000..aaaf21a68
--- /dev/null
+++ b/src/case/checkbox/index.js
@@ -0,0 +1,6 @@
+export { ArrowTreeGroupNodeCheckbox } from "./check.arrownode";
+export { CheckingMarkNode } from "./check.checkingmarknode";
+export { FirstTreeNodeCheckbox } from "./check.first.treenode";
+export { LastTreeNodeCheckbox } from "./check.last.treenode";
+export { MidTreeNodeCheckbox } from "./check.mid.treenode";
+export { TreeNodeCheckbox } from "./check.treenode";