fix(UI):Fixed bugs related to tree component folder expansion and route jump

moon/apps/web/components/CodeView/BlobView/CodeContent.tsx

@@ -202,9 +202,11 @@ const CodeContent = ({ fileContent, path }: { fileContent: string; path?: string
               backgroundColor: '#fff',
               padding: '16px',
               paddingTop: '30px',
-              userSelect: 'text'
+              userSelect: 'text',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all'
             }}
-            className='overflow-x-auto whitespace-pre rounded-lg p-4 text-sm'
+            className='overflow-x-auto rounded-lg p-4 text-sm'
           >
             {/* <Button icon={<DotsHorizontal />} size={'sm'} className='flex h-6 w-6 p-0' /> */}
             {!lfs &&
@@ -218,7 +220,7 @@ const CodeContent = ({ fileContent, path }: { fileContent: string; path?: string
                   style={{
                     backgroundColor: selectedLine === i ? '#f0f7ff' : 'transparent'
                   }}
-                  className='flex h-6 items-center'
+                  className='flex'
                   onClick={() => handleLineClick(i)}
                 >
                   <span className='inline-block w-8'>

moon/apps/web/components/CodeView/TableWithLoading/index.tsx

@@ -4,7 +4,7 @@ import CodeTable from '../CodeTable'
 
 const SpinnerTable = ({ isLoading, datasource, content }: any) => {
   return (
-    <div className='relative mt-3 h-screen p-3.5'>
+    <div className='relative h-screen p-3.5'>
       {isLoading ? (
         <div className='align-center container absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 justify-center'>
           <LoadingSpinner />

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

@@ -20,7 +20,7 @@ const Breadcrumb = ({ path }:any) => {
   });
 
     return (
-      <div className='flex items-center overflow-x-auto p-2 no-scrollbar mt-2'>
+      <div className='flex items-center overflow-x-auto p-3 no-scrollbar'>
 
         {breadCrumbItems?.map((item: { isLast: any; title: string; href: string | UrlObject; }, index: number) => (
         <React.Fragment key={item.title}>
@@ -37,7 +37,7 @@ const Breadcrumb = ({ path }:any) => {
           ) : (
             // middle item
             <Link href={item?.href} >
-              <BreadcrumbLabel className="ml-1">{item?.title}</BreadcrumbLabel>
+              <BreadcrumbLabel>{item?.title}</BreadcrumbLabel>
             </Link>
           )}
         </React.Fragment>

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { TreeItemLabel } from '@mui/x-tree-view/TreeItem';
+import { Box } from '@mui/material';
+
+interface CustomLabelProps {
+  children: React.ReactNode;
+  icon?: React.ElementType;
+  expandable?: boolean;
+  onClick?: (event: React.MouseEvent) => void;
+}
+
+// Custom label component used to render each node in the tree structure
+export function CustomLabel({ icon: Icon, children, onClick, ...other }: CustomLabelProps) {
+  return (
+    <TreeItemLabel
+      {...other}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      {Icon && (
+        <Box component={Icon} className="labelIcon" color="inherit" sx={{ mr: 1, fontSize: '1.2rem' }} />
+      )}
+      <TreeItemLabel 
+        sx={{fontSize: '14px', cursor: 'pointer'}} 
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick?.(e);
+        }}
+      >
+        {children}
+      </TreeItemLabel>
+    </TreeItemLabel>
+  );
+}

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

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { CircularProgress } from '@mui/material';
+import {
+  TreeItemDragAndDropOverlay,
+  TreeItemIcon,
+  TreeItemProvider,
+  useTreeItem,
+  useTreeItemModel,
+  UseTreeItemParameters,
+} from '@mui/x-tree-view';
+import {
+  TreeItemContent,
+  TreeItemGroupTransition,
+  TreeItemIconContainer,
+  TreeItemRoot,
+} from '@mui/x-tree-view/TreeItem';
+import { styled, alpha } from '@mui/material/styles';
+import { MuiTreeNode, getIconFromFileType } from './TreeUtils';
+import { CustomLabel } from './CustomLabel';
+
+interface CustomTreeItemProps
+  extends Omit<UseTreeItemParameters, 'rootRef'>,
+    Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
+  onLabelClick?: (path: string, isDirectory: boolean) => void;
+  loadingDirectories?: Set<string>;
+}
+
+// Custom tree structure node component, used to render elements such as icons and labels for each node
+export const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+  { onLabelClick, loadingDirectories, ...props }: CustomTreeItemProps,
+  ref: React.Ref<HTMLLIElement>,
+) {
+  const { id, itemId, label, disabled, children, ...other } = props;
+  const {
+    getContextProviderProps,
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    getDragAndDropOverlayProps,
+    status,
+  } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });
+
+  const item = useTreeItemModel<MuiTreeNode>(itemId)!;
+
+  // If it is a placeholder node, no content is rendered
+  if (item.isPlaceholder) {
+    return null;
+  }
+
+  let icon;
+
+  if (item.content_type === 'directory') {
+    icon = getIconFromFileType(item.content_type, status.expanded);
+  } else {
+    icon = getIconFromFileType(item.content_type, false);
+  }
+
+  // Check if the current node is loading
+  const isNodeLoading = loadingDirectories?.has(item.path);
+
+  const StyledGroupTransition = styled(TreeItemGroupTransition)(({ theme }) => ({
+    marginLeft: 15,
+    borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
+  }));
+
+  return (
+    <TreeItemProvider {...getContextProviderProps()}>
+      <TreeItemRoot {...getRootProps(other)}>
+        <TreeItemContent {...getContentProps()} sx={{ paddingLeft: 1 }}>
+          <TreeItemIconContainer {...getIconContainerProps()}>
+            {isNodeLoading ? (
+              <CircularProgress size={12} sx={{ color: 'black' }} />
+            ) : (
+              <TreeItemIcon status={status} />
+            )}
+          </TreeItemIconContainer>
+
+          <CustomLabel
+            {...getLabelProps({
+              icon,
+            })}
+            onClick={() => {
+              if (item.content_type) {
+                onLabelClick?.(item.path, item.content_type === 'directory');
+              }
+            }}
+          />
+
+          <TreeItemDragAndDropOverlay {...getDragAndDropOverlayProps()} />
+        </TreeItemContent>
+        {children && <StyledGroupTransition {...getGroupTransitionProps()} />}
+      </TreeItemRoot>
+    </TreeItemProvider>
+  );
+});