分支设置、镜像管理

src/AppConfig.js

@@ -30,7 +30,7 @@ if (isDev) {
   }
   debugType = window.location.search.indexOf('debug=t') !== -1 ? 'teacher' :
     window.location.search.indexOf('debug=s') !== -1 ? 'student' :
-      window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || ''
+      window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'admin'
 }
 function clearAllCookie() {
   cookie.remove('_educoder_session', { path: '/' });

src/forge/Component/Title.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Nav = styled.div`{
+  background-color:#fff;
+  padding:20px 30px;
+  border-bottom:1px solid #eee;
+  font-size:16px;
+  color:#333;
+}`
+
+export default (({children})=>{
+  return(
+    <Nav>{children}</Nav>
+  )
+})

src/forge/Component/layout.jsx

@@ -15,6 +15,11 @@ export const AlignCenterBetween = styled.div`{
   justify-content: space-between;
   border-bottom:1px solid #eee;
 }`
+export const FlexAJ = styled.div`{
+  display:flex;
+  align-items: center;
+  justify-content: space-between;
+}`
 export const AlignCenter = styled.div`{
   display:flex;
   align-items: center;
@@ -42,3 +47,33 @@ export const WhiteBack = styled.div`{
   background-color:#fff;
   border-radius:5px;
 }`
+export const Blueline = styled.a`{
+  height:30px;
+  line-height:30px;
+  border-radius:5px;
+  border:1px solid rgba(80,145,255,1);
+  color:rgba(80,145,255,1);
+  padding:0px 12px;
+}`
+export const NumUl = styled.ul`{
+  padding-left: 20px;
+  & > li{
+    list-style-type: decimal;
+    color:#888;
+    height:24px;
+    line-height:24px;
+  }
+}`
+export const GreenUnder = styled.a`{
+  color:#28BD6C!important;
+  position:relative;
+  &:after{
+    position:absolute;
+    bottom:-2px;
+    left:0px;
+    width:100%;
+    height:1px;
+    content:'';
+    background:#28BD6C;
+  }
+}`

src/forge/Main/list.css

@@ -99,7 +99,7 @@
 .list-l-Menu li.active::before{
   position: absolute;
   left: 0px;
-  top: 10px;
+  top: 15px;
   width: 6px;
   content: '';
   height: 33px;

src/forge/Settings/Branch.js

@@ -1,42 +1,51 @@
-import React , { useEffect , useState } from 'react';
+import React , { useState } from 'react';
-import { Input , Select } from 'antd';
+import SelectBranch from '../Branch/Select';
-import { getBranch } from '../GetData/getData';
+import Title from '../Component/Title';
+import styled from 'styled-components';
+import { Blueline , FlexAJ , NumUl , GreenUnder , AlignCenter , WhiteBack } from '../Component/layout';
 
+const Div = styled.div`{
+  padding:20px 30px;
+  min-height:500px;
+}`
 
-const { Option } = Select;
 export default ((props)=>{
-  const [ branchList , setBranchList] = useState(undefined);
+  const [ branch , setBranch ] = useState("master");
   const { projectsId } = props.match.params;
+  const projectDetail = props.projectDetail;
 
-  useEffect(()=>{
+  function resetSetting(){
-    getBranchs(projectsId);
-  },[projectsId])
 
-  async function getBranchs(id){
-    let result = await getBranch(id);
-    setBranchList(result);
   }
-
-
-  const branchListRender = (
-    branchList && branchList.map((item,key)=>{
-      return(
-        <Option value={item.name}>{item.name}</Option>
-      )
-    })
-  )
   return(
-    <div className="normalBox">
+    <WhiteBack>
-      <div className="normalBox-title font-16">
+      <Title>分支设置</Title>
-        分支列表
+      <Div>
-      </div>
+        <div className="pb20" style={{borderBottom:"1px solid #eee"}}>
-      <p className="pl15 pt15">请选择一个默认的分支用于合并请求和提交：</p>
+          <p className="color-grey-3 mb10">默认分支</p>
-      <div className="addPanel">
+          <p className="mb10">默认分支被视作为代码库中的基本分支，是所有克隆、代码提交、合并请求的目标分支</p>
-        <Select className="branchSelect">
+          <AlignCenter>
-          {branchListRender}
+            <SelectBranch 
-        </Select>
+            branch={branch}
-        <a className="small_submitBtn ml20" onClick={this.resetSetting}>更新仓库设置</a>
+            repo_id={ projectDetail && projectDetail.repo_id}
-      </div>
+            projectsId={projectsId} 
-    </div>
+            changeBranch={setBranch}
+            />
+            <a className="color-blue ml20" onClick={resetSetting()}>设为默认分支</a>
+          </AlignCenter>
+        </div>
+        <div>
+          <FlexAJ className="pt20">
+            <span className="color-grey-3">保护分支规则</span>
+            <Blueline>+&nbsp;新建规则</Blueline>
+          </FlexAJ>
+          <NumUl>
+            <li>限制分支的推送、合并。强制推送相关请去<GreenUnder>仓库设置</GreenUnder>。</li>
+            <li>一个分支同时只能有一个保护分支规则生效，越早创建的规则优先级越高。</li>
+            <li>保护分支规则只影响状态是【保护分支】的分支。【常规分支】和【只读分支】都不影响。</li>
+          </NumUl>
+        </div>
+      </Div>
+    </WhiteBack>
   )
 })

src/forge/Settings/Collaborator.js

@@ -15,6 +15,8 @@ import {
 import NoneData from "../Nodata";
 import axios from "axios";
 import { getImageUrl } from "educoder";
+import {WhiteBack} from '../Component/layout';
+
 const { Search } = Input;
 
 const { Option } = AutoComplete;
@@ -425,7 +427,7 @@ class Collaborator extends Component {
         );
       });
     return (
-      <div>
+      <WhiteBack>
         <div className="flex-a-center baseForm bbr">
           <span className="font-18 fwb text-black">协作者管理</span>
           <div className="addPanel">
@@ -491,7 +493,7 @@ class Collaborator extends Component {
         ) : (
           ""
         )}
-      </div>
+      </WhiteBack>
     );
   }
 }

src/forge/Settings/Index.js

@@ -2,10 +2,11 @@ import React, { Component } from "react";
 import { Link, Route, Switch } from "react-router-dom";
 
 import "../css/index.css";
-import "./setting.css";
+import "./setting.scss";
 
 import Loadable from "react-loadable";
 import Loading from "../../Loading";
+import { Box , Long , Short , Gap , WhiteBack} from '../Component/layout';
 
 const Branch = Loadable({
   loader: () => import("./Branch"),
@@ -30,8 +31,8 @@ class Index extends Component {
 
     const flag = pathname === `/projects/${projectsId}/setting`;
     return (
-      <div className="ProjectListIndex">
+      <Box className="ProjectListIndex">
-        <div className="list-left">
+        <Short>
           <ul className="list-l-Menu">
             <li className={flag ? "active" : ""}>
               <p>
@@ -63,7 +64,6 @@ class Index extends Component {
                 <i className="iconfont icon-fenzhi font-20 mr10"></i>
                   分支设置
                 </Link>
-  
               </p>
             </li> */}
             <li
@@ -90,10 +90,10 @@ class Index extends Component {
               </p>
             </li> */}
           </ul>
-        </div>
+        </Short>
-        <div className="list-right">
+        <Long>
-          <div>
+          <Gap>
-            <Switch {...this.props}>
+              <Switch {...this.props}>
               {/* 协作者 */}
               <Route
                 path="/projects/:projectsId/setting/collaborator"
@@ -108,6 +108,12 @@ class Index extends Component {
                   <Tags {...this.props} {...props} {...this.state} />
                 )}
               ></Route>
+              <Route
+                path="/projects/:projectsId/setting/branch"
+                render={(props) => (
+                  <Branch {...this.props} {...props} {...this.state} />
+                )}
+              ></Route>
               {/* 修改仓库信息 */}
               <Route
                 path="/projects/:projectsId/setting"
@@ -116,9 +122,9 @@ class Index extends Component {
                 )}
               ></Route>
             </Switch>
-          </div>
+          </Gap>
-        </div>
+        </Long>
-      </div>
+      </Box>
     );
   }
 }

src/forge/Settings/Setting.js

@@ -1,8 +1,11 @@
 import React, { Component } from "react";
 import { Form, Input, Checkbox, Select } from "antd";
+import Title from '../Component/Title';
+import Mirror from './SettingMirror';
+import {WhiteBack} from '../Component/layout';
 
 import axios from "axios";
-import "./setting.css";
+import "./setting.scss";
 const { TextArea } = Input;
 const { Option } = Select;
 class Setting extends Component {
@@ -146,10 +149,8 @@ class Setting extends Component {
     const { CategoryList, LanguageList, private_check } = this.state;
     return (
       <div>
-        <div className="">
+        <WhiteBack>
-          <div className="flex-a-center baseForm bbr">
+          <Title>基本设置</Title>
-            <span className="font-18 fwb text-black">基本设置</span>
-            </div>
           <Form className="baseForm">
             <Form.Item label="项目名称">
               {getFieldDecorator("project_name", {
@@ -212,22 +213,26 @@ class Setting extends Component {
               </a>
             </p>
           </Form>
-        </div>
+          {/* 镜像设置部分，暂无接口，先不显示 */}
-        <div className="dangerousBox mb20">
+          {/* <Mirror /> */}
-          <div className="dangerousTitle">危险操作区</div>
+        </WhiteBack>
-          <div className="flex-a-center padding15-10">
+        <WhiteBack className="dangerousBox mb20">
-            <div>
+          <div>
-              <p className="font-bd font-16">删除本仓库</p>
+            <div className="dangerousTitle">危险操作区</div>
-              <p className="mt10">
+            <div className="flex-a-center padding15-10">
-                删除仓库是永久性的,
+              <div>
-                无法撤消，且删除后，与仓库关联的项目/任务/合并请求/版本发布等，均会被删除
+                <p className="font-bd font-16">删除本仓库</p>
-              </p>
+                <p className="mt10">
+                  删除仓库是永久性的,
+                  无法撤消，且删除后，与仓库关联的项目/任务/合并请求/版本发布等，均会被删除
+                </p>
+              </div>
+              <a onClick={this.deleteProject} className="red_deleteBtn">
+                删除本仓库
+              </a>
             </div>
-            <a onClick={this.deleteProject} className="red_deleteBtn">
-              删除本仓库
-            </a>
           </div>
-        </div>
+        </WhiteBack>
       </div>
     );
   }

src/forge/Settings/SettingMirror.jsx

@@ -0,0 +1,94 @@
+import React , { forwardRef , useCallback , useState } from 'react';
+import { Form , Checkbox , Input , Button } from 'antd';
+import styled from 'styled-components';
+import './setting.scss';
+
+const Div = styled.div`{
+  margin:0px 30px;
+  background:#FAFAFA;
+  padding:0px 20px 10px 20px;
+  .ant-form.ant-form-horizontal{
+    padding:15px 0px;
+  }
+}`
+const P = styled.p`{
+  padding:15px 0px;
+  font-size:16px;
+  color:#333;
+  border-bottom:1px solid #DDDDDD;
+}`
+const Item = styled.div`{
+  padding-bottom:10px;
+  &>span{
+    color:#333;
+  }
+  .ant-checkbox-wrapper{
+    height:20px;
+    line-height:20px;
+  }
+  .ant-row.ant-form-item{
+    margin-bottom:0px;
+  }
+}`
+export default Form.create()(
+  forwardRef(({ form })=>{
+    const { getFieldDecorator, validateFields, setFieldsValue } = form;
+    const [ mirrorCheck , setMirrorCheck ] = useState(false)
+    const helper = useCallback(
+      (label, name, rules, widget, classname , isRequired = true ) => (
+        <Item className={classname}>
+          <span required={isRequired}>{label}</span>
+          <Form.Item>
+            {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
+          </Form.Item>
+        </Item>
+      ),
+      []
+    );
+    return(
+      <Div>
+        <P>镜像设置</P>
+        <Form>
+          {helper(
+            "修剪",
+            "cut",
+            [],
+            <Checkbox>删除过时的远程跟踪引用</Checkbox>,'iteminline setHeight'
+          )}
+          {/* {helper(
+            "镜像间隔（有效时间单位为“h”“m”“s”），0将禁用自动同步。",
+            "time",
+            [],
+            <Input />,'iteminline'
+          )} */}
+          {helper(
+            "从URL克隆",
+            "clone",
+            [],
+            <Input />
+          )}
+          <p className="color-grey-8">在Clone认证部分里输入必要的信息</p>
+          <p className="mt10 mb10 color-grey-3 pointer" onClick={()=>setMirrorCheck(!mirrorCheck)}>需要授权验证<i className={mirrorCheck?"iconfont icon-xiajiantou font-13 ml10 color-grey-8":"iconfont icon-youjiantou font-13 ml10 color-grey-8"}></i></p>
+          { mirrorCheck ? 
+            <div className="df" style={{alignItems:'center'}}>
+              {helper(
+                "用户名",
+                "name",
+                [],
+                <Input />,'iteminline'
+              )}
+              {helper(
+                "密码",
+                "password",
+                [],
+                <Input type={'password'}/>,'iteminline ml30'
+              )}
+            </div>
+          :""}
+          <p className="mb15">上次同步  2020-06-16 17：40</p>
+          <Button type={"primary"}>同步</Button>
+        </Form>
+      </Div>
+    )
+  })
+)

src/forge/Settings/new_tags.js

@@ -12,13 +12,14 @@ import {
   Button,
   Table,
 } from "antd";
-import { Link } from "react-router-dom";
 import "../Order/order.css";
-import "./setting.css";
+import "./setting.scss";
 import NoneData from "../Nodata";
 import { SketchPicker } from "react-color";
 import reactCSS from "reactcss";
 import axios from "axios";
+import {WhiteBack} from '../Component/layout';
+
 class NewTags extends Component {
   constructor(props) {
     super(props);
@@ -433,7 +434,7 @@ class NewTags extends Component {
     };
 
     return (
-      <div className="">
+      <WhiteBack>
         <div
           className="flex-a-center baseForm bbr"
           style={{ "justify-content": "space-between" }}
@@ -556,7 +557,7 @@ class NewTags extends Component {
             </div>
           </div>
         </Modal>
-      </div>
+      </WhiteBack>
     );
   }
 }

src/forge/Settings/setting.scss

@@ -23,7 +23,20 @@
   content: '';
 }
 .baseForm{
-  padding:15px 20px!important;
+  padding:15px 30px!important;
+}
+.iteminline{
+  display: flex;
+  align-items: center;
+  .ant-row.ant-form-item{
+    margin-left: 15px;
+  }
+}
+.setHeight{
+  .ant-form-item-control{
+    height: 20px;
+    line-height: 20px;
+  }
 }
 .baseForm .ant-row.ant-form-item{
   margin-bottom: 15px;
@@ -49,7 +62,6 @@
 }
 .addPanel{
   display: flex;
-  /* padding:15px; */
 }
 .red_btn{
   display: block;
@@ -75,10 +87,14 @@
 }
 
 .dangerousBox{
-  border:1px solid #efc16b;
-  border-radius: 4px;
   margin-top: 20px;
+  padding:20px;
+  &>div{
+    border:1px solid #efc16b;
+    border-radius: 4px;
+  }
 }
+
 .dangerousTitle{
   padding:10px;
   background: #f9edbe;