tooltip，bubble, toast 新样式和手动关闭的toast

demo/js/base/tip/demo.bubble.js

@@ -11,10 +11,12 @@ Demo.Bubble = BI.inherit(BI.Widget, {
                         btns.push(_ref);
                     },
                     type: "bi.button",
-                    text: "bubble测试",
+                    text: "bubble测试(消息)",
                     height: 30,
                     handler: function () {
-                        BI.Bubbles.show("singleBubble1", "bubble测试", this);
+                        BI.Bubbles.show("singleBubble1", "bubble测试", this, {
+                            level: "common"
+                        });
                     }
                 }
             }, {
@@ -23,11 +25,12 @@ Demo.Bubble = BI.inherit(BI.Widget, {
                         btns.push(_ref);
                     },
                     type: "bi.button",
-                    text: "bubble测试(居中显示)",
+                    text: "bubble测试(成功)",
                     height: 30,
                     handler: function () {
                         BI.Bubbles.show("singleBubble2", "bubble测试", this, {
-                            offsetStyle: "center"
+                            offsetStyle: "center",
+                            level: "success"
                         });
                     }
                 }
@@ -37,11 +40,26 @@ Demo.Bubble = BI.inherit(BI.Widget, {
                         btns.push(_ref);
                     },
                     type: "bi.button",
-                    text: "bubble测试(右边显示)",
+                    text: "bubble测试(错误)",
                     height: 30,
                     handler: function () {
                         BI.Bubbles.show("singleBubble3", "bubble测试", this, {
-                            offsetStyle: "right"
+                            offsetStyle: "right",
+                            level: "error"
+                        });
+                    }
+                }
+            }, {
+                el: {
+                    ref: function (_ref) {
+                        btns.push(_ref);
+                    },
+                    type: "bi.button",
+                    text: "bubble测试(警告)",
+                    height: 30,
+                    handler: function () {
+                        BI.Bubbles.show("singleBubble4", "bubble测试", this, {
+                            level: "warning"
                         });
                     }
                 }

demo/js/base/tip/demo.toast.js

@@ -7,7 +7,7 @@ Demo.Toast = BI.inherit(BI.Widget, {
             {
                 el: {
                     type: "bi.button",
-                    text: "简单Toast测试",
+                    text: "简单Toast测试(success)",
                     height: 30,
                     handler: function () {
                         BI.Msg.toast("这是一条简单的数据");
@@ -16,29 +16,45 @@ Demo.Toast = BI.inherit(BI.Widget, {
             }, {
                 el: {
                     type: "bi.button",
-                    text: "很长的Toast测试",
+                    text: "很长的Toast测试(normal)",
                     height: 30,
                     handler: function () {
-                        BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据");
+                        BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", {
+                            level: "normal"
+                        });
                     }
                 }
             }, {
                 el: {
                     type: "bi.button",
-                    text: "非常长的Toast测试",
+                    text: "非常长的Toast测试(warning)",
                     height: 30,
                     handler: function () {
-                        BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据");
+                        BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", {
+                            level: "warning"
+                        });
                     }
                 }
             }, {
                 el: {
                     type: "bi.button",
-                    text: "错误提示Toast测试",
+                    text: "错误提示Toast测试(error)",
-                    level: "warning",
                     height: 30,
                     handler: function () {
-                        BI.Msg.toast("错误提示Toast测试", "warning");
+                        BI.Msg.toast("错误提示Toast测试", {
+                            level: "error"
+                        });
+                    }
+                }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "错误提示Toast测试(error), 此toast不会自动消失",
+                    height: 30,
+                    handler: function () {
+                        BI.Msg.toast("错误提示Toast测试", {
+                            autoClose: false
+                        });
                     }
                 }
             }

dist/base.css

@@ -1183,9 +1183,23 @@ body .bi-button.button-ignore.disabled.clear:active,
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
+}
+.bi-bubble .bubble-error {
   background: #ffecec;
   color: #ff4949;
 }
+.bi-bubble .bubble-common {
+  background: #eaf2fd;
+  color: #3685f2;
+}
+.bi-bubble .bubble-success {
+  background: #e1f4e7;
+  color: #5cb75d;
+}
+.bi-bubble .bubble-warning {
+  background: #feeed7;
+  color: #faaa39;
+}
 
 .bi-tip {
   position: fixed !important;
@@ -1193,17 +1207,27 @@ body .bi-button.button-ignore.disabled.clear:active,
 
 .bi-toast {
   font-size: 14px;
+  color: #ffffff;
+  max-width: 400px;
+  min-width: 150px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
 .bi-toast.toast-success {
-  background: #e1f4e7;
+  background: #58cc7d;
-  color: #5cb75d;
 }
 .bi-toast.toast-warning {
-  background: #ffecec;
+  background: #faaa39;
-  color: #ff4949;
+}
+.bi-toast.toast-error {
+  background: #ff4949;
+}
+.bi-toast.toast-normal {
+  background: #3f8ce8;
+}
+.bi-toast .toast-icon {
+  font-size: 16px;
 }
 
 .bi-tooltip {
@@ -1225,17 +1249,27 @@ body .bi-button.button-ignore.disabled.clear:active,
 }
 .bi-toast {
   font-size: 14px;
+  color: #ffffff;
+  max-width: 400px;
+  min-width: 150px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
 .bi-toast.toast-success {
-  background: #e1f4e7;
+  background: #58cc7d;
-  color: #5cb75d;
 }
 .bi-toast.toast-warning {
-  background: #ffecec;
+  background: #faaa39;
-  color: #ff4949;
+}
+.bi-toast.toast-error {
+  background: #ff4949;
+}
+.bi-toast.toast-normal {
+  background: #3f8ce8;
+}
+.bi-toast .toast-icon {
+  font-size: 16px;
 }
 .bi-tooltip {
   max-width: 250px;

dist/base.js

@@ -14698,11 +14698,15 @@ $.extend(BI, {
             prompt: function (title, message, value, callback, min_width) {
                 // BI.Msg.prompt(title, message, value, callback, min_width);
             },
-            toast: function (message, level, context) {
+            toast: function (message, options, context) {
+                options = options || {};
                 context = context || $("body");
+                var level = options.level || "normal";
+                var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
                 var toast = BI.createWidget({
                     type: "bi.toast",
                     level: level,
+                    autoClose: autoClose,
                     text: message
                 });
                 BI.createWidget({
@@ -14711,16 +14715,12 @@ $.extend(BI, {
                     items: [{
                         el: toast,
                         left: "50%",
-                        top: 0
+                        top: 10
                     }]
                 });
-                if (toast.element.outerWidth() > context.outerWidth()) {
-                    toast.setWidth(context.width());
-                }
                 toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2});
-                toast.invisible();
                 toast.element.slideDown(500, function () {
-                    BI.delay(function () {
+                    autoClose && BI.delay(function () {
                         toast.element.slideUp(500, function () {
                             toast.destroy();
                         });
@@ -20296,6 +20296,7 @@ BI.Bubble = BI.inherit(BI.Tip, {
             extraCls: "bi-bubble",
             direction: "top",
             text: "",
+            level: "error",
             height: 35
         });
     },
@@ -20315,10 +20316,11 @@ BI.Bubble = BI.inherit(BI.Tip, {
     },
 
     _createBubbleText: function () {
+        var o = this.options;
         return (this.text = BI.createWidget({
             type: "bi.label",
-            cls: "bubble-text",
+            cls: "bubble-text" + (" bubble-" + o.level),
-            text: this.options.text,
+            text: o.text,
             hgap: 10,
             height: 30
         }));
@@ -20399,20 +20401,19 @@ BI.shortcut("bi.bubble", BI.Bubble);/**
 BI.Toast = BI.inherit(BI.Tip, {
     _const: {
         minWidth: 200,
-        hgap: 20
+        hgap: 10
     },
 
     _defaultConfig: function () {
         return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), {
             extraCls: "bi-toast",
             text: "",
-            level: "success", // success或warning
+            level: "success" // success或warning
-            height: 30
         });
     },
     _init: function () {
         BI.Toast.superclass._init.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.css({
             minWidth: this._const.minWidth + "px"
         });
@@ -20424,19 +20425,59 @@ BI.Toast = BI.inherit(BI.Tip, {
         };
         this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn});
 
+        var cls = "close-font";
+        switch(o.level) {
+            case "success":
+                break;
+            case "error":
+                break;
+            case "warning":
+                break;
+            case "normal":
+            default:
+                break;
+        }
+
+        var items = [{
+            type: "bi.center_adapt",
+            cls: cls + " toast-icon",
+            items: [{
+                type: "bi.icon"
+            }],
+            width: 36
+        }, {
+            el: {
+                type: "bi.label",
+                whiteSpace: "normal",
+                text: o.text,
+                textAlign: "left"
+            },
+            rgap: o.autoClose ? this._const.hgap : 0
+        }];
+
+        var columnSize = [36, ""];
+
+        if(o.autoClose === false) {
+            items.push({
+                type: "bi.icon_button",
+                cls: "close-font toast-icon",
+                handler: function () {
+                    self.destroy();
+                },
+                width: 36
+            });
+            columnSize.push(36);
+        }
+
         this.text = BI.createWidget({
-            type: "bi.label",
+            type: "bi.horizontal_adapt",
             element: this,
-            text: o.text,
+            items: items,
-            height: 30,
+            vgap: 5,
-            hgap: this._const.hgap
+            columnSize: columnSize
         });
     },
 
-    setWidth: function (width) {
-        this.element.width(width);
-    },
-
     setText: function (text) {
         this.text.setText(text);
     }

dist/bundle.css

@@ -3230,9 +3230,23 @@ body .bi-button.button-ignore.disabled.clear:active,
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
+}
+.bi-bubble .bubble-error {
   background: #ffecec;
   color: #ff4949;
 }
+.bi-bubble .bubble-common {
+  background: #eaf2fd;
+  color: #3685f2;
+}
+.bi-bubble .bubble-success {
+  background: #e1f4e7;
+  color: #5cb75d;
+}
+.bi-bubble .bubble-warning {
+  background: #feeed7;
+  color: #faaa39;
+}
 
 .bi-tip {
   position: fixed !important;
@@ -3240,17 +3254,27 @@ body .bi-button.button-ignore.disabled.clear:active,
 
 .bi-toast {
   font-size: 14px;
+  color: #ffffff;
+  max-width: 400px;
+  min-width: 150px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
 .bi-toast.toast-success {
-  background: #e1f4e7;
+  background: #58cc7d;
-  color: #5cb75d;
 }
 .bi-toast.toast-warning {
-  background: #ffecec;
+  background: #faaa39;
-  color: #ff4949;
+}
+.bi-toast.toast-error {
+  background: #ff4949;
+}
+.bi-toast.toast-normal {
+  background: #3f8ce8;
+}
+.bi-toast .toast-icon {
+  font-size: 16px;
 }
 
 .bi-tooltip {
@@ -3272,17 +3296,27 @@ body .bi-button.button-ignore.disabled.clear:active,
 }
 .bi-toast {
   font-size: 14px;
+  color: #ffffff;
+  max-width: 400px;
+  min-width: 150px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
 .bi-toast.toast-success {
-  background: #e1f4e7;
+  background: #58cc7d;
-  color: #5cb75d;
 }
 .bi-toast.toast-warning {
-  background: #ffecec;
+  background: #faaa39;
-  color: #ff4949;
+}
+.bi-toast.toast-error {
+  background: #ff4949;
+}
+.bi-toast.toast-normal {
+  background: #3f8ce8;
+}
+.bi-toast .toast-icon {
+  font-size: 16px;
 }
 .bi-tooltip {
   max-width: 250px;

dist/bundle.js

@@ -18243,10 +18243,11 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         });
     },
 
-    _createBubble: function (direct, text, height) {
+    _createBubble: function (direct, text, level, height) {
         return BI.createWidget({
             type: "bi.bubble",
             text: text,
+            level: level,
             height: height || 35,
             direction: direct
         });
@@ -18325,11 +18326,12 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         opt || (opt = {});
         var container = opt.container || context;
         var offsetStyle = opt.offsetStyle || {};
+        var level = opt.level || "error";
         if (!this.storeBubbles[name]) {
             this.storeBubbles[name] = {};
         }
         if (!this.storeBubbles[name]["top"]) {
-            this.storeBubbles[name]["top"] = this._createBubble("top", text);
+            this.storeBubbles[name]["top"] = this._createBubble("top", text, level);
         }
         BI.createWidget({
             type: "bi.absolute",
@@ -18344,7 +18346,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         this.get(name).invisible();
         if (!$.isTopSpaceEnough(context, this.get(name))) {
             if (!this.storeBubbles[name]["left"]) {
-                this.storeBubbles[name]["left"] = this._createBubble("left", text, 30);
+                this.storeBubbles[name]["left"] = this._createBubble("left", text, level, 30);
             }
             BI.createWidget({
                 type: "bi.absolute",
@@ -18359,7 +18361,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
             this.get(name).invisible();
             if (!$.isLeftSpaceEnough(context, this.get(name))) {
                 if (!this.storeBubbles[name]["right"]) {
-                    this.storeBubbles[name]["right"] = this._createBubble("right", text, 30);
+                    this.storeBubbles[name]["right"] = this._createBubble("right", text, level, 30);
                 }
                 BI.createWidget({
                     type: "bi.absolute",
@@ -18374,7 +18376,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
                 this.get(name).invisible();
                 if (!$.isRightSpaceEnough(context, this.get(name))) {
                     if (!this.storeBubbles[name]["bottom"]) {
-                        this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text);
+                        this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level);
                     }
                     BI.createWidget({
                         type: "bi.absolute",
@@ -40748,11 +40750,15 @@ $.extend(BI, {
             prompt: function (title, message, value, callback, min_width) {
                 // BI.Msg.prompt(title, message, value, callback, min_width);
             },
-            toast: function (message, level, context) {
+            toast: function (message, options, context) {
+                options = options || {};
                 context = context || $("body");
+                var level = options.level || "normal";
+                var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
                 var toast = BI.createWidget({
                     type: "bi.toast",
                     level: level,
+                    autoClose: autoClose,
                     text: message
                 });
                 BI.createWidget({
@@ -40761,16 +40767,12 @@ $.extend(BI, {
                     items: [{
                         el: toast,
                         left: "50%",
-                        top: 0
+                        top: 10
                     }]
                 });
-                if (toast.element.outerWidth() > context.outerWidth()) {
-                    toast.setWidth(context.width());
-                }
                 toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2});
-                toast.invisible();
                 toast.element.slideDown(500, function () {
-                    BI.delay(function () {
+                    autoClose && BI.delay(function () {
                         toast.element.slideUp(500, function () {
                             toast.destroy();
                         });
@@ -46346,6 +46348,7 @@ BI.Bubble = BI.inherit(BI.Tip, {
             extraCls: "bi-bubble",
             direction: "top",
             text: "",
+            level: "error",
             height: 35
         });
     },
@@ -46365,10 +46368,11 @@ BI.Bubble = BI.inherit(BI.Tip, {
     },
 
     _createBubbleText: function () {
+        var o = this.options;
         return (this.text = BI.createWidget({
             type: "bi.label",
-            cls: "bubble-text",
+            cls: "bubble-text" + (" bubble-" + o.level),
-            text: this.options.text,
+            text: o.text,
             hgap: 10,
             height: 30
         }));
@@ -46449,20 +46453,19 @@ BI.shortcut("bi.bubble", BI.Bubble);/**
 BI.Toast = BI.inherit(BI.Tip, {
     _const: {
         minWidth: 200,
-        hgap: 20
+        hgap: 10
     },
 
     _defaultConfig: function () {
         return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), {
             extraCls: "bi-toast",
             text: "",
-            level: "success", // success或warning
+            level: "success" // success或warning
-            height: 30
         });
     },
     _init: function () {
         BI.Toast.superclass._init.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.css({
             minWidth: this._const.minWidth + "px"
         });
@@ -46474,19 +46477,59 @@ BI.Toast = BI.inherit(BI.Tip, {
         };
         this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn});
 
+        var cls = "close-font";
+        switch(o.level) {
+            case "success":
+                break;
+            case "error":
+                break;
+            case "warning":
+                break;
+            case "normal":
+            default:
+                break;
+        }
+
+        var items = [{
+            type: "bi.center_adapt",
+            cls: cls + " toast-icon",
+            items: [{
+                type: "bi.icon"
+            }],
+            width: 36
+        }, {
+            el: {
+                type: "bi.label",
+                whiteSpace: "normal",
+                text: o.text,
+                textAlign: "left"
+            },
+            rgap: o.autoClose ? this._const.hgap : 0
+        }];
+
+        var columnSize = [36, ""];
+
+        if(o.autoClose === false) {
+            items.push({
+                type: "bi.icon_button",
+                cls: "close-font toast-icon",
+                handler: function () {
+                    self.destroy();
+                },
+                width: 36
+            });
+            columnSize.push(36);
+        }
+
         this.text = BI.createWidget({
-            type: "bi.label",
+            type: "bi.horizontal_adapt",
             element: this,
-            text: o.text,
+            items: items,
-            height: 30,
+            vgap: 5,
-            hgap: this._const.hgap
+            columnSize: columnSize
         });
     },
 
-    setWidth: function (width) {
-        this.element.width(width);
-    },
-
     setText: function (text) {
         this.text.setText(text);
     }

dist/core.js

@@ -18243,10 +18243,11 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         });
     },
 
-    _createBubble: function (direct, text, height) {
+    _createBubble: function (direct, text, level, height) {
         return BI.createWidget({
             type: "bi.bubble",
             text: text,
+            level: level,
             height: height || 35,
             direction: direct
         });
@@ -18325,11 +18326,12 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         opt || (opt = {});
         var container = opt.container || context;
         var offsetStyle = opt.offsetStyle || {};
+        var level = opt.level || "error";
         if (!this.storeBubbles[name]) {
             this.storeBubbles[name] = {};
         }
         if (!this.storeBubbles[name]["top"]) {
-            this.storeBubbles[name]["top"] = this._createBubble("top", text);
+            this.storeBubbles[name]["top"] = this._createBubble("top", text, level);
         }
         BI.createWidget({
             type: "bi.absolute",
@@ -18344,7 +18346,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         this.get(name).invisible();
         if (!$.isTopSpaceEnough(context, this.get(name))) {
             if (!this.storeBubbles[name]["left"]) {
-                this.storeBubbles[name]["left"] = this._createBubble("left", text, 30);
+                this.storeBubbles[name]["left"] = this._createBubble("left", text, level, 30);
             }
             BI.createWidget({
                 type: "bi.absolute",
@@ -18359,7 +18361,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
             this.get(name).invisible();
             if (!$.isLeftSpaceEnough(context, this.get(name))) {
                 if (!this.storeBubbles[name]["right"]) {
-                    this.storeBubbles[name]["right"] = this._createBubble("right", text, 30);
+                    this.storeBubbles[name]["right"] = this._createBubble("right", text, level, 30);
                 }
                 BI.createWidget({
                     type: "bi.absolute",
@@ -18374,7 +18376,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
                 this.get(name).invisible();
                 if (!$.isRightSpaceEnough(context, this.get(name))) {
                     if (!this.storeBubbles[name]["bottom"]) {
-                        this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text);
+                        this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level);
                     }
                     BI.createWidget({
                         type: "bi.absolute",

dist/demo.js

@@ -1460,10 +1460,12 @@ BI.shortcut("demo.table_view", Demo.Func);Demo.Bubble = BI.inherit(BI.Widget, {
                         btns.push(_ref);
                     },
                     type: "bi.button",
-                    text: "bubble测试",
+                    text: "bubble测试(消息)",
                     height: 30,
                     handler: function () {
-                        BI.Bubbles.show("singleBubble1", "bubble测试", this);
+                        BI.Bubbles.show("singleBubble1", "bubble测试", this, {
+                            level: "common"
+                        });
                     }
                 }
             }, {
@@ -1472,11 +1474,12 @@ BI.shortcut("demo.table_view", Demo.Func);Demo.Bubble = BI.inherit(BI.Widget, {
                         btns.push(_ref);
                     },
                     type: "bi.button",
-                    text: "bubble测试(居中显示)",
+                    text: "bubble测试(成功)",
                     height: 30,
                     handler: function () {
                         BI.Bubbles.show("singleBubble2", "bubble测试", this, {
-                            offsetStyle: "center"
+                            offsetStyle: "center",
+                            level: "success"
                         });
                     }
                 }
@@ -1486,11 +1489,26 @@ BI.shortcut("demo.table_view", Demo.Func);Demo.Bubble = BI.inherit(BI.Widget, {
                         btns.push(_ref);
                     },
                     type: "bi.button",
-                    text: "bubble测试(右边显示)",
+                    text: "bubble测试(错误)",
                     height: 30,
                     handler: function () {
                         BI.Bubbles.show("singleBubble3", "bubble测试", this, {
-                            offsetStyle: "right"
+                            offsetStyle: "right",
+                            level: "error"
+                        });
+                    }
+                }
+            }, {
+                el: {
+                    ref: function (_ref) {
+                        btns.push(_ref);
+                    },
+                    type: "bi.button",
+                    text: "bubble测试(警告)",
+                    height: 30,
+                    handler: function () {
+                        BI.Bubbles.show("singleBubble4", "bubble测试", this, {
+                            level: "warning"
                         });
                     }
                 }
@@ -1551,7 +1569,7 @@ BI.shortcut("demo.title", Demo.Title);Demo.Toast = BI.inherit(BI.Widget, {
             {
                 el: {
                     type: "bi.button",
-                    text: "简单Toast测试",
+                    text: "简单Toast测试(success)",
                     height: 30,
                     handler: function () {
                         BI.Msg.toast("这是一条简单的数据");
@@ -1560,29 +1578,45 @@ BI.shortcut("demo.title", Demo.Title);Demo.Toast = BI.inherit(BI.Widget, {
             }, {
                 el: {
                     type: "bi.button",
-                    text: "很长的Toast测试",
+                    text: "很长的Toast测试(normal)",
                     height: 30,
                     handler: function () {
-                        BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据");
+                        BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", {
+                            level: "normal"
+                        });
                     }
                 }
             }, {
                 el: {
                     type: "bi.button",
-                    text: "非常长的Toast测试",
+                    text: "非常长的Toast测试(warning)",
                     height: 30,
                     handler: function () {
-                        BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据");
+                        BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", {
+                            level: "warning"
+                        });
                     }
                 }
             }, {
                 el: {
                     type: "bi.button",
-                    text: "错误提示Toast测试",
+                    text: "错误提示Toast测试(error)",
-                    level: "warning",
                     height: 30,
                     handler: function () {
-                        BI.Msg.toast("错误提示Toast测试", "warning");
+                        BI.Msg.toast("错误提示Toast测试", {
+                            level: "error"
+                        });
+                    }
+                }
+            }, {
+                el: {
+                    type: "bi.button",
+                    text: "错误提示Toast测试(error), 此toast不会自动消失",
+                    height: 30,
+                    handler: function () {
+                        BI.Msg.toast("错误提示Toast测试", {
+                            autoClose: false
+                        });
                     }
                 }
             }

dist/fineui.css

@@ -3230,9 +3230,23 @@ body .bi-button.button-ignore.disabled.clear:active,
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
+}
+.bi-bubble .bubble-error {
   background: #ffecec;
   color: #ff4949;
 }
+.bi-bubble .bubble-common {
+  background: #eaf2fd;
+  color: #3685f2;
+}
+.bi-bubble .bubble-success {
+  background: #e1f4e7;
+  color: #5cb75d;
+}
+.bi-bubble .bubble-warning {
+  background: #feeed7;
+  color: #faaa39;
+}
 
 .bi-tip {
   position: fixed !important;
@@ -3240,17 +3254,27 @@ body .bi-button.button-ignore.disabled.clear:active,
 
 .bi-toast {
   font-size: 14px;
+  color: #ffffff;
+  max-width: 400px;
+  min-width: 150px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
 .bi-toast.toast-success {
-  background: #e1f4e7;
+  background: #58cc7d;
-  color: #5cb75d;
 }
 .bi-toast.toast-warning {
-  background: #ffecec;
+  background: #faaa39;
-  color: #ff4949;
+}
+.bi-toast.toast-error {
+  background: #ff4949;
+}
+.bi-toast.toast-normal {
+  background: #3f8ce8;
+}
+.bi-toast .toast-icon {
+  font-size: 16px;
 }
 
 .bi-tooltip {
@@ -3272,17 +3296,27 @@ body .bi-button.button-ignore.disabled.clear:active,
 }
 .bi-toast {
   font-size: 14px;
+  color: #ffffff;
+  max-width: 400px;
+  min-width: 150px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
 .bi-toast.toast-success {
-  background: #e1f4e7;
+  background: #58cc7d;
-  color: #5cb75d;
 }
 .bi-toast.toast-warning {
-  background: #ffecec;
+  background: #faaa39;
-  color: #ff4949;
+}
+.bi-toast.toast-error {
+  background: #ff4949;
+}
+.bi-toast.toast-normal {
+  background: #3f8ce8;
+}
+.bi-toast .toast-icon {
+  font-size: 16px;
 }
 .bi-tooltip {
   max-width: 250px;

dist/fineui.js

@@ -18444,10 +18444,11 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         });
     },
 
-    _createBubble: function (direct, text, height) {
+    _createBubble: function (direct, text, level, height) {
         return BI.createWidget({
             type: "bi.bubble",
             text: text,
+            level: level,
             height: height || 35,
             direction: direct
         });
@@ -18526,11 +18527,12 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         opt || (opt = {});
         var container = opt.container || context;
         var offsetStyle = opt.offsetStyle || {};
+        var level = opt.level || "error";
         if (!this.storeBubbles[name]) {
             this.storeBubbles[name] = {};
         }
         if (!this.storeBubbles[name]["top"]) {
-            this.storeBubbles[name]["top"] = this._createBubble("top", text);
+            this.storeBubbles[name]["top"] = this._createBubble("top", text, level);
         }
         BI.createWidget({
             type: "bi.absolute",
@@ -18545,7 +18547,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         this.get(name).invisible();
         if (!$.isTopSpaceEnough(context, this.get(name))) {
             if (!this.storeBubbles[name]["left"]) {
-                this.storeBubbles[name]["left"] = this._createBubble("left", text, 30);
+                this.storeBubbles[name]["left"] = this._createBubble("left", text, level, 30);
             }
             BI.createWidget({
                 type: "bi.absolute",
@@ -18560,7 +18562,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
             this.get(name).invisible();
             if (!$.isLeftSpaceEnough(context, this.get(name))) {
                 if (!this.storeBubbles[name]["right"]) {
-                    this.storeBubbles[name]["right"] = this._createBubble("right", text, 30);
+                    this.storeBubbles[name]["right"] = this._createBubble("right", text, level, 30);
                 }
                 BI.createWidget({
                     type: "bi.absolute",
@@ -18575,7 +18577,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
                 this.get(name).invisible();
                 if (!$.isRightSpaceEnough(context, this.get(name))) {
                     if (!this.storeBubbles[name]["bottom"]) {
-                        this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text);
+                        this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level);
                     }
                     BI.createWidget({
                         type: "bi.absolute",
@@ -42512,11 +42514,15 @@ $.extend(BI, {
             prompt: function (title, message, value, callback, min_width) {
                 // BI.Msg.prompt(title, message, value, callback, min_width);
             },
-            toast: function (message, level, context) {
+            toast: function (message, options, context) {
+                options = options || {};
                 context = context || $("body");
+                var level = options.level || "normal";
+                var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
                 var toast = BI.createWidget({
                     type: "bi.toast",
                     level: level,
+                    autoClose: autoClose,
                     text: message
                 });
                 BI.createWidget({
@@ -42525,16 +42531,12 @@ $.extend(BI, {
                     items: [{
                         el: toast,
                         left: "50%",
-                        top: 0
+                        top: 10
                     }]
                 });
-                if (toast.element.outerWidth() > context.outerWidth()) {
-                    toast.setWidth(context.width());
-                }
                 toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2});
-                toast.invisible();
                 toast.element.slideDown(500, function () {
-                    BI.delay(function () {
+                    autoClose && BI.delay(function () {
                         toast.element.slideUp(500, function () {
                             toast.destroy();
                         });
@@ -48110,6 +48112,7 @@ BI.Bubble = BI.inherit(BI.Tip, {
             extraCls: "bi-bubble",
             direction: "top",
             text: "",
+            level: "error",
             height: 35
         });
     },
@@ -48129,10 +48132,11 @@ BI.Bubble = BI.inherit(BI.Tip, {
     },
 
     _createBubbleText: function () {
+        var o = this.options;
         return (this.text = BI.createWidget({
             type: "bi.label",
-            cls: "bubble-text",
+            cls: "bubble-text" + (" bubble-" + o.level),
-            text: this.options.text,
+            text: o.text,
             hgap: 10,
             height: 30
         }));
@@ -48213,20 +48217,19 @@ BI.shortcut("bi.bubble", BI.Bubble);/**
 BI.Toast = BI.inherit(BI.Tip, {
     _const: {
         minWidth: 200,
-        hgap: 20
+        hgap: 10
     },
 
     _defaultConfig: function () {
         return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), {
             extraCls: "bi-toast",
             text: "",
-            level: "success", // success或warning
+            level: "success" // success或warning
-            height: 30
         });
     },
     _init: function () {
         BI.Toast.superclass._init.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.css({
             minWidth: this._const.minWidth + "px"
         });
@@ -48238,19 +48241,59 @@ BI.Toast = BI.inherit(BI.Tip, {
         };
         this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn});
 
+        var cls = "close-font";
+        switch(o.level) {
+            case "success":
+                break;
+            case "error":
+                break;
+            case "warning":
+                break;
+            case "normal":
+            default:
+                break;
+        }
+
+        var items = [{
+            type: "bi.center_adapt",
+            cls: cls + " toast-icon",
+            items: [{
+                type: "bi.icon"
+            }],
+            width: 36
+        }, {
+            el: {
+                type: "bi.label",
+                whiteSpace: "normal",
+                text: o.text,
+                textAlign: "left"
+            },
+            rgap: o.autoClose ? this._const.hgap : 0
+        }];
+
+        var columnSize = [36, ""];
+
+        if(o.autoClose === false) {
+            items.push({
+                type: "bi.icon_button",
+                cls: "close-font toast-icon",
+                handler: function () {
+                    self.destroy();
+                },
+                width: 36
+            });
+            columnSize.push(36);
+        }
+
         this.text = BI.createWidget({
-            type: "bi.label",
+            type: "bi.horizontal_adapt",
             element: this,
-            text: o.text,
+            items: items,
-            height: 30,
+            vgap: 5,
-            hgap: this._const.hgap
+            columnSize: columnSize
         });
     },
 
-    setWidth: function (width) {
-        this.element.width(width);
-    },
-
     setText: function (text) {
         this.text.setText(text);
     }

src/base/foundation/message.js

@@ -18,11 +18,15 @@ $.extend(BI, {
             prompt: function (title, message, value, callback, min_width) {
                 // BI.Msg.prompt(title, message, value, callback, min_width);
             },
-            toast: function (message, level, context) {
+            toast: function (message, options, context) {
+                options = options || {};
                 context = context || $("body");
+                var level = options.level || "normal";
+                var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
                 var toast = BI.createWidget({
                     type: "bi.toast",
                     level: level,
+                    autoClose: autoClose,
                     text: message
                 });
                 BI.createWidget({
@@ -31,16 +35,12 @@ $.extend(BI, {
                     items: [{
                         el: toast,
                         left: "50%",
-                        top: 0
+                        top: 10
                     }]
                 });
-                if (toast.element.outerWidth() > context.outerWidth()) {
-                    toast.setWidth(context.width());
-                }
                 toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2});
-                toast.invisible();
                 toast.element.slideDown(500, function () {
-                    BI.delay(function () {
+                    autoClose && BI.delay(function () {
                         toast.element.slideUp(500, function () {
                             toast.destroy();
                         });

src/base/single/tip/tip.bubble.js

@@ -11,6 +11,7 @@ BI.Bubble = BI.inherit(BI.Tip, {
             extraCls: "bi-bubble",
             direction: "top",
             text: "",
+            level: "error",
             height: 35
         });
     },
@@ -30,10 +31,11 @@ BI.Bubble = BI.inherit(BI.Tip, {
     },
 
     _createBubbleText: function () {
+        var o = this.options;
         return (this.text = BI.createWidget({
             type: "bi.label",
-            cls: "bubble-text",
+            cls: "bubble-text" + (" bubble-" + o.level),
-            text: this.options.text,
+            text: o.text,
             hgap: 10,
             height: 30
         }));

src/base/single/tip/tip.toast.js

@@ -8,20 +8,19 @@
 BI.Toast = BI.inherit(BI.Tip, {
     _const: {
         minWidth: 200,
-        hgap: 20
+        hgap: 10
     },
 
     _defaultConfig: function () {
         return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), {
             extraCls: "bi-toast",
             text: "",
-            level: "success", // success或warning
+            level: "success" // success或warning
-            height: 30
         });
     },
     _init: function () {
         BI.Toast.superclass._init.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.css({
             minWidth: this._const.minWidth + "px"
         });
@@ -33,19 +32,59 @@ BI.Toast = BI.inherit(BI.Tip, {
         };
         this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn});
 
+        var cls = "close-font";
+        switch(o.level) {
+            case "success":
+                break;
+            case "error":
+                break;
+            case "warning":
+                break;
+            case "normal":
+            default:
+                break;
+        }
+
+        var items = [{
+            type: "bi.center_adapt",
+            cls: cls + " toast-icon",
+            items: [{
+                type: "bi.icon"
+            }],
+            width: 36
+        }, {
+            el: {
+                type: "bi.label",
+                whiteSpace: "normal",
+                text: o.text,
+                textAlign: "left"
+            },
+            rgap: o.autoClose ? this._const.hgap : 0
+        }];
+
+        var columnSize = [36, ""];
+
+        if(o.autoClose === false) {
+            items.push({
+                type: "bi.icon_button",
+                cls: "close-font toast-icon",
+                handler: function () {
+                    self.destroy();
+                },
+                width: 36
+            });
+            columnSize.push(36);
+        }
+
         this.text = BI.createWidget({
-            type: "bi.label",
+            type: "bi.horizontal_adapt",
             element: this,
-            text: o.text,
+            items: items,
-            height: 30,
+            vgap: 5,
-            hgap: this._const.hgap
+            columnSize: columnSize
         });
     },
 
-    setWidth: function (width) {
-        this.element.width(width);
-    },
-
     setText: function (text) {
         this.text.setText(text);
     }

src/core/controller/controller.bubbles.js

@@ -28,10 +28,11 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         });
     },
 
-    _createBubble: function (direct, text, height) {
+    _createBubble: function (direct, text, level, height) {
         return BI.createWidget({
             type: "bi.bubble",
             text: text,
+            level: level,
             height: height || 35,
             direction: direct
         });
@@ -110,11 +111,12 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         opt || (opt = {});
         var container = opt.container || context;
         var offsetStyle = opt.offsetStyle || {};
+        var level = opt.level || "error";
         if (!this.storeBubbles[name]) {
             this.storeBubbles[name] = {};
         }
         if (!this.storeBubbles[name]["top"]) {
-            this.storeBubbles[name]["top"] = this._createBubble("top", text);
+            this.storeBubbles[name]["top"] = this._createBubble("top", text, level);
         }
         BI.createWidget({
             type: "bi.absolute",
@@ -129,7 +131,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
         this.get(name).invisible();
         if (!$.isTopSpaceEnough(context, this.get(name))) {
             if (!this.storeBubbles[name]["left"]) {
-                this.storeBubbles[name]["left"] = this._createBubble("left", text, 30);
+                this.storeBubbles[name]["left"] = this._createBubble("left", text, level, 30);
             }
             BI.createWidget({
                 type: "bi.absolute",
@@ -144,7 +146,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
             this.get(name).invisible();
             if (!$.isLeftSpaceEnough(context, this.get(name))) {
                 if (!this.storeBubbles[name]["right"]) {
-                    this.storeBubbles[name]["right"] = this._createBubble("right", text, 30);
+                    this.storeBubbles[name]["right"] = this._createBubble("right", text, level, 30);
                 }
                 BI.createWidget({
                     type: "bi.absolute",
@@ -159,7 +161,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
                 this.get(name).invisible();
                 if (!$.isRightSpaceEnough(context, this.get(name))) {
                     if (!this.storeBubbles[name]["bottom"]) {
-                        this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text);
+                        this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level);
                     }
                     BI.createWidget({
                         type: "bi.absolute",

src/css/base/single/tip/tip.css

@@ -5,9 +5,23 @@
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
+}
+.bi-bubble .bubble-error {
   background: #ffecec;
   color: #ff4949;
 }
+.bi-bubble .bubble-common {
+  background: #eaf2fd;
+  color: #3685f2;
+}
+.bi-bubble .bubble-success {
+  background: #e1f4e7;
+  color: #5cb75d;
+}
+.bi-bubble .bubble-warning {
+  background: #feeed7;
+  color: #faaa39;
+}
 
 .bi-tip {
   position: fixed !important;
@@ -15,17 +29,27 @@
 
 .bi-toast {
   font-size: 14px;
+  color: #ffffff;
+  max-width: 400px;
+  min-width: 150px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
 .bi-toast.toast-success {
-  background: #e1f4e7;
+  background: #58cc7d;
-  color: #5cb75d;
 }
 .bi-toast.toast-warning {
-  background: #ffecec;
+  background: #faaa39;
-  color: #ff4949;
+}
+.bi-toast.toast-error {
+  background: #ff4949;
+}
+.bi-toast.toast-normal {
+  background: #3f8ce8;
+}
+.bi-toast .toast-icon {
+  font-size: 16px;
 }
 
 .bi-tooltip {

src/css/base/single/tip/tip.toast.css

@@ -1,14 +1,24 @@
 .bi-toast {
   font-size: 14px;
+  color: #ffffff;
+  max-width: 400px;
+  min-width: 150px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
 .bi-toast.toast-success {
-  background: #e1f4e7;
+  background: #58cc7d;
-  color: #5cb75d;
 }
 .bi-toast.toast-warning {
-  background: #ffecec;
+  background: #faaa39;
-  color: #ff4949;
+}
+.bi-toast.toast-error {
+  background: #ff4949;
+}
+.bi-toast.toast-normal {
+  background: #3f8ce8;
+}
+.bi-toast .toast-icon {
+  font-size: 16px;
 }

src/less/base/single/tip/tip.bubble.less

@@ -4,7 +4,25 @@
   font-size: @font-size-14;
   & .bubble-text{
     .border-radius(2px);
+  }
+
+  & .bubble-error{
     background: @color-bi-background-light-failure;
     color: @color-bi-text-failure;
   }
+
+  & .bubble-common{
+    background: @color-bi-background-light-highlight;
+    color: @color-bi-text-highlight;
+  }
+
+  & .bubble-success{
+    background: @color-bi-background-light-success;
+    color: @color-bi-text-success;
+  }
+
+  & .bubble-warning{
+    background: @color-bi-background-light-warning;
+    color: @color-bi-text-redmark;
+  }
 }

src/less/base/single/tip/tip.toast.less

@@ -2,13 +2,23 @@
 
 .bi-toast{
   font-size: @font-size-14;
+  color: @color-bi-text;
+  max-width: 400px;
+  min-width: 150px;
   .border-radius(2px);
   &.toast-success{
-    background: @color-bi-background-light-success;
+    background: @color-bi-background-success;
-    color: @color-bi-text-success;
   }
   &.toast-warning{
-    background: @color-bi-background-light-failure;
+    background: @color-bi-background-warning;
-    color: @color-bi-text-failure;
+  }
+  &.toast-error{
+    background: @color-bi-background-failure;
+  }
+  &.toast-normal{
+    background: @color-bi-background-highlight;
+  }
+  & .toast-icon{
+    font-size: 16px;
   }
 }

src/less/lib/colors.less

@@ -54,6 +54,8 @@
 @color-bi-background-light-failure: @background-color-light-negative;
 //警示背景色
 @color-bi-background-warning: @background-color-warning;
+//警示背景色(浅)
+@color-bi-background-light-warning: @background-color-light-warning;
 //背景提亮色
 @color-bi-background-highlight: @background-color-highlight;
 //背景提亮色(浅)

src/less/lib/constant.less

@@ -43,6 +43,7 @@
 
 @background-color-negative: #ff4949;
 @background-color-light-negative: #ffecec;
+@background-color-light-warning: #feeed7;
 @background-color-warning: #faaa39;
 
 @background-color-dark-success: #58cc7d;