diff --git a/src/base/index.js b/src/base/index.js
index c10043847..46e185ad2 100644
--- a/src/base/index.js
+++ b/src/base/index.js
@@ -1,9 +1,12 @@
 import Pane from "./1.pane";
+import Single from "./single/0.single";
 
 BI.extend(BI, {
     Pane,
+    Single,
 });
 
 export {
     Pane,
+    Single,
 }
\ No newline at end of file
diff --git a/src/base/single/0.single.js b/src/base/single/0.single.js
index c13e02e81..3bb243b85 100644
--- a/src/base/single/0.single.js
+++ b/src/base/single/0.single.js
@@ -10,11 +10,16 @@
  * @abstract
  */
 
-var delayingTooltips;
+import { Widget, shortcut } from "../../core";
+import BI from "../../core/2.base";
+import { Tooltips } from "../0.base";
 
-BI.Single = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        var conf = BI.Single.superclass._defaultConfig.apply(this, arguments);
+@shortcut()
+export default class Single extends Widget {
+    static xtype = "bi.single";
+    
+    _defaultConfig() {
+        const conf = super._defaultConfig(arguments);
 
         return BI.extend(conf, {
             readonly: false,
@@ -24,13 +29,22 @@ BI.Single = BI.inherit(BI.Widget, {
             belowMouse: false, //  title是否跟随鼠标
             enableHover: false,
         });
-    },
+    }
 
-    _showToolTip: function (e, opt) {
+    _showToolTip(e, opt) {
         opt || (opt = {});
-        var self = this;
-        var o = this.options;
-        var title = this.getTitle();
+        const { action } = this.options;
+        const title = this.getTitle();
+
+        const showToolTip = (tooltipOpt) => {
+            if (BI.isKey(tooltipOpt.text) && !Tooltips.has(this.getName())) {
+                Tooltips.show(e, this.getName(), tooltipOpt, this, opt);
+                if (action) {
+                    BI.Actions.runAction(action, "hover", this.options, this);
+                }
+                BI.Actions.runGlobalAction("hover", this.options, this);
+            }
+        }
 
         if (title instanceof Promise) {
             this.requestingTitle = title;
@@ -42,47 +56,37 @@ BI.Single = BI.inherit(BI.Widget, {
             showToolTip(this._getTooltipOptions(title));
         }
 
-        function showToolTip(tooltipOpt) {
-            if (BI.isKey(tooltipOpt.text) && !BI.Tooltips.has(self.getName())) {
-                BI.Tooltips.show(e, self.getName(), tooltipOpt, self, opt);
-                if (o.action) {
-                    BI.Actions.runAction(o.action, "hover", o, self);
-                }
-                BI.Actions.runGlobalAction("hover", o, self);
-            }
-        }
-    },
+    }
 
-    _hideTooltip: function () {
-        var self = this;
-        var tooltip = BI.Tooltips.get(this.getName());
+    _hideTooltip() {
+        const tooltip = Tooltips.get(this.getName());
         if (BI.isNotNull(tooltip)) {
-            tooltip.element.fadeOut(200, function () {
-                BI.Tooltips.remove(self.getName());
+            tooltip.element.fadeOut(200, () => {
+                Tooltips.remove(this.getName());
             });
         }
-    },
-
-    _init: function () {
-        var self = this, o = this.options;
-        o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
-            self.setValue(newValue);
-        }) : o.value;
-        BI.Single.superclass._init.apply(this, arguments);
-    },
-
-    _mounted: function () {
-        var o = this.options;
-        if (o.enableHover || BI.isKey(o.title) || BI.isKey(o.warningTitle)
-            || BI.isFunction(o.title) || BI.isFunction(o.warningTitle)) {
+    }
+
+    _init() {
+        let { value } = this.options;
+        value = BI.isFunction(value) ? this.__watch(value, (context, newValue) => {
+            this.setValue(newValue);
+        }) : value;
+        super._init(arguments);
+    }
+
+    _mounted() {
+        const { enableHover, title, warningTitle, belowMouse, container } = this.options;
+        if (enableHover || BI.isKey(title) || BI.isKey(warningTitle)
+            || BI.isFunction(title) || BI.isFunction(warningTitle)) {
             this.enableHover({
-                belowMouse: o.belowMouse,
-                container: o.container,
+                belowMouse,
+                container,
             });
         }
-    },
+    }
 
-    _clearTimeOut: function () {
+    _clearTimeOut() {
         if (BI.isNotNull(this.showTimeout)) {
             clearTimeout(this.showTimeout);
             this.showTimeout = null;
@@ -91,88 +95,88 @@ BI.Single = BI.inherit(BI.Widget, {
             clearTimeout(this.hideTimeout);
             this.hideTimeout = null;
         }
-    },
+    }
 
-    _getTooltipOptions: function (title) {
-        var o = this.options;
-        var tooltipOpt = {};
+    _getTooltipOptions(title) {
+        const { tipType } = this.options;
+        let tooltipOpt = {};
         if (BI.isPlainObject(title)) {
             tooltipOpt = title;
         } else {
             tooltipOpt.level = this.getTipType() || "success";
             //  由于以前的用法,存在大量disabled:true搭配warningTitle的情况,所以这里做一个兼容,disabled:true的情况下,依然优先显示warningTitle,避免只设置了warningTitle而没有设置title的情况
-            if (BI.isNull(o.tipType) && !this.isEnabled()) {
+            if (BI.isNull(tipType) && !this.isEnabled()) {
                 tooltipOpt.text = (this.getWarningTitle() || title);
             } else {
                 tooltipOpt.text = tooltipOpt.level === "success" ? title : (this.getWarningTitle() || title);
             }
         }
         return tooltipOpt;
-    },
+    }
 
-    enableHover: function (opt) {
+    enableHover(opt) {
         opt || (opt = {});
-        var self = this;
+        let delayingTooltips;
         if (!this._hoverBinded) {
-            this.element.unbind("mouseenter.title").on("mouseenter.title", function (e) {
-                self._e = e;
-                self.mouseOver = true;
-                if (self.getTipType() === "warning" || (BI.isKey(self.getWarningTitle()) && !self.isEnabled())) {
-                    delayingTooltips = self.getName();
-                    self.showTimeout = BI.delay(function () {
-                        if (BI.isNotNull(self.showTimeout) && delayingTooltips === self.getName()) {
-                            self._showToolTip(self._e || e, opt);
+            this.element.unbind("mouseenter.title").on("mouseenter.title", (e) => {
+                this._e = e;
+                this.mouseOver = true;
+                if (this.getTipType() === "warning" || (BI.isKey(this.getWarningTitle()) && !this.isEnabled())) {
+                    delayingTooltips = this.getName();
+                    this.showTimeout = BI.delay(() => {
+                        if (BI.isNotNull(this.showTimeout) && delayingTooltips === this.getName()) {
+                            this._showToolTip(this._e || e, opt);
                         }
                     }, 200);
-                } else if (self.getTipType() === "success" || self.isEnabled()) {
-                    delayingTooltips = self.getName();
-                    self.showTimeout = BI.delay(function () {
-                        if (BI.isNotNull(self.showTimeout) && delayingTooltips === self.getName()) {
-                            self._showToolTip(self._e || e, opt);
+                } else if (this.getTipType() === "success" || this.isEnabled()) {
+                    delayingTooltips = this.getName();
+                    this.showTimeout = BI.delay(() => {
+                        if (BI.isNotNull(this.showTimeout) && delayingTooltips === this.getName()) {
+                            this._showToolTip(this._e || e, opt);
                         }
                     }, 500);
                 }
             });
-            this.element.unbind("mousemove.title").on("mousemove.title", function (e) {
-                self._e = e;
-                if (BI.isNotNull(self.showTimeout)) {
-                    clearTimeout(self.showTimeout);
-                    self.showTimeout = null;
+            this.element.unbind("mousemove.title").on("mousemove.title", (e) => {
+                this._e = e;
+                if (BI.isNotNull(this.showTimeout)) {
+                    clearTimeout(this.showTimeout);
+                    this.showTimeout = null;
                 }
-                if (BI.isNull(self.hideTimeout)) {
-                    self.hideTimeout = BI.delay(function () {
-                        if (BI.isNotNull(self.hideTimeout)) {
-                            self._hideTooltip();
+                if (BI.isNull(this.hideTimeout)) {
+                    this.hideTimeout = BI.delay(() => {
+                        if (BI.isNotNull(this.hideTimeout)) {
+                            this._hideTooltip();
                         }
                     }, 500);
                 }
 
-                self.showTimeout = BI.delay(function () {
+                this.showTimeout = BI.delay(() => {
                     // DEC-5321 IE下如果回调已经进入事件队列，clearTimeout将不会起作用
-                    if (BI.isNotNull(self.showTimeout)) {
-                        if (BI.isNotNull(self.hideTimeout)) {
-                            clearTimeout(self.hideTimeout);
-                            self.hideTimeout = null;
+                    if (BI.isNotNull(this.showTimeout)) {
+                        if (BI.isNotNull(this.hideTimeout)) {
+                            clearTimeout(this.hideTimeout);
+                            this.hideTimeout = null;
                         }
                         // CHART-10611 在拖拽的情况下, 鼠标拖拽着元素离开了拖拽元素的容器，但是子元素在dom结构上仍然属于容器
                         // 这样会认为鼠标仍然在容器中, 500ms内放开的话，会在容器之外显示鼠标停留处显示容器的title
-                        if (self.element.__isMouseInBounds__(self._e || e)) {
-                            self._showToolTip(self._e || e, opt);
+                        if (this.element.__isMouseInBounds__(this._e || e)) {
+                            this._showToolTip(this._e || e, opt);
                         }
                     }
                 }, 500);
             });
-            this.element.unbind("mouseleave.title").on("mouseleave.title", function (e) {
-                self._e = null;
-                self.mouseOver = false;
-                self._clearTimeOut();
-                self._hideTooltip();
+            this.element.unbind("mouseleave.title").on("mouseleave.title", (e) => {
+                this._e = null;
+                this.mouseOver = false;
+                this._clearTimeOut();
+                this._hideTooltip();
             });
             this._hoverBinded = true;
         }
-    },
+    }
 
-    disabledHover: function () {
+    disabledHover() {
         // 取消hover事件
         this._clearTimeOut();
         this._hideTooltip();
@@ -180,74 +184,73 @@ BI.Single = BI.inherit(BI.Widget, {
             .unbind("mousemove.title")
             .unbind("mouseleave.title");
         this._hoverBinded = false;
-    },
+    }
 
     // opt: {container: '', belowMouse: false}
-    setTitle: function (title, opt) {
+    setTitle(title, opt) {
         this.options.title = title;
         if (BI.isKey(title) || BI.isFunction(title)) {
             this.enableHover(opt);
         } else {
             this.disabledHover();
         }
-    },
+    }
 
-    setWarningTitle: function (title, opt) {
+    setWarningTitle(title, opt) {
         this.options.warningTitle = title;
         if (BI.isKey(title) || BI.isFunction(title)) {
             this.enableHover(opt);
         } else {
             this.disabledHover();
         }
-    },
+    }
 
-    setTipType: function (type) {
+    setTipType(type) {
         this.options.tipType = type;
-    },
+    }
 
-    getTipType: function () {
+    getTipType() {
         return this.options.tipType;
-    },
+    }
 
-    isReadOnly: function () {
+    isReadOnly() {
         return !!this.options.readonly;
-    },
+    }
 
-    getTitle: function () {
-        var title = this.options.title;
+    getTitle() {
+        const title = this.options.title;
         if (BI.isFunction(title)) {
             return title();
         }
 
         return title;
-    },
+    }
 
-    getWarningTitle: function () {
-        var title = this.options.warningTitle;
+    getWarningTitle() {
+        const title = this.options.warningTitle;
         if (BI.isFunction(title)) {
             return title();
         }
 
         return title;
-    },
+    }
 
-    setValue: function (val) {
+    setValue(val) {
         if (!this.options.readonly) {
             this.options.value = val;
             this.options.setValue && this.options.setValue(val);
         }
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.options.value;
-    },
+    }
 
-    _destroyed: function () {
+    _destroyed() {
         if (BI.isNotNull(this.showTimeout)) {
             clearTimeout(this.showTimeout);
             this.showTimeout = null;
         }
-        BI.Tooltips.remove(this.getName());
-    },
-});
-BI.shortcut("bi.single", BI.Single);
+        Tooltips.remove(this.getName());
+    }
+}