feat: modify sidebar style (#1703)

packages/component/src/ui/tree-view/TreeNode.tsx

@@ -46,7 +46,7 @@ export const TreeNode = <N,>({
   allDrop = true,
   ...otherProps
 }: TreeNodeProps<N>) => {
-  const { onAdd, onDelete, onDrop } = otherProps;
+  const { onAdd, onDelete, onDrop, indent } = otherProps;
   const [collapsed, setCollapsed] = useState(false);
 
   const [{ isDragging }, drag] = useDrag(() => ({
@@ -109,7 +109,7 @@ export const TreeNode = <N,>({
         )}
       </StyledTreeNodeItem>
 
-      <StyledCollapse in={!collapsed}>
+      <StyledCollapse in={!collapsed} indent={indent}>
         {node.children &&
           node.children.map((childNode, index) => (
             <TreeNode

packages/component/src/ui/tree-view/styles.ts

@@ -1,10 +1,13 @@
 import MuiCollapse from '@mui/material/Collapse';
+import type { CSSProperties } from 'react';
 
 import { styled } from '../../styles';
 
-export const StyledCollapse = styled(MuiCollapse)(() => {
+export const StyledCollapse = styled(MuiCollapse)<{
+  indent?: CSSProperties['paddingLeft'];
+}>(({ indent = 12 }) => {
   return {
-    paddingLeft: '12px',
+    paddingLeft: indent,
   };
 });
 export const StyledTreeNodeItem = styled('div')<{

packages/component/src/ui/tree-view/types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 export type Node<N> = {
   id: string;
@@ -16,6 +16,7 @@ export type Node<N> = {
 } & N;
 
 type CommonProps<N> = {
+  indent?: CSSProperties['paddingLeft'];
   onAdd?: (node: Node<N>) => void;
   onDelete?: (node: Node<N>) => void;
   onDrop?: (