From 0f5e7fd9c1e2640dfea7a0b5be6a642657a84a44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Tue, 21 Mar 2023 14:30:46 +0800
Subject: [PATCH] =?UTF-8?q?tree=E7=BB=84=E4=BB=B6=E5=88=9D=E6=AD=A5?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/compenents/tree-category/index.tsx        |   1 +
 src/compenents/tree-department/index.tsx      |   1 +
 src/index.less                                |  25 +++-
 src/pages/department/index.tsx                | 115 ++++++++--------
 .../resource/resource-category/index.tsx      | 127 +++++++++---------
 5 files changed, 152 insertions(+), 117 deletions(-)

diff --git a/src/compenents/tree-category/index.tsx b/src/compenents/tree-category/index.tsx
index a4bb1a3..484bee1 100644
--- a/src/compenents/tree-category/index.tsx
+++ b/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>
   );
diff --git a/src/compenents/tree-department/index.tsx b/src/compenents/tree-department/index.tsx
index 14fd668..e64d1c1 100644
--- a/src/compenents/tree-department/index.tsx
+++ b/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>
   );
diff --git a/src/index.less b/src/index.less
index f3a573b..776aa09 100644
--- a/src/index.less
+++ b/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;
 }
 
@@ -513,7 +519,7 @@ textarea.ant-input {
 }
 
 .tree-title-elli {
-  max-width:100px;
+  max-width: 100px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -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);
+  }
+}
diff --git a/src/pages/department/index.tsx b/src/pages/department/index.tsx
index 8620eee..846399e 100644
--- a/src/pages/department/index.tsx
+++ b/src/pages/department/index.tsx
@@ -72,32 +72,34 @@ export const DepartmentPage: React.FC = () => {
       if (!departments[departments[id][i].id]) {
         arr.push({
           title: (
-            <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"
-                  style={{ fontSize: 24 }}
-                />
-              </Tooltip>
-              {through("department-cud") && (
-                <>
+            <>
+              <div className="w-174px mr-24">{departments[id][i].name}</div>
+              <div className="d-flex">
+                <Tooltip placement="top" title="可拖拽排序">
                   <i
-                    className="iconfont icon-icon-edit mr-16"
+                    className="iconfont icon-icon-drag mr-16"
                     style={{ fontSize: 24 }}
-                    onClick={() => {
-                      setDid(departments[id][i].id);
-                      setUpdateVisible(true);
-                    }}
                   />
-                  <i
-                    className="iconfont icon-icon-delete"
-                    style={{ fontSize: 24 }}
-                    onClick={() => removeItem(departments[id][i].id)}
-                  />
-                </>
-              )}
-            </div>
+                </Tooltip>
+                {through("department-cud") && (
+                  <>
+                    <i
+                      className="iconfont icon-icon-edit mr-16"
+                      style={{ fontSize: 24 }}
+                      onClick={() => {
+                        setDid(departments[id][i].id);
+                        setUpdateVisible(true);
+                      }}
+                    />
+                    <i
+                      className="iconfont icon-icon-delete"
+                      style={{ fontSize: 24 }}
+                      onClick={() => removeItem(departments[id][i].id)}
+                    />
+                  </>
+                )}
+              </div>
+            </>
           ),
           key: departments[id][i].id,
         });
@@ -105,32 +107,34 @@ export const DepartmentPage: React.FC = () => {
         const new_arr: Option[] = checkArr(departments, departments[id][i].id);
         arr.push({
           title: (
-            <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"
-                  style={{ fontSize: 24 }}
-                />
-              </Tooltip>
-              {through("department-cud") && (
-                <>
+            <>
+              <div className="w-174px mr-24">{departments[id][i].name}</div>
+              <div className="d-flex">
+                <Tooltip placement="top" title="可拖拽排序">
                   <i
-                    className="iconfont icon-icon-edit mr-16"
+                    className="iconfont icon-icon-drag mr-16"
                     style={{ fontSize: 24 }}
-                    onClick={() => {
-                      setDid(departments[id][i].id);
-                      setUpdateVisible(true);
-                    }}
                   />
-                  <i
-                    className="iconfont icon-icon-delete"
-                    style={{ fontSize: 24 }}
-                    onClick={() => removeItem(departments[id][i].id)}
-                  />
-                </>
-              )}
-            </div>
+                </Tooltip>
+                {through("department-cud") && (
+                  <>
+                    <i
+                      className="iconfont icon-icon-edit mr-16"
+                      style={{ fontSize: 24 }}
+                      onClick={() => {
+                        setDid(departments[id][i].id);
+                        setUpdateVisible(true);
+                      }}
+                    />
+                    <i
+                      className="iconfont icon-icon-delete"
+                      style={{ fontSize: 24 }}
+                      onClick={() => removeItem(departments[id][i].id)}
+                    />
+                  </>
+                )}
+              </div>
+            </>
           ),
           key: departments[id][i].id,
           children: new_arr,
@@ -364,14 +368,17 @@ export const DepartmentPage: React.FC = () => {
         </div>
       </div>
       <div className="playedu-main-body">
-        <Tree
-          onSelect={onSelect}
-          treeData={treeData}
-          draggable
-          blockNode
-          onDragEnter={onDragEnter}
-          onDrop={onDrop}
-        />
+        <div style={{ width: 366 }}>
+          <Tree
+            onSelect={onSelect}
+            treeData={treeData}
+            draggable
+            blockNode
+            onDragEnter={onDragEnter}
+            onDrop={onDrop}
+            switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
+          />
+        </div>
         <DepartmentCreate
           open={createVisible}
           onCancel={() => {
diff --git a/src/pages/resource/resource-category/index.tsx b/src/pages/resource/resource-category/index.tsx
index f28cda8..1943ba2 100644
--- a/src/pages/resource/resource-category/index.tsx
+++ b/src/pages/resource/resource-category/index.tsx
@@ -70,32 +70,34 @@ export const ResourceCategoryPage: React.FC = () => {
       if (!categories[categories[id][i].id]) {
         arr.push({
           title: (
-            <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"
-                  style={{ fontSize: 24 }}
-                />
-              </Tooltip>
-              {through("resource-category") && (
-                <i
-                  className="iconfont icon-icon-edit mr-16"
-                  style={{ fontSize: 24 }}
-                  onClick={() => {
-                    setCid(categories[id][i].id);
-                    setUpdateVisible(true);
-                  }}
-                />
-              )}
-              {through("resource-destroy") && (
-                <i
-                  className="iconfont icon-icon-delete"
-                  style={{ fontSize: 24 }}
-                  onClick={() => removeItem(categories[id][i].id)}
-                />
-              )}
-            </div>
+            <>
+              <div className="w-174px mr-24">{categories[id][i].name}</div>
+              <div className="d-flex">
+                <Tooltip placement="top" title="可拖拽排序">
+                  <i
+                    className="iconfont icon-icon-drag mr-16"
+                    style={{ fontSize: 24 }}
+                  />
+                </Tooltip>
+                {through("resource-category") && (
+                  <i
+                    className="iconfont icon-icon-edit mr-16"
+                    style={{ fontSize: 24 }}
+                    onClick={() => {
+                      setCid(categories[id][i].id);
+                      setUpdateVisible(true);
+                    }}
+                  />
+                )}
+                {through("resource-destroy") && (
+                  <i
+                    className="iconfont icon-icon-delete"
+                    style={{ fontSize: 24 }}
+                    onClick={() => removeItem(categories[id][i].id)}
+                  />
+                )}
+              </div>
+            </>
           ),
           key: categories[id][i].id,
         });
@@ -103,32 +105,34 @@ export const ResourceCategoryPage: React.FC = () => {
         const new_arr: Option[] = checkArr(categories, categories[id][i].id);
         arr.push({
           title: (
-            <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"
-                  style={{ fontSize: 24 }}
-                />
-              </Tooltip>
-              {through("resource-category") && (
-                <i
-                  className="iconfont icon-icon-edit mr-16"
-                  style={{ fontSize: 24 }}
-                  onClick={() => {
-                    setCid(categories[id][i].id);
-                    setUpdateVisible(true);
-                  }}
-                />
-              )}
-              {through("resource-destroy") && (
-                <i
-                  className="iconfont icon-icon-delete"
-                  style={{ fontSize: 24 }}
-                  onClick={() => removeItem(categories[id][i].id)}
-                />
-              )}
-            </div>
+            <>
+              <div className="w-174px mr-24">{categories[id][i].name}</div>
+              <div className="d-flex">
+                <Tooltip placement="top" title="可拖拽排序">
+                  <i
+                    className="iconfont icon-icon-drag mr-16"
+                    style={{ fontSize: 24 }}
+                  />
+                </Tooltip>
+                {through("resource-category") && (
+                  <i
+                    className="iconfont icon-icon-edit mr-16"
+                    style={{ fontSize: 24 }}
+                    onClick={() => {
+                      setCid(categories[id][i].id);
+                      setUpdateVisible(true);
+                    }}
+                  />
+                )}
+                {through("resource-destroy") && (
+                  <i
+                    className="iconfont icon-icon-delete"
+                    style={{ fontSize: 24 }}
+                    onClick={() => removeItem(categories[id][i].id)}
+                  />
+                )}
+              </div>
+            </>
           ),
           key: categories[id][i].id,
           children: new_arr,
@@ -372,14 +376,17 @@ export const ResourceCategoryPage: React.FC = () => {
         </div>
       </div>
       <div className="playedu-main-body">
-        <Tree
-          onSelect={onSelect}
-          treeData={treeData}
-          draggable
-          blockNode
-          onDragEnter={onDragEnter}
-          onDrop={onDrop}
-        />
+        <div style={{ width: 366 }}>
+          <Tree
+            onSelect={onSelect}
+            treeData={treeData}
+            draggable
+            blockNode
+            onDragEnter={onDragEnter}
+            onDrop={onDrop}
+            switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
+          />
+        </div>
         <ResourceCategoryCreate
           open={createVisible}
           onCancel={() => {