feat: modify pivot style & add operation menu to pivot item (#1726)

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

@@ -1,7 +1,7 @@
 import MuiCollapse from '@mui/material/Collapse';
 import type { CSSProperties } from 'react';
 
-import { styled } from '../../styles';
+import { alpha, styled } from '../../styles';
 
 export const StyledCollapse = styled(MuiCollapse)<{
   indent?: CSSProperties['paddingLeft'];
@@ -10,12 +10,8 @@ export const StyledCollapse = styled(MuiCollapse)<{
     paddingLeft: indent,
   };
 });
-export const StyledTreeNodeItem = styled('div')<{
-  isOver?: boolean;
-  canDrop?: boolean;
-}>(({ isOver, canDrop, theme }) => {
+export const StyledTreeNodeWrapper = styled('div')(() => {
   return {
-    background: isOver && canDrop ? theme.colors.hoverBackground : '',
     position: 'relative',
   };
 });
@@ -23,6 +19,7 @@ export const StyledTreeNodeContainer = styled('div')<{ isDragging: boolean }>(
   ({ isDragging, theme }) => {
     return {
       background: isDragging ? theme.colors.hoverBackground : '',
+      // opacity: isDragging ? 0.4 : 1,
     };
   }
 );
@@ -32,11 +29,14 @@ export const StyledNodeLine = styled('div')<{ show: boolean; isTop?: boolean }>(
     return {
       position: 'absolute',
       left: '0',
-      ...(isTop ? { top: '0' } : { bottom: '0' }),
+      ...(isTop ? { top: '-1px' } : { bottom: '-1px' }),
       width: '100%',
-      paddingTop: '3px',
-      borderBottom: '3px solid',
+      paddingTop: '2x',
+      borderTop: '2px solid',
       borderColor: show ? theme.colors.primaryColor : 'transparent',
+      boxShadow: show
+        ? `0px 0px 8px ${alpha(theme.colors.primaryColor, 0.35)}`
+        : 'none',
       zIndex: 1,
     };
   }