Merge pull request #1162 in VISUAL/fineui from ~WINDY/fineui:master to master

* commit '18d0607ad74394d4907388898e4984fde7049a59':
  更新
  update
  BI-53377 && REPORT-22519 fix: 下拉树图标不清晰的问题

changelog.md

@@ -1,5 +1,7 @@
 # 更新日志
 2.0(2019-10)
+- 修改了下拉树展开图标模糊的问题
+- 修复了下拉树搜索高亮字符与正常字符间存在间距的问题
 - 复选下拉系列的计数器从trigger中拆分, 作为独立的部分
 
 2.0(2019-09)

public/css/background.css

@@ -8,20 +8,46 @@
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/background/marker.png') no-repeat center center;
 }
 .bi-display-tree .ztree li span.button.switch.center_open {
-  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
 }
 .bi-display-tree .ztree li span.button.switch.roots_open {
-  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
 }
 .bi-display-tree .ztree li span.button.switch.bottom_open {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-display-tree .ztree.hack li span.button.switch.center_open {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+}
+.bi-display-tree .ztree.hack li span.button.switch.roots_open {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+}
+.bi-display-tree .ztree.hack li span.button.switch.bottom_open {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
 }
 .ztree li ul.line {
+  position: relative;
+}
+.ztree li ul.line:before {
+  position: absolute;
+  content: '';
+  border-left: 1px dashed #D0D4DA;
+  height: calc(100% - 3px);
+  left: 12px;
+  margin-top: 1px;
+}
+.ztree.hack li ul.line {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_vertical_line_1.png') repeat-y 1px 0;
 }
 .bi-theme-dark .ztree li ul.line {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
 }
+.bi-theme-dark .ztree.hack li ul.line {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
+}
 .ztree li span.button.chk.checkbox_false_full {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/check_box_normal.png') no-repeat center center;
   background-size: contain;
@@ -79,72 +105,164 @@
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/half_selected.png') no-repeat center center;
 }
 .ztree li span.button.root_open {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_expand_1.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.root_open {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_expand_1.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.root_open {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/dark/tree_expand_1.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.root_open {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_expand_1.png') no-repeat center center;
 }
 .ztree li span.button.root_close {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_collapse_1.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.root_close {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_collapse_1.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.root_close {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/dark/tree_collapse_1.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.root_close {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_collapse_1.png') no-repeat center center;
 }
 .ztree li span.button.roots_open {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_expand_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_open {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_expand_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_open {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/dark/tree_expand_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_open {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_expand_2.png') no-repeat center center;
 }
 .ztree li span.button.roots_close {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_collapse_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_close {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_collapse_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_close {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/dark/tree_collapse_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_close {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_collapse_2.png') no-repeat center center;
 }
 .ztree li span.button.center_open {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_expand_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_open {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_expand_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_open {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/dark/tree_expand_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_open {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_expand_3.png') no-repeat center center;
 }
 .ztree li span.button.center_close {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_collapse_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_close {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_collapse_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_close {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/dark/tree_collapse_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_close {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_collapse_3.png') no-repeat center center;
 }
 .ztree li span.button.bottom_open {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_expand_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_open {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_expand_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_open {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/dark/tree_expand_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_open {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_expand_4.png') no-repeat center center;
 }
 .ztree li span.button.bottom_close {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_collapse_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_close {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_collapse_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_close {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/dark/tree_collapse_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_close {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_collapse_4.png') no-repeat center center;
 }
 .ztree li span.button.roots_docu {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_docu {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_docu {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_docu {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
 }
 .ztree li span.button.center_docu {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_docu {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_docu {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_docu {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
 }
 .ztree li span.button.bottom_docu {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_docu {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_docu {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_docu {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
 }
 .ztree li span.button.ico_loading {
+  background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/2x/icon/loading.gif') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.ico_loading {
   background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/icon/loading.gif') no-repeat center center;
 }
 .base-line-conn-background {

src/case/combo/icontextvaluecombo/combo.icontextvalue.js

@@ -57,7 +57,8 @@ BI.IconTextValueCombo = BI.inherit(BI.Widget, {
             el: this.trigger,
             popup: {
                 el: this.popup,
-                maxHeight: 240
+                maxHeight: 240,
+                minHeight: 25
             }
         });
         if (BI.isKey(o.value)) {

src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js

@@ -70,7 +70,8 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
                             }]
                         },
                         value: o.value,
-                        maxHeight: 252
+                        maxHeight: 252,
+                        minHeight: 25
                     },
                     listeners: [{
                         eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,

src/case/combo/textvaluecombo/combo.textvalue.js

@@ -52,7 +52,8 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
             el: this.trigger,
             popup: {
                 el: this.popup,
-                maxHeight: 240
+                maxHeight: 240,
+                minHeight: 25
             }
         });
         if(BI.isKey(o.value)) {

src/case/combo/textvaluecombo/combo.textvaluesmall.js

@@ -45,7 +45,8 @@ BI.SmallTextValueCombo = BI.inherit(BI.Widget, {
             el: this.trigger,
             popup: {
                 el: this.popup,
-                maxHeight: 240
+                maxHeight: 240,
+                minHeight: 25
             }
         });
     },

src/css/base/colorchooser/colorpicker/editor.css

@@ -8,20 +8,46 @@
   background: url('images/1x/background/marker.png') no-repeat center center;
 }
 .bi-display-tree .ztree li span.button.switch.center_open {
-  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background: url('images/2x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
 }
 .bi-display-tree .ztree li span.button.switch.roots_open {
-  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background: url('images/2x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
 }
 .bi-display-tree .ztree li span.button.switch.bottom_open {
+  background: url('images/2x/icon/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-display-tree .ztree.hack li span.button.switch.center_open {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+}
+.bi-display-tree .ztree.hack li span.button.switch.roots_open {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+}
+.bi-display-tree .ztree.hack li span.button.switch.bottom_open {
   background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
 }
 .ztree li ul.line {
+  position: relative;
+}
+.ztree li ul.line:before {
+  position: absolute;
+  content: '';
+  border-left: 1px dashed #D0D4DA;
+  height: calc(100% - 3px);
+  left: 12px;
+  margin-top: 1px;
+}
+.ztree.hack li ul.line {
   background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 1px 0;
 }
 .bi-theme-dark .ztree li ul.line {
   background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
 }
+.bi-theme-dark .ztree.hack li ul.line {
+  background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
+}
 .ztree li span.button.chk.checkbox_false_full {
   background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
   background-size: contain;
@@ -79,72 +105,164 @@
   background: url('images/1x/icon/half_selected.png') no-repeat center center;
 }
 .ztree li span.button.root_open {
+  background: url('images/2x/icon/tree_expand_1.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.root_open {
   background: url('images/1x/icon/tree_expand_1.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.root_open {
+  background: url('images/2x/icon/dark/tree_expand_1.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.root_open {
   background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center;
 }
 .ztree li span.button.root_close {
+  background: url('images/2x/icon/tree_collapse_1.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.root_close {
   background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.root_close {
+  background: url('images/2x/icon/dark/tree_collapse_1.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.root_close {
   background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center;
 }
 .ztree li span.button.roots_open {
+  background: url('images/2x/icon/tree_expand_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_open {
   background: url('images/1x/icon/tree_expand_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_open {
+  background: url('images/2x/icon/dark/tree_expand_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_open {
   background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center;
 }
 .ztree li span.button.roots_close {
+  background: url('images/2x/icon/tree_collapse_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_close {
   background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_close {
+  background: url('images/2x/icon/dark/tree_collapse_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_close {
   background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center;
 }
 .ztree li span.button.center_open {
+  background: url('images/2x/icon/tree_expand_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_open {
   background: url('images/1x/icon/tree_expand_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_open {
+  background: url('images/2x/icon/dark/tree_expand_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_open {
   background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center;
 }
 .ztree li span.button.center_close {
+  background: url('images/2x/icon/tree_collapse_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_close {
   background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_close {
+  background: url('images/2x/icon/dark/tree_collapse_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_close {
   background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center;
 }
 .ztree li span.button.bottom_open {
+  background: url('images/2x/icon/tree_expand_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_open {
   background: url('images/1x/icon/tree_expand_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_open {
+  background: url('images/2x/icon/dark/tree_expand_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_open {
   background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center;
 }
 .ztree li span.button.bottom_close {
+  background: url('images/2x/icon/tree_collapse_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_close {
   background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_close {
+  background: url('images/2x/icon/dark/tree_collapse_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_close {
   background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center;
 }
 .ztree li span.button.roots_docu {
+  background: url('images/2x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_docu {
   background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_docu {
+  background: url('images/2x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_docu {
   background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
 }
 .ztree li span.button.center_docu {
+  background: url('images/2x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_docu {
   background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_docu {
+  background: url('images/2x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_docu {
   background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
 }
 .ztree li span.button.bottom_docu {
+  background: url('images/2x/icon/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_docu {
   background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_docu {
+  background: url('images/2x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_docu {
   background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
 }
 .ztree li span.button.ico_loading {
+  background: url('images/2x/icon/loading.gif') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.ico_loading {
   background: url('images/1x/icon/loading.gif') no-repeat center center;
 }
 .base-line-conn-background {

src/css/base/tree/ztree.css

@@ -68,6 +68,9 @@
   line-height: 24px;
   margin-right: 2px;
 }
+.ztree li span.bi-keyword-red-mark {
+  margin-right: 0px;
+}
 .ztree li span.button {
   line-height: 0;
   margin: 0;

src/css/resource/background.css

@@ -8,20 +8,46 @@
   background: url('images/1x/background/marker.png') no-repeat center center;
 }
 .bi-display-tree .ztree li span.button.switch.center_open {
-  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background: url('images/2x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
 }
 .bi-display-tree .ztree li span.button.switch.roots_open {
-  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background: url('images/2x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
 }
 .bi-display-tree .ztree li span.button.switch.bottom_open {
+  background: url('images/2x/icon/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-display-tree .ztree.hack li span.button.switch.center_open {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+}
+.bi-display-tree .ztree.hack li span.button.switch.roots_open {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+}
+.bi-display-tree .ztree.hack li span.button.switch.bottom_open {
   background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
 }
 .ztree li ul.line {
+  position: relative;
+}
+.ztree li ul.line:before {
+  position: absolute;
+  content: '';
+  border-left: 1px dashed #D0D4DA;
+  height: calc(100% - 3px);
+  left: 12px;
+  margin-top: 1px;
+}
+.ztree.hack li ul.line {
   background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 1px 0;
 }
 .bi-theme-dark .ztree li ul.line {
   background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
 }
+.bi-theme-dark .ztree.hack li ul.line {
+  background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
+}
 .ztree li span.button.chk.checkbox_false_full {
   background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
   background-size: contain;
@@ -79,72 +105,164 @@
   background: url('images/1x/icon/half_selected.png') no-repeat center center;
 }
 .ztree li span.button.root_open {
+  background: url('images/2x/icon/tree_expand_1.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.root_open {
   background: url('images/1x/icon/tree_expand_1.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.root_open {
+  background: url('images/2x/icon/dark/tree_expand_1.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.root_open {
   background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center;
 }
 .ztree li span.button.root_close {
+  background: url('images/2x/icon/tree_collapse_1.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.root_close {
   background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.root_close {
+  background: url('images/2x/icon/dark/tree_collapse_1.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.root_close {
   background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center;
 }
 .ztree li span.button.roots_open {
+  background: url('images/2x/icon/tree_expand_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_open {
   background: url('images/1x/icon/tree_expand_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_open {
+  background: url('images/2x/icon/dark/tree_expand_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_open {
   background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center;
 }
 .ztree li span.button.roots_close {
+  background: url('images/2x/icon/tree_collapse_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_close {
   background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_close {
+  background: url('images/2x/icon/dark/tree_collapse_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_close {
   background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center;
 }
 .ztree li span.button.center_open {
+  background: url('images/2x/icon/tree_expand_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_open {
   background: url('images/1x/icon/tree_expand_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_open {
+  background: url('images/2x/icon/dark/tree_expand_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_open {
   background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center;
 }
 .ztree li span.button.center_close {
+  background: url('images/2x/icon/tree_collapse_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_close {
   background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_close {
+  background: url('images/2x/icon/dark/tree_collapse_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_close {
   background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center;
 }
 .ztree li span.button.bottom_open {
+  background: url('images/2x/icon/tree_expand_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_open {
   background: url('images/1x/icon/tree_expand_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_open {
+  background: url('images/2x/icon/dark/tree_expand_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_open {
   background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center;
 }
 .ztree li span.button.bottom_close {
+  background: url('images/2x/icon/tree_collapse_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_close {
   background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_close {
+  background: url('images/2x/icon/dark/tree_collapse_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_close {
   background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center;
 }
 .ztree li span.button.roots_docu {
+  background: url('images/2x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_docu {
   background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_docu {
+  background: url('images/2x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_docu {
   background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
 }
 .ztree li span.button.center_docu {
+  background: url('images/2x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_docu {
   background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_docu {
+  background: url('images/2x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_docu {
   background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
 }
 .ztree li span.button.bottom_docu {
+  background: url('images/2x/icon/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_docu {
   background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_docu {
+  background: url('images/2x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_docu {
   background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
 }
 .ztree li span.button.ico_loading {
+  background: url('images/2x/icon/loading.gif') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.ico_loading {
   background: url('images/1x/icon/loading.gif') no-repeat center center;
 }
 .base-line-conn-background {

src/less/base/tree/ztree.less

@@ -83,7 +83,11 @@
 
 .ztree li span {
   line-height: 24px;
-  margin-right: 2px
+  margin-right: 2px;
+  // fix: 标红字符与正常字符存在间距
+  &.bi-keyword-red-mark {
+    margin-right: 0px;
+  }
 }
 
 .ztree li span.button {

src/less/resource/background.less

@@ -16,19 +16,46 @@
 
 .bi-display-tree {
   & .ztree li span.button.switch.center_open {
-    .imagePath(@icon-tree-vertical-line-3);
+    .image2xPath(@icon-tree-vertical-line-3);
   }
 
   & .ztree li span.button.switch.roots_open {
-    .imagePath(@icon-tree-vertical-line-2);
+    .image2xPath(@icon-tree-vertical-line-2);
   }
 
   & .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);
   }
 }
 
+// 此处不用2倍图，改用css画虚线
+// z-tree的line是一整块子节点区域，所以不能使用background-size: contain
+// 使用1倍图太模糊，这边就使用css自己画了，calc属性支持IE9, IE8反正会走hack, 不影响
 .ztree li ul.line {
+  position: relative;
+  &:before {
+    position: absolute;
+    content: '';
+    border-left: 1px dashed #D0D4DA;
+    height: calc(~"100% - 3px");
+    left: 12px;
+    margin-top: 1px;
+  }
+}
+
+.ztree.hack li ul.line {
   .imagePath(@icon-tree-vertical-line-1, 0, 1px, repeat-y);
 }
 
@@ -36,6 +63,9 @@
   .ztree li ul.line {
     .imagePath(@icon-tree-vertical-line-1-theme-dark, 0, 1px, repeat-y);
   }
+  .ztree.hack li ul.line {
+    .imagePath(@icon-tree-vertical-line-1-theme-dark, 0, 1px, repeat-y);
+  }
 }
 
 .ztree li span.button.chk.checkbox_false_full {
@@ -103,115 +133,197 @@
 }
 
 .ztree li span.button.root_open {
+  .image2xPath(@icon-tree-expand-type1);
+}
+
+.ztree.hack li span.button.root_open {
   .imagePath(@icon-tree-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 li span.button.root_close {
+  .image2xPath(@icon-tree-collapse-type1);
+}
+
+.ztree.hack li span.button.root_close {
   .imagePath(@icon-tree-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 li span.button.roots_open {
+  .image2xPath(@icon-tree-expand-type2);
+}
+
+.ztree.hack li span.button.roots_open {
   .imagePath(@icon-tree-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 li span.button.roots_close {
+  .image2xPath(@icon-tree-collapse-type2);
+}
+
+.ztree.hack li span.button.roots_close {
   .imagePath(@icon-tree-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 li span.button.center_open {
+  .image2xPath(@icon-tree-expand-type3);
+}
+
+.ztree.hack li span.button.center_open {
   .imagePath(@icon-tree-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 li span.button.center_close {
+  .image2xPath(@icon-tree-collapse-type3);
+}
+
+.ztree.hack li span.button.center_close {
   .imagePath(@icon-tree-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 li span.button.bottom_open {
+  .image2xPath(@icon-tree-expand-type4);
+}
+
+.ztree.hack li span.button.bottom_open {
   .imagePath(@icon-tree-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 li span.button.bottom_close {
+  .image2xPath(@icon-tree-collapse-type4);
+}
+
+.ztree.hack li span.button.bottom_close {
   .imagePath(@icon-tree-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 li span.button.roots_docu {
+  .image2xPath(@icon-tree-vertical-line-2);
+}
+
+.ztree.hack li span.button.roots_docu {
   .imagePath(@icon-tree-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 li span.button.center_docu {
+  .image2xPath(@icon-tree-vertical-line-3);
+}
+
+.ztree.hack li span.button.center_docu {
   .imagePath(@icon-tree-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 li span.button.bottom_docu {
+  .image2xPath(@icon-tree-vertical-line-4);
+}
+
+.ztree.hack li span.button.bottom_docu {
   .imagePath(@icon-tree-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 li span.button.ico_loading {
+  .image2xPath(@icon-loading);
+}
+
+.ztree.hack li span.button.ico_loading {
   .imagePath(@icon-loading);
 }
 

ui/css/background.css

@@ -8,20 +8,46 @@
   background: url('resources?path=/com/fr/web/ui/images/1x/background/marker.png') no-repeat center center;
 }
 .bi-display-tree .ztree li span.button.switch.center_open {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
 }
 .bi-display-tree .ztree li span.button.switch.roots_open {
-  background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
 }
 .bi-display-tree .ztree li span.button.switch.bottom_open {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-display-tree .ztree.hack li span.button.switch.center_open {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+}
+.bi-display-tree .ztree.hack li span.button.switch.roots_open {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+}
+.bi-display-tree .ztree.hack li span.button.switch.bottom_open {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
 }
 .ztree li ul.line {
+  position: relative;
+}
+.ztree li ul.line:before {
+  position: absolute;
+  content: '';
+  border-left: 1px dashed #D0D4DA;
+  height: calc(100% - 3px);
+  left: 12px;
+  margin-top: 1px;
+}
+.ztree.hack li ul.line {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_vertical_line_1.png') repeat-y 1px 0;
 }
 .bi-theme-dark .ztree li ul.line {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
 }
+.bi-theme-dark .ztree.hack li ul.line {
+  background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
+}
 .ztree li span.button.chk.checkbox_false_full {
   background: url('resources?path=/com/fr/web/ui/images/2x/icon/check_box_normal.png') no-repeat center center;
   background-size: contain;
@@ -79,72 +105,164 @@
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/half_selected.png') no-repeat center center;
 }
 .ztree li span.button.root_open {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_expand_1.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.root_open {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_expand_1.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.root_open {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/dark/tree_expand_1.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.root_open {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_expand_1.png') no-repeat center center;
 }
 .ztree li span.button.root_close {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_collapse_1.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.root_close {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_collapse_1.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.root_close {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/dark/tree_collapse_1.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.root_close {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_collapse_1.png') no-repeat center center;
 }
 .ztree li span.button.roots_open {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_expand_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_open {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_expand_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_open {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/dark/tree_expand_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_open {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_expand_2.png') no-repeat center center;
 }
 .ztree li span.button.roots_close {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_collapse_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_close {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_collapse_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_close {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/dark/tree_collapse_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_close {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_collapse_2.png') no-repeat center center;
 }
 .ztree li span.button.center_open {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_expand_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_open {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_expand_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_open {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/dark/tree_expand_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_open {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_expand_3.png') no-repeat center center;
 }
 .ztree li span.button.center_close {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_collapse_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_close {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_collapse_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_close {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/dark/tree_collapse_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_close {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_collapse_3.png') no-repeat center center;
 }
 .ztree li span.button.bottom_open {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_expand_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_open {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_expand_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_open {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/dark/tree_expand_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_open {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_expand_4.png') no-repeat center center;
 }
 .ztree li span.button.bottom_close {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_collapse_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_close {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_collapse_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_close {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/dark/tree_collapse_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_close {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_collapse_4.png') no-repeat center center;
 }
 .ztree li span.button.roots_docu {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.roots_docu {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.roots_docu {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.roots_docu {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
 }
 .ztree li span.button.center_docu {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.center_docu {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.center_docu {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.center_docu {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
 }
 .ztree li span.button.bottom_docu {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.bottom_docu {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
 }
 .bi-theme-dark .ztree li span.button.bottom_docu {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  background-size: contain;
+}
+.bi-theme-dark .ztree.hack li span.button.bottom_docu {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
 }
 .ztree li span.button.ico_loading {
+  background: url('resources?path=/com/fr/web/ui/images/2x/icon/loading.gif') no-repeat center center;
+  background-size: contain;
+}
+.ztree.hack li span.button.ico_loading {
   background: url('resources?path=/com/fr/web/ui/images/1x/icon/loading.gif') no-repeat center center;
 }
 .base-line-conn-background {