KERNEL-10683 fix: 树的样式调整,支持等比缩放..

src/case/button/node/siwtcher.tree.node.js

@@ -29,13 +29,13 @@ BI.TreeNodeSwitcher = BI.inherit(BI.NodeButton, {
             return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type1", "tree-expand-icon-type1"];
         } else if (options.layer === 0 && options.isFirstNode) {
             //  第一层，并且是第一个节点
-            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type2", "tree-solid-expand-icon-type2"] : ["tree-collapse-icon-type2", "tree-expand-icon-type2"];
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type2", "tree-expand-icon-type2"];
         } else if (options.isLastNode) {
             //  最后一个节点
-            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type4", "tree-solid-expand-icon-type4"] : ["tree-collapse-icon-type4", "tree-expand-icon-type4"];
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type3", "tree-expand-icon-type3"];
         } else {
             //  其他情况
-            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type3", "tree-solid-expand-icon-type3"] : ["tree-collapse-icon-type3", "tree-expand-icon-type3"];
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type4", "tree-expand-icon-type4"];
         }
     },
 

src/case/button/treeitem/treeitem.js

@@ -57,11 +57,11 @@ BI.BasicTreeItem = BI.inherit(BI.NodeButton, {
         if (options.layer === 0 && options.isFirstNode && options.isLastNode) {
             return "";
         } else if (options.layer === 0 && options.isFirstNode) {
-            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "first-solid-line-conn-background" : "first-line-conn-background";
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-first-solid-line-conn-background" : "first-line-conn-background";
         } else if (options.isLastNode) {
-            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "last-solid-line-conn-background" : "last-line-conn-background";
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-last-solid-line-conn-background" : "last-line-conn-background";
         } else {
-            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "mid-solid-line-conn-background" : "mid-line-conn-background";
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-mid-solid-line-conn-background" : "mid-line-conn-background";
         }
     },
 

src/less/case/tree/tree.item.less

@@ -0,0 +1,67 @@
+@import "../../index.less";
+
+.tree-first-solid-line-conn-background, .tree-mid-solid-line-conn-background {
+  &:before {
+    position: absolute;
+    top: 0;
+    left: -1px;
+    width: 50%;
+    height: 100%;
+    border-right: 1px solid @border-color-dark-gray-line;
+    content: '';
+  }
+
+  &:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 50%;
+    width: 50%;
+    border-bottom: 1px solid @border-color-dark-gray-line;
+    content: '';
+  }
+}
+
+.tree-last-solid-line-conn-background {
+  &:before {
+    position: absolute;
+    top: 0;
+    left: -1px;
+    width: 50%;
+    height: 50%;
+    border-right: 1px solid @border-color-dark-gray-line;
+    content: '';
+  }
+
+  &:after {
+    position: absolute;
+    top: 0;
+    right: 1px;
+    height: 50%;
+    width: 50%;
+    border-bottom: 1px solid @border-color-dark-gray-line;
+    content: '';
+  }
+}
+
+.bi-theme-dark {
+  .tree-first-solid-line-conn-background, .tree-mid-solid-line-conn-background {
+    &:before {
+      border-right: 1px solid @border-color-dark-gray-line-theme-dark;
+    }
+
+    &:after {
+      border-bottom: 1px solid @border-color-dark-gray-line-theme-dark;
+    }
+  }
+
+  .tree-last-solid-line-conn-background {
+    &:before {
+      border-right: 1px solid @border-color-dark-gray-line-theme-dark;
+    }
+
+    &:after {
+      border-bottom: 1px solid @border-color-dark-gray-line-theme-dark;
+    }
+  }
+}

webpack/attachments.js

@@ -31,6 +31,7 @@ const basicAttachmentMap = {
     // 实现好的一些基础实例
     case: sync([
         "src/case/**/*.js",
+        "src/less/case/**/*.less",
     ]),
     widget: sync([
         "src/less/widget/**/*.less",
@@ -90,6 +91,7 @@ const basicAttachmentMap = {
         "src/less/core/**/*.less",
         "src/less/theme/**/*.less",
         "src/less/base/**/*.less",
+        "src/less/case/**/*.less",
         "src/less/widget/**/*.less",
         "src/less/component/**/*.less",
     ]),
@@ -139,6 +141,7 @@ const bundleWithoutNormalize = [].concat(
     basicAttachmentMap.core_without_normalize,
     sync([
         "src/less/base/**/*.less",
+        "src/less/case/**/*.less",
         "src/less/widget/**/*.less",
         "src/less/component/**/*.less",
         "public/less/**/*.less",
@@ -152,6 +155,7 @@ const fineuiWithoutNormalize = [].concat(
     basicAttachmentMap.core_without_normalize,
     sync([
         "src/less/base/**/*.less",
+        "src/less/case/**/*.less",
         "src/less/widget/**/*.less",
         "src/less/component/**/*.less",
         'ui/less/app.less',