fix: Fix the tree component echo issue on the file details page (#1167)

* fix: Fix the tree component echo issue on the file details page

* fix: Optimize the loading effect

Author: larissa-la

moon/apps/web/components/CodeView/TreeView/RepoTree.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import ArticleIcon from '@mui/icons-material/Article';
 import FolderRounded from '@mui/icons-material/FolderRounded';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
-import { Box, CircularProgress } from '@mui/material';
+import { Box, CircularProgress, Skeleton } from '@mui/material';
 import {
   TreeItemDragAndDropOverlay,
   TreeItemIcon,
@@ -170,9 +170,11 @@ const RepoTree = ( {flag, directory }: {flag:string, directory: any[] }) => {
     }
 
     return sortProjectsByType(directory).map((item) => {
-      
+    
       const nodeName = item?.name ?? ''; 
-      const currentPath = `${parentBasePath}/${nodeName}`.replace('//', '/') || '/';
+      const currentPath = flag === 'contents' ?
+      `${parentBasePath}/${nodeName}`.replace('//', '/') || '/'
+      : `${parentBasePath}`.replace('//', '/') || '/'
 
       // eslint-disable-next-line no-console
       // console.log('生成节点路径:', nodeName, '=>', currentPath);
@@ -192,7 +194,7 @@ const RepoTree = ( {flag, directory }: {flag:string, directory: any[] }) => {
         ] : undefined,
       };
     });
-  }, []); 
+  }, [flag]); 
 
   useEffect(() => {
     if (!Array.isArray(directory) || directory.length === 0) {
@@ -205,7 +207,7 @@ const RepoTree = ( {flag, directory }: {flag:string, directory: any[] }) => {
 
     setTreeData(convertToTreeData(rootPath, directory));
     setIsInitialLoading(false);
-  }, [directory, convertToTreeData,basePath]);
+  }, [directory, convertToTreeData, basePath]);
 
   const sortProjectsByType = (projects: any[]) => {
     if (!Array.isArray(projects) || projects.length === 0) {
@@ -230,8 +232,9 @@ const RepoTree = ( {flag, directory }: {flag:string, directory: any[] }) => {
         // console.warn('updateTreeData: 接收到非数组或空的当前树数据', currentTree);
         return [];
       }
-      
+
       return currentTree.map((node) => {
+
         if (node.id === nodeId) {
           return {
             ...node,
@@ -363,23 +366,25 @@ const RepoTree = ( {flag, directory }: {flag:string, directory: any[] }) => {
 
   return (
     <>
-      {isInitialLoading ? (
+      {isInitialLoading? (
         <Box sx={{ display: 'flex', justifyContent: 'center', padding: '16px' }}>
-          <CircularProgress />
+          <CircularProgress  size="1.2rem" color="inherit"/>
         </Box>
-      ) : treeData.length === 0 ? (
-        <Box sx={{ color: 'text.secondary', padding: '16px' }}>
-          no data
+      ) 
+      : treeData.length === 0 ? (
+        <Box sx={{ display: 'flex', paddingLeft:'16px' }}>
+          <Skeleton width="200px" height="30px"/>
         </Box>
-      ) : (
+      ) 
+      : (
         <RichTreeView
           items={treeData}
           defaultExpandedItems={['grid', 'pickers']}
           expandedItems={expandedNodes}
           selectedItems={selectedNode}
           onExpandedItemsChange={handleNodeToggle}
           onSelectedItemsChange={handleNodeSelect}
-          sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+          sx={{ height: 'fit-content', flexGrow: 1, Width: 400, overflowY: 'auto' }}
           slots={{
             item: (itemProps) => (
               <CustomTreeItem 

moon/apps/web/pages/[org]/code/blob/[...path].tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 import { Flex, Layout } from 'antd'
 import BreadCrumb from '@/components/CodeView/TreeView/BreadCrumb'
 import CodeContent from '@/components/CodeView/BlobView/CodeContent'
@@ -14,17 +14,16 @@ import { useGetTreeCommitInfo } from '@/hooks/useGetTreeCommitInfo'
 
 const codeStyle = {
   borderRadius: 8,
-  width: 'calc(85% - 8px)',
   background: '#fff',
   border: '1px solid #d1d9e0',
-  margin: '0 8px'
+  margin: '0 8px',
+  width: 'calc(80% - 8px)',
 }
 
 const treeStyle = {
   borderRadius: 8,
   overflow: 'hidden',
   width: 'calc(20% - 8px)',
-  maxWidth: 'calc(20% - 8px)',
   background: '#fff'
 }
 
@@ -89,35 +88,22 @@ function BlobPage() {
     date: '3 months ago'
   }
 
-  const newPath = new_path?.split("/").slice(0, -1).join("/")
+  const newPath = useMemo(() => {
+    return new_path?.split("/").slice(0, -1).join("/");
+  }, [new_path]);
   const { data: TreeCommitInfo } = useGetTreeCommitInfo(newPath)
+
 
   type DirectoryType = NonNullable<CommonResultVecTreeCommitItem['data']>
   const directory: DirectoryType = useMemo(() => TreeCommitInfo?.data ?? [], [TreeCommitInfo])
-  const [newDirectory, setNewDirectory] = useState<any[]>([])
-
-  // eslint-disable-next-line no-console
-  console.log(directory, 'directory==directory')
 
-  useEffect(()=>{
-    const handleDirectory = () => {
-      const filteredItems = directory.filter((item) => {
-        return item.content_type !== 'directory';
-      });
+  const newDirectory = useMemo(() => {
+    if (!directory || directory.length === 0) return [];
 
-      // eslint-disable-next-line no-console
-      console.log(filteredItems, 'filteredItems==');
-      setNewDirectory(filteredItems); // 直接设置过滤后的数组，而非嵌套数组
-    };
-
-    handleDirectory()
+    const currentFileName = new_path.split('/').pop() || '';
 
-  },[directory, setNewDirectory])
-
-
-
-
-
+    return directory.filter(item => item.name === currentFileName);
+  }, [directory, new_path]);
 
 
   const handleAddComment = (__content: string, __lineNumber?: number) => {
@@ -141,7 +127,7 @@ function BlobPage() {
           <RepoTree  flag={'detail'} directory={newDirectory} />
         </Layout>
 
-        <Layout style={{background: '#fff'}}>
+        <Layout style={codeStyle}>
           <Layout className='m-2'>
             <CommitHistory flag={'details'} info={commitInfo}/>
           </Layout>

moon/apps/web/pages/[org]/code/tree/[...path]/index.tsx

@@ -45,13 +45,11 @@ function TreeDetailPage() {
     date: '3 months ago'
   }
 
-
-
   const treeStyle = {
     borderRadius: 8,
     overflow: 'hidden',
     width: 'calc(20% - 8px)',
-    maxWidth: 'calc(20% - 8px)',
+    minWidth: 'calc(20% - 8px)',
     background: '#fff'
   }