Pull request #2420: KERNEL-9882 树线型和节点高度处理

Merge in VISUAL/fineui from ~WINDY/fui:master to master

* commit 'a3c1865e324727dbeaa9d92525283acf49bb122a':
  图片
  KERNEL-9882 树线型和节点高度处理

src/case/button/node/node.first.plus.js

@@ -23,7 +23,9 @@ BI.FirstPlusGroupNode = BI.inherit(BI.NodeButton, {
         var self = this, o = this.options;
         this.checkbox = BI.createWidget({
             type: "bi.first_tree_node_checkbox",
-            stopPropagation: true
+            stopPropagation: true,
+            iconHeight: o.height,
+            iconWidth: o.height
         });
         this.text = BI.createWidget({
             type: "bi.label",

src/case/button/node/node.last.plus.js

@@ -23,7 +23,9 @@ BI.LastPlusGroupNode = BI.inherit(BI.NodeButton, {
         var self = this, o = this.options;
         this.checkbox = BI.createWidget({
             type: "bi.last_tree_node_checkbox",
-            stopPropagation: true
+            stopPropagation: true,
+            iconHeight: o.height,
+            iconWidth: o.height
         });
         this.text = BI.createWidget({
             type: "bi.label",

src/case/button/node/node.mid.plus.js

@@ -23,7 +23,9 @@ BI.MidPlusGroupNode = BI.inherit(BI.NodeButton, {
         var self = this, o = this.options;
         this.checkbox = BI.createWidget({
             type: "bi.mid_tree_node_checkbox",
-            stopPropagation: true
+            stopPropagation: true,
+            iconHeight: o.height,
+            iconWidth: o.height
         });
         this.text = BI.createWidget({
             type: "bi.label",
@@ -48,7 +50,7 @@ BI.MidPlusGroupNode = BI.inherit(BI.NodeButton, {
         });
         var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
         var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, {
-            width: 24,
+            width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
             el: this.checkbox
         }, this.text);
         BI.createWidget(BI.extend({

src/case/button/node/node.plus.js

@@ -22,7 +22,9 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
         BI.PlusGroupNode.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         this.checkbox = BI.createWidget({
-            type: "bi.tree_node_checkbox"
+            type: "bi.tree_node_checkbox",
+            iconHeight: o.height,
+            iconWidth: o.height
         });
         this.text = BI.createWidget({
             type: "bi.label",

src/case/button/treeitem/item.first.treeleaf.js

@@ -28,19 +28,19 @@ BI.FirstTreeLeafItem = BI.inherit(BI.BasicButton, {
         });
         var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
         var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, ((o.layer === 0) ? "" : {
-            width: 12,
+            width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
             el: {
                 type: "bi.layout",
-                cls: (o.pNode && o.pNode.isLastNode) ? "" : "base-line-conn-background",
-                width: 12,
+                cls: (o.pNode && o.pNode.isLastNode) ? "" : this._getBaseLineCls(),
+                width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
                 height: o.height
             }
         }), {
-            width: 24,
+            width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             el: {
                 type: "bi.layout",
-                cls: "first-line-conn-background",
-                width: 24,
+                cls: this._getFirstLineCls(),
+                width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
                 height: o.height
             }
         }, {
@@ -53,6 +53,24 @@ BI.FirstTreeLeafItem = BI.inherit(BI.BasicButton, {
         }))));
     },
 
+    _getBaseLineCls: function () {
+        switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
+            case "solid":
+                return "base-solid-line-conn-background";
+            default:
+                return "base-line-conn-background";
+        }
+    },
+
+    _getFirstLineCls: function () {
+        switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
+            case "solid":
+                return "first-solid-line-conn-background";
+            default:
+                return "first-line-conn-background";
+        }
+    },
+
     doRedMark: function () {
         this.text.doRedMark.apply(this.text, arguments);
     },

src/case/button/treeitem/item.last.treeleaf.js

@@ -28,19 +28,19 @@ BI.LastTreeLeafItem = BI.inherit(BI.BasicButton, {
         });
         var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
         var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, ((o.layer === 0) ? "" : {
-            width: 12,
+            width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
             el: {
                 type: "bi.layout",
-                cls: (o.pNode && o.pNode.isLastNode) ? "" : "base-line-conn-background",
-                width: 12,
+                cls: (o.pNode && o.pNode.isLastNode) ? "" : this._getBaseLineCls(),
+                width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
                 height: o.height
             }
         }), {
-            width: 24,
+            width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             el: {
                 type: "bi.layout",
-                cls: "last-line-conn-background",
-                width: 24,
+                cls: this._getLastLineCls(),
+                width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
                 height: o.height
             }
         }, {
@@ -53,6 +53,24 @@ BI.LastTreeLeafItem = BI.inherit(BI.BasicButton, {
         }))));
     },
 
+    _getBaseLineCls: function () {
+        switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
+            case "solid":
+                return "base-solid-line-conn-background";
+            default:
+                return "base-line-conn-background";
+        }
+    },
+
+    _getLastLineCls: function () {
+        switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
+            case "solid":
+                return "last-solid-line-conn-background";
+            default:
+                return "last-line-conn-background";
+        }
+    },
+
     doRedMark: function () {
         this.text.doRedMark.apply(this.text, arguments);
     },

src/case/button/treeitem/item.mid.treeleaf.js

@@ -28,19 +28,19 @@ BI.MidTreeLeafItem = BI.inherit(BI.BasicButton, {
         });
         var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
         var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, ((o.layer === 0) ? "" : {
-            width: 12,
+            width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
             el: {
                 type: "bi.layout",
-                cls: (o.pNode && o.pNode.isLastNode) ? "" : "base-line-conn-background",
-                width: 12,
+                cls: (o.pNode && o.pNode.isLastNode) ? "" : this._getBaseLineCls(),
+                width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
                 height: o.height
             }
         }), {
-            width: 24,
+            width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             el: {
                 type: "bi.layout",
-                cls: "mid-line-conn-background",
-                width: 24,
+                cls: this._getMidLineCls(),
+                width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
                 height: o.height
             }
         }, {
@@ -53,6 +53,24 @@ BI.MidTreeLeafItem = BI.inherit(BI.BasicButton, {
         }))));
     },
 
+    _getBaseLineCls: function () {
+        switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
+            case "solid":
+                return "base-solid-line-conn-background";
+            default:
+                return "base-line-conn-background";
+        }
+    },
+
+    _getMidLineCls: function () {
+        switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
+            case "solid":
+                return "mid-solid-line-conn-background";
+            default:
+                return "mid-line-conn-background";
+        }
+    },
+
     doRedMark: function () {
         this.text.doRedMark.apply(this.text, arguments);
     },

src/case/button/treeitem/item.root.treeleaf.js

@@ -31,10 +31,10 @@ BI.RootTreeLeafItem = BI.inherit(BI.BasicButton, {
 
         var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
         var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, {
-            width: 24,
+            width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             el: {
                 type: "bi.layout",
-                width: 24,
+                width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
                 height: o.height
             }
         }, {

src/case/checkbox/check.first.treenode.js

@@ -6,18 +6,27 @@
 BI.FirstTreeNodeCheckbox = BI.inherit(BI.IconButton, {
     _defaultConfig: function () {
         return BI.extend( BI.FirstTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
-            extraCls: "tree-collapse-icon-type2",
+            extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type2" : "tree-collapse-icon-type2",
             iconWidth: 24,
             iconHeight: 24
         });
     },
 
+    getLineCls: function () {
+        switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
+            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) {
-            this.element.addClass("tree-expand-icon-type2");
+            this.element.addClass(this.getLineCls());
         } else {
-            this.element.removeClass("tree-expand-icon-type2");
+            this.element.removeClass(this.getLineCls());
         }
     }
 });

src/case/checkbox/check.last.treenode.js

@@ -6,18 +6,27 @@
 BI.LastTreeNodeCheckbox = BI.inherit(BI.IconButton, {
     _defaultConfig: function () {
         return BI.extend(BI.LastTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
-            extraCls: "tree-collapse-icon-type4",
+            extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type4" : "tree-collapse-icon-type4",
             iconWidth: 24,
             iconHeight: 24
         });
     },
 
+    getLineCls: function () {
+        switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
+            case "solid":
+                return "tree-solid-expand-icon-type4";
+            default:
+                return "tree-expand-icon-type4";
+        }
+    },
+
     setSelected: function (v) {
         BI.LastTreeNodeCheckbox.superclass.setSelected.apply(this, arguments);
         if (v === true) {
-            this.element.addClass("tree-expand-icon-type4");
+            this.element.addClass(this.getLineCls());
         } else {
-            this.element.removeClass("tree-expand-icon-type4");
+            this.element.removeClass(this.getLineCls());
         }
     }
 });

src/case/checkbox/check.mid.treenode.js

@@ -6,18 +6,27 @@
 BI.MidTreeNodeCheckbox = BI.inherit(BI.IconButton, {
     _defaultConfig: function () {
         return BI.extend( BI.MidTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
-            extraCls: "tree-collapse-icon-type3",
+            extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type3" : "tree-collapse-icon-type3",
             iconWidth: 24,
             iconHeight: 24
         });
     },
 
+    getLineCls: function () {
+        switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
+            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) {
-            this.element.addClass("tree-expand-icon-type3");
+            this.element.addClass(this.getLineCls());
         } else {
-            this.element.removeClass("tree-expand-icon-type3");
+            this.element.removeClass(this.getLineCls());
         }
     }
 });

src/case/checkbox/check.treenode.js

@@ -6,18 +6,27 @@
 BI.TreeNodeCheckbox = BI.inherit(BI.IconButton, {
     _defaultConfig: function () {
         return BI.extend( BI.TreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
-            extraCls: "tree-collapse-icon-type1",
+            extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type1" : "tree-collapse-icon-type1",
             iconWidth: 24,
             iconHeight: 24
         });
     },
 
+    getLineCls: function () {
+        switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
+            case "solid":
+                return "tree-solid-collapse-icon-type1";
+            default:
+                return "tree-collapse-icon-type1";
+        }
+    },
+
     setSelected: function (v) {
         BI.TreeNodeCheckbox.superclass.setSelected.apply(this, arguments);
         if(v) {
-            this.element.addClass("tree-expand-icon-type1");
+            this.element.addClass(this.getLineCls());
         } else {
-            this.element.removeClass("tree-expand-icon-type1");
+            this.element.removeClass(this.getLineCls());
         }
     }
 });

src/case/combo/bubblecombo/popup.bubble.js

@@ -60,7 +60,7 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, {
         });
         return BI.createWidget({
             type: "bi.center",
-            height: 44,
+            height: 48,
             rgap: 15,
             items: [{
                 type: "bi.right_vertical_adapt",
@@ -84,7 +84,7 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, {
             }]
         });
 
-        button.element.css("min-height", o.minHeight - 44);
+        button.element.css("min-height", o.minHeight - 48);
 
         return button;
     }

src/case/tree/tree.level.js

@@ -26,7 +26,7 @@ BI.LevelTree = BI.inherit(BI.Widget, {
     _formatItems: function (nodes, layer, pNode) {
         var self = this;
         BI.each(nodes, function (i, node) {
-            var extend = { layer: layer };
+            var extend = { layer: layer, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT };
             if (!BI.isKey(node.id)) {
                 node.id = BI.UUID();
             }

src/case/tree/treeexpander/tree.expander.popup.js

@@ -1,16 +1,19 @@
 !(function () {
     var Widget = BI.inherit(BI.Widget, {
-        props: {
+        props: function () {
+            return {
                 baseCls: "bi-tree-expander-popup",
                 layer: 0, // 第几层级
                 el: {},
                 isLastNode: false,
+            };
         },
 
         render: function () {
 
             var self = this;
             var o = this.options;
+            var offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2;
 
             this.popupView = BI.createWidget(BI.extend(o.el, {
                 value: o.value
@@ -19,12 +22,12 @@
             this.popupView.on(BI.Controller.EVENT_CHANGE, function () {
                 self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
             });
-            this.popupView.element.css("margin-left", -12 * o.layer);
-            this.element.css("margin-left", 12 * o.layer);
+            this.popupView.element.css("margin-left", -offset * o.layer);
+            this.element.css("margin-left", offset * o.layer);
 
             return {
                 type: "bi.vertical",
-                cls: !o.isLastNode ? "line" : "",
+                cls: !o.isLastNode ? (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "line solid" : "line") : "",
                 scrolly: null,
                 items: [
                     this.popupView,

src/case/ztree/0.treeview.js

@@ -51,7 +51,7 @@ BI.TreeView = BI.inherit(BI.Pane, {
         }
         this.tree = BI.createWidget({
             type: "bi.layout",
-            element: "<ul id='" + this.id + "' class='ztree'></ul>"
+            element: "<ul id='" + this.id + "' class='ztree" + (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? " solid'" : "'") + "></ul>"
         });
         BI.createWidget({
             type: "bi.default",

src/core/system.js

@@ -73,4 +73,7 @@
 
 BI.prepares.push(function () {
     BI.SIZE_CONSANTS = BI.Providers.getProvider("bi.provider.system").getSize();
+    // 不再增加线型的配置了,之后不维护前置版本直接删掉，都用实线连接线
+    BI.STYLE_CONSTANTS = {};
+    BI.STYLE_CONSTANTS.LINK_LINE_TYPE = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT === 24 ? "dashed" : "solid";
 });

src/less/base/tree/tree.expander.less

@@ -7,3 +7,8 @@
   left: 11px;
 }
 
+.bi-tree-expander-popup.line.solid:before {
+  border-left: 1px solid @color-bi-border-tree-expander-popup-line;
+  left: 15px;
+}
+

src/less/base/tree/ztree.less

@@ -25,6 +25,11 @@
   padding: 0 0 0 18px
 }
 
+.ztree.solid li ul {
+  margin: 0;
+  padding: 0 0 0 24px
+}
+
 // 此处不用2倍图，改用css画虚线
 // z-tree的line是一整块子节点区域，所以不能使用background-size: contain
 // 使用1倍图太模糊，这边就使用css自己画了，calc属性支持IE9, IE8反正会走hack, 不影响
@@ -40,19 +45,33 @@
   }
 }
 
+.ztree.solid li ul.line {
+  &:before {
+    border-left: 1px solid @border-color-dark-gray-line;
+    height: 100%;
+    left: 15px;
+    margin-top: 0;
+  }
+}
+
 .bi-theme-dark {
   .ztree li ul.line {
     &:before {
       border-left: 1px dashed @border-color-dark-gray-line;
     }
   }
+  .ztree.solid li ul.line {
+    &:before {
+      border-left: 1px solid @border-color-dark-gray-line;
+    }
+  }
 }
 
 .ztree li a {
   padding: 1px 3px 0 0;
   margin: 0;
   cursor: pointer;
-  height: 24px;
+  height: 23px;
   background-color: transparent;
   text-decoration: none;
   vertical-align: top;
@@ -66,6 +85,10 @@
   }
 }
 
+.ztree.solid li a {
+  height: 31px;
+}
+
 .ztree li a.curSelectedNode {
 }
 
@@ -113,6 +136,10 @@
   }
 }
 
+.ztree.solid li span {
+  line-height: 32px;
+}
+
 .ztree li span.button {
   line-height: 0;
   margin: 0;
@@ -229,6 +256,11 @@
   height: 24px
 }
 
+.ztree.solid li span.button.switch {
+  width: 32px;
+  height: 32px
+}
+
 .ztree li span.button.switch.noline_open {
   width: 0;
 }

src/less/lib/constant.less

@@ -22,16 +22,7 @@
 
 // 色板
 // 品牌
-@color-brand-blue-100: #2C60DB;
-@color-brand-blue-90: fade(@color-brand-blue-100, 90);
-@color-brand-blue-80: fade(@color-brand-blue-100, 80);
-@color-brand-blue-60: fade(@color-brand-blue-100, 60);
-@color-brand-blue-50: fade(@color-brand-blue-100, 50);
-@color-brand-blue-40: fade(@color-brand-blue-100, 40);
-@color-brand-blue-30: fade(@color-brand-blue-100, 30);
-@color-brand-blue-20: fade(@color-brand-blue-100, 20);
-@color-brand-blue-10: fade(@color-brand-blue-100, 10);
-@color-brand-blue-5: fade(@color-brand-blue-100, 5);
+@color-primary: #3685f2;
 
 //green
 @color-bi-green-100: #13cd66;
@@ -58,7 +49,7 @@
 @color-bi-sea-green-5: fade(@color-bi-sea-green-100, 5);
 
 //blue
-@color-bi-blue-100: #3685f2;
+@color-bi-blue-100: @color-primary;
 @color-bi-blue-90: fade(@color-bi-blue-100, 90);
 @color-bi-blue-80: fade(@color-bi-blue-100, 80);
 @color-bi-blue-60: fade(@color-bi-blue-100, 60);

src/less/lib/icon.less

@@ -41,6 +41,36 @@
 @icon-tree-vertical-line-3-theme-dark: "icon/dark/tree_vertical_line_3.png";
 @icon-tree-vertical-line-4-theme-dark: "icon/dark/tree_vertical_line_4.png";
 
+@icon-tree-solid-expand-type1: "icon/tree_solid_expand_1.png";
+@icon-tree-solid-expand-type2: "icon/tree_solid_expand_2.png";
+@icon-tree-solid-expand-type3: "icon/tree_solid_expand_3.png";
+@icon-tree-solid-expand-type4: "icon/tree_solid_expand_4.png";
+
+@icon-tree-solid-collapse-type1: "icon/tree_solid_collapse_1.png";
+@icon-tree-solid-collapse-type2: "icon/tree_solid_collapse_2.png";
+@icon-tree-solid-collapse-type3: "icon/tree_solid_collapse_3.png";
+@icon-tree-solid-collapse-type4: "icon/tree_solid_collapse_4.png";
+
+@icon-tree-solid-vertical-line-1: "icon/tree_solid_vertical_line_1.png";
+@icon-tree-solid-vertical-line-2: "icon/tree_solid_vertical_line_2.png";
+@icon-tree-solid-vertical-line-3: "icon/tree_solid_vertical_line_3.png";
+@icon-tree-solid-vertical-line-4: "icon/tree_solid_vertical_line_4.png";
+
+@icon-tree-solid-expand-type1-theme-dark: "icon/dark/tree_solid_expand_1.png";
+@icon-tree-solid-expand-type2-theme-dark: "icon/dark/tree_solid_expand_2.png";
+@icon-tree-solid-expand-type3-theme-dark: "icon/dark/tree_solid_expand_3.png";
+@icon-tree-solid-expand-type4-theme-dark: "icon/dark/tree_solid_expand_4.png";
+
+@icon-tree-solid-collapse-type1-theme-dark: "icon/dark/tree_solid_collapse_1.png";
+@icon-tree-solid-collapse-type2-theme-dark: "icon/dark/tree_solid_collapse_2.png";
+@icon-tree-solid-collapse-type3-theme-dark: "icon/dark/tree_solid_collapse_3.png";
+@icon-tree-solid-collapse-type4-theme-dark: "icon/dark/tree_solid_collapse_4.png";
+
+@icon-tree-solid-vertical-line-1-theme-dark: "icon/dark/tree_solid_vertical_line_1.png";
+@icon-tree-solid-vertical-line-2-theme-dark: "icon/dark/tree_solid_vertical_line_2.png";
+@icon-tree-solid-vertical-line-3-theme-dark: "icon/dark/tree_solid_vertical_line_3.png";
+@icon-tree-solid-vertical-line-4-theme-dark: "icon/dark/tree_solid_vertical_line_4.png";
+
 @icon-loading: "icon/loading.gif";
 @icon-wave-loading: "icon/wave_loading.gif";
 

src/less/resource/background.less

@@ -14,27 +14,19 @@
   & .ztree li span.button.switch.bottom_open {
     .image2xPath(@icon-tree-vertical-line-4);
   }
-
-  & .ztree.hack li span.button.switch.center_open {
-    .imagePath(@icon-tree-vertical-line-3);
-  }
-
-  & .ztree.hack li span.button.switch.roots_open {
-    .imagePath(@icon-tree-vertical-line-2);
 }
 
-  & .ztree.hack li span.button.switch.bottom_open {
-    .imagePath(@icon-tree-vertical-line-4);
-  }
+.bi-display-tree {
+  & .ztree.solid li span.button.switch.center_open {
+    .image2xPath(@icon-tree-solid-vertical-line-3);
   }
 
-.ztree.hack li ul.line {
-  .imagePath(@icon-tree-vertical-line-1, 0, 1px, repeat-y);
+  & .ztree.solid li span.button.switch.roots_open {
+    .image2xPath(@icon-tree-solid-vertical-line-2);
   }
 
-.bi-theme-dark {
-  .ztree.hack li ul.line {
-    .imagePath(@icon-tree-vertical-line-1-theme-dark, 0, 1px, repeat-y);
+  & .ztree.solid li span.button.switch.bottom_open {
+    .image2xPath(@icon-tree-solid-vertical-line-4);
   }
 }
 
@@ -42,16 +34,16 @@
   .image2xPath(@icon-tree-expand-type1);
 }
 
-.ztree.hack li span.button.root_open {
-  .imagePath(@icon-tree-expand-type1);
+.ztree.solid li span.button.root_open {
+  .image2xPath(@icon-tree-solid-expand-type1);
 }
 
 .bi-theme-dark {
   .ztree li span.button.root_open {
     .image2xPath(@icon-tree-expand-type1-theme-dark);
   }
-  .ztree.hack li span.button.root_open {
-    .imagePath(@icon-tree-expand-type1-theme-dark);
+  .ztree.solid li span.button.root_open {
+    .image2xPath(@icon-tree-solid-expand-type1-theme-dark);
   }
 }
 
@@ -59,16 +51,16 @@
   .image2xPath(@icon-tree-collapse-type1);
 }
 
-.ztree.hack li span.button.root_close {
-  .imagePath(@icon-tree-collapse-type1);
+.ztree.solid li span.button.root_close {
+  .image2xPath(@icon-tree-solid-collapse-type1);
 }
 
 .bi-theme-dark {
   .ztree li span.button.root_close {
     .image2xPath(@icon-tree-collapse-type1-theme-dark);
   }
-  .ztree.hack li span.button.root_close {
-    .imagePath(@icon-tree-collapse-type1-theme-dark);
+  .ztree.solid li span.button.root_close {
+    .image2xPath(@icon-tree-solid-collapse-type1-theme-dark);
   }
 }
 
@@ -76,16 +68,16 @@
   .image2xPath(@icon-tree-expand-type2);
 }
 
-.ztree.hack li span.button.roots_open {
-  .imagePath(@icon-tree-expand-type2);
+.ztree.solid li span.button.roots_open {
+  .image2xPath(@icon-tree-solid-expand-type2);
 }
 
 .bi-theme-dark {
   .ztree li span.button.roots_open {
     .image2xPath(@icon-tree-expand-type2-theme-dark);
   }
-  .ztree.hack li span.button.roots_open {
-    .imagePath(@icon-tree-expand-type2-theme-dark);
+  .ztree.solid li span.button.roots_open {
+    .image2xPath(@icon-tree-solid-expand-type2-theme-dark);
   }
 }
 
@@ -93,16 +85,16 @@
   .image2xPath(@icon-tree-collapse-type2);
 }
 
-.ztree.hack li span.button.roots_close {
-  .imagePath(@icon-tree-collapse-type2);
+.ztree.solid li span.button.roots_close {
+  .image2xPath(@icon-tree-solid-collapse-type2);
 }
 
 .bi-theme-dark {
   .ztree li span.button.roots_close {
     .image2xPath(@icon-tree-collapse-type2-theme-dark);
   }
-  .ztree.hack li span.button.roots_close {
-    .imagePath(@icon-tree-collapse-type2-theme-dark);
+  .ztree.solid li span.button.roots_close {
+    .image2xPath(@icon-tree-solid-collapse-type2-theme-dark);
   }
 }
 
@@ -110,16 +102,16 @@
   .image2xPath(@icon-tree-expand-type3);
 }
 
-.ztree.hack li span.button.center_open {
-  .imagePath(@icon-tree-expand-type3);
+.ztree.solid li span.button.center_open {
+  .image2xPath(@icon-tree-solid-expand-type3);
 }
 
 .bi-theme-dark {
   .ztree li span.button.center_open {
     .image2xPath(@icon-tree-expand-type3-theme-dark);
   }
-  .ztree.hack li span.button.center_open {
-    .imagePath(@icon-tree-expand-type3-theme-dark);
+  .ztree.solid li span.button.center_open {
+    .image2xPath(@icon-tree-solid-expand-type3-theme-dark);
   }
 }
 
@@ -127,16 +119,16 @@
   .image2xPath(@icon-tree-collapse-type3);
 }
 
-.ztree.hack li span.button.center_close {
-  .imagePath(@icon-tree-collapse-type3);
+.ztree.solid li span.button.center_close {
+  .image2xPath(@icon-tree-solid-collapse-type3);
 }
 
 .bi-theme-dark {
   .ztree li span.button.center_close {
     .image2xPath(@icon-tree-collapse-type3-theme-dark);
   }
-  .ztree.hack li span.button.center_close {
-    .imagePath(@icon-tree-collapse-type3-theme-dark);
+  .ztree.solid li span.button.center_close {
+    .image2xPath(@icon-tree-solid-collapse-type3-theme-dark);
   }
 }
 
@@ -144,16 +136,16 @@
   .image2xPath(@icon-tree-expand-type4);
 }
 
-.ztree.hack li span.button.bottom_open {
-  .imagePath(@icon-tree-expand-type4);
+.ztree.solid li span.button.bottom_open {
+  .image2xPath(@icon-tree-solid-expand-type4);
 }
 
 .bi-theme-dark {
   .ztree li span.button.bottom_open {
     .image2xPath(@icon-tree-expand-type4-theme-dark);
   }
-  .ztree.hack li span.button.bottom_open {
-    .imagePath(@icon-tree-expand-type4-theme-dark);
+  .ztree.solid li span.button.bottom_open {
+    .image2xPath(@icon-tree-solid-expand-type4-theme-dark);
   }
 }
 
@@ -161,16 +153,16 @@
   .image2xPath(@icon-tree-collapse-type4);
 }
 
-.ztree.hack li span.button.bottom_close {
-  .imagePath(@icon-tree-collapse-type4);
+.ztree.solid li span.button.bottom_close {
+  .image2xPath(@icon-tree-solid-collapse-type4);
 }
 
 .bi-theme-dark {
   .ztree li span.button.bottom_close {
     .image2xPath(@icon-tree-collapse-type4-theme-dark);
   }
-  .ztree.hack li span.button.bottom_close {
-    .imagePath(@icon-tree-collapse-type4-theme-dark);
+  .ztree.solid li span.button.bottom_close {
+    .image2xPath(@icon-tree-solid-collapse-type4-theme-dark);
   }
 }
 
@@ -178,16 +170,16 @@
   .image2xPath(@icon-tree-vertical-line-2);
 }
 
-.ztree.hack li span.button.roots_docu {
-  .imagePath(@icon-tree-vertical-line-2);
+.ztree.solid li span.button.roots_docu {
+  .image2xPath(@icon-tree-solid-vertical-line-2);
 }
 
 .bi-theme-dark {
   .ztree li span.button.roots_docu {
     .image2xPath(@icon-tree-vertical-line-2-theme-dark);
   }
-  .ztree.hack li span.button.roots_docu {
-    .imagePath(@icon-tree-vertical-line-2-theme-dark);
+  .ztree.solid li span.button.roots_docu {
+    .image2xPath(@icon-tree-solid-vertical-line-2-theme-dark);
   }
 }
 
@@ -195,16 +187,16 @@
   .image2xPath(@icon-tree-vertical-line-3);
 }
 
-.ztree.hack li span.button.center_docu {
-  .imagePath(@icon-tree-vertical-line-3);
+.ztree.solid li span.button.center_docu {
+  .image2xPath(@icon-tree-solid-vertical-line-3);
 }
 
 .bi-theme-dark {
   .ztree li span.button.center_docu {
     .image2xPath(@icon-tree-vertical-line-3-theme-dark);
   }
-  .ztree.hack li span.button.center_docu {
-    .imagePath(@icon-tree-vertical-line-3-theme-dark);
+  .ztree.solid li span.button.center_docu {
+    .image2xPath(@icon-tree-solid-vertical-line-3-theme-dark);
   }
 }
 
@@ -212,16 +204,16 @@
   .image2xPath(@icon-tree-vertical-line-4);
 }
 
-.ztree.hack li span.button.bottom_docu {
-  .imagePath(@icon-tree-vertical-line-4);
+.ztree.solid li span.button.bottom_docu {
+  .image2xPath(@icon-tree-solid-vertical-line-4);
 }
 
 .bi-theme-dark {
   .ztree li span.button.bottom_docu {
     .image2xPath(@icon-tree-vertical-line-4-theme-dark);
   }
-  .ztree.hack li span.button.bottom_docu {
-    .imagePath(@icon-tree-vertical-line-4-theme-dark);
+  .ztree.solid li span.button.bottom_docu {
+    .image2xPath(@icon-tree-solid-vertical-line-4-theme-dark);
   }
 }
 
@@ -229,50 +221,86 @@
   .image2xPath(@icon-loading);
 }
 
-.ztree.hack li span.button.ico_loading {
-  .imagePath(@icon-loading);
-}
-
 .base-line-conn-background {
   .imagePath(@icon-tree-vertical-line-1, 0, 0, repeat-y);
 }
 
+.base-solid-line-conn-background {
+  .image2xPath(@icon-tree-solid-vertical-line-1, 0, 0, repeat-y);
+}
+
 .bi-theme-dark {
   .base-line-conn-background {
     .imagePath(@icon-tree-vertical-line-1-theme-dark, 0, 0, repeat-y);
   }
 }
 
+.bi-theme-dark {
+  .base-solid-line-conn-background {
+    .image2xPath(@icon-tree-solid-vertical-line-1-theme-dark, 0, 0, repeat-y);
+  }
+}
+
 .first-line-conn-background {
   .imagePath(@icon-tree-vertical-line-2);
 }
 
+.first-solid-line-conn-background {
+  .image2xPath(@icon-tree-solid-vertical-line-2);
+}
+
 .bi-theme-dark {
   .first-line-conn-background {
     .imagePath(@icon-tree-vertical-line-2-theme-dark);
   }
 }
 
+.bi-theme-dark {
+  .first-solid-line-conn-background {
+    .image2xPath(@icon-tree-solid-vertical-line-2-theme-dark);
+  }
+}
+
 .mid-line-conn-background {
   .imagePath(@icon-tree-vertical-line-3);
 }
 
+.mid-solid-line-conn-background {
+  .image2xPath(@icon-tree-solid-vertical-line-3);
+}
+
 .bi-theme-dark {
   .mid-line-conn-background {
     .imagePath(@icon-tree-vertical-line-3-theme-dark);
   }
 }
 
+.bi-theme-dark {
+  .mid-solid-line-conn-background {
+    .image2xPath(@icon-tree-solid-vertical-line-3-theme-dark);
+  }
+}
+
 .last-line-conn-background {
   .imagePath(@icon-tree-vertical-line-4);
 }
 
+.last-solid-line-conn-background {
+  .image2xPath(@icon-tree-solid-vertical-line-4);
+}
+
 .bi-theme-dark {
   .last-line-conn-background {
     .imagePath(@icon-tree-vertical-line-4-theme-dark);
   }
 }
 
+.bi-theme-dark {
+  .last-solid-line-conn-background {
+    .image2xPath(@icon-tree-solid-vertical-line-4-theme-dark);
+  }
+}
+
 .loading-background {
   .image2xPath(@icon-loading);
 }

src/less/resource/icon.less

@@ -13,6 +13,17 @@
 .icon(tree-vertical-line-type2, @icon-tree-vertical-line-2);
 .icon(tree-vertical-line-type3, @icon-tree-vertical-line-3);
 .icon(tree-vertical-line-type4, @icon-tree-vertical-line-4);
+.icon(tree-solid-collapse-icon-type1, @icon-tree-solid-collapse-type1);
+.icon(tree-solid-collapse-icon-type2, @icon-tree-solid-collapse-type2);
+.icon(tree-solid-collapse-icon-type3, @icon-tree-solid-collapse-type3);
+.icon(tree-solid-collapse-icon-type4, @icon-tree-solid-collapse-type4);
+.icon(tree-solid-expand-icon-type1, @icon-tree-solid-expand-type1);
+.icon(tree-solid-expand-icon-type2, @icon-tree-solid-expand-type2);
+.icon(tree-solid-expand-icon-type3, @icon-tree-solid-expand-type3);
+.icon(tree-solid-expand-icon-type4, @icon-tree-solid-expand-type4);
+.icon(tree-solid-vertical-line-type2, @icon-tree-solid-vertical-line-2);
+.icon(tree-solid-vertical-line-type3, @icon-tree-solid-vertical-line-3);
+.icon(tree-solid-vertical-line-type4, @icon-tree-solid-vertical-line-4);
 
 //CheckBox
 .icon_custom(check-box-icon, @icon-checkbox-normal, @icon-checkbox-normal, @icon-checkbox-normal, @icon-checkbox-active, @icon-checkbox-disable, @icon-checkbox-active-disable);
@@ -43,6 +54,17 @@
   .icon(tree-vertical-line-type2, @icon-tree-vertical-line-2-theme-dark);
   .icon(tree-vertical-line-type3, @icon-tree-vertical-line-3-theme-dark);
   .icon(tree-vertical-line-type4, @icon-tree-vertical-line-4-theme-dark);
+  .icon(tree-solid-collapse-icon-type1, @icon-tree-solid-collapse-type1-theme-dark);
+  .icon(tree-solid-collapse-icon-type2, @icon-tree-solid-collapse-type2-theme-dark);
+  .icon(tree-solid-collapse-icon-type3, @icon-tree-solid-collapse-type3-theme-dark);
+  .icon(tree-solid-collapse-icon-type4, @icon-tree-solid-collapse-type4-theme-dark);
+  .icon(tree-solid-expand-icon-type1, @icon-tree-solid-expand-type1-theme-dark);
+  .icon(tree-solid-expand-icon-type2, @icon-tree-solid-expand-type2-theme-dark);
+  .icon(tree-solid-expand-icon-type3, @icon-tree-solid-expand-type3-theme-dark);
+  .icon(tree-solid-expand-icon-type4, @icon-tree-solid-expand-type4-theme-dark);
+  .icon(tree-solid-vertical-line-type2, @icon-tree-solid-vertical-line-2-theme-dark);
+  .icon(tree-solid-vertical-line-type3, @icon-tree-solid-vertical-line-3-theme-dark);
+  .icon(tree-solid-vertical-line-type4, @icon-tree-solid-vertical-line-4-theme-dark);
 
   .icon_select(trans-color-icon, @icon-trans-normal-dark, @icon-trans-select-dark, @icon-trans-disable-dark);
   .icon(auto-square-color-icon, @icon-auto-square-normal-dark);

src/widget/multilayerselecttree/multilayerselecttree.leveltree.js

@@ -34,7 +34,8 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, {
         BI.each(nodes, function (i, node) {
             var extend = {
                 isFirstNode: i === 0,
-                isLastNode: i === nodes.length - 1
+                isLastNode: i === nodes.length - 1,
+                height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT
             };
             node.layer = layer;
             if (!BI.isKey(node.id)) {

src/widget/multilayerselecttree/node/node.first.plus.js

@@ -54,12 +54,12 @@ BI.MultiLayerSelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
         // });
         items.push({
             el: this.node,
-            lgap: o.layer * 12
+            lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
         });
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,
-            columnSize: BI.makeArray(o.layer, 12),
+            columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
             items: items
         });
     },

src/widget/multilayerselecttree/node/node.last.plus.js

@@ -47,12 +47,12 @@ BI.MultiLayerSelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
 
         items.push({
             el: this.node,
-            lgap: o.layer * 12
+            lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
         });
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,
-            columnSize: BI.makeArray(o.layer, 12),
+            columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
             items: items
         });
     },

src/widget/multilayerselecttree/node/node.mid.plus.js

@@ -47,12 +47,12 @@ BI.MultiLayerSelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
 
         items.push({
             el: this.node,
-            lgap: o.layer * 12
+            lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
         });
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,
-            columnSize: BI.makeArray(o.layer, 12),
+            columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
             items: items
         });
     },

src/widget/multilayerselecttree/node/node.plus.js

@@ -47,12 +47,12 @@ BI.MultiLayerSelectTreePlusGroupNode = BI.inherit(BI.NodeButton, {
 
         items.push({
             el: this.node,
-            lgap: o.layer * 12
+            lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
         });
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,
-            columnSize: BI.makeArray(o.layer, 12),
+            columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
             items: items
         });
     },

src/widget/multilayersingletree/multilayersingletree.leveltree.js

@@ -34,7 +34,8 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, {
         BI.each(nodes, function (i, node) {
             var extend = {
                 isFirstNode: i === 0,
-                isLastNode: i === nodes.length - 1
+                isLastNode: i === nodes.length - 1,
+                height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT
             };
             node.layer = layer;
             if (!BI.isKey(node.id)) {

src/widget/multilayersingletree/node/node.first.plus.js

@@ -26,12 +26,12 @@ BI.MultiLayerSingleTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
 
         items.push({
             el: this.node,
-            lgap: o.layer * 12
+            lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
         });
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,
-            columnSize: BI.makeArray(o.layer, 12),
+            columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
             items: items
         });
     },

src/widget/multilayersingletree/node/node.last.plus.js

@@ -26,12 +26,12 @@ BI.MultiLayerSingleTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
 
         items.push({
             el: this.node,
-            lgap: o.layer * 12
+            lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
         });
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,
-            columnSize: BI.makeArray(o.layer, 12),
+            columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
             items: items
         });
     },

src/widget/multilayersingletree/node/node.mid.plus.js

@@ -26,7 +26,7 @@ BI.MultiLayerSingleTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
 
         items.push({
             el: this.node,
-            lgap: o.layer * 12
+            lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
         });
         BI.createWidget({
             type: "bi.horizontal_adapt",

src/widget/multilayersingletree/treeitem/item.first.treeleaf.js

@@ -46,12 +46,12 @@ BI.MultiLayerSingleTreeFirstTreeLeafItem = BI.inherit(BI.BasicButton, {
 
         items.push({
             el: this.item,
-            lgap: o.layer * 12
+            lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
         });
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,
-            columnSize: BI.makeArray(o.layer, 12),
+            columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
             items: items
         });
     },

src/widget/multilayersingletree/treeitem/item.last.treeleaf.js

@@ -46,12 +46,12 @@ BI.MultiLayerSingleTreeLastTreeLeafItem = BI.inherit(BI.BasicButton, {
 
         items.push({
             el: this.item,
-            lgap: o.layer * 12
+            lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
         });
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,
-            columnSize: BI.makeArray(o.layer, 12),
+            columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
             items: items
         });
     },

src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js

@@ -46,12 +46,12 @@ BI.MultiLayerSingleTreeMidTreeLeafItem = BI.inherit(BI.BasicButton, {
 
         items.push({
             el: this.item,
-            lgap: o.layer * 12
+            lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
         });
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,
-            columnSize: BI.makeArray(o.layer, 12),
+            columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
             items: items
         });
     },

src/widget/selecttree/selecttree.popup.js

@@ -20,6 +20,7 @@ BI.SelectTreePopup = BI.inherit(BI.Pane, {
             var extend = {layer: layer};
             node.id = node.id || BI.UUID();
             extend.pNode = pNode;
+            extend.height = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT;
             if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) {
                 extend.type = "bi.select_tree_mid_plus_group_node";
                 if (i === nodes.length - 1) {

src/widget/singleselect/search/singleselect.search.loader.js

@@ -95,7 +95,7 @@ BI.SingleSelectSearchLoader = BI.inherit(BI.Widget, {
                 type: o.allowNoSelect ? "bi.single_select_item" : "bi.single_select_radio_item",
                 logic: o.logic,
                 cls: "bi-list-item-active",
-                height: 24,
+                height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
                 selected: false,
                 iconWrapperWidth: 26,
                 hgap: o.allowNoSelect ? 10 : 0,

src/widget/singleselect/singleselect.loader.js

@@ -114,7 +114,7 @@ BI.SingleSelectLoader = BI.inherit(BI.Widget, {
                 type: o.allowNoSelect ? "bi.single_select_item" : "bi.single_select_radio_item",
                 logic: o.logic,
                 cls: "bi-list-item-active",
-                height: 24,
+                height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
                 selected: false,
                 iconWrapperWidth: 26,
                 hgap: o.allowNoSelect ? 10 : 0,