布局

bi/base.css

@@ -6,6 +6,9 @@
   -webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
   -moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
 }
+.bi-color-chooser-trigger .color-chooser-trigger-content.none-color {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>');
+}
 .bi-color-picker-button .color-picker-button-mask {
   border: 1px solid #1a1a1a;
 }

bi/case.js

@@ -3949,7 +3949,7 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
         BI.ColorChooserTrigger.superclass._init.apply(this, arguments);
         this.colorContainer = BI.createWidget({
             type: "bi.layout",
-            cls: "bi-card"
+            cls: "bi-card color-chooser-trigger-content"
         });
 
         var down = BI.createWidget({
@@ -3982,7 +3982,11 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
 
     setValue: function (color) {
         BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments);
-        this.colorContainer.element.css("background-color", color);
+        if (color === "") {
+            this.colorContainer.element.css("background-color", "").addClass("none-color")
+        } else {
+            this.colorContainer.element.css({"background-color": color}).removeClass("none-color");
+        }
     }
 });
 BI.ColorChooserTrigger.EVENT_CHANGE = "ColorChooserTrigger.EVENT_CHANGE";

bi/widget.js

@@ -983,9 +983,9 @@ BI.Arrangement = BI.inherit(BI.Widget, {
             case BI.Arrangement.LAYOUT_TYPE.FREE:
                 return true;
             case BI.Arrangement.LAYOUT_TYPE.GRID:
-                // if (this._isRegionOverlay()) {
-                //     return false;
-                // }
+                if (this._isRegionOverlay()) {
+                    return false;
+                }
         }
         return true;
     },
@@ -1416,9 +1416,10 @@ BI.Arrangement = BI.inherit(BI.Widget, {
     },
 
     _start: function () {
-        this.arrangement.setVisible(true);
         if (this.options.layoutType === BI.Arrangement.LAYOUT_TYPE.GRID) {
             this.block.setVisible(true);
+        } else {
+            this.arrangement.setVisible(true);
         }
     },
 

docs/base.css

@@ -6,6 +6,9 @@
   -webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
   -moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
 }
+.bi-color-chooser-trigger .color-chooser-trigger-content.none-color {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>');
+}
 .bi-color-picker-button .color-picker-button-mask {
   border: 1px solid #1a1a1a;
 }

docs/case.js

@@ -3949,7 +3949,7 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
         BI.ColorChooserTrigger.superclass._init.apply(this, arguments);
         this.colorContainer = BI.createWidget({
             type: "bi.layout",
-            cls: "bi-card"
+            cls: "bi-card color-chooser-trigger-content"
         });
 
         var down = BI.createWidget({
@@ -3982,7 +3982,11 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
 
     setValue: function (color) {
         BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments);
-        this.colorContainer.element.css("background-color", color);
+        if (color === "") {
+            this.colorContainer.element.css("background-color", "").addClass("none-color")
+        } else {
+            this.colorContainer.element.css({"background-color": color}).removeClass("none-color");
+        }
     }
 });
 BI.ColorChooserTrigger.EVENT_CHANGE = "ColorChooserTrigger.EVENT_CHANGE";

docs/widget.js

@@ -983,9 +983,9 @@ BI.Arrangement = BI.inherit(BI.Widget, {
             case BI.Arrangement.LAYOUT_TYPE.FREE:
                 return true;
             case BI.Arrangement.LAYOUT_TYPE.GRID:
-                // if (this._isRegionOverlay()) {
-                //     return false;
-                // }
+                if (this._isRegionOverlay()) {
+                    return false;
+                }
         }
         return true;
     },
@@ -1416,9 +1416,10 @@ BI.Arrangement = BI.inherit(BI.Widget, {
     },
 
     _start: function () {
-        this.arrangement.setVisible(true);
         if (this.options.layoutType === BI.Arrangement.LAYOUT_TYPE.GRID) {
             this.block.setVisible(true);
+        } else {
+            this.arrangement.setVisible(true);
         }
     },
 

src/case/colorchooser/colorchooser.trigger.js

@@ -19,7 +19,7 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
         BI.ColorChooserTrigger.superclass._init.apply(this, arguments);
         this.colorContainer = BI.createWidget({
             type: "bi.layout",
-            cls: "bi-card"
+            cls: "bi-card color-chooser-trigger-content"
         });
 
         var down = BI.createWidget({
@@ -52,7 +52,11 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
 
     setValue: function (color) {
         BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments);
-        this.colorContainer.element.css("background-color", color);
+        if (color === "") {
+            this.colorContainer.element.css("background-color", "").addClass("none-color")
+        } else {
+            this.colorContainer.element.css({"background-color": color}).removeClass("none-color");
+        }
     }
 });
 BI.ColorChooserTrigger.EVENT_CHANGE = "ColorChooserTrigger.EVENT_CHANGE";

src/css/base/colorchooser/colorchooser.trigger.css

@@ -6,3 +6,6 @@
   -webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
   -moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
 }
+.bi-color-chooser-trigger .color-chooser-trigger-content.none-color {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>');
+}

src/less/base/colorchooser/colorchooser.trigger.less

@@ -1,6 +1,11 @@
 @import "../../bibase";
 
-.bi-color-chooser-trigger{
+.bi-color-chooser-trigger {
+  & .color-chooser-trigger-content {
+    &.none-color {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>')
+    }
+  }
   .border-radius(2px);
-  .box-shadow(0px,0px,2px,1px, @color-bi-background-dark, inset);
+  .box-shadow(0px, 0px, 2px, 1px, @color-bi-background-dark, inset);
 }

src/widget/arrangement/arrangement.js

@@ -189,9 +189,9 @@ BI.Arrangement = BI.inherit(BI.Widget, {
             case BI.Arrangement.LAYOUT_TYPE.FREE:
                 return true;
             case BI.Arrangement.LAYOUT_TYPE.GRID:
-                // if (this._isRegionOverlay()) {
-                //     return false;
-                // }
+                if (this._isRegionOverlay()) {
+                    return false;
+                }
         }
         return true;
     },
@@ -622,9 +622,10 @@ BI.Arrangement = BI.inherit(BI.Widget, {
     },
 
     _start: function () {
-        this.arrangement.setVisible(true);
         if (this.options.layoutType === BI.Arrangement.LAYOUT_TYPE.GRID) {
             this.block.setVisible(true);
+        } else {
+            this.arrangement.setVisible(true);
         }
     },