From a2550aab1e2486b0fc375a9f60ec952625b9e5f4 Mon Sep 17 00:00:00 2001
From: caicai8 <1149225589@qq.com>
Date: Mon, 30 Dec 2019 14:30:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/react/public/index.html       |   8 +-
 public/react/src/App.js              |   2 +-
 public/react/src/forge/Index.js      |  31 ++++++-
 public/react/src/forge/Main/Index.js | 116 +++++++++++++++++++++++++++
 public/react/src/forge/Main/list.css |  93 +++++++++++++++++++++
 public/react/src/forge/New/Index.js  |  81 +++++++++++++------
 public/react/src/forge/New/new.css   |  11 +--
 public/react/src/forge/css/index.css |  12 +--
 8 files changed, 308 insertions(+), 46 deletions(-)
 create mode 100644 public/react/src/forge/Main/Index.js
 create mode 100644 public/react/src/forge/Main/list.css

diff --git a/public/react/public/index.html b/public/react/public/index.html
index 738a796a2..5bde6d5ba 100755
--- a/public/react/public/index.html
+++ b/public/react/public/index.html
@@ -4,7 +4,7 @@
 
     <meta charset="utf-8">
       <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
-      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
       <!-- width=device-width, initial-scale=1 , shrink-to-fit=no -->
     <!-- <meta name="viewport" content=""> -->
@@ -32,13 +32,13 @@
       window.__isR = true;
       // 不支持ie9 ie10
       if (
-          ( navigator.userAgent.indexOf('MSIE 9') != -1 
+          ( navigator.userAgent.indexOf('MSIE 9') != -1
             || navigator.userAgent.indexOf('MSIE 10') != -1 )
-          && 
+          &&
           location.pathname.indexOf("/compatibility") == -1) {
         debugger;
         // location.href = './compatibility'
-        location.href = '/compatibility.html'  
+        location.href = '/compatibility.html'
       }
       // const isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
       const isWeiXin = (/MicroMessenger/i.test(navigator.userAgent.toLowerCase()));
diff --git a/public/react/src/App.js b/public/react/src/App.js
index badedbff6..e34ef8fb2 100644
--- a/public/react/src/App.js
+++ b/public/react/src/App.js
@@ -514,7 +514,7 @@ class App extends Component {
 							<Switch>
 
 								{/* 项目 */}
-								<Route path="/forge"
+								<Route path="/projects"
 									render={
 										(props) => {
 
diff --git a/public/react/src/forge/Index.js b/public/react/src/forge/Index.js
index 207706cbc..074e0bda1 100644
--- a/public/react/src/forge/Index.js
+++ b/public/react/src/forge/Index.js
@@ -12,18 +12,45 @@ import './css/index.css';
 import Loadable from 'react-loadable';
 import Loading from '../Loading';
 
+
 const ProjectNew = Loadable({
 	loader: () => import('./New/Index'),
 	loading: Loading,
 })
+const ProjectIndex = Loadable({
+	loader: () => import('./Main/Index'),
+	loading: Loading,
+})
 
 class Index extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      current_user:undefined
+    }
+  }
+  componentDidMount=()=>{
+    let current_user={
+      user_id:50207
+    }
+
+    this.setState({
+      current_user
+    })
+  }
   render(){
+    const {current_user} = this.state;
     return(
       <Switch {...this.props}>
-        <Route exact path="/forge/projects/new"
+        <Route exact path="/projects/:projectsType/new"
+          render={
+            (props) => (<ProjectNew {...this.props} {...props} {...this.state} current_user={current_user}/>)
+          }
+        ></Route>
+
+        <Route exact path="/projects"
           render={
-            (props) => (<ProjectNew {...this.props} {...props} {...this.state} />)
+            (props) => (<ProjectIndex {...this.props} {...props} {...this.state} current_user={current_user}/>)
           }
         ></Route>
       </Switch>
diff --git a/public/react/src/forge/Main/Index.js b/public/react/src/forge/Main/Index.js
new file mode 100644
index 000000000..3021ec7bb
--- /dev/null
+++ b/public/react/src/forge/Main/Index.js
@@ -0,0 +1,116 @@
+import React , { Component } from 'react';
+
+import { Menu , Input , Dropdown , Icon, Result } from 'antd';
+import { Link } from 'react-router-dom'
+import '../css/index.css'
+import './list.css';
+
+import axios from 'axios';
+
+const Search = Input.Search;
+const { SubMenu } = Menu;
+class Index extends Component{
+  
+  componentDidMount=()=>{
+    this.getListData();
+  }
+
+  getListData=()=>{
+    const {current_user} = this.props;
+    const url = `/projects.json`;
+    axios.get(url,{
+      user_id:current_user && current_user.user_id
+    }).then((result)=>{
+      if(result){
+        
+      }
+    }).catch((error)=>{})
+  }
+
+  render(){
+    const menu=(
+      <Menu>
+        <Menu.Item key="0">
+          <a href="http://www.alipay.com/">1st menu item</a>
+        </Menu.Item>
+        <Menu.Item key="1">
+          <a href="http://www.taobao.com/">2nd menu item</a>
+        </Menu.Item>
+      </Menu>
+    )
+    return(
+      <div className="main ProjectListIndex">
+        <div className="list-left">
+          <ul className="list-l-Menu">
+            <li className="MenuTitle">项目类型</li>
+            <li>
+              <Link to={``}>
+                <span>开源托管项目</span>
+                <span>85</span>
+              </Link>
+            </li>
+            <li>
+              <Link to={``}>
+                <span>开源镜像项目</span>
+                <span>85</span>
+              </Link>
+            </li>
+          </ul>
+          <ul className="list-l-Menu">
+            <li className="MenuTitle">项目类别</li>
+            <Menu
+              mode="inline"
+            >
+              <SubMenu
+                key="sub1"
+                title={
+                  <span>
+                    <span>Navigation One</span>
+                  </span>
+                }
+              >
+                <Menu.ItemGroup key="g1">
+                  <Menu.Item key="1">Option 1</Menu.Item>
+                  <Menu.Item key="2">Option 2</Menu.Item>
+                  <Menu.Item key="3">Option 3</Menu.Item>
+                  <Menu.Item key="4">Option 4</Menu.Item>
+                </Menu.ItemGroup>
+              </SubMenu>
+            </Menu>
+          </ul>
+        </div>
+        <div className="list-right">
+          <div className="list-r-operation">
+            <Search
+              placeholder="输入项目名称关键字进行搜索"
+              enterButton="搜索"
+              size="large"
+              onSearch={value => console.log(value)}
+              className="list-r-Search"
+            />
+            <Dropdown overlay={menu} trigger={['click']} placement='bottomRight'>
+              <a className="ant-dropdown-link">
+                排序 <Icon type="down" />
+              </a>
+            </Dropdown>
+          </div>
+          <div className="project-list">
+            <div className="p-r-Item">
+              <img className="p-r-photo" alt="" src="http://b-ssl.duitang.com/uploads/item/201901/17/20190117230425_eofqv.thumb.700_0.jpg" ></img>
+              <div className="p-r-Infos">
+                <p>C+++++++++++++++++++</p>
+                <span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </span>
+              </div>
+            </div>   
+            <div></div>   
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+export default Index;
\ No newline at end of file
diff --git a/public/react/src/forge/Main/list.css b/public/react/src/forge/Main/list.css
new file mode 100644
index 000000000..120ead54a
--- /dev/null
+++ b/public/react/src/forge/Main/list.css
@@ -0,0 +1,93 @@
+.ProjectListIndex{
+  display: flex;
+  align-items: flex-start;
+  flex-wrap:wrap;
+}
+.list-left{
+  width: 26%;
+  padding-right: 20px;
+  box-sizing: border-box;
+  margin-bottom: 20px;
+}
+.list-right{
+  width:74%;
+}
+.list-l-Menu{
+  border:1px solid #f4f4f4;
+  background: #fff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+.list-l-Menu>li{
+  height: 40px;
+  line-height: 40px;
+  font-size: 1rem;
+  padding:0px 20px;
+  box-sizing: border-box;
+  color: #333;
+}
+.list-l-Menu>li a{
+  display: flex;
+  justify-content: space-between;
+}
+.list-l-Menu li a span:last-child{
+  color: #999;
+}
+.list-l-Menu .MenuTitle{
+  background-color: #efefef;
+  border-radius: 4px 4px 0px 0px;
+  font-size: 16px;
+}
+.list-l-Menu > li:not(.MenuTitle):hover{
+  background-color: #5fb8ff;
+}
+.list-l-Menu > li:not(.MenuTitle):hover a{
+  color: #fff;
+}
+/* 左侧menu */
+.list-l-Menu .ant-menu-inline{
+  border:none;
+}
+.list-l-Menu .ant-menu-inline .ant-menu-item{
+  width:100%!important;
+}
+.list-l-Menu .ant-menu-item-group-title{
+  padding:0px;
+}
+
+.list-r-operation{
+  display: flex;
+  align-items: center;
+}
+.list-r-Search{
+  flex: 1;
+  width: 0;
+  margin-right: 20px;
+}
+.list-r-Search .ant-btn-lg{
+  height: 38px;
+}
+
+/* 列表 */
+.p-r-Item{
+  display: flex;
+  padding:15px 0px;
+}
+.p-r-photo{
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  margin-right: 15px;
+}
+.p-r-Infos{
+  display: flex;
+  align-content: flex-start;
+  justify-content: space-between;
+}
+
+@media screen and (max-width: 750px){
+  .list-left,.list-right{
+    width: 100%;
+    padding-right: 0px;
+  }
+}
\ No newline at end of file
diff --git a/public/react/src/forge/New/Index.js b/public/react/src/forge/New/Index.js
index 48c07e397..b07805e56 100644
--- a/public/react/src/forge/New/Index.js
+++ b/public/react/src/forge/New/Index.js
@@ -1,6 +1,6 @@
 import React , { Component } from 'react';
 
-import { Input , Form , Select , Checkbox , Button } from 'antd';
+import { Input , Form , Select , Checkbox , Button , Divider } from 'antd';
 
 import '../css/index.css';
 import './new.css'
@@ -97,14 +97,17 @@ class Index extends Component{
   subMitFrom = () =>{
     this.props.form.validateFieldsAndScroll((err, values) => {
       if(!err){
-        console.log(values)
-        const url = `/projects.json`;
+        console.log(values);
+        const { projectsType } =this.props.match.params;
+        const url =  projectsType === "deposit" ? "/projects.json" :"/projects/migrate.json";
         axios.post(url,{
           ...values,
           user_id:50207
         }).then((result)=>{
           if(result){
-
+            if(result.data.id){
+              this.props.showNotification(`${projectsType === "deposit" ? "托管" :"镜像"}项目创建成功!`);
+            }
           }
         }).catch((error)=>{
           console.log(error);
@@ -115,7 +118,9 @@ class Index extends Component{
 
   render(){
     const { getFieldDecorator } = this.props.form;
-
+    console.log(this.props);
+    // 项目类型：deposit-托管项目，mirror-镜像项目
+    const { projectsType } =this.props.match.params;
     const {
       // authorValue,
       preType,
@@ -130,9 +135,9 @@ class Index extends Component{
       LicensesList
     }=this.state;
     return(
-      <div className="main">
+      <div className="main back-white">
         <div className="newPanel">
-          <div className="newPanel_title">创建托管项目</div>
+          <div className="newPanel_title">创建{projectsType === "deposit" ? "托管":"镜像"}项目</div>
           <Form>
             <div className="newPanel_content">
             {/* <Form.Item
@@ -148,6 +153,24 @@ class Index extends Component{
                 </Select>
               )}
             </Form.Item> */}
+            {
+              projectsType != "deposit" &&
+              <React.Fragment>
+                <Form.Item
+                  label="镜像版本库地址"
+                  style={{marginBottom:"0px"}}
+                > 
+                {getFieldDecorator('clone_addr', {
+                    rules: [{
+                      required: true, message: '请填写镜像版本库地址'
+                    }],
+                  })(
+                    <Input placeholder="输入需要同步到本项目的镜像版本库地址"/>
+                  )}
+                </Form.Item>
+                <p className="formTip">示例：https://github.com/facebook/reack.git</p>
+              </React.Fragment>
+            }
             <Form.Item
               label="项目名称"
             > 
@@ -159,6 +182,7 @@ class Index extends Component{
                 <Input placeholder="例如：团队协作方法与研究"/>
               )}
             </Form.Item>
+            
             <Form.Item
               label="项目简介"
             > 
@@ -224,26 +248,31 @@ class Index extends Component{
               )}
             </Form.Item>
             </div>
+            <Divider />
             <div className="newPanel_content">
-              <Form.Item
-                label=".gitignore"
-              > 
-              {getFieldDecorator('ignore_id')(
-                  <Select value={gitignoreType} className="inline_Tag">
-                    {GitignoreList}
-                  </Select>
-                )}
-              </Form.Item>
-              <Form.Item
-                label="开源许可证"
-              > 
-              {getFieldDecorator('license_id')(
-                <Select value={LicensesType} className="inline_Tag">
-                  {LicensesList}
-                </Select>
-                )}
-              </Form.Item>
-
+            {
+              projectsType === "deposit" && 
+              <React.Fragment>
+                <Form.Item
+                  label=".gitignore"
+                > 
+                  {getFieldDecorator('ignore_id')(
+                    <Select value={gitignoreType} className="inline_Tag">
+                      {GitignoreList}
+                    </Select>
+                  )}
+                </Form.Item>
+                <Form.Item
+                  label="开源许可证"
+                > 
+                  {getFieldDecorator('license_id')(
+                    <Select value={LicensesType} className="inline_Tag">
+                      {LicensesList}
+                    </Select>
+                  )}
+                </Form.Item>
+              </React.Fragment>
+            }
               <Form.Item
                 label="可见性"
                 style={{marginBottom:"0px"}}
diff --git a/public/react/src/forge/New/new.css b/public/react/src/forge/New/new.css
index 22abd827e..c2760d18a 100644
--- a/public/react/src/forge/New/new.css
+++ b/public/react/src/forge/New/new.css
@@ -21,7 +21,7 @@
 }
 
 .newPanel_content .ant-form-item-label{
-  width: 100px;
+  width: 135px;
   display: block;
   text-align: right;
   margin-right: 10px;
@@ -46,17 +46,12 @@
   justify-content: space-between;
   align-items:flex-end
 }
-.newContent_inline .ant-form-item-control-wrapper{
-  min-width: 235px;
-}
-.newContent_inline .inline_Tag{
-  width: 235px;
-}
+
 .newContent_inline > .ant-form-item:nth-child(2){
   margin-left: 20px;
 }
 .formTip{
-  margin:0px 0px 20px 110px;
+  margin:0px 0px 20px 146px;
 }
 @media screen and (max-width: 750px){
   .newPanel_content{
diff --git a/public/react/src/forge/css/index.css b/public/react/src/forge/css/index.css
index ca09e701a..37d6729f3 100644
--- a/public/react/src/forge/css/index.css
+++ b/public/react/src/forge/css/index.css
@@ -1,11 +1,13 @@
-body{
-  font-size:62.5%; 
-}
+
 .main{
   width: 1200px;
-  margin:2rem auto;
+  margin:20px auto;
+}
+/* 背景色 */
+.back-white{
   background: #fff;
 }
+/* 灰色按钮-高度32 */
 .btn_32{
   border-radius: 4px;
   padding:0px 12px;
@@ -18,7 +20,7 @@ body{
 @media screen and (max-width: 1200px){
   .main{
     width:1000px;
-    margin:1rem auto;
+    margin:10px auto;
   }
 }
 @media screen and (max-width: 1000px){