feat(sidebar): 增加应用的新建功能

- 二级菜单也中的新增应用和搜索框值出现在应用列表下

src/pages/ideContainer/navBar.tsx

@@ -115,7 +115,6 @@ const NavBar: React.FC<NavBarProps> = ({ selected, menuData, onTabChange, onTabC
         </Tabs>
       ) : (
         <div style={{ height: 40, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
-          请选择左侧菜单项
         </div>
       )}
     </div>

src/pages/ideContainer/sideBar.tsx

@@ -2,15 +2,20 @@ import React, { useEffect, useState } from 'react';
 import styles from './style/sideBar.module.less';
 import { IconApps } from '@arco-design/web-react/icon';
 import { menuData1, menuData2 } from './config/menuData';
-import { ResizeBox, Tree, Input, Button } from '@arco-design/web-react';
+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 { getProjectEnv } from '@/api/apps';
+import { addApp, getProjectEnv } 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;
 
 interface MenuItemType {
   title: string;
@@ -27,6 +32,7 @@ interface SideBarProps {
   selected?: any;
   identity?: string;
   onMenuSelect?: (selected: Selected) => void;
+  onRefresh: () => void;
 }
 
 const compTypeMap = {
@@ -34,11 +40,104 @@ const compTypeMap = {
   subComponent: '复合组件'
 };
 
-const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMenuSelect }) => {
+
+const AddModal = ({ visible, onChangeVisible, onClose, onRefresh }) => {
+  const { info } = useSelector(state => state.ideContainer);
+  const [form] = Form.useForm();
+
+  const onOk = async () => {
+    await form.validate();
+    const formData = form.getFields();
+
+    // 新增应用的入参
+    const params = {
+      description: formData.description,
+      name: formData.name,
+      logo: 'scene04.png', // 先写死
+      published: 0,
+      sceneId: info.id
+    };
+
+    const res: any = await addApp(params);
+    console.log('res:', res);
+    if (res.code === 200) {
+      Message.success('创建成功');
+      onClose();
+      onRefresh();
+    }
+    else {
+      Message.error(res.message);
+    }
+
+    // 清空表单数据和其他变量数据
+    form.resetFields();
+
+  };
+
+  return (
+    <Modal
+      title="新增应用"
+      visible={visible}
+      onOk={() => onOk()}
+      onCancel={() => onChangeVisible(false)}
+      autoFocus={false}
+      focusLock={true}
+      maskClosable={false}
+    >
+      <Form form={form} autoComplete="off">
+        <FormItem
+          field="name"
+          label="应用名称"
+          required
+          rules={[
+            {
+              validator(value, cb) {
+                if (!value) {
+                  return cb('请填写应用名称');
+                }
+                // 检查是否只包含汉字
+                const chineseOnlyRegex = /^[\u4e00-\u9fa5]+$/;
+                if (!chineseOnlyRegex.test(value)) {
+                  return cb('应用名称只能输入汉字');
+                }
+
+                return cb();
+              }
+            }
+          ]}
+        >
+          <Input placeholder="请输入应用名称" />
+        </FormItem>
+        <FormItem
+          field="description"
+          label="应用描述"
+          required
+          rules={[
+            {
+              validator(value, cb) {
+                if (!value) {
+                  return cb('请填写应用描述');
+                }
+
+                return cb();
+              }
+            }
+          ]}
+        >
+          {/*<Input placeholder="请输入工程描述" />*/}
+          <TextArea placeholder="请输入应用描述" />
+        </FormItem>
+      </Form>
+    </Modal>
+  );
+};
+
+const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMenuSelect, onRefresh }) => {
   const [menu, setMenu] = useState<MenuItemType[]>([]);
   const [subMenuWidth, setSubMenuWidth] = useState(300); // 子菜单宽度状态
   const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态
   const [activeKey, setActiveKey] = useState(0);
+  const [showModal, setShowModal] = useState(false);
   const { menuData } = useSelector(state => state.ideContainer);
   const dispatch = useDispatch();
 
@@ -173,10 +272,6 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
     return null;
   };
 
-  const addAppItem = () => {
-    console.log(12);
-  };
-
   useEffect(() => {
     Object.keys(subMenuData).length > 0 && setMenu(getMenuData());
   }, [subMenuData, identity]);
@@ -226,13 +321,16 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
               type="primary"
               icon={<IconPlus />}
               style={{ marginLeft: 5 }}
-              onClick={addAppItem}
+              onClick={() => {
+                setShowModal(true);
+              }}
             />
           </div>}
 
           {/* 子菜单 */}
           <Tree
             defaultExpandedKeys={['0-0']}
+            selectedKeys={[]} // 移除选中样式
             onSelect={async (_selectedKeys, info) => {
               const selectedNode = info.node;
               const originalData = selectedNode.props.dataRef;
@@ -241,11 +339,22 @@ const SideBar: React.FC<SideBarProps> = ({ selected, identity, subMenuData, onMe
               // 调用外部传入的菜单选择处理函数
               originalData.key && onMenuSelect?.({ ...originalData } as Selected);
             }}
+            style={{ background: 'transparent' }} // 移除背景色
           >
             {renderMenuItems(menu[activeKey]?.children)}
           </Tree>
         </div>
       </ResizeBox>
+
+      {/*  新增应用 */}
+      {showModal && (
+        <AddModal
+          visible={showModal}
+          onChangeVisible={(value => setShowModal(value))}
+          onClose={() => setShowModal(false)}
+          onRefresh={onRefresh}
+        ></AddModal>
+      )}
     </div>
   );
 };