tree组件初步优化

src/compenents/tree-category/index.tsx

@@ -31,12 +31,10 @@ export const TreeCategory = (props: PropInterface) => {
           new_arr.unshift({
             key: 0,
             title: (
-              <div className="d-flex">
-                未分类
-                <span className="tree-num">
-                  ({props.categoryCount[0] || 0})
-                </span>
-              </div>
+              <>
+                <span>未分类</span>
+                <span className="tree-num">{props.categoryCount[0] || 0}</span>
+              </>
             ),
           });
         }
@@ -51,12 +49,12 @@ export const TreeCategory = (props: PropInterface) => {
     for (let i = 0; i < categories[id].length; i++) {
       if (!categories[categories[id][i].id]) {
         let name = (
-          <div className="d-flex">
-            {categories[id][i].name}
+          <>
+            <span className="tree-title-elli">{categories[id][i].name}</span>
             <span className="tree-num">
-              ({props.categoryCount[categories[id][i].id] || 0})
+              {props.categoryCount[categories[id][i].id] || 0}
             </span>
-          </div>
+          </>
         );
         arr.push({
           title: name,
@@ -64,12 +62,12 @@ export const TreeCategory = (props: PropInterface) => {
         });
       } else {
         let name = (
-          <div className="d-flex">
-            {categories[id][i].name}
+          <>
+            <span className="tree-title-elli">{categories[id][i].name}</span>
             <span className="tree-num">
-              ({props.categoryCount[categories[id][i].id] || 0})
+              {props.categoryCount[categories[id][i].id] || 0}
             </span>
-          </div>
+          </>
         );
         const new_arr: Option[] = checkArr(categories, categories[id][i].id);
         arr.push({
@@ -112,8 +110,10 @@ export const TreeCategory = (props: PropInterface) => {
           onSelect([], "");
         }}
       >
-        全部{props.text}
-        <span className="tree-num">({props.resourceTotal})</span>
+        <div className="j-b-flex">
+          <span>全部{props.text}</span>
+          <span className="tree-num-total">{props.resourceTotal}</span>
+        </div>
       </div>
       <Tree
         onSelect={onSelect}

src/index.less

@@ -58,6 +58,10 @@ code {
   margin-left: 8px;
 }
 
+.mr-8 {
+  margin-right: 8px;
+}
+
 .mt-10 {
   margin-top: 10px;
 }
@@ -450,6 +454,10 @@ textarea.ant-input {
 }
 
 .ant-tree-title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   .iconfont {
     color: rgba(0, 0, 0, 0.2);
     cursor: pointer;
@@ -463,20 +471,6 @@ textarea.ant-input {
   padding-left: 4px;
   position: relative;
 }
-.ant-tree-switcher_open::before,
-.ant-tree-switcher_close::before {
-  z-index: 100;
-  content: "";
-  position: absolute;
-  right: -200px;
-  top: 0;
-  left: 0;
-  bottom: 0;
-}
-.ant-tree-switcher_open::after,
-.ant-tree-switcher_close::after {
-  z-index: 0;
-}
 
 .ant-modal-confirm-btns > .ant-btn-default:hover {
   color: #ff4d4f !important;
@@ -504,7 +498,24 @@ textarea.ant-input {
 }
 
 .tree-num {
+  width: auto;
+  display: block;
   color: rgba(0, 0, 0, 0.45);
+  margin-right: 4px;
+}
+
+.tree-num-total {
+  width: auto;
+  display: block;
+  color: rgba(0, 0, 0, 0.45);
+  margin-right: 8px;
+}
+
+.tree-title-elli {
+  max-width:100px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .ant-tabs {