From a80a20ef6e0ea159f39b6033d1eb7ff4222f1960 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Fri, 24 Sep 2021 14:29:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E9=A1=B5=E9=9D=A2=E6=94=B9?=
 =?UTF-8?q?=E7=89=88=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Main/Diff.jsx    |  2 +-
 src/forge/Merge/Files.jsx  | 60 +++++++++++++++++++++-----------------
 src/forge/Merge/Index.scss | 24 +++++++++++----
 src/forge/css/index.scss   |  1 +
 4 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/src/forge/Main/Diff.jsx b/src/forge/Main/Diff.jsx
index ad9a527d..192b80e3 100644
--- a/src/forge/Main/Diff.jsx
+++ b/src/forge/Main/Diff.jsx
@@ -81,7 +81,7 @@ export default ({ match , history }) => {
               }
               <i className="iconfont icon-fenzhi2 font-18"></i>{branchName}
               </div>
-              <Button type="primary" onClick={()=>{history.push(`/${owner}/${projectsId}/tree/${truncateCommitId(sha)}`)}} className="btnblue" style={{height:"36px"}}>浏览代码</Button>
+              <Button type="primary" onClick={()=>{history.push(`/${owner}/${projectsId}/tree/${truncateCommitId(sha)}`)}} className="btnblue" style={{height:"36px"}}>浏览文件</Button>
             </div>
           </div>
           <div className="f-wrap-between" style={{ alignItems: "center" }}>
diff --git a/src/forge/Merge/Files.jsx b/src/forge/Merge/Files.jsx
index 1a29f43a..64f09a78 100644
--- a/src/forge/Merge/Files.jsx
+++ b/src/forge/Merge/Files.jsx
@@ -1,14 +1,15 @@
 import React ,{useEffect,useState } from 'react';
 import { truncateCommitId } from '../common/util';
 import { AlignCenter , FlexAJ } from '../Component/layout';
-import { Button, Tooltip,Progress, Popover } from 'antd';
+import { Button, Tooltip,Progress, Popover, Anchor } from 'antd';
 import './merge.css';
 import './Index.scss';
 
+const {Link} =Anchor;
+
 function Files({data,history,owner,projectsId}){
   const [ files , setFiles ] = useState(data && data.files);
   const [ copyfileTipTitle, setCopyfileTipTitle] = useState("复制文件路径");
-  const [ isOpen, setIsOpen] = useState(false);
 
   useEffect(()=>{
     if(data){
@@ -37,39 +38,44 @@ function Files({data,history,owner,projectsId}){
   }
 
   const folderOpen = (
+  <Anchor showInkInFixed={false}>
     <div className="folderList">
-      {files && files.length>1 && files.map((item, key) => {
-        console.log(item.flag);
-        return (
-          <FlexAJ className="filesInfo" key={key} onClick={() => item.flag && showDown(item.flag, key, item.isBin)}>
-            <AlignCenter>
-              <i className="iconfont icon-wenjianicon mr4"></i>
-              {/* {!item.isBin ? <i className={!item.flag ? "iconfont icon-sanjiaoxing-down color-grey-9 mt4" : "iconfont icon-triangle font-15 color-grey-9 mt4"} onClick={() => showDown(item.flag, key, item.isBin)}></i> : ""} */}
-              <span className="cursor-pointer" data-clipboard-text={item.name}>{item.name}</span>
-            </AlignCenter>
-            <div className="see-file">
-              <Tooltip placement="top" title={`${item.addition+item.deletion}处更改：${item.addition>0?item.addition+"处添加":""}${item.addition>0 && item.deletion>0 ?"和":""}${item.deletion>0?item.deletion+"处删除":""}`}>
-                <Progress showInfo = {false} strokeColor = "#2DB44D" size="small" percent={item.addition/(item.addition+item.deletion)*100} />
-              </Tooltip>
-              {item.addition >0 && <span className="color-green ml10">+{item.addition}</span>}
-              {item.deletion >0 && <span className="color-red ml10">-{item.deletion}</span>}
-            </div>
-          </FlexAJ>
-        )
-      })}
-    </div>
+        {files && files.length>1 && files.map((item, key) => {
+          return (
+            <Link href={`#value${key}`} title=
+              {<FlexAJ className="filesInfo" key={key} onClick={() => {item.flag && showDown(item.flag, key, item.isBin);}}>
+                <AlignCenter>
+                  <i className="iconfont icon-wenjianicon mr4"></i>
+                  {/* {!item.isBin ? <i className={!item.flag ? "iconfont icon-sanjiaoxing-down color-grey-9 mt4" : "iconfont icon-triangle font-15 color-grey-9 mt4"} onClick={() => showDown(item.flag, key, item.isBin)}></i> : ""} */}
+                  <span className="cursor-pointer" data-clipboard-text={item.name}>{item.name}</span>
+                </AlignCenter>
+                <div className="see-file">
+                  <Tooltip placement="top" title={`${item.addition+item.deletion}处更改：${item.addition>0?item.addition+"处添加":""}${item.addition>0 && item.deletion>0 ?"和":""}${item.deletion>0?item.deletion+"处删除":""}`}>
+                    <Progress showInfo = {false} strokeColor = "#2DB44D" size="small" percent={item.addition/(item.addition+item.deletion)*100} />
+                    {item.addition >0 && <span className="color-green ml10">+{item.addition}</span>}
+                    {item.deletion >0 && <span className="color-red ml10">-{item.deletion}</span>}
+                  </Tooltip>
+                </div>
+              </FlexAJ>}
+            />
+          )
+        })}
+      </div>
+    </Anchor>
   )
 
   return(
     <div>
       <AlignCenter className="color-grey-9 pb10">
         <i className="iconfont icon-triangle mr5 font-16"></i>
-        <span className="color-grey-6">
-          共有<Popover content={folderOpen} placement="bottomLeft"><span className="color-grey-3"> {data && data.files_count} 个文件 </span></Popover>被更改，包括
+        <Popover content={folderOpen} placement="bottomLeft" className="popover-file">
+          <span className="color-grey-6" style={{cursor:"pointer"}}>
+          共有<span className="color-grey-3"> {data && data.files_count} 个文件 </span>被更改，包括
           { data && data.total_addition ? <span className="color-green"> {data && data.total_addition} 次插入</span>:"" }
           { data && data.total_addition && data.total_deletion ? " 和 ":""}
           { data && data.total_deletion ? <span className="color-red"> {data && data.total_deletion} 次删除</span>:""}
-        </span>
+          </span>
+        </Popover>
       </AlignCenter>
       {
         files && files.length>0 &&
@@ -77,7 +83,7 @@ function Files({data,history,owner,projectsId}){
           {
             files.map((item,key)=>{
               return(
-                <div className="files" key={key}>
+                <div className="files" key={key} id= {`value${key}`}>
                   <FlexAJ className="filesInfo">
                     <AlignCenter>
                       {!item.isBin ? <i className={!item.flag?"iconfont icon-sanjiaoxing-down color-grey-9 mt4":"iconfont icon-triangle font-15 color-grey-9 mt4"} onClick={()=>showDown(item.flag,key,item.isBin)}></i>:""}
@@ -92,8 +98,8 @@ function Files({data,history,owner,projectsId}){
                     <div className="see-file">
                       <Tooltip placement="top" title={`${item.addition+item.deletion}处更改：${item.addition>0?item.addition+"处添加":""}${item.addition>0 && item.deletion>0 ?"和":""}${item.deletion>0?item.deletion+"处删除":""}`}>
                         <Progress showInfo = {false} strokeColor = "#2DB44D" size="small" percent={item.addition/(item.addition+item.deletion)*100} />
+                        <span className="ml10">{item.addition+item.deletion}处</span>
                       </Tooltip>
-                      <span className="ml10">{item.addition+item.deletion}处</span>
                       <span className="see-file-btn" onClick={()=>{history.push(`/${owner}/${projectsId}/tree/${truncateCommitId(item.sha)}/${item.name}`)}}>查看文件</span>
                     </div>
                   </FlexAJ>
diff --git a/src/forge/Merge/Index.scss b/src/forge/Merge/Index.scss
index 71831e2a..19f24c61 100644
--- a/src/forge/Merge/Index.scss
+++ b/src/forge/Merge/Index.scss
@@ -19,9 +19,13 @@
   border:1px solid #FA6400;
   color: #FA6400;
 }
+
 .color-grey-3{
   font-weight: bold;
 }
+.invisable{
+  display: none;
+}
 .fileList{
   .sc-bxivhb{
     width: 55rem;
@@ -31,6 +35,7 @@
     .ml10{
       display: inline-block;
       width: 5rem;
+      cursor: default;
     }
     span{
       width: 7%;
@@ -40,8 +45,6 @@
 .filesInfo{
   background: #FAFCFF;
   border-color:rgba(42, 97, 255, 0.23);
-  
-  
   .ant-progress-line {
     width: 5rem;
   }
@@ -49,18 +52,29 @@
     background-color: #D14A4A;
   }
 }
-.ant-popover-arrow {
+.ant-popover-arrow,.ant-anchor-ink-ball {
   display: none;
 }
 .ant-popover-inner {
-  margin-left: -48px;
+  margin-left: -21px;
   background: #FFF;
 }
-.ant-popover-inner-content{
+.ant-anchor-link,.ant-popover-inner-content{
   padding: 0 0;
+}
+.ant-anchor-wrapper,.ant-anchor{
+  margin-left: 0;
+  padding-left: 0;
+}
+.ant-anchor-link-active > .ant-anchor-link-title {
+  color: #466AFF;
+}
+.ant-popover-inner-content{
   color: #333333;
   width: 75rem;
   .folderList{
+    max-height: 280px;
+    overflow:auto;
     .files{
       border: 0px;
     }
diff --git a/src/forge/css/index.scss b/src/forge/css/index.scss
index 8d9b9b8d..9c2c60b4 100644
--- a/src/forge/css/index.scss
+++ b/src/forge/css/index.scss
@@ -325,5 +325,6 @@ button.ant-btn-primary.btnblue{
   border-color:rgba(70, 106, 255, 1);
   &:hover{
     background-color:rgba(70, 106, 255, 0.85);
+    border-color:rgba(70, 106, 255, 0.85);
   }
 }
\ No newline at end of file