树形组件样式优化

src/compenents/tree-category/index.tsx

@@ -1,7 +1,6 @@
 import { Button, Input, message, Tree } from "antd";
 import { useState, useEffect } from "react";
 import { resourceCategory } from "../../api/index";
-import type { TreeProps } from "antd/es/tree";
 
 interface Option {
   key: string | number;
@@ -64,18 +63,6 @@ export const TreeCategory = (props: PropInterface) => {
     setSelectKey(selectedKeys);
   };
 
-  const onDragEnter: TreeProps["onDragEnter"] = (info) => {
-    console.log(info);
-    // expandedKeys 需要受控时设置
-    // setExpandedKeys(info.expandedKeys)
-  };
-
-  const onDrop: TreeProps["onDrop"] = (info) => {
-    console.log(info);
-    // expandedKeys 需要受控时设置
-    // setExpandedKeys(info.expandedKeys)
-  };
-
   return (
     <div>
       <div
@@ -88,13 +75,7 @@ export const TreeCategory = (props: PropInterface) => {
       >
         全部{props.text}
       </div>
-      <Tree
-        onSelect={onSelect}
-        treeData={treeData}
-        draggable
-        onDragEnter={onDragEnter}
-        onDrop={onDrop}
-      />
+      <Tree  onSelect={onSelect} treeData={treeData} />
     </div>
   );
 };

src/compenents/tree-department/index.tsx

@@ -1,7 +1,6 @@
 import { Button, Input, message, Tree } from "antd";
 import { useState, useEffect } from "react";
 import { department } from "../../api/index";
-import type { TreeProps } from "antd/es/tree";
 
 interface Option {
   key: string | number;
@@ -56,25 +55,5 @@ export const TreeDepartment = (props: PropInterface) => {
     props.onUpdate(selectedKeys);
   };
 
-  const onDragEnter: TreeProps["onDragEnter"] = (info) => {
-    console.log(info);
-    // expandedKeys 需要受控时设置
-    // setExpandedKeys(info.expandedKeys)
-  };
-
-  const onDrop: TreeProps["onDrop"] = (info) => {
-    console.log(info);
-    // expandedKeys 需要受控时设置
-    // setExpandedKeys(info.expandedKeys)
-  };
-
-  return (
-    <Tree
-      onSelect={onSelect}
-      treeData={treeData}
-      draggable
-      onDragEnter={onDragEnter}
-      onDrop={onDrop}
-    />
-  );
+  return <Tree onSelect={onSelect} treeData={treeData} />;
 };

src/index.less

@@ -327,3 +327,33 @@ textarea.ant-input {
 .c-gray {
   color: rgba(#333333, 0.3);
 }
+
+.ant-tree-treenode {
+  width: 100% !important;
+  height: 40px !important;
+  padding: 0 !important;
+  margin-bottom: 8px !important;
+  display: flex;
+  align-items: center !important;
+  &.ant-tree-treenode-selected {
+    background-color: #fff2f0 !important;
+    border-radius: 6px !important;
+    overflow: hidden;
+  }
+  &:hover {
+    border-radius: 6px !important;
+    overflow: hidden;
+  }
+  .ant-tree-node-content-wrapper-normal {
+    width: 100% !important;
+    height: 40px !important;
+    display: flex;
+    align-items: center;
+    
+  }
+  .ant-tree-switcher {
+    height: 40px !important;
+    display: flex;
+    align-items: center;
+  }
+}