From ca80fb41d8855d078bd4d9d2601216583b57b475 Mon Sep 17 00:00:00 2001 From: caishi <1149225589@qq.com> Date: Sat, 16 Nov 2024 10:53:04 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E8=AF=B7=E6=B1=82+commit?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=96=87=E4=BB=B6=E5=8A=A0=E8=BD=BD=E6=96=B9?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/forge/Activity/ActivityItem.js | 10 +- src/forge/Main/Diff.jsx | 50 +++++++++- src/forge/Merge/CreateMerge.js | 1 + src/forge/Merge/Files.jsx | 120 +++++------------------- src/forge/Merge/Index.scss | 7 ++ src/forge/Merge/MergeLinkFooter.jsx | 88 +++++++++++------ src/forge/Merge/MessageCount.js | 4 +- src/forge/Merge/NewMerge.js | 5 +- src/forge/Merge/UpdateMerge.js | 1 - src/forge/Merge/components/fileDrop.jsx | 117 +++++++++++++++++++++++ src/forge/Merge/merge_footer.js | 99 ++++++++++++++++--- 11 files changed, 356 insertions(+), 146 deletions(-) create mode 100644 src/forge/Merge/components/fileDrop.jsx diff --git a/src/forge/Activity/ActivityItem.js b/src/forge/Activity/ActivityItem.js index 1ee593e7..089b215d 100644 --- a/src/forge/Activity/ActivityItem.js +++ b/src/forge/Activity/ActivityItem.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import './activity.css'; import { getImageUrl } from 'educoder'; +import { truncateCommitId } from "../common/util"; class ActivityItem extends Component { @@ -25,9 +26,16 @@ class ActivityItem extends Component { {item.trend_type}

: + // 如果是commit--CommitLog + item.trend_type === "CommitLog" ? +

+ {item.name} + {item.trend_type} +

+ : // 如果是合并请求

- {item.name} + {item.name} {item.trend_type}

} diff --git a/src/forge/Main/Diff.jsx b/src/forge/Main/Diff.jsx index bb644fc0..ac3ceb36 100644 --- a/src/forge/Main/Diff.jsx +++ b/src/forge/Main/Diff.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState , useRef } from "react"; import styled from "styled-components"; import { Button ,Spin } from "antd"; import { timeFormat, truncateCommitId } from '../common/util'; @@ -57,6 +57,24 @@ export default (props) => { const [isSpin, setIsSpin] = useState(true); const { sha , projectsId, owner } = match.params; + const [ dropLoading, setDropLoading] = useState(false); //加载loading + const limit = 100; + const fRef = useRef(); + + useEffect(()=>{ + window.addEventListener("scroll",scrollListener); + return ()=>{window.removeEventListener("scroll",scrollListener);} + },[]) + + const scrollListener=()=>{ + let scrollHeight = document.documentElement.scrollHeight; + let clientHeight = document.documentElement.clientHeight; + let scrollTop = document.documentElement.scrollTop; + if(Math.ceil(scrollTop+clientHeight) >= scrollHeight-5){ + InitDiffData(); + } + } + useEffect(()=>{ if(projectDetail){ const { author, name} = projectDetail; @@ -66,17 +84,18 @@ export default (props) => { useEffect(() => { if (projectsId && owner && sha) { + InitDiffData(); + const url = `/${owner}/${projectsId}/commits/${sha}.json`; axios .get(url) .then(result => { if (result) { - setData(result.data); + // setData(result.data); setCommit(result.data.commit); setParents(result.data.parents); setCommitter(result.data.committer || (result.data.commit && result.data.commit.committer)); setIsSpin(false); - } }) .catch(error => { @@ -84,6 +103,28 @@ export default (props) => { }); } }, [projectsId , owner, sha]); + + async function InitDiffData (){ + let f = fRef.current ? fRef.current.files : []; + let p = fRef.current ? fRef.current.page : 1; + let hm = fRef.current ? fRef.current.hasMore : true; + if (!hm || dropLoading || !isSpin) { + return; + } + setDropLoading(true); + const url = `/v1/${owner}/${projectsId}/commits/${sha}/files.json`; + await axios.get(url,{ + params:{page:p,limit} + }).then(res=>{ + if(res?.status === 200){ + let arr = p === 1 ? res.data.files : [...f,...res.data.files]; + setData(res.data); + fRef.current = {files:arr,page:p+1,hasMore:arr.length === limit}; + setDropLoading(false); + } + }) + } + return (
@@ -132,10 +173,13 @@ export default (props) => { 0 && parents[0].sha} + mergeId={`commits/${sha}`} /> + { dropLoading &&

文件加载中...

}
); diff --git a/src/forge/Merge/CreateMerge.js b/src/forge/Merge/CreateMerge.js index 9f83a55f..f1ebc109 100644 --- a/src/forge/Merge/CreateMerge.js +++ b/src/forge/Merge/CreateMerge.js @@ -513,6 +513,7 @@ class CreateMerge extends Component { changeCommitFunc={this.changeCommitFunc} comparesData={comparesData} pullOwnerLogin={pullOwnerLogin} + branchParams = {getBranchParams(this.props.location.pathname)} > )} diff --git a/src/forge/Merge/Files.jsx b/src/forge/Merge/Files.jsx index cd796ed2..f3238502 100644 --- a/src/forge/Merge/Files.jsx +++ b/src/forge/Merge/Files.jsx @@ -1,61 +1,40 @@ import React ,{useEffect,useState } from 'react'; -import { truncateCommitId } from '../common/util'; import { AlignCenter , FlexAJ } from '../Component/layout'; -import { Tooltip,Progress } from 'antd'; +import { Tooltip , Progress } from 'antd'; import './merge.css'; import './Index.scss'; +import FileDrop from './components/fileDrop'; -function Files({ data,history,owner,projectsId , parentsSha }){ - const [ files , setFiles ] = useState(data && data.files); - const [ copyfileTipTitle, setCopyfileTipTitle] = useState("复制文件路径"); +function Files({ data , filesData , history,owner,projectsId , parentsSha , mergeId }){ + const [ files , setFiles ] = useState(filesData); const [ isOpen, setIsOpen] = useState(false); useEffect(()=>{ - if(data){ - setFiles(data.files); + if(filesData){ + setFiles(filesData); } - },[data]); + },[filesData]); useEffect(()=>{ document.addEventListener('click',()=>{setIsOpen(false)}) },[]) - function showDown(flag,index,isBin){ - if(!isBin){ - var lists = files.concat(); - lists[index].flag = !flag ? true : false; - lists.splice(); - setFiles(lists); - } - } - - function copyFileName(fileName){ - var copyCont = document.createElement('input'); - copyCont.defaultValue = fileName; - document.body.appendChild(copyCont); - copyCont.select(); // 选择对象 - document.execCommand("Copy"); // 执行浏览器复制命令 - copyCont.className = 'copyCont'; - copyCont.style.display='none'; - setCopyfileTipTitle("复制成功"); - } - const folderOpen = (
{files && files.map((item, key) => { return ( - {item.flag && showDown(item.flag, key, item.isBin);setIsOpen(false);}}> + {item.flag && showDown(item.flag, key, item.is_bin);setIsOpen(false);}}> - {item.name} + {item.filename}
- 0 ? ":":""}${item.addition>0?item.addition+"处添加":""}${item.addition>0 && item.deletion>0 ?"和":""}${item.deletion>0?item.deletion+"处删除":""}`}> - - {item.addition >0 && +{item.addition}} - {item.deletion >0 && -{item.deletion}} + 0 ? ":":""}${item.additions>0?item.additions+"处添加":""}${item.additions>0 && item.deletions>0 ?"和":""}${item.deletions>0?item.deletions+"处删除":""}`}> + + {item.additions >0 && +{item.additions}} + {item.deletions >0 && -{item.deletions}}
@@ -66,22 +45,17 @@ function Files({ data,history,owner,projectsId , parentsSha }){
) - function subStrContent(content){ - return content ? " " + content.slice(1) :""; - } return(
{e.nativeEvent.stopImmediatePropagation()}}> - -
{setIsOpen(!isOpen)}}> - - - 共有 {data && data.files_count} 个文件 被更改 - { data && data.total_addition ? ,包括 {data && data.total_addition} 次插入:"" } - { data && data.total_addition && data.total_deletion ? " 和 ":""} - { data && data.total_deletion ? {data && data.total_deletion} 次删除:""} - -
+ {setIsOpen(!isOpen)}}> +
+ + 共有 {data && data.file_nums} 个文件 被更改 + { data && data.total_addition ? ,包括 {data && data.total_addition} 次插入:"" } + { data && data.total_addition && data.total_deletion ? " 和 ":""} + { data && data.total_deletion ? {data && data.total_deletion} 次删除:""} + {isOpen && folderOpen}
{ @@ -92,57 +66,7 @@ function Files({ data,history,owner,projectsId , parentsSha }){ return(
- - - {!item.isBin ? showDown(item.flag,key,item.isBin)}>:""} - showDown(item.flag,key,item.isBin)}> - { item.isRenamed && item.old_name} - { item.isRenamed && } - {item.name} - - setCopyfileTipTitle("复制文件路径")} - > - copyFileName(item.name)}> - - -
- 0 ? ":":""} ${item.addition > 0 ? item.addition + "处添加" : ""}${item.addition > 0 && item.deletion > 0 ? "和" : ""}${item.deletion > 0 ? item.deletion + "处删除" : ""}`}> - - {item.addition+item.deletion}处 - - { - !item.isSubmodule && - {history.push(`/${owner}/${projectsId}${item.isDeleted ? `/commits/${truncateCommitId(parentsSha)}`:`/tree/${truncateCommitId(item.sha)}/${item.name}`}`)}}>查看文件 - } -
-
- { - item.sections && item.sections.length >= 1 && !item.flag && -
- { - item.sections.map((i,k)=>{ - return( - i.lines && i.lines.length>0 && i.lines.map((item,key)=>{ - return( -
- - {item.leftIdx && item.leftIdx !=="0" ? item.leftIdx :"" } - {item.rightIdx && item.rightIdx !=="0" ? item.rightIdx :"" } - -
- {item.type===2 ? "+" : item.type===3 ? "-" :""} -
{(item.type===3 || item.type===2) ? subStrContent(item.content) : item.content}
-
-
- ) - }) - ) - }) - } -
- } +
) }) diff --git a/src/forge/Merge/Index.scss b/src/forge/Merge/Index.scss index 476cc0d2..cdecb698 100644 --- a/src/forge/Merge/Index.scss +++ b/src/forge/Merge/Index.scss @@ -117,4 +117,11 @@ width:30px; text-align: center; display: inline-block; +} +.diffDesc{ + padding:30px 0px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } \ No newline at end of file diff --git a/src/forge/Merge/MergeLinkFooter.jsx b/src/forge/Merge/MergeLinkFooter.jsx index ed25ca2e..8a8271d8 100644 --- a/src/forge/Merge/MergeLinkFooter.jsx +++ b/src/forge/Merge/MergeLinkFooter.jsx @@ -22,14 +22,21 @@ class MergeFooter extends Component { activeKey: '1', commitCount: 0, filesCount: 0, + unitData:undefined, // 总评论数量,包含回复 commentsTotalCount: 0, + page:1, + hasMore:true, + dropLoading:false, + limit:100 }; } componentDidMount() { this.Init(); // 为父组件绑定当前,以方便调用方法 this.props.bindFootRef && this.props.bindFootRef(this); + window.addEventListener("scroll",this.scrollListener); + return ()=>{window.removeEventListener("scroll",this.scrollListener);} } componentDidUpdate(prevProps) { @@ -41,6 +48,18 @@ class MergeFooter extends Component { } } + + scrollListener=()=>{ + let scrollHeight = document.documentElement.scrollHeight; + let clientHeight = document.documentElement.clientHeight; + let scrollTop = document.documentElement.scrollTop; + if(Math.ceil(scrollTop+clientHeight) >= scrollHeight-5){ + const { match } = this.props; + const { projectsId, owner, mergeId } = match.params; + this.getFile(owner, projectsId, mergeId); + } + } + Init = (isTabChange) => { const { data, location, match } = this.props; const { pathname } = location; @@ -60,7 +79,7 @@ class MergeFooter extends Component { this.setState({ activeKey: activeKey, commitCount: data && data.commits_count, - filesCount: data && data.files_count, + filesCount:data && data.files_count }); }; @@ -81,7 +100,7 @@ class MergeFooter extends Component { if (result) { this.setState({ commitsData: result.data.commits, - commitCount: result.data.commits_count, + commitCount: result.data.commits_count }); } this.setState({ isSpin: false }); @@ -91,29 +110,38 @@ class MergeFooter extends Component { }); }; - getFile = (owner, projectsId, mergeId) => { - this.setState({ isSpin: true }); - const url = `/${owner}/${projectsId}/pulls/${mergeId}/files.json`; - axios - .get(url) - .then((result) => { - if (result) { - this.setState({ - filesData: result.data, - filesCount: result.data.files_count, - }); - } - this.setState({ isSpin: false }); - }) - .catch((error) => { - this.setState({ isSpin: false }); - }); + getFile = async(owner, projectsId, mergeId) => { + const { page,limit , hasMore , dropLoading , filesData } = this.state; + if(!hasMore || dropLoading){ + return; + } + this.setState({ isSpin: page === 1 , dropLoading:page > 1 }); + const url = `/v1/${owner}/${projectsId}/pulls/${mergeId}/files.json`; + await axios.get(url,{ + params:{page,limit} + }).then((result) => { + if (result) { + let datas = result.data; + let files = page === 1 ? datas.files : filesData.concat(datas.files); + this.setState({ + unitData:datas, + filesData: files, + hasMore:datas.files && datas.files.length === limit, + page:page+1 + }); + } + this.setState({ dropLoading:false,isSpin: false }); + }) + .catch((error) => { + this.setState({ isSpin: false }); + }); }; render() { const { projectsId, owner, mergeId } = this.props.match.params; - const { order_id, data = {} } = this.props; + const { order_id, data = {} , pullOwnerLogin } = this.props; + const { isSpin, activeKey, @@ -121,6 +149,8 @@ class MergeFooter extends Component { commitCount, filesData, commitsData = [], + unitData, + dropLoading } = this.state; // 评论数量优先取Comment组件中列表接口返回的,其次取合并请求详情接口中的,都没有取默认值0 @@ -128,7 +158,6 @@ class MergeFooter extends Component { this.state.commentsTotalCount || data.comments_total_count || 0, 10 ); - return (
@@ -193,12 +222,17 @@ class MergeFooter extends Component { } key="3" > - +
+ + { dropLoading &&

文件加载中...

} +
)} diff --git a/src/forge/Merge/MessageCount.js b/src/forge/Merge/MessageCount.js index a9516b81..1c83cd81 100644 --- a/src/forge/Merge/MessageCount.js +++ b/src/forge/Merge/MessageCount.js @@ -407,7 +407,7 @@ class MessageCount extends Component { { (data.pull_request.fork_project_user || data.issue.author_name!=="已注销") ? {data.pull_request && (data.pull_request.is_original ? data.pull_request.fork_project_user:data.issue.author_name)}: {data.pull_request && data.pull_request.head} @@ -652,7 +652,7 @@ class MessageCount extends Component { {...this.props} {...this.state} bindFootRef={this.bindFootRef} - pullOwnerLogin={data.pull_request && data.pull_request.fork_project_user} + pullOwnerLogin={data.pull_request && (data.pull_request.is_original ? data.pull_request.fork_project_user:data.issue.project_author)} >
) : ( diff --git a/src/forge/Merge/NewMerge.js b/src/forge/Merge/NewMerge.js index c846fddd..0d90ee54 100644 --- a/src/forge/Merge/NewMerge.js +++ b/src/forge/Merge/NewMerge.js @@ -281,7 +281,6 @@ class NewMerge extends Component { id, comparesData } = this.state; - const renderBrances = (list, type) => { if (list && list.length > 0) { return list.map((item, key) => { @@ -313,7 +312,9 @@ class NewMerge extends Component { return
; }; let { project } = this.props; - + // 源仓库所有者login + const pullOwnerLogin = projects_names && projects_names.filter(item=>{return item.id === id})[0].project_user_login; + console.log("-------------",pullOwnerLogin,projects_names); return (
diff --git a/src/forge/Merge/UpdateMerge.js b/src/forge/Merge/UpdateMerge.js index d9167fa2..8117f387 100644 --- a/src/forge/Merge/UpdateMerge.js +++ b/src/forge/Merge/UpdateMerge.js @@ -4,7 +4,6 @@ import axios from "axios"; import "../Order/order.scss"; import "./merge.css"; import MergeForm from "./merge_form"; -import MergeFooter from "./merge_footer"; const Option = Select.Option; class UpdateMerge extends Component { constructor(props) { diff --git a/src/forge/Merge/components/fileDrop.jsx b/src/forge/Merge/components/fileDrop.jsx new file mode 100644 index 00000000..193cb8d6 --- /dev/null +++ b/src/forge/Merge/components/fileDrop.jsx @@ -0,0 +1,117 @@ +import React ,{useEffect,useState } from 'react'; +import { truncateCommitId } from '../../common/util'; +import { AlignCenter , FlexAJ } from '../../Component/layout'; +import { Tooltip , Progress , Spin } from 'antd'; +import "../Index.scss"; +import axios from 'axios'; + + +function FileDrop({prekey,item,projectsId,owner , history , mergeId,parentsSha}){ + const [ copyfileTipTitle, setCopyfileTipTitle] = useState("复制文件路径"); + const [ sections, setSections ] = useState(undefined); + const [ show, setShow ] = useState(true); + const [ isSpin, setIsSpin ] = useState(false); + + useEffect(()=>{ + if(prekey < 3 && item && item.filename){ + showDown(item.filename); + } + },[prekey,item]) + + function copyFileName(fileName){ + var copyCont = document.createElement('input'); + copyCont.defaultValue = fileName; + document.body.appendChild(copyCont); + copyCont.select(); // 选择对象 + document.execCommand("Copy"); // 执行浏览器复制命令 + copyCont.className = 'copyCont'; + copyCont.style.display='none'; + setCopyfileTipTitle("复制成功"); + } + function subStrContent(content){ + return content ? " " + content.slice(1) :""; + } + + function showDown(filename){ + if(!sections){ + setIsSpin(true); + const url = `/v1/${owner}/${projectsId}/${mergeId}/files.json`; + axios.get(url,{ + params:{filepath:filename} + }).then(res=>{ + if(res){ + let files = res.data && res.data.files && res.data.files.length>0 && res.data.files[0]; + setSections(files.sections); + setShow(true); + setIsSpin(false); + } + }) + }else{ + setShow(!show); + } + } + return( +
+ + + setShow(!show)} style={{cursor:!item.is_bin && item.changes !== 0?"pointer":"default"}}> + {(!item.is_bin && item.changes !== 0) ?
:""} + + { item.is_renamed && item.old_name} + { item.is_renamed && } + {item.filename} + + setCopyfileTipTitle("复制文件路径")} + > + {e.stopPropagation();copyFileName(item.filename);}}> + +
+
+ 0 ? ":":""} ${item.additions > 0 ? item.additions + "处添加" : ""}${item.additions > 0 && item.deletions > 0 ? "和" : ""}${item.deletions > 0 ? item.deletions + "处删除" : ""}`}> + + {item.additions+item.deletions}处 + + { + !item.is_submodule && + {history.push(`/${owner}/${projectsId}${item.is_deleted ? `/commits/${truncateCommitId(parentsSha)}`:`/tree/${truncateCommitId(item.sha)}/${item.filename}`}`)}}>查看文件 + } +
+
+ { + (!item.is_bin && item.changes !== 0) && show && +
+ { + (sections && sections.length > 0) ? sections.map((i,k)=>{ + return( + i.lines && i.lines.length>0 && i.lines.map((item,keys)=>{ + return( +
+ + {item.left_index && item.left_index !=="0" ? item.left_index :"" } + {item.right_index && item.right_index !=="0" ? item.right_index :"" } + +
+ {item.type===2 ? "+" : item.type===3 ? "-" :""} +
+ {(item.type===3 || item.type===2) ? subStrContent(item.content) : item.content} +
+
+
+ ) + }) + ) + }) + : + + } +
+ } +
+
+ ) +} +export default FileDrop; \ No newline at end of file diff --git a/src/forge/Merge/merge_footer.js b/src/forge/Merge/merge_footer.js index 340d47b2..32487654 100644 --- a/src/forge/Merge/merge_footer.js +++ b/src/forge/Merge/merge_footer.js @@ -1,10 +1,12 @@ import React, { Component } from 'react'; -import { Tabs } from 'antd'; +import { Tabs , Spin } from 'antd'; import Commits from './Commits'; import Files from './Files'; +import { returnbar , turnbar } from 'educoder'; import '../Order/order.scss'; import './merge.css'; +import axios from 'axios'; const { TabPane } = Tabs; @@ -13,9 +15,30 @@ class MergeFooter extends Component { super(props); this.state = { activeKey: '1', + diff:undefined, + filesData: undefined, + page:1, + hasMore:true, + dropLoading:false, + limit:100 }; } + componentDidMount(){ + this.getFilesInfo(); + window.addEventListener("scroll",this.scrollListener); + return ()=>{window.removeEventListener("scroll",this.scrollListener);} + } + + scrollListener=()=>{ + let scrollHeight = document.documentElement.scrollHeight; + let clientHeight = document.documentElement.clientHeight; + let scrollTop = document.documentElement.scrollTop; + if(Math.ceil(scrollTop+clientHeight) >= scrollHeight-5){ + this.getFilesInfo(); + } + } + changeTab = (index) => { this.setState({ activeKey: index, @@ -27,11 +50,58 @@ class MergeFooter extends Component { changeCommitFunc&& changeCommitFunc(page); } + componentDidUpdate(prevProps) { + // 解决切换tab后浏览器回退不刷新的问题、点击tab后url变化但tab未切换的问题 + const newPathname = this.props.location.pathname; + const prevPathname = prevProps.location.pathname; + if (newPathname !== prevPathname) { + this.getFilesInfo(); + } + } + + getFilesInfo=()=>{ + const { hasMore , dropLoading , filesData , page , limit } = this.state; + if(!hasMore || dropLoading){ + return; + } + this.setState({dropLoading:page>1}) + const { branchParams = {} } = this.props; + const { mergeOwner, projectId } = branchParams; + let url = `/v1/${mergeOwner}/${projectId}/${this.getUrl()}/files.json`; + axios.get(url,{ + params:{page,limit} + }).then(res=>{ + if(res){ + let datas = res.data; + let files = page === 1 ? datas.files : filesData.concat(datas.files); + this.setState({ + diff:res.data , + filesData: files, + hasMore:datas.files && datas.files.length === limit, + dropLoading:false,page:page+1 + }) + } + }) + } + + getUrl = ()=>{ + const { branchParams = {} } = this.props; + const { pullOwner, pullBranch, mergeOwner, mergeBranch, projectId , pullIdentity } = branchParams; + let url = `compare`; + if (mergeOwner === pullOwner) { + url += `/${Base64.encode(returnbar(pullBranch))}...${Base64.encode(returnbar(mergeBranch))}`; + } else { + url += `/${Base64.encode(returnbar(mergeBranch))}...${pullOwner}/${pullIdentity || projectId}:${Base64.encode(returnbar(pullBranch))}`; + } + return url; + } + + render() { const { projectsId, owner } = this.props.match.params; - const { comparesData = {} ,limit } = this.props; - const { commits, diff, commits_count } = comparesData; - const { activeKey } = this.state; + const { comparesData = {} ,limit ,branchParams } = this.props; + const { commits,commits_count } = comparesData; + const { activeKey , diff , filesData , dropLoading } = this.state; return (commits && commits.length === 0) || !diff ? ( '' @@ -71,19 +141,24 @@ class MergeFooter extends Component { tab={ 文件 - {diff.files_count > 0 && ( - {diff.files_count} + {diff.file_nums > 0 && ( + {diff.file_nums} )} } key="3" > - +
+ + { dropLoading &&

文件加载中...

} +
)}