项目详情：顶部信息排版调整，修改显示bug

src/forge/Main/Detail.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Spin, Tooltip } from 'antd';
 import { Link, Route, Switch } from 'react-router-dom';
-import { Content , FlexAJ , AlignCenter } from '../Component/layout';
+import { Content , FlexAJ , AlignTop } from '../Component/layout';
 import DetailBanner from './sub/DetailBanner';
 import Invite from './sub/Invite';
 import '../css/index.scss'
@@ -393,11 +393,11 @@ class Detail extends Component {
   textFunc = (forked_from_project_id,fork_info)=>{
     let type = fork_info && fork_info.fork_project_user_type;
     return forked_from_project_id && fork_info ?
-      <div className="color-grey-9">
+      <div className="color-grey-9 df">
-        <span>复刻自 </span>
+        <span>复刻自</span>
-        <Link to={`${type ==="Organization" ? "/organize":'/users'}/${fork_info.fork_project_user_login}`} className="show-user-link color-grey-6">{fork_info.fork_project_user_name}</Link>
+        <Link to={`${type ==="Organization" ? "/organize":'/users'}/${fork_info.fork_project_user_login}`} className="show-user-link color-grey-6 ml5">{fork_info.fork_project_user_name}</Link>
         <span> / </span>
-        <Link to={`/projects/${fork_info.fork_project_user_login}/${fork_info.fork_project_identifier}`} className="color-grey-6">{fork_info.fork_form_name}</Link>
+        <Link to={`/projects/${fork_info.fork_project_user_login}/${fork_info.fork_project_identifier}`} className="color-grey-6 task-hide flex1" style={{maxWidth:"400px"}} title={fork_info.fork_form_name}>{fork_info.fork_form_name}</Link>
       </div> : ""
   }
   
@@ -426,100 +426,95 @@ class Detail extends Component {
       <div>
         <div className="detailHeader-wrapper">
           <div className="normal">
-            <FlexAJ style={{paddingTop:"15px"}}>
+            <AlignTop style={{padding:"20px 0px 10px",justifyContent:"space-between"}}>
-              <AlignCenter>
+              <div>
-                <div className="projectallName">
+                <AlignTop>
-                  {project && project.author &&
+                  <div className="projectallName">
-                    <Link to={`${project.author.type ==="Organization" ? "/organize":'/users'}/${project.author.login}`}>{project.author.name}</Link>
+                    {project && project.author &&
-                  }
+                      <Link to={`${project.author.type ==="Organization" ? "/organize":'/users'}/${project.author.login}`}>{project.author.name}</Link>
-                  <span className="ml5 mr5">/</span>
+                    }
-                  <Link to={`/projects/${owner}/${projectsId}`} className="projectN">{project && project.name}</Link>
+                    <span className="ml5 mr5">/</span>
-                </div>
+                    <Link to={`/projects/${owner}/${projectsId}`} className="projectN mt6">{project && project.name}</Link>
-                { projectDetail && projectDetail.private && <span className="privateTag">私有</span>}
+                  </div>
-                {
+                  { projectDetail && projectDetail.private && <span className="privateTag mt6">私有</span>}
-                  projectDetail && projectDetail.type && projectDetail.type !== 0 ? 
+                </AlignTop>
-                  projectDetail.type === 2 ?
+                <div className="mt8">
-                  <Tooltip title={"镜像自: " + projectDetail.mirror_url} className="ml5" placement={'right'}>
-                    <i className="iconfont icon-banbenku font-18 mt6" style={{ color: "#8D90E3" }}/>
-                  </Tooltip>
-                  :
-                  <Tooltip title={"镜像自: " + projectDetail.mirror_url} className="ml5" placement={'right'}>
-                    <i className="iconfont icon-jingxiang font-18 color-green mt6" />
-                  </Tooltip>
-                  :""
-                }
-              </AlignCenter>
-              {
-                firstSync ? "":
-                <span className="df">
                   {
-                    ((current_user && current_user.admin) || isManager) && (projectDetail && projectDetail.type && projectDetail.type === 2) ?
+                    projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
-                    <a className="synchronism ml30" onClick={this.synchronismMirror}>同步镜像</a> : ""
+                    this.textFunc(projectDetail.forked_from_project_id,projectDetail.fork_info)
+                    :""
                   }
-                  <span className="detail_tag_btn">
+                  {
-                    <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={() => this.focusFunc(watched)}>
+                    projectDetail && projectDetail.type && projectDetail.type !== 0 ? 
-                      <i className={watched ? "iconfont icon-shixing color-orange font-16 mr3":"iconfont icon-kongxing color-grey-9 font-16 mr3"}></i>
+                    <span className="color-grey-9">镜像自 <span className="color-grey-6">{projectDetail.mirror_url}</span></span>
-                      <span>{watched ? '取消关注' : '关注'}</span>
+                    :""
-                    </a>
+                  }
-                    {
+                </div>
-                      watchers_count > 0 ?
+              </div>
-                      platform ?
-                      <Link className="detail_tag_btn_count" style={{color:`${watched?"#2878FF":"#666"}`}} to={platform?{ pathname: `/projects/${owner}/${projectsId}/watchers`, state }:""}>
-                        {watchers_count}
-                      </Link>
-                      :
-                      <span className="detail_tag_btn_count">{watchers_count}</span>
-                      :""
-                    }
-                  </span>
-                  <span className="detail_tag_btn">
-                    <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={() => this.pariseFunc(praised)}>
-                      <i className={praised ? "iconfont icon-weibiaoti105 color-orange font-14 mr3":"iconfont icon-guanzhu color-grey-9 font-14 mr3"}></i>
-                      <span>{praised ? '取消点赞' : '点赞'}</span>
-                    </a>
-                    {
-                      praises_count > 0 ?
-                      platform ?
-                      <Link className="detail_tag_btn_count" style={{color:`${praised?"#2878FF":"#666"}`}} to={{ pathname: `/projects/${owner}/${projectsId}/stargazers`, state }}>
-                        {praises_count}
-                      </Link>:
-                      <span className="detail_tag_btn_count">{praises_count}</span>
-                      :""
-                    }
-                  </span>
-                  <span className="detail_tag_btn">
-                    <Tooltip title="复刻是fork的中文名，即复制代码仓库" placement="bottom">
-                      <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={this.forkFunc}>
-                        <i className="iconfont icon-fork color-grey-9 mr3"></i>复刻
-                      </a>
-                    </Tooltip>
-                    {
-                      forked_count > 0 ?
-                      platform ?
-                      <Link className="detail_tag_btn_count" to={{ pathname: `/projects/${owner}/${projectsId}/fork_users`, state }}>
-                        {forked_count}
-                      </Link>
-                      :
-                      <span className="detail_tag_btn_count">{forked_count}</span>
-                      :""
-                    }
-                  </span>
-                </span>
-              }
-            </FlexAJ>
-            <FlexAJ>
               <div>
                 {
-                  projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
+                  firstSync ? "":
-                  this.textFunc(projectDetail.forked_from_project_id,projectDetail.fork_info)
+                  <span className="df">
-                  :""
+                    {
+                      ((current_user && current_user.admin) || isManager) && (projectDetail && projectDetail.type && projectDetail.type === 2) ?
+                      <a className="synchronism ml30" onClick={this.synchronismMirror}>同步镜像</a> : ""
+                    }
+                    <span className="detail_tag_btn">
+                      <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={() => this.focusFunc(watched)}>
+                        <i className={watched ? "iconfont icon-shixing color-orange font-16 mr3":"iconfont icon-kongxing color-grey-9 font-16 mr3"}></i>
+                        <span>{watched ? '取消关注' : '关注'}</span>
+                      </a>
+                      {
+                        watchers_count > 0 ?
+                        platform ?
+                        <Link className="detail_tag_btn_count" style={{color:`${watched?"#2878FF":"#666"}`}} to={platform?{ pathname: `/projects/${owner}/${projectsId}/watchers`, state }:""}>
+                          {watchers_count}
+                        </Link>
+                        :
+                        <span className="detail_tag_btn_count">{watchers_count}</span>
+                        :""
+                      }
+                    </span>
+                    <span className="detail_tag_btn">
+                      <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={() => this.pariseFunc(praised)}>
+                        <i className={praised ? "iconfont icon-weibiaoti105 color-orange font-14 mr3":"iconfont icon-guanzhu color-grey-9 font-14 mr3"}></i>
+                        <span>{praised ? '取消点赞' : '点赞'}</span>
+                      </a>
+                      {
+                        praises_count > 0 ?
+                        platform ?
+                        <Link className="detail_tag_btn_count" style={{color:`${praised?"#2878FF":"#666"}`}} to={{ pathname: `/projects/${owner}/${projectsId}/stargazers`, state }}>
+                          {praises_count}
+                        </Link>:
+                        <span className="detail_tag_btn_count">{praises_count}</span>
+                        :""
+                      }
+                    </span>
+                    <span className="detail_tag_btn">
+                      <Tooltip title="复刻是fork的中文名，即复制代码仓库" placement="bottom">
+                        <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={this.forkFunc}>
+                          <i className="iconfont icon-fork color-grey-9 mr3"></i>复刻
+                        </a>
+                      </Tooltip>
+                      {
+                        forked_count > 0 ?
+                        platform ?
+                        <Link className="detail_tag_btn_count" to={{ pathname: `/projects/${owner}/${projectsId}/fork_users`, state }}>
+                          {forked_count}
+                        </Link>
+                        :
+                        <span className="detail_tag_btn_count">{forked_count}</span>
+                        :""
+                      }
+                    </span>
+                  </span>
+                }
+                {
+                  projectDetail && projectDetail.invite_code &&
+                  <Invite code={projectDetail.invite_code} className={"mt8 textRight"}/>
                 }
               </div>
-              {
+            </AlignTop>
-                projectDetail && projectDetail.invite_code &&
-                <Invite code={projectDetail.invite_code} />
-              }
-            </FlexAJ>
             {
               firstSync ? "" :
               <DetailBanner 

src/forge/Main/sub/Invite.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tooltip , message } from 'antd';
 
-function Invite({code}) {
+function Invite({code,className}) {
 
   function jsCopy(id) {
     const copyEle = document.querySelector(id); // 获取要复制的节点
@@ -13,7 +13,7 @@ function Invite({code}) {
     message.success('复制成功');
   }
   return(
-    <div>
+    <div className={className}>
       <span>邀请码: <span id="devitecode">{code}</span></span>
       <Tooltip title={<p className="edu-txt-center">可以通过邀请码邀请成员加入项目<br/>点击复制邀请码。</p>}  placement={"bottom"}>
         <i className="iconfont icon-fuzhi2 font-16 color-blue ml8" onClick={()=>jsCopy("#devitecode")}></i>

src/forge/css/index.scss

@@ -8,18 +8,17 @@ ul,ol,dl{
   color: #333;
 }
 .projectallName{
-  display: flex;
-  align-items: center;
   font-size: 22px;
   font-weight: normal;
+  line-height: 30px;
+  max-width: 850px;
   .projectN{
-    overflow: hidden;
+    word-break: break-all;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    flex: 1;
-    max-width: 500px;
   }
 }
+.textRight{
+  text-align: right;
+}
 .main{
   width: 1200px;
   padding:20px;