feat(ideContainer): 预设侧边栏右键菜单功能，修改侧边栏复合组件的数据处理逻辑

src/pages/ideContainer/sideBar.tsx

@@ -177,7 +177,19 @@ const SideBar: React.FC<SideBarProps> = ({
   const [showModal, setShowModal] = useState(false);
   const [modalType, setModalType] = useState<'ADD' | 'EDIT'>('ADD');
   const [currentApp, setCurrentApp] = useState<any>(null);
+  const [contextMenu, setContextMenu] = useState<{
+    visible: boolean;
+    x: number;
+    y: number;
+    nodeData: any;
+  }>({
+    visible: false,
+    x: 0,
+    y: 0,
+    nodeData: null
+  }); // 添加右键菜单状态
   const resizeBoxRef = useRef<HTMLDivElement>(null); // 引用第一个 ResizeBox 容器
+  const contextMenuRef = useRef<HTMLDivElement>(null); // 右键菜单引用
   const { menuData } = useSelector(state => state.ideContainer);
   const dispatch = useDispatch();
 
@@ -303,6 +315,7 @@ const SideBar: React.FC<SideBarProps> = ({
     const currentMenu = _.cloneDeep(menuData[identity]);
     const index = currentMenu.findIndex(v => v.key === parentKey);
     const res: any = await getAppInfoNew(data.id);
+    console.log('res.data:', res.data.subs);
     if (res.code === 200) {
       const children = currentMenu[index].children.find(v => v.id === data.id);
       children.children[0].children = res.data.events.map(item => {
@@ -316,12 +329,19 @@ const SideBar: React.FC<SideBarProps> = ({
         return {
           title: compTypeMap[item],
           icon: item === 'appComponent' ? '/ideContainer/icon/app1.png' : '/ideContainer/icon/complexApp.png',
-          children: res.data.compList[item].map(item => {
+          children: item === 'appComponent' ? res.data.compList[item].map(title => {
             return {
-              title: item,
+              title: title,
               children: null,
               icon: '/ideContainer/icon/tool.png'
             };
+          }) : res.data.subs.map(info => {
+            return {
+              title: info.flowName,
+              children: null,
+              icon: '/ideContainer/icon/tool.png',
+              compData: info
+            };
           })
         };
       });
@@ -401,6 +421,59 @@ const SideBar: React.FC<SideBarProps> = ({
     setSearchValue(value);
   };
 
+  // 处理鼠标按下事件
+  const handleMouseDown = (e: React.MouseEvent) => {
+    // 明确检查右键点击
+    if (e.button === 2) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      // 获取点击的目标元素及其数据
+      const target = e.target as HTMLElement;
+      const treeNode = target.closest('.arco-tree-node');
+      if (treeNode) {
+        // 在实际应用中，你可能需要通过 tree-node 获取对应的数据
+        // 这里我们简单地显示右键菜单
+      }
+
+      // 设置右键菜单的位置和显示
+      setContextMenu({
+        visible: true,
+        x: e.clientX,
+        y: e.clientY,
+        nodeData: null
+      });
+    }
+  };
+
+  // 劫持右键
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // 设置右键菜单的位置和显示
+    setContextMenu({
+      visible: true,
+      x: e.clientX,
+      y: e.clientY,
+      nodeData: null
+    });
+  };
+
+  // 点击其他地方隐藏右键菜单
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+        setContextMenu(prev => ({ ...prev, visible: false }));
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   // 渲染节点的额外操作按钮
   const renderNodeExtra = (node) => {
     // 只有当 node.dataRef.id 存在时才渲染操作按钮
@@ -416,6 +489,7 @@ const SideBar: React.FC<SideBarProps> = ({
             setCurrentApp(node.dataRef);
             setModalType('EDIT');
             setShowModal(true);
+            setContextMenu(prev => ({ ...prev, visible: false })); // 隐藏右键菜单
           }}
         >
           <span style={{ color: 'rgba(161, 165, 194, 1)' }}>
@@ -439,6 +513,7 @@ const SideBar: React.FC<SideBarProps> = ({
                 // 通知父组件应用已被删除
                 onDeleteApp?.(node.dataRef.id);
                 onRefresh();
+                setContextMenu(prev => ({ ...prev, visible: false })); // 隐藏右键菜单
               }
             });
           }}
@@ -462,6 +537,9 @@ const SideBar: React.FC<SideBarProps> = ({
             top: 10,
             color: '#000000'
           }}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
         />
       </Dropdown>
     );
@@ -528,12 +606,15 @@ const SideBar: React.FC<SideBarProps> = ({
           </div>}
 
           {/* 子菜单 */}
+          <div onContextMenu={handleContextMenu}>
             <Tree
-            defaultExpandedKeys={['0-0']}
+              defaultExpandedKeys={['0']} // 整个属性去掉就会展开全部
               selectedKeys={[]} // 移除选中样式
+              onMouseDown={handleMouseDown}
               onSelect={async (_selectedKeys, info) => {
                 const selectedNode = info.node;
                 const originalData = selectedNode.props.dataRef;
+                console.log(originalData);
                 if (selected?.parentKey === 'appList') {
                   await getProjectEnvData(originalData);
 
@@ -547,8 +628,42 @@ const SideBar: React.FC<SideBarProps> = ({
               {renderMenuItems(filteredMenu[activeKey]?.children)}
             </Tree>
           </div>
+        </div>
       </ResizeBox>}
 
+      {/* 右键菜单 */}
+      {/*{contextMenu.visible && (*/}
+      {/*  <div*/}
+      {/*    ref={contextMenuRef}*/}
+      {/*    className={styles['context-menu']}*/}
+      {/*    style={{*/}
+      {/*      position: 'fixed',*/}
+      {/*      top: contextMenu.y,*/}
+      {/*      left: contextMenu.x,*/}
+      {/*      zIndex: 1000*/}
+      {/*    }}*/}
+      {/*  >*/}
+      {/*    <Menu*/}
+      {/*      className={styles['context-menu-dropdown']}*/}
+      {/*      style={{*/}
+      {/*        borderRadius: 4,*/}
+      {/*        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'*/}
+      {/*      }}*/}
+      {/*    >*/}
+      {/*      <MenuItem*/}
+      {/*        key="refresh"*/}
+      {/*        onClick={() => {*/}
+      {/*          console.log('点击');*/}
+      {/*          // onRefresh();*/}
+      {/*          // setContextMenu(prev => ({ ...prev, visible: false }));*/}
+      {/*        }}*/}
+      {/*      >*/}
+      {/*        <span>编辑复合组件</span>*/}
+      {/*      </MenuItem>*/}
+      {/*    </Menu>*/}
+      {/*  </div>*/}
+      {/*)}*/}
+
       {/*  新增/编辑应用 */}
       {showModal && (
         <AppHandleModal

src/pages/ideContainer/style/sideBar.module.less

@@ -71,3 +71,33 @@
     padding: 10px;
   }
 }
+
+.context-menu {
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+
+  .context-menu-dropdown {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+
+    :global {
+      .arco-menu-inner {
+        padding: 4px 0;
+      }
+
+      .arco-menu-item {
+        padding: 5px 12px;
+        margin: 0;
+        height: 32px;
+        line-height: 22px;
+
+        &:hover {
+          background-color: #f5f5f5;
+        }
+      }
+    }
+  }
+}