forked from Gitlink/forgeplus-react
Merge branch 'develop' into dev_local
This commit is contained in:
commit
6630309466
10
.babelrc
10
.babelrc
|
|
@ -4,5 +4,13 @@
|
|||
"react",
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": []
|
||||
"plugins": [[
|
||||
"transform-runtime",
|
||||
{
|
||||
"helpers": false,
|
||||
"polyfill": false,
|
||||
"regenerator": true,
|
||||
"moduleName": "babel-runtime"
|
||||
}
|
||||
]]
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<h3>前端react环境安装：</h3>
|
||||
<p>1、 安装node v6.9.x；此安装包含了node和npm。</p>
|
||||
<p>2、 安装cnpm（命令行）： npm install -g cnpm --registry=https://registry.npm.taobao.org</p>
|
||||
<p>3、 安装依赖的js库（public/react目录下<即项目package.json所在目录>，开启命令行）： cnpm install</p>
|
||||
<p>4、 如果你的ruby服务使用的是3000端口，则需要在package.json中修改"port"参数的值</p>
|
||||
<p>5、 启动服务（命令行-目录同3）： npm start</p>
|
||||
<p>6、 build初始化 npm run build</p>
|
||||
|
||||
|
||||
<h3>分支信息：</h3>
|
||||
<p>相关代码提交到对应分支，能上线的代码先提交到develop分支上测试版，测试通过后合并提交到master分支上线正式版</p>
|
||||
<p>master:开发环境（正式环境）</p>
|
||||
<p>develop:测试环境</p>
|
||||
<p>dev_local:本地版本</p>
|
||||
<p>dev_chain:含有区块链相关内容的分支</p>
|
||||
<p>PS:新增加的需求功能先新建新分支开发，在测试版测试没问题后再分别合并到develop和master分支</p>
|
||||
|
|
@ -17,16 +17,7 @@ const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
|
|||
const paths = require("./paths");
|
||||
const getClientEnvironment = require("./env");
|
||||
|
||||
// Some apps do not use client-side routing with pushState.
|
||||
// For these, "homepage" can be set to "." to enable relative asset paths.
|
||||
let publicPath = "/react/build/";
|
||||
// let nodeEnv = process.env.NODE_ENV
|
||||
// if (nodeEnv === 'testBuild') {
|
||||
// publicPath = 'https://testforgeplus.trustie.net/react/build/';
|
||||
// }
|
||||
// if (nodeEnv === 'production') {
|
||||
// publicPath = 'https://forgeplus.trustie.net/react/build/';
|
||||
// }
|
||||
const publicUrl = publicPath.slice(0, -1);
|
||||
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
|
||||
const env = getClientEnvironment(publicPath);
|
||||
|
|
@ -141,7 +132,6 @@ module.exports = {
|
|||
name: "static/media/[name].[hash:8].[ext]",
|
||||
},
|
||||
},
|
||||
// Process JS with Babel.
|
||||
{
|
||||
test: /\.(js|jsx|mjs)$/,
|
||||
include: paths.appSrc,
|
||||
|
|
@ -161,10 +151,8 @@ module.exports = {
|
|||
],
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.css$/,
|
||||
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
|
|
|
|||
|
|
@ -2043,7 +2043,7 @@
|
|||
},
|
||||
"babel-plugin-transform-runtime": {
|
||||
"version": "6.23.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz",
|
||||
"resolved": "https://registry.npm.taobao.org/babel-plugin-transform-runtime/download/babel-plugin-transform-runtime-6.23.0.tgz",
|
||||
"integrity": "sha1-iEkNRGUC6puOfvsP4J7E2ZR5se4=",
|
||||
"requires": {
|
||||
"babel-runtime": "^6.22.0"
|
||||
|
|
@ -3888,6 +3888,11 @@
|
|||
"randomfill": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"crypto-js": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/crypto-js/download/crypto-js-4.0.0.tgz",
|
||||
"integrity": "sha1-KQSrJnep0EKFai6i74DekuSjbcw="
|
||||
},
|
||||
"crypto-random-string": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
|
||||
|
|
@ -4962,6 +4967,11 @@
|
|||
"domelementtype": "1"
|
||||
}
|
||||
},
|
||||
"dompurify": {
|
||||
"version": "2.0.15",
|
||||
"resolved": "https://registry.npm.taobao.org/dompurify/download/dompurify-2.0.15.tgz?cache=0&sync_timestamp=1607352578938&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdompurify%2Fdownload%2Fdompurify-2.0.15.tgz",
|
||||
"integrity": "sha1-gOMA/D6JVHvQrxr/LrqIzhf8neo="
|
||||
},
|
||||
"domutils": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "educoder",
|
||||
"name": "forge",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
"codemirror": "^5.53.0",
|
||||
"connected-react-router": "4.4.1",
|
||||
"css-loader": "^3.5.2",
|
||||
"dompurify": "^2.0.15",
|
||||
"dotenv": "4.0.0",
|
||||
"dotenv-expand": "4.2.0",
|
||||
"echarts": "^4.7.0",
|
||||
|
|
@ -184,6 +185,7 @@
|
|||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-plugin-import": "^1.13.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 584 KiB After Width: | Height: | Size: 733 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -211,13 +211,7 @@ class App extends Component {
|
|||
<Provider store={store}>
|
||||
<ConfigProvider locale={zhCN}>
|
||||
<MuiThemeProvider theme={theme}>
|
||||
{/* <Accountnewprofile {...this.props}{...this.state} /> */}
|
||||
<LoginDialog {...this.props} {...this.state} Modifyloginvalue={() => this.Modifyloginvalue()}></LoginDialog>
|
||||
{/* <Notcompletedysl {...this.props} {...this.state}></Notcompletedysl> */}
|
||||
{/* <Trialapplicationysl {...this.props} {...this.state}></Trialapplicationysl> */}
|
||||
{/* <Trialapplicationreview {...this.props} {...this.state}></Trialapplicationreview> */}
|
||||
{/* <AccountProfile {...this.props} {...this.state} /> */}
|
||||
{/* <Certifiedprofessional {...this.props} {...this.state} ModalCancelsy={this.ModalCancelsy} ModalshowCancelsy={this.ModalshowCancelsy} /> */}
|
||||
<Router>
|
||||
<Switch>
|
||||
{/*项目*/}
|
||||
|
|
@ -242,7 +236,6 @@ class App extends Component {
|
|||
path="/register"
|
||||
render={
|
||||
(props) => {
|
||||
|
||||
return (<EducoderLogin {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
}
|
||||
|
|
@ -254,7 +247,7 @@ class App extends Component {
|
|||
<Route path={"/organize"}
|
||||
render={
|
||||
(props) => {
|
||||
return (<OrganizeIndex {...this.props} {...props} {...this.state} />)
|
||||
return (<OrganizeIndex {...props} {...this.props} {...this.state} />)
|
||||
}
|
||||
}>
|
||||
</Route>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ import { broadcastChannelOnmessage, isDev, queryString } from 'educoder';
|
|||
import { notification } from 'antd';
|
||||
import cookie from 'react-cookies';
|
||||
import './index.css';
|
||||
let message501 = false;
|
||||
|
||||
let message501 = false;
|
||||
broadcastChannelOnmessage('refreshPage', () => {
|
||||
window.location.reload()
|
||||
window.location.reload();
|
||||
})
|
||||
|
||||
function locationurl(list) {
|
||||
|
|
@ -27,8 +27,8 @@ 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: '/' });
|
||||
cookie.remove('autologin_trustie', { path: '/' });
|
||||
|
|
@ -54,10 +54,8 @@ setpostcookie();
|
|||
|
||||
window._debugType = debugType;
|
||||
export function initAxiosInterceptors(props) {
|
||||
initOnlineOfflineListener()
|
||||
// TODO 避免重复的请求 https://github.com/axios/axios#cancellation
|
||||
var
|
||||
proxy = "http://localhost:3000";
|
||||
initOnlineOfflineListener();
|
||||
var proxy = "http://localhost:3000";
|
||||
proxy = "https://testforgeplus.trustie.net";
|
||||
|
||||
const requestMap = {};
|
||||
|
|
|
|||
|
|
@ -76,10 +76,4 @@ export { default as AliyunUploader } from './components/media/AliyunUploader'
|
|||
export { default as ImageLayer2 } from './hooks/ImageLayer2'
|
||||
|
||||
// 外部
|
||||
export { default as CBreadcrumb } from '../modules/courses/common/CBreadcrumb'
|
||||
export { CNotificationHOC as CNotificationHOC } from '../modules/courses/common/CNotificationHOC'
|
||||
export { default as ModalWrapper } from '../modules/courses/common/ModalWrapper'
|
||||
export { default as NoneData } from '../modules/courses/coursesPublic/NoneData'
|
||||
|
||||
export { default as WordNumberTextarea } from '../modules/modals/WordNumberTextarea'
|
||||
|
||||
|
|
|
|||
|
|
@ -48,15 +48,15 @@ function buildToc(coll, k, level, ctx) {
|
|||
});
|
||||
ctx.push("</ul>")
|
||||
}
|
||||
ctx.push("</li>")
|
||||
ctx.push("</li>");
|
||||
k = buildToc(coll, k, level, ctx)
|
||||
return k
|
||||
}
|
||||
|
||||
export function getTocContent() {
|
||||
buildToc(toc, 0, 0, ctx)
|
||||
ctx.push("</ul>")
|
||||
return ctx.join("")
|
||||
buildToc(toc, 0, 0, ctx);
|
||||
ctx.push("</ul>");
|
||||
return ctx.join("");
|
||||
}
|
||||
|
||||
const tokenizer = {
|
||||
|
|
@ -157,7 +157,6 @@ renderer.heading = function (text, level, raw) {
|
|||
})
|
||||
return '<h' + level + ' id="' + anchor + '">' + text + '</h' + level + '>'
|
||||
}
|
||||
|
||||
marked.setOptions({
|
||||
silent: true,
|
||||
smartypants: true,
|
||||
|
|
|
|||
|
|
@ -1,37 +1,58 @@
|
|||
import React, { useEffect, useRef, useMemo } from "react";
|
||||
import "katex/dist/katex.min.css";
|
||||
import { renderToString } from 'katex';
|
||||
import marked, { getTocContent, cleanToc, getMathExpressions, resetMathExpressions } from "../common/marked";
|
||||
import React, { useEffect, useRef, useMemo } from 'react'
|
||||
import 'katex/dist/katex.min.css'
|
||||
import marked, { getTocContent, cleanToc, getMathExpressions, resetMathExpressions } from '../common/marked';
|
||||
import 'code-prettify'
|
||||
import dompurify from 'dompurify';
|
||||
|
||||
import { renderToString } from 'katex'
|
||||
|
||||
const preRegex = /<pre[^>]*>/g
|
||||
|
||||
function _unescape(str) {
|
||||
let div = document.createElement('div')
|
||||
div.innerHTML = str
|
||||
return div.childNodes.length === 0 ? "" : div.childNodes[0].nodeValue;
|
||||
return div.childNodes.length === 0 ? "" : div.childNodes[0].nodeValue
|
||||
}
|
||||
|
||||
export default ({ value = '', className, style = {} }) => {
|
||||
let str = String(value)
|
||||
|
||||
|
||||
export default ({
|
||||
value = '',
|
||||
className,
|
||||
style = {},
|
||||
url
|
||||
}) => {
|
||||
let str = String(value);
|
||||
const html = useMemo(() => {
|
||||
let rs = marked(str)
|
||||
const math_expressions = getMathExpressions()
|
||||
let rs = marked(str);
|
||||
const math_expressions = getMathExpressions();
|
||||
if (str.match(/\[TOC\]/)) {
|
||||
rs = rs.replace("<p>[TOC]</p>", getTocContent())
|
||||
cleanToc()
|
||||
}
|
||||
rs = rs.replace(/(__special_katext_id_\d+__)/g, (_match, capture) => {
|
||||
const { type, expression } = math_expressions[capture]
|
||||
return renderToString(_unescape(expression), { displayMode: type === 'block', throwOnError: false, output: 'html' })
|
||||
return renderToString(_unescape(expression) || '', { displayMode: type === 'block', throwOnError: false, output: 'html' })
|
||||
})
|
||||
rs = rs.replace(/▁/g, "▁▁▁")
|
||||
resetMathExpressions()
|
||||
return rs
|
||||
}, [str])
|
||||
return dompurify.sanitize(rs)
|
||||
}, [str]);
|
||||
|
||||
const el = useRef()
|
||||
// 锚点跳转，链接地址里含#对应的id
|
||||
useEffect(()=>{
|
||||
if(url && url.hash && html){
|
||||
let u = url.hash;
|
||||
if(u){
|
||||
let id = decodeURIComponent(u.split("#")[1]);
|
||||
let ele = document.getElementById(id);
|
||||
if(ele){
|
||||
window.scrollTo(0, ele.offsetTop + 220);
|
||||
}
|
||||
}
|
||||
}
|
||||
},[url])
|
||||
|
||||
const el = useRef();
|
||||
function onAncherHandler(e) {
|
||||
let target = e.target
|
||||
if (target.tagName.toUpperCase() === 'A') {
|
||||
|
|
@ -40,7 +61,7 @@ export default ({ value = '', className, style = {} }) => {
|
|||
e.preventDefault()
|
||||
let viewEl = document.getElementById(ancher.replace('#', ''))
|
||||
if (viewEl) {
|
||||
viewEl.parentNode.scrollTop = viewEl.offsetTop
|
||||
viewEl.scrollIntoView(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -61,6 +82,12 @@ export default ({ value = '', className, style = {} }) => {
|
|||
}
|
||||
}
|
||||
}, [html, el.current, onAncherHandler])
|
||||
|
||||
return (<div ref={el} style={style} className={`${className ? className : ''} markdown-body`} dangerouslySetInnerHTML={{ __html: html }}></div>)
|
||||
return (
|
||||
<div
|
||||
ref={el}
|
||||
style={style}
|
||||
className={`${className ? className : ''} markdown-body`}
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
></div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,18 +67,17 @@ function Index(props){
|
|||
}
|
||||
return(
|
||||
<div className="aboutPanels">
|
||||
|
||||
<div className="aboutContent">
|
||||
<AlignCenterBetween style={{padding:"14px 0px"}}>
|
||||
<AlignCenterBetween style={{padding:"14px 20px"}}>
|
||||
<span className="font-16"><i className="iconfont icon-xiangmujianjie mr5 font-16 color-blue"></i>项目简介</span>
|
||||
{ editOpration && !edit && <a onClick={editContent} className="color-blue">编辑</a> }
|
||||
</AlignCenterBetween>
|
||||
{
|
||||
edit ?
|
||||
<div>
|
||||
<div className="padding20">
|
||||
<MDEditor
|
||||
placeholder={"请输入描述信息"}
|
||||
height={200}
|
||||
height={500}
|
||||
mdID={"order-new-description"}
|
||||
initValue={content}
|
||||
onChange={onContentChange}
|
||||
|
|
@ -114,9 +113,9 @@ function Index(props){
|
|||
</div>
|
||||
</div>
|
||||
:
|
||||
<div style={{padding:"20px 0px"}}>
|
||||
<div className="padding20">
|
||||
{content ?
|
||||
<RenderHtml className="break_word_comments imageLayerParent" value={content} />
|
||||
<RenderHtml className="break_word_comments imageLayerParent" value={content} url={props.history.location}/>
|
||||
:
|
||||
<div>暂无简介~</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
.aboutContent{
|
||||
border-radius: 2px;
|
||||
border: 1px solid #EEEEEE;
|
||||
padding:0px 30px;
|
||||
width:100%;
|
||||
background-color: #fff;
|
||||
margin-top:20px;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ class ActivityItem extends Component {
|
|||
</p >
|
||||
}
|
||||
<p className="itemLine mt10">
|
||||
<Link to={`/users/${item && item.login}`} className="show-user-link">
|
||||
<Link to={`/users/${item && item.user_login}`} className="show-user-link">
|
||||
<img alt="" src={getImageUrl(`images/${item.user_avatar}`)} className="createImage" />
|
||||
<span className="mr20">{item.user_name}</span>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import './branch.css';
|
|||
import { getBranch , getTag } from '../GetData/getData';
|
||||
|
||||
|
||||
export default (({ projectsId , branch , owner , history , changeBranch })=>{
|
||||
export default (({ projectsId , branch , owner , changeBranch , branchList , tagflag = true })=>{
|
||||
const [ showValue , setShowValue ] = useState(branch);
|
||||
const [ inputValue , setInputValue] = useState(undefined);
|
||||
const [ nav , setNav ] = useState(0);
|
||||
|
|
@ -31,8 +31,12 @@ export default (({ projectsId , branch , owner , history , changeBranch })=>{
|
|||
})
|
||||
|
||||
useEffect(()=>{
|
||||
getBranchs(projectsId,owner);
|
||||
},[owner])
|
||||
if(branchList){
|
||||
setData(branchList);
|
||||
setDatas(branchList);
|
||||
setIsSpin(false);
|
||||
}
|
||||
},[branchList])
|
||||
|
||||
|
||||
async function getBranchs(id,owner){
|
||||
|
|
@ -78,8 +82,8 @@ export default (({ projectsId , branch , owner , history , changeBranch })=>{
|
|||
onChange={changeInputValue} style={{width:"220px"}}
|
||||
/>
|
||||
<ul className="navUl">
|
||||
<li className={nav==0?"navli active":"navli"} onClick={()=>changeNav(0)}><i className="iconfont icon-fenzhi1 font-14 mr3"></i>分支列表</li>
|
||||
<li className={nav==1?"navli active":"navli"} onClick={()=>changeNav(1)}><i className="iconfont icon-biaoqian3 font-14 mr3"></i>标签列表</li>
|
||||
<li className={nav === 0?"navli active":"navli"} onClick={()=>changeNav(0)}><i className="iconfont icon-fenzhi1 font-14 mr3"></i>分支列表</li>
|
||||
{ tagflag && <li className={nav === 1?"navli active":"navli"} onClick={()=>changeNav(1)}><i className="iconfont icon-biaoqian3 font-14 mr3"></i>标签列表</li> }
|
||||
</ul>
|
||||
</div>
|
||||
<Spin spinning={isSpin}>
|
||||
|
|
@ -100,7 +104,8 @@ export default (({ projectsId , branch , owner , history , changeBranch })=>{
|
|||
return(
|
||||
<Popover placement="bottom" visible={flag} content={menu} onClick={()=>setFlag(!flag)} overlayClassName="branch-tagBox-list">
|
||||
<div className="branch-tagBox">
|
||||
<span className="color-grey-9 mr3 ml8">{nav === 0 ?"分支":"标签"}:</span>
|
||||
{/* {nav === 0 ?"分支":"标签"} */}
|
||||
<span className="color-grey-9 mr3 ml8"><i className="iconfont icon-fenzhi2 font-18"></i></span>
|
||||
<a className="ant-dropdown-link">
|
||||
{showValue}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
min-width: 240px;
|
||||
min-width: 140px;
|
||||
}
|
||||
.branch-tagBox-list .ant-popover-arrow{
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { AutoComplete , Button , Icon } from 'antd';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Option } = AutoComplete;
|
||||
function AddGroup({organizeId,getGroupID}){
|
||||
const [ id , setID ] = useState(undefined);
|
||||
const [ source , setSource ] = useState(undefined);
|
||||
const [ searchKey , setSearchKey ] = useState("");
|
||||
|
||||
useEffect(()=>{
|
||||
getUserList();
|
||||
},[searchKey])
|
||||
|
||||
function getUserList(e){
|
||||
const url = `/organizations/${organizeId}/teams/search.json`;
|
||||
axios.get(url, {
|
||||
params: {
|
||||
search: searchKey,
|
||||
},
|
||||
}).then((result) => {
|
||||
if (result) {
|
||||
sourceOptions(result.data.teams);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
function sourceOptions(userDataSource){
|
||||
const s = userDataSource && userDataSource.map((item, key) => {
|
||||
return (
|
||||
<Option
|
||||
key={key}
|
||||
value={`${item.id}`}
|
||||
name={item.name}
|
||||
>
|
||||
{item.name}
|
||||
</Option>
|
||||
);
|
||||
});
|
||||
setSource(s);
|
||||
}
|
||||
|
||||
function changeInputUser(e){
|
||||
setSearchKey(e || "");
|
||||
};
|
||||
|
||||
// 选择用户
|
||||
function selectInputUser(e, option){
|
||||
setID(e);
|
||||
setSearchKey(option.props.name);
|
||||
};
|
||||
|
||||
function addCollaborator(){
|
||||
getGroupID && getGroupID(id);
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="addPanel">
|
||||
<AutoComplete
|
||||
dataSource={source}
|
||||
value={searchKey}
|
||||
style={{ width: 300 }}
|
||||
onChange={changeInputUser}
|
||||
onSelect={selectInputUser}
|
||||
placeholder="搜索需要添加的团队..."
|
||||
allowClear
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
onClick={addCollaborator}
|
||||
className="ml15"
|
||||
>
|
||||
<Icon type="plus" size="16"></Icon>
|
||||
添加团队
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default AddGroup;
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { AutoComplete , Button , Icon } from 'antd';
|
||||
import axios from 'axios';
|
||||
import { getImageUrl } from 'educoder';
|
||||
|
||||
const { Option } = AutoComplete;
|
||||
function AddMember({getID,login}){
|
||||
const [ id , setID ] = useState(undefined);
|
||||
const [ source , setSource ] = useState(undefined);
|
||||
const [ searchKey , setSearchKey ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
getUserList();
|
||||
},[searchKey])
|
||||
|
||||
function getUserList(e){
|
||||
const url = `/users/list.json`;
|
||||
axios.get(url, {
|
||||
params: {
|
||||
search: searchKey,
|
||||
},
|
||||
}).then((result) => {
|
||||
if (result) {
|
||||
sourceOptions(result.data.users);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
function sourceOptions(userDataSource){
|
||||
const s = userDataSource && userDataSource.map((item, key) => {
|
||||
return (
|
||||
<Option
|
||||
key={key}
|
||||
value={`${item.user_id}`}
|
||||
login={`${item.login}`}
|
||||
name={item.username}
|
||||
>
|
||||
<img
|
||||
className="user_img radius"
|
||||
width="28"
|
||||
height="28"
|
||||
src={getImageUrl(`images/${item && item.image_url}`)}
|
||||
alt=""
|
||||
/>
|
||||
<span className="ml10" style={{ "vertical-align": "middle" }}>
|
||||
{item.username}
|
||||
<span className="color-grey ml10">({item.login})</span>
|
||||
</span>
|
||||
</Option>
|
||||
);
|
||||
});
|
||||
setSource(s);
|
||||
}
|
||||
|
||||
function changeInputUser(e){
|
||||
setSearchKey(e);
|
||||
};
|
||||
|
||||
// 选择用户
|
||||
function selectInputUser(e, option){
|
||||
setID(login ? e : option.props.login);
|
||||
setSearchKey(option.props.name);
|
||||
};
|
||||
|
||||
function addCollaborator(){
|
||||
getID && getID(id);
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="addPanel">
|
||||
<AutoComplete
|
||||
dataSource={source}
|
||||
value={searchKey}
|
||||
style={{ width: 300 }}
|
||||
onChange={changeInputUser}
|
||||
onSelect={selectInputUser}
|
||||
placeholder="搜索需要添加的用户..."
|
||||
allowClear
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
onClick={addCollaborator}
|
||||
className="ml15"
|
||||
>
|
||||
<Icon type="plus" size="16"></Icon>
|
||||
添加成员
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default AddMember;
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
import React from 'react';
|
||||
import { getImageUrl } from 'educoder';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Component.scss';
|
||||
|
||||
export default (({img , title, desc , rightBtn})=>{
|
||||
function Cards({img , title, desc , rightBtn , src}){
|
||||
return(
|
||||
<div className="cards">
|
||||
<div className="img"><img src={img} alt=""/></div>
|
||||
{img &&<div className="img"><img src={getImageUrl(`images/${img}`)} alt=""/></div>}
|
||||
<div className="content">
|
||||
<p className="titles">
|
||||
<span>{title}</span>
|
||||
<Link to={src}>{title}</Link>
|
||||
{rightBtn}
|
||||
</p>
|
||||
<div className="desc">
|
||||
|
|
@ -16,4 +18,5 @@ export default (({img , title, desc , rightBtn})=>{
|
|||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
export default Cards;
|
||||
|
|
@ -19,6 +19,8 @@ li.ant-menu-item{
|
|||
padding:20px 34px;
|
||||
background-color: #fff;
|
||||
margin-bottom:18px;
|
||||
min-height: 130px;
|
||||
border:1px solid #eee;
|
||||
.img{
|
||||
margin-right: 20px;
|
||||
width: 190px;
|
||||
|
|
@ -27,8 +29,10 @@ li.ant-menu-item{
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
|
|
@ -39,7 +43,9 @@ li.ant-menu-item{
|
|||
justify-content: space-between;
|
||||
margin-bottom: 10px!important;
|
||||
align-items: center;
|
||||
&>span{
|
||||
height: 22px;
|
||||
line-height: 22px;;
|
||||
&>a{
|
||||
font-size:18px ;
|
||||
color: #333;
|
||||
}
|
||||
|
|
@ -50,11 +56,13 @@ li.ant-menu-item{
|
|||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tabs
|
||||
.tabsStyle{
|
||||
border:1px solid #eee;
|
||||
.ant-tabs-bar.ant-tabs-top-bar{
|
||||
padding-left: 35px;
|
||||
margin-bottom: 0px;
|
||||
|
|
@ -129,4 +137,18 @@ li.ant-menu-item{
|
|||
.handleBox{
|
||||
right:0px;
|
||||
}
|
||||
}
|
||||
.ant-drawer{
|
||||
z-index: 10000!important;
|
||||
}
|
||||
.ant-drawer-body{
|
||||
padding:0px!important;
|
||||
.drawerHead{
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding:15px 20px;
|
||||
}
|
||||
.ant-tree{
|
||||
margin:0px 20px!important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
import { AlignCenter , FlexAJ } from '../Component/layout';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { getImageUrl } from 'educoder';
|
||||
|
||||
function Contributors({contributors,owner,projectsId}){
|
||||
return(
|
||||
<div>
|
||||
<FlexAJ>
|
||||
<AlignCenter><span className="font-16 color-grey-6">贡献者</span>{ contributors && contributors.total_count > 0 && <span className="infoCount">{contributors.total_count}</span>}</AlignCenter>
|
||||
<Link className="font-12 color-grey-9" to={`/projects/${owner}/${projectsId}/contribute`}>全部</Link>
|
||||
</FlexAJ>
|
||||
<div className="attrPerson">
|
||||
{
|
||||
contributors && contributors.total_count > 0 ?
|
||||
contributors.list.map((item,key)=>{
|
||||
return(
|
||||
<Link key={key} to={`/users/${item.login}`}><img src={getImageUrl(`images/${item.image_url}`)} alt=""/></Link>
|
||||
)
|
||||
})
|
||||
:""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Contributors;
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Drawer , Tree , Spin } from 'antd';
|
||||
import './Component.scss';
|
||||
import axios from 'axios';
|
||||
const { TreeNode , DirectoryTree } = Tree;
|
||||
|
||||
function DrawerPanel({visible,onClose,branch,owner,projectsId,history, name , list}){
|
||||
const [ treeData , setTreeData ] = useState(undefined);
|
||||
const [ isSpin , setIsSpin ] = useState(true);
|
||||
const [first , setFirst ] = useState(true);
|
||||
useEffect(()=>{
|
||||
if(visible && first){
|
||||
if(list){
|
||||
setTreeData(list);
|
||||
setIsSpin(false);
|
||||
}else{
|
||||
getMenulist();
|
||||
}
|
||||
setFirst(false);
|
||||
}
|
||||
},[visible])
|
||||
|
||||
function getMenulist(){
|
||||
const url = `/${owner}/${projectsId}/entries.json`;
|
||||
axios.get(url,{ params: { ref: branch } }).then(result=>{
|
||||
if(result){
|
||||
setTreeData(result.data.entries);
|
||||
}
|
||||
setIsSpin(false);
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
function renderTreeNodes(data) {
|
||||
return data && data.length > 0 && data.map((item) => {
|
||||
return (
|
||||
<TreeNode title={item.name} key={item.key} dataRef={item} isLeaf={item.type === "file"}>
|
||||
{renderTreeNodes(item.children)}
|
||||
</TreeNode>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function onLoadData(tr){
|
||||
return new Promise((resolve) => {
|
||||
if (tr.props.children) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
let en = [];
|
||||
const url = `/${owner}/${projectsId}/sub_entries.json`;
|
||||
axios.get(url, {
|
||||
params:{
|
||||
filepath:tr.props.dataRef.path,
|
||||
ref:branch,
|
||||
type:"dir"
|
||||
}
|
||||
}).then((result) => {
|
||||
if(result){
|
||||
en = result.data.entries;
|
||||
}
|
||||
}).catch(error=>{})
|
||||
setTimeout(() => {
|
||||
tr.props.dataRef.children = en;
|
||||
setTreeData([...treeData]);
|
||||
resolve();
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function selectTree(keys,event){
|
||||
let dataref = event.node.props.dataRef;
|
||||
if(dataref.type==="file"){
|
||||
onClose();
|
||||
history.push(`/projects/${owner}/${projectsId}/tree/${branch}/${dataref.path}`);
|
||||
}
|
||||
}
|
||||
|
||||
return(
|
||||
<Drawer
|
||||
placement="left"
|
||||
visible={visible}
|
||||
closable={false}
|
||||
onClose={onClose}
|
||||
width={"320px"}
|
||||
maskStyle={{backgroundColor:'rgba(0,0,0,0.09)'}}
|
||||
>
|
||||
<Spin spinning={isSpin}>
|
||||
<div className="drawerHead">
|
||||
<p className="font-20">{name}</p>
|
||||
<p><i class="iconfont icon-fenzhi2 font-18 color-grey-9 mr3"></i>{branch}</p>
|
||||
</div>
|
||||
<DirectoryTree loadData={onLoadData} onSelect={selectTree}>
|
||||
{treeData && renderTreeNodes(treeData)}
|
||||
</DirectoryTree>
|
||||
</Spin>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
export default DrawerPanel;
|
||||
|
|
@ -5,7 +5,7 @@ import './Component.scss';
|
|||
export default (()=>{
|
||||
return(
|
||||
<div className="handleBox">
|
||||
<a href="https://www.trustie.net/forums/82/memos/3075" target="_blank" >
|
||||
<a href="https://forum.trustie.net/forums/3075/detail" target="_blank" >
|
||||
<img src={Handbook} alt=""/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { FlexAJ } from '../Component/layout';
|
||||
|
||||
function LanguagePower({languages}){
|
||||
const [ array , setArray ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
if(languages){
|
||||
let arr = [];
|
||||
Object.keys(languages).map((item,key)=>{
|
||||
arr.push({name:item,percent:languages[item],color:getColor()});
|
||||
})
|
||||
setArray(arr);
|
||||
}
|
||||
},[languages])
|
||||
|
||||
function getColor(){
|
||||
let str = "#";
|
||||
let arr = ["1","2","3","4","4","5","6","7","8","9","a","b","c","d","e","f"];
|
||||
for(var i=0;i<6;i++){
|
||||
let num = parseInt(Math.random() * 16);
|
||||
str+=arr[num];
|
||||
}
|
||||
return str;
|
||||
}
|
||||
return(
|
||||
<div>
|
||||
<p className="font-16 color-grey-6">开发语言</p>
|
||||
<div className="progress">
|
||||
{
|
||||
array && array.map((item,key)=>{
|
||||
return(
|
||||
<span style={{width:item.percent,backgroundColor:item.color}}></span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
{
|
||||
array && array.length > 0 &&
|
||||
<FlexAJ className="progresstip">
|
||||
{
|
||||
array.map((item,key)=>{
|
||||
return(
|
||||
<span><i className="zero" style={{backgroundColor:`${item.color}`}}></i><span>{item.name}</span><span>{item.percent}</span></span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</FlexAJ>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default LanguagePower;
|
||||
|
|
@ -19,7 +19,7 @@ export default (({fork,parise})=>{
|
|||
}`;
|
||||
const SpanStyleparise = styled.span`{
|
||||
display:flex;
|
||||
align-item:center;
|
||||
align-items:center;
|
||||
margin-left:30px;
|
||||
padding:0px 12px;
|
||||
border-radius:13px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import React from 'react';
|
||||
import './Component.scss';
|
||||
import { Button } from 'antd';
|
||||
import styled from 'styled-components';
|
||||
import FocusButton from "../UsersList/focus_button";
|
||||
import { getImageUrl } from 'educoder';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Img = styled.img`{
|
||||
border-radius:50%;
|
||||
|
|
@ -28,26 +32,8 @@ const I = styled.i`{
|
|||
font-size:13px!important;
|
||||
color:#60B25E;
|
||||
margin-right:2px;
|
||||
}`
|
||||
const FocusBtn = styled.a`{
|
||||
display:inline-block;
|
||||
height:30px;
|
||||
line-height:26px;
|
||||
padding:0px 12px;
|
||||
background-color:#fafafa;
|
||||
border:1px solid #eee;
|
||||
border-radius:2px;
|
||||
color:#888!important;
|
||||
}`
|
||||
const Ifocused = styled.i`{
|
||||
font-size:16px!important;
|
||||
color:#FFA802;
|
||||
margin-right:4px;
|
||||
}`
|
||||
const Ifocus = styled.i`{
|
||||
font-size:16px!important;
|
||||
color:#BBBBBB;
|
||||
margin-right:4px;
|
||||
height:17px;
|
||||
line-height:17px;
|
||||
}`
|
||||
const Div = styled.div`{
|
||||
margin-bottom: 18px;
|
||||
|
|
@ -56,17 +42,18 @@ const Div = styled.div`{
|
|||
align-items: center;
|
||||
border:1px solid #eee;
|
||||
}`
|
||||
export default (({img,name,time, focusStatus})=>{
|
||||
return(
|
||||
export default (({ user , img, name, time, focusStatus, is_current_user, login , successFunc }) => {
|
||||
return (
|
||||
<Div>
|
||||
<Img src={img}/>
|
||||
<Link to={`/users/${user && user.login}`}><Img src={getImageUrl(`images/${img}`)} /></Link>
|
||||
<div className="m-infos">
|
||||
<Name>{name}</Name>
|
||||
<Link to={`/users/${user && user.login}`}><Name>{name}</Name></Link>
|
||||
<Time><I className="iconfont icon-shijian"></I>加入时间:{time}</Time>
|
||||
{
|
||||
focusStatus ?
|
||||
<FocusBtn><Ifocused className="iconfont icon-shixing"></Ifocused>已关注</FocusBtn> :
|
||||
<FocusBtn><Ifocus className="iconfont icon-kongxing"></Ifocus>关注</FocusBtn>
|
||||
is_current_user ?
|
||||
<Button type="default">当前用户</Button>
|
||||
:
|
||||
<FocusButton is_watch={focusStatus} id={login} successFunc={successFunc}/>
|
||||
}
|
||||
</div>
|
||||
</Div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ function PasswordAuthority({ authorityValBox , successFunc , cancelFunc }){
|
|||
|
||||
// 取消授权-登录密码的输入
|
||||
function cancelAuthority(){
|
||||
setAuthorityVal(undefined);
|
||||
cancelFunc();
|
||||
}
|
||||
// 确认授权
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
import { AlignCenter , AlignTop , FlexAJ } from '../Component/layout';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function Releases({owner,projectsId,releaseVersions}){
|
||||
|
||||
return(
|
||||
<div>
|
||||
<FlexAJ>
|
||||
<AlignCenter><span className="font-16 color-grey-6">发行版</span>
|
||||
{ releaseVersions && releaseVersions.total_count > 0 && <span className="infoCount">{releaseVersions.total_count}</span>}
|
||||
</AlignCenter>
|
||||
{ releaseVersions && releaseVersions.total_count > 0 ?
|
||||
<Link className="font-12 color-grey-9" to={`/projects/${owner}/${projectsId}/releases`}>全部</Link>
|
||||
:
|
||||
<Link className="font-12 color-blue" to={`/projects/${owner}/${projectsId}/releases/new`}>新建</Link>
|
||||
}
|
||||
</FlexAJ>
|
||||
{
|
||||
releaseVersions && releaseVersions.total_count>0 ?
|
||||
releaseVersions.list.map((item,key)=>{
|
||||
return(
|
||||
<AlignTop className="mt10">
|
||||
<i className="iconfont icon-biaoqian3 color-grey-6 font-18 mr10"></i>
|
||||
<div>
|
||||
<p className="font-16 color-grey-6"><Link to={`/projects/${owner}/${projectsId}/releases/8/update`}>{item.name}</Link></p>
|
||||
<p className="color-grey-9 font-13">{item.created_at}</p>
|
||||
</div>
|
||||
</AlignTop>
|
||||
)
|
||||
})
|
||||
:""
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Releases;
|
||||
|
|
@ -2,13 +2,15 @@ import React from "react";
|
|||
import { Input } from "antd";
|
||||
|
||||
const { Search } = Input;
|
||||
export default ({ placeholder , onSearch }) => {
|
||||
export default ({ placeholder , onSearch , onChange }) => {
|
||||
return (
|
||||
<Search
|
||||
allowClear
|
||||
placeholder={placeholder}
|
||||
enterButton={'搜索'}
|
||||
onSearch={onSearch}
|
||||
width="300px"
|
||||
onChange={onChange}
|
||||
></Search>
|
||||
)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import React , { useState , useEffect } from 'react';
|
||||
import React , { useState } from 'react';
|
||||
import { AutoComplete } from 'antd';
|
||||
import { getImageUrl } from "educoder";
|
||||
import axios from 'axios';
|
||||
|
||||
const Option = AutoComplete.Option;
|
||||
|
||||
export default ({ getUser })=>{
|
||||
|
|
@ -31,18 +32,14 @@ export default ({ getUser })=>{
|
|||
}
|
||||
|
||||
function selectInputUser(id, option){
|
||||
setSearchKey(option.props.searchValue);
|
||||
getUserList(option.props.searchValue);
|
||||
setSearchKey(option.props.value);
|
||||
getUserList(option.props.value);
|
||||
getUser && getUser(id);
|
||||
}
|
||||
const source =
|
||||
userDataSource && userDataSource.map((item, key) => {
|
||||
return (
|
||||
<Option
|
||||
key={key}
|
||||
value={`${item.user_id}`}
|
||||
searchValue={`${item.username}`}
|
||||
>
|
||||
<Option key={key} value={`${item.login}`}>
|
||||
<img
|
||||
className="user_img radius"
|
||||
width="28"
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default ({ url , name , column })=>{
|
|||
`;
|
||||
return(
|
||||
<Img>
|
||||
<img src={url} alt=""/>
|
||||
{ url && <img src={url} alt=""/> }
|
||||
<span>{name}</span>
|
||||
</Img>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -24,18 +24,33 @@ export const AlignCenter = styled.div`{
|
|||
display:flex;
|
||||
align-items: center;
|
||||
}`
|
||||
export const AlignTop = styled.div`{
|
||||
display:flex;
|
||||
align-items: flex-start;
|
||||
}`
|
||||
// 左右结构
|
||||
export const Box = styled.div`{
|
||||
display:flex;
|
||||
align-item:flex-start;
|
||||
align-items:flex-start;
|
||||
}`
|
||||
export const LongWidth = styled.div`{
|
||||
flex:1;
|
||||
width:0;
|
||||
border-radius:5px;
|
||||
margin-bottom:30px;
|
||||
}`
|
||||
export const Long = styled.div`{
|
||||
width:72%;
|
||||
width:78%;
|
||||
border-radius:5px;
|
||||
margin-bottom:30px;
|
||||
}`
|
||||
export const ShortWidth = styled.div`{
|
||||
width:300px;
|
||||
border-radius:5px;
|
||||
margin-bottom:30px;
|
||||
}`
|
||||
export const Short = styled.div`{
|
||||
width:28%;
|
||||
flex:1;
|
||||
border-radius:5px;
|
||||
margin-bottom:30px;
|
||||
}`
|
||||
|
|
@ -61,22 +76,24 @@ export const Redline = styled.a`{
|
|||
line-height:28px;
|
||||
border-radius:2px;
|
||||
border:1px solid #F73030;
|
||||
color:#F73030;
|
||||
color:${props => (props.bold ? "#fff" : "#F73030")} !important;
|
||||
padding:0px 12px;
|
||||
display:inline-block;
|
||||
min-width:80px;
|
||||
text-align:center;
|
||||
background:${props => (props.bold ? "#F73030" : "#fff")};
|
||||
}`
|
||||
export const Greenline = styled.a`{
|
||||
height:30px;
|
||||
line-height:28px;
|
||||
border-radius:2px;
|
||||
border:1px solid #28BD6C;
|
||||
color:#28BD6C;
|
||||
color:${props => (props.bold ? "#fff" : "#28BD6C")} !important;
|
||||
padding:0px 12px;
|
||||
display:inline-block;
|
||||
min-width:80px;
|
||||
text-align:center;
|
||||
background:${props => (props.bold ? "#28BD6C" : "#fff")};
|
||||
}`
|
||||
export const Greenback = styled.a`{
|
||||
height:30px;
|
||||
|
|
@ -94,7 +111,7 @@ export const Blueback = styled.a`{
|
|||
line-height:30px;
|
||||
border-radius:2px;
|
||||
background-color:rgba(80,145,255,1);
|
||||
color:#fff;
|
||||
color:#fff!important;
|
||||
padding:0px 12px;
|
||||
display:inline-block;
|
||||
min-width:80px;
|
||||
|
|
@ -154,3 +171,9 @@ export const Content = styled.div`{
|
|||
background-color:#fff;
|
||||
justify-content: center;
|
||||
}`
|
||||
export const GroupProjectBackgroup = styled.div`{
|
||||
background:#fafafa;
|
||||
padding:20px 30px;
|
||||
width:100%;
|
||||
}`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import React, { forwardRef, useCallback, useState , useEffect } from "react";
|
||||
import activate from "../Images/activate.png";
|
||||
import { Blueback , AlignCenter } from "../Component/layout";
|
||||
import { AlignCenter, Blueback } from "../Component/layout";
|
||||
import PasswordAuthority from "../Component/PasswordAuthority";
|
||||
import styled from "styled-components";
|
||||
import { Form, Input , Spin , Modal } from "antd";
|
||||
import { Form, Input , Spin , Button } from "antd";
|
||||
import ServiceModal from './ServiceModal';
|
||||
import axios from "axios";
|
||||
|
||||
const P = styled.p`
|
||||
|
|
@ -20,15 +21,20 @@ const P = styled.p`
|
|||
function About(props, ref) {
|
||||
const { form: { getFieldDecorator, validateFields , setFieldsValue } } = props;
|
||||
const [isSpining, setIsSpining] = useState(true);
|
||||
const [ authorityValBox , setAuthorityValBox ] = useState(false);
|
||||
|
||||
// 认证密码
|
||||
const [ authorityVal , setAuthorityVal ] = useState(undefined);
|
||||
const [ authorityValFlag , setAuthorityValFlag ] = useState(false);
|
||||
|
||||
//0: 标识未开启devops
|
||||
//1: 标识用户已填写了云服务器相关信息，但并未开启认证
|
||||
const [step, setStep] = useState(undefined);
|
||||
// step大于1时：为true，不能再修改服务器信息
|
||||
const [step, setStep] = useState(0);
|
||||
|
||||
const owner = props.match.params.owner;
|
||||
const { user } = props;
|
||||
const projectsId = props.match.params.projectsId;
|
||||
const [ disabled, setDisabled ] = useState(false);
|
||||
const [ typeFlag, setTypeFlag] = useState(false);
|
||||
|
||||
|
||||
const AuthorLogin = props.author && props.author.login;
|
||||
|
|
@ -47,12 +53,17 @@ function About(props, ref) {
|
|||
method:`${type}`,
|
||||
url
|
||||
}).then(result=>{
|
||||
setIsSpining(false);
|
||||
if(result && result.data ){
|
||||
setIsSpining(false);
|
||||
setStep(result.data.step);
|
||||
setFieldsValue({...result.data.cloud_account});
|
||||
// setStep(0);
|
||||
// setFieldsValue({...result.data.cloud_account});
|
||||
// if(result.data.cloud_account){
|
||||
// setDisabled(true);
|
||||
// }
|
||||
}
|
||||
}).catch(error=>{
|
||||
setIsSpining(false);
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
|
@ -72,8 +83,8 @@ function About(props, ref) {
|
|||
function goStep() {
|
||||
validateFields((error, values) => {
|
||||
if (!error) {
|
||||
if(step > 0){
|
||||
setAuthorityValBox(true);
|
||||
if(disabled){
|
||||
setStep(1);
|
||||
}else{
|
||||
setIsSpining(true);
|
||||
const url = `/${owner}/${projectsId}/cloud_accounts.json`;
|
||||
|
|
@ -82,7 +93,6 @@ function About(props, ref) {
|
|||
if (result && result.data.redirect_url) {
|
||||
props.showNotification("服务器信息配置完成！");
|
||||
setStep(1);
|
||||
setAuthorityValBox(true);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
|
|
@ -94,6 +104,50 @@ function About(props, ref) {
|
|||
});
|
||||
}
|
||||
|
||||
// 选择服务器后调用接口，点击下一步（1是自有服务器，2是trustie服务器）
|
||||
function sureModal(type){
|
||||
if(type === 2){
|
||||
setTypeFlag(false);
|
||||
setIsSpining(true);
|
||||
const url = `/users/ci/cloud_account/trustie_bind.json`;
|
||||
axios.post(url,{
|
||||
account:user && user.login
|
||||
}).then(result=>{
|
||||
setIsSpining(false);
|
||||
if(result && result.data){
|
||||
setStep(result.data.step);
|
||||
}
|
||||
}).catch(error=>{setIsSpining(false)})
|
||||
}else{
|
||||
setTypeFlag(true);
|
||||
}
|
||||
}
|
||||
|
||||
// 上一步
|
||||
function goUpStep(step){
|
||||
setTypeFlag(false);
|
||||
setStep(step);
|
||||
}
|
||||
|
||||
// 输入用户密码后下一步
|
||||
function authStep(){
|
||||
if(!authorityVal){
|
||||
setAuthorityValFlag(true);
|
||||
return;
|
||||
}
|
||||
setAuthorityValFlag(false);
|
||||
setIsSpining(true);
|
||||
const url = `/users/ci/oauth_grant.json`;
|
||||
axios.get(url,{
|
||||
params:{password:authorityVal}
|
||||
}).then(result=>{
|
||||
setIsSpining(false);
|
||||
if(result){
|
||||
setStep(result.data.step);
|
||||
}
|
||||
}).catch(error=>{setIsSpining(false)});
|
||||
}
|
||||
|
||||
// 开始激活
|
||||
function startActive(){
|
||||
setIsSpining(true);
|
||||
|
|
@ -111,73 +165,89 @@ function About(props, ref) {
|
|||
setIsSpining(false);
|
||||
})
|
||||
}
|
||||
// 取消授权-登录密码的输入
|
||||
function cancelAuthority(){
|
||||
setAuthorityValBox(false);
|
||||
}
|
||||
// 确认授权
|
||||
function okAuthority(step){
|
||||
setAuthorityValBox(false);
|
||||
setStep(step);
|
||||
}
|
||||
|
||||
return (
|
||||
<Spin spinning={isSpining}>
|
||||
<PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority>
|
||||
{/* <PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority> */}
|
||||
<div className="activatePanel">
|
||||
<img src={activate} alt="" width="250px" />
|
||||
<P>定义DevOps工作流，帮助您检测bug、发布代码…</P>
|
||||
{
|
||||
CurrentLogin !== AuthorLogin && (step === undefined || (step && step < 1)) &&
|
||||
<div className="noOperation">DevOps开启功能暂未对项目创建者以外的角色开放，可以联系项目创建者进行开启，开启后便可查看构建信息。</div>
|
||||
CurrentLogin !== AuthorLogin ?
|
||||
<div className="noOperation">DevOps开启功能暂未对项目创建者以外的角色开放，可以联系项目创建者进行开启，开启后便可查看构建信息。</div>:""
|
||||
}
|
||||
<a href={"https://forum.trustie.net/forums/3080/detail"} target="_blank" style={{ color: "#5091FF"}}>
|
||||
<a href={"https://forum.trustie.net/forums/3110/detail"} target="_blank" style={{ color: "#5091FF"}}>
|
||||
了解什么是DevOps？
|
||||
</a>
|
||||
<a href={"https://forum.trustie.net/forums/3110/detail"} target="_blank" style={{ color: "#5091FF"}}>
|
||||
<a href={"https://forum.trustie.net/forums/3080/detail"} target="_blank" style={{ color: "#5091FF"}}>
|
||||
如何使用DevOps？
|
||||
</a>
|
||||
{
|
||||
AuthorLogin === CurrentLogin ?
|
||||
<React.Fragment>
|
||||
{ step <=1 ?
|
||||
<React.Fragment>
|
||||
<Input.Password style={{display:'none'}} size="large" />
|
||||
<Form style={{marginTop:"20px"}}>
|
||||
<p className="mb20" style={{width:"370px"}}>请仔细核对您的服务器信息，一旦确认提交将无法修改</p>
|
||||
{helper(
|
||||
"服务器IP地址：",
|
||||
"ip",
|
||||
[{ required: true, message: "请输入服务器IP地址" }],
|
||||
<Input
|
||||
placeholder="请输入服务器IP地址"
|
||||
style={{ width: "368px" }}
|
||||
size="large"
|
||||
disabled={step > 0}
|
||||
/>,
|
||||
true
|
||||
)}
|
||||
{helper(
|
||||
"服务器用户名：",
|
||||
"account",
|
||||
[{ required: true, message: "请输入服务器用户名" }],
|
||||
<Input placeholder="请输入服务器用户名" size="large" disabled={step > 0}/>,
|
||||
true
|
||||
)}
|
||||
{helper(
|
||||
"服务器密码：",
|
||||
"secret",
|
||||
[{ required: true, message: "请输入服务器密码" }],
|
||||
<Input.Password placeholder="请输入服务器密码" size="large" disabled={step > 0}/>,
|
||||
true
|
||||
)}
|
||||
</Form>
|
||||
<Blueback onClick={goStep}>下一步</Blueback>
|
||||
</React.Fragment>
|
||||
:""}
|
||||
{step > 1 &&
|
||||
{
|
||||
step === 0 && !typeFlag ?
|
||||
<ServiceModal sureModal={sureModal}></ServiceModal>
|
||||
:""
|
||||
}
|
||||
{ step === 0 && typeFlag ?
|
||||
<React.Fragment>
|
||||
<Input.Password style={{display:'none'}} size="large" />
|
||||
<Form style={{marginTop:"20px"}}>
|
||||
<p className="mb20" style={{width:"370px"}}>请仔细核对您的服务器信息，一旦确认提交将无法修改</p>
|
||||
{helper(
|
||||
"服务器IP地址：",
|
||||
"ip",
|
||||
[{ required: true, message: "请输入服务器IP地址" }],
|
||||
<Input
|
||||
placeholder="请输入服务器IP地址"
|
||||
style={{ width: "368px" }}
|
||||
size="large"
|
||||
disabled={disabled}
|
||||
/>,
|
||||
true
|
||||
)}
|
||||
{helper(
|
||||
"服务器用户名：",
|
||||
"account",
|
||||
[{ required: true, message: "请输入服务器用户名" }],
|
||||
<Input placeholder="请输入服务器用户名" size="large" disabled={disabled}/>,
|
||||
true
|
||||
)}
|
||||
{helper(
|
||||
"服务器密码：",
|
||||
"secret",
|
||||
[{ required: true, message: "请输入服务器密码" }],
|
||||
<Input.Password placeholder="请输入服务器密码" size="large" disabled={disabled}/>,
|
||||
true
|
||||
)}
|
||||
</Form>
|
||||
<AlignCenter>
|
||||
{ !disabled && <Button className="mr20" onClick={()=>goUpStep(0)}>上一步</Button>}
|
||||
<Blueback onClick={goStep}>下一步</Blueback>
|
||||
</AlignCenter>
|
||||
</React.Fragment>
|
||||
:""
|
||||
}
|
||||
{
|
||||
step === 1 ?
|
||||
<div>
|
||||
<AlignCenter style={{justifyContent:"center",marginTop:"20px"}}>
|
||||
<span style={{marginBottom:"42px"}}>密码：</span>
|
||||
<div>
|
||||
<Input.Password value={authorityVal} className={authorityValFlag===true && "flags"} onChange={(e)=>setAuthorityVal(e.target.value)} style={{width:"220px"}}></Input.Password>
|
||||
<p className="color-grey-9" style={{textAlign:"left",lineHeight:'21px'}}>您已保存相关服务器信息，请输入密码，<br/>确认授权DevOps应用</p>
|
||||
</div>
|
||||
</AlignCenter>
|
||||
<AlignCenter style={{justifyContent:'center'}}>
|
||||
<Blueback onClick={authStep} className="mt20">下一步</Blueback>
|
||||
</AlignCenter>
|
||||
</div>:""
|
||||
}
|
||||
{ step === 2 ?
|
||||
<div style={{textAlign:'center',marginTop:"20px"}}>
|
||||
<Blueback onClick={startActive} className="mt20">开始激活</Blueback>
|
||||
</div>
|
||||
</div>:""
|
||||
}
|
||||
</React.Fragment>
|
||||
:""
|
||||
|
|
|
|||
|
|
@ -1,117 +1,166 @@
|
|||
import React , { useState , useEffect } from 'react';
|
||||
import { Spin } from 'antd';
|
||||
import { Spin , Pagination } from 'antd';
|
||||
import { Blueback } from '../Component/layout';
|
||||
import Editor from "react-monaco-editor";
|
||||
import Modals from './DisposeModal';
|
||||
import FileLanguage from '../Component/OpsFileLanguage';
|
||||
import List from './Dispose/List';
|
||||
import Head from './Dispose/head';
|
||||
import axios from 'axios';
|
||||
import PipelineName from './Dispose/PipelineName';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Div = styled.div`{
|
||||
padding:24px 30px;
|
||||
}`;
|
||||
const limit = 15;
|
||||
function Dispose(props){
|
||||
const [ spining , setSpining ] = useState(true);
|
||||
const [ info , setInfo ] = useState('.trustie-pipeline.yml');
|
||||
const [ spining , setSpining ] = useState(true);
|
||||
const [ updateInfo , setUpdateInfo ] = useState(undefined);
|
||||
const [ list , setList ] = useState(undefined);
|
||||
const [ permission , setPermission ] = useState(undefined);
|
||||
const [ visible , setVisible ] = useState(false);
|
||||
const [ ymlValue , setYmlValue ] = useState("");
|
||||
const [ sha , setSha ] = useState(undefined);
|
||||
const [ fileLanguage , setFileLanguage ] = useState(undefined);
|
||||
const [ first , setFirst ] = useState(false);
|
||||
const [ page , setPage ] = useState(1);
|
||||
const [ totalCount , setTotalCount ] = useState(0);
|
||||
const [ branchList , setBranchList ] =useState(undefined);
|
||||
|
||||
|
||||
const projectDetail = props.projectDetail;
|
||||
const current_user = props.current_user;
|
||||
let projectsId = props.match.params.projectsId;
|
||||
let owner = props.match.params.owner;
|
||||
|
||||
// 获取用户的身份角色
|
||||
useEffect(()=>{
|
||||
if(projectsId){
|
||||
const url = `/${owner}/${projectsId}/get_trustie_pipeline.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
project_id:projectsId
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result && result.data.content){
|
||||
setInfo(result.data.name);
|
||||
setYmlValue(result.data.content);
|
||||
setFirst(true);
|
||||
setSha(result.data.sha);
|
||||
}else{
|
||||
setFirst(false);
|
||||
}
|
||||
setSpining(false);
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
if(projectDetail){
|
||||
setPermission(props.projectDetail.permission);
|
||||
}
|
||||
},[projectsId])
|
||||
},[projectDetail])
|
||||
|
||||
// 修改文件内容
|
||||
function changeEditor(value){
|
||||
setYmlValue(value);
|
||||
function Init(){
|
||||
const url = `/ci/pipelines/list.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
identifier:projectsId,owner,
|
||||
page,limit
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
setList(result.data.pipelines);
|
||||
}
|
||||
setSpining(false);
|
||||
}).catch(error=>{setSpining(false);})
|
||||
}
|
||||
|
||||
// 切换语言
|
||||
function select_language(value,array){
|
||||
setFileLanguage(value);
|
||||
setYmlValue( array && array.content);
|
||||
}
|
||||
useEffect(()=>{
|
||||
Init();
|
||||
},[page])
|
||||
|
||||
// 确定提交
|
||||
function submit(){
|
||||
let url = '';
|
||||
let params = {
|
||||
branch: "master",
|
||||
content:ymlValue,
|
||||
filepath:info,
|
||||
message:''
|
||||
}
|
||||
if(first){
|
||||
// 为true，则是编辑否则是新建
|
||||
url = `/${owner}/${projectsId}/update_trustie_pipeline.json`;
|
||||
axios.put(url,{
|
||||
...params,
|
||||
sha
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
setVisible(true);
|
||||
useEffect(()=>{
|
||||
if(owner && projectsId){
|
||||
const url = `/${owner}/${projectsId}/branches.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result && result.data){
|
||||
setBranchList(result.data);
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}).catch(error=>{})
|
||||
}
|
||||
},[owner,projectsId])
|
||||
|
||||
// 新增/编辑流水线
|
||||
function addNew(pipeline_name,id,branch,event){
|
||||
setVisible(true);
|
||||
setUpdateInfo(undefined);
|
||||
if(pipeline_name){
|
||||
let eventA = event.split(",");
|
||||
let l = {pipeline_name,id,branch,event:eventA}
|
||||
setUpdateInfo(l);
|
||||
}else{
|
||||
url = `/${owner}/${projectsId}/create_file.json`;
|
||||
axios.post(url,params).then(result=>{
|
||||
if(result){
|
||||
setVisible(true);
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
setUpdateInfo(undefined);
|
||||
}
|
||||
}
|
||||
function suresubmit(){
|
||||
setVisible(false);
|
||||
props.history.push(`/projects/${owner}/${projectsId}/devops/list`);
|
||||
|
||||
function onOk(pipeline_name,updateId,branch,event){
|
||||
if(pipeline_name){
|
||||
let eventStr = "";
|
||||
for(var i = 0;i<event.length;i++){
|
||||
eventStr +=event[i]+",";
|
||||
}
|
||||
eventStr = eventStr.substring(0,eventStr.length-1);
|
||||
if(!updateId){
|
||||
// 新增
|
||||
const url = `/ci/pipelines.json`;
|
||||
axios.post(url,{
|
||||
pipeline_name,
|
||||
file_name:".trustie-pipeline.yml",
|
||||
repo:projectsId,branch,event:eventStr,owner
|
||||
}).then(result=>{
|
||||
setVisible(false);
|
||||
if(result && result.data){
|
||||
props.showNotification("流水线新增成功，请进行工作流配置！");
|
||||
props.history.push(`/projects/${owner}/${projectsId}/devops/dispose/${result.data.id}`);
|
||||
}else{
|
||||
props.showNotification("流水线新增失败，请稍后再试！");
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}else{
|
||||
// 修改
|
||||
const url = `/ci/pipelines/${updateId}.json`;
|
||||
axios.put(url,{
|
||||
pipeline_name,repo:projectsId,branch,event:eventStr,owner
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
setVisible(false);
|
||||
Init();
|
||||
props.showNotification("流水线名称更新成功！");
|
||||
}else{
|
||||
props.showNotification("流水线名称更新失败，请稍后再试！");
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
}else{
|
||||
props.showNotification("请输入流水线名称！");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 删除
|
||||
function deleteFunc(id){
|
||||
const url = `/ci/pipelines/${id}.json`;
|
||||
axios.delete(url).then(result=>{
|
||||
if(result && result.data){
|
||||
props.showNotification("流水线删除成功！");
|
||||
Init();
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
// 模板管理
|
||||
function toModalManage(){
|
||||
props.history.push(`/projects/${owner}/${projectsId}/devops/mould`);
|
||||
}
|
||||
|
||||
// 参数管理
|
||||
function toparameter(){
|
||||
props.history.push(`/projects/${owner}/${projectsId}/devops/params`);
|
||||
}
|
||||
|
||||
const operate = current_user && (permission && permission !== "Reporter");
|
||||
return(
|
||||
<Spin spinning={spining}>
|
||||
<Modals visible={visible} closeFunc={(flag)=>setVisible(flag)} sureFunc={suresubmit}></Modals>
|
||||
<p>编程语言：</p>
|
||||
|
||||
<div className="mt20 mb20">
|
||||
<FileLanguage language={fileLanguage} select_language={select_language}/>
|
||||
<PipelineName branchList={branchList} visible={visible} value={updateInfo} onCancel={()=>setVisible(false)} onOk={onOk}/>
|
||||
<div className="disposePanel">
|
||||
<Head manager={ operate ? toModalManage : undefined} parameter={operate ? toparameter :undefined}/>
|
||||
<Div>
|
||||
{ operate && <Blueback onClick={()=>addNew(undefined,undefined)}>新增流水线</Blueback> }
|
||||
<div className="mt20 disposeList">
|
||||
<List list={list} operate={operate} projectsId={projectsId} owner={owner} showModal={addNew} deleteFunc={deleteFunc}/>
|
||||
{
|
||||
totalCount > limit &&
|
||||
<div className="mt20 pb20" style={{textAlign:'center'}}>
|
||||
<Pagination simple current={page} pageSize={limit} total={totalCount} onChange={(page)=>setPage(page)}/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</Div>
|
||||
</div>
|
||||
<p>配置脚本：</p>
|
||||
<div className="editorBody">
|
||||
<p className="editorHead">{info}</p>
|
||||
<Editor
|
||||
height="300px"
|
||||
language={"yml"}
|
||||
theme={"vs-grey"}
|
||||
defaultValue="请输入内容"
|
||||
value={ymlValue}
|
||||
options={"editor_options"}
|
||||
onChange={changeEditor}
|
||||
></Editor>
|
||||
</div>
|
||||
<Blueback onClick={submit}>确定提交</Blueback>
|
||||
</Spin>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
|
||||
function Choosen({ chooseFunc, temp , templateId , category }){
|
||||
const [ tempId, setTemId ] = useState(undefined);
|
||||
const [ cate , setCate ]= useState(undefined);
|
||||
const [ templates , setTemplates ] = useState(undefined);
|
||||
const [ categories , setCategories ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
if(templateId){
|
||||
setTemId(templateId);
|
||||
}
|
||||
},[templateId])
|
||||
|
||||
useEffect(()=>{
|
||||
if(category){
|
||||
setCate(category);
|
||||
}
|
||||
},[category])
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
if(temp && temp.length > 0){
|
||||
if(temp[0].category !== "初始化"){
|
||||
setCategories(temp);
|
||||
}else{
|
||||
setCategories(undefined);
|
||||
}
|
||||
if(category && temp[0].category !== "初始化" && category !== "初始化"){
|
||||
let c = temp.filter(item=>item.category === category);
|
||||
let t = c && c.length > 0 && c[0].templates;
|
||||
setTemplates(t);
|
||||
setCate(category);
|
||||
}else{
|
||||
setTemplates(temp[0].templates);
|
||||
setCate(temp[0].category);
|
||||
}
|
||||
}else{
|
||||
setTemplates(undefined);
|
||||
setCate(undefined);
|
||||
setCategories(undefined);
|
||||
}
|
||||
},[temp,category])
|
||||
|
||||
// 选择类别
|
||||
function changeCate(cate){
|
||||
setCate(cate);
|
||||
let c = categories && categories.filter(item=>item.category === cate);
|
||||
let t = c && c[0].templates;
|
||||
setTemplates(t);
|
||||
let m_t_id = t && t.length>0 && t[0].id;
|
||||
let m_t_content = t && t.length>0 && t[0].content;
|
||||
setTemId(m_t_id);
|
||||
chooseFunc && chooseFunc(m_t_content,m_t_id,cate);
|
||||
}
|
||||
|
||||
|
||||
// 选择模板
|
||||
function chooseOption(id){
|
||||
let item = templates.filter(item=>item.id === id);
|
||||
let content = item && item.length >0 && item[0].content;
|
||||
chooseFunc && chooseFunc(content,id,cate);
|
||||
setTemId(id);
|
||||
}
|
||||
|
||||
return(
|
||||
<React.Fragment>
|
||||
{
|
||||
categories && categories.length > 0 &&
|
||||
<div className="choosenList">
|
||||
<span>模板类别：</span>
|
||||
<ul>
|
||||
{
|
||||
categories.map((item,key)=>{
|
||||
return(
|
||||
<li className={cate === item.category ?"active":""} onClick={()=>changeCate(item.category)}>{item.category}</li>)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
templates && templates.length> 0 &&
|
||||
<div className="choosenList">
|
||||
<span>模板选择：</span>
|
||||
<ul>
|
||||
{
|
||||
templates.map((item,key)=>{
|
||||
return(
|
||||
<li className={tempId === item.id ? "active":""} onClick={()=>chooseOption(item.id)}>{item.template_name}</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
export default Choosen;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import React from 'react';
|
||||
import Editor from 'react-monaco-editor';
|
||||
|
||||
function Editors({value,onChange,theme,height,visible,width="100%",Numbers="on"}){
|
||||
const editor_options = {
|
||||
lineNumbers: Numbers,
|
||||
wordWrap: true, //强制换行
|
||||
selectOnLineNumbers: true,
|
||||
lineHeight: 24,
|
||||
renderLineHighlight: "line",
|
||||
revealHorizontalRightPadding: 5,
|
||||
placeholder:"请输入内容",
|
||||
readOnly: visible,
|
||||
cursorStyle: visible ? "underline-thin" : "line",
|
||||
folding: true,
|
||||
foldingStrategy: "indentation", // 代码可分小段折叠
|
||||
automaticLayout: true, // 自适应布局
|
||||
minimap: {
|
||||
// 不要小地图
|
||||
enabled: false,
|
||||
},
|
||||
}
|
||||
return(
|
||||
<Editor
|
||||
height={height}
|
||||
width={width}
|
||||
language={"yaml"}
|
||||
theme={theme}
|
||||
placeholder="请输入内容"
|
||||
value={value}
|
||||
options={editor_options}
|
||||
onChange={(value)=>onChange(value)}
|
||||
disabled={true}
|
||||
></Editor>
|
||||
)
|
||||
}
|
||||
export default Editors;
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import Choosen from './Choosen';
|
||||
import Editors from './Editors';
|
||||
|
||||
function Init({ datas , templates , saveFunc , saveDatas}){
|
||||
const [ templateId , setTemplateId ] = useState(undefined);
|
||||
const [ ymlValue , setYmlValue ] = useState(undefined);
|
||||
const [ temp , setTemp ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
if(templates && templates.length > 0){
|
||||
setTemp(templates)
|
||||
}
|
||||
},[templates])
|
||||
|
||||
useEffect(()=>{
|
||||
if(datas && datas.length > 0){
|
||||
setTemplateId(datas[0].template_id);
|
||||
setYmlValue(datas[0].content);
|
||||
}
|
||||
},[datas])
|
||||
|
||||
// 选择模板
|
||||
function chooseFunc(content,id,cate){
|
||||
setTemplateId(id);
|
||||
setYmlValue(content);
|
||||
recieveData(id,content);
|
||||
}
|
||||
|
||||
function recieveData(id,content){
|
||||
let steps = datas;
|
||||
if(datas && datas.length>0){
|
||||
steps[0].content = content || ymlValue;
|
||||
steps[0].template_id = id || templateId ;
|
||||
}else{
|
||||
steps =
|
||||
[{
|
||||
step_name:"初始化",
|
||||
show_index:1,
|
||||
content:content || ymlValue,
|
||||
template_id:id || templateId
|
||||
}]
|
||||
}
|
||||
saveDatas(steps);
|
||||
}
|
||||
|
||||
// 点击下一步时
|
||||
function nextStep(){
|
||||
recieveData();
|
||||
saveFunc(undefined,undefined,undefined,undefined,"next");
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<Choosen chooseFunc={chooseFunc} templateId={templateId} temp={temp}/>
|
||||
<div className="mt15">
|
||||
<Editors value={ymlValue} onChange={setYmlValue} theme={"vs-dark"} height={"400px"}/>
|
||||
</div>
|
||||
<div className="mt20">
|
||||
<Button type={"primary"} onClick={nextStep}>下一步</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Init;
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
import React from 'react';
|
||||
import { Table , Popconfirm } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// const STATUS = {
|
||||
// running:"运行中",
|
||||
// failure:"未通过",
|
||||
// error:"未通过",
|
||||
// success:"已通过",
|
||||
// killed:"已撤销",
|
||||
// pending:"准备中"
|
||||
// }
|
||||
function renderTableStatus(status) {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return (
|
||||
<span className="statusTag running">
|
||||
<i className="iconfont icon-yunhangzhong"></i>运行中
|
||||
</span>
|
||||
);
|
||||
case "failure": case 'error':
|
||||
return (
|
||||
<span className="statusTag failed">
|
||||
<i className="iconfont icon-weitongguo"></i>未通过
|
||||
</span>
|
||||
);
|
||||
case "success":
|
||||
return (
|
||||
<span className="statusTag pass">
|
||||
<i className="iconfont icon-yitongguo"></i>已通过
|
||||
</span>
|
||||
);
|
||||
case 'killed':
|
||||
return (
|
||||
<span className="statusTag killed">
|
||||
<i className="iconfont icon-weitongguo"></i>已撤销
|
||||
</span>
|
||||
);
|
||||
default :
|
||||
return (
|
||||
<span className="statusTag Preparing">
|
||||
<i className="iconfont icon-zhunbeizhong"></i>准备中
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
function List({ list, operate , projectsId , owner , showModal , deleteFunc }){
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title:"流水线名称",
|
||||
dataIndex:"pipeline_name",
|
||||
key:1,
|
||||
ellipsis:true,
|
||||
render:(txt,item)=>{
|
||||
return(
|
||||
<span onDoubleClick={()=>showModal(txt,item.id,item.branch,item.event)} style={{display:"block",cursor:"pointer"}}>{txt}</span>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title:"文件名称",
|
||||
dataIndex:"file_name",
|
||||
key:1,
|
||||
width:"15%",
|
||||
ellipsis:true,
|
||||
render:(value,item)=>{
|
||||
return(
|
||||
<Link to={`/projects/${owner}/${projectsId}/tree/${item.branch}/${value}`} className="color-blue">{value}</Link>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title:"触发分支",
|
||||
dataIndex:"branch",
|
||||
key:1,
|
||||
width:"10%",
|
||||
ellipsis:true
|
||||
},
|
||||
{
|
||||
title:"触发事件",
|
||||
dataIndex:"event",
|
||||
key:1,
|
||||
width:"10%",
|
||||
ellipsis:true
|
||||
},
|
||||
{
|
||||
title:"最近构建时间",
|
||||
dataIndex:"last_build_time",
|
||||
key:1,
|
||||
width:"15%",
|
||||
ellipsis:true
|
||||
},
|
||||
{
|
||||
title:"最近构建状态",
|
||||
dataIndex:"pipeline_status",
|
||||
key:1,
|
||||
width:"12%",
|
||||
ellipsis:true,
|
||||
render:(txt)=>{
|
||||
return renderTableStatus(txt)
|
||||
}
|
||||
},
|
||||
{
|
||||
title:"操作",
|
||||
dataIndex:"operation",
|
||||
key:1,
|
||||
width:"21%",
|
||||
render:(txt,item)=>{
|
||||
return(
|
||||
<span>
|
||||
{ operate ?
|
||||
<Link to={`/projects/${owner}/${projectsId}/devops/dispose/${item.id}`} className="mr10 color-grey-6">
|
||||
<i className="iconfont icon-zaibianji font-13 mr3"></i>编辑</Link> :""
|
||||
}
|
||||
{ operate ?
|
||||
<Popconfirm title={"确定要删除此流水线？"} onConfirm={()=>deleteFunc(item.id)} okText="确定" cancelText={"取消"}>
|
||||
<a className="mr10 color-grey-6"><i className="iconfont icon-lajitong font-13 mr3"></i>删除</a>
|
||||
</Popconfirm>:""
|
||||
}
|
||||
<Link to={`/projects/${owner}/${projectsId}/devops/list/${item.branch}`} className="color-grey-6"><i className="iconfont icon-yunhang font-13 mr3"></i>查看运行记录</Link>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
return(
|
||||
<Table size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id} pagination={false}></Table>
|
||||
)
|
||||
}
|
||||
export default List;
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import { Modal , Input , Select } from 'antd';
|
||||
const { Option }= Select;
|
||||
|
||||
const EVENT = ["push","pull_request","tag","cron","custom","promote","rollback"]
|
||||
function PipelineName({visible,onCancel,onOk,value ,branchList}){
|
||||
const [ name , setName ] = useState(undefined);
|
||||
const [ branchValue , setBranchValue ] = useState(undefined);
|
||||
const [ eventValue , setEventValue ] = useState([EVENT[0]]);
|
||||
|
||||
useEffect(()=>{
|
||||
if(branchList && branchList.length>0){
|
||||
setBranchValue(branchList[0].name);
|
||||
}
|
||||
},[branchList])
|
||||
|
||||
useEffect(()=>{
|
||||
if(value){
|
||||
setName(value.pipeline_name);
|
||||
setBranchValue(value.branch);
|
||||
setEventValue(value.event);
|
||||
}else{
|
||||
setName(undefined);
|
||||
}
|
||||
},[value])
|
||||
|
||||
function onSure(){
|
||||
onOk(name,value && value.id,branchValue,eventValue);
|
||||
}
|
||||
return(
|
||||
<Modal
|
||||
visible={visible}
|
||||
title="流水线名称"
|
||||
width={"500px"}
|
||||
onCancel={onCancel}
|
||||
onOk={onSure}
|
||||
centered={true}
|
||||
>
|
||||
<div className="choosenList">
|
||||
<span>流水线名称:</span>
|
||||
<Input value={name} onChange={(e)=>setName(e.target.value)} placeholder="请输入名称" style={{width:"340px",margin:"6px 0px"}}/>
|
||||
</div>
|
||||
<div className="choosenList mt20">
|
||||
<span>触发条件:</span>
|
||||
<Select value={branchValue} style={{width:"150px"}} onChange={(e)=>setBranchValue(e)}>
|
||||
{
|
||||
branchList && branchList.length>0 && branchList.map((item,key)=>{
|
||||
return(
|
||||
<Option value={item.name} key={key}>{item.name}</Option>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
<Select mode="multiple" allowClear value={eventValue} style={{width:"180px",marginLeft:"10px"}} onChange={(e)=>{console.log(e);setEventValue(e)}}>
|
||||
{
|
||||
EVENT.map((item,key)=>{
|
||||
return(
|
||||
<Option value={item} key={key}>{item}</Option>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default PipelineName;
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import { Button , Popconfirm } from 'antd';
|
||||
import { Cancel } from '../../Component/layout';
|
||||
import Item from './StageItem';
|
||||
|
||||
function Stage({
|
||||
templates ,
|
||||
datas ,
|
||||
saveDatas ,
|
||||
saveFunc ,
|
||||
stepName ,
|
||||
deleteStep ,
|
||||
deleteFunc ,
|
||||
deleteFlag
|
||||
}){
|
||||
const [ stepList , setStepList ] = useState(undefined);
|
||||
const [ temp , setTemp ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
if(templates && templates.length > 0){
|
||||
setTemp(templates);
|
||||
}
|
||||
},[templates])
|
||||
|
||||
useEffect(()=>{
|
||||
if(datas){
|
||||
if(datas.length > 0 && stepList !== datas){
|
||||
setStepList(datas);
|
||||
}else if(datas.length === 0){
|
||||
let list = [];
|
||||
setStepList(list);
|
||||
}
|
||||
}
|
||||
},[datas])
|
||||
|
||||
// 添加步骤
|
||||
function addFunc(){
|
||||
let list = stepList;
|
||||
let length = list ? list.length : 0;
|
||||
let pre = temp && temp.length > 0 && temp[0];
|
||||
let c = pre && pre.category;
|
||||
let child = pre && pre.templates && pre.templates.length > 0 && pre.templates[0];
|
||||
let step =
|
||||
{
|
||||
"category":c,
|
||||
"step_name": stepName+`${length + 1}`,
|
||||
"show_index": length + 1,
|
||||
"content":child.content,
|
||||
"template_id":child.id,
|
||||
"hide":false
|
||||
}
|
||||
list.push(step);
|
||||
saveDatas(list);
|
||||
}
|
||||
|
||||
// 将修改的对应项保存在数组中
|
||||
function saveItems(content,id,cate,key){
|
||||
let item = stepList;
|
||||
item[key].content = content;
|
||||
item[key].template_id = id;
|
||||
item[key].category = cate;
|
||||
saveDatas([...item]);
|
||||
}
|
||||
|
||||
function slideItems(key,hide){
|
||||
let item = stepList;
|
||||
item[key].hide = !hide;
|
||||
setStepList([...item]);
|
||||
saveDatas(item);
|
||||
}
|
||||
|
||||
function deleteItem(id,key){
|
||||
deleteStep(id,key);
|
||||
}
|
||||
// 点击下一步时
|
||||
function nextStep(btn){
|
||||
saveFunc(undefined,undefined,undefined,undefined,btn);
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
{
|
||||
stepList && stepList.length > 0 && stepList.map((item,key)=>{
|
||||
return(
|
||||
<Item item={item} templates={temp} k={key} saveItems={saveItems} slideItems={slideItems} deleteStep={deleteItem}/>
|
||||
)
|
||||
})
|
||||
}
|
||||
<a className="addStageBtn" onClick={addFunc}>+ 添加步骤</a>
|
||||
<div className="mt20">
|
||||
<Button type="primary" onClick={()=>nextStep("last")}>上一步</Button>
|
||||
<Button className="ml20" type="primary" onClick={()=>nextStep("next")}>下一步</Button>
|
||||
{!deleteFlag &&
|
||||
<Popconfirm title={'确定要删除当前阶段吗'} okText="是" cancelText="否" onConfirm={deleteFunc}>
|
||||
<Cancel className="ml20">删除</Cancel>
|
||||
</Popconfirm>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Stage;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import React from 'react';
|
||||
import { FlexAJ } from '../../Component/layout';
|
||||
import Editors from './Editors';
|
||||
import Choosen from './Choosen';
|
||||
import { Popconfirm } from 'antd';
|
||||
|
||||
|
||||
function StageItem({item, templates,saveItems,k, slideItems , deleteStep}){
|
||||
|
||||
function onChangevalue(value){
|
||||
saveItems(value,item.template_id,item.category,k);
|
||||
}
|
||||
// 选择模板
|
||||
function chooseFunc(content,id,cate){
|
||||
saveItems(content,id,cate,k);
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="stepsItem">
|
||||
<FlexAJ className="stepsHead">
|
||||
<span>{item.step_name}</span>
|
||||
<span className="color-grey-9">
|
||||
<Popconfirm
|
||||
title={"确定要删除这个步骤吗?"}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
onConfirm={() => deleteStep(item.id,k)}
|
||||
><a>
|
||||
<i className="iconfont icon-lajitong1 font-14"></i></a>
|
||||
</Popconfirm>
|
||||
<a onClick={()=>slideItems(k,item.hide)}><i className={ (!item.hide || item.hide === false) ? "iconfont icon-sanjiaoxing-down font-14" :"iconfont icon-triangle font-14"}></i></a>
|
||||
</span>
|
||||
</FlexAJ>
|
||||
<div className={(!item.hide || item.hide === false) ? "stepsBody active" : "stepsBody"}>
|
||||
<Choosen chooseFunc={chooseFunc} category={item.category} templateId={item.template_id} temp={templates}/>
|
||||
<Editors value={item.content} onChange={onChangevalue} theme="vs-dark" height="270px" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default StageItem;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React ,{useEffect , useState} from 'react';
|
||||
import { Button } from 'antd';
|
||||
import Editors from './Editors';
|
||||
|
||||
function Sure({datas , name , saveFunc , sureSubmit , loading}){
|
||||
const [ value , setValue ] = useState(undefined);
|
||||
useEffect(()=>{
|
||||
if(datas && datas.content){
|
||||
setValue(datas.content)
|
||||
}
|
||||
},[datas]);
|
||||
|
||||
function sure(){
|
||||
sureSubmit();
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<div style={{padding:"0px 15px 15px 15px"}}>
|
||||
工作流名称：{name}
|
||||
</div>
|
||||
<div className="editorBody" style={{marginTop:"0px"}}>
|
||||
<Editors value={value} theme={"vs-grey"} height={"600px"} visible/>
|
||||
</div>
|
||||
<div className="mt20">
|
||||
<Button type={"primary"} onClick={()=>saveFunc(undefined,undefined,undefined,undefined,"last")}>上一步</Button>
|
||||
{ value && <Button type={"primary"} loading={loading} className="ml20" onClick={sure}>确定提交</Button> }
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Sure;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import { AlignCenterBetween , Blueline , FlexAJ } from '../../Component/layout';
|
||||
|
||||
|
||||
function head({manager , parameter}){
|
||||
return(
|
||||
<AlignCenterBetween>
|
||||
<span className="font-20">工作流配置</span>
|
||||
<FlexAJ>
|
||||
{
|
||||
parameter && <Blueline onClick={parameter}>参数管理</Blueline>
|
||||
}
|
||||
{
|
||||
manager && <Blueline style={{marginLeft:"20px"}} onClick={manager}>模板管理</Blueline>
|
||||
}
|
||||
<a href={`https://forum.trustie.net/forums/3111/detail`} target="_blank" className="color-grey-6 ml20"><i className="iconfont icon-tishi1 font-14 mr3"></i>模板使用说明</a>
|
||||
</FlexAJ>
|
||||
</AlignCenterBetween>
|
||||
)
|
||||
}
|
||||
export default head;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react';
|
||||
import MenusRename from './menusRename';
|
||||
import MenusAdd from './menusAdd';
|
||||
|
||||
const typeIcon = {
|
||||
init:"icon-initialize",build:"icon-structure",deploy:"icon-arrange",customize:"icon-newStage",confirm:'icon-sure'
|
||||
}
|
||||
|
||||
function Menus({step,changeStep, menuList , renameFunc , checkDatas , addFunc }){
|
||||
|
||||
function InitActive(key,stage_type,stage_id,stage_name){
|
||||
changeStep(key,stage_type,stage_id,stage_name);
|
||||
}
|
||||
|
||||
// 新增阶段
|
||||
function getName(name,index){
|
||||
addFunc && addFunc(name,index);
|
||||
}
|
||||
|
||||
return(
|
||||
<ul className="menus">
|
||||
{
|
||||
menuList && menuList.length > 0 && menuList.map((item,key)=>{
|
||||
return(
|
||||
<React.Fragment key={item.id} >
|
||||
<li onClick={()=>InitActive(item.show_index,item.stage_type,item.id,item.stage_name)} className={item.show_index === step ?"active":""}>
|
||||
<i className={`iconfont ${typeIcon[`${item.stage_type}`]}`}></i>
|
||||
<MenusRename renameFunc={renameFunc} id={item.id} name={item.stage_name} edit={item.stage_type !== "init" && item.stage_type !== "confirm"}/>
|
||||
</li>
|
||||
{ key !== (menuList.length-1) && menuList.length < 7 ?
|
||||
<MenusAdd checkDatas={checkDatas} k={key+2} getName={getName}/>:""
|
||||
}
|
||||
</React.Fragment>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
export default Menus;
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import React , { useState , useEffect } from 'react';
|
||||
import { Input } from 'antd';
|
||||
|
||||
function menusAdd ({ getName , checkDatas , k }){
|
||||
const [ show, setShow ] = useState(false);
|
||||
const [ value , setValue ] = useState(undefined);
|
||||
const [ index , setIndex ] = useState(undefined);
|
||||
const [ref, setRef ] = useState(undefined);
|
||||
const [put, setPut ] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (put && ref) {
|
||||
ref.focus();
|
||||
}
|
||||
})
|
||||
useEffect(() => {
|
||||
if (k) {
|
||||
setIndex(k);
|
||||
}
|
||||
},[k])
|
||||
|
||||
|
||||
function blurInput(){
|
||||
if(value){
|
||||
getName(value , index);
|
||||
}
|
||||
setValue(undefined);
|
||||
setShow(false);
|
||||
setPut(false);
|
||||
}
|
||||
|
||||
function showInput(){
|
||||
let c = checkDatas();
|
||||
if(c || c === "" ){
|
||||
setShow(true);
|
||||
setPut(true);
|
||||
}
|
||||
}
|
||||
|
||||
return(
|
||||
<li className="menuAdd">
|
||||
{ !show && <i className="iconfont icon-tianjia" onClick={showInput}></i> }
|
||||
<Input
|
||||
ref={(el) => setRef(el)}
|
||||
size={"small"}
|
||||
maxLength={8}
|
||||
style={{width:"75px",display : `${show?"block":'none'}`}}
|
||||
placeholder="新阶段名称"
|
||||
value={value}
|
||||
onChange={(e)=>setValue(e.target.value)} onBlur={blurInput}
|
||||
/>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
export default menusAdd;
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import { Input } from 'antd';
|
||||
|
||||
function menusRename({ name , edit , id , renameFunc }){
|
||||
const [ n , setN ] = useState(undefined);
|
||||
const [ show , setShow ] = useState(false);
|
||||
const [ref, setRef ] = useState(undefined);
|
||||
const [put, setPut ] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (edit && ref) {
|
||||
ref.focus();
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(()=>{
|
||||
if(name){
|
||||
setN(name)
|
||||
}
|
||||
},[name])
|
||||
|
||||
// 显示input框编辑
|
||||
function changeShow(e){
|
||||
e.stopPropagation();
|
||||
setShow(true);
|
||||
setPut(true);
|
||||
}
|
||||
|
||||
function blurInput(e){
|
||||
renameFunc(e.target.value,id);
|
||||
setPut(false);
|
||||
setShow(false);
|
||||
}
|
||||
return(
|
||||
<div className="aboutEdit">
|
||||
<span className="operateName">
|
||||
{ !show && n }
|
||||
<Input
|
||||
ref={(el) => setRef(el)}
|
||||
value={n}
|
||||
size="small"
|
||||
maxLength={8}
|
||||
onClick={(e)=>e.stopPropagation()}
|
||||
onBlur={blurInput}
|
||||
style={{width:"75px",display : `${show?"block":'none'}`}}
|
||||
onChange={(e)=>setN(e.target.value)}
|
||||
/>
|
||||
{ !show && edit && <i className="iconfont icon-editUnder font-16 color-grey-9" onClick={changeShow}></i> }
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default menusRename
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React , { useEffect } from 'react';
|
||||
import { WhiteBack } from '../Component/layout';
|
||||
import './ops.scss';
|
||||
|
||||
|
|
@ -10,27 +10,65 @@ const About = Loadable({
|
|||
loader: () => import('./About'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Infos = Loadable({
|
||||
loader: () => import('./Infos'),
|
||||
const New = Loadable({
|
||||
loader: () => import('./disposePipeline'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Dispose = Loadable({
|
||||
loader: () => import('./Dispose'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Stucture = Loadable({
|
||||
loader: () => import('./Structure'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Mould = Loadable({
|
||||
loader: () => import('./Mould'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Params = Loadable({
|
||||
loader: () => import('./Manage/Params'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
export default ((props)=>{
|
||||
|
||||
return(
|
||||
<WhiteBack className="opsPanel">
|
||||
<Switch {...props}>
|
||||
<Route path="/projects/:owner/:projectsId/devops/dispose"
|
||||
<Route path="/projects/:owner/:projectsId/devops/dispose/:disposeId"
|
||||
render={
|
||||
() => (<Infos {...props} />)
|
||||
(p) => (<New {...props} {...p}/>)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/devops/list"
|
||||
<Route path="/projects/:owner/:projectsId/devops/params"
|
||||
render={
|
||||
() => (<Infos {...props} />)
|
||||
(p) => (<Params {...props} {...p}/>)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/devops/mould"
|
||||
render={
|
||||
(p) => (<Mould {...props} {...p}/>)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/devops/dispose/new"
|
||||
render={
|
||||
(p) => (<New {...props} {...p}/>)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/devops/dispose"
|
||||
render={
|
||||
(p) => (<Dispose {...props} {...p}/>)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/devops/list/:branch"
|
||||
render={
|
||||
(p) => (<Stucture {...props} {...p}/>)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/devops"
|
||||
render={
|
||||
() => (<About {...props} />)
|
||||
(p) => (<About {...props} {...p}/>)
|
||||
}
|
||||
></Route>
|
||||
</Switch>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import React , { useEffect , useState , useRef } from 'react';
|
||||
import React , { useEffect , useState } from 'react';
|
||||
import { Banner } from '../Component/layout';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Dispost from './Dispose';
|
||||
import Structure from './Structure';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
|
|
@ -11,22 +10,11 @@ const Div = styled.div`{
|
|||
padding:24px 30px;
|
||||
}`;
|
||||
export default ((props)=>{
|
||||
const [ menu , setMenu ] = useState(false);
|
||||
const [ permission , setPermission ] = useState("");
|
||||
const childRef = useRef();
|
||||
|
||||
const path = props.location.pathname;
|
||||
const owner = props.match.params.owner;
|
||||
const projectsId = props.match.params.projectsId;
|
||||
|
||||
const projectDetail = props.projectDetail;
|
||||
useEffect(()=>{
|
||||
if(path === `/projects/${owner}/${projectsId}/devops/list`){
|
||||
setMenu(true);
|
||||
}else{
|
||||
setMenu(false);
|
||||
}
|
||||
},[path])
|
||||
|
||||
useEffect(()=>{
|
||||
if(projectDetail){
|
||||
|
|
@ -34,23 +22,14 @@ export default ((props)=>{
|
|||
}
|
||||
},[projectDetail])
|
||||
|
||||
const updateChildState = () => {
|
||||
// changeVal就是子组件暴露给父组件的方法
|
||||
if (childRef.current) {
|
||||
childRef.current.changeVal();
|
||||
}
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="disposePanel">
|
||||
<Banner>
|
||||
{ permission !=="Reporter" && <Link to={`/projects/${owner}/${props.match.params.projectsId}/devops/dispose`} className={menu===false && "color-blue"} style={{ marginRight:"66px"}}>工作流配置</Link>}
|
||||
<Link to={`/projects/${owner}/${props.match.params.projectsId}/devops/list`}className={menu===true && "color-blue"}>构建列表</Link>
|
||||
{ menu===true && <a onClick={updateChildState} style={{float:"right",fontSize:"14px",color:"#FF6E21",marginTop:"5px"}}>刷新</a>}
|
||||
{ permission !=="Reporter" && <Link to={`/projects/${owner}/${props.match.params.projectsId}/devops/dispose`}>工作流配置</Link>}
|
||||
</Banner>
|
||||
<Div>
|
||||
{ menu === true && <Structure {...props} wrappedComponentRef={(form) => childRef.current = form} ref={childRef}/> }
|
||||
{ menu === false && permission !=="Reporter" && <Dispost {...props}/> }
|
||||
<Dispost {...props}/>
|
||||
</Div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
import React , { useEffect , useState , useRef } from 'react';
|
||||
import { Banner , Blueback , FlexAJ , AlignCenter } from '../../Component/layout';
|
||||
import { Input , Table , Popconfirm , Pagination } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
import New from './ParamsNew';
|
||||
import "./manage.scss";
|
||||
import axios from 'axios';
|
||||
import { result } from 'lodash';
|
||||
|
||||
const Div = styled.div`{
|
||||
padding:24px 30px;
|
||||
min-height:420px;
|
||||
}`;
|
||||
function Params(props){
|
||||
const [ list ,setList ] = useState(undefined);
|
||||
const [ editList ,setEditList ] = useState(undefined);
|
||||
const [ visible ,setVisible ] = useState(false);
|
||||
|
||||
let projectsId = props.match.params.projectsId;
|
||||
let owner = props.match.params.owner;
|
||||
|
||||
useEffect(()=>{
|
||||
Init()
|
||||
},[])
|
||||
|
||||
function Init(){
|
||||
const url = `/ci/secrets.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
owner,repo:projectsId
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
setList(result.data);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
const columns=[
|
||||
{
|
||||
title:"参数名",
|
||||
dataIndex:"name",
|
||||
key:1,
|
||||
ellipsis:true
|
||||
},
|
||||
{
|
||||
title:"操作",
|
||||
dataIndex:"operation",
|
||||
key:4,
|
||||
render:(txt,item)=>{
|
||||
return(
|
||||
<React.Fragment>
|
||||
<a className="mr10 color-grey-6" onClick={()=>editMouldFunc(item)}><i className="iconfont icon-zaibianji font-13 mr3"></i>编辑</a>
|
||||
<Popconfirm title={"确定要删除此模板？"} onConfirm={()=>deleteMouldFunc(item.id,item.name)} okText="确定" cancelText={"取消"}>
|
||||
<a className="mr10 color-grey-6"><i className="iconfont icon-lajitong font-13 mr3"></i>删除</a>
|
||||
</Popconfirm>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 编辑
|
||||
function editMouldFunc(item){
|
||||
setEditList(item);
|
||||
setVisible(true);
|
||||
}
|
||||
|
||||
// 删除
|
||||
function deleteMouldFunc(id,name){
|
||||
if(id && name){
|
||||
const url = `/ci/secrets/${id}.json`;
|
||||
axios.delete(url,{
|
||||
params:{owner,repo:projectsId,name}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
Init();
|
||||
props.showNotification(`参数删除成功！`);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
}
|
||||
|
||||
function successFunc(values,id){
|
||||
const url = `/ci/secrets.json?owner=${owner}&repo=${projectsId}`;
|
||||
axios.post(url,{
|
||||
...values,id
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
props.showNotification(`${id ? '参数编辑':"新增参数"}成功！`);
|
||||
Init();
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
function CancelFunc(){
|
||||
setVisible(false)
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<New visble={visible} successFunc={successFunc} CancelFunc={CancelFunc} editList={editList}/>
|
||||
<Banner>
|
||||
<FlexAJ>
|
||||
<span className="font-18">工作流 - 参数管理</span>
|
||||
<Link to={`/projects/${owner}/${projectsId}/devops/dispose`} className="font-14 color-grey-9 ml20">返回</Link>
|
||||
</FlexAJ>
|
||||
</Banner>
|
||||
<Div className="disposeList">
|
||||
<div style={{textAlign:"right"}}>
|
||||
<Blueback onClick={()=>setVisible(true)}>新建</Blueback>
|
||||
</div>
|
||||
<Table className="mt20" size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id} pagination={false}></Table>
|
||||
</Div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Params;
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import React , { useEffect , useState , useRef , forwardRef } from 'react';
|
||||
import { Modal , Input , Form } from 'antd';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
function ParamsNew({ form , visble,successFunc,CancelFunc ,editList }){
|
||||
const { getFieldDecorator, validateFields , setFieldsValue } = form;
|
||||
const layout = {
|
||||
labelCol: { span: 5 },
|
||||
wrapperCol: { span: 18 },
|
||||
};
|
||||
|
||||
useEffect(()=>{
|
||||
if(editList && editList.id){
|
||||
setFieldsValue({
|
||||
name:editList.name,
|
||||
data:editList.data
|
||||
})
|
||||
}else{
|
||||
setFieldsValue({
|
||||
name:undefined,
|
||||
data:undefined
|
||||
})
|
||||
}
|
||||
},[editList])
|
||||
|
||||
// 确定
|
||||
function onConfirmFunc(){
|
||||
validateFields((error,values)=>{
|
||||
if(!error){
|
||||
successFunc(values,editList && editList.id);
|
||||
onCancelFunc();
|
||||
}
|
||||
})
|
||||
}
|
||||
function onCancelFunc(){
|
||||
setFieldsValue({
|
||||
name:undefined,
|
||||
data:undefined
|
||||
})
|
||||
CancelFunc();
|
||||
}
|
||||
return(
|
||||
<Modal
|
||||
visible={visble}
|
||||
okText={"确定"}
|
||||
cancelText={"取消"}
|
||||
onCancel={onCancelFunc}
|
||||
onOk={onConfirmFunc}
|
||||
title={"新建"}
|
||||
closable={false}
|
||||
width="500px"
|
||||
>
|
||||
<Form {...layout}>
|
||||
<Form.Item label="参数名称">
|
||||
{getFieldDecorator("name",{
|
||||
rules:[{required:true,message:"请输入参数名称"}]
|
||||
})(
|
||||
<Input placeholder="请输入参数名称" width="220px"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="参数值">
|
||||
{getFieldDecorator("data",{
|
||||
rules:[{required:true,message:"请输入参数值"}]
|
||||
})(
|
||||
<TextArea placeholder="请输入参数值" width="220px" autoSize={{ minRows: 4, maxRows: 4 }}/>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default Form.create()(forwardRef(ParamsNew));
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.ant-form-explain{
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
import React , { useEffect , useState , useRef } from 'react';
|
||||
import { Banner , Blueback , FlexAJ } from '../Component/layout';
|
||||
import { Input , Table ,Pagination , Select , Popconfirm } from 'antd';
|
||||
import { Link } from 'react-router-dom'
|
||||
import styled from 'styled-components';
|
||||
import axios from 'axios';
|
||||
import New from './MouldNew';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const Div = styled.div`{
|
||||
padding:24px 30px;
|
||||
min-height:420px;
|
||||
}`;
|
||||
const STAGE = [
|
||||
{stage_name:"所有",stage_type:"all"},
|
||||
{stage_name:"初始化",stage_type:"init"},
|
||||
{stage_name:"编译构建",stage_type:"build"},
|
||||
{stage_name:"部署",stage_type:"deploy"},
|
||||
{stage_name:"其他",stage_type:"customize"}
|
||||
]
|
||||
const limit = 15;
|
||||
function Mould(props){
|
||||
const [ visible ,setVisible ] = useState(false);
|
||||
const [ list ,setList ] = useState(undefined);
|
||||
const [ page ,setPage ] = useState(1);
|
||||
const [ totalCount ,setTotalCount ] = useState(0);
|
||||
const [ stageType ,setStageType ] = useState("all");
|
||||
const [ search ,setSearch ] = useState(undefined);
|
||||
const childRef = useRef();
|
||||
let projectsId = props.match.params.projectsId;
|
||||
let owner = props.match.params.owner;
|
||||
useEffect(()=>{
|
||||
Init(page,stageType);
|
||||
},[page,stageType])
|
||||
|
||||
function Init(page,stageType,searchvalue){
|
||||
const url = `/ci/templates/list.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
page,limit,stage_type:stageType,name:searchvalue
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
setList(result.data.templates);
|
||||
setTotalCount(result.data.total_count);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
const columns=[
|
||||
{
|
||||
title:"名称",
|
||||
dataIndex:"template_name",
|
||||
key:1,
|
||||
ellipsis:true
|
||||
},
|
||||
{
|
||||
title:"所属阶段",
|
||||
dataIndex:"stage_type",
|
||||
key:2,
|
||||
ellipsis:true,
|
||||
render:(txt,item)=>{
|
||||
let i = STAGE.filter(item=>item.stage_type === txt);
|
||||
return i && i.length>0 && i[0].stage_name
|
||||
}
|
||||
},
|
||||
{
|
||||
title:"模板类型",
|
||||
dataIndex:"category",
|
||||
key:3,
|
||||
ellipsis:true
|
||||
},
|
||||
{
|
||||
title:"操作",
|
||||
dataIndex:"operation",
|
||||
key:4,
|
||||
ellipsis:true,
|
||||
render:(txt,item)=>{
|
||||
return(
|
||||
<span>
|
||||
<a className="mr10 color-grey-6" onClick={()=>editMouldFunc(item)}><i className="iconfont icon-zaibianji font-13 mr3"></i>编辑</a>
|
||||
<Popconfirm title={"确定要删除此模板？"} onConfirm={()=>deleteMouldFunc(item.id)} okText="确定" cancelText={"取消"}>
|
||||
<a className="mr10 color-grey-6"><i className="iconfont icon-lajitong font-13 mr3"></i>删除</a>
|
||||
</Popconfirm>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 编辑模板
|
||||
function editMouldFunc(item){
|
||||
if (childRef.current) {
|
||||
childRef.current.setEditInfo(item);
|
||||
}
|
||||
setVisible(true);
|
||||
}
|
||||
|
||||
// 删除模板
|
||||
function deleteMouldFunc(id){
|
||||
const url = `/ci/templates/${id}.json`;
|
||||
axios.delete(url).then(result=>{
|
||||
if(result && result.data){
|
||||
props.showNotification("模板删除成功！");
|
||||
Init(page,stageType,search);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function searchValue(){
|
||||
Init(page,stageType,search);
|
||||
}
|
||||
|
||||
function newMouldFunc(){
|
||||
if (childRef.current) {
|
||||
childRef.current.setEditInfo(undefined);
|
||||
}
|
||||
setVisible(true);
|
||||
}
|
||||
|
||||
function onOk(){
|
||||
Init(page,stageType);
|
||||
}
|
||||
return(
|
||||
<div>
|
||||
<New wrappedComponentRef={(f) => childRef.current = f} ref={childRef} visible={visible} onCancel={()=>setVisible(false)} onOk={onOk}></New>
|
||||
<Banner>
|
||||
<FlexAJ><span>工作流 - 模板管理</span><Link to={`/projects/${owner}/${projectsId}/devops/dispose`} className="font-14 color-grey-9">返回</Link></FlexAJ>
|
||||
</Banner>
|
||||
<Div className="disposeList">
|
||||
<FlexAJ>
|
||||
<Blueback onClick={newMouldFunc}>新建模板</Blueback>
|
||||
<FlexAJ>
|
||||
<span className="mr10">阶段：</span>
|
||||
<Select onChange={e=>setStageType(e)} value={stageType} style={{width:"180px"}}>
|
||||
{
|
||||
STAGE.map((item,key)=>{
|
||||
return(
|
||||
<Option value={item.stage_type}>{item.stage_name}</Option>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
<Input placeholder="请输入模板名称" value={search} onChange={(e)=>setSearch(e.target.value)} allowClear style={{width:"160px",marginLeft:"15px"}}/>
|
||||
<Blueback className="ml15" onClick={searchValue}>搜索</Blueback>
|
||||
</FlexAJ>
|
||||
</FlexAJ>
|
||||
<Table className="mt20" size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id} pagination={false}></Table>
|
||||
{
|
||||
totalCount > limit &&
|
||||
<div className="mt20 pb20" style={{textAlign:'center'}}>
|
||||
<Pagination simple current={page} pageSize={limit} total={totalCount} onChange={(page)=>setPage(page)}/>
|
||||
</div>
|
||||
}
|
||||
</Div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Mould;
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
import React , { useImperativeHandle , useState , forwardRef , useCallback } from 'react';
|
||||
import { Form , Modal , Input , Select , Spin } from 'antd';
|
||||
import Editor from './Dispose/Editors';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Option } = Select;
|
||||
const TYPE = ["Java","C","C++","Python","Go","Ruby","R","PHP",
|
||||
"Perl","Node","Docker","Rust","Swift","Erlang","Other"]
|
||||
|
||||
function MouldNew({ form , visible , onCancel , onOk }, ref){
|
||||
const [value , setValue ] = useState(undefined);
|
||||
const [isSpin , setIsSpin ] = useState(false);
|
||||
const [valueFlag , setValueFlag ] = useState(false);
|
||||
const [ id , setId ] = useState(false);
|
||||
const [ buildFlag , setBuildFlag ] = useState(false);
|
||||
|
||||
const { getFieldDecorator, validateFields , setFieldsValue } = form;
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
setEditInfo: (info) => {
|
||||
if(info){
|
||||
setFieldsValue({
|
||||
...info
|
||||
})
|
||||
if(info.stage_type === "build"){
|
||||
setBuildFlag(true);
|
||||
setFieldsValue({
|
||||
category:TYPE[0]
|
||||
})
|
||||
}else{
|
||||
removeCate();
|
||||
}
|
||||
setValue(info.content);
|
||||
setId(info.id);
|
||||
}else{
|
||||
removeCate();
|
||||
clear();
|
||||
setId(undefined);
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
const helper = useCallback(
|
||||
(label, name, rules, widget, className, isRequired,flag) => (
|
||||
<Form.Item label={label} className={className}>
|
||||
{getFieldDecorator(name, { rules, validateFirst: true , valuePropName:flag ? "checked":"value" })(widget)}
|
||||
</Form.Item>
|
||||
),
|
||||
[]
|
||||
);
|
||||
function changeContent(v){
|
||||
if(v){
|
||||
setValue(v);
|
||||
setValueFlag(false);
|
||||
}
|
||||
}
|
||||
function cancel(){
|
||||
clear();
|
||||
onCancel();
|
||||
}
|
||||
function sure(){
|
||||
if(!value){
|
||||
setValueFlag(true);
|
||||
return;
|
||||
}
|
||||
validateFields((error,values)=>{
|
||||
if(!error){
|
||||
setIsSpin(true);
|
||||
const url = `/ci/templates.json`;
|
||||
axios.post(url,{
|
||||
...values,id,content:value,category:buildFlag ? values.category:""
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
setIsSpin(false);
|
||||
cancel();
|
||||
onOk();
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
})
|
||||
}
|
||||
function clear(){
|
||||
setFieldsValue({
|
||||
stage_type:"init",
|
||||
template_name:undefined,
|
||||
category:"Java",
|
||||
})
|
||||
setValue("");
|
||||
setValueFlag(false);
|
||||
}
|
||||
|
||||
function changeStage(e){
|
||||
if(e === "build"){
|
||||
setBuildFlag(true);
|
||||
setFieldsValue({
|
||||
category:TYPE[0]
|
||||
})
|
||||
}else{
|
||||
removeCate();
|
||||
}
|
||||
}
|
||||
|
||||
function removeCate(){
|
||||
setBuildFlag(false);
|
||||
setFieldsValue({
|
||||
category:""
|
||||
})
|
||||
}
|
||||
return(
|
||||
<Modal
|
||||
visible={visible}
|
||||
width="500px"
|
||||
title={"新建/编辑模板"}
|
||||
onCancel={cancel}
|
||||
onOk={sure}
|
||||
centered={true}
|
||||
>
|
||||
<Spin spinning={isSpin}>
|
||||
<Form layout={"inline"}>
|
||||
{helper(
|
||||
"所属阶段",
|
||||
"stage_type",
|
||||
[{required:true,message:"请选择所属阶段"}],
|
||||
<Select placeholder="请选择所属阶段" style={{width:"350px"}} onChange={(e)=>{changeStage(e)}}>
|
||||
<Option value="init">初始化</Option>
|
||||
<Option value="build">编译构建</Option>
|
||||
<Option value="deploy">部署</Option>
|
||||
<Option value="customize">其他</Option>
|
||||
</Select>
|
||||
)}
|
||||
{helper(
|
||||
"模板名称",
|
||||
"template_name",
|
||||
[{required:true,message:"请输入模板名称"}],
|
||||
<Input placeholder="请输入模板名称" style={{width:"350px"}}/>
|
||||
)}
|
||||
{helper(
|
||||
"模板分类",
|
||||
"category",
|
||||
[{required:buildFlag,message:"请选择模板分类"}],
|
||||
<Select placeholder="请选择模板分类" style={{width:"350px"}}>
|
||||
{
|
||||
TYPE.map((item,key)=>{
|
||||
return(
|
||||
<Option value={item}>{item}</Option>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Select>,buildFlag===true ? "" :"hide"
|
||||
)}
|
||||
<div style={{display:'flex',justifyContent:"flex-start"}}>
|
||||
<span><span className="color-red">* </span>模板内容：</span>
|
||||
<div>
|
||||
<div className="editorPanel">
|
||||
<Editor Numbers={"off"} width={"350px"} value={value} height="200px" theme="vs-grey" onChange={changeContent}/>
|
||||
</div>
|
||||
{ valueFlag && <span className="color-red">请输入模板内容</span>}
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</Spin>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default Form.create()(forwardRef(MouldNew));
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Radio , Button } from 'antd';
|
||||
|
||||
function ServiceModal({sureModal}){
|
||||
const [ type , setType ] = useState(1);
|
||||
|
||||
function changeType(e){
|
||||
setType(e.target.value);
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="mt30" style={{textAlign:"center"}}>
|
||||
<Radio.Group value={type} onChange={changeType}>
|
||||
<Radio value={1}>自有服务器</Radio>
|
||||
<Radio value={2}>Trustie服务器</Radio>
|
||||
</Radio.Group>
|
||||
<p className="mt30"><Button type="primary" onClick={()=>sureModal(type)}>下一步</Button></p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default ServiceModal;
|
||||
|
|
@ -1,10 +1,16 @@
|
|||
import React, { useState, useEffect , useImperativeHandle ,forwardRef } from "react";
|
||||
import { FlexAJ, AlignCenter } from "../Component/layout";
|
||||
import { FlexAJ, AlignCenter , Banner } from "../Component/layout";
|
||||
import { Table, Pagination, Popconfirm } from "antd";
|
||||
import { truncateCommitId } from "../common/util";
|
||||
import {getUrl} from 'educoder';
|
||||
import axios from "axios";
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Div = styled.div`{
|
||||
padding:24px 30px;
|
||||
}`;
|
||||
const STATUS = [
|
||||
{ name: "所有"},
|
||||
{ name: "运行中", value: "running" },
|
||||
|
|
@ -22,6 +28,7 @@ function Structure(props,ref){
|
|||
|
||||
let projectsId = props.match.params.projectsId;
|
||||
let owner = props.match.params.owner;
|
||||
let branch = props.match.params.branch;
|
||||
const permission = props.projectDetail && props.projectDetail.permission;
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
|
|
@ -35,7 +42,7 @@ function Structure(props,ref){
|
|||
if (projectsId) {
|
||||
Init();
|
||||
}
|
||||
}, []);
|
||||
}, [page]);
|
||||
|
||||
let current_user = props.current_user;
|
||||
function Init(status) {
|
||||
|
|
@ -43,7 +50,7 @@ function Structure(props,ref){
|
|||
axios.get(url,{
|
||||
params:{
|
||||
search:status,
|
||||
page,limit:LIMIT
|
||||
page,limit:LIMIT,branch
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result && result.data) {
|
||||
|
|
@ -180,7 +187,7 @@ function Structure(props,ref){
|
|||
<i className="iconfont icon-weitongguo"></i>已撤销
|
||||
</span>
|
||||
);
|
||||
case 'pending':
|
||||
default:
|
||||
return (
|
||||
<span className="statusTag Preparing">
|
||||
<i className="iconfont icon-zhunbeizhong"></i>准备中
|
||||
|
|
@ -278,42 +285,45 @@ function Structure(props,ref){
|
|||
},
|
||||
];
|
||||
return (
|
||||
<div className="listPart">
|
||||
<FlexAJ>
|
||||
{renderStatus()}
|
||||
{/* <Blueback>手动创建</Blueback> */}
|
||||
{/* <span className="mr30">
|
||||
<i className="iconfont icon-fenzhi1 font-16 mr5 color-blue"></i>分支
|
||||
</span>
|
||||
<span>
|
||||
<i className="iconfont icon-biaoqian3 font-16 mr5 color-blue"></i>
|
||||
标签
|
||||
</span> */}
|
||||
</FlexAJ>
|
||||
<Table
|
||||
onRow={(record,index)=>{
|
||||
return{
|
||||
onClick:(event)=>clickRows(event,record)
|
||||
}
|
||||
}}
|
||||
columns={column}
|
||||
className="normalTable"
|
||||
dataSource={data}
|
||||
pagination={false}
|
||||
loading={tableLoading}
|
||||
></Table>
|
||||
{total > LIMIT ?
|
||||
<div style={{ textAlign: "center", margin: "30px 50px" }}>
|
||||
<Pagination
|
||||
showQuickJumper
|
||||
defaultCurrent={page}
|
||||
total={total}
|
||||
pageSize={LIMIT}
|
||||
onChange={ChangePage}
|
||||
></Pagination>
|
||||
</div>
|
||||
:
|
||||
"" }
|
||||
<div className="disposePanel">
|
||||
<Banner>
|
||||
<FlexAJ>
|
||||
<span>构建列表</span>
|
||||
<Link to={`/projects/${owner}/${projectsId}/devops/dispose`} className="font-15 color-grey-9">返回</Link>
|
||||
</FlexAJ>
|
||||
</Banner>
|
||||
<Div>
|
||||
<div className="listPart">
|
||||
<FlexAJ>
|
||||
{renderStatus()}
|
||||
<a onClick={()=>Init(status)} className="color-red font-16">刷新</a>
|
||||
</FlexAJ>
|
||||
<Table
|
||||
onRow={(record,index)=>{
|
||||
return{
|
||||
onClick:(event)=>clickRows(event,record)
|
||||
}
|
||||
}}
|
||||
columns={column}
|
||||
className="normalTable"
|
||||
dataSource={data}
|
||||
pagination={false}
|
||||
loading={tableLoading}
|
||||
></Table>
|
||||
{total > LIMIT ?
|
||||
<div style={{ textAlign: "center", margin: "30px 50px" }}>
|
||||
<Pagination
|
||||
showQuickJumper
|
||||
defaultCurrent={page}
|
||||
total={total}
|
||||
pageSize={LIMIT}
|
||||
onChange={ChangePage}
|
||||
></Pagination>
|
||||
</div>
|
||||
:
|
||||
"" }
|
||||
</div>
|
||||
</Div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,317 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import { WhiteBack } from '../Component/layout';
|
||||
import { Spin } from 'antd';
|
||||
import Head from './Dispose/head';
|
||||
import Menus from './Dispose/menus';
|
||||
import Init from './Dispose/Init';
|
||||
import Sure from './Dispose/Sure';
|
||||
import Stage from './Dispose/Stage';
|
||||
import axios from 'axios';
|
||||
|
||||
function disposePipeline(props){
|
||||
const [ spining , setSpining ] = useState(true);
|
||||
const [ stage , setStage ] = useState(1);
|
||||
const [ pipeLineName , setPipeLineName ] = useState(undefined);
|
||||
const [ stepName , setStepName ] = useState(undefined);
|
||||
const [ stageId , setStageId ] =useState(undefined);
|
||||
const [ menuList , setMenuList ] = useState(undefined);
|
||||
const [ stageType , setStageType ] = useState("init");
|
||||
const [ datas , setDatas ] = useState(undefined);
|
||||
const [ templates , setTemplates] = useState(undefined);
|
||||
const [ datasUpdataFlag , setDatasUpdataFlag ] = useState(false);
|
||||
const [ loading ,setLoading ] = useState(false);
|
||||
|
||||
const { disposeId } = props.match.params;
|
||||
let projectsId = props.match.params.projectsId;
|
||||
let owner = props.match.params.owner;
|
||||
useEffect(()=>{
|
||||
if(stageType && stageType !=="confirm"){
|
||||
InitTemplates();
|
||||
}
|
||||
},[stageType])
|
||||
|
||||
// 获取模板
|
||||
function InitTemplates(){
|
||||
const url = `/ci/templates/templates_by_stage.json`;
|
||||
axios.get(url,{
|
||||
params:{ stage_type:stageType, id:disposeId }
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
setTemplates(result.data);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
if(disposeId && (stageType && stageType !=="confirm")){
|
||||
getData(0);
|
||||
}
|
||||
},[disposeId])
|
||||
// 获取所有阶段默认第一个阶段的数据
|
||||
function getData(index){
|
||||
const url = `/ci/pipelines/${disposeId}/stages.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result && result.data){
|
||||
setMenuList(result.data.stages);
|
||||
if(index || index === 0){
|
||||
let first = result.data.stages[index];
|
||||
setStage(first.show_index);
|
||||
setStageId(first.id);
|
||||
setPipeLineName(`${first.pipeline_name}`);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
if(stageId){
|
||||
getStageStep(stageId);
|
||||
}
|
||||
},[stageId])
|
||||
// 切换阶段时获取阶段步骤数据（第一次默认查询”初始化“阶段的数据）
|
||||
function getStageStep(stageId){
|
||||
let url = "";
|
||||
if(stageType && stageType === "confirm"){
|
||||
url = `/ci/pipelines/${disposeId}/content.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
owner,repo:projectsId
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
setDatas(result.data);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}else{
|
||||
url = `/ci/pipelines/${disposeId}/${stageId}/steps.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result && result.data){
|
||||
let step = result.data.steps;
|
||||
setDatas(step);
|
||||
let flag = !step || (step && step.length === 0);
|
||||
setDatasUpdataFlag(flag);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
setSpining(false);
|
||||
}
|
||||
|
||||
// 切换阶段：s：show_index,stage_type:stage_type
|
||||
function changestage(show_index,stage_type,stage_id,stage_name){
|
||||
if(show_index !== stage){
|
||||
saveFunc(show_index,stage_type,stage_id,stage_name);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取子组件传过来的数据
|
||||
function saveDatas(steps){
|
||||
setDatas([...steps]);
|
||||
setDatasUpdataFlag(true);
|
||||
}
|
||||
|
||||
// 检查数组里面是否有空数据
|
||||
function checkDatas(){
|
||||
if(datas && datas.length > 0){
|
||||
for(let i= 0;i< datas.length;i++){
|
||||
if(datas[i] && (!datas[i].content || !datas[i].template_id)){
|
||||
props.showNotification("请先选择模板！");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if(stageType === "init" ){
|
||||
props.showNotification("请先选择模板！");
|
||||
return false;
|
||||
}else if(stageType === "confirm" ){
|
||||
return true;
|
||||
}else{
|
||||
return "";
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// 保存步骤
|
||||
function saveFunc(show_index,stage_type,stage_id,stageName,btn){
|
||||
setSpining(true);
|
||||
// 判断数据是否有过更新
|
||||
if(datasUpdataFlag && stageType !== "confirm"){
|
||||
// 先判断子组件传过来的数据是否有undefined --datas
|
||||
let f = checkDatas();
|
||||
if(f && (datas && datas.length !== 0)){
|
||||
// 数据没问题后先保存数据再切换阶段
|
||||
saveDataFunc(btn,show_index,stage_type,stage_id,stageName);
|
||||
}
|
||||
else{
|
||||
setSpining(false);
|
||||
f === "" && elseFunc(btn,show_index,stage_type,stage_id,stageName);
|
||||
}
|
||||
}else{
|
||||
elseFunc(btn,show_index,stage_type,stage_id,stageName);
|
||||
}
|
||||
}
|
||||
|
||||
function saveDataFunc(btn,show_index,stage_type,stage_id,stageName){
|
||||
const url = `/ci/pipelines/${disposeId}/${stageId}/stage_step.json`;
|
||||
axios.post(url,{
|
||||
steps:datas
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
setDatasUpdataFlag(false);
|
||||
if(!btn){
|
||||
setStage(show_index);
|
||||
setStageType(stage_type);
|
||||
setStageId(stage_id);
|
||||
setStepName(pipeLineName+`-`+stageName);
|
||||
}else{
|
||||
enters(btn);
|
||||
}
|
||||
}else{
|
||||
props.showNotification("阶段更新失败，请稍微重试！");
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
function elseFunc(btn,show_index,stage_type,stage_id,stageName){
|
||||
if(btn){
|
||||
enters(btn);
|
||||
}else{
|
||||
setStage(show_index);
|
||||
setStageType(stage_type);
|
||||
setStageId(stage_id);
|
||||
setStepName(pipeLineName+`-`+stageName);
|
||||
}
|
||||
}
|
||||
|
||||
// 上一步、下一步
|
||||
function enters(btn){
|
||||
let s = stage;
|
||||
if(btn === "next"){
|
||||
// 点击阶段里面的下一步
|
||||
s = s+1;
|
||||
}else{
|
||||
// 上一步
|
||||
s = s-1;
|
||||
}
|
||||
let item = menuList && menuList.filter(i=>i.show_index === (s));
|
||||
setStage(s);
|
||||
setStageType(item[0].stage_type);
|
||||
setStageId(item[0].id);
|
||||
setStepName(pipeLineName+`-`+item[0].stage_name);
|
||||
}
|
||||
// 删除步骤
|
||||
function deleteStep(id,index){
|
||||
if(id){
|
||||
const url = `/ci/pipelines/${disposeId}/${stageId}/${id}/delete_step.json`;
|
||||
axios.delete(url).then(result=>{
|
||||
if(result && result.data){
|
||||
getStageStep(stageId);
|
||||
props.showNotification("阶段步骤删除成功!");
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}else{
|
||||
let d = datas.filter(s=>s.show_index !== (index+1));
|
||||
setDatas(d);
|
||||
}
|
||||
}
|
||||
function renameFunc(value,id){
|
||||
const url = `/ci/pipelines/${disposeId}/${id}/update_stage.json`;
|
||||
axios.put(url,{
|
||||
stage_name:value
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
getData();
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
// 新增阶段
|
||||
function addMenuFunc(name,index){
|
||||
const url = `/ci/pipelines/${disposeId}/create_stage.json`;
|
||||
axios.post(url,{
|
||||
show_index:index,
|
||||
stage_name:name
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
getData(index-1);
|
||||
setStageType("customize");
|
||||
}else{
|
||||
props.showNotification("阶段新增失败!");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除阶段
|
||||
function deleteStageFunc(){
|
||||
let next = menuList && menuList.filter(item=>item.show_index === (stage+1));
|
||||
let nextStageType = next && next.length>0 && next[0].stage_type;
|
||||
const url = `/ci/pipelines/${disposeId}/${stageId}/delete_stage.json`;
|
||||
axios.delete(url,{
|
||||
params:{show_index:stage}
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
getData(stage-1);
|
||||
setStageType(nextStageType);
|
||||
}else{
|
||||
props.showNotification("阶段删除失败!");
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
// 确认提交
|
||||
function sureSubmit(){
|
||||
setLoading(true);
|
||||
let params = {
|
||||
branch: datas.branch,
|
||||
content:datas.content,
|
||||
filepath:'.trustie-pipeline.yml',
|
||||
message:'',
|
||||
sha:datas.sha || undefined,
|
||||
owner:owner,
|
||||
repo:projectsId
|
||||
}
|
||||
let url = `/${owner}/${projectsId}/update_trustie_pipeline.json`;
|
||||
axios.put(url,{
|
||||
...params
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
props.history.push(`/projects/${owner}/${projectsId}/devops/dispose`);
|
||||
}
|
||||
setLoading(false);
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
setLoading(false);
|
||||
})
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="disposePanel">
|
||||
<Head />
|
||||
<WhiteBack style={{padding:"24px 30px"}}>
|
||||
<Spin spinning={spining}>
|
||||
<div style={{minHeight:"450px"}}>
|
||||
<Menus step={stage} checkDatas={checkDatas} changeStep={changestage} menuList={menuList} renameFunc={renameFunc} addFunc={addMenuFunc}/>
|
||||
{
|
||||
stageType === "init" ? <Init stage_type={stageType} templates={templates} datas={datas} saveDatas={saveDatas} saveFunc={saveFunc}/>
|
||||
:
|
||||
stageType === "confirm" ? <Sure sureSubmit={sureSubmit} name={pipeLineName} datas={datas} saveFunc={saveFunc} loading={loading}/>
|
||||
:
|
||||
<Stage {...props}
|
||||
stepName={stepName}
|
||||
deleteStep={deleteStep}
|
||||
stage_type={stageType}
|
||||
templates={templates}
|
||||
datas={datas}
|
||||
deleteFunc={deleteStageFunc}
|
||||
saveDatas={saveDatas}
|
||||
saveFunc={saveFunc}
|
||||
deleteFlag={menuList && menuList.length === 3}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</Spin>
|
||||
</WhiteBack>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default disposePipeline;
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
padding:60px 0px;
|
||||
}
|
||||
.disposePanel{
|
||||
border:1px solid #eee;
|
||||
.language{
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -81,48 +82,7 @@
|
|||
.ant-modal-close{
|
||||
top:7px;
|
||||
}
|
||||
// 列表
|
||||
.listPart{
|
||||
.statusTag{
|
||||
display: flex;
|
||||
padding:0px 16px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius:20px;
|
||||
float: left;
|
||||
i{
|
||||
font-size: 20px!important;
|
||||
margin-right: 7px;
|
||||
}
|
||||
&.running{
|
||||
background:#F1F8FF;
|
||||
border:1px solid #5091FF;
|
||||
color: #5091FF;
|
||||
}
|
||||
&.Preparing{
|
||||
background:rgba(255,248,244,1);
|
||||
border:1px solid rgba(255,110,33,1);
|
||||
color:rgba(255,110,33,1) ;
|
||||
}
|
||||
&.pass{
|
||||
background:#EEFDF5;
|
||||
border:1px solid #28BD6C;
|
||||
color:#28BD6C ;
|
||||
}
|
||||
&.failed{
|
||||
background:#FCEEEE;
|
||||
border:1px solid #F73030;
|
||||
color:#F73030 ;
|
||||
}
|
||||
&.killed{
|
||||
background:#eee;
|
||||
border:1px solid #999;
|
||||
color:#999 ;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// ops详情
|
||||
.opsDetailPanel{
|
||||
|
|
@ -313,4 +273,237 @@
|
|||
text-align:center;
|
||||
line-height:22px;
|
||||
color:#666;
|
||||
}
|
||||
|
||||
.disposeList{
|
||||
min-height: 450px;
|
||||
.ant-table-body{
|
||||
margin:0px!important;
|
||||
.ant-table-thead{
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
}
|
||||
.txtright{
|
||||
text-align: right;
|
||||
}
|
||||
.menus{
|
||||
display: flex;
|
||||
box-shadow: 0px 0px 6px rgba(0,3,8,0.1);
|
||||
padding:20px 0px 10px 0px;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
& > li{
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items:center;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
color: #787878;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
max-width: 122px;
|
||||
flex:2;
|
||||
&>i{
|
||||
font-size: 30px!important;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
&:hover,&.active{
|
||||
& > i{
|
||||
color: #1890FF;
|
||||
}
|
||||
}
|
||||
&.active::after{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -25px;
|
||||
bottom:-10px;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background-color: #1890FF;
|
||||
content: "";
|
||||
}
|
||||
.aboutEdit{
|
||||
width: 100%;
|
||||
.operateName{
|
||||
position: relative;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0px 15px;
|
||||
min-height: 40px;
|
||||
& > i{
|
||||
position: absolute;
|
||||
right:0px;
|
||||
top:10px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:hover i{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > li.menuAdd{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
&:hover{
|
||||
& > i{
|
||||
color: #787878;
|
||||
}
|
||||
}
|
||||
& > i{
|
||||
font-size: 18px!important;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top:0px;
|
||||
}
|
||||
& > input{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top:3px;
|
||||
}
|
||||
&::before{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px dashed #eee;
|
||||
content: "";
|
||||
top:15px;
|
||||
margin-top: -1px;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choosenList{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
line-height: 35px;
|
||||
align-items: center;
|
||||
& > span{
|
||||
display: block;
|
||||
min-width: 75px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
height: 35px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
& > ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li{
|
||||
padding:0px 12px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
border:1px solid #e1e4e8;
|
||||
background-color: #fff;
|
||||
margin:6px 0px;
|
||||
margin-right: 12px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
li.active{
|
||||
color: #fff;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
}
|
||||
.ant-select-selection.ant-select-selection--multiple{
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
.addStageBtn{
|
||||
display: block;
|
||||
width: 100%;
|
||||
border:1px solid #e1e4e8;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
color: #1890FF;
|
||||
font-size: 16px;
|
||||
border-radius: 3px;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.stepsItem{
|
||||
border:1px solid #e1e4e8;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
.stepsHead{
|
||||
padding:8px 15px;
|
||||
span > a > i{
|
||||
margin-left: 8px;
|
||||
color: #666!important;
|
||||
}
|
||||
}
|
||||
.stepsBody{
|
||||
padding:10px 15px;
|
||||
border-top: 1px solid #e1e4e8;
|
||||
background-color: rgb(251, 251, 251);
|
||||
display: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.stepsBody.active{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.editorPanel{
|
||||
border:1px solid #eee;
|
||||
.margin{
|
||||
width: 0px;
|
||||
}
|
||||
.monaco-scrollable-element.editor-scrollable{
|
||||
left: 0px!important;
|
||||
width: 100%!important;
|
||||
.view-lines{
|
||||
width: 336px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hide{
|
||||
display: none!important;
|
||||
}
|
||||
.statusTag{
|
||||
display: flex;
|
||||
padding:0px 16px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius:20px;
|
||||
float: left;
|
||||
i{
|
||||
font-size: 20px!important;
|
||||
margin-right: 7px;
|
||||
}
|
||||
&.running{
|
||||
background:#F1F8FF;
|
||||
border:1px solid #5091FF;
|
||||
color: #5091FF;
|
||||
}
|
||||
&.Preparing{
|
||||
background:rgba(255,248,244,1);
|
||||
border:1px solid rgba(255,110,33,1);
|
||||
color:rgba(255,110,33,1) ;
|
||||
}
|
||||
&.pass{
|
||||
background:#EEFDF5;
|
||||
border:1px solid #28BD6C;
|
||||
color:#28BD6C ;
|
||||
}
|
||||
&.failed{
|
||||
background:#FCEEEE;
|
||||
border:1px solid #F73030;
|
||||
color:#F73030 ;
|
||||
}
|
||||
&.killed{
|
||||
background:#eee;
|
||||
border:1px solid #999;
|
||||
color:#999 ;
|
||||
}
|
||||
}
|
||||
|
|
@ -87,7 +87,7 @@ export default (props) => {
|
|||
</AlignCenter>
|
||||
<Link
|
||||
style={{ color: "#ddd" }}
|
||||
to={`/projects/${owner}/${projectId}/devops/list`}
|
||||
to={`/projects/${owner}/${projectId}/devops/dispose`}
|
||||
>
|
||||
<i className="iconfont icon-yiguanbi font-15 mr5"></i>退出
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -10,4 +10,8 @@ export const getTag = async (id,owner)=>{
|
|||
// 获取hooks（仓库设置-管理web钩子）列表
|
||||
export const getHooks = async (id,params)=>{
|
||||
return (await axios.get(`/projects/${id}/hooks.json`,{params})).data;
|
||||
}
|
||||
// 获取子目录列表
|
||||
export const getSubEntries = async (owner,projectsId,params)=>{
|
||||
return (await axios.get(`/${owner}/${projectsId}/sub_entries.json`,{params})).data;
|
||||
}
|
||||
|
|
@ -0,0 +1,731 @@
|
|||
import React, { Component } from 'react';
|
||||
import AccountProfile from "../../modules/user/AccountProfile";
|
||||
import { getImageUrl } from 'educoder'
|
||||
import axios from 'axios';
|
||||
import { Modal, Input, message, notification , Dropdown , Menu ,Divider } from 'antd';
|
||||
|
||||
import LoginDialog from '../../modules/login/LoginDialog';
|
||||
import GotoQQgroup from '../../modal/GotoQQgroup'
|
||||
// import 'antd/lib/modal/style/index.css';
|
||||
// import 'antd/lib/checkbox/style/index.css';
|
||||
// import 'antd/lib/radio/style/index.css';
|
||||
// import 'antd/lib/input/style/index.css';
|
||||
import '../../modules/tpm/TPMIndex.css';
|
||||
import logo from '../../modules/tpm/images/logo.png';
|
||||
import './header.scss';
|
||||
const $ = window.$
|
||||
// TODO 这部分脚本从公共脚本中直接调用
|
||||
const { Search } = Input;
|
||||
let old_url;
|
||||
|
||||
window._header_componentHandler = null;
|
||||
// 非trustie链接则新开页跳转
|
||||
const str = ['www.trustie.net','forgeplus.trustie.net','forum.trustie.net','testforgeplus.trustie.net']
|
||||
class NewHeader extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
Addcoursestypes: false,
|
||||
tojoinitemtype: false,
|
||||
tojoinclasstitle: undefined,
|
||||
rolearr: ["", ""],
|
||||
Checkboxteacherchecked: false,
|
||||
Checkboxstudentchecked: false,
|
||||
Checkboxteachingchecked: false,
|
||||
Checkboxteachertype: false,
|
||||
Checkboxteachingtype: false,
|
||||
code_notice: false,
|
||||
checked_notice: false,
|
||||
RadioGroupvalue: undefined,
|
||||
submitapplications: false,
|
||||
isRender: false,
|
||||
showSearchOpentype: false,
|
||||
showTrial: false,
|
||||
setevaluatinghides: false,
|
||||
occupation: 0,
|
||||
mydisplay: false,
|
||||
headtypesonClickbool: false,
|
||||
headtypess: "/",
|
||||
settings: null,
|
||||
goshowqqgtounp: false,
|
||||
visiblemyss: false,
|
||||
openSearch:false,
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
// this.getAppdata();
|
||||
this.geturlsdata();
|
||||
window._header_componentHandler = this;
|
||||
|
||||
//下拉框的显示隐藏
|
||||
var hoverTimeout;
|
||||
var hoveredPanel;
|
||||
$(".edu-menu-panel").hover(function () {
|
||||
if (hoverTimeout) { // 一次只显示一个panel
|
||||
if (hoveredPanel && hoveredPanel !== this) {
|
||||
$(hoveredPanel).find(".edu-menu-list").hide()
|
||||
}
|
||||
clearTimeout(hoverTimeout);
|
||||
hoverTimeout = null;
|
||||
}
|
||||
hoveredPanel = this;
|
||||
$(this).find(".edu-menu-list").show();
|
||||
}, function () {
|
||||
var that = this;
|
||||
// 延迟hide
|
||||
hoverTimeout = setTimeout(function () {
|
||||
$(that).find(".edu-menu-list").hide();
|
||||
}, 800)
|
||||
|
||||
});
|
||||
//获取游览器地址
|
||||
try {
|
||||
window.sessionStorage.setItem("yslgeturls", JSON.stringify(window.location.href))
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
SearchInput = (open,item)=>{
|
||||
if(open){
|
||||
return(
|
||||
<div
|
||||
onBlur={() => {
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
openSearch:false
|
||||
})
|
||||
}, 300)
|
||||
}}
|
||||
>
|
||||
<Search placeholder="实践课程/教学课堂/实践项目/交流问答"
|
||||
className={`search-input mr20`}
|
||||
onSearch={(value)=>this.onGlobalSearch(value,item)}
|
||||
autoFocus={true}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}else{
|
||||
return <i className="iconfont icon-sousuo font-18 color-grey-6 ml30" onClick={() => {
|
||||
this.setState({openSearch:true})
|
||||
}} />
|
||||
}
|
||||
}
|
||||
|
||||
onGlobalSearch=(value,item)=>{
|
||||
window.location.href=`${item && item.url}?value=` + value;
|
||||
}
|
||||
|
||||
openNotification = (messge) => {
|
||||
notification.open({
|
||||
message: "提示",
|
||||
description:
|
||||
messge,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
componentWillReceiveProps(newProps, oldProps) {
|
||||
this.setState({
|
||||
user: newProps.user
|
||||
})
|
||||
if (newProps.Headertop !== undefined) {
|
||||
old_url = newProps.Headertop.old_url
|
||||
}
|
||||
}
|
||||
getCookie = (key) => {
|
||||
var arr, reg = RegExp('(^| )' + key + '=([^;]+)(;|$)');
|
||||
if (arr === document.cookie.match(reg))
|
||||
return decodeURIComponent(arr[2]);
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
delCookie = (name) => {
|
||||
var exp = new Date();
|
||||
exp.setTime(exp.getTime() - 1);
|
||||
var cval = this.getCookie(name);
|
||||
if (cval != null) {
|
||||
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
|
||||
}
|
||||
}
|
||||
onLogout = () => {
|
||||
const url = `/accounts/logout.json`
|
||||
this.delCookie("autologin_trustie")
|
||||
axios.get(url, {
|
||||
}).then((response) => {
|
||||
if (response.data.status === 1) {
|
||||
this.setState({
|
||||
user: undefined
|
||||
})
|
||||
window.location.href = "/login"
|
||||
message.success('退出成功');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
tojoinclass = () => {
|
||||
let { user } = this.state;
|
||||
if (user === undefined) {
|
||||
this.setState({
|
||||
isRender: true
|
||||
})
|
||||
return
|
||||
}
|
||||
if (user && user.login === "") {
|
||||
this.setState({
|
||||
isRender: true
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (user && user.profile_completed === false) {
|
||||
this.setState({
|
||||
AccountProfiletype: true
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
Addcoursestypes: true,
|
||||
})
|
||||
}
|
||||
|
||||
tojoinitem = () => {
|
||||
if (this.props.user && this.props.user.email === undefined || this.props.user && this.props.user.email === null || this.props.user && this.props.user.email === "") {
|
||||
this.openNotification("请先绑定邮箱，谢谢");
|
||||
return
|
||||
}
|
||||
let { user } = this.state;
|
||||
if (user === undefined) {
|
||||
this.setState({
|
||||
isRender: true
|
||||
})
|
||||
return
|
||||
}
|
||||
if (user && user.login === "") {
|
||||
this.setState({
|
||||
isRender: true
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if (user && user.profile_completed === false) {
|
||||
this.setState({
|
||||
AccountProfiletype: true
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
tojoinitemtype: true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
submitstatevalue = (sum, value, data) => {
|
||||
this.setState({
|
||||
Addcoursestypes: false,
|
||||
tojoinitemtype: false,
|
||||
tojoinclasstitle: undefined,
|
||||
rolearr: ["", ""],
|
||||
Checkboxteacherchecked: false,
|
||||
Checkboxstudentchecked: false,
|
||||
Checkboxteachingchecked: false,
|
||||
Checkboxteachertype: false,
|
||||
Checkboxteachingtype: false,
|
||||
code_notice: false,
|
||||
checked_notice: false,
|
||||
submitapplicationssum: sum,
|
||||
submitapplications: true,
|
||||
submitapplicationsvalue: value,
|
||||
submitapplicationsvaluedata: data,
|
||||
RadioGroupvalue: undefined
|
||||
})
|
||||
}
|
||||
|
||||
onChangeRadioGroup = (e) => {
|
||||
this.setState({
|
||||
RadioGroupvalue: e.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
submitsubmitapplications = () => {
|
||||
let {
|
||||
submitapplicationssum,
|
||||
submitapplicationsvaluedata
|
||||
} = this.state;
|
||||
this.setState({
|
||||
submitapplications: false,
|
||||
RadioGroupvalue: undefined
|
||||
})
|
||||
if (submitapplicationssum === 0) {
|
||||
if (submitapplicationsvaluedata !== undefined) {
|
||||
window.location.href = "/courses/" + submitapplicationsvaluedata;
|
||||
}
|
||||
} else if (submitapplicationssum === 1) {
|
||||
if (submitapplicationsvaluedata !== undefined) {
|
||||
window.location.href = "/projects/" + submitapplicationsvaluedata;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hidesubmitapplications = () => {
|
||||
this.setState({
|
||||
Addcoursestypes: false,
|
||||
tojoinitemtype: false,
|
||||
tojoinclasstitle: undefined,
|
||||
rolearr: ["", ""],
|
||||
Checkboxteacherchecked: false,
|
||||
Checkboxstudentchecked: false,
|
||||
Checkboxteachingchecked: false,
|
||||
Checkboxteachertype: false,
|
||||
Checkboxteachingtype: false,
|
||||
code_notice: false,
|
||||
checked_notice: false,
|
||||
submitapplications: false,
|
||||
RadioGroupvalue: undefined
|
||||
})
|
||||
}
|
||||
educoderlogin = () => {
|
||||
//登录账号
|
||||
this.setState({
|
||||
isRender: true
|
||||
})
|
||||
}
|
||||
educoderloginysl = () => {
|
||||
//退出账号
|
||||
var url = `/accounts/logout.json`;
|
||||
axios.get((url)).then((result) => {
|
||||
if (result !== undefined) {
|
||||
window.location.href = "/";
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
hideAddcoursestypes = () => {
|
||||
this.setState({
|
||||
Addcoursestypes: false
|
||||
})
|
||||
};
|
||||
HideAddcoursestypess = (i) => {
|
||||
console.log("调用了");
|
||||
this.setState({
|
||||
Addcoursestypes: false,
|
||||
mydisplay: true,
|
||||
occupation: i,
|
||||
})
|
||||
};
|
||||
ModalCancelsy = () => {
|
||||
this.setState({
|
||||
mydisplay: false,
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
hidetojoinclass = () => {
|
||||
this.setState({
|
||||
tojoinclasstype: false,
|
||||
tojoinitemtype: false,
|
||||
tojoinclasstitle: undefined,
|
||||
rolearr: ["", ""],
|
||||
Checkboxteacherchecked: false,
|
||||
Checkboxstudentchecked: false,
|
||||
Checkboxteachingchecked: false,
|
||||
Checkboxteachertype: false,
|
||||
Checkboxteachingtype: false,
|
||||
code_notice: false,
|
||||
checked_notice: false,
|
||||
RadioGroupvalue: undefined
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭
|
||||
cancelModulationModels = () => {
|
||||
this.setState({ isRenders: false })
|
||||
}
|
||||
|
||||
|
||||
setevaluatinghides = () => {
|
||||
this.setState({
|
||||
setevaluatinghides: true
|
||||
})
|
||||
}
|
||||
//修改登录方法
|
||||
Modifyloginvalue = () => {
|
||||
this.setState({
|
||||
isRender: false,
|
||||
})
|
||||
}
|
||||
|
||||
hideAccountProfile = () => {
|
||||
this.setState({
|
||||
AccountProfiletype: false
|
||||
})
|
||||
};
|
||||
headtypesonClick = (url, bool) => {
|
||||
this.setState({
|
||||
headtypess: url,
|
||||
headtypesonClickbool: bool,
|
||||
})
|
||||
}
|
||||
//获取数据为空的时候
|
||||
gettablogourlnull = () => {
|
||||
this.setState({
|
||||
settings: undefined
|
||||
});
|
||||
var link = document.createElement('link'),
|
||||
oldLink = document.getElementById('dynamic-favicon');
|
||||
link.id = 'dynamic-favicon';
|
||||
link.rel = 'shortcut icon';
|
||||
link.href = "/react/build/./favicon.ico";
|
||||
if (oldLink) {
|
||||
document.head.removeChild(oldLink);
|
||||
}
|
||||
document.head.appendChild(link);
|
||||
};
|
||||
|
||||
//获取数据的时候
|
||||
gettablogourldata = (response) => {
|
||||
document.title = response.data.setting.name;
|
||||
var link = document.createElement('link'),
|
||||
oldLink = document.getElementById('dynamic-favicon');
|
||||
link.id = 'dynamic-favicon';
|
||||
link.rel = 'shortcut icon';
|
||||
link.href = '/' + response.data.setting.tab_logo_url;
|
||||
if (oldLink) {
|
||||
document.head.removeChild(oldLink);
|
||||
}
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
handleVisibleChanges = (boll) => {
|
||||
this.setState({
|
||||
visiblemyss: boll,
|
||||
})
|
||||
}
|
||||
|
||||
getAppdata = () => {
|
||||
try {
|
||||
var chromesettingArray = JSON.parse(localStorage.getItem('chromesetting'));
|
||||
var chromesettingresponseArray = JSON.parse(localStorage.getItem('chromesettingresponse'));
|
||||
this.setState({
|
||||
settings: chromesettingArray
|
||||
});
|
||||
if (chromesettingArray.tab_logo_url) {
|
||||
this.gettablogourldata(chromesettingresponseArray);
|
||||
} else {
|
||||
this.gettablogourlnull();
|
||||
}
|
||||
} catch (e) {
|
||||
this.geturlsdata();
|
||||
}
|
||||
};
|
||||
|
||||
geturlsdata = () => {
|
||||
let url = "/setting.json";
|
||||
axios.get(url).then((response) => {
|
||||
if (response && response.data) {
|
||||
this.setState({ settings: response.data.setting });
|
||||
// localStorage.setItem('chromesetting', JSON.stringify(response.data.setting));
|
||||
// localStorage.setItem('chromesettingresponse', JSON.stringify(response));
|
||||
try {
|
||||
if (response.data.setting.tab_logo_url) {
|
||||
this.gettablogourldata(response);
|
||||
} else {
|
||||
this.gettablogourlnull();
|
||||
}
|
||||
} catch (e) {
|
||||
this.gettablogourlnull();
|
||||
}
|
||||
} else {
|
||||
this.gettablogourlnull();
|
||||
}
|
||||
}).catch((error) => {
|
||||
this.gettablogourlnull();
|
||||
});
|
||||
}
|
||||
|
||||
matchpaths = (url) => {
|
||||
const { match } = this.props;
|
||||
if(url){
|
||||
if (match.path.indexOf(url) > -1) {
|
||||
return true
|
||||
}else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 处理弹框
|
||||
setgoshowqqgtounp = (bool) => {
|
||||
this.setState({
|
||||
goshowqqgtounp: bool
|
||||
})
|
||||
}
|
||||
|
||||
addMenu=(list)=>{
|
||||
return(
|
||||
list && list.length >0 &&
|
||||
<div className="dropdownFlex">
|
||||
<Menu>
|
||||
{
|
||||
list.map((item,key)=>{
|
||||
return(
|
||||
(item.name !=="加入课堂" && item.name !=="加入开发项目") && <Menu.Item><a href={item.url}>{item.name}</a></Menu.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { match} = this.props;
|
||||
let current_user = this.props.user;
|
||||
let { Addcoursestypes,
|
||||
tojoinitemtype,
|
||||
tojoinclasstitle,
|
||||
code_notice,
|
||||
checked_notice,
|
||||
AccountProfiletype,
|
||||
submitapplications,
|
||||
submitapplicationsvalue,
|
||||
user,
|
||||
isRender,
|
||||
showSearchOpentype,
|
||||
headtypesonClickbool,
|
||||
headtypess,
|
||||
settings,
|
||||
goshowqqgtounp,
|
||||
openSearch,
|
||||
} = this.state;
|
||||
/*用户名称 用户头像url*/
|
||||
let activeIndex = false;
|
||||
let activeForums = false;
|
||||
let activeShixuns = false;
|
||||
let activePaths = false;
|
||||
let coursestype = false;
|
||||
let activePackages = false;
|
||||
let activeMoopCases = false;
|
||||
let activeCompetitions = false;
|
||||
|
||||
if (match.path === '/forums') {
|
||||
activeForums = true;
|
||||
} else if (match.path.startsWith('/shixuns')) {
|
||||
activeShixuns = true;
|
||||
} else if (match.path.startsWith('/paths')) {
|
||||
activePaths = true;
|
||||
} else if (match.path.startsWith('/courses')) {
|
||||
coursestype = true;
|
||||
} else if (match.path.startsWith('/crowdsourcing')) {
|
||||
activePackages = true;
|
||||
} else if (match.path.startsWith('/moop_cases')) {
|
||||
activeMoopCases = true;
|
||||
} else if (match.path.startsWith('/competitions')) {
|
||||
activeCompetitions = true;
|
||||
} else {
|
||||
activeIndex = true;
|
||||
}
|
||||
|
||||
let headtypes = '/';
|
||||
if (settings) {
|
||||
if (settings.navbar) {
|
||||
if (settings.navbar.length > 0) {
|
||||
if (match.path === '/') {
|
||||
if (headtypesonClickbool === false) {
|
||||
headtypes = undefined;
|
||||
} else {
|
||||
headtypes = headtypess;
|
||||
}
|
||||
} else {
|
||||
for (var i = 0; i < settings.navbar.length; i++) {
|
||||
if (match.path === settings.navbar[i].link) {
|
||||
headtypes = settings.navbar[i].link;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let shixuntype = false;
|
||||
let pathstype = false;
|
||||
let coursestypes = false;
|
||||
if (this.props && this.props.mygetHelmetapi != null) {
|
||||
let shixun = "/shixuns";
|
||||
let paths = "/paths";
|
||||
let courses = "/courses";
|
||||
this.props.mygetHelmetapi.navbar.map((item, key) => {
|
||||
var reg = RegExp(item.link);
|
||||
if (shixun.match(reg)) {
|
||||
if (item.hidden === true) {
|
||||
shixuntype = true
|
||||
}
|
||||
}
|
||||
if (paths.match(reg)) {
|
||||
if (item.hidden === true) {
|
||||
pathstype = true
|
||||
}
|
||||
}
|
||||
if (courses.match(reg)) {
|
||||
if (item.hidden === true) {
|
||||
coursestypes = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let search_url = settings && settings.common && settings.common.length> 0 && settings.common.filter(item=>item.name==="搜索");
|
||||
let notice_url = settings && settings.common && settings.common.length> 0 && settings.common.filter(item=>item.name==="通知");
|
||||
return (
|
||||
<div className="newHeaders" id="nHeader">
|
||||
<div className="headerContent">
|
||||
{isRender === true ?
|
||||
<LoginDialog
|
||||
{...this.props}
|
||||
{...this.state}
|
||||
Modifyloginvalue={() => this.Modifyloginvalue()}
|
||||
/> : ""}
|
||||
|
||||
{AccountProfiletype === true ?
|
||||
<AccountProfile
|
||||
hideAccountProfile={() => this.hideAccountProfile()}
|
||||
{...this.props}
|
||||
{...this.state}
|
||||
/> : ""}
|
||||
{
|
||||
goshowqqgtounp === true ?
|
||||
<GotoQQgroup {...this.state} {...this.props} setgoshowqqgtounp={(bool) => this.setgoshowqqgtounp(bool)}></GotoQQgroup>
|
||||
:""
|
||||
}
|
||||
<a href={settings && settings.new_course.default_url} className={"fl mr30"} style={{minWidth:"45px"}}>
|
||||
{
|
||||
settings && settings.nav_logo_url ?
|
||||
<img alt="可控开源社区" className="logoimg" style={{ heigth: "40px" }} src={getImageUrl(settings.nav_logo_url)}></img>
|
||||
:
|
||||
<img alt="可控开源社区" className="logoimg" style={{ heigth: "40px" }} src={logo}></img>
|
||||
}
|
||||
</a>
|
||||
<div className="head-nav pr" id={"head-navpre1"}>
|
||||
{
|
||||
settings && settings.navbar && settings.navbar.length > 0 ?
|
||||
<ul id="header-nav">
|
||||
{
|
||||
settings.navbar && settings.navbar.map((item, key) => {
|
||||
var new_link = item.link;
|
||||
var user_login = this.props.user && this.props.user.login;
|
||||
var is_hidden = item.hidden
|
||||
if (new_link && (new_link.indexOf("courses") > -1 || new_link.indexOf("contests") > -1)) {
|
||||
if (user_login) {
|
||||
if (new_link.indexOf("courses") > -1) {
|
||||
new_link = new_link.replace(/courses/g, "users/" + user_login + "/courses")
|
||||
} else if (new_link.indexOf("contests") > -1) {
|
||||
new_link = new_link.replace(/contests/g, "users/" + user_login + "/contests")
|
||||
}
|
||||
} else {
|
||||
is_hidden = true
|
||||
}
|
||||
}
|
||||
if (user_login && (new_link && new_link.indexOf("homes") > -1)) {
|
||||
new_link = new_link.replace(/homes/g, "users/" + user_login + "/user_activities")
|
||||
}
|
||||
|
||||
var waiLian = (new_link && str.filter(item=>new_link.indexOf(item)>-1) );
|
||||
var wl = waiLian && waiLian.length>0;
|
||||
return (
|
||||
<li key={key} onClick={() => this.headtypesonClick(item.link, true)} className={`${this.matchpaths(item.link) === true ? 'pr active' : 'pr'}`} style={!is_hidden ? { display: 'flex' } : { display: 'none' }}>
|
||||
<a href={new_link} target={wl ? "_self":"_blank"}>{item.name}</a>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
<div className="head-right">
|
||||
{search_url && search_url.length>0 ? this.SearchInput(openSearch,search_url[0]):""}
|
||||
{
|
||||
current_user && (current_user.main_site || current_user.login) && (settings && settings.add && settings.add.length>0)?
|
||||
<Dropdown overlay={this.addMenu(settings && settings.add)} placement="bottomRight">
|
||||
<i className="iconfont icon-tianjiafangda color-grey-6 ml30"></i>
|
||||
</Dropdown>:""
|
||||
}
|
||||
|
||||
{this.props.user && this.props.user.login && (notice_url && notice_url.length>0) ?
|
||||
<div className="ml30 edu-menu-panel">
|
||||
{user && user.login &&
|
||||
<a href={`${notice_url[0].url}`} style={{ position: 'relative' }}>
|
||||
<i className="iconfont icon-xiaoxilingdang color-grey-6"></i>
|
||||
<span className="newslight" style={{ display: this.props.Headertop === undefined ? "none" : this.props.Headertop.new_message === true ? "block" : "none" }}>
|
||||
</span>
|
||||
</a>
|
||||
}
|
||||
</div>:""
|
||||
}
|
||||
<Modal
|
||||
keyboard={false}
|
||||
title="提示"
|
||||
visible={submitapplications}
|
||||
closable={false}
|
||||
footer={null}
|
||||
>
|
||||
<div className="task_popup_con ml30">
|
||||
<div className="mr15">
|
||||
<ul>
|
||||
<div className="task-popup-content">
|
||||
<p className="task-popup-text-center font-16">
|
||||
{submitapplicationsvalue}
|
||||
</p>
|
||||
</div>
|
||||
<li className="clearfix mt10 edu-txt-center">
|
||||
<a className="task-btn mr10"
|
||||
onClick={this.hidesubmitapplications}>取消</a>
|
||||
<a
|
||||
className="task-btn task-btn-orange ml20"
|
||||
onClick={this.submitsubmitapplications}>确定</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
{!user || (user && !user.login) ?
|
||||
<span className="font-15 ml30">
|
||||
<a onClick={() => this.educoderlogin()} className="mr5 color-grey-6">登录</a>
|
||||
{
|
||||
settings && settings.new_course && settings.new_course.register_url &&
|
||||
<span><em className="vertical-line"></em><a className="ml5 color-grey-6" href={`${settings.new_course.register_url}`} target="_blank">注册</a></span>
|
||||
}
|
||||
</span>
|
||||
:
|
||||
<div className="ml30 edu-menu-panel" style={{ height: "70px", lineHeight: "70px" }}>
|
||||
<a href={`/users/${this.props.current_user === undefined ? "" : this.props.current_user.login}/courses`}>
|
||||
<img alt="头像" className="radius" height="34" id="nh_user_logo" name="avatar_image"
|
||||
src={getImageUrl(`images/` + user.image_url)} width="34">
|
||||
</img>
|
||||
</a>
|
||||
<ul className="edu-menu-list" style={{ top: '60px', textAlign: 'center' }}>
|
||||
<li className="bor-bottom-greyE" style={{cursor:"default",background:"#fff"}}>{this.props.current_user.username}</li>
|
||||
{
|
||||
settings && settings.personal && settings.personal.length > 0 && settings.personal.map((item,key)=>{
|
||||
return(
|
||||
<li key={key}><a href={item.url} target="_blank">{item.name}</a></li>
|
||||
)
|
||||
})
|
||||
}
|
||||
<li className="bor-top-greyE">
|
||||
<a onClick={() => this.educoderloginysl()}>退出</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NewHeader;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
.dropdownFlex{
|
||||
display:flex;
|
||||
padding:5px;
|
||||
background:#fff;
|
||||
border-radius: 3px;
|
||||
.ant-menu-vertical > .ant-menu-item{
|
||||
border:none
|
||||
}
|
||||
}
|
||||
|
|
@ -31,20 +31,30 @@ const Infos = Loadable({
|
|||
loader: () => import("./users/Infos"),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
class Index extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="newMain clearfix">
|
||||
<Handbook />
|
||||
<Switch {...this.props}>
|
||||
<Route
|
||||
path="/projects/:projectsType/new/:OIdentifier"
|
||||
render={(props) => (
|
||||
<ProjectNew {...this.props} {...props} />
|
||||
)}
|
||||
></Route>
|
||||
<Route
|
||||
path="/projects/:projectsType/new"
|
||||
render={(props) => (
|
||||
<ProjectNew {...this.props} {...props} />
|
||||
)}
|
||||
></Route>
|
||||
<Route
|
||||
path="/projects/new"
|
||||
render={(props) => (
|
||||
<ProjectNew {...this.props} {...props} />
|
||||
)}
|
||||
></Route>
|
||||
<Route
|
||||
path="/projects/:owner/:projectsId"
|
||||
render={(props) => (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,418 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import { WhiteBack , Box , LongWidth , ShortWidth , Gap , AlignCenter , FlexAJ } from '../Component/layout';
|
||||
import { Dropdown , Menu , Divider , Spin } from 'antd';
|
||||
import { getImageUrl } from "educoder";
|
||||
import { Link } from 'react-router-dom';
|
||||
import CloneAddress from '../Branch/CloneAddress';
|
||||
|
||||
import SelectBranch from '../Branch/Select';
|
||||
import User from '../Component/User';
|
||||
import axios from 'axios';
|
||||
import Path from './CoderDepotPath';
|
||||
import Catalogue from './CoderDepotCatalogue';
|
||||
import ReadMe from './CoderDepotReadme';
|
||||
import CoderRootFileDetail from './CoderRootFileDetail';
|
||||
import './Index.scss';
|
||||
import Releases from '../Component/Releases';
|
||||
import Contributors from '../Component/Contributors';
|
||||
import LanguagePower from '../Component/LanguagePower';
|
||||
import DrawerPanel from '../Component/DrawerPanel';
|
||||
import UpdateDescModal from './sub/UpdateDescModal';
|
||||
import Nodata from '../Nodata';
|
||||
|
||||
|
||||
function CoderDepot(props){
|
||||
const [ projectDetail , setProjectDetail ]= useState(undefined);
|
||||
const [ treeValue , setTreeValue ] = useState(undefined);
|
||||
const [ treeValuePath , setTreeValuePath ] = useState(undefined);
|
||||
const [ lastCommit,setLastCommit ] = useState(undefined);
|
||||
const [ lastCommitAuthor,setLastCommitAuthor ] = useState(undefined);
|
||||
const [ type ,setType ] = useState('dir');
|
||||
const [ hide , setHide ] = useState(true);
|
||||
const [ hideBtn , setHideBtn ] = useState(false);
|
||||
const [ commitCount ,setCommitCount ] = useState(0);
|
||||
const [ dirInfo ,setDirInfo ] = useState(undefined);//文件夹目录列表
|
||||
const [ fileInfo ,setFileInfo ] = useState(undefined);//文件内容信息
|
||||
const [ zip_url , setZip_url ] = useState(undefined);
|
||||
const [ tar_url , setTar_url ] = useState(undefined);
|
||||
const [ readOnly , setReadOnly] = useState(true);
|
||||
const [ isSpin , setIsSpin] = useState(true);
|
||||
const [ visible ,setVisible ] = useState(false);
|
||||
const [ mainFlag ,setMainFlag ] = useState(false);
|
||||
const [ openModal , setOpenModal ] = useState(false);
|
||||
const [ desc , setDesc ] = useState(undefined);
|
||||
const [ website , setWebsite ] = useState(undefined);
|
||||
|
||||
const owner = props.match.params.owner;
|
||||
const projectsId = props.match.params.projectsId;
|
||||
const branchName = props.match.params.branchName;
|
||||
let pathname = props.history.location.pathname;
|
||||
|
||||
useEffect(()=>{
|
||||
if(props.projectDetail){
|
||||
setProjectDetail(props.projectDetail);
|
||||
setDesc(props.projectDetail.description);
|
||||
setWebsite(props.projectDetail.website);
|
||||
}
|
||||
},[props])
|
||||
|
||||
useEffect(()=>{
|
||||
if(treeValue){
|
||||
setTreeValuePath(treeValue.split('/'));
|
||||
}else{
|
||||
setTreeValuePath(undefined);
|
||||
}
|
||||
},[treeValue])
|
||||
|
||||
useEffect(()=>{
|
||||
if (pathname){
|
||||
if(pathname.indexOf(`/projects/${owner}/${projectsId}`) > -1 && pathname.indexOf(`/tree/${branchName}/`) > -1) {
|
||||
let url = pathname.split(`/tree/${branchName}/`)[1];
|
||||
setTreeValue(url);
|
||||
getFileInfo(url,branchName);
|
||||
}else{
|
||||
setTreeValue(undefined);
|
||||
getDirInfo(branchName ||(projectDetail && projectDetail.default_branch));
|
||||
}
|
||||
}
|
||||
},[pathname])
|
||||
|
||||
// 获取主目录列表
|
||||
function getDirInfo(branch){
|
||||
setIsSpin(true);
|
||||
const url = `/${owner}/${projectsId}/entries.json`;
|
||||
axios.get(url, {
|
||||
params: { ref: branch }
|
||||
}).then((result) => {
|
||||
if (result) {
|
||||
setCommitCount(result.data.commits_count);
|
||||
setDirInfo(result.data.entries);
|
||||
setFileInfo(undefined);
|
||||
setTar_url(result.data.tar_url);
|
||||
setZip_url(result.data.zip_url);
|
||||
let c = result.data.last_commit
|
||||
setLastCommit(c && c.commit);
|
||||
setLastCommitAuthor(c && (c.author || (c.commit && c.commit.author)));
|
||||
setMainFlag(true);
|
||||
}
|
||||
setTimeout(function(){setIsSpin(false);},500);
|
||||
}).catch(error=>{setIsSpin(false);})
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
if(projectDetail && lastCommit)
|
||||
{
|
||||
let ele = document.getElementById("ptxt");
|
||||
if(ele){
|
||||
let h = ele.offsetHeight;
|
||||
if( h > 18 ) setHideBtn(true)
|
||||
}
|
||||
}
|
||||
},[projectDetail,lastCommit])
|
||||
// 获取子目录列表
|
||||
function getFileInfo(path, ref){
|
||||
setIsSpin(true);
|
||||
const url = `/${owner}/${projectsId}/sub_entries.json`;
|
||||
axios.get(url, {
|
||||
params:{
|
||||
filepath:path,
|
||||
ref:ref || branchName,
|
||||
type
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result) {
|
||||
let en = result.data.entries;
|
||||
if(en.type){
|
||||
setDirInfo(undefined);
|
||||
setFileInfo(en);
|
||||
setType(en.type);
|
||||
}else{
|
||||
setFileInfo(undefined);
|
||||
setDirInfo(en);
|
||||
setType("dir");
|
||||
}
|
||||
let c = result.data.last_commit
|
||||
setLastCommit(c && c.commit);
|
||||
setLastCommitAuthor(c && (c.author || (c.commit && c.commit.author)));
|
||||
setMainFlag(false);
|
||||
}
|
||||
setTimeout(function(){setIsSpin(false);},500)
|
||||
}).catch(error=>{setIsSpin(false);})
|
||||
}
|
||||
|
||||
// 切换分支或者标签
|
||||
function changeBranch(value){
|
||||
let url = `/projects/${owner}/${projectsId}${value && `/tree/${value}`}${treeValue ? `/${treeValue}`:""}`;
|
||||
props.history.push(url);
|
||||
}
|
||||
|
||||
// 文件相关的下拉项
|
||||
const fileMenu =(
|
||||
<Menu>
|
||||
<Menu.Item><a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/${branchName || (projectDetail && projectDetail.default_branch)}/uploadfile${treeValue === undefined ? "" : `/${treeValue}`}`)}>上传文件</a></Menu.Item>
|
||||
<Menu.Item><a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/${branchName || (projectDetail && projectDetail.default_branch)}/newfile${treeValue === undefined ? "" : `/${treeValue}`}`)}>新建文件</a></Menu.Item>
|
||||
</Menu>
|
||||
)
|
||||
|
||||
function getPathUrl(array,index){
|
||||
if(array && array.length>0 && index){
|
||||
let str = "";
|
||||
for(let i=0;i<index;i++){
|
||||
str += `/${array[i]}`;
|
||||
}
|
||||
return str.substr(1);
|
||||
}
|
||||
}
|
||||
// 页面地址返回到主目录
|
||||
function returnMain(){
|
||||
setTreeValue(undefined);
|
||||
let branch = branchName || (projectDetail && projectDetail.default_branch);
|
||||
props.history.push(`/projects/${owner}/${projectsId}/tree/${branch}`);
|
||||
};
|
||||
// 子目录路径返回链接
|
||||
function returnUlr(url){
|
||||
props.history.push(`/projects/${owner}/${projectsId}/tree${branchName?`/${branchName}`:""}/${url}`);
|
||||
}
|
||||
// 点击跳转到子目录
|
||||
function goToSubRoot(path,type,filename){
|
||||
setType(type);
|
||||
props.history.push(`/projects/${owner}/${projectsId}${`/tree/${branchName || (projectDetail && projectDetail.default_branch)}`}${path?`/${path}`:""}`);
|
||||
}
|
||||
|
||||
function onEdit(readOnly){
|
||||
setReadOnly(readOnly);
|
||||
}
|
||||
function ChangeFile(path, readOnly){
|
||||
//点击直接跳转页面 加载一次路由
|
||||
props.history.push(`/projects/${owner}/${projectsId}/tree/${branchName || (projectDetail && projectDetail.default_branch)}/${path}`);
|
||||
setType("file");
|
||||
setReadOnly(readOnly);
|
||||
};
|
||||
|
||||
function changeHide(hide){
|
||||
setHide(!hide);
|
||||
}
|
||||
|
||||
function urlLink(link){
|
||||
if(props.checkIfLogin()===false){
|
||||
props.showLoginDialog()
|
||||
return false;
|
||||
}
|
||||
props.history.push(link);
|
||||
}
|
||||
|
||||
const downloadMenu = (
|
||||
<div className="downMenu">
|
||||
<div style={{padding:"20px",borderBottom:"1px solid #eee"}}>
|
||||
<CloneAddress
|
||||
http_url={projectDetail && projectDetail.clone_url}
|
||||
showNotification={props.showNotification}/>
|
||||
</div>
|
||||
<Menu className="edu-txt-center">
|
||||
<Menu.Item><a href={zip_url}>下载 ZIP</a></Menu.Item>
|
||||
<Menu.Item><a href={tar_url}>下载 TAR.GZ</a></Menu.Item>
|
||||
</Menu>
|
||||
</div>
|
||||
)
|
||||
function okUpdate(d,w){
|
||||
const url = `/${owner}/${projectsId}.json`;
|
||||
axios.put(url,{
|
||||
description:d,website:w
|
||||
}).then(result=>{
|
||||
if(result && result.data && result.data.id){
|
||||
setDesc(result.data.description);
|
||||
setWebsite(result.data.website);
|
||||
}
|
||||
})
|
||||
}
|
||||
return(
|
||||
<WhiteBack>
|
||||
<UpdateDescModal desc={desc} website={website} visible={openModal} onCancel={()=>setOpenModal(false)} onOk={okUpdate}/>
|
||||
<Spin spinning={isSpin}>
|
||||
{
|
||||
(dirInfo || fileInfo) &&
|
||||
<React.Fragment>
|
||||
<DrawerPanel
|
||||
history={props.history}
|
||||
owner={owner}
|
||||
projectsId={projectsId}
|
||||
name={projectDetail && projectDetail.name}
|
||||
branch={branchName || (projectDetail && projectDetail.default_branch)}
|
||||
visible={visible}
|
||||
onClose={()=>setVisible(false)}
|
||||
list = {mainFlag ? dirInfo : undefined}
|
||||
/>
|
||||
<div className="drawerBtn" onClick={()=>setVisible(true)}><i className="iconfont icon-youjiantou"></i></div>
|
||||
</React.Fragment>
|
||||
}
|
||||
<div style={{minHeight:"500px"}}>
|
||||
{
|
||||
projectDetail &&
|
||||
<Box className="Panels">
|
||||
<LongWidth>
|
||||
<div className="panelmenu">
|
||||
<FlexAJ>
|
||||
<AlignCenter>
|
||||
<div className="mr20">
|
||||
{
|
||||
props && props.platform ?
|
||||
<SelectBranch
|
||||
repo_id={projectDetail && projectDetail.repo_id}
|
||||
projectsId={projectsId}
|
||||
branch={branchName || (projectDetail && projectDetail.default_branch)}
|
||||
changeBranch={changeBranch}
|
||||
owner={owner}
|
||||
history={props.history}
|
||||
branchList={projectDetail && projectDetail.branches && projectDetail.branches.list}
|
||||
></SelectBranch>
|
||||
:
|
||||
<span>分支：<span className="color-grey-6">{branchName || (projectDetail && projectDetail.default_branch)}</span></span>
|
||||
}
|
||||
</div>
|
||||
<AlignCenter className="mr20">
|
||||
<Link to={`/projects/${owner}/${projectsId}/branchs`} className="color-grey-9">
|
||||
<i className="iconfont icon-fenzhi2 font-18 color-grey-9 mr3"></i>
|
||||
<span className="color-grey-6 mr3">{projectDetail && projectDetail.branches && projectDetail.branches.total_count}个</span>分支
|
||||
</Link>
|
||||
</AlignCenter>
|
||||
<AlignCenter className="mr20">
|
||||
<Link to={`/projects/${owner}/${projectsId}/tag`} className="color-grey-9">
|
||||
<i className="iconfont icon-biaoqian3 font-16 color-grey-9 mr3"></i>
|
||||
<span className="color-grey-6 mr3">{projectDetail && projectDetail.tags && projectDetail.tags.total_count}个</span>标签
|
||||
</Link>
|
||||
</AlignCenter>
|
||||
</AlignCenter>
|
||||
<AlignCenter>
|
||||
<div className="mr20 addOptionBtn">
|
||||
<a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/pulls/new`)} >+ 合并请求</a>
|
||||
<a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/issues/new`)} >+ 任务</a>
|
||||
</div>
|
||||
{ type === "dir" && <Dropdown.Button overlay={fileMenu} className="mr20">文件</Dropdown.Button>}
|
||||
<Dropdown.Button overlay={downloadMenu} type={'primary'}>下载</Dropdown.Button>
|
||||
</AlignCenter>
|
||||
</FlexAJ>
|
||||
{
|
||||
dirInfo || fileInfo ?
|
||||
<div className="listtable">
|
||||
{
|
||||
lastCommit &&
|
||||
<div className="listtablehead">
|
||||
<User url={getImageUrl(`images/${lastCommitAuthor && lastCommitAuthor.image_url}`)} name={lastCommitAuthor && lastCommitAuthor.name} />
|
||||
<div className={hideBtn && hide ? "ellipsistxt hide" :"ellipsistxt"}><p id="ptxt">{lastCommit && lastCommit.message}</p></div>
|
||||
{ hideBtn && <span className="ellipsis" onClick={()=>changeHide(hide)}><i className="iconfont icon-shenglvehao"></i></span> }
|
||||
|
||||
<span className="ml12 color-grey-9 mt3">{lastCommit && lastCommit.time_from_now}</span>
|
||||
{ commitCount ? <Link to={`/projects/${owner}/${projectsId}/commits`} className="ml12 color-grey-9"><i className="iconfont icon-tijiao mr3 font-17 color-grey-9"></i>{commitCount}次提交</Link>:"" }
|
||||
</div>
|
||||
}
|
||||
<ul className="listtablebody">
|
||||
{
|
||||
treeValuePath && treeValuePath.length > 0 &&
|
||||
<Path
|
||||
identifier={projectDetail && projectDetail.identifier}
|
||||
treeValuePath={treeValuePath}
|
||||
returnUlr={returnUlr}
|
||||
returnMain={returnMain}
|
||||
getPathUrl={getPathUrl}
|
||||
/>
|
||||
}
|
||||
{
|
||||
dirInfo && dirInfo.length > 0 &&
|
||||
dirInfo.map((item,key)=>{
|
||||
return(
|
||||
<Catalogue
|
||||
owner={owner}
|
||||
item={item}
|
||||
projectsId={projectsId}
|
||||
goToSubRoot={goToSubRoot}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
{
|
||||
fileInfo &&
|
||||
<CoderRootFileDetail
|
||||
{...props}
|
||||
detail={fileInfo}
|
||||
readOnly={readOnly}
|
||||
onEdit={onEdit}
|
||||
currentBranch={branchName || (projectDetail && projectDetail.default_branch)}
|
||||
></CoderRootFileDetail>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
: ""
|
||||
}
|
||||
{
|
||||
(dirInfo && dirInfo.length === 0) && (fileInfo && fileInfo.length === 0) ? <Nodata _html="暂未发现文件"/> :""
|
||||
}
|
||||
{/* readme文件显示(显示文件详情时不显示readme文件) */}
|
||||
{ dirInfo && (projectDetail && projectDetail.readme) ? <ReadMe ChangeFile={ChangeFile} readme={projectDetail && projectDetail.readme} operate={props && (props.isManager || props.isDeveloper)} history={props.history} /> :"" }
|
||||
</div>
|
||||
</LongWidth>
|
||||
{
|
||||
!fileInfo &&
|
||||
<ShortWidth>
|
||||
<Gap style={{paddingLeft:"30px"}}>
|
||||
<div className="panelmenu">
|
||||
<FlexAJ className="font-18 color-grey-6 mb20" style={{lineHeight:"28px"}}>简介
|
||||
{projectDetail.permission && (projectDetail.permission==="Admin" || projectDetail.permission==="Owner") && <i onClick={()=>setOpenModal(true)} className="iconfont icon-anquanshezhi color-grey-9 font-15"></i>}
|
||||
</FlexAJ>
|
||||
{desc && <p className="font-14 color-grey-9 mb15 task-hide-2" style={{lineHeight:"22px",WebkitLineClamp:"4",textAlign:"justify"}}>{desc}</p>}
|
||||
{
|
||||
website &&
|
||||
<p className="color-grey-6 df">
|
||||
<i className="iconfont icon-lianjie2 font-15 mr10 color-grey-9"></i>
|
||||
<span style={{wordBreak:"break-all",lineHeight:"20px",marginTop:"5px"}}>{website}</span>
|
||||
</p>
|
||||
}
|
||||
<p>
|
||||
<i className="iconfont icon-wenjian4 font-15 mr10 color-grey-9"></i>
|
||||
<a href="#readme" className="color-grey-6">README.md</a>
|
||||
</p>
|
||||
<p className="color-grey-6">
|
||||
<i className="iconfont icon-dataBase font-15 mr10 color-grey-9"></i>
|
||||
<span>{projectDetail && projectDetail.size}</span>
|
||||
</p>
|
||||
{
|
||||
projectDetail && projectDetail.license_name &&
|
||||
<p className="color-grey-6">
|
||||
<i className="iconfont icon-tianping font-16 mr10 color-grey-9"></i>
|
||||
<span>{projectDetail.license_name}</span>
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
{/* 发布 */}
|
||||
{
|
||||
projectDetail && projectDetail.release_versions &&
|
||||
<React.Fragment>
|
||||
<Divider />
|
||||
<Releases owner={owner} projectsId={projectsId} releaseVersions={projectDetail.release_versions} history={props.history}/>
|
||||
</React.Fragment>
|
||||
}
|
||||
{/* 贡献者 */}
|
||||
{
|
||||
projectDetail && projectDetail.contributors &&
|
||||
<React.Fragment>
|
||||
<Divider />
|
||||
<Contributors contributors={projectDetail && projectDetail.contributors} owner={owner} projectsId={projectsId}/>
|
||||
</React.Fragment>
|
||||
}
|
||||
{/* 语言 */}
|
||||
{ projectDetail && projectDetail.languages &&
|
||||
<React.Fragment>
|
||||
<Divider />
|
||||
<LanguagePower languages={projectDetail.languages}/>
|
||||
</React.Fragment>
|
||||
}
|
||||
</Gap>
|
||||
</ShortWidth>
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
</div>
|
||||
</Spin>
|
||||
</WhiteBack>
|
||||
)
|
||||
}
|
||||
export default CoderDepot;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { truncateCommitId } from '../common/util';
|
||||
|
||||
function CoderDepotCatalogue({item , goToSubRoot , owner , projectsId }){
|
||||
return(
|
||||
<li>
|
||||
<span>
|
||||
<a onClick={()=>goToSubRoot(item.path,item.type,item.name)}>
|
||||
<i className={item.type === 'dir' ? "iconfont icon-wenjianjia1 color-green-file font-15 mr5":"iconfont icon-wenjia color-green-file font-15 mr5"}></i>{item.name}
|
||||
</a>
|
||||
</span>
|
||||
<span title="init project">
|
||||
<Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.commit && item.commit.sha}`)}`} title={item.commit && item.commit.message}>
|
||||
{item.commit && item.commit.message}
|
||||
</Link>
|
||||
</span>
|
||||
<span>{item.commit && item.commit.time_from_now}</span>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
export default CoderDepotCatalogue;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import React from 'react';
|
||||
|
||||
|
||||
function CoderDepotPath({treeValuePath , returnUlr , returnMain , getPathUrl , identifier}){
|
||||
return(
|
||||
<li className="listtablepath">
|
||||
<p>
|
||||
<a
|
||||
onClick={returnMain}
|
||||
className="color-blue"
|
||||
>
|
||||
{identifier}
|
||||
</a>
|
||||
{treeValuePath.map((item, key) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
{
|
||||
key === treeValuePath.length-1 ?
|
||||
<span className="color-grey-6 subFileName" key={key}>{item}</span>
|
||||
:
|
||||
<a onClick={()=>returnUlr(`${getPathUrl(treeValuePath,key+1)}`)} className="color-blue subFileName">{item}</a>
|
||||
}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</p>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
export default CoderDepotPath;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react';
|
||||
import RenderHtml from '../../components/render-html';
|
||||
|
||||
function CoderDepotReadme({ operate , history , readme , ChangeFile }){
|
||||
return(
|
||||
<div className="commonBox" id="readme">
|
||||
<div className="commonBox-title">
|
||||
<span className="mr10">
|
||||
<i className="iconfont icon-wenjian1 font-16 color-grey-9 fl mt3"></i>
|
||||
</span>
|
||||
<span className="commonBox-title-read">README.md</span>
|
||||
{
|
||||
operate ?
|
||||
<a className="ml20 pull-right" onClick={() =>ChangeFile(readme && readme.path, false)}>
|
||||
<i className="iconfont icon-bianji6 font-16 color-blue"></i>
|
||||
</a>
|
||||
:""
|
||||
}
|
||||
</div>
|
||||
<div className="commonBox-info">
|
||||
<RenderHtml className="break_word_comments imageLayerParent" value={readme && readme.content} url={history.location}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default CoderDepotReadme;
|
||||
|
|
@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
|
|||
import { Dropdown , Menu , Icon , Tooltip , Spin } from 'antd';
|
||||
import { truncateCommitId } from '../common/util';
|
||||
import { getBranch } from '../GetData/getData';
|
||||
|
||||
import Nodata from '../Nodata';
|
||||
import './list.css';
|
||||
|
||||
export default ((props)=>{
|
||||
|
|
@ -32,7 +32,7 @@ export default ((props)=>{
|
|||
return(
|
||||
<li key={key}>
|
||||
<div>
|
||||
<Link to={`/projects/${owner}/${projectsId}/branch/${item.name}`} className="color-blue font-15" style={{"maxWidth":"100px"}}>{item.name}</Link>
|
||||
<Link to={`/projects/${owner}/${projectsId}/tree/${item.name}`} className="color-blue font-15" style={{"maxWidth":"100px"}}>{item.name}</Link>
|
||||
<p className="f-wrap-alignCenter mt15">
|
||||
<Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.last_commit.sha}`)}`} className="mr5 commitKey" style={{marginLeft:0}}>{item.last_commit && truncateCommitId(item.last_commit.sha)}</Link>
|
||||
<span className="color-grey-3 hide-1 messages leftPoint">{item.last_commit && item.last_commit.message}</span>
|
||||
|
|
@ -54,6 +54,8 @@ export default ((props)=>{
|
|||
</ul>
|
||||
</React.Fragment>
|
||||
)
|
||||
}else if(data && data.length === 0){
|
||||
return ( <Nodata _html="暂无数据"/>)
|
||||
}
|
||||
}
|
||||
const menu =(zip_url,tar_url)=> (
|
||||
|
|
@ -68,7 +70,7 @@ export default ((props)=>{
|
|||
<Spin spinning={isSpin}>
|
||||
<div className="branchTable">
|
||||
<p className="branchTitle bor-bottom-greyE">分支列表</p>
|
||||
{list()}
|
||||
<div style={{minHeight:"400px"}}>{list()}</div>
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,12 +16,24 @@ class CoderRootCommit extends Component{
|
|||
dataCount:undefined,
|
||||
limit:20,
|
||||
page:1,
|
||||
isSpining:false
|
||||
isSpining:false,
|
||||
branchList:undefined
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount=()=>{
|
||||
this.Init();
|
||||
this.getBranchs();
|
||||
}
|
||||
|
||||
// 获取分支列表
|
||||
getBranchs=()=>{
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
axios.get(`/${owner}/${projectsId}/branches.json`).then(result=>{
|
||||
this.setState({
|
||||
branchList:result.data
|
||||
})
|
||||
}).catch((error)=>{})
|
||||
}
|
||||
|
||||
componentDidUpdate=(prevProps)=>{
|
||||
|
|
@ -79,14 +91,6 @@ class CoderRootCommit extends Component{
|
|||
|
||||
// 切换分支 search:tag为根据标签搜索
|
||||
changeBranch=(value)=>{
|
||||
// const { page , limit } = this.state;
|
||||
// const { getTopCount } = this.props;
|
||||
// this.setState({
|
||||
// isSpining:true,
|
||||
// branch:value,
|
||||
// })
|
||||
// this.getCommitList(value , page , limit);
|
||||
// getTopCount && getTopCount(value);
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
this.props.history.push(`/projects/${owner}/${projectsId}/commits/branch/${value}`);
|
||||
}
|
||||
|
|
@ -97,13 +101,13 @@ class CoderRootCommit extends Component{
|
|||
this.getCommitList(branchName , page , limit);
|
||||
}
|
||||
render(){
|
||||
const { commitDatas , dataCount , limit , page , isSpining } = this.state;
|
||||
const { projectDetail, commit_class } = this.props;
|
||||
const { commitDatas , dataCount , limit , page , isSpining , branchList } = this.state;
|
||||
const { projectDetail, commit_class , defaultBranch } = this.props;
|
||||
const { projectsId , owner , branchName } = this.props.match.params;
|
||||
let branch = branchName || "master";
|
||||
let branch = branchName || defaultBranch;
|
||||
return(
|
||||
<React.Fragment>
|
||||
<div className={commit_class}>
|
||||
<div className={"main"}>
|
||||
<div className="f-wrap-between">
|
||||
<SelectBranch
|
||||
repo_id={projectDetail && projectDetail.repo_id}
|
||||
|
|
@ -112,6 +116,7 @@ class CoderRootCommit extends Component{
|
|||
changeBranch={this.changeBranch}
|
||||
owner={owner}
|
||||
history={this.props.history}
|
||||
branchList={branchList}
|
||||
></SelectBranch>
|
||||
</div>
|
||||
<Spin spinning={isSpining}>
|
||||
|
|
@ -123,7 +128,7 @@ class CoderRootCommit extends Component{
|
|||
</div>
|
||||
<div className="commitList">
|
||||
{
|
||||
commitDatas && commitDatas.length > 0 ? commitDatas.map((item,k)=>{
|
||||
commitDatas && commitDatas.length > 0 && commitDatas.map((item,k)=>{
|
||||
return(
|
||||
<div key={k}>
|
||||
<p className="f-wrap-alignCenter">
|
||||
|
|
@ -133,13 +138,14 @@ class CoderRootCommit extends Component{
|
|||
<p className="f-wrap-alignCenter mt15">
|
||||
<Link to={`/users/${item.login}`} className="show-user-link">
|
||||
{item.image_url?<img src={getImageUrl(`images/${item.image_url}`)} alt="" width="28px" height="28px" className="mr15 radius"/>:""}
|
||||
<label className="font-14 color-grey-6" style={{'verticalAlign':'middle'}}>{item.name ?`${item.name}:`:""}提交于 {item.time_from_now}</label>
|
||||
<label className="font-14 color-grey-6" style={{verticalAlign:'middle'}}>{item.name ?`${item.name}:`:""}提交于 {item.time_from_now}</label>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}):<Nodata _html="暂无数据"/>
|
||||
})
|
||||
}
|
||||
{commitDatas && commitDatas.length === 0 && <Nodata _html="暂无数据"/>}
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,550 +0,0 @@
|
|||
import React, { Component } from "react";
|
||||
import { Menu, Spin } from "antd";
|
||||
import { getImageUrl } from "educoder";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import './list.css';
|
||||
import SelectBranch from '../Branch/Select';
|
||||
import CloneAddress from '../Branch/CloneAddress';
|
||||
import RootTable from './RootTable';
|
||||
import CoderRootFileDetail from './CoderRootFileDetail';
|
||||
import { truncateCommitId } from '../common/util';
|
||||
import RenderHtml from '../../components/render-html';
|
||||
import Nodata from '../Nodata';
|
||||
|
||||
import axios from "axios";
|
||||
/**
|
||||
* address:http和SSH，http_url(对应git地址)
|
||||
* branch:当前分支
|
||||
* filePath:点击目录时当前目录的路径
|
||||
* subfileType:保存当前点击目录的文件类型（显示目录列表时才显示新建文件，如果点击的是文件就不显示新建文件按钮）
|
||||
* readMeContent:根目录下面的readme文件内容
|
||||
*/
|
||||
function getPathUrl(array,index){
|
||||
if(array && array.length>0 && index){
|
||||
let str = "";
|
||||
for(let i=0;i<index;i++){
|
||||
str += `/${array[i]}`;
|
||||
}
|
||||
return str.substr(1);
|
||||
}
|
||||
}
|
||||
class CoderRootDirectory extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
address: "http",
|
||||
branch: props.match.params.branchName || "master",
|
||||
filePath: undefined,
|
||||
subFileType: undefined,
|
||||
readMeContent: undefined,
|
||||
readMeFile: undefined,
|
||||
|
||||
isSpin: true,
|
||||
|
||||
branchList: undefined,
|
||||
fileDetail: undefined,
|
||||
branchLastCommit: undefined,
|
||||
lastCommitAuthor: undefined,
|
||||
|
||||
rootList: undefined,
|
||||
readOnly: true,
|
||||
zip_url:undefined,
|
||||
tar_url:undefined,
|
||||
chooseType:undefined,
|
||||
|
||||
md:false
|
||||
}
|
||||
}
|
||||
changeAddress = (address) => {
|
||||
this.setState({
|
||||
address,
|
||||
});
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
this.Init();
|
||||
};
|
||||
|
||||
componentDidUpdate = (prevState) => {
|
||||
const { location } = this.props;
|
||||
const prevlocation = prevState && prevState.location;
|
||||
if (location !== prevlocation) {
|
||||
this.setState({
|
||||
isSpin: true,
|
||||
});
|
||||
this.Init();
|
||||
}
|
||||
};
|
||||
|
||||
Init = () => {
|
||||
let { search } = this.props.history.location;
|
||||
const { branchName } = this.props.match.params;
|
||||
let branch = branchName || "master";
|
||||
if (search && (search.indexOf("?url=") > -1 || search.indexOf("&url=") > -1)) {
|
||||
let url = search.split("url=")[1];
|
||||
if(url && decodeURI(url).indexOf("&")){
|
||||
url=decodeURI(url).split("&")[0];
|
||||
}
|
||||
this.getFileDetail(decodeURI(url),branch);
|
||||
} else {
|
||||
this.getProjectRoot(branch);
|
||||
}
|
||||
};
|
||||
|
||||
// 页面地址返回到主目录
|
||||
returnMain = (branch) => {
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
this.setState({
|
||||
readOnly:true
|
||||
})
|
||||
this.props.history.push(`/projects/${owner}/${projectsId}`);
|
||||
this.getProjectRoot(branch);
|
||||
};
|
||||
|
||||
// 获取根目录
|
||||
getProjectRoot = (branch) => {
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
const url = `/${owner}/${projectsId}/entries.json`;
|
||||
axios.get(url, { params: { ref: branch } })
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
let last_commit = result.data && result.data.last_commit;
|
||||
let entries = result.data && result.data.entries;
|
||||
this.setState({
|
||||
filePath: undefined,
|
||||
fileDetail: undefined,
|
||||
isSpin: false,
|
||||
branchLastCommit: last_commit && last_commit.commit,
|
||||
lastCommitAuthor:
|
||||
last_commit && (last_commit.author || (last_commit.commit && last_commit.commit.author)),
|
||||
zip_url: result.data.zip_url,
|
||||
tar_url: result.data.tar_url
|
||||
});
|
||||
if (entries && entries.length > 0) {
|
||||
this.renderData(entries);
|
||||
}
|
||||
this.setState({
|
||||
rootList: entries,
|
||||
subFileType: true,
|
||||
});
|
||||
}
|
||||
}).catch((error) => {});
|
||||
};
|
||||
|
||||
ChangeFile = (arr, readOnly) => {
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
//点击直接跳转页面 加载一次路由
|
||||
this.props.history.push(`/projects/${owner}/${projectsId}?url=${arr.path}`);
|
||||
this.setState({
|
||||
readOnly: readOnly,
|
||||
chooseType:"file"
|
||||
});
|
||||
};
|
||||
|
||||
renderUrl = (name, path, type) => {
|
||||
let list = [];
|
||||
const { filePath } = this.state;
|
||||
if (path.indexOf("/")) {
|
||||
const array = path.split("/");
|
||||
let str = "";
|
||||
array.map((i, k) => {
|
||||
str += "/" + i;
|
||||
return list.push({
|
||||
key: k,
|
||||
index: k,
|
||||
name: i,
|
||||
path: str.substr(1),
|
||||
type: filePath && filePath.length > 0 ? filePath[k] ? filePath[k].type : type : type,
|
||||
});
|
||||
});
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
//点击直接跳转页面 加载一次路由
|
||||
this.props.history.push(`/projects/${owner}/${projectsId}?url=${str.substr(1)}`);
|
||||
} else {
|
||||
list.push({
|
||||
index: 0,
|
||||
name,
|
||||
path,
|
||||
type,
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
filePath: list,
|
||||
});
|
||||
};
|
||||
|
||||
// 获取子目录
|
||||
getFileDetail = (path, ref) => {
|
||||
this.setState({
|
||||
filePath: decodeURI(path),
|
||||
});
|
||||
const { projectsId , owner , branchName } = this.props.match.params;
|
||||
const { chooseType } = this.state;
|
||||
const url = `/${owner}/${projectsId}/sub_entries.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
filepath:path,
|
||||
ref:ref || branchName,
|
||||
type:chooseType
|
||||
}
|
||||
}).then((result)=>{
|
||||
let entries = result.data && result.data.entries;
|
||||
this.setState({
|
||||
isSpin:false
|
||||
})
|
||||
if(result){
|
||||
if(entries){
|
||||
// 返回对象entries.type则是文件类型，否则是文件夹
|
||||
if(entries.type){
|
||||
this.setState({
|
||||
fileDetail:[entries],
|
||||
rootList:undefined,
|
||||
subFileType:false
|
||||
})
|
||||
}else{
|
||||
this.setState({
|
||||
fileDetail:undefined,
|
||||
rootList:entries,
|
||||
branchLastCommit:result.data.last_commit && result.data.last_commit.commit,
|
||||
lastCommitAuthor:result.data.last_commit && (result.data.last_commit.author || (result.data.last_commit.commit && result.data.last_commit.commit.author))
|
||||
})
|
||||
this.renderData(entries);
|
||||
}
|
||||
}else{
|
||||
this.setState({
|
||||
fileDetail:undefined,
|
||||
rootList:undefined,
|
||||
isSpin:false,
|
||||
subFileType:false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.setState({
|
||||
isSpin:false
|
||||
})
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
renderData = (data) => {
|
||||
const rootList = [];
|
||||
const readMeContent = [];
|
||||
const readMeFile = [];
|
||||
data && data.map((item, key) => {
|
||||
rootList.push({
|
||||
key,
|
||||
message: item.commit && item.commit.message,
|
||||
...item,
|
||||
});
|
||||
if (item.is_readme_file) {
|
||||
readMeContent.push({ ...item });
|
||||
readMeFile.push({ ...item });
|
||||
}
|
||||
});
|
||||
this.setState({
|
||||
rootList: rootList,
|
||||
readMeContent,
|
||||
readMeFile,
|
||||
});
|
||||
};
|
||||
|
||||
// 点击跳转到子目录
|
||||
goToSubRoot=(path,type,filename)=>{
|
||||
this.setState({
|
||||
chooseType:type
|
||||
})
|
||||
const { projectsId, owner } = this.props.match.params;
|
||||
this.props.history.push(`/projects/${owner}/${projectsId}?url=${path}`);
|
||||
if(filename.substring(filename.length - 3) === ".md"){
|
||||
this.setState({
|
||||
md:true
|
||||
})
|
||||
}else{
|
||||
this.setState({
|
||||
md:false
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
// readme文件内容
|
||||
renderReadMeContent = (readMeContent, permission) => {
|
||||
const { fileDetail, readMeFile } = this.state;
|
||||
if (fileDetail) {
|
||||
return;
|
||||
}
|
||||
if (readMeContent && readMeContent.length > 0) {
|
||||
return (
|
||||
<div className="commonBox">
|
||||
<div className="commonBox-title">
|
||||
<span className="mr10">
|
||||
<i className="iconfont icon-wenjian1 font-16 color-grey-9 fl mt3"></i>
|
||||
</span>
|
||||
<span className="commonBox-title-read">
|
||||
{readMeContent[0].name}
|
||||
</span>
|
||||
{permission ?
|
||||
<a
|
||||
onClick={() => this.ChangeFile(readMeFile[0], false)}
|
||||
className="ml20 pull-right"
|
||||
>
|
||||
<i className="iconfont icon-bianji6 font-16 color-blue"></i>
|
||||
</a>
|
||||
:
|
||||
""
|
||||
}
|
||||
</div>
|
||||
<div className="commonBox-info">
|
||||
{readMeContent[0].content ?
|
||||
<RenderHtml className="break_word_comments imageLayerParent" value={readMeContent[0].content} />
|
||||
:
|
||||
<span>暂无~</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 选择分支
|
||||
changeBranch = (value) => {
|
||||
// this.setState({
|
||||
// branch: value,
|
||||
// isSpin: true,
|
||||
// readOnly:true
|
||||
// });
|
||||
// const { getTopCount } = this.props;
|
||||
// getTopCount && getTopCount(value);
|
||||
|
||||
// let { search } = this.props.history.location;
|
||||
// if (search && search.indexOf("?url=") > -1) {
|
||||
// let url = search.split("?url=")[1];
|
||||
// this.setState({
|
||||
// filePath: decodeURI(url),
|
||||
// });
|
||||
// this.getFileDetail(decodeURI(url), value);
|
||||
// } else {
|
||||
// this.getProjectRoot(value);
|
||||
// }
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
this.props.history.push(`/projects/${owner}/${projectsId}/branch/${value}`);
|
||||
|
||||
}
|
||||
|
||||
// 子目录路径返回链接
|
||||
returnUlr=(url)=>{
|
||||
this.setState({
|
||||
chooseType:"dir",
|
||||
readOnly:true
|
||||
})
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
this.props.history.push(`/projects/${owner}/${projectsId}?url=${url}`);
|
||||
}
|
||||
|
||||
onEdit=(readOnly)=>{
|
||||
this.setState({
|
||||
readOnly
|
||||
})
|
||||
}
|
||||
|
||||
downloadUrl = (zip_url,tar_url) => {
|
||||
return(
|
||||
<Menu>
|
||||
{zip_url && (
|
||||
<Menu.Item>
|
||||
<a href={zip_url}>ZIP</a>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{tar_url && (
|
||||
<Menu.Item>
|
||||
<a href={tar_url}>TAR.GZ</a>
|
||||
</Menu.Item>
|
||||
)}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
title = (branchLastCommit,lastCommitAuthor) => {
|
||||
if (branchLastCommit) {
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
return (
|
||||
<div className="f-wrap-alignCenter">
|
||||
{lastCommitAuthor ? (
|
||||
<React.Fragment>
|
||||
{lastCommitAuthor.login ? (
|
||||
<Link
|
||||
to={`/users/${lastCommitAuthor.login}/projects`}
|
||||
className="show-user-link"
|
||||
>
|
||||
<img
|
||||
src={getImageUrl(`images/${lastCommitAuthor.image_url}`)}
|
||||
className="radius mr10"
|
||||
width="32"
|
||||
height="32"
|
||||
alt=""
|
||||
/>
|
||||
<span className="mr15">{lastCommitAuthor.name}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<span className="mr15">{lastCommitAuthor.name}</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${branchLastCommit.sha}`)}`} className="color-blue flex-1 hide-1">
|
||||
{branchLastCommit.message}
|
||||
</Link>
|
||||
<span>{branchLastCommit.time_from_now}</span>
|
||||
<Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${branchLastCommit.sha}`)}`} className="commitKey">
|
||||
{truncateCommitId(branchLastCommit.sha)}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
const { branchLastCommit , lastCommitAuthor , rootList ,filePath , fileDetail , subFileType , readMeContent, isSpin , zip_url , tar_url} = this.state;
|
||||
const { isManager , isDeveloper , projectDetail , platform } = this.props;
|
||||
|
||||
const { projectsId , owner , branchName } = this.props.match.params;
|
||||
let branch = branchName || "master";
|
||||
const columns = [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
width:"30%",
|
||||
render: (text,item) => (
|
||||
<a onClick={()=>this.goToSubRoot(item.path,item.type,text)} className="ml12 task-hide" style={{ display: "block", maxWidth: "345px" }}>
|
||||
<i className={ item.type === "file" ? "iconfont icon-wenjia font-15 color-green-file mr5" : "iconfont icon-wenjianjia1 color-green-file font-15 mr5"}></i>{text}
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
dataIndex: "commit",
|
||||
width: "60%",
|
||||
render: (text, item) =>
|
||||
item.commit && item.commit.message ?
|
||||
<Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.commit.sha}`)}`} title={item.commit.message} className="task-hide" style={{ display: "block", maxWidth: "670px" }} >
|
||||
{item.commit.message}
|
||||
</Link>
|
||||
: ""
|
||||
},
|
||||
{
|
||||
dataIndex: "commit",
|
||||
width: "10%",
|
||||
className: "edu-txt-right",
|
||||
render: (text, item) =>
|
||||
item.commit && item.commit.time_from_now ?
|
||||
<a title={item.commit.created_at} className="mr12" style={{ cursor: "default", color: "#888" }} >
|
||||
{item.commit.time_from_now}
|
||||
</a>
|
||||
:""
|
||||
},
|
||||
];
|
||||
|
||||
const urlRoot = filePath === undefined ? "" : `/${filePath}`;
|
||||
let array = filePath && filePath.split("/");
|
||||
return (
|
||||
<Spin spinning={isSpin}>
|
||||
<div className="main">
|
||||
<div className="f-wrap-between mb20">
|
||||
<div className="f-wrap-alignCenter">
|
||||
{
|
||||
platform ?
|
||||
<SelectBranch
|
||||
repo_id={projectDetail && projectDetail.repo_id}
|
||||
projectsId={projectsId}
|
||||
branch={branch}
|
||||
changeBranch={this.changeBranch}
|
||||
owner={owner}
|
||||
history={this.props.history}
|
||||
></SelectBranch>
|
||||
:
|
||||
<span>分支：<span className="color-grey-6">master</span></span>
|
||||
}
|
||||
|
||||
|
||||
{filePath && (
|
||||
<span className="ml20 font-16">
|
||||
<a
|
||||
onClick={() => this.returnMain(branch)}
|
||||
className="color-blue"
|
||||
>
|
||||
{projectDetail && projectDetail.identifier}
|
||||
</a>
|
||||
{array &&
|
||||
array.map((item, key) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
{
|
||||
key === array.length-1 ?
|
||||
<span className="color-grey-6 subFileName" key={key}>{item}</span>
|
||||
:
|
||||
<a onClick={()=>this.returnUlr(`${getPathUrl(array,key+1)}`)} className="color-blue subFileName">{item}</a>
|
||||
}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="f-wrap-alignCenter">
|
||||
{subFileType && (projectDetail && parseInt(projectDetail.type)) !== 2 && (isManager || isDeveloper) && platform && (
|
||||
<div>
|
||||
<span>
|
||||
<Link to={`/projects/${owner}/${projectsId}/${branch}/uploadfile${urlRoot}`} >
|
||||
<span className="color-green mr30">上传文件</span>
|
||||
</Link>
|
||||
</span>
|
||||
<span className="mr30">
|
||||
<Link
|
||||
to={`/projects/${owner}/${projectsId}/${branch}/newfile${urlRoot}`}
|
||||
>
|
||||
<span className="color-blue">新建文件</span>
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{projectDetail && projectDetail.clone_url && (
|
||||
<CloneAddress
|
||||
http_url={projectDetail.clone_url}
|
||||
downloadUrl={this.downloadUrl(zip_url,tar_url)}
|
||||
showNotification={this.props.showNotification}
|
||||
></CloneAddress>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 主目录列表 */}
|
||||
{rootList && (
|
||||
<RootTable
|
||||
columns={columns}
|
||||
data={rootList}
|
||||
title={() => this.title(branchLastCommit,lastCommitAuthor)}
|
||||
></RootTable>
|
||||
)}
|
||||
{/* 子目录列表、文件 */}
|
||||
{fileDetail && fileDetail.length > 0 && (
|
||||
<CoderRootFileDetail
|
||||
detail={fileDetail[0]}
|
||||
{...this.props}
|
||||
{...this.state}
|
||||
readOnly={this.state.readOnly}
|
||||
onEdit={this.onEdit}
|
||||
currentBranch={branch}
|
||||
></CoderRootFileDetail>
|
||||
)}
|
||||
{
|
||||
!rootList && !fileDetail && <Nodata _html="暂未发现当前文件！"/>
|
||||
}
|
||||
{ rootList && this.renderReadMeContent(readMeContent, isManager || isDeveloper)}
|
||||
</div>
|
||||
</Spin>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default CoderRootDirectory;
|
||||
|
|
@ -172,7 +172,7 @@ class CoderRootFileDetail extends Component {
|
|||
let flag = current_user && current_user.login && (isManager || isDeveloper);
|
||||
const Option = Select.Option;
|
||||
return (
|
||||
<div className="mb20">
|
||||
<React.Fragment>
|
||||
<div className="grid-item branchTitle">
|
||||
<div className="grid-item">
|
||||
<span className="ml20 color-grey-6 font-16">
|
||||
|
|
@ -260,7 +260,7 @@ class CoderRootFileDetail extends Component {
|
|||
) : (
|
||||
md && readOnly ?
|
||||
<div className="files-md">
|
||||
<RenderHtml className="file-md imageLayerParent" value={description} />
|
||||
<RenderHtml className="file-md imageLayerParent" value={description} url={this.props.history.location}/>
|
||||
</div>
|
||||
:
|
||||
<Meditor
|
||||
|
|
@ -275,7 +275,7 @@ class CoderRootFileDetail extends Component {
|
|||
></Meditor>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,9 +67,11 @@ class CoderRootIndex extends Component{
|
|||
|
||||
Init=()=>{
|
||||
const { branchName } = this.props.match.params;
|
||||
this.getTopCount(branchName || "master");
|
||||
const { defaultBranch } = this.props;
|
||||
this.getTopCount(branchName || defaultBranch);
|
||||
}
|
||||
|
||||
// 获取<Top />组件里要显示的数据
|
||||
getTopCount=(branch)=>{
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
const url = `/${owner}/${projectsId}/top_counts.json`;
|
||||
|
|
@ -104,13 +106,6 @@ class CoderRootIndex extends Component{
|
|||
(props) => (<FileNew {...this.props} {...props} {...this.state} getTopCount={this.getTopCount} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
{/* diff */}
|
||||
<Route path="/projects/:owner/:projectsId/commits/branch/:branchName"
|
||||
render={
|
||||
(props) => (<CoderRootCommit {...this.props} {...props} {...this.state} commit_class="main" getTopCount={this.getTopCount} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/commits/:sha"
|
||||
render={
|
||||
(props) => (<Diff {...this.props} {...props} {...this.state}/>)
|
||||
|
|
@ -121,7 +116,6 @@ class CoderRootIndex extends Component{
|
|||
() => (<CoderRootCommit {...this.props} {...this.state} commit_class="main" getTopCount={this.getTopCount} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route path="/projects/:owner/:projectsId/releases/:versionId/update"
|
||||
render={
|
||||
(props) => (<CoderRootVersionUpdate {...this.props} {...this.state} {...props} />)
|
||||
|
|
@ -132,33 +126,21 @@ class CoderRootIndex extends Component{
|
|||
() => (<CoderRootVersionNew {...this.props} {...this.state} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route path="/projects/:owner/:projectsId/releases"
|
||||
render={
|
||||
() => (<CoderRootVersion {...this.props} {...this.state} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
<Route path="/projects/:owner/:projectsId/tag"
|
||||
render={
|
||||
() => (<CoderRootTag {...this.props} {...this.state} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/branch/:branchName"
|
||||
render={
|
||||
(props) => (<CoderRootDirectory {...this.props} {...this.state} getTopCount={this.getTopCount} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/branchs"
|
||||
render={
|
||||
() => (<CoderRootBranch {...this.props} {...this.state} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId"
|
||||
render={
|
||||
() => (<CoderRootDirectory {...this.props} {...this.state} getTopCount={this.getTopCount} />)
|
||||
}
|
||||
></Route>
|
||||
</Switch>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -28,8 +28,9 @@ export default (( props, { projectDetail }) => {
|
|||
return (
|
||||
<div className="main">
|
||||
<Spin spinning={isSpin}>
|
||||
{
|
||||
data && data.length > 0 ?
|
||||
<div style={{minHeight:"400px"}}>
|
||||
{
|
||||
data && data.length > 0 &&
|
||||
<div className="div_table">
|
||||
<ul className="ul_thead">
|
||||
<li>
|
||||
|
|
@ -40,7 +41,7 @@ export default (( props, { projectDetail }) => {
|
|||
</ul>
|
||||
<ul className="ul_tbody">
|
||||
{
|
||||
data && data.length > 0 && data.map((item, key) => {
|
||||
data.map((item, key) => {
|
||||
return (
|
||||
<li>
|
||||
<span className="flex1">
|
||||
|
|
@ -60,9 +61,9 @@ export default (( props, { projectDetail }) => {
|
|||
}
|
||||
</ul>
|
||||
</div>
|
||||
:
|
||||
<Nodata _html={`暂无标签！`}/>
|
||||
}
|
||||
}
|
||||
{ data && data.length === 0 && <Nodata _html={`暂无标签！`}/> }
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
|||
import { Spin, Tooltip } from 'antd';
|
||||
import { Link, Route, Switch } from 'react-router-dom';
|
||||
import { Content } from '../Component/layout';
|
||||
import DetailBanner from './sub/DetailBanner';
|
||||
import '../css/index.scss'
|
||||
import './list.css';
|
||||
|
||||
|
|
@ -10,17 +11,6 @@ import Loading from '../../Loading';
|
|||
|
||||
import axios from 'axios';
|
||||
|
||||
import img_1 from '../Images/1.png';
|
||||
import img_2 from '../Images/2.png';
|
||||
import img_3 from '../Images/3.png';
|
||||
import img_6 from '../Images/6.png';
|
||||
import img_7 from '../Images/7.png';
|
||||
import img_parise from '../Images/parise.png';
|
||||
import img_focus from '../Images/focus.png';
|
||||
import img_parised from '../Images/parised.png';
|
||||
import img_focused from '../Images/focused.png';
|
||||
import img_fork from '../Images/fork.png';
|
||||
import img_milepost from '../Images/milepost.png';
|
||||
const Setting = Loadable({
|
||||
loader: () => import('../Settings/Index'),
|
||||
loading: Loading,
|
||||
|
|
@ -107,7 +97,19 @@ const ForkUsers = Loadable({
|
|||
loader: () => import('../UsersList/fork_users'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Contribute = Loadable({
|
||||
loader: () => import('./sub/Contribute'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
const CoderRootCommit = Loadable({
|
||||
loader: () => import('./CoderRootCommit'),
|
||||
loading: Loading,
|
||||
})
|
||||
const CoderDepot = Loadable({
|
||||
loader: () => import('./CoderDepot'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
const TrendsIndex = Loadable({
|
||||
loader: () => import('../Activity/Activity'),
|
||||
|
|
@ -118,6 +120,10 @@ const DevAbout = Loadable({
|
|||
loader: () => import('../About/Index'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Source = Loadable({
|
||||
loader: () => import('../Source/Index'),
|
||||
loading: Loading,
|
||||
})
|
||||
const DevIndex = Loadable({
|
||||
loader: () => import('../DevOps/Index'),
|
||||
loading: Loading,
|
||||
|
|
@ -125,23 +131,26 @@ const DevIndex = Loadable({
|
|||
/**
|
||||
* permission：Manager:管理员，Reporter：报告人员(只有读取权限)，Developer：开发人员（除不能设置仓库信息外）
|
||||
*/
|
||||
function checkPathname(pathname){
|
||||
function checkPathname(projectsId,owner,pathname){
|
||||
let name = "";
|
||||
if(pathname){
|
||||
if(pathname.indexOf("/about")>-1){
|
||||
if(pathname && pathname !== `/projects/${owner}/${projectsId}`){
|
||||
let url = pathname.split(`/projects/${owner}/${projectsId}`)[1];
|
||||
if(url.indexOf("/about")>-1){
|
||||
name="about"
|
||||
}else if(pathname.indexOf("/issues")>-1 ||pathname.indexOf("Milepost") > 0){
|
||||
}else if(url.indexOf("/issues")>-1 ||url.indexOf("Milepost") > 0){
|
||||
name = "issues";
|
||||
}else if(pathname.indexOf("/pulls")>-1){
|
||||
}else if(url.indexOf("/pulls")>-1){
|
||||
name="pulls"
|
||||
}else if(pathname.indexOf("/milestones")>-1){
|
||||
}else if(url.indexOf("/milestones")>-1){
|
||||
name="milestones"
|
||||
}else if(pathname.indexOf("/activity")>-1){
|
||||
}else if(url.indexOf("/activity")>-1){
|
||||
name="activity"
|
||||
}else if(pathname.indexOf("/setting")>-1){
|
||||
}else if(url.indexOf("/setting")>-1){
|
||||
name="setting"
|
||||
}else if(pathname.indexOf("/devops")>-1){
|
||||
}else if(url.indexOf(`/devops`)>-1){
|
||||
name="devops"
|
||||
}else if(url.indexOf(`/source`)>-1){
|
||||
name="source"
|
||||
}
|
||||
}
|
||||
return name;
|
||||
|
|
@ -161,13 +170,14 @@ class Detail extends Component {
|
|||
watched: false,
|
||||
praised: false,
|
||||
http_url: undefined,
|
||||
author: undefined,
|
||||
branchs: undefined,
|
||||
branchList: undefined,
|
||||
project: null,
|
||||
firstSync:false,
|
||||
secondSync:false,
|
||||
open_devops:false,
|
||||
// 默认分支
|
||||
defaultBranch:undefined,
|
||||
|
||||
// 非本平台项目
|
||||
platform:false
|
||||
|
|
@ -197,17 +207,6 @@ class Detail extends Component {
|
|||
platform:result.data.platform && result.data.platform !== 'educoder'
|
||||
})
|
||||
|
||||
// 工作流：两种状态进入的链接不同
|
||||
const pathname = this.props.history.location.pathname;
|
||||
let p = checkPathname(pathname);
|
||||
if(p==="devops"){
|
||||
if(result.data.open_devops && pathname === `/projects/${owner}/${projectsId}/devops`){
|
||||
this.props.history.push(`/projects/${owner}/${projectsId}/devops/list`);
|
||||
}else if(result.data.open_devops===false && pathname !== `/projects/${owner}/${projectsId}/devops`){
|
||||
this.props.history.push(`/projects/${owner}/${projectsId}/devops`);
|
||||
}
|
||||
}
|
||||
|
||||
if (result.data.type !== 0 && result.data.mirror_status === 1) {
|
||||
console.log("--------start channel --------");
|
||||
// 是镜像项目，且未完成迁移
|
||||
|
|
@ -265,7 +264,8 @@ class Detail extends Component {
|
|||
|
||||
getDetail = () => {
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
const url = `/${owner}/${projectsId}.json`;
|
||||
this.getBanner();
|
||||
const url = `/${owner}/${projectsId}/detail.json`;
|
||||
axios.get(url).then((result) => {
|
||||
if (result && result.data) {
|
||||
this.setState({
|
||||
|
|
@ -275,17 +275,30 @@ class Detail extends Component {
|
|||
isReporter: result.data.permission && result.data.permission === "Reporter",
|
||||
isDeveloper: result.data.permission && result.data.permission === "Developer",
|
||||
http_url: result.data.clone_url,
|
||||
author: result.data.author,
|
||||
praised: result.data.praised,
|
||||
watched: result.data.watched,
|
||||
watchers_count: result.data.watchers_count,
|
||||
praises_count: result.data.praises_count,
|
||||
forked_count: result.data.forked_count,
|
||||
defaultBranch:result.data.default_branch
|
||||
})
|
||||
}
|
||||
}).catch((error) => { })
|
||||
}
|
||||
|
||||
// 获取动态导航栏菜单
|
||||
getBanner(){
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
const url = `/${owner}/${projectsId}/menu_list.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result){
|
||||
this.setState({
|
||||
bannerList:result.data
|
||||
})
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
// 关注和取消关注
|
||||
focusFunc = (flag) => {
|
||||
const { platform } = this.state;
|
||||
|
|
@ -366,6 +379,7 @@ class Detail extends Component {
|
|||
const url = `/${owner}/${projectsId}/sync_mirror.json`;
|
||||
axios.post(url).then(result => {
|
||||
if (result && result.data && result.data.status === 0) {
|
||||
this.props.showNotification("镜像同步成功!");
|
||||
this.getProject(2);
|
||||
} else {
|
||||
this.props.showNotification("镜像同步失败!");
|
||||
|
|
@ -381,13 +395,13 @@ class Detail extends Component {
|
|||
const { projectDetail, watchers_count, praises_count,
|
||||
forked_count, firstSync , secondSync ,
|
||||
isManager, watched, praised,
|
||||
project , open_devops , platform } = this.state;
|
||||
project , open_devops , platform , defaultBranch , bannerList } = this.state;
|
||||
const url = this.props.history.location.pathname;
|
||||
const urlArr = url.split("/");
|
||||
const urlFlag = (urlArr.length === 3);
|
||||
let pathname = checkPathname(url);
|
||||
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
let pathname = checkPathname(projectsId,owner,url);
|
||||
|
||||
const { state } = this.props.history.location;
|
||||
|
||||
|
|
@ -403,7 +417,8 @@ class Detail extends Component {
|
|||
|
||||
const common = {
|
||||
getDetail: this.getDetail,
|
||||
changeOpenDevops:this.changeOpenDevops
|
||||
changeOpenDevops:this.changeOpenDevops,
|
||||
defaultBranch
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -412,7 +427,7 @@ class Detail extends Component {
|
|||
<div className="f-wrap-between pb15" style={{ position: "relative" }}>
|
||||
<p className="font-22 df flex-1 lineH2 mt15" style={{ alignItems: "center" }}>
|
||||
{project && project.author &&
|
||||
<Link to={`/users/${project.author.login}`} className="show-user-link">
|
||||
<Link to={`${project.author.type ==="Organization" ? "/organize":'/users'}/${project.author.login}`} className="show-user-link">
|
||||
{project.author.name}
|
||||
</Link>
|
||||
}
|
||||
|
|
@ -455,14 +470,15 @@ class Detail extends Component {
|
|||
<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)}>
|
||||
|
|
@ -470,24 +486,28 @@ class Detail extends Component {
|
|||
<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">
|
||||
<a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={this.forkFunc}>
|
||||
<i className="iconfont icon-fork color-grey-9 mr3"></i>Fork
|
||||
<i className="iconfont icon-fork color-grey-9 mr3"></i>复刻 (Fork)
|
||||
</a>
|
||||
{
|
||||
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">{praises_count}</span>
|
||||
<span className="detail_tag_btn_count">{forked_count}</span>
|
||||
:""
|
||||
}
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -495,83 +515,35 @@ class Detail extends Component {
|
|||
</div>
|
||||
{
|
||||
firstSync ? "" :
|
||||
<div className="f-wrap-between mt15">
|
||||
<ul className="headerMenu-wrapper">
|
||||
<li className={pathname==="about" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/about`, state }}>
|
||||
<i className={(pathname==="" || urlFlag) ? "iconfont icon-zhuye1 color-grey-3 mr5 font-14":"iconfont icon-zhuye1 color-grey-6 font-14 mr5"}></i>
|
||||
<span>主页</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className={(pathname==="" || urlFlag) ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}`, state }}>
|
||||
<i className={(pathname==="" || urlFlag) ? "iconfont icon-daimaku color-grey-3 mr5 font-14":"iconfont icon-daimaku color-grey-6 font-14 mr5"}></i>
|
||||
<span>代码库</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className={pathname==="issues" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/issues`, state }}>
|
||||
<i className={pathname==="issues" ? "iconfont icon-renwu color-grey-3 mr5 font-14":"iconfont icon-renwu color-grey-6 font-14 mr5"}></i>
|
||||
<span>任务</span>
|
||||
{projectDetail && projectDetail.issues_count ? <span className="num">{projectDetail.issues_count}</span> : ""}
|
||||
</Link>
|
||||
</li>
|
||||
{
|
||||
projectDetail && parseInt(projectDetail.type) !== 2 && platform &&
|
||||
<li className={pathname==="pulls" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/pulls`, state }}>
|
||||
<i className={pathname==="pulls" ? "iconfont icon-hebingqingqiu1 color-grey-3 mr5 font-14":"iconfont icon-hebingqingqiu1 color-grey-6 font-14 mr5"}></i>
|
||||
<span>合并请求</span>
|
||||
{projectDetail && projectDetail.pull_requests_count ? <span className="num">{projectDetail.pull_requests_count}</span> : ""}
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
{
|
||||
platform &&
|
||||
<li className={pathname==="devops" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/devops${open_devops ? `/list`:""}`, state }}>
|
||||
<i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流(beta版)
|
||||
{projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""}
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
|
||||
<li className={pathname==="milestones" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/milestones`, state }}>
|
||||
<i className={pathname==="milestones" ? "iconfont icon-lichengbei color-grey-3 mr5 font-14":"iconfont icon-lichengbei color-grey-6 font-14 mr5"}></i>
|
||||
<span>里程碑</span>
|
||||
{projectDetail && projectDetail.versions_count ? <span className="num">{projectDetail.versions_count}</span> :""}
|
||||
</Link>
|
||||
</li>
|
||||
<li className={pathname==="activity" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/activity`, state }}>
|
||||
<i className={pathname==="activity" ? "iconfont icon-tongzhi color-grey-3 mr5 font-14":"iconfont icon-tongzhi color-grey-6 font-14 mr5"}></i>
|
||||
<span>动态</span>
|
||||
</Link>
|
||||
</li>
|
||||
{
|
||||
isManager && platform &&
|
||||
<li className={url.indexOf("/setting") > 0 ? "active" : ""}>
|
||||
<Link to={`/projects/${owner}/${projectsId}/setting`}>
|
||||
<i className={url.indexOf("/setting") > 0 ? "iconfont icon-cangku color-grey-3 mr5 font-14":"iconfont icon-cangku color-grey-6 font-14 mr5"}></i>
|
||||
<span>仓库设置</span>
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<DetailBanner
|
||||
list={bannerList}
|
||||
owner={owner}
|
||||
projectsId={projectsId}
|
||||
pathname={pathname}
|
||||
state={state}
|
||||
projectDetail={projectDetail}
|
||||
open_devops={open_devops}
|
||||
platform={platform}
|
||||
urlFlag={urlFlag}
|
||||
isManager={isManager}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
firstSync ?
|
||||
<Content className="spincontent">
|
||||
<Spin className="spinstyle" tip={project && `正在从 ${project.mirror_url} 迁移`} size="large">
|
||||
</Spin>
|
||||
<Spin className="spinstyle" tip={project && `正在从 ${project.mirror_url} 迁移`} size="large" />
|
||||
</Content>
|
||||
:
|
||||
<Spin spinning={secondSync} className="spinstyle" tip="正在同步镜像" size="large">
|
||||
<Switch {...this.props}>
|
||||
{/* 资源 */}
|
||||
<Route path="/projects/:owner/:projectsId/source"
|
||||
render={
|
||||
() => (<Source {...this.props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
{/* 主页 */}
|
||||
<Route path="/projects/:owner/:projectsId/about"
|
||||
render={
|
||||
|
|
@ -662,6 +634,7 @@ class Detail extends Component {
|
|||
(props) => (<OrderIndex {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
{/* 新建合并请求 */}
|
||||
<Route path="/projects/:owner/:projectsId/pulls/new"
|
||||
render={
|
||||
(props) => (<CreateMerge {...this.props} {...props} {...this.state} {...common} is_fork={true} />)
|
||||
|
|
@ -688,11 +661,6 @@ class Detail extends Component {
|
|||
(props) => (<MergeIndexDetail {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/coders/filesurl"
|
||||
render={
|
||||
(props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/watchers"
|
||||
render={
|
||||
(props) => (<WatchUsers {...this.props} {...props} {...this.state} {...common} />)
|
||||
|
|
@ -708,19 +676,32 @@ class Detail extends Component {
|
|||
(props) => (<ForkUsers {...this.props} {...props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/commits/branch/:branchName"
|
||||
{/* 贡献者列表 */}
|
||||
<Route path="/projects/:owner/:projectsId/contribute"
|
||||
render={
|
||||
(props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
|
||||
() => (<Contribute {...this.props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/branch/:branchName"
|
||||
|
||||
{/* 代码库----详情页面 */}
|
||||
<Route path="/projects/:owner/:projectsId/commits/branch/:branchName"
|
||||
render={
|
||||
(props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
|
||||
(props) => (<CoderRootCommit {...this.props} {...props} {...this.state} {...common}/>)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/tree/:branchName"
|
||||
render={
|
||||
(props) => (<CoderDepot {...this.props} {...props} {...this.state} {...common}/>)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId/:subIndex"
|
||||
render={
|
||||
(props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common}/>)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:owner/:projectsId"
|
||||
render={
|
||||
(props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
|
||||
(props) => (<CoderDepot {...this.props} {...props} {...this.state} {...common}/>)
|
||||
}
|
||||
></Route>
|
||||
</Switch>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default ({ match , history }) => {
|
|||
{commit && commit.message &&
|
||||
<pre className="task-hide" style={{marginBottom:"0px",height:"28px",whiteSpace:"pre-wrap"}}>{commit.message}</pre>
|
||||
}
|
||||
<Button type="primary" onClick={()=>{history.push(`/projects/${owner}/${projectsId}/branch/${truncateCommitId(sha)}`)}} className="ml30">浏览代码</Button>
|
||||
<Button type="primary" onClick={()=>{history.push(`/projects/${owner}/${projectsId}/tree/${truncateCommitId(sha)}`)}} className="ml30">浏览代码</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="f-wrap-between" style={{ alignItems: "center" }}>
|
||||
|
|
|
|||
|
|
@ -245,10 +245,10 @@ class Index extends Component {
|
|||
|
||||
pagination=(total,limit,page)=>{
|
||||
return(
|
||||
total && total > limit &&
|
||||
total && total > limit ?
|
||||
<div className="edu-txt-center pt30 mb30 border-top-grey">
|
||||
<Pagination simple defaultCurrent={page} total={total} pageSize={limit} onChange={this.ChangePage}></Pagination>
|
||||
</div>
|
||||
</div>:""
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -277,7 +277,7 @@ class Index extends Component {
|
|||
</div>
|
||||
<div className="baseInfo">
|
||||
<span className="look"><i className="iconfont icon-dianjiliang font-12"></i>{item.visits}</span>
|
||||
<span className="type">项目类型：{item.category && item.category.name}</span>
|
||||
<span className="type">{item.category && item.category.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
width: 220px;
|
||||
margin-right: 25px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #eee;
|
||||
&:last-child{
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
|
@ -68,7 +69,208 @@
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// coderDepot
|
||||
.Panels{
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
.panelmenu{
|
||||
padding-top:30px;
|
||||
}
|
||||
.addOptionBtn{
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
display: flex;
|
||||
border:1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
a{
|
||||
padding:0px 13px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
cursor: pointer;
|
||||
}
|
||||
& > a:first-child{
|
||||
border-right: 1px solid #d9d9d9;
|
||||
}
|
||||
}
|
||||
.infoCount{
|
||||
display: inline-block;
|
||||
padding:0px 5px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
background-color: #eee;
|
||||
color:#999;
|
||||
border-radius: 12px;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.attrPerson{
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
a{
|
||||
margin: 10px 10px 0px 0px;
|
||||
img{
|
||||
border-radius: 50%;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
&:nth-child(6){
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress{
|
||||
display: flex;
|
||||
border-radius: 10px;
|
||||
height: 7px;
|
||||
margin-top: 12px;
|
||||
span{
|
||||
border-left: 1px solid #fff;
|
||||
&:first-child{
|
||||
border-left: none;
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
}
|
||||
&:last-child{
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progresstip{
|
||||
margin-top: 15px;
|
||||
flex-wrap: wrap;
|
||||
i.zero{
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
left: 0px;
|
||||
top:10px
|
||||
}
|
||||
&>span{
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
min-width: 33.5%;
|
||||
span{
|
||||
color: #666;
|
||||
&:last-child{
|
||||
color: #999;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.listtable{
|
||||
margin-top: 20px;
|
||||
border:1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
.listtablehead{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
padding:7px 20px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
background-color: #FAFBFC;
|
||||
.ellipsistxt{
|
||||
margin-left: 13px;
|
||||
line-height:18px;
|
||||
margin-top:6px;
|
||||
flex:1;
|
||||
width: 0;
|
||||
color: #666;
|
||||
&>p{
|
||||
word-break:break-all;
|
||||
}
|
||||
&.hide{
|
||||
height: 18px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-right:8px;
|
||||
}
|
||||
&.hide::after{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
content:"...";
|
||||
|
||||
}
|
||||
}
|
||||
.ellipsis{
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
background-color: #c1c1c1;
|
||||
padding:0px 4px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
margin-top: 9px;
|
||||
i{
|
||||
font-size: 15px!important;
|
||||
color: #fff;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listtablebody{
|
||||
li.listtablepath{
|
||||
a{color: #40a9ff;}
|
||||
}
|
||||
li{
|
||||
height: 42px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
padding:0px 20px 0px 24px;
|
||||
& > span:first-child{
|
||||
width: 30%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
& > span:nth-child(2){
|
||||
width: 60%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
& > span:nth-child(3){
|
||||
width: 10%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
&> li:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.drawerBtn{
|
||||
position: fixed;
|
||||
left: -13px;
|
||||
border:1px solid #d9d9d9;
|
||||
width: 34px;
|
||||
border-radius: 0px 12px 12px 0px;
|
||||
text-align: right;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
top:50%;
|
||||
margin-top: -35px;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
box-shadow: 1px 0px 7px rgba(0,0,0,0.1);
|
||||
}
|
||||
i{
|
||||
color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
.downMenu{
|
||||
box-shadow: 0px 0px 9px rgba(134, 134, 134,0.4);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Tooltip } from 'antd';
|
||||
import { getImageUrl , getImage } from 'educoder';
|
||||
import { getImageUrl } from 'educoder';
|
||||
import { Link } from 'react-router-dom';
|
||||
import '../css/index.scss';
|
||||
import Nodata from '../Nodata';
|
||||
|
|
@ -16,65 +16,62 @@ class IndexItem extends Component {
|
|||
}
|
||||
render() {
|
||||
const { projects } = this.props;
|
||||
const renderList = (
|
||||
projects && projects.length > 0 ? projects.map((item, key) => {
|
||||
return (
|
||||
<div className="p-r-Item" key={key}>
|
||||
{
|
||||
item.platform === "educoder" ?
|
||||
<a href="javascript:void(0)" style={{cursor:"default"}} className="show-user-link">
|
||||
<img className="p-r-photo" alt="" src={item.author && item.author.image_url} ></img>
|
||||
</a>
|
||||
:
|
||||
<Link to={`/users/${item.author.login}`} className="show-user-link">
|
||||
<img className="p-r-photo" alt="" src={getImageUrl(`${item.author && item.author.image_url}`)} ></img>
|
||||
</Link>
|
||||
}
|
||||
<div className="p-r-Infos">
|
||||
<div className="p-r-name">
|
||||
<Link to={`/projects/${item.author.login}/${item.identifier}`} className="hide-1 color-grey-3 font-18 task-hide " style={{ whiteSpace: "wrap", display: 'flex', width: 400 }}>
|
||||
{item.author.name}/{item.name}
|
||||
{
|
||||
item.forked_from_project_id ?
|
||||
<span className="ml5">
|
||||
<i className="iconfont icon-fork font-18 color-orange" />
|
||||
</span>
|
||||
: ""
|
||||
}
|
||||
{
|
||||
item.type && item.type !== 0 ?
|
||||
item.type === 2 ?
|
||||
<Tooltip title="该项目是一个镜像" className="ml5">
|
||||
<i className="iconfont icon-banbenku font-18 color-green" />
|
||||
</Tooltip>:
|
||||
<span className="ml5">
|
||||
<i className="iconfont icon-jingxiang font-18 color-green" />
|
||||
</span>:""
|
||||
}
|
||||
</Link>
|
||||
<span className="p-r-tags">
|
||||
<span className="pariseTag"><img src={img_parise} alt="" className="pariseImg" />赞 ({item.praises_count})</span>
|
||||
<span><i className="iconfont icon-fork mr3 font-16" style={{ color: "#1B8FFF" }} />fork ({item.forked_count})</span>
|
||||
</span>
|
||||
</div>
|
||||
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>{item.description}</p>
|
||||
|
||||
<div className="p-r-about">
|
||||
<span className="p-r-detail">
|
||||
<span><label>浏览量：</label>{item.visits}</span>
|
||||
{item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
|
||||
{item.last_update_time ? <span ><label>更新于</label>{item.time_ago}</span> : ""}
|
||||
{item.language && item.language.id ? <span className="color-grey-3">{item.language.name}</span> : ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}) : <Nodata _html="暂无数据~"></Nodata>
|
||||
)
|
||||
return (
|
||||
<div className="project-list minH-670">
|
||||
{renderList}
|
||||
{ projects && projects.length > 0 ? projects.map((item, key) => {
|
||||
return (
|
||||
<div className="p-r-Item" key={key}>
|
||||
{
|
||||
item.platform === "educoder" ?
|
||||
<a href="javascript:void(0)" style={{cursor:"default"}} className="show-user-link">
|
||||
<img className="p-r-photo" alt="" src={item.author && item.author.image_url} ></img>
|
||||
</a>
|
||||
:
|
||||
<Link to={`/users/${item.author.login}`} className="show-user-link">
|
||||
<img className="p-r-photo" alt="" src={getImageUrl(`${item.author && item.author.image_url}`)} ></img>
|
||||
</Link>
|
||||
}
|
||||
<div className="p-r-Infos">
|
||||
<div className="p-r-name">
|
||||
<Link to={`/projects/${item.author.login}/${item.identifier}`} className="hide-1 color-grey-3 font-18 task-hide " style={{ whiteSpace: "wrap", display: 'flex', width: 400 }}>
|
||||
{item.author.name}/{item.name}
|
||||
{
|
||||
item.forked_from_project_id ?
|
||||
<span className="ml5">
|
||||
<i className="iconfont icon-fork font-18 color-orange" />
|
||||
</span>
|
||||
: ""
|
||||
}
|
||||
{
|
||||
item.type && item.type !== 0 ?
|
||||
item.type === 2 ?
|
||||
<Tooltip title="该项目是一个镜像" className="ml5">
|
||||
<i className="iconfont icon-banbenku font-18 color-green" />
|
||||
</Tooltip>:
|
||||
<span className="ml5">
|
||||
<i className="iconfont icon-jingxiang font-18 color-green" />
|
||||
</span>:""
|
||||
}
|
||||
</Link>
|
||||
<span className="p-r-tags">
|
||||
<span className="pariseTag"><img src={img_parise} alt="" className="pariseImg" />赞 {item.praises_count}</span>
|
||||
<span><i className="iconfont icon-fork mr3 font-16" style={{ color: "#1B8FFF" }} />fork {item.forked_count}</span>
|
||||
</span>
|
||||
</div>
|
||||
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>{item.description}</p>
|
||||
|
||||
<div className="p-r-about">
|
||||
<span className="p-r-detail">
|
||||
{/* <span><label>浏览量：</label>{item.visits}</span> */}
|
||||
{/* {item.category && item.category.id && <span>{item.category.name}</span>} */}
|
||||
{item.last_update_time ? <span><label>更新于</label>{item.time_ago}</span> : ""}
|
||||
{item.language && item.language.id ? <span className="color-grey-3">{item.language.name}</span> : ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}) : <Nodata _html="暂无数据~"></Nodata>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,10 +18,17 @@
|
|||
box-sizing: border-box;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.list-left > div{
|
||||
border:1px solid #eee;
|
||||
}
|
||||
.list-left > div.bgcF{
|
||||
border:none;
|
||||
}
|
||||
.list-right{
|
||||
width:74%;
|
||||
background: #fff;
|
||||
padding:10px;
|
||||
border:1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -424,15 +431,11 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
/* 分支 */
|
||||
.branchTable{
|
||||
border:1px solid #f7f7f7;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.branchTitle{
|
||||
padding:12px 10px;
|
||||
padding:8px 10px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
background:rgba(241,248,255,1);
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
.branchUl{
|
||||
padding:0px 30px;
|
||||
|
|
@ -548,17 +551,19 @@
|
|||
}
|
||||
.commonBox{
|
||||
border:1px solid #ddd;
|
||||
margin-top: 25px;
|
||||
margin-top: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.commonBox .commonBox-title{
|
||||
padding:0px 15px;
|
||||
padding:0px 20px;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
background: #F1F8FF;
|
||||
background: #FAFBFC;/* F1F8FF */
|
||||
font-weight: bold;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
}
|
||||
.synchronism{
|
||||
display: block;
|
||||
|
|
@ -575,7 +580,7 @@
|
|||
.commonBox .commonBox-info{
|
||||
padding:20px 15px;
|
||||
}
|
||||
.commonBox-title-read{vertical-align: middle;}
|
||||
.commonBox-title-read{vertical-align: middle;color: #666;}
|
||||
|
||||
@media screen and (max-width: 370px){
|
||||
.p-r-tags,.p-r-btn{
|
||||
|
|
@ -665,6 +670,7 @@ a.color-grey-ccc:hover{
|
|||
|
||||
.commitList{
|
||||
padding:0px 30px;
|
||||
min-height: 400px;
|
||||
}
|
||||
.commitList > div{
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { WhiteBack , AlignCenter } from '../../Component/layout';
|
||||
import "./sub.scss";
|
||||
import axios from 'axios';
|
||||
import { Pagination , Spin } from 'antd';
|
||||
import NoData from '../../Nodata';
|
||||
import { getImageUrl } from 'educoder';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function Contribute(props){
|
||||
const [ list , setList ] = useState(undefined);
|
||||
const [ page , setPage ] = useState(1);
|
||||
const [ total , setTotal ] = useState(0);
|
||||
const [ isSpin , setIsSpin ] = useState(true);
|
||||
|
||||
const owner = props.match.params.owner;
|
||||
const projectsId = props.match.params.projectsId;
|
||||
const LIMIT = 20;
|
||||
useEffect(()=>{
|
||||
if(owner && projectsId){
|
||||
getData();
|
||||
}
|
||||
},[owner,projectsId,page]);
|
||||
|
||||
function getData(){
|
||||
setIsSpin(true);
|
||||
const url = `/${owner}/${projectsId}/contributors.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
limit:LIMIT,page,
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
setList(result.data.contributors);
|
||||
setTotal(result.data.total_count);
|
||||
setIsSpin(false);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
return(
|
||||
<WhiteBack>
|
||||
<Spin spinning={isSpin}>
|
||||
<div className="boxPanel">
|
||||
<p className="font-18 mb20">贡献者列表</p>
|
||||
{
|
||||
list && list.length > 0 ?
|
||||
<div className="contrbuteList">
|
||||
{
|
||||
list.map((item,key)=>{
|
||||
return(
|
||||
<AlignCenter>
|
||||
<img alt="" style={{borderRadius:"50%",marginRight:"10px"}} src={getImageUrl(`images/${item.image_url}`)} width="50px" height="50px"/>
|
||||
<div>
|
||||
<Link to={`/users/${item.login}`} className="font-16">{item.name}</Link>
|
||||
<p className="font-12 color-grey-9">提交{item.contributions}次</p>
|
||||
</div>
|
||||
</AlignCenter>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
:""
|
||||
}
|
||||
{
|
||||
list && list.length === 0 ? <NoData _html="暂无贡献者" />:""
|
||||
}
|
||||
{
|
||||
total > LIMIT ?
|
||||
<div className="mt20 edu-txt-center">
|
||||
<Pagination simple pageSize={LIMIT} onChange={(p)=>{setPage(p)}} current={page} total={total}/>
|
||||
</div>
|
||||
:""
|
||||
}
|
||||
</div>
|
||||
</Spin>
|
||||
</WhiteBack>
|
||||
)
|
||||
}
|
||||
export default Contribute;
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Skeleton } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function DetailBanner({ list , owner , projectsId , isManager , url , pathname , state , urlFlag , projectDetail , platform ,open_devops }){
|
||||
const [ menuName , setMenuName ] = useState(undefined);
|
||||
useEffect(()=>{
|
||||
if(list){
|
||||
setMenuName(list);
|
||||
}
|
||||
},[list]);
|
||||
return(
|
||||
<div className="f-wrap-between mt15">
|
||||
{
|
||||
menuName && projectDetail ?
|
||||
<ul className="headerMenu-wrapper">
|
||||
{
|
||||
menuName.map((item,key)=>{
|
||||
return(
|
||||
<React.Fragment>
|
||||
{
|
||||
item.menu_name === "home" &&
|
||||
<li className={pathname==="about" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/about`, state }}>
|
||||
<i className={(pathname==="" || urlFlag) ? "iconfont icon-zhuye1 color-grey-3 mr5 font-14":"iconfont icon-zhuye1 color-grey-6 font-14 mr5"}></i>
|
||||
<span>主页</span>
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
{
|
||||
item.menu_name === "code" &&
|
||||
<li className={(pathname==="" || urlFlag) ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}`, state }}>
|
||||
<i className={(pathname==="" || urlFlag) ? "iconfont icon-daimaku color-grey-3 mr5 font-14":"iconfont icon-daimaku color-grey-6 font-14 mr5"}></i>
|
||||
<span>代码库</span>
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
{
|
||||
item.menu_name === "issues" &&
|
||||
<li className={pathname==="issues" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/issues`, state }}>
|
||||
<i className={pathname==="issues" ? "iconfont icon-renwu color-grey-3 mr5 font-14":"iconfont icon-renwu color-grey-6 font-14 mr5"}></i>
|
||||
<span>易修 (Issue)</span>
|
||||
{projectDetail && projectDetail.issues_count ? <span className="num">{projectDetail.issues_count}</span> : ""}
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
{
|
||||
item.menu_name === "pulls" && projectDetail && parseInt(projectDetail.type) !== 2 && platform ?
|
||||
<li className={pathname==="pulls" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/pulls`, state }}>
|
||||
<i className={pathname==="pulls" ? "iconfont icon-hebingqingqiu1 color-grey-3 mr5 font-14":"iconfont icon-hebingqingqiu1 color-grey-6 font-14 mr5"}></i>
|
||||
<span>合并请求</span>
|
||||
{projectDetail && projectDetail.pull_requests_count ? <span className="num">{projectDetail.pull_requests_count}</span> : ""}
|
||||
</Link>
|
||||
</li>:""
|
||||
}
|
||||
{
|
||||
item.menu_name === "devops" && platform ?
|
||||
<li className={pathname==="devops" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/devops${open_devops ? `/dispose`:""}`, state }}>
|
||||
<i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流(beta版)
|
||||
{projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""}
|
||||
</Link>
|
||||
</li>
|
||||
:""
|
||||
}
|
||||
{
|
||||
item.menu_name === "source" &&
|
||||
<li className={pathname==="source" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/source`, state }}>
|
||||
<i className={pathname==="source" ? "iconfont icon-ziyuanpaihanghetuijian color-grey-3 mr5 font-14":"iconfont icon-ziyuanpaihanghetuijian color-grey-6 font-14 mr5"}></i>
|
||||
<span>资源库</span>
|
||||
{projectDetail && projectDetail.source_count ? <span className="num">{projectDetail.source_count}</span> :""}
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
{
|
||||
item.menu_name === "versions" &&
|
||||
<li className={pathname==="milestones" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/milestones`, state }}>
|
||||
<i className={pathname==="milestones" ? "iconfont icon-lichengbei color-grey-3 mr5 font-14":"iconfont icon-lichengbei color-grey-6 font-14 mr5"}></i>
|
||||
<span>里程碑</span>
|
||||
{projectDetail && projectDetail.versions_count ? <span className="num">{projectDetail.versions_count}</span> :""}
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
{
|
||||
item.menu_name === "activity" &&
|
||||
<li className={pathname==="activity" ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${owner}/${projectsId}/activity`, state }}>
|
||||
<i className={pathname==="activity" ? "iconfont icon-tongzhi color-grey-3 mr5 font-14":"iconfont icon-tongzhi color-grey-6 font-14 mr5"}></i>
|
||||
<span>动态</span>
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
</React.Fragment>
|
||||
)
|
||||
})
|
||||
}
|
||||
{
|
||||
isManager && platform ?
|
||||
<li className={pathname === "setting" ? "active" : ""}>
|
||||
<Link to={`/projects/${owner}/${projectsId}/setting`}>
|
||||
<i className={url && url.indexOf("/setting") > 0 ? "iconfont icon-cangku color-grey-3 mr5 font-14":"iconfont icon-cangku color-grey-6 font-14 mr5"}></i>
|
||||
<span>仓库设置</span>
|
||||
</Link>
|
||||
</li>:""
|
||||
}
|
||||
</ul>
|
||||
:
|
||||
<Skeleton paragraph={false} active={true}/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default DetailBanner;
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import React , { forwardRef, useEffect } from 'react';
|
||||
import {Form , Modal , Input } from 'antd';
|
||||
import "./sub.scss";
|
||||
const { TextArea } = Input;
|
||||
function UpdateDescModal({form , visible , onCancel , onOk,desc,website}){
|
||||
const { getFieldDecorator, validateFields , setFieldsValue } = form;
|
||||
|
||||
useEffect(()=>{
|
||||
if(desc || website){
|
||||
setFieldsValue({
|
||||
website,desc
|
||||
})
|
||||
}
|
||||
},[desc,website])
|
||||
|
||||
function onSure(){
|
||||
validateFields((err,values)=>{
|
||||
if(!err){
|
||||
onCancel();
|
||||
onOk(values.desc,values.website)
|
||||
}
|
||||
})
|
||||
}
|
||||
return(
|
||||
<Modal
|
||||
title={"修改信息"}
|
||||
closable={false}
|
||||
visible={visible}
|
||||
centered
|
||||
onCancel={onCancel}
|
||||
onOk={onSure}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
width="400px"
|
||||
className={"descmodal"}
|
||||
>
|
||||
<Form>
|
||||
<Form.Item label="仓库描述">
|
||||
{getFieldDecorator("desc",{
|
||||
rules:[]
|
||||
})(
|
||||
<TextArea placeholder="仓库描述" rows={4} maxLength={200}/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="website">
|
||||
{getFieldDecorator("website",{
|
||||
rules:[]
|
||||
})(
|
||||
<Input placeholder="website链接"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default Form.create()(forwardRef(UpdateDescModal));
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.boxPanel{
|
||||
width: 1200px;
|
||||
margin:0px auto;
|
||||
padding:20px 0px;
|
||||
min-height: 500px;
|
||||
.contrbuteList{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
& > div{
|
||||
width: 20%;
|
||||
}
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
.descmodal{
|
||||
.ant-row.ant-form-item{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ant-col.ant-form-item-label{
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -47,7 +47,7 @@ function Files({data,history,owner,projectsId}){
|
|||
<span>{item.name}</span>
|
||||
</AlignCenter>
|
||||
<span>
|
||||
<Button className="mr20" onClick={()=>{history.push(`/projects/${owner}/${projectsId}${item.sha ? `/branch/${truncateCommitId(item.sha)}?`:"?"}url=${item.name}`)}}>查看文件</Button>
|
||||
<Button className="mr20" onClick={()=>{history.push(`/projects/${owner}/${projectsId}/tree/${truncateCommitId(item.sha)}/${item.name}`)}}>查看文件</Button>
|
||||
<span className="color-green">+{item.addition}</span>
|
||||
<span className="color-red ml20">-{item.deletion}</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ class MergeItem extends Component {
|
|||
<span className="ml15">
|
||||
<Tag className="pr-branch-tag">
|
||||
<Link
|
||||
to={`/projects/${item.is_original ? item.fork_project_user : owner}/${ item.is_original ? item.fork_project_identifier : projectsId }/branch/${item.pull_request_head}`}
|
||||
to={`/projects/${item.is_original ? item.fork_project_user : owner}/${ item.is_original ? item.fork_project_identifier : projectsId }/tree/${item.pull_request_head}`}
|
||||
className="maxW200px hide-1 ver-middle"
|
||||
>
|
||||
{item.is_original
|
||||
|
|
@ -116,7 +116,7 @@ class MergeItem extends Component {
|
|||
</span>
|
||||
<Tag className="pr-branch-tag">
|
||||
<Link
|
||||
to={`/projects/${owner}/${projectsId}/branch/${item.pull_request_base}`}
|
||||
to={`/projects/${owner}/${projectsId}/tree/${item.pull_request_base}`}
|
||||
className="maxW200px hide-1 ver-middle"
|
||||
>
|
||||
{/* {item.is_fork ? item.pull_request_base : `${item.author_name}:${item.pull_request_base}`} */}
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ class MessageCount extends Component {
|
|||
SpinMerge: false,
|
||||
edit_spin: false,
|
||||
pr_status: undefined,
|
||||
pull_request:undefined,
|
||||
|
||||
copyVisible:false,
|
||||
};
|
||||
|
|
@ -69,11 +70,12 @@ class MessageCount extends Component {
|
|||
axios
|
||||
.get(url)
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
if (result && result.data) {
|
||||
this.setState({
|
||||
data: result.data,
|
||||
SpinFlag: false,
|
||||
pr_status: result.data && result.data.pull_request && result.data.pull_request.status,
|
||||
pr_status: result.data.pull_request && result.data.pull_request.status,
|
||||
pull_request:result.data.pull_request
|
||||
});
|
||||
} else {
|
||||
this.setState({ SpinFlag: false });
|
||||
|
|
@ -209,7 +211,7 @@ class MessageCount extends Component {
|
|||
};
|
||||
|
||||
commentCtx = (v) => {
|
||||
return <RenderHtml className="break_word_comments imageLayerParent" value={v} />;
|
||||
return <RenderHtml className="break_word_comments imageLayerParent" value={v} url={this.props.history.location}/>;
|
||||
};
|
||||
|
||||
setCopyVisible=(e)=>{
|
||||
|
|
@ -249,7 +251,8 @@ class MessageCount extends Component {
|
|||
isSpin,
|
||||
ismesrge,
|
||||
SpinFlag,
|
||||
copyVisible
|
||||
copyVisible,
|
||||
pull_request
|
||||
} = this.state;
|
||||
const { current_user, projectDetail } = this.props;
|
||||
const menu = (
|
||||
|
|
@ -268,9 +271,11 @@ class MessageCount extends Component {
|
|||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const permission = projectDetail && (projectDetail.permission === "Admin" || projectDetail.permission === "Owner" || projectDetail.permission === "Manager");
|
||||
const userLogin = current_user && current_user.login;
|
||||
const operate = userLogin && projectDetail && pr_status === 0 && permission;
|
||||
return (
|
||||
<div className="">
|
||||
<div>
|
||||
{data ? (
|
||||
<div>
|
||||
<div className="main">
|
||||
|
|
@ -300,7 +305,7 @@ class MessageCount extends Component {
|
|||
<div className="mt15">
|
||||
<Tag className="pr-branch-tag">
|
||||
<Link
|
||||
to={`/projects/${owner}/${data.pull_request.is_original?data.pull_request.fork_project_id:projectsId}/branch/${data.pull_request.head}`}
|
||||
to={`/projects/${owner}/${data.pull_request.is_original?data.project_identifier:projectsId}/tree/${data.pull_request.head}`}
|
||||
className="ver-middle"
|
||||
>
|
||||
{data.pull_request.is_original ? data.pull_request.fork_project_user : data.issue.project_author_name}:{data.pull_request.head}
|
||||
|
|
@ -315,7 +320,7 @@ class MessageCount extends Component {
|
|||
</span>
|
||||
<Tag className="pr-branch-tag">
|
||||
<Link
|
||||
to={`/projects/${owner}/${projectsId}/branch/${data.pull_request.base}`}
|
||||
to={`/projects/${owner}/${projectsId}/tree/${data.pull_request.base}`}
|
||||
className="ver-middle"
|
||||
>
|
||||
{/* {data.pull_request.is_fork ? data.pull_request.base : `${data.pull_request.pull_request_user}:${data.pull_request.base}`} */}
|
||||
|
|
@ -401,9 +406,7 @@ class MessageCount extends Component {
|
|||
</Dropdown>
|
||||
<span>下载为<i className="iconfont icon-sanjiaoxing-down color-blue"></i></span>
|
||||
</span> */}
|
||||
{current_user && projectDetail &&
|
||||
pr_status === 0 &&
|
||||
projectDetail.permission !=="Reporter" && (
|
||||
{operate && (
|
||||
<Button
|
||||
type="green"
|
||||
ghost
|
||||
|
|
@ -413,7 +416,7 @@ class MessageCount extends Component {
|
|||
编辑
|
||||
</Button>
|
||||
)}
|
||||
{projectDetail && projectDetail.permission !=="Reporter" && pr_status === 0 && (
|
||||
{operate && (
|
||||
<Button
|
||||
type="danger"
|
||||
ghost
|
||||
|
|
|
|||
|
|
@ -272,8 +272,8 @@ class merge extends Component {
|
|||
</React.Fragment>
|
||||
);
|
||||
return (
|
||||
<div className="main">
|
||||
<div className="topWrapper" style={{borderBottom:"1px solid #eee"}}>
|
||||
<div className="main" style={{padding:"0px"}}>
|
||||
<div className="topWrapper" style={{borderBottom:"none",padding:"20px"}}>
|
||||
<div className="target-detail-search">
|
||||
<Search
|
||||
placeholder="输入关键字搜索合并请求"
|
||||
|
|
@ -405,26 +405,26 @@ class merge extends Component {
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{data && data.search_count && data.search_count > 0 ? (
|
||||
<div style={{minHeight:"470px"}}>
|
||||
<Spin spinning={isSpin}>
|
||||
<OrderItem
|
||||
issues={issues}
|
||||
search_count={search_count}
|
||||
page={select_params.page}
|
||||
limit={select_params.limit}
|
||||
project_name={data.project_name}
|
||||
project_author_name={data.project_author_name}
|
||||
{...this.props}
|
||||
{...this.state}
|
||||
></OrderItem>
|
||||
{Paginations}
|
||||
</Spin>
|
||||
</div>
|
||||
) : (
|
||||
<NoneData _html="暂时还没有相关数据!" projectsId={projectsId} owner={owner} />
|
||||
)}
|
||||
<div style={{minHeight:"470px"}}>
|
||||
<Spin spinning={isSpin}>
|
||||
{data && data.search_count && data.search_count > 0 ? (
|
||||
<div>
|
||||
<OrderItem
|
||||
issues={issues}
|
||||
search_count={search_count}
|
||||
page={select_params.page}
|
||||
limit={select_params.limit}
|
||||
project_name={data.project_name}
|
||||
project_author_name={data.project_author_name}
|
||||
{...this.props}
|
||||
{...this.state}
|
||||
></OrderItem>
|
||||
{Paginations}
|
||||
</div>
|
||||
):""}
|
||||
{ data && data.issues && data.issues.length === 0 ? <NoneData _html="暂时还没有相关数据!" projectsId={projectsId} owner={owner} /> :""}
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ class MergeFooter extends Component {
|
|||
}
|
||||
{
|
||||
filesData && filesData.files && filesData.files.length>0 &&
|
||||
<TabPane tab={
|
||||
<TabPane tab={
|
||||
<span><span className="font-16">文件</span>
|
||||
{filesCount > 0 && <span className="tabNum">{filesCount}</span>}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -266,7 +266,7 @@ class MergeForm extends Component {
|
|||
</Form.Item>
|
||||
<MDEditor
|
||||
placeholder={"请输入合并请求的描述..."}
|
||||
height={350}
|
||||
height={450}
|
||||
mdID={"merge-new-description"}
|
||||
initValue={desc}
|
||||
onChange={this.onContentChange}
|
||||
|
|
|
|||
|
|
@ -23,18 +23,23 @@ class Index extends Component {
|
|||
LanguageList: undefined,
|
||||
GitignoreList: undefined,
|
||||
LicensesList: undefined,
|
||||
OwnerList: undefined,
|
||||
isSpin: false,
|
||||
|
||||
project_language_id: undefined,
|
||||
project_category_id: undefined,
|
||||
license_id: undefined,
|
||||
ignore_id: undefined,
|
||||
owners_id:undefined,
|
||||
owners_name:undefined,
|
||||
|
||||
project_language_list: undefined,
|
||||
project_category_list: undefined,
|
||||
license_list: undefined,
|
||||
ignore_list: undefined,
|
||||
|
||||
owners_list:undefined,
|
||||
|
||||
project_language_name: undefined,
|
||||
project_category_name: undefined,
|
||||
license_name: undefined,
|
||||
|
|
@ -42,6 +47,8 @@ class Index extends Component {
|
|||
}
|
||||
}
|
||||
componentDidMount = () => {
|
||||
// 获取拥有者列表
|
||||
this.getOwner();
|
||||
// 获取项目类别
|
||||
this.getCategory();
|
||||
// 获取项目语言
|
||||
|
|
@ -50,7 +57,6 @@ class Index extends Component {
|
|||
this.getGitignore();
|
||||
// 获取开源许可证
|
||||
this.getLicenses();
|
||||
|
||||
}
|
||||
componentDidUpdate=(prevPros)=>{
|
||||
if(prevPros && this.props && !this.props.checkIfLogin()){
|
||||
|
|
@ -58,6 +64,31 @@ class Index extends Component {
|
|||
return
|
||||
}
|
||||
}
|
||||
|
||||
getOwner=()=>{
|
||||
const { OIdentifier } = this.props.match.params;
|
||||
const url = `/owners.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result && result.data){
|
||||
let owner = result.data.owners;
|
||||
if(OIdentifier){
|
||||
owner = owner.filter(item=>item.name === OIdentifier);
|
||||
this.props.form.setFieldsValue({
|
||||
user_id:OIdentifier
|
||||
})
|
||||
owner && this.setState({
|
||||
owners_id:owner[0].id,
|
||||
owners_name:owner[0].name
|
||||
})
|
||||
}
|
||||
this.setOptionsList(owner, 'owners');
|
||||
this.setState({
|
||||
OwnerList: owner,
|
||||
})
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
getCategory = () => {
|
||||
const url = `/project_categories.json`
|
||||
axios.get(url).then((result) => {
|
||||
|
|
@ -130,11 +161,10 @@ class Index extends Component {
|
|||
this.setState({
|
||||
isSpin: true
|
||||
})
|
||||
const { current_user } = this.props;
|
||||
const { projectsType } = this.props.match.params;
|
||||
const { project_language_id, project_category_id, license_id, ignore_id } = this.state;
|
||||
const { project_language_id, project_category_id, license_id, ignore_id , owners_id , owners_name } = this.state;
|
||||
const decoderPass = Base64.encode(values.password);
|
||||
const url = projectsType === "deposit" ? "/projects.json" : "/projects/migrate.json";
|
||||
const url = (projectsType && projectsType === "mirror") ? "/projects/migrate.json" : "/projects.json";
|
||||
axios.post(url, {
|
||||
...values,
|
||||
auth_password:decoderPass,
|
||||
|
|
@ -142,15 +172,15 @@ class Index extends Component {
|
|||
project_category_id,
|
||||
license_id,
|
||||
ignore_id,
|
||||
user_id: current_user.user_id
|
||||
user_id:owners_id
|
||||
}).then((result) => {
|
||||
if (result) {
|
||||
if (result.data.id) {
|
||||
this.setState({
|
||||
isSpin: false
|
||||
})
|
||||
this.props.showNotification(`${projectsType === "deposit" ? "托管" : "镜像"}项目创建成功!`);
|
||||
this.props.history.push(`/projects/${current_user && current_user.login}/${result.data.identifier}`);
|
||||
this.props.showNotification(`${projectsType && projectsType === "mirror" ? "镜像" : "托管"}项目创建成功!`);
|
||||
this.props.history.push(`/projects/${owners_name}/${result.data.identifier}`);
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
|
|
@ -230,20 +260,13 @@ class Index extends Component {
|
|||
const { projectsType } = this.props.match.params;
|
||||
|
||||
const {
|
||||
preType,
|
||||
languageValue,
|
||||
gitignoreType,
|
||||
LicensesType,
|
||||
|
||||
CategoryList,
|
||||
LanguageList,
|
||||
GitignoreList,
|
||||
LicensesList,
|
||||
isSpin,
|
||||
project_language_name,
|
||||
project_category_name,
|
||||
license_name,
|
||||
ignore_name,
|
||||
owners_list,
|
||||
OwnerList,
|
||||
|
||||
project_language_list,
|
||||
project_category_list,
|
||||
|
|
@ -253,14 +276,34 @@ class Index extends Component {
|
|||
mirrorCheck
|
||||
} = this.state;
|
||||
return (
|
||||
<div className="main back-white">
|
||||
<div className="main back-white" style={{padding:"0px",border:"none"}}>
|
||||
<div className="newPanel">
|
||||
<div className="newPanel_title">创建{projectsType === "deposit" ? "托管" : "镜像"}项目</div>
|
||||
<div className="newPanel_title">创建{projectsType && projectsType === "mirror" ? "镜像" : "托管"}项目</div>
|
||||
<Spin spinning={isSpin}>
|
||||
<Form>
|
||||
<div className="newPanel_content">
|
||||
<Form.Item
|
||||
label="拥有者"
|
||||
>
|
||||
{getFieldDecorator('user_id', {
|
||||
rules: [{
|
||||
required: true, message: '请选择拥有者'
|
||||
},{
|
||||
validator:(rule, value, callback) => this.checkId(rule, value, callback, OwnerList, '拥有者')
|
||||
}],
|
||||
})(
|
||||
<AutoComplete
|
||||
placeholder="请选择拥有者"
|
||||
onChange={(value, e) => this.ChangePlatform(value, e, 'owners', OwnerList)}
|
||||
className="plateAutoComplete"
|
||||
onBlur={(value) => this.blurCategory(value, OwnerList, "owners")}
|
||||
>
|
||||
{owners_list}
|
||||
</AutoComplete>
|
||||
)}
|
||||
</Form.Item>
|
||||
{
|
||||
projectsType !== "deposit" &&
|
||||
projectsType && projectsType === "mirror" &&
|
||||
<React.Fragment>
|
||||
<Form.Item
|
||||
label="镜像版本库地址"
|
||||
|
|
@ -278,7 +321,7 @@ class Index extends Component {
|
|||
</React.Fragment>
|
||||
}
|
||||
{
|
||||
projectsType !== "deposit" &&
|
||||
projectsType && projectsType === "mirror" &&
|
||||
<React.Fragment>
|
||||
<p className="mt10 mb10 color-grey-3 pointer" onClick={this.changeMirrorCheck}>需要授权验证<i className={mirrorCheck?"iconfont icon-xiajiantou font-13 ml10 color-grey-8":"iconfont icon-youjiantou font-13 ml10 color-grey-8"}></i></p>
|
||||
{
|
||||
|
|
@ -385,7 +428,7 @@ class Index extends Component {
|
|||
)}
|
||||
</Form.Item>
|
||||
{
|
||||
projectsType === "deposit" &&
|
||||
(projectsType === "deposit" || !projectsType) &&
|
||||
<React.Fragment>
|
||||
<Form.Item
|
||||
label=".gitignore"
|
||||
|
|
@ -439,7 +482,7 @@ class Index extends Component {
|
|||
)}
|
||||
</Form.Item >
|
||||
{
|
||||
projectsType !== "deposit" &&
|
||||
projectsType && projectsType === "mirror" &&
|
||||
<Form.Item
|
||||
label="迁移类型："
|
||||
style={{ margin: "0px" }}
|
||||
|
|
|
|||
|
|
@ -54,14 +54,12 @@ class UserSubmitComponent extends Component {
|
|||
const { getTopCount } = this.props;
|
||||
getTopCount && getTopCount(values.branchname);
|
||||
}
|
||||
let url = values.branchname
|
||||
? `/projects/${owner}/${projectsId}/branch/${values.branchname}`
|
||||
: `/projects/${owner}/${projectsId}`;
|
||||
let url = `/projects/${owner}/${projectsId}${values.branchname ? `/tree/${values.branchname}`: (branch ? `/tree/${branch}` : "")}`;
|
||||
this.props.history.push(url);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.setState({ isSpin: false });
|
||||
this.setState({ isSpin : false });
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
|
|
@ -73,7 +71,7 @@ class UserSubmitComponent extends Component {
|
|||
// 确认修改文件
|
||||
UpdateFile = () => {
|
||||
this.setState({ isSpin: true });
|
||||
const { branch, detail, content, filepath } = this.props;
|
||||
const { branch, detail, content , currentBranch } = this.props;
|
||||
const { projectsId , owner } = this.props.match.params;
|
||||
const { submitType } = this.state;
|
||||
const url = `/${owner}/${projectsId}/update_file.json`;
|
||||
|
|
@ -82,7 +80,7 @@ class UserSubmitComponent extends Component {
|
|||
axios
|
||||
.put(url, {
|
||||
filepath: detail.path,
|
||||
branch: branch,
|
||||
branch: submitType === "1" ? undefined : (currentBranch || branch),
|
||||
new_branch: submitType === "1" ? values.branchname : undefined,
|
||||
content: content,
|
||||
sha: detail.sha,
|
||||
|
|
@ -91,12 +89,9 @@ class UserSubmitComponent extends Component {
|
|||
.then((result) => {
|
||||
this.setState({ isSpin: false });
|
||||
if (result.data && result.data.status === 1) {
|
||||
let url = values.branchname
|
||||
? `/projects/${owner}/${projectsId}/branch/${values.branchname}`
|
||||
: `/projects/${owner}/${projectsId}`;
|
||||
|
||||
let url = `/projects/${owner}/${projectsId}${(values.branchname ? `/tree/${values.branchname}` : ((currentBranch || branch) ? `/tree/${currentBranch || branch}`:""))}`;
|
||||
this.props.history.push(url);
|
||||
this.props.showNotification("修改成功!");
|
||||
this.props.showNotification("文件修改成功!");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
|
|
@ -119,7 +114,7 @@ class UserSubmitComponent extends Component {
|
|||
const { editor_type } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<span className="df mt30" style={{ alignItems: "center" }}>
|
||||
<span className="df" style={{ alignItems: "center" }}>
|
||||
<Link to={`/users/${current_user && current_user.login}`} className="show-user-link" >
|
||||
<img
|
||||
src={getImageUrl(`images/${current_user && current_user.image_url}`)}
|
||||
|
|
@ -179,8 +174,7 @@ class UserSubmitComponent extends Component {
|
|||
</Radio>
|
||||
<Radio value="1">
|
||||
<Icon type="pull-request" className="mr5" />
|
||||
为此提交创建一个<span className="font-bd">新的分支</span>
|
||||
并发起合并请求
|
||||
为此提交创建一个<span className="font-bd">新的分支</span>并发起合并请求
|
||||
</Radio>
|
||||
</Radio.Group>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -61,10 +61,6 @@
|
|||
.screwPanel .ant-radio-wrapper{
|
||||
display: block;
|
||||
}
|
||||
.branchTable{
|
||||
border:1px solid #eaeaea;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.branchTable .margin-view-overlays{
|
||||
border-right: 1px solid #eaeaea;
|
||||
background-color: #fbfbfb;
|
||||
|
|
|
|||
|
|
@ -56,18 +56,19 @@ class m_editor extends Component {
|
|||
editorWillMount={this.editorWillMount}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!readOnly && (
|
||||
<UserSubmitComponent
|
||||
{...this.props}
|
||||
{...this.state}
|
||||
filepath={`${this.props.filepath}`}
|
||||
content={editorValue}
|
||||
editor_type={editorType}
|
||||
currentBranch={currentBranch}
|
||||
></UserSubmitComponent>
|
||||
)}
|
||||
</div>
|
||||
{!readOnly && (
|
||||
<div style={{padding:"20px",marginTop:"20px",borderTop:"1px solid #d9d9d9"}}>
|
||||
<UserSubmitComponent
|
||||
{...this.props}
|
||||
{...this.state}
|
||||
filepath={`${this.props.filepath}`}
|
||||
content={editorValue}
|
||||
editor_type={editorType}
|
||||
currentBranch={currentBranch}
|
||||
></UserSubmitComponent>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,6 @@ class UploadFile extends Component {
|
|||
{...this.props}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<UserSubmitComponent
|
||||
{...this.props}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue