feat(view-manager): add context-menu

alibaba · Jan 11, 2024 · c24707e · c24707e
1 parent 45554b0
commit c24707e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss b/packages/plugin-view-manager-pane/src/components/resourceTree/index.scss
@@ -25,6 +25,11 @@
     display: flex;
     align-items: center;
     height: 30px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--color-block-background-light, #f7f8fa);
+    }
   }
 
   &-expand {

diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx
@@ -147,6 +147,12 @@ function ResourceGroup(
   }
 
   const ContextMenu = props.pluginContext?.commonUI?.ContextMenu || React.Fragment;
+  const indent = props.depth * 28 + 12;
+
+  const style = {
+    paddingLeft: indent,
+    marginLeft: -indent,
+  }
 
   return (
     <div
@@ -156,12 +162,15 @@ function ResourceGroup(
       <ContextMenu
         menus={props.options?.resourceGroupContextMenuActions?.(props.pluginContext!, resourceArr) || []}
       >
-        <div className='resource-tree-group-wrap'>
+        <div
+          className='resource-tree-group-wrap'
+          style={style}
+          onClick={() => {
+            setExpanded(!expanded);
+          }}
+        >
           <div
             className={`resource-tree-expand ${expanded ? 'expanded' : ''}`}
-            onClick={() => {
-              setExpanded(!expanded);
-            }}
           >
             <IconArrowRight />
           </div>