tree组件初步优化

src/compenents/tree-category/index.tsx

@@ -120,6 +120,7 @@ export const TreeCategory = (props: PropInterface) => {
         selectedKeys={selectKey}
         onExpand={onExpand}
         treeData={treeData}
+        switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
       />
     </div>
   );

src/compenents/tree-department/index.tsx

@@ -94,6 +94,7 @@ export const TreeDepartment = (props: PropInterface) => {
         onSelect={onSelect}
         onExpand={onExpand}
         treeData={treeData}
+        switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
       />
     </div>
   );

src/index.less

@@ -22,6 +22,13 @@ code {
     monospace;
 }
 
+.w-174px {
+  max-width: 174px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .w-250px {
   width: 250px;
 }
@@ -447,7 +454,6 @@ textarea.ant-input {
     }
   }
   .ant-tree-switcher {
-    padding-left: 9px;
     height: 40px !important;
     display: flex;
     align-items: center;
@@ -469,7 +475,7 @@ textarea.ant-input {
 }
 
 .ant-tree-switcher {
-  padding-left: 4px;
+  padding-left: 6px;
   position: relative;
 }
 
@@ -586,3 +592,16 @@ textarea.ant-input {
     opacity: 0.8;
   }
 }
+
+.ant-tree-switcher_close {
+  .c-gray {
+    color: rgba(0, 0, 0, 0.3);
+  }
+}
+
+.ant-tree-switcher_open {
+  .c-gray {
+    color: rgba(0, 0, 0, 0.3);
+    transform: rotate(90deg);
+  }
+}

src/pages/department/index.tsx

@@ -72,8 +72,9 @@ export const DepartmentPage: React.FC = () => {
       if (!departments[departments[id][i].id]) {
         arr.push({
           title: (
+            <>
+              <div className="w-174px mr-24">{departments[id][i].name}</div>
               <div className="d-flex">
-              <div className="w-250px mr-24">{departments[id][i].name}</div>
                 <Tooltip placement="top" title="可拖拽排序">
                   <i
                     className="iconfont icon-icon-drag mr-16"
@@ -98,6 +99,7 @@ export const DepartmentPage: React.FC = () => {
                   </>
                 )}
               </div>
+            </>
           ),
           key: departments[id][i].id,
         });
@@ -105,8 +107,9 @@ export const DepartmentPage: React.FC = () => {
         const new_arr: Option[] = checkArr(departments, departments[id][i].id);
         arr.push({
           title: (
+            <>
+              <div className="w-174px mr-24">{departments[id][i].name}</div>
               <div className="d-flex">
-              <div className="w-250px mr-24">{departments[id][i].name}</div>
                 <Tooltip placement="top" title="可拖拽排序">
                   <i
                     className="iconfont icon-icon-drag mr-16"
@@ -131,6 +134,7 @@ export const DepartmentPage: React.FC = () => {
                   </>
                 )}
               </div>
+            </>
           ),
           key: departments[id][i].id,
           children: new_arr,
@@ -364,6 +368,7 @@ export const DepartmentPage: React.FC = () => {
         </div>
       </div>
       <div className="playedu-main-body">
+        <div style={{ width: 366 }}>
           <Tree
             onSelect={onSelect}
             treeData={treeData}
@@ -371,7 +376,9 @@ export const DepartmentPage: React.FC = () => {
             blockNode
             onDragEnter={onDragEnter}
             onDrop={onDrop}
+            switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
           />
+        </div>
         <DepartmentCreate
           open={createVisible}
           onCancel={() => {

src/pages/resource/resource-category/index.tsx

@@ -70,8 +70,9 @@ export const ResourceCategoryPage: React.FC = () => {
       if (!categories[categories[id][i].id]) {
         arr.push({
           title: (
+            <>
+              <div className="w-174px mr-24">{categories[id][i].name}</div>
               <div className="d-flex">
-              <div className="w-250px mr-24">{categories[id][i].name}</div>
                 <Tooltip placement="top" title="可拖拽排序">
                   <i
                     className="iconfont icon-icon-drag mr-16"
@@ -96,6 +97,7 @@ export const ResourceCategoryPage: React.FC = () => {
                   />
                 )}
               </div>
+            </>
           ),
           key: categories[id][i].id,
         });
@@ -103,8 +105,9 @@ export const ResourceCategoryPage: React.FC = () => {
         const new_arr: Option[] = checkArr(categories, categories[id][i].id);
         arr.push({
           title: (
+            <>
+              <div className="w-174px mr-24">{categories[id][i].name}</div>
               <div className="d-flex">
-              <div className="w-250px mr-24">{categories[id][i].name}</div>
                 <Tooltip placement="top" title="可拖拽排序">
                   <i
                     className="iconfont icon-icon-drag mr-16"
@@ -129,6 +132,7 @@ export const ResourceCategoryPage: React.FC = () => {
                   />
                 )}
               </div>
+            </>
           ),
           key: categories[id][i].id,
           children: new_arr,
@@ -372,6 +376,7 @@ export const ResourceCategoryPage: React.FC = () => {
         </div>
       </div>
       <div className="playedu-main-body">
+        <div style={{ width: 366 }}>
           <Tree
             onSelect={onSelect}
             treeData={treeData}
@@ -379,7 +384,9 @@ export const ResourceCategoryPage: React.FC = () => {
             blockNode
             onDragEnter={onDragEnter}
             onDrop={onDrop}
+            switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
           />
+        </div>
         <ResourceCategoryCreate
           open={createVisible}
           onCancel={() => {