feat(component): 添加代码提交和拉取功能

src/api/componentGitea.ts

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+// 公共路径
+const urlPrefix = '/api/v1/bpms-workbench';
+
+// 拉取代码
+export function gitPull(componentBaseId) {
+  return axios.post(`${urlPrefix}/componentGitea/${componentBaseId}/pull`);
+}
+
+// 提交代码
+export function gitCommit(componentBaseId, params: { commit: string }) {
+  return axios.post(`${urlPrefix}/componentGitea/${componentBaseId}/commit`, params);
+}

src/pages/componentDevelopment/componentCoding/index.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState, useRef } from 'react';
 import styles from './style/index.module.less';
-import { Button, Select, Space } from '@arco-design/web-react';
+import { Button, Select, Space, Message, Modal, Input } from '@arco-design/web-react';
 import { IconFullscreen, IconFullscreenExit } from '@arco-design/web-react/icon';
 import { useSelector, useDispatch } from 'react-redux';
 import { getMyComponentList } from '@/api/componentBase';
 import { updateComponentCodingPath } from '@/store/ideContainer';
 import { getComponentBaseInfo } from '@/api/componentDevelopProcess';
+import { gitCommit, gitPull } from '@/api/componentGitea';
 
 const Option = Select.Option;
 
@@ -15,6 +16,8 @@ const ComponentCoding = () => {
   const [originList, setOriginList] = useState([]); // 原始数据-组件列表
   const [currentComponent, setCurrentComponent] = useState({}); // 当前组件信息
   const [isFullscreen, setIsFullscreen] = useState(false); // 全屏状态
+  const [commitMessage, setCommitMessage] = useState(''); // 提交信息
+  const [commitModal, setCommitModal] = useState(false); // 提交信息弹窗
   const iframeRef = useRef(null);
   const { componentCoding } = useSelector((state: any) => state.ideContainer);
   const dispatch = useDispatch();
@@ -39,6 +42,70 @@ const ComponentCoding = () => {
     }
   };
 
+
+  // 切换全屏状态
+  const toggleFullscreen = () => {
+    const iframeContainer = document.querySelector(`.${styles['code-iframe']}`) as HTMLElement;
+
+    if (!isFullscreen) {
+      // 进入全屏
+      if (iframeContainer.requestFullscreen) {
+        iframeContainer.requestFullscreen();
+      }
+      else if ((iframeContainer as any).webkitRequestFullscreen) {
+        (iframeContainer as any).webkitRequestFullscreen();
+      }
+      else if ((iframeContainer as any).mozRequestFullScreen) {
+        (iframeContainer as any).mozRequestFullScreen();
+      }
+      else if ((iframeContainer as any).msRequestFullscreen) {
+        (iframeContainer as any).msRequestFullscreen();
+      }
+    }
+    else {
+      // 退出全屏
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+      else if ((document as any).webkitExitFullscreen) {
+        (document as any).webkitExitFullscreen();
+      }
+      else if ((document as any).mozCancelFullScreen) {
+        (document as any).mozCancelFullScreen();
+      }
+      else if ((document as any).msExitFullscreen) {
+        (document as any).msExitFullscreen();
+      }
+    }
+  };
+
+  const gitPullHandler = async () => {
+    const res: any = await gitPull(componentCoding.id);
+    if (res.code === 200) {
+      Message.success('代码拉取成功');
+    }
+    else {
+      Message.error('代码拉取失败');
+    }
+  };
+
+  const gitCommitHandler = async () => {
+    const res: any = await gitCommit(componentCoding.id, { commit: commitMessage });
+    if (res.code === 200) {
+      Message.success('代码提交成功');
+      setCommitModal(false);
+      setCommitMessage('');
+    }
+    else {
+      Message.error('代码提交失败');
+    }
+  };
+
+  const openModal = (value) => {
+    const selectedItem = originList.find(item => item.localProjectPath === value);
+    dispatch(updateComponentCodingPath(selectedItem));
+  };
+
   useEffect(() => {
     getOptionsList();
   }, []);
@@ -78,42 +145,6 @@ const ComponentCoding = () => {
     };
   }, []);
 
-  // 切换全屏状态
-  const toggleFullscreen = () => {
-    const iframeContainer = document.querySelector(`.${styles['code-iframe']}`) as HTMLElement;
-
-    if (!isFullscreen) {
-      // 进入全屏
-      if (iframeContainer.requestFullscreen) {
-        iframeContainer.requestFullscreen();
-      }
-      else if ((iframeContainer as any).webkitRequestFullscreen) {
-        (iframeContainer as any).webkitRequestFullscreen();
-      }
-      else if ((iframeContainer as any).mozRequestFullScreen) {
-        (iframeContainer as any).mozRequestFullScreen();
-      }
-      else if ((iframeContainer as any).msRequestFullscreen) {
-        (iframeContainer as any).msRequestFullscreen();
-      }
-    }
-    else {
-      // 退出全屏
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      }
-      else if ((document as any).webkitExitFullscreen) {
-        (document as any).webkitExitFullscreen();
-      }
-      else if ((document as any).mozCancelFullScreen) {
-        (document as any).mozCancelFullScreen();
-      }
-      else if ((document as any).msExitFullscreen) {
-        (document as any).msExitFullscreen();
-      }
-    }
-  };
-
   return (
     <div className={styles['component-coding']}>
       <div className={styles['header']}>
@@ -180,16 +211,18 @@ const ComponentCoding = () => {
       <div className={styles['code-iframe']}>
         <div className={styles['code-iframe-handle']}>
           <Space size={10} className={styles['code-iframe-handle-left']}>
-            <span className={styles['align']}>
-              <img src={'/ideContainer/imgs/tongbu.svg'} style={{ width: 16, height: 16, marginRight: 5 }} />
+            <span className={styles['align']} onClick={gitPullHandler}>
+              <img src={'/ideContainer/imgs/tongbu.svg'} style={{ width: 16, height: 16, marginRight: 5 }}
+              />
               同步代码
             </span>
             <span className={styles['align']}>
               <img src={'/ideContainer/imgs/git.svg'} style={{ width: 16, height: 16, marginRight: 5 }} />
               复制git地址
             </span>
-            <span className={styles['align']}>
-              <img src={'/ideContainer/imgs/tijiao.svg'} style={{ width: 16, height: 16, marginRight: 5 }} />
+            <span className={styles['align']} onClick={() => setCommitModal(true)}>
+              <img src={'/ideContainer/imgs/tijiao.svg'} style={{ width: 16, height: 16, marginRight: 5 }}
+              />
               提交代码
             </span>
           </Space>
@@ -203,6 +236,23 @@ const ComponentCoding = () => {
         </div>
         <iframe width="100%" height="100%" frameBorder={0} src={serverUrl} ref={iframeRef} />
       </div>
+
+
+      <Modal
+        title="Git提交信息"
+        visible={commitModal}
+        onOk={() => gitCommitHandler()}
+        onCancel={() => {
+          setCommitMessage('');
+          setCommitModal(false);
+        }}
+        autoFocus={false}
+        focusLock={true}
+      >
+        <div style={{ marginBottom: 5 }}>请输入提交信息:</div>
+        <Input value={commitMessage} onChange={(e: any) => setCommitMessage(e)}></Input>
+      </Modal>
+
     </div>
   );
 };