feat(sidebar): 实现应用的新增、编辑和删除功能

- 新增应用信息弹窗组件 AppHandleModal
- 支持应用的创建、编辑和删除操作
- 添加应用操作的下拉菜单选项

src/pages/ideContainer/sideBar.tsx

@@ -1,21 +1,30 @@
 import React, { useEffect, useState } from 'react';
 import styles from './style/sideBar.module.less';
-import { IconApps } from '@arco-design/web-react/icon';
+import {
+  ResizeBox,
+  Tree,
+  Input,
+  Button,
+  Modal,
+  Form,
+  Message,
+  Dropdown,
+  Menu,
+  Popconfirm
+} from '@arco-design/web-react';
+import { IconApps, IconMore } from '@arco-design/web-react/icon';
 import { menuData1, menuData2 } from './config/menuData';
-import { ResizeBox, Tree, Input, Button, Modal, Form, Checkbox, Message } from '@arco-design/web-react';
 import { IconSearch, IconPlus } from '@arco-design/web-react/icon';
 import { Selected } from '@/pages/ideContainer/types';
 import { useDispatch, useSelector } from 'react-redux';
 import { updateMenuData, updateFlowData } from '@/store/ideContainer';
-import { addApp, getProjectEnv } from '@/api/apps';
+import { addApp, getProjectEnv, editApp, deleteApp } from '@/api/apps';
 import _ from 'lodash';
-import Cover from '@/pages/scene/cover';
-import ConfigTable from '@/pages/scene/configTable';
-import { addScene, editScene } from '@/api/scene';
 
 const TreeNode = Tree.Node;
 const FormItem = Form.Item;
 const TextArea = Input.TextArea;
+const MenuItem = Menu.Item;
 
 interface MenuItemType {
   title: string;
@@ -41,42 +50,54 @@ const compTypeMap = {
 };
 
 
-const AddModal = ({ visible, onChangeVisible, onClose, onRefresh }) => {
+const AppHandleModal = ({ appInfo, visible, type, onChangeVisible, onClose, onRefresh }) => {
   const { info } = useSelector(state => state.ideContainer);
   const [form] = Form.useForm();
 
+  if (appInfo) {
+    form.setFieldsValue({
+      id: appInfo?.id,
+      name: appInfo?.name,
+      description: appInfo?.description,
+      published: appInfo?.published === 1,
+      logo: 'scene04.png', // 先写死
+      sceneId: info.id
+    });
+  }
+
   const onOk = async () => {
     await form.validate();
     const formData = form.getFields();
 
-    // 新增应用的入参
+    if (type === 'ADD') {
-    const params = {
+      // 新增应用的入参
-      description: formData.description,
+      const params = {
-      name: formData.name,
+        description: formData.description,
-      logo: 'scene04.png', // 先写死
+        name: formData.name,
-      published: 0,
+        logo: 'scene04.png', // 先写死
-      sceneId: info.id
+        published: 0,
-    };
+        sceneId: info.id
-
+      };
-    const res: any = await addApp(params);
+      const res: any = await addApp(params);
-    console.log('res:', res);
+      if (res.code === 200) Message.success('创建成功');
-    if (res.code === 200) {
+      else Message.error(res.message);
-      Message.success('创建成功');
-      onClose();
-      onRefresh();
     }
     else {
-      Message.error(res.message);
+      const res: any = await editApp(formData);
+      if (res.code === 200) Message.success('编辑成功');
+      else Message.error(res.message);
     }
 
     // 清空表单数据和其他变量数据
     form.resetFields();
+    onClose();
+    onRefresh();
 
   };
 
   return (
     <Modal
-      title="新增应用"
+      title={type === 'ADD' ? '新增应用' : '编辑应用'}
       visible={visible}
       onOk={() => onOk()}
       onCancel={() => onChangeVisible(false)}
@@ -138,6 +159,8 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
   const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态
   const [activeKey, setActiveKey] = useState(0);
   const [showModal, setShowModal] = useState(false);
+  const [modalType, setModalType] = useState<'ADD' | 'EDIT'>('ADD');
+  const [currentApp, setCurrentApp] = useState<any>(null);
   const { menuData } = useSelector(state => state.ideContainer);
   const dispatch = useDispatch();
 
@@ -276,6 +299,63 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
     Object.keys(subMenuData).length > 0 && setMenu(getMenuData());
   }, [subMenuData, identity]);
 
+  // 渲染节点的额外操作按钮
+  const renderNodeExtra = (node) => {
+    // 只有当 node.dataRef.id 存在时才渲染操作按钮
+    if (!node.dataRef?.id) {
+      return null;
+    }
+
+    const dropList = (
+      <Menu>
+        <MenuItem
+          key="editApp"
+          onClick={() => {
+            setCurrentApp(node.dataRef);
+            setModalType('EDIT');
+            setShowModal(true);
+          }}
+        >编辑信息
+        </MenuItem>
+        <MenuItem
+          key="deleteApp"
+          onClick={() => {
+            // 使用Hook方式调用
+            Modal.confirm({
+              title: '请确认是否删除该应用？',
+              content: '应用删除后无法恢复，请谨慎删除！',
+              maskClosable: false,
+              cancelText: '取消',
+              simple: false,
+              closable: false,
+              onOk: async () => {
+                await deleteApp(node.dataRef.id);
+                onRefresh();
+              }
+            });
+          }}
+        >
+          删除应用
+        </MenuItem>
+      </Menu>
+    );
+
+    return (
+      <Dropdown droplist={dropList} trigger="click">
+        <IconMore
+          style={{
+            position: 'absolute',
+            right: 8,
+            fontSize: 20,
+            fontWeight: 700,
+            top: 10,
+            color: '#000000'
+          }}
+        />
+      </Dropdown>
+    );
+  };
+
   return (
     <div
       className={styles['sider']}
@@ -323,6 +403,7 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
               style={{ marginLeft: 5 }}
               onClick={() => {
                 setShowModal(true);
+                setModalType('ADD');
               }}
             />
           </div>}
@@ -340,20 +421,23 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
               originalData.key && onMenuSelect?.({ ...originalData } as Selected);
             }}
             style={{ background: 'transparent' }} // 移除背景色
+            renderExtra={renderNodeExtra}
           >
             {renderMenuItems(menu[activeKey]?.children)}
           </Tree>
         </div>
       </ResizeBox>
 
-      {/*  新增应用 */}
+      {/*  新增/编辑应用 */}
       {showModal && (
-        <AddModal
+        <AppHandleModal
+          appInfo={currentApp}
           visible={showModal}
+          type={modalType}
           onChangeVisible={(value => setShowModal(value))}
           onClose={() => setShowModal(false)}
           onRefresh={onRefresh}
-        ></AddModal>
+        ></AppHandleModal>
       )}
     </div>
   );