From 6aaa67f2402e5c39c1e908c63e14d46b1b0e265f Mon Sep 17 00:00:00 2001
From: caishi <1149225589@qq.com>
Date: Fri, 1 Sep 2023 15:01:19 +0800
Subject: [PATCH] =?UTF-8?q?merge=20=E5=88=86=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Main/tree/Index.jsx  | 312 +++++++++++++++++++++++++++++++--
 src/forge/Main/tree/Index.scss | 104 ++++++++++-
 2 files changed, 401 insertions(+), 15 deletions(-)

diff --git a/src/forge/Main/tree/Index.jsx b/src/forge/Main/tree/Index.jsx
index 2455a929f..b9897d4a4 100644
--- a/src/forge/Main/tree/Index.jsx
+++ b/src/forge/Main/tree/Index.jsx
@@ -3,23 +3,60 @@ import CopyTool from '../../Component/CopyTool';
 import { truncateCommitId } from '../../common/util';
 import { Link } from 'react-router-dom';
 import { getImageUrl , turnbar } from 'educoder';
-import { Dropdown , Menu , Spin } from 'antd';
-import Nodata from '../../Nodata';
+import { Button, Dropdown , Input, Menu , message, Modal, Select, Spin, Table, Tooltip } from 'antd';
+import Modals from '../../Component/PublicModal/Index';
 import './Index.scss';
 
 import Tree from '../img/tree.png';
 import Axios from 'axios';
 
 function Index(props) {
+  const [ reload, setReload] = useState(undefined);
   const [ list , setList ] = useState([]);
   const [ isSpin , setIsSpin ] = useState(true);
+  // 删除分支
+  const [visible, setVisible] = useState(false);
+  // 新建分支
+  const [addBranch, setAddBranch] = useState(false);
+  const [newBranchName, setNewBranchName] = useState(undefined);
+  const [newFormBranchName, setNewFormBranchName] = useState(undefined);
+  const [newBranchError, setNewBranchError] = useState(undefined);
+  const [branchList, setBranchList] = useState([]);//所有分支
+  // 通过分支名搜索分支
+  const [name, setName] = useState(undefined);
+  // 分页
+  const [current, setCurrent] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
 
   const { projectsId , owner } = props.match.params;
-  const { isManager , isDeveloper , projectDetail , defaultBranch } = props;
-  
+  const { isManager , isDeveloper , projectDetail , defaultBranch, getDetail } = props;
   useEffect(()=>{
-    getList();
-  },[])
+    // getList();
+    const url = `/v1/${owner}/${projectsId}/branches.json`;
+    Axios.get(url,{
+      params:{
+        keyword: name,
+        page: current,
+        limit: pageSize
+      }
+    }).then(result=>{
+      if(result){
+        const {branches, total_count} = result.data;
+        setTotal(total_count)
+        setList(branches);
+        setNewFormBranchName(branches[0].name);
+      }
+      setIsSpin(false);
+    }).catch(error=>{setIsSpin(false);})
+  },[name, reload, pageSize, current])
+
+  useEffect(()=>{
+    if(projectDetail && document.title.indexOf('所有分支-') === -1){
+      const { author, name} = projectDetail;
+      document.title = `所有分支-${author.name}/${name}`;
+    }
+  }, [projectDetail])
 
 
   const menu =(zip_url,tar_url)=> (
@@ -29,6 +66,105 @@ function Index(props) {
     </Menu>
   )
 
+  const columns = [
+    {
+      title: "分支名称",
+      dataIndex: "name",
+      key: 1,
+      ellipsis: true,
+      className: "branchNameColumn",
+      render: (txt, item) => {
+        return (
+          <Link to={`/${owner}/${projectsId}/tree/${turnbar(txt)}`} onClick={()=>{window.scrollTo(0,0)}} className="task-hide">{txt}</Link>
+        )
+      }
+    },
+    {
+      title: "更新信息",
+      dataIndex: "commit",
+      key: 3,
+      ellipsis: true,
+      width: "240px",
+      render: (txt, item) => {
+        return (
+          <div className='treeinfo'>
+            {
+              txt && txt.committer && txt.committer.id?
+              <Link to={`/${ txt.committer.login}`}>
+                <img style={{borderRadius:"50%"}} src={getImageUrl(`/${ txt.committer.image_url}`)} alt="" className='branchLastUpdateUserImage'/>
+                <span style={{fontWeight:"500"}}>{txt && txt.committer && txt.committer.name}</span>
+              </Link>
+              :
+              <React.Fragment>
+                <img style={{borderRadius:"50%"}} src={getImageUrl(`/${ txt.committer.image_url}`)} alt="" className='branchLastUpdateUserImage'/>
+                <span style={{fontWeight:"500"}}>{txt && txt.committer && txt.committer.name}</span>
+              </React.Fragment>
+            }
+            <span className="color-grey-3">更新于{txt && txt.time_ago}</span>
+          </div>
+        )
+      }
+    },
+    {
+      title: "commit信息",
+      dataIndex: "commit_id",
+      key: 4,
+      ellipsis: true,
+      width: "250px",
+      render: (txt, item) => {
+        return <div className="treecopy">
+          <div className='treeCopyBox'>
+            <span>
+              <img src={Tree} alt="sha" width={"16px"}/>
+              <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(txt)}`}>{truncateCommitId(txt)}</Link>
+              <input type="text" id={`value${truncateCommitId(txt)}`} value={`${truncateCommitId(txt)}`}/>
+            </span>
+            <CopyTool beforeText="复制commit id" afterText="复制成功" inputId={`value${truncateCommitId(txt)}`}/>
+          </div>
+        </div>
+      }
+    },
+    {
+      title: "分支类型",
+      dataIndex: "default_branch",
+      key: 5,
+      width: "150px",
+      render: (txt, item) => {
+        return isManager ? txt === item.name ? <a className='btn-83' style={{width: '93px'}}>默认分支</a> : <Select value={1} onChange={(value)=>{updateDefaultBranch(value, item)}}>
+        <Select.Option value={0}>默认分支</Select.Option>
+        <Select.Option value={1}>普通分支</Select.Option>
+      </Select> : txt === item.name ? '默认分支' : '普通分支'
+      }
+    },
+    {
+      title: "操作",
+      dataIndex: "name",
+      key: 6,
+      align: "center",
+      width: "320px",
+      className: "branchActionColumn",
+      render: (txt, item) => {
+        return (
+          <div className="treeabout">
+            {
+              (isManager || isDeveloper) && (projectDetail && projectDetail.type!==2) &&
+              <Tooltip title={`以${txt}为源分支创建一个合并请求`}><Link to={
+                // 如果项目是fork的项目，pr自动指向源仓库，否则指向本仓库默认分支
+                projectDetail && projectDetail.fork_info?
+                `/${projectDetail.fork_info.fork_project_user_login}/${projectDetail.fork_info.fork_project_identifier}/compare/${turnbar(txt || defaultBranch)}...${owner + ':' + turnbar(txt)}`
+                :`/${owner}/${projectsId}/compare/${turnbar(defaultBranch)}...${turnbar(txt)}`
+              } className="btn-83">+ 合并请求</Link></Tooltip>
+            }
+            <Dropdown overlay={menu(item.zip_url,item.tar_url)} trigger={['click']} placement="bottomRight">
+              <a className="btn-83" style={{width: '76px'}}>下载<i className="iconfont icon-sanjiaoxing-down font-14"></i></a>
+            </Dropdown>
+            {isManager && (txt === item.default_branch ? <Tooltip title={`该分支为默认分支，不支持删除操作`}><Button style={{width: '76px'}} disabled>删除</Button></Tooltip> : <Button className='f6_bor_but' style={{width: '76px'}} onClick={()=>{setVisible(item)}}>删除</Button>)}
+          </div>
+        )
+      }
+    }
+  ];
+
   function getList() {
     const url = `/${owner}/${projectsId}/branches_slice.json`;
     Axios.get(url).then(result=>{
@@ -39,10 +175,121 @@ function Index(props) {
     }).catch(error=>{setIsSpin(false);})
   }
 
+  // 删除分支确认函数
+  function deleteLabel(){
+    Axios.delete(`/v1/${owner}/${projectsId}/branches/${visible.name}.json`).then(res=>{
+      if(res && res.data){
+        if(current>1 && (list && list.length===1)){
+          setCurrent(current-1);
+        }else{
+          setReload(Math.random());
+        }
+        setVisible(false);
+        !res.data.status && message.success('删除成功');
+      }
+    })
+  }
+
+  // 新建分支确认函数
+  function createBranch(){
+    setNewBranchError(undefined);
+    if(!newBranchName){
+      setNewBranchError("请输入新建分支名称");
+    }else{
+      Axios.post(`/v1/${owner}/${projectsId}/branches.json`, {
+        new_branch_name: newBranchName,
+        old_branch_name: newFormBranchName
+      }).then(res=>{
+        if(res && res.data){
+          // 重新请求仓库详情接口，更新分支总数信息
+          getDetail();
+          setReload(Math.random());
+          setAddBranch(false);
+          message.success('新建分支成功');
+        }
+      })
+    }
+  }
+
+  // 新建分支名检查格式
+  function checkNewBranchName(e) {
+    setNewBranchError(undefined);
+    const value = e.target.value;
+    if (value) {
+      const str = '^*';
+      let reg = /\\/g;
+      if(reg.test(value)){
+        setNewBranchError('分支名不能包含下列任何字符：^ * \\ ');
+      }else{
+        for(var i=0;i<str.length;i++){
+          let s = str[i];
+          if(value.indexOf(s) > -1){
+            setNewBranchError('分支名不能包含下列任何字符：^ * \\ ');
+            return;
+          }else{
+            setNewBranchName(e.target.value);
+          }
+        }
+      }
+    }
+  }
+
+  // 更新默认仓库分支
+  function updateDefaultBranch(value, info){
+    Axios.patch(`/v1/${owner}/${projectsId}/branches/update_default_branch.json`,{
+      name: info.name
+    }).then(res=>{
+      if(res && res.data){
+        getDetail();
+        setReload(Math.random());
+        !res.data.status && message.success('操作成功');
+      }
+    })
+  }
+
+  // 改变pagesize
+  function onShowSizeChange(current, pageSize){
+    window.scrollTo(0, 0);
+    setCurrent(1);
+    setPageSize(pageSize);
+  }
+
+  // 切换页数
+  function changePage(page, pageSize){
+    window.scrollTo(0, 0);
+    setCurrent(page);
+  }
+
+  // 新建分支按钮点击函数
+  function addBranchBtn(){
+    setAddBranch(true);
+    const url = `/v1/${owner}/${projectsId}/branches/all.json`;
+    Axios.get(url).then(result=>{
+      if(result){
+        setBranchList(result.data);
+      }
+    }).catch(error=>{console.log('error', error);})
+  }
+
   return(
     <Spin spinning={isSpin}>
       <div style={{paddingTop:"10px",minHeight:"400px",paddingBottom:"30px"}}>
-        {
+        <div className='branchListActionBox'>
+          <Input.Search placeholder='请输入分支名称' style={{width: '354px'}} className='searchBranch' onSearch={(value)=>{setCurrent(1);setName(value)}} allowClear/>
+          <div>
+            {isManager && <Link to={`/${owner}/${projectsId}/settings/branches`} className="btn-83" style={{width: '102px'}}><i className="iconfont icon-xuanzhongjibenshezhiicon font-14 mr5"></i>分支设置</Link>}
+            {(isManager || isDeveloper) && (projectDetail && projectDetail.type!==2) && <Button type='primary' onClick={addBranchBtn}>+ 新建分支</Button>}
+          </div>
+        </div>
+        <Table
+          rowKey={'name'}
+          className='branchListTable'
+          dataSource={list}
+          columns={columns}
+          pagination={{current: current, pageSize: pageSize, total: total, showSizeChanger: true, onShowSizeChange:onShowSizeChange, showQuickJumper: true, onChange: changePage}}
+        >
+        </Table>
+        {/* {
           list && list.length>0 && list.map((item,key)=>{
             return(
               <React.Fragment>
@@ -86,7 +333,12 @@ function Index(props) {
                             <div className="treeabout">
                               {
                                 (isManager || isDeveloper) && (projectDetail && projectDetail.type!==2) &&
-                                <Link to={`/${owner}/${projectsId}/compare/${turnbar(defaultBranch)}...${turnbar(i.name)}`} className="btn-83">+ 合并请求</Link>
+                                <Link to={
+                                  // 如果项目是fork的项目，pr自动指向源仓库，否则指向本仓库默认分支
+                                  projectDetail && projectDetail.fork_info?
+                                  `/${projectDetail.fork_info.fork_project_user_login}/${projectDetail.fork_info.fork_project_identifier}/compare/${turnbar(i.name || defaultBranch)}...${owner + ':' + turnbar(i.name)}`
+                                  :`/${owner}/${projectsId}/compare/${turnbar(defaultBranch)}...${turnbar(i.name)}`
+                                } className="btn-83">+ 合并请求</Link>
                               }
                               <Dropdown overlay={menu(i.zip_url,i.tar_url)} trigger={['click']} placement="bottomRight">
                                 <a className="btn-83 ml15">下载<i className="iconfont icon-sanjiaoxing-down font-14"></i></a>
@@ -101,11 +353,47 @@ function Index(props) {
               </React.Fragment>
             )
           })
-        }
-        {
-          list && list.length === 0 && <Nodata _html="暂无数据"/>
-        }
+        } */}
       </div>
+      <Modals
+        title="删除分支"
+        onCancel={()=>{setVisible(false)}}
+        visible={Boolean(visible)}
+        width="456px"
+        btn={
+          <div>
+            <Button size={"large"} onClick={()=>{setVisible(false)}}>取消</Button>
+            <Button type={'danger'} ghost size={"large"} onClick={deleteLabel}>确认删除</Button>
+          </div>
+        }
+      >
+        <div className="contents mb30" style={{justifyContent: 'flex-start'}}>
+          <i className='iconfont icon-shanchu_tc_icon1 font-36 mr18' style={{color: '#ca0002'}}></i>
+          <p style={{color: '#333'}}>确定删除{visible.name}分支?</p>
+        </div>
+      </Modals>
+      <Modal
+        title="新建分支"
+        onCancel={()=>{setAddBranch(false)}}
+        visible={addBranch}
+        width="388px"
+        footer={
+          <Button type={'primary'} style={{width:'334px', height: '42px'}} onClick={createBranch}>确认新建</Button>
+        }
+        className="createNewBranchModal"
+      >
+        <div className="mb30" style={{justifyContent: 'flex-start'}}>
+          <div className='font-15 createBranchLabel'>分支名称</div>
+          <Input placeholder='请输入分支名称' className='createBranchInput' onChange={checkNewBranchName} maxLength={100}/>
+          <div className='newBranchError mt5'>{newBranchError}</div>
+          <div className='font-15 createBranchLabel mt20'>分支起点</div>
+          <Select showSearch style={{width: '340px'}} className='createBranchInput' placeholder="请选择分支起点" onChange={(value)=>{setNewFormBranchName(value)}} getPopupContainer={triggerNode => triggerNode.parentNode}>
+            {branchList && branchList.map((item, index)=>{
+              return <Select.Option value={item.name} key={index}>{item.name}</Select.Option>
+            })}
+          </Select>
+        </div>
+      </Modal>
     </Spin>
   )
 }
diff --git a/src/forge/Main/tree/Index.scss b/src/forge/Main/tree/Index.scss
index f65a1c68f..1c31ea8f1 100644
--- a/src/forge/Main/tree/Index.scss
+++ b/src/forge/Main/tree/Index.scss
@@ -1,3 +1,98 @@
+.treeinfo{
+  .branchLastUpdateUserImage{
+    height: 20px;
+    width: 20px;
+    margin-right: 5px;
+  }
+}
+.f6_bor_but, .f6_bor_but:focus{
+  color:#f60011;
+  background-color:rgba(196, 0, 14, 0.09);
+  border:1px solid #f60011;
+  border-radius:5px;
+  &:hover{
+    color:#f60011;
+    background-color:rgba(196, 0, 14, 0.18);
+    border-color:#ff727c;
+  }
+  &:active{
+    color:#f60011;
+    background-color:rgba(196, 0, 14, 0.22);
+    border-color:#f60011;
+  }
+}
+.branchListTable{
+  .ant-table-thead > tr > th{
+    border-top: 1px solid rgba(42, 97, 255, 0.23);
+    border-bottom: 1px solid rgba(42, 97, 255, 0.23) !important;
+    background-color:#fafcff;
+  }
+  .ant-table-column-title{
+    color:#40424a;
+  }
+  .ant-table-thead > tr:first-child > th:last-child{
+    border-right: 1px solid rgba(42, 97, 255, 0.23);
+  }
+  .ant-table-thead > tr:first-child > th:first-child{
+    border-left: 1px solid rgba(42, 97, 255, 0.23);
+  }
+  .ant-table-tbody > tr > td{
+    border-color: #eeeeee;
+    padding: 18.5px 16px;
+  }
+  .branchNameColumn{
+    border-left: 1px solid #d0d0d0;
+  }
+  .branchActionColumn{
+    border-right: 1px solid #d0d0d0;
+  }
+  .task-hide{
+    color: $primary-color;
+  }
+  .ant-table-empty .ant-table-placeholder{
+    border-left: 1px solid #d0d0d0;
+    border-right: 1px solid #d0d0d0;
+  }
+}
+.branchListActionBox{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20px 0 30px;
+}
+.createNewBranchModal{
+  .ant-modal-title{
+    text-align: left;
+    color:#333333;
+    font-size:17px;
+    font-weight: normal !important;
+  }
+  .ant-modal-header{
+    border-bottom: none;
+    background-color:rgba(70, 106, 255, 0.05);
+  }
+  .ant-modal-close{right: 5px;}
+  .ant-modal-close-x{font-size: 26px;}
+  .ant-modal-footer{
+    border-top: none;
+    text-align: center;
+    padding-bottom: 53px;
+  }
+  .ant-modal-content{
+    background-image:linear-gradient(359.37deg,#ebf3ff 0%,#f8fbff 55.01%,#f1f5ff 100%);
+  }
+  .createBranchLabel{
+    color:#27282d;
+    margin-bottom: 12px;
+  }
+  .createBranchInput, .createBranchInput .ant-select-selection{
+    border-color:#9eaacb;
+    background-color: transparent !important;
+  }
+  .newBranchError{
+    color:#df0002;
+  }
+}
 .branchSort{
   font-weight: 500;
   color: #333333;
@@ -49,14 +144,16 @@
 }
 .treecopy{
   flex:1;
-  display: flex;  
-  justify-content: center;      
+  display: flex;
+  // justify-content: center;
+  &>div:not(.treeCopyBox){
+    position: relative;
+  }
   &>div{
     height: 32px;
     background: #FAFBFC;
     border-radius: 4px;
     border: 1px solid #D0D0D0;
-    position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
@@ -64,6 +161,7 @@
       padding:0px 15px;
       border-right: 1px solid rgba(153, 153, 153, 0.4);
       height: 100%;
+      width: 140px;
       img{
         margin-right: 4px;
       }