feat: 完成树组件的封装

src/components/mui/MyTreeView.tsx

+import TreeView from '@mui/lab/TreeView';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import TreeItem from '@mui/lab/TreeItem';
+
+
+type MyTreeViewProps = {
+    treeData: RenderTree
+    onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
+    onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
+    onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
+    renderLabel?: (labelNmae: string) => React.ReactNode
+    treeViewSx?: any
+}
+
+interface RenderTree {
+    id: string | number;
+    name: string;
+    children?: readonly RenderTree[];
+}
+
+
+const MyTreeView = (props: MyTreeViewProps) => {
+    const {treeData, renderLabel, treeViewSx, onNodeFocus, onNodeSelect, onNodeToggle} = props
+
+    const renderTree = (nodes: RenderTree) => (
+        <TreeItem key={nodes.id} nodeId={String(nodes.id)} label={renderLabel === undefined ? nodes.name : renderLabel(nodes.name)}>
+            {Array.isArray(nodes.children)
+            ? nodes.children.map((node) => renderTree(node))
+            : null}
+        </TreeItem>
+    );
+
+    return (
+        <TreeView
+        defaultCollapseIcon={<ArrowRightIcon />}
+        defaultExpandIcon={<ArrowDropDownIcon />}
+        sx={{ treeViewSx }}
+        onNodeFocus={onNodeFocus}
+        onNodeSelect={onNodeSelect}
+        onNodeToggle={onNodeToggle}
+        >
+            {renderTree(treeData)}
+        </TreeView>
+    );
+};
+
+export default MyTreeView;

src/views/Project/ProjectData/index.module.css

@@ -88,3 +88,18 @@
   justify-content: flex-end;
   align-items: center;
 }
+
+
+
+
+
+
+.treeLabel{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  line-height: 44px;
+}
+.labelFolderIcon{
+  margin-right: 9px;
+}
\ No newline at end of file

src/views/Project/ProjectData/index.tsx

@@ -21,6 +21,13 @@ import useMyRequest from "@/hooks/useMyRequest";
 import { observer } from "mobx-react-lite";
 import { useStores } from "@/store";
 import CloudEController from "@/api/fileserver/CloudEController";
+import MyTreeView from "@/components/mui/MyTreeView";
+// import TreeView from '@mui/lab/TreeView';
+// import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+// import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+// import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+// import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+// import TreeItem from '@mui/lab/TreeItem';
 
 const theme = createTheme({
   palette: {
@@ -65,7 +72,7 @@ const ProjectData = observer(() => {
 
   useEffect(() => {
     if (fileToken) {
-      CloudEController.JobOutFileList(path, false, fileToken);
+      // CloudEController.JobOutFileList(path, false, fileToken);
       // 老项目测试环境
       // https://fileserver.cloudam.cn/list/?username=6c8928fa719940dc964cf17a029b36c5&token=d1b07aa2-0b29-48ca-ad28-bb41af3bcbb1&filetoken=%2FMm%2BLhFrOpEDp0neVeESSD%2F45aY%3D&share=false&showhidden=false
       // 新项目本地
@@ -182,9 +189,58 @@ const ProjectData = observer(() => {
     addFolderRef.current.showDialog();
   };
 
+  const renderLabel = (labelNmae: string) => {
+    return (
+      <span className={style.treeLabel}>
+        <img className={style.labelFolderIcon} src={folderIcon} alt="" />
+        {labelNmae}</span>
+    )
+  }
+
+  const treeData = {
+      id: 1232,
+      name: 'na567me',
+      children: [
+        {
+          id: 1232358,
+          name: 'nam89e4123',
+        },
+        {
+          id: 1232395,
+          name: 'nam89e32123',
+        },
+        {
+          id: 1232035,
+          name: 'n2am89e123',
+        }
+      ]
+    }
+
+    const onNodeFocus = (a: any, b: any) => {
+      console.log('onNodeFocus', a, b)
+    }
+    const onNodeSelect = (a: any, b: any) => {
+      console.log('onNodeSelect', a, b)
+    }
+    const onNodeToggle = (a: any, b: any) => {
+      console.log('onNodeToggle', a, b)
+    }
+
+    // onNodeSelect
+    // onNodeToggle
+    
+    
+
   return (
     <ThemeProvider theme={theme}>
       <div className={style.projectData}>
+      <MyTreeView
+        treeData={treeData}
+        renderLabel={renderLabel}
+        onNodeFocus={onNodeFocus}
+        onNodeSelect={onNodeSelect}
+        onNodeToggle={onNodeToggle}
+      ></MyTreeView>
         <div className={style.projectDataStickyTop}>
           <div className={style.projectDataTitle}>项目数据</div>
           <div className={style.projectDataHeader}>